/* ClauTerm — Mobile-first CSS */
/* Dark theme, OLED-friendly, 48px touch targets, safe area insets */

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

/* SVG icons inside buttons */
button svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

/* Spinner for loading states */
.icon-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: icon-spin 0.6s linear infinite;
}
@keyframes icon-spin { to { transform: rotate(360deg); } }

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-hover: #1c2128;
  --border: #30363d;
  --text: #c9d1d9;
  --text-dim: #8b949e;
  --text-bright: #f0f6fc;
  --green: #3fb950;
  --green-dim: #238636;
  --amber: #d29922;
  --amber-dim: #9e6a03;
  --red: #f85149;
  --red-dim: #da3633;
  --blue: #58a6ff;
  --blue-dim: #1f6feb;

  --radius: 8px;
  --radius-lg: 12px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────
   Header
   ────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  padding-top: max(6px, var(--safe-top));
  padding-left: max(10px, var(--safe-left));
  padding-right: max(10px, var(--safe-right));
  background: var(--bg-card, #161b22);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 32px;
  transition: background 0.2s, border-bottom-color 0.2s;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  min-width: 0;
  overflow: hidden;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
}

#header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Status dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.connected {
  background: var(--green);
}

.status-dot.reconnecting {
  background: var(--amber);
  animation: pulse 1s infinite;
}

.status-dot.error {
  background: var(--red);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Inline desktop session header: hidden by default (mobile), shown on desktop via media query */
.desktop-session-header {
  display: none;
}

/* Agent status badge */
.agent-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.agent-status-badge.idle {
  background: var(--green-dim);
  color: var(--green);
}

.agent-status-badge.working {
  background: var(--blue-dim);
  color: var(--blue);
  animation: pulse 1.5s infinite;
}

.agent-status-badge.needs-input {
  background: var(--amber-dim);
  color: var(--amber);
  animation: pulse 1s infinite;
}

/* Close session button (header) */
.btn-close-session {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.btn-close-session:hover,
.btn-close-session:active {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

.btn-close-session.visible {
  display: flex;
}

/* Controller badge */
.controller-badge {
  display: none;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--blue-dim);
  color: var(--text-bright);
}

.controller-badge.active {
  display: inline-block;
}

.observer-badge {
  display: none;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--border);
  color: var(--text-dim);
}

.observer-badge.active {
  display: inline-block;
}

/* ──────────────────────────────────
   Views (routing)
   ────────────────────────────────── */
.view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.view.active {
  display: flex;
}

/* ──────────────────────────────────
   Dashboard
   ────────────────────────────────── */
.dashboard {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dashboard-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pull-to-refresh indicator */
.pull-indicator {
  text-align: center;
  padding: 8px 0;
  color: var(--text-dim);
  font-size: 13px;
  transition: opacity 0.2s;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.pull-indicator.visible {
  opacity: 1;
  height: auto;
  padding: 12px 0;
}

.pull-indicator.refreshing {
  opacity: 1;
  height: auto;
  padding: 12px 0;
}

/* ──────────────────────────────────
   Project Tree
   ────────────────────────────────── */
.project-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tree-project {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s;
}

.tree-project.has-running {
  border-color: var(--green-dim);
}

.tree-project-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.tree-project-header:active {
  background: var(--surface-hover);
}

.tree-chevron {
  font-size: 10px;
  color: var(--text-dim);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.tree-chevron.expanded {
  transform: rotate(90deg);
}

/* tree-project-icon removed — no longer used */

.tree-project-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-session-count {
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  background: var(--green-dim);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.tree-color-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  transition: transform 0.12s;
}

.tree-color-dot:active {
  transform: scale(1.3);
}

.tree-add-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: none;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
  touch-action: none;
}

.tree-add-btn:active {
  background: var(--blue);
  color: var(--bg);
}

.tree-file-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid var(--text-dim);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
  margin-left: -4px;
}
.tree-file-btn:active {
  background: var(--surface-2, #21262d);
  border-color: var(--text);
  color: var(--text);
}

.tree-project-children {
  display: none;
  border-top: 1px solid var(--border);
}

.tree-project.expanded .tree-project-children {
  display: block;
}

.tree-conversation + .tree-conversation {
  border-top: 1px solid rgba(48, 54, 61, 0.4);
}

/* Status dots (colored indicators for running sessions) */
.tree-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-blue {
  background: var(--blue);
  animation: pulse 1.5s infinite;
}

.dot-green {
  background: var(--green);
}

.dot-orange {
  background: var(--amber);
  animation: pulse 1s infinite;
}

/* Active conversation row (has a running session) */
.tree-conversation-active {
  background: rgba(22, 27, 34, 0.5);
}

/* Currently viewed session (desktop sidebar highlight) */
.tree-conversation-selected {
  background: rgba(88, 166, 255, 0.12);
  border-left: 2px solid var(--accent, #58a6ff);
}

/* Unfocused split-pane session (dimmer highlight) */
.tree-conversation-split {
  background: rgba(88, 166, 255, 0.06);
  border-left: 2px solid rgba(88, 166, 255, 0.35);
}

.tree-convo-active-label {
  color: var(--text-bright);
}

.tree-conversation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 38px;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.tree-conversation:active {
  background: var(--surface-hover);
}

/* tree-convo-icon removed — no longer used */

.tree-convo-preview {
  flex: 1;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-convo-labeled {
  color: var(--text-main, #e6edf3);
}

.tree-convo-edit-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  opacity: 0;
  padding: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tree-conversation:hover .tree-convo-edit-btn,
.tree-conversation:focus-within .tree-convo-edit-btn {
  opacity: 0.6;
}
.tree-convo-edit-btn:hover,
.tree-convo-edit-btn:active {
  opacity: 1 !important;
}
.tree-convo-hide-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  opacity: 0;
  padding: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tree-conversation:hover .tree-convo-hide-btn,
.tree-conversation:focus-within .tree-convo-hide-btn {
  opacity: 0.4;
}
.tree-convo-hide-btn:hover,
.tree-convo-hide-btn:active {
  opacity: 1 !important;
  color: #f85149;
}
/* Kill session button (power-off icon) in sidebar */
.tree-convo-kill-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  opacity: 0;
  padding: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tree-conversation:hover .tree-convo-kill-btn,
.tree-conversation:focus-within .tree-convo-kill-btn {
  opacity: 0.4;
}
.tree-convo-kill-btn:hover,
.tree-convo-kill-btn:active {
  opacity: 1 !important;
  color: #f85149;
}
/* Always show on touch devices (no hover) */
@media (hover: none) {
  .tree-convo-edit-btn { opacity: 0.5; }
  .tree-convo-hide-btn { opacity: 0.35; }
  .tree-convo-kill-btn { opacity: 0.35; }
}

.tree-convo-rename-input {
  flex: 1;
  font-size: 13px;
  color: var(--text-main, #e6edf3);
  background: var(--surface-hover, #161b22);
  border: 1px solid var(--accent, #58a6ff);
  border-radius: 4px;
  padding: 4px 8px;
  outline: none;
  min-width: 0;
  font-family: inherit;
}

.tree-convo-time {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
  opacity: 0.7;
}

.tree-loading, .tree-empty {
  padding: 12px 14px 12px 38px;
  font-size: 13px;
  color: var(--text-dim);
}

.tree-show-more {
  display: block;
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: none;
  border: none;
  border-top: 1px solid rgba(48, 54, 61, 0.4);
  color: var(--blue);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.tree-show-more:active {
  background: var(--surface-hover);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}

.empty-state h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--text);
}

.empty-state p {
  font-size: 14px;
  line-height: 1.6;
}

.empty-state code {
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ──────────────────────────────────
   Token Input View
   ────────────────────────────────── */

.token-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
}

.token-container h2 {
  font-size: 22px;
  color: var(--text-bright);
  margin-bottom: 12px;
}

.token-container p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}

.token-hint {
  display: block;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--blue);
  margin-bottom: 24px;
}

.token-input-row {
  display: flex;
  gap: 8px;
}

.token-field {
  flex: 1;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-mono);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  min-height: 48px;
}

.token-field:focus {
  border-color: var(--blue);
}

.token-field::placeholder {
  color: var(--text-dim);
}

.btn-token-submit {
  background: var(--green);
  color: #000;
  min-height: 48px;
  font-size: 16px;
  padding: 12px 20px;
}

.token-error {
  color: var(--red);
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
}

/* Auth tabs (Login / Token) */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  min-height: 44px;
}

.auth-tab.active {
  background: var(--blue);
  color: #000;
}

.auth-panel {
  display: none;
}

.auth-panel.active {
  display: block;
}

.login-field {
  margin-bottom: 12px;
}

.login-field .token-field {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.auth-panel .btn-token-submit {
  width: 100%;
  margin-top: 4px;
}

/* ──────────────────────────────────
   Session View
   ────────────────────────────────── */

/* Output area */
.output {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* xterm.js container — sibling of #output, fills session view */
.xterm-container {
  display: none;
  flex: 1;
  overflow: hidden;
  position: relative;
  /* No padding — xterm manages its own viewport */
}

/* Scroll-to-bottom indicator */
.scroll-indicator {
  display: none;
  position: fixed;
  bottom: 210px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.scroll-indicator.visible {
  display: flex;
}

/* ──────────────────────────────────
   Approval Card
   ────────────────────────────────── */
.approval-card {
  display: none;
  flex-shrink: 0;
  background: var(--surface);
  border-top: 2px solid var(--amber);
  padding: 12px;
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
  animation: slideUp 0.2s ease-out;
}

.approval-card.visible {
  display: block;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.approval-tool {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--amber);
  margin-bottom: 4px;
}

.approval-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
  word-break: break-word;
}

.approval-detail {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  max-height: 120px;
  overflow-y: auto;
  word-break: break-all;
  white-space: pre-wrap;
}

.approval-detail.visible {
  display: block;
}

.approval-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.approval-feedback-row {
  display: flex;
  gap: 8px;
}

.approval-feedback-input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  min-height: 40px;
}

.approval-feedback-input::placeholder {
  color: var(--text-dim);
}

.approval-feedback-input:focus {
  outline: none;
  border-color: var(--blue);
}

/* ──────────────────────────────────
   Question Card (AskUserQuestion)
   ────────────────────────────────── */
.question-card {
  display: none;
  flex-shrink: 0;
  background: var(--surface);
  border-top: 2px solid var(--blue);
  padding: 12px;
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
  animation: slideUp 0.2s ease-out;
  max-height: 60vh;
  overflow-y: auto;
}

.question-card.visible {
  display: block;
}

.question-group {
  margin-bottom: 12px;
}

.question-group:last-of-type {
  margin-bottom: 8px;
}

.question-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue);
  margin-bottom: 4px;
}

.question-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
}

.question-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

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

.question-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  min-height: 48px;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font-sans);
  color: var(--text);
}

