/* ============================================================================
   TAIIH AI — Responsive behaviour
   ----------------------------------------------------------------------------
   The mobile experience is designed, not shrunk: the sidebar becomes an
   off-canvas drawer with a backdrop, the header simplifies, suggestions stack,
   the composer stays thumb-reachable and touch targets remain ≥40px.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Large desktop (≥ 1440px) — a little more breathing room
   ------------------------------------------------------------------------ */
@media (min-width: 1440px) {
    :root {
        --taiih-sidebar-width: 320px;
        --taiih-content-max: 920px;
    }
    .pane { padding: 40px 32px 32px; }
}

/* ---------------------------------------------------------------------------
   Tablet & small laptop (≤ 1024px) — narrower sidebar
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    :root { --taiih-sidebar-width: 250px; }

    .welcome { padding-top: 5vh; }
    .welcome__plate { padding: 12px 18px 2px; border-radius: 24px; }
    .welcome__lockup { width: 150px; }
    .engine-chip { max-width: 180px; }
}

/* ---------------------------------------------------------------------------
   Mobile / small tablet (≤ 860px) — off-canvas navigation
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(310px, 86vw);
        z-index: 70;
        transform: translateX(-103%);
        transition: transform var(--taiih-transition-slow);
        box-shadow: var(--taiih-shadow-lg);
        border-right: 1px solid var(--taiih-border-strong);
    }
    .sidebar.is-open { transform: translateX(0); }

    .header { padding: 0 12px; gap: 10px; }

    /* Keep the engine status visible but compact */
    .engine-chip { padding: 6px 10px; max-width: 150px; font-size: 0.7rem; }

    .pane { padding: 22px 16px 16px; }

    .welcome { padding-top: 3vh; }
    .welcome__plate { padding: 10px 16px 2px; border-radius: 22px; }
    .welcome__lockup { width: 132px; }
    .welcome__lead { font-size: 0.95rem; }

    .suggestions { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
    .suggestion { padding: 14px; }

    .composer-wrap { padding: 0 12px 12px; }
    .composer__row { padding: 10px 10px 10px 14px; gap: 8px; }
    .composer__input { font-size: 0.94rem; }

    .message { gap: 10px; }
    .message__avatar { width: 30px; height: 30px; }
    .message__content { padding: 14px; font-size: 0.92rem; }

    .drawer { width: 100%; border-left: 0; }

    .toasts { bottom: 12px; }

    /* iOS zoom guard: never below 16px in inputs */
    .composer__input,
    .select,
    input[type="text"] { font-size: max(16px, 0.94rem); }
}

/* ---------------------------------------------------------------------------
   Small phones (≤ 560px)
   ------------------------------------------------------------------------ */
@media (max-width: 560px) {
    :root { --taiih-header-height: 60px; }

    .header__subtitle { display: none; }
    .engine-chip__text { max-width: 86px; }

    .welcome__lockup { width: 112px; }
    .welcome__eyebrow { font-size: 0.64rem; letter-spacing: 0.14em; }
    .welcome__body { display: none; } /* keeps the first screen focused */

    .message__footer { gap: 4px; }
    .msg-btn span { display: none; }   /* icon-only actions to save width */
    .msg-btn { padding: 6px 8px; }

    .chip { max-width: 100%; }

    .composer__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
    .disclaimer { display: none; }
}

/* ---------------------------------------------------------------------------
   Landscape phones — keep the composer visible
   ------------------------------------------------------------------------ */
@media (max-height: 520px) and (orientation: landscape) {
    .welcome { padding-top: 12px; }
    .welcome__plate { padding: 8px 14px 0; }
    .welcome__lockup { width: 92px; }
    .hairline { margin-top: 14px; }
    .suggestions { margin-top: 18px; }
    .composer__input { max-height: 30vh; }
}

/* ---------------------------------------------------------------------------
   Print — a clean copy of whatever is on screen
   ------------------------------------------------------------------------ */
@media print {
    .sidebar, .header, .composer-wrap, .toasts, .drawer, .drawer-backdrop, .msg-btn { display: none !important; }
    body { overflow: visible; background: #fff; color: #000; }
    .app { display: block; height: auto; }
    .scroll-area { overflow: visible; }
    .message__content { border: 1px solid #ccc; }
}

/* ---------------------------------------------------------------------------
   Reduced motion — honour the user's OS setting
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .cursor { animation: none; opacity: 1; }
    .status-dot--online { animation: none; }
    .typing span { animation: none; opacity: 0.7; }
    .suggestion:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   High-contrast / forced-colours support
   ------------------------------------------------------------------------ */
@media (forced-colors: active) {
    .btn, .icon-btn, .suggestion, .option, .model, .composer, .message__content {
        border: 1px solid CanvasText;
    }
    .status-dot { border: 1px solid CanvasText; }
}