/* =============================================================
   Kucatoo Kimi-Code — Mobile / tablet overrides
   All width-based responsive rules live in this file; style.css
   holds the desktop base styles (plus min-width-only desktop
   rules and prefers-reduced-motion). This file must load AFTER
   style.css so these rules win the cascade without !important.
   To revert all phone/tablet behavior, delete this file and its
   <link> tags in the templates.
   ============================================================= */

/* ---- Tablet: 901–1250px — two columns instead of four ------- */
@media (max-width: 1250px) and (min-width: 901px) {
    .app-main,
    .app-main.files-active,
    .app-main.usage-active {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(260px, auto);
    }
    /* Conversation first: prompt + response on the top row. */
    .app-col-prompt   { order: 1; }
    .app-col-response { order: 2; }
    .app-col-console  { order: 3; }
    .app-col-models   { order: 4; }
}

/* ---- Phone: ≤900px — single column, touch-friendly ---------- */
@media (max-width: 900px) {

    /* The desktop shell is a fixed 100vh grid with internal
       scroll areas; on a phone let the page itself scroll. */
    body {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }
    /* ...but never pan sideways: overflow must scroll inside the
       offending element, not the page. (Comes after the body rule
       above so overflow-x wins while overflow-y stays auto.) */
    html, body { overflow-x: hidden; }

    /* Every grid state collapses to one column — including the
       voice and model-hidden variants, whose higher-specificity
       desktop rules would otherwise survive at phone widths. */
    .app-main,
    .app-main.files-active,
    .app-main.usage-active,
    .app-main.examples-active,
    .app-main.skill-examples-active,
    .app-main.voice-active,
    .app-main.model-hidden,
    .app-main.voice-active.model-hidden {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .header-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .header-section { justify-content: center; }
    .temperature-slider { width: min(280px, 80vw); }

    /* Conversation first: Prompt → Response → Console → Models. */
    .app-col-prompt   { order: 1; }
    .app-col-response { order: 2; }
    .app-col-console  { order: 3; }
    .app-col-models   { order: 4; }

    /* Panels size to content instead of fixed viewport fractions. */
    .app-col, .card {
        min-height: 0;
        height: auto;
    }
    .console-body {
        max-height: 60dvh;
    }

    /* Column headers swipe per-element (intentional scroller)
       instead of panning the whole page. */
    .card-header, .panel-header {
        overflow-x: auto;
        scrollbar-width: none;              /* Firefox */
    }
    .card-header::-webkit-scrollbar,        /* Chrome/Safari */
    .panel-header::-webkit-scrollbar {
        display: none;
    }

    /* Finger-sized touch targets (desktop keeps compact buttons). */
    .btn, .tab, .mode-group .btn-mode {
        min-height: 44px;
    }
    .context-chip-remove,
    .breadcrumb-btn,
    .vc-wake-chip {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
    }
    .tab {
        padding: 0.7rem 0.9rem;
    }

    /* ≥16px inputs stop iOS/Safari from auto-zooming on focus;
       max() keeps them scaling with the user's font zoom. */
    input, textarea, select {
        font-size: max(16px, 1rem);
    }

    /* Tab bar scrolls horizontally instead of wrapping. */
    .console-tabs {
        overflow-x: auto;
        scrollbar-width: none;              /* Firefox */
    }
    .console-tabs::-webkit-scrollbar {      /* Chrome/Safari */
        display: none;
    }
    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Agent-mode button group: swipe to reach instead of clipping. */
    .mode-group { overflow-x: auto; }

    /* Guest form collapses its 5-column grid to one column. */
    .guests-form { grid-template-columns: 1fr; }

    /* Usage tables are JS-generated without a wrapper; make the
       table itself a horizontal scroller. */
    .usage-table {
        display: block;
        overflow-x: auto;
    }

    /* Clamp fixed-px overlays to the viewport. */
    .vc-popover { width: min(340px, calc(100vw - 2rem)); }
    .ws-tree-panel {
        min-width: 0;
        width: min(26rem, 92vw);
    }
    .toast { max-width: min(320px, calc(100vw - 2rem)); }

    /* Dictation panes stack vertically on narrow screens. */
    .dictation-panes {
        flex-direction: column;
    }

    /* Narrow screens: stack the files panes. */
    .files-split { flex-direction: column; }
    .files-list { flex: 0 0 auto; max-height: 35vh; }
}