.ai-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9998;
}

.ai-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(var(--vh, 1vh) * 88);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ai-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.ai-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
}

.ai-close:hover {
  background: var(--bg-light);
  color: var(--text-primary);
}

.ai-body {
  overflow-y: auto;
  padding: 14px 18px 18px;
}

.ai-section + .ai-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.ai-section-title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ai-rows {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  row-gap: 6px;
  column-gap: 14px;
}

.ai-row {
  display: contents;
}

.ai-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

.ai-value {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}

.ai-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.ai-muted {
  color: var(--text-muted);
  font-style: italic;
}

.ai-mcp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-mcp-pill {
  padding: 3px 9px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}
.reset-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.reset-modal {
  background: var(--surface, #1a1b26);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--text, #d4d4d4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.reset-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.reset-modal-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-heading, inherit);
}

.reset-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
}

.reset-modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.reset-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 20px 8px;
  padding: 12px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-warning, #D97706);
}

.reset-modal-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.reset-modal-warning code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

.reset-modal-label {
  display: block;
  margin: 12px 20px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reset-modal-label small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.8;
}

.reset-modal-label code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.reset-modal-textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

.reset-modal-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
}

.reset-modal-input {
  width: 80px;
  padding: 6px 8px;
  background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
}

.reset-modal-cloud-guard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--color-error, #DC2626);
  line-height: 1.5;
}

.reset-modal-cloud-guard input {
  margin-top: 2px;
}

.reset-modal-cloud-guard strong {
  color: var(--text);
}

.reset-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  margin-top: 8px;
}

.reset-modal-cancel,
.reset-modal-submit {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.reset-modal-cancel {
  background: var(--surface-elevated, rgba(255, 255, 255, 0.05));
  color: var(--text);
}

.reset-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
}

