/* =========================================================
   chat.css
   Page-3-only styles for the chat-story UI. Loaded only by
   pages/page3.html, so Page 1 and Page 2 are untouched by
   anything in this file. Uses the same design tokens as the
   rest of the site (css/style.css) plus two chat-specific
   bubble-color tokens defined there (--color-bubble-in/out).
   ========================================================= */

/* ---- Page shell ----
   Unlike .page (used by Page 1/2, which vertically centers a
   short card), the chat needs to fill the screen and scroll,
   so it gets its own shell instead of reusing .page. */
.chat-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    background-color: var(--color-bg);
    overflow: hidden;
}

/* On roomier screens the chat reads as a single phone-width
   conversation rather than stretching edge to edge. */
.chat-frame {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    /* Locked to a real height (not min-height) so this flex column
       has a definite size for .chat-window's flex:1 to fill — that's
       what lets .chat-window's overflow-y:auto actually kick in and
       scroll internally, instead of the whole page just growing
       taller and leaving auto-scroll with nothing to scroll. */
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-bg);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .chat-page {
        align-items: center;
        padding: var(--space-lg) 0;
    }

    .chat-frame {
        height: min(760px, 92dvh);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }
}

/* ---- Scrollable message feed ---- */
.chat-window {
    flex: 1;
    /* Without this, a flex item's default min-height is "tall
       enough to fit all its content" — so instead of shrinking to
       .chat-frame's fixed height and scrolling internally, it just
       keeps growing to fit every message, pushing the whole page
       taller and bringing back an unwanted page-level scrollbar. */
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-sm) var(--space-md);
    scroll-behavior: smooth;
    /* Scrolling still works, the bar itself is just hidden. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-window::-webkit-scrollbar {
    display: none;
}

/* ---- Message bubbles ---- */
.chat-bubble {
    max-width: 78%;
    padding: 12px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-softer);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 320ms ease, transform 320ms ease;
}

.chat-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-bubble--in {
    align-self: flex-start;
    background-color: var(--color-bubble-in);
    color: var(--color-text);
    border-bottom-left-radius: var(--radius-sm);
}

.chat-bubble--out {
    align-self: flex-end;
    background-color: var(--color-bubble-out);
    color: var(--color-text);
    border-bottom-right-radius: var(--radius-sm);
    /* A reply just got picked, so it arrives with a touch more
       energy than an incoming message — a small overshoot instead
       of a plain fade-up. */
    transform: translateY(10px) scale(0.94);
    transition: opacity 320ms ease, transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-bubble--out.is-visible {
    transform: translateY(0) scale(1);
}

/* ---- Typing indicator ----
   Styled like an incoming bubble so it feels like part of the
   same conversation rather than a separate loading spinner. */
.chat-typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
    background-color: var(--color-bubble-in);
    border-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-sm);
    box-shadow: var(--shadow-softer);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.chat-typing.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background-color: var(--color-muted);
    animation: typingBounce 1.1s ease-in-out infinite;
}

.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Reply dock ----
   Sits below the scrollable message feed as its own flex item
   (not inside .chat-window), so it stays pinned to the bottom
   edge of the chat frame no matter how far the conversation has
   scrolled. A soft gradient + top border separates it from the
   feed the way a native messaging app's input bar would. */
.chat-options-dock {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, transparent, var(--color-bg) 26%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.chat-options-dock:empty {
    padding-bottom: 0;
}

/* ---- Reply options ----
   Long, plain, chat-native buttons — deliberately not styled
   like game/dialogue-tree buttons (no bold borders, no big
   shadows, no accent gradients). */
.chat-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) var(--space-md);
    border-top: 1px solid rgba(74, 64, 56, 0.08);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 280ms ease, transform 280ms ease, border-color 260ms ease;
}

.chat-options.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* The dock tucking itself away after a choice is made: it slides
   further down as it fades, reading as "leaving off the bottom
   edge" rather than just blinking out. By the time it's removed
   from the DOM it's already invisible, so the feed reclaiming
   its space isn't noticeable. */
.chat-options.is-leaving {
    opacity: 0;
    transform: translateY(28px);
    border-top-color: transparent;
    pointer-events: none;
}

.chat-option-btn {
    width: 100%;
    text-align: left;
    padding: 13px 18px;
    background-color: var(--color-surface);
    border: 1px solid rgba(74, 64, 56, 0.12);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), opacity 220ms ease;
}

.chat-option-btn:hover {
    background-color: var(--color-bubble-out);
    border-color: rgba(74, 64, 56, 0.18);
}

.chat-option-btn:active {
    transform: scale(0.98);
}

.chat-option-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* The tapped option: lights up in the accent color so the
   choice feels acknowledged before it turns into the outgoing
   bubble above. */
.chat-option-btn.is-picked {
    background-color: var(--color-bubble-out);
    border-color: var(--color-primary);
    color: var(--color-text);
    opacity: 1;
    transform: scale(1.01);
}

/* The options that weren't picked: quietly step back rather
   than just disappearing. */
.chat-option-btn.is-fading {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
}

/* ---- Continue CTA ----
   Shown instead of reply options once the conversation reaches
   an `end` node with a nextPage — a single, solid, centered
   button so it reads as "move forward" rather than "reply". */
.chat-option-btn--cta {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    box-shadow: var(--shadow-softer);
}

.chat-option-btn--cta:hover {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

/* ---- Decorative floating hearts ----
   A handful of very quiet, fixed decorations. Not tied to the
   conversation logic, kept few and low-opacity on purpose. */
.chat-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.chat-decor-heart {
    position: absolute;
    color: var(--color-primary);
    opacity: 0.16;
    font-size: 1.4rem;
    animation: heartFloat 9s ease-in-out infinite;
}

.chat-decor-heart--1 { left: 12%; top: 18%; animation-delay: 0s; }
.chat-decor-heart--2 { right: 16%; top: 42%; animation-delay: 2.4s; font-size: 1.1rem; }
.chat-decor-heart--3 { left: 22%; bottom: 22%; animation-delay: 4.8s; font-size: 1rem; }

@keyframes heartFloat {
    0%, 100% { transform: translateY(0); opacity: 0.12; }
    50% { transform: translateY(-14px); opacity: 0.22; }
}

.chat-window,
.chat-options {
    position: relative;
    z-index: 1;
}