@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;700&family=Albert+Sans:wght@400;500;600;700&family=Inter:wght@100..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');


.living-mark-outer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #F2E3C6;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mark-breathe-outer 4s ease-in-out infinite;
    filter: url(#goo-filter);
}

.living-mark-inner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF6D1F;
    animation: mark-breathe-inner 4s ease-in-out infinite;
}

/* Safari doesn't render SVG goo filters correctly — the border-radius clipping
   happens before the filter, so the two circles never blur-merge.
   Fix: collapse everything into a single gradient on the outer element,
   and hide the inner element entirely so there's no bullseye.
   'hanging-punctuation' is Safari-only (desktop + iOS). */
@supports (hanging-punctuation: first) {
    .living-mark-outer {
        filter: none;
        /* Unified orange→beige gradient mimics the goo-merged look */
        background: radial-gradient(
            circle at 50% 50%,
            #FF6D1F 0%,
            #FF6D1F 16%,
            #ff8040 24%,
            #f5a878 33%,
            #f2c4a8 43%,
            #f2d8c0 53%,
            #F2E3C6 64%
        );
        box-shadow: 0 0 18px rgba(255, 109, 31, 0.13);
    }
    .living-mark-inner {
        opacity: 0; /* hidden — merged look is baked into the outer gradient */
    }
}

.living-mark-outer.thinking {
    animation: mark-think-outer 1.2s ease-in-out infinite;
}

.living-mark-inner.thinking {
    animation: mark-think-inner 1.2s ease-in-out infinite;
}

/* "Thinking..." label sits next to the orb but only shows up while it's
   actively in its thinking animation state — hidden the rest of the time. */
.living-mark-thinking-label {
    display: none;
    color: #b3b0a8;
    font-style: italic;
    margin-left: 6px;
}

.living-mark-outer.thinking + .living-mark-thinking-label {
    display: inline-block;
}

@keyframes mark-think-outer {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

@keyframes mark-think-inner {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

@keyframes mark-breathe-outer {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes mark-breathe-inner {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

@keyframes cleanCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#sidebar.collapsed .sidebar-label {
    display: none !important;
}

#sidebar.collapsed {
    width: 68px !important;
}

#sidebar.collapsed #sidebar-scroll-area {
    display: none !important;
}

.onboarding-btn {
    background-color: #FF6D1F;
    color: white;
    transition: background-color 0.2s;
    width: 100%;
    max-width: 400px;
    padding: 16px;
    border-radius: 1rem;
    font-weight: 700;
}

.onboarding-btn:hover {
    background-color: #E65A10;
}

.theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 1.5rem;
    gap: 12px;
}

.fade-in-viewport {
    animation: cleanCardFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.msg-user {
    background: #f2f0eb;
    padding: 10px 16px;
    border-radius: 18px;
    max-width: 80%;
    font-size: 15px;
    line-height: 1.55;
    color: #212121;
}

.msg-lucy {
    font-size: 15px;
    line-height: 1.65;
    color: #212121;
    max-width: 85%;
}

.msg-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    color: #999;
}

/* Used in the open chat view: anchored to the bubble itself instead of
   flowing inside the message column, so it sits in the existing gap below
   the bubble rather than adding its own height and pushing the next
   message further down (which made spacing after AI replies inconsistent
   with spacing after your own messages). */
.msg-actions-floating {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
}

.msg-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    transition: all 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
}

.msg-action-btn:hover {
    color: #FF6D1F;
    background: rgba(255, 109, 31, 0.06);
}

.journey-page {
    font-family: 'Albert Sans', sans-serif;
    background: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.journey-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.journey-title {
    font-family: 'Afacad', serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}

.journey-body {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    padding-bottom: 40px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.0) transparent;
    transition: scrollbar-color 0.3s ease;
}

.journey-content-inner {
    max-width: 56rem;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 48px;
}

.journey-body::-webkit-scrollbar {
    width: 4px;
}

.journey-body::-webkit-scrollbar-track {
    background: transparent;
}

.journey-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.0);
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}

.journey-body:hover::-webkit-scrollbar-thumb,
.journey-body:active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
}

.journey-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    position: relative;
    margin-bottom: 8px;
}

.journey-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
}

.journey-spine-node {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 18px;
    z-index: 1;
}

.journey-spine-node.done {
    background: #FF6D1F;
}

.journey-spine-node.active {
    background: #FF6D1F;
    box-shadow: 0 0 0 3.5px #FBD8A9;
}

.journey-spine-node.empty {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
}

.journey-spine-line {
    width: 1.5px;
    flex: 1;
    margin-top: 2px;
}

.journey-spine-line.solid {
    background: #FF6D1F;
}

.journey-spine-line.dashed {
    background: repeating-linear-gradient(to bottom, #e5e7eb 0px, #e5e7eb 4px, transparent 4px, transparent 8px);
}

.journey-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.005);
}

.journey-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

.journey-card.active {
    border: 1.5px solid #FF6D1F;
}

.jc-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.jc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FFF9F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jc-icon svg {
    width: 17px;
    height: 17px;
    stroke: #FF6D1F;
    stroke-width: 2;
}

.jc-icon.dim {
    background: #F5F6F7;
}

.jc-icon.dim svg {
    stroke: #999999;
}

.jc-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #1a1a1a;
}

