/* מעורב ירושלמי — styles. Colors are tokens (also the Tailwind theme, web/tailwind.config.js). */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --primary:           #266829;
  --primary-dim:       #185c1e;
  --primary-bright:    #2e7d32;
  --on-primary:        #d1ffc8;
  --primary-container: #b2faa9;
  --primary-soft:      #e8f5e3;
  --primary-line:      #cfe6cf;

  --surface:           #f7f6f3;
  --surface-lowest:    #ffffff;
  --surface-raised:    #fafaf8;
  --surface-low:       #f1f1ee;
  --surface-container: #e8e8e5;
  --surface-high:      #e2e3df;
  --surface-highest:   #ddddda;

  --ink:               #2e2f2d;
  --ink-soft:          #3e3f3d;
  --ink-muted:         #5b5c5a;
  --outline:           #767775;
  --ink-faint:         #8a8a87;
  --outline-variant:   #adadab;

  --error:             #b02500;
  --error-container:   #f95630;
  --error-soft:        #fff0ee;
  --tertiary:          #765600;
  --thinking:          #b45309;
  --warn-strong:       #d9a93a;
  --warn-line:         #fde68a;
  --warn-soft:         #fffbeb;
  --highlight:         #fff1a8;
  --highlight-strong:  #ffe87a;
  --secondary:         #005f99;
  --secondary-soft:    #ecf3ff;

  --cite:              #6366f1;
  --cite-strong:       #4f46e5;
  --cite-line:         #c7d2fe;
  --cite-soft:         #e0e7ff;

  --font:              'Heebo', sans-serif;
  --radius-sm:         6px;
  --radius:            10px;
  --radius-lg:         14px;
  --shadow-raised:     0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  --hover-tint:        color-mix(in srgb, var(--ink) 6%, transparent);
  --panel-header-height: 52px;
}

/* ── Base ───────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background-color: var(--surface);
  color: var(--ink);
  scrollbar-gutter: stable;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface-low); }
::-webkit-scrollbar-thumb { background: var(--surface-highest); border-radius: 10px; }

/* ── Material Symbols ───────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── AI thought gradient card ───────────────────────────────── */
.ai-thought-gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent) 0%, rgba(0, 95, 153, 0.05) 100%);
}

/* ── Prose / markdown content ───────────────────────────────── */
.prose-content {
  line-height: 1.85;
  font-size: 0.95rem;
  direction: rtl;
  color: var(--ink);
  word-break: break-word;
}

.prose-content h1,
.prose-content h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 14px 0 6px;
  color: var(--primary);
}

.prose-content h3 {
  font-size: 0.97rem;
  font-weight: 600;
  margin: 10px 0 5px;
  color: var(--ink);
}

.prose-content h4,
.prose-content h5,
.prose-content h6 {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 8px 0 4px;
}

.prose-content p {
  margin-bottom: 8px;
}

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

.prose-content ul,
.prose-content ol {
  padding-right: 1.4rem;
  padding-left: 0;
  margin: 6px 0;
}

.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }

.prose-content li {
  margin-bottom: 4px;
}

.prose-content strong { font-weight: 700; }

.prose-content em { font-style: italic; }

.prose-content hr {
  border: none;
  border-top: 1px solid var(--surface-high);
  margin: 12px 0;
}

.prose-content code {
  background: var(--surface-low);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.86em;
  font-family: monospace;
  direction: ltr;
  display: inline-block;
}

.prose-content pre {
  background: var(--surface-low);
  border-radius: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  margin: 8px 0;
  direction: ltr;
  text-align: left;
}

.prose-content pre code {
  background: none;
  padding: 0;
  font-size: 0.82rem;
}

.prose-content blockquote {
  border-right: 3px solid var(--primary-container);
  padding-right: 12px;
  margin: 8px 0;
  color: var(--ink-muted);
  font-style: italic;
}

/* ── Streaming cursor ───────────────────────────────────────── */
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--primary);
  margin-right: 2px;
  vertical-align: text-bottom;
  animation: blink 0.65s step-end infinite;
}

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

/* ── Thinking panel sub-details ─────────────────────────────── */
.sub-details {
  border: none;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface);
  overflow: hidden;
}

.sub-summary {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  direction: rtl;
}

.sub-summary::-webkit-details-marker { display: none; }
.sub-summary:hover { background: var(--surface-container); }

.sub-summary::before {
  content: '◀';
  font-size: 0.55rem;
  transition: transform 0.15s;
  display: inline-block;
  flex-shrink: 0;
}

details[open] > .sub-summary::before { transform: rotate(-90deg); }

.sub-details-body {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--surface-high);
}

.prompt-block { margin-bottom: 8px; }
.prompt-block:last-child { margin-bottom: 0; }

.prompt-role {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--outline-variant);
  margin-bottom: 4px;
  direction: ltr;
}

.prompt-text {
  font-family: monospace;
  font-size: 0.72rem;
  background: var(--surface-low);
  border-radius: 6px;
  padding: 7px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  direction: rtl;
  text-align: right;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  border: none;
}

.thinking-text {
  color: var(--tertiary);
  background: var(--warn-soft);
  border: none;
  max-height: 300px;
  overflow-y: auto;
  direction: ltr;
  text-align: left;
}

.thinking-summary { color: var(--thinking); }

.tool-summary-label { color: var(--secondary); font-family: monospace; }
.tool-time { color: var(--ink-muted); font-family: monospace; font-size: 0.68rem; margin-inline-start: 6px; }

/* ── Retrieval stats ────────────────────────────────────────── */
.stats-row {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: var(--surface-low);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.chunk-list { list-style: none; }

.chunk-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--surface-container);
  font-size: 0.75rem;
}

.chunk-item:last-child { border-bottom: none; }
.chunk-date { color: var(--outline-variant); white-space: nowrap; font-family: monospace; direction: ltr; }
.chunk-topic { flex: 1; direction: rtl; text-align: right; color: var(--ink); }
.chunk-sim { color: var(--primary); font-family: monospace; white-space: nowrap; font-size: 0.72rem; }

/* ── Live thinking pulse dot ────────────────────────────────── */
.live-thinking-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tertiary);
  flex-shrink: 0;
  animation: thinking-pulse 1.2s ease-in-out infinite;
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.65); }
}

/* ── Textarea auto-resize helper ────────────────────────────── */
#query-input { overflow-y: hidden; }

/* ── Chat messages ───────────────────────────────────────────── */
.msg-user {
  display: flex;
  justify-content: flex-start; /* RTL: user bubble on left visually = RTL start */
  padding: 0 4px;
}

.msg-user-bubble {
  max-width: 78%;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-agent {
  max-width: 900px;
  width: 100%;
}

.msg-agent-card {
  background: var(--surface-lowest);
  border-radius: 16px;
  border: none;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.msg-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  padding: 4px 2px;
  direction: rtl;
}

.input-error { color: var(--error); font-size: 0.75rem; }

.msg-error {
  background: var(--error-soft);
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--error);
  font-size: 0.88rem;
  direction: rtl;
  max-width: 600px;
}

/* ── Thinking dots (status animation) ───────────────────────── */
.thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: thinking-dot-bounce 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes thinking-dot-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── AI Stages card ──────────────────────────────────────────── */
.ai-stages-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, transparent) 0%, rgba(0,95,153,0.04) 100%);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
}

.ai-stages-header {
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--surface-high);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  direction: rtl;
}

.stage-card {
  border-bottom: 1px solid var(--surface-high);
}

.stage-card:last-child { border-bottom: none; }

.stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  direction: rtl;
  transition: background 0.1s;
}

.stage-header:hover { background: rgba(0,0,0,0.025); }

.stage-arrow {
  font-size: 0.55rem;
  color: var(--outline-variant);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.stage-header.open .stage-arrow { transform: rotate(-90deg); }

.stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--outline-variant);
}

.stage-dot.router   { background: var(--secondary); }
.stage-dot.rag      { background: var(--primary); }
.stage-dot.factual  { background: var(--tertiary); }
.stage-dot.reviewer { background: var(--error); }
.stage-dot.tool     { background: var(--ink-muted); }
.stage-dot.research { background: #6b3fa0; }

.subgraph-inner-stages {
  padding: 4px 0 0 12px;
  border-right: 2px solid var(--surface-container);
  margin-top: 6px;
}
.subgraph-inner-stages .stage-card {
  margin-bottom: 4px;
}

.reconnect-partial-notice {
  font-size: 0.78rem;
  color: var(--tertiary);
  background: var(--warn-soft);
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  margin: 4px 0 8px 0;
  direction: rtl;
  line-height: 1.45;
}

.stage-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  direction: rtl;
}

.stage-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-container);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

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

.stage-time {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--outline);
}

.stage-tools-badge,
.stage-loop-badge {
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.stage-tools-badge {
  background: var(--secondary-soft);
  color: var(--secondary);
}

.stage-loop-badge {
  background: var(--warn-soft);
  color: var(--tertiary);
}

.stage-body {
  display: none;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--surface-high);
  background: rgba(255,255,255,0.6);
  direction: rtl;
}

.stage-body.visible { display: block; }

/* ── Option select panel ─────────────────────────────────────── */
.option-select-card {
  background: var(--surface-lowest);
  border: none;
  border-radius: 16px;
  padding: 20px;
  max-width: 600px;
  direction: rtl;
}

.option-select-prompt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}

.option-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: right;
  background: var(--surface);
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  direction: rtl;
  gap: 2px;
}

.option-btn:hover { border-color: var(--primary); background: var(--surface-low); }
.option-btn.selected { border-color: var(--primary-container); background: var(--primary-container); }
.option-btn.selected .option-label { font-weight: 700; }

.option-label { font-size: 0.88rem; color: var(--ink); direction: rtl; }
.option-desc  { font-size: 0.75rem; color: var(--ink-muted); direction: rtl; }
.option-subtitle {
  font-size: 0.73rem;
  color: var(--secondary);
  direction: rtl;
  font-style: italic;
  margin-top: 2px;
}

