/* ============================================================================
   claude-runner — "warm clay" theme
   Espresso-ink atmosphere · terracotta accent · Fraunces display + Hanken body
   ========================================================================== */
:root {
  /* surfaces (warm dark) */
  --bg:        #17110e;
  --bg-soft:   #1e1713;
  --surface:   #241b16;
  --surface-2: #2d221b;
  --surface-3: #392a21;
  --line:      rgba(246, 222, 202, 0.085);
  --line-2:    rgba(246, 222, 202, 0.17);

  /* ink */
  --text:      #f6ece2;
  --text-dim:  #d4c2b3;
  --muted:     #a4907f;

  /* accent + signals */
  --clay:      #e2855f;
  --clay-hi:   #f09c79;
  --clay-deep: #c4673f;
  --clay-soft: rgba(226, 133, 95, 0.14);
  --sage:      #aec08d;
  --gold:      #ecc587;
  --lav:       #c4b1e3;
  --red:       #f0917f;

  --radius: 16px;
  --radius-sm: 11px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: 0 1px 0 rgba(255,240,230,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.7);
  --shadow-lg: 0 30px 70px -30px rgba(0,0,0,0.8);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 560px at 50% -8%, rgba(226,133,95,0.13), transparent 62%),
    radial-gradient(760px 520px at 92% 4%, rgba(226,133,95,0.06), transparent 60%),
    radial-gradient(600px 600px at 0% 100%, rgba(150,120,200,0.05), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* film grain for atmosphere */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
code { font-family: var(--mono); font-size: 0.9em; }
.muted { color: var(--muted); }
.is-hidden { display: none !important; }
::selection { background: var(--clay-soft); }

#app-shell {
  position: relative; z-index: 2;
  display: grid; grid-template-rows: auto 1fr auto;
  height: 100vh; height: 100dvh;
}

/* ── Topbar ───────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(13px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 13px max(20px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(33,25,20,0.86), rgba(23,17,14,0.66));
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.menu-btn {
  display: none; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
  font-size: 16px; line-height: 1; padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg, var(--clay-hi), var(--clay-deep));
  color: #2a140c; font-weight: 700; font-size: 15px; flex: none;
  box-shadow: 0 6px 16px -6px rgba(226,133,95,0.7), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.brand-name { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { color: var(--muted); font-size: 13px; }
.brand-sub code { color: var(--text-dim); }

.health-pill {
  font-family: var(--mono); font-size: 11.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted); background: rgba(0,0,0,0.2);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.health-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.health-pill.online { color: var(--sage); border-color: rgba(174,192,141,0.3); }
.health-pill.online::before { background: var(--sage); box-shadow: 0 0 10px 1px rgba(174,192,141,0.7); }
.health-pill.offline { color: var(--red); border-color: rgba(240,145,127,0.35); }
.health-pill.offline::before { background: var(--red); }

/* ── Body layout ──────────────────────────────────────── */
.body { display: grid; grid-template-columns: 296px 1fr; min-height: 0; }

.sidebar {
  border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
.tabs { display: flex; gap: 4px; padding: 14px 14px 0; }
.tab {
  flex: 1; background: transparent; border: 0; color: var(--muted); font: inherit; font-weight: 500;
  padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.tab:hover { color: var(--text); background: var(--surface); }
.tab.is-active { color: var(--text); background: var(--surface-2); box-shadow: var(--shadow); }
.sidebar-section { padding: 14px; }

.run-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--text-dim); font-size: 13.5px; padding: 12px 4px; }

