:root {
  --bg:#1f1e1d; --panel:#262523; --panel-2:#2f2e2b; --line:#3a3835;
  --text:#f0eee6; --muted:#a3a09a; --accent:#d97757; --accent-soft:rgba(217,119,87,.14);
  --ok:#7fb069; --err:#e0796b; --r:12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; margin:0; overscroll-behavior-y:none; }
body {
  background:var(--bg); color:var(--text);
  font:16px/1.55 ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
.muted { color:var(--muted); font-size:14px; }
.status { font-size:13px; min-height:18px; }
.status.err { color:var(--err); } .status.ok { color:var(--ok); }
.brand { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }

/* ---------- login ---------- */
.login { position:fixed; inset:0; display:grid; place-items:center; padding:24px; }
.login-box { width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; }
.login-box input { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:13px 14px; outline:none; font-size:16px; }
.login-box input:focus { border-color:var(--accent); }
.primary { background:var(--accent); color:#fff; border:0; padding:13px 16px; border-radius:10px; font-weight:600; }
.wide { width:100%; }

/* ---------- shell ---------- */
#app { display:flex; flex-direction:column; height:100dvh; }
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--safe-top) + 10px) 16px 10px; border-bottom:1px solid var(--line); background:var(--panel);
}
.spend { font-size:12.5px; color:var(--muted); }
.view { display:none; flex:1; min-height:0; flex-direction:column; }
.view.active { display:flex; }

.tabs {
  display:flex; border-top:1px solid var(--line); background:var(--panel);
  padding-bottom:var(--safe-bottom);
}
.tab { flex:1; background:transparent; border:0; padding:13px 0; color:var(--muted); font-size:13px; }
.tab.active { color:var(--accent); font-weight:600; }

/* ---------- thread ---------- */
.thread { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 14px 8px; }
.empty { text-align:center; margin-top:14vh; padding:0 12px; }
.empty h1 { font-size:24px; font-weight:500; margin:0 0 8px; letter-spacing:-.01em; }
.empty p { color:var(--muted); font-size:15px; margin:0; }
.msg { margin-bottom:16px; }
.msg .who { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:5px; }
.msg.user .bubble { background:var(--panel-2); border-radius:var(--r); padding:11px 13px; white-space:pre-wrap; }
.msg.assistant .bubble { white-space:pre-wrap; }

