/* ── markcutis v2 · MOBILE / iOS-only styles ──────────────────────────────
 *
 * Everything that shapes the PHONE experience lives here, isolated from the
 * desktop layout in markcutis.html's inline <style>. This file is <link>ed
 * AFTER that <style> so its rules win the cascade at phone widths.
 *
 * RULES OF THE ROAD (so mobile can never break desktop again):
 *   1. Every selector here must be phone-scoped — inside `@media (max-width:700px)`
 *      (or the narrower phone queries below) — OR be a base `display:none` that
 *      only *reveals* an element inside those queries. Never add a bare rule here
 *      that paints on desktop.
 *   2. Mobile-ONLY DOM (.md-askbar front door, the chat header's ‹ back) is also React-gated in
 *      app.jsx behind `matchMedia('(max-width:700px)')`, so it isn't even in the
 *      desktop DOM. The base-hide below is belt-and-suspenders.
 *
 * Desktop responsive tweaks (620/860px, tablet grid) intentionally stay in
 * markcutis.html — they are desktop layout, not the phone experience.
 * ------------------------------------------------------------------------- */

/* Workspace slide-in (used by the phone Query Workspace below). */
@keyframes md-ws-in{ from{ transform:translateX(10px); opacity:0; } to{ transform:none; opacity:1; } }

/* Mobile/iOS-only affordances: hidden on desktop by default. The phone media
   query below turns them on — this keeps the desktop layout exactly as it was. */
.md-askbar{ display:none; }

/* iOS native composer focus still toggles `gq-typing` on <html> via
   window.gqSetTyping; nothing styles it any more — the old ＋ Upload / Ask /
   Create-brief row it collapsed was replaced by the chat home's quick-action
   cards, which leave with the hero on the first turn (tokens.css .gq-home). */