.option-submit {
  margin-top: 10px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 10px;
  padding: 9px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.option-submit:hover { background: var(--primary-dim); }
.option-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Text input panel ────────────────────────────────────────── */
.text-input-card {
  background: var(--surface-lowest);
  border: none;
  border-radius: 16px;
  padding: 20px;
  max-width: 600px;
  direction: rtl;
}

.text-input-prompt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

.text-input-field {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: var(--ink);
  direction: rtl;
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
  font-family: inherit;
}

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

.text-input-submit {
  margin-top: 10px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 10px;
  padding: 9px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.text-input-submit:hover { background: var(--primary-dim); }
.text-input-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   PROTOCOL BROWSER
══════════════════════════════════════════════════════════════════ */

/* Outer wrapper — full-width msg-agent block */
.browser-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.browser-panel {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  direction: rtl;
  position: relative;
}

/* ── Header ─────────────────────────────────────────────────── */
.browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--primary);
  color: var(--on-primary);
  flex-shrink: 0;
}

.browser-breadcrumb {
  font-size: 0.8rem;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

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

.browser-summarize-btn {
  background: rgba(255,255,255,0.15);
  color: var(--on-primary);
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.browser-summarize-btn:hover { background: rgba(255,255,255,0.28); }

.browser-close-btn {
  background: transparent;
  color: var(--on-primary);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.browser-close-btn:hover { background: rgba(0,0,0,0.2); }

/* ── Summary header sub-bar ─────────────────────────────────── */
.browser-summary-bar {
  flex-shrink: 0;
  background: var(--surface-lowest);
  border-bottom: 1px solid var(--surface-high);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.browser-summary-bar.open {
  max-height: 300px;
  overflow-y: auto;
}
.summary-bar-inner {
  padding: 10px 16px;
  direction: rtl;
}
.browser-summary-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  color: var(--on-primary);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  flex-shrink: 0;
}
.browser-summary-btn:hover { background: rgba(255,255,255,0.28); }

/* ── Body (two columns) ─────────────────────────────────────── */
.browser-body {
  display: flex;
  flex-direction: row-reverse;  /* sidebar on right in RTL layout */
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* ── Transcript wrap: heatmap strip + scrollable col ────────── */
.browser-transcript-wrap {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-width: 0;
  position: relative;
}

/* Heatmap hover: the match under the pointer */
.hm-tip {
  position: absolute;
  right: 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 9px;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--surface-lowest);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  white-space: nowrap;
  direction: rtl;
  pointer-events: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 25%, transparent);
}
.hm-tip[hidden] { display: none; }
.hm-tip b { font-weight: 700; }
.hm-tip span { opacity: 0.8; }

/* Floating transcript navigation (start / previous match / count / next match / end) */
.proto-nav {
  position: absolute;
  left: 14px;
  top: calc(var(--panel-header-height) + 10px);
  z-index: 15;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: color-mix(in srgb, var(--surface-lowest) 92%, transparent);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.proto-nav:hover { opacity: 1; }
.proto-nav-hits { display: flex; align-items: center; gap: 2px; }
.browser-transcript-wrap:has(details.summary-panel[open]) .proto-nav { opacity: 0; pointer-events: none; }
.proto-nav-hits[hidden] { display: none; }
.proto-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.proto-nav-btn:hover { background: var(--primary-soft); color: var(--primary); }
.proto-nav-btn .material-symbols-outlined { font-size: 18px; }
.proto-nav-hits .proto-nav-btn { color: var(--primary); }
.proto-nav-count { font-size: 0.7rem; font-weight: 700; color: var(--primary-dim); line-height: 1; padding: 0 2px; min-width: 3.2em; text-align: center; }

/* ── Heatmap strip (left edge, alongside scrollbar) ─────────── */
/*
 * Fixed-height, does NOT scroll.
 * .hm-bands: marks at the rendered positions of the query's words (_renderHeatmap).
 * .hm-viewport: semi-transparent overlay tracking scroll position.
 */
.heatmap-strip {
  order: -1;
  flex-shrink: 0;
  width: 10px;
  margin: 10px 6px 10px 0;
  position: relative;
  background: var(--surface-low);
  border-radius: 9999px;
  cursor: pointer;
  overflow: hidden;
}

.hm-bands {
  position: absolute;
  inset: 0;
}

.hm-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-bright);
}

/* loading wave — sweeping highlight that travels top→bottom */
@keyframes hm-sweep {
  0%   { top: -40%; }
  100% { top: 140%; }
}
.heatmap-strip.loading::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 35%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: hm-sweep 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* viewport indicator */
.hm-viewport {
  position: absolute;
  left: 0; right: 0;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  pointer-events: none;
  border-radius: 9999px;
}

/* ── Transcript column (left / flex-1) ──────────────────────── */
.browser-transcript-col {
  flex: 1;
  overflow-y: auto;
  direction: ltr;        /* pushes native scrollbar to right */
  min-width: 0;
  /* hide native scrollbar — viewport shown on heatmap strip */
  scrollbar-width: none;
}
.browser-transcript-col::-webkit-scrollbar { display: none; }

/* RTL content wrapper inside the ltr scroll container */
.transcript-inner {
  direction: rtl;
  padding: 16px;
  padding-top: 0;
}

/* ── Sidebar (right / fixed width, collapsible) ─────────────── */
.browser-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-lowest);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
}
.browser-sidebar.sidebar-collapsed {
  width: 0px;
}
/* Mobile: sidebar toggle in browser header */
.sidebar-mob-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--on-primary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.sidebar-mob-btn:hover { background: rgba(0,0,0,0.18); }

/* Desktop: expand button in header (shown when sidebar is collapsed) */
.sidebar-expand-btn {
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  color: var(--on-primary);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  flex-shrink: 0;
}
.sidebar-expand-btn:hover { background: rgba(255,255,255,0.28); }

/* Desktop: sidebar top header (above meeting list) */
.sidebar-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--panel-header-height);
  padding: 0 14px;
  background: var(--surface-lowest);
  flex-shrink: 0;
}
.sidebar-top-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  user-select: none;
}
.sidebar-top-close {
  background: transparent;
  border: none;
  color: var(--outline);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
}
.sidebar-top-close:hover { background: var(--surface-container); color: var(--ink); }

/* Floating side-tab: mobile standalone only */
.sidebar-side-tab {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 54px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 8px 0 0 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  flex-shrink: 0;
  padding: 0;
}
.sidebar-side-tab:hover { background: var(--primary-dim); }

@media (max-width: 767px) {
  .sidebar-mob-btn  { display: flex; }
  .sidebar-top-header { display: none; }
  .sidebar-expand-btn { display: none !important; }
  .browser-standalone-wrapper .sidebar-top-header { display: flex; }
}
.browser-standalone-wrapper .browser-header { display: none; }
.browser-standalone-wrapper .browser-summary-bar { display: none !important; }
.browser-standalone-wrapper #browser-summary-btn { display: none !important; }
@media (min-width: 768px) {
  .browser-standalone-wrapper .sidebar-top-close { display: none; }
}
.sidebar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sidebar-list::-webkit-scrollbar-track { background: transparent; margin-bottom: 8px; }

.sidebar-list .sidebar-meeting { margin: 0 8px 2px; border-radius: var(--radius); border-bottom: none; }
.sidebar-meeting {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-low);
  transition: background 0.1s;
}
.sidebar-meeting:hover { background: var(--surface); }
.sidebar-meeting.active { background: var(--primary-soft); }

.sidebar-meeting-title {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  direction: rtl;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-meeting.active .sidebar-meeting-title { color: var(--primary-dim); font-weight: 700; }

.sidebar-meeting-meta {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sidebar-date {
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.sidebar-load-more {
  flex-shrink: 0;
  width: 100%;
  padding: 12px;
  background: var(--surface-lowest);
  border: none;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-load-more:hover { background: var(--primary-soft); }

/* ── Sidebar controls ───────────────────────────────────────────── */
.sidebar-controls {
  flex-shrink: 0;
  background: var(--surface-lowest);
  padding: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar-empty {
  padding: 16px 12px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
  direction: rtl;
}

/* ── Sidebar group (committee) ──────────────────────────────────── */
.sidebar-group { margin-bottom: 10px; }
.sidebar-group-header {
  position: sticky;
  top: -8px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 14px 6px;
  background: var(--surface-lowest);
  cursor: pointer;
  user-select: none;
  direction: rtl;
}
.sidebar-group-header .group-arrow { line-height: 1.1rem; }
.sidebar-group-header:hover .group-name { color: var(--primary); }

.group-arrow {
  font-size: 0.6rem;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.sidebar-group-header:not(.collapsed) .group-arrow { transform: rotate(-90deg); }

.group-name {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.1rem;
  color: var(--primary-dim);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  direction: rtl;
  transition: color 0.12s;
}

.group-count {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--primary-soft);
  color: var(--primary-dim);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1rem;
}

.sidebar-list .sidebar-meeting.in-group { margin-right: 26px; padding-block: 6px; }
.sidebar-meeting.in-group .sidebar-meeting-title { font-weight: 500; color: var(--ink-soft); }
.sidebar-meeting.in-group.active .sidebar-meeting-title { font-weight: 700; color: var(--primary-dim); }

/* ── Summary panel ──────────────────────────────────────────── */
.summary-panel {
  background: var(--surface-lowest);
  border: none;
  border-radius: 12px;
  margin-bottom: 14px;
}

.summary-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--panel-header-height);
  padding: 0 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  background: var(--surface-lowest);
  direction: rtl;
}
.summary-toggle::-webkit-details-marker { display: none; }
.meeting-heading { display: flex; flex-direction: column; min-width: 0; }
.meeting-title { font-size: 0.95rem; font-weight: 700; line-height: 1.25rem; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-date  { font-size: 0.74rem; font-weight: 400; line-height: 1rem; color: var(--ink-muted); white-space: nowrap; }
.summary-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: -6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.summary-toggle:hover .summary-toggle-label { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-dim); }
details.summary-panel[open] .summary-toggle-label { background: var(--primary); color: var(--on-primary); }

.summary-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  display: none;
}

.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-lowest);
  border: none;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  direction: rtl;
}
.topic-pill:hover { opacity: 0.8; transform: scale(0.97); }
.topic-pill.active-pill { background: var(--topic-color, var(--primary)); color: var(--surface-lowest) !important; }
.topic-pill.active-pill .pill-dot { background: var(--surface-lowest) !important; }

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

