:root {
  color-scheme: dark;
  --bg-primary: #181818;
  --bg-secondary: #141414;
  --bg-surface: #1e1e1e;
  /* Solid — translucent input let scrolling chat paint through on iOS. */
  --bg-input: #1a1a1a;
  --bg-hover: rgba(228, 228, 228, 0.08);
  --bg-user-msg: rgba(228, 228, 228, 0.06);
  --bg-agent-msg: transparent;
  --bg-tool: rgba(228, 228, 228, 0.03);
  --bg-code: rgba(0, 0, 0, 0.25);

  --text-primary: rgba(228, 228, 228, 0.92);
  --text-secondary: rgba(228, 228, 228, 0.70);
  --text-tertiary: rgba(228, 228, 228, 0.48);
  --text-quaternary: rgba(228, 228, 228, 0.32);

  --accent-green: #3fa266;
  --accent-red: #e34671;
  --accent-yellow: #f1b467;
  --accent-blue: #3794ff;
  --accent-purple: #b180d7;
  --accent-link: #81a1c1;

  --border-color: rgba(228, 228, 228, 0.08);

  --radius: 10px;
  --radius-sm: 6px;

  --header-height: 44px;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* Scrollbars: opaque dark track avoids UA light (white/grey) fallback */
  --scrollbar-track: rgba(0, 0, 0, 0.45);
  --scrollbar-thumb: rgba(228, 228, 228, 0.22);
  --scrollbar-thumb-hover: rgba(228, 228, 228, 0.34);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

/* --- Header --- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.header-right.header-right-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.connected { background: var(--accent-green); }
.dot.disconnected { background: var(--accent-red); }
.dot.reconnecting { background: var(--accent-yellow); }

#agent-status-icon { font-size: 12px; }

#agent-status-text {
  max-width: min(200px, 45vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#agent-status-text.agent-status-shimmer {
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 45%,
    var(--text-secondary) 90%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: statusShimmer 2.2s ease-in-out infinite;
}

@keyframes statusShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Messages area --- */

#messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}

/* Hide transcript while we jump to the end on session open/switch. */
#messages.messages-scroll-pending {
  visibility: hidden;
}

#messages.messages-scroll-pending .chat-el--new {
  animation: none;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--text-tertiary);
  gap: 8px;
}

.empty-state code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-surface);
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--accent-blue);
}

.session-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 42vh;
  gap: 14px;
  color: var(--text-tertiary);
  text-align: center;
}

.session-loading-spinner {
  width: 40px;
  height: 40px;
  color: var(--shell-accent, var(--accent-link, #5b8cff));
}

.session-loading-label {
  font-size: 13px;
  color: var(--text-quaternary, var(--text-tertiary));
}

.hint { font-size: 12px; }

/* --- Chat element base --- */

.chat-el {
  animation: none;
}

.shell-layout .chat-el--new {
  animation: fadeIn 0.12s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Human message --- */

.el-human {
  display: flex;
  justify-content: flex-end;
  padding: 2px 0;
}

.human-bubble {
  max-width: 85%;
  padding: 6px 12px;
  background: var(--bg-user-msg);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  word-break: break-word;
}

.quoted-widget {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-blue);
  background: rgba(55, 148, 255, 0.08);
}

.quoted-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  margin-bottom: 4px;
}

.quoted-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 120px;
  overflow-y: auto;
}

.mentions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 3px;
}

.mention-badge {
  font-size: 11px;
  padding: 0px 5px;
  border-radius: 3px;
  background: rgba(55, 148, 255, 0.15);
  color: var(--accent-blue);
  font-family: var(--font-mono);
}

