:root { color-scheme: dark; --bg:#101418; --panel:#171d23; --ink:#dfe6ec; --dim:#8fa1b3; --acc:#4aa3ff; }
/* Normalization: the `hidden` attribute must actually hide. An author `display:flex`
   on #login otherwise overrides the UA `[hidden]{display:none}` and the full-screen
   overlay can never go away (root cause of the night-long "login does nothing"). */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui, sans-serif; }
#app { display:flex; flex-direction:column; height:100dvh; }
header { display:flex; flex-direction:column; gap:8px; padding:10px 14px; background:var(--panel); border-bottom:1px solid #232b34; }
.hdr-row1 { display:flex; align-items:center; justify-content:space-between; }
.hdr-row2 { display:flex; align-items:center; gap:6px; }
.brand { font-weight:700; letter-spacing:.04em; }
#streams { display:flex; gap:6px; flex:1; flex-wrap:wrap; }
.tab { background:none; border:1px solid #2a3440; color:var(--dim); border-radius:6px; padding:4px 10px; cursor:pointer; }
.tab.on { color:var(--ink); border-color:var(--acc); }
#scroll-newest.newmsg { background:var(--acc, #4a9eff); color:#06121f; font-weight:700;
  animation: newmsgpulse 1.6s ease-in-out infinite; }
@keyframes newmsgpulse { 50% { filter: brightness(.72); } }
select.sessionsel { background:#1c2733; color:#e8edf2; border:1px solid #2e3d4d; border-radius:8px;
  padding:6px 10px; font-size:14px; max-width:180px; }
.status { color:var(--dim); font-size:12px; }
.status.offline { color:#ff7b7b; font-weight:700; }
#send:disabled, #attach:disabled { opacity:.35; cursor:not-allowed; }
#input:disabled { opacity:.5; }
/* Long-press selection on iOS PWA: be explicit, defaults can be hostile in standalone mode */
main, .ev, .ev .text, .card, .cardpara, .cardcode, .meta, .obtext, .cardbody, footer textarea {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.text.streaming::after {
  content: "\2589"; margin-left: 1px; opacity: .7;
  animation: pchatblink 1s steps(2, start) infinite;
}
@keyframes pchatblink { to { visibility: hidden; } }
main { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.ev { max-width:78%; }
.ev.mine { align-self:flex-end; }
.meta { font-size:11px; color:var(--dim); margin-bottom:2px; }
.ev .text { background:var(--panel); border:1px solid #232b34; border-radius:8px; padding:8px 10px; white-space:pre-wrap; word-break:break-word; }
.ev.mine .text { background:#1d2b3a; }
.card { background:var(--panel); border:1px solid var(--acc); border-radius:8px; padding:10px; }
.card.settled { border-color:#2f7d4f; }
.card.expired, .card.lapsed { border-color:#5a5240; opacity:.85; }
.card.denied { border-color:#7d3a3a; }
.cardtitle { font-weight:600; margin-bottom:4px; }
.cardbody { display:flex; flex-direction:column; gap:6px; }
.cardpara { white-space:pre-wrap; word-break:break-word; }
.cardcode { margin:0; background:#0d1115; border:1px solid #232b34; border-radius:6px; padding:7px 9px;
            font:13px/1.4 ui-monospace, monospace; white-space:pre-wrap; word-break:break-word; }
.cardfoot { margin-top:8px; }
.chip { display:inline-block; font-size:12px; padding:3px 9px; border-radius:99px; border:1px solid #2a3440; color:var(--dim); }
.chip.ok { color:#8fe3b0; border-color:#2f7d4f; }
.chip.exp { color:#d9c07a; border-color:#5a5240; }
.chip.wait { color:#c8d3de; border-color:var(--acc); }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.action { background:var(--acc); border:none; color:#04121f; border-radius:8px; padding:10px 16px;
          font-weight:600; font-size:15px; cursor:pointer; min-height:40px; }
.action.danger { background:#3a2326; color:#ff9d9d; border:1px solid #7d3a3a; }
.approve { margin-top:8px; background:var(--acc); border:none; color:#04121f; border-radius:6px; padding:8px 14px; font-weight:600; cursor:pointer; }
.telemetry .text { border-style:dashed; color:var(--dim); font-family:ui-monospace, monospace; font-size:13px; }
.mediaimg { max-width:260px; border-radius:8px; display:block; margin-bottom:4px; }
footer { display:flex; gap:8px; padding:10px 14px; background:var(--panel); border-top:1px solid #232b34; }
#input { flex:1; resize:none; background:#0d1115; color:var(--ink); border:1px solid #2a3440; border-radius:8px; padding:9px 11px; }
#send { background:var(--acc); border:none; color:#04121f; border-radius:8px; padding:0 18px; font-weight:600; cursor:pointer; }
#login { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); }
#settings-panel { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,13,16,.72); z-index:50; }
#settings-panel .sheet { background:var(--panel); border:1px solid #232b34; border-radius:12px; padding:20px; min-width:280px; max-width:90vw; }
#settings-panel h3 { margin:0 0 12px; }
#settings-panel .row { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:15px; }
#settings-panel input[type=checkbox] { width:22px; height:22px; accent-color:var(--acc); }
#settings-panel .hint { color:var(--dim); font-size:12px; margin:10px 0 14px; }
#settings-panel .action.ghost, .action.ghost { background:none; border:1px solid #2a3440; color:var(--ink); }
#outbox-panel { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,13,16,.72); z-index:60; }
#outbox-panel .sheet.wide { background:var(--panel); border:1px solid #232b34; border-radius:12px; padding:18px; width:min(640px,92vw); max-height:84dvh; overflow-y:auto; }
.ob { border:1px solid #2a3440; border-radius:8px; padding:10px; margin:10px 0; background:#0d1115; }
.ob.obfail { border-color:#7d3a3a; }
.obtext { white-space:pre-wrap; word-break:break-word; font:13px/1.45 ui-monospace, monospace; margin:6px 0 10px; }
#loginform { display:flex; flex-direction:column; gap:10px; background:var(--panel); padding:24px; border-radius:12px; min-width:280px; }
#loginform input { background:#0d1115; color:var(--ink); border:1px solid #2a3440; border-radius:8px; padding:9px 11px; }
#loginform button { background:var(--acc); border:none; color:#04121f; border-radius:8px; padding:9px; font-weight:600; cursor:pointer; }
#loginerr { color:#ff7b7b; font-size:13px; margin:0; }