/* ================= ATLAS — mobile.css ================= */

/* ---------- PHONES (portrait) ---------- */
@media (max-width: 768px) {

  /* page scrolls vertically — nothing gets clipped */
  html, body { overflow-y: auto; overflow-x: hidden; }

  #app {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 44px auto auto auto auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "centre"
      "stripL"
      "stripR"
      "hist";
    gap: 8px;
    padding: 8px;
  }

  .brand { font-size: 0.8rem; letter-spacing: 0.15em; white-space: nowrap; }
  .brand-sub { display: none; }
  #clock-utc { display: none; }
  .clock-sep { display: none; }
  #ticker { margin: 0 8px; }
  #ticker-track { font-size: 0.6rem; }

  /* orb smaller, GIF swapped for lighter version */
  #orb-arch { width: min(240px, 68vw); }
  #orb, #orb-mirror { background-image: url('../assets/atlas-orb-small.gif'); }
  #orb-arch #status-line { font-size: 0.6rem; padding: 4px 10px; }

  /* transcript: fixed comfortable height instead of flex-fill */
  #transcript {
    flex: 0 0 auto;
    height: 30vh;
    min-height: 130px;
    font-size: 0.9rem;
  }

  /* chips: one scrollable row — flex-start so the first chip is always reachable
     (centred overflow clips its left edge with no way to scroll to it) */
  #chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; justify-content: flex-start; }
  .chip { flex: 0 0 auto; }

  /* big touch targets for typing and speaking */
  #mic-btn { flex-basis: 56px; height: 56px; }
  #send-btn { flex-basis: 50px; height: 56px; }
  #text-input { height: 56px; font-size: 16px; } /* 16px prevents iOS zoom */
  #input-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

  /* panels collapse into horizontal widget strips */
  #panel-left, #panel-right {
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto; overflow-y: hidden;
    padding: 10px;
    gap: 12px;
  }
  #panel-left  { grid-area: stripL; }
  #panel-right { grid-area: stripR; }

  .widget { flex: 0 0 auto; min-width: 180px; max-width: 240px; }
  .big-clock { font-size: 1.3rem; }
  .lore-fact { font-size: 0.7rem; }
  #gallery-frame { width: 200px; }
  #uplinks { min-width: 200px; }
  .exp-countdown { font-size: 0.9rem; }

  #history { max-height: 130px; min-height: 90px; }
}

/* ---------- LANDSCAPE PHONES / SMALL TABLETS ---------- */
@media (min-width: 769px) and (max-width: 1180px) {
  #app {
    grid-template-columns: 195px 1fr 195px;
    gap: 8px;
    padding: 8px;
  }
  .brand { font-size: 0.9rem; letter-spacing: 0.18em; white-space: nowrap; }
  .brand-sub { display: none; }
  .header-clocks { font-size: 0.7rem; }
  #ticker-track { font-size: 0.62rem; }
  #orb-arch { width: min(300px, 34vw); }
  .hud-panel { padding: 10px; gap: 12px; }
  .widget-label { font-size: 0.56rem; }
  .big-clock { font-size: 1.3rem; }
  .lore-fact { font-size: 0.7rem; }
  .exp-countdown { font-size: 0.9rem; }
  #text-input { height: 52px; font-size: 16px; }
  #mic-btn { flex-basis: 52px; height: 52px; }
  #send-btn { flex-basis: 48px; height: 52px; }
}

/* very short phone screens */
@media (max-width: 768px) and (max-height: 700px) {
  #orb-arch { width: min(190px, 56vw); }
  #transcript { height: 26vh; }
}