.human-text {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.human-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.human-image-thumb {
  display: block;
  max-width: min(100%, 220px);
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.human-image-thumb.is-pending {
  /* Fixed quiet placeholder — no shimmer / no layout churn. */
  background: var(--shell-surface-2, var(--bg-surface));
}

.human-image-thumb.is-error {
  opacity: 0.45;
  width: 96px;
  height: 64px;
}

.human-image-thumb:not(.is-pending):not(.is-error) {
  width: auto;
  height: auto;
  max-height: 160px;
  min-width: 72px;
}

/* --- Assistant message --- */

.el-assistant {
  display: flex;
  justify-content: flex-start;
  padding: 2px 0;
}

.assistant-bubble {
  max-width: 95%;
  padding: 6px 10px;
  word-break: break-word;
  overflow: visible;
  max-height: none;
}

.assistant-content {
  font-size: 13px;
  line-height: 1.6;
  overflow: visible;
  max-height: none;
}

/* Streamdown / markdown may still use horizontal scroll regions inside prose */
.assistant-bubble .ui-scroll-area,
.assistant-bubble .ui-scroll-area__viewport,
.assistant-bubble .ui-scroll-area__content {
  max-height: none !important;
  height: auto !important;
}

.assistant-bubble .ui-scroll-area__viewport,
.assistant-bubble .ui-scroll-area__content {
  overflow-y: visible !important;
}

.assistant-bubble .ui-scroll-area[data-direction="horizontal"] .ui-scroll-area__viewport,
.assistant-bubble .ui-scroll-area[data-direction="horizontal"] .ui-scroll-area__content {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.el-tool .tool-diff-host {
  margin-top: 10px;
}

.assistant-bubble .native-code-block {
  margin-top: 8px;
}

.assistant-bubble .overflow-auto,
.assistant-bubble .overflow-y-auto,
.assistant-bubble .overflow-scroll {
  max-height: none !important;
  overflow-y: visible !important;
}

.assistant-content.markdown-body p { margin-bottom: 6px; }
.assistant-content.markdown-body p:last-child { margin-bottom: 0; }
.assistant-content.markdown-body ol,
.assistant-content.markdown-body ul { padding-left: 18px; margin-bottom: 6px; }
.assistant-content.markdown-body li { margin-bottom: 2px; }
.assistant-content.markdown-body pre {
  margin: 0;
  padding: 10px 12px;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  -webkit-overflow-scrolling: touch;
}
.assistant-content.markdown-body .code-block {
  margin: 10px 0 8px;
}
.assistant-content.markdown-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(228, 228, 228, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}
.assistant-content.markdown-body pre code {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--shiki-foreground);
  white-space: pre;
  line-height: 1.55;
}
.assistant-content.markdown-body pre code span {
  color: inherit;
}
.assistant-content.markdown-body pre code .line,
.assistant-content.markdown-body pre code [data-line] {
  display: block;
}
.assistant-content.markdown-body strong,
.assistant-content.markdown-body .font-semibold { font-weight: 600; }
.assistant-content.markdown-body a,
.plan-description.markdown-body a,
a.chat-ext-link {
  color: var(--accent-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* Markdown / Streamdown tables — Cursor ships Tailwind classes we do not load */
.assistant-content.markdown-body .md-table-scroll,
.plan-description.markdown-body .md-table-scroll {
  margin: 10px 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  max-width: 100%;
}

.assistant-content.markdown-body table.md-table,
.assistant-content.markdown-body table,
.plan-description.markdown-body table.md-table,
.plan-description.markdown-body table {
  display: table;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.assistant-content.markdown-body thead,
.plan-description.markdown-body thead {
  background: rgba(228, 228, 228, 0.08);
}

.assistant-content.markdown-body th,
.plan-description.markdown-body th {
  display: table-cell;
  padding: 8px 10px;
  text-align: left;
  font-weight: 650;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(228, 228, 228, 0.16);
  white-space: nowrap;
  vertical-align: bottom;
}

.assistant-content.markdown-body td,
.plan-description.markdown-body td {
  display: table-cell;
  padding: 7px 10px;
  text-align: left;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  white-space: nowrap;
}

.assistant-content.markdown-body tbody tr:last-child td,
.plan-description.markdown-body tbody tr:last-child td {
  border-bottom: none;
}

.assistant-content.markdown-body tbody tr:nth-child(even),
.plan-description.markdown-body tbody tr:nth-child(even) {
  background: rgba(228, 228, 228, 0.03);
}

.assistant-content.markdown-body .md-table-cell-content,
.plan-description.markdown-body .md-table-cell-content {
  display: block;
  white-space: nowrap;
}

.assistant-content.markdown-body td code,
.assistant-content.markdown-body th code,
.plan-description.markdown-body td code,
.plan-description.markdown-body th code {
  font-size: 11px;
  padding: 1px 5px;
}

/* Shiki vars if Streamdown embeds inline code blocks in markdown HTML */
.assistant-content.markdown-body {
  --shiki-foreground: rgba(228, 228, 228, 0.92);
  --shiki-token-comment: #7f848e;
  --shiki-token-keyword: #c678dd;
  --shiki-token-type: #e5c07b;
  --shiki-token-function: #61afef;
  --shiki-token-string: #98c379;
  --shiki-token-punctuation: rgba(228, 228, 228, 0.72);
  --shiki-token-constant: #d19a66;
  --shiki-token-parameter: #abb2bf;
  --shiki-token-deleted: #e06c75;
  --shiki-token-inserted: #98c379;
}

/* --- Code blocks (native renderer) --- */

.code-block {
  --cb-font: 12px;
  --cb-lh: 1.55;
  --cb-lines: 8;
  margin: 8px 0 6px;
  border-radius: 8px;
  overflow: hidden;
  background: #101010;
  border: 1px solid rgba(228, 228, 228, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.code-block-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 12px;
  min-height: 36px;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(228, 228, 228, 0.07) 0%,
    rgba(228, 228, 228, 0.025) 100%
  );
  border-bottom: 1px solid rgba(228, 228, 228, 0.08);
}

.code-block-toolbar--actions-only {
  justify-content: flex-end;
  padding-right: 4px;
}

.code-block-header {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  padding: 2px 0;
}

.code-block-header--spacer {
  color: var(--text-tertiary);
  font-weight: 400;
}

.code-block-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  margin-left: auto;
}

.code-block-action-btn,
.code-block-fullscreen-btn,
.code-block-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.code-block-action-btn:hover,
.code-block-fullscreen-btn:hover,
.code-block-copy-btn:hover {
  background: rgba(228, 228, 228, 0.08);
  color: var(--text-primary);
}

.code-block-action-btn:active,
.code-block-fullscreen-btn:active,
.code-block-copy-btn:active {
  background: rgba(228, 228, 228, 0.12);
  color: var(--text-primary);
}

.code-block-action-btn.is-copied,
.code-block-copy-btn.is-copied {
  color: var(--accent-green);
  background: rgba(63, 162, 102, 0.12);
}

/* Scroll viewport: at most ~7 lines of code, then vertical scroll */
.code-block-viewport {
  max-height: calc(var(--cb-font) * var(--cb-lh) * var(--cb-lines) + 12px);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Code block scrollbars: dark track + themed thumb (WebKit + Firefox) */
.code-block-viewport,
.code-block-fs-scroll {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.code-block-viewport::-webkit-scrollbar,
.code-block-fs-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.code-block-viewport::-webkit-scrollbar-button,
.code-block-fs-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.code-block-viewport::-webkit-scrollbar-track,
.code-block-fs-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

.code-block-viewport::-webkit-scrollbar-thumb,
.code-block-fs-scroll::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 3px;
}

.code-block-viewport::-webkit-scrollbar-thumb:hover,
.code-block-fs-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

.code-block-viewport::-webkit-scrollbar-corner,
.code-block-fs-scroll::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

.code-block pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: visible;
  font-family: var(--font-mono);
  font-size: var(--cb-font);
  line-height: var(--cb-lh);
  color: var(--text-primary);
  white-space: pre;
}

.code-block code { background: none; padding: 0; }

/* Line-level diff (structured diffLines from server) */
.code-block-diff-plain {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--cb-font);
  line-height: var(--cb-lh);
  background: transparent;
}

.code-block-diff-plain--raw pre {
  margin: 0;
  white-space: pre;
  color: var(--text-primary);
}

/* Full-screen code reader (mobile: safe areas, large close target) */
.code-block-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.code-block-fs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.code-block-fs-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(960px, 100%);
  max-height: 100%;
  margin: auto;
  background: var(--bg-code);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.code-block-fs-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid rgba(228, 228, 228, 0.1);
  background: linear-gradient(
    180deg,
    rgba(228, 228, 228, 0.07) 0%,
    rgba(228, 228, 228, 0.025) 100%
  );
}

.code-block-fs-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-block-fs-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.code-block-fs-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.code-block-fs-close:active {
  background: rgba(228, 228, 228, 0.1);
  color: var(--text-primary);
}

.code-block-fs-panel-header .code-block-action-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.code-block-fs-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.code-block-fs-scroll .code-block-diff-plain {
  max-width: none;
}

.code-block-fs-scroll .code-block-diff-line {
  margin-left: 0;
  margin-right: 0;
}

.code-block-diff-line {
  white-space: pre;
  padding: 1px 6px 1px 8px;
  margin: 0 -6px;
  border-radius: 2px;
}

.code-block-diff-line--ctx {
  color: var(--text-primary);
}

.code-block-diff-line--add {
  background: rgba(63, 185, 80, 0.22);
  color: rgba(230, 245, 233, 0.98);
  border-left: 3px solid rgba(63, 185, 80, 0.95);
  padding-left: 10px;
}

.code-block-diff-line--rem {
  background: rgba(248, 81, 73, 0.2);
  color: rgba(255, 232, 230, 0.98);
  border-left: 3px solid rgba(248, 81, 73, 0.9);
  padding-left: 10px;
}

.code-block-diff-line--meta,
.code-block-diff-line--hunk {
  color: var(--text-tertiary);
  background: rgba(228, 228, 228, 0.05);
  font-size: 11px;
}

/* --- Tool call line --- */

.el-tool { padding: 1px 0; }

.tool-line {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tool-line.completed .tool-icon { color: var(--text-tertiary); }
.tool-line.loading .tool-icon { color: var(--accent-yellow); }

.tool-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px 2px;
}

.tool-icon {
  flex-shrink: 0;
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.tool-action {
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.tool-details {
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-file-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
}

.tool-filename {
  color: var(--text-secondary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-additions { color: var(--accent-green); }
.tool-deletions { color: var(--accent-red); }

.tool-summary {
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Thought block --- */

.el-thought { padding: 0 0; }

.thought-line.thought-line-summary {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.thought-line.thought-line-step {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 2px solid rgba(55, 148, 255, 0.35);
  color: var(--text-tertiary);
  font-size: 12px;
}

.thought-line {
  padding: 1px 8px;
  font-size: 12px;
  color: var(--text-quaternary);
}

/* --- Plan block --- */

.el-plan { padding: 2px 0; }

.plan-card {
  padding: 8px 10px;
  background: rgba(228, 228, 228, 0.03);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.plan-todo-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.plan-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.plan-todo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.plan-todo-pending { background: var(--text-tertiary); }
.plan-todo-completed { background: var(--accent-green); }
.plan-todo-in_progress { background: var(--accent-blue); }

.plan-todo-text {
  flex: 1;
  min-width: 0;
}

.plan-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 16px;
}

.plan-progress-track {
  flex: 1;
  height: 3px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.plan-progress-bar {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.plan-progress-text {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.plan-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.plan-btn {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.plan-btn-build {
  background: var(--accent-blue);
  color: #fff;
}

.plan-btn-view {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.plan-model-badge {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.plan-card-widget {
  background: var(--bg-surface);
  border-color: color-mix(in srgb, var(--border-color) 80%, var(--accent-blue));
  gap: 6px;
}

.plan-widget-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.plan-widget-icon {
  font-size: 12px;
  opacity: 0.85;
  flex-shrink: 0;
}

.plan-widget-filename {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-description.markdown-body {
  font-size: 12px;
  line-height: 1.45;
  max-height: 160px;
  overflow-y: auto;
}

.plan-description.markdown-body p { margin-bottom: 6px; }
.plan-description.markdown-body p:last-child { margin-bottom: 0; }

.plan-todos-more {
  font-size: 11px;
  color: var(--text-quaternary);
  padding: 2px 0 0 14px;
}

.plan-actions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid var(--border-color);
}

.plan-actions-left,
.plan-actions-center,
.plan-actions-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.plan-actions-center {
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.plan-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.plan-model-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.plan-model-pill-chev {
  flex-shrink: 0;
  opacity: 0.7;
  font-size: 10px;
}

.plan-model-badge-inline {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-card-modal {
  background: transparent;
  border: none;
  padding: 0;
}

.plan-card-modal .plan-description.markdown-body,
.plan-card-modal .plan-todo-list {
  max-height: none;
}

.plan-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.66);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px;
}

.plan-modal-overlay.hidden { display: none; }

.plan-modal {
  width: 100%;
  max-width: 720px;
  max-height: min(82vh, 720px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.plan-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.plan-modal-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.plan-modal-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.plan-modal-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 26px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.plan-modal-body {
  overflow-y: auto;
  padding: 16px;
}

/* --- Composer queue strip (ChatGPT-style, above input) --- */

.composer-queue-bar {
  flex-shrink: 0;
  /* Match .input-wrapper width: #input-bar already pads horizontally. */
  margin: 0 0 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.composer-queue-bar.hidden { display: none; }

.composer-queue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.composer-queue-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
}

.composer-queue-chevron {
  font-size: 10px;
  color: var(--text-quaternary);
}

.composer-queue-label {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-queue-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.composer-queue-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}

.composer-queue-row--local {
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

.composer-queue-row--editing {
  flex-direction: column;
  gap: 8px;
}

.composer-queue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.7;
}

.composer-queue-row--local .composer-queue-dot {
  border-color: var(--accent-yellow, #e6b84d);
  background: transparent;
}

.composer-queue-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer-queue-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.composer-queue-attachments.hidden {
  display: none;
}

.composer-queue-attach {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.composer-queue-attach-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-queue-attach-file {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shell-muted, var(--text-tertiary));
}

.composer-queue-attach-more {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--shell-muted, var(--text-tertiary));
}

.composer-queue-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-primary, var(--text-secondary));
  line-height: 1.35;
}

.composer-queue-actions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
}

.composer-queue-action {
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.composer-queue-action--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
}

.composer-queue-action-icon {
  display: block;
  flex-shrink: 0;
}

.composer-queue-action--primary,
.composer-queue-action--send {
  color: var(--text-primary, #fff);
  border-color: rgba(255, 255, 255, 0.18);
}

.composer-queue-action--remove {
  color: var(--accent-red, #f07178);
}

.composer-queue-action:active,
.composer-queue-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}

.composer-queue-editor {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer-queue-edit-input {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary, #fff);
  padding: 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.composer-queue-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.composer-queue-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.composer-queue-remove:active,
.composer-queue-remove:hover {
  color: var(--text-primary, #fff);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Standalone todo list card --- */

.el-todo-list { padding: 2px 0; }

.todo-list-card {
  padding: 8px 10px;
  background: rgba(228, 228, 228, 0.03);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.todo-list-card-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.todo-list-card-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-list-card-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.todo-list-card-icon {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.35;
}

.todo-list-card-text {
  flex: 1;
  min-width: 0;
}

/* --- Run command --- */

.el-run-command { padding: 2px 0; }

.run-card {
  padding: 8px 10px;
  background: rgba(228, 228, 228, 0.03);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.run-header {
  font-size: 12px;
}

.run-description {
  color: var(--text-secondary);
  font-weight: 500;
}

.run-candidates {
  color: var(--text-tertiary);
}

.run-command-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

.run-prompt {
  color: var(--accent-green);
  user-select: none;
}

.run-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.run-btn {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.run-btn-run {
  background: var(--accent-green);
  color: #fff;
}

.run-btn-skip {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.run-btn-allow {
  background: var(--accent-blue);
  color: #fff;
}

/* --- Loading indicator --- */

.el-loading { padding: 2px 0; }

.el-awaiting {
  display: flex;
  justify-content: flex-start;
  padding: 4px 0;
}

.awaiting-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.awaiting-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.loading-dots {
  display: flex;
  gap: 3px;
  padding: 2px 0;
}

.dot-anim {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-quaternary);
  animation: dotBounce 1.4s ease-in-out infinite;
}

.dot-anim:nth-child(2) { animation-delay: 0.16s; }
.dot-anim:nth-child(3) { animation-delay: 0.32s; }

@keyframes dotBounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* --- Approval Bar --- */

.approval-bar {
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
}

.approval-bar.hidden { display: none; }

.approval-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 4.5em;
  overflow: auto;
}

.approval-actions {
  display: flex;
  gap: 10px;
}

.approval-actions .btn-approve,
.approval-actions .btn-reject {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* --- Questionnaire Bar --- */

.questionnaire-bar {
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  max-height: 55vh;
}

.questionnaire-bar.hidden { display: none; }

.questionnaire-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.questionnaire-icon { font-size: 14px; }

.questionnaire-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.questionnaire-stepper {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: auto;
}

#questionnaire-questions {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1;
}

.questionnaire-question {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
}

.questionnaire-question-active {
  border-left: 2px solid var(--accent-blue);
}

.questionnaire-question-label {
  display: flex;
  gap: 4px;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.questionnaire-question-number {
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.questionnaire-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.questionnaire-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.questionnaire-option-letter {
  flex: 0 0 auto;
  min-width: 1.4em;
  font-weight: 700;
  color: var(--accent-blue, #60a5fa);
}

.questionnaire-option-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.questionnaire-option:active { transform: scale(0.97); }
.questionnaire-option:hover { border-color: var(--accent-blue); }
.questionnaire-option-selected {
  border-color: var(--accent-blue);
  background: rgba(55, 148, 255, 0.15);
}

.questionnaire-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-shrink: 0;
}

.btn-q-skip {
  flex: 1;
  height: 40px;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-q-continue {
  flex: 1;
  height: 40px;
  background: var(--accent-blue);
  color: #fff;
}

.btn-q-continue:disabled { opacity: 0.35; }
.btn-q-skip:hover:not(:disabled) { border-color: var(--text-secondary); }
.btn-q-continue:hover:not(:disabled) { opacity: 0.85; }

/* --- Buttons --- */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-approve {
  flex: 1;
  height: 48px;
  background: var(--accent-green);
  color: #fff;
}

.btn-reject {
  flex: 1;
  height: 48px;
  background: var(--accent-red);
  color: #fff;
}

.btn-approve:hover:not(:disabled), .btn-reject:hover:not(:disabled) { opacity: 0.85; }

/* --- Input Bar --- */

#input-bar {
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 30;
  isolation: isolate;
  position: relative;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: var(--bg-input);
  border-radius: 24px;
  padding: 12px 12px 8px;
  border: none;
  transition: background 0.2s;
  isolation: isolate;
  position: relative;
  z-index: 1;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
}

.composer-toolbar-left,
.composer-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.composer-toolbar-left {
  flex: 1 1 auto;
}

.composer-toolbar-right {
  flex: 0 0 auto;
}

/* Shared size for attach / mic / stop / send in the composer. */
.input-wrapper .btn-attach,
.input-wrapper .btn-dictate,
.input-wrapper .btn-stop,
.input-wrapper .btn-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

.input-wrapper .btn-attach svg,
.input-wrapper .btn-dictate svg,
.input-wrapper .btn-stop svg,
.input-wrapper .btn-send svg {
  width: 20px;
  height: 20px;
  display: block;
}

.input-wrapper:focus-within { background: var(--bg-input); }

#message-input {
  width: 100%;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  max-height: 120px;
  min-height: 24px;
  padding: 0 2px 2px;
  /* Prevent translucent UA paints / chat bleed on Safari. */
  -webkit-appearance: none;
  appearance: none;
}

#message-input::placeholder { color: var(--text-quaternary); }
#message-input:disabled { opacity: 0.4; }

.btn-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111113;
  color: #fff;
  border-radius: 50%;
  padding: 0;
  border: none;
}

.btn-send.hidden {
  display: none !important;
}

.btn-send:disabled { background: var(--text-quaternary); }

.btn-stop {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-red);
  color: #fff;
  border-radius: 50%;
  padding: 0;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-stop.hidden {
  display: none !important;
}

.btn-stop:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-attach {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
}

.btn-attach:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-attach:active:not(:disabled) {
  background: var(--bg-hover);
}

.attach-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px 8px;
  -webkit-overflow-scrolling: touch;
}

.attach-preview.hidden {
  display: none !important;
}

.attach-preview-item {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  min-height: 64px;
  border-radius: 10px;
  border: 1px solid var(--shell-border, var(--border-color));
  background: var(--shell-surface, var(--bg-surface));
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.attach-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.92);
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.attach-preview-remove:active:not(:disabled) {
  transform: scale(0.94);
}

.attach-preview-remove:disabled {
  opacity: 0.45;
  cursor: default;
}

.attach-preview-item.pending {
  opacity: 0.65;
}

.attach-preview-item.error {
  border-color: var(--accent-red);
}

.attach-preview-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  display: block;
  background: #111;
}

.attach-preview-file {
  width: 64px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary, var(--shell-muted));
  text-transform: uppercase;
}

.attach-preview-name {
  font-size: 0.58rem;
  line-height: 1.2;
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-tertiary, var(--shell-muted));
}

/* --- Toast --- */

#toast-container {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.toast {
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: toastIn 0.2s ease-out;
  white-space: nowrap;
}

.toast.error { border-left: 2px solid var(--accent-red); }
.toast.success { border-left: 2px solid var(--accent-green); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Scrollbar (#messages) --- */

#messages {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

#messages::-webkit-scrollbar {
  width: 6px;
}

#messages::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

#messages::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

#messages::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 3px;
}

#messages::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* --- Window Bar --- */

.window-bar {
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
  padding: 0 4px;
}

.window-bar.hidden { display: none; }

.window-list {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 3px 0;
}

.window-list::-webkit-scrollbar { display: none; }

.window-item {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 10px;
  border-radius: 4px;
  background: transparent;
  color: var(--text-quaternary);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.window-item:active { transform: scale(0.97); }
.window-item.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
  font-weight: 500;
}

/* --- Tab Bar --- */

.tab-bar {
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
  padding: 0 4px;
  gap: 2px;
}

.tab-bar.hidden { display: none; }

.tab-list {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}

.tab-list::-webkit-scrollbar { display: none; }

.tab-item {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.tab-item:active { transform: scale(0.97); }
.tab-item.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: 500;
}

.tab-item .tab-status {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.tab-status.running { background: var(--accent-yellow); }
.tab-status.completed { background: var(--accent-green); }
.tab-status.error { background: var(--accent-red); }

.tab-new-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.tab-new-btn:active { background: var(--bg-hover); }

/* --- Mode/Model Pills --- */

.mode-model-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 0;
  min-width: 0;
  overflow: hidden;
}

.pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

.pill:active { background: var(--bg-hover); }

.pill-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
}

.pill-chevron {
  font-size: 8px;
  opacity: 0.5;
  line-height: 1;
}

.pill-context {
  cursor: default;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

.pill-context.pill-context--mid {
  color: var(--accent-yellow, #e6b84d);
  border-color: color-mix(in srgb, var(--accent-yellow, #e6b84d) 45%, var(--border-color));
}

.pill-context.pill-context--high {
  color: var(--accent-red, #e85d5d);
  border-color: color-mix(in srgb, var(--accent-red, #e85d5d) 45%, var(--border-color));
}

/* --- Bottom Sheet --- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.sheet-overlay.hidden { display: none; }

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-surface);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 12px 0;
  z-index: 210;
  max-height: 60vh;
  overflow-y: auto;
  animation: sheetSlideUp 0.2s ease-out;
}

.bottom-sheet.hidden { display: none; }

@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--border-color);
}

.sheet-link-url {
  margin: 0;
  padding: 10px 16px 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-tertiary, var(--text-secondary));
  word-break: break-all;
}

.sheet-item-muted {
  color: var(--text-secondary);
}

/* In-app link viewer — keeps standalone PWA from losing Back on PDFs */
.link-viewer {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #09090b);
  color: var(--text-primary);
}

.link-viewer.hidden {
  display: none;
}

.link-viewer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface, #121214);
  flex-shrink: 0;
}

.link-viewer-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-viewer-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.link-viewer-btn-primary {
  background: var(--shell-accent, #5b8cff);
  border-color: transparent;
  color: #fff;
}

.link-viewer-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0b0b0d;
}

.link-viewer-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.link-viewer-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-primary, #09090b);
}

.link-viewer-fallback.hidden {
  display: none;
}

.link-viewer-fallback-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.link-viewer-fallback-url {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  word-break: break-all;
  text-align: center;
}

.link-viewer-fallback-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.link-viewer-fallback-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-surface, #121214);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  cursor: pointer;
}

.link-viewer-fallback-btn.primary {
  background: var(--shell-accent, #5b8cff);
  border-color: transparent;
  color: #fff;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--font-sans);
  text-align: left;
}

.sheet-item:active { background: var(--bg-hover); }

.sheet-item.selected {
  color: var(--accent-blue);
  font-weight: 500;
}

.sheet-item-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

.sheet-item-check {
  font-size: 14px;
  color: var(--accent-blue);
}

.sheet-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sheet-item-label--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.sheet-item-tag {
  font-size: 10px;
  opacity: 0.5;
}

.sheet-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.sheet-item-badge {
  font-size: 12px;
  opacity: 0.5;
  line-height: 1;
}

.sheet-loading, .sheet-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.sheet-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 16px;
}

.sheet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
}

.toggle-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--bg-hover);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.toggle-switch.on {
  background: var(--accent-green);
}

.toggle-knob {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.toggle-switch.on .toggle-knob {
  transform: translateX(16px);
}

/* --- Desktop --- */

@media (min-width: 768px) {
  #messages {
    padding-left: max(16px, calc((100% - 800px) / 2));
    padding-right: max(16px, calc((100% - 800px) / 2));
  }
  .human-bubble { max-width: 75%; }
  .btn-approve, .btn-reject { height: 44px; }
  .approval-bar,
  .questionnaire-bar,
  #input-bar {
    padding-left: max(14px, calc((100% - 800px) / 2));
    padding-right: max(14px, calc((100% - 800px) / 2));
  }
}

/* --- Marketing-style mobile shell (camlogic) --- */

.shell-layout {
  --shell-bg: #12121f;
  --shell-surface: #1c1c2e;
  --shell-surface-2: #25253a;
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-accent: #5b8cff;
  --shell-green: #3ecf8e;
  --shell-yellow: #f0b429;
  --shell-text: #f4f4f8;
  --shell-muted: rgba(244, 244, 248, 0.55);
  /* Match Voice (handsfree) tab bar: content row + home-indicator inset. */
  --bottom-nav-height: 62px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--shell-bg);
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 0 0 1px var(--shell-border);
}

.shell-layout #screen-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* Keep composer above the fixed bottom tabs (same clearance as Voice). */
  padding-bottom: calc(var(--bottom-nav-height) + var(--sab));
}

.shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--sat)) 16px 10px;
  background: var(--shell-bg);
  border-bottom: 1px solid var(--shell-border);
  flex-shrink: 0;
}

.shell-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shell-logo {
  display: flex;
  color: var(--shell-green);
}

.shell-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.shell-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shell-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--shell-green);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(62, 207, 142, 0.12);
}

.shell-live-off {
  color: var(--shell-muted);
  background: rgba(255, 255, 255, 0.06);
}

.shell-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--shell-green);
  box-shadow: 0 0 8px rgba(62, 207, 142, 0.65);
}

.shell-live-off .shell-live-dot {
  background: #888;
  box-shadow: none;
}

.shell-menu-btn {
  border: none;
  background: transparent;
  color: var(--shell-text);
  font-size: 1.2rem;
  padding: 4px 6px;
  cursor: pointer;
}

.app-screen {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 12px;
  padding-bottom: calc(12px + var(--bottom-nav-height) + var(--sab));
}

.app-screen.hidden {
  display: none !important;
}

.agents-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 2px 8px;
}

.agents-top-bar .agents-section-label {
  margin: 0;
}

.agents-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.agents-view-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--shell-border);
  background: var(--shell-surface);
  gap: 0;
}

.agents-view-btn {
  border: 0;
  background: transparent;
  color: var(--shell-muted);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.agents-view-btn.is-active {
  background: rgba(91, 140, 255, 0.18);
  color: var(--shell-accent);
}

.agents-view-btn:active {
  opacity: 0.85;
}

.agents-list.hidden {
  display: none;
}

.people-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 88px;
}

.people-list.hidden {
  display: none;
}

.btn-agents-new-chat.hidden {
  display: none;
}

.people-group-label {
  margin: 14px 6px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shell-muted);
}

.person-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--shell-border);
  background: var(--shell-surface);
  border-radius: 16px;
  padding: 12px 14px;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.person-card:active {
  background: var(--bg-hover);
}

.person-card-avatar {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background-color: #1a2433;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.person-card-avatar-initials {
  opacity: 0;
  pointer-events: none;
}

.person-card-avatar.is-fallback {
  background-image: none !important;
  background-color: transparent;
  background: linear-gradient(145deg, #3d6ef5, #1f3f9a);
}

.person-card-avatar.is-fallback .person-card-avatar-initials {
  opacity: 1;
}

.person-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.person-card-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text-primary, #f2f4f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-card-title {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--shell-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-card-meta {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--shell-muted);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.people-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--shell-muted);
  font-size: 0.85rem;
}

.btn-agents-new-chat {
  border: 1px solid var(--shell-border);
  background: var(--shell-surface);
  color: var(--shell-accent);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-agents-new-chat:active {
  background: var(--bg-hover);
}

.agent-folder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 6px;
  border-radius: 12px;
  border: 1px solid var(--shell-border);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.agent-folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.agent-folder-header:active {
  background: rgba(255, 255, 255, 0.04);
}

.agent-folder-chevron {
  flex-shrink: 0;
  width: 1em;
  color: var(--shell-muted);
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.agent-folder:not(.is-collapsed) .agent-folder-chevron {
  transform: rotate(90deg);
}

.agent-folder-repo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  object-fit: contain;
  display: block;
}

.agent-folder-repo-icon.hidden {
  display: none;
}

.agent-folder-name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-folder-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--shell-accent);
  background: var(--shell-surface);
  color: inherit;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 650;
  padding: 4px 8px;
  outline: none;
}