/* ── Phone (comfortable density) ─────────────────────────────────── */
@media (max-width:700px){
  .md-header{ padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top)); }
  .md-toptabs{ display:none; }
  .md-live{ display:none !important; }
  .md-main{ padding:16px 14px calc(150px + env(safe-area-inset-bottom)); font-size:14.5px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .md-glass{ gap:16px !important; }
  .md-graphwrap canvas{ height:320px !important; }
  /* Comfortable taps + readable copy */
  .md-prio{ padding:12px 12px !important; }
  .md-prio-act{ padding:7px 0 !important; min-height:34px; font-size:13px !important; }
  .md-glass .btn, .md-glass button[class*="btn"]{ min-height:44px; }
  .md-chatpanel .btn, .md-chatpanel .input, .md-iconbtn, .md-bottomitem{ min-height:44px; }

  .md-bottombar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)); gap:2px;
    background:rgba(10,10,10,0.82); backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%); border-top:1px solid var(--border-strong); }
  .md-bottomitem{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; cursor:pointer; padding:6px 2px; font-family:var(--font-ui);
    min-height:52px; transition:color .15s; }

  .md-cta{ display:none !important; }
  .md-hide-sm{ display:none !important; }
  .md-focus-l{ border-right:none !important; border-bottom:1px solid var(--border); }
  .md-chatrail{ display:none; }
  .md-shell.gq .md-chatrail{ display:flex; flex:1; width:auto; border-left:none; animation:md-ws-in .28s cubic-bezier(.22,.9,.3,1); }
  /* ── Query Workspace: immersive full-screen chat, no dashboard chrome ── */
  .md-shell.gq .md-header{ display:none; }
  .md-shell.gq .md-bottombar{ display:none; }
  .md-shell.gq .md-askbar{ display:none; }
  .md-shell.gq .gq-head{ padding-top:max(12px, env(safe-area-inset-top)); }   /* header carries ‹ back on phone */
  /* Composer sits at the safe-area bottom now that there's no tab bar to clear. */
  .md-shell.gq .md-chatpanel{ flex:1; height:auto; min-height:0; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  /* Persistent "Ask GQ" front door on the dashboard (mobile only). */
  .md-askbar{ display:flex; align-items:center; gap:10px; position:fixed; left:12px; right:12px;
    bottom:calc(80px + env(safe-area-inset-bottom)); z-index:69; padding:12px 14px; min-height:50px; cursor:pointer;
    background:linear-gradient(180deg,rgba(28,14,32,0.92),rgba(16,10,20,0.92)); border:1px solid rgba(217,70,239,0.4);
    border-radius:15px; box-shadow:0 14px 34px -16px rgba(0,0,0,0.9); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .md-askbar{ padding:7px 8px 7px 14px; gap:6px; }
  .md-askbar-ph{ flex:1; min-width:0; text-align:left; color:var(--muted); font-family:var(--font-ui); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:4px; }
  .md-askbar-ib{ width:36px; height:36px; flex:none; border-radius:50%; background:none; border:none; padding:0; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
  .md-askbar-ib:active{ color:var(--ink); background:rgba(255,255,255,0.06); }
  .md-askbar-ib svg{ width:19px; height:19px; }
  .md-askbar-send{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--primary); color:#0a0a0a; display:inline-flex; align-items:center; justify-content:center; margin-left:2px; }
  .md-askbar-send svg{ width:16px; height:16px; }
  .md-shell.gq .md-main{ display:none; }
  .md-popout{ display:none !important; }
  .md-hide-phone{ display:none !important; }
  .md-split{ grid-template-columns:1fr !important; }
  .md-graph-mobilebtn{ display:flex !important; width:calc(100% - 28px); margin:0 14px 14px; justify-content:center; min-height:44px; }
  /* Uploaded-data rows: stack the 5 columns so nothing overlaps on phone */
  .md-upload-row{ display:flex !important; flex-direction:column; align-items:flex-start !important; gap:5px !important; }
  .md-upload-row > *{ text-align:left !important; width:auto !important; }
  .md-chatpanel .btn, .md-chatpanel .input, .md-iconbtn{ min-height:44px; }

  /* ── Sections (the ExpandingWidget cards): one compact header line. The KPI
     strip never wraps (it fades out at the edge) and disappears while the
     section is open — the body carries the numbers. ─────────────────────── */
  .md-widget-head{ padding:13px 14px !important; gap:10px !important; }
  .md-widget-kpis{ flex-wrap:nowrap !important; overflow:hidden; gap:12px !important; margin-left:4px !important;
    -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent); }
  .md-widget-kpis > *{ flex:none; }
  .md-widget.open .md-widget-kpis{ display:none !important; }
  .md-widget-body{ padding:14px 6px 16px !important; }

  /* ── Tasks: the eyebrow + lead stack; the Briefs card is the whole tab ── */
  .md-tasks-intro{ flex-direction:column; align-items:flex-start !important; gap:6px !important; padding:2px 2px 0; }
  .md-tasks-intro > span{ font-size:13.5px !important; line-height:1.5; color:var(--muted); }
  .md-briefs > div:first-child{ padding:14px 14px 14px 16px !important; }
  .md-briefs .card-title{ font-size:19px; letter-spacing:-0.02em; }
  .md-briefs .btn-primary{ min-height:40px; padding:8px 14px !important; font-size:13.5px !important; font-weight:600; }
  .md-briefs-filters{ padding:12px 14px !important; gap:8px !important; flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .md-briefs-filters::-webkit-scrollbar{ display:none; }
  .md-briefs-filters > button{ flex:none; min-height:36px; padding:7px 13px !important; font-size:13px !important; }
  /* Rows: icon · two-line title + meta + tag · ✓ Done / Open · ⋮ (screenshot spec) */
  .gqb-row{ gap:9px; padding:13px 6px 13px 11px; }
  .gqb-row:hover{ background:none; }
  .gqb-ico{ width:30px !important; height:30px !important; border-radius:9px !important; font-size:14px; }
  .gqb-t{ white-space:normal; text-overflow:clip; overflow-wrap:break-word; font-size:14px; font-weight:600; letter-spacing:-0.015em; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .gqb-m{ font-size:12px; margin-top:3px; overflow-wrap:anywhere; }
  .gqb-to{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
  .gqb-tag{ display:inline-flex; margin-top:7px; font-size:11px; font-weight:500; line-height:1.3; color:var(--muted); padding:2px 8px; border-radius:9999px; background:rgba(255,255,255,0.05); border:1px solid var(--border); }
  .gqb-badge{ display:none !important; }
  .gqb-acts{ gap:4px; }
  .gqb-acts .btn{ min-height:36px; padding:6px 9px !important; font-size:12.5px !important; font-weight:600; }
  .gqb-done{ border-color:rgba(17,255,153,0.35) !important; }
  .gqb-more{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:36px; padding:0; background:none; border:none; color:var(--muted); font-size:19px; line-height:1; cursor:pointer; }

  /* ── Drawers (brief / draft) go full-screen with safe-area padding ─────── */
  .md-drawer{ width:100vw !important; border-left:none !important; }
  .md-drawer-head{ padding-top:max(16px, env(safe-area-inset-top)) !important; }
  .md-drawer-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important; }

  /* Vault graph: the pointer hint sat on top of the legend at phone widths */
  .md-graph-hint{ display:none !important; }

  /* ── Form fields: 16px or iOS zooms the whole page into the field on focus
     (the Wiki search "disappearing" off screen). Applies to every field the
     dashboard + sheets render at phone width. ─────────────────────────── */
  .md-main input, .md-main select, .md-main textarea, .input, .gq-search, .gq-input, .gq-select{ font-size:16px !important; }

  /* ── Wiki: a real search field + comfortable page rows ─────────────── */
  .md-wiki-search{ min-height:44px; padding:10px 14px !important; border-radius:12px !important; background:var(--bg-deep) !important; -webkit-appearance:none; appearance:none; }
  .md-wiki-search::-webkit-search-decoration, .md-wiki-search::-webkit-search-cancel-button{ -webkit-appearance:none; }
  .md-wiki-row{ padding:12px 2px !important; min-height:48px; gap:12px !important; }
  .md-wiki-name{ font-size:14.5px !important; }

  /* ── Insights: one-line card headers (subtitles are desktop copy), trend
     tiles two-up so six themes don't become a six-screen scroll ────────── */
  .md-ins-sub{ display:none !important; }
  .md-widget-body .card > div:first-child{ padding-left:14px !important; padding-right:14px !important; }
  .md-trend-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
  .md-trend-tile{ padding:10px !important; }
  .md-trend-tile svg{ height:44px !important; }
  .md-trend-tile > div:first-child > span:first-child{ white-space:normal !important; line-height:1.25; }
}
@media (max-width:400px){ .md-graphwrap canvas{ height:280px !important; } }
/* Landscape phone: shrink graph, keep bottom bar clear */
@media (max-height:480px) and (orientation:landscape){ .md-graphwrap canvas{ height:200px !important; } .md-main{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); } }
