/* =============================================================================
   Dereal Voice App - Base Styles
   Loaded by ALL pages. Contains variables, reset, typography, shared components.
   ============================================================================= */

/* ---- Accessibility ---- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--accent, #C4A77D);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent, #C4A77D);
    outline-offset: 2px;
}

/* ---- End Accessibility ---- */

/* =============================================================================
   CSS Custom Properties (Theming)
   ============================================================================= */

:root {
    /* Elemental Colors */
    --earth: #8B7355;
    --earth-light: #A69076;
    --water: #5B8FA8;
    --water-light: #7BA7BD;
    --fire: #D4763A;
    --fire-light: #E8935A;
    --air: #87A889;
    --air-light: #A3BDA4;
    --ether: #9B8AA8;
    --ether-light: #B5A7BF;

    /* Base Colors - Dark Theme (default) */
    --bg-primary: #1A1A1F;
    --bg-secondary: #232328;
    --bg-tertiary: #2D2D33;
    --bg-dark: #0a0a0f;
    --bg-card: #12121a;
    --bg-elevated: #1a1a24;
    --text-primary: #E8E6E3;
    --text-secondary: #A09A92;
    --text-muted: #6B665E;
    --accent: #C4A77D;
    --accent-warm: #C8A77D;
    --accent-gold: #D4B896;
    --accent-glow: rgba(196, 167, 125, 0.3);
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --border-color: #3a3a42;
    --border-subtle: #3a3a42;
    --surface-base: #0a0a0f;
    --surface-elevated: #12121a;
    --surface-subtle: #232328;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --message-user-bg: #2a2a32;
    --message-ai-bg: #1e1e24;

    /* Status Colors */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;

    /* Companion Colors */
    --compass-color: var(--air);
    --flora-color: var(--earth);
    --alethea-color: var(--ether);
    --eirene-color: var(--water);
    --socius-color: var(--fire);
    --echo-color: var(--ether);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Typography */
    --font-body: 'Inter', sans-serif;
    --font-display: 'Crimson Pro', serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Spacing (extended) */
    --space-2xl: 3rem;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    --gradient-accent: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #F5F3F0;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EAE7E2;
    --bg-dark: #E0DDD8;
    --bg-card: #FFFFFF;
    --bg-elevated: #F0EDE8;
    --text-primary: #2C2A28;
    --text-secondary: #5A5652;
    --text-muted: #8A867E;
    --accent: #9B7D4D;
    --accent-warm: #A8865A;
    --accent-gold: #B89660;
    --accent-glow: rgba(155, 125, 77, 0.2);
    --border-color: #D5D0C8;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --message-user-bg: #E8E5E0;
    --message-ai-bg: #FFFFFF;
}

/* =============================================================================
   Reset
   ============================================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
}

/* =============================================================================
   Scroll Fix: Sub-pages manage their own overflow.
   The chat page uses overflow:hidden on <body> (class="chat-page").
   Every other page gets scrollable overflow automatically.
   ============================================================================= */
body:not(.chat-page) {
    overflow-y: auto !important;
    overflow-x: hidden;
    height: auto;
}

body:not(.chat-page) #app {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

body:not(.chat-page) .container,
body:not(.chat-page) .app-container {
    overflow-y: visible;
    height: auto;
}

/* =============================================================================
   Typography & Elements
   ============================================================================= */

.element {
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.element.earth { background: var(--earth); color: white; }
.element.water { background: var(--water); color: white; }
.element.fire { background: var(--fire); color: white; }
.element.air { background: var(--air); color: white; }
.element.ether { background: var(--ether); color: white; }

/* =============================================================================
   Buttons & Forms
   ============================================================================= */

.setting-group {
    margin-bottom: var(--space-md);
}

.setting-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.setting-group select,
.setting-group input[type="range"] {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-primary);
}

.setting-group input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    padding: 0;
}

.setting-group input[type="checkbox"] {
    margin-right: var(--space-sm);
}

.setting-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
}

.theme-toggle .icon {
    font-size: 1.2rem;
}

/* Export button */
.export-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.export-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

/* =============================================================================
   Modal
   ============================================================================= */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: var(--space-lg);
}

.modal.open {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    padding: var(--space-xl);
    border-radius: 16px;
    min-width: 360px;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-content h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
    position: sticky;
    top: calc(-1 * var(--space-xl));
    background: var(--bg-secondary);
    padding: var(--space-md) 0;
    margin-top: calc(-1 * var(--space-md));
    z-index: 1;
}

.modal-close {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-weight: 500;
    cursor: pointer;
    margin-top: var(--space-md);
    position: sticky;
    bottom: calc(-1 * var(--space-xl));
}

/* =============================================================================
   Notification Toast
   ============================================================================= */

.notification-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    max-width: 320px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 200;
    animation: slideIn 0.3s ease;
}

.notification-toast.hidden {
    display: none;
}

.notification-toast.positive {
    border-left: 4px solid #10b981;
}

.notification-toast.attention {
    border-left: 4px solid #f59e0b;
}

.notification-toast.info {
    border-left: 4px solid var(--accent-primary);
}

.notification-content {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.notification-icon {
    font-size: 1.2rem;
}

.notification-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
}

/* =============================================================================
   Custom Scrollbar
   ============================================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* =============================================================================
   Shared Animations
   ============================================================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* =============================================================================
   Hidden utility
   ============================================================================= */

.hidden {
    display: none;
}

/* =============================================================================
   Login Screen
   ============================================================================= */

.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1a2e 50%, var(--bg-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.login-container {
    text-align: center;
    padding: var(--space-xl);
    max-width: 400px;
}

.login-logo-symbol {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--space-md);
    animation: pulse 3s ease-in-out infinite;
}

.login-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: 0.1em;
}

.login-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 var(--space-xl) 0;
    font-style: italic;
}

.login-companions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    font-size: 2rem;
}

.login-companion {
    opacity: 0.6;
    transition: all var(--transition-normal);
    cursor: default;
}

.login-companion:hover {
    opacity: 1;
    transform: scale(1.2);
}

.login-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--space-xl);
}

.login-google-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    background: #fff;
    border: none;
    border-radius: var(--radius-lg);
    color: #333;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.login-google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-google-btn:active {
    transform: translateY(0);
}

.login-google-btn .google-icon {
    width: 20px;
    height: 20px;
}