.agent-folder-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--shell-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.agent-folder-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.agent-folder-count.is-zero {
  opacity: 0.45;
}

.agent-folder.is-empty .agent-folder-body:empty {
  display: none;
}

.agent-folder-time {
  min-width: 2.2em;
  text-align: right;
}

.agent-folder-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 2px;
}

.agent-folder-icon-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--shell-muted);
  border-radius: 9px;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.agent-folder-icon-btn:active,
.agent-folder-icon-btn:hover {
  color: var(--shell-accent);
  border-color: rgba(91, 140, 255, 0.35);
  background: rgba(91, 140, 255, 0.14);
}

.agent-folder-icon-btn.hidden {
  display: none;
}

.agent-folder-icon-btn-svg {
  display: block;
  pointer-events: none;
}

.agent-folder-new-chat.hidden {
  display: none;
}

.agent-folder-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 6px;
}

.agent-folder.is-collapsed .agent-folder-body {
  display: none;
}

.agents-section-label {
  margin: 10px 2px 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--shell-muted);
}

.agents-group-label {
  margin: 8px 2px 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--shell-muted);
}

.agents-group-label:first-child {
  margin-top: 0;
}

.agents-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-swipe-row {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  touch-action: pan-y;
}

.agent-swipe-row.archiving {
  opacity: 0.55;
  pointer-events: none;
}