.question-option:active {
  background: rgba(88, 166, 255, 0.08);
}

.question-option.selected {
  border-color: var(--blue);
  background: rgba(31, 111, 235, 0.12);
}

.question-option:disabled {
  opacity: 0.5;
  cursor: default;
}

.question-option-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

.question-option-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
  margin-top: 2px;
}

/* "Other" free-text option */
.question-option-other {
  border-style: dashed;
}

.question-other-wrap {
  display: none;
  margin-top: 6px;
}

.question-other-wrap.visible {
  display: block;
}

.question-other-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text);
  min-height: 44px;
}

.question-other-input::placeholder {
  color: var(--text-dim);
}

.question-other-input:disabled {
  opacity: 0.5;
}

/* Button row: Submit + Cancel */
.question-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.question-submit {
  flex: 1;
  min-height: 48px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
}

.question-submit:disabled {
  opacity: 0.4;
  cursor: default;
}

.question-submit:active:not(:disabled) {
  opacity: 0.8;
}

.question-cancel {
  min-height: 48px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
}

.question-cancel:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.question-cancel:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ──────────────────────────────────
   Re-Auth Card (CLI re-authentication)
   ────────────────────────────────── */
.reauth-card {
  display: none;
  flex-shrink: 0;
  background: var(--surface);
  border-top: 2px solid var(--amber);
  padding: 12px;
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
  animation: slideUp 0.2s ease-out;
}

.reauth-card.visible {
  display: block;
}

.reauth-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.reauth-lock-icon {
  color: var(--amber);
  flex-shrink: 0;
}

.reauth-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.reauth-cli-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--amber);
  background: rgba(210, 153, 34, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}

.reauth-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  min-height: 48px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.reauth-link:active {
  background: rgba(88, 166, 255, 0.08);
}

.reauth-link svg {
  color: var(--text-dim);
  flex-shrink: 0;
}

.reauth-code-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 16px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  min-height: 48px;
  margin-bottom: 10px;
}

.reauth-code-input::placeholder {
  color: var(--text-dim);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.reauth-code-input:focus {
  outline: none;
  border-color: var(--blue);
}

.reauth-code-input:disabled {
  opacity: 0.5;
}

.reauth-buttons {
  display: flex;
  gap: 8px;
}

.btn-reauth-submit {
  flex: 1;
  min-height: 48px;
  background: var(--green-dim);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-reauth-submit:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-reauth-submit:active:not(:disabled) {
  opacity: 0.8;
}

.btn-reauth-cancel {
  min-width: 48px;
  min-height: 48px;
  background: var(--surface-hover);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-reauth-cancel:active {
  opacity: 0.8;
}

.btn-reauth-cancel:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Device code display (Codex-style: user enters code in browser) */
.reauth-device-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px;
  margin-bottom: 10px;
  text-align: center;
}

.reauth-device-code-label {
  font-size: 13px;
  color: var(--text-dim);
}

.reauth-device-code-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--amber);
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: all;
  -webkit-user-select: all;
}

.reauth-device-code-value:active {
  background: rgba(210, 153, 34, 0.1);
  border-color: var(--amber);
}

.reauth-device-code-value.copied {
  background: rgba(63, 185, 80, 0.1);
  border-color: var(--green);
  color: var(--green);
}

.reauth-device-code-hint {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.7;
}

/* Dashboard: reauth key badge */
.tree-reauth-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--amber);
  animation: reauth-pulse 2s ease-in-out infinite;
}

@keyframes reauth-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ──────────────────────────────────
   Action Bar (bottom-anchored)
   ────────────────────────────────── */
