:root {
  --bg: #ffffff; --panel: #f4f6f8; --card: #eef1f4; --fg: #1a1f26; --dim: #5b6672;
  --line: #dfe4ea; --acc: #0a7d5a; --acc-fg: #ffffff;
  --red: #c23b3b; --yellow: #b7791f; --green: #0a7d5a;
  --me: #d6efe6; --them: #eef1f4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  --bg: #0f1115; --panel: #12151b; --card: #161a21; --fg: #d7dbe0; --dim: #8b93a0;
  --line: #262b34; --acc: #34d399; --acc-fg: #05221a;
  --red: #f87171; --yellow: #fbbf24; --green: #34d399;
  --me: #1c3b30; --them: #1a1f27;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --panel: #12151b; --card: #161a21; --fg: #d7dbe0; --dim: #8b93a0;
    --line: #262b34; --acc: #34d399; --acc-fg: #05221a;
    --red: #f87171; --yellow: #fbbf24; --green: #34d399;
    --me: #1c3b30; --them: #1a1f27;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.5; }
code { color: var(--acc); word-break: break-all; }
button, select, textarea { font: inherit; color: var(--fg); }
button { background: var(--card); border: 1px solid var(--line); padding: .45rem .8rem;
  border-radius: 6px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--acc); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); }
button.danger { color: var(--red); }
button.ghost { background: none; border: none; font-size: 1.1rem; padding: .3rem .5rem; }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column;
  gap: .5rem; z-index: 50; }
.toast { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  padding: .6rem .9rem; border-radius: 6px; max-width: 22rem; font-size: .85rem;
  box-shadow: 0 6px 24px #0004; transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateX(20px); }

/* ---------- landing ---------- */
#landing { min-height: 100%; display: grid; place-items: center; padding: 1.2rem; position: relative; }
.hero { max-width: 34rem; text-align: center; }
.hero h1 { font-size: 3.4rem; margin: 0 0 .6rem; color: var(--acc); }
.hero p { color: var(--dim); }
.hero .primary { font-size: 1rem; margin: 1rem 0; padding: .6rem 1.4rem; }
.fine { color: var(--dim); font-size: .8rem; }
.theme { position: absolute; top: 1rem; right: 1rem; }

/* ---------- room shell ---------- */
#room { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr 21rem;
  grid-template-areas: "bar bar" "chat panel"; height: 100%; }
#bar { grid-area: bar; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-bottom: 1px solid var(--line); position: relative; }
.grow { flex: 1; }
.pill { font-size: .75rem; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .5rem; }

.light { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.light .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--red); flex: none; }
.light.red .dot { background: var(--red); }
.light.yellow .dot { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.light.green .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.light.red { color: var(--red); }
.light.yellow { color: var(--yellow); }
.light.green { color: var(--green); }

#menu { position: absolute; right: .8rem; top: 3rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column;
  min-width: 10rem; overflow: hidden; z-index: 20; }
#menu button { background: none; border: none; border-radius: 0; text-align: left; padding: .6rem .9rem; }
#menu button:hover { background: var(--panel); }

/* ---------- chat ---------- */
#chat { grid-area: chat; display: flex; flex-direction: column; min-height: 0; padding: .8rem; }
#log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; padding: .3rem 0; }

.msg { max-width: 78%; }
.msg.me { align-self: flex-end; }
.msg.them { align-self: flex-start; }
.msg .who { font-size: .72rem; margin: .3rem 0 .1rem .2rem; }
.msg .body { padding: .45rem .7rem; border-radius: 10px; background: var(--them);
  border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; position: relative; }
.msg.me .body { background: var(--me); }
.msg.grouped .body { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.msg .meta { display: block; font-size: .65rem; color: var(--dim); margin-top: .2rem; }
.msg.read .meta::after { content: " ✓✓"; color: var(--acc); }
.msg.sys { align-self: center; color: var(--dim); font-size: .78rem; background: none; border: none; padding: .1rem; }
.msg .body img { max-width: 100%; border-radius: 6px; display: block; cursor: pointer; }
.msg .body a { color: var(--acc); }
.msg .body.file { min-width: 12rem; }
.msg .body .bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: .4rem; overflow: hidden; }
.msg .body .bar i { display: block; height: 100%; background: var(--acc); width: 0; transition: width .2s; }
.msg.burning .body { animation: fade var(--ttl) linear forwards; }
@keyframes fade { 0%,70% { opacity: 1; } 100% { opacity: .15; } }
.endbox { align-self: center; margin: 1rem 0; }

.typing { font-size: .78rem; color: var(--dim); padding: .2rem .3rem; height: 1.4rem; }

/* waiting / QR */
.waiting { text-align: center; margin: auto; padding: 1.5rem; }
.waiting h2 { margin: 0 0 .3rem; }
.waiting p { color: var(--dim); font-size: .9rem; }
#qr { width: 220px; height: 220px; margin: 1rem auto; }
#qr svg { width: 100%; height: 100%; border-radius: 8px; }
.linkrow { display: flex; gap: .4rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.linkrow code { background: var(--card); padding: .3rem .5rem; border-radius: 6px; font-size: .78rem; }

/* verify gate */
.gate { border: 1px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, var(--bg));
  border-radius: 10px; padding: .8rem; margin: .4rem 0; }
.gate p { margin: 0 0 .5rem; font-size: .88rem; }
.gate-actions { display: flex; align-items: center; gap: .8rem; }
.sas { font-size: 1.7rem; letter-spacing: .25rem; text-align: center; padding: .3rem 0; }

/* composer */
#composer { display: flex; gap: .4rem; align-items: flex-end; padding-top: .5rem; border-top: 1px solid var(--line); }
#attach { cursor: pointer; font-size: 1.2rem; padding: .35rem; user-select: none; }
#text { flex: 1; resize: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .7rem; max-height: 140px; }
#burn { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .35rem; }

/* ---------- panel ---------- */
#panel { grid-area: panel; background: var(--panel); border-left: 1px solid var(--line);
  padding: 1rem; overflow-y: auto; font-size: .8rem; }
#panel h2 { margin: 0 0 .6rem; color: var(--acc); font-size: .95rem; }
#panel h3 { margin: 1rem 0 .3rem; color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
#panel dl { display: grid; grid-template-columns: 5.5rem 1fr; gap: .15rem .5rem; margin: 0; }
#panel dt { color: var(--dim); }
#panel dd { margin: 0; overflow-wrap: anywhere; }
.mono { margin: .15rem 0; }
.lbl { color: var(--dim); display: inline-block; width: 3.2rem; }
.cands { list-style: none; padding: 0; margin: .3rem 0; }
.cands li { padding: .2rem 0; border-top: 1px solid var(--line); color: var(--dim); font-size: .75rem; }
.cands li.relay { color: var(--yellow); }
.ok { color: var(--green); }
.bad { color: var(--yellow); }
#scrim { position: fixed; inset: 0; background: #0007; z-index: 15; }

@media (max-width: 860px) {
  #room { grid-template-columns: 1fr; grid-template-areas: "bar" "chat"; }
  #panel { position: fixed; top: 0; right: 0; height: 100%; width: min(21rem, 88vw);
    transform: translateX(100%); transition: transform .25s; z-index: 16; }
  #panel.show { transform: none; }
}