.agent-swipe-actions {
  position: absolute;
  inset: 0 0 0 auto;
  width: 84px;
  display: flex;
  z-index: 0;
  background: #8f2f4a;
  /* Never show through translucent card tints unless the user is swiping. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.agent-swipe-row.is-revealing .agent-swipe-actions,
.agent-swipe-row.swiped .agent-swipe-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.agent-archive-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.agent-archive-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.95;
}

.agent-archive-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.92;
}

.agent-archive-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

.agent-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--shell-border);
  border-radius: 10px;
  /* Solid fill first so archive red never bleeds through tinted gradients. */
  background-color: var(--shell-surface);
  background-image: none;
  padding: 8px 10px;
  color: var(--shell-text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}

.agent-card:active {
  filter: brightness(1.03);
}

/* Selected agent uses the open chat flow only — no blue card wash. */

.agent-card.busy {
  border-color: rgba(240, 180, 41, 0.45);
  background-color: var(--shell-surface);
  background-image: linear-gradient(180deg, rgba(240, 180, 41, 0.12), rgba(240, 180, 41, 0));
}

.agent-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0;
  flex-shrink: 0;
}

.agent-card-dot.yellow { background: var(--shell-yellow); box-shadow: 0 0 8px rgba(240, 180, 41, 0.5); }
.agent-card-dot.blue { background: var(--shell-accent); box-shadow: 0 0 8px rgba(91, 140, 255, 0.5); }
.agent-card-dot.green { background: var(--shell-green); }
.agent-card-dot.red { background: var(--accent-red); }