.action-bar {
  display: none;
  flex-shrink: 0;
  padding: 6px 10px;
  padding-bottom: max(6px, var(--safe-bottom));
  padding-left: max(10px, var(--safe-left));
  padding-right: max(10px, var(--safe-right));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.action-bar.visible {
  display: block;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  min-height: 36px;
}

.input-row {
  display: flex;
  gap: 4px;
}

/* ──────────────────────────────────
   Buttons
   ────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  min-height: 48px;
  padding: 12px 16px;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:active {
  opacity: 0.7;
}

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

.btn-approve {
  flex: 1.2;
  background: var(--green);
  color: #000;
  min-height: 48px;
}

.btn-allow-always {
  flex: 0.8;
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
  min-height: 48px;
}

.btn-allow-always:disabled {
  opacity: 0.4;
  color: var(--muted);
  border-color: var(--muted);
}

.btn-allow-always.hidden {
  display: none;
}

.btn-reject {
  flex: 0.8;
  background: var(--border);
  color: var(--text);
  min-height: 48px;
}

.btn-interrupt {
  background: var(--amber);
  color: #000;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 0;
}

.btn-send {
  background: var(--blue);
  color: #000;
  width: 48px;
  min-height: 48px;
  border: none;
  border-radius: var(--radius);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.btn-send:active {
  opacity: 0.7;
}

/* Import button */
.btn-import {
  width: 48px;
  min-height: 48px;
  background: var(--surface-2, #21262d);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 24px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.btn-import:active { opacity: 0.7; }
.btn-import:disabled { opacity: 0.3; cursor: not-allowed; }

/* Compose tray */
.compose-tray {
  display: none;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.compose-tray::-webkit-scrollbar { display: none; }
.compose-tray.has-items { display: flex; }

/* Attachment chips */
.compose-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2, #21262d);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  flex-shrink: 0;
  max-width: 200px;
}
.compose-chip-uploading { opacity: 0.6; }
.compose-chip-error { border-color: var(--red, #f85149); }
.compose-chip-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.compose-chip-name {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
.compose-chip-size {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.compose-chip-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: chip-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes chip-spin { to { transform: rotate(360deg); } }
.compose-chip-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.compose-chip-remove:active { color: var(--red, #f85149); }

/* Feedback input (textarea, auto-growing) */
.feedback-input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 15px;
  font-family: var(--font-sans);
  min-height: 48px;
  max-height: 120px;
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
}

.feedback-input::placeholder {
  color: var(--text-dim);
}

.feedback-input:focus {
  outline: none;
  border-color: var(--blue);
}

.feedback-input:read-only {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ──────────────────────────────────
   Connection banner
   ────────────────────────────────── */
.connection-banner {
  display: none;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.connection-banner.reconnecting {
  display: block;
  background: var(--amber-dim);
  color: var(--text-bright);
}

.connection-banner.error {
  display: block;
  background: var(--red-dim);
  color: var(--text-bright);
}

.connection-banner.offline {
  display: block;
  background: var(--amber-dim);
  color: var(--text-bright);
}

/* ──────────────────────────────────
   Push Notifications & Dashboard Footer
   ────────────────────────────────── */
.dashboard-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.dashboard-footer-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
  padding: 0;
}
.btn-icon:active {
  background: var(--surface-hover);
}
.btn-icon.active {
  background: var(--green-dim);
  border-color: var(--green);
}

/* Push toggle row */
.push-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.push-icon {
  color: var(--text-dim);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.push-icon.active {
  color: var(--green);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 13px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--green-dim);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--green);
}
.toggle-switch.hidden {
  display: none;
}

.push-status {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Voice API key row */
.voice-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.voice-key-icon {
  color: var(--text-dim);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s;
}
.voice-key-icon.active {
  color: var(--green);
}
.voice-key-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.voice-key-input:focus {
  border-color: var(--blue);
}
.voice-key-input::placeholder {
  color: var(--text-dim);
}
.btn-voice-key-save {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.btn-voice-key-save:active {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.btn-voice-key-save.saved {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.voice-key-status {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  min-height: 16px;
}
.voice-key-status.success {
  color: var(--green);
}
.voice-key-status.error {
  color: var(--red);
}

/* ──────────────────────────────────
   Install Banner
   ────────────────────────────────── */
.install-banner {
  display: none;
  padding: 12px 16px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin: 16px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.install-banner.visible { display: flex; }
.btn-install {
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-install-dismiss {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

/* ──────────────────────────────────
   Utilities
   ────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────
   Virtual Navigation Keys
   ────────────────────────────────── */
.nav-keys {
  display: none;
  flex-shrink: 0;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.nav-keys.visible { display: flex; }

.nav-key {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.nav-key:active {
  transform: scale(0.92);
  background: var(--blue-dim);
  color: var(--text-bright);
  border-color: var(--blue);
}

.nav-key:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* Ctrl button */
.nav-key-ctrl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.nav-key-ctrl-active { background: var(--blue); color: var(--text-bright); border-color: var(--blue); }
.nav-key-ctrl-locked { background: var(--blue); color: var(--text-bright); border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-dim); }

/* Overflow button */
.nav-key-overflow { font-size: 14px; letter-spacing: 2px; }

/* Ctrl overlay */
.ctrl-overlay {
  display: none;
  position: fixed;
  bottom: calc(192px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  z-index: 25;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.ctrl-overlay.visible { display: flex; }
.ctrl-overlay-label { color: var(--blue); font-weight: 600; font-size: 16px; }
.ctrl-input {
  flex: 1;
  height: 44px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 20px;
  text-align: center;
  text-transform: lowercase;
}
.ctrl-input:focus { outline: none; border-color: var(--blue); }
.ctrl-overlay-cancel {
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
}

/* Overflow panel */
.overflow-panel {
  display: none;
  position: fixed;
  bottom: calc(192px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  z-index: 25;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.overflow-panel.visible { display: grid; }

@media (prefers-reduced-motion: reduce) {
  .nav-key { transition: none; }
}

/* ──────────────────────────────────
   Search Bar
   ────────────────────────────────── */
.btn-search {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}

.btn-search:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

.btn-search:active {
  color: var(--text-bright);
}

.search-bar {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 20;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}

.search-input:focus {
  border-color: var(--blue);
}

.search-input::placeholder {
  color: var(--text-dim);
}

.btn-search-nav {
  width: 40px;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-search-nav:active {
  background: var(--surface-hover);
}

.btn-search-close {
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-search-close:active {
  color: var(--text-bright);
}

/* ──────────────────────────────────
   Quick Action Buttons
   ────────────────────────────────── */
.quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.quick-actions::-webkit-scrollbar {
  display: none;
}

.btn-quick-action {
  background: var(--surface-hover);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  min-height: 36px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-quick-action:active {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--text-bright);
}

/* ──────────────────────────────────
   Audit Log View
   ────────────────────────────────── */
/* Audit link uses .btn-icon styles from dashboard-footer */

.audit-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

.audit-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.audit-filter {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.audit-count {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}

.audit-loading {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-size: 14px;
}

.audit-empty {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-size: 14px;
}

.audit-entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.audit-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
}

.audit-danger {
  background: var(--red-dim);
  color: var(--text-bright);
}

.audit-success {
  background: var(--green-dim);
  color: var(--text-bright);
}

.audit-info {
  background: var(--blue-dim);
  color: var(--text-bright);
}

.audit-warn {
  background: var(--amber-dim);
  color: var(--text-bright);
}

.audit-dim {
  background: var(--border);
  color: var(--text-dim);
}

.audit-ts {
  font-size: 12px;
  color: var(--text-dim);
}

.audit-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.4;
  word-break: break-all;
}

.btn-load-more {
  display: none;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.btn-load-more:active {
  background: var(--surface-hover);
}

.btn-load-more:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* (Create session modal styles removed — replaced by project tree) */

/* (Kill session removed from header — kill only available from sidebar/dashboard) */

/* ──────────────────────────────────
   Feature Overlay
   ────────────────────────────────── */
.feature-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.feature-overlay.visible {
  display: flex;
}
.feature-overlay .view {
  display: none !important;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.feature-overlay .view.active {
  display: flex !important;
}
.feature-overlay-header {
  display: flex;
  align-items: center;
  height: 52px;
  min-height: 52px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.feature-overlay-back {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.feature-overlay-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* ──────────────────────────────────
   Confirm Modal
   ────────────────────────────────── */
.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
}

.confirm-modal.visible {
  display: flex;
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.confirm-sheet {
  position: relative;
  width: calc(100% - 48px);
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  animation: slideUp 0.2s ease-out;
}

.confirm-sheet p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 20px;
  text-align: center;
}

.confirm-buttons {
  display: flex;
  gap: 10px;
}

.btn-confirm-destructive {
  flex: 1;
  background: var(--red);
  color: #fff;
  min-height: 52px;
}

.btn-confirm-cancel {
  flex: 1;
  background: var(--border);
  color: var(--text);
  min-height: 52px;
}

/* ──────────────────────────────────
   Add Project Modal
   ────────────────────────────────── */
.add-project-sheet {
  position: relative;
  width: calc(100% - 32px);
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  animation: slideUp 0.2s ease-out;
}

.add-project-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 16px;
}

.add-project-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}

.add-project-option:active {
  border-color: var(--blue);
  background: var(--surface-hover);
}

.add-project-option-icon {
  flex-shrink: 0;
  color: var(--blue);
  display: flex;
  align-items: center;
}

.add-project-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-project-option-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-bright);
}

.add-project-option-desc {
  font-size: 12px;
  color: var(--text-dim);
}

.add-project-input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}

.add-project-input:focus {
  border-color: var(--blue);
  outline: none;
}

.add-project-input::placeholder {
  color: var(--text-dim);
}

.add-project-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-family: var(--font-mono, monospace);
  min-height: 16px;
}

.add-project-error {
  font-size: 13px;
  color: var(--red);
  margin-bottom: 6px;
  min-height: 0;
}

.add-project-error:empty {
  display: none;
}

.add-project-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 10px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}

.add-project-dropzone span {
  font-size: 14px;
}

.upload-picker-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.upload-picker-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

.upload-picker-btn:active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.add-project-dropzone.drag-over {
  border-color: var(--blue);
  background: rgba(59, 130, 246, 0.08);
}

.add-project-file-list {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.add-project-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}

.add-project-file-name {
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.add-project-file-size {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
  margin-right: 8px;
}

.add-project-file-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.add-project-file-remove:active {
  color: var(--red);
}

.add-project-progress {
  margin: 10px 0;
}

.add-project-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.add-project-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  width: 0;
  transition: width 0.3s ease;
}

.add-project-progress-fill.indeterminate {
  width: 30%;
  animation: progressSlide 1.5s ease-in-out infinite;
}

@keyframes progressSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(430%); }
}

.add-project-progress-text {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  display: block;
}

.add-project-buttons,
.add-project-btns {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.add-project-btn-back,
.add-project-back-btn {
  flex: 0 0 52px;
  background: var(--border);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  min-height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.add-project-btn-back:active,
.add-project-back-btn:active {
  background: var(--surface-hover);
}

.add-project-btn-submit,
.add-project-submit-btn {
  flex: 1;
  background: rgba(88, 166, 255, 0.15);
  color: var(--blue);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: var(--radius);
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.add-project-btn-submit:active,
.add-project-submit-btn:active {
  background: rgba(88, 166, 255, 0.25);
}

.add-project-btn-submit:disabled,
.add-project-submit-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.add-project-btn-session {
  flex: 1;
  background: rgba(63, 185, 80, 0.15);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.3);
  border-radius: var(--radius);
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.add-project-btn-session:active {
  background: rgba(63, 185, 80, 0.25);
}

.add-project-success-msg {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* ──────────────────────────────────
   Toast notification
   ────────────────────────────────── */
.toast {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text);
  z-index: 70;
  animation: toastIn 0.2s ease-out;
  pointer-events: none;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================================
   Structured View — Conversation UI
   ========================================================================== */

.structured-container {
  --sv-agent-color: #e8944a;
  --sv-agent-accent: rgba(232, 140, 68, 0.45);
  display: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  gap: 16px;
}

.structured-container.sv-cli-claude {
  --sv-agent-color: #e8944a;
  --sv-agent-accent: rgba(232, 140, 68, 0.45);
}

.structured-container.sv-cli-codex {
  --sv-agent-color: #10a37f;
  --sv-agent-accent: rgba(16, 163, 127, 0.45);
}

.structured-container.sv-cli-gemini {
  --sv-agent-color: #4285f4;
  --sv-agent-accent: rgba(66, 133, 244, 0.45);
}

/* View toggle button */
.btn-view-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-view-toggle.visible {
  display: flex;
}

/* Empty state */
.sv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  flex: 1;
}

.sv-empty-icon {
  font-size: 40px;
  color: var(--text-dim);
  margin-bottom: 12px;
  opacity: 0.5;
}

.sv-empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.sv-empty-hint {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 280px;
}

/* Turn card */
.sv-turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Compaction separator — horizontal rule between turns */
.sv-compaction {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  flex-shrink: 0;
  animation: sv-compaction-enter 0.5s ease-out;
}

@keyframes sv-compaction-enter {
  0% { opacity: 0; transform: scaleX(0.5); }
  100% { opacity: 1; transform: scaleX(1); }
}

.sv-compaction-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f59e0b44, transparent);
}

.sv-compaction-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f59e0b18;
  border: 1px solid #f59e0b44;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 11px;
  color: #f59e0b;
  white-space: nowrap;
  flex-shrink: 0;
}

.sv-compaction-icon {
  font-size: 12px;
}

.sv-compaction-tokens {
  color: #f59e0b99;
  font-size: 10px;
}

/* User bubble — right-aligned chat style */
.sv-user-bubble {
  background: #122640;
  border: 1px solid #1a3a5c;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 82%;
  align-self: flex-end;
}

.sv-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sv-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sv-label-user {
  color: var(--blue);
}

.sv-label-agent {
  color: var(--sv-agent-color);
}

.sv-time {
  font-size: 11px;
  color: var(--text-dim);
}

.sv-user-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-bright);
  word-break: break-word;
  white-space: pre-wrap;
}

/* User prompt attachments (images/files) */
.sv-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sv-attachment-img {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 200px;
}

.sv-attachment-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

.sv-attachment-file {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.sv-attachment-icon {
  font-size: 16px;
}

.sv-attachment-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Image lightbox / carousel */
.sv-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  outline: none;
}

.sv-lightbox.visible {
  display: flex;
}

.sv-lb-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
}

.sv-lb-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  padding: 8px;
  min-width: 48px;
  min-height: 48px;
  cursor: pointer;
  z-index: 1;
}

.sv-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  padding: 8px 14px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.sv-lb-prev { left: 12px; }
.sv-lb-next { right: 12px; }

.sv-lb-nav:active {
  background: rgba(255, 255, 255, 0.25);
}

.sv-lb-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-top: 12px;
  letter-spacing: 1px;
}

/* Make attachment images tappable */
.sv-attachment-img img {
  cursor: pointer;
  transition: opacity 0.15s;
}

.sv-attachment-img img:active {
  opacity: 0.7;
}

/* Agent bubble — left-aligned chat style */
.sv-agent-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  max-width: 88%;
  align-self: flex-start;
}

.sv-agent-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

/* Intermediate agent messages — same bubble style, subtle left accent */
.sv-agent-intermediate {
  border-left: 2px solid var(--sv-agent-accent);
}

.sv-agent-done {
  opacity: 0.7;
}

.sv-text-dim {
  color: var(--text-dim);
  font-style: italic;
}

/* Code blocks in agent response */
.sv-code-wrapper {
  position: relative;
  margin: 8px 0;
}

.sv-code-wrapper .sv-code-block {
  margin: 0;
}

.sv-code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  min-width: 28px;
  min-height: 28px;
  z-index: 1;
}

.sv-code-copy:active {
  color: var(--green);
  background: rgba(34,197,94,0.15);
}

.sv-code-copy.copied {
  color: var(--green);
  background: rgba(34,197,94,0.12);
}

.sv-code-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}

.sv-inline-code {
  background: var(--bg);
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Tool strip — left-aligned with agent bubbles */
.sv-tools {
  padding: 0 4px;
  max-width: 88%;
  align-self: flex-start;
}

.sv-tools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 4px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius);
}

.sv-tools-header:active {
  background: var(--surface-hover);
}

.sv-tools-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.sv-tools-chevron {
  font-size: 12px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.sv-tools-chevron.rotated {
  transform: rotate(90deg);
}

.sv-tools-list {
  display: none;
  padding: 4px 12px 8px;
}

.sv-tools-list.expanded {
  display: block;
}

.sv-tool-item {
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 6px;
}

.sv-tool-expandable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
  padding: 4px 6px;
}

.sv-tool-expandable:active {
  background: var(--surface-hover);
}

.sv-tool-running {
  background: rgba(31, 111, 235, 0.08);
  border-radius: 4px;
  padding: 6px 8px;
  border-left: 2px solid var(--blue);
}

.sv-tool-succeeded {
  border-left: 2px solid var(--green-dim);
  border-radius: 4px;
  padding: 4px 6px;
}

.sv-tool-errored {
  background: rgba(248, 81, 73, 0.06);
  border-left: 2px solid var(--red);
  border-radius: 4px;
  padding: 4px 6px;
}

.sv-tool-error-icon {
  color: var(--red);
  font-size: 11px;
  flex-shrink: 0;
}

.sv-tools-error-count {
  color: var(--red);
}

.sv-tool-name {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}

/* Compact summary for done tools */
.sv-tool-input {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Full command block — shown for running tools, hidden for done until tapped */
.sv-tool-full-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--bg);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 2px;
}

/* Done tools: hide full input, show summary */
.sv-tool-expandable .sv-tool-full-input {
  display: none;
}

/* Done tools expanded: show full input, hide summary */
.sv-tool-expandable.sv-tool-expanded .sv-tool-full-input {
  display: block;
}

.sv-tool-expandable.sv-tool-expanded .sv-tool-input {
  display: none;
}

/* Clickable file paths */
.sv-file-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(88, 166, 255, 0.4);
  text-underline-offset: 2px;
}
.sv-file-link:hover {
  color: var(--accent, #58a6ff);
  text-decoration-color: var(--accent, #58a6ff);
}

/* Unified diff view for Edit tool */
.sv-diff-block {
  padding: 4px 0 !important;
  overflow-x: auto;
}

.sv-diff-block > div {
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.sv-diff-del {
  background: rgba(248, 81, 73, 0.15);
  color: #f8837b;
}

.sv-diff-add {
  background: rgba(63, 185, 80, 0.15);
  color: #7ee787;
}

.sv-diff-ctx {
  color: var(--text);
  font-weight: 600;
  padding-top: 4px !important;
  padding-bottom: 2px !important;
}

.sv-tool-check {
  color: var(--green);
  font-size: 11px;
  flex-shrink: 0;
}

.sv-tool-spinner {
  color: var(--blue);
  font-size: 8px;
  flex-shrink: 0;
  animation: svPulse 1.5s infinite;
}

/* Working indicator */
.sv-working {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--sv-agent-color);
  font-size: 13px;
  align-self: flex-start;
}

.sv-working-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sv-agent-color);
  animation: svPulse 1.5s infinite;
}

@keyframes svPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Tasks tray — pinned above action bar in structured view */
.tasks-tray {
  display: none;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tasks-tray.visible {
  display: block;
}

/* Task widget */
.sv-tasks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}
.tasks-tray .sv-tasks {
  border: none;
  border-radius: 0;
}

.sv-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sv-tasks-header:active {
  background: var(--surface-hover);
}

.sv-tasks-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.sv-tasks-chevron {
  font-size: 12px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.sv-tasks-chevron.rotated {
  transform: rotate(90deg);
}

.sv-tasks-list {
  display: none;
  padding: 0 16px 12px;
}

.sv-tasks-list.expanded {
  display: block;
}

.sv-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
}

.sv-task-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.sv-task-done {
  color: var(--text-dim);
  text-decoration: line-through;
}

.sv-task-active {
  color: var(--blue);
}

.sv-task-subject {
  word-break: break-word;
}

/* ══════════════════════════════════
   Voice — TTS Toggle & STT Mic
   ══════════════════════════════════ */

/* Auto-approve toggle button */
.btn-auto-approve {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 10px;
  height: 48px;
  min-height: 48px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-auto-approve.visible {
  display: flex;
}

.btn-auto-approve.active {
  background: rgba(63, 185, 80, 0.15);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
}

/* Approve All button in approval card */
.btn-approve-all {
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  border-radius: 12px;
  color: var(--blue);
  cursor: pointer;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}

.btn-approve-all:active {
  background: var(--blue);
  color: var(--bg);
}

/* TTS toggle button */
.btn-voice-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-voice-toggle.visible {
  display: flex;
}

.btn-voice-toggle.active {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--text-bright);
}

/* Speaking indicator on toggle button */
.btn-voice-toggle.speaking {
  animation: voicePulse 1s infinite;
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(88, 166, 255, 0); }
}

/* Per-message replay icon in agent bubbles */
.sv-voice-replay {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px 8px;
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
}

.sv-voice-replay.visible {
  display: inline-flex;
}

.sv-voice-replay:active {
  color: var(--blue);
  background: rgba(59,130,246,0.15);
}

.sv-voice-replay.playing {
  color: var(--blue);
  animation: voicePulse 1s infinite;
}

/* Copy button in agent bubbles */
.sv-copy-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  min-width: 32px;
  min-height: 32px;
  margin-left: 2px;
}

.sv-copy-btn:active {
  color: var(--green);
  background: rgba(34,197,94,0.15);
}

.sv-copy-btn.copied {
  color: var(--green);
  background: rgba(34,197,94,0.12);
}

/* Speaking highlight on agent bubble */
.sv-agent-bubble.sv-speaking {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue-dim);
}

/* Mic button in action bar input row */
.btn-mic {
  display: none;
  width: 48px;
  min-height: 48px;
  background: var(--surface-2, #21262d);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-mic.visible {
  display: flex;
}

.btn-mic:active {
  opacity: 0.7;
}

.btn-mic:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Recording state — red pulse */
.btn-mic.recording {
  background: var(--red-dim);
  border-color: var(--red);
  color: #fff;
  animation: micPulse 1s infinite;
}

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(248, 81, 73, 0); }
}