.run-item {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: transform .12s, border-color .15s, background .15s;
}
.run-item:hover { border-color: var(--line-2); transform: translateY(-1px); }
.run-item.is-active { border-color: var(--clay); background: linear-gradient(180deg, var(--clay-soft), var(--surface)); }
.run-item .badge { align-self: flex-start; }
.ri-prompt { font-size: 13.5px; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ri-sub { font-size: 11px; font-family: var(--mono); color: var(--muted); }

/* ── Badges ───────────────────────────────────────────── */
.badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.badge-running, .badge-interrupted { color: var(--gold); background: rgba(236,197,135,0.12); border-color: rgba(236,197,135,0.28); }
.badge-completed { color: var(--sage); background: rgba(174,192,141,0.12); border-color: rgba(174,192,141,0.3); }
.badge-error { color: var(--red); background: rgba(240,145,127,0.12); border-color: rgba(240,145,127,0.3); }
.badge-killed { color: var(--muted); background: var(--surface-2); border-color: var(--line-2); }
.badge-managed { color: var(--clay); background: var(--clay-soft); border-color: rgba(226,133,95,0.3); text-transform: none; letter-spacing: 0; }

/* ── Session cards ────────────────────────────────────── */
.sessions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sessions-caption { font-size: 12px; color: var(--text-dim); margin: 12px 2px 0; line-height: 1.45; }
.session-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Claude usage panel (rate-limit windows) */
.usage-list { display: flex; flex-direction: column; gap: 17px; margin-top: 16px; }
.usage-plan { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.usage-row { display: flex; flex-direction: column; gap: 6px; }
.usage-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.usage-label { font-size: 13px; color: var(--text-dim); }
.usage-pct { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-weight: 500; }
.usage-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.32); overflow: hidden; }
.usage-fill { height: 100%; border-radius: 999px; min-width: 2px; transition: width .4s ease;
  background: linear-gradient(90deg, var(--clay-deep), var(--clay-hi)); }
.usage-fill.warm { background: linear-gradient(90deg, var(--clay), var(--gold)); }
.usage-fill.hot { background: linear-gradient(90deg, var(--clay-deep), var(--red)); }
.usage-reset { font-size: 11.5px; }

/* activity log (owner-only) — timeline + live "active now" signal */
.log-live { margin-top: 14px; font-size: 12.5px; color: var(--muted); padding: 8px 11px; border-radius: 9px;
  background: rgba(0,0,0,0.2); border: 1px solid var(--line); }
.log-live.is-active { color: var(--sage); border-color: rgba(174,192,141,0.35); background: rgba(174,192,141,0.1); font-weight: 500; }
.log-list { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.log-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); }
.log-src { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.log-src.owner { color: var(--clay); background: var(--clay-soft); }
.log-src.guest { color: var(--gold); background: rgba(236,197,135,0.13); }
.log-body { min-width: 0; flex: 1; }
.log-action { font-size: 13px; color: var(--text-dim); word-break: break-word; }
.log-detail { color: var(--text); }
.log-meta { font-size: 11px; margin-top: 3px; }
.log-head-actions { display: flex; gap: 6px; }

/* People & access codes (owner-only) */
.people-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; max-height: 320px; overflow-y: auto; }
.people-empty { padding: 14px 4px; font-size: 13px; }
.person-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; background: var(--surface); }
.person-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.person-name { font-weight: 600; font-size: 14.5px; }
.person-del { background: transparent; border: 1px solid var(--line-2); color: var(--text-dim); font-size: 11.5px; padding: 4px 9px; border-radius: 7px; cursor: pointer; }
.person-del:hover { color: var(--red); border-color: rgba(240,145,127,0.4); }
.person-code-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.person-code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--clay-hi); background: rgba(0,0,0,0.3);
  padding: 7px 10px; border-radius: 8px; overflow-x: auto; white-space: nowrap; }
