/* mobile.css: the phone (README 3.17), loaded after app.css only on the phone's page. One column: the list, or what
   is open (the home page too), with the panels over a conversation. */
html.phone body { grid-template-columns: minmax(0, 1fr) !important; height: 100dvh; }   /* a long title or line must not widen the column past the screen */
html.phone main, html.phone main > section, html.phone .side { min-width: 0; }
html.phone #chat { grid-template-columns: minmax(0, 1fr); }   /* its own column too: the header's title would set it */
html.phone input, html.phone textarea { font-size: 16px; }   /* under 16px Safari zooms the page in when the box is tapped */
html.phone #textsize, html.phone .stagenote { display: none; }   /* the phone's own text size; nothing to drag */
html.phone body:has(main > section:not([hidden])) .side { display: none; }
html.phone body:not(:has(main > section:not([hidden]))) main { display: none; }
html.phone .convo .more, html.phone .folder .more { display: block; }   /* no hover on a phone: the row menu shows */
html.phone .lines { grid-template-columns: 1fr; }
html.phone .homemain { justify-content: flex-start; padding: 12px 16px; }
html.phone .homemain > .phoneback { width: auto; align-self: flex-start; }
html.phone .rail:not([hidden]) { position: fixed; inset: 0; z-index: 5; padding-top: 72px; border: 0; }   /* over the conversation; */
html.phone .chathead { position: relative; z-index: 6; background: #fff; }                                     /* its header stays on top */
html.phone .side { padding: 14px 16px; }
/* iOS bounces only what scrolls: each scroll area is 1px taller inside than it shows, so a short one can be pulled too */
html.phone .convos, html.phone .homemain, html.phone .log, html.phone #intro { position: relative; overscroll-behavior: contain; }
html.phone .convos::after, html.phone .homemain::after, html.phone .log::after, html.phone #intro::after, html.phone .rail::after {
  content: ''; position: absolute; top: 0; left: 0; width: 1px; height: calc(100% + 1px); pointer-events: none; }
html.phone .chathead { gap: 8px; padding: 10px 16px; }
html.phone .log { padding: 16px 16px 8px; }
/* the reply box as the Claude app has it: one rounded box across the foot, Send a round arrow inside it */
html.phone .composer { align-items: flex-end; gap: 4px; margin: 6px 12px 10px; padding: 4px; border: 1px solid var(--rule); border-radius: 26px;
  background: #fff; box-shadow: 0 2px 10px rgba(29, 40, 51, .08); }
html.phone .composer:focus-within { border-color: var(--kp); }
html.phone .composer { position: relative; }
/* ↑ under the header, ↓ over the box, centred; quiet, shown only while a swipe is fast */
.phonejump { position: absolute; left: 50%; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%;
  background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(29, 40, 51, .1);   /* no backdrop blur: Safari kept it blurring the top while hidden */
  color: var(--mute); font-size: 17px; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .15s; }
.phonejump.on { opacity: 1; pointer-events: auto; }
.phonejump.up { top: calc(100% + 10px); }
.phonejump.up::after { content: '↑'; }
.phonejump.down { top: -46px; }
.phonejump.down::after { content: '↓'; }
@media (prefers-reduced-motion: reduce) { .phonejump { transition: none; } }
html.phone .composer .field { border: 0; }
html.phone .composer textarea { min-height: 42px; padding: 10px 12px; }
html.phone .composer textarea:placeholder-shown:not(:focus) { height: 42px !important; resize: none; }   /* empty and not typing: one line */
html.phone .composer > .primary { flex: none; width: 40px; height: 40px; margin: 1px; padding: 0; border-radius: 50%; font-size: 0; }
html.phone .composer > .primary::after { content: '↑'; font-size: 20px; line-height: 40px; }
.phonepic { flex: none; width: 40px; height: 40px; margin: 1px 0; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center;
  font-size: 20px; color: var(--mute); cursor: pointer; }
.phonepic::after { content: '+'; font-size: 24px; }
html.phone .caution { display: none; }
.phoneback { flex: none; min-height: 44px; padding: 0 6px 0 0; border: 0; color: var(--kp); font-size: 17px; }   /* as iOS draws it: blue, no frame, a finger-sized target */
html.phone #chaticon { display: none; }   /* the header's room goes to the title */
html.phone .workrow { height: auto; padding: 2px 20px 0; }   /* the timing line takes room only while it shows */
html.phone .workrow:has(> .working[hidden]) { display: none; }
html.phone .working { gap: 6px; }
html.phone .working > * { min-width: 0; width: auto; }
html.phone #menu > button:first-child, html.phone #menu > button:first-child + hr { display: none; }   /* Open in new window: a phone has one */
html.phone body.offline::before, html.phone body.away::before, html.phone body.waiting::before { content: 'Reconnecting to the computer…'; position: fixed; inset: 0 0 auto 0; z-index: 10;
  padding: 6px 16px; background: #005E9D; color: #fff; font-size: 13px; }
html.phone body.away::before { content: 'The computer is not answering: asleep, or Ned AI closed.'; }
html.phone body.waiting::before { content: 'Allow this phone on your computer: Ned AI there is asking.'; }