/* Processing state — spinner color */
.btn-mic.processing {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--text-bright);
}

.btn-mic.processing svg {
  display: none;
}

.btn-mic.processing::after {
  content: '';
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: icon-spin 0.6s linear infinite;
}

/* ──────────────────────────────────
   SSH Key Modal
   ────────────────────────────────── */
.ssh-key-sheet {
  position: relative;
  width: calc(100% - 32px);
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  animation: slideUp 0.2s ease-out;
}

.ssh-key-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.ssh-key-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
  line-height: 1.4;
}

.ssh-key-hint a {
  color: var(--green);
  text-decoration: none;
}

.ssh-key-hint a:active {
  opacity: 0.7;
}

.ssh-key-content {
  width: 100%;
  min-height: 80px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.5;
  resize: none;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.ssh-key-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ssh-key-btn {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
}

.ssh-key-btn:active {
  opacity: 0.8;
}

.ssh-key-btn-close {
  background: var(--border);
  color: var(--text);
}

.ssh-key-status {
  font-size: 12px;
  color: var(--green);
  margin-top: 8px;
  min-height: 16px;
  text-align: center;
}

/* ──────────────────────────────────
   Create File Modal
   ────────────────────────────────── */
.create-file-sheet {
  position: relative;
  width: calc(100% - 32px);
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  animation: slideUp 0.2s ease-out;
  max-height: 80vh;
  overflow-y: auto;
}

.create-file-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 4px;
}

