/* Talk — web client.
   Plain on purpose: AGENTS.md wants visible surfaces put to the owner as images
   before they are built, so this makes no aesthetic claims. It is legible, it works
   at phone width, and it follows the viewer's theme. Nothing here is a design. */

:root{
  --bg:#f6f6f4; --panel:#fff; --ink:#17171b; --muted:#6a6a75; --line:#e3e3de;
  --accent:#2d4a8a; --accent-ink:#fff;
  --ok:#1a7f4b; --warn:#9a6700; --bad:#b3261e;
  --tile:#dcdcd6;
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  --bg:#111114; --panel:#1b1b20; --ink:#ededf2; --muted:#9b9ba7; --line:#2d2d35;
  --accent:#4f7ad4; --accent-ink:#fff;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --tile:#26262d;
}}
:root[data-theme="dark"]{
  --bg:#111114; --panel:#1b1b20; --ink:#ededf2; --muted:#9b9ba7; --line:#2d2d35;
  --accent:#4f7ad4; --accent-ink:#fff;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --tile:#26262d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
[hidden]{display:none!important}

/* ---------- shared ---------- */
.wrap{max-width:560px;margin:0 auto;padding:32px 16px 48px}
h1{font-size:1.5rem;margin:0 0 6px}
h2{font-size:1.05rem;margin:0 0 10px}
.muted{color:var(--muted)}
.sub{color:var(--muted);font-size:.92rem;margin:0 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px}

button{
  font:inherit;font-weight:600;padding:12px 18px;border-radius:9px;border:1px solid transparent;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
}
button:disabled{opacity:.45;cursor:default}
button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
button.danger{background:var(--bad);color:#fff}
button.block{display:block;width:100%}

input[type=text]{
  font:inherit;width:100%;padding:12px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
}
label{display:block;font-size:.85rem;color:var(--muted);margin:0 0 6px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 auto}
.stack>*+*{margin-top:12px}

.err{color:var(--bad);font-size:.9rem;margin-top:10px}
.linkbox{display:flex;gap:8px;margin-top:10px}
.linkbox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.linkbox button{flex:0 0 auto}

/* ---------- pre-join preview ---------- */
.preview{
  width:100%;aspect-ratio:4/3;max-height:42vh;background:var(--tile);
  border-radius:10px;overflow:hidden;position:relative;margin-bottom:14px;
}
.preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.preview .off{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.9rem;
}

/* ---------- call ---------- */
#call{display:none;flex-direction:column;height:100dvh}
#call.on{display:flex}
.bar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto;
}
.bar .title{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .spacer{flex:1}
.stat{
  font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;display:flex;align-items:center;gap:6px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.dot.good{background:var(--ok)} .dot.fair{background:var(--warn)} .dot.poor{background:var(--bad)}

.stage{flex:1;display:flex;min-height:0}
.grid{
  flex:1;display:grid;gap:8px;padding:8px;min-height:0;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-content:center;
}
.grid.screen-on{grid-template-columns:1fr;grid-template-rows:1fr auto}
.tile{
  position:relative;background:var(--tile);border-radius:10px;overflow:hidden;
  min-height:120px;display:grid;place-items:center;
}
.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile.screen video{object-fit:contain;background:#000}
.tile.self video{transform:scaleX(-1)}
.tile.self.screen video{transform:none}
.tile .name{
  position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;max-width:80%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tile .muted-mark{position:absolute;right:8px;bottom:8px;font-size:.9rem;opacity:.85}
.tile .avatar{
  width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:1.4rem;font-weight:700;
}
.strip{display:flex;gap:8px;overflow-x:auto;padding-top:8px}
.strip .tile{flex:0 0 150px;height:100px;min-height:0}

/* ---------- chat ---------- */
.chat{
  width:300px;flex:0 0 300px;border-left:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;min-height:0;
}
.chat .log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.msg .who{font-size:.75rem;color:var(--muted);margin-bottom:2px}
.msg .body{white-space:pre-wrap;word-break:break-word;font-size:.9rem}
.msg.mine .who{color:var(--accent)}
.chat form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat form input{flex:1}
.chat form button{flex:0 0 auto;padding:10px 14px}

/* ---------- controls ---------- */
.controls{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:12px;border-top:1px solid var(--line);background:var(--panel);flex:0 0 auto;
}
.controls button{min-width:104px;padding:11px 14px;font-size:.9rem}
.controls button.off{background:var(--bad);color:#fff}

@media (max-width:760px){
  .chat{
    position:fixed;inset:auto 0 0 0;height:60dvh;width:auto;flex:none;
    border-left:0;border-top:1px solid var(--line);z-index:20;
  }
  .controls button{min-width:0;flex:1 1 auto}
}