.login-footer {
    margin-top: var(--space-xl);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Loading state */
.login-screen.loading .login-google-btn {
    opacity: 0.7;
    pointer-events: none;
}

.login-screen.loading .login-google-btn::after {
    content: '...';
    animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Auth not configured message */
.login-not-configured {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

/* Hide login screen when authenticated */
.login-screen.hidden {
    display: none;
}

/* Login button */
.login-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.login-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
}

.login-btn .google-icon {
    width: 18px;
    height: 18px;
}

/* Login button mobile */
@media (max-width: 768px) {
    .login-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.8rem;
    }

    .login-btn span {
        display: none;
    }

    .login-btn .google-icon {
        width: 20px;
        height: 20px;
    }
}
/* =============================================================================
   Dereal Voice App - Chat Page Styles
   Styles specific to the main chat page (index.html):
   header, companion nav, sidebar, messages, voice controls.
   ============================================================================= */

/* =============================================================================
   App Layout
   ============================================================================= */

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    /* Safe area for iOS */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* =============================================================================
   Header
   ============================================================================= */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    position: relative;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo-symbol {
    font-size: 1.5rem;
    color: var(--accent);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: var(--transition-normal);
}

.connection-status.connected .status-dot {
    background: #4CAF50;
    box-shadow: 0 0 8px #4CAF50;
}

.connection-status.error .status-dot {
    background: #F44336;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    position: relative;
}

.user-section {
    display: flex;
    align-items: center;
    position: relative;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--accent);
}

.user-name {
    font-size: 0.85rem;
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.logout-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent);
}

.admin-btn {
    background: none;
    border: none;
    text-decoration: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--space-xs);
    opacity: 0.7;
    transition: opacity 0.2s;
}

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

.admin-btn.hidden {
    display: none;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--space-xs);
    opacity: 0.6;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.nav-btn:hover {
    opacity: 1;
    transform: scale(1.15);
    color: var(--accent);
}

/* Inline SVG icon sizing — applies to header, menu, logout */
.nav-btn svg,
.logout-btn svg,
.admin-btn svg,
.nav-menu-item svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.nav-menu-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.75;
}

.logout-btn svg {
    width: 16px;
    height: 16px;
}

/* =============================================================================
   Navigation Menu
   ============================================================================= */

.menu-toggle {
    font-size: 1.2rem !important;
}

.nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

.nav-menu.hidden {
    display: none;
}

.nav-menu-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-menu-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding-left: 8px;
}

.nav-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.nav-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* =============================================================================
   Companion Navigation
   ============================================================================= */

.companion-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    flex-wrap: wrap;
}

.companion-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-normal);
    min-width: 90px;
}

.companion-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent);
}

.companion-btn.active {
    background: var(--bg-primary);
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

.companion-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SVG sizing for companion/widget icons (replaces emoji font-size approach) */
.companion-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--accent);
}

.companion-avatar svg {
    width: 64px;
    height: 64px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--accent);
}

.companion-profile-icon svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--accent);
}

.companion-loading-icon svg {
    width: 80px;
    height: 80px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--accent);
}

.healing-icon svg,
.protocol-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--accent-primary);
    vertical-align: middle;
}

.companion-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.companion-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}

/* =============================================================================
   Chat Container & Companion Panel (Sidebar)
   ============================================================================= */

.chat-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.companion-panel {
    width: 280px;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border-right: 1px solid var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow-y: auto;
}

.companion-avatar {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    animation: float 3s ease-in-out infinite;
}

.companion-full-name {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: var(--space-xs);
}

.companion-archetype {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.companion-elements {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.companion-purpose {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
}

/* Emotional State */
.emotional-state {
    width: 100%;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: 12px;
}

.emotional-state h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.state-meter {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.state-meter label {
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 70px;
    text-align: left;
}

.meter-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--water-light));
    border-radius: 3px;
    transition: width var(--transition-slow);
}

.meter-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 35px;
    text-align: right;
}

.tone-field {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--bg-primary);
    font-size: 0.85rem;
}

.tone-label {
    color: var(--text-muted);
}

.tone-value {
    color: var(--accent);
    font-weight: 500;
}

/* =============================================================================
   Chat Messages
   ============================================================================= */

.chat-messages {
    flex: 1;
    padding: var(--space-lg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.welcome-message {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
}

.welcome-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
    color: var(--accent);
}

.welcome-text {
    font-size: 0.95rem;
    line-height: 1.8;
}

/* Memory-based Suggestions */
.memory-suggestions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.memory-suggestions.hidden {
    display: none;
}

.suggestions-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.suggestion-chip:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
}

.suggestion-chip .chip-icon {
    font-size: 1rem;
}

/* Messages */
.message {
    max-width: 75%;
    padding: var(--space-md) var(--space-lg);
    border-radius: 16px;
    animation: messageIn 0.3s ease;
}

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

.message.user {
    align-self: flex-end;
    background: var(--bg-tertiary);
    border-bottom-right-radius: 4px;
}

.message.companion {
    align-self: flex-start;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--accent-glow);
    border-bottom-left-radius: 4px;
}

.message.companion.streaming {
    border-color: var(--accent-primary);
    animation: streaming-pulse 1.5s ease-in-out infinite;
}

@keyframes streaming-pulse {
    0%, 100% { border-color: var(--accent-glow); }
    50% { border-color: var(--accent-primary); }
}

.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.8s ease-in-out infinite;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.message-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.message-meta {
    margin-top: var(--space-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-sm) var(--space-md);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.typing-indicator .dots {
    display: flex;
    gap: 3px;
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(1) { animation-delay: 0s; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* =============================================================================
   Healing Widget & Protocol Widget (in-chat overlays)
   ============================================================================= */

.healing-widget,
.protocol-widget {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
    animation: healingSlideUp 0.3s ease;
}

@keyframes healingSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.healing-widget.hidden,
.protocol-widget.hidden {
    display: none;
}

.healing-widget-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.healing-icon {
    font-size: 1.5rem;
}

.healing-title {
    flex: 1;
    font-weight: 600;
    color: var(--accent-primary);
}

.healing-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.healing-close:hover {
    color: var(--text-primary);
}

.healing-widget-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.healing-widget-body p {
    margin-bottom: var(--space-md);
}

.healing-widget-actions {
    display: flex;
    gap: var(--space-sm);
}

.btn-healing-start {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-healing-start:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-healing-dismiss {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-healing-dismiss:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Protocol Widget */
.protocol-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.protocol-icon {
    font-size: 1.3rem;
}

.protocol-name {
    flex: 1;
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.protocol-progress {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.protocol-step {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    padding: var(--space-sm);
    background: transparent;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
    text-align: center;
    font-style: italic;
}

.protocol-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--space-sm);
    opacity: 0.8;
}

.protocol-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.btn-protocol-next {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-protocol-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-protocol-cancel {
    padding: var(--space-xs) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.btn-protocol-cancel:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* =============================================================================
   Voice Controls
   ============================================================================= */

.voice-controls {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--bg-tertiary);
}

.voice-visualizer {
    height: 40px;
    margin-bottom: var(--space-md);
}

#visualizerCanvas {
    width: 100%;
    height: 100%;
}

.controls-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}

.control-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition-normal);
}

.control-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent);
}

