/* ============================================================
   NEXUS MOBILE LAYER  v5.4.8
   Loaded AFTER style.css so its rules win the cascade.
   Owns: every responsive override for ≤ 700px screens (phones).
   iPad mini portrait (744px) and larger render the desktop layout.
   Desktop-only rules stay in style.css; this file never overrides
   above 700px.
   ============================================================ */

@media (max-width: 700px) {

    /* ---- Shell ---- */
    html, body {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        align-items: stretch;
    }
    .monitor {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        border: none;
    }
    .glass-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 44px 1fr auto;
        grid-template-areas: "header" "main" "aside";
        border-radius: 0;
    }

    /* ---- Top bar ---- */
    .status-bar { padding: 0 12px; gap: 10px; font-size: 0.78rem; }
    .status-title { letter-spacing: 2px; font-size: 0.85rem; }
    .stat-label { font-size: 0.65rem; }
    #mode-indicator { font-size: 0.85rem; }

    /* ---- Terminal — readable text on small screens ---- */
    .terminal-container {
        margin: 6px;
        padding: 14px 14px 0;
        border-radius: 14px;
        border-width: 1px;
    }
    .terminal-output {
        font-size: 1rem;
        padding-right: 4px;
        padding-bottom: 6px;
    }
    .terminal-output p { margin: 9px 0; line-height: 1.55; }
    .ai-msg { padding-left: 12px; line-height: 1.6; }
    .sys-msg { font-size: 0.9rem; }

    .terminal-input-wrapper { padding: 12px 6px; gap: 10px; }
    .prompt { font-size: 1rem; }
    #terminal-input { font-size: 1.05rem; } /* ≥1rem prevents iOS auto-zoom on focus */
    #terminal-input::placeholder { color: rgba(255, 255, 255, 0.35); font-style: italic; }

    /* ---- Sidebar drawer (collapsed strip → tap to expand) ---- */
    .quick-actions {
        max-height: 50vh; max-height: 50dvh;
        border-left: none;
        border-top: 1px solid rgba(0, 255, 255, 0.25);
        padding: 12px 12px 16px;
        gap: 10px;
        background: rgba(0, 0, 0, 0.88);
        transition: max-height 0.25s ease;
    }
    .quick-actions:not(.open) {
        max-height: 60px;
        overflow: hidden;
        position: relative;
    }
    .quick-actions:not(.open)::before {
        content: "▴ TAP TO EXPAND CONTROLS ▴";
        display: flex; align-items: center; justify-content: center;
        position: absolute; inset: 0;
        color: var(--accent);
        font-size: 0.85rem; font-weight: 600; letter-spacing: 3px;
        background: rgba(0, 0, 0, 0.95);
        cursor: pointer; z-index: 5;
    }
    .quick-actions.open { overflow-y: auto; }

    /* ---- Drawer contents — bigger touch targets, readable labels ---- */
    .auth-user-card { padding: 12px 30px 12px 10px; gap: 12px; }
    .auth-avatar, .auth-avatar-initials {
        width: 38px !important; height: 38px !important; font-size: 0.75rem;
    }
    .auth-name { font-size: 0.95rem; }
    .auth-user-card::after { font-size: 0.95rem; right: 14px; }

    .aside-header {
        font-size: 0.78rem; margin: 8px 0 2px;
        letter-spacing: 2.5px; font-weight: 700;
    }
    .action-btn {
        padding: 13px 12px;
        font-size: 0.92rem;
        letter-spacing: 1px;
        min-height: 44px; /* iOS recommended tap target */
    }
    .mode-picker { gap: 8px; }
    .mode-btn {
        padding: 13px 6px;
        font-size: 0.88rem;
        letter-spacing: 1.5px;
        min-height: 44px;
    }

    /* ---- Settings panel — near full-width ---- */
    .a11y-panel {
        right: 10px; left: 10px; bottom: 16px;
        width: auto;
        max-height: 75vh; max-height: 75dvh;
        overflow-y: auto;
        padding: 18px;
    }

    /* ---- Crash overlay sized for phone ---- */
    #nexus-crash-overlay { padding: 12px !important; }
    #nexus-crash-overlay > div { padding: 22px !important; }
    #nexus-diag-code { font-size: 0.95rem !important; letter-spacing: 2px !important; }
}

/* Very small phones (≤ 380px) — extra trim */
@media (max-width: 380px) {
    .status-title { font-size: 0.78rem; letter-spacing: 1.5px; }
    .terminal-container { margin: 4px; padding: 10px 10px 0; }
    .terminal-output { font-size: 0.95rem; }
    .action-btn, .mode-btn { font-size: 0.85rem; }
}