.summary-body {
  padding: 10px 14px 14px;
  max-height: 38vh;
  overflow-y: auto;
}

.summary-section {
  margin-bottom: 12px;
}

.summary-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  font-weight: 700;
  margin-bottom: 5px;
  direction: rtl;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.summary-heading::-webkit-details-marker { display: none; }
.summary-section-arrow {
  font-size: 0.6rem;
  color: var(--ink-faint);
  transition: transform 0.15s;
}
.summary-section:not([open]) .summary-section-arrow { transform: rotate(90deg); }
.summary-section-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-faint);
  background: var(--primary-soft);
  border-radius: 8px;
  padding: 0 6px;
}
.summary-toggle-icon { font-size: 16px; font-variation-settings: 'FILL' 1; }

.summary-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  direction: rtl;
}

/* Each bullet is a clickable button for heatmap reranking */
.summary-bullet-btn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: right;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.5;
  transition: background 0.12s, border-color 0.12s;
  direction: rtl;
}
.summary-bullet-btn:hover {
  background: var(--primary-soft);
}
.summary-bullet-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--primary-dim);
  font-weight: 600;
}

.bullet-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--outline-variant);
  flex-shrink: 0;
  margin-top: 7px;
  transition: background 0.12s;
}
.summary-bullet-btn.active .bullet-indicator { background: var(--primary-bright); }

.summary-quote {
  margin: 0.1rem 1.6rem 0.4rem 0;
  padding-right: 0.6rem;
  border-right: 2px solid var(--primary-line);
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
}
.summary-quote-unverified {
  background: var(--warn-soft);
  margin: 0.15rem 1.6rem 0.5rem 0;
  padding: 0.35rem 0.6rem;
  background: var(--warn-soft);
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.summary-quote-unverified-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tertiary);
  margin-bottom: 2px;
}
.summary-quote-unverified-label .material-symbols-outlined { font-size: 0.9rem; }
.summary-approx-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 1px 8px;
  background: var(--surface-lowest);
  border: none;
  border-radius: 10px;
  font-size: 0.72rem;
  color: var(--tertiary);
  cursor: pointer;
}
.summary-approx-btn:hover { background: var(--warn-line); }
.summary-approx-btn .material-symbols-outlined { font-size: 0.85rem; }
.summary-jump-btn {
  background: none; border: none; cursor: pointer; padding: 0 0.2rem;
  vertical-align: middle; color: var(--primary-bright);
}
.summary-jump-btn .material-symbols-outlined { font-size: 0.95rem; }

/* Quote located in the transcript: highlight sweeps right→left (reading direction) once the scroll settles */
mark.quote-highlight {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
mark.quote-highlight.sweep {
  background-size: 100% 100%;
  transition: background-size 0.9s ease-out;
}

/* Search words in the transcript (/hits ranges) */
mark.keyword-highlight {
  color: inherit;
  background: var(--on-primary);
  border-bottom: 2px solid var(--primary-bright);
  border-radius: 2px;
}

/* ── Transcript ─────────────────────────────────────────────── */
.transcript-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chunk-card {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-lowest);
  border-radius: 10px;
  border: none;
  transition: opacity 0.2s;
  direction: rtl;
}
.chunk-card.dimmed { opacity: 0.25; }

.chunk-left {
  flex-shrink: 0;
  padding-top: 2px;
}

.chunk-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.chunk-avatar-initials { line-height: 1; }
.chunk-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.chunk-body {
  flex: 1;
  border-right: 3px solid;
  padding-right: 10px;
  min-width: 0;
}

.chunk-speaker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.chunk-speaker {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.chunk-pin {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.chunk-pin:hover { opacity: 1; }
.chunk-pin:disabled { opacity: 0.4; cursor: default; }
.header-icon-btn:hover:not(:disabled) { background: var(--surface-high); color: var(--primary); }

.chunk-text {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.6;
  direction: rtl;
}

/* ── Chat bar ───────────────────────────────────────────────── */
.browser-chat-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--surface-high);
  background: var(--surface-lowest);
  flex-shrink: 0;
  direction: rtl;
}

.browser-chat-bar textarea {
  flex: 1;
  border: 1.5px solid var(--surface-high);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface);
  resize: none;
  outline: none;
  font-family: inherit;
  direction: rtl;
  transition: border-color 0.15s;
}
.browser-chat-bar textarea:focus { border-color: var(--primary); background: var(--surface-lowest); }

.browser-chat-submit {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.browser-chat-submit:hover { background: var(--primary-dim); }
.browser-chat-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Loading / error states ─────────────────────────────────── */
.browser-loading,
.browser-empty,
.browser-error {
  padding: 40px 20px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-faint);
  direction: rtl;
}
.browser-error { color: var(--error); }

/* ══════════════════════════════════════════════════════════════════
   COSMETIC IMPROVEMENTS
══════════════════════════════════════════════════════════════════ */

/* ── Chat column centering ───────────────────────────────────── */
#chat-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#chat-column > * {
  width: 100%;
  max-width: 860px;
}
/* Let browser panel use full width */
#chat-column > .browser-wrapper {
  max-width: 100%;
}

/* ── Input bar: start centered, drop to bottom ──────────────── */
/* Leaving the welcome state the bar slides down first, then takes its background */
#input-bar {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease 0.5s, backdrop-filter 0.3s ease 0.5s;
}
body.show-welcome #input-bar {
  transform: translateY(-22vh);
}

/* ── Stages card: collapsed by default ──────────────────────── */
.ai-stages-card.collapsed .stage-card { display: none; }
.ai-stages-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-stages-toggle-arrow {
  font-size: 0.55rem;
  color: var(--outline-variant);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.ai-stages-card:not(.collapsed) .ai-stages-toggle-arrow {
  transform: rotate(-90deg);
}

/* ── Status text: clickable when stages exist ───────────────── */
.msg-status.clickable { cursor: pointer; text-decoration: underline dotted var(--outline-variant); }
.msg-status.clickable:hover { color: var(--primary); }

/* ── Spinner for buttons ────────────────────────────────────── */
.btn-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: 5px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Summary panel — sticky + flush + opaque + scrollable ───── */
.summary-panel {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-lowest);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  /* Flush with .transcript-inner edges (compensate 16px side padding) */
  margin-left: -16px;
  margin-right: -16px;
  margin-top: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
/* Arrow indicator */
.summary-toggle-arrow {
  font-size: 0.6rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}
details.summary-panel:not([open]) .summary-toggle-arrow {
  transform: rotate(90deg);
}
/* Bullets can contain inline markdown — make them prose */
.summary-bullet-btn * { font-size: inherit; }

/* ── Font-size bump (~+1 step everywhere) ────────────────────── */
body { font-size: 16px; }
.prose-content { font-size: 1rem; }
.msg-user-bubble { font-size: 1rem; }
.option-label { font-size: 0.93rem; }
.option-desc  { font-size: 0.8rem; }
.chunk-text { font-size: 0.85rem; }
.chunk-speaker { font-size: 0.85rem; }
.summary-bullet-btn { font-size: 0.85rem; }
.summary-heading { font-size: 0.88rem; }
.sidebar-meeting-title { font-size: 0.82rem; }
.browser-chat-bar textarea { font-size: 0.9rem; }
.browser-chat-submit { font-size: 0.9rem; }

/* ── Help panel ─────────────────────────────────────────────── */
#help-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#help-overlay.open { display: flex; }

#help-panel {
  max-width: 800px;
  width: 92vw;
  max-height: 80vh;
}
#help-content {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink);
}
#help-content h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dim);
  margin: 16px 0 6px;
}
#help-content h2:first-child { margin-top: 0; }
#help-content p { margin: 0 0 8px; }
#help-content ul { padding-right: 20px; margin: 0 0 8px; }
#help-content li { margin-bottom: 4px; }
#help-tabs { align-self: center; margin: 16px 16px 0; flex: none; max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none; }
#help-tabs .seg-btn { padding-inline: 14px; }
.help-legal { padding-top: 14px; font-size: 0.9rem; }
#help-panel { position: relative; }
#help-lang-toggle { position: absolute; top: 18px; inset-inline-end: 14px; color: var(--ink-muted); }
#help-lang-toggle[hidden] { display: none; }
#help-panel:has(#help-lang-toggle:not([hidden])) #help-tabs { max-width: calc(100% - 112px); }
.help-legal .legal-about-me { margin-bottom: 18px; }
.help-legal .legal-about-me h3 { margin-top: 0; color: var(--primary-dim); }
.help-legal article[dir="ltr"] { direction: ltr; text-align: left; }
.help-legal article ul { padding-inline: 1.4rem 0; }
.help-legal article h2:first-child { margin-top: 0; }
.help-legal article a { color: var(--primary); text-decoration: underline; }
#help-reading { padding-top: 14px; font-size: 0.9rem; }
#help-reading .help-reading-list { list-style: none; padding: 0; display: grid; grid-template-columns: max-content 1fr; align-items: stretch; gap: 12px 8px; }
#help-reading .help-reading-list li { display: contents; }
.help-reading-desc { padding: 6px 14px; border-radius: 18px; background: var(--surface-container); line-height: 1.6; }
.help-reading-link { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 6px 16px; border-radius: 18px;
  background: var(--primary-container); color: var(--primary-dim); font-weight: 700; text-decoration: none; transition: transform 0.15s, opacity 0.15s; }
