/* ═══════════════════════════════════════════════════════════════════════════
   ai-chat.css — the shared "native chat" design system for every AI chat
   surface (AgentChat, CompanyChat, OrchestratorAgentChat, CouncilChat, and
   the floor chat panel). Goal: a ChatGPT/Claude-grade look that is genuinely
   mobile-first — sessions live in an off-canvas drawer on phones, the thread
   is a centered column, and the composer is a rounded pill pinned to the
   bottom with safe-area padding. Ships globally (registered in _Host, like
   fleet-ops.css) because these pages predate the scoped-CSS bundle.
   Dark-mode aware via Bootstrap's CSS variables ([data-bs-theme]).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell: sidebar + main column ─────────────────────────────────────────── */
.ai-chat-shell {
    display: flex;
    /* dvh, not vh: on mobile the URL bar shrinking/expanding made 100vh lie,
       which pushed the composer off-screen — the exact bug in the field report. */
    height: calc(100dvh - 70px);
    background: var(--bs-body-bg);
}

.ai-chat-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Sessions sidebar ─────────────────────────────────────────────────────── */
.ai-chat-sidebar {
    width: 290px;
    min-width: 290px;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}
.ai-chat-shell:not(.sidebar-open) .ai-chat-sidebar { display: none; }

.ai-chat-session-list { flex: 1 1 auto; overflow-y: auto; padding: .35rem; }

/* Session rows: grid keeps the action icon in its own fixed column, so it can
   never wrap under the row (the floating red archive icons on mobile). */
