/*
    Mobile overrides for the chat surface and the copilot widgets it renders.

    Scoped to `.historian-on-mobile` (set on #app by DeviceCssClassSetter) rather than a width
    media query, so it agrees with the UA-based OnlyOnMobile/OnlyOnDesktop decisions the Razor
    components make. A narrow desktop window is still a desktop.
*/

/* ── App shell ──

    The topbar is a normal 3.5em block in the flow, and Layout's content wrapper below it is
    `height: 100%` — so the document is exactly one topbar taller than the viewport and can be
    scrolled by precisely enough to hide the topbar (and with it the burger menu). On a phone that
    is easy to trigger: any stray scroll, or the browser scrolling a focused chat input into view
    when the keyboard opens, and the navigation is gone with no way to get it back.

    Pinning the app root to the viewport removes the scrollable overflow entirely, so the topbar
    cannot be scrolled away. #app carries `.historian-on-mobile`, so this is mobile-only.
    NOTE: no `transform` here — that would make #app the containing block for every position:fixed
    descendant and reintroduce the very problem this is fixing.
*/
.historian-on-mobile {
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/*
    `overflow: hidden` alone is not enough: it stops the *user* scrolling, but an overflowing element
    can still be scrolled programmatically — and scrolling a focused input into view is exactly what a
    mobile browser does when the keyboard opens. So the overflow has to actually go away.

    Layout stacks a 3.5em topbar above a `height: 100%` content wrapper, which is one topbar too tall.
    Take the topbar back off the wrapper, and give the content area the full (already shortened)
    wrapper height instead of subtracting the topbar a second time. Scoped with :has() to the front
    page, so pages that set BelowTopHeight/BottomBarHeightInEm keep Layout's own arithmetic.
*/
.historian-on-mobile .main-content-area-container:has(.frontpage-layout),
.historian-on-mobile .main-content-area-container:has(.analyst-page),
.historian-on-mobile .main-content-area-container:has(.recent-chats-page) {
    height: calc(100% - 3.5em) !important; /* beats Layout's inline height: 100% */
}

.historian-on-mobile .main-content-area:has(.frontpage-layout),
.historian-on-mobile .main-content-area:has(.analyst-page),
.historian-on-mobile .main-content-area:has(.recent-chats-page) {
    height: 100%;
}

/* ── Chat surface ── */

/* The chat is the page on mobile, so it reads as a surface of its own rather than a hole in the
   grey app background. */
.historian-on-mobile .chat-surface {
    max-height: 100%;
    background: #ffffff;
}

/*
    Empty state. The greeting centres in the space above, and the prompts and the input sit at the
    bottom where a thumb is — otherwise the whole block rides at the top of a 844px-tall screen with
    a dead void beneath it. The DOM order is greeting → input → prompts, so `order` puts the prompts
    back above the input.
*/
.historian-on-mobile .chat-surface-greeting {
    align-items: stretch;
    padding: 0;
}

.historian-on-mobile .chat-surface-greeting-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem 0.75rem 0;
}

.historian-on-mobile .chat-surface-greeting-title {
    font-size: 1.25rem;
    /* auto top+bottom centres the (now subtitle-less) greeting in the free space above the composer. */
    margin-top: auto;
    margin-bottom: auto;
}