.help-reading-link .material-symbols-outlined { font-size: 1rem; }
.help-reading-link:hover { opacity: 0.85; transform: scale(0.97); }
@media (max-width: 560px) { #help-reading .help-reading-list { grid-template-columns: 1fr; gap: 6px; } .help-reading-link { justify-self: start; } .help-reading-desc { margin-bottom: 8px; } }
.help-legal .legal-updated { color: var(--ink-faint); font-size: 0.8rem; }
.help-legal .legal-mcp { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--surface-low); }
.help-legal .legal-mcp h2 { margin-top: 0; }
#help-content, #help-prompts { padding-top: 18px; }
#help-prompts { font-size: 0.85rem; line-height: 1.6; color: var(--ink); }
.help-prompts-lead { color: var(--ink-muted); margin: 0 0 14px; }
.help-prompt + .help-prompt { margin-top: 18px; }
.help-prompt h3 { font-size: 1rem; font-weight: 700; color: var(--primary-dim); margin: 0 0 2px; }
.help-prompt p { margin: 0 0 8px; color: var(--ink-muted); }
.help-prompt pre { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-low); font-size: 0.74rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Settings panel ─────────────────────────────────────────── */
#settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#settings-overlay.open { display: flex; }

#settings-panel {
  min-width: 320px;
  max-width: 420px;
  width: 90vw;
}
#settings-panel h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-low);
}
.settings-row:last-of-type { border-bottom: none; }
.settings-label {
  font-size: 0.9rem;
  color: var(--ink);
}
.settings-desc {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 2px;
}
/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface-highest);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;  /* RTL: starts on right */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-lowest);
  transition: right 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:checked + .toggle-track::after { right: calc(100% - 21px); }
.gemini-key-settings-actions { display: flex; gap: 6px; flex-shrink: 0; }
.settings-group { border: none; padding: 0; margin: 0 0 8px; min-width: 0; }
.settings-group-title {
  margin: 4px 0 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--primary);
}
html:not(.research-tab-shown) :is(#dt-tab-research, #mob-tab-research, #settings-research) { display: none; }
.settings-group-note { display: none; font-size: 0.75rem; color: var(--ink-faint); }
.settings-group:disabled .settings-group-note { display: block; }
.settings-group:disabled .settings-row,
.settings-group:disabled .settings-section { opacity: 0.45; pointer-events: none; }
.settings-section { padding: 12px 0; border-top: 1px solid var(--surface-low); }
.settings-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.model-setting-row { margin-top: 10px; }
.model-setting-label { display: block; font-size: 0.8rem; color: var(--ink); margin-bottom: 3px; }
.model-setting-select {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: var(--surface-lowest);
  font-size: 0.82rem;
}
.model-setting-select:disabled { background: var(--surface); color: var(--ink-muted); }
.model-setting-warning { font-size: 0.72rem; color: var(--tertiary); margin-top: 3px; }

.gemini-key-settings-actions { display: flex; gap: 6px; flex-shrink: 0; }
#gemini-key-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 210;
  align-items: center;
  justify-content: center;
}
#gemini-key-overlay.open { display: flex; }
#gemini-key-panel {
  background: var(--surface-lowest);
  border-radius: 18px;
  padding: 28px 32px;
  max-width: 440px;
  width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  direction: rtl;
}
#gemini-key-panel h2 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
#gemini-key-panel p { margin-bottom: 8px; line-height: 1.5; }
#gemini-key-panel a { color: var(--primary); text-decoration: underline; }
#gemini-key-input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.85rem;
}
#gemini-key-error { color: var(--error); font-size: 0.8rem; margin-top: 6px; }
.gemini-key-actions { display: flex; gap: 8px; margin-top: 16px; }
.gemini-key-actions .btn { flex: 1; padding: 10px; }

/* ── Evidence citations ─────────────────────────────────────── */
sup.ev-cite {
  color: var(--cite);
  font-size: 0.65em;
  font-weight: 700;
  cursor: pointer;
  padding: 0 1px;
  vertical-align: super;
  user-select: none;
}
sup.ev-cite:hover { color: var(--cite-strong); }
sup.ev-cite.ev-cite-missing { color: var(--ink-muted); }

.ev-citation-popup {
  position: fixed;
  z-index: 9000;
  background: var(--surface-lowest);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cite) 15%, transparent);
  padding: 10px 14px;
  max-width: 340px;
  font-size: 0.82rem;
  line-height: 1.55;
  direction: rtl;
  text-align: right;
  color: var(--ink);
  pointer-events: none;
}
.ev-citation-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--tail-left, 50%);
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--surface-lowest);
  border-bottom: none;
  filter: drop-shadow(0 1px 0 var(--cite-line));
}
.ev-citation-popup.ev-citation-popup--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom: 7px solid var(--surface-lowest);
  filter: drop-shadow(0 -1px 0 var(--cite-line));
}
.ev-citation-popup-source {
  font-size: 0.72rem;
  color: var(--cite);
  opacity: 0.8;
  flex: 1 1 0;
  min-width: 0;
}
/* Footer row: source note (right) + "לפרוטוקול המלא" button (left), split ~50/50 */
.ev-citation-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.ev-citation-popup-footer .ev-open-protocol { margin-top: 0; flex: 0 0 auto; }
.ev-citation-meeting-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
/* "לפרוטוקול המלא →" deep-link — in citation popups and source cards */
.ev-open-protocol {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 9px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--primary-bright);
  background: var(--primary-soft);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  /* The citation popup is pointer-events:none (click-through tooltip); the
     button must re-enable events so it stays clickable. */
  pointer-events: auto;
}
.ev-open-protocol:hover { background: var(--primary-bright); color: var(--surface-lowest); border-color: var(--primary-bright); }
.ev-open-icon { font-size: 15px; line-height: 1; }
/* In a source card header: compact, pinned to the leading (left, in RTL) edge */
.ev-card-header .ev-open-protocol {
  margin-top: 0;
  margin-inline-start: auto;
  padding: 2px 7px;
  font-size: 0.66rem;
}
.ev-card-header .ev-open-icon { font-size: 13px; }
.ev-citation-quote {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.45;
}
.ev-citation-verbatim {
  margin: 6px 0 0;
  padding: 1px 10px 1px 0;
  border-right: 2px solid var(--outline-variant);
  color: var(--ink-soft);
}
.ev-quote-sep {
  border: none;
  border-top: 1px solid var(--surface-container);
  margin: 6px 0;
}
.ev-citation-empty {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: italic;
}
.ev-citation-kvlist { font-size: 0.82rem; }
.ev-citation-kv {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.ev-kv-key {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.ev-kv-val { color: var(--ink); }

.ev-sources {
  border: none;
  border-radius: 8px;
  margin-top: 12px;
  background: var(--surface);
  overflow: hidden;
}

.ev-sources-summary {
  cursor: pointer;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  user-select: none;
  list-style: none;
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ev-sources-summary::-webkit-details-marker { display: none; }
.ev-sources-summary::before {
  content: '◀';
  font-size: 0.55rem;
  transition: transform 0.15s;
  display: inline-block;
  flex-shrink: 0;
}
details.ev-sources[open] > .ev-sources-summary::before { transform: rotate(-90deg); }
.ev-sources-summary:hover { background: var(--surface-container); }

.ev-sources-body {
  border-top: 1px solid var(--surface-high);
  padding: 6px 12px 10px;
}

/* Static (no full content) and lazy (expandable) source rows */
.ev-source-entry {
  border-bottom: 1px solid var(--surface-container);
  font-size: 0.73rem;
  direction: rtl;
}
.ev-source-entry:last-child { border-bottom: none; }

/* Header row — shared by both <summary> and plain <div> wrappers */
.ev-source-entry > summary.ev-source-header,
.ev-source-entry > div.ev-source-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 2px;
}
.ev-source-entry > summary.ev-source-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ev-source-entry > summary.ev-source-header::-webkit-details-marker { display: none; }
.ev-source-entry > summary.ev-source-header::before {
  content: '◀';
  font-size: 0.5rem;
  color: var(--ink-faint);
  transition: transform 0.12s;
  display: inline-block;
  flex-shrink: 0;
  margin-left: 2px;
}
details.ev-source-entry[open] > summary.ev-source-header::before { transform: rotate(-90deg); }
.ev-source-entry > summary.ev-source-header:hover { background: var(--surface-low); }

/* Full-content slot */
.ev-source-full-slot {
  padding: 8px;
  background: var(--surface-raised);
  border-top: 1px solid var(--surface-container);
}
.ev-source-placeholder,
.ev-source-loading,
.ev-source-empty {
  font-size: 0.68rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 4px 0;
}
.ev-source-error { font-size: 0.68rem; color: var(--error); padding: 4px 0; }

/* Evidence cards (list of tool results) */
.ev-full-cards { display: flex; flex-direction: column; gap: 5px; }

.ev-full-card {
  border: none;
  border-radius: 5px;
  background: var(--surface-lowest);
  overflow: hidden;
  font-size: 0.7rem;
  direction: rtl;
}

.ev-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  background: var(--surface-low);
  border-bottom: 1px solid var(--surface-container);
}
.ev-card-label {
  font-weight: 600;
  color: var(--ink);
}
.ev-card-metas { display: flex; gap: 3px; flex-wrap: wrap; }
.ev-card-meta-badge {
  background: var(--cite-soft);
  color: var(--cite-strong);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.63rem;
  white-space: nowrap;
}

.ev-card-body { padding: 5px 8px; }
.ev-card-text { color: var(--ink-soft); line-height: 1.5; white-space: pre-wrap; }
.ev-card-bullets { display: flex; flex-direction: column; gap: 2px; }
.ev-card-bullet { color: var(--ink-soft); line-height: 1.4; }
.ev-card-more { color: var(--ink-faint); font-style: italic; }
.ev-card-rest {
  font-size: 0.61rem;
  color: var(--ink-muted);
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 120px;
}
.ev-truncated-notice {
  font-size: 0.67rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 4px 0;
  font-style: italic;
}
.ev-full-json {
  font-size: 0.63rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-x: auto;
  padding: 6px 8px;
  background: var(--surface-raised);
  border-radius: 4px;
  max-height: 300px;
  margin: 0;
}

.ev-source-num {
  font-weight: 700;
  color: var(--cite);
  flex-shrink: 0;
  min-width: 22px;
}

.ev-source-tool {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.ev-source-step {
  font-size: 0.66rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.ev-source-summary {
  color: var(--ink-soft);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   TAB LAYOUT
══════════════════════════════════════════════════════════════════ */

/* Safe-area inset: push header content below notch/status bar */
body > header {
  padding-top: env(safe-area-inset-top, 0);
}

/* Tab panel: fill remaining height after header */
.app-tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.app-tab-panel.hidden {
  display: none !important;
}

/* History tab: center vertically */
#tab-history.app-tab-panel {
  justify-content: center;
  align-items: center;
}

/* Profiles tab scrolls as one page */
#tab-profiles.app-tab-panel { display: block; overflow-y: auto; }

/* Filter dropdowns must overflow the tab panel */
#tab-reading.app-tab-panel {
  overflow: visible;
}

/* ── Desktop tab buttons ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   Reading tab — filter bar (rfb)
   ══════════════════════════════════════════════════════════════════ */

.rfb {
  display: grid;
  grid-template-rows: 0fr 1fr;
  background: var(--surface-lowest);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rfb.rfb-collapsed { grid-template-rows: 1fr 0fr; }
.rfb-collapsed-bar, .rfb-inner {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.rfb:not(.rfb-collapsed) .rfb-collapsed-bar,
.rfb.rfb-collapsed .rfb-inner { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.3s; }

.rfb-inner-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px 16px;
}

/* ── Search fields row ──────────────────────────────────────────── */
.rfb-search-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.rfb-search-btn { min-width: 96px; height: 42px; border-radius: 12px; }

input.field, textarea.field {
  width: 100%;
  padding: 10px 16px;
  background: var(--surface-low);
  border: none;
  border-radius: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input.field::placeholder, textarea.field::placeholder { color: color-mix(in srgb, var(--ink-muted) 60%, transparent); }
input.field:focus, textarea.field:focus {
  background: var(--surface-lowest);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}
#query-input.field { padding-block: 14px; background: var(--surface-lowest); box-shadow: var(--shadow-raised); }
#query-input.field:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
input.field--sm { padding: 8px 12px; }

.rfb-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rfb-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--outline);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

/* Match existing textarea/input design: white, thin border, green focus ring */
.rfb-input { font-family: inherit; }

/* ── Filter pills row ───────────────────────────────────────────── */
.rfb-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.rfb-filter-label {
  font-size: 0.73rem;
  color: var(--outline-variant);
  font-weight: 600;
  padding-left: 2px;
  user-select: none;
}

/* ── Per-filter item (button + floating dropdown) ───────────────── */
.rfb-filter-item { position: relative; }

.rfb-filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: var(--surface);
  border: none;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
  user-select: none;
}

.rfb-filter-btn:hover {
  background: var(--surface-container);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--outline-variant) 70%, transparent);
}