.person-copy { flex: none; font-size: 11.5px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; }
.person-copy:hover { color: var(--text); background: var(--surface-3); }
.people-add { display: flex; gap: 8px; }
.people-add input { flex: 1; min-width: 0; }
.session-item { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.session-item.clickable { cursor: pointer; }
.session-item.clickable:hover { border-color: var(--line-2); }
.session-item.is-managed { border-color: rgba(226,133,95,0.32); }
.si-top { display: flex; align-items: center; gap: 8px; }
.si-mode { font-family: var(--mono); font-size: 11px; color: var(--clay); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px; }
.si-pid { font-size: 11px; margin-left: auto; color: var(--muted); }
.si-cwd { font-family: var(--mono); font-size: 12px; color: var(--text-dim); word-break: break-all; }
.si-sub { font-size: 11px; font-family: var(--mono); color: var(--muted); }

/* ── Main / scroll ────────────────────────────────────── */
.main { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.offline-banner { background: linear-gradient(180deg, rgba(236,197,135,0.16), rgba(236,197,135,0.06));
  border-bottom: 1px solid rgba(236,197,135,0.3); color: var(--gold); font-size: 13.5px; padding: 11px 18px; text-align: center; }
.selfupdate-banner { font-size: 13.5px; padding: 11px 18px; text-align: center; border-bottom: 1px solid rgba(226,133,95,0.3);
  background: var(--clay-soft); color: var(--clay-hi); }
.selfupdate-banner.su-ok { background: rgba(174,192,141,0.14); color: var(--sage); border-bottom-color: rgba(174,192,141,0.3); }
.selfupdate-banner.su-bad { background: rgba(240,145,127,0.13); color: var(--red); border-bottom-color: rgba(240,145,127,0.32); }
.scroll-area { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
}
.card-title { margin: 0 0 18px; font-family: var(--display); font-optical-sizing: auto;
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.launcher { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
/* While the "Start a new chat" launcher is up, the "No chat open" placeholder below it is
   redundant — hide it (it reappears once a chat is opened and the launcher is hidden). */
.launcher:not(.is-hidden) ~ .transcript .transcript-empty { display: none; }
.home:not(.is-hidden) ~ .transcript .transcript-empty { display: none; }

/* Home dashboard — all chats grouped by project */
.home { display: flex; flex-direction: column; gap: 24px; animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.home-title { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.home-sub { font-size: 13.5px; margin: 4px 0 0; }
.home-groups { display: flex; flex-direction: column; gap: 26px; }
.home-group { display: flex; flex-direction: column; gap: 12px; }
.home-group-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.home-group-name { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--clay-hi); }
.home-group-count { font-size: 12px; }
.home-chats { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.home-chat { display: flex; align-items: flex-start; gap: 11px; text-align: left; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s; }
.home-chat:hover { transform: translateY(-1px); border-color: var(--line-2); background: var(--surface-2); }
.home-chat .badge { flex: none; }
.home-chat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.home-chat-title { font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-chat-meta { font-size: 11.5px; }
.brand[role="button"] { cursor: pointer; border-radius: 10px; }
.brand[role="button"]:hover .brand-name { color: var(--clay-hi); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Fields ───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.01em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.field-error { color: var(--red); font-size: 12.5px; margin-top: 6px; min-height: 14px; }

input[type="text"], input[type="password"], textarea, select {
  background: rgba(0,0,0,0.22); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--sans); font-size: 16px; padding: 12px 14px; border-radius: 11px; width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#f-cwd, #project-path { font-family: var(--mono); font-size: 14px; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--clay); background: rgba(0,0,0,0.3);
  box-shadow: 0 0 0 4px var(--clay-soft);
}
select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a4907f' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.form-hint { font-size: 12.5px; color: var(--muted); }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  padding: 11px 18px; border-radius: 11px; cursor: pointer;
  transition: transform .1s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  color: #2a140c; border: 0;
  background: linear-gradient(160deg, var(--clay-hi), var(--clay-deep));
  box-shadow: 0 10px 26px -10px rgba(226,133,95,0.75), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 14px 30px -10px rgba(226,133,95,0.9), 0 1px 0 rgba(255,255,255,0.3) inset; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-soft { background: transparent; color: var(--text-dim); border-color: var(--line-2); white-space: nowrap; }
.btn-soft:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text-dim); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.suggest-btn { padding: 8px 13px; font-size: 13px; white-space: nowrap; }
.suggest-btn:hover { color: var(--clay-hi); border-color: var(--clay-deep); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
.btn-mini { padding: 5px 11px; font-size: 12.5px; line-height: 1; border-radius: 8px; }

.check, .inline-check { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.check input, .inline-check input { width: auto; accent-color: var(--clay); transform: scale(1.15); }

/* project picker + advanced */
.project-row { display: flex; gap: 9px; align-items: stretch; }
.project-select { flex: 1; }
.advanced { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.advanced-summary { cursor: pointer; color: var(--text-dim); font-size: 13.5px; font-weight: 500; list-style: none; user-select: none; }
.advanced-summary::-webkit-details-marker { display: none; }
.advanced-summary::before { content: "›"; display: inline-block; margin-right: 7px; color: var(--clay); transition: transform .2s; }
.advanced[open] .advanced-summary::before { transform: rotate(90deg); }
.advanced-body { margin-top: 16px; animation: rise .3s ease both; }
.advanced-body .field:last-child { margin-bottom: 0; }
.ultracode-hint { color: var(--clay-hi); font-weight: 500; }
/* custom-folder picker: editable path input + Browse toggle for the inline folder browser */
.cwd-input-group { display: flex; gap: 9px; align-items: stretch; }
.cwd-input-group input { flex: 1; min-width: 0; }
.btn-sm { padding: 10px 14px; font-size: 13px; flex-shrink: 0; white-space: nowrap; }
#cwd-browser { margin-top: 9px; }
#cwd-browser.is-hidden { display: none; }
/* read-only-mode toggle, de-emphasized as a subtle card at the end of Advanced */
.field-check { flex-direction: row; align-items: flex-start; gap: 11px; margin-bottom: 0;
  padding: 13px 14px; background: rgba(0,0,0,0.16); border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer; }
.field-check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--clay); transform: scale(1.15); }
.check-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.check-label { font-size: 14px; color: var(--text); }
.check-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ── Transcript ───────────────────────────────────────── */
.transcript { flex: 1; min-height: 220px; min-width: 0; }
.transcript-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 48px; }
.empty-emoji { font-size: 40px; margin-bottom: 4px; filter: saturate(0.9); }
.empty-title { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--text); }

.run-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.rh-title { font-family: var(--display); font-weight: 600; font-size: 16px; }
.rh-sub { font-size: 12px; overflow-wrap: anywhere; min-width: 0; color: var(--muted); }
.rh-cost { margin-left: auto; font-family: var(--mono); color: var(--gold); font-size: 12.5px; white-space: nowrap; }

.transcript-stream { display: flex; flex-direction: column; gap: 12px; }

.msg { position: relative; border-radius: 18px; padding: 13px 17px; max-width: 86%; box-shadow: var(--shadow); }
.msg-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 5px; font-weight: 600; padding-right: 28px; }
.msg-body { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.5; }
.msg.user { align-self: flex-end; border-bottom-right-radius: 6px;
  background: linear-gradient(160deg, rgba(226,133,95,0.22), rgba(226,133,95,0.10)); border: 1px solid rgba(226,133,95,0.28); }
.msg.assistant { align-self: flex-start; border-bottom-left-radius: 6px;
  background: var(--surface); border: 1px solid var(--line); }
.msg.assistant .msg-role { color: var(--clay); }

.blk { border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,0.16); overflow: hidden; align-self: flex-start; max-width: 86%; }
.blk > summary { display: flex; align-items: baseline; gap: 9px; cursor: pointer; padding: 7px 12px;
  font-size: 12.5px; color: var(--text-dim); list-style: none; user-select: none; min-width: 0; }
.blk > summary::-webkit-details-marker { display: none; }
.blk > summary::before { content: "›"; color: var(--muted); transition: transform .2s; flex: none; }
.blk[open] > summary::before { transform: rotate(90deg); }
.blk-name { font-weight: 600; flex: none; }
.blk-preview { font-family: var(--mono); font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.blk.thinking > summary { color: var(--lav); }
.blk.tool-call .blk-name { color: var(--clay); }
.blk.tool-result .blk-name { color: var(--sage); }
.blk-body { margin: 0; padding: 11px 13px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  color: var(--text-dim); max-height: 340px; overflow: auto; background: rgba(0,0,0,0.28); }
.thinking-live { font-size: 12.5px; color: var(--lav); padding: 4px 4px; opacity: 0.9; }

/* copy button on messages */
.copy-btn { position: absolute; top: 9px; right: 9px; width: 27px; height: 27px; padding: 0;
  display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2);
  background: rgba(0,0,0,0.3); color: var(--muted); font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.msg:hover .copy-btn { opacity: 0.75; }
.copy-btn:hover { opacity: 1; color: var(--text); background: var(--surface-3); }
.copy-btn.copied { color: var(--sage); opacity: 1; }

/* markdown rendering inside assistant messages */
.md { white-space: normal; } /* HTML handles structure — don't double up with pre-wrap newlines */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 0.7em; }
.md h3.md-h { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 16px 0 8px; letter-spacing: -0.01em; }
.md h4.md-h { font-size: 14.5px; font-weight: 700; margin: 13px 0 6px; }
.md ul.md-list, .md ol.md-list { margin: 6px 0 11px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--clay); }
.md code.md-code { font-family: var(--mono); font-size: 0.85em; background: rgba(0,0,0,0.34); padding: 1.5px 5px; border-radius: 5px; color: var(--clay-hi); }
.md pre.md-pre { background: rgba(0,0,0,0.36); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow: auto; margin: 10px 0; }
.md pre.md-pre code { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--text-dim); background: none; padding: 0; }
.md a { color: var(--clay-hi); text-decoration: underline; text-underline-offset: 2px; }
.md strong { font-weight: 700; color: var(--text); }
.md em { font-style: italic; }
.md blockquote.md-bq { border-left: 3px solid var(--clay-deep); margin: 8px 0; padding: 2px 0 2px 13px; color: var(--text-dim); }

.result-final { align-self: flex-start; max-width: 86%;
  border: 1px solid rgba(174,192,141,0.22); background: rgba(174,192,141,0.07); border-radius: 11px; padding: 8px 14px; margin-top: 2px; }
.result-final.is-error { border-color: rgba(240,145,127,0.3); background: rgba(240,145,127,0.08); }
.result-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; margin-bottom: 8px; }
.result-meta { font-family: var(--mono); font-size: 11.5px; color: var(--sage); overflow-wrap: anywhere; }
.result-final.is-error .result-meta { color: var(--red); }
.stop-btn { margin-left: auto; color: var(--red); border-color: rgba(240,145,127,0.3); }
.rh-cost + .stop-btn { margin-left: 10px; }