/* SVG spinner — survives list updates better than CSS transform animation. */
.agent-card-dot.busy {
  width: 12px;
  height: 12px;
  margin-top: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.agent-card-dot.busy .agent-card-spinner {
  display: block;
  width: 12px;
  height: 12px;
}

.agent-card-dot:not(.busy) .agent-card-spinner {
  display: none;
}

.agent-card.busy .agent-card-preview {
  color: var(--shell-yellow);
  font-weight: 600;
}

.agent-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.agent-card-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 3px;
  align-self: stretch;
  min-width: 2.2em;
  flex-shrink: 0;
}

.agent-card.has-repo-icon .agent-card-aside {
  width: 48px;
  align-items: center;
}

.agent-card-repo-icon {
  width: 48px;
  flex: 1 1 auto;
  min-height: 40px;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.agent-card-repo-icon.hidden {
  display: none;
}

.agent-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}

.agent-swipe-row.is-renaming .agent-card,
.agent-swipe-row.rename-armed .agent-card {
  outline: 1px solid rgba(91, 140, 255, 0.55);
  outline-offset: -1px;
}

.agent-card-title.is-editing,
.agent-card-title-input {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  outline: none;
  border-radius: 4px;
  background: rgba(91, 140, 255, 0.12);
  padding: 1px 4px;
  margin: -1px -4px;
}