.rfb-filter-item--open .rfb-filter-btn {
  background: var(--surface-container);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
}

.rfb-filter-btn--active {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  color: var(--primary) !important;
}

.rfb-filter-icon { font-size: 14px !important; opacity: 0.65; }

.rfb-chevron {
  font-size: 16px !important;
  opacity: 0.7;
  transition: transform 0.18s;
}

.rfb-filter-item--open .rfb-chevron { transform: rotate(180deg); }

.rfb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}

/* ── Collapsed filter bar state ─────────────────────────────────── */
.rfb-collapsed-content { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.rfb-collapsed-chips { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rfb-collapsed-chips::-webkit-scrollbar { display: none; }
.rfb-clear-btn { margin-right: auto; }
.rfb-collapse-btn { margin-right: auto; }
.rfb-clear-btn:not(.hidden) + .rfb-collapse-btn { margin-right: 0; }
.rfb:not(.rfb-has-results) .rfb-collapse-btn { display: none; }

/* ── Floating dropdown (portalled to <body>, position set by JS) ─── */
.rfb-dropdown {
  position: fixed;
  /* top + right set dynamically in _rfOpenDrop */
  min-width: 230px;
  background: var(--surface-lowest);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 9999;
  overflow: hidden;
  animation: rfb-drop-in 0.15s ease;
}

@keyframes rfb-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rfb-dropdown-search {
  padding: 10px 10px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
}

.rfb-dropdown-input { font-family: inherit; }

.rfb-dropdown-hint {
  margin: 6px 2px 0;
  font-size: 0.72rem;
  color: var(--outline-variant);
}

.rfb-option-list {
  max-height: 210px;
  overflow-y: auto;
  padding: 5px 0;
}

.rfb-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  transition: background 0.1s;
  direction: rtl;
}

.rfb-option:hover { background: var(--surface-low); }

.rfb-option-check {
  font-size: 15px !important;
  color: var(--primary);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.12s;
  order: 9;
}

.rfb-option--selected { font-weight: 700; }
.rfb-option--selected .rfb-option-check { opacity: 1; }

/* ── Date dropdown ──────────────────────────────────────────────── */
.rfb-dropdown-date { min-width: 290px; padding: 14px; }

.rfb-date-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.rfb-date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rfb-date-field label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--outline);
  letter-spacing: 0.03em;
}

.rfb-date-input { font-family: inherit; }

/* ── Active filter chips ────────────────────────────────────────── */
.rfb-active-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* ── Participants combined dropdown ─────────────────────────────── */
.rfb-dropdown-participants {
  min-width: 300px;
  max-height: 480px;
  overflow-y: auto;
}

.rfb-part-section {
  padding: 10px 0 6px;
}

.rfb-part-section--sep {
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 20%, transparent);
}

.rfb-part-title {
  padding: 0 12px 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--outline-variant);
}

.rfb-part-section--guest {
  padding: 10px 10px 12px;
}

.rfb-part-section--guest .rfb-part-title {
  padding: 0 2px 6px;
}

/* Dropdown list loading / error state */
.rfb-list-status {
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--outline-variant);
  text-align: center;
}
.rfb-list-status--error { color: var(--error); }

/* ── Mobile: stack layout vertically, scroll filter row ─────────── */
@media (max-width: 640px) {
  .rfb-search-btn   { min-width: 0; }
  .rfb-filter-row   { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .rfb-dropdown-participants { min-width: 260px; }
}

/* ── Browse loading overlay ─────────────────────────────────────── */
.browse-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.browse-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface-high);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: browse-spin 0.75s linear infinite;
}
@keyframes browse-spin {
  to { transform: rotate(360deg); }
}
.browse-loading-text {
  font-size: 0.875rem;
  color: var(--ink-muted);
  font-family: var(--font);
}

/* ── Mobile bottom tab bar ──────────────────────────────────────── */
#mobile-tab-bar {
  min-height: 60px;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--outline);
  font-size: 0.65rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.15s;
  letter-spacing: 0.01em;
}
.mobile-tab-btn.active {
  color: var(--primary);
}

/* Mobile: pad tabs so content isn't behind the fixed mobile nav */
@media (max-width: 767px) {
  #tab-home,
  #tab-reading,
  #tab-history,
  #tab-research,
  #tab-chat,
  #tab-profiles {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  /* Reduce welcome-centering shift on short mobile screens */
  body.show-welcome #input-bar {
    transform: translateY(-10vh);
  }
}

/* ══════════════════════════════════════════════════════════════════
   READING TAB — STANDALONE BROWSER
══════════════════════════════════════════════════════════════════ */

/* Wrapper fills the reading-browser-area completely */
.browser-standalone-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fills the tab: the meetings list and the protocol are two cards with a gap */
.browser-standalone-wrapper .browser-panel {
  flex: 1;
  max-height: 100%;
  min-height: 0;
  padding: 12px;
  border-radius: 0;
  background: transparent;
}
.browser-standalone-wrapper .browser-body { gap: 12px; }
.browser-standalone-wrapper .browser-sidebar,
.browser-standalone-wrapper .browser-transcript-wrap {
  background: var(--surface-lowest);
  border-radius: 16px;
  box-shadow: var(--shadow-raised);
}
.browser-standalone-wrapper .browser-sidebar.sidebar-collapsed { margin-left: -12px; box-shadow: none; }
.browser-standalone-wrapper .chunk-card { background: var(--surface); }
@media (max-width: 767px) {
  .browser-standalone-wrapper .browser-panel { padding: 6px; }
}

/* On mobile with standalone browser, widen sidebar so it's usable */
@media (max-width: 767px) {
  .browser-standalone-wrapper .browser-sidebar {
    width: 180px;
  }
  .browser-standalone-wrapper .sidebar-controls { padding-inline: 6px; }
  .browser-standalone-wrapper .sidebar-controls .seg-btn { padding-inline: 5px; }
  .browser-standalone-wrapper .browser-sidebar.sidebar-collapsed {
    width: 0px;
  }
}


/* ── Browse error banner ────────────────────────────────────────── */
.browse-error-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--error-soft);
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--error);
  direction: rtl;
  z-index: 20;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/* ── Sharing (url_state.js) ─────────────────────────────────── */
.browser-share-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.15);
  color: var(--on-primary);
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.browser-share-btn:hover { background: rgba(255,255,255,0.28); }

.chunk-share-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.chunk-share-btn .material-symbols-outlined { font-size: 16px; }
.chunk-card:hover .chunk-share-btn,
.chunk-share-btn:focus-visible { opacity: 1; }
.chunk-share-btn:hover { background: var(--surface-low); color: var(--primary); }
@media (hover: none) {
  .chunk-share-btn { opacity: 0.7; }
}