/* ── Composer ─────────────────────────────────────────── */
.composer { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  padding: 14px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.composer-note { font-size: 12px; color: var(--clay-hi); background: var(--clay-soft);
  border: 1px solid rgba(226,133,95,0.25); border-radius: 9px; padding: 7px 11px; line-height: 1.4; }
.composer-row { display: flex; gap: 11px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 48px; max-height: 170px; border-radius: 14px; }
.composer .btn { white-space: nowrap; }
.composer.is-busy textarea, .composer.is-busy .btn, .composer.is-busy .composer-attach { opacity: 0.5; pointer-events: none; }
.composer-attach { flex: none; width: 46px; height: 48px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text-dim); font-size: 18px; cursor: pointer; transition: background .15s, color .15s; }
.composer-attach:hover { background: var(--surface-3); color: var(--text); }
.launcher-attach { margin-top: 9px; align-self: flex-start; }

/* image attachments (preview strip + in-bubble thumbnails) */
.img-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.img-thumb { position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: rgba(0,0,0,0.3); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb-x { position: absolute; top: 2px; right: 2px; width: 19px; height: 19px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.66); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.msg .img-strip { margin-bottom: 8px; }
.msg .img-thumb { width: auto; height: auto; max-width: 220px; max-height: 220px; }
.msg .img-thumb img { width: auto; height: auto; max-width: 220px; max-height: 220px; object-fit: contain; }

/* ── Statusbar ────────────────────────────────────────── */
.statusbar { border-top: 1px solid var(--line); background: var(--bg); padding: 7px 20px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ── Modals ───────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,6,4,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 460px; max-width: 100%; box-shadow: var(--shadow-lg); animation: rise .25s cubic-bezier(.2,.7,.2,1) both; }
.modal-text { margin: 0 0 16px; color: var(--text-dim); }
.modal-error { color: var(--red); font-size: 13px; min-height: 16px; margin: 2px 0 10px; }
.modal .field { margin-bottom: 14px; }

/* folder browser */
.folder-browser { margin-top: 10px; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; background: rgba(0,0,0,0.2); }
.fb-bar { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fb-current { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); overflow-wrap: anywhere; line-height: 1.3; }
.fb-list { list-style: none; margin: 0; padding: 6px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fb-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: 14px; transition: background .12s; }
.fb-item:hover { background: var(--surface-2); }
.fb-icon { width: 18px; text-align: center; opacity: 0.85; }
.fb-icon::before { content: "📁"; }
.fb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-empty { padding: 12px; color: var(--muted); font-size: 13px; }

/* ── Mobile (≤760px) ──────────────────────────────────── */
.sidebar-backdrop { display: none; }
@media (max-width: 760px) {
  body { font-size: 15px; }
  .menu-btn { display: inline-flex; min-height: 42px; padding: 8px 11px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 16px; min-width: 0; }
  .brand-mark { width: 26px; height: 26px; font-size: 13px; }
  .topbar-left { gap: 9px; }
  .topbar-right { gap: 8px; }
  .pill-version { display: none; } /* drop the version number — saves room so nothing wraps */
  .health-pill { font-size: 11px; padding: 5px 10px; }

  .body { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 86%; max-width: 320px; z-index: 60;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.7,.2,1);
    box-shadow: 16px 0 50px -20px rgba(0,0,0,0.85); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10,6,4,0.55);
    opacity: 0; pointer-events: none; transition: opacity .24s; backdrop-filter: blur(2px); }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  .scroll-area { padding: 15px; gap: 14px; }
  .card { padding: 17px; border-radius: 15px; }
  .card-title { font-size: 20px; margin-bottom: 15px; }
  .field-row { grid-template-columns: 1fr; }
  .msg { max-width: 100%; }
  .blk, .result-final { max-width: 100%; }
  .composer { padding: 11px 13px max(12px, env(safe-area-inset-bottom)); }
  .btn, .btn-lg, .btn-soft { min-height: 46px; }
  .statusbar { display: none; }
  .copy-btn { opacity: 0.5; } /* no hover on touch — keep it visible */
  .suggest-btn-label { display: none; } /* just the ✨ on phones */
  /* compact square icon button matching the ☰ menu button on the left (not a tall 46px tap target) */
  .suggest-btn { min-height: unset; height: 42px; width: 42px; padding: 0; font-size: 15px;
    display: inline-grid; place-items: center; border-radius: 10px; flex-shrink: 0; }
  .field-label { font-size: 13.5px; } /* a touch more readable on a phone */
  /* Stack the launch actions: full-width Start, then a clean full-width "Just chat" toggle card */
  .form-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .form-actions .btn-lg { width: 100%; }
  .advanced-body .field { margin-bottom: 14px; }
  .cwd-input-group { flex-direction: column; gap: 8px; }
  .cwd-input-group .btn-sm { width: 100%; }
  .home-title { font-size: 22px; }
  .home-head { gap: 12px; }
  .home-head > div { flex: 1; }
  .home-head .btn-lg { width: 100%; }
  .home-chats { grid-template-columns: 1fr; }
}