/* THREAD — Shuttle-family dark chat UI, iPhone-first. */
:root {
  --bg:#0b0d10; --panel:#14181d; --panel2:#1b2129; --line:#242b34;
  --text:#e8edf2; --dim:#8b97a3; --accent:#4da3ff; --me:#2e6fdd; --them:#232a33;
  --draft:#173226; --draft-line:#2e6b4f; --warn:#5a3a17;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { background:var(--bg); color:var(--text); font:16px/1.45 -apple-system,system-ui,sans-serif; overscroll-behavior:none; }
#app { display:flex; flex-direction:column; height:100dvh; }

/* top bar — shared by both views */
.top { display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.top h1 { font-size:17px; font-weight:650; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top .ver { color:var(--dim); font-size:11px; }
.back { color:var(--accent); font-size:22px; background:none; border:none; padding:2px 6px; }
.sub { color:var(--dim); font-size:12px; }

/* people list */
.list { flex:1; overflow-y:auto; padding:8px 10px calc(env(safe-area-inset-bottom) + 90px); }
.person { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:13px 14px; margin-bottom:8px; color:var(--text); }
.person .av { width:40px; height:40px; border-radius:50%; background:var(--panel2); display:flex; align-items:center;
  justify-content:center; font-weight:700; color:var(--accent); flex-shrink:0; }
.person .meta { flex:1; min-width:0; }
.person .name { font-weight:600; }
.person .prev { color:var(--dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person .count { color:var(--dim); font-size:12px; }
.empty { color:var(--dim); text-align:center; padding:48px 24px; }

/* floating add-person button */
.fab { position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom) + 18px); width:54px; height:54px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:30px; border:none; box-shadow:0 4px 16px rgba(0,0,0,.5); }

/* thread view */
.thread { flex:1; overflow-y:auto; padding:12px 12px 8px; display:flex; flex-direction:column; gap:2px; }
.msg { max-width:78%; padding:8px 12px; border-radius:16px; margin-top:6px; white-space:pre-wrap; word-break:break-word; }
.msg.me { align-self:flex-end; background:var(--me); border-bottom-right-radius:5px; }
.msg.them { align-self:flex-start; background:var(--them); border-bottom-left-radius:5px; }
.tag { font-size:10px; color:var(--dim); margin-top:2px; }
.msg.me + .tagrow, .tagrow.me { align-self:flex-end; }
.tagrow { display:flex; gap:6px; }
.tslabel { align-self:center; color:var(--dim); font-size:11px; margin-top:10px; }

/* draft reply card */
.draft { align-self:stretch; background:var(--draft); border:1px solid var(--draft-line); border-radius:14px;
  padding:12px; margin-top:14px; }
.draft .dhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.draft .dtitle { font-size:12px; font-weight:700; color:#7fd6a8; letter-spacing:.4px; }
.draft .copy { background:#245a41; color:#d9f5e6; border:none; border-radius:8px; padding:6px 12px; font-size:13px; }
.draft .dbody { white-space:pre-wrap; }
.warnbox { background:var(--warn); border-radius:12px; padding:10px 12px; margin-top:12px; font-size:14px; }

/* capture / input bar */
.bar { background:var(--panel); border-top:1px solid var(--line); padding:10px 12px calc(env(safe-area-inset-bottom) + 10px); }
.row { display:flex; gap:8px; align-items:center; }
.row + .row { margin-top:8px; }
.shotbtn { flex:1; background:var(--accent); color:#fff; border:none; border-radius:12px; padding:13px; font-size:16px; font-weight:650; }
.shotbtn:disabled { opacity:.55; }
select, .txt { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:15px; }
.txt { flex:1; min-width:0; }
.mini { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; }
.mini.on { background:var(--me); border-color:var(--me); }
.busy { color:var(--dim); font-size:13px; text-align:center; padding:6px 0 0; }

/* add-person dialog (plain overlay, no <dialog> quirks on iOS) */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; z-index:20; }
.sheet { background:var(--panel); border-radius:18px 18px 0 0; padding:18px 16px calc(env(safe-area-inset-bottom) + 18px); width:100%; }
.sheet h2 { font-size:16px; margin-bottom:12px; }
.sheet .txt { width:100%; margin-bottom:10px; }
.sheet .actions { display:flex; gap:10px; }
.sheet .actions button { flex:1; padding:12px; border-radius:12px; border:none; font-size:15px; }
.sheet .go { background:var(--accent); color:#fff; font-weight:650; }
.sheet .cancel { background:var(--panel2); color:var(--text); }