/* ==========================================================================
   MOBILE / TOUCH RESPONSIVE LAYER — iOS + Android
   Loaded last on every page so it wins the cascade.
   Orchestrates the floating controls, scales typography, reflows grids,
   respects safe-area insets, and prevents iOS focus-zoom.
   ========================================================================== */

/* Never let anything cause sideways scroll on a phone */
html, body { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(212,168,71,0.18); }

@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* ----- Safe-area aware bottom ticker (iOS notch / home indicator) ----- */
  .sw-ticker {
    height: calc(30px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.sw-ticker-on { padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important; }

  /* =====================================================================
     FLOATING CONTROL ORCHESTRATION
     Bottom edge order (lifted above the ticker + safe area):
       · Tweaks trigger  → bottom-LEFT
       · AI assistant    → bottom-RIGHT (primary)
       · Workspace tools → RIGHT, stacked above the AI button
       · Audio mini      → RIGHT, stacked above the AI button
     ===================================================================== */
  :root { --mob-edge: calc(40px + env(safe-area-inset-bottom, 0px)); }

  /* Tweaks trigger (left) */
  .tx-trigger {
    left: 12px !important;
    bottom: var(--mob-edge) !important;
    top: auto !important;
    transform: none !important;
    width: 46px !important; height: 46px !important;
  }
  .tx-trigger:hover { transform: scale(1.06) !important; }
  .tx-trigger .tx-trigger-label { display: none !important; }
  .tx-trigger::after { inset: -6px !important; }

  /* Tweaks panel opens from the left, above the trigger, fits the screen */
  .tx-panel {
    left: 12px !important; right: 12px !important;
    top: auto !important;
    bottom: calc(var(--mob-edge) + 56px) !important;
    width: auto !important; max-width: none !important;
    transform: translateY(14px) !important;
    max-height: calc(100vh - var(--mob-edge) - 90px) !important;
  }
  .tx-panel.open { transform: translateY(0) !important; }
  .tx-panel::after { display: none !important; }

  /* AI assistant toggle (right, primary) */
  #jcr-chat-toggle {
    bottom: var(--mob-edge) !important;
    right: 12px !important;
    padding: 12px !important;
  }
  .jcr-chat-label { display: none !important; }
  #jcr-chat-toggle svg { width: 20px; height: 20px; }

  /* AI chat panel clears the ticker */
  #jcr-chat-panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    bottom: 8px !important; right: 8px !important;
    border-radius: 14px !important;
  }

  /* Workspace tools launcher button (v10) — stack ABOVE the AI button */
  .wst-trigger {
    right: 12px !important;
    bottom: calc(var(--mob-edge) + 60px) !important;
    width: 46px !important; height: 46px !important;
  }
  .wst-launcher {
    right: 12px !important; left: 12px !important;
    width: auto !important; max-width: none !important;
    bottom: calc(var(--mob-edge) + 116px) !important;
    max-height: calc(100dvh - var(--mob-edge) - 150px) !important;
  }
  .wst-grid { grid-template-columns: 1fr 1fr !important; }
  .wst-modal { padding: 12px !important; align-items: flex-end !important; }
  .wst-dialog { max-height: calc(100dvh - 80px) !important; border-radius: 16px 16px 0 0 !important; }

  /* Audio mini-player — stack above the AI button on the right */
  .audio-mini {
    right: 12px !important;
    bottom: calc(var(--mob-edge) + 60px) !important;
  }

  /* Edit/audio/export toolbar (top-right) — keep compact, clear iOS status bar */
  .edit-toolbar {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 10px !important;
  }

  /* Konami / focus exits clear the notch */
  .konami-close, .wst-focus-exit { top: calc(14px + env(safe-area-inset-top,0px)) !important; }
}

/* =====================================================================
   TYPOGRAPHY + LAYOUT REFLOW (phones)
   ===================================================================== */
