/* Shared mobile layout: native selects and flex children must fit a narrow viewport. */
html, body { width: 100%; min-width: 0; }
body.chat-page {
  height: var(--fl-viewport-height, 100dvh);
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.chat-page > header, .chat-page > form, .chat-page > .fieldbar,
.chat-page > .barline, .chat-page > .att, .chat-page > .hint,
.chat-page > .disclaimer, .chat-page > .contactbar { flex-shrink: 0; }
.chat-page main, .chat-page #chat { min-height: 0; min-width: 0; }
.fieldbar select { min-width: 0; width: 0; }
.toprow textarea, input#q, .fbnote input { min-width: 0; }
.hrow .logo, .hrow .navb, .hrow .navbtns { flex-shrink: 0; }
.hrow .sub, .peer > div { min-width: 0; overflow-wrap: anywhere; }
.msg { min-width: 0; overflow-wrap: anywhere; }
.chat-page .tabs { overflow-x: auto; flex-shrink: 0; }

/* Native-sized controls and an opaque dock, including the iPhone home indicator. */
:root { --card:#fff; --usr:#1a1a1a; color-scheme:light; }
button, a, select { touch-action:manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.navb { min-width:44px; min-height:44px; }
.fieldbar select, .modalbox input, .modalbox textarea, .fbnote input { font-size:16px; min-height:44px; }
.iconbtn, .pbtn, .rbtn { min-height:44px; }
.composer-dock { flex-shrink:0; width:100%; max-width:760px; margin:0 auto; background:var(--card); border-top:1px solid var(--line); }
.composer-dock .fieldbar { border-bottom:0; }
.composer-dock .contactbtn { width:44px; min-width:44px; padding:0; border-radius:12px; }
.composer-dock form { border-top:0; }
.answer-actions { white-space:normal; margin-top:10px; }
.answer-controls { display:flex; flex-wrap:wrap; gap:6px; }
.answer-controls button, .answer-editor button { min-height:44px; padding:8px 10px; font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; }
.answer-controls button[aria-pressed=true] { border-color:var(--gold); color:var(--gold); }
.answer-controls button:disabled { opacity:.65; }
.answer-status { font-size:13px; margin-top:6px; color:var(--muted); }
.answer-editor { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.answer-editor input, .answer-editor textarea { flex-basis:100%; width:100%; min-width:0; font:inherit; font-size:16px; padding:10px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; }
.modal { overflow-y:auto; }
.modalbox { max-height:90dvh; overflow-y:auto; }
@media(max-height:550px) {
  .assistant-page .disclaimer, .assistant-page #contribBar, .assistant-page #installHint { display:none!important; }
  .assistant-page .hrow { padding-top:4px; padding-bottom:4px; }
}
@media(prefers-color-scheme:dark) {
  :root { color-scheme:dark; --gold:#cbaa58; --ink:#ece5d6; --bg:#151310; --card:#211d16; --bot:#211d16; --usr:#453a1c; --muted:#aaa08d; --line:#3d362a; --ok:#9cc86a; --bad:#e08b83; }
  body, .disclaimer { background:var(--bg); color:var(--ink); }
  header, form, .fieldbar, .fieldbar select, .navb, .iconbtn, .peer, .theirs, .mediamsg, .hero, .guess, .modalbox, .modalbtn, .barline, .att, .pbtn, .loadolder, .rvin, .rvb, .capchip, .pending, .demorow, .btn.ghost { background:var(--card); color:var(--ink); }
  input, textarea, select { background:var(--card); color:var(--ink); }
  .chat-page main, .chat-page #chat { background-image:linear-gradient(#151310ed,#151310ed),url('/app/leafbg.png'); }
  .mine, .user { background:var(--usr); color:#f4ecd9; }
  .botmsg, .guess.top, .guess.picked, .caphint, .scouthint, .contrib, #contribBar { background:#2a2413; color:#e6dcc4; }
  .botmsg .ca, .guess.top .nm, .pav { color:#d8b968; }
  .send, .modalbtn.primary, .btn.primary { background:var(--gold); color:#151310; }
}
@media(max-width:480px) {
  .navbtns #navFwd, .navbtns #navRefresh { display:none; }

}
/* WebKit retains focused-input overflow after the visual viewport narrows. */
html { overflow-x:hidden; }
.chat-page { position:relative; }

/* Header icons are single graphical units; account controls never split across lines. */
.hrow { flex-wrap:nowrap; }
.navb { display:inline-flex; align-items:center; justify-content:center; line-height:1; white-space:nowrap; overflow:hidden; }
.navb svg { display:block; flex:none; }
.hrow .sub { display:flex; align-items:center; justify-content:flex-end; gap:5px; white-space:nowrap; overflow-wrap:normal; flex:1; }
.hrow .sub .who { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hrow .logout { flex:none; min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
@media(max-width:600px) {
  .hrow { gap:5px; padding:4px 8px; }
  .hrow .navb { width:32px; height:36px; min-width:32px; min-height:36px; border-radius:9px; }
  .hrow .navb svg { width:22px; height:22px; }
  .hrow .navbtns { gap:0; margin-right:0; }
  .hrow .navbtns #navFwd, .hrow .navbtns #navRefresh { display:none; }
  .hrow .logo { font-size:14px; letter-spacing:.08em; }
  .hrow .sub { flex:1 1 0; gap:3px; margin-left:auto; min-height:36px; font-size:11px; }
  .hrow .sub .who { flex:1 1 0; text-align:right; }
  .hrow .logout { min-height:36px; }
  .hrow #inviteBtn { margin-left:0; }
  .chat-page .tab { flex:1 0 auto; padding-left:12px; padding-right:12px; min-height:44px; display:flex; align-items:center; justify-content:center; }
}
.invite-modal { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.invite-panel { background:var(--card); color:var(--ink); border-radius:18px; padding:20px; max-width:400px; width:100%; max-height:calc(100dvh - 32px); overflow:auto; }
.invite-panel input { min-width:0; }
.invite-panel input[type=checkbox] { flex:none; width:20px; height:20px; }
#invCancel { background:var(--card)!important; color:var(--ink); }
#invSend { min-width:0; overflow-wrap:anywhere; }
.replybar, .att { flex-shrink:0; }
.replybar > div { overflow:hidden; }
#rsnippet, #attname { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att .x, .replybar .x { flex:none; min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; }
.mbox { flex-shrink:0; max-height:160px; overflow-y:auto; }
@media(max-height:550px) {
  .chat-page > .hint { display:none; }
  .invite-modal { align-items:flex-start; }
}
@media(prefers-color-scheme:dark) {
  .mbox, .replybar { background:var(--card); color:var(--ink); }
}