.reset-modal-submit {
  background: var(--color-warning, #D97706);
  color: white;
}

.reset-modal-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.reset-modal-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.reset-modal-progress,
.reset-modal-result {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.reset-modal-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reset-modal-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-top-color: var(--color-warning, #D97706);
  border-radius: 50%;
  animation: reset-spin 1s linear infinite;
}

@keyframes reset-spin {
  to { transform: rotate(360deg); }
}

.reset-modal-result {
  text-align: left;
}

.reset-modal-result strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.reset-modal-result ul {
  margin: 0;
  padding-left: 20px;
}

.reset-modal-result li {
  margin: 4px 0;
}

.reset-modal-result code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.reset-modal-result details {
  margin-top: 12px;
  font-size: 12px;
}

.reset-modal-result summary {
  cursor: pointer;
  color: var(--text-muted);
}

.reset-modal-phases {
  margin-top: 8px;
  padding: 10px;
  background: var(--surface-elevated, rgba(0, 0, 0, 0.3));
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 280px;
  overflow-y: auto;
}

.reset-modal-error {
  border-left: 3px solid var(--color-error, #DC2626);
  padding-left: 17px;
}

.reset-modal-error strong {
  color: var(--color-error, #DC2626);
}

.reset-modal-ok {
  border-left: 3px solid var(--color-success, #16A34A);
  padding-left: 17px;
}

.reset-modal-ok strong {
  color: var(--color-success, #16A34A);
}
.pi-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9998;
}

.pi-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, calc(100vw - 32px));
  height: min(680px, calc(var(--vh, 1vh) * 90));
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pi-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.pi-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-left: 4px;
}

.pi-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pi-action,
.pi-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
}

.pi-action:hover,
.pi-close:hover {
  background: var(--bg-light);
  color: var(--text-primary);
}

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

.pi-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.pi-loading,
.pi-error {
  margin: auto;
  font-size: 13px;
  color: var(--text-muted);
}

.pi-error {
  color: var(--color-error);
}

.pi-layers {
  flex: 0 0 240px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
}

/* ── Scope-Switch (Bot vs Pool) ───────────────────────────────
 * Only rendered when the bot belongs to a pool. Lets the user toggle
 * which scope the per-row toggles apply to. */
.pi-scope-switch {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

.pi-scope-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-scope-btn:last-child {
  border-right: none;
}

.pi-scope-btn:hover {
  color: var(--text-primary);
  background: var(--bg-light);
}

.pi-scope-btn.active {
  background: var(--text-primary);
  color: var(--white);
  font-weight: 600;
}

/* ── Counter + Reset row ──────────────────────────────────── */
.pi-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.pi-toggle-counter {
  letter-spacing: 0.03em;
}

.pi-toggle-counter-off {
  color: var(--color-warning);
  font-weight: 600;
}

.pi-toggle-reset {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
}

.pi-toggle-reset:hover:not(:disabled) {
  background: var(--white);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.pi-toggle-reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pi-toggle-error {
  padding: 6px 12px;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 11px;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--border);
}

.pi-layer-row {
  display: grid;
  /* Source label | size | toggle (optional). Toggle column is auto so it
   * collapses for rows without a canonical_key (identity, bot-dir, …). */
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.pi-layer-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.pi-layer-row:hover {
  background: var(--bg-inset);
}

.pi-layer-row.active {
  background: var(--text-primary);
  color: var(--white);
}

.pi-layer-source {
  font-size: 12px;
  font-weight: 600;
}

.pi-layer-size {
  font-size: 10px;
  color: var(--text-muted);
}

.pi-layer-row.active .pi-layer-size {
  color: rgba(255, 255, 255, 0.7);
}

.pi-layer-path {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-all;
  white-space: normal;
}

/* ── Per-layer Fragment-Toggle ────────────────────────────────
 * Each prompt_fragment row gets a toggle that disables that fragment
 * for the active scope (bot or pool). Disabled fragments stay visible
 * in the sidebar but their content is grayed + struck through so the
 * user can SEE what was excluded without losing the visual anchor.
 * Cloud-API persists per-bot list in session_registry.disabled_fragments,
 * per-pool list in pool_config.disabled_fragments. Effect at next
 * prepare_bot_home (= bot restart). */
.pi-layer-toggle {
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
}

.pi-layer-toggle.is-off {
  color: var(--text-muted);
}

.pi-layer-toggle:hover:not(:disabled) {
  background: var(--bg-inset);
}

.pi-layer-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pi-layer-row.active .pi-layer-toggle {
  color: var(--white);
}

.pi-layer-row.active .pi-layer-toggle.is-off {
  color: rgba(255, 255, 255, 0.5);
}

/* Visual cue for disabled layers — content greyed, source label struck
 * through. The toggle itself stays full-opacity so it can be re-enabled. */
.pi-layer-row.is-disabled .pi-layer-source,
.pi-layer-row.is-disabled .pi-layer-size,
.pi-layer-row.is-disabled .pi-layer-path {
  text-decoration: line-through;
  opacity: 0.55;
}

.pi-layer-row.active .pi-layer-path {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Memory section ─────────────────────────────────────────────
 * Visually separated band below the federation fragments. Lila
 * accent + "private" pill so it's obvious this is the bot's own
 * /auto-memory output, not part of the assembled prompt. */
.pi-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 6px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b21a8;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.pi-section-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  padding: 1px 6px;
  background: rgba(107, 33, 168, 0.08);
  border: 1px solid rgba(107, 33, 168, 0.25);
  color: #6b21a8;
  border-radius: 2px;
}

/* Collapsible fragment-source group header — neutral palette (not the
   purple "memory" accent). Used to group System / MCP / Department /
   etc. so the sidebar becomes a hierarchy instead of a flat list. */
.pi-section-header-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
  background: var(--bg-inset);
  border: none;
  /* No border-top — the previous row already brings its bottom border,
     stacking the two would produce a visible double-line at the seam. */
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.pi-section-header-toggle:hover {
  background: var(--bg-light);
}
.pi-section-header-toggle .pi-section-chevron {
  display: inline-block;
  width: 10px;
  color: var(--text-muted);
  font-size: 10px;
}
.pi-section-header-toggle .pi-section-pill {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.pi-section-header-toggle.is-collapsed {
  border-bottom: none;
}

.pi-fragment-group {
  /* The wrapper exists only to keep header + nested rows together for
     keyboard nav semantics; styles live on header + .pi-layer-row-nested. */
}
.pi-layer-row-nested {
  padding-left: 24px;
}

.pi-section-subheader {
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-layer-row-memory .pi-layer-source {
  color: #6b21a8;
}

.pi-layer-row-memory.active {
  background: #6b21a8;
}

.pi-layer-row-memory.active .pi-layer-source {
  color: var(--white);
}

.pi-layer-badge {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  padding: 1px 4px;
  background: rgba(107, 33, 168, 0.12);
  color: #6b21a8;
  border-radius: 2px;
}

.pi-layer-row-memory.active .pi-layer-badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.pi-content {
  flex: 1;
  margin: 0;
  padding: 14px 18px;
  overflow: auto;
  color: var(--text-primary);
  background: var(--white);
  min-width: 0;
}

/* Raw view — exact bytes, monospace, preserve whitespace. */
.pi-content-raw {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Rendered view — react-markdown output. Stays compact because the
 * left layer sidebar already eats 220 px; the prose column has to
 * survive even when the modal is at min-width. */
.pi-content-md {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.pi-content-md h1,
.pi-content-md h2,
.pi-content-md h3,
.pi-content-md h4,
.pi-content-md h5,
.pi-content-md h6 {
  margin: 18px 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.pi-content-md h1 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.pi-content-md h2 { font-size: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.pi-content-md h3 { font-size: 14px; }
.pi-content-md h4,
.pi-content-md h5,
.pi-content-md h6 { font-size: 13px; color: var(--text-muted); }

.pi-content-md p { margin: 0 0 10px; }

.pi-content-md a {
  color: var(--accent);
  text-decoration: none;
}
.pi-content-md a:hover { text-decoration: underline; }

.pi-content-md ul,
.pi-content-md ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.pi-content-md li { margin: 2px 0; }

.pi-content-md code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
}

.pi-content-md pre {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}

.pi-content-md pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
}

.pi-content-md blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.pi-content-md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.pi-content-md table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.pi-content-md th,
.pi-content-md td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
}
.pi-content-md th {
  background: var(--bg-light);
  font-weight: 600;
}

@media (max-width: 768px), (max-height: 500px) {
  .pi-body {
    flex-direction: column;
  }
  .pi-layers {
    flex: 0 0 auto;
    max-height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--white);
  flex-shrink: 0;
}

.sidebar-header {
  padding: 20px 16px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.sidebar-logo {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.sidebar-logo span {
  color: var(--accent);
}

/* ── Search ──────────────────────────────────────────────────── */
.search-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.search-input {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-bottom-color: var(--text-primary);
}

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

.search-input {
  padding-right: 28px;
}

.search-clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--text-muted);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}

.search-clear:hover {
  background: var(--text-primary);
}

/* ── Filter Pills ─────────────────────────────────────────────── */
.filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-pill {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-pill:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
}

/* ── Sort Row ─────────────────────────────────────────────────── */
.filter-row {
  display: flex;
  gap: 0;
  margin-top: 10px;
  border: 1px solid var(--border);
}

.filter-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 0;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.filter-btn:last-child {
  border-right: none;
}

.filter-btn:hover {
  color: var(--text-primary);
}

.filter-btn.active {
  background: var(--text-primary);
  color: var(--white);
}

.filter-count {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--bg-light);
  color: var(--text-muted);
  letter-spacing: 0;
  min-width: 18px;
}

.filter-btn.active .filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.filter-empty-hint {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.filter-empty-switch {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.filter-empty-switch:hover {
  color: var(--text-primary);
}

.node-filter-btn {
  flex: 0 0 auto;
  padding: 5px 8px;
  gap: 4px;
}

.node-filter-btn svg {
  display: block;
}

.node-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}

.node-filter-popover {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 4px;
  z-index: 100;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 12px;
}

.node-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.node-filter-reset {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  cursor: pointer;
}

.node-filter-reset:hover {
  text-decoration: underline;
}

.node-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-primary);
}

.node-filter-row:hover {
  background: var(--bg-light);
}

.node-filter-row input[type='checkbox'] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.node-filter-name {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
}

.node-filter-count {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sort-row {
  display: flex;
  gap: 0;
  margin-top: 8px;
  border: 1px solid var(--border);
}

.sort-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 0;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sort-btn:last-child {
  border-right: none;
}

.sort-btn:hover {
  color: var(--text-primary);
}

.sort-btn.active {
  background: var(--text-primary);
  color: var(--white);
}

.sort-separator {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 2px;
}

/* ── Session List ─────────────────────────────────────────────── */
.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.server-group {
  border-bottom: 1px solid var(--border);
}

.server-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  padding: 16px 16px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.server-label:hover {
  color: var(--text-primary);
}

.server-name {
  flex: 1;
}

.server-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}

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

.server-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-left: 2px solid transparent;
}

.session-item:hover {
  background: var(--bg-light);
}

.session-item:active {
  background: var(--bg-inset, #EFEFEF);
}

.session-item.active {
  background: var(--bg-light);
  border-left-color: var(--accent);
}

.session-node {
  font-size: 9px;
  color: var(--border-strong);
}

.session-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

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

/* State semantics (2026-05-19, Alex's feedback):
 * - ready  / idle      → ALIVE in memory, waiting for input. Same color.
 * - thinking / tool    → ALIVE in memory, actively working. Yellow pulse.
 * - needs_login / err  → ALIVE but blocked. Red.
 * - suspended          → NOT in memory, on disk, wake on demand. Half-grey.
 * - dead               → NOT in memory, registry orphan. Solid grey.
 * - unknown            → detection still pending. Grey pulse.
 *
 * The previous CSS lumped `idle` together with `dead` + `suspended` —
 * all rendered solid grey — which made an active waiting CLI visually
 * indistinguishable from a process that wasn't running at all. Alex's
 * "warum ist der idle obwohl ich ihn benutzt habe" landed exactly there:
 * idle is the most-alive non-thinking state, not absence. Now idle gets
 * the same green dot as ready (= "live, ready for input").
 */
.status-dot.ready,
.status-dot.idle { background: var(--color-success); }
.status-dot.thinking,
.status-dot.tool { background: var(--color-warning); animation: pulse 1.5s infinite; }
.status-dot.error,
.status-dot.auth_required,
.status-dot.rate_limited,
.status-dot.needs_login { background: var(--color-error); }
.status-dot.suspended { background: var(--border-strong); opacity: 0.5; }
.status-dot.dead { background: var(--border-strong); }
.status-dot.unknown { background: var(--border-strong); animation: pulse 2s infinite; }
/* New runtime/lifecycle semantics (Alex 2026-06-12, via Cloud IACP 628645e1):
 * activity_class is no longer wired to the dot color because it confused
 * users — bots ready in memory looked "cold/grey", and an active operator
 * editing tmux directly stayed grey because no activity-stamp was set.
 * Now driven by lifecycle status + runtime state:
 *
 *   working    state ∈ thinking/tool        → orange + pulse
 *   available  status running/idle + ready  → green
 *   offline    status suspended/dead/orphan → grey
 *   error/needs_login (red) — overrides everything
 */
.status-dot.working {
  background: var(--color-warning);
  animation: pulse 1.5s infinite;
}
.status-dot.available {
  background: var(--color-success);
}
.status-dot.offline {
  background: var(--border-strong);
  opacity: 0.55;
}

/* Legacy activity_class buckets — kept defined in case other surfaces
 * still depend on them (e.g. health dashboards) but no longer the
 * default mapping in SessionList.tsx / AgentDetail.tsx. */
.status-dot.active { background: var(--color-success); }
.status-dot.warm   { background: #eab308; }
.status-dot.stale  { background: var(--border-strong); }
.status-dot.cold   { background: var(--border-strong); opacity: 0.55; }

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

.session-info {
  flex: 1;
  min-width: 0;
}

.mcp-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 600;
  vertical-align: middle;
  padding: 1px 5px;
  border-radius: 3px;
}
.mcp-badge.bad {
  color: var(--color-error);
  background: var(--color-error-bg);
}
.mcp-badge.warn {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.needs-login-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--color-error);
  vertical-align: middle;
  animation: pulse 2s infinite;
}

/* Lifecycle (#37): grayed-out items for paused agents. Sub-second
   wake on click via /api/sessions/{name}/wake. */
.session-item.is-paused {
  opacity: 0.55;
}

.session-item.is-paused:hover {
  opacity: 0.85;
}

.session-item.lifecycle-orphan {
  /* never-spawned bot-home — slightly more muted than user-paused */
  opacity: 0.4;
}

.session-item.lifecycle-orphan:hover {
  opacity: 0.75;
}

.session-item.lifecycle-dead .status-dot,
.session-item.lifecycle-recovering .status-dot {
  background: var(--color-error, #d22) !important;
}

.lifecycle-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--text-muted);
  vertical-align: middle;
}

.lifecycle-badge-idle {
  color: var(--color-info, #2a7);
  border-color: var(--color-info, #2a7);
}

.lifecycle-badge-suspended {
  color: var(--text-muted);
}

.lifecycle-badge-orphan {
  color: var(--text-muted);
  font-style: italic;
}

.lifecycle-badge-recovering {
  color: var(--color-warning, #c80);
  border-color: var(--color-warning, #c80);
  animation: pulse 2s infinite;
}

.lifecycle-badge-dead {
  color: var(--color-error, #d22);
  border-color: var(--color-error, #d22);
}

.auto-heal-badge,
.heartbeat-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--text-muted);
  cursor: help;
}

.auto-heal-badge {
  color: var(--color-success);
}

.heartbeat-badge svg {
  opacity: 0.7;
}

.session-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-role {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live now/next ticker under a working agent. activity in the warning
   accent (it IS the orange-working state, made concrete), next dimmed. */
.session-live {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  min-width: 0;
}
.session-live-act {
  font-size: 11px;
  color: var(--color-warning);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-live-elapsed {
  font-family: var(--font-mono);
  opacity: 0.75;
}
.session-live-next {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

.session-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  line-height: 1.4;
}

/* ── Pool Section ─────────────────────────────────────────────── */
.pool-section {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.pool-header {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.pool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.pool-row:last-child {
  border-bottom: none;
}

.pool-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

.pool-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pool-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pool-dot:hover {
  transform: scale(1.4);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--border-strong);
}

.pool-dot.active { background: var(--color-success); }
.pool-dot.standby { background: var(--border-strong); }
.pool-dot.acquired { background: var(--color-warning); }

.pool-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 6px;
}

/* ── Sidebar Footer ───────────────────────────────────────────── */
.sidebar-footer {
  padding: 12px 16px;
  padding-bottom: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.connection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}

.connection-dot.error {
  background: var(--color-error);
}
/* SSE bus is live and pushing realtime updates. Same green as the
   default but kept explicit so future palette tweaks can differentiate. */
.connection-dot.live {
  background: var(--color-success);
}
/* SSE bus is mid-reconnect — polling-fallback is doing the heavy
   lifting in the meantime. Amber pulse signals "degraded but still
   updating". */
.connection-dot.reconnecting {
  background: var(--color-warning);
  animation: pulse 1.5s infinite;
}
/* SSE never connected (or repeatedly failed) — we're on pure polling.
   Solid amber to distinguish from the reconnecting pulse. */
.connection-dot.degraded {
  background: var(--color-warning);
}

/* ── Sidebar Nav ──────────────────────────────────────────────── */
.sidebar-nav {
  display: flex;
  border-top: 1px solid var(--border);
  position: relative;
}

.sidebar-nav-btn {
  flex: 1;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sidebar-nav-btn:last-child {
  border-right: none;
}

.sidebar-nav-btn:hover {
  color: var(--text-primary);
  background: var(--bg-light);
}

.sidebar-nav-btn.active {
  color: var(--text-primary);
  background: var(--bg-light);
}

.sidebar-nav-primary {
  color: var(--accent);
  font-weight: 600;
}

/* ── Nav Drop-up Menu ────────────────────────────────────────── */
.nav-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;
}

.nav-menu-panel {
  position: relative;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.nav-menu-item {
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.nav-menu-item:last-child {
  border-bottom: none;
}

.nav-menu-item:hover {
  background: var(--bg-light);
}

.nav-menu-item:active {
  background: var(--text-primary);
  color: var(--white);
}

.sidebar-nav-btn:hover {
  color: var(--text-primary);
  background: var(--bg-light);
}

.sidebar-action {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.sidebar-action:hover {
  color: var(--text-primary);
}

/* ── Context Menu ─────────────────────────────────────────────── */
.ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.ctx-menu {
  position: fixed;
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 150px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ctx-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.ctx-item:hover {
  background: var(--bg-light);
}

.ctx-item:hover svg {
  color: var(--text-primary);
}

.ctx-item:active {
  background: var(--text-primary);
  color: var(--white) !important;
  transform: scale(0.98);
}

.ctx-item:active svg {
  color: var(--white) !important;
}

/* Destructive actions (Kill) keep monochrome by default but hover-tint
 * red so the irreversible step has a visual nudge. No always-on red. */
.ctx-item.ctx-destructive:hover {
  color: var(--color-error);
}

.ctx-item.ctx-destructive:hover svg {
  color: var(--color-error);
}

.ctx-footer {
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── MCP Panel ───────────────────────────────────────────────── */
.mcp-panel {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}

.mcp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mcp-panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
}

.mcp-panel-actions {
  display: flex;
  gap: 6px;
}

.mcp-panel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.mcp-panel-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.mcp-panel-item input[type="checkbox"] {
  width: 13px;
  height: 13px;
  accent-color: var(--text-primary);
  cursor: pointer;
}

.mcp-panel-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}

/* ── Status Toast ────────────────────────────────────────────── */
.ctx-status {
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px), (max-height: 500px) {
  .sidebar {
    width: 100%;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
  }

  .session-item {
    padding: 12px 16px;
  }

  .sidebar-footer {
    /* Old Chrome (no dvh) needs a thick fallback to clear the bottom
       browser UI. Modern browsers override below to a tighter pad. */
    padding-bottom: 40px;
  }

  .filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}

/* Modern browsers (dvh-aware) use viewport-precise sizing and only
   need the safe-area pad for the home-indicator. */
/* Modern browsers: --vh (visualViewport) on the body already excludes
   Safari's bottom UI + home-indicator. Tiny breathing pad is enough. */
@supports (height: 100dvh) {
  @media (max-width: 768px), (max-height: 500px) {
    .sidebar-footer {
      padding-bottom: 8px;
    }
  }
}
/* ── Input Bar Wrapper ────────────────────────────────────────── */
.input-bar-wrap {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--white);
  position: relative;
  z-index: 50;
  padding-bottom: 0;
}

/* ── TTS Status ──────────────────────────────────────────────── */
.tts-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tts-status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tts-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tts-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px 7px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.tts-ctrl-btn:hover {
  background: var(--bg-inset);
}
.tts-ctrl-sec {
  font-size: 9px;
  font-weight: 600;
}
.tts-ctrl-stop {
  color: var(--color-error);
  border-color: var(--color-error);
}
.tts-ctrl-stop:hover {
  background: var(--color-error);
  color: var(--white);
}

/* ── Attachment Previews ─────────────────────────────────────── */
.attachment-row {
  display: flex;
  gap: 8px;
  padding: 8px 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.attachment-item {
  position: relative;
  flex-shrink: 0;
}

.attachment-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.attachment-file {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  background: var(--bg-inset);
}

.attachment-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--white);
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.attachment-loading {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inset);
}

.attachment-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Command Button Upload Spinner ───────────────────────────── */
.input-action.uploading {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.cmd-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--color-warning);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Key Row ─────────────────────────────────────────────────── */
.key-row {
  display: flex;
  gap: 6px;
  padding: 8px 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.key-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.key-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.key-btn:active {
  background: var(--bg-light);
}

.key-btn.key-success {
  color: var(--color-success);
  border-color: var(--color-success);
}

.key-btn.key-error {
  color: var(--color-error);
  border-color: var(--color-error);
}

.key-btn.key-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.key-btn.key-purple {
  color: #9333ea;
  border-color: #9333ea;
}

.key-btn.key-accent {
  color: var(--color-info);
  border-color: var(--color-info);
}

/* ── Main Input Bar ──────────────────────────────────────────── */
.input-bar-wrap .input-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
}

.input-bar-wrap .input-field {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
  resize: none;
  /* Grow as the user types, scroll when we hit the cap.
   * Cap at 50% of the visual viewport so the conversation above
   * remains visible. The JS handler sets `style.height = scrollHeight + 'px'`
   * unbounded; CSS max-height clamps the rendered box and overflow:auto
   * kicks in beyond that. */
  overflow-y: auto;
  min-height: 24px;
  max-height: calc(var(--vh, 1vh) * 50);
  line-height: 1.4;
}

.input-bar-wrap .input-field:focus {
  border-bottom-color: var(--text-primary);
}

.input-bar-wrap .input-field::placeholder {
  color: var(--text-muted);
}

.input-bar-wrap .input-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  /* Quick transition for transform so :active feels snappy, slower for
     color/border so the inverse fade-in feels deliberate. */
  transition: transform 0.06s ease, background 0.12s ease,
              border-color 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Kill iOS Safari's faded blue tap-highlight — we paint our own :active. */
  -webkit-tap-highlight-color: transparent;
  /* Don't let touch-actions drift into pan-y interpretation. */
  touch-action: manipulation;
}

.input-bar-wrap .input-action:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Tactile press feedback — works on touch (no :hover) AND mouse-down.
   Strong inverse + scale-down so the press is unmistakable. */
.input-bar-wrap .input-action:active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
  transform: scale(0.92);
}

.input-bar-wrap .input-action.active {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-light);
}

.input-bar-wrap .input-action.primary {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
}

.input-bar-wrap .input-action.primary:hover {
  background: var(--black);
}

.input-bar-wrap .input-action.primary:active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(0.92);
}

/* "Sent!" confirmation — brief green fill + check icon so the user knows
   the message actually went to the agent. Pop animation draws the eye. */
.input-bar-wrap .input-action.primary.is-sent {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--white);
  animation: send-pop 0.3s ease;
}
@keyframes send-pop {
  0%   { transform: scale(0.85); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Send button when a queued message is waiting — stays in the primary
   black palette, but slightly desaturated so it reads as "parked". */
.input-bar-wrap .input-action.primary.has-queue {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
  opacity: 0.75;
}
.input-bar-wrap .input-action.primary.has-queue:hover {
  background: var(--black);
  border-color: var(--black);
  opacity: 1;
}

/* Long-press visual feedback — fires the moment touch/mouse-down
   lands, so the user sees the press IS being detected. A growing
   ring animates over ~500 ms to match the long-press timer — when
   the ring is "full" the menu pops. */
.input-bar-wrap .input-action.long-press-active {
  transform: scale(0.92);
  animation: lp-pulse 0.5s ease-out forwards;
}
@keyframes lp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.0);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.45);
  }
}

/* Disabled menu items — used when input is empty so "Queue" / "Send"
   options grey out instead of silently no-op'ing. */
.cmd-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cmd-item:disabled:hover {
  background: none;
}

/* Send-menu uses the same .cmd-menu position rules as the cmd-menu-anchor.
   This wrapper is identical to .cmd-menu-anchor — same positioning context. */
.send-menu-anchor {
  position: relative;
}

/* Queue banner — neutral black/grey palette, matches the
   has-queue send button so the connection reads visually. */
.queue-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary);
}
.queue-banner-icon {
  color: var(--text-primary);
  flex-shrink: 0;
}
.queue-banner-label {
  font-weight: 600;
  white-space: nowrap;
}
.queue-banner-preview {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  color: var(--text-muted);
}
.queue-banner-cancel {
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.queue-banner-cancel:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Outbox / offline retry banner — visual distinct from queue-banner
   because the meaning is different (network failure, not deliberate
   parking). Red-ish accent so "you're offline" reads at a glance. */
.outbox-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 6px;
  font-size: 12px;
  color: #991b1b;
}
.outbox-banner-icon {
  color: #dc2626;
  flex-shrink: 0;
}
.outbox-banner-label {
  font-weight: 600;
  white-space: nowrap;
}
.outbox-banner-preview {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  color: #b91c1c;
}
.outbox-banner-retry,
.outbox-banner-cancel {
  background: transparent;
  border: none;
  color: #991b1b;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 14px;
}
.outbox-banner-retry:hover,
.outbox-banner-cancel:hover {
  background: rgba(220, 38, 38, 0.16);
}

@media (prefers-color-scheme: dark) {
  .outbox-banner {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.6);
    color: #fca5a5;
  }
  .outbox-banner-preview {
    color: #fda4af;
  }
  .outbox-banner-retry,
  .outbox-banner-cancel {
    color: #fca5a5;
  }
}

