/* ═══════════════════════════════════════════════════════════════
   AccessBot — Aurora Dark Theme
   Calm, low-brightness palette inspired by the northern lights.
   Designed for low-vision, screen-readers, touch, and mobile.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
    --bg-deep:    #060e1c;
    --bg-base:    #0b1829;
    --bg-card:    #0f2240;
    --bg-raised:  #162e52;
    --bg-hover:   #1c3860;
    --accent:       #00c4a7;
    --accent-hover: #00a893;
    --accent-dim:   #006b5c;
    --accent-glow:  rgba(0, 196, 167, 0.20);
    --text-primary:   #ddf0ec;
    --text-secondary: #7eb5ad;
    --text-muted:     #3f6e68;
    --border:        #1b3650;
    --border-bright: #2a5070;
    --error:         #ff6b6b;
    --error-bg:      #2a1010;
    --error-border:  #6b2020;
    --success:       #4ade80;
    --success-bg:    #0e2a1b;
    --success-border:#1a5c32;
    --bubble-user:      #0a4d42;
    --bubble-user-text: #cff5ef;
    --bubble-bot:       #101f36;
    --bubble-bot-text:  #d0e8e4;
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                 'Ubuntu', 'Helvetica Neue', sans-serif;
    --font-size-base: 17px;
    --line-height:    1.65;
    --touch-min: 48px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: 0.2s ease;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Base ───────────────────────────────────────────────────────── */
html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    font-family: var(--font-base);
    background: var(--bg-deep);
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(0,100,80,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 5%,  rgba(0,60,100,0.20) 0%, transparent 55%);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    line-height: var(--line-height);
}

.hidden { display: none !important; }
.container { width: 100%; max-width: 960px; }

/* ── Auth card ──────────────────────────────────────────────────── */
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: 0 0 0 1px var(--border), 0 16px 48px rgba(0,0,0,0.6),
                0 0 60px rgba(0,196,167,0.06);
    max-width: 480px;
    margin: 0 auto;
}

.auth-card h1 {
    color: var(--accent);
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    text-shadow: 0 0 30px rgba(0,196,167,0.4);
}

.tagline {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 1.05rem;
}

/* ── Forms ──────────────────────────────────────────────────────── */
.form-section h2 { color: var(--text-primary); margin-bottom: 24px; font-size: 1.25rem; }
.form-group { margin-bottom: 22px; }

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-base);
    border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--text-primary);
    font-family: var(--font-base);
    min-height: var(--touch-min);
    transition: border-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300c4a7' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    background: var(--bg-raised);
    outline: 3px solid var(--accent-glow);
    outline-offset: 1px;
}

.switch-form { text-align: center; margin-top: 20px; color: var(--text-secondary); font-size: 0.95rem; }
.switch-form a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--transition); }
.switch-form a:hover, .switch-form a:focus-visible { text-decoration-color: var(--accent); }

/* ── Auth: "or" divider & Google button ─────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-bright);
}

/* White/light button matching Google brand guidelines */
.btn-google {
    width: 100%;
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-base);
    cursor: pointer;
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 22px;
    transition: background var(--transition), box-shadow var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.btn-google:hover:not(:disabled) {
    background: #f8f8f8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.btn-google:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.btn-google:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 22px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-base);
    cursor: pointer;
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition);
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--accent); color: #041a16; font-weight: 700; width: 100%; border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--accent-hover); border-color: var(--accent-hover);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.btn-secondary { background: var(--bg-raised); color: var(--text-primary); border-color: var(--border-bright); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--bg-hover); border-color: var(--accent-dim); }

.btn-sm { padding: 8px 14px; font-size: 0.875rem; min-height: 36px; width: auto; }

.error-message {
    background: var(--error-bg);
    color: var(--error);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-top: 20px;
    border: 1px solid var(--error-border);
    font-size: 0.95rem;
}

/* ── Chat container ─────────────────────────────────────────────── */
#chat-container {
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px var(--border), 0 16px 64px rgba(0,0,0,0.7),
                0 0 80px rgba(0,196,167,0.04);
    height: 93vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
}

/* ── Chat header ────────────────────────────────────────────────── */
.chat-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Row 1: branding */
.chat-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
}
.chat-header-top h1 {
    color: var(--accent);
    font-size: 1.55rem;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(0,196,167,0.35);
    white-space: nowrap;
    flex: 1;
}
.chat-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.chat-header-user > span {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Row 2: nav */
.chat-header-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
}

.chat-nav-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.chat-nav-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: stretch;
}

/* Nav buttons — big, equal-width, easy to tap */
.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 10px;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-base);
    background: var(--bg-raised);
    color: var(--text-primary);
    border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.btn-nav:hover, .btn-nav:focus-visible {
    background: var(--bg-hover);
    border-color: var(--accent-dim);
    color: var(--accent);
}
.btn-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Legacy — keep .user-info for anything else that may reference it */
.user-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-info > span { color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; }