.jc-badge {
    font-size: 10px;
    background: #FBD8A9;
    color: #6A2500;
    padding: 2px 7px;
    border-radius: 99px;
    margin-left: 6px;
    font-weight: 700;
}

.jc-desc {
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.jc-bar {
    height: 3.5px;
    border-radius: 2px;
    background: #F5F6F7;
    overflow: hidden;
}

.jc-fill {
    height: 100%;
    background: #FF6D1F;
    border-radius: 2px;
}

.jc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.jc-time {
    font-size: 11.5px;
    color: #999999;
    font-weight: 500;
}

.jc-action {
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: #1a1a1a;
    border: none;
    border-radius: 9px;
    padding: 5px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.jc-action:hover {
    background: #FF6D1F;
}

.jc-action.muted {
    color: #555555;
    background: #F5F6F7;
}

.jc-action.muted:hover {
    background: #e5e7eb;
}

.journey-start-marker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.journey-start-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FF6D1F;
    flex-shrink: 0;
    margin-left: 4.5px;
}

.journey-start-label {
    font-size: 11.5px;
    color: #FF6D1F;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#journey-container:not(.hidden)~#chat-view-wrapper {
    display: none !important;
}

#archive-container:not(.hidden)~#chat-view-wrapper {
    display: none !important;
}


#send-btn.active,
#welcome-send-btn.active {
    background: #FF6D1F;
    color: white;
}


.messages-container-relative {
    position: relative;
}

.living-mark-chat-wrapper {
    display: none;
    opacity: 0;
    will-change: opacity;
    z-index: 10;
    transition: opacity 0.25s ease !important;
}



.iti {
    width: 100%;
}

.iti__flag-container {
    padding: 2px;
}

.phone-input-container input {
    padding-left: 15px !important;
}

.iti--allow-dropdown input,
#verification-code-input {
    width: 100% !important;
    height: 64px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
    border-radius: 1.25rem !important;
    padding-left: 85px !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #1a1a1a !important;
    letter-spacing: 0.02em;
}

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

.slide-text-hidden-bottom {
    transform: translateY(24px) !important;
    opacity: 0 !important;
}

.slide-text-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.slide-text-hidden-top {
    transform: translateY(-24px) !important;
    opacity: 0 !important;
}


.iti--allow-dropdown input:focus,
#verification-code-input:focus {
    background-color: #ffffff !important;
    border-color: #FF6D1F !important;
    outline: none;
}

.otp-input {
    width: 48px !important;
    height: 60px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 0.75rem !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.otp-input:focus {
    border-color: #FF6D1F !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 109, 31, 0.1);
}

.iti__selected-flag {
    background-color: transparent !important;
}

/* Locked email step in the landing card's inline auth flow — override the
   browser's default blue readonly/autofill tint and keep it plain white. */
#landing-email-input:read-only {
    background-color: #ffffff !important;
    border-color: #e2e2e2 !important;
    color: #1a1a1a !important;
}

#landing-email-input:read-only:-webkit-autofill,
#landing-email-input:-webkit-autofill {
    -webkit-text-fill-color: #1a1a1a !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border-color: #e2e2e2 !important;
}


.iti__selected-flag:hover {
    background-color: transparent !important;
}

.iti__country-list {
    border-radius: 1rem;
    border: 1px solid #eeeeee;
    font-family: 'Albert Sans', sans-serif;
}


.usecase-option {
    cursor: pointer;
    display: block;
}


.usecase-option .option-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: #ffffff;
    border: 2px solid #eeeeee;
    border-radius: 1.25rem;
    transition: all 0.2s ease;
}


.usecase-option:hover .option-box {
    border-color: #f0f0f0;
    background-color: #fbfbfb;
}


.usecase-option .dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: #fff;
}


.usecase-option input:checked+.option-box {
    border-color: #FF6D1F;
    background-color: #FFF9F6;
}


.usecase-option input:checked+.option-box .dot {
    border-color: #FF6D1F;
}

.usecase-option input:checked+.option-box .dot::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FF6D1F;
}


.usecase-option .label-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    overscroll-behavior-y: contain;
}

.font-afacad {
    font-family: 'Afacad', sans-serif;
    font-weight: 700;
}

.font-albert {
    font-family: 'Albert Sans', sans-serif;
}

/* Warm, slightly vintage serif for the big marquee headlines (landing hero,
   onboarding step titles, chat welcome greeting) — the cozier counterpart
   to font-afacad, used sparingly so it stays special. */
.font-cozy {
    font-family: 'Lora', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Editable bullet list inside the end-of-session reflection popup — real
   circular markers (matching the dot bullets used for "Your last summary"
   on the journey card) instead of literal "- " dashes in a plain textarea.
   Still a normal editable list: Enter adds a bullet, Backspace at the start
   of one merges it into the previous, same as any contenteditable <ul>. */
.summary-bullet-editor ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.summary-bullet-editor li {
    position: relative;
    margin-bottom: 8px;
    line-height: 1.5;
}

.summary-bullet-editor li:last-child {
    margin-bottom: 0;
}

.summary-bullet-editor li::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3a3833;
}

/* Session-goal sliders (intentions carousel + single-theme edit page) — a
   custom thumb/track so the bar reads as a light, themed line-with-a-dot
   instead of falling back to the OS's default (often dark) range styling.
   The actual fill color/percentage is set inline per-instance via JS since
   it depends on the active theme's color and current value. */
