*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0d0d0d;
  --surface: #161616;
  --border:  #252525;
  --text:    #c8c8c8;
  /* Muted text raised to ~5.5:1 on --bg (was #4a4a4a ≈ 2.2:1, failed WCAG AA).
     Still clearly subordinate to --text, just readable. */
  --muted:   #8a8a8a;
  --green:   #4ec94e;
  --red:     #e05050;
  --blue:    #4ab0e0;
  --yellow:  #c8a830;
  --hdr-h:   38px;   /* fixed-header height; kept in sync with the real header by JS */
  /* Proportional reading font for rendered prose (paragraphs, headings, lists).
     Monospace stays the default everywhere else (code, viewers, tool output). */
  --font-prose: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Mono', Consolas, monospace;
}

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Login ── */
#login {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}
#login h1 { color: #fff; font-size: 15px; margin-bottom: 6px; }

/* ── App ── */
#app { max-width: 1200px; margin: 0 auto; padding: 28px 20px; }

/* ── Sidebar layout ── */
#app-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: calc(100vh - var(--hdr-h, 38px));
}
#convos-panel {
  width: 240px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  position: sticky;
  top: var(--hdr-h, 38px);
  max-height: calc(100vh - var(--hdr-h, 38px) - 4px);
  display: flex;
  flex-direction: column;
}
#convos-panel .convos-list {
  overflow-y: auto;
  flex: 1;
}
#app-right {
  flex: 1;
  min-width: 0;
}

/* Two-row header. Row 1: [toggle] owner/repo … [status][menu]. Row 2: full-width
   prompt title. The flex wrappers are flattened with display:contents so their
   leaf elements land directly as grid items. */
.hdr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px; row-gap: 0;
  padding: 4px 20px;
  border-bottom: 1px solid var(--border);
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--bg);
  z-index: 55;
}
#app { padding-top: var(--hdr-h, 38px); }
.hdr-left, .hdr-context { display: contents; }
.hdr-right  { display: flex; align-items: center; gap: 12px; grid-column: 3; grid-row: 1; justify-self: end; }
.hdr-status { display: flex; align-items: center; gap: 6px; min-width: 0; }

#sidebar-toggle  { grid-column: 1; grid-row: 1; }
#convo-view-repo { grid-column: 2; grid-row: 1; justify-self: start; }

/* Active-conversation identity, shown in the header in place of a static title */
.hdr-desc {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  grid-column: 2 / -1; grid-row: 2;
}
.hdr-repo {
  min-width: 0; max-width: 100%; color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-name {
  color: #fff; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hdr-context .convo-rename-btn { flex-shrink: 0; }

/* ── Hamburger menu ── */
#menu-wrap { position: relative; }
#menu-btn { font-size: 14px; padding: 2px 8px; }
#menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 140px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#menu-dropdown button {
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  text-align: left;
  color: var(--text);
  font-size: 13px;
}
#menu-dropdown button:last-child { border-bottom: none; }
#menu-dropdown button:hover { background: #1a1a1a; }
#menu-dropdown button.danger { color: var(--red); }
#menu-dropdown button.active { color: var(--green); background: #162a16; }

/* Sidebar toggle — hidden on desktop, shown on mobile */
#sidebar-toggle { display: none; }

/* Sidebar backdrop — mobile overlay */
#sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 49;
}
#sidebar-backdrop.visible { display: block; }
#indicator { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; white-space: nowrap; }
#indicator-running:empty, #indicator-queued:empty { display: none; }

