/* ═══════════════════════════════════════════════════════════
   CCD — Mobile / Responsive Layer
   Loaded LAST on every page (app shell + marketing + standalone)
   so its rules win specificity ties against page styles.
   Desktop is untouched: everything below is width/pointer gated
   except the overflow guards, which are no-ops on healthy pages.
═══════════════════════════════════════════════════════════ */

/* ── Global overflow guards (all widths) ─────────────────── */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
pre { max-width: 100%; overflow-x: auto; }

/* ── ≤1024px — wide-tablet: collapse leftover 2-col shells ── */
@media (max-width: 1024px) {
    .intel-sources-layout { grid-template-columns: minmax(0, 1fr); }
    /* ccd.css collapses .two-col with plain 1fr — a track that can't
       shrink below its content's min width; re-collapse shrinkable */
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .two-col > * { min-width: 0; }
}

/* ── ≤900px — structural collapses for pages missing them ── */
@media (max-width: 900px) {
    /* AutoDev console: node rail stacks above the feed */
    .autodev-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: calc(100vh - 56px); overflow: visible; }
    .ad-sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: 260px; }

    /* Assets: detail rail below the grid */
    .assets-layout { grid-template-columns: minmax(0, 1fr); }

    /* Terminal: node list becomes a horizontal strip above xterm */
    .term-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .term-sidebar { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden;
                    border-right: none; border-bottom: 1px solid var(--border); }
    .term-sidebar-hdr { display: none; }
    .term-sidebar .node-btn { width: auto; white-space: nowrap; flex-shrink: 0; }

    /* Agent / Agent+ layouts: single column (agent.html adds its
       own drawer behavior in agent-main.css on top of this) */
    .agent-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ── ≤768px — app shell, tables, modals, inputs ──────────── */
@media (max-width: 768px) {
    /* Sidebar drawer: wider touch surface, above everything */
    .sidebar { width: min(82vw, 300px); z-index: 1200; box-shadow: 8px 0 32px rgba(0,0,0,.55); }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(2,4,10,.6); z-index: 1199;
                        opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); }
    body.sb-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.sb-open { overflow: hidden; }
    .nav-item { padding: .7rem .8rem; }   /* ≥44px touch targets */

    /* Topbar: title gets the room, chrome shrinks */
    .topbar { padding: 0 .75rem; gap: .6rem; }
    .topbar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .version-badge { display: none; }

    /* Content density */
    .content { padding: 1rem; }

    /* Floating quick-bar covers content on phones — ⌘K is
       keyboard-only anyway; the sidebar reaches everything */
    .quick-bar { display: none; }

    /* Command palette + modals fit the viewport */
    .cmd-panel { width: calc(100vw - 24px); }
    .modal-box { width: calc(100vw - 20px); max-height: 92vh; }
    .detail-grid, .plan-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .tabs { flex-wrap: wrap; }

    /* Inline fixed-width dialog boxes (agent, agent+, assets, builder) */
    [style*="width:480px"], [style*="width:560px"], [style*="width:600px"],
    [style*="width:420px"], [style*="width:340px"], [style*="width:320px"] {
        max-width: calc(100vw - 24px) !important;
    }

    /* Tables: keep layout, scroll horizontally inside the page */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .data-table, .billing-table, .sm-table, .ss-table, .ub-table,
    .tel-table, .pl-compare, .hist-table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    }
    .data-table th, .data-table td, .billing-table th, .billing-table td,
    .sm-table th, .sm-table td, .ub-table th, .ub-table td,
    .pl-compare th, .pl-compare td { white-space: nowrap; }

    /* iOS zooms the page when a focused field is <16px */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="number"], input[type="url"],
    textarea, select { font-size: 16px !important; }

    /* Scenario library header stacks */
    .sc-header { flex-direction: column; }
    .sc-stats { width: 100%; flex-wrap: wrap; gap: .5rem; }

    /* Broadcast rows + ops feed compress */
    .ops-feed-row { grid-template-columns: auto 1fr auto; }
    .ops-mode, .ops-time { min-width: 0; }
}

/* ── ≤640px — card grids single-column, chrome minimal ───── */
@media (max-width: 640px) {
    .ai-badge { display: none; }
    .sec-topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: .4rem .75rem; row-gap: .25rem; }
    .sc-grid, .plugin-grid, .nodes-grid, .appstore-grid, .eng-grid { grid-template-columns: minmax(0, 1fr); }
    .eng-card { min-width: 0; }
    .mc-stream { height: 300px; }
    .two-col { gap: .85rem; }
    .stats-row { gap: .6rem; }
    .btn-row { gap: .5rem; }
}

/* ── ≤480px — small phones ───────────────────────────────── */
@media (max-width: 480px) {
    .content { padding: .75rem; }
    .company-grid, .asset-grid { grid-template-columns: minmax(0, 1fr); }
    .pl-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-card { padding: .8rem; gap: .65rem; }
    .stat-val { font-size: 1.35rem; }
}

/* ── ≤420px — clamp inline-styled auto-fit grids (billing,
      subscription, add-ons use inline minmax() styles) ────── */
@media (max-width: 420px) {
    [style*="minmax(250px"], [style*="minmax(280px"],
    [style*="minmax(300px"], [style*="minmax(320px"] {
        grid-template-columns: 1fr !important;
    }
    .quick-actions { grid-template-columns: 1fr; }
}