/* Spacious console; detailed settings live in modal side drawers, not the chat. */
:root{--panel:rgba(14,23,38,.88);--line:rgba(105,155,185,.23)}
body{background:#080f1c}.scanline{display:none}#app>header{background:rgba(11,20,35,.96);padding:12px 22px}#app{display:flex;flex-direction:row;height:100dvh;overflow:hidden}
.sidebar{width:282px;flex:none;display:flex;flex-direction:column;gap:4px;padding:14px 12px 12px;background:linear-gradient(180deg,#0a1626,#081120);border-right:1px solid rgba(105,155,185,.23);overflow:hidden;min-height:0}
.sb-brand{display:flex;gap:10px;align-items:center;padding:2px 6px 8px}
.sb-brand .reactor{width:34px;height:34px}
.sb-title{font-size:15px;font-weight:800;letter-spacing:2px;color:#eaf6ff}
.sb-sub{font-size:9px;color:#7d93a8;letter-spacing:1px}
.side-new{width:100%;margin:2px 0 6px;padding:11px;border-radius:12px;border:none;cursor:pointer;font:700 13px/1 inherit;letter-spacing:.4px;color:#02121a;background:linear-gradient(135deg,#22d3ee,#67e8f9);box-shadow:0 4px 18px rgba(34,211,238,.25);transition:.15s}
.side-new:hover{filter:brightness(1.08);transform:translateY(-1px)}
.side-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:#6d8499;padding:8px 8px 4px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;color:#b9cadb;font-size:13.5px;border:1px solid transparent;transition:.14s;position:relative;white-space:nowrap}
.side-item .sic{width:22px;flex:none;text-align:center;font-size:15px}
.side-item:hover{background:rgba(126,148,193,.10);color:#fff}
.side-item.active{background:rgba(0,229,255,.10);color:#7df9ff;border-color:rgba(0,229,255,.32);box-shadow:0 0 14px rgba(0,229,255,.14)}
.side-item .tabbadge{position:static;margin-left:auto;display:none;min-width:17px;padding:1px 5px;border-radius:9px;background:#25d366;color:#04150d;font-size:9.5px;font-weight:800;text-align:center}
.side-item .tabbadge.on{display:inline-block}
.sesslist{flex:1;min-height:36px;overflow-y:auto;margin-top:2px;border-top:1px solid rgba(105,155,185,.18);padding-top:6px}
.sb-foot{border-top:1px solid rgba(105,155,185,.18);padding-top:10px}
.side-user{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 2px}
.su-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.su-info .em{font-size:12px;color:#dcebf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-plan{font-size:8.5px;letter-spacing:2px;color:#e6b34d;font-weight:700}
.sb-footnote{font-size:9.5px;margin-top:6px;padding:0 2px}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0;height:100dvh}
.app-main>header{display:flex;align-items:center;gap:12px;background:rgba(11,20,35,.96);padding:9px 20px;border-bottom:1px solid rgba(105,155,185,.20)}
.viewtitle{font-size:14.5px;font-weight:700;color:#eaf6ff;letter-spacing:.5px}
.side-toggle{display:none;padding:5px 11px;font-size:13px;min-height:34px}
main{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;gap:0}
.chatview{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;padding:14px 18px 0}
.chatview .card.chatwrap{flex:1;min-width:0;margin:0;height:auto;min-height:0}
.panels-stage{flex:1;min-height:0;display:none;overflow-y:auto;padding:20px 24px 24px}
#app.view-panel .panels-stage{display:block}
#app.view-panel .chatview{display:none}
.panels-stage .panelbody{overflow:visible;padding:2px;border:none;background:transparent;border-radius:0}
.chatgreet{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 24px 24px;gap:6px}
.chatview.empty #chatGreet{display:flex}
.chatgreet .cg-orb{font-size:44px;animation:orbfloat 4s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(0,229,255,.5))}
.chatgreet h2{font-size:27px;color:#eaf6ff;margin:2px 0 0;letter-spacing:-.5px}
.chatgreet p{color:#7d93a8;margin:0;font-size:14.5px}
.gpt-input{display:flex;align-items:center;gap:5px;margin:4px 14px 16px;padding:7px 9px;background:#0d1a29;border:1px solid rgba(105,155,185,.35);border-radius:26px;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:.15s}
.gpt-input:focus-within{border-color:rgba(0,229,255,.55);box-shadow:0 0 0 3px rgba(0,229,255,.10),0 8px 30px rgba(0,0,0,.4)}
.gpt-input .chatinput{flex:1;min-width:0;border:none;background:transparent;box-shadow:none;padding:9px 4px;font-size:14.5px;border-radius:0}
.gpt-input .iconbtn{width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:#8fa6ba;flex:none}
.gpt-input .iconbtn:hover{background:rgba(126,148,193,.14);color:#fff}
.gpt-input .iconbtn.listening{background:rgba(255,95,109,.2);color:#ff8090}
.gpt-send{width:38px;height:38px;border-radius:50%;border:none;flex:none;background:linear-gradient(135deg,#22d3ee,#38bdf8);color:#02121a;font-size:17px;font-weight:800;cursor:pointer;display:grid;place-items:center;transition:.15s}
.gpt-send:hover{filter:brightness(1.1)}
.gpt-send:disabled{opacity:.45;cursor:default}
chatwrap{border-radius:20px;background:linear-gradient(150deg,#0b1b29,#0b1424)}.reactorhead{padding:10px 20px;gap:12px}.reactorhead .orbwrap{height:58px;width:58px;flex:0 0 58px}.reactorhead .rsub{line-height:1.6}.chat{padding:25px 24px;gap:20px}.bubble{max-width:88%;padding:15px 19px;line-height:1.75;border-radius:16px}.bubble.ai{background:linear-gradient(135deg,#112638,#111e31);box-shadow:none}.bubble.user{background:#193451}.chiprow{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding:5px 20px 12px}.chip{flex:0 0 auto}#wave:not(.on){display:none}.inputbar{padding:16px 20px 20px}.right{border-radius:18px}.voicebar{padding:8px 16px!important}.voicebar>.row{gap:6px!important;align-items:center}.voicebar>.row button{font-size:11px;min-height:34px;padding:6px 10px}.voicebar>#hfState{font-size:10px}.voicebar #hfStop:disabled,.voicebar #hfInterrupt:disabled{display:none}#hfState{margin-left:auto}.voicebar details>summary{display:none}
.settings-sheet{position:fixed;inset:0 0 0 auto;width:min(500px,100%);max-width:100%;height:100dvh;max-height:100dvh;margin:0;padding:0!important;border:0;border-left:1px solid #334761;border-radius:20px 0 0 20px;background:linear-gradient(155deg,#102336,#15172d);color:#dceafa;box-shadow:-20px 0 80px #0008;font-family:inherit;font-size:13px;overflow-y:auto;overscroll-behavior:contain}.settings-sheet::backdrop{background:#040b17b8;backdrop-filter:blur(5px)}.settings-sheet[open]{animation:sheet-in .2s ease-out}.sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid #334159;background:#102031f5;backdrop-filter:blur(15px)}.sheet-head h2{margin:6px 0 0;color:#e8f5ff;font-size:23px;letter-spacing:-.6px}.sheet-eyebrow{font-size:9px;letter-spacing:3px;color:#84cce7}.settings-sheet #voiceAlarmPanel{margin:0}.settings-sheet #voiceAlarmPanel>div{padding:24px!important;max-height:none!important;overflow:visible!important}.settings-sheet .hint{font-size:12px;line-height:1.8;color:#9fb4ca}.settings-sheet h4{font-size:16px;line-height:1.4;margin:27px 0 12px;color:#b5e7fa}.settings-sheet #adminAlarmTools{border-top:1px solid #334159;margin-top:24px}.settings-sheet [hidden]{display:none!important}.settings-sheet .row{flex-wrap:wrap;gap:9px}.settings-sheet input:not([type=checkbox]),.settings-sheet select,.settings-sheet textarea{box-sizing:border-box;max-width:100%;font-family:inherit;background:#0a1929;color:#e5f0ff;border:1px solid #35516c;border-radius:10px;padding:11px;margin:6px 0;min-height:43px}.settings-sheet label{line-height:1.7}.settings-sheet button{min-height:40px}.settings-sheet #alarmPhone,.settings-sheet #alarmTimezone{width:100%}.settings-sheet .result,.settings-sheet .okbox,.settings-sheet .errbox{font-size:12px;line-height:1.8;overflow-wrap:anywhere}.settings-sheet input[type=checkbox]{accent-color:#2de0e2}.sheet-body{padding:24px}.comms-tabs{display:flex;padding:5px;background:#091626;border:1px solid #334159;border-radius:12px;gap:5px;margin-bottom:22px}.comms-tabs button{flex:1;border-radius:8px;font-size:13px}.comms-tabs button.on{background:#27546a;color:#c9faff;border-color:#50839c}.comms-field{display:block;margin:15px 0;font-size:12px;color:#b7c8dc}.comms-field>input,.comms-field>textarea,.comms-field>select{display:block;width:100%}.comms-field textarea{resize:vertical;min-height:128px;line-height:1.7}.comms-status{padding:12px 14px;border:1px solid #445476;border-radius:10px;background:#0a172755;font-size:12px;line-height:1.75;overflow-wrap:anywhere}.comms-status.good{border-color:#397c72;color:#99e4ce}.comms-status.warn{color:#e1c799}.comms-review{padding:18px;border:1px solid #4e7898;border-radius:14px;margin-top:20px;background:#0e2335}.comms-review pre{font:13px/1.8 system-ui;white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;border:1px solid #2a405a;border-radius:9px;background:#0a1727}.comms-review .to{font-weight:700;font-size:14px;overflow-wrap:anywhere;color:#9eeae8}.comms-row{padding:12px 0;border-bottom:1px solid #334159;font-size:12px;line-height:1.8}.comms-row .btn{float:right;font-size:10px}.settings-sheet details:not(#voiceAlarmPanel){border-top:1px solid #334159;margin-top:24px;padding-top:15px}.settings-sheet details:not(#voiceAlarmPanel)>summary{cursor:pointer;color:#bde7f6;font-size:13px;min-height:35px;display:list-item}.comms-locked{text-align:center;padding:30px 10px}.comms-locked h3{font-size:25px;line-height:1.3}.comms-locked p{line-height:1.8;color:#abc0d7}@keyframes sheet-in{from{transform:translateX(30px);opacity:.5}}
@media(max-width:1100px){
body{height:100dvh;overflow:hidden}
#app{height:100dvh}
.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:99997;width:min(300px,88vw);transform:translateX(-103%);transition:transform .22s ease;box-shadow:24px 0 70px rgba(0,0,0,.6)}
#app.menu-open .sidebar{transform:none}
#app.menu-open .app-main::after{content:'';position:fixed;inset:0;background:rgba(3,8,15,.55);z-index:99996}
.app-main{height:100dvh}
.app-main>header{padding:9px 14px}
main{display:flex}
.chatview{padding:10px 10px 0}
.chat{max-height:none;flex:1;min-height:0}
.gpt-input{margin:4px 8px 12px}
.chatgreet h2{font-size:20px}
.panels-stage{padding:16px 14px 18px}
.side-toggle{display:inline-flex}
.viewtitle{font-size:13px}
.chatgreet h2{font-size:21px}
}
@media(max-width:720px){#app>header{padding:11px 13px;gap:8px}.hdr-right{margin-left:0;flex:1;justify-content:flex-end}.brand .title{font-size:13px;letter-spacing:1.5px}main{padding:10px;gap:16px}.chatwrap{height:calc(100dvh - 125px);min-height:540px}.reactorhead{padding:9px 14px}.reactorhead .orbwrap{height:45px;width:45px;flex-basis:45px}.reactorhead .rtitle{font-size:11px}.reactorhead .rsub{font-size:9px}.chat{padding:18px 14px;gap:16px}.bubble{max-width:94%;font-size:14px;padding:12px 14px}.voicebar{padding:6px 12px!important}.voicebar>.row button{font-size:10px;min-height:33px;padding:5px 8px}#hfState{font-size:9px!important}.inputbar{padding:12px 10px 15px}.chiprow{padding:3px 12px 10px}.chip{font-size:10px;padding:6px 10px}.settings-sheet{border-radius:16px 0 0 16px}.sheet-head{padding:21px}.sheet-body,.settings-sheet #voiceAlarmPanel>div{padding:21px!important}}
@media(prefers-reduced-motion:reduce){.settings-sheet[open]{animation:none}}

.reactorhead .orbcore{width:100%!important;height:100%!important}.reactorhead .orbcore .emblem{width:50%;height:50%}.reactorhead .orbring{width:32px;height:32px;margin:-16px 0 0 -16px}

/* ============ patch18: sidebar scroll, reactions, reply, files, chat game ============ */
.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:rgba(120,170,210,.25) transparent;padding-right:3px;margin-right:-3px}
.sidebar-scroll::-webkit-scrollbar{width:6px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(120,170,210,.22);border-radius:6px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.wa-reps{display:flex;gap:4px;flex-wrap:wrap;margin:3px 2px 0 38px;max-width:88%}
.wa-row.me .wa-reps{margin-left:0;justify-content:flex-end}
.wa-rep{display:inline-flex;align-items:center;gap:3px;background:#111b21;border:1px solid #2a3942;border-radius:11px;padding:1px 7px;font-size:12px;line-height:18px;color:#cfd8dc}
.wa-repbar{display:flex;gap:2px;padding:5px}
.wa-repbar button{border:none;background:transparent;font-size:21px;line-height:1;padding:4px 6px;border-radius:9px;cursor:pointer;transition:transform .12s}
.wa-repbar button:hover{transform:scale(1.25);background:rgba(120,170,210,.12)}
.wa-quote{display:flex;align-items:center;gap:8px;background:#0d1a24;border:1px solid #233645;border-radius:10px 10px 0 0;padding:6px 10px;font-size:12px;color:#8696a0}
.wa-quote span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-quote b{color:#cfd8dc}
.wa-quote button{border:none;background:transparent;color:#8696a0;cursor:pointer;font-size:13px;padding:2px 4px;flex:none}
.wa-quote button:hover{color:#ff8a80}
.wa-file{display:flex;align-items:center;gap:8px;background:#13242f;border:1px solid #2a3942;border-radius:10px;padding:9px 11px;margin:2px 0 6px;text-decoration:none;color:#e9edef;max-width:250px}
.wa-file span{font-size:13px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-file small{color:#8696a0;font-size:10px;flex:none}
.wa-file:hover{background:#182e3a}
.dmgame{padding:0 12px 6px}
.dmgame-offer{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(83,181,235,.08);border:1px dashed rgba(83,181,235,.4);color:#7cc7f2;border-radius:12px;padding:9px;font-size:13px;cursor:pointer;font-family:inherit}
.dmgame-offer:hover{background:rgba(83,181,235,.16)}
.dg-card{background:#0d1a24;border:1px solid #233645;border-radius:14px;padding:12px;margin:4px 2px}
.dg-head{display:flex;align-items:center;gap:10px;font-size:13px;color:#e9edef;margin-bottom:10px;flex-wrap:wrap}
.dg-status{flex:1;font-size:12px;color:#8696a0;min-width:120px}
.dg-board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:240px;margin:0 auto}
.dg-cell{aspect-ratio:1;border-radius:10px;border:1px solid #2a3942;background:#111b21;font-size:24px;font-weight:800;color:#8696a0;cursor:pointer;transition:background .15s;padding:0}
.dg-cell:hover:not(:disabled){background:#16293a}
.dg-cell:disabled{cursor:default}
.dg-cell.x{color:#ff8a80}
.dg-cell.o{color:#83b5eb}
/* ============ patch19: spacious phone layout, bigger touch targets, media ============ */
.wa-video{max-width:100%;max-height:300px;border-radius:10px;display:block;background:#000}
.dg-card{max-width:100%}
@media(max-width:720px){
  /* chat history — roomy, big tap targets */
  .sesslist{padding:10px 12px;gap:9px}
  .sess{padding:13px 13px 12px;border-radius:13px;position:relative}
  .sess .st{font-size:15px;font-weight:600}
  .sess .sp{font-size:13px;margin-top:3px}
  .sess .sm{font-size:12px;margin-top:4px}
  .sess .sdel{min-width:44px;min-height:44px;font-size:17px;border-radius:11px}
  /* settings — spacious + no iOS zoom (16px inputs) */
  .settings-sheet{font-size:14.5px}
  .sheet-head h2{font-size:21px}
  .sheet-body{padding:20px 18px!important}
  .settings-sheet h4,.settings-sheet h3.ptitle{font-size:17px}
  .settings-sheet label,.settings-sheet .lbl{font-size:14.5px}
  .settings-sheet input:not([type=checkbox]),.settings-sheet select,.settings-sheet textarea{font-size:16px!important;padding:13px!important;min-height:50px!important}
  .settings-sheet .hint{font-size:13px;line-height:1.7}
  .settings-sheet button{min-height:46px}
  /* sidebar user card + nav: bigger touch */
  .side-item{min-height:46px;font-size:15px}
  .side-new{min-height:48px;font-size:15px}
  /* AI chat pill: 16px input stops iOS zoom; bigger icon buttons */
  .gpt-input .chatinput{font-size:16px}
  .gpt-input .iconbtn{min-width:46px;min-height:46px;font-size:20px}
  .gpt-input .gpt-send{min-width:46px;min-height:46px;font-size:19px}
  .chat{font-size:15px}
  /* community: roomy compose + big attach/send */
  .wa-compose{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .wa-ico{min-width:46px;min-height:46px;font-size:21px;border-radius:12px}
  .wa-ico.rec{background:#e34d59}
  .wa-send{min-width:48px;min-height:48px;font-size:20px;border-radius:14px}
  .wa-compose .pill{margin:0 8px}
  .wa-compose input{font-size:16px}
  .commmsgs{font-size:15px}
  .wa-bub{font-size:15px;padding:11px 13px}
  .chiprow{padding:6px 10px 12px}
  .chip{font-size:12px;padding:9px 12px}
  .dmgame-offer{min-height:48px;font-size:14px}
  .dg-cell{font-size:28px}
  .wa-file{padding:12px 12px}
  .wa-file span{font-size:14px}
}
/* ============ patch19b: People & Friends — tidy on phones ============ */
.commcompose{width:100%; min-width:0}
.commcompose input{flex:1 1 auto; min-width:0}
.commcompose .btn{flex:none; white-space:nowrap}
.cperson{flex-wrap:wrap; row-gap:8px}
.cperson>div:nth-child(2){flex:1 1 180px; min-width:0}
.cperson>div:nth-child(2) b{font-size:14px}
.cperson .btn{min-height:40px}
.cperson .muted{word-break:break-word}
@media(max-width:720px){
  .cperson{padding:12px}
  .cperson>div:nth-child(2) b{font-size:15px}
  .cperson>div:nth-child(2) .muted{font-size:12px}
  .cperson>div:last-child{width:100%; justify-content:flex-start}
  .cperson>div:last-child .btn{min-height:44px; padding:0 14px}
  .commcompose .btn{min-height:44px}
  .commcompose input{font-size:16px; min-height:44px}
  #commFriends .cperson, #commPeople .cperson{border-radius:12px}
}
/* overflow safety: community panel must never push the page sideways */
.panelbody{min-width:0}
#commBody{min-width:0}
@media(max-width:720px){
  .panels-stage{overflow-x:hidden}
}