.cost-card { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.cc-head { padding:12px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.cc-model { font-weight:600; font-size:15px; }
.cc-price { font-size:19px; font-weight:700; color:var(--accent); white-space:nowrap; }
.cc-body { padding:11px 14px; display:flex; flex-direction:column; gap:7px; font-size:14px; }
.cc-row { display:flex; gap:9px; }
.cc-row b { color:var(--muted); font-weight:500; flex:0 0 66px; font-size:12.5px; }
.cc-foot { padding:11px 14px; border-top:1px solid var(--line); display:flex; gap:8px; }
.cc-foot .primary { flex:1; }
.cc-thumb { width:46px; height:46px; object-fit:cover; border-radius:6px; background:#000; }
.badge { display:inline-block; font-size:10px; padding:1px 6px; border-radius:5px; border:1px solid var(--line); color:var(--muted); }
.badge.adjustable { border-color:var(--accent); color:var(--accent); }

.job { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; background:var(--panel); display:flex; gap:10px; align-items:center; }
.spinner { width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex:0 0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-box { border:1px solid var(--err); border-radius:var(--r); padding:11px 13px; color:var(--err); background:rgba(224,121,107,.07); font-size:14px; }
.result { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel); margin-bottom:9px; }
.result img,.result video { width:100%; display:block; background:#000; }
.result .r-foot { padding:9px 12px; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.result .r-foot a { color:var(--accent); margin-left:auto; text-decoration:none; }

/* ---------- composer ---------- */
.composer { border-top:1px solid var(--line); background:var(--panel); padding:9px 12px 10px; }
.modes { display:inline-flex; background:var(--panel-2); border-radius:9px; padding:2px; margin-bottom:8px; }
.mode { border:0; background:transparent; padding:6px 15px; border-radius:7px; color:var(--muted); font-size:14px; }
.mode.active { background:var(--bg); color:var(--text); font-weight:600; }
.manual { display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
.row { display:flex; gap:7px; flex-wrap:wrap; }
.ctl { background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 10px; outline:none; font-size:14px; flex:1; min-width:0; }
.ctl:focus { border-color:var(--accent); }
.ctl.wide { width:100%; }
#paramBox label { display:flex; flex-direction:column; gap:3px; font-size:10.5px; color:var(--muted); flex:1; min-width:96px; }
#paramBox label.mod select { border-color:var(--accent); }

.input-row { display:flex; gap:8px; align-items:flex-end; }
#input {
  flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:11px 12px; resize:none; outline:none; max-height:130px; font-size:16px;
}
#input:focus { border-color:var(--accent); }
.icon-btn { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); font-size:21px; line-height:1; color:var(--muted); flex:0 0 auto; }
.icon-btn.on { border-color:var(--accent); color:var(--accent); }
.send { width:42px; height:42px; border-radius:12px; border:0; background:var(--accent); color:#fff; font-size:19px; flex:0 0 auto; }
.send:disabled { opacity:.45; }
.hint { font-size:11px; color:var(--muted); margin-top:6px; min-height:14px; }

.attach-bar { margin-bottom:8px; }
.chip { display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:5px 9px 5px 5px; font-size:12px; max-width:100%; }
.chip img { width:34px; height:34px; object-fit:cover; border-radius:6px; background:#000; }
.chip .chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.chip .chip-x { border:0; background:transparent; color:var(--muted); font-size:17px; padding:0 2px; }

/* ---------- library ---------- */
.filters { display:flex; gap:8px; padding:11px 12px; border-bottom:1px solid var(--line); }
.grow { flex:2; }
.grid { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-content:start; }
@media (min-width:620px) { .grid { grid-template-columns:repeat(3,1fr); } }
.tile { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel); display:flex; flex-direction:column; }
.tile .thumb { aspect-ratio:1; width:100%; object-fit:cover; background:#000; display:block; }
.tile .t-body { padding:8px 9px; font-size:12px; line-height:1.4; }
.tile .t-prompt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile .t-meta { color:var(--muted); font-size:10.5px; margin-top:4px; }
.tile .t-acts { display:flex; gap:6px; padding:0 9px 9px; }
.tile .t-acts button, .tile .t-acts a {
  flex:1; font-size:11.5px; padding:6px 4px; text-align:center; text-decoration:none;
  border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text);
}
.tile .t-acts .animate { color:var(--accent); border-color:var(--accent); }

/* `hidden` must win over any author display rule below. Without this, elements
   toggled with the hidden attribute (#login, #manual, #attachBar) stay visible
   because their own .class sets display. */
[hidden] { display: none !important; }

.thumb-wrap { position:relative; display:block; cursor:pointer; }
.thumb-wrap .play {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:30px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65);
  background:linear-gradient(transparent 55%, rgba(0,0,0,.32));
  pointer-events:none;
}
.tile video.thumb { aspect-ratio:1; width:100%; object-fit:cover; background:#000; display:block; }

/* ---------- settings ---------- */
.settings-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 12px 28px; display:flex; flex-direction:column; gap:14px; }
.card { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:15px 15px 16px; }
.card h3 { margin:0 0 6px; font-size:15px; font-weight:600; }
.card .note { color:var(--muted); font-size:12.5px; line-height:1.5; margin:8px 0 10px; }
.fld { display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); margin:10px 0; }
.fld .ctl { width:100%; font-size:16px; padding:11px 12px; }
.row-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; font-size:14px; border-bottom:1px solid var(--line); }
.row-line:last-of-type { border-bottom:0; }
.row-line span { color:var(--muted); font-size:13px; }
.mt { margin-top:10px; }
.card details summary { cursor:pointer; font-size:13px; color:var(--muted); padding:6px 0; }
.log { font-size:12px; color:var(--muted); max-height:190px; overflow-y:auto; }
.log div { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--line); }
.keyrow { display:flex; flex-direction:column; gap:7px; padding:11px 0; border-bottom:1px solid var(--line); }
.keyrow:last-child { border-bottom:0; }
.keyrow .kr-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.keyrow .kr-name { font-weight:600; font-size:14px; text-transform:capitalize; }
.keyrow .kr-state { font-size:11.5px; }
.keyrow .kr-in { display:flex; gap:7px; }
.keyrow .kr-in input { flex:1; min-width:0; }
.keyrow .kr-in button { flex:0 0 auto; padding:9px 12px; font-size:13px; }
.host-sec { margin-top:12px; }
.host-sec h4 { margin:0 0 5px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.host-sec .row-line b { font-size:13px; font-weight:500; }
.ok-dot { color:var(--ok); } .off-dot { color:var(--muted); }
.stop-btn { border:1px solid var(--err); color:var(--err); background:transparent; border-radius:9px; padding:6px 13px; font-size:13px; margin-left:auto; }
.stop-btn:disabled { border-color:var(--line); color:var(--muted); opacity:.55; }
.job { flex-wrap:wrap; }
.job .job-note { flex-basis:100%; font-size:11.5px; color:var(--muted); margin-top:2px; }