.create-file-cwd {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  margin-bottom: 12px;
  word-break: break-all;
}

.create-file-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 14px;
  margin-bottom: 8px;
  outline: none;
}
.create-file-input:focus {
  border-color: var(--accent);
}

.create-file-content {
  width: 100%;
  min-height: 120px;
  max-height: 40vh;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
  margin-bottom: 8px;
  outline: none;
}
.create-file-content:focus {
  border-color: var(--accent);
}

.create-file-error {
  color: var(--red, #f85149);
  font-size: 13px;
  margin-bottom: 8px;
  min-height: 0;
}
.create-file-error:empty {
  display: none;
}

.create-file-overwrite {
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  text-align: center;
  color: #d29922;
  font-size: 13px;
}
.create-file-overwrite button {
  margin-top: 8px;
  background: rgba(210, 153, 34, 0.2);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.4);
}

.create-file-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.create-file-btn {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  background: var(--border);
  color: var(--text);
}
.create-file-btn:active { opacity: 0.8; }
.create-file-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.create-file-submit {
  background: rgba(63, 185, 80, 0.15);
  color: var(--green, #3fb950);
  border: 1px solid rgba(63, 185, 80, 0.3);
}

/* ── CLI Badge (in session rows) ── */

.tree-cli-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 4px;
}