.historian-on-mobile .chat-surface-empty .chat-surface-prompts {
    order: 1;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.historian-on-mobile .chat-surface-empty .chat-surface-input-row {
    order: 2;
    margin-bottom: 0.75rem;
}

.historian-on-mobile .chat-surface-empty-footer {
    order: 3;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.historian-on-mobile .chat-surface-message-column {
    padding: 0.75rem;
}

.historian-on-mobile .chat-surface-input-area {
    padding: 0.5rem 0.75rem;
    /* Keep the input clear of the iPhone home indicator. */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* Every suggested prompt must be readable in full. A horizontal scroll strip clips the last one
   mid-word ("Analyze traffic trends" -> "Anal"), so they wrap onto two rows instead — there is room
   for it now that the input is anchored at the bottom rather than floating mid-screen. */
.historian-on-mobile .chat-surface-prompts {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.historian-on-mobile .chat-surface-prompts .analyst-prompt-btn {
    flex: 0 0 auto;
    white-space: nowrap; /* never break a label across lines */
    font-size: 0.8em;
    padding: 0.35rem 0.6rem;
}

/* iOS Safari zooms the page in whenever a focused input has a font-size below 16px. The chat
   input is 0.9em (~14px), which is exactly that trap — pin it to 16px on mobile. */
.historian-on-mobile .analyst-input-field {
    font-size: 16px;
}

/* Touch targets. The mic, trace and send buttons are icon-sized on desktop; the send button gets its
   own rule below. */
.historian-on-mobile .chat-mic-btn,
.historian-on-mobile .chat-surface-trace-btn {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.historian-on-mobile .chat-composer-send {
    min-width: 44px;
    min-height: 44px;
}

/* The floating copilot panel's send button (a different button from the chat surface's). */
.historian-on-mobile .copilot-send-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ── Copilot widgets ── */

/* Bar charts reserve 90px for the label and 55px for the value before the bar gets any width.
   On a phone that leaves the bar almost nothing, so stack the bar under its label and value. */
.historian-on-mobile .copilot-md .cw-bar-row,
.historian-on-mobile .cw-evidence-chart .cw-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "track track";
    gap: 2px 6px;
    margin-bottom: 10px;
}

.historian-on-mobile .copilot-md .cw-bar-label,
.historian-on-mobile .cw-evidence-chart .cw-bar-label {
    grid-area: label;
}

.historian-on-mobile .copilot-md .cw-bar-value,
.historian-on-mobile .cw-evidence-chart .cw-bar-value {
    grid-area: value;
}

.historian-on-mobile .copilot-md .cw-bar-track,
.historian-on-mobile .cw-evidence-chart .cw-bar-track {
    grid-area: track;
}

/* Evidence cards are pinned to exactly 280px, which overflows the content box on a 390px screen. */
.historian-on-mobile .cw-evidence-card-slot {
    min-width: min(280px, 78vw);
    max-width: min(280px, 78vw);
}

/* The before/after compare declares `flex-wrap: wrap`, but `min-width: 0` on the sides means they
   shrink forever and never actually wrap — you get two ~160px columns. Force them to stack, which
   also doubles the width each capture is scaled into (scaleIframe scales by containerWidth/1440). */
.historian-on-mobile .copilot-md .cw-compare-side {
    flex: 1 0 100%;
    min-width: 100%;
}

/* Markdown tables have no scroll container (unlike `pre`), so a wide one blows out the bubble. */
.historian-on-mobile .copilot-md table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* ── Recent chats page ── */

/* The header packs a title and a fixed 220px search box into one space-between row, which
   does not fit 390px. Let it wrap and let the search box flex. */
.historian-on-mobile .recent-chats-header {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Give the search its own row: sharing one with the title squeezes it down to a
   clipped "Search cor…". */
.historian-on-mobile .recent-chats-search {
    flex: 1 0 100%;
    min-width: 0;
}

.historian-on-mobile .recent-chats-search-input {
    flex: 1;
    width: auto;
    min-width: 0;
    /* 16px: below that, iOS zooms the page in on focus and never zooms back out. */
    font-size: 16px;
}

/* ── Mobile front page ── */

.historian-on-mobile .frontpage-layout {
    /* No KPI row and no insights strip on mobile: the chat is the page. The bottom padding reserves
       the height of the viewport-fixed dashboard handle so the chat input is never hidden behind it.
       Keep in step with `.mobile-sheet-handle` in mobile-dashboard-sheet.css. */
    padding: 0 0 calc(2.7rem + env(safe-area-inset-bottom, 0px));
}

.historian-on-mobile .frontpage-middle {
    padding: 0;
}