@media (max-width: 600px) {
  /* Hero / loading copy */
  .sw-intro-headline { font-size: clamp(26px, 8vw, 40px) !important; }
  .sw-intro-sub { font-size: 9px !important; letter-spacing: 0.22em !important; }

  /* Framework status: 2-up, comfortable */
  .fs-cells { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 12px !important; }
  .fs-cell-val { font-size: 19px !important; }
  .fs-cell-val.small { font-size: 13px !important; }

  /* Countdown strip wraps cleanly */
  .countdown-strip { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cd-blocks { width: 100%; justify-content: space-between; }
  .cd-block { flex: 1; min-width: 0; }

  /* Layer spectrum: keep tappable, slightly taller bars */
  .la-spectrum { height: 116px; }
  .la-bars { gap: 3px; }
  .la-bar-num { font-size: 8px !important; }
  .la-detail { grid-template-columns: 1fr !important; gap: 12px !important; }
  .la-detail-num { font-size: 46px !important; min-width: auto !important; }
  .la-detail-meter { align-items: flex-start !important; }

  /* Regime tilt */
  .regime-num { font-size: 44px !important; }
  .regime-head { grid-template-columns: 1fr !important; }
  .regime-readout { text-align: left !important; align-items: flex-start !important; }
  .regime-labels { font-size: 8px !important; gap: 8px; }

  /* Thesis graph: taller aspect so nodes/labels don't crowd */
  .graph-canvas { aspect-ratio: 1 / 1 !important; min-height: 340px; }
  .graph-legend { gap: 10px; }

  /* Time machine */
  .tm-version { font-size: 38px !important; }
  .tm-detail { grid-template-columns: 1fr !important; gap: 10px !important; }
  .tm-meter { align-items: flex-start !important; }
  .tm-stop-label { font-size: 8px !important; }
  .tm-stop-date { display: none; }

  /* Updates feed */
  .update-entry { grid-template-columns: 1fr !important; gap: 6px !important; }
  .digest-cta { grid-template-columns: 1fr !important; gap: 10px !important; }
  .digest-form { width: 100%; flex-wrap: wrap; }
  .digest-input { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; }
  .digest-btn { flex-shrink: 0; }

  /* Catalyst calendar: compact 3-col already handled; tighten */
  .cal-row { gap: 10px !important; }

  /* Heatmap 4-up */
  .heat-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .heat-cell-val { font-size: 19px !important; }

  /* Predictions */
  .pred-head { gap: 10px; }
  .pred-stats { gap: 14px; width: 100%; justify-content: space-between; }
  .pred-row { grid-template-columns: 70px 1fr auto !important; gap: 10px !important; }
  .pred-conf { display: none; }

  /* Section titles breathe a little less */
  .section-title-main { font-size: 22px !important; }
  .whatsnew-title, .compass-title, .cd-title,
  .tm-title, .updates-title, .graph-title, .cal-title, .heat-title, .pred-title { font-size: 19px !important; }

  /* Version cards */
  .version-card { padding: 16px 16px !important; }
  .version-title { font-size: 16px !important; }

  /* Tool dialog result grids stack to 2 */
  .wst-result { grid-template-columns: 1fr 1fr !important; }
  .wst-slider-row { grid-template-columns: 84px 1fr 52px !important; gap: 10px !important; }
}

/* =====================================================================
   iOS: prevent zoom-on-focus by forcing >=16px on form controls
   ===================================================================== */
@media (max-width: 768px) {
  input, textarea, select,
  .digest-input, .wst-input, .wst-select, #jcr-chat-input {
    font-size: 16px !important;
  }
  /* Generous tap targets */
  .la-bar, .tm-stop, .heat-cell, .graph-node,
  .cta-primary, .cta-secondary, .cta-tertiary,
  .lab-vote, .heat-tab, .settings-opt, .tx-opt {
    min-height: 38px;
  }
  .tm-stop-dot { width: 16px !important; height: 16px !important; }
}

/* =====================================================================
   TOUCH DEVICES: surface the "tap for detail" affordance
   (no hover on touch, so make interactables clearly tappable)
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  .la-bar { cursor: pointer; }
  .sw-term { border-bottom-style: solid; }
  /* Disable lift-on-hover transforms that can stick on touch */
  .whatsnew-item:hover, .version-card:hover, .wst-card:hover,
  .heat-cell:hover, .lab-card:hover { transform: none; }
}