/* Polln — prototype client.
   Dark, honeycomb-ish, and deliberately plain: this is a proving tool, so nothing here should
   distract from the question it exists to answer — does hex-scoped chat feel right in the street? */
:root{
  --bg:#151208; --panel:#1e1a0d; --edge:#3a3115;
  --amber:#f2b705; --amber-dim:#8a6c14;
  --ink:#f6efdc; --muted:#9a8e6d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
header{
  display:flex; align-items:baseline; gap:12px; padding:12px 16px;
  border-bottom:2px solid var(--edge); background:var(--panel);
}
h1{margin:0; font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber)}
.where{margin-left:auto; text-align:right; font-size:.76rem; line-height:1.3}
#cellLabel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--amber-dim)}
.muted{color:var(--muted); display:block}

main{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:9px}
.msg{max-width:82%; padding:8px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--edge)}
.msg.mine{align-self:flex-end; background:#2a2410; border-color:var(--amber-dim)}
.msg .who{font-size:.68rem; color:var(--amber-dim); font-family:ui-monospace,monospace; letter-spacing:.04em}
.msg .txt{white-space:pre-wrap; overflow-wrap:anywhere}
.msg .when{font-size:.64rem; color:var(--muted); margin-left:8px}
.sys{color:var(--muted); font-size:.84rem; text-align:center; margin:6px 0}
.sys.err{color:#ff8f6b}

form{display:flex; gap:8px; padding:10px 12px; border-top:2px solid var(--edge); background:var(--panel)}
input[type=text]{
  flex:1; min-width:0; padding:11px 13px; font:inherit; color:var(--ink);
  background:#100e06; border:1px solid var(--edge); border-radius:10px;
}
input:focus{outline:2px solid var(--amber-dim); border-color:var(--amber-dim)}
button{
  padding:11px 16px; font:inherit; font-weight:700; cursor:pointer;
  background:var(--amber); color:#241c00; border:0; border-radius:10px;
}
button:disabled{opacity:.35; cursor:default}
footer{
  display:flex; align-items:center; gap:10px; padding:8px 16px 12px;
  font-size:.74rem; color:var(--muted); background:var(--panel); border-top:1px solid var(--edge);
}
.me b{color:var(--amber-dim); font-family:ui-monospace,monospace}
footer button{margin-left:auto; padding:6px 11px; font-size:.72rem; background:transparent;
              color:var(--muted); border:1px solid var(--edge)}
footer button:hover{color:var(--amber); border-color:var(--amber-dim)}