input.agent-card-title-input {
  display: block;
  width: 100%;
  min-width: 0;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  -webkit-appearance: none;
  appearance: none;
}

.agent-card-title {
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.25;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card-time {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--shell-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
}

.agent-card-time.hidden {
  display: none;
}

.agent-card-file {
  display: inline-block;
  margin-top: 2px;
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #8eb6ff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.14);
  border: 1px solid rgba(91, 140, 255, 0.28);
  box-sizing: border-box;
  align-self: flex-start;
}

.agent-card-file.hidden {
  display: none;
}

.agent-card-preview {
  font-size: 0.72rem;
  color: var(--shell-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card-preview.hidden {
  display: none;
}

.agent-card-badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(240, 180, 41, 0.15);
  color: var(--shell-yellow);
}

.agent-card-badge.hidden {
  display: none;
}

.agents-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--shell-muted);
}

.agents-empty .hint {
  margin-top: 8px;
  font-size: 0.85rem;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, 480px);
  height: calc(var(--bottom-nav-height) + var(--sab));
  padding-bottom: var(--sab);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(18, 18, 31, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--shell-border);
  z-index: 50;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--shell-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px 6px;
  text-decoration: none;
  box-sizing: border-box;
  min-height: var(--bottom-nav-height);
}

.bottom-nav-item.active {
  color: var(--shell-accent);
}