.voice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-primary));
    border: 2px solid var(--accent);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.voice-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 30px var(--accent-glow);
}

.voice-btn:active,
.voice-btn.recording {
    transform: scale(0.95);
    background: var(--accent);
    border-color: var(--accent);
}

.voice-btn.recording {
    animation: voicePulse 1.5s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { box-shadow: 0 0 0 20px transparent; }
}

.voice-icon {
    font-size: 2rem;
}

.voice-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.voice-btn.recording .voice-text {
    color: var(--bg-primary);
}

/* Hands-free listening state */
.voice-btn.listening {
    background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-gold) 100%);
    animation: listening-pulse 2s ease-in-out infinite;
}

@keyframes listening-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(200, 167, 125, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(200, 167, 125, 0.5);
    }
}

.voice-btn.listening .voice-text {
    color: var(--bg-dark);
}

/* Text Input */
.text-input-row {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.text-input-row input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.text-input-row input:focus {
    outline: none;
    border-color: var(--accent);
}

.text-input-row button {
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.text-input-row button:hover {
    opacity: 0.9;
}

.status-row {
    text-align: center;
    padding-top: var(--space-sm);
    height: 24px;
}

.processing-status {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* =============================================================================
   Settings Modal (voice settings, emotion sliders, echo voice, memory)
   ============================================================================= */

/* Voice settings */
.voice-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.voice-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.companion-label {
    min-width: 100px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.emotion-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.emotion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.emotion-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.emotion-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

.emotion-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    min-width: 40px;
    text-align: right;
}

.test-voice-btn {
    margin-top: var(--space-xs);
    padding: 6px var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
}

.test-voice-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

/* Memory stats display */
.memory-stats {
    font-size: 0.75rem;
    color: var(--accent-warm);
    margin-top: var(--space-xs);
    padding: var(--space-xs);
    background: rgba(200, 167, 125, 0.1);
    border-radius: var(--radius-sm);
}

.memory-stats.loading {
    color: var(--text-muted);
}

.memory-stats .memory-count {
    font-weight: 500;
}

/* Echo Self-Voice Feature */
.echo-voice-setting {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) !important;
    margin-top: var(--space-md);
}

.echo-voice-setting label {
    font-size: 1.1rem;
    color: var(--accent-secondary);
}

.echo-voice-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.status-indicator {
    font-size: 1.2rem;
}

.status-indicator.ready {
    color: #22c55e;
}

.status-indicator.pending {
    color: #f59e0b;
}

.status-indicator.none {
    color: var(--text-muted);
}

.echo-voice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--space-sm);
}

.echo-voice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.echo-voice-btn .btn-icon {
    font-size: 1.3rem;
}

.echo-voice-btn.voice-ready {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.echo-voice-btn.voice-ready:hover {
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* =============================================================================
   Companion Switching Overlay
   ============================================================================= */

.companion-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.companion-loading-overlay.visible {
    display: flex;
    opacity: 1;
}

.companion-loading-overlay.fade-out {
    opacity: 0;
}

.companion-loading-content {
    text-align: center;
    animation: slideUp 0.4s ease;
}

.companion-loading-icon {
    font-size: 5rem;
    margin-bottom: var(--space-lg);
    animation: float 2s ease-in-out infinite;
}

.companion-loading-name {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: 0.05em;
}

.companion-loading-title {
    font-size: 1.1rem;
    color: var(--accent);
    margin: 0 0 var(--space-xl) 0;
    font-style: italic;
}

.companion-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto var(--space-md);
    animation: spin 1s linear infinite;
}

.companion-loading-status {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* =============================================================================
   Twin Evolution Notification (DSP-06)
   ============================================================================= */

@keyframes twinEvolveAnimation {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.twin-evolved-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: var(--space-xl, 2rem);
    border-radius: var(--radius-lg, 16px);
    text-align: center;
    z-index: 10000;
    animation: twinEvolveAnimation 0.6s ease-out;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.4);
    transition: opacity 0.5s ease;
}

.twin-evolved-notification h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm, 0.5rem);
}

.twin-evolved-notification p {
    opacity: 0.9;
    font-size: 1.1rem;
}

/* =============================================================================
   DSP Notification System (DSP-07, DSP-08, DSP-09)
   ============================================================================= */

