/* =========================================================
   CHAT — ported 1:1 from "AVA Chat.dc.html" (+ mobile from
   "AVA Chat (mobile).dc.html"). Layout/colours live inline in the
   markup (as in the prototype); this file holds the shell frame,
   the prototype <style> hover helpers, the mobile app bar/drawer,
   and the feature styling the prototype has no equivalent for
   (markdown answers, document chips, dictation/TTS, composer chips).
   ========================================================= */

.chat-app {
    height: 100%;
    display: flex;
    min-height: 0;
    overflow: hidden;
    background: #001E30;
}

.chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* New/empty chat: the greeting + composer sit centered as one group (fresh-AI-chat
   feel). The scroll area shrinks to its content instead of stretching, so the
   composer rises to just below the greeting. Once messages exist the class is gone,
   the scroll area stretches again and the composer drops back to the bottom. */
.chat.is-empty { justify-content: center; }
.chat.is-empty .chat-scroll { flex: 0 1 auto !important; }

/* The messages are their own scroll container, but with no visible scrollbar strip — a bare
   scrollbar over the bubbles looks cheap. Scrolling still works (wheel/touch); the top app bar
   sits outside this container, so it stays fixed as a header while only the bubbles scroll. */
.chat-scroll {
    scroll-behavior: auto;
    overflow-anchor: none;
    /* reliable momentum scrolling on iOS, and keep overscroll from chaining to the page/body */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* no visible scrollbar strip — a bare bar over the bubbles looks cheap */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Sidebar containers (button/colour styling is inline in the markup) */
.chat-rail {
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 14px 0;
    background: #001827;
    border-right: 1px solid rgba(159,182,190,0.10);
}
.chat-sidebar {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #001827;
    border-right: 1px solid rgba(159,182,190,0.10);
}

/* ===== prototype <style> hover/scroll helpers ===== */
.ava-scroll::-webkit-scrollbar { width: 9px; }
.ava-scroll::-webkit-scrollbar-thumb { background: rgba(159,182,190,0.22); border-radius: 99px; }
.ava-scroll::-webkit-scrollbar-track { background: transparent; }
.chatrow:hover { background: rgba(255,255,255,0.04) !important; }
.chatrow:hover .delbtn { opacity: 1 !important; }
.iconbtn:hover { color: #EAF6F8 !important; background: rgba(159,182,190,0.10) !important; }
.sendbtn:hover { filter: brightness(1.07); }
.delall:hover { color: #ff8a8a !important; }
.sendbtn:disabled, .iconbtn:disabled { opacity: .5; cursor: default; }
.chat-composer textarea::placeholder { color: #859AA1; }

/* The composer's outer box is the only intended frame. The textarea must never draw
   its own frame (outline / focus box-shadow / border) inside it, in any state. */
.chat-composer textarea,
.chat-composer textarea:focus,
.chat-composer textarea:focus-visible,
.chat-composer textarea:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Kill the grey box the mobile browser flashes over a tapped field/button. */
.chat-composer,
.chat-composer * { -webkit-tap-highlight-color: transparent; }

/* the empty-state brain uses the prototype's smaller nodes */
.chat-empty .np { width: 5px; height: 5px; }

/* =========================================================
   FORMATTED (MARKDOWN) ANSWER
   ========================================================= */
.msg-markdown > :first-child { margin-top: 0; }
.msg-markdown > :last-child { margin-bottom: 0; }
.msg-markdown h1, .msg-markdown h2, .msg-markdown h3,
.msg-markdown h4, .msg-markdown h5, .msg-markdown h6 {
    color: var(--ava-text-1);
    font-weight: 700;
    line-height: 1.25;
    margin: 1em 0 0.5em;
}
.msg-markdown h1 { font-size: 1.5em; }
.msg-markdown h2 { font-size: 1.3em; }
.msg-markdown h3 { font-size: 1.15em; }
.msg-markdown h4, .msg-markdown h5, .msg-markdown h6 { font-size: 1em; }
.msg-markdown p { margin: 0 0 0.7em; }
.msg-markdown ul, .msg-markdown ol { margin: 0 0 0.7em; padding-left: 1.4em; list-style-position: outside; }
.msg-markdown ul { list-style-type: disc; }
.msg-markdown ol { list-style-type: decimal; }
.msg-markdown li { margin: 0.2em 0; }
.msg-markdown li > ul, .msg-markdown li > ol { margin-bottom: 0; }
.msg-markdown .task-list-item { list-style: none; }
.msg-markdown .task-list-item-checkbox { margin-right: 0.4em; }
.msg-markdown strong { font-weight: 700; }
.msg-markdown em { font-style: italic; }
.msg-markdown blockquote {
    margin: 0 0 0.7em;
    padding: 0.3em 0.9em;
    border-left: 3px solid var(--ava-line-strong);
    background: rgba(255,255,255,0.03);
    color: var(--ava-text-2);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.msg-markdown blockquote > :last-child { margin-bottom: 0; }
.msg-markdown code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: rgba(255,255,255,0.06);
    padding: 0.1em 0.35em;
    border-radius: var(--r-xs);
    overflow-wrap: anywhere;
}
.msg-markdown pre {
    margin: 0 0 0.7em;
    padding: 0.8em 1em;
    max-width: 100%;
    overflow-x: auto;
    background: var(--ava-ink);
    border: 1px solid var(--ava-line);
    border-radius: var(--r-sm);
}
.msg-markdown pre code { background: transparent; padding: 0; border-radius: 0; font-size: 0.86em; white-space: pre; overflow-wrap: normal; }
.msg-markdown table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 0.7em;
    font-size: 0.95em;
}
.msg-markdown th, .msg-markdown td { border: 1px solid var(--ava-line); padding: 0.4em 0.7em; text-align: left; }
.msg-markdown th { background: rgba(255,255,255,0.05); font-weight: 700; }
.msg-markdown hr { border: 0; border-top: 1px solid var(--ava-line-soft); margin: 1em 0; }

/* =========================================================
   MESSAGE DOCUMENTS
   ========================================================= */
.msg-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-width: 0; }
.msg-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ava-line);
    background: rgba(159,182,190,0.08);
    border-radius: var(--r-pill);
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ava-text-1);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.msg-doc-chip:hover { background: var(--ava-hover); border-color: var(--ava-line-strong); }
.msg-doc-chip.is-loading { cursor: default; opacity: 0.8; }
.msg-doc-chip.is-loading .bi-arrow-repeat { display: inline-block; animation: ava-spin 0.9s linear infinite; }

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