.bottom-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell-layout .chat-subheader {
  height: auto;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--shell-surface);
}

.shell-layout .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.btn-back {
  border: none;
  background: transparent;
  color: var(--shell-accent);
  font-size: 1.25rem;
  padding: 4px 8px 4px 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-session-title {
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.shell-layout #connection-text.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.shell-layout #window-bar,
.shell-layout #tab-bar {
  display: none !important;
}

.shell-layout #messages {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Keep chat paint inside this layer; do not bleed under the input bar. */
  contain: layout paint;
}

.settings-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 2px 8px;
}

.settings-top-bar .agents-section-label {
  margin: 0;
}

.btn-settings-done {
  border: 1px solid var(--shell-border);
  background: var(--shell-surface);
  color: var(--shell-accent);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-settings-done:active {
  background: var(--bg-hover);
}

.settings-card {
  background: var(--shell-surface);
  border: 1px solid var(--shell-border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.settings-card h3 {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.settings-dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  font-size: 0.84rem;
}

.settings-dl dt {
  color: var(--shell-muted);
}

.settings-copy {
  font-size: 0.84rem;
  color: var(--shell-muted);
  line-height: 1.5;
  margin: 0 0 8px;
}

.settings-copy code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.settings-link-btn {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: var(--accent, #3794ff);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.settings-link-btn:hover {
  filter: brightness(1.08);
}

.settings-copy-muted {
  font-size: 0.88rem;
  opacity: 0.85;
}

.settings-copy-muted a {
  color: var(--accent, #3794ff);
}

.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--shell-border);
}

.settings-toggle-text {
  flex: 1;
  min-width: 0;
}

.settings-toggle-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.settings-toggle-row .settings-copy {
  margin-bottom: 0;
}

.settings-profile-row {
  flex-wrap: wrap;
  gap: 10px 12px;
}

.settings-profile-toggle {
  flex-shrink: 0;
}

.settings-toggle-row .toggle-switch {
  flex-shrink: 0;
  margin-top: 2px;
}

@media (min-width: 768px) {
  body {
    background: #0a0a12;
  }
  .shell-layout {
    min-height: 100dvh;
    border-radius: 0;
  }
}

/* --- Dictation (Whisper STT) --- */

.dictation-bar {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(91, 140, 255, 0.1);
  border: 1px solid rgba(91, 140, 255, 0.28);
}

.dictation-bar.hidden {
  display: none;
}

.dictation-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dictation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e34671;
  animation: dictation-pulse 1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes dictation-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.dictation-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
}

.dictation-copy strong {
  font-weight: 600;
}

.dictation-copy span {
  color: var(--shell-muted);
  font-size: 0.75rem;
}

.dictation-timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--shell-muted);
}

