@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;
}

.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;
}


.goo-svg {
    position: absolute;
    width: 0;
    height: 0;
}

.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: #f7f7f7 !important;
    border: 1px solid #eeeeee !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 {
    border-color: #d1d5db !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;
}


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: 500;
    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: 600;
    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;
}

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

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

.landing-blob-3 {
    width: 220px;
    height: 220px;
    bottom: 10%;
    left: -60px;
    background: radial-gradient(circle, #fff1e0, #ffb066 80%);
    opacity: 0.4;
    animation: landing-drift-3 28s 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%;
    }

    25% {
        transform: translate(22vw, 10vh) scale(1.15);
        border-radius: 46% 54% 58% 42%;
    }

    50% {
        transform: translate(14vw, 26vh) scale(0.92);
        border-radius: 58% 42% 44% 56%;
    }

    75% {
        transform: translate(-6vw, 14vh) scale(1.08);
        border-radius: 42% 58% 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%;
    }

    25% {
        transform: translate(-20vw, -14vh) scale(1.12);
        border-radius: 44% 56% 52% 48%;
    }

    50% {
        transform: translate(-10vw, -28vh) scale(0.9);
        border-radius: 56% 44% 46% 54%;
    }

    75% {
        transform: translate(8vw, -12vh) scale(1.1);
        border-radius: 48% 52% 56% 44%;
    }

    100% {
        transform: translate(0, 0) scale(1);
        border-radius: 50%;
    }
}

@keyframes landing-drift-3 {
    0% {
        transform: translate(0, 0) scale(1);
        border-radius: 50%;
    }

    25% {
        transform: translate(16vw, -16vh) scale(1.2);
        border-radius: 52% 48% 44% 56%;
    }

    50% {
        transform: translate(28vw, 2vh) scale(0.88);
        border-radius: 44% 56% 54% 46%;
    }

    75% {
        transform: translate(10vw, 12vh) scale(1.1);
        border-radius: 56% 44% 48% 52%;
    }

    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;
    }
}