.input-bar-wrap .input-action.error-state {
  border-color: var(--color-error);
  color: var(--color-error);
}

.input-bar-wrap .input-action.speaking {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  animation: tts-pulse 1.3s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

.input-bar-wrap .input-action.mic-recording {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  animation: mic-pulse 1s infinite;
}

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

/* ── MCP Editor ──────────────────────────────────────────────── */
.mcp-editor {
  padding: 12px 32px;
}

.mcp-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mcp-editor-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.mcp-editor-actions {
  display: flex;
  gap: 6px;
}

.mcp-editor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.mcp-editor-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.mcp-editor-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--text-primary);
  cursor: pointer;
}

.mcp-editor-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

/* ── Stop Button ─────────────────────────────────────────────── */
.input-action.stop-btn {
  background: var(--white);
  border-color: var(--text-primary);
  color: var(--text-primary);
  font-size: 12px;
}

.input-action.stop-btn:hover {
  background: var(--bg-light);
}

.input-action.long-press-active {
  background: var(--color-info);
  border-color: var(--color-info);
  color: var(--white);
}


/* ── Command Menu ────────────────────────────────────────────── */
.cmd-menu-anchor {
  position: relative;
}

.cmd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.cmd-menu {
  position: fixed;
  bottom: 70px;
  right: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.cmd-item:last-child {
  border-bottom: none;
}

.cmd-item:hover {
  background: var(--bg-light);
}

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

/* ── Recording Bar ───────────────────────────────────────────── */
.recording-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  gap: 16px;
}