/* ── Form elements ── */
input[type=password], input[type=text], textarea, select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 11px;
  font: inherit;
  border-radius: 3px;
}
input[type=password] { width: 240px; }
textarea {
  width: 100%; height: 108px;
  resize: vertical; display: block;
  margin-bottom: 8px;
}
select {
  cursor: pointer;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a4a4a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: #383838; }

button {
  background: #2d4a2d; color: var(--green);
  border: 1px solid #457245;
  padding: 7px 16px; font: inherit;
  cursor: pointer; border-radius: 3px;
}
button:hover { background: #3a5a3a; }
#run-btn { background: #2a2200; color: var(--yellow); border-color: #4a3c00; }
#run-btn:hover { background: #362c00; }
button:disabled { opacity: .35; cursor: default; }
button.danger { background: #2a1818; color: var(--red); border-color: #451f1f; }
button.danger:hover { background: #361e1e; }
button.ghost {
  background: none; border-color: var(--border); color: var(--muted);
  padding: 5px 10px; font-size: 11px;
}
button.ghost:hover { color: var(--text); border-color: #383838; background: none; }
button.ghost.active { color: var(--text); border-color: var(--accent); background: rgba(99,102,241,.12); }

/* ── Layout helpers ── */
.label {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 8px;
}
.form-wrap { margin-bottom: 30px; }
.row { display: flex; align-items: center; gap: 14px; }
.hint { color: var(--muted); font-size: 11px; }
.err { color: var(--red); font-size: 12px; }
/* Send-row status mirror: hidden on desktop (the header indicator covers it),
   shown on mobile in place of the Ctrl+Enter hint. */
.convo-status { display: none; color: var(--blue); font-size: 12px; white-space: nowrap; }

/* ── File upload chips ── */
.upload-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.upload-chips:empty { margin: 0; }
.upload-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1c1c1c; border: 1px solid #333; border-radius: 12px;
  padding: 2px 6px 2px 10px; font-size: 11px; color: var(--fg);
  max-width: 260px;
}
.upload-chip { overflow: hidden; }
.upload-chip.uploading { opacity: 0.6; }
.upload-chip-x {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0 2px; font-size: 11px; line-height: 1;
}
.upload-chip-x:hover { color: var(--red); }

/* ── Contextual header user selector ── */
.header-user-wrap { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.header-user-mode { color: var(--muted); font-size: 11px; }
#header-user-select {
  background: #1c1c1c; color: var(--fg); border: 1px solid #333;
  border-radius: 4px; padding: 2px 4px; font-size: 11px; max-width: 160px;
}
#header-user-select:disabled { color: var(--muted); cursor: default; }

/* ── Thread type toggle ── */
.thread-type-row {
  display: flex; gap: 6px;
  margin-bottom: 10px;
}
.thread-type-btn {
  background: none; border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; padding: 4px 12px;
  border-radius: 3px; cursor: pointer;
}
.thread-type-btn.active {
  background: #2a432a; color: var(--green);
  border-color: #457245;
}
.convo-chat-badge {
  color: var(--muted); font-size: 11px;
}

/* ── Repo selector row ── */
.repo-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.repo-row .label { margin-bottom: 0; }
#repo-select { min-width: 160px; max-width: 300px; }

/* ── Repo action chooser ── */
#repo-action-chooser {
  margin-bottom: 10px;
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
}
.repo-action-opt {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.repo-action-opt:hover { border-color: var(--blue); background: #0d1a2a; }
.repo-action-icon { font-size: 16px; line-height: 1; color: var(--blue); }
.repo-action-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.repo-action-hint  { font-size: 10px; color: var(--muted); }
.repo-action-cancel-top { align-self: center; }

/* ── Add/Create repo forms ── */
#add-repo-form,
#create-repo-form {
  margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.repo-form-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 2px;
}
/* Keep the existing add-repo-form's inner layout as a row */
#add-repo-form { flex-direction: row; align-items: center; flex-wrap: wrap; }
.create-repo-fields {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#repo-url-input { flex: 1; min-width: 240px; }
#clone-status { font-size: 11px; color: var(--muted); }
#clone-status.ok   { color: var(--green); }
#clone-status.fail { color: var(--red); }
#create-repo-status { font-size: 11px; color: var(--muted); }
#create-repo-status.ok   { color: var(--green); }
#create-repo-status.fail { color: var(--red); }

/* ── GitHub token section ── */
#gh-token-section {
  margin-top: 4px;
  padding: 8px 10px;
  background: #0d1117;
  border: 1px solid var(--yellow);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 5px;
}
.gh-token-label { font-size: 11px; color: var(--yellow); }
.gh-token-hint  { font-size: 10px; color: var(--muted); pointer-events: none; user-select: text; }
.gh-token-row   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#gh-token-status { font-size: 11px; }
#gh-token-status.ok   { color: var(--green); }
#gh-token-status.fail { color: var(--red); }

/* ── Clone progress panel ── */
#clone-progress-panel {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
#clone-progress-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px;
  background: #0d1a2a;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
#clone-progress-title { color: var(--blue); text-transform: uppercase; letter-spacing: .07em; }
#clone-progress-path {
  padding: 6px 10px;
  background: #090f17;
  color: var(--blue);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  word-break: break-all;
}
#clone-progress-body {
  background: #0a0a0a;
  padding: 8px 10px;
  height: 200px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.55;
}
.cl { display: block; white-space: pre-wrap; word-break: break-all; color: #8a8a8a; }
.cl-hdr { color: #3a6a8a; }
.cl-ok  { color: var(--green); }
.cl-err { color: var(--red); }

/* ── Table ── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-weight: normal;
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0 10px 8px; border-bottom: 1px solid var(--border);
}
tbody td { padding: 9px 10px; border-bottom: 1px solid #181818; vertical-align: top; }
tbody tr:hover td { background: #111; }
tbody tr[data-id] { cursor: pointer; }

.c-ts        { white-space: nowrap; color: var(--muted); }
.c-committed { white-space: nowrap; color: var(--muted); }
.c-repo      { white-space: nowrap; color: var(--muted); font-size: 11px; }
.c-prompt    { max-width: 280px; word-break: break-word; white-space: pre-wrap; }
.c-hash      { white-space: nowrap; color: var(--muted); font-size: 12px; }
.c-hash-owner { display: block; font-size: 10px; opacity: 0.7; margin-bottom: 2px; }
.c-cost      { white-space: nowrap; color: var(--muted); font-size: 11px; text-align: right; }
.c-err       { max-width: 200px; color: var(--red); font-size: 11px;
               word-break: break-word; white-space: pre-wrap; }

.ts-date { display: block; }
.ts-time { display: block; font-size: 11px; margin-top: 1px; }

.c-hash a, .c-hash-owner { color: inherit; text-decoration: none; }
.c-hash a:hover, .c-hash-owner:hover { text-decoration: underline; }

@media (max-width: 600px) {
  #app { padding: 16px 12px; }
  .c-committed, .c-err, .c-repo, .c-cost { display: none; }
  .c-prompt { max-width: none; }
}

.badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 2px; font-size: 11px; white-space: nowrap;
}
.badge.queued  { background:#1e1b08; color: var(--yellow); }
.badge.running { background:#08182a; color: var(--blue);   }
.badge.done    { background:#103010; color: var(--green);  }
.badge.error   { background:#200a0a; color: var(--red);    }
/* Glyphs alongside the text label (everywhere badges appear: message cards,
   thread cards, detail). Decorative — the text label stays as the accessible
   signal, and the spans carry an aria-label too. */
.badge.done::before  { content: "\2713\00a0"; }   /* ✓ */
.badge.error::before { content: "\2715\00a0"; }   /* ✕ */

/* Status badges under a prompt: prefix queued with a sandclock, and make the
   running badge a blue, blinking, ▶-prefixed marker. Scoped to the convo bubble
   so the sidebar/detail badges stay static. */
.convo-msg-meta .badge.queued::before  { content: "⏳ "; }
.convo-msg-meta .badge.running {
  color: var(--blue);
  animation: blink-run 1.4s ease-in-out infinite;
}
.convo-msg-meta .badge.running::before { content: "▶ "; }

.empty { color: var(--muted); padding: 18px 10px; }
.hidden { display: none !important; }

/* ── Live log panel ── */
#log-panel {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
#log-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px;
  background: #162a16;
  border-bottom: 1px solid var(--border);
}
#log-title { color: var(--green); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
#log-status { color: var(--muted); font-size: 11px; margin-left: 12px; }
#log-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1;
}
#log-close:hover { color: var(--text); }
#log-body {
  background: #0a0a0a;
  padding: 12px;
  height: 480px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
}

/* ── Log line types ── */
.ll {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  min-height: 1.6em;
}
.ll-sys   { color: #2e3e2e; }          /* CLAUDE/session — very dim */
.ll-meta  { color: #2a4a2a; font-size: 11px; }  /* meta header info */
.ll-meta-key { color: #3a6a3a; }
.ll-job   { color: #4a6e4a; }          /* JOB lifecycle — dim green */
.ll-git   { color: #7a6020; }          /* GIT — dim yellow */
.ll-done  { color: var(--green); }
.ll-warn  { color: var(--yellow); }
.ll-err   { color: var(--red); }
.ll-pfx   { color: #3a6a8a; }          /* [tool] prefix */
.ll-tname { color: var(--blue); font-weight: bold; }
.ll-targs { color: #336070; }
.ll-text  {                             /* Claude's actual text output */
  color: #d4d4d4;
  border-left: 2px solid #2a2a2a;
  padding-left: 8px;
  margin-left: 2px;
}

/* ── Rendered Markdown inside Claude's text output ── */
.ll-md {
  white-space: normal;                  /* block tags handle spacing, not pre-wrap */
  font-family: var(--font-prose);       /* proportional reading font for prose */
  font-size: 13.5px; line-height: 1.55;
}
.ll-md .md-p { margin: 0 0 8px; white-space: pre-wrap; }
.ll-md > .md-p:last-child { margin-bottom: 0; }
.ll-md .md-h {
  margin: 10px 0 6px; color: #fff; font-weight: 600; line-height: 1.3;
}
.ll-md h1.md-h { font-size: 1.35em; }
.ll-md h2.md-h { font-size: 1.2em; }
.ll-md h3.md-h { font-size: 1.08em; }
.ll-md h4.md-h, .ll-md h5.md-h, .ll-md h6.md-h { font-size: 1em; }
.ll-md .md-list { margin: 0 0 8px; padding-left: 1.4em; }
.ll-md .md-list li { margin: 2px 0; }
.ll-md .md-list .md-list { margin-bottom: 0; }
.ll-md .md-quote {
  margin: 0 0 8px; padding: 2px 0 2px 10px;
  border-left: 2px solid #3a3a3a; color: #b0b0b0;
}
.ll-md .md-hr { border: none; border-top: 1px solid #2a2a2a; margin: 10px 0; }
.ll-md code {
  background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 3px;
  padding: 1px 4px; font-size: .9em; color: #d8c08a;
  font-family: var(--font-mono);        /* code stays monospace inside prose */
}
.ll-md .md-pre {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 4px;
  padding: 8px 10px; margin: 0 0 8px; overflow-x: auto;
}
.ll-md .md-pre code {
  background: none; border: none; padding: 0; color: #d4d4d4;
  white-space: pre; font-size: 12px; line-height: 1.5;
  font-family: var(--font-mono);        /* fenced blocks stay monospace */
}

/* ── Syntax-highlight tokens (fenced blocks, Edit/Write previews, file reads).
   Dark palette tuned to the existing greens/blues/tan. ── */
.tok-cmt { color: #6b8f6b; font-style: italic; }
.tok-str { color: #c9a26a; }
.tok-num { color: #d6a85f; }
.tok-kw  { color: #6fb3e0; }
.tok-lit { color: var(--green); }
.ll-md a { color: var(--blue); text-decoration: underline; }
.ll-md strong { color: #fff; }
.ll-md em { font-style: italic; }
.ll-md .md-table {
  border-collapse: collapse; margin: 0 0 8px; width: auto; max-width: 100%;
  display: block; overflow-x: auto; font-size: .95em;
}
.ll-md .md-table th, .ll-md .md-table td {
  border: 1px solid #2a2a2a; padding: 4px 8px; text-align: left;
  vertical-align: top;
}
.ll-md .md-table th { background: #1a1a1a; color: #fff; font-weight: 600; }
.ll-md .md-table tbody tr:nth-child(even) td { background: #161616; }
.ll-heartbeat {
  color: #1e2e1e; font-size: 10px;
  padding: 0; min-height: 0; line-height: 1.2;
}

/* ── Done summary block ── */
.ll-done-block {
  margin: 6px 0 3px;
  border: 1px solid #2a5d2a;
  border-radius: 3px;
  background: #102310;
  padding: 6px 10px;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  min-height: 0;
}
.ll-done-item { display: flex; align-items: baseline; gap: 4px; }
.ll-done-key { color: #4a8a4a; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ll-done-val { color: var(--green); font-size: 12px; }
.ll-done-val.cost { color: var(--yellow); font-weight: bold; }

/* ── Detail panel ── */
#detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 100;
}
#detail-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 94vw);
  max-height: 85vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#detail-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #0e0e0e;
  flex-shrink: 0;
}
#detail-title {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
}
#detail-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1;
}
#detail-close:hover { color: var(--text); }
#detail-body { overflow-y: auto; padding: 18px 16px; }
.detail-field { margin-bottom: 18px; }
.detail-field:last-child { margin-bottom: 0; }
.detail-label {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 5px;
}
.detail-value { color: var(--text); word-break: break-word; white-space: pre-wrap; line-height: 1.6; }
.detail-id { color: var(--muted); font-size: 12px; }
.detail-err { color: var(--red); }

@media (max-width: 600px) {
  #detail-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    transform: none;
    width: 100%;
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
  }
}

/* ── Shared modal styles ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 110;
}
.modal-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 94vw);
  max-height: 85vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #0e0e0e;
  flex-shrink: 0;
}
.modal-title {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
}
.modal-close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body {
  overflow-y: auto;
  padding: 16px 18px;
}
@media (max-width: 600px) {
  .modal-panel {
    top: 12px; left: 8px; right: 8px; bottom: auto;
    transform: none;
    width: auto;
    max-height: calc(100vh - 24px);
    border-radius: 10px;
  }
}

/* ── Users panel ── */
.users-list { margin-bottom: 14px; }
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: none; }
.user-row.active { background: #162a16; }
.user-name { color: #fff; font-weight: bold; min-width: 100px; }
.user-email { color: var(--muted); font-size: 11px; flex: 1; }
.user-active-badge {
  font-size: 10px; color: var(--green);
  background: #103010; padding: 2px 6px;
  border-radius: 2px; text-transform: uppercase;
  letter-spacing: .05em;
}
.user-actions { display: flex; gap: 6px; }
.user-actions button { font-size: 11px; padding: 3px 8px; }
.user-empty { color: var(--muted); font-size: 12px; padding: 8px 0; }
#add-user-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 0;
}
#add-user-form input { min-width: 140px; }
#user-pubkey-display {
  margin-top: 10px;
  padding: 10px;
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  word-break: break-all;
  white-space: pre-wrap;
  color: var(--blue);
  position: relative;
}
#user-pubkey-display .pubkey-label {
  display: block; color: var(--muted);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px;
}
#user-pubkey-display .pubkey-key {
  display: block; word-break: break-all; white-space: pre-wrap;
  margin-bottom: 8px; user-select: all;
}
#user-pubkey-display .pubkey-copy-btn {
  display: block; width: 100%; margin-bottom: 4px;
  font-size: 11px; padding: 4px;
}
#user-pubkey-display .pubkey-hint {
  display: block; color: var(--yellow);
  font-size: 10px; margin-top: 4px;
}
#users-status.ok  { color: var(--green); }
#users-status.err { color: var(--red); }
/* ── Optional create-repo section in user modal ── */
#user-create-repo-section {
  margin-top: 12px;
  padding: 10px 12px;
  background: #0d1a2a;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.ucr-heading { font-size: 12px; font-weight: 500; }
.ucr-note    { font-size: 10px; }
.ucr-fields  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ucr-status.ok  { color: var(--green); }
#ucr-status.err { color: var(--red); }

@media (max-width: 600px) {
  #add-user-form { flex-direction: column; }
  #add-user-form input { width: 100%; }
}

@media (max-width: 768px) {
  .user-row { flex-wrap: wrap; }
  .user-name { min-width: 0; flex: 1; }
  .user-email { width: 100%; order: 3; padding-left: 0; }
  .user-active-badge { order: 2; }
  .user-actions { order: 4; width: 100%; padding: 4px 0 2px; }
  .user-actions button { flex: 1; }
}

/* ── Reconnect overlay ── */
#reconnect-overlay {
  position: fixed; inset: 0;
  background: rgba(13,13,13,.92);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#reconnect-box {
  text-align: center;
  padding: 32px 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 340px;
}
#reconnect-title  { color: #fff; font-size: 14px; margin-bottom: 8px; }
#reconnect-status { color: var(--muted); font-size: 12px; margin-bottom: 20px; min-height: 18px; }
#reconnect-spinner { color: var(--muted); font-size: 20px; letter-spacing: 8px; animation: rcpulse 1.4s infinite; }
@keyframes rcpulse { 0%,100%{opacity:.2} 50%{opacity:.9} }

/* ── Setup panel ── */
.setup-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.setup-step:last-child { border-bottom: none; }
.setup-icon {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.setup-icon.ok   { color: var(--green); }
.setup-icon.wait { color: var(--yellow); }
.setup-icon.err  { color: var(--red); }
.setup-icon.off  { color: var(--muted); }
.setup-detail { flex: 1; }
.setup-label { color: var(--text); font-size: 12px; margin-bottom: 3px; }
.setup-hint { color: var(--muted); font-size: 11px; }
.setup-hint a { color: var(--blue); text-decoration: none; }
.setup-hint a:hover { text-decoration: underline; }
.setup-actions { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.setup-version { color: var(--muted); font-size: 10px; }

/* ── Claude auth notice ── */
#claude-auth-notice {
  margin-bottom: 28px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
#claude-auth-notice .label { margin-bottom: 10px; }
#claude-auth-notice code {
  background: #0a0e14;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}
#claude-auth-notice pre {
  background: #0a0e14;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px;
  font-size: 12px;
  color: var(--text);
  margin: 10px 0;
  white-space: pre-wrap;
}
#claude-auth-notice .hint {
  color: var(--muted);
  font-size: 11px;
  margin-top: 8px;
}

/* ── Tool call blocks ── */
.ll-tool-block {
  margin: 3px 0;
  border: 1px solid #1a2e3a;
  border-radius: 3px;
  overflow: hidden;
  white-space: normal;
  word-break: normal;
  min-height: 0;
}
.ll-tool-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: #0c1a24;
  flex-wrap: wrap;
}
.ll-tool-hdr .ll-tname { margin-right: 2px; }
.ll-tool-desc {
  color: #3a5a6a; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 500px;
}
.ll-tool-body { padding: 5px 8px; background: #090f14; }
.ll-tool-cmd  { color: #a0c8d8; white-space: pre-wrap; word-break: break-all; }
.ll-tool-old  { color: #7a3a3a; white-space: pre-wrap; word-break: break-all; }
.ll-tool-new  { color: #3a7a3a; white-space: pre-wrap; word-break: break-all; }
.ll-tool-arrow { color: var(--muted); font-size: 11px; padding: 2px 0; }

/* ── Tool result blocks ── */
.ll-result-block {
  margin: 1px 0 5px 14px;
  border-left: 2px solid #264d26;
  padding: 4px 8px;
  background: #0e1e10;
  color: #6a9e6a;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 11px;
  line-height: 1.5;
  min-height: 0;
}

/* ── Expand/collapse button ── */
.ll-expand {
  display: block;
  color: #3a5a3a;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  line-height: 1.4;
}
.ll-expand:hover { color: var(--green); background: none; border: none; }

/* ── Todo list ── */
.ll-todo {
  margin: 3px 0;
  border: 1px solid #1a1a3a;
  border-radius: 3px;
  overflow: hidden;
  white-space: normal;
  min-height: 0;
}
.ll-todo-hdr {
  padding: 4px 8px;
  background: #0c0c24;
  font-size: 11px; font-weight: bold;
  color: var(--blue);
  letter-spacing: .05em;
}
.ll-todo-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 8px;
  background: #090918;
  border-top: 1px solid #10102a;
}
.ll-todo-icon { flex-shrink: 0; width: 14px; text-align: center; font-size: 12px; }
.ll-todo-text { flex: 1; word-break: break-word; }
.ll-todo-pending   .ll-todo-icon { color: #3a3a5a; }
.ll-todo-pending   .ll-todo-text { color: var(--text); }
.ll-todo-in_progress .ll-todo-icon { color: var(--blue); }
.ll-todo-in_progress .ll-todo-text { color: var(--blue); font-weight: bold; }
.ll-todo-completed .ll-todo-icon { color: #3a6a3a; }
.ll-todo-completed .ll-todo-text { color: #3a6a3a; text-decoration: line-through; }

/* ── Conversations list panel ── */
.convos-panel-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;            /* stay pinned at the top; never compress */
}
/* Pinned "+ New thread" action bar: kept out of the scrolling list so it stays
   visible while threads scroll beneath it. */
.new-thread-item {
  color: var(--green);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border) !important;
  background: #183218;
  flex-shrink: 0;            /* never shrink when the list grows */
  position: sticky; top: 0;  /* belt-and-suspenders pin */
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);   /* subtle lift over the list */
}
.new-thread-item:hover { background: #1d3d1d; }
.convos-panel-hdr .label { margin-bottom: 0; }
#filter-bar {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
#filter-bar select { font-size: 11px; padding: 3px 6px; width: 100%; }
#filter-bar #filter-clear { align-self: flex-end; margin-top: 2px; }
#filter-btn.active { color: var(--green); border-color: var(--green); }

/* Search bar */
#search-bar {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.search-input-row { display: flex; gap: 4px; }
.search-filters-row { display: flex; gap: 4px; }
#search-input {
  flex: 1; font-size: 11px; padding: 3px 6px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
}
#search-input:focus { outline: none; border-color: var(--blue); }
#search-bar select { flex: 1; font-size: 11px; padding: 3px 4px; }
#search-btn.active { color: var(--blue); border-color: var(--blue); }

/* Search results */
#search-results {
  flex: 1; overflow-y: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.search-result {
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.search-result:hover { background: var(--surface); }
.search-result-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.search-match-badge {
  font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 3px; text-transform: uppercase; flex-shrink: 0;
}
.search-match-badge.prompt   { background: #2a3a5a; color: #7ab8ff; }
.search-match-badge.response { background: #2a4a2a; color: #7acf7a; }
.search-result-name { color: #fff; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-snippet {
  font-size: 11px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 3px;
}
.search-snippet mark {
  background: #4a3a10; color: #ffd96a; border-radius: 2px; padding: 0 1px;
}
.search-result-meta { font-size: 10px; color: var(--muted); display: flex; gap: 8px; }
.search-no-results { color: var(--muted); font-size: 12px; padding: 16px 14px; }
.convos-list { background: var(--bg); }
.convo-empty {
  color: var(--muted); font-size: 12px;
  padding: 20px 14px;
}
.convo-row {
  padding: 9px 14px;
  border-bottom: 1px solid #111;
  cursor: pointer;
}
.convo-row:last-child { border-bottom: none; }
/* Hover: plain subtle wash — visually distinct from the selected state below. */
.convo-row:hover { background: #141414; }
/* Error threads: a red left accent bar (inset shadow → no layout shift). */
.convo-row.status-error { box-shadow: inset 3px 0 0 var(--red); }
/* Selected thread: stronger green fill + a green left accent bar. Listed last
   so an active+error row shows the green selection bar while the badge keeps
   signalling the error state. */
.convo-row.active {
  background: #18301a;
  box-shadow: inset 3px 0 0 var(--green);
}

.convo-row-name {
  color: #fff; font-size: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  line-height: 1.4;
}
.convo-row-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.convo-user { color: var(--green); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.convo-repo { color: var(--blue);  font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-preview {
  color: var(--muted); font-size: 11px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  line-height: 1.4;
}
.convo-row-stats {
  display: flex; align-items: center; gap: 10px;
}
.convo-count { color: var(--muted); font-size: 10px; }
.convo-cost  { color: var(--yellow); font-size: 10px; }
.convo-time  { color: var(--muted); font-size: 10px; margin-left: auto; flex-shrink: 0; }

/* ── Conversation view ── */
/* No bottom margin: the input is pinned to the viewport bottom (see
   .convo-input-wrap), so trailing margin would leave a gap below it. */
#convo-view { margin-bottom: 0; padding-top: 2px; }
.convo-view-hdr {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap; gap: 8px;
}
.convo-view-right { display: flex; align-items: center; gap: 12px; }

/* Chat feed */
#convo-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.convo-exchange {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.convo-msg {
  display: flex;
  justify-content: flex-end;
}

/* Pin the prompt at the top of the viewport while scrolling through its
   (possibly long) response, so the prompt stays visible for context.
   Scoped per-exchange so each prompt only sticks over its own response.
   The `top` offset clears the fixed app header (overridden on mobile,
   where the header is taller — see the max-width: 768px block). */
.convo-exchange > .convo-msg {
  position: sticky;
  top: var(--hdr-h, 38px);
  z-index: 3;
  background: var(--bg);
  padding: 4px 0;
}
.user-bubble {
  background: #1b301b;
  border: 1px solid #3b553b;
  border-radius: 12px 12px 2px 12px;
  padding: 10px 14px;
  max-width: 80%;
}
.convo-msg-text {
  color: var(--text); font-size: 13.5px; line-height: 1.5;
  font-family: var(--font-prose);   /* user prose in the proportional reading font */
  white-space: pre-wrap; word-break: break-word;
  margin-bottom: 6px;
}
/* Clamp long prompts to ~5 lines. Uses max-height + overflow (not line-clamp)
   so the gradient fade below can overlay the clip line. */
.convo-msg-text.clamped {
  position: relative;
  display: block;
  max-height: calc(13.5px * 1.5 * 5);
  overflow: hidden;
}
/* Soft gradient fade into the user-bubble background, replacing the hard cut. */
.convo-msg-text.clamped::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  background: linear-gradient(to bottom, rgba(27, 48, 27, 0), #1b301b);
  pointer-events: none;
}
/* Styling comes from .ghost.bubble-nav-btn (matches the response buttons);
   push it to the bottom-right of the prompt's meta row. */
.prompt-toggle { margin-left: auto; }

/* ── Floating "jump to latest" ── */
/* Sits just above the pinned composer (--convo-input-h is published by JS).
   Hidden via .hidden when no thread is open; faded in via .show when the user
   has scrolled away from the bottom. */
/* Standard chat "scroll to latest" FAB. Fixed to the viewport (the whole
   document scrolls, composer is sticky) so messages slide UNDER it. Anchored to
   the bottom-right, just above the composer. Solid elevated fill + shadow so it
   reads as its own layer instead of letting message text bleed through.
   z-index sits above all message content — the sticky bubble footer (z 1, which
   carries the "Show all"/"Collapse" controls it must never hide behind) and the
   sticky prompt (z 3) — but below modals (z 80+). */
#jump-latest {
  position: fixed;
  right: 16px;
  /* Cleared above the sticky bubble footer (~32px desktop / ~40px mobile) that
     carries the "Show all"/"Collapse" controls, so the FAB sits fully above
     them rather than straddling — not just stacking on top in z-order. */
  bottom: calc(var(--convo-input-h, 0px) + 52px);
  z-index: 6;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242424;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
#jump-latest.show { opacity: 1; transform: none; pointer-events: auto; }
#jump-latest:hover { background: #2e2e2e; color: var(--green); border-color: var(--green); }
#jump-latest svg { display: block; }
.convo-msg-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  color: var(--muted); font-size: 11px;
}

/* Edit / Remove controls on a still-queued prompt. */
.queued-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.queued-actions button { font-size: 11px; padding: 1px 8px; }
.queued-edit-box { margin: 4px 0 6px; }
.queued-edit-text {
  width: 100%; box-sizing: border-box; resize: vertical;
  height: 60px; margin-bottom: 0;
}
.queued-edit-row { gap: 8px; margin-top: 4px; }
.queued-edit-row button { font-size: 12px; padding: 3px 12px; }

/* ── Claude response bubble ── */
.claude-msg { display: flex; justify-content: flex-start; }
/* Queued prompt: no response yet, so don't show an empty bubble. */
.claude-msg.empty { display: none; }

/* ── /compact "info" bubble (dangling response, no user prompt) ── */
.info-bubble { border-color: var(--blue); }
.info-bubble-label {
  color: var(--blue); font-size: 11px;
  padding: 6px 12px 0;
}
.claude-bubble {
  background: #0f0f0f;
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 2px;
  max-width: 90%;
  overflow: clip;
  /* Keep scrollIntoView (bubble Top/Bottom nav) clear of the pinned input. */
  scroll-margin-bottom: calc(var(--convo-input-h, 0px) + 8px);
}
.claude-bubble-inner { position: relative; }
.claude-bubble-inner.collapsed { overflow: hidden; }
/* Collapsed view: hide everything except a preview of the final response —
   the whole trailing run of text segments — clamped to ~5 rows total.
   Non-preview lines are display:none (zero height), so clamping the body
   height clamps the combined preview regardless of how many segments it
   was streamed as. */
.claude-bubble-inner.collapsed .claude-bubble-body {
  /* Match the collapsed prompt's height: 5 lines of the prompt's 13px text at
     the body's 1.55 line-height (.convo-msg-text.clamped uses line-clamp: 5).
     Expressed in absolute units so it tracks the prompt regardless of the
     response's own (smaller) font size. */
  max-height: calc(13px * 1.55 * 5);
  overflow: hidden;
}
.claude-bubble-inner.collapsed .claude-bubble-body > .ll,
.claude-bubble-inner.collapsed .claude-bubble-body > .ll-preamble { display: none; }
.claude-bubble-inner.collapsed .claude-bubble-body > .ll-preview { display: block; }
.bubble-fade {
  display: none;
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  background: linear-gradient(to bottom, transparent, #0f0f0f);
  pointer-events: none;
}
.claude-bubble-inner.collapsed .bubble-fade { display: block; }

/* Expanded "details off" view — the default once a response has completed.
   Show only the final answer; lines before it (startup preamble + tool steps)
   are .ll-step, lines after it (cost, tokens, exit, commit) are .ll-trail, each
   revealed by its own inline toggle. */
.claude-bubble-body.hide-steps   > .ll-step  { display: none; }
.claude-bubble-body.hide-details > .ll-trail { display: none; }

/* Inline expand/collapse lines (steps above the response, run details below
   it) — same affordance as the startup-details toggle. */
.ll-detail-toggle {
  cursor: pointer; user-select: none;
  color: var(--muted); font-size: 11px; opacity: .6;
  padding: 1px 0; margin: 2px 0;
}
.ll-detail-toggle:hover { opacity: 1; }

/* ── Startup preamble (collapsed-by-default noise) ── */
.ll-preamble { margin-bottom: 2px; }
.ll-preamble-toggle {
  cursor: pointer; user-select: none;
  color: var(--muted); font-size: 11px; opacity: .6;
}
.ll-preamble-toggle:hover { opacity: 1; }
.ll-preamble.collapsed .ll-preamble-body { display: none; }
.claude-bubble-body {
  background: transparent;
  padding: 8px 12px 12px;
  font-size: 12px;
  line-height: 1.6;
}
.claude-bubble-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 10px 6px;
  border-top: 1px solid #1a1a1a;
  /* Stick just above the pinned input rather than behind it (var is set by
     updateConvoInputHeight; falls back to 0 before the first conversation). */
  position: sticky; bottom: var(--convo-input-h, 0px);
  background: #0a0a0a;
  z-index: 1;
}
.bubble-status { color: var(--muted); font-size: 11px; }
/* Running response status: blue, blinking, ▶-prefixed. */
.bubble-status.status-running {
  color: var(--blue);
  animation: blink-run 1.4s ease-in-out infinite;
}
.bubble-status.status-running::before { content: "▶ "; }
.bubble-actions { display: flex; align-items: center; gap: 4px; }
button.bubble-nav-btn {
  font-size: 13px; padding: 2px 8px;
  color: var(--muted);
}

/* ── Running indicator in convo header ── */
.convo-running {
  color: var(--blue); font-size: 11px;
  animation: blink-run 1.4s ease-in-out infinite;
}
@keyframes blink-run { 0%,100%{opacity:.4} 50%{opacity:1} }

/* Blinking ▶ in the compact (mobile) status line. */
.cs-run { display: inline-block; animation: blink-run 1.4s ease-in-out infinite; }

/* ── Conversation input ── */
/* Pinned to the bottom of the viewport so new streamed output stacks above it
   (the page scrolls underneath) instead of pushing the input off-screen. */
.convo-input-wrap {
  position: sticky;
  /* Pinned to the layout-viewport bottom by default; JS lifts it by the
     on-screen keyboard height (via --kb) so the action bar stays above the
     keyboard. Lives in `bottom` rather than a transform so it never reflows
     the chat feed above it — no layout shift when the keyboard toggles. */
  bottom: var(--kb, 0px);
  z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  padding-bottom: 10px;
  margin-bottom: 0;
}
/* Auto-growing composer: starts at min-height, grows with content up to
   max-height, then scrolls internally. JS sets the exact height on input;
   max-height caps it and overflow gives the internal scroll. */
.convo-input-wrap textarea {
  min-height: 60px;
  height: 60px;
  max-height: 200px;
  overflow-y: auto;
  resize: none;
}

/* ── Mobile layout ── */
@media (max-width: 768px) {
  /* Keep the header offset: the fixed header is two rows tall on mobile, so the
     top of the content (the repo selector on the new-thread form) must clear it,
     otherwise it hides behind the title bar. --hdr-h tracks the real height. */
  #app { padding: 14px 12px; padding-top: calc(var(--hdr-h, 38px) + 8px); }

  /* Header: keep toggle + title together */
  #sidebar-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 9px; font-size: 16px; flex-shrink: 0;
  }

  /* App layout: no gap, sidebar is a drawer */
  #app-layout { gap: 0; }

  /* Sidebar: fixed drawer, hidden by default — starts below fixed header */
  #convos-panel {
    position: fixed;
    left: 0; top: 58px; bottom: 0;
    width: 260px;
    max-height: calc(100vh - 58px);
    border-radius: 0;
    border-top: none; border-left: none; border-bottom: none;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  #convos-panel.sidebar-open {
    transform: translateX(0);
  }

  /* Full-width content */
  #app-right { width: 100%; }

  /* Bigger, full-width form inputs — also prevents iOS auto-zoom */
  textarea {
    font-size: 16px;
    height: 120px;
  }
  input[type=text], input[type=password], select {
    font-size: 16px;
    width: 100%;
    max-width: 100%;
  }
  /* Smaller min + cap on mobile so the keyboard + composer + action bar all
     fit in the shrunken visual viewport; longer text scrolls internally. */
  .convo-input-wrap textarea { min-height: 80px; height: 80px; max-height: 160px; }

  /* Repo row: wrap so button doesn't overflow */
  .repo-row { flex-wrap: wrap; }
  #repo-select { flex: 1; min-width: 0; }
  #add-repo-btn { flex-shrink: 0; }

  /* Chat bubbles: more width on small screens */
  .user-bubble { max-width: 92%; }
  .claude-msg .claude-bubble { max-width: 98%; }

  /* Bubble nav buttons: slightly larger tap targets on mobile */
  button.bubble-nav-btn { font-size: 15px; padding: 6px 12px; }

  /* Header keeps the base two-row grid; just tighten padding and let the prompt
     title (row 2) wrap to at most two lines. Header height is tracked by JS
     (--hdr-h), so the content offset follows automatically. */
  .hdr { padding: 5px 12px; }
  #header-user-select { max-width: 38vw; }
  /* Drop the "Thread:"/"Default:" prefix — too cramped on mobile. */
  .header-user-mode { display: none; }
  /* Header status lives at the bottom next to Send on mobile (see below). */
  #indicator { display: none; }
  /* Crop the thread description to a single line. */
  .hdr-name {
    white-space: nowrap; line-height: 1.25; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* Swap the Ctrl+Enter hint for the live status next to Send. The status can
     grow long ("running here + 2 other threads"), so let it shrink and
     ellipsize rather than crowd the Send button. */
  .convo-input-wrap .hint { display: none; }
  .convo-input-wrap > .row > .row { min-width: 0; }
  .convo-status {
    display: inline-block; min-width: 0; max-width: 100%;
    line-height: 1.3; text-align: left; vertical-align: middle;
  }
  /* Two stacked lines: "here …" and "other …". */
  .convo-status .cs-line {
    display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .convo-status .cs-loc {
    color: var(--muted); display: inline-block; min-width: 3.2em;
  }
}