.msg-hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ava-line-soft);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ava-text-2);
    white-space: pre-line;
}

/* processing bubble — three pulsing dots while AVA is thinking */
.msg-typing { display: inline-flex; align-items: center; gap: 5px; }
.msg-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9FB6BE;
    opacity: 0.35;
    animation: msgTyping 1.2s ease-in-out infinite;
}
.msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.msg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes msgTyping {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* =========================================================
   MESSAGE ACTIONS / TTS
   ========================================================= */
.msg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
.msg-tts-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--r-xs);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ava-text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0.8;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.msg-tts-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: var(--ava-text-1); opacity: 1; }
.msg-tts-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ava-focus-r); color: var(--ava-text-1); }
.msg-tts-btn:disabled { cursor: progress; opacity: 0.85; color: var(--ava-aqua); }
.msg-tts-btn i { font-size: 16px; line-height: 1; }
.msg-tts-btn.is-speaking {
    opacity: 1;
    color: var(--ava-danger-text);
    border-color: rgba(156,86,81,0.45);
    background: rgba(156,86,81,0.14);
}
.msg-tts-btn.is-speaking:hover { background: rgba(156,86,81,0.22); }

/* =========================================================
   COMPOSER CHIPS (pending attachments)
   ========================================================= */
.composer-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(159,182,190,0.08);
    border: 1px solid var(--ava-line);
    border-radius: var(--r-pill);
    padding: 4px 8px 4px 10px;
    font-size: 13px;
    color: var(--ava-text-1);
    max-width: 220px;
    min-width: 0;
}
.chip-icon { font-size: 14px; color: var(--ava-text-2); }
.chip-link { min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; padding: 0; margin: 0; font-size: 13px; color: var(--ava-cyan); cursor: pointer; font-weight: 600; }
.chip-link:hover { text-decoration: underline; }
.chip-remove { border: none; background: transparent; color: var(--ava-text-3); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 50%; }
.chip-remove:hover { color: var(--ava-danger-text); }
.chip-remove i { font-size: 11px; }