.selection-share-btn {
  position: fixed;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.selection-share-btn .material-symbols-outlined { font-size: 16px; }
.selection-share-btn:hover { background: var(--primary-dim); }

.share-menu {
  position: fixed;
  z-index: 70;
  direction: rtl;
  min-width: 200px;
  padding: 8px;
  background: var(--surface-lowest);
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.share-menu-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-muted);
  padding: 2px 6px 4px;
}
.share-menu-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink);
  padding: 4px 6px;
  cursor: pointer;
}
.share-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: right;
}
.share-menu-btn .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.share-menu-btn:hover { background: var(--primary-soft); }

.app-toast {
  position: fixed;
  z-index: 80;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  padding: 8px 18px;
  background: var(--ink);
  color: var(--surface-lowest);
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767px) {
  .app-toast { bottom: 80px; }
}

/* ── Answer export (render/export.js): button at the answer's bottom left + print-only document ── */
.answer-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.answer-ai-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.answer-ai-note .material-symbols-outlined { font-size: 14px; color: var(--primary); }
.answer-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-bright);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.answer-export-btn:hover { background: var(--primary-soft); }
.answer-export-btn .material-symbols-outlined { font-size: 16px; }

#conversation-export { display: none; }

@media print {
  html, body.exporting-conversation {
    height: auto !important;
    overflow: visible !important;
    background: var(--surface-lowest) !important;
  }
  body.exporting-conversation { display: block !important; }
  body.exporting-conversation > *:not(#conversation-export) { display: none !important; }
  body.exporting-conversation #conversation-export {
    display: block;
    color: var(--ink);
    font-size: 11pt;
  }
  .export-question {
    font-weight: 700;
    font-size: 12pt;
    background: var(--surface-low);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 16px 0 10px;
    break-after: avoid;
  }
  .export-cite { font-size: 0.7em; color: var(--primary-bright); font-weight: 700; }
  .export-footnotes {
    list-style: decimal;
    padding-inline-start: 24px;
    margin-top: 12px;
    border-top: 1px solid var(--surface-container);
    padding-top: 8px;
    font-size: 9pt;
  }
  .export-footnotes li { margin-bottom: 8px; break-inside: avoid; }
  .export-footnotes .ev-citation-quote { font-size: 9pt; }
  .export-footnotes .ev-citation-meeting-header { font-size: 8.5pt; }
  .export-footnotes .ev-citation-popup-source { font-size: 8pt; margin-top: 2px; }
  .export-footnote-query { font-size: 8pt; color: var(--ink-soft); margin-top: 2px; text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════
   Research tab — welcome, key card, example questions
   ══════════════════════════════════════════════════════════════════ */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 32px 0 20vh;
  text-align: center;
}
.welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.welcome-icon .material-symbols-outlined { font-size: 30px; }
.welcome-title { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.welcome-lead { max-width: 42rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-muted); }
.welcome-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
}
.welcome-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-dim);
}
.welcome-steps li:not(:last-child)::after { content: '←'; color: var(--outline-variant); font-weight: 400; }
.welcome-steps li { padding: 0; }

body.show-welcome #input-bar { background: transparent; backdrop-filter: none; }
#input-bar { background: color-mix(in srgb, var(--surface-highest) 30%, transparent); backdrop-filter: blur(12px); }

.research-slot { display: none; margin-bottom: 10px; }
body.show-welcome .research-slot { display: block; }

.key-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  background: var(--surface-lowest);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.key-card[hidden] { display: none; }
.key-card-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--ink-muted); line-height: 1.5; }
.key-card-text b { font-size: 0.92rem; color: var(--ink); }
.key-card-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.key-card-form { flex: 1 1 280px; display: flex; gap: 8px; }
.key-card-form .field { flex: 1; }
.key-card-error { flex-basis: 100%; font-size: 0.78rem; color: var(--error); }
.key-card.attention { animation: key-card-attention 0.9s ease; }
@keyframes key-card-attention {
  0%, 100% { box-shadow: var(--shadow-raised); border-color: var(--primary-line); }
  30%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); border-color: var(--primary); }
}

.examples { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 60px; }
.examples[hidden] { display: none; }
.examples-label { font-size: 0.72rem; font-weight: 600; color: var(--ink-faint); }
.examples-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 32px; }
.example-chip {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 6px 12px;
  background: var(--surface-lowest);
  border: none;
  border-radius: 9999px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: right;
  transition: background 0.15s, color 0.15s, opacity 0.45s ease, transform 0.45s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.example-chip.fading { opacity: 0; transform: translateY(4px); }
.example-chip:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dim); }

/* Agenda / attendance / staff sections at the start of a protocol, folded into one block */
.meeting-header { background: var(--surface); border-radius: 10px; }
.meeting-header-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.meeting-header-summary::-webkit-details-marker { display: none; }
.meeting-header-summary b { color: var(--ink); white-space: nowrap; }
.meeting-header-summary .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.meeting-header-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-header-arrow { transition: transform 0.2s; }
.meeting-header[open] .meeting-header-arrow { transform: rotate(-90deg); }
.meeting-header-body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.chunk-card.chunk-card--header { display: block; padding: 0; background: transparent; }
.chunk-card--header .chunk-speaker { display: block; font-size: 0.78rem; color: var(--primary-dim); margin-bottom: 1px; }
.chunk-card--header .chunk-text { font-size: 0.8rem; color: var(--ink-soft); }

/* Scrollbars on the right: an RTL scroll box puts its scrollbar on the left, so the box is ltr and its content rtl */
#chat-column, .sidebar-list, .summary-body,
.rfb-option-list, .rfb-dropdown-participants, .browser-summary-bar.open { direction: ltr; }
#chat-column > *, .sidebar-list > *, .summary-body > *,
.rfb-option-list > *, .rfb-dropdown-participants > *, .browser-summary-bar.open > * { direction: rtl; }
.prompt-text { direction: ltr; unicode-bidi: plaintext; }

/* ══════════════════════════════════════════════════════════════════
   "ראשי" tab (/) — the headline and a two-card graph: the choice card draws an edge to the chosen way in
   ══════════════════════════════════════════════════════════════════ */
.home { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 48px 16px 96px; }
.home-title { margin: 0; text-align: center; text-wrap: balance; }
.home-graph { --home-edge-len: 72px; --home-next-width: 340px; display: flex; align-items: center; justify-content: center; }
.home-card { padding: 16px; border-radius: var(--radius-lg); background: var(--surface-lowest); box-shadow: var(--shadow-raised); }
.home-choices { display: flex; flex-direction: column; gap: 8px; width: 280px; }
.home-choice { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface-low); color: var(--ink); font-size: 1rem; font-weight: 700; text-align: start; transition: background 0.2s, color 0.2s, transform 0.2s; }
.home-choice .material-symbols-outlined { color: var(--primary); transition: color 0.2s; }
.home-choice:hover { background: var(--primary-soft); color: var(--primary-dim); }
.home-choice.active { background: var(--primary); color: var(--on-primary); }
.home-choice.active .material-symbols-outlined { color: var(--on-primary); }
.home-choice:active { transform: scale(0.98); }

