@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            --bg-deep: #0A0A0B;
            --bg-card: #171618;
            --bg-elevated: #252427;
            --bg-hover: #3B393E;

            --text-primary: #F4F3F5;
            --text-secondary: #A8A4AD;
            --text-muted: #756F7C;

            --accent: #BE5049;
            --accent-bright: #BE5049;
            --accent-soft: rgba(190, 80, 73, 0.15);
            --accent-glow: rgba(190, 80, 73, 0.4);

            --secondary: #FB923C;
            --signal: #BE5049;

            --border: rgba(255, 255, 255, 0.07);
            --border-accent: rgba(190, 80, 73, 0.25);

            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;

            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

            /* Slate dimensions */
            --slate-card-width: 85%;
            --slate-media-height: 180px;
        }

        /* ===== LIGHT MODE ===== */
        [data-theme="light"] {
            --bg-deep:        #F5F2EE;
            --bg-card:        #FFFFFF;
            --bg-elevated:    #EDE9E3;
            --bg-hover:       #E4DFD8;

            --text-primary:   #1C1917;
            --text-secondary: #57534E;
            --text-muted:     #78716C;

            --accent:         #B5423B;
            --accent-bright:  #B5423B;
            --accent-soft:    rgba(181, 66, 59, 0.10);
            --accent-glow:    rgba(181, 66, 59, 0.25);

            --secondary:      #EA8C2D;
            --signal:         #B5423B;

            --border:         rgba(0, 0, 0, 0.10);
            --border-accent:  rgba(181, 66, 59, 0.25);
        }

        [data-theme="light"] body { background: #EDE9E3; }

        html, body {
            height: 100%;
            height: 100dvh; /* Dynamic viewport height - responds to mobile keyboard */
            overflow: hidden;
            overscroll-behavior-y: auto;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-deep);
            color: var(--text-primary);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .app-shell {
            width: 100%;
            min-height: 100%;
            min-height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: stretch;
        }

        /* Inline checkout in wallet section */
        #stripeCheckoutContainer {
            display: none;
            margin-top: 10px;
            border-radius: var(--radius-sm);
            overflow: hidden;
            width: 100%;
            background: #fff;
            border: 1px solid var(--border);
            padding: 12px;
        }
        #stripeCheckoutMount {
            display: block;
            width: 100%;
            min-height: 520px;
            background: #fff;
        }
        .stripe-checkout-loading {
            min-height: 520px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 0.9rem;
            text-align: center;
            padding: 20px;
        }
        .checkout-cancel-btn {
            width: 100%;
            margin-top: 8px;
            padding: 8px 12px;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            font-family: var(--font-sans);
            cursor: pointer;
        }
        .checkout-cancel-btn:hover {
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        .app {
            height: 100%;
            height: 100dvh; /* Dynamic viewport height - responds to mobile keyboard */
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            overscroll-behavior-y: auto;
        }

        @media (min-width: 980px) {
            body {
                background:
                    radial-gradient(circle at top, rgba(190, 80, 73, 0.12), transparent 38%),
                    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep) 100%);
            }

            .app-shell {
                padding: 24px;
                align-items: center;
            }

            .app {
                width: min(430px, 100%);
                max-width: 430px;
                height: min(920px, calc(100dvh - 48px));
                border: 1px solid var(--border);
                border-radius: 28px;
                box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
                background: var(--bg-deep);
            }
        }

        /* ===== SESSIONS ===== */
        .sessions-toggle-btn {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s var(--ease-out);
        }

        .sessions-toggle-btn:hover {
            color: var(--text-primary);
            border-color: var(--border-accent);
            background: rgba(255, 255, 255, 0.03);
        }

        .sessions-panel {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 240px;
            background: var(--bg-card);
            border-right: 1px solid var(--border);
            transform: translateX(-100%);
            transition: transform 0.22s var(--ease-out);
            z-index: 35;
            display: flex;
            flex-direction: column;
        }

        .app.sessions-open .sessions-panel {
            transform: translateX(0);
        }

        .header,
        .conversation,
        .input-area {
            margin-left: 0;
            transition: margin-left 0.22s var(--ease-out);
        }

        .app.sessions-open .header,
        .app.sessions-open .conversation,
        .app.sessions-open .input-area {
            margin-left: 240px;
        }

        .sessions-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-5) var(--space-3);
            border-bottom: 1px solid var(--border);
        }

        .sessions-title {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .sessions-new-btn {
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            height: 28px;
            padding: 0 10px;
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.2s var(--ease-out);
        }

        .sessions-new-btn:hover {
            color: var(--text-primary);
            border-color: var(--border-accent);
        }

        .sessions-list {
            list-style: none;
            margin: 0;
            padding: var(--space-2);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .sessions-item {
            border: 1px solid transparent;
            background: transparent;
            border-radius: var(--radius-sm);
            padding: 9px 10px;
            font-size: 0.78rem;
            color: var(--text-secondary);
            text-align: left;
            cursor: pointer;
            transition: all 0.18s var(--ease-out);
        }

        .sessions-item:hover {
            background: rgba(255, 255, 255, 0.03);
        }

        .sessions-item.active {
            border-left: 2px solid #BE5049;
            background: rgba(190, 80, 73, 0.08);
            color: var(--text-primary);
        }

        .sessions-empty {
            display: none;
            color: var(--text-muted);
            font-size: 0.82rem;
            text-align: center;
            padding: 28px 14px;
        }

        .sessions-toggle-btn {
            display: inline-flex;
        }

        .sessions-scrim {
            display: none;
        }

        /* ===== HEADER ===== */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-5) var(--space-4);
            position: relative;
            flex-shrink: 0;
            z-index: 10;
        }

        .header-logo {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .header-logo svg {
            width: 32px;
            height: 32px;
            transform: translateX(2px);
        }

        .header-links {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon-btn {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color 0.15s, background 0.15s;
            flex-shrink: 0;
            padding: 0;
        }

        .icon-btn:hover {
            color: var(--text-secondary);
            background: rgba(255,255,255,0.05);
        }

        .icon-btn.logged-in {
            color: var(--text-primary);
        }

        .saved-scrim {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s var(--ease-out);
            z-index: 140;
        }

        .saved-scrim.open { opacity: 1; pointer-events: auto; }

        .saved-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: min(360px, 100vw);
            height: 100dvh;
            background: var(--bg-card);
            border-left: 1px solid var(--border);
            transform: translateX(102%);
            transition: transform .22s var(--ease-out);
            z-index: 150;
            display: flex;
            flex-direction: column;
        }

        .saved-panel.open { transform: translateX(0); }

        .saved-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }

        .saved-title { font-size: 0.95rem; font-weight: 600; }

        .saved-close {
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 8px;
            width: 28px;
            height: 28px;
            cursor: pointer;
        }

        .saved-content { flex: 1; overflow-y: auto; padding: 10px 14px 16px; }
        .saved-empty { color: var(--text-muted); font-size: 0.88rem; padding: 20px 8px; }
        .saved-empty strong { color: var(--text-secondary); display: block; margin-bottom: 4px; }
        .saved-group-title { margin: 14px 0 8px; font-size: 0.75rem; color: var(--text-muted); letter-spacing: .6px; text-transform: uppercase; }
        .saved-item {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 8px;
            background: var(--bg-elevated);
        }
        .saved-item-title { font-size: 0.84rem; color: var(--text-primary); line-height: 1.35; }
        .saved-item-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

        .saved-toast {
            position: fixed;
            left: 50%;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
            transform: translate(-50%, 10px);
            background: rgba(18, 18, 23, 0.96);
            border: 1px solid var(--border);
            color: var(--text-primary);
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 0.82rem;
            line-height: 1.2;
            z-index: 210;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            max-width: min(420px, calc(100vw - 24px));
            text-align: center;
            box-shadow: 0 12px 30px rgba(0,0,0,0.35);
        }

        .saved-toast.show {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        /* Profile / Wallet Panel */
        .profile-scrim {
            display: none;
        }

        .profile-panel {
            position: absolute;
            top: 78px;
            left: 0;
            right: 0;
            bottom: 0;
            width: auto;
            height: auto;
            background: var(--bg-deep);
            border-left: none;
            border-top: 1px solid var(--border);
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s var(--ease-out);
            z-index: 20;
            display: flex;
            flex-direction: column;
        }
        .profile-panel.open { opacity: 1; pointer-events: auto; }

        .profile-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px 10px;
            border-bottom: none;
        }
        .profile-title { font-size: 0.95rem; font-weight: 600; }
        .profile-close { display: none; }

        .profile-content { flex: 1; overflow-y: auto; padding: 16px; }

        .profile-section {
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-subtle);
        }
        .profile-section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        .profile-section-icon {
            color: var(--accent);
            font-size: 1rem;
        }
        .profile-section-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .profile-section-desc {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .profile-stat-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
        }
        .profile-stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .profile-stat-value {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .profile-footer {
            margin-top: auto;
            padding: 16px 0;
            text-align: center;
        }
        .profile-tagline {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.4;
            margin-bottom: 8px;
        }
        .profile-made-with {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .wallet-section { margin-bottom: 24px; }
        .wallet-balance {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 16px;
        }
        .wallet-amount {
            font-size: 2rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .wallet-label {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .wallet-breakdown {
            display: flex;
            gap: 16px;
            padding: 12px;
            background: var(--bg-elevated);
            border-radius: 10px;
            margin-bottom: 16px;
        }
        .wallet-bucket {
            flex: 1;
            text-align: center;
        }
        .wallet-bucket-amount {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .wallet-bucket-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .history-section-title {
            font-size: 0.75rem;
            color: var(--text-muted);
            letter-spacing: .6px;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .history-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            background: var(--bg-elevated);
            border-radius: 10px;
            margin-bottom: 8px;
        }
        .history-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--accent-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .history-icon svg {
            width: 16px;
            height: 16px;
            color: var(--accent);
        }
        .history-details { flex: 1; min-width: 0; }
        .history-title {
            font-size: 0.85rem;
            color: var(--text-primary);
            line-height: 1.3;
        }
        .history-meta {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .history-amount {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent);
            white-space: nowrap;
        }
        .history-amount.earned { color: #22c55e; }
        .history-amount.spent { color: var(--text-muted); }

        .history-empty {
            text-align: center;
            padding: 24px;
            color: var(--text-muted);
            font-size: 0.88rem;
        }

        .profile-theme-section {
            margin-top: 14px;
            margin-bottom: 14px;
            padding-bottom: 14px;
        }
        .profile-theme-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.85rem;
            font-family: var(--font-sans);
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .profile-theme-btn:hover {
            border-color: var(--border-accent);
            background: rgba(255,255,255,0.04);
        }

        .profile-logout {
            margin-top: 24px;
            padding-top: 16px;
        }
        .profile-logout-btn {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .profile-logout-btn:hover {
            background: var(--bg-elevated);
            border-color: var(--border-accent);
        }

        .reset-btn {
            position: absolute;
            top: var(--space-5);
            right: var(--space-4);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: transparent;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s var(--ease-out);
            color: var(--text-muted);
            opacity: 0.6;
        }

        .reset-btn:hover {
            opacity: 1;
            border-color: var(--border-accent);
            color: var(--text-secondary);
        }

        .reset-btn:active {
            transform: scale(0.92);
        }

        .reset-btn svg {
            width: 14px;
            height: 14px;
        }

        /* ===== CONVERSATION ===== */
        .conversation {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: var(--space-4) 20px;
            display: flex;
            flex-direction: column;
            gap: var(--space-5);
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            overscroll-behavior-y: contain;
            overflow-anchor: none; /* Prevent browser scroll-anchoring from resetting position on DOM changes */
        }

        /* scrollbar styled below */

        /* Empty state */
        .empty-state {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px 28px 0;
            gap: 36px;
            position: relative;
        }

        /* No ambient glow — pure black bg */

        .hero-content {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .empty-title {
            font-size: 2.25rem;
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -1px;
            color: var(--text-primary);
        }

        .empty-title .gradient-text {
            color: var(--accent);
        }

        .empty-subtitle {
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.5;
            max-width: 380px;
        }

        .suggestions {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .suggestion-pill {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 20px;
            border-radius: 14px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 0.9375rem;
            font-family: var(--font-sans);
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 1.4;
            position: relative;
            z-index: 1;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }
        .suggestion-pill:hover {
            background: var(--accent-soft);
            border-color: var(--border-accent);
        }
        .suggestion-pill:active {
            transform: scale(0.98);
        }
        .pill-bar {
            width: 3px;
            height: 20px;
            border-radius: 2px;
            background: var(--accent);
            flex-shrink: 0;
        }
        .suggestions .suggestion-pill:nth-child(1) .pill-bar { background: #F59E0B; }
        .suggestions .suggestion-pill:nth-child(2) .pill-bar { background: #6366F1; }
        .suggestions .suggestion-pill:nth-child(3) .pill-bar { background: #94A3B8; }

        /* User Messages */
        .message {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            animation: messageSlide 0.4s var(--ease-out);
        }

        @keyframes messageSlide {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message.user {
            align-items: flex-end;
        }

        .message.user-shared {
            align-items: flex-start;
        }

        .message.assistant {
            align-items: flex-start;
        }

        .bubble {
            max-width: 85%;
            padding: var(--space-3) var(--space-4);
            font-size: 0.9375rem;
            line-height: 1.5;
            word-wrap: break-word;
            text-align: left;
        }

        .message.user .bubble {
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 0.9375rem;
            text-align: left;
            padding: 8px 0;
            border-radius: 0;
            max-width: 70%;
            margin-left: auto;
            font-weight: 400;
        }

        .message.assistant .bubble {
            background: none;
            color: var(--text-secondary);
            border-radius: 0;
            border: none;
            padding: 0 4px;
            max-width: 100%;
        }

        .message.user-shared .bubble {
            background: none;
            color: var(--text-primary);
            border: none;
            border-radius: 0;
            padding: 0;
            max-width: 100%;
            text-align: left;
            font-size: 15px;
            font-weight: 500;
            white-space: normal;
            overflow: visible;
        }

        /* Tuning indicator */
        .tuning {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--space-1);
            width: fit-content;
        }

        .waveform-static {
            display: flex;
            align-items: center;
            gap: 3px;
            height: 20px;
        }

        .waveform-static span {
            width: 3px;
            background: var(--accent);
            border-radius: 2px;
            animation: wave 1.2s ease-in-out infinite;
        }

        .waveform-static span:nth-child(1) { height: 8px; animation-delay: 0s; }
        .waveform-static span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
        .waveform-static span:nth-child(3) { height: 20px; animation-delay: 0.2s; }
        .waveform-static span:nth-child(4) { height: 16px; animation-delay: 0.3s; }
        .waveform-static span:nth-child(5) { height: 8px; animation-delay: 0.4s; }

        @keyframes wave {
            0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
            50% { transform: scaleY(1); opacity: 1; }
        }

        .tuning-text {
            font-size: 0.875rem;
            color: var(--text-muted);
            font-style: italic;
        }

        /* ===== RADIO SPEAKS - Content IS the message ===== */
        .radio-speaks {
            animation: messageSlide 0.4s var(--ease-out);
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            max-width: 100%;
        }

        /* Waveform Player - The hero */
        .waveform-player {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            max-width: 100%;
        }

        .waveform-player.loading {
            opacity: 0.7;
        }

        .player-main {
            display: flex;
            align-items: center;
            gap: var(--space-4);
        }

        .play-btn-large {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--player-accent, #BE5049);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s var(--ease-out);
            box-shadow: 0 4px 12px rgba(158,68,64,0.2);
            position: relative;
        }

        .play-btn-large::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 1.5px solid rgba(158,68,64,0.12);
            animation: pulse-ring 2s ease-in-out infinite;
        }

        @keyframes pulse-ring {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.06); opacity: 0.3; }
        }

        .play-btn-large:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 28px rgba(158,68,64,0.3);
        }

        .play-btn-large:active {
            transform: scale(0.95);
        }

        .play-btn-large svg {
            width: 22px;
            height: 22px;
            fill: #ffffff;
        }

        .play-btn-large .play-icon {
            margin-left: 2px;
        }

        /* Waveform visualization — bar fallback for voice bubbles */
        .waveform-viz {
            flex: 1;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2px;
            cursor: pointer;
        }

        .waveform-bar {
            flex: 1;
            background: var(--bg-hover);
            border-radius: 2px;
            transition: background 0.15s, height 0.3s var(--ease-out);
            min-height: 4px;
        }

        .waveform-bar.active {
            background: var(--player-accent, #BE5049);
        }

        .waveform-bar.played {
            background: var(--player-accent, #BE5049);
            opacity: 0.3;
        }

        .waveform-player.playing .waveform-bar {
            animation: breathe 2s ease-in-out infinite;
        }

        .waveform-player.playing .waveform-bar:nth-child(odd) {
            animation-delay: 0.1s;
        }

        @keyframes breathe {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* ECG waveform removed — using bars for all players */

        .player-time {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            min-width: 40px;
            text-align: right;
        }

        .loading-spinner {
            width: 22px;
            height: 22px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Key Points */
        .key-points {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            padding: 0 var(--space-1);
        }

        .key-point {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            font-size: 0.875rem;
            line-height: 1.5;
            color: var(--text-secondary);
        }

        .key-point::before {
            content: '·';
            color: var(--accent);
            font-weight: bold;
            flex-shrink: 0;
        }

        /* Podcast snippet - 2 lines of text with expand */
        .podcast-snippet-wrapper {
            padding: 0 var(--space-1);
        }

        .podcast-snippet {
            font-size: 0.9rem;
            line-height: 1.5;
            color: var(--text-secondary);
            font-style: italic;
        }

        .podcast-snippet.collapsed {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .podcast-toggle {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            padding: var(--space-1) 0;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .podcast-toggle:hover {
            opacity: 1;
        }

        /* Continuation section - collapsed by default */
        .continuation-section { display: none !important; }
        .continuation-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--accent-soft);
            border: 1px solid var(--border-accent);
            border-radius: 20px;
            color: var(--accent);
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.03em;
            cursor: pointer;
            padding: 6px 14px 6px 10px;
            transition: all 0.2s;
        }
        .continuation-trigger:hover {
            background: var(--accent-glow);
            border-color: var(--accent);
            color: var(--accent);
        }
        .continuation-trigger .plus-icon {
            transition: transform 0.2s;
            line-height: 1;
        }
        .continuation-trigger.expanded .plus-icon {
            transform: rotate(45deg);
        }
        .continuation-carousel {
            display: none;
            flex-direction: column;
            gap: var(--space-3);
            margin-top: var(--space-3);
        }
        .continuation-carousel.visible {
            display: flex;
        }
        .continuation-card {
            flex: 0 0 85%;
            max-width: 320px;
            scroll-snap-align: start;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: var(--space-3);
        }
        .continuation-card .mini-player {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .continuation-card .mini-play-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--accent);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .continuation-card .mini-play-btn svg {
            width: 14px;
            height: 14px;
            fill: white;
        }
        .continuation-card .mini-play-btn .pause-icon { display: none; }
        .continuation-card .mini-play-btn.playing .play-icon { display: none; }
        .continuation-card .mini-play-btn.playing .pause-icon { display: block; }
        .continuation-card .mini-waveform {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 2px;
            height: 24px;
            cursor: pointer;
        }
        .continuation-card .mini-waveform .bar {
            width: 3px;
            background: var(--text-muted);
            border-radius: 1px;
            transition: background 0.1s;
        }
        .continuation-card .mini-waveform .bar.played {
            background: var(--accent);
            opacity: 0.5;
        }
        .continuation-card .mini-waveform .bar.active {
            background: var(--accent);
        }
        .continuation-card .mini-time {
            font-size: 0.7rem;
            color: var(--text-muted);
            min-width: 32px;
            text-align: right;
        }
        .continuation-card .cont-author {
            font-size: 0.7rem;
            color: var(--accent);
            margin-bottom: var(--space-1);
            font-weight: 500;
        }
        .continuation-card .cont-text {
            font-size: 0.8rem;
            color: var(--text-secondary);
            line-height: 1.5;
            font-style: italic;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .continuation-card .cont-text.expanded {
            -webkit-line-clamp: unset;
        }
        .continuation-card .cont-toggle {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 0.7rem;
            cursor: pointer;
            padding: 4px 0 0;
        }

        .rec-header {
            padding: var(--space-3) var(--space-4) 0;
        }
        .rec-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.3;
        }
        .rec-author {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .source-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-radius: 4px;
            width: fit-content;
        }

        .source-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px 0;
            font-size: 0.75rem;
            color: var(--text-muted);
            letter-spacing: 0.01em;
        }

        .source-meta .source-icon {
            font-size: 0.7rem;
        }

        .source-meta .source-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .source-meta .source-timestamp {
            color: var(--text-secondary);
        }

        /* Video container */
        .video-inline {
            aspect-ratio: 16/9;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            overflow: hidden;
            position: relative;
        }

        .video-thumbnail-wrapper {
            width: 100%;
            height: 100%;
            cursor: pointer;
            position: relative;
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-play-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .video-thumbnail-wrapper:hover .video-play-overlay {
            background: rgba(0, 0, 0, 0.5);
        }

        .video-play-overlay svg {
            width: 56px;
            height: 56px;
            fill: white;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
            transition: transform 0.2s var(--ease-spring);
        }

        .video-thumbnail-wrapper:hover .video-play-overlay svg {
            transform: scale(1.1);
        }

        .video-iframe-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .video-iframe-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* ===== INPUT AREA ===== */
        .input-area {
            padding: var(--space-4);
            padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px) + 20px);
            background: linear-gradient(to top, var(--bg-deep) 70%, transparent);
            position: relative;
            z-index: 15;
        }

        .input-container {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
            transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
        }

        .input-container:focus-within {
            border-color: var(--border-accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .input-field {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 1rem;
            color: var(--text-primary);
            outline: none;
            font-family: var(--font-sans);
            padding: var(--space-2) 0;
        }

        .input-field::placeholder {
            color: var(--text-muted);
        }

        .send-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--accent);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            opacity: 0.4;
            transition: all 0.2s var(--ease-out);
            box-shadow: 0 4px 16px var(--accent-glow);
            position: relative;
            z-index: 2;
            touch-action: manipulation;
        }

        .mic-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--bg-elevated);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            opacity: 0.4;
            transition: all 0.2s var(--ease-out);
            position: relative;
            z-index: 2;
            touch-action: manipulation;
        }

        .send-btn.active, .mic-btn.active {
            opacity: 1;
            box-shadow: 0 2px 12px var(--accent-glow);
        }

        .mic-btn {
            opacity: 0.7;
            background: var(--bg-elevated);
            transition: all 0.3s var(--ease-out);
        }

        .mic-btn.recording {
            opacity: 1;
            background: #ef4444;
            animation: pulse-red 1.5s ease-in-out infinite;
        }

        .mic-btn:hover:not(.recording) {
            opacity: 0.9;
            background: var(--bg-hover);
        }

        @keyframes pulse-red {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
            50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
        }

        .send-btn svg {
            width: 18px;
            height: 18px;
            stroke: #ffffff;
            stroke-width: 2.5;
            fill: none;
        }
        .mic-btn svg {
            width: 18px;
            height: 18px;
            stroke: var(--text-secondary);
            stroke-width: 2.5;
            fill: none;
        }

        .send-btn:active, .mic-btn:active {
            transform: scale(0.92);
        }

        .recording-indicator {
            display: none;
            align-items: center;
            gap: var(--space-2);
            font-size: 0.75rem;
            color: #ef4444;
        }

        .recording-indicator.visible { display: flex; }
        .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: blink 1s infinite; }
        @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

        /* Auth modal */
        .auth-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 100;
            align-items: center; justify-content: center;
        }
        .auth-overlay.visible { display: flex; }
        .auth-modal {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            width: min(320px, calc(100vw - 32px));
            display: flex; flex-direction: column; gap: var(--space-4);
        }
        .auth-modal h3 { text-align: center; font-size: 1.1rem; font-weight: 500; }
        .auth-modal input {
            width: 100%; padding: var(--space-3);
            background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: var(--radius-sm); color: var(--text-primary);
            font-size: 16px; outline: none;
        }
        .auth-modal input:focus { border-color: var(--border-accent); }
        .auth-modal button {
            padding: var(--space-3); border-radius: var(--radius-sm);
            border: none; font-size: 0.9rem; cursor: pointer; font-weight: 500;
        }
        .auth-modal .btn-primary { background: var(--accent); color: white; }
        .auth-modal .btn-secondary { background: transparent; color: var(--text-muted); }
        .auth-error { color: #ef4444; font-size: 0.8rem; text-align: center; display: none; }
        .auth-divider {
            display: flex; align-items: center; gap: var(--space-3);
            color: var(--text-muted); font-size: 0.8rem;
        }
        .auth-divider::before, .auth-divider::after {
            content: ''; flex: 1; height: 1px; background: var(--border);
        }
        .auth-social-btn {
            display: flex; align-items: center; justify-content: center; gap: var(--space-3);
            width: 100%; padding: var(--space-3); border-radius: var(--radius-sm);
            border: 1px solid var(--border); font-size: 0.9rem; cursor: pointer;
            font-weight: 500; background: var(--bg-elevated); color: var(--text-primary);
            transition: border-color 0.15s;
        }
        .auth-social-btn:hover { border-color: var(--border-accent); }
        .auth-social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .btn-google {
            display: flex; align-items: center; justify-content: center;
            width: 100%; padding: var(--space-3); border-radius: var(--radius-sm);
            border: 1px solid var(--border); font-size: 0.9rem; cursor: pointer;
            font-weight: 500; background: var(--bg-elevated); color: var(--text-primary);
            transition: border-color 0.15s;
        }
        .btn-google:hover { border-color: var(--border-accent); }
        .auth-invite-input {
            width: 100%; padding: var(--space-3);
            background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: var(--radius-sm); color: var(--text-primary);
            font-size: 14px; outline: none; font-family: var(--font-mono);
            letter-spacing: 0.05em;
        }
        .auth-invite-input:focus { border-color: var(--border-accent); }
        .auth-invite-label { font-size: 0.8rem; color: var(--text-muted); }
        .auth-invited-by { font-size: 0.85rem; color: var(--text-secondary); text-align: center; }

        /* Deep Dive modal */
        .deepdive-page {
            display: none;
            position: absolute;
            top: 78px;
            left: 0;
            right: 0;
            bottom: 0;
            flex-direction: column;
            overflow-y: auto;
            padding: 18px 20px 24px;
            gap: var(--space-4);
            background: var(--bg-deep);
            z-index: 8;
        }
        .deepdive-page.visible {
            display: flex;
        }
        .deepdive-back { display: none; }
        .deepdive-back:hover { color: var(--text-primary); }
        .deepdive-back svg { width: 16px; height: 16px; }
        .deepdive-page-title {
            font-size: 1.1rem; font-weight: 600; margin: 0;
        }
        .deepdive-page-subtitle {
            font-size: 0.85rem; color: var(--text-secondary); margin: 0;
        }
        .deepdive-timeline {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin: -8px 0 2px;
            letter-spacing: 0.02em;
        }

        /* Deep Dive detail — dashboard layout */
        #deepDiveView .deepdive-page-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0;
        }
        #deepDiveView .deepdive-page-title .deepdive-title-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 10px;
            border-radius: 50%;
            background: #BE5049;
            box-shadow: 0 0 0 3px rgba(190, 80, 73, 0.16);
            flex-shrink: 0;
        }
        #deepDiveView .deepdive-page-subtitle {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
        }
        #deepDiveView .deepdive-timeline {
            margin: 2px 0 2px 0;
        }

        /* Dashboard cards */
        .dd-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        }
        .dd-card-title {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 16px;
        }
        .dd-row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .dd-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .dd-tag {
            font-size: 0.7rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 100px;
            padding: 4px 12px;
            letter-spacing: 0.03em;
        }

        /* Emotion radar */
        .dd-radar-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 12px;
        }
        .dd-radar-wrap svg { width: 100%; max-width: 220px; }

        /* Voice mix */
        .dd-voice-mix {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 14px;
        }
        .dd-voice-bar-track {
            height: 8px;
            border-radius: 4px;
            background: var(--bg-elevated);
            overflow: hidden;
            display: flex;
        }
        .dd-voice-bar-seg { height: 100%; }
        .dd-voice-legend {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .dd-voice-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .dd-voice-swatch {
            width: 8px;
            height: 8px;
            border-radius: 2px;
            flex-shrink: 0;
        }
        .dd-voice-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            flex: 1;
        }
        .dd-voice-pct {
            font-size: 0.72rem;
            color: var(--text-muted);
            font-weight: 500;
            font-variant-numeric: tabular-nums;
        }

        /* Suggestions (from what people tried) */
        .dd-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .dd-action-row {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 16px;
            background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
        }
        .dd-action-badge {
            flex-shrink: 0;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 3px 8px;
            border-radius: 4px;
            min-width: 48px;
            text-align: center;
            margin-top: 1px;
        }
        .dd-action-badge.try {
            background: rgba(190, 80, 73, 0.15);
            color: #E8706A;
            border: 1px solid rgba(190, 80, 73, 0.25);
        }
        .dd-action-badge.avoid {
            background: rgba(120, 113, 128, 0.12);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .dd-action-text {
            font-size: 0.85rem;
            color: var(--text-primary);
            line-height: 1.5;
        }
        .deepdive-loading {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--text-secondary);
        }
        .deepdive-loading .waveform-static {
            gap: 2px;
            height: 16px;
        }
        .deepdive-loading .waveform-static span {
            width: 2px;
        }
        .deepdive-loading .waveform-static span:nth-child(1) { height: 6px; }
        .deepdive-loading .waveform-static span:nth-child(2) { height: 11px; }
        .deepdive-loading .waveform-static span:nth-child(3) { height: 14px; }
        .deepdive-loading .waveform-static span:nth-child(4) { height: 11px; }
        .deepdive-loading .waveform-static span:nth-child(5) { height: 6px; }
        .deepdive-page-cost {
            font-size: 0.75rem; color: var(--text-muted);
        }
        .deepdive-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .deepdive-list .insight-item {
            font-size: 0.9rem;
            color: var(--text-primary);
            line-height: 1.65;
            padding: 15px 16px;
            background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
            border-radius: 16px;
            border: 1px solid var(--border);
            display: flex;
            gap: 12px;
            align-items: flex-start;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }
        .insight-num {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 700;
            margin-top: 1px;
        }
        .deepdive-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding-top: var(--space-2); border-top: 1px solid var(--border);
        }
        .deepdive-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 10px 14px; margin-top: 8px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: var(--bg-elevated);
            cursor: pointer;
            font-size: 0.8125rem; font-weight: 600; line-height: 1;
            transition: background 0.2s, border-color 0.2s;
        }
        .deepdive-btn:hover { border-color: var(--border-accent); background: #2A282D; }
        .deepdive-btn .dd-badge {
            background: rgba(255,255,255,0.06); border-radius: 10px;
            padding: 2px 8px; font-size: 0.6875rem; font-weight: 600;
        }
        .saved-deepdive { border-left: 3px solid var(--accent); padding-left: var(--space-3); }
        .saved-deepdive:hover { background: var(--bg-elevated); }

        /* Discuss button (Human Connect) on slate cards */
        .discuss-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 10px 14px; margin-top: 6px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: var(--bg-elevated);
            cursor: pointer;
            font-size: 0.8125rem; font-weight: 600; line-height: 1;
            transition: background 0.2s, border-color 0.2s;
        }
        .discuss-btn:hover { border-color: #6fb5d7; background: #2A282D; }

        /* Human Connect notification badge */
        .hc-notif-badge {
            position: absolute; top: -2px; right: -2px;
            min-width: 14px; height: 14px; border-radius: 7px;
            background: #e74c3c; color: #fff; font-size: 0.625rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            padding: 0 3px; line-height: 1;
        }

        /* Human Connect sub-pages */
        .hc-page {
            display: none; position: absolute; top: 78px; left: 0; right: 0; bottom: 0;
            background: var(--bg-deep); z-index: 8; overflow-y: auto;
            padding: 18px 20px 24px;
        }
        .hc-page.visible { display: flex; flex-direction: column; }
        .hc-page-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 8px 0 4px; }
        .hc-page-subtitle { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5; }

        /* Landing page */
        .hc-topic-card {
            background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
            padding: 12px 14px; margin-bottom: 16px;
        }
        .hc-topic-cat {
            display: inline-block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
            color: var(--accent); letter-spacing: 0.04em; margin-bottom: 4px;
        }
        .hc-topic-text { font-size: 0.85rem; color: var(--text-primary); line-height: 1.5; margin-top: 4px; }
        .hc-how-it-works { margin-bottom: 16px; }
        .hc-how-it-works h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0 0 8px; }
        .hc-how-it-works ol { padding-left: 20px; margin: 0; }
        .hc-how-it-works li { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }
        .hc-terms { margin-bottom: 16px; }
        .hc-terms-label {
            display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
            font-size: 0.75rem; color: var(--text-muted); line-height: 1.5;
        }
        .hc-terms-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
        .hc-cost-info { font-size: 0.8125rem; color: var(--text-secondary); text-align: center; margin: 0 0 12px; line-height: 1.5; }
        .hc-cost-info strong { color: var(--text-primary); }
        .hc-connect-btn {
            width: 100%; padding: 14px; border: none; border-radius: var(--radius-md);
            background: #6fb5d7; color: #111; font-size: 0.9375rem; font-weight: 700;
            cursor: pointer; transition: opacity 0.2s;
        }
        .hc-connect-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .hc-connect-btn:not(:disabled):hover { opacity: 0.9; }

        /* Searching animation */
        .hc-searching { text-align: center; padding: 40px 0; }
        .hc-searching-anim { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
        .hc-searching-text { font-size: 0.9375rem; color: var(--text-primary); margin: 0 0 4px; }
        .hc-searching-sub { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }

        /* Chat view */
        .hc-chat-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
        }
        .hc-chat-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); flex: 1; }
        .hc-chat-timer {
            font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
            font-size: 0.8rem; color: var(--text-muted); font-weight: 500;
            margin: 0 10px; min-width: 40px; text-align: center;
        }
        .hc-chat-timer.hc-timer-urgent {
            color: #e74c3c; font-weight: 700;
            animation: hc-timer-pulse 1s ease-in-out infinite;
        }
        @keyframes hc-timer-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .hc-extend-banner {
            text-align: center; padding: 12px 16px; margin: 8px 0;
            background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3);
            border-radius: var(--radius-sm);
        }
        .hc-extend-text { margin: 0 0 8px; color: var(--text-primary); font-size: 0.85rem; }
        .hc-extend-btn {
            padding: 8px 20px; border-radius: var(--radius-sm);
            border: none; background: var(--accent); color: #fff;
            font-size: 0.8rem; font-weight: 600; cursor: pointer;
            transition: opacity 0.2s;
        }
        .hc-extend-btn:hover { opacity: 0.85; }
        .hc-extend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .hc-end-btn {
            padding: 6px 14px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: none;
            color: var(--text-secondary); font-size: 0.75rem; font-weight: 600;
            cursor: pointer; transition: border-color 0.2s, color 0.2s;
        }
        .hc-end-btn:hover { border-color: #e74c3c; color: #e74c3c; }
        .hc-chat-topic {
            background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
            padding: 8px 12px; margin-bottom: 12px; font-size: 0.75rem; color: var(--text-muted);
        }
        .hc-chat-messages {
            flex: 1; overflow-y: auto; padding: 4px 0;
            display: flex; flex-direction: column; gap: 8px;
        }
        .hc-msg {
            max-width: 80%; padding: 10px 14px; border-radius: 16px;
            font-size: 0.85rem; line-height: 1.5; word-wrap: break-word;
        }
        .hc-msg-mine {
            align-self: flex-end; background: #6fb5d7; color: #111;
            border-bottom-right-radius: 4px;
        }
        .hc-msg-theirs {
            align-self: flex-start; background: var(--bg-elevated); color: var(--text-primary);
            border-bottom-left-radius: 4px;
        }
        .hc-msg-system {
            align-self: center; text-align: center; max-width: 90%;
            font-size: 0.75rem; color: var(--text-muted); font-style: italic;
            padding: 6px 12px; background: none;
        }
        .hc-msg-time { font-size: 0.625rem; color: var(--text-muted); margin-top: 2px; opacity: 0.7; }
        .hc-typing { font-size: 0.75rem; color: var(--text-muted); font-style: italic; padding: 4px 0; }

        /* Chat input */
        .hc-chat-input {
            display: flex; gap: 8px; padding: 12px 0 0;
            border-top: 1px solid var(--border); margin-top: 8px;
        }
        .hc-input-field {
            flex: 1; padding: 10px 14px; border-radius: 20px;
            border: 1px solid var(--border); background: var(--bg-elevated);
            color: var(--text-primary); font-size: 0.85rem; font-family: var(--font-sans);
            outline: none;
        }
        .hc-input-field:focus { border-color: #6fb5d7; }
        .hc-send-btn {
            width: 40px; height: 40px; border-radius: 50%; border: none;
            background: #6fb5d7; color: #111; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: opacity 0.2s; flex-shrink: 0;
        }
        .hc-send-btn:hover { opacity: 0.85; }

        /* Rating */
        .hc-rating { text-align: center; padding: 20px 0; }
        .hc-rating-prompt { font-size: 0.9375rem; color: var(--text-primary); margin: 0 0 12px; }
        .hc-rating-btns { display: flex; justify-content: center; gap: 16px; }
        .hc-rate-btn {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 12px 16px; border-radius: var(--radius-md);
            border: 1px solid var(--border); background: var(--bg-elevated);
            color: var(--text-secondary); cursor: pointer; font-size: 0.75rem;
            transition: border-color 0.2s, color 0.2s;
        }
        .hc-rate-btn:hover { border-color: #6fb5d7; color: #6fb5d7; }
        .hc-rate-btn.selected { border-color: #6fb5d7; color: #6fb5d7; background: rgba(111,181,215,0.08); }

        /* Panel list */
        .hc-panel-list { display: flex; flex-direction: column; gap: 8px; }
        .hc-panel-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: var(--bg-elevated);
            cursor: pointer; transition: border-color 0.2s;
        }
        .hc-panel-item:hover { border-color: var(--border-accent); }
        .hc-panel-item-info { flex: 1; min-width: 0; }
        .hc-panel-item-topic { font-size: 0.8125rem; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hc-panel-item-meta { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }
        .hc-panel-item-status {
            font-size: 0.6875rem; font-weight: 600; padding: 2px 8px;
            border-radius: 10px; flex-shrink: 0; margin-left: 8px;
        }
        .hc-status-pending { background: rgba(241,196,15,0.15); color: #f1c40f; }
        .hc-status-active { background: rgba(46,204,113,0.15); color: #2ecc71; }
        .hc-status-ended { background: rgba(149,165,166,0.15); color: #95a5a6; }
        .hc-panel-empty { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 0.85rem; }

        /* HC Preferences toggle in profile panel */
        .hc-pref-section { padding: 12px 0; }
        .hc-pref-row { display: flex; align-items: center; justify-content: space-between; }
        .hc-pref-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
        .hc-pref-desc { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
        .hc-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
        .hc-toggle input { opacity: 0; width: 0; height: 0; }
        .hc-toggle-slider {
            position: absolute; cursor: pointer; inset: 0;
            background: var(--border); border-radius: 11px; transition: background 0.2s;
        }
        .hc-toggle-slider::before {
            content: ''; position: absolute; width: 16px; height: 16px;
            left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
            transition: transform 0.2s;
        }
        .hc-toggle input:checked + .hc-toggle-slider { background: #6fb5d7; }
        .hc-toggle input:checked + .hc-toggle-slider::before { transform: translateX(18px); }

        /* HC Onboarding modal */
        .hc-onboard-overlay {
            position: fixed; inset: 0; z-index: 300;
            background: rgba(0,0,0,0.7); display: flex;
            align-items: center; justify-content: center; padding: 16px;
        }
        .hc-onboard-modal {
            background: var(--bg-card); border: 1px solid var(--border);
            border-radius: var(--radius-md); padding: 24px; max-width: 420px; width: 100%;
            max-height: 85vh; overflow-y: auto;
        }
        .hc-onboard-modal h2 { font-size: 1.125rem; color: var(--text-primary); margin: 0 0 8px; }
        .hc-onboard-intro { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; }
        .hc-onboard-section { margin-bottom: 14px; }
        .hc-onboard-section h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
        .hc-onboard-section ol, .hc-onboard-section ul { padding-left: 20px; margin: 0; }
        .hc-onboard-section li { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }
        .hc-onboard-section p { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }
        .hc-onboard-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
        .hc-onboard-confirm {
            padding: 10px 20px; border-radius: var(--radius-sm); border: none;
            background: #6fb5d7; color: #111; font-size: 0.875rem; font-weight: 700;
            cursor: pointer; transition: opacity 0.2s;
        }
        .hc-onboard-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
        .hc-onboard-confirm:not(:disabled):hover { opacity: 0.9; }

        /* Chat header actions */
        .hc-chat-header-actions { display: flex; align-items: center; gap: 8px; }
        .hc-report-icon {
            width: 32px; height: 32px; border-radius: 50%; border: none;
            background: none; color: var(--text-muted); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: color 0.2s;
        }
        .hc-report-icon:hover { color: #e74c3c; }

        /* Safety actions (report/block links below rating) */
        .hc-safety-actions { margin-top: 16px; display: flex; justify-content: center; gap: 16px; }
        .hc-safety-link {
            background: none; border: none; color: var(--text-muted);
            font-size: 0.75rem; cursor: pointer; text-decoration: underline;
            padding: 4px 0; transition: color 0.2s;
        }
        .hc-safety-link:hover { color: #e74c3c; }

        /* Report modal */
        .hc-report-modal {
            position: fixed; inset: 0; z-index: 300;
            background: rgba(0,0,0,0.6); display: flex;
            align-items: center; justify-content: center; padding: 20px;
        }
        .hc-report-content {
            background: var(--bg-card); border: 1px solid var(--border);
            border-radius: var(--radius-md); padding: 20px; max-width: 380px; width: 100%;
        }
        .hc-report-content h3 { font-size: 1rem; color: var(--text-primary); margin: 0 0 4px; }
        .hc-report-desc { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 12px; }
        .hc-report-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
        .hc-report-option {
            display: flex; align-items: center; gap: 8px;
            font-size: 0.8125rem; color: var(--text-primary); cursor: pointer;
        }
        .hc-report-details {
            width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: var(--bg-elevated);
            color: var(--text-primary); font-size: 0.8125rem; font-family: var(--font-sans);
            resize: none; outline: none; margin-bottom: 12px; box-sizing: border-box;
        }
        .hc-report-details:focus { border-color: #6fb5d7; }
        .hc-report-actions { display: flex; gap: 8px; justify-content: flex-end; }
        .hc-report-cancel {
            padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
            background: none; color: var(--text-secondary); cursor: pointer; font-size: 0.8125rem;
        }
        .hc-report-submit {
            padding: 8px 16px; border-radius: var(--radius-sm); border: none;
            background: #e74c3c; color: #fff; cursor: pointer; font-size: 0.8125rem; font-weight: 600;
        }
        .hc-report-submit:hover { opacity: 0.9; }

        /* HC accept/decline buttons in panel */
        .hc-respond-btns { display: flex; gap: 6px; margin-left: 8px; }
        .hc-accept-btn, .hc-decline-btn {
            padding: 4px 12px; border-radius: var(--radius-sm); font-size: 0.6875rem;
            font-weight: 600; cursor: pointer; border: 1px solid transparent;
        }
        .hc-accept-btn { background: rgba(46,204,113,0.15); color: #2ecc71; border-color: rgba(46,204,113,0.3); }
        .hc-accept-btn:hover { background: rgba(46,204,113,0.25); }
        .hc-decline-btn { background: rgba(231,76,60,0.1); color: #e74c3c; border-color: rgba(231,76,60,0.2); }
        .hc-decline-btn:hover { background: rgba(231,76,60,0.2); }

        /* HC panel sections & items */
        .hc-panel-section { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 6px; }
        .hc-panel-item-title { font-size: 0.8125rem; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hc-panel-item-cat { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }
        .hc-panel-item-arrow { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }
        .hc-panel-pending { border-color: rgba(241,196,15,0.3); }
        .hc-panel-active { border-color: rgba(46,204,113,0.3); cursor: pointer; }
        .hc-panel-active:hover { border-color: rgba(46,204,113,0.5); }
        .hc-panel-actions { display: flex; gap: 6px; margin-top: 8px; }

        /* HC status & utility text */
        .hc-status-text { font-size: 0.85rem; color: var(--text-secondary); text-align: center; margin: 8px 0; }
        .hc-loading { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 20px 0; }
        .hc-empty { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 20px 0; }
        .hc-rating-thanks { font-size: 0.9rem; color: var(--text-secondary); }

        /* Invite section in profile panel */
        .library-link { margin-top: 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-sm); cursor:pointer; background: var(--bg-elevated); }
        .library-link-title { display:block; font-size:0.85rem; font-weight:600; color:var(--text-primary); }
        .library-link-meta { display:block; font-size:0.75rem; color:var(--text-secondary); }
        .library-link-arrow { color:var(--text-muted); font-size:0.85rem; }
        .deepdive-library-page { display:none; position:absolute; top:78px; left:0; right:0; bottom:0; background:var(--bg-deep); z-index:8; overflow-y:auto; padding:18px 20px 24px; }
        .deepdive-library-page .deepdive-page-header { margin-bottom: 8px; }
        .deepdive-library-page.visible { display:block; }

        /* Sub-pages (Deep Dive / Spirals / Profile / HC) should not show the bottom composer. */
        #deepDiveView.visible ~ .input-area,
        #deepDiveLibraryView.visible ~ .input-area,
        #spiralLibraryView.visible ~ .input-area,
        #humanConnectLanding.visible ~ .input-area,
        #humanConnectChat.visible ~ .input-area,
        #humanConnectPanel.visible ~ .input-area,
        /* profile-panel z-index (20) > input-area z-index (15), so it covers it */
        .deepdive-library-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
        .history-page-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
        .history-section { margin-top: 6px; }
        .history-section + .history-section { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--border); }
        .history-load-more {
            margin-top: 12px;
            width: 100%;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-primary);
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            font-size: 0.85rem;
            font-family: var(--font-sans);
            cursor: pointer;
        }
        .history-load-more:hover { border-color: var(--border-accent); }
        .spiral-library-list { display:flex; flex-direction:column; gap:18px; }
        .spiral-library-list .slate-card {
            width: 100%;
            flex: 0 0 100%;
            max-width: 100%;
            min-width: 100%;
        }
        .spiral-library-list .slate-pill { margin-bottom: 12px; }
        .deepdive-library-item { padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); cursor:pointer; }
        .deepdive-library-item-title { font-size:0.9rem; font-weight:600; color:var(--text-primary); }
        .deepdive-library-item-meta { font-size:0.75rem; color:var(--text-secondary); margin-top:4px; }
        .deepdive-library-item-time { font-size:0.73rem; color:var(--text-muted); margin-top:4px; letter-spacing:0.02em; }
        .deepdive-library-empty { padding:24px 8px; color:var(--text-secondary); font-size:0.85rem; }

        .invite-section { padding: var(--space-4) 0; }
        .invite-section-title {
            font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3);
        }
        .invite-item {
            display: flex; align-items: center; gap: var(--space-3);
            padding: var(--space-2) 0; font-size: 0.85rem;
        }
        .invite-code {
            font-family: var(--font-mono); color: var(--text-primary);
            letter-spacing: 0.03em;
        }
        .invite-status { color: var(--text-muted); font-size: 0.8rem; }
        .invite-status.used { color: var(--accent); }
        .invite-copy-btn {
            margin-left: auto; padding: 2px 8px; font-size: 0.75rem;
            background: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: var(--radius-sm); color: var(--text-secondary);
            cursor: pointer; transition: border-color 0.15s;
        }
        .invite-copy-btn:hover { border-color: var(--border-accent); }

        /* Voice message bubble — cohesive card */
        .voice-bubble {
            display: flex;
            flex-direction: column;
            max-width: min(85%, 340px);
            animation: messageSlide 0.4s var(--ease-out);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .message.user .voice-bubble {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg) var(--radius-lg) var(--space-1) var(--radius-lg);
        }

        .voice-bubble .waveform-player {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: var(--space-3) var(--space-4) var(--space-2);
        }

        .voice-bubble .play-btn-large {
            width: 40px;
            height: 40px;
        }
        .message.user .voice-bubble .play-btn-large {
            background: var(--bg-hover);
            box-shadow: none;
        }
        .voice-bubble .play-btn-large svg {
            width: 16px;
            height: 16px;
        }
        .voice-bubble .waveform-viz {
            height: 28px;
        }
        .voice-bubble .waveform-bar {
            min-width: 3px;
        }
        .message.user .voice-bubble .waveform-bar {
            background: var(--text-muted);
        }
        .message.user .voice-bubble .waveform-bar.active {
            background: var(--text-primary);
        }
        .message.user .voice-bubble .waveform-bar.played {
            background: var(--text-secondary);
        }
        .message.user .voice-bubble .player-time {
            color: var(--text-primary);
        }

        .voice-bubble .voice-transcript-wrapper {
            padding: 0 var(--space-4) var(--space-2);
        }
        .voice-transcript {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.5;
        }
        .voice-transcript.collapsed {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .voice-transcript-toggle {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 0.7rem;
            font-weight: 500;
            cursor: pointer;
            padding: 2px 0 0;
            opacity: 0.8;
        }
        .voice-transcript-toggle:hover { opacity: 1; }
        .message.user .voice-transcript-toggle {
            color: var(--text-muted);
        }
        .message.user .voice-transcript {
            color: var(--text-secondary);
        }

        .voice-bubble .voice-source-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            margin: 0 var(--space-4) var(--space-3);
            padding: 2px var(--space-2);
            font-size: 0.5625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-radius: 4px;
            width: fit-content;
            background: var(--bg-elevated);
            color: var(--text-muted);
}

        /* ===== SLATE UI ===== */
        .slate-wrap { margin: 24px 0 8px; }
        .slate-row { margin-bottom: 0; padding: 0; opacity: 0; transform: translateY(10px); animation: slateFadeUp .5s ease forwards; }
        .slate-row + .slate-row { margin-top: 32px; }
        .slate-row:nth-child(1) { animation-delay: .08s; }
        .slate-row:nth-child(2) { animation-delay: .23s; }
        .slate-row:nth-child(3) { animation-delay: .38s; }
        .slate-row:nth-child(4) { animation-delay: .53s; }
        .slate-row:nth-child(5) { animation-delay: .68s; }
        @keyframes slateFadeUp { to { opacity: 1; transform: translateY(0);} }

        .slate-row-title {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.1px;
            color: var(--text-primary);
            padding-left: 0;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .slate-row-time {
            font-size: 0.74rem;
            color: var(--text-muted);
            margin-bottom: 10px;
            padding-left: 0;
        }
        
        .slate-row-tune {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border: none;
            background: transparent;
            cursor: pointer;
            color: #756F7C;
            border-radius: 6px;
            transition: color 0.2s ease, background 0.15s ease;
        }
        
        .slate-row-tune:hover {
            background: rgba(255,255,255,0.05);
        }
        
        .slate-row-tune.supported {
            color: #E11D48;
        }
        
        .slate-row-tune svg {
            width: 24px;
            height: 24px;
        }
        
        .slate-row-tune .tune-count {
            font-size: 12px;
            font-weight: 500;
        }
        
        .slate-row-tune svg path {
            stroke-dasharray: 50;
            stroke-dashoffset: 0;
        }
        
        .slate-row-tune.animating svg path {
            animation: spiralDraw 600ms ease-out;
        }
        
        .slate-row-tune.animating svg .spiral-glow {
            animation: glowPulse 600ms ease-out;
        }
        
        @keyframes spiralDraw {
            0%   { stroke-dashoffset: 50; opacity: 0.5; }
            100% { stroke-dashoffset: 0; opacity: 1; }
        }
        
        @keyframes glowPulse {
            0%   { opacity: 0.05; transform: scale(0.8); }
            50%  { opacity: 0.3; transform: scale(1.1); }
            100% { opacity: 0.2; transform: scale(1); }
        }
        
        .slate-row-tune svg .spiral-glow {
            opacity: 0.1;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform-origin: center;
        }
        
        .slate-row-tune.supported svg .spiral-glow {
            opacity: 0.2;
        }

        .slate-row-title-badge {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 5px;
            line-height: 1;
            white-space: nowrap;
        }

        .slate-carousel-wrap {
            position: relative;
        }
        .slate-carousel-arrow {
            display: none; /* hidden on mobile */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text-primary);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            z-index: 10;
            transition: background 0.15s, opacity 0.15s;
            padding: 0;
        }
        .slate-carousel-arrow:hover {
            background: var(--bg-elevated);
        }
        .slate-carousel-arrow.prev { left: -16px; }
        .slate-carousel-arrow.next { right: -16px; }
        .slate-carousel-arrow[disabled] { opacity: 0.25; pointer-events: none; }
        @media (min-width: 768px) {
            .slate-carousel-arrow { display: flex; }
        }

        .slate-carousel {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            padding-left: 0;
            padding-right: 20px;
            margin: 0;
            scroll-padding-left: 0;
            scrollbar-width: none;
        }
        .slate-carousel::-webkit-scrollbar { display: none; }

        .slate-card {
            width: var(--slate-card-width);
            flex: 0 0 var(--slate-card-width);
            flex-shrink: 0;
            max-width: var(--slate-card-width);
            min-width: 0;
            scroll-snap-align: start;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: var(--space-4);
            min-height: 120px;
            transition: background .2s ease;
            position: relative;
            overflow: visible;
        }
        .slate-card:active { background: var(--bg-elevated); }
        .slate-card.single {
            width: 100%;
            flex: 0 0 100%;
            max-width: 100%;
            min-width: 100%;
        }
        .slate-card .video-inline {
            margin: 0;
            aspect-ratio: auto;
            height: var(--slate-media-height);
            max-height: var(--slate-media-height);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        .slate-card .video-thumbnail-wrapper,
        .slate-card .video-thumbnail,
        .slate-card .video-iframe-wrapper,
        .slate-card .video-iframe-wrapper iframe,
        .slate-card video,
        .slate-card iframe {
            height: var(--slate-media-height);
            max-height: var(--slate-media-height);
            object-fit: cover;
        }

        .slate-author {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            color: var(--text-muted);
            margin-top: 10px;
            line-height: 1.3;
        }
        .slate-author::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--author-dot, rgba(190, 80, 73, 0.25));
            flex-shrink: 0;
        }

        .slate-thumb {
            width: 100%;
            height: var(--slate-media-height);
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-3);
            background: linear-gradient(135deg, #BE504940, #6B5CE740, #2D9CDB40);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .slate-play-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,.15);
            backdrop-filter: blur(4px);
            position: relative;
        }
        .slate-play-icon::after {
            content: '';
            position: absolute;
            left: 14px;
            top: 11px;
            border-left: 10px solid #fff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
        }

        .slate-waveform {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 32px;
            margin: 10px 0;
        }
        .slate-waveform .bar {
            width: 3px;
            border-radius: 2px;
            animation: wave 1.2s ease-in-out infinite;
        }

        .slate-pill {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 16px;
            margin-bottom: 10px;
            color: #fff; /* always white on colored pill bg */
        }
        .slate-pill.music { color: #1A1A1A; }

        .slate-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
        .slate-snippet {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-top: 10px;
            width: 100%;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
        }
        .slate-snippet.expanded { -webkit-line-clamp: unset; overflow: visible; }
        .slate-more {
            border: 0;
            background: transparent;
            padding: 0;
            font-size: 12px;
            font-weight: 600;
            font-style: italic;
            color: var(--text-secondary);
            margin-top: var(--space-2);
            display: none;
            cursor: pointer;
        }
        .bk-btn {
            display: none !important;
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
            padding: 10px 10px 16px 16px;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
            color: var(--bk-accent, var(--accent));
            opacity: 0.65;
            transition: opacity 0.15s ease;
            z-index: 10;
        }

        .bk-btn:hover {
            opacity: 1;
        }

        .bk-btn.saved {
            opacity: 1;
        }

        .bk-btn.saved svg {
            fill: var(--bk-accent, var(--accent));
            stroke: none;
        }

        .bk-btn.bk-pop svg {
            animation: bkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes bkPop {
            0%   { transform: scale(1.5); }
            100% { transform: scale(1.0); }
        }

        /* Support / "This helped me" icon — TUNE v0 */
        .support-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 44px;
            height: 44px;
            padding: 16px 10px 10px 16px;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 5px;
            color: #756F7C;
            opacity: 0.85;
            transition: opacity 0.15s ease, color 0.2s ease;
            z-index: 10;
        }

        .support-btn:hover {
            opacity: 1;
        }

        .support-btn.supported {
            color: #E11D48;
            opacity: 1;
        }

        .support-btn svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .support-btn svg path {
            stroke: currentColor;
            transition: stroke 0.2s ease;
        }

        .support-btn .support-count {
            font-family: 'Inter', -apple-system, sans-serif;
            font-size: 11px;
            font-weight: 500;
            min-width: 12px;
        }

        .support-btn.animating svg {
            animation: supportSpin 600ms ease-out;
        }

        @keyframes supportSpin {
            0%   { transform: scale(1) rotate(0deg); }
            50%  { transform: scale(1.2) rotate(180deg); }
            100% { transform: scale(1) rotate(360deg); }
        }
        
        .support-btn svg .spiral-glow {
            transition: opacity 0.3s ease;
        }
        
        .support-btn.supported svg .spiral-glow {
            opacity: 0.2;
        }
        
        .support-btn:not(.supported) svg .spiral-glow {
            opacity: 0.1;
        }

        /* Signal arcs (show on hover for 16px+ icons) */
        .support-btn .signal-arcs {
            display: none;
        }

        .slate-followup {
            padding: 24px 0 16px;
            margin-top: 32px;
            text-align: left;
            opacity: 0;
            animation: slateFadeUp .5s ease .85s forwards;
        }
        .slate-followup-q { font-size: 15px; font-weight: 500; font-style: italic; color: var(--text-primary); margin-bottom: 0; }

        /* Auth handled by .header-links now */

        /* Scrollbar */
        .conversation::-webkit-scrollbar {
            width: 4px;
        }
        .conversation::-webkit-scrollbar-track {
            background: transparent;
        }
        .conversation::-webkit-scrollbar-thumb {
            background: rgba(190, 80, 73, 0.2);
            border-radius: 2px;
        }
        .conversation::-webkit-scrollbar-thumb:hover {
            background: rgba(190, 80, 73, 0.4);
        }

        /* Empty state enhancement */

        /* ===== MOBILE SESSIONS ===== */
        @media (max-width: 899px) {
            .sessions-toggle-btn {
                margin-right: 8px;
            }

            .header,
            .conversation,
            .input-area,
            .app.sessions-open .header,
            .app.sessions-open .conversation,
            .app.sessions-open .input-area {
                margin-left: 0;
            }

            .sessions-panel {
                top: 0;
                left: 0;
                right: auto;
                bottom: 0;
                width: min(280px, 82vw);
                height: 100dvh;
                transform: translateX(-100%);
                border-right: 1px solid var(--border);
                border-top: none;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                z-index: 120;
            }

            .app.sessions-open .sessions-panel {
                transform: translateX(0);
            }

            .sessions-scrim {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.45);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s var(--ease-out);
                z-index: 110;
            }

            .app.sessions-open .sessions-scrim {
                display: block;
                opacity: 1;
                pointer-events: auto;
            }

            .sessions-sheet-handle {
                display: none;
            }

            .dd-row-2 {
                grid-template-columns: 1fr;
            }

            .dd-radar-wrap {
                padding: 24px 8px;
            }

            .dd-radar-wrap svg {
                max-width: 320px;
            }
        }

        /* ===== SHORT SCREENS — shrink hero so pills are visible ===== */
        @media (max-height: 600px) {
            .empty-state {
                padding: 16px 20px 0;
                gap: 16px;
            }
            .empty-title {
                font-size: 1.5rem;
            }
            .empty-subtitle {
                font-size: 0.875rem;
            }
            .suggestion-pill {
                padding: 10px 14px;
                font-size: 0.8125rem;
            }
        }

        /* ===== DESKTOP (slate card sizing) ===== */
        @media (min-width: 1024px) {
            .app {
                --slate-card-width: 340px;
                --slate-media-height: 130px;
            }
        }