.recording-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.recording-cancel:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.recording-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse 1s infinite;
}

/* VU-equalizer — 12 vertical bars where each bar's HEIGHT animates with
   the amplitude of one frequency band from the live mic stream. Voice
   produces a moving spectral signature so the bars dance up and down
   while you speak. Smooth height transition makes the motion feel
   organic instead of stroboscopic. */
.recording-vu {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  padding: 0 6px;
}
.recording-vu-bar {
  display: block;
  width: 3px;
  background: var(--color-success);
  border-radius: 1px;
  /* Quick rise, slightly slower fall so peaks linger long enough to read. */
  transition: height 80ms ease-out, background-color 60ms linear;
  min-height: 2px;
}
.recording-vu-bar.is-peak {
  background: var(--color-warning);
}

.recording-time {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-success);
}

.recording-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-success);
  border: none;
  border-radius: 0;
  color: var(--white);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.recording-stop:hover {
  background: #128a3e;
}

.recording-stop:active {
  transform: scale(0.88);
  background: #0d6e31;
}

/* Pressed/sending state — distinct darker fill + spinner so the tap is
   unmistakably acknowledged while the async stop/transcribe runs. */
.recording-stop.is-pressed {
  background: #0d6e31;
  transform: scale(0.92);
  cursor: default;
}

/* Recording-state image gallery — larger, swipeable view of the
   attached pictures so the user can narrate them while speaking. */
.recording-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 4px;
}
.recording-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  touch-action: pan-y;
}
.recording-gallery-img {
  max-width: 100%;
  max-height: 38vh;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-inset);
}
.recording-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.recording-gallery-nav.prev { left: 8px; }
.recording-gallery-nav.next { right: 8px; }
.recording-gallery-nav:disabled { opacity: 0.25; cursor: default; }
.recording-gallery-dots {
  display: flex;
  gap: 6px;
}
.recording-gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border-strong);
  cursor: pointer;
}
.recording-gallery-dot.is-active {
  background: var(--text-primary);
}

/* ── Transcribing Bar ────────────────────────────────────────── */
.transcribing-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
}

.transcribing-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-warning);
  letter-spacing: 0.05em;
}

/* ── Review Bar ──────────────────────────────────────────────── */
.review-bar {
  padding: 16px 32px;
}

.review-prefix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0 4px;
  overflow-wrap: break-word;
  word-break: break-all;
}

.review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.review-actions {
  display: flex;
  gap: 8px;
}

.review-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.review-send {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
  flex: 1;
}

.review-send:hover {
  background: var(--black);
}

.review-edit {
  background: transparent;
  color: var(--text-primary);
}

.review-edit:hover {
  border-color: var(--text-primary);
}

.review-discard {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error-bg);
}

.review-discard:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px), (max-height: 500px) {
  .input-bar-wrap {
    max-width: 100vw;
    overflow: hidden;
    /* Old Chrome (no dvh): the container fills more than the visible
       area, so the input bar lands behind the browser's bottom UI.
       Big 40px fallback keeps it visible. */
    padding-bottom: 40px;
  }
}

/* Modern browsers: parent container is sized via --vh (visualViewport.
   height, JS-synced in main.tsx) — already excludes Safari's bottom UI
   AND the home-indicator zone. So we only want a tiny breathing-room
   pad; adding safe-area-inset-bottom would double-pad and leave a fat
   gap above the Safari bottom bar. */
@supports (height: 100dvh) {
  @media (max-width: 768px), (max-height: 500px) {
    .input-bar-wrap {
      padding-bottom: 8px;
    }
  }
}

