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

/* ---------- v4.2 scroll hints (desktop: wrapper is invisible, arrows hidden) ---------- */
.sh-wrap { display: contents; }
.widget-stack { display: contents; } /* v4.3: desktop keeps the archives as two widgets */
.sh-arrow { display: none; }

/* ---------- 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: auto 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; }
  #header-bar { padding: 5px 8px; min-height: 44px; }
  .tk-label { font-size: 0.48rem; padding: 0 6px; }
  #ticker-track, #al-ticker-track { font-size: 0.62rem; }

  /* 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: auto;          /* v4.0: holds only the current question now */
    max-height: 30vh;
    min-height: 0;
    font-size: 0.9rem;
  }
  #transcript:empty { display: none; }

  /* 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) */
  /* v4.4: two rows that scroll sideways together — the first six chips show without swiping */
  #chips { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content;
           gap: 6px; overflow-x: auto; padding-bottom: 4px; justify-content: 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; }
  .widget-stack { display: flex; flex-direction: column; gap: 14px; flex: 0 0 auto; width: 240px; }
  .widget-stack > .widget { max-width: none; }
  .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; }
}


/* ---------- PHONES — LANDSCAPE ---------- */
@media (max-width: 768px) and (orientation: landscape) {

  html, body { overflow: hidden; }

  /* 2-row grid: no hist row — not enough vertical space */
  #app {
    height: 100dvh;
    overflow: hidden;
    grid-template-rows: auto 1fr;
    grid-template-columns: 155px 1fr 155px;
    grid-template-areas:
      "header header header"
      "stripL centre stripR";
    gap: 5px;
    padding: 5px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }

  /* panels: back to vertical column, full height scroll */
  #panel-left, #panel-right {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding: 8px 6px;
    gap: 8px;
    align-items: stretch;
  }
  #panel-left  { grid-area: stripL; }
  #panel-right { grid-area: stripR; }

  .widget { flex: 0 0 auto; min-width: unset; max-width: unset; width: 100%; }

  /* hide recent-transmission history bar — no room in landscape */
  #history { display: none; }

  /* compact centre for short viewport */
  #orb-arch  { width: min(100px, 22vw); }
  #orb, #orb-mirror { background-image: url('../assets/atlas-orb-small.gif'); }
  #transcript { height: auto; max-height: 16vh; min-height: 0; }
  #ticker-track, #al-ticker-track { font-size: 0.55rem; }
  #header-bar { min-height: 38px; padding: 4px 8px; }
  #mic-btn { flex-basis: 42px; height: 42px; }
  #send-btn { flex-basis: 38px; height: 42px; }
  #text-input { height: 42px; }
  #chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; justify-content: flex-start; }
  .chip { flex: 0 0 auto; font-size: 0.6rem; padding: 4px 8px; }
}

/* ---------- 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, #al-ticker-track { font-size: 0.62rem; }
  #orb-arch { width: min(300px, 34vw, 40dvh); }
  .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: auto; max-height: 26vh; }
}

/* ---------- v4.2: sideways-scroll hints on the panel strips (portrait phones) ---------- */
@media (max-width: 768px) and (orientation: portrait) {
  .sh-wrap { display: block; position: relative; min-width: 0; }
  #sh-panel-left  { grid-area: stripL; }
  #sh-panel-right { grid-area: stripR; }
  .sh-wrap > .hud-panel { width: 100%; }
  .sh-wrap > .hud-panel { transition: height .3s ease; } /* v4.3: height follows the visible tiles (scrollhints.js) */

  .sh-arrow {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    position: absolute; top: 1px; bottom: 1px; z-index: 5;
    width: 40px; padding: 0; border: 0; cursor: pointer;
    color: var(--nms-orange); font-family: var(--font-head);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .sh-arrow.show { opacity: 1; pointer-events: auto; }
  .sh-left  { left: 1px;  background: linear-gradient(90deg, rgba(0, 8, 12, .92) 30%, transparent); justify-content: flex-start; padding-left: 6px; }
  .sh-right { right: 1px; background: linear-gradient(270deg, rgba(0, 8, 12, .92) 30%, transparent); justify-content: flex-end; padding-right: 6px; }
  .sh-dia  { font-size: .55rem; color: var(--nms-teal); text-shadow: 0 0 8px rgba(0, 229, 204, .8); }
  .sh-chev { font-size: 1.6rem; line-height: 1; text-shadow: 0 0 10px rgba(255, 140, 0, .7); }
  .sh-right.show .sh-chev, .sh-right.show .sh-dia { animation: sh-nudge 1.6s ease-in-out infinite; }
  .sh-left.show .sh-chev, .sh-left.show .sh-dia { animation: sh-nudge-l 1.6s ease-in-out infinite; }
  @keyframes sh-nudge   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
  @keyframes sh-nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
}