/* JJ Bot on a phone: the desktop page with a top bar, a slide-out menu and
   room for the keyboard. Loaded after app.css. */

.phonebar, .scrim, .pcnote { display: none; }
[hidden] { display: none !important; }

/* pairing */
body.pairing .app { height: 100dvh; align-items: center; justify-content: center; }
.pair { width: 100%; max-width: 420px; padding: 24px 16px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.pair .logo { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
.pair h1 { margin: 0; font-size: 21px; font-weight: 600; }
.pair p { margin: 0; color: var(--muted); }
.pair code { color: var(--accent); font-family: var(--mono); font-size: 13px; }
.pair form { width: 100%; display: flex; gap: 8px; }
.pair .input { flex-grow: 1; min-width: 0; min-height: 48px; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.pair .btn { min-height: 48px; }
.pair .err { width: 100%; }

/* offline */
body.pc-offline .pcnote { display: block; position: fixed; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top));
  z-index: 40; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--amber-line); background: var(--amber-bg);
  color: var(--amber); font-size: 13px; text-align: center; }

@media (max-width: 820px) {
  html, body { font-size: 15px; }
  .app { height: 100dvh; flex-direction: column; flex-wrap: nowrap; overflow: hidden;
    padding-top: env(safe-area-inset-top); }
  .main { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; }

  .phonebar { display: flex; align-items: center; gap: 10px; flex: none; min-height: 52px; padding: 0 8px 0 4px;
    border-bottom: 1px solid var(--line); background: var(--side); }
  .phonebar b { font-weight: 600; font-size: 15px; }
  .phonebar .logo { width: 26px; height: 26px; font-size: 10px; border-radius: 7px; }
  .phonebar #pcdot { margin-right: auto; }
  .menubtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0;
    border-radius: 10px; background: transparent; color: var(--soft); }
  .menubtn:active { background: var(--hover); }

  /* the sidebar slides in from the left */
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: min(84vw, 320px); max-width: none; height: auto;
    border-right: 1px solid var(--line); border-bottom: 0; transform: translateX(-102%); transition: transform .2s ease;
    padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
  body.drawer .side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  body.drawer .scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.5); }
  .nav { min-height: 44px; }

  /* chat */
  .chathead { padding: 8px 12px; gap: 8px; }
  .chathead h1 { flex-basis: 100%; max-width: none; }
  .chathead .slash { display: none; }
  .menu { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 70dvh; }
  .thread { padding: 16px 12px; }
  .thread .inner { gap: 16px; }
  .you { max-width: 88%; }
  .turn { gap: 8px; }
  .steps { font-size: 12px; }
  .steps pre { padding-left: 12px; }
  .ask .row .btn { flex: 1 1 0; min-height: 44px; }
  .composer { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .composer .box { padding: 8px 10px; border-radius: 16px; }
  .composer textarea { font-size: 16px; }   /* 16px stops iPhones zooming in */
  .composer .hint { display: none; }
  .hello { margin-top: 6vh; padding: 0 8px; }

  .input, select.input, textarea.input { font-size: 16px; }
  .page { padding: 18px 12px calc(24px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: 92vw; }
  .runs ol { border-right: 0; border-bottom: 1px solid var(--line); max-height: 30dvh; }
  .runs .doc { max-height: none; padding: 14px; }
  .grid2 { grid-template-columns: 1fr; }
}