/* TensorCash chat — same "paper editorial" family as the pool dashboard:
   Inter, maroon accent #731D30, quiet chrome, dark twin. */
@import url("https://rsms.me/inter/inter.css");

:root{
  --bg:#F6F3EE; --card:#FFFFFF; --ink:#1E1A16; --muted:#8A8177;
  --acc:#731D30; --acc-ink:#FFF7F2; --line:#E4DDD2;
  --think-bg:#F0EBE2; --user-bg:#731D30; --user-ink:#FFF7F2;
  --err:#A33; --mono:ui-monospace,"JetBrains Mono",monospace;
}
:root[data-theme="dark"]{
  --bg:#171412; --card:#211D1A; --ink:#EDE7DE; --muted:#96897B;
  --acc:#C96A80; --acc-ink:#1E1A16; --line:#37302A;
  --think-bg:#2A2521; --user-bg:#5E1826; --user-ink:#F5E9E4; --err:#E88;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0 auto; max-width:860px; padding:0 16px;
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font:15px/1.55 "Inter",system-ui,sans-serif;
}
header{display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; padding:20px 0 12px; border-bottom:1px solid var(--line)}
h1{margin:0; font-size:22px; letter-spacing:-.02em}
h1 span{color:var(--acc); font-weight:600}
.tag{margin:4px 0 0; color:var(--muted); font-size:13px; max-width:52ch}
.meta{display:flex; gap:8px; align-items:center; white-space:nowrap}
.pill{font:12px var(--mono); border:1px solid var(--line); border-radius:999px;
  padding:3px 10px; color:var(--muted)}
.pill.on{color:var(--acc); border-color:var(--acc)}
#theme{background:none; border:1px solid var(--line); border-radius:999px;
  width:28px; height:28px; cursor:pointer; color:var(--muted)}

main{flex:1; overflow-y:auto; padding:18px 0; scroll-behavior:smooth}
.msg{max-width:78%; margin:0 0 14px; padding:10px 14px; border-radius:14px;
  white-space:pre-wrap; overflow-wrap:break-word}
.msg.user{margin-left:auto; background:var(--user-bg); color:var(--user-ink);
  border-bottom-right-radius:4px}
.msg.bot{background:var(--card); border:1px solid var(--line);
  border-bottom-left-radius:4px}
.msg.bot .by{display:block; margin-top:8px; font:11px var(--mono);
  color:var(--muted)}
.msg.err{background:none; border:1px dashed var(--err); color:var(--err)}
.msg.err button{margin-left:8px}

details.think{margin:0 0 8px; border-left:3px solid var(--line);
  background:var(--think-bg); border-radius:6px; padding:6px 10px}
details.think summary{cursor:pointer; color:var(--muted); font-size:12px;
  user-select:none; list-style:none}
details.think summary::before{content:"◆ "; color:var(--acc)}
details.think .tbody{margin-top:6px; color:var(--muted); font-size:13px;
  white-space:pre-wrap}

.sys{color:var(--muted); font:12px var(--mono); text-align:center; margin:10px 0}
.cursor::after{content:"▍"; color:var(--acc); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

#composer{display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--line)}
#input{flex:1; resize:none; max-height:140px; padding:10px 12px;
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; font:inherit; outline:none}
#input:focus{border-color:var(--acc)}
#send{padding:0 20px; border:none; border-radius:10px; background:var(--acc);
  color:var(--acc-ink); font:600 14px "Inter",sans-serif; cursor:pointer}
#send:disabled{opacity:.45; cursor:default}

footer{padding:6px 0 16px; color:var(--muted); font-size:12px; text-align:center}
footer a{color:var(--muted)}
.linkish{background:none;border:none;color:var(--muted);cursor:pointer;
  text-decoration:underline;font:inherit;padding:0}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center}
/* display:flex above beats the UA's [hidden]{display:none} — restore it,
   or the gate is visible (with no handlers wired) from page load on. */
.modal[hidden]{display:none}
.modal .card{background:var(--card); color:var(--ink); border-radius:14px;
  padding:24px; max-width:340px; text-align:center}
.modal input{width:100%; margin:10px 0; padding:9px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg);
  color:var(--ink); font:inherit}
.modal button{padding:8px 18px; border:none; border-radius:8px;
  background:var(--acc); color:var(--acc-ink); cursor:pointer}

@media (max-width:600px){ .msg{max-width:92%} .tag{display:none} }