/**
 * Marky Mark — Mobile
 * All responsive overrides: prefers-reduced-motion, tablet (768–1024px), phone (<768px).
 */

/* Sidebar backdrop — hidden by default, overlaid on mobile when sidebar is open */
#sidebar-backdrop {
    display: none;
}

/* Respect prefers-reduced-motion: strip all non-essential transitions/animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --- Tablet (768px – 1024px): side-by-side still works, minor tightening --- */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

    #input-anchor {
        width: 95%;
    }

    .zero-state h1 {
        font-size: 2rem;
    }

    .zero-state p {
        font-size: 1.0rem;
    }

    .message-row {
        padding: 0 16px;
    }
}

/* --- Phone (< 768px): stacked column layout --- */
@media (max-width: 767px) {

    /* Sidebar: overlay (not push) */
    #history-sidebar {
        width: 80vw;
        max-width: 300px;
    }

    body.is-sidebar-open #app-container {
        margin-left: 0;
        width: 100vw;
    }

    /* Backdrop: covers app content behind the open sidebar */
    body.is-sidebar-open #sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1999; /* just below sidebar z-index: 2000 */
        cursor: pointer;
    }

    /* Stack graph on top, chat below */
    #app-container {
        flex-direction: column;
    }

    /* Visual stage: full width, no right border.
       height:0 (not auto or 100%) gives flex-grow a definite zero base to expand from.
       This prevents height:100% resolving to 100vh and fighting flex distribution,
       while also letting children resolve their own flex heights (height:auto does not). */
    #visual-stage {
        width: 100%;
        height: 0;
        min-height: 0;
        border-right: none;
        transition: flex-grow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Suppress flex-grow animation during window resize (prevents glitch when
       flex-direction toggles between row and column at the breakpoint) */
    body.no-flex-transition #visual-stage,
    body.no-flex-transition #chat-stage {
        transition: none !important;
    }

    /* When open: 1:1 height split with chat stage */
    body.is-visual-open #visual-stage {
        flex-grow: 1;
        overflow: visible;
        border-bottom: 1px solid var(--border-color);
    }

    /* Hide the drag resizer — no room for it on mobile */
    #resizer {
        display: none !important;
    }

    /* Chat stage: height:0 gives flex:1 a definite base so its flex children
       (chat-log, input-anchor) can resolve their own flex/overflow heights.
       height:auto leaves the height "indefinite" which breaks overflow-y:auto on
       chat-log, causing it to grow past the viewport and push input off screen. */
    #chat-stage {
        height: 0;
        min-height: 0;
    }

    body.is-visual-open #chat-stage {
        min-width: 0;
        align-items: center;
    }

    /* Conversation wrapper: flex:1 fills chat-stage; height:0 (not auto) makes
       the height definite so #chat-log's flex:1 + overflow-y:auto resolves
       correctly and the chat scrolls instead of pushing input off screen. */
    #conversation-wrapper {
        flex: 1;
        min-height: 0;
        height: 0;
    }

    /* Input area */
    #input-anchor {
        width: 95%;
        /* Home-indicator clearance on iPhone */
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.is-idle #input-anchor {
        margin-bottom: 8vh;
    }

    /* Zero state */
    .zero-state h1 {
        font-size: 1.8rem;
    }

    .zero-state p {
        font-size: 0.95rem;
    }

    /* Prompt cards: card grid wraps to 2 per row; tabs wrap naturally */
    .prompt-card-grid {
        flex-wrap: wrap;
    }

    .prompt-card-grid .prompt-card {
        flex: 1 1 calc(50% - 10px);
        max-width: none;
    }

    /* Message rows: tighter horizontal padding */
    .message-row {
        padding: 0 12px;
    }

    /* 16px minimum prevents iOS auto-zoom on input focus */
    #chat-input {
        font-size: 16px;
    }

    /* Slightly more relaxed line-height for small screens */
    .message {
        line-height: 1.8;
    }

    /* Graph controls: minimum 44×44 tap target */
    #graph-controls button {
        width: 44px;
        height: 44px;
    }

    /* Send button: larger tap target */
    #send-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    #send-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Top controls: slightly tighter positioning */
    .top-left-controls {
        top: 12px;
        left: 12px;
    }

    .top-right-controls {
        top: 12px;
        right: 12px;
    }

    /* Hide the desktop "Hide Graph" toggle button on mobile — the graph handle replaces it.
       Must match the specificity of body.has-visual-state #visual-toggle to win. */
    body.has-visual-state #visual-toggle {
        display: none;
    }

    /* Zoom +/- buttons are for desktop/iPad only — scroll/pinch handles zoom on mobile.
       Must beat #graph-controls button specificity (id + element = 0,1,0,1), so use id + id. */
    #graph-controls #zoom-in-btn,
    #graph-controls #zoom-out-btn {
        display: none;
    }

    /* ── Graph collapse handle ───────────────────────────────────────────────
       Absolute-positioned at the bottom of #visual-stage.
       When the graph is open: appears as a pill at the bottom of the graph → tap to collapse.
       When the graph is collapsed but has-visual-state: the visual-stage is kept at 28px
       so only this handle strip shows → tap to expand.
    ───────────────────────────────────────────────────────────────────────── */
    #graph-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 28px;
        z-index: 200;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #graph-handle::after {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.18);
        transition: background 0.15s;
    }

    #graph-handle:active::after {
        background: rgba(0, 0, 0, 0.35);
    }

    /* When there's a visual but the graph is collapsed: keep a 28px strip so the
       handle remains tappable. */
    body.has-visual-state:not(.is-visual-open) #visual-stage {
        flex: 0 0 28px;
        height: 28px;
        overflow: hidden;
    }

    /* Hide the canvas and all overlays when collapsed so nothing bleeds through.
       visibility:hidden (not display:none) keeps layout intact so JSXGraph doesn't
       need to re-initialise when the graph is expanded again. */
    body.has-visual-state:not(.is-visual-open) #jxgbox,
    body.has-visual-state:not(.is-visual-open) #graph-controls {
        visibility: hidden;
    }

    /* Give the handle a solid background so it's fully opaque even if anything
       behind it somehow still renders. */
    body.has-visual-state:not(.is-visual-open) #graph-handle {
        background: var(--bg-color, #f5f5f7);
    }

    /* JSXGraph board: prevent browser swallowing touch before JSXGraph handles them */
    #jxgbox {
        touch-action: none;
    }

    /* Tighter header on mobile */
    .vt-header {
        padding: 6px 8px 4px;
    }

    .vt-equation {
        font-size: 0.72rem;
    }

    .vt-status {
        font-size: 0.65rem;
    }

    /* Compact cell padding */
    .vt-grid td {
        padding: 0;
        font-size: 0.75rem;
    }

    .vt-grid td.vt-label,
    .vt-grid td.vt-x {
        padding: 4px 6px;
        font-size: 0.75rem;
    }

    /* 16px minimum prevents iOS auto-zoom on input focus */
    .vt-y input {
        font-size: 16px;
        padding: 3px 2px;
        height: 32px;
    }

    /* Compact check button */
    .vt-check-btn {
        margin: 4px auto 0;
        padding: 5px 18px;
        font-size: 0.72rem;
    }
}