/* One stylesheet, no framework. */
:root {
  --bg:#0b0d12; --panel:#141824; --panel2:#1c2130; --line:#252b3d;
  --fg:#e8eaf2; --dim:#8b93a9; --accent:#a78bfa; --ok:#86efac;
  --warn:#fcd34d; --bad:#fca5a5; --r:12px;
}
* { box-sizing:border-box; }

/* The UA rule for [hidden] is display:none, which ANY author display
   declaration outranks -- and every pane here sets one. Without this,
   toggling `hidden` changes the attribute and nothing else. */
[hidden] { display:none !important; }

html,body {
  margin:0; height:100%; background:var(--bg); color:var(--fg);
  font:15px/1.5 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
}
button,input,textarea { font:inherit; color:inherit; }

.gate { max-width:380px; margin:18vh auto 0; padding:0 20px; display:flex; flex-direction:column; gap:12px; }
.gate h1 { margin:0 0 8px; font-size:26px; letter-spacing:-.02em; }
.gate label { color:var(--dim); font-size:13px; }
.gate input,.new-row input,.composer textarea {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; outline:none;
}
.gate input:focus,.new-row input:focus,.composer textarea:focus { border-color:var(--accent); }
.gate button,.new-row button,.composer button {
  background:var(--accent); color:#0b0d12; border:0; border-radius:var(--r); padding:12px 16px; font-weight:600;
}
.error { color:var(--bad); min-height:1.2em; margin:0; font-size:13px; }

.app { display:flex; flex-direction:column; height:100%; }
.bar {
  display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2;
}
.title { font-weight:650; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-btn { background:none; border:0; color:var(--fg); font-size:20px; padding:0 4px; }
.link { font-size:11px; color:var(--bad); transition:color .2s; }
.link[data-state="open"] { color:var(--ok); }
.link[data-state="connecting"] { color:var(--warn); }

.pane { flex:1; min-height:0; display:flex; flex-direction:column; }
.rows { list-style:none; margin:0; padding:8px; overflow-y:auto; flex:1; }
.rows li {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; margin-bottom:8px; display:grid; grid-template-columns:1fr auto; gap:4px 10px; cursor:pointer;
}
.rows li:active { background:var(--panel2); }
.rows .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rows .meta { grid-column:1/-1; color:var(--dim); font-size:12px; }
.chip { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--panel2); color:var(--dim); white-space:nowrap; align-self:start; }
.chip[data-state="running"] { background:#1e2140; color:var(--accent); }
.chip[data-state="queued"] { background:#2a2618; color:var(--warn); }
.chip[data-state="awaiting_input"] { background:#14251a; color:var(--ok); }
.chip[data-state="failed"] { background:#2c1a20; color:var(--bad); }

.new-row { display:flex; gap:8px; padding:8px; border-top:1px solid var(--line); }
.new-row input { flex:1; }
.footer { margin:0; padding:0 12px calc(env(safe-area-inset-bottom) + 10px); color:var(--dim); font-size:11px; }

.stream { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.msg { border-radius:var(--r); padding:10px 12px; max-width:88%; white-space:pre-wrap; word-wrap:break-word; }
.msg.you { background:#1e2140; align-self:flex-end; }
.msg.lyra { background:var(--panel); align-self:flex-start; }
.msg.note { align-self:center; color:var(--dim); font-size:12px; background:none; text-align:center; }
.msg.warn { align-self:center; color:var(--warn); font-size:12px; background:none; }
.msg.bad { background:#2c1a20; align-self:center; color:var(--bad); font-size:12.5px; }
/* A turn still streaming gets a caret, so "thinking" and "done" differ. */
.msg.lyra.live::after { content:"\258b"; color:var(--accent); animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }

.actions { display:flex; gap:8px; padding:0 12px 8px; flex-wrap:wrap; }
.actions button { background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:12px; }
.composer { display:flex; gap:8px; padding:8px 8px calc(env(safe-area-inset-bottom) + 8px); border-top:1px solid var(--line); }
.composer textarea { flex:1; resize:none; max-height:40vh; }

@media (min-width:820px) {
  .app { display:grid; grid-template-columns:340px 1fr; grid-template-rows:auto 1fr; }
  .bar { grid-column:1/-1; }
  #list-pane { border-right:1px solid var(--line); }
  #chat-pane[hidden] { display:flex !important; }
  #back { display:none !important; }
}