.home-edge { position: relative; flex: none; width: 0; height: 2px; transition: width 0.5s cubic-bezier(.6,0,.2,1); }
.home-edge::before { content: ''; position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 0.35s 0.15s ease-out; }
.home-edge::after { content: ''; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; border-radius: 50%; background: var(--primary); opacity: 0; transition: opacity 0.2s 0.45s; }
.home-next { display: flex; flex: none; flex-direction: column; gap: 12px; width: 0; transition: width 0.5s cubic-bezier(.6,0,.2,1); }
.home-next-card { display: flex; align-items: flex-end; gap: 16px; width: var(--home-next-width); padding: 22px; color: var(--ink-soft); text-decoration: none; opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity 0.3s 0.4s, transform 0.3s 0.4s, visibility 0s 0.4s, box-shadow 0.2s, background 0.2s; }
.home-graph[hidden], .home-next-card[hidden] { display: none; }
.home-next-card:hover { background: var(--primary-soft); }
.home-next-card p { flex: 1; margin: 0; font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.home-next-arrow { flex: none; color: var(--primary); transition: transform 0.2s; }
.home-next-card:hover .home-next-arrow { transform: translateX(-4px); }

.home-graph--open .home-edge { width: var(--home-edge-len); }
.home-graph--open .home-edge::before { transform: scaleX(1); }
.home-graph--open .home-edge::after { opacity: 1; }
.home-graph--open .home-next { width: var(--home-next-width); }
.home-graph--open .home-next-card { opacity: 1; visibility: visible; transform: none; }

/* The home choice: picking an option draws the line out and slides its cards in; switching folds them back first (home.js). */
#home-graph .home-next-card { transform: translateX(16px); transition: opacity 0.18s, transform 0.22s ease-in, visibility 0s 0.22s, box-shadow 0.2s, background 0.2s; }
#home-graph.home-graph--open:not(.home-graph--folding) .home-next-card { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s 0.35s, transform 0.55s 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s 0.35s, box-shadow 0.2s, background 0.2s; }
#home-graph.home-graph--open:not(.home-graph--folding) .home-next-card--middle { transition-delay: 0.41s, 0.41s, 0.41s, 0s, 0s; }
#home-graph.home-graph--open:not(.home-graph--folding) .home-next-card--advanced { transition-delay: 0.47s, 0.47s, 0.47s, 0s, 0s; }
#home-graph.home-graph--folding .home-next-card { opacity: 0; visibility: hidden; transform: translateX(16px); }
#home-graph.home-graph--folding .home-edge::before { transform: scaleX(0); transition: transform 0.2s 0.06s ease-in; }
#home-graph.home-graph--folding .home-edge::after { opacity: 0; transition: opacity 0.1s; }

.home-fork { display: none; }
@media (min-width: 861px) {
  .home { justify-content: flex-start; padding-top: clamp(48px, 18vh, 200px); }
  #home-graph { min-height: 340px; }
  #home-graph:has(.home-next-card--advanced:not([hidden])) .home-edge::before, #home-graph:has(.home-next-card--advanced:not([hidden])) .home-edge::after { display: none; }
  #home-graph:has(.home-next-card--advanced:not([hidden])) .home-next { position: relative; display: grid; grid-auto-rows: 1fr; gap: 0; }
  #home-graph:has(.home-next-card--advanced:not([hidden])) .home-next-card { margin-block: 6px; }
  #home-graph:has(.home-next-card--advanced:not([hidden])) .home-fork { position: absolute; top: 0; right: calc(-1 * var(--home-edge-len)); display: block; width: var(--home-edge-len); height: 100%; overflow: visible; clip-path: inset(-4px -4px -4px calc(100% + 4px)); transition: clip-path 0.22s 0.05s ease-in; }
  #home-graph.home-graph--open:not(.home-graph--folding):has(.home-next-card--advanced:not([hidden])) .home-fork { clip-path: inset(-4px); transition: clip-path 0.5s 0.1s cubic-bezier(0.45, 0, 0.2, 1); }
  .home-fork path { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
}

@media (max-width: 860px) {
  .home { justify-content: flex-start; gap: 32px; padding-top: 56px; }
  .home-graph { --home-edge-len: 40px; flex-direction: column; }
  .home-choices, .home-next-card { width: min(340px, calc(100vw - 32px)); }
  .lp-install .home-graph { align-items: center; }
  .home-edge { width: 2px; height: 0; transition-property: height; }
  .home-edge::before { transform: scaleY(0); transform-origin: top; }
  .home-edge::after { top: auto; bottom: 0; left: 50%; margin: 0 0 -4px -4px; }
  .home-next { width: auto; height: 0; transition-property: height; }
  .home-next-card { transform: translateY(-8px); }
  .home-graph--open .home-edge { width: 2px; height: var(--home-edge-len); }
  .home-graph--open .home-edge::before { transform: scaleY(1); }
  .home-graph--open .home-next { width: auto; height: auto; }
  #home-graph .home-next-card, #home-graph.home-graph--folding .home-next-card { transform: translateY(-12px); }
  #home-graph.home-graph--folding .home-edge::before { transform: scaleY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   "בצ'אט שלכם" tab (/chat) — connect-to-chat steps and the prompt builder
   ══════════════════════════════════════════════════════════════════ */
.landing { flex: 1; min-height: 0; overflow-y: auto; direction: ltr; }
.landing-content { direction: rtl; }
.lp-wrap { max-width: 1080px; margin: 0 auto; padding-inline: 16px; }
.landing section { padding-block: 56px; }
.landing h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.lp-section-lede { max-width: 40rem; margin: 0 0 28px; font-size: 0.98rem; color: var(--ink-muted); }
#tab-chat .landing { container-type: size; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior: contain; }
.lp-snap { display: flex; flex-direction: column; justify-content: center; min-height: 100cqh; scroll-snap-align: start; scroll-snap-stop: always; }
.lp-band.lp-snap > * { width: 100%; }
#lp-install { position: relative; display: flex; flex-direction: column; width: min(1400px, calc(100cqw - 48px)); max-width: none; height: 100cqh; padding: 40px 0 88px; }
.lp-next-section { position: absolute; bottom: 20px; inset-inline: 0; display: flex; width: max-content; margin-inline: auto; flex-direction: column; align-items: center; color: var(--ink-muted); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.lp-next-section:hover { color: var(--primary); }
.lp-next-section .material-symbols-outlined { font-size: 28px; animation: lp-bob 1.8s ease-in-out infinite; }
@keyframes lp-bob { 50% { transform: translateY(5px); } }
.lp-band.lp-snap > section { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.lp-reveal > * { opacity: 0; transform: translateY(36px) scale(0.98); transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }
.lp-reveal.lp-in > * { opacity: 1; transform: none; }
.lp-reveal.lp-in > :nth-child(2) { transition-delay: 0.08s; }
.lp-reveal.lp-in > :nth-child(3) { transition-delay: 0.16s; }
.lp-reveal.lp-in > :nth-child(4) { transition-delay: 0.24s; }

.lp-headline { margin: 0 0 14px; font-size: clamp(2.6rem, 5.6vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.lp-mark { padding-inline: 4px; border-radius: 3px; background-image: linear-gradient(var(--highlight-strong), var(--highlight-strong)); background-repeat: no-repeat; background-position: 100% 90%; background-size: 100% 38%; animation: lp-sweep 0.9s 0.4s cubic-bezier(.6,0,.2,1) both; }
@keyframes lp-sweep { from { background-size: 0% 38%; } to { background-size: 100% 38%; } }

#lp-cases-section { width: min(1400px, calc(100cqw - 48px)); max-width: none; padding-inline: 0; }
.lp-review { display: flex; align-items: center; gap: 72px; margin-top: 40px; }
.lp-flow { display: flex; flex: 1; flex-direction: column; gap: 24px; min-width: 0; min-height: min(440px, 52cqh); padding: 28px 40px 40px; border-radius: 24px; background: var(--surface-low); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
.lp-flow-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink-muted); }
.lp-g-icon { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

.lp-flowmap { display: flex; flex: 1; align-items: center; justify-content: center; }
.lp-g-node { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 8px; width: 140px; padding: 18px 12px; border-radius: var(--radius-lg); background: var(--surface-lowest); box-shadow: var(--shadow-raised); text-align: center; }
.lp-g-node b { font-size: 0.9rem; line-height: 1.3; }

.lp-route { --lp-line-idle: color-mix(in srgb, var(--primary) 30%, transparent); position: relative; display: grid; flex: 0 1 600px; grid-template-columns: minmax(48px, 1fr) minmax(272px, 340px) minmax(48px, 1fr); grid-template-rows: 1fr 1fr; margin-inline: 14px; }
.lp-route-fork, .lp-route-merge { width: 100%; height: 100%; overflow: visible; }
.lp-route-fork { grid-area: 1 / 1 / 3 / 2; }
.lp-route-merge { grid-area: 1 / 3 / 3 / 4; }
.lp-trunk, .lp-lane-path { fill: none; vector-effect: non-scaling-stroke; }
.lp-trunk { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; }
.lp-lane-path { stroke: var(--lp-line-idle); stroke-width: 2; stroke-dasharray: 4 5; transition: stroke 0.25s; }
#lp-flowmap[data-depth="deep"] .lp-lane-path[data-lane="deep"], #lp-flowmap[data-depth="quick"] .lp-lane-path[data-lane="quick"] { stroke: var(--primary); stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; }
.lp-route-line { display: none; }
.lp-route-head { position: absolute; left: -10px; top: calc(50% - 6px); border-block: 6px solid transparent; border-right: 9px solid var(--primary); }

.lp-sentence, .lp-quick { position: relative; display: flex; grid-column: 2; align-items: center; align-self: stretch; margin-block: 14px; padding: 22px 16px 12px; border-radius: var(--radius-lg); background: var(--surface-lowest); box-shadow: var(--shadow-raised); cursor: pointer; transition: opacity 0.25s, box-shadow 0.25s; }
.lp-sentence { grid-row: 1; }
.lp-quick { grid-row: 2; }
#lp-flowmap[data-depth="deep"] .lp-sentence, #lp-flowmap[data-depth="quick"] .lp-quick { box-shadow: 0 0 0 2px var(--primary), var(--shadow-raised); cursor: default; }
.lp-sentence > :not(.lp-lane-tag), .lp-quick > :not(.lp-lane-tag) { transition: opacity 0.25s; }
#lp-flowmap[data-depth="quick"] .lp-sentence > :not(.lp-lane-tag), #lp-flowmap[data-depth="deep"] .lp-quick > :not(.lp-lane-tag) { opacity: 0.45; }
#lp-flowmap[data-depth="quick"] .lp-sentence:hover > :not(.lp-lane-tag), #lp-flowmap[data-depth="deep"] .lp-quick:hover > :not(.lp-lane-tag) { opacity: 0.8; }
.lp-quick-text { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft); text-align: center; }
.lp-lane-tag { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px 3px 9px; border: 1px solid var(--surface-high); border-radius: 9999px; background: var(--surface-lowest); color: var(--ink-muted); font: inherit; font-size: 0.8rem; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.lp-lane-tag.active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.lp-lane-tag small { font-size: 0.7rem; font-weight: 600; opacity: 0.8; }
.lp-lane-tag .material-symbols-outlined { font-size: 15px; }
.lp-review-actions { display: flex; flex: 0 0 320px; flex-direction: column; gap: 18px; }

.lp-action { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-action .btn { justify-content: center; width: 100%; }
.lp-action .lp-peek { align-self: stretch; }
.lp-action .lp-peek summary { margin-inline: auto; }
.lp-guidelines-btn { background: var(--primary-soft); color: var(--primary-dim); }
.lp-guidelines-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 20%, transparent); }

.lp-action .lp-copy { gap: 16px; min-height: 112px; padding: 20px 24px; border-radius: 24px; background: linear-gradient(135deg, var(--primary), var(--primary-dim)); box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--primary) 70%, transparent); transition: transform 0.2s, box-shadow 0.2s; animation: lp-copy-glow 2.8s ease-in-out infinite; }
.lp-action .lp-copy:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--primary) 80%, transparent); }
.lp-copy > .material-symbols-outlined { display: flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, #fff 18%, transparent); font-size: 28px; }
.lp-copy-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; }
.lp-copy-text b { font-size: 1.3rem; font-weight: 800; }
.lp-copy-text small { font-size: 0.82rem; font-weight: 500; opacity: 0.85; }
.lp-action .lp-copy.lp-copy--bump { animation: lp-copy-bump 0.6s cubic-bezier(.3, 1.6, .5, 1); }
.lp-copy--bump > .material-symbols-outlined { animation: lp-copy-icon-spin 0.6s ease-out; }
@keyframes lp-copy-bump { 0% { transform: scale(1); } 35% { transform: scale(1.05); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent), 0 18px 44px -10px color-mix(in srgb, var(--primary) 85%, transparent); } 100% { transform: scale(1); } }
@keyframes lp-copy-icon-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes lp-copy-glow { 50% { box-shadow: 0 14px 44px -8px color-mix(in srgb, var(--primary) 85%, transparent); } }
.lp-action .lp-copy.done { background: var(--primary-dim); }
.lp-peek { interpolate-size: allow-keywords; }
.lp-peek summary { width: fit-content; font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); list-style: none; cursor: pointer; transition: color 0.15s; }
.lp-peek summary:hover { color: var(--primary); }
.lp-peek summary::-webkit-details-marker { display: none; }
.lp-peek summary::before { content: '◀'; display: inline-block; margin-inline-end: 6px; font-size: 0.55rem; transition: transform 0.2s; }
.lp-peek[open] summary::before { transform: rotate(-90deg); }
.lp-peek::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
.lp-peek[open]::details-content { block-size: auto; }
.lp-prompt { max-height: 280px; margin-top: 8px; padding: 12px 14px; overflow-y: auto; border-radius: var(--radius); background: var(--surface-low); color: var(--ink-muted); font-size: 0.76rem; line-height: 1.6; direction: ltr; text-align: left; }
.lp-prompt h4 { margin: 10px 0 2px; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.lp-prompt h4:first-child { margin-top: 0; }
.lp-prompt p { margin: 0 0 6px; }
.lp-prompt ul { display: grid; gap: 3px; margin: 0 0 6px; padding-left: 16px; list-style: disc; }

.lp-install { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding-top: 14px; border-radius: 24px; background: var(--surface-low); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; }
.lp-install-panels { display: grid; flex: 1; grid-template-rows: minmax(0, 1fr); justify-items: center; align-items: center; align-self: stretch; min-height: 0; }
.lp-install-panels > * { grid-area: 1 / 1; transition: opacity 0.25s; }
.lp-install-panels > .lp-panel-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s, visibility 0s 0.25s; }
.lp-gemini-panel { max-width: 40rem; padding-inline: 24px; text-align: center; }
.lp-steps { --home-next-width: 300px; width: 100%; height: 100%; justify-content: flex-start; align-items: center; padding: 16px 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.lp-steps.lp-measure *, .lp-steps.lp-measure *::before, .lp-steps.lp-measure *::after { transition: none !important; }
.lp-steps > :first-child { margin-inline-start: auto; }
.lp-steps > :last-child { margin-inline-end: auto; }
.lp-step { display: flex; flex: none; align-items: center; }
.lp-step .home-edge { align-self: center; }
.lp-step:not(.home-graph--open) .home-next { overflow: hidden; }
.lp-step-body { display: flex; align-items: center; gap: 6px; width: var(--home-next-width); }
.lp-steps .home-next-card { flex: 1; align-items: center; width: auto; padding: 18px; border: 0; font: inherit; text-align: start; cursor: pointer; }
.lp-step-card { position: relative; display: flex; flex: 1; }
.lp-steps .lp-step-card--with-action { padding-bottom: 56px; }
.lp-step-card--with-action .lp-step-icon { align-self: flex-start; }
.lp-step-action { position: absolute; bottom: 12px; left: 12px; opacity: 0; visibility: hidden; transition: opacity 0.3s 0.4s, visibility 0s 0.4s; }
.home-graph--open .lp-step-action { opacity: 1; visibility: visible; }
.lp-steps .lp-form-card { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.lp-form-card:hover { background: var(--surface-lowest); }
.lp-form-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 4px 4px 10px; border-radius: var(--radius); background: var(--surface-low); font-size: 0.8rem; direction: ltr; }
.lp-form-row > span { flex: none; color: var(--ink-muted); }
.lp-form-row code { flex: 1; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.lp-form-copy { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--primary); cursor: pointer; transition: background 0.15s; }
.lp-form-copy:hover { background: var(--primary-soft); }
.lp-form-copy .material-symbols-outlined { font-size: 17px; }
.lp-step-text { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.lp-step-text b { font-size: 1rem; color: var(--ink); }
.lp-step-text span { font-size: 0.86rem; line-height: 1.6; color: var(--ink-muted); }
.lp-step-icon { flex: none; color: var(--primary); }
.lp-step-skip { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--primary); opacity: 0; visibility: hidden; transition: opacity 0.3s 0.4s, visibility 0s 0.4s; }
.home-graph--open .lp-step-skip { opacity: 0.55; visibility: visible; }
.lp-step-skip::before { content: ''; position: absolute; top: 50%; inset-inline: -6px 0; height: 2px; margin-top: -1px; background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 0.15s ease-out; }
.lp-step-skip .material-symbols-outlined { transition: opacity 0.15s; }
.home-graph--open.lp-step--done .lp-step-skip { opacity: 1; pointer-events: none; }
.lp-step--done .lp-step-skip .material-symbols-outlined { opacity: 0; }
.lp-step--done .lp-step-skip::before { transform: none; }
.lp-step .home-next-card.flash { animation: lp-flash 1.2s; }
@keyframes lp-flash { 30% { box-shadow: 0 0 0 3px var(--highlight-strong), var(--shadow-raised); } }
.lp-copied-banner { display: flex; margin: 0 14px 10px; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary-dim); font-size: 0.88rem; font-weight: 600; }
.lp-copied-banner[hidden] { display: none; }
.lp-badge { margin-inline-start: 6px; padding: 1px 7px; border-radius: 9999px; background: var(--primary-soft); color: var(--primary-dim); font-size: 0.64rem; font-weight: 700; }
.lp-gemini { margin: 22px 0 6px; }
.lp-gemini-alt { margin: 0; font-size: 0.9rem; color: var(--ink-muted); }
.lp-gemini-alt a { color: var(--primary); }
.lp-mcp-url { max-width: 20rem; margin: 14px auto 0; background: var(--surface-lowest); }
.lp-chatgpt-prompt { margin-top: 10px; }