.ai-chat-session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .5rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 2px;
}
.ai-chat-session:hover { background: var(--bs-secondary-bg); }
.ai-chat-session.current { background: rgba(var(--bs-primary-rgb), .12); }
.ai-chat-session .s-title {
    font-size: .85rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-chat-session .s-meta { grid-column: 1; font-size: .7rem; color: var(--bs-secondary-color); }
.ai-chat-session .s-action { grid-row: 1 / span 2; align-self: center; }
.ai-chat-session .s-action .btn { padding: .15rem .35rem; line-height: 1; border: 0; color: var(--bs-secondary-color); }
.ai-chat-session .s-action .btn:hover { color: var(--bs-danger); background: var(--bs-secondary-bg); }
.ai-chat-session.archived .s-title { color: var(--bs-secondary-color); text-decoration: line-through; font-weight: 500; }

/* ── Chat header ──────────────────────────────────────────────────────────── */
.ai-chat-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    flex-wrap: nowrap;
    min-height: 52px;
}
.ai-chat-header .h-identity { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.ai-chat-header .h-identity .h-name { font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat-header .h-identity .h-sub { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat-header .h-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }

/* ── Messages area: centered thread like ChatGPT/Claude ───────────────────── */
.ai-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.ai-chat-thread {
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem .9rem 1.25rem;
}

/* Message rows + bubbles */
.ai-msg { display: flex; margin-bottom: .9rem; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.assistant { justify-content: flex-start; }
.ai-msg .bubble {
    max-width: 82%;
    padding: .65rem .95rem;
    font-size: .925rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ai-msg.user .bubble {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.ai-msg.assistant .bubble {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 18px 18px 18px 4px;
}
.ai-msg .msg-meta { font-size: .68rem; opacity: .75; margin-top: .3rem; display: flex; align-items: center; gap: .5rem; }
.ai-msg.user .msg-meta { color: rgba(255,255,255,.85); }
.ai-msg.assistant .msg-meta { color: var(--bs-secondary-color); }

/* Assistant replies rendered as markdown (<AiMarkdown>, Markdig with raw HTML disabled) —
   Orchestrator + agent chat. The bubble is pre-wrap for plain text; rendered HTML must not be,
   or Markdig's newlines between blocks turn into blank lines. Selectors carry .ai-msg so they
   outrank site.css's dark `pre, code` rule (0,1,1). */
.ai-msg .ai-md { white-space: normal; overflow-wrap: anywhere; }
.ai-msg .ai-md > :first-child { margin-top: 0; }
.ai-msg .ai-md > :last-child { margin-bottom: 0; }
.ai-msg .ai-md p { margin: 0 0 .6em; }
.ai-msg .ai-md :is(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 700; margin: .85em 0 .35em; line-height: 1.35; color: var(--bs-emphasis-color); }
.ai-msg .ai-md :is(h1, h2) { font-size: 1.08em; }
.ai-msg .ai-md :is(ul, ol) { margin: 0 0 .65em; padding-left: 1.3em; }
.ai-msg .ai-md li { margin: .18em 0; }
.ai-msg .ai-md li > :is(ul, ol) { margin: .2em 0 .1em; }
.ai-msg .ai-md li > p { margin: 0 0 .25em; }
.ai-msg .ai-md strong { font-weight: 700; color: var(--bs-emphasis-color); }
.ai-msg .ai-md a { color: #4338ca; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
[data-bs-theme="dark"] .ai-msg .ai-md a { color: #a5b4fc; }
.ai-msg .ai-md code { font-size: .86em; padding: .1em .35em; border-radius: 5px; background: rgba(99,102,241,.1); color: inherit; }
[data-bs-theme="dark"] .ai-msg .ai-md code { background: rgba(165,180,252,.14); color: #e0e7ff; }
.ai-msg .ai-md pre { margin: .3em 0 .7em; padding: .65em .8em; border-radius: 10px; overflow-x: auto; white-space: pre;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); font-size: .84em; line-height: 1.5; }
.ai-msg .ai-md pre code { padding: 0; background: none; font-size: 1em; }
[data-bs-theme="dark"] .ai-msg .ai-md pre { background: rgba(0,0,0,.35); color: #e5e7eb; }
.ai-msg .ai-md blockquote { margin: .3em 0 .7em; padding: .15em 0 .15em .8em; border-left: 3px solid rgba(99,102,241,.55); color: var(--bs-secondary-color); }
.ai-msg .ai-md hr { margin: .8em 0; opacity: .25; }
/* wide AI tables scroll inside the bubble instead of widening the page */
.ai-msg .ai-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: .3em 0 .7em; font-size: .9em; }
.ai-msg .ai-md :is(th, td) { padding: .3em .6em; border: 1px solid var(--bs-border-color); text-align: left; vertical-align: top; }
.ai-msg .ai-md th { background: var(--bs-tertiary-bg); font-weight: 700; }
.ai-msg .ai-md img { max-width: 100%; height: auto; }
/* streaming caret, drawn after the last block so it sits at the end of the text */
.ai-msg .ai-md-live > :is(p, h1, h2, h3, h4, h5, h6, blockquote):last-child::after,
.ai-msg .ai-md-live > :is(ul, ol):last-child > li:last-child::after {
    content: "\258C"; margin-left: 1px; color: #4f46e5; animation: aiCaretBlink 1.05s ease-in-out infinite; }
[data-bs-theme="dark"] .ai-msg .ai-md-live > :is(p, h1, h2, h3, h4, h5, h6, blockquote):last-child::after,
[data-bs-theme="dark"] .ai-msg .ai-md-live > :is(ul, ol):last-child > li:last-child::after { color: #a5b4fc; }
@keyframes aiCaretBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .15; } }
.apg-still .ai-md-live *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ai-md-live *::after { animation: none !important; } }

/* Typing indicator (three pulsing dots) */
.ai-typing { display: inline-flex; gap: .3rem; padding: .3rem 0; }
.ai-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bs-secondary-color);
    animation: ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Composer: the rounded "prompt pill" ──────────────────────────────────── */
.ai-chat-composer {
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
}
.ai-chat-composer .composer-inner { max-width: 860px; margin: 0 auto; }
.ai-chat-composer .composer-pill {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    background: var(--bs-body-bg);
    border: 1.5px solid var(--bs-border-color);
    border-radius: 24px;
    padding: .35rem .45rem .35rem .65rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-chat-composer .composer-pill:focus-within {
    border-color: rgba(var(--bs-primary-rgb), .6);
    box-shadow: 0 2px 14px rgba(var(--bs-primary-rgb), .12);
}
.ai-chat-composer textarea {
    flex: 1 1 auto;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    resize: none;
    padding: .35rem .25rem;
    font-size: .95rem;
    line-height: 1.45;
    min-height: 2.2rem;
    max-height: 9.5rem;
    /* Auto-grow with the content, no JS (Chromium/Edge/Android; others keep a
       fixed comfortable height via min/max). */
    field-sizing: content;
}
.ai-chat-composer .composer-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    transition: transform .1s ease, opacity .15s ease;
}
.ai-chat-composer .composer-send:disabled { opacity: .35; }
.ai-chat-composer .composer-send:not(:disabled):hover { transform: scale(1.06); }
.ai-chat-composer .composer-tool {
    border: 0; background: transparent;
    color: var(--bs-secondary-color);
    width: 34px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.ai-chat-composer .composer-tool:hover { color: var(--bs-primary); }

/* ── Mobile (<768px): drawer sessions, edge-to-edge thread, thumb-friendly ── */
@media (max-width: 767.98px) {
    .ai-chat-shell {
        /* Mobile app chrome: the app's mobile header bar sits above the page. */
        height: calc(100dvh - 118px);
    }
    .ai-chat-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(86vw, 330px);
        z-index: 1046;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
        border-right: 0;
        display: flex !important;   /* always mounted; the transform hides it */
        padding-top: env(safe-area-inset-top);
    }
    .ai-chat-shell.sidebar-open .ai-chat-sidebar { transform: none; }
    .ai-chat-backdrop {
        position: fixed; inset: 0; z-index: 1045;
        background: rgba(0, 0, 0, .45);
    }
    .ai-msg .bubble { max-width: 88%; font-size: .95rem; }
    .ai-chat-thread { padding: .75rem .65rem 1rem; }
    .ai-chat-header { padding: .45rem .55rem; }
    /* Header de-clutter: anything tagged desktop-only steps aside on phones. */
    .ai-chat-header .h-desktop { display: none !important; }
    .ai-chat-composer { padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
    .ai-chat-backdrop { display: none; }
}

/* ── Standalone sessions drawer ────────────────────────────────────────────
   For page-flow chat surfaces that scroll with the document (Council chat):
   a static column on desktop, an off-canvas overlay on phones. The page
   renders it only while open, so no transform choreography is needed. */
.ai-chat-drawer { display: flex; flex-direction: column; background: var(--bs-body-bg); }
@media (max-width: 767.98px) {
    .ai-chat-drawer {
        position: fixed; top: 0; bottom: 0; left: 0;
        width: min(86vw, 330px);
        z-index: 1046;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
        border-right: 0 !important;
        margin: 0 !important;
        padding-top: env(safe-area-inset-top);
    }
}

/* ── Floor chat panel: bottom sheet on phones ─────────────────────────────
   The floating fc-panel works on desktop; on a phone it becomes a proper
   bottom sheet — full width, ~78% height, rounded top, safe-area padding. */
@media (max-width: 767.98px) {
    .floor-chat-panel-fixed {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 78dvh !important;
        max-height: 78dvh !important;
        border-radius: 18px 18px 0 0 !important;
        z-index: 1050 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
}