@media (max-width: 768px), (max-height: 500px) {

  .input-bar-wrap .input-bar {
    padding: 10px 12px;
    gap: 6px;
  }

  .input-bar-wrap .input-action {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .input-bar-wrap .input-field {
    min-width: 0;
  }

  .key-row {
    padding: 6px 12px;
    gap: 4px;
  }

  .key-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  .attachment-row {
    padding: 8px 12px;
  }

  .recording-bar,
  .transcribing-bar,
  .review-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cmd-menu {
    right: -8px;
    min-width: 180px;
  }
}
/* MultiChoice picker — Claude Code 2.1.x numbered prompt block.
 *
 * Original stylesheet was authored against a `--c-*` variable namespace
 * that never existed in cloud-v2 (variables.css uses `--text-primary`,
 * `--text-muted`, `--accent`, …). Result: every fallback kicked in and
 * picked dark-theme defaults (light grey, semi-transparent white) →
 * invisible on the V2 white background. Alex screenshot 110094.
 * 2026-06-02 — switched to the project variables. */

.mc-block {
  margin: 12px 0;
  border-left: 3px solid var(--accent);
  background: var(--bg-light);
  padding: 12px 14px;
  border-radius: 4px;
}

.mc-question {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.mc-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mc-option {
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.mc-option:hover {
  background: var(--bg-light);
  border-color: var(--border-strong);
}

/* The user's actively chosen option after they clicked. Highlighted
 * red + bold so they can see what's in flight. Pre-click there is
 * NO selected state any more (Alex feedback 2026-06-02). */
.mc-option.chosen {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* Whole-block sending state — the un-chosen options dim out so the
 * focus stays on the one being sent. */
.mc-block.is-sending .mc-option:not(.chosen) {
  opacity: 0.4;
}

.mc-option:disabled {
  cursor: not-allowed;
}

.mc-option:disabled:hover {
  background: var(--white);
  border-color: var(--border);
}

.mc-block.is-sending .mc-option.chosen:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.mc-option-spin {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  margin-left: 4px;
}

.mc-option-spin svg {
  animation: mc-spin 0.9s linear infinite;
}

@keyframes mc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.mc-option-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mc-option-num {
  font-weight: 700;
  color: var(--accent);
  min-width: 18px;
}

.mc-option-label {
  flex: 1;
  font-weight: 600;
  color: var(--text-body);
}

.mc-option-desc {
  margin-top: 4px;
  padding-left: 26px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.45;
}

.mc-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.sb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
  padding: 8px 12px;
  background: var(--c-bg-elevated, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  font-family: var(--c-mono, monospace);
  font-size: 12px;
  line-height: 1.45;
}

.sb-marker {
  color: var(--c-accent, #C41E3A);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Don't stretch to fill — Alex wants the button hugging the text,
 * not pushed against the right margin. */
.sb-content {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-text {
  color: var(--c-text, #e5e7eb);
}

.sb-ghost {
  color: var(--c-muted, #9ca3af);
  font-style: italic;
}

.sb-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--text-primary, #111);
  color: var(--white, #fff);
  border: none;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.sb-send:hover {
  opacity: 0.85;
}

.sb-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Wizard step indicator — Claude Code 2.1.x.
 *
 * Same fix as MultiChoiceBlock.css: replaced the never-defined `--c-*`
 * variable namespace with the project variables from variables.css.
 * The three step-dots Alex saw in screenshot 110094 were rendered as
 * `var(--c-muted, #9ca3af)` over the V2 white background → almost
 * invisible. The "active step / submit step" was the same colour as
 * the body text → no visual cue. 2026-06-02. */

.sp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 6px 10px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.sp-nav {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sp-nav:hover {
  background: var(--bg-light);
  border-color: var(--border-strong);
}

.sp-steps {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-step {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.sp-marker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 12px;
  text-align: center;
}

.sp-label {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* State styling */
.sp-step-done .sp-marker {
  color: var(--color-success);
}
.sp-step-done .sp-label {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

.sp-step-active .sp-marker {
  color: var(--accent);
}
.sp-step-active .sp-label {
  color: var(--accent);
  font-weight: 700;
}

.sp-step-pending .sp-marker {
  color: var(--text-muted);
}
.sp-step-pending .sp-label {
  color: var(--text-muted);
}

.sp-step-failed .sp-marker {
  color: var(--color-error);
}
.sp-step-failed .sp-label {
  color: var(--color-error);
}

.sp-step-unknown .sp-marker,
.sp-step-unknown .sp-label {
  color: var(--text-muted);
  font-style: italic;
}
.iacp-event-card {
  position: relative;
  margin: 6px 0;
  padding: 10px 14px;
  background: var(--bg-light);
  border-left: 3px solid #bb9af7;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}

.iacp-event-card.requires-response {
  border-top: 2px solid var(--color-error);
}

.iacp-event-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.iacp-event-icon {
  display: inline-flex;
  color: #bb9af7;
}

.iacp-event-sender {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.iacp-event-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 6px;
  background: #bb9af7;
  color: var(--white);
  border-radius: 3px;
  letter-spacing: 0.08em;
}

.iacp-event-spacer { flex: 1; }

.iacp-event-needs-response {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  background: var(--color-error);
  color: var(--white);
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.iacp-event-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.iacp-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.iacp-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.iacp-author-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

.iacp-author-chip.prefix-agent .iacp-author-dot { background: var(--color-info); }
.iacp-author-chip.prefix-user .iacp-author-dot { background: var(--color-success); }
.iacp-author-chip.prefix-system .iacp-author-dot { background: var(--border-strong); }
.iacp-author-chip.prefix-human .iacp-author-dot { background: var(--color-warning); }

.iacp-trigger-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.iacp-trigger-badge.trigger-agent_write { background: rgba(255, 158, 100, 0.12); color: #c25a1d; border-color: rgba(255, 158, 100, 0.4); }
.iacp-trigger-badge.trigger-user_write  { background: rgba(122, 162, 247, 0.14); color: #2c5ab8; border-color: rgba(122, 162, 247, 0.4); }
.iacp-trigger-badge.trigger-newline_pause { background: rgba(245, 211, 110, 0.18); color: #8c6d10; border-color: rgba(245, 211, 110, 0.5); }

.iacp-event-body {
  color: var(--text-primary);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iacp-event-body.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.iacp-event-more {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 2px 0 0;
  text-decoration: underline;
}

.iacp-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.iacp-event-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.iacp-event-open:hover { text-decoration: underline; }

/* ── Section-aware extensions (Content IACP f8203b07) ──────────────
 * IacpEventCard now routes its body render by section_role:
 *   start  → SectionOpener with type-badge + attrs chips
 *   content→ plain markdown
 *   reply  → ReplyBlock with author+timestamp from XML attrs
 *   end    → collapsed boundary line (no body)
 * Header decoration adds a small section-type chip + the role tag. */

/* Type chips — share style, differentiate by colour */
.iacp-section-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.iacp-section-type.type-product    { background: rgba(22,163,74,0.10);  color: var(--color-success); border-color: rgba(22,163,74,0.3); }
.iacp-section-type.type-question   { background: rgba(37,99,235,0.10);  color: var(--color-info);    border-color: rgba(37,99,235,0.3); }
.iacp-section-type.type-task       { background: rgba(217,119,6,0.10);  color: var(--color-warning); border-color: rgba(217,119,6,0.3); }
.iacp-section-type.type-annotation { background: rgba(107,33,168,0.10); color: #6b21a8;              border-color: rgba(107,33,168,0.3); }
.iacp-section-type.type-vote       { background: rgba(196,30,58,0.10);  color: var(--accent);        border-color: rgba(196,30,58,0.3); }

.iacp-section-role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: lowercase;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.iacp-section-role.role-start  { color: var(--color-success); border-color: rgba(22,163,74,0.3); }
.iacp-section-role.role-reply  { color: #6b21a8; border-color: rgba(107,33,168,0.3); }
.iacp-section-role.role-end    { color: var(--text-muted); }

.iacp-your-role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-bg-strong);
  text-transform: lowercase;
}

/* targets / primary_recipient row */
.iacp-targets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.iacp-target-chip {
  padding: 1px 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
}
.iacp-target-chip.primary {
  background: var(--accent-bg);
  border-color: var(--accent-bg-strong);
  color: var(--accent);
  font-weight: 600;
}

/* Reply block — visually distinct via background + the lila ↩ icon
 * in the head. NO inner left-border because the outer card already
 * has one and two parallel vertical lines read as visual noise
 * (Alex feedback screenshot 110113). */
.iacp-reply-block {
  margin: 4px 0 6px;
  padding: 6px 10px;
  background: var(--white);
  border-radius: 3px;
}

.iacp-reply-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.iacp-reply-icon { color: #6b21a8; }
.iacp-reply-by   { font-weight: 600; color: var(--text-primary); }
.iacp-reply-at   { color: var(--text-muted); }

.iacp-reply-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  /* Collapsed: 4-line clamp via plain-block render; markdown-aware
   * clamp uses max-height to avoid breaking nested block layout. */
  max-height: 6.2em;
  overflow: hidden;
}
.iacp-reply-body.expanded { max-height: none; overflow: visible; }

/* Section opener — shows the attrs of a <section …> opener at start
 * of a new section. */
.iacp-section-opener {
  margin: 4px 0 6px;
}
.iacp-section-opener-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.iacp-section-id {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
}
.iacp-section-status {
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg-inset);
  border: 1px solid var(--border);
}
.iacp-section-status.status-open       { color: var(--color-info); border-color: rgba(37,99,235,0.3); }
.iacp-section-status.status-in_progress{ color: var(--color-warning); border-color: rgba(217,119,6,0.3); }
.iacp-section-status.status-done       { color: var(--color-success); border-color: rgba(22,163,74,0.3); }
.iacp-section-status.status-blocked    { color: var(--color-error); border-color: rgba(220,38,38,0.3); }

.iacp-section-initiator {
  font-style: italic;
}

/* Markdown body inside the card — same prose styles as PromptInspector
 * but at a slightly smaller scale because the card is constrained. */
.iacp-event-body-md {
  /* Override the plain-text clamp; markdown gets max-height instead so
   * block formatting (lists, headings, code) doesn't break mid-line. */
  display: block;
  max-height: 6.2em;
  -webkit-line-clamp: unset;
  overflow: hidden;
  white-space: normal;
}
.iacp-event-body-md.expanded { max-height: none; overflow: visible; }

.iacp-event-body-md > :first-child { margin-top: 0; }
.iacp-event-body-md > :last-child  { margin-bottom: 0; }

.iacp-event-body-md h1,
.iacp-event-body-md h2,
.iacp-event-body-md h3,
.iacp-event-body-md h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 10px 0 4px;
  line-height: 1.25;
  color: var(--text-primary);
}
.iacp-event-body-md h1 { font-size: 15px; }
.iacp-event-body-md h2 { font-size: 14px; }
.iacp-event-body-md h3 { font-size: 13px; }
.iacp-event-body-md h4 { font-size: 12px; color: var(--text-muted); }

.iacp-event-body-md p { margin: 0 0 6px; }
.iacp-event-body-md ul,
.iacp-event-body-md ol { margin: 0 0 6px; padding-left: 18px; }
.iacp-event-body-md li { margin: 1px 0; }
.iacp-event-body-md code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 2px;
}
.iacp-event-body-md pre {
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11px;
}
.iacp-event-body-md pre code { background: none; border: none; padding: 0; }
.iacp-event-body-md a { color: var(--accent); text-decoration: none; }
.iacp-event-body-md a:hover { text-decoration: underline; }

/* Reply body mirrors the markdown prose so its nested replies look the
 * same as the parent card's body. */
.iacp-reply-body > :first-child { margin-top: 0; }
.iacp-reply-body > :last-child  { margin-bottom: 0; }
.iacp-reply-body p              { margin: 0 0 4px; }
.iacp-reply-body h1,
.iacp-reply-body h2,
.iacp-reply-body h3,
.iacp-reply-body h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--text-primary);
}
.iacp-reply-body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 2px;
}

/* End-marker — minimal, full-width separator */
.iacp-event-card-end {
  padding: 4px 14px;
  background: transparent;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: center;
}
.iacp-section-end {
  display: inline-block;
}
/* ── Agent Detail Container ───────────────────────────────────── */
.agent-detail-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Use the JS-synced --vh from main.tsx (visualViewport.height) as the
     single source of truth — works pre-dvh and avoids iOS Safari's
     unreliable 100dvh which sometimes resolves to 100lvh (Large) even
     when the URL bar is visible, leaving a fat gap below the input. */
  height: calc(var(--vh, 1vh) * 100);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.agent-detail-container.drag-over {
  outline: 2px dashed var(--color-info);
  outline-offset: -2px;
}

/* ── Agent Header Bar ─────────────────────────────────────────── */
.agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.agent-header .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agent-header .agent-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.agent-header .agent-name-clickable {
  cursor: pointer;
  user-select: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease;
}

.agent-header .agent-name-clickable:hover {
  border-bottom-color: var(--text-muted);
}

.header-action-status {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-left: 8px;
}

.agent-header .agent-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}

.agent-header .agent-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.meta-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-tag .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
  font-weight: 500;
}

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }

/* Rate-limit badge: text + countdown sit above a thin progress strip
 * that grows from 0 → 100% over the watchdog's retry window (default
 * 180 s). Cloud-API commit 31a2735 emits stamped_at + retry_after on
 * the agent-state row so the strip is driven by absolute time, not
 * a local guess. */
.badge-rate-limited {
  position: relative;
  overflow: hidden;
  padding-bottom: 4px;
}

.badge-countdown {
  margin-left: 4px;
  opacity: 0.85;
  font-size: 10px;
}

.badge-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-warning);
  opacity: 0.7;
  transition: width 0.5s linear;
  pointer-events: none;
}

/* ── Content Stream ───────────────────────────────────────────── */
.content-stream {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px;
  min-width: 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.stream-entry {
  margin-bottom: 24px;
  min-width: 0;
  overflow: hidden;
}

.stream-entry:last-child {
  margin-bottom: 0;
}

/* ── User Input ───────────────────────────────────────────────── */
.entry-user {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.entry-user .entry-marker {
  width: 3px;
  min-height: 100%;
  background: var(--color-info);
  flex-shrink: 0;
  align-self: stretch;
}

.entry-user.source-queue .entry-marker { background: var(--color-warning); }
.entry-user.source-iacp .entry-marker { background: #bb9af7; }
.entry-user.source-system .entry-marker { background: var(--border-strong); }

.entry-user .entry-content {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Direct user input: render like text-selection — dark block, white
 * type. Alex saw it when accidentally selecting text and liked the look.
 * IACP / queue / system messages keep the plain look so it's still
 * obvious at a glance which entries came from a human typing vs from
 * another agent. */
.entry-user.source-direct .entry-content {
  display: inline-block;
  background: var(--text-primary);
  color: var(--white);
  padding: 4px 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.entry-user.source-direct .entry-marker {
  display: none;
}

.entry-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.user-media-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.user-media-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.entry-label-clickable {
  cursor: pointer;
}

.entry-label-clickable:hover {
  color: var(--text-primary);
}

.entry-source-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
}

.entry-source-tag.queue {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.entry-source-tag.iacp {
  background: rgba(187, 154, 247, 0.15);
  color: #bb9af7;
}

/* Small monochrome toggle to the right of the IACP/Queue tag — only
 * shown when the payload sniffer says XML or JSON. Click flips the
 * entry-content into a <pre> pretty-printed block. */
.format-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-toggle:hover {
  background: var(--bg-inset);
  color: var(--text-primary);
}

.format-toggle.active {
  background: var(--text-primary);
  color: var(--white);
  border-color: var(--text-primary);
}

.payload-pretty {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ── Agent Response ───────────────────────────────────────────── */
.entry-agent {
  padding-left: 15px;
  min-width: 0;
  overflow: hidden;
}

.entry-agent .entry-content {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.entry-agent .entry-content p {
  margin: 0 0 8px;
}

.entry-agent .entry-content p:last-child {
  margin-bottom: 0;
}

.entry-agent .entry-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1px 5px;
}

.entry-agent .entry-content pre {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 8px 0;
}

.entry-agent .entry-content pre code {
  background: none;
  border: none;
  padding: 0;
}

.entry-agent .entry-content ul,
.entry-agent .entry-content ol {
  padding-left: 20px;
  margin: 4px 0;
}

.entry-agent .entry-content a {
  color: var(--color-info);
  text-decoration: none;
}

.entry-agent .entry-content a:hover {
  text-decoration: underline;
}

/* ── Pretty JSON ───────────────────────────────────────────────
 * Generic polished JSON view (Layer 1, Alex feedback 2026-06-04 on
 * screenshot 110171). Goals: read like a document, not like a debug
 * dump. Currency values pop, ISO dates auto-format, single-item arrays
 * lose their `0:` wrapper, empty objects/arrays skip rendering. No
 * domain-smart cards yet (Alex said not now). */
.json-pretty {
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.55;
}

.json-pretty .json-pretty {
  padding: 0 0 0 14px;
  border-left: 1px solid var(--border);
  margin: 4px 0 4px 2px;
}

/* Semantic agent-card — rendering surface for persona-JSON output
   (Cloud IACP 57850f3a). Replaces the raw key-value dump with labelled
   sub-blocks for the well-known top-level fields: tts_summary,
   ergebnis, empfehlungen, memory_notes, _apus_chunk_. */
.agent-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-card-summary {
  font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--border-strong);
  padding: 4px 0 4px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.agent-card-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-card-h {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.agent-card-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.agent-card-list li {
  margin: 2px 0;
}

/* Memory-notes get an info-callout tint so they read distinctly from
   the action-oriented ergebnis/empfehlungen lists. */
.agent-card-memory {
  background: var(--bg-inset);
  border-left: 3px solid var(--accent, var(--text-primary));
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}
.agent-card-memory .agent-card-list {
  list-style: none;
  padding-left: 0;
}
.agent-card-memory .agent-card-list li::before {
  content: '✎ ';
  color: var(--text-muted);
  margin-right: 4px;
}

/* Apus chunk-committed embed — content-api push payload re-emitted by
   the agent. Shows a compact post-link + section meta + preview text
   instead of a raw nested JSON. */
.agent-card-apus {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.agent-card-apus-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 6px;
  font-family: var(--font-mono);
}
.agent-card-apus-meta a {
  color: var(--text-primary);
  text-decoration: underline;
  font-weight: 600;
}
.agent-card-apus-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Collapsed "Raw fields" — back-compat surface for keys the semantic
   renderer doesn't recognise. Hidden by default so the card stays
   scannable; users who care about debug fields can expand. */
.agent-card-debug {
  font-size: 12px;
}
.agent-card-debug summary {
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 4px 0;
}
.agent-card-debug summary:hover {
  color: var(--text-primary);
}

.json-field {
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.json-key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 88px;
  white-space: nowrap;
}

.json-key::after {
  content: ':';
  margin-left: 1px;
  color: var(--border-strong);
  font-weight: 400;
}

/* Internal/metadata keys (those starting with `_`) get de-emphasised
 * so the eye lands on the actual payload first. */
.json-key-meta {
  opacity: 0.6;
  font-style: italic;
}

/* Array item indices: numeric, slightly highlighted with the accent
 * colour so a list still reads as a list even without the `0:`-style
 * wrapper for single-item arrays. */
.json-key-index {
  min-width: 24px;
  color: var(--accent);
  font-weight: 600;
}

.json-key-index::after {
  content: '.';
}

.json-value {
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Currency: bold + monospace so subtotals visually align across a
 * column of rows (positions, expenses, …). */
.json-value-money {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.json-value-money.is-negative,
.json-value-num.is-negative {
  color: var(--color-error);
}

.json-value-num {
  font-family: var(--font-mono);
}

.json-value-date {
  color: var(--text-primary);
}

.json-value-long {
  display: block;
  flex-basis: 100%;
  margin-top: 2px;
  margin-left: 100px;
  line-height: 1.5;
  color: var(--text-primary);
  word-break: break-word;
}

.json-value-bool {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
}
.json-value-bool.is-true { color: var(--color-success); }
.json-value-bool.is-false { color: var(--color-error); }

.json-value-null {
  color: var(--text-muted);
  font-style: italic;
}

/* Mobile: drop the fixed key min-width so very narrow viewports don't
 * force the value onto its own line just because the key column took
 * 88px (Alex tests on iPhone portrait — visualViewport ~390px wide). */
@media (max-width: 480px) {
  .json-key { min-width: 0; }
  .json-value-long { margin-left: 0; }
}

.inline-media-img {
  max-width: 100%;
  max-height: 300px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--border);
  /* High-quality downscale: avoids the moiré bands Alex saw on helmet
     photos (fine parallel vents interacting with retina sub-pixel
     resampling). -webkit-optimize-contrast asks Safari/Chrome for the
     better bicubic-ish resampler instead of the cheap bilinear default. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* ── Content Post Embed ──────────────────────────────────────── */
.content-post-embed {
  position: relative;
  max-width: 480px;
  margin: 8px 0;
}

.content-post-iframe {
  width: 100%;
  height: 320px;
  border: 1px solid var(--border);
  background: var(--white);
  display: block;
}

.content-post-open {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.content-post-open:hover {
  opacity: 1;
  background: var(--bg-light);
}

/* ── Generic trusted-URL embed (standalone link → iframe) ───── */
.v2-content-embed {
  margin: 8px 0 8px 16px;
  max-width: 720px;
}

.v2-content-embed-iframe {
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  background: var(--white);
  display: block;
}

.v2-content-embed-caption {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 4px;
}

.v2-content-embed-caption a {
  color: var(--text-muted);
  word-break: break-all;
}

.inline-media-audio {
  width: 100%;
  margin: 8px 0;
  display: block;
}

.inline-media-video {
  max-width: 100%;
  max-height: 300px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--border);
}

.entry-agent .entry-content h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 6px;
  line-height: 1.4;
}

.entry-agent .entry-content h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
  line-height: 1.4;
}

.entry-agent .entry-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0 4px;
  line-height: 1.4;
}

.entry-agent .entry-content h4,
.entry-agent .entry-content h5,
.entry-agent .entry-content h6 {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 4px;
  line-height: 1.4;
}

/* ── Tool Call (collapsible) ──────────────────────────────────── */
.tool-call {
  margin: 12px 0;
  border-left: 1px solid var(--border);
  margin-left: 15px;
}

.tool-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.tool-call-header:hover {
  background: var(--bg-light);
}

.tool-call-chevron {
  font-size: 10px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}

.tool-call-chevron.open {
  transform: rotate(90deg);
}

.tool-call-name {
  font-weight: 500;
  color: var(--text-primary);
}

.tool-call-status {
  margin-left: auto;
}

.tool-call-body {
  padding: 0 12px 12px;
}

.tool-call-body.collapsed {
  display: none;
}

/* ── IACP Federation Tool Calls ─────────────────────────────────── */
.iacp-tool-call {
  border-left-color: var(--accent);
  border-left-width: 2px;
}

.iacp-tool-call .tool-call-header {
  color: var(--text-primary);
}

.iacp-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.iacp-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.iacp-target {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.iacp-target-unknown {
  color: var(--text-muted);
  font-weight: 400;
}

.iacp-msgid {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-light);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.iacp-preview {
  font-style: italic;
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 0 8px;
  line-height: 1.5;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 8px;
}

/* ── Code Block ───────────────────────────────────────────────── */
.code-block {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-primary);
  max-width: 100%;
}

/* ── Mermaid Diagram ──────────────────────────────────────────── */
.v2-mermaid {
  /* No frame, no background — diagram sits naked in chat flow. */
  background: transparent;
  border: none;
  padding: 0;
  margin: 8px 0 8px 16px;
  text-align: center;
  overflow-x: auto;
  max-width: 100%;
  /* Use containment so the browser doesn't have to re-flow surrounding
     content while the SVG's embedded <style> block is being parsed. */
  contain: layout style;
}

.v2-mermaid svg {
  max-width: 100%;
  height: auto;
}

/* FOUC defense: beautiful-mermaid emits SVG with an embedded <style>
   block, which the browser parses asynchronously. For a frame or two
   the SVG renders with the SVG default fills (#000000 — that's the
   black flash Alex sees). Force the safe defaults at the SVG element
   level so even the unstyled paint already looks right. */
.v2-mermaid svg rect,
.v2-mermaid svg polygon,
.v2-mermaid svg ellipse {
  fill: #ffffff;
}

.v2-mermaid svg path:not([fill]),
.v2-mermaid svg line:not([stroke]) {
  stroke: #6b7280;
}

.v2-mermaid svg text {
  fill: #1f2937;
}

.mermaid-fallback {
  /* Inherits .code-block styles; flag the failure with a subtle border */
  border-color: var(--color-warning, #B45309);
}

/* ── Diff Block ───────────────────────────────────────────────── */
.diff-block {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}

.diff-line {
  padding: 1px 16px;
  white-space: pre;
}

.diff-line.add {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.diff-line.remove {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.diff-line.context {
  color: var(--text-muted);
}

.diff-line.header {
  color: var(--color-info);
  font-weight: 500;
}

/* ── Inline Table ─────────────────────────────────────────────── */
.inline-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}

.inline-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.inline-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.inline-table td.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.inline-table tbody tr {
  transition: background-color 0.15s ease;
}

.inline-table tbody tr:hover {
  background: var(--bg-light);
}

/* ── V2 Table (Markdown-rendered) ─────────────────────────────── */
.v2-table {
  margin: 8px 0 8px 15px;
  overflow-x: auto;
}

.v2-tasklist {
  margin: 6px 0 6px 15px;
  font-size: 12px;
}

.v2-tasklist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.v2-tasklist-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.v2-tasklist-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.v2-tasklist-chevron.is-open {
  transform: rotate(90deg);
}

.v2-tasklist-label {
  white-space: nowrap;
}

.v2-tasklist-body {
  margin-top: 6px;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  font-size: 13px;
}

.v2-tasklist-body p {
  margin: 0 0 6px 0;
}

.v2-tasklist-body ul {
  list-style: none;
  padding: 0;
  margin: 4px 0;
}

.v2-tasklist-body li {
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.v2-tasklist-body input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--accent);
  cursor: default;
}

.v2-tasklist-body em {
  color: var(--text-muted);
  font-size: 12px;
}

.v2-tasklist-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.v2-tasklist-body li strong {
  font-weight: 600;
  color: var(--accent);
}

.v2-tree {
  margin: 8px 0 8px 15px;
  padding: 12px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  overflow-x: auto;
}

.v2-tree-row {
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre;
  line-height: 1.6;
}

.v2-tree-prefix {
  color: var(--text-light);
  flex-shrink: 0;
}

.v2-tree-name {
  color: var(--text-primary);
}

.v2-tree-name.folder {
  color: var(--accent);
  font-weight: 600;
}

.v2-tree-annotation {
  color: var(--text-muted);
  margin-left: auto;
  padding-left: 16px;
  font-style: italic;
  font-size: 11px;
}

.v2-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: inherit;
}

.v2-table th,
.v2-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  word-break: break-word;
}

.v2-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.v2-table td {
  font-family: var(--font-mono);
  font-size: 12px;
}

.v2-table tbody tr {
  transition: background-color 0.15s ease;
}

.v2-table tbody tr:hover {
  background: var(--bg-light);
}

/* ── Input Bar ────────────────────────────────────────────────── */
.input-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
}

.input-field {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.input-field:focus {
  border-bottom-color: var(--text-primary);
}

.input-field::placeholder {
  color: var(--text-muted);
}

.input-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.input-action:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.input-action.primary {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
}

.input-action.primary:hover {
  background: var(--black);
}

/* ── Empty State ─────────────────────────────────────────────── */
.main-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* ── Sending Indicator ────────────────────────────────────────── */
/* In-flow, left aligned. Sits as the last child inside .content-stream
 * after the turns, so it scrolls with the conversation. Alex prefers
 * this over the floating pill variant (Commit 8d2b0c0, Issue #19). */
.sending-indicator {
  display: flex;
  gap: 6px;
  padding: 16px 15px;
}

.sending-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: sending-bounce 1.2s infinite ease-in-out;
}

.sending-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.sending-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes sending-bounce {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ── Back Button ──────────────────────────────────────────────── */
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.back-button:hover {
  border-color: var(--text-primary);
  background: var(--bg-light);
}

/* ── Mobile ───────────────────────────────────────────────────── */
/* Phone landscape's innerWidth is >768px (iPhone 14 Pro: 844px), so
 * a pure max-width:768px never fired there. Adding the height clause
 * catches landscape too so InputBar pad + meta-hide kick in. */
@media (max-width: 768px), (max-height: 500px) {
  .agent-header {
    padding: 12px 16px;
  }

  .agent-header .agent-meta {
    display: none;
  }

  .content-stream {
    padding: 16px;
  }

  .input-bar {
    padding: 12px 16px;
  }
}

/* Neutral badge for SUSPENDED — paused, not warning. */
.badge-neutral {
  background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
  color: var(--text-muted);
}

/* Suspended-state empty body: replaces the blank conversation area when
 * the agent is paused. Click triggers /sessions/<name>/resume via the
 * same runHeaderAction path the lifecycle menu uses. */
.suspended-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 64px auto;
  padding: 32px 40px;
  max-width: 360px;
  text-align: center;
  background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  color: var(--text-muted);
}

.suspended-icon {
  opacity: 0.6;
}

.suspended-title {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.suspended-detail {
  font-size: 13px;
  line-height: 1.5;
}

.suspended-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 16px;
  background: var(--color-success, #16A34A);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.suspended-action:hover:not(:disabled) {
  opacity: 0.9;
}

.suspended-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* MCP-Server panel opened from the header menu — the shared <McpPanel>
   renders as an inline block (its native form in the sidebar), so here
   we float it as a centered card over a backdrop. Reuses .ctx-backdrop
   (z-index 9998) for the dimmer. */
.mcp-modal-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.mcp-modal-wrap .mcp-panel {
  border-bottom: none;
}

/* Recap card — the CLI's "* recap:" turn-summary (Cloud IACP d3e3c1fa),
   rendered as a distinct meta-block set apart from the agent prose. */
.recap-card {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg-inset);
  border-left: 3px solid var(--accent, var(--text-primary));
  border-radius: 0 6px 6px 0;
}
.recap-head {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.recap-icon { font-size: 12px; }
.recap-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}
.recap-next {
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.recap-next-label {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.recap-next-text { color: var(--text-muted); line-height: 1.5; }
.recap-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.recap-chip {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 3px 9px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.recap-chip:hover {
  background: var(--text-primary);
  color: var(--white);
  border-color: var(--text-primary);
}

/* Live Now/Next card (Cloud IACP 308c9a3b) — top of the conversation
   during an active turn. Warning accent = the orange "working" state
   made concrete. Vanishes on turn-end; the recap card then summarizes. */
.nownext-card {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--color-warning-bg, rgba(217,119,6,0.08));
  border-left: 3px solid var(--color-warning);
  border-radius: 0 6px 6px 0;
}
.nownext-now {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}
.nownext-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-warning);
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  animation: nownext-spin 0.7s linear infinite;
}
@keyframes nownext-spin { to { transform: rotate(360deg); } }
.nownext-act { flex: 1; min-width: 0; }
.nownext-elapsed {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-warning);
  flex-shrink: 0;
}
.nownext-next {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.nownext-next-label {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-right: 4px;
}
.queue-chat {
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  background: var(--white);
  font-family: var(--font-body);
  max-width: 600px;
  margin: 0 auto;
}

.qc-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.qc-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.qc-stream {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  min-height: 0;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.qc-stream * { max-width: 100%; }

.qc-turn {
  margin-bottom: 16px;
}

.qc-user {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.qc-user-marker {
  width: 3px;
  background: var(--color-info);
  flex-shrink: 0;
  align-self: stretch;
}

.qc-user-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.qc-agent {
  padding-left: 11px;
}

.qc-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

.qc-text p { margin: 0 0 6px; font-size: 15px; }
.qc-text p:last-child { margin-bottom: 0; }
.qc-text code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-inset); padding: 1px 4px; }
.qc-text a { color: var(--color-info); }
.qc-text ul, .qc-text ol { font-size: 15px; padding-left: 20px; }
.qc-text li { font-size: 15px; }
.qc-text img { max-width: 100%; height: auto; display: block; border: 1px solid var(--border); margin: 6px 0; }
.qc-text video, .qc-text audio { max-width: 100%; }
.qc-text pre { max-width: 100%; overflow-x: auto; }

.qc-tool {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 0;
}

.qc-sending {
  display: flex;
  gap: 4px;
  padding: 8px 11px;
}

.qc-sending span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: qc-bounce 1.2s infinite ease-in-out;
}

.qc-sending span:nth-child(2) { animation-delay: 0.2s; }
.qc-sending span:nth-child(3) { animation-delay: 0.4s; }

@keyframes qc-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.qc-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.qc-input {
  flex: 1;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  background: transparent;
  color: var(--text-primary);
  resize: none;
  overflow-y: hidden;
  line-height: 1.4;
}

.qc-input::placeholder { color: var(--text-muted); }
.qc-input:focus { border-bottom-color: var(--text-primary); }

.qc-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.qc-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.qc-send {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
}

.qc-send:hover { background: var(--black); }

.qc-cancel {
  color: var(--text-muted);
}

.qc-cancel:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}

.qc-recording-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-success);
  text-align: center;
}
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: var(--white);
}

.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
}

.login-logo {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.login-logo span {
  color: var(--accent);
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.login-google-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text-primary);
  color: var(--white);
  border: none;
  border-radius: 0;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.login-google-btn:hover {
  background: var(--black);
}

.login-error {
  margin-top: 16px;
  color: var(--accent);
  font-size: 13px;
}

.login-toggle-email {
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.login-toggle-email:hover {
  color: var(--text-primary);
}

.login-email-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-email-form input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
}

.login-email-form input:focus {
  outline: none;
  border-color: var(--text-primary);
}

.login-submit-btn {
  padding: 10px 14px;
  background: var(--text-primary);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.login-submit-btn:hover:not(:disabled) {
  background: var(--black);
}

.login-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ── Dialog Backdrop ──────────────────────────────────────────── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9000;
}

/* ── Dialog Container ────────────────────────────────────────── */
.new-session-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border: 1px solid var(--border);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: 9001;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ── Header ──────────────────────────────────────────────────── */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.dialog-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.dialog-close {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.dialog-close:hover {
  color: var(--text-primary);
}

/* ── Body ────────────────────────────────────────────────────── */
.dialog-body {
  padding: 20px 24px;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.dialog-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.dialog-avatar {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  transition: border-color 0.15s ease;
}

.dialog-avatar:hover {
  border-color: var(--text-primary);
}

.dialog-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dialog-avatar-placeholder {
  font-size: 20px;
  color: var(--text-muted);
}

.dialog-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dialog-avatar {
  position: relative;
}

.dialog-avatar-overlay-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dialog-avatar-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: color 0.15s ease;
}

.dialog-avatar-btn:hover {
  color: var(--text-primary);
}

.dialog-avatar-remove {
  color: var(--accent);
}

.dialog-avatar-remove:hover {
  color: var(--accent-hover);
}

.dialog-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.dialog-field {
  display: flex;
  flex-direction: column;
}

.dialog-field.full {
  grid-column: 1 / -1;
}

.dialog-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.dialog-input {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.dialog-input:focus {
  border-bottom-color: var(--text-primary);
}

.dialog-input::placeholder {
  color: var(--text-muted);
}

.dialog-select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 8px 28px 8px 0;
  background-color: var(--white);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  transition: border-color 0.2s ease;
}

.dialog-select:focus {
  border-bottom-color: var(--text-primary);
}

.dialog-select:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ── Effort Buttons ──────────────────────────────────────────── */
.dialog-effort-row {
  display: flex;
  border: 1px solid var(--border);
}

.dialog-effort-btn {
  flex: 1;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dialog-effort-btn:last-child {
  border-right: none;
}

.dialog-effort-btn:hover {
  color: var(--text-primary);
}

.dialog-effort-btn.active {
  background: var(--text-primary);
  color: var(--white);
}

/* ── Lifecycle ───────────────────────────────────────────────── */
.dialog-lifecycle-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dialog-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  cursor: pointer;
}

.dialog-toggle-info {
  flex: 1;
  min-width: 0;
}

.dialog-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.dialog-toggle-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.dialog-toggle-switch {
  width: 36px;
  height: 20px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border-radius: 0;
  padding: 0;
  transition: all 0.15s ease;
}

.dialog-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  transition: all 0.15s ease;
}

.dialog-toggle-switch.active {
  background: var(--accent);
  border-color: var(--accent);
}

.dialog-toggle-switch.active::after {
  left: calc(100% - 16px);
  background: var(--white);
}

/* ── MCP Servers ─────────────────────────────────────────────── */
.dialog-mcp-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dialog-mcp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}

.dialog-mcp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.dialog-mcp-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--text-primary);
  cursor: pointer;
}

.dialog-mcp-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

/* ── Permissions Preview ─────────────────────────────────────── */
.dialog-permissions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dialog-perm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.dialog-perm-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border);
}

/* ── Error ───────────────────────────────────────────────────── */
.dialog-error {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 12px;
}

/* ── Footer ──────────────────────────────────────────────────── */
.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.dialog-btn-primary {
  padding: 8px 20px;
  background: var(--text-primary);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dialog-btn-primary:hover {
  background: var(--black);
}

.dialog-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dialog-btn-secondary {
  padding: 8px 20px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dialog-btn-secondary:hover {
  border-color: var(--text-primary);
}

/* ── Name-collision warning (#46) ─────────────────────────────── */
.dialog-input-error {
  border-color: var(--color-error, #d22) !important;
  background: var(--color-error-bg, rgba(220, 34, 34, 0.06)) !important;
}

.dialog-input-warn {
  border-color: var(--color-warning, #c80) !important;
  background: var(--color-warning-bg, rgba(204, 136, 0, 0.06)) !important;
}

.dialog-field-error {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-error, #d22);
  line-height: 1.4;
}

.dialog-field-warn {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-warning, #c80);
  line-height: 1.4;
}

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

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .new-session-dialog {
    width: calc(100vw - 24px);
    top: auto;
    bottom: 16px;
    transform: translateX(-50%);
  }

  .dialog-form-grid {
    grid-template-columns: 1fr;
  }
}
.update-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  background: var(--text-primary);
  color: var(--white);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font-family: var(--font-body);
  font-size: 13px;
  max-width: calc(100vw - 32px);
}
.update-prompt-text { white-space: nowrap; }
.update-prompt-btn {
  background: var(--white);
  color: var(--text-primary);
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.update-prompt-btn:hover { opacity: 0.88; }
.update-prompt-dismiss {
  background: transparent;
  border: none;
  color: var(--white);
  opacity: 0.6;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}
.update-prompt-dismiss:hover { opacity: 1; }
:root {
  --white: #FFFFFF;
  --black: #000000;
  --text-primary: #333333;
  --text-body: #000000;
  --text-muted: #999999;
  --text-light: #999999;
  --border: #E5E5E5;
  --border-strong: #D0D0D0;
  --bg-light: #F8F8F8;
  --bg-inset: #FAFAFA;
  --accent: #C41E3A;
  --accent-hover: #A3182F;
  --accent-bg: rgba(196, 30, 58, 0.08);
  --accent-bg-strong: rgba(196, 30, 58, 0.15);
  --color-success: #16A34A;
  --color-success-bg: rgba(22, 163, 74, 0.10);
  --color-warning: #D97706;
  --color-warning-bg: rgba(217, 119, 6, 0.10);
  --color-error: #DC2626;
  --color-error-bg: rgba(220, 38, 38, 0.10);
  --color-info: #2563EB;
  --color-info-bg: rgba(37, 99, 235, 0.10);
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: 'Roboto Flex', 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --sidebar-width: 280px;
}

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

html {
  overflow: hidden;
  height: 100%;
  max-width: 100vw;
}

body {
  overflow: hidden;
  height: 100%;
  max-width: 100vw;
}

body {
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--text-primary);
  color: var(--white);
}

::-webkit-scrollbar { width: 4px; height: 4px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }

::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* position: fixed anchors #root to the visual viewport so iOS Safari
 * can't auto-scroll the whole window upward to "reveal" a focused input
 * when the soft keyboard appears. Without this, overflow: hidden on
 * html/body is not enough — the layout viewport stays full-height while
 * the visual viewport collapses, and the system scrolls everything up.
 * Fixed positioning pins the app to the visible area; the visualViewport
 * resize listener in main.tsx keeps --vh in sync. */

#root {
  position: fixed;
  inset: 0;
  display: flex;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  width: 100%;
}

/* Suspense fallback while a lazy view-chunk downloads (code-splitting).
   Centered, quiet — chunks are small and cached, so this flashes at
   most once per view per deploy. */

.view-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.17.0"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}