.lp-footer { padding-block: 8px 40px; font-size: 0.78rem; color: var(--ink-faint); }
.brand-home { padding: 0; border: 0; background: none; text-align: start; cursor: pointer; }
.home { position: relative; }
.home-footer { position: absolute; bottom: 20px; inset-inline: 16px; padding: 0; text-align: center; }
.home-footer p { margin: 0; }
.home-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.home-footer-links a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.home-footer-links a:hover { color: var(--primary); }

@media (max-width: 860px) {
  .lp-review { flex-direction: column; align-items: stretch; gap: 44px; }
  #lp-cases-section { width: calc(100cqw - 24px); }
  .lp-flow { min-height: 0; padding: 18px 12px 22px; border-radius: 20px; scroll-snap-align: end; scroll-snap-stop: always; scroll-margin-bottom: 16px; }
  .lp-flowmap { flex-direction: column; }
  .lp-g-node { width: min(240px, 100%); }
  .lp-route { flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 48px auto 48px; column-gap: 12px; width: 100%; margin: 10px 0; }
  .lp-route::before, .lp-route::after { content: ''; position: absolute; left: calc(50% - 1.5px); width: 3px; height: 24px; background: var(--primary); }
  .lp-route::before { top: 0; }
  .lp-route::after { bottom: 0; }
  .lp-route-fork, .lp-route-merge { display: none; }
  .lp-route-line { display: block; height: 24px; border: 2px solid var(--lp-line-idle); transition: border-color 0.25s; }
  .lp-route-in { grid-area: 1 / 1; align-self: end; margin-inline: 50% -7px; border-bottom: 0; border-left: 0; border-top-right-radius: 14px; }
  .lp-route-fast-in { grid-area: 1 / 2; align-self: end; margin-inline: -7px 50%; border-bottom: 0; border-right: 0; border-top-left-radius: 14px; }
  .lp-route-out { grid-area: 3 / 1; align-self: start; margin-inline: 50% -7px; border-top: 0; border-left: 0; border-bottom-right-radius: 14px; }
  .lp-route-fast-out { grid-area: 3 / 2; align-self: start; margin-inline: -7px 50%; border-top: 0; border-right: 0; border-bottom-left-radius: 14px; }
  #lp-flowmap[data-depth="deep"] .lp-route-in, #lp-flowmap[data-depth="deep"] .lp-route-out, #lp-flowmap[data-depth="quick"] .lp-route-fast-in, #lp-flowmap[data-depth="quick"] .lp-route-fast-out { border-color: var(--primary); border-width: 3px; }
  .lp-route-head { left: calc(50% - 6px); top: auto; bottom: -10px; border-block: 0; border-inline: 6px solid transparent; border-top: 9px solid var(--primary); }
  .lp-sentence, .lp-quick { grid-row: 2; margin: 0; padding: 22px 10px 10px; }
  .lp-sentence { grid-column: 1; }
  .lp-quick { grid-column: 2; }
  .lp-review-actions { flex: none; width: 100%; }
  .lp-action .lp-copy { min-height: 88px; }
  #lp-install-tabs { display: flex; }
  #lp-install { width: calc(100cqw - 24px); padding-top: 32px; }
  .lp-install { padding: 10px 10px 0; border-radius: 20px; }
  #lp-install-tabs { align-self: stretch; }
  .lp-steps { padding: 16px 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .lp-steps > :first-child { margin-inline-start: 0; margin-block-start: auto; }
  .lp-steps > :last-child { margin-inline-end: 0; margin-block-end: auto; }
  .lp-step { flex-direction: column; align-items: center; }
  .lp-step-body { flex-direction: column; width: min(340px, calc(100vw - 32px)); height: auto; }
  .lp-steps .home-next-card { width: 100%; }
  .lp-step-skip .material-symbols-outlined { transform: rotate(-90deg); }
  .lp-step-skip::before { top: -6px; bottom: 0; left: 50%; right: auto; width: 2px; height: auto; margin: 0 0 0 -1px; transform: scaleY(0); transform-origin: top; }
  #lp-install-tabs .seg-btn { flex: 1; padding-inline: 6px; }
  .lp-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-mark, .lp-step .home-next-card.flash, .lp-next-section .material-symbols-outlined, .lp-action .lp-copy, .lp-copy--bump > .material-symbols-outlined { animation: none; }
  .lp-reveal > * { opacity: 1; transform: none; transition: none; }
}