.session-goal-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.session-goal-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: currentColor;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.session-goal-input::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #ece7de;
}

.session-goal-input::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.session-goal-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: currentColor;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.features-scroll-area::-webkit-scrollbar {
    width: 3px;
}

.features-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 9999px;
}

.features-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

/* ===================================================================
   APPEARANCE TOGGLE — light + dark active-state styles
   =================================================================== */

.theme-mode-btn {
    color: #888;
    transition: background 0.15s, color 0.15s;
}
.theme-mode-btn:hover { color: #555; }

.theme-btn-active {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}

/* ===================================================================
   DARK MODE — html.dark overrides
   These provide a warm dark palette that matches the existing cream
   aesthetic: #1c1a18 base, #252321 panels, #2d2b28 surfaces.
   =================================================================== */

html.dark { color-scheme: dark; }

/* ── Living mark orb ── */
html.dark .living-mark-outer { background: #3d2e1a; }
html.dark .living-mark-thinking-label { color: #ffffff !important; }
html.dark #theme-user-input::placeholder { color: #6a6762 !important; }

/* ── Message bubbles ── */
html.dark .msg-user { background: #2d2b28 !important; color: #e8e4de !important; }
html.dark .msg-lucy { color: #dedad4 !important; }
html.dark .msg-action-btn { color: #555250 !important; }
html.dark .msg-action-btn:hover { color: #FF6D1F !important; background: rgba(255,109,31,0.1) !important; }

/* ── Main content areas ── */
html.dark #chat-view-wrapper { background: #1c1a18 !important; }
html.dark #archive-container { background: #1c1a18 !important; }
html.dark #journey-container { background: #1c1a18 !important; }
html.dark #onboarding-canvas { background: #1c1a18 !important; }
html.dark #theme-chat-room { background: #1c1a18 !important; }

/* Welcome screen */
html.dark #chat-welcome { background: #1c1a18; }
html.dark #welcome-headline { color: #f0ede8 !important; }
html.dark #welcome-input-box { background: #252321 !important; border-color: rgba(255,255,255,0.1) !important; }
html.dark #welcome-input { color: #e8e4de !important; }
html.dark #welcome-input::placeholder { color: #5a5752 !important; }
html.dark .prompt-chip { background: #252321 !important; border-color: rgba(255,255,255,0.08) !important; color: #c8c5be !important; }
html.dark .prompt-chip:hover { background: #2d2b28 !important; border-color: rgba(255,255,255,0.14) !important; }

/* Open chat view */
html.dark #chat-input-box { background: #252321 !important; border-color: rgba(255,255,255,0.1) !important; }
html.dark #user-input { color: #e8e4de !important; }
html.dark #user-input::placeholder { color: #5a5752 !important; }
html.dark #voice-overlay > div { background: #2d2b28 !important; }

/* Archive */
html.dark #archive-container header h2 { color: #e8e4de !important; }
html.dark #archive-search-input { background: #252321 !important; border-color: rgba(255,255,255,0.1) !important; color: #e8e4de !important; }
html.dark #archive-search-input::placeholder { color: #5a5752 !important; }
html.dark #archive-filter-year,
html.dark #archive-filter-month { background: #252321 !important; border-color: rgba(255,255,255,0.1) !important; color: #c8c5be !important; }

/* ── Sidebar ── */
html.dark #sidebar { background: #201f1d !important; border-right-color: rgba(255,255,255,0.07) !important; }
html.dark #sidebar .h-px { background: rgba(255,255,255,0.07) !important; }
html.dark #sidebar-name { color: #e0ddd6 !important; }
html.dark #sidebar-plan { color: #5a5752 !important; }
html.dark #recents-header-title { color: #5a5752 !important; }
/* Static panel sections inside sidebar */
html.dark #sidebar .bg-white { background: #201f1d !important; }
html.dark #sidebar .border-t { border-top-color: rgba(255,255,255,0.07) !important; background: #201f1d !important; }

/* Sidebar popup settings menu */
html.dark #sidebar-settings-menu { background: #272523 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.45) !important; color: #c8c5be !important; }
html.dark #menu-user-email { color: #5a5752 !important; border-bottom-color: rgba(255,255,255,0.07) !important; }
html.dark #sidebar-settings-menu button:hover,
html.dark #sidebar-settings-menu a:hover { background: rgba(255,255,255,0.06) !important; }
html.dark #sidebar-settings-menu span { color: #c8c5be !important; }
html.dark #sidebar-settings-menu a { color: #c8c5be !important; }
html.dark #learn-more-flyout .learn-more-link { color: #a09c98 !important; }
html.dark #learn-more-flyout .learn-more-link:hover { background: rgba(255,255,255,0.06) !important; }
html.dark #sidebar-settings-menu .text-red-600 { color: #f87171 !important; }

/* Sidebar chat recents (JS-generated items) */
html.dark #sidebar-recents button { color: #a09c98 !important; }
html.dark #sidebar-recents button:hover { background: rgba(255,255,255,0.06) !important; }

/* ── Settings modal ── */
html.dark #settings-modal-inner { background: #252321 !important; }
html.dark #settings-modal-nav { background: #1f1e1c !important; border-right-color: rgba(255,255,255,0.07) !important; }
html.dark #settings-modal-nav .text-gray-400 { color: #5a5752 !important; }
html.dark #settings-modal-nav input { background: #252321 !important; border-color: rgba(255,255,255,0.1) !important; color: #c8c5be !important; }
html.dark #settings-modal-nav input::placeholder { color: #5a5752 !important; }
html.dark .settings-nav-btn { color: #8a8780 !important; }
html.dark .settings-nav-btn:hover { background: rgba(255,255,255,0.06) !important; color: #e0ddd6 !important; }
/* Active nav item: Tailwind adds bg-black/5 inline — override it */
html.dark #settings-modal-nav button.bg-black\/5 { background: rgba(255,255,255,0.09) !important; color: #f0ede8 !important; }
html.dark #settings-modal-content { background: #252321 !important; }
html.dark #settings-modal-content h3 { color: #e8e4de !important; }
html.dark #settings-modal-content .text-gray-900 { color: #e8e4de !important; }
html.dark #settings-modal-content .text-gray-700 { color: #c8c5be !important; }
html.dark #settings-modal-content .text-gray-500 { color: #7a7770 !important; }
html.dark #settings-modal-content .text-gray-400 { color: #5a5752 !important; }
html.dark #settings-modal-content .border-b { border-bottom-color: rgba(255,255,255,0.07) !important; }
html.dark #settings-modal-content input { background: #2e2c29 !important; color: #e8e4de !important; border-color: rgba(255,255,255,0.12) !important; }
html.dark #settings-modal-content input::placeholder { color: #5a5752 !important; }
html.dark #settings-modal-content .bg-red-50 { background: rgba(239,68,68,0.08) !important; }
html.dark #settings-modal-content .border-red-200\/60 { border-color: rgba(239,68,68,0.25) !important; }
html.dark #settings-modal-content .text-gray-900.mb-4 { color: #e8e4de !important; }
/* Settings modal X button */
html.dark #settings-modal-inner > button { color: #5a5752 !important; }
html.dark #settings-modal-inner > button:hover { background: rgba(255,255,255,0.07) !important; }

/* ── Appearance toggle (active state in dark mode) ── */
html.dark .theme-btn-active { background: #3a3835 !important; color: #e8e4de !important; box-shadow: none !important; }
html.dark .theme-mode-btn { color: #5a5752; }
html.dark .theme-mode-btn:hover { color: #a09c98 !important; }

/* ── Journey / onboarding canvas ── */
html.dark .journey-title { color: #e8e4de; }
html.dark .journey-topbar { border-bottom-color: rgba(255,255,255,0.07); }
html.dark .journey-spine-node.empty { background: #2d2b28; }

/* ── Welcome screen blobs (tone down the warm orange glow in dark mode) ── */
html.dark .onboarding-bg {
    background:
        radial-gradient(circle at 15% 15%, rgba(255,109,31,0.04), transparent 55%),
        radial-gradient(circle at 85% 20%, rgba(255,178,102,0.03), transparent 50%),
        #1c1a18 !important;
}

/* ── Smooth light ↔ dark transition ── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 0.3s ease,
        background 0.3s ease,
        color 0.25s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* ── Sidebar nav icons + text labels ── */
html.dark #sidebar .text-\[\#666\] { color: rgba(255,255,255,0.75) !important; }
html.dark #sidebar-toggle { color: rgba(255,255,255,0.75) !important; }
html.dark #sidebar .text-\[\#212121\] { color: rgba(255,255,255,0.7) !important; }

/* ── Chat message bubbles ── */
/* User: deep burnt-orange in dark mode */
html.dark .bg-\[\#FBD8A9\] { background: #6A2500 !important; color: #fff !important; }
/* Lucy: subtle dark surface + light text (bg-white bubbles only — user bubbles use bg-[#FBD8A9]) */
html.dark #messages .bg-white,
html.dark #theme-messages-log .bg-white { background: #252321 !important; color: #dedad4 !important; }

/* ── Theme chat room ── */
html.dark #theme-chat-room { background: #1c1a18 !important; }
html.dark #theme-chat-room .bg-\[\#fbf9f4\] { background: #1c1a18 !important; }
html.dark #theme-chat-room .border-b { border-bottom-color: rgba(255,255,255,0.07) !important; }
html.dark #theme-chat-room .text-gray-800 { color: #e8e4de !important; }
html.dark #theme-chat-room .text-gray-600 { color: #9a9692 !important; }
html.dark #theme-chat-room .bg-white { background: #2d2b28 !important; }
html.dark #theme-chat-room .border-black\/5 { border-color: rgba(255,255,255,0.08) !important; }
html.dark #theme-chat-room .bg-red-50 { background: rgba(239,68,68,0.1) !important; }
html.dark #theme-chat-room .text-red-600 { color: #f87171 !important; }

/* ── Archive ── */
html.dark #archive-container .bg-white { background: #252321 !important; }
html.dark #archive-container .border-black\/5 { border-color: rgba(255,255,255,0.07) !important; }
html.dark #archive-container .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; }
html.dark #archive-container .text-gray-400 { color: #8a8780 !important; }
html.dark #archive-container .text-gray-500 { color: #9a9692 !important; }
html.dark #archive-container .text-gray-600 { color: #a09c98 !important; }
html.dark #archive-container .text-gray-700 { color: #b8b4ae !important; }
html.dark #archive-container .text-gray-800 { color: #c8c5be !important; }
html.dark #archive-container .text-gray-900 { color: #e8e4de !important; }
html.dark #archive-container .bg-gray-100 { background: rgba(255,255,255,0.07) !important; color: #9a9692 !important; }
html.dark #archive-container .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; }

/* ── Onboarding / Journey overview canvas ── */
html.dark #onboarding-canvas .bg-white { background: #2d2b28 !important; }
html.dark #onboarding-canvas .bg-\[\#fbfaf6\] { background: #252321 !important; }
html.dark #onboarding-canvas .bg-\[\#fbf9f4\] { background: #1c1a18 !important; }
html.dark #onboarding-canvas .bg-gray-50 { background: rgba(255,255,255,0.04) !important; }
html.dark #onboarding-canvas .bg-gray-100 { background: rgba(255,255,255,0.07) !important; }
html.dark #onboarding-canvas .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; }
html.dark #onboarding-canvas .border-gray-200 { border-color: rgba(255,255,255,0.12) !important; }
html.dark #onboarding-canvas .border-black\/5 { border-color: rgba(255,255,255,0.08) !important; }
html.dark #onboarding-canvas .text-gray-900 { color: #e8e4de !important; }
html.dark #onboarding-canvas .text-gray-800 { color: #c8c5be !important; }
html.dark #onboarding-canvas .text-gray-700 { color: #b8b4ae !important; }
html.dark #onboarding-canvas .text-gray-500 { color: #b8b4ae !important; }
html.dark #onboarding-canvas .text-gray-400 { color: #c0bbb5 !important; }
html.dark #onboarding-canvas .text-\[\#3a3833\] { color: #c8c5be !important; }
html.dark #onboarding-canvas .text-\[\#161613\] { color: #a09c98 !important; }
html.dark #onboarding-canvas .text-\[\#1a1a1a\] { color: #e8e4de !important; }
html.dark #onboarding-canvas .text-\[\#222222\] { color: #dedad4 !important; }
html.dark #onboarding-canvas .h-px { background: rgba(255,255,255,0.08) !important; }
html.dark #onboarding-canvas .bg-\[\#ece9de\] { background: rgba(255,255,255,0.1) !important; }
/* Intent goal input in step 2 */
html.dark #onboarding-canvas .intent-input { background: #2a2927 !important; border-color: rgba(255,255,255,0.1) !important; color: #e0ddd6 !important; }
html.dark #onboarding-canvas .intent-input::placeholder { color: #8a8780 !important; }
/* Summary bullets */
html.dark #onboarding-canvas .bg-\[\#3a3833\] { background: rgba(255,255,255,0.4) !important; }
/* Dropdown inside journey card */
html.dark #onboarding-canvas .shadow-xl { box-shadow: 0 12px 36px rgba(0,0,0,0.6) !important; }
/* Skeleton shimmer bars inside journey cards */
html.dark #onboarding-canvas .bg-gray-200 { background: rgba(255,255,255,0.1) !important; }

/* ── Date/time pills + "Load earlier" buttons ("Today", "Yesterday", etc.) ── */
html.dark .bg-\[\#F5EFE4\] { background: rgba(255,255,255,0.08) !important; color: #8a8680 !important; }
html.dark .text-\[\#A08866\] { color: #8a8680 !important; }

/* ── Depth progress bar (above theme input) ── */
html.dark #session-progress-wrap .text-gray-400 { color: #5a5752 !important; }
html.dark .progress-track { background: rgba(255,255,255,0.07) !important; }

/* ── Chat loading skeleton ── */
html.dark #chat-skeleton .bg-gray-200 { background: rgba(255,255,255,0.08) !important; }

/* ── Voice input UI ── */
html.dark #voice-transcript { color: #e8e4de !important; }
html.dark #voice-timer { color: #a09c98 !important; }

/* ── Pro feature / end-session popup card ── */
html.dark .pop-modal-card { background: #252321 !important; box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important; }
html.dark .pop-modal-card .text-\[\#1a1a1a\] { color: #e8e4de !important; }
html.dark .pop-modal-card .text-\[\#1a1a1a\].font-cozy { color: #e8e4de !important; }
html.dark .pop-modal-card .text-gray-500 { color: #9a9692 !important; }
html.dark .pop-modal-card .text-gray-600 { color: #a09c98 !important; }
html.dark .pop-modal-card .text-gray-700 { color: #b8b4ae !important; }
html.dark .pop-modal-card .text-gray-800 { color: #c8c5be !important; }
html.dark .pop-modal-card .text-gray-900 { color: #e8e4de !important; }
html.dark .pop-modal-card .bg-gray-50 { background: rgba(255,255,255,0.05) !important; color: #b8b4ae !important; }
html.dark .pop-modal-card .bg-\[\#fbf9f4\] { background: #1e1c1a !important; }
html.dark .pop-modal-card .border-t { border-color: rgba(255,255,255,0.08) !important; }
html.dark .pop-modal-card .border-b { border-color: rgba(255,255,255,0.08) !important; }
html.dark .pop-modal-card button.bg-gray-50 { background: rgba(255,255,255,0.06) !important; color: #b8b4ae !important; }
html.dark .pop-modal-card button.bg-gray-50:hover { background: rgba(255,255,255,0.1) !important; }
/* Summary / notes editor */
html.dark .pop-modal-card .bg-gray-50\/60 { background: #2a2826 !important; }
html.dark .pop-modal-card [contenteditable] { background: #2a2826 !important; color: #e0ddd6 !important; border-color: rgba(255,255,255,0.1) !important; }
html.dark .pop-modal-card [contenteditable]:focus { background: #2d2b28 !important; }
html.dark .pop-modal-card .focus\:bg-white:focus { background: #2d2b28 !important; }

/* ── Upgrade page (full-screen) ── */
html.dark #upgrade-page { background: #1c1a18 !important; }
html.dark #upgrade-page .bg-white { background: #252321 !important; }
html.dark #upgrade-page .bg-\[\#FAF9F7\] { background: #1c1a18 !important; }
html.dark #upgrade-page .border-black\/10 { border-color: rgba(255,255,255,0.1) !important; }
html.dark #upgrade-page .border-black\/5 { border-color: rgba(255,255,255,0.07) !important; }
html.dark #upgrade-page .border-\[\#FF6D1F\] { border-color: #FF6D1F !important; }
html.dark #upgrade-page .text-\[\#222222\] { color: #e8e4de !important; }
html.dark #upgrade-page .text-gray-500 { color: #9a9692 !important; }
html.dark #upgrade-page .text-gray-600 { color: #a09c98 !important; }
html.dark #upgrade-page .text-gray-700 { color: #b8b4ae !important; }
html.dark #upgrade-page .text-gray-400 { color: #6a6762 !important; }
html.dark #upgrade-page .shadow-orange-100 { box-shadow: 0 8px 30px rgba(255,109,31,0.15) !important; }
html.dark #upgrade-page button[disabled] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; color: #5a5752 !important; }

/* ── Chat row context menu (Star / Rename / Archive / Delete) ── */
html.dark .chat-options-dropdown { background: #272523 !important; border-color: rgba(255,255,255,0.08) !important; color: #c8c5be !important; }
html.dark .chat-options-dropdown button { color: #c8c5be !important; }
html.dark .chat-options-dropdown button:hover { background: rgba(255,255,255,0.06) !important; }
html.dark .chat-options-dropdown .menu-action-delete { color: #f87171 !important; }
html.dark .chat-options-dropdown .menu-action-delete:hover { background: rgba(239,68,68,0.1) !important; }
html.dark .chat-options-dropdown .border-t { border-color: rgba(255,255,255,0.08) !important; }
/* Star icon in the dropdown */
html.dark .chat-options-dropdown .menu-action-pin svg { color: #c8c5be !important; stroke: currentColor; }

/* ── Rename chat modal ── */
html.dark #custom-rename-modal .bg-white { background: #252321 !important; border-color: rgba(255,255,255,0.07) !important; }
html.dark #custom-rename-modal .text-\[\#222222\] { color: #e8e4de !important; }
html.dark #custom-rename-modal input { background: #2a2826 !important; border-color: rgba(255,255,255,0.12) !important; color: #e8e4de !important; }
html.dark #custom-rename-modal input::placeholder { color: #6a6762 !important; }
html.dark #custom-rename-modal .border-gray-200 { border-color: rgba(255,255,255,0.1) !important; }
html.dark #custom-rename-modal .text-gray-700 { color: #b8b4ae !important; }
html.dark #custom-rename-modal .bg-\[\#1a1a1a\] { background: #e8e4de !important; color: #1a1a1a !important; }
html.dark #custom-rename-modal .hover\:bg-gray-50:hover { background: rgba(255,255,255,0.05) !important; }

/* ── Delete chat modal ── */
html.dark #custom-delete-modal .bg-white { background: #252321 !important; border-color: rgba(255,255,255,0.07) !important; }
html.dark #custom-delete-modal .text-\[\#222222\] { color: #e8e4de !important; }
html.dark #custom-delete-modal .text-gray-500 { color: #9a9692 !important; }
html.dark #custom-delete-modal .text-gray-700 { color: #b8b4ae !important; }
html.dark #custom-delete-modal .border-gray-200 { border-color: rgba(255,255,255,0.1) !important; }
html.dark #custom-delete-modal .bg-red-50 { background: rgba(239,68,68,0.12) !important; }
html.dark #custom-delete-modal .hover\:bg-gray-50:hover { background: rgba(255,255,255,0.05) !important; }

/* ── Delete theme modal ── */
html.dark #custom-theme-delete-modal .bg-white { background: #252321 !important; border-color: rgba(255,255,255,0.07) !important; }
html.dark #custom-theme-delete-modal .text-\[\#222222\] { color: #e8e4de !important; }
html.dark #custom-theme-delete-modal .text-gray-500 { color: #9a9692 !important; }
html.dark #custom-theme-delete-modal .text-gray-700 { color: #b8b4ae !important; }
html.dark #custom-theme-delete-modal .border-gray-200 { border-color: rgba(255,255,255,0.1) !important; }
html.dark #custom-theme-delete-modal .bg-red-50 { background: rgba(239,68,68,0.12) !important; }
html.dark #custom-theme-delete-modal .hover\:bg-gray-50:hover { background: rgba(255,255,255,0.05) !important; }

/* ── Get help modal ── */
html.dark #help-modal .bg-white { background: #252321 !important; }
html.dark #help-modal .text-\[\#222222\] { color: #e8e4de !important; }
html.dark #help-modal .text-gray-500 { color: #9a9692 !important; }
html.dark #help-modal .text-gray-300 { color: #5a5752 !important; }
html.dark #help-modal .border-gray-100 { border-color: rgba(255,255,255,0.07) !important; }
html.dark #help-modal .bg-orange-50 { background: rgba(255,109,31,0.12) !important; }


html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    margin: 0;
    padding: 0;
}

.glass-header {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#terms-modal,
#phone-modal,
#onboarding-modal,
#name-modal {
    z-index: 10000;
    background-color: #ffffff;
    opacity: 1.0;
}

.sync-overlay {
    position: fixed;
    inset: 0;
    background-color: #ffffff !important;
    z-index: 999999 !important;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* Logout transition: chat fades down/out instead of snapping to blank right
   before the page reloads. Paired with #sync-loader's opacity fade above,
   which handleUserLogout() relabels to "Logging out..." for this moment. */
.logout-fade-out {
    transition: opacity 0.22s ease, transform 0.22s ease;
    opacity: 0 !important;
    transform: scale(0.99);
}

.sync-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #FF6D1F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 380px) {
    #landing-wall h1 {
        font-size: 40px !important;
    }
}

#sidebar-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.0) transparent;
    transition: scrollbar-color 0.3s ease;
}

#sidebar-scroll-area::-webkit-scrollbar {
    width: 4px;
}

#sidebar-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.0);
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}

#sidebar-scroll-area:hover,
#sidebar-scroll-area:active,
#sidebar-scroll-area:focus-within {
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

#sidebar-scroll-area:hover::-webkit-scrollbar-thumb,
#sidebar-scroll-area:active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
}

#landing-wall {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    z-index: 9999;
}

/* 🎯 CLEAN FLOATING SCROLLBAR */
.custom-scrollbar::-webkit-scrollbar {
    width: 14px;
    /* Total width including the invisible padding */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    /* Kills the ugly track background and left line */
    border: none;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #E5E7EB;
    /* Tailwind gray-200 */
    border-radius: 10px;

    /* This is the magic trick: it creates an invisible border around the thumb so it floats away from the right edge! */
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #D1D5DB;
    /* Tailwind gray-300 on hover */
}

/* Theme chat room: same scroll behavior as everywhere else, just no visible track/thumb */
.theme-scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.theme-scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

#messages::-webkit-scrollbar {
    width: 6px;
}

#messages::-webkit-scrollbar-track {
    background: transparent;
}

#messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
}


#messages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

#messages {
    position: relative;
    background-color: transparent !important;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    overflow-x: hidden !important;
    contain: layout;
}

#chat-messages-wrap {
    overflow-x: hidden !important;
}


aside,
.sidebar,
#sidebar {
    overflow-x: hidden !important;
}


#svg-wave-container svg {
    overflow: hidden !important;
}


#messages>* {
    position: relative;
    z-index: 2;
}


#settings-trigger-btn {
    transition: all 0.2s ease;
}

#settings-trigger-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-premium {
    background-color: #FF6D1F;
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-premium:hover {
    background-color: #6A2500 !important;
    color: #FF6D1F !important;
}

.btn-unsubscribe {
    background-color: #6A2500;
    color: #FF6D1F;
}


.feature-box {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    margin-bottom: 0.75rem;
    background-color: #F5F6F7;
    min-height: 80px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.paywall-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px !important;
    margin-bottom: 20px !important;
    width: 100%;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: #E5E7EB;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dot-indicator.active {
    background-color: #FF6D1F !important;
    width: 22px;
}

.feature-box-icon {
    margin-right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-box-icon svg {
    stroke: #FF6D1F;
}

.feature-box-content {
    line-height: 1.25;
    flex-grow: 1;
}

#paywall-limit-text {
    line-height: 1.8 !important;
}

#paywall-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #6A2500;
    color: white;
    padding: 2px 10px;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.85rem;
    min-width: 85px;
    height: 26px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    margin: 0 4px;
}

#user-input {
    resize: none !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    overflow-y: auto !important;
    height: 40px;
    min-height: 40px !important;
    max-height: 200px !important;
    line-height: 1.5;
}

#welcome-input {
    resize: none !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
    overflow-y: auto !important;
    height: 80px;
    min-height: 80px !important;
    max-height: 160px !important;
    line-height: 1.5;
}

#welcome-input-box,
#chat-input-box {
    height: auto !important;
    min-height: 56px !important;
}

#auth-modal {
    z-index: 100000 !important;
}


.glass-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    position: fixed;
    inset: 0;
    touch-action: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 200;
}

.paywall-card {
    background: white;
    width: 100%;
    max-width: 480px;
    height: 88vh;
    border-radius: 2.5rem 2.5rem 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: drawer-slide-up 0.9s cubic-bezier(0.32, 0.72, 0, 1);
}

.paywall-card.dragging {
    transition: none !important;
    animation: none !important;
}

.paywall-card.snapping {
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

@keyframes drawer-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.drawer-slide-down {
    animation: drawer-slide-down 0.7s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
}

.drawer-animate-out {
    animation: drawer-slide-down 0.4s ease-in forwards !important;
}

@keyframes drawer-slide-down {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

.features-scroll-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
    padding-bottom: 20px;
}

.hidden {
    display: none !important;
}

.no-transition {
    transition: none !important;
    animation: none !important;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-item.active .faq-content {
    max-height: 500px;
}

.faq-chevron {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

.auth-input {
    width: 100%;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
}

.auth-input:focus {
    border-color: #FF6D1F;
    background: white;
}

/* --- Right-side slide-in panel (Artifacts) --- */
.side-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 20000;
    display: flex;
    justify-content: flex-end;
}

.side-panel {
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #fbf9f4;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    animation: panel-slide-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes panel-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.side-panel.closing {
    animation: panel-slide-out 0.22s ease forwards !important;
}

@keyframes panel-slide-out {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* --- Centered pop-in modal (End session summary) --- */
.pop-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pop-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 1.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: pop-modal-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pop-modal-in {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.pop-modal-card.closing {
    animation: pop-modal-out 0.18s ease forwards !important;
}

@keyframes pop-modal-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* --- Landing wall: liquid-glass background + frosted auth card --- */
/* .onboarding-bg reuses the same warm gradient so the rest of the signup
   flow (terms, phone, onboarding, name, use-case modals) feels like one
   continuous experience instead of dropping into flat white/black screens. */
.landing-bg, .onboarding-bg {
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 109, 31, 0.07), transparent 55%),
        radial-gradient(circle at 85% 20%, rgba(255, 178, 102, 0.09), transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(255, 109, 31, 0.05), transparent 60%),
        linear-gradient(160deg, #fffefc 0%, #fffaf4 45%, #fdf3e7 100%);
}

/* Theme-picker ("What do you want to focus on?") page specifically — same
   warm family as the landing screen, but with the orange tint dialed way
   down so the page reads light/neutral instead of orangey. Declared after
   the shared rule above so it wins for elements carrying both classes. */
.onboarding-bg {
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 109, 31, 0.025), transparent 55%),
        radial-gradient(circle at 85% 20%, rgba(255, 178, 102, 0.03), transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(255, 109, 31, 0.02), transparent 60%),
        linear-gradient(160deg, #fffefc 0%, #fffdfb 45%, #fefaf5 100%);
}

.landing-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    will-change: transform, border-radius;
}

/* ── Modal fade + scale transitions ── */
#custom-rename-modal,
#custom-delete-modal,
#custom-theme-delete-modal {
    transition: opacity 0.18s ease;
}
#custom-rename-modal > div,
#custom-delete-modal > div,
#custom-theme-delete-modal > div {
    transition: transform 0.18s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.18s ease;
}

.landing-blob-1 {
    width: 340px;
    height: 340px;
    top: 15%;
    left: 10%;
    background: radial-gradient(circle, #ffb066, #ff6d1f 70%);
    animation: landing-drift-1 55s ease-in-out infinite;
}

.landing-blob-2 {
    width: 280px;
    height: 280px;
    top: 45%;
    right: 15%;
    background: radial-gradient(circle, #ffd9b0, #ff8a3d 75%);
    animation: landing-drift-2 65s ease-in-out infinite;
}

.landing-blob-3 {
    width: 220px;
    height: 220px;
    top: 65%;
    left: 30%;
    background: radial-gradient(circle, #fff1e0, #ffb066 80%);
    opacity: 0.4;
    animation: landing-drift-3 60s ease-in-out infinite;
}

/* Big, slow, viewport-relative travel + a touch of border-radius wobble so
   each blob actually floats across the page and softly reshapes itself as
   it goes — the lava-lamp effect, not just a local jiggle in the corner. */
@keyframes landing-drift-1 {
    0%   { transform: translate(0, 0) scale(1);              border-radius: 50%; }
    20%  { transform: translate(18vw, -12vh) scale(1.07);   border-radius: 46% 54% 58% 42%; }
    40%  { transform: translate(30vw, 20vh) scale(0.95);    border-radius: 54% 46% 42% 58%; }
    60%  { transform: translate(10vw, 38vh) scale(1.05);    border-radius: 58% 42% 50% 50%; }
    80%  { transform: translate(-8vw, 18vh) scale(0.97);    border-radius: 44% 56% 52% 48%; }
    100% { transform: translate(0, 0) scale(1);              border-radius: 50%; }
}

@keyframes landing-drift-2 {
    0%   { transform: translate(0, 0) scale(1);              border-radius: 50%; }
    20%  { transform: translate(-14vw, -18vh) scale(1.06);  border-radius: 44% 56% 48% 52%; }
    40%  { transform: translate(-28vw, 8vh) scale(0.93);    border-radius: 52% 48% 56% 44%; }
    60%  { transform: translate(-12vw, 24vh) scale(1.08);   border-radius: 48% 52% 44% 56%; }
    80%  { transform: translate(6vw, 10vh) scale(0.96);     border-radius: 56% 44% 50% 50%; }
    100% { transform: translate(0, 0) scale(1);              border-radius: 50%; }
}

@keyframes landing-drift-3 {
    0%   { transform: translate(0, 0) scale(1);              border-radius: 50%; }
    20%  { transform: translate(20vw, -14vh) scale(1.09);   border-radius: 52% 48% 44% 56%; }
    40%  { transform: translate(8vw, -28vh) scale(0.91);    border-radius: 46% 54% 56% 44%; }
    60%  { transform: translate(-16vw, -10vh) scale(1.06);  border-radius: 54% 46% 48% 52%; }
    80%  { transform: translate(-6vw, 10vh) scale(0.97);    border-radius: 48% 52% 42% 58%; }
    100% { transform: translate(0, 0) scale(1);              border-radius: 50%; }
}

.landing-glass-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px rgba(255, 109, 31, 0.10), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {

    .landing-blob-1,
    .landing-blob-2,
    .landing-blob-3 {
        animation: none;
    }
}