:root{
  --bg:#0b0b0c; --panel:#101113; --muted:#8a8f98; --text:#f5f7fb; --accent:#7a5cff;
  --border:#1a1b1e; --ring:rgba(122,92,255,.6);
  --radius:18px; --shadow:0 6px 24px rgba(0,0,0,.24),0 2px 8px rgba(0,0,0,.28)
}
*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100%; touch-action:manipulation }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none; touch-action:manipulation;
}

.app { height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
html, body { height: 100%; }
body { overflow: hidden; }
header{
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(160%) blur(10px);
  background:color-mix(in lab,var(--bg) 72%,transparent);
  border-bottom:1px solid var(--border)
}
.bar{ display:flex; align-items:center; gap:10px; padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top)) }
.grow{ flex:1 }
.btn{
  appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text);
  padding:10px 12px; border-radius:12px; box-shadow:var(--shadow); cursor:pointer; transition:.2s
}
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent }

.messages-wrap{
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 120px) var(--bg);
  overflow-anchor: none;
}
.messages-wrap.no-smooth { scroll-behavior: auto; }

.messages{ display:flex; flex-direction:column; gap:10px; padding:18px 12px 10px }
.row{ display:flex; gap:10px; align-items:flex-start }
.row.user{ justify-content:flex-end }
.bubble{
  max-width:900px; width:100%; padding:12px 14px; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid var(--border); word-wrap:break-word; white-space:pre-wrap
}
.bubble.assistant{ background:#14161b }
.bubble.user{ background:#1b142e }

/* Reserve space for the streaming reply under the user's message */
.reserve{ min-height:5vh }
@media (max-width:600px){ .reserve{ min-height:5vh } }

.composer{
  position:sticky; bottom:0;
  background:color-mix(in lab,var(--bg) 75%,transparent);
  border-top:1px solid var(--border);
  padding-bottom:calc(12px + env(safe-area-inset-bottom))
}
.composer .row2{ display:flex; gap:10px; padding:10px }
textarea{
  width:100%; min-height:48px; max-height:150px; resize:none; overflow:auto;
  border-radius:14px; padding:12px 14px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); outline:none; box-shadow:inset 0 0 0 1px transparent;
  font-size:16px; /* Prevent iOS zoom */
  -webkit-user-select:text; user-select:text;
}
textarea:focus{ box-shadow:inset 0 0 0 1.5px var(--ring) }
.send{ padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:var(--accent); color:white; font-weight:600 }
.stop{ background:#22252b }

.toast{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:#15161a; color:var(--text); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s
}
.toast.show{ opacity:1 }

.sheet{
  position:fixed; inset:auto 0 0 0; background:#0e0f12; border-top:1px solid var(--border);
  border-radius:16px 16px 0 0; box-shadow:0 -20px 40px rgba(0,0,0,.35);
  transform:translateY(102%); transition:transform .25s ease; z-index:20
}
.sheet.show{ transform:translateY(0) }
.sheet .head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border) }
.sheet .list{ max-height:55svh; overflow:auto }
.thread{
  display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer
}
.thread:hover{ background:#12141a }
.t-title{ font-weight:600 }
.t-sub{ font-size:12px; color:var(--muted) }
.spacer{ flex:1 }
.menu{
  position:fixed;
  background:#15161a;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;
  min-width:180px;
  z-index:50;
}
.menu.hidden{ display:none }
.menu button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  padding:10px 12px;
  text-align:left;
  border-radius:8px;
  cursor:pointer;
}
.menu button:hover{ background:#12141a }
.bubble.editing{ outline:2px solid var(--accent) }

/* --- Debug panel bits --- */
.debug-list .entry{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
.kv{ display:grid; grid-template-columns: auto 1fr; gap:6px 12px; font-size:13px; color:var(--muted) }
.kv .k{ color:var(--muted) }
.kv .v{ color:var(--text) }
.code{ font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; background:#0b0c10; border:1px solid var(--border); border-radius:10px; padding:10px; overflow:auto; }
.btn.row{ display:inline-flex; align-items:center; gap:8px }
.pill{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted) }