/* =========================================================
   MOBILE — app bar + left drawers (matches the mobile prototype)
   ========================================================= */
.chat-mobile-appbar { display: none; }
.chat-sidebar-backdrop { display: none; }

@media (max-width: 767px) {
    .chat-app {
        position: relative;   /* anchor for the floating (absolute) mobile controls */
        flex-direction: column !important;
        /* Stable full height — the shell does NOT track the shrinking visual viewport (that moved
           the floating controls and jittered). The composer alone lifts by the keyboard height
           (--kb, from site.js): messages reflow above it, it sits snug on the keyboard. */
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    .chat { flex: 1 1 auto; height: auto; min-height: 0; }

    /* On phones keep the composer pinned to the bottom even in the empty state (the greeting
       still centers within the scroll area above it). Focusing the box then sits it just above
       the keyboard — like ChatGPT/Claude — instead of the whole group floating mid-screen. */
    .chat.is-empty { justify-content: flex-start !important; }
    .chat.is-empty .chat-scroll { flex: 1 1 auto !important; }

    /* the collapsed desktop rail has no place on phones */
    .chat-rail { display: none !important; }

    /* touch devices have no hover, so the per-chat delete button (hidden until
       .chatrow:hover on desktop) must be shown permanently here. */
    .delbtn { opacity: 1 !important; }

    /* No solid bar. A transparent overlay holds the floating bubble buttons; the chat scrolls
       behind it. Pinned to the VIEWPORT with position:fixed (not anchored to the shell) so it
       never drifts when the messages scroll or Safari's toolbar collapses — a top-fixed bar is
       unaffected by the keyboard. pointer-events:none lets touches between the bubbles reach the
       messages (so you can scroll near the top); each button re-enables its own hits. */
    .chat-mobile-appbar {
        position: fixed;
        top: var(--vv-offset, 0px); left: 0; right: 0;
        z-index: 6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top));
        background: transparent;
        border: 0;
        pointer-events: none;
    }
    .cmab-group { display: flex; align-items: center; gap: 8px; }
    .cmab-btn {
        pointer-events: auto;
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: 50%;
        border: 1px solid rgba(159,182,190,0.16);
        background: rgba(0,24,39,0.72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #EAF6F8;
        display: grid;
        place-items: center;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    }
    .cmab-btn:disabled { opacity: .5; cursor: default; }

    /* chat list = left slide-in drawer + backdrop */
    .chat-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 100000;
        width: 300px;
        max-width: 84%;
        height: 100dvh;
        max-height: 100dvh;
        box-shadow: 0 0 60px rgba(0,0,0,0.5);
        animation: avaDrawerIn .22s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .chat-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(0,8,12,0.55);
        animation: avaFadeIn .18s ease;
    }

    /* tighten the thread + composer padding for phones; extra top clearance so the first
       message sits below the floating bubble buttons (older messages still scroll behind them). */
    .chat-thread { padding: calc(60px + env(safe-area-inset-top)) 14px 18px !important; }
    /* Lift the composer by the keyboard height. When the keyboard is closed --kb is 0 and the
       margin falls back to the home-indicator safe area; when it is open the margin becomes the
       keyboard height, so the box sits flush on the keyboard with no safe-area gap. A short
       transition lets it glide with the keyboard instead of snapping. */
    .chat-composer {
        padding: 12px 14px 12px !important;
        margin-bottom: max(var(--kb, 0px), env(safe-area-inset-bottom, 0px));
        transition: margin-bottom .22s cubic-bezier(.2,.8,.2,1);
    }
    .chat-composer textarea { font-size: 16px !important; }
}