.tree-cli-claude { background: rgba(232, 140, 68, 0.25); color: #e8944a; }
.tree-cli-codex  { background: rgba(16, 163, 127, 0.2); color: #10a37f; }
.tree-cli-gemini { background: rgba(66, 133, 244, 0.2); color: #4285f4; }

/* ── CLI Section Headers (grouped conversations) ── */

.tree-cli-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  margin-top: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tree-cli-section:first-child {
  margin-top: 0;
}

.tree-cli-section:active {
  opacity: 0.7;
}

.tree-cli-chevron {
  font-size: 8px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tree-cli-chevron.expanded {
  transform: rotate(90deg);
}

.tree-cli-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tree-cli-section-count {
  font-size: 10px;
  color: var(--text-dim);
  background: var(--surface-hover);
  padding: 1px 6px;
  border-radius: 8px;
}

.tree-cli-section-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tree-cli-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tree-cli-status-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
}

.tree-cli-add-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid var(--text-dim);
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  touch-action: none;
  /* Expand touch target beyond visual bounds */
  padding: 0;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.tree-cli-add-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.tree-cli-add-claude { border-color: #e8944a; color: #e8944a; }
.tree-cli-add-codex  { border-color: #10a37f; color: #10a37f; }
.tree-cli-add-gemini { border-color: #4285f4; color: #4285f4; }

.tree-cli-add-btn:active {
  background: var(--surface-hover);
}

/* ═══════════════════════════════════════════════════
   Automations
   ═══════════════════════════════════════════════════ */

/* Project tree button */
.tree-auto-btn {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid var(--text-dim);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s, color 0.15s;
}
.tree-auto-btn:active {
  background: var(--surface-2, #21262d);
  border-color: var(--text);
  color: var(--text);
}
.tree-auto-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #484f58;
  color: #c9d1d9;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.tree-auto-count.has-active {
  background: var(--accent, #58a6ff);
  color: #fff;
}
.tree-git-btn { position: relative; }
.tree-git-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #e2b340;
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* Automations view container */
#view-automations {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

/* MCP + Agents view containers — full height + scrollable */
#view-mcp,
#view-agents {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Header */
.auto-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.auto-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.auto-add-btn {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--accent, #58a6ff);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.auto-add-btn:active {
  opacity: 0.8;
}
.auto-add-btn-large {
  margin-top: 16px;
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
}

/* Empty state */
.auto-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}
.auto-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.auto-empty-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
  opacity: 0.7;
}

/* Error */
.auto-error {
  text-align: center;
  padding: 20px;
  color: #f85149;
  background: rgba(248, 81, 73, 0.1);
  border-radius: 8px;
}

/* Automation card list */
.auto-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Automation card */
.automation-card {
  background: var(--surface-1, #161b22);
  border: 1px solid #3a424d;
  border-left: 3px solid var(--accent, #58a6ff);
  border-radius: 10px;
  padding: 14px;
  transition: border-color 0.15s, opacity 0.15s;
}
.automation-card.disabled {
  opacity: 0.5;
  border-color: var(--border);
  border-left-color: #484f58;
}

.auto-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.auto-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toggle switch */
.auto-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 8px;
}
.auto-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.auto-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface-2, #30363d);
  border-radius: 24px;
  transition: 0.2s;
}
.auto-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.auto-toggle input:checked + .auto-toggle-slider {
  background: var(--accent, #58a6ff);
}
.auto-toggle input:checked + .auto-toggle-slider::before {
  transform: translateX(20px);
}

/* Card info row */
.auto-card-info {
  font-size: 0.85rem;
  color: #8b949e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.auto-badge-shell { background: rgba(139, 148, 158, 0.2); color: #c9d1d9; }
.auto-badge-claude { background: rgba(217, 119, 6, 0.2); color: #f59e0b; }
.auto-badge-codex { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.auto-badge-gemini { background: rgba(66, 133, 244, 0.2); color: #60a5fa; }

/* Status row */
.auto-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}
.auto-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.auto-status-badge.success { background: rgba(63, 185, 80, 0.2); color: #56d364; }
.auto-status-badge.failed { background: rgba(248, 81, 73, 0.2); color: #f85149; }
.auto-status-badge.running { background: rgba(88, 166, 255, 0.2); color: #79c0ff; }
.auto-card-time { color: #8b949e; }
.auto-scheduled-dot { color: var(--accent, #58a6ff); font-size: 0.6rem; }

/* Action buttons */
.auto-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.auto-action-btn {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #3a424d;
  background: var(--surface-2, #21262d);
  color: #c9d1d9;
  font-size: 0.8rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.auto-action-btn:active { background: var(--surface-hover); color: #fff; }
.auto-btn-run { border-color: var(--accent, #58a6ff); color: var(--accent, #58a6ff); }
.auto-btn-run:disabled { opacity: 0.4; cursor: not-allowed; }
.auto-btn-del { border-color: #f85149; color: #f85149; }

/* Form */
.auto-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.auto-form-back {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
}
.auto-form-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.automation-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auto-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auto-form-group label {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 500;
}
.auto-form-group input[type="text"],
.auto-form-group textarea,
.auto-form-group select {
  background: var(--surface-1, #161b22);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  min-height: 42px;
}
.auto-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Type toggle */
.auto-type-toggle {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.auto-type-btn {
  flex: 1;
  min-height: 42px;
  padding: 8px 16px;
  border: none;
  background: var(--surface-1, #161b22);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auto-type-btn.active {
  background: var(--accent, #58a6ff);
  color: #000;
  font-weight: 600;
}

/* Cron preset */
.cron-preset-select {
  background: var(--surface-1, #161b22);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.85rem;
  min-height: 38px;
  margin-bottom: 4px;
}

/* Checkbox label */
.auto-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
  min-height: 42px;
}
.auto-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #58a6ff);
}

/* Webhook URL display */
.auto-webhook-url {
  background: var(--surface-1, #161b22);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
}
.auto-webhook-url code {
  font-size: 0.8rem;
  color: var(--accent, #58a6ff);
  word-break: break-all;
}

/* Submit button */
.auto-submit-btn {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--accent, #58a6ff);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  margin-top: 8px;
}
.auto-submit-btn:active {
  opacity: 0.8;
}

/* History */
.auto-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auto-history-entry {
  background: var(--surface-1, #161b22);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.auto-hist-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.auto-hist-trigger {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 1px 6px;
  background: var(--surface-2, #21262d);
  border-radius: 4px;
}
.auto-hist-time {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-left: auto;
}
.auto-hist-exit, .auto-hist-duration {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.auto-hist-output {
  background: var(--surface-0, #0d1117);
  border-radius: 4px;
  padding: 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  overflow-x: auto;
  max-height: 100px;
  overflow-y: auto;
  margin: 4px 0 0 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Live output */
.automation-output {
  background: var(--surface-0, #0d1117);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.8rem;
  color: var(--text);
  overflow-x: auto;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  flex: 1;
  min-height: 200px;
  max-height: calc(100vh - 140px);
  margin: 0;
}
.auto-live-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}
.auto-live-status.running { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.auto-live-status.success { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.auto-live-status.failed { background: rgba(248, 81, 73, 0.15); color: #f85149; }

/* Toast notification */
.auto-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.auto-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.auto-toast-success { background: rgba(63, 185, 80, 0.9); color: #fff; }
.auto-toast-error { background: rgba(248, 81, 73, 0.9); color: #fff; }
.auto-toast-info { background: rgba(88, 166, 255, 0.9); color: #fff; }

/* Loading */
.auto-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-dim);
}

/* ── Split-panel layout (desktop/tablet) ────────────────────────── */

/* Mobile defaults for layout wrapper */
#app-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* On mobile, wrapper is transparent — children act as direct flex children of #app-layout */
#view-session-wrapper {
  display: contents;
}

/* Empty state (hidden by default, shown on desktop when no session active) */
.session-empty-state {
  display: none;
}

/* Sidebar header: hidden on mobile, shown on desktop */
.sidebar-header {
  display: none;
}

/* Desktop/tablet split-panel layout */
@media (min-width: 768px) {
  :root {
    --sidebar-width: 300px;
  }

  #app-layout {
    flex-direction: row;
  }

  /* Hide global header on desktop when no session is active —
     the sidebar-header shows branding instead */
  header {
    margin-left: calc(var(--sidebar-width) + 1px);
    display: none;
  }

  /* Sidebar header: shown at top of side panel on desktop */
  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card, #161b22);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 32px;
  }
  .sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }
  /* Same for search bar and connection banner */
  .search-bar {
    margin-left: calc(var(--sidebar-width) + 1px);
  }
  .connection-banner {
    margin-left: calc(var(--sidebar-width) + 1px);
  }

  /* Side panel: always visible, fixed width */
  #app-layout > #view-dashboard {
    display: flex !important;
    flex: 0 0 var(--sidebar-width);
    min-width: 200px;
    max-width: 400px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Hide dashboard when folder tree sidebar is active */
  #app-layout > #view-dashboard.sidebar-hidden {
    display: none !important;
  }

  /* Main content wrapper: flex column for session + action bar */
  #view-session-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  /* Session view: always visible on desktop */
  #view-session-wrapper > #view-session {
    display: flex !important;
    flex: 1;
    min-height: 0;
  }

  /* Hide close button on desktop — desktop inline header has its own close */
  .btn-close-session {
    display: none !important;
  }

  /* Empty state shown when no session is active */
  #view-session.no-session .session-empty-state {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--text-dim);
  }
  .session-empty-state svg {
    opacity: 0.3;
  }
  .session-empty-state p {
    font-size: 15px;
    opacity: 0.5;
  }

  /* Hide session content when no session is active */
  #view-session.no-session .structured-container,
  #view-session.no-session .output,
  #view-session.no-session .xterm-container,
  #view-session.no-session .approval-card,
  #view-session.no-session .question-card,
  #view-session.no-session .reauth-card,
  #view-session.no-session .tasks-tray,
  #view-session.no-session .scroll-indicator {
    display: none !important;
  }

  /* Dashboard content adjustments for narrower sidebar */
  #app-layout > #view-dashboard .dashboard {
    padding-left: 12px;
    padding-right: 12px;
  }
  #app-layout > #view-dashboard .dashboard-footer {
    padding-bottom: 16px;
  }
  #app-layout > #view-dashboard .dashboard-footer-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Desktop sidebar: hide secondary buttons, reveal on hover/expand */
  .tree-color-dot,
  .tree-file-btn,
  .tree-auto-btn,
  .agent-config-badges {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
  }
  .tree-project-header:hover .tree-color-dot,
  .tree-project-header:hover .tree-file-btn,
  .tree-project-header:hover .tree-auto-btn,
  .tree-project-header:hover .agent-config-badges,
  .tree-project-header:focus-within .tree-color-dot,
  .tree-project-header:focus-within .tree-file-btn,
  .tree-project-header:focus-within .tree-auto-btn,
  .tree-project-header:focus-within .agent-config-badges,
  .tree-project.expanded .tree-color-dot,
  .tree-project.expanded .tree-file-btn,
  .tree-project.expanded .tree-auto-btn,
  .tree-project.expanded .agent-config-badges {
    opacity: 1;
    pointer-events: auto;
  }

  /* Nav-keys visible on desktop too (in raw/terminal view) */

  /* ── Inline Desktop Session Header ── */

  /* Base: hidden by default */
  .desktop-session-header {
    display: none;
  }

  /* Show when a session is active (not in no-session state) */
  #view-session:not(.no-session) .desktop-session-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-card, #161b22);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 32px;
  }

  /* Hide global header on desktop when a session is active */
  body.desktop-session-active > header {
    display: none !important;
  }

  /* Adjust search bar when global header is hidden */
  body.desktop-session-active > .search-bar {
    top: 0;
  }

  /* Close button hidden on desktop (inline header has own close) */

  /* Hide action bar toggle buttons on desktop (moved to inline header) */
  body.desktop-session-active .btn-view-toggle,
  body.desktop-session-active .btn-voice-toggle,
  body.desktop-session-active .btn-auto-approve {
    display: none !important;
  }

  /* Desktop header button (search etc.) */
  .desktop-header-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
  }
  .desktop-header-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.08);
  }

  /* Hide inline header during split mode (pane headers replace it) */
  #view-session.split-active .desktop-session-header {
    display: none !important;
  }

  /* Hide inline header in no-session state */
  #view-session.no-session .desktop-session-header {
    display: none !important;
  }

  /* ── Split Pane Grid (desktop only) ── */

  .split-pane-grid {
    display: grid;
    flex: 1;
    min-height: 0;
    gap: 1px;
    background: var(--border);
  }

  .split-pane-grid[data-pane-count="1"] {
    grid-template: 1fr / 1fr;
  }
  .split-pane-grid[data-pane-count="2"] {
    grid-template: 1fr / 1fr 1fr;
  }
  .split-pane-grid[data-pane-count="3"] {
    grid-template: 1fr 1fr / 1fr 1fr;
  }
  .split-pane-grid[data-pane-count="3"] > .split-pane:first-child {
    grid-column: 1 / -1;
  }
  .split-pane-grid[data-pane-count="4"] {
    grid-template: 1fr 1fr / 1fr 1fr;
  }

  .split-pane {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
  }

  .split-pane.focused {
    border-color: var(--accent, #58a6ff);
  }

  .split-pane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-card, #161b22);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 32px;
  }

  .split-pane-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-dim);
  }
  .split-pane-status.connected { background: #3fb950; }
  .split-pane-status.reconnecting { background: #d29922; }
  .split-pane-status.offline,
  .split-pane-status.error { background: #ff7b72; }
  .split-pane-status.disconnected { background: var(--text-dim); }

  .split-pane-title {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .split-pane-view-toggle,
  .split-pane-voice-toggle,
  .split-pane-auto-approve,
  .split-pane-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .split-pane-view-toggle:hover,
  .split-pane-voice-toggle:hover,
  .split-pane-auto-approve:hover,
  .split-pane-close:hover {
    color: var(--text);
    background: rgba(255,255,255,0.08);
  }
  .split-pane-auto-approve {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border: 1px solid transparent;
  }
  .split-pane-auto-approve.active {
    color: var(--green);
    border-color: var(--green);
    background: rgba(63, 185, 80, 0.15);
  }
  .split-pane-voice-toggle.active {
    color: var(--text-bright, #e6edf3);
    background: var(--blue-dim, rgba(88, 166, 255, 0.15));
    border: 1px solid var(--blue, #58a6ff);
  }
  .split-pane-voice-toggle.speaking {
    animation: voicePulse 1s infinite;
  }
  .split-pane-close {
    font-size: 18px;
    font-weight: bold;
  }

  /* Content areas fill remaining space */
  .split-pane-structured {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  .split-pane-raw {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .split-pane-xterm {
    flex: 1;
    overflow: hidden;
  }

  /* Scroll indicator within pane (above per-pane action bar) */
  .split-pane-scroll-indicator {
    position: absolute;
    bottom: 44px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent, #58a6ff);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .split-pane-scroll-indicator.visible {
    display: flex;
    opacity: 0.8;
  }

  /* Per-pane nav keys (compact version of global nav-keys) */
  .split-pane-nav-keys {
    display: none;
    flex-shrink: 0;
    justify-content: center;
    gap: 2px;
    padding: 3px 4px;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .split-pane-nav-keys.visible { display: flex; }
  .split-pane-nav-keys .nav-key {
    min-height: 30px;
    font-size: 11px;
    padding: 2px 6px;
  }

  /* Per-pane action bar (mirrors global action-bar, compact) */
  .split-pane-action-bar {
    flex-shrink: 0;
    padding: 4px 6px;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .split-pane-action-bar .input-row {
    display: flex;
    gap: 4px;
  }
  .split-pane-action-bar .feedback-input {
    font-size: 12px;
    padding: 4px 8px;
    min-height: 30px;
    max-height: 80px;
  }
  .split-pane-action-bar .btn-import,
  .split-pane-action-bar .btn-mic,
  .split-pane-action-bar .btn-send,
  .split-pane-action-bar .btn-interrupt {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    font-size: 14px;
  }
  .split-pane-action-bar .btn-import svg,
  .split-pane-action-bar .btn-mic svg,
  .split-pane-action-bar .btn-send svg,
  .split-pane-action-bar .btn-interrupt svg {
    width: 14px;
    height: 14px;
  }
  .split-pane-action-bar .btn-mic.processing::after {
    width: 12px;
    height: 12px;
  }
  .split-pane-action-bar .btn-mic.recording {
    box-shadow: none;
    animation: micPulse 1s infinite;
  }
  .split-pane-action-bar .compose-tray { padding: 4px 0; }

  /* Needs-input badge on unfocused panes */
  .split-pane-badge {
    position: absolute;
    top: 6px;
    right: 40px;
    padding: 2px 8px;
    background: #d29922;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    z-index: 5;
    animation: pane-badge-pulse 1.5s ease-in-out infinite;
  }

  @keyframes pane-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  /* Per-pane approval/question card containers */
  .pane-card-container {
    flex-shrink: 0;
  }

  /* Compact approval card inside split panes */
  .pane-approval-card {
    padding: 8px 10px;
    border-top-width: 1px;
  }
  .pane-approval-card .approval-tool {
    font-size: 10px;
    margin-bottom: 2px;
  }
  .pane-approval-card .approval-description {
    font-size: 12px;
    margin-bottom: 4px;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pane-approval-card .approval-detail {
    max-height: 50px;
    font-size: 11px;
    margin-bottom: 4px;
    padding: 4px 8px;
  }
  .pane-approval-card .approval-buttons {
    gap: 4px;
    margin-bottom: 4px;
  }
  .pane-approval-card .approval-buttons .btn {
    min-height: 32px;
    padding: 4px 8px;
  }
  .pane-approval-card .approval-feedback-row {
    gap: 4px;
  }
  .pane-approval-card .approval-feedback-input {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
  }

  /* Compact question card inside split panes */
  .pane-question-card {
    padding: 8px 10px;
    border-top-width: 1px;
    max-height: 35vh;
  }
  .pane-question-card .question-header {
    font-size: 10px;
  }
  .pane-question-card .question-text {
    font-size: 12px;
    line-height: 1.3;
  }
  .pane-question-card .question-option {
    padding: 6px 10px;
    font-size: 12px;
  }
  .pane-question-card .question-option-desc {
    font-size: 11px;
  }
  .pane-question-card .question-other-input {
    padding: 6px 8px;
    font-size: 12px;
    min-height: 32px;
  }
  .pane-question-card .question-buttons {
    gap: 6px;
    margin-top: 6px;
  }
  .pane-question-card .question-submit {
    min-height: 32px;
    font-size: 12px;
  }
  .pane-question-card .question-cancel {
    min-height: 32px;
    font-size: 11px;
    padding: 0 10px;
  }

  /* Drag-and-drop split: drop zone highlight */
  #view-session.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
    background: rgba(88, 166, 255, 0.04);
  }

  /* Draggable session row cursor */
  .tree-conversation-active[draggable="true"] {
    cursor: grab;
  }
  .tree-conversation-active[draggable="true"]:active {
    cursor: grabbing;
  }

  /* Hide split-pane grid content when in no-session state */
  #view-session.no-session .split-pane-grid {
    display: none !important;
  }
}