/* A11y toolbar */
.a11y-toolbar { position: relative; display: flex; }
.a11y-btn {
    background: var(--bg-raised);
    border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 14px;
    min-height: 52px;
    min-width: 64px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.a11y-btn:hover, .a11y-btn:focus-visible { background: var(--bg-hover); border-color: var(--accent-dim); color: var(--accent); }
.a11y-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.a11y-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--bg-raised);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    min-width: 300px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
.a11y-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.a11y-row:last-child { border-bottom: none; }
.a11y-label { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; flex-shrink: 0; }

/* ── A11y panel: theme swatches ─────────────────────────────────── */
.a11y-section { padding: 8px 0 6px; border-bottom: 1px solid var(--border); }
.a11y-section-hd { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 7px; font-weight: 600; }
.a11y-themes { display: flex; flex-wrap: wrap; gap: 5px; }
.theme-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: var(--bg-card); border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm); padding: 5px 7px; cursor: pointer;
    color: var(--text-secondary); font-size: 0.7rem; font-family: inherit;
    min-width: 54px; transition: all var(--transition);
}
.theme-btn:hover { border-color: var(--accent-dim); color: var(--text-primary); background: var(--bg-raised); }
.theme-btn.active, .theme-btn[aria-checked="true"] { border-color: var(--accent); color: var(--text-primary); background: var(--bg-raised); }
.theme-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-swatch { width: 30px; height: 18px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); display: block; }
.swatch-default      { background: linear-gradient(135deg, #060e1c 50%, #00c4a7 50%); }
.swatch-hc-light     { background: linear-gradient(135deg, #ffffff 50%, #005a4d 50%); }
.swatch-yellow-black { background: linear-gradient(135deg, #000000 50%, #ffe94d 50%); }
.swatch-soft-warm    { background: linear-gradient(135deg, #1a1008 50%, #e8a060 50%); }

/* ── A11y panel: font-zoom slider ───────────────────────────────── */
.a11y-slider-row { flex-direction: column; align-items: flex-start !important; gap: 5px; }
.a11y-slider-wrap { display: flex; align-items: center; gap: 8px; width: 100%; }
.a11y-slider-wrap input[type=range] { flex: 1; accent-color: var(--accent); cursor: pointer; height: 5px; border-radius: 3px; padding: 0; min-height: 0; }
.a11y-slider-wrap output { font-size: 0.82rem; font-weight: 700; color: var(--accent); min-width: 36px; text-align: right; }

/* ── A11y panel: line-spacing steppers ──────────────────────────── */
.a11y-steppers { display: flex; gap: 4px; }
.step-btn {
    padding: 4px 9px; font-size: 0.76rem; font-family: inherit; font-weight: 500;
    background: var(--bg-card); border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary);
    transition: all var(--transition); white-space: nowrap;
}
.step-btn:hover { border-color: var(--accent-dim); color: var(--text-primary); }
.step-btn.active, .step-btn[aria-checked="true"] { background: var(--accent); color: #041a16; border-color: var(--accent); font-weight: 700; }
.step-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Toggle switch */
.toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute; inset: 0;
    background: var(--border-bright);
    border-radius: 26px;
    cursor: pointer;
    transition: background var(--transition);
}
.toggle-slider::before {
    content: ''; position: absolute;
    width: 20px; height: 20px; left: 3px; top: 3px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: transform var(--transition);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Hamburger */
#sidebar-toggle {
    display: none;
    background: var(--bg-raised);
    border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1.3rem;
    width: 48px; height: 48px;
    align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
}

/* ── Chat body ──────────────────────────────────────────────────── */
.chat-body { flex: 1; display: flex; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    width: 240px; min-width: 200px;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    background: var(--bg-base);
    border-bottom-left-radius: var(--radius-lg);
    flex-shrink: 0;
}
.sidebar-header { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 44px; }
.sidebar-header h2 { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; flex: 1; margin: 0; }
.sidebar-hd-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

/* Select button — ghost/subtle style */
#select-chats-btn {
    background: none; border: 1px solid var(--border-bright); color: var(--text-muted);
    font-size: 0.75rem; padding: 3px 8px; border-radius: 5px; cursor: pointer;
    transition: all 0.15s;
}
#select-chats-btn:hover { border-color: var(--accent-dim); color: var(--text-secondary); }

/* Bulk delete bar — single compact row */
.bulk-delete-bar {
    display: flex; align-items: center; gap: 6px; padding: 5px 12px;
    background: var(--bg-raised); border-bottom: 1px solid var(--border-bright);
    min-height: 36px;
}
#selected-count { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; flex: 1; white-space: nowrap; }
.bulk-cancel {
    background: none; border: none; color: var(--text-muted); font-size: 1rem;
    cursor: pointer; padding: 2px 5px; border-radius: 4px; line-height: 1; flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.bulk-cancel:hover { color: var(--text-primary); background: var(--bg-hover); }
.bulk-btn {
    font-size: 0.75rem; padding: 3px 9px; white-space: nowrap;
    background: none; border: 1px solid var(--border-bright);
    color: var(--text-secondary); border-radius: 5px; cursor: pointer;
    transition: all 0.15s; flex-shrink: 0;
}
.bulk-btn:hover:not(:disabled) { border-color: var(--accent-dim); color: var(--text-primary); }
.bulk-btn-del { color: #e06c75; border-color: rgba(224,108,117,.35); }
.bulk-btn-del:hover:not(:disabled) { background: rgba(224,108,117,.15); border-color: #e06c75; }
.bulk-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Checkboxes in select mode */
.conv-checkbox { display: none; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.conversations-list.select-mode .conv-checkbox { display: block; }
.conversations-list.select-mode .conv-menu-btn { display: none; }
.conversations-list.select-mode li { cursor: default; }
.conversations-list li.selected { background: var(--bg-hover); border-left-color: var(--accent); }

.conversations-list { list-style: none; overflow-y: auto; flex: 1; padding: 8px 0; }
.conversations-list::-webkit-scrollbar { width: 5px; }
.conversations-list::-webkit-scrollbar-track { background: transparent; }
.conversations-list::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

.conversations-list li {
    padding: 8px 10px 8px 16px; cursor: pointer;
    border-left: 3px solid transparent;
    font-size: 0.9rem; color: var(--text-secondary);
    transition: background var(--transition), border-color var(--transition);
    min-height: 44px; display: flex; align-items: center; gap: 4px;
    position: relative; overflow: visible;
}
.conversations-list li:hover { background: var(--bg-raised); color: var(--text-primary); }
.conversations-list li.active { background: var(--bg-hover); border-left-color: var(--accent); color: var(--text-primary); font-weight: 600; }
.conversations-list li.empty-state { color: var(--text-muted); font-style: italic; cursor: default; font-size: 0.85rem; }
.conversations-list li.empty-state:hover { background: transparent; }

/* Conversation title + action menu */
.conv-title {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.conv-menu-btn {
    flex-shrink: 0; opacity: 0; background: none; border: none;
    color: var(--text-secondary); font-size: 1.1rem; line-height: 1;
    padding: 2px 6px; border-radius: 4px; cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}
.conversations-list li:hover .conv-menu-btn,
.conversations-list li.active .conv-menu-btn { opacity: 1; }
.conv-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.conv-menu {
    position: absolute; right: 4px; top: 100%; z-index: 200;
    background: var(--bg-raised); border: 1px solid var(--border-bright);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
    min-width: 150px; overflow: hidden;
}
.conv-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 14px; background: none; border: none;
    font-size: 0.88rem; color: var(--text-primary); cursor: pointer;
    transition: background 0.1s;
}
.conv-menu-item:hover { background: var(--bg-hover); }
.conv-menu-delete { color: #e06c75; }
.conv-menu-delete:hover { background: rgba(224,108,117,.12); }
.conv-rename-input {
    flex: 1; min-width: 0; background: var(--bg-input, var(--bg-hover));
    border: 1px solid var(--accent); border-radius: 4px;
    color: var(--text-primary); font-size: 0.9rem; padding: 2px 6px;
    outline: none;
}

/* ── Sidebar search ─────────────────────────────────────────────── */
.sidebar-search { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sidebar-search input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    min-height: 36px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.sidebar-search input::placeholder { color: var(--text-muted); }
.sidebar-search input:focus { border-color: var(--accent); outline: 2px solid rgba(0,196,167,0.20); outline-offset: 1px; }
.search-result-title { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-snippet { display: block; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ── Main chat ──────────────────────────────────────────────────── */
.chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; }

/* ── Scroll-to-top button ───────────────────────────────────────────────── */
.scroll-top-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 50;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-card, #0d1f35);
    color: var(--accent, #00d4aa);
    border: 1px solid var(--border-bright, #1b3650);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    transition: background var(--transition), transform var(--transition), opacity var(--transition);
    opacity: 0.85;
}
.scroll-top-btn:hover  { background: var(--bg-raised); transform: translateY(-2px); opacity: 1; }
.scroll-top-btn:active { transform: translateY(0); }
.scroll-top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scroll-top-btn[hidden] { display: none; }

/* ── Page-level scroll-to-top (fixed, all non-chat pages) ────────────── */
.page-scroll-top-btn {
    position: fixed;
    bottom: 88px;          /* sit above the bottom nav bar */
    right: 20px;
    z-index: 9970;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card, #0d1f35);
    color: var(--accent, #00d4aa);
    border: 1px solid var(--accent, #00d4aa);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s, border-color 0.15s;
    user-select: none;
}
.page-scroll-top-btn.visible {
    opacity: 0.88;
    pointer-events: auto;
    transform: translateY(0);
}
.page-scroll-top-btn:hover  { background: var(--accent, #00d4aa); color: #060e1c; opacity: 1; transform: translateY(-2px); }
.page-scroll-top-btn:active { transform: translateY(0); }
.page-scroll-top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.messages::-webkit-scrollbar { width: 5px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

/* ── Bubbles ────────────────────────────────────────────────────── */
.message { max-width: 72%; padding: 14px 18px; border-radius: var(--radius-md); line-height: 1.65; font-size: 1rem; word-wrap: break-word; }
.message.user { align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-text); border-bottom-right-radius: 4px; border: 1px solid rgba(0,196,167,0.20); }
.message.user.msg-failed { border-color: var(--error-border, #7b2020); background: linear-gradient(135deg, var(--bubble-user), rgba(120,20,20,0.18)); }
.msg-retry-btn {
    display: block;
    margin-top: 10px;
    padding: 6px 14px;
    width: 100%;
    text-align: center;
    background: transparent;
    color: var(--error, #f87171);
    border: 1px solid var(--error-border, #7b2020);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-base);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.msg-retry-btn:hover { background: rgba(120,20,20,0.28); border-color: var(--error, #f87171); }
.msg-retry-btn:focus-visible { outline: 2px solid var(--error, #f87171); outline-offset: 2px; }
.message.assistant { align-self: flex-start; background: var(--bubble-bot); color: var(--bubble-bot-text); border-bottom-left-radius: 4px; border: 1px solid var(--border); }

/* Retry button on user messages */
.msg-actions-user {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.msg-actions-user .msg-action-btn {
    font-size: 0.78rem;
    padding: 3px 9px;
    opacity: 0.55;
    border-color: rgba(0,196,167,0.3);
    color: var(--accent);
}
.message.user:hover .msg-actions-user .msg-action-btn,
.message.user:focus-within .msg-actions-user .msg-action-btn {
    opacity: 1;
}

/* Retry button on user messages — base overrides already in .msg-action-btn */
.msg-actions-user .msg-action-btn:hover {
    background: rgba(0,196,167,0.12);
    border-color: var(--accent);
}

/* Thumbs + retry on assistant messages */
.msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    opacity: 0.5;
    transition: opacity 0.18s ease;
}
.message.assistant:hover .msg-actions,
.message.assistant:focus-within .msg-actions {
    opacity: 1;
}
.msg-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    padding: 4px 10px;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    font-family: var(--font-base);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.chat-nav-tools .a11y-btn { min-height: 52px; }
.msg-action-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent);
    color: var(--accent);
}
.msg-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.thumb-up.active  { color: #4ade80; border-color: #4ade80; background: rgba(74,222,128,0.12); }
.thumb-down.active { color: var(--error, #f87171); border-color: var(--error-border, #7b2020); background: rgba(248,113,113,0.12); }

.message.loading { background: var(--bg-raised); color: var(--text-muted); font-style: italic; align-self: flex-start; border: 1px solid var(--border); }

.message.error-bubble {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    max-width: 80%;
}
.error-bubble-icon { font-size: 1.1rem; flex-shrink: 0; }
.error-bubble-text { flex: 1; min-width: 140px; line-height: 1.5; }
.error-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    min-height: 40px;
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-base);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition);
}
.error-retry-btn:hover { background: #3d1010; border-color: var(--error); }
.error-retry-btn:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }
.message.speaking { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Input ──────────────────────────────────────────────────────── */
.input-container {
    padding: 16px 20px; border-top: 1px solid var(--border);
    background: var(--bg-base); display: flex; flex-direction: column; gap: 8px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-shrink: 0;
    transition: outline var(--transition), background var(--transition);
}
.input-container.drag-active {
    outline: 2px dashed var(--accent);
    background: rgba(0, 212, 170, 0.06);
}
.input-row { display: flex; gap: 12px; align-items: flex-end; }

#message-input {
    flex: 1; padding: 13px 16px;
    background: var(--bg-raised);
    border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm);
    font-size: 1rem; font-family: var(--font-base);
    color: var(--text-primary);
    resize: none; min-height: var(--touch-min);
    transition: border-color var(--transition), background var(--transition);
}
#message-input::placeholder { color: var(--text-muted); }
#message-input:focus { border-color: var(--accent); background: var(--bg-hover); outline: 3px solid var(--accent-glow); outline-offset: 1px; }

#send-btn { min-width: 90px; }

/* Attach image button — icon-only, same size as mic */
.btn-attach {
    background: none; border: none;
    color: var(--text-muted); font-size: 1.25rem;
    width: 36px; height: 36px; padding: 0; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.btn-attach:hover { background: var(--bg-hover); color: var(--accent); }
.btn-attach:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Image preview bar — thumbnail with × overlay + filename */
.image-preview-bar {
    display: flex; align-items: center; gap: 10px; padding: 4px 0;
}
.image-preview-wrap {
    position: relative; flex-shrink: 0;
}
.image-preview-thumb {
    display: block; height: 48px; width: 48px; object-fit: cover;
    border-radius: 6px; border: 2px solid var(--accent);
}
.image-preview-remove {
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; padding: 0;
    background: var(--bg-base); border: 1px solid var(--border-bright);
    border-radius: 50%; font-size: 0.6rem; line-height: 1;
    color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.image-preview-remove:hover { background: #e06c75; color: #fff; border-color: #e06c75; }
.image-preview-label { font-size: 0.78rem; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Images inside message bubbles */
.msg-image {
    display: block; max-width: 100%; max-height: 320px;
    border-radius: 6px; margin-bottom: 6px;
    cursor: zoom-in;
}
.message span { display: block; }

.message.assistant code {
    display: inline-block;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.88em;
}

.message.assistant a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.message.assistant strong {
    color: var(--text-primary);
}

.message.assistant em {
    color: var(--text-secondary);
    font-style: italic;
}

/* Markdown tables rendered as scrollable preformatted blocks */
.message.assistant pre.md-table {
    overflow-x: auto;
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.83em;
    font-family: 'Menlo', 'Consolas', monospace;
    white-space: pre;
    margin: 6px 0;
    color: var(--text-primary);
    line-height: 1.5;
}

.message.assistant .md-heading {
    display: block;
    font-size: 1.05em;
    margin: 4px 0 2px;
}

/* Mic */
.btn-mic {
    background: var(--bg-raised); border: 2px solid var(--border-bright);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    font-size: 1.3rem; width: 48px; height: 48px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.btn-mic:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
.btn-mic.recording { background: var(--error-bg); border-color: var(--error); animation: pulse-mic 1.2s ease-in-out infinite; }
.btn-mic:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@keyframes pulse-mic {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(255,107,107,0); }
}

.recording-indicator { display: flex; align-items: center; gap: 8px; color: var(--error); font-size: 0.9rem; font-weight: 600; }
.recording-dot { width: 10px; height: 10px; background: var(--error); border-radius: 50%; animation: blink-dot 1s step-start infinite; }
@keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Help chatbot widget ───────────────────────────────────────── */
.help-chatbot {
    position: absolute;
    right: 16px;
    bottom: 104px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.help-chat-toggle {
    border: 2px solid var(--border-bright);
    background: var(--bg-raised);
    color: var(--text-primary);
    border-radius: 999px;
    min-height: 42px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-base);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.help-chat-toggle:hover,
.help-chat-toggle:focus-visible {
    background: var(--bg-hover);
    border-color: var(--accent-dim);
    color: var(--accent);
}

.help-chat-toggle:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.help-chat-panel {
    width: 290px;
    max-width: calc(100vw - 48px);
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    padding: 12px;
}

.help-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.help-chat-header h3 {
    font-size: 0.92rem;
    color: var(--accent);
}

.help-chat-close {
    border: 1px solid var(--border-bright);
    background: var(--bg-base);
    color: var(--text-secondary);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.help-chat-close:hover,
.help-chat-close:focus-visible {
    border-color: var(--accent-dim);
    color: var(--text-primary);
}

.help-chat-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.help-chat-prompts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.help-chat-prompt {
    text-align: left;
    border: 1px solid var(--border-bright);
    background: var(--bg-raised);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 8px 10px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.help-chat-prompt:hover,
.help-chat-prompt:focus-visible {
    background: var(--bg-hover);
    border-color: var(--accent-dim);
    color: var(--accent);
}

.help-chat-prompt:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.help-chat-custom {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.help-chat-custom label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

#help-chat-input {
    width: 100%;
    resize: vertical;
    min-height: 52px;
    max-height: 110px;
    border: 1px solid var(--border-bright);
    background: var(--bg-base);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: var(--font-base);
    font-size: 0.82rem;
}

#help-chat-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent-dim);
}

.help-chat-send {
    align-self: flex-end;
    border: 1px solid var(--accent-dim);
    background: var(--accent);
    color: #041a16;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--font-base);
    cursor: pointer;
}

.help-chat-send:hover,
.help-chat-send:focus-visible {
    background: var(--accent-hover);
}

.help-chat-send:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Check-in / mood ────────────────────────────────────────────── */
.checkin-card { background: var(--bg-raised); border: 1px solid var(--accent-dim); border-radius: var(--radius-lg); padding: 22px 24px; margin: 8px 0; align-self: stretch; max-width: 100%; box-shadow: 0 0 20px var(--accent-glow); }
.checkin-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.mood-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mood-btn { padding: 11px 20px; border: 2px solid var(--border-bright); border-radius: 50px; background: var(--bg-card); color: var(--text-secondary); font-size: 1rem; font-family: var(--font-base); cursor: pointer; transition: all var(--transition); min-height: var(--touch-min); }
.mood-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--text-primary); }
.mood-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mood-btn.selected { background: var(--accent); border-color: var(--accent); color: #041a16; font-weight: 700; }
.checkin-note-input { width: 100%; padding: 12px 14px; background: var(--bg-card); border: 2px solid var(--border-bright); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: var(--font-base); color: var(--text-primary); resize: none; margin-bottom: 12px; display: none; }
.checkin-note-input::placeholder { color: var(--text-muted); }
.checkin-note-input:focus { border-color: var(--accent); }
.checkin-submit-row { display: flex; gap: 10px; }
.checkin-submit-row .btn { width: auto; padding: 11px 22px; }

.mood-history-card { background: var(--bg-raised); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); padding: 20px 24px; align-self: stretch; max-width: 100%; }
.mood-history-card h3 { color: var(--accent); font-size: 1rem; margin-bottom: 14px; }
.mood-history-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mood-history-list li { font-size: 0.9rem; color: var(--text-secondary); display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.mood-history-list li:last-child { border-bottom: none; }
.mood-history-list .mood-date { color: var(--text-muted); min-width: 80px; font-size: 0.85rem; }

/* Sidebar overlay */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 199; }
.sidebar-overlay.open { display: block; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    body { padding: 0; align-items: stretch; }
    .container { max-width: 100%; }
    .auth-card { border-radius: 0; min-height: 100dvh; padding: 40px 24px; border: none; display: flex; flex-direction: column; justify-content: center; box-shadow: none; }
    #chat-container { height: 100dvh; border-radius: 0; border: none; max-height: none; box-shadow: none; }
    .chat-header { border-radius: 0; }
    #sidebar-toggle { display: flex; }
    .chat-header-user > span { display: none; }
    .chat-header-top { padding: 10px 12px 8px; }
    .chat-header-top h1 { font-size: 1.35rem; }
    .chat-header-nav {
        gap: 6px;
        padding: 6px 8px;
    }
    .chat-nav-main {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 2px;
    }
    .chat-nav-main::-webkit-scrollbar { display: none; }
    .chat-nav-main .btn-nav {
        flex: 0 0 auto;
        width: auto;
        min-width: 126px;
        min-height: 44px;
        font-size: 0.84rem;
        padding: 8px 10px;
        white-space: nowrap;
    }
    .chat-nav-tools { grid-template-columns: 1fr auto; }
    .chat-nav-tools .btn-nav,
    .chat-nav-tools .a11y-btn {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 0.84rem;
        white-space: nowrap;
    }
    .a11y-panel { right: 0; min-width: 220px; }
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 80vw; max-width: 300px; z-index: 200; border-radius: 0; transform: translateX(-100%); transition: transform 0.25s ease; border-right: 1px solid var(--border-bright); box-shadow: 4px 0 32px rgba(0,0,0,0.7); }
    .sidebar.open { transform: translateX(0); }
    .message { max-width: 88%; }
    .input-container { padding: 12px 14px; }
    #send-btn { min-width: 72px; }
    .help-chatbot { right: 12px; bottom: 98px; }
    .help-chat-panel { width: 260px; }
}

@media (max-width: 480px) {
    .chat-header-nav { gap: 5px; padding: 6px; }
    .chat-nav-main .btn-nav { min-width: 118px; font-size: 0.8rem; }
    .chat-nav-tools { grid-template-columns: 1fr auto; gap: 5px; }
    .chat-nav-tools .btn-nav,
    .chat-nav-tools .a11y-btn { font-size: 0.8rem; min-height: 42px; padding: 7px 9px; }
}

@media (min-width: 701px) and (max-width: 900px) {
    .chat-nav-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sidebar { width: 200px; min-width: 180px; }
    .message { max-width: 80%; }
}

/* ── Smart Suggestions bar ──────────────────────────────────────── */
.suggestions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 20px 4px;
    background: var(--bg-base);
    border-top: 1px solid var(--border);
    min-height: 0;
    /* slide-in from below */
    animation: suggestions-in 0.22s ease;
}
@keyframes suggestions-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.suggestions-bar[hidden] { display: none; }

.suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 14px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: rgba(0, 212, 170, 0.08);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: var(--font-base);
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    max-width: 100%;
}
.suggestion-chip:hover {
    background: rgba(0, 212, 170, 0.18);
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.25);
}
.suggestion-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.chip-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition), background var(--transition);
}
.chip-dismiss:hover { opacity: 1; background: rgba(0,212,170,0.2); }
.chip-dismiss:focus-visible { outline: 2px solid var(--accent); }

/* ── Breathing exercise modal ───────────────────────────────────── */
.breathing-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(6, 14, 28, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.breathing-modal[hidden] { display: none; }

.breathing-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    padding: 36px 40px 32px;
    max-width: 400px;
    width: 90vw;
    text-align: center;
    box-shadow: 0 16px 60px rgba(0,0,0,0.7);
    animation: slideUp 0.25s ease;
}
@keyframes slideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.breathing-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.breathing-close:hover { color: var(--fg-base); background: var(--bg-hover); }

.breathing-card h2 { margin: 0 0 4px; font-size: 1.25rem; }
.breathing-subtitle { font-size: 0.88rem; color: var(--fg-muted); margin: 0 0 28px; }

/* Animated ring */
.breathing-circle-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}
.breathing-ring {
    width: 140px;
    height: 140px;
    transform: rotate(-90deg);
}
.ring-track {
    fill: none;
    stroke: var(--border-bright);
    stroke-width: 8;
}
.ring-progress {
    fill: none;
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.3;   /* 2π × 54 */
    stroke-dashoffset: 339.3;
    transition: stroke-dashoffset 1s linear, stroke 0.4s;
}
.breathing-phase {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}
.breathing-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10%);
    font-size: 2rem;
    font-weight: 700;
    color: var(--fg-base);
    line-height: 1;
}

.breathing-instruction {
    font-size: 0.95rem;
    color: var(--fg-muted);
    margin: 0 0 24px;
    min-height: 1.4em;
}
.breathing-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 12px;
}
.breathing-start-btn { min-width: 100px; }
.breathing-cycles { font-size: 0.82rem; color: var(--fg-muted); min-height: 1.2em; margin: 0; }

/* ring colour during hold phase */
.ring-progress.hold { stroke: #f0c040; }
/* ring colour during exhale */
.ring-progress.exhale { stroke: #7c9fff; }

@media (max-width: 700px) {
    .suggestions-bar { padding: 8px 12px 4px; }
    .suggestion-chip { font-size: 0.82rem; padding: 6px 10px 6px 12px; }
    .breathing-card { padding: 28px 20px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   App Navigation — persistent bottom tab bar (mobile + desktop)
   ═══════════════════════════════════════════════════════════════ */

/* ── Floating "nav is here" handle above the bar ─────────────── */
.app-nav::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: var(--accent);
    opacity: 0.65;
    animation: nav-handle-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nav-handle-pulse {
    0%, 100% { opacity: 0.65; transform: translateX(-50%) scaleX(1);   }
    50%       { opacity: 1;    transform: translateX(-50%) scaleX(1.18); }
}

.app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border-top: 2px solid var(--accent-dim);
    box-shadow: 0 -4px 24px rgba(0, 196, 167, 0.12), 0 -1px 8px rgba(0,0,0,0.5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;   /* clip children — scroll is on .app-nav-scroll */
}

.app-nav-item {
    flex: 0 0 72px;              /* fixed width — doesn't shrink or grow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px 4px;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-base);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-height: var(--touch-min);
    border-top: 3px solid transparent;
    scroll-snap-align: start;
    transition: color var(--transition), background var(--transition),
                border-color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.app-nav-item:hover,
.app-nav-item:focus-visible {
    color: var(--accent);
    background: rgba(0, 196, 167, 0.08);
    outline: none;
}

.app-nav-item.active {
    color: var(--accent);
    border-top-color: var(--accent);
    background: rgba(0, 196, 167, 0.10);
}

.app-nav-icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.app-nav-item.active .app-nav-icon {
    transform: translateY(-2px) scale(1.15);
    filter: drop-shadow(0 0 6px rgba(0, 196, 167, 0.5));
}

.app-nav-label {
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Body padding so content isn't hidden behind the tab bar */
body.has-app-nav {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Hide ALL per-page header buttons/links once the dock is present */
body.has-app-nav .header-actions a.btn,
body.has-app-nav .header-actions button.btn,
body.has-app-nav #logout-btn {
    display: none !important;
}

/* ── Username chip (injected by nav.js into .header-actions) ─── */
.nav-user-chip,
.header-actions #username-display,
.header-actions .username-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    background: rgba(0, 196, 167, 0.12);
    border: 1px solid rgba(0, 196, 167, 0.3);
    border-radius: 20px;
    padding: 5px 12px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.nav-user-chip-icon {
    font-size: 1rem;
    line-height: 1;
}

/* ── Logout dock button — pinned right, outside scroll ─────── */
.app-nav-logout {
    flex: 0 0 auto;
    min-width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px 4px;
    background: none;
    border: none;
    border-top: 3px solid transparent;
    border-left: 1px solid rgba(0, 196, 167, 0.15);
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
    -webkit-tap-highlight-color: transparent;
    /* never clipped by the scroll fade */
    position: relative;
    z-index: 1;
}
.app-nav-logout:hover,
.app-nav-logout:focus-visible {
    color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.10) !important;
    outline: none;
}

/* Middle section: scrollable app strip + edge hint chevrons */
.app-nav-scroll-outer {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
}

/* Light scroll hints — only when overflow + direction allows (see JS classes) */
.app-nav-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 26px;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(94, 234, 212, 0.42);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.app-nav-hint--prev {
    left: 0;
    background: linear-gradient(to right, rgba(6, 14, 28, 0.88) 0%, rgba(6, 14, 28, 0.35) 55%, transparent 100%);
}
.app-nav-hint--next {
    right: 0;
    background: linear-gradient(to left, rgba(6, 14, 28, 0.88) 0%, rgba(6, 14, 28, 0.35) 55%, transparent 100%);
}
.app-nav-hint-glyph {
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    text-shadow: 0 0 12px rgba(0, 196, 167, 0.25);
    transform: scaleY(1.15);
}

/* Show chevrons when hovering the dock strip (devices with real hover) */
@media (hover: hover) {
    .app-nav-scroll-outer.nav-hint--overflow:hover.nav-hint--can-left .app-nav-hint--prev,
    .app-nav-scroll-outer.nav-hint--overflow:hover.nav-hint--can-right .app-nav-hint--next {
        opacity: 0.88;
        pointer-events: auto;
    }
    .app-nav-scroll-outer.nav-hint--overflow .app-nav-hint:hover {
        color: rgba(94, 234, 212, 0.88);
        opacity: 1;
    }
}

/* Touch / coarse pointer: brief reveal after touching the dock strip */
.app-nav-scroll-outer.nav-hint--overflow.app-nav-hint-show.nav-hint--can-left .app-nav-hint--prev,
.app-nav-scroll-outer.nav-hint--overflow.app-nav-hint-show.nav-hint--can-right .app-nav-hint--next {
    opacity: 0.88;
    pointer-events: auto;
}

/* Scrollable portion of the dock */
.app-nav-scroll {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0; /* allow flex child to shrink so overflow-x can scroll */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.app-nav-scroll::-webkit-scrollbar { display: none; }

/* Desktop / trackpad: show a thin horizontal scrollbar so overflow is discoverable */
@media (min-width: 768px) {
    .app-nav-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 196, 167, 0.45) rgba(0, 0, 0, 0.2);
    }
    .app-nav-scroll::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .app-nav-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 196, 167, 0.45);
        border-radius: 4px;
    }
    .app-nav-scroll::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 4px;
    }
}

/* Desktop: slightly shorter, wider items */
@media (min-width: 768px) {
    .app-nav {
        height: 64px;
        padding-bottom: 0;
    }
    body.has-app-nav {
        padding-bottom: 72px !important;
    }
    .app-nav-item  { flex: 0 0 88px; }
    .app-nav-icon  { font-size: 1.3rem; }
    .app-nav-label { font-size: 0.72rem; }
}

/* Large screens: cap the nav width, centre it — no scroll fade */
@media (min-width: 1100px) {
    .app-nav {
        max-width: 1000px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-left: 1px solid var(--border-bright);
        border-right: 1px solid var(--border-bright);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .app-nav-scroll {
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Keep fixed-width tiles so extra apps overflow horizontally (do NOT use flex:1 — that removes scroll) */
    .app-nav-item  { flex: 0 0 92px; }
    .app-nav::before { left: 50%; }
}

/* ── Lifetime gold badge ─────────────────────────────────────────────── */
.lifetime-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #92620a 0%, #f5c518 45%, #92620a 100%);
    color: #1a0900;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    padding: 2px 7px 2px 5px;
    border-radius: 20px;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(245,197,24,0.45);
    animation: lifetime-badge-glow 2.8s ease-in-out infinite alternate;
    margin-left: 5px;
}

@keyframes lifetime-badge-glow {
    from { box-shadow: 0 0 5px rgba(245,197,24,0.35); }
    to   { box-shadow: 0 0 14px rgba(245,197,24,0.85); }
}

/* ── Lifetime welcome banner ─────────────────────────────────────────── */
#lifetime-welcome-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: linear-gradient(135deg, #1c0f00 0%, #301a00 60%, #1c0f00 100%);
    border-bottom: 2px solid #f5c518;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 6px 32px rgba(245,197,24,0.22);
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

#lifetime-welcome-banner.banner-visible {
    transform: translateY(0);
}

.lw-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.lw-crown {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
    animation: crown-bounce 0.7s ease-in-out 0.6s 3;
    filter: drop-shadow(0 0 10px rgba(245,197,24,0.7));
}

@keyframes crown-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40%       { transform: translateY(-7px) rotate(-8deg); }
    70%       { transform: translateY(-4px) rotate(6deg); }
}

.lw-text h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f5c518;
    margin: 0 0 3px;
    text-shadow: 0 0 14px rgba(245,197,24,0.5);
}

.lw-text p {
    font-size: 0.83rem;
    color: #c9960e;
    margin: 0;
}

#lw-close-btn {
    background: none;
    border: 1px solid rgba(245,197,24,0.4);
    border-radius: 6px;
    color: #f5c518;
    cursor: pointer;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

#lw-close-btn:hover {
    background: rgba(245,197,24,0.12);
    border-color: rgba(245,197,24,0.7);
}