/* ==========================================================================
   chataiopensource / Responsive layer
   --------------------------------------------------------------------------
   Loaded AFTER assets/polish.css, so everything here wins on equal
   specificity. Purely additive like the polish layer: no existing selector is
   redefined outside a media or feature query, only extended for a viewport,
   input modality, or height constraint.

   The base sheet already collapses the big grids (.response-grid at 760px,
   .vote-grid at 980px and 560px, .form-row at 560px, drawer nav at 980px) and
   scrolls tables inside .table-wrapper. This file covers what those blocks
   do not:

     1. Viewport floor and sideways-scroll guard
     2. iOS auto-zoom on form fields
     3. Touch target sizes (coarse pointers)
     4. Flex rows that must wrap on narrow screens
     5. Hover affordances on touch (no sticky hover)
     6. Short landscape screens
     7. Dense tables on phones
     8. Small-screen card and hero trims
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Viewport floor and sideways-scroll guard
   The base sheet floors html/body at 320px, which is wider than the smallest
   real phones in use (280px-class foldable cover screens). Below the floor
   the page scrolls sideways, which reads as broken. 280px is the lowest
   width where every grid in the app still has a single-column rule; under
   that nothing sensible fits, and the guard below at least keeps it to a
   straight horizontal scroll instead of scattered overflow.
   -------------------------------------------------------------------------- */
html,
body {
    min-width: 280px;
}

/* clip, not hidden: hidden would create a scroll container and break the
   sticky mobile header and sticky table headers. clip only trims overflow. */
html,
body {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   2. iOS auto-zoom on form fields
   iOS Safari zooms into any focused field whose font-size is under 16px and
   does not zoom back out, which breaks the composer layout on every iPhone.
   The desktop sizes stay untouched; only viewports that are phones in
   practice get the 16px floor.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']):not([type='color']),
    select,
    textarea {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   3. Touch target sizes
   34-36px icon buttons are precise-mouse sizes. On coarse pointers every
   tappable icon grows to at least 40px (44px where the layout allows it)
   without changing the visual icon size, so density on desktop is untouched.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .icon-button {
        width: 44px;
        height: 44px;
    }

    .send-button {
        width: 44px;
        height: 44px;
    }

    .copy-button {
        min-width: 44px;
        min-height: 44px;
    }

    .sidebar-link {
        min-height: 44px;
    }

    .page-tab {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   4. Flex rows that must wrap
   space-between rows without wrapping squeeze their children off-screen once
   the viewport drops under ~340px (counter text plus button, toolbar title
   plus actions). Wrapping keeps every control reachable; the visual order is
   unchanged on wide screens.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .setup-footer,
    .composer-footer,
    .composer-actions,
    .followup-heading,
    .battle-toolbar-actions,
    .model-header-card,
    .share-header {
        flex-wrap: wrap;
    }

    .setup-footer,
    .composer-footer {
        row-gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   5. Hover affordances on touch
   On touch screens :hover sticks after the first tap, so a lift-and-glow
   card can look selected long after the finger is gone. Touch keeps the
   tap feedback (:active still works) but not the persistent hover state.
   -------------------------------------------------------------------------- */
@media (hover: none) {
    :is(.suggestion-card, .stat-card, .info-card, .model-card, .leaderboard-card, .setup-card, .post-card, .admin-card):hover {
        transform: none;
        box-shadow: var(--shadow-sm);
        animation: none;
    }

    :is(.suggestion-card, .stat-card, .info-card, .model-card, .leaderboard-card, .setup-card, .post-card, .admin-card):hover::after {
        opacity: 0;
    }

    .vote-button:not(:disabled):hover {
        transform: none;
        box-shadow: none;
    }

    .vote-button:not(:disabled):hover::after {
        opacity: 0;
    }

    .button:not(:disabled):hover,
    .send-button:not(:disabled):hover {
        transform: none;
    }

    .sidebar-link:hover,
    .nav-links a:hover,
    .header-nav a:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   6. Short landscape screens
   A phone in landscape is ~360-400px tall: the 12vh dialog offset, the hero
   padding and the landing type eat the whole viewport. Trim the chrome so
   the content starts immediately.
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
    .search-dialog {
        margin-top: 4vh;
        max-height: 92vh;
    }

    .page-hero {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .page-hero h1 {
        font-size: 26px;
    }

    .battle-landing {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .battle-landing > h1 {
        font-size: 26px;
    }

    .battle-workspace {
        padding-top: 16px;
    }
}

/* --------------------------------------------------------------------------
   7. Dense tables on phones
   The wrapper scrolls, so a 10-column admin table stays reachable — but at
   base padding it scrolls three screens wide. Tighter cells and slightly
   smaller type roughly halve the swipe distance without hurting legibility.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .data-table,
    .admin-table {
        font-size: 0.8125rem;
    }

    .data-table th,
    .data-table td,
    .admin-table th,
    .admin-table td {
        padding: 8px 10px;
    }
}

/* --------------------------------------------------------------------------
   8. Small-screen card and hero trims
   1.5rem card padding on a 320px screen leaves 272px for content; the trim
   gives it back. Hero type clamps already, but the min stops (32-40px) are
   oversized under 360px, so they step down one notch.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .admin-card,
    .setup-card,
    .model-header-card,
    .leaderboard-card {
        padding: 16px;
    }

    .page-hero h1 {
        font-size: clamp(26px, 7vw, 32px);
    }

    .battle-landing > h1 {
        font-size: clamp(28px, 8vw, 32px);
    }
}

@media (max-width: 360px) {
    .battle-workspace,
    .leaderboard-page,
    .standard-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .vote-button {
        min-height: 52px;
        padding: 10px 12px;
    }

    .composer-actions {
        gap: 8px;
    }
}