/* =========================================================
   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: var(--ava-navy);
}

.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: var(--ava-navy-deep);
    border-right: 1px solid rgba(var(--ava-rgb-slate),0.10);
}
.chat-sidebar {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ava-navy-deep);
    border-right: 1px solid rgba(var(--ava-rgb-slate),0.10);
}

/* ===== prototype <style> hover/scroll helpers ===== */
.ava-scroll::-webkit-scrollbar { width: 9px; }
.ava-scroll::-webkit-scrollbar-thumb { background: rgba(var(--ava-rgb-slate),0.22); border-radius: 99px; }
.ava-scroll::-webkit-scrollbar-track { background: transparent; }
.chatrow:hover { background: rgba(var(--ava-rgb-white),0.04) !important; }
.chatrow:hover .delbtn { opacity: 1 !important; }
.iconbtn:hover { color: var(--ava-slate-100) !important; background: rgba(var(--ava-rgb-slate),0.10) !important; }
.sendbtn:hover { filter: brightness(1.07); }
.delall:hover { color: var(--ava-coral-soft) !important; }
.sendbtn:disabled, .iconbtn:disabled { opacity: .5; cursor: default; }
.chat-composer textarea::placeholder { color: var(--ava-slate-700); }

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

/* Light theme: the brain renders as the re-inked deep-teal artwork (ava-base.css)
   directly on the light surface — no stage card. */
:root[data-theme="light"] .chat-empty-brain { background: none; border: none; padding: 0; }
:root[data-theme="light"] .chat-empty-brain .ava-brain-nodes { inset: 0; }

/* =========================================================
   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(var(--ava-rgb-white),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(var(--ava-rgb-white),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(var(--ava-rgb-white),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(var(--ava-rgb-slate),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: var(--ava-slate-500);
    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 (copy / feedback / regenerate / TTS)
   ========================================================= */
.msg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
.msg-tts-btn,
.msg-action-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),
.msg-action-btn:hover:not(:disabled) { background: rgba(var(--ava-rgb-white),0.06); color: var(--ava-text-1); opacity: 1; }
.msg-tts-btn:focus-visible,
.msg-action-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,
.msg-action-btn i { font-size: 16px; line-height: 1; }
.msg-tts-btn.is-speaking {
    opacity: 1;
    color: var(--ava-danger-text);
    border-color: rgba(var(--ava-rgb-brick),0.45);
    background: rgba(var(--ava-rgb-brick),0.14);
}
.msg-tts-btn.is-speaking:hover { background: rgba(var(--ava-rgb-brick),0.22); }
/* Locked/in-flight feedback and busy regenerate: unlike the TTS button, disabled here means
   "no longer clickable", not "loading". */
.msg-action-btn:disabled { cursor: default; opacity: 0.45; }
.msg-action-btn.is-selected {
    opacity: 1;
    color: var(--ava-aqua);
    border-color: rgba(var(--ava-rgb-aqua),0.45);
    background: rgba(var(--ava-rgb-aqua),0.12);
}
.msg-action-btn.is-copied { opacity: 1; color: var(--ava-aqua); }
.msg-action-btn.is-copy-failed { opacity: 1; color: var(--ava-danger-text); }

/* =========================================================
   CODE-BLOCK COPY (buttons emitted by the markdown renderer)
   ========================================================= */
.msg-code { position: relative; }
.msg-code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: var(--r-xs);
    border: 1px solid var(--ava-line);
    background: var(--ava-ink);
    color: var(--ava-text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0.7;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.msg-code-copy:hover { background: rgba(var(--ava-rgb-white),0.06); color: var(--ava-text-1); opacity: 1; }
.msg-code-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ava-focus-r); color: var(--ava-text-1); }
.msg-code-copy i { font-size: 14px; line-height: 1; }
.msg-code-copy.is-copied { opacity: 1; color: var(--ava-aqua); border-color: rgba(var(--ava-rgb-aqua),0.45); }
.msg-code-copy.is-failed { opacity: 1; color: var(--ava-danger-text); border-color: rgba(var(--ava-rgb-brick),0.45); }

/* =========================================================
   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(var(--ava-rgb-slate),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(var(--ava-rgb-slate),0.16);
        background: rgba(var(--ava-rgb-navy-deep),0.72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: var(--ava-slate-100);
        display: grid;
        place-items: center;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(var(--ava-rgb-black),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(var(--ava-rgb-black),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(var(--ava-rgb-overlay-2),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; }
}


/* Composer "+" menu: the upload entry plus the per-user custom-API switches. */
.chat-plus-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 1200;
    width: 300px;
    padding: 6px;
    border-radius: 16px;
    background: var(--ava-navy-deep);
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    box-shadow: 0 24px 60px rgba(var(--ava-rgb-black), 0.55);
}

.chat-plus-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--ava-slate-100);
    font: 500 13.5px Inter;
    cursor: pointer;
    text-align: left;
    margin: 0;
}

.chat-plus-item:hover { background: rgba(var(--ava-rgb-white), 0.04); }

.chat-plus-chev {
    flex: 0 0 auto;
    color: var(--ava-slate-700);
    font-size: 15px;
    transition: transform .18s ease;
}

/* The API list flies out to the right of the menu as its own panel; the slight horizontal
   overlap keeps :hover alive while the pointer crosses from the menu into the panel. */
.chat-plus-api { position: relative; }

.chat-plus-sub {
    display: none;
    position: absolute;
    left: calc(100% + 4px);
    bottom: -6px;
    width: 320px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 16px;
    background: var(--ava-navy-deep);
    border: 1px solid rgba(var(--ava-rgb-slate), 0.16);
    box-shadow: 0 24px 60px rgba(var(--ava-rgb-black), 0.55);
}

.chat-plus-sub::-webkit-scrollbar { width: 6px; }
.chat-plus-sub::-webkit-scrollbar-thumb { background: rgba(var(--ava-rgb-slate), 0.28); border-radius: 99px; }
.chat-plus-sub::-webkit-scrollbar-thumb:hover { background: rgba(var(--ava-rgb-slate), 0.42); }
.chat-plus-sub::-webkit-scrollbar-track { background: transparent; }

.chat-plus-api.open .chat-plus-sub { display: block; animation: avaDropFade .14s ease; }

@media (hover: hover) {
    .chat-plus-api:hover .chat-plus-sub { display: block; animation: avaDropFade .14s ease; }
}

.chat-plus-api-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
}

/* Narrow screens have no room for a side panel: the list expands inline below the entry. */
@media (max-width: 720px) {
    .chat-plus-sub {
        display: block;
        position: static;
        width: auto;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        animation: none;
        transition: max-height .2s ease;
    }

    .chat-plus-api.open .chat-plus-sub { max-height: 300px; overflow-y: auto; animation: none; }
    .chat-plus-api.open .chat-plus-chev { transform: rotate(90deg); }
    .chat-plus-api-row { padding-left: 40px; }
}

.chat-plus-api-row:hover { background: rgba(var(--ava-rgb-white), 0.03); }

.chat-plus-api-name {
    display: block;
    font: 600 13px Inter;
    color: var(--ava-slate-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-plus-api-desc {
    display: block;
    font: 400 11.5px Inter;
    color: var(--ava-slate-700);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}