.btn-dictation-stop {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: #e34671;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-dictation-stop.hidden {
  display: none;
}

.btn-dictation-stop:active {
  transform: scale(0.97);
}

.dictation-live {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--shell-text);
  line-height: 1.4;
}

.mic-https-banner {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(30, 58, 95, 0.55);
  border: 1px solid rgba(37, 99, 235, 0.45);
  font-size: 0.8rem;
  line-height: 1.45;
  color: #dbeafe;
}

.mic-https-banner.hidden {
  display: none;
}

.mic-https-banner a {
  color: #93c5fd;
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
}

.btn-dictate {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
}

.btn-dictate.recording {
  background: rgba(227, 70, 113, 0.15);
  border-color: rgba(227, 70, 113, 0.45);
  color: #f9a8c9;
  box-shadow: 0 0 0 3px rgba(227, 70, 113, 0.12);
}

.btn-dictate.transcribing {
  opacity: 0.55;
  cursor: wait;
}

.btn-dictate:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.shell-layout #input-bar {
  position: relative;
  z-index: 30;
  /* Match chat background — no separate blue/purple footer panel. */
  background: var(--shell-bg);
  border-top: none;
  background-clip: padding-box;
  box-shadow: none;
  /* Wider grey outbox: less side padding than the default input bar. */
  padding: 6px 6px 8px;
}

.shell-layout .input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: var(--shell-surface-2);
  border: none;
  border-radius: 24px;
  box-shadow: none;
  padding: 12px 12px 8px;
}

.shell-layout .input-wrapper .btn-attach,
.shell-layout .input-wrapper .btn-dictate {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--shell-text);
}

.shell-layout .input-wrapper .btn-dictate {
  background: #0f0f12;
  color: #fff;
}

.shell-layout .input-wrapper .btn-send {
  background: #0f0f12;
  color: #fff;
}

.shell-layout .input-wrapper .btn-stop {
  background: #3a3a42;
  color: #fff;
}

.shell-layout .input-wrapper:focus-within {
  border: none;
  box-shadow: none;
}

.shell-layout #message-input {
  background: transparent;
  color: var(--shell-text);
}

.shell-layout .mode-model-bar .pill {
  background: transparent;
  border-color: transparent;
  color: var(--shell-muted);
  padding: 4px 6px;
  font-size: 13px;
}

.shell-layout .composer-queue-bar,
.shell-layout .approval-bar,
.shell-layout .questionnaire-bar,
.shell-layout .attach-preview,
.shell-layout .dictation-bar {
  position: relative;
  z-index: 25;
  background: var(--shell-bg);
}

.shell-layout .composer-queue-bar {
  background: rgba(255, 255, 255, 0.04);
}

/* --- Desktop master-detail (Agents | Chat) --- */

.desktop-split {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.desktop-split.is-suppressed {
  display: none;
}

.desktop-split > .app-screen:not(.hidden) {
  flex: 1;
  min-height: 0;
}

.desktop-splitter {
  display: none;
}

.layout-desktop .shell-layout {
  max-width: none;
  width: 100%;
  margin: 0;
  box-shadow: none;
}

.layout-desktop .bottom-nav {
  display: none !important;
}

.layout-desktop .shell-layout #screen-chat {
  padding-bottom: 0;
}

.layout-desktop .btn-back {
  display: none !important;
}

.layout-desktop .desktop-split {
  flex-direction: row;
  align-items: stretch;
}

.layout-desktop .desktop-split > .app-screen {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding-bottom: 12px;
}

.layout-desktop #screen-agents {
  flex: 0 0 var(--desktop-agents-width, 320px);
  width: var(--desktop-agents-width, 320px);
  max-width: 55%;
  border-right: none;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}

.layout-desktop #screen-agents .agents-list,
.layout-desktop #screen-agents .people-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.layout-desktop #screen-chat {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.layout-desktop #screen-settings {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--shell-bg);
  padding-bottom: 12px;
}

.layout-desktop .desktop-splitter {
  display: block;
  flex: 0 0 6px;
  width: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
  touch-action: none;
}

.layout-desktop .desktop-splitter::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: var(--shell-border);
}

.layout-desktop .desktop-splitter:hover::before,
.layout-desktop .desktop-splitter:focus-visible::before,
.layout-desktop.desktop-split-dragging .desktop-splitter::before {
  background: var(--shell-accent);
  width: 3px;
  left: 1.5px;
}

.layout-desktop.desktop-split-dragging,
.layout-desktop.desktop-split-dragging * {
  cursor: col-resize !important;
  user-select: none !important;
}

.layout-desktop .agent-card.is-selected {
  outline: 1px solid rgba(91, 140, 255, 0.55);
  background: rgba(91, 140, 255, 0.12);
}

.layout-desktop .desktop-split.desktop-settings-open > .app-screen,
.layout-desktop .desktop-split.desktop-settings-open > .desktop-splitter {
  visibility: hidden;
  pointer-events: none;
}