.dsp-notification {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: rgba(20, 20, 25, 0.95);
    border: 1px solid rgba(100, 180, 160, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    max-width: 380px;
    z-index: 9999;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.dsp-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.dsp-notification .notification-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dsp-notification .notification-content {
    flex: 1;
    min-width: 0;
}

.dsp-notification .notification-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.dsp-notification .notification-body {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.dsp-notification .ritual-duration {
    background: rgba(100, 180, 160, 0.2);
    color: #64b4a0;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.dsp-notification .notification-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-top: 8px;
    line-height: 1.4;
}

.dsp-notification .notification-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.dsp-notification .notification-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dsp-notification .notification-btn.primary {
    background: linear-gradient(135deg, #64b4a0, #508cb4);
    color: white;
}

.dsp-notification .notification-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(100, 180, 160, 0.3);
}

.dsp-notification .notification-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.dsp-notification .notification-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.dsp-notification .notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.dsp-notification .notification-close:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Daily Ritual Notification */
.daily-ritual-notification {
    border-color: rgba(245, 158, 11, 0.3);
}

.daily-ritual-notification .notification-icon {
    color: #f59e0b;
}

/* Synergy Notification */
.synergy-notification {
    border-color: rgba(139, 92, 246, 0.3);
}

.synergy-notification .notification-icon {
    color: #8b5cf6;
}

.synergy-notification .synergy-clusters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.synergy-notification .cluster-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: white;
}

.synergy-notification .synergy-recommendations {
    margin-top: 10px;
}

.synergy-notification .recommendation {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin: 4px 0;
}

/* Pattern Insight Notification */
.pattern-insight-notification {
    border-color: rgba(100, 180, 160, 0.4);
}

.pattern-insight-notification .notification-icon {
    color: #64b4a0;
}

.pattern-insight-notification .pattern-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 8px 0;
}

.pattern-insight-notification .pattern-suggestion {
    color: #64b4a0;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* Habit Suggestion Notification */
.habit-suggestion-notification {
    border-color: rgba(34, 197, 94, 0.4);
}

.habit-suggestion-notification .notification-icon {
    color: #22c55e;
}

.habit-suggestion-notification .habit-message {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.habit-suggestion-notification .habit-details {
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
}

.habit-suggestion-notification .habit-details strong {
    color: #22c55e;
    font-size: 0.95rem;
}

.habit-suggestion-notification .habit-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin: 4px 0 0 0;
}

.habit-suggestion-notification .habit-structure {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.habit-suggestion-notification .habit-part {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.habit-suggestion-notification .habit-part strong {
    color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
   Micro-Ritual Overlay (DSP-07)
   ============================================================================= */

.micro-ritual-overlay {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.micro-ritual-overlay.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.micro-ritual-card {
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: var(--space-lg);
    width: 320px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.micro-ritual-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--water), var(--ether));
}

.micro-ritual-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s;
}

.micro-ritual-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.micro-ritual-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.micro-ritual-emoji {
    font-size: 1.8rem;
}

.micro-ritual-header h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

.micro-ritual-body {
    margin-bottom: var(--space-md);
}

.micro-ritual-suggestion {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.micro-ritual-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.micro-ritual-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.micro-ritual-duration {
    font-size: 0.85rem;
    color: var(--water);
    background: rgba(91, 143, 168, 0.15);
    padding: 2px 8px;
    border-radius: 12px;
}

.micro-ritual-preview {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: var(--space-sm) 0;
}

.step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.micro-ritual-actions {
    display: flex;
    gap: var(--space-sm);
}

.micro-ritual-start {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--water), var(--ether));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.micro-ritual-start:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 143, 168, 0.4);
}

.micro-ritual-later {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.micro-ritual-later:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Active Ritual State */
.micro-ritual-active {
    padding: var(--space-lg);
    text-align: center;
}

.micro-ritual-step-container {
    margin-bottom: var(--space-lg);
}

.micro-ritual-step-number {
    font-size: 0.8rem;
    color: var(--water);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
}

.micro-ritual-step-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.micro-ritual-progress {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: var(--space-md);
}

.progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.progress-dot.active {
    background: var(--water);
    transform: scale(1.2);
}

.progress-dot.completed {
    background: var(--air);
}

.micro-ritual-controls {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.micro-ritual-controls button {
    padding: var(--space-sm) var(--space-lg);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.micro-ritual-prev {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.micro-ritual-prev:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.micro-ritual-prev:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.05);
}

.micro-ritual-next {
    background: linear-gradient(135deg, var(--water), var(--ether));
    border: none;
    color: white;
}

.micro-ritual-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 143, 168, 0.4);
}

/* Complete State */
.micro-ritual-complete {
    padding: var(--space-xl);
    text-align: center;
}

.complete-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    animation: celebrateIcon 0.6s ease-out;
}

@keyframes celebrateIcon {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.micro-ritual-complete h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.micro-ritual-complete p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.complete-affirmation {
    font-style: italic;
    color: var(--water) !important;
    margin-top: var(--space-md);
}

.micro-ritual-close-btn {
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--air), var(--water));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.micro-ritual-close-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(135, 168, 137, 0.4);
}

/* =============================================================================
   DerealCore WASM Integration Styles
   ============================================================================= */

.wasm-state-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.wasm-state-badge.state-0 { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.wasm-state-badge.state-1 { background: rgba(132, 204, 22, 0.15); color: #84cc16; }
.wasm-state-badge.state-2 { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.wasm-state-badge.state-3 { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.wasm-state-badge.state-4 { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.wasm-state-badge.state-5 { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.wasm-state-badge.state-6 { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.wasm-state-badge.state-7 { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

#wasmCrisisBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease;
}

#wasmEmotionMeter {
    height: 4px;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
    min-width: 0;
}

.wasm-safety-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    max-width: 320px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    animation: wasmSlideIn 0.3s ease;
    backdrop-filter: blur(8px);
}

.wasm-safety-indicator.hidden {
    display: none;
}

.wasm-safety-indicator .safety-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
}

.wasm-safety-indicator .safety-icon {
    font-size: 20px;
}

.wasm-safety-indicator .safety-message {
    font-size: 13px;
    opacity: 0.95;
    margin: 0;
    line-height: 1.5;
}

.wasm-safety-indicator button {
    margin-top: 14px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    width: 100%;
}

.wasm-safety-indicator button:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes wasmSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.wasm-state-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =============================================================================
   Chat Page Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .companion-panel {
        display: none;
    }

    /* Cleaner header for mobile */
    .header {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .logo {
        gap: var(--space-xs);
    }

    .logo-text {
        font-size: 1.1rem;
        letter-spacing: 0.05em;
    }

    .logo-symbol {
        font-size: 1.2rem;
    }

    .header-right {
        gap: var(--space-xs);
    }

    /* Hide connection text, show only dot */
    .connection-status .status-text {
        display: none;
    }

    .connection-status {
        padding: 0;
    }

    /* Compact user section */
    .user-profile {
        gap: var(--space-xs);
        padding: var(--space-xs);
        background: transparent;
    }

    .user-avatar {
        width: 24px;
        height: 24px;
    }

    .user-name {
        display: none;
    }

    .nav-btn {
        font-size: 1.1rem;
        padding: 4px;
    }

    .logout-btn {
        width: 20px;
        height: 20px;
        font-size: 0.8rem;
    }

    /* Horizontal scrolling companion nav */
    .companion-nav {
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .companion-nav::-webkit-scrollbar {
        display: none;
    }

    .companion-btn {
        padding: var(--space-xs) var(--space-sm);
        min-width: auto;
        flex-shrink: 0;
    }

    .companion-title {
        display: none;
    }

    .companion-name {
        font-size: 0.75rem;
    }

    .companion-icon {
        font-size: 1.1rem;
    }

    /* Messages */
    .message {
        max-width: 85%;
        padding: var(--space-sm) var(--space-md);
    }

    .message-text {
        font-size: 0.9rem;
    }

    .message-meta {
        font-size: 0.7rem;
    }

    /* Cleaner voice controls */
    .voice-controls {
        padding: var(--space-sm) var(--space-md);
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 16px));
        background: linear-gradient(to top, var(--bg-primary), var(--bg-secondary));
        border-top: none;
    }

    .voice-visualizer {
        height: 24px;
        margin-bottom: var(--space-sm);
        opacity: 0.7;
    }

    .controls-row {
        gap: var(--space-lg);
    }

    /* Smaller, cleaner voice button */
    .voice-btn {
        width: 64px;
        height: 64px;
        border-width: 2px;
    }

    .voice-btn .voice-icon {
        font-size: 1.5rem;
    }

    /* Hide button text on mobile */
    .voice-btn .voice-text {
        display: none;
    }

    .control-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Chat area padding */
    .chat-main {
        padding: var(--space-sm);
    }

    .chat-messages {
        padding: var(--space-sm);
    }

    /* Nav menu */
    .nav-menu {
        grid-template-columns: 1fr;
        min-width: 180px;
        max-width: calc(100vw - 20px);
        right: -10px;
    }

    /* WASM safety */
    .wasm-safety-indicator {
        left: 20px;
        right: 20px;
        max-width: none;
        bottom: 80px;
    }
}

/* Even smaller screens (iPhone SE, etc) */
@media (max-width: 480px) {
    .nav-menu {
        position: fixed;
        top: 60px;
        right: 10px;
        left: 10px;
        min-width: unset;
        max-width: unset;
        width: auto;
    }

    .micro-ritual-overlay {
        bottom: 80px;
        right: 10px;
        left: 10px;
    }

    .micro-ritual-card {
        width: auto;
        max-width: none;
    }

    .micro-ritual-step-text {
        font-size: 1rem;
        min-height: 60px;
    }
}

@media (max-width: 380px) {
    .header {
        padding: var(--space-xs) var(--space-sm);
    }

    .logo-text {
        font-size: 1rem;
    }

    .nav-btn {
        font-size: 1rem;
        padding: 2px;
    }

    .companion-btn {
        padding: var(--space-xs);
    }

    .companion-name {
        font-size: 0.7rem;
    }

    .voice-btn {
        width: 56px;
        height: 56px;
    }

    .control-btn {
        width: 36px;
        height: 36px;
    }
}

/* =============================================================================
   Interim Transcript (Realtime Mode - partial STT)
   ============================================================================= */

.interim-transcript {
    opacity: 0.5;
    font-style: italic;
    animation: interimPulse 1.5s ease-in-out infinite;
}

.interim-transcript .message-text {
    color: var(--text-secondary, #aaa);
}

.interim-transcript .message-meta {
    color: var(--text-muted, #666);
    font-size: 0.75rem;
}

@keyframes interimPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* =============================================================================
   Conversation Mode (Realtime)
   ============================================================================= */

.chat-messages.conversation-mode {
    position: relative;
}

/* Floating "Live Conversation" indicator */
.chat-messages.conversation-mode::before {
    content: 'Live Conversation';
    position: sticky;
    top: 0;
    align-self: center;
    display: inline-block;
    padding: 4px 16px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    color: rgba(99, 102, 241, 0.9);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 10;
    backdrop-filter: blur(8px);
    margin-bottom: var(--space-sm);
}

.chat-messages.conversation-mode .message {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.5rem 1rem;
    margin: 0.25rem 0;
    max-width: 100%;
    animation: none;
}

.chat-messages.conversation-mode .message.user {
    color: var(--accent-light, #818cf8);
    font-style: italic;
    align-self: stretch;
}

.chat-messages.conversation-mode .message.companion {
    color: var(--text-primary);
    align-self: stretch;
    background: none;
    border: none;
}

.chat-messages.conversation-mode .message.companion.streaming {
    border: none;
    animation: none;
}

.chat-messages.conversation-mode .message-meta {
    display: none;
}

/* =============================================================================
   AI Thinking Indicator (Realtime)
   ============================================================================= */

.ai-thinking-indicator {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    animation: thinkingFadeIn 0.2s ease;
}

@keyframes thinkingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.thinking-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.6);
    animation: thinkingPulse 1.2s ease-in-out infinite;
}

.thinking-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes thinkingPulse {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    30% {
        transform: scale(1.4);
        opacity: 1;
    }
}

/* =============================================================================
   Realtime Listening Pulse Animation
   ============================================================================= */

.voice-controls.realtime-active .voice-btn {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    animation: realtime-pulse 2s infinite;
}

@keyframes realtime-pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* =============================================================================
   Session Summary Card
   ============================================================================= */

.session-summary {
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.1));
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
    animation: fadeInUp 0.4s ease;
}

.session-summary .summary-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(168, 85, 247, 0.9);
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.02em;
}

.session-summary .summary-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary, #e0e0e0);
    margin: 0 0 0.75rem 0;
}

.session-summary .summary-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.75rem;
}

.session-summary .summary-topic-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: rgba(165, 180, 252, 0.9);
    font-size: 0.75rem;
}

.session-summary .summary-journey {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.session-summary .journey-start {
    color: rgba(251, 146, 60, 0.9);
}

.session-summary .journey-arrow {
    color: rgba(255, 255, 255, 0.4);
}

.session-summary .journey-end {
    color: rgba(52, 211, 153, 0.9);
}

.session-summary .summary-insight {
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.05);
    border-radius: 0 6px 6px 0;
}

.session-summary .summary-insight strong {
    color: rgba(168, 85, 247, 0.85);
}

.session-summary .summary-next {
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
    margin-bottom: 0.75rem;
}

.session-summary .summary-next strong {
    color: rgba(52, 211, 153, 0.85);
}

.session-summary .summary-meta {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =============================================================================
   Dereal Voice App - Sub-Page Shared Styles
   Styles shared across sub-pages: admin, onboarding, page containers, cards, grids.
   ============================================================================= */

/* =============================================================================
   Onboarding Wizard
   ============================================================================= */

.onboarding-wizard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.onboarding-wizard.hidden {
    display: none;
}

.onboarding-container {
    max-width: 500px;
    width: 90%;
    padding: var(--space-xl);
    text-align: center;
}

.onboarding-header {
    margin-bottom: var(--space-xl);
}

.onboarding-logo {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-md);
}

.onboarding-header h2 {
    font-family: 'Crimson Pro', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm);
}

.onboarding-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.onboarding-content {
    margin-bottom: var(--space-xl);
    text-align: left;
}

.onboarding-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.onboarding-companions-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.companion-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
}

.companion-preview span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.onboarding-input-group {
    margin-bottom: var(--space-md);
}

.onboarding-input-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.onboarding-input-group input[type="text"],
.onboarding-input-group input[type="date"] {
    width: 100%;
    padding: var(--space-md);
    font-size: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.onboarding-input-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.input-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.onboarding-checkbox-group {
    text-align: left;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    cursor: pointer;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.checkbox-label input:checked + .checkbox-custom {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-label input:checked + .checkbox-custom::after {
    content: '\2713';
    color: white;
    font-size: 14px;
}

.checkbox-text {
    color: var(--text-secondary);
    line-height: 1.5;
}

.onboarding-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.onboarding-btn {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-btn.primary {
    background: var(--accent);
    color: white;
}

.onboarding-btn.primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.onboarding-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.onboarding-btn.secondary:hover {
    background: var(--bg-tertiary);
}

.onboarding-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.onboarding-progress {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-xl);
}

.onboarding-step {
    animation: slideIn 0.3s ease;
}

.onboarding-step.hidden {
    display: none;
}

/* =============================================================================
   Admin Dashboard
   ============================================================================= */

.admin-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 2000;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}

.admin-dashboard.hidden {
    display: none;
}

.admin-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.admin-header h1 {
    font-family: 'Crimson Pro', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0;
}

.admin-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: var(--space-sm);
    line-height: 1;
}

.admin-close-btn:hover {
    color: var(--text-primary);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.stat-card {
    background: var(--bg-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-section {
    margin-bottom: var(--space-xl);
}

.admin-section h2 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 var(--space-md);
    color: var(--text-primary);
}

.admin-mini-stats {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.mini-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.mini-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mini-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.companion-stats {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.companion-stat {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.companion-stat-icon {
    font-size: 1.2rem;
}

.companion-stat-count {
    font-weight: 600;
    color: var(--accent);
}

.admin-search {
    margin-bottom: var(--space-md);
}

.admin-search input {
    width: 100%;
    max-width: 400px;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.admin-search input:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-users-table {
    overflow-x: auto;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.admin-users-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-users-table th,
.admin-users-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-users-table th {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-users-table tr:last-child td {
    border-bottom: none;
}

.admin-users-table tr:hover td {
    background: var(--bg-tertiary);
}

.user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-cell-name {
    font-weight: 500;
    color: var(--text-primary);
}

.user-cell-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.admin-toggle {
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.admin-toggle.is-admin {
    background: var(--accent);
    color: white;
}

.admin-toggle.not-admin {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.admin-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.pagination-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.pagination-btn:hover {
    background: var(--bg-tertiary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile adjustments for admin */
@media (max-width: 768px) {
    .admin-container {
        padding: var(--space-md);
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 1.8rem;
    }

    .admin-users-table {
        font-size: 0.8rem;
    }

    .admin-users-table th,
    .admin-users-table td {
        padding: var(--space-sm);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT PAGE REDESIGN — Ambient mode + Presence Orb + Suggestions Rail
   Appended at the end of style.css so these rules win without editing
   the thousands of lines above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Per-companion color tokens (set on <body> via JS) ── */
body[data-companion="compass"]  { --companion-primary: var(--air,   #87A889); --companion-deep: #5f7f63; }
body[data-companion="flora"]    { --companion-primary: var(--earth, #8B7355); --companion-deep: #5e4e3a; }
body[data-companion="alethea"]  { --companion-primary: var(--ether, #9B8AA8); --companion-deep: #6b5d77; }
body[data-companion="eirene"]   { --companion-primary: var(--water, #5B8FA8); --companion-deep: #3e6b82; }
body[data-companion="socius"]   { --companion-primary: var(--fire,  #D4763A); --companion-deep: #9a5020; }
body[data-companion="echo"]     { --companion-primary: var(--ether, #9B8AA8); --companion-deep: #6b5d77; }
body[data-companion="muse"]     { --companion-primary: var(--accent,#C4A77D); --companion-deep: #8a724c; }

/* Default (no companion set yet) */
body:not([data-companion]) { --companion-primary: var(--accent, #C4A77D); --companion-deep: #8a724c; }

/* ── Ambient backdrop: subtle companion-colored glow behind everything ── */
body.chat-page {
    position: relative;
}
body.chat-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 40% at 20% 10%,
            color-mix(in srgb, var(--companion-primary) 12%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 50% 35% at 85% 80%,
            color-mix(in srgb, var(--companion-deep) 10%, transparent) 0%,
            transparent 60%);
    transition: background 1.2s ease;
}
/* Tone-field modulates the ambient intensity */
body.chat-page.tone-grounded::before { opacity: 0.85; }
body.chat-page.tone-fluid::before    { opacity: 1.00; }
body.chat-page.tone-radiant::before  { opacity: 1.15; filter: saturate(1.1); }
body.chat-page.tone-clear::before    { opacity: 0.7; }
body.chat-page.tone-silent::before   { opacity: 0.5; }

/* Browsers without color-mix fall back to plain accent tint */
@supports not (background: color-mix(in srgb, red, blue)) {
    body.chat-page::before {
        background:
            radial-gradient(ellipse 70% 40% at 20% 10%, rgba(196,167,125,0.12) 0%, transparent 65%),
            radial-gradient(ellipse 50% 35% at 85% 80%, rgba(196,167,125,0.08) 0%, transparent 60%);
    }
}

/* Keep the app content above the ambient layer */
body.chat-page #app { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRESENCE ORB — living avatar replacement
   ═══════════════════════════════════════════════════════════════════════════ */

.presence-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 1rem auto 1.25rem;
    background: radial-gradient(circle at 35% 30%,
        color-mix(in srgb, var(--companion-primary) 45%, transparent) 0%,
        color-mix(in srgb, var(--companion-primary) 15%, var(--bg-dark)) 55%,
        var(--bg-dark, #0a0a0f) 100%);
    border: 1.5px solid color-mix(in srgb, var(--companion-primary) 55%, transparent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        inset 0 0 24px color-mix(in srgb, var(--companion-primary) 20%, transparent),
        0 0 30px color-mix(in srgb, var(--companion-primary) 25%, transparent);
    animation: orb-breathe 5s ease-in-out infinite;
    transition: box-shadow 0.3s, transform 0.3s;
    padding: 0;
    flex-shrink: 0;
}

.presence-orb:hover {
    transform: scale(1.03);
    box-shadow:
        inset 0 0 32px color-mix(in srgb, var(--companion-primary) 30%, transparent),
        0 0 45px color-mix(in srgb, var(--companion-primary) 45%, transparent);
}

@keyframes orb-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

/* SVG icon inside the orb — tinted gold, soft */
.presence-orb .presence-orb-inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: color-mix(in srgb, var(--accent, #C4A77D) 90%, var(--companion-primary) 10%);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--companion-primary) 30%, transparent));
}
.presence-orb .presence-orb-inner svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Halo (pulsing ring) */
.presence-orb .presence-orb-halo {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--companion-primary) 40%, transparent);
    opacity: 0;
    animation: orb-halo 4s ease-out infinite;
    pointer-events: none;
}

@keyframes orb-halo {
    0%   { transform: scale(0.8); opacity: 0.5; }
    70%  { opacity: 0.15; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Floating particles */
.presence-orb .presence-orb-particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--companion-primary) 70%, white 30%);
    opacity: 0;
    pointer-events: none;
}
.presence-orb-particle-1 { top: 20%; left: 80%; animation: orb-particle-a 6s ease-in-out infinite 0s; }
.presence-orb-particle-2 { top: 70%; left: 20%; animation: orb-particle-a 6s ease-in-out infinite 2s; }
.presence-orb-particle-3 { top: 40%; left: 50%; animation: orb-particle-a 6s ease-in-out infinite 4s; }

@keyframes orb-particle-a {
    0%, 100% { opacity: 0; transform: translate(0,0); }
    40%      { opacity: 0.6; transform: translate(10px, -14px); }
    70%      { opacity: 0; transform: translate(18px, -26px); }
}

/* Processing state: brighter + faster pulse */
.presence-orb.processing {
    animation: orb-breathe-fast 2s ease-in-out infinite;
    box-shadow:
        inset 0 0 32px color-mix(in srgb, var(--companion-primary) 40%, transparent),
        0 0 50px color-mix(in srgb, var(--companion-primary) 60%, transparent);
}
@keyframes orb-breathe-fast {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .presence-orb,
    .presence-orb .presence-orb-halo,
    .presence-orb .presence-orb-particle {
        animation: none !important;
    }
}

/* ── Companion panel layout adjustments for new children ── */
.companion-panel {
    gap: 0.4rem;
}

.companion-panel .companion-full-name {
    margin-top: 0.25rem;
}

.companion-panel .companion-archetype {
    margin: 0.15rem 0 0.6rem;
}

.companion-panel .tone-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 12px;
    background: color-mix(in srgb, var(--companion-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--companion-primary) 30%, transparent);
    border-radius: 999px;
    margin: 0.4rem auto 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.companion-panel .tone-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
}
.companion-panel .tone-value {
    color: color-mix(in srgb, var(--companion-primary) 80%, white 20%);
    font-weight: 500;
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-size: 0.85rem;
}

.companion-panel .companion-purpose {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* Emotional state: compact row of meters, no title */
.companion-panel .emotional-state {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}
.companion-panel .emotional-state h3 { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SUGGESTIONS RAIL — live contextual prompts
   ═══════════════════════════════════════════════════════════════════════════ */

.suggestions-rail {
    width: 100%;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
    margin: 0.5rem 0;
    text-align: left;
}

.suggestions-rail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.suggestions-rail-eyebrow {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.suggestions-refresh {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.suggestions-refresh:hover {
    color: var(--companion-primary);
    background: color-mix(in srgb, var(--companion-primary) 10%, transparent);
}
.suggestions-refresh svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.suggestions-rail-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.suggestion-chip {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--companion-primary) 6%, var(--bg-elevated, rgba(255,255,255,0.03)));
    border: 1px solid color-mix(in srgb, var(--companion-primary) 18%, var(--border-subtle, rgba(255,255,255,0.05)));
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    font-family: inherit;
    position: relative;
}
.suggestion-chip:hover {
    border-color: color-mix(in srgb, var(--companion-primary) 55%, transparent);
    background: color-mix(in srgb, var(--companion-primary) 10%, var(--bg-elevated, rgba(255,255,255,0.04)));
    transform: translateY(-1px);
    color: var(--text-primary);
}

.suggestion-chip .suggestion-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: color-mix(in srgb, var(--companion-primary) 80%, white 20%);
    margin-top: 2px;
}
.suggestion-chip .suggestion-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.suggestion-chip .suggestion-text { flex: 1; min-width: 0; }

.suggestion-chip .suggestion-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    cursor: pointer;
}
.suggestion-chip:hover .suggestion-dismiss { opacity: 0.7; }
.suggestion-chip .suggestion-dismiss:hover { color: var(--text-primary); opacity: 1; }

.suggestions-rail-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0.5rem 0;
    font-style: italic;
}
.suggestions-rail-list:not(:empty) + .suggestions-rail-empty { display: none; }

/* Entrance animation for chips */
@media (prefers-reduced-motion: no-preference) {
    .suggestion-chip {
        opacity: 0;
        transform: translateY(6px);
        animation: chip-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    .suggestion-chip:nth-child(1) { animation-delay: 0.05s; }
    .suggestion-chip:nth-child(2) { animation-delay: 0.12s; }
    .suggestion-chip:nth-child(3) { animation-delay: 0.19s; }
    .suggestion-chip:nth-child(4) { animation-delay: 0.26s; }
    @keyframes chip-in { to { opacity: 1; transform: translateY(0); } }
}

/* Responsive: on narrow viewports the companion panel collapses — keep the
   suggestions rail inside without weird overflow */
@media (max-width: 900px) {
    .presence-orb { width: 110px; height: 110px; margin: 0.75rem auto; }
    .presence-orb .presence-orb-inner { width: 44px; height: 44px; }
    .presence-orb .presence-orb-inner svg { width: 38px; height: 38px; }
    .suggestion-chip { font-size: 0.85rem; }
}

/* Healing state badge inside the companion panel — center it and give it
   the same pill aesthetic as the neighboring tone-field */
.companion-panel .healing-state-indicator {
    display: inline-flex;
    margin: 0 auto 0.75rem;
    font-size: 0.7rem;
    padding: 4px 12px;
    border: 1px solid currentColor;
    box-shadow: 0 0 6px color-mix(in srgb, currentColor 20%, transparent);
    align-self: center;
}

/* Refresh button spin state for the Suggestions Rail */
.suggestions-refresh.spinning svg { animation: suggestions-spin 0.7s linear; }
@keyframes suggestions-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT GRID REDESIGN — "Constellation" direction
   (ported from the Claude Design handoff — design_handoff_dereal_chat)
   320px  |  1fr  |  280px  on desktop: picker | chat-stage | aside
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the legacy horizontal companion strip but keep .companion-btn nodes
   in the DOM so existing chat.js code paths still find them. */
.companion-nav.legacy-hidden { display: none !important; }

/* Companion color → RGB triplet for rgba composition */
body[data-companion="compass"]  { --companion-rgb: 135, 168, 137; }
body[data-companion="flora"]    { --companion-rgb: 139, 115, 85; }
body[data-companion="alethea"]  { --companion-rgb: 155, 138, 168; }
body[data-companion="eirene"]   { --companion-rgb: 91, 143, 168; }
body[data-companion="socius"]   { --companion-rgb: 212, 118, 58; }
body[data-companion="echo"]     { --companion-rgb: 155, 138, 168; }
body[data-companion="muse"]     { --companion-rgb: 196, 167, 125; }
body:not([data-companion])      { --companion-rgb: 196, 167, 125; }

/* Main grid */
.chat-container.chat-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 280px;
    grid-template-areas: "constellation stage aside";
    min-height: calc(100vh - 74px);
    gap: 0;
}
.chat-container.chat-grid > .constellation    { grid-area: constellation; }
.chat-container.chat-grid > .chat-stage       { grid-area: stage; }
.chat-container.chat-grid > .companion-panel  { grid-area: aside; }
.chat-container.chat-grid > .chat-messages    { grid-area: stage; }

/* On tablet shrink the picker, on mobile collapse to a single column with
   the aside hidden (companion info is already shown in the picker). */
@media (max-width: 1100px) {
    .chat-container.chat-grid {
        grid-template-columns: 280px 1fr;
        grid-template-areas:
            "constellation stage"
            "aside aside";
    }
    .chat-container.chat-grid > .companion-panel {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 760px) {
    .chat-container.chat-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "constellation"
            "stage"
            "aside";
    }
    .chat-container.chat-grid > .constellation { border-right: none; }
}

/* ── Left: Constellation picker ───────────────────────────────────────── */

.constellation {
    position: relative;
    padding: 28px 24px;
    border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    overflow: hidden;
    background: linear-gradient(180deg,
        rgba(var(--companion-rgb), 0.04) 0%,
        transparent 60%);
}

.constellation-eyebrow {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.active-detail-eyebrow { margin-bottom: 8px !important; }

.constellation-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 260px;
    margin: 0 auto;
}

.const-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(255,255,255,0.06);
    border-radius: 50%;
}
.const-ring.inner {
    inset: 22%;
    border-style: dotted;
}

.const-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    box-shadow: 0 0 12px rgba(255,255,255,0.3);
}

.const-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--companion-rgb), 0.6), transparent);
    transform-origin: 0 50%;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    width: 38%;
}
.const-line.show { opacity: 0.5; }

.const-star {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    padding: 0;
    transition: color 0.25s ease;
    z-index: 2;
}
.const-star:hover,
.const-star.active { color: var(--text-primary); }

.star-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 1px solid rgba(255,255,255,0.25);
    position: relative;
    transition: all 0.3s ease;
}
.star-dot::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--star-rgb), 0.3), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.const-star:hover .star-dot,
.const-star.active .star-dot {
    background: rgba(var(--star-rgb), 1);
    border-color: rgba(var(--star-rgb), 1);
    box-shadow: 0 0 12px rgba(var(--star-rgb), 0.8);
}
.const-star:hover .star-dot::after,
.const-star.active .star-dot::after { opacity: 1; }
.const-star.active .star-dot {
    animation: const-breathe 3.5s ease-in-out infinite;
}
@keyframes const-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

.star-label {
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-size: 13px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.const-star:hover .star-label,
.const-star.active .star-label { opacity: 1; }

.star-element {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.const-star.active .star-element { opacity: 1; }

.active-detail {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}
.constellation-name {
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-weight: 300;
    font-size: 32px;
    margin: 0 0 4px;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}
.constellation-archetype {
    color: rgba(var(--companion-rgb), 0.9);
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-style: italic;
    font-size: 15px;
    margin-bottom: 12px;
}
.constellation-purpose {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

/* ── Center: Chat stage with mood-rhythm gutter ───────────────────────── */

.chat-stage {
    /* empty spacer — the actual chat scroll sits in its own grid area. This
       section's only job is to render the mood gutter inside the grid. */
    display: none;
}

/* Turn .chat-messages into a 2-col grid: [gutter | messages] */
.chat-container.chat-grid > .chat-messages {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 20px;
    padding: 24px 40px;
    align-content: start;
    overflow-y: auto;
}

/* First child (#moodGutter stays hidden in .chat-stage — we render a
   parallel .mood-gutter inside .chat-messages for easy column alignment) */
.mood-gutter {
    position: relative;
    padding-top: 12px;
    grid-column: 1;
}
.mood-track {
    position: absolute;
    top: 20px; bottom: 20px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(255,255,255,0.08) 8%,
        rgba(255,255,255,0.08) 92%,
        transparent);
}
.mood-node {
    position: relative;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-bottom: 18px;
}
.mood-node .mood-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* When the chat-messages is displayed as grid, push existing .welcome-
   message / .message / widgets into the second column automatically. */
.chat-container.chat-grid > .chat-messages > *:not(.mood-gutter) {
    grid-column: 2;
}

/* ── Right: Companion aside (kept mostly as-is, now sits in grid col 3) ─ */

.companion-panel {
    border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    padding: 24px 20px;
    overflow-y: auto;
}

/* Mobile: collapse constellation into a horizontal strip */
@media (max-width: 760px) {
    .constellation-canvas { display: none; }
    .constellation {
        padding: 16px 16px 10px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .active-detail { margin-top: 0; padding-top: 12px; border-top: none; }
    .constellation-name { font-size: 24px; }
    .chat-container.chat-grid > .chat-messages { padding: 16px 20px; }
    .mood-gutter { display: none; }
    .chat-container.chat-grid > .chat-messages > *:not(.mood-gutter) {
        grid-column: 1 / -1;
    }
    .chat-container.chat-grid > .chat-messages {
        grid-template-columns: 1fr;
    }
    .companion-panel { border-left: none; border-top: 1px solid var(--border-subtle); }
}