/* mobile.css: the phone (README 3.17), loaded after app.css only on the page relay.py serves. One column: the list,
   or what is open. No home page, panels or new conversations on the phone. */
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 .rail, html.phone .railbtn, html.phone #home, html.phone #new, html.phone #newfolder { display: none !important; }
html.phone body:has(main > section:not([hidden]):not(#home)) .side { display: none; }
html.phone body:not(:has(main > section:not([hidden]):not(#home))) main { display: none; }
html.phone .side { padding: 14px 16px; }
html.phone .chathead { gap: 8px; padding: 10px 16px; }
html.phone .log { padding: 16px 16px 24px; }
/* 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 .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 #send { flex: none; width: 40px; height: 40px; margin: 1px; padding: 0; border-radius: 50%; font-size: 0; }
html.phone #send::after { content: '↑'; font-size: 20px; line-height: 40px; }
html.phone .caution { display: none; }
.phoneback { padding: 4px 8px 4px 0; }
html.phone body.offline::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; }