/* ── Self-hosted Heebo (variable 300–900) ───────────── */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/static/fonts/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/static/fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ──────────────────────────────────── */
:root {
  color-scheme: light;
  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-soft: #f3f6fb;
  --ink: #14233b;
  --ink-soft: #46566f;
  --muted: #8492a8;
  --line: #e4e9f1;
  --line-strong: #d3dbe7;
  --primary: #0f5f58;
  --primary-strong: #0e4f4a;
  --primary-soft: #e4efed;
  --blue: #2563c9;
  --blue-soft: #eaf1fc;
  --navy: #0e4f4a;
  /* Brand accent — stays a deep teal in both light & dark so buttons keep
     white text. */
  --accent: #0e4f4a;
  --accent-hover: #14635b;
  --on-accent: #ffffff;
  --danger: #b42318;
  --danger-soft: #fdf1f0;
  --success: #15803d;
  --warning: #b45309;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --shadow-soft: 0 1px 2px rgba(20, 35, 59, 0.04), 0 6px 18px rgba(20, 35, 59, 0.06);
  --shadow-raised: 0 2px 8px rgba(20, 35, 59, 0.06), 0 18px 40px rgba(20, 35, 59, 0.12);
}

* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Heebo", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* ── Shell ──────────────────────────────────────────── */
.app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  /* RTL: sidebar (first child) sits on the RIGHT, chat on the left. */
  grid-template-columns: 292px minmax(0, 1fr);
  direction: rtl;
  overflow: hidden;
}

.sidebar,
.chat-shell {
  direction: rtl;
}

/* ── Sidebar ────────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 18px;
  background: var(--surface);
  color: var(--ink);
  border-inline-start: 1px solid var(--line);
  min-height: 0;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 18px;
  border-bottom: 1px solid var(--line);
}

.brand-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 14px rgba(14, 79, 74, 0.28);
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-copy strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--primary-strong);
}

.brand-copy span {
  font-size: 12.5px;
  color: var(--muted);
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-item {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ink-soft);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: background 0.15s, color 0.15s;
}

.nav-item:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.nav-item.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 14px rgba(14, 79, 74, 0.22);
}

.nav-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: currentColor;
}

/* history in sidebar */
.history-drawer {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.history-drawer h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.history {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-height: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
}

.history-item {
  min-width: 0;
  padding: 11px 13px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  cursor: default;
}

.history-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  font-weight: 600;
  font-size: 13.5px;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.help-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.help-link:hover {
  color: var(--primary-strong);
}

/* ── Chat shell & header ────────────────────────────── */
.chat-shell {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  flex: 0 0 auto;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 33, 0.5);
  z-index: 9;
}

.sidebar-overlay.active {
  display: block;
}

/* Desktop: no top bar — the centered hero greets the user. The header is
   repurposed as a compact top bar on mobile only (see responsive block). */
.chat-header {
  display: none;
  position: relative;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* header-copy holds the JS-updated view title; not displayed in the new
   layout but kept in the DOM for switchView(). */
.header-copy {
  display: none;
}

/* Mobile top bar: just the "רפרנטו" name, absolutely centered regardless of the
   hamburger button on the side. */
.header-brand {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.header-brand-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
}

.header-brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--primary-strong);
}

.header-chip {
  display: none !important;
}

/* ── Chat area ──────────────────────────────────────── */
.chat-area {
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 36px 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.messages {
  width: min(1020px, 100%);
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}

/* When only the welcome/empty state is shown, center it in the available space.
   "safe" keeps long content scrollable from the top instead of clipping it, so
   it stays balanced on tall phones and never collides with the composer. */
.messages:has(#emptyState) {
  align-content: safe center;
}

.empty-state {
  width: min(600px, 100%);
  margin: clamp(12px, 4vh, 40px) auto;
  padding: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}

.empty-illustration {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: #e3eaf4;
  color: var(--ink-soft);
}

.empty-state h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.empty-hint {
  margin: 0 auto 22px;
  max-width: 440px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

/* Icon is supplied via data-icon so it never leaks into the question text
   when the chip fills the input (app.js reads chip.textContent). */
.suggestion-chip::before {
  content: attr(data-icon);
  font-size: 14px;
  line-height: 1;
}

.suggestion-chip:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: var(--primary-soft);
}

/* ── Messages ───────────────────────────────────────── */
.message {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.user-message {
  justify-content: flex-start;
}

.assistant-message {
  justify-content: flex-end;
}

.avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
}

.user-avatar {
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid #c9ddfa;
}

.assistant-avatar {
  background: linear-gradient(150deg, #15918a, #0a4f4b);
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 107, 102, 0.3);
}

.bubble {
  max-width: 640px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  line-height: 1.65;
}

.user-message .bubble {
  background: var(--blue-soft);
  border-color: #cfe1fb;
}

/* ChatGPT-style emphasis: the user's question is slightly bold, the AI answer
   stays at a regular/light weight (prose inherits 400 from the bubble; the
   structured elements below are toned down to match). */
.user-message .bubble p {
  font-weight: 600;
}

.assistant-message .bubble {
  font-weight: 400;
}

.bubble p {
  margin: 0 0 6px;
}

.bubble time {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

.result-card {
  min-width: min(640px, 100%);
  max-width: 760px;
}

.result-title {
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--ink);
}

/* source line */
.source-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Keep the source reference to a single compact line; full text on hover. */
.source-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-logo {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-soft);
  border: 1px solid #bfdedc;
  color: var(--primary-strong);
  font-size: 10.5px;
  font-weight: 800;
}

.source-prefix {
  margin-inline-end: 3px;
}

.source-company {
  margin-inline-end: 6px;
  color: var(--ink);
  font-weight: 700;
}

/* answer body */
.answer-summary {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--primary-soft);
  border: 1px solid #cde7e5;
  color: var(--primary-strong);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.65;
}

.answer-table {
  margin: 0;
}

.answer-row {
  display: grid;
  grid-template-columns: 30px minmax(170px, 1fr) minmax(180px, 0.95fr);
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.answer-row:last-child {
  border-bottom: 0;
}

.row-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 800;
}

.answer-row dt {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
}

.answer-row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.indexed-amount-row {
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid #bfdedc;
  border-radius: var(--radius-m);
  background: var(--primary-soft);
}

.indexed-amount-row dd {
  font-size: 17px;
  font-weight: 600;
  color: var(--primary-strong);
}

.indexed-amount-row .row-icon {
  background: #d2ecea;
  color: var(--primary-strong);
}

.answer-extra {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Page citation the model embeds in the answer, lifted out to a small line. */
.source-page-caption {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Full-length list/prose answers — readable, nothing truncated. */
.answer-longform {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.75;
}

/* loading */
.loading-bubble {
  min-height: 54px;
  display: flex;
  align-items: center;
}

.loading-current-step {
  direction: rtl;
  color: var(--ink-soft);
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-current-step::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--primary);
  animation: loading-spin 0.9s linear infinite;
}

.loading-dots::after {
  content: "";
  animation: loading-dots-anim 1.2s steps(4, end) infinite;
}

@keyframes loading-dots-anim {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

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

.stream-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--ink);
  font-size: 15px;
}

/* not found / request cards */
.not-found-card {
  border-color: #f0c0ba;
  background: #fffbfa;
}

.not-found-card .result-title {
  color: var(--danger);
}

.not-found-card .not-found-subtitle {
  color: #8f1d14;
  font-size: 15px;
  line-height: 1.65;
}

.not-found-card .source-line {
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #f0d8d4;
  border-bottom: 0;
  color: #9b7b78;
  font-size: 11.5px;
}

.not-found-card .company-logo {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #fff7f6;
  border-color: #efc7c2;
  color: #8f1d14;
  font-size: 10px;
}

.not-found-card .source-company {
  color: #7f312b;
}

.not-found-actions {
  margin-top: 10px;
}

.appendix-request-card {
  background: #fffdfb;
}

.request-details {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid #f0d8d4;
  border-bottom: 1px solid #f0d8d4;
}

.request-details div {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(160px, 1.2fr);
  gap: 12px;
  align-items: start;
}

.request-details dt {
  color: var(--ink);
  font-weight: 500;
}

.request-details dd {
  margin: 0;
  color: var(--ink-soft);
}

.request-action {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-s);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}

.request-action:hover {
  background: #173a63;
}

/* copy button */
.copy-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.copy-button:hover {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: #b3cef5;
}

.copy-button.copied {
  background: var(--primary-soft);
  color: var(--primary-strong);
  border-color: #bfdedc;
}

/* ── Composer ───────────────────────────────────────── */
.composer {
  flex: 0 0 auto;
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 16px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  z-index: 2;
}

.composer-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.meta-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.1fr 0.9fr;
  gap: 12px;
  margin-bottom: 12px;
}

.meta-field {
  display: grid;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
}

.meta-field em {
  color: var(--danger);
  font-style: normal;
}

.meta-field input,
.match-picker select,
.input-row textarea,
.compare-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-soft);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.meta-field input:focus,
.input-row textarea:focus,
.compare-form textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 107, 102, 0.12);
}

.meta-field input {
  min-height: 42px;
  padding: 0 13px;
  font-size: 14.5px;
  font-weight: 500;
}

.important-field input {
  border-color: #93b8e8;
  background: #f6faff;
  font-weight: 700;
}

.match-picker {
  margin-bottom: 12px;
}

.match-picker label {
  display: grid;
  gap: 7px;
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
}

.match-picker select {
  min-height: 44px;
  padding: 0 12px;
}

/* Company dropdown in the composer — same look as .meta-field input, with an
   RTL chevron. A native <select> (not free text) prevents company-name typos. */
.company-select {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background-color: var(--surface-soft);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238492a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  padding-left: 34px;
}
.company-select:focus {
  border-color: var(--primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(15, 107, 102, 0.12);
}

/* RTL order: textarea (right) · open-pdf · circular send (left). The open-pdf
   button collapses while disabled, so most of the time it's just input + send. */
.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.input-row textarea {
  height: 52px;
  min-height: 52px;
  resize: none;
  overflow: hidden;
  padding: 14px 16px;
  line-height: 1.5;
  font-size: 15.5px;
  border-radius: 999px;
}

.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(14, 79, 74, 0.26);
  transition: background 0.15s, transform 0.1s;
}

.send-button:hover {
  background: var(--accent-hover);
}

.send-button:active {
  transform: translateY(1px);
}

.send-button:disabled {
  opacity: 0.65;
  cursor: wait;
  box-shadow: none;
}

.send-icon {
  display: inline-grid;
  place-items: center;
  transform: scaleX(-1);
}

/* Chat composer: icon-only circular send button. */
.composer .send-button {
  width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 auto;
}

.composer .send-label {
  display: none;
}

.source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #b3cef5;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s;
}

.source-button:hover:not(:disabled) {
  background: #ddebfd;
}

/* Hidden until a source PDF is available, matching the clean Stitch composer. */
#openPdfButton:disabled {
  display: none;
}

.footer-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
}

.policy-dir {
  margin: 0;
  max-width: 55%;
  direction: ltr;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Compare view (visual / demo) ───────────────────── */
.compare-shell {
  flex: 1 1 auto;
  min-height: 0;
  /* The compare view is a blurred "coming soon" teaser — no scrolling. */
  overflow: hidden;
  padding: 26px 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cmp-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.cmp-head p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Wrapper clips the tall blurred grid so the "בקרוב" badge stays centered. */
.cmp-soon-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* RTL: control panel (first child) on the right, results on the left. */
.cmp-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  /* Teaser state: lightly blurred and non-interactive behind the overlay —
     soft enough that users can still make out the system. */
  filter: blur(1px);
  pointer-events: none;
  user-select: none;
}

.cmp-soon {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(238, 241, 247, 0.28);
}

.cmp-soon-badge {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 28px 36px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raised);
}

.cmp-soon-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.cmp-soon-badge strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--primary-strong);
}

.cmp-soon-badge span {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.cmp-control {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

.cmp-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
}

/* "What differs / what's similar" highlights card */
.cmp-highlights {
  margin-top: 14px;
}
.cmp-hl-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.cmp-hl-list {
  margin: 0 0 6px;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cmp-hl-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cmp-hl-similar {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.cmp-hl-similar strong {
  color: var(--ink-soft);
}

/* Loading note — sets the ~3 minute expectation */
.cmp-loading-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Covered / not-covered icons in comparison cells */
.cmp-ic {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  margin-inline-end: 4px;
}
.cmp-ic-yes {
  background: rgba(21, 128, 61, 0.12);
  color: var(--success);
}
.cmp-ic-no {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Per-row "פרטים" expand toggle + detail row */
.cmp-expand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.cmp-expand:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}
.cmp-chevron {
  transition: transform 0.15s ease;
}
.cmp-expand.open .cmp-chevron {
  transform: rotate(180deg);
}
.cmp-detail-row > td,
.cmp-detail-row > th {
  background: var(--surface-soft);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  vertical-align: top;
  padding-top: 8px;
  padding-bottom: 12px;
}
.cmp-detail-label {
  font-weight: 700;
  color: var(--muted);
}

/* Limit-reached popup (reuses .login-overlay centering) */
.limit-popup-card {
  text-align: center;
  gap: 12px;
}
.limit-popup-close {
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
}

.cmp-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.cmp-field-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

.cmp-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.cmp-textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 95, 88, 0.12);
}

.cmp-hint {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.cmp-pick {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 12px 13px;
  margin-bottom: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cmp-pick.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.cmp-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.cmp-pick-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}

.cmp-pick-name small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.cmp-pick-head input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-strong);
  flex: 0 0 auto;
}

.cmp-pick-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 12px;
}

.cmp-pick-fields .meta-field {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
}

.cmp-pick-fields .meta-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13.5px;
  outline: none;
}

.cmp-analyze {
  width: 100%;
  margin-top: 6px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(14, 79, 74, 0.24);
  transition: background 0.15s;
}

.cmp-analyze:hover {
  background: var(--accent-hover);
}

.cmp-analyze-icon {
  display: inline-grid;
  place-items: center;
}

/* main results column */
.cmp-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cmp-history-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.cmp-history-btn:hover {
  background: var(--surface-soft);
}

/* recommendation card */
.cmp-reco {
  border-color: #bfdedc;
  background: linear-gradient(180deg, var(--primary-soft), var(--surface) 62%);
}

.cmp-reco-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cmp-reco-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  flex: 0 0 auto;
}

.cmp-reco-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.cmp-reco-text {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.cmp-reco-text strong {
  color: var(--primary-strong);
}

.cmp-reco-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmp-reco-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid #bfdedc;
  color: var(--primary-strong);
  font-size: 12.5px;
  font-weight: 700;
}

/* comparison table */
.cmp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.cmp-table th,
.cmp-table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.cmp-table thead th {
  font-weight: 800;
  color: var(--ink);
  vertical-align: bottom;
  background: var(--surface);
}

.cmp-table thead small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.cmp-th-param {
  text-align: right;
  color: var(--muted);
  font-weight: 700;
}

.cmp-table tbody th {
  text-align: right;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--surface);
}

.cmp-table tbody td {
  color: var(--ink);
  font-weight: 600;
}

.cmp-section-row td {
  text-align: right;
  padding: 9px 16px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* recommended column highlight */
.cmp-col-reco {
  background: var(--primary-soft) !important;
}

.cmp-table tbody td.cmp-col-reco {
  color: var(--primary-strong);
}

.cmp-table thead .cmp-col-reco {
  box-shadow: inset 0 3px 0 var(--primary-strong);
}

.cmp-reco-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
}

.cmp-bad {
  color: var(--danger) !important;
  font-weight: 700;
}

/* table footer actions */
.cmp-table tfoot td {
  border-bottom: 0;
  padding: 14px 12px;
}

.cmp-quote {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}

.cmp-quote:hover {
  background: var(--surface-soft);
}

.cmp-quote-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.cmp-quote-primary:hover {
  background: var(--accent-hover);
}

/* ── Legal footer ───────────────────────────────────── */
.legal-footer {
  flex: 0 0 auto;
  padding: 9px 36px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.disclaimer-text {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.disclaimer-text strong {
  color: var(--ink-soft);
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--blue);
  font-size: 11.5px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links span {
  color: var(--muted);
  font-size: 11.5px;
}

/* ── Dark mode ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0c141f;
    --surface: #16202e;
    --surface-soft: #1b2735;
    --ink: #e8eef8;
    --ink-soft: #97a9c4;
    --muted: #65789a;
    --line: #243246;
    --line-strong: #31435c;
    --primary: #19a59c;
    --primary-strong: #5fe0d8;
    --primary-soft: #11302f;
    --blue: #5aa2f7;
    --blue-soft: #142440;
    --navy: #0a1422;
    --danger: #f87171;
    --danger-soft: #2c1614;
    --success: #34d399;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.3);
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.45);
  }

  .meta-field input:focus,
  .input-row textarea:focus,
  .compare-form textarea:focus {
    background: #101a27;
  }

  .important-field input {
    border-color: #2e4a73;
    background: #13233a;
  }

  .answer-summary {
    border-color: #1d4a47;
  }

  .indexed-amount-row {
    border-color: #1d4a47;
  }

  .indexed-amount-row .row-icon {
    background: #173f3c;
    color: #5fe0d8;
  }

  .company-logo {
    border-color: #1d4a47;
    color: #5fe0d8;
  }

  .not-found-card {
    border-color: #5c2a24;
    background: #20120f;
  }

  .not-found-card .not-found-subtitle {
    color: #f0b8b1;
  }

  .not-found-card .source-line {
    border-top-color: #3c2a25;
    color: #a58c88;
  }

  .not-found-card .company-logo {
    background: #2a1815;
    border-color: #5c2a24;
    color: #f0b8b1;
  }

  .not-found-card .source-company {
    color: #f0b8b1;
  }

  .appendix-request-card {
    background: #1d1612;
  }

  .request-details {
    border-color: #3c2a25;
  }

  .request-action {
    background: #1d63d8;
  }

  .request-action:hover {
    background: #2f74e8;
  }


  .source-button {
    border-color: #2e4a73;
  }

  .copy-button:hover {
    border-color: #2e4a73;
  }

  .empty-illustration {
    background: var(--surface-soft);
    color: var(--ink-soft);
  }

  .brand-logo,
  .nav-item.active,
  .header-brand-logo,
  .send-button {
    box-shadow: none;
  }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  /* RTL drawer: anchored to the right edge, slides in from the right. */
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(308px, 85vw);
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
  }

  .menu-button {
    display: grid;
    place-items: center;
  }

  /* Mobile top bar: hamburger + centered "רפרנטו" brand. */
  .chat-header {
    display: flex;
    min-height: 56px;
    padding: 10px 14px;
    gap: 12px;
  }

  .chat-area {
    padding: 18px 12px 8px;
  }

  .empty-state {
    margin: 12px auto;
    padding: 16px;
  }

  .empty-illustration {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }

  .empty-state h2 {
    font-size: 21px;
  }

  .empty-hint {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .composer {
    width: calc(100% - 18px);
    margin-bottom: max(8px, env(safe-area-inset-bottom));
    padding: 11px 12px 8px;
    border-radius: var(--radius-l);
  }

  .composer-fields {
    gap: 8px;
    margin-bottom: 9px;
  }

  .meta-field {
    gap: 3px;
    font-size: 11.5px;
  }

  /* iOS Safari auto-zooms into inputs with font-size < 16px — keep all
     interactive text fields at exactly 16px on mobile. */
  .meta-field input,
  .match-picker select,
  .company-select,
  .input-row textarea,
  .compare-form textarea {
    font-size: 16px;
  }

  .meta-field input,
  .company-select {
    min-height: 40px;
    padding: 0 12px;
  }

  /* Keep room for the RTL chevron on mobile (overrides the shared padding above). */
  .company-select {
    padding-left: 32px;
    background-position: left 11px center;
  }

  .input-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .composer .send-button {
    width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .input-row textarea {
    height: 46px;
    min-height: 46px;
    padding: 11px 14px;
  }

  .footer-row {
    display: none;
  }

  .bubble,
  .result-card {
    min-width: 0;
    max-width: calc(100vw - 56px);
    padding: 12px 14px;
  }

  .answer-summary {
    font-size: 14.5px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .legal-footer {
    padding: 5px 12px max(6px, env(safe-area-inset-bottom));
  }

  /* Keep the legal disclaimer reachable but compact (max 2 lines). */
  .disclaimer-text {
    font-size: 10px;
    line-height: 1.35;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .answer-row {
    grid-template-columns: 28px 1fr;
    gap: 6px;
  }

  .answer-row dd {
    grid-column: 2;
  }

  .request-details div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .compare-shell {
    padding: 16px 12px 24px;
  }

  .cmp-head h1 {
    font-size: 21px;
  }

  .cmp-grid {
    grid-template-columns: 1fr;
  }

  .cmp-table {
    font-size: 13px;
  }

  .cmp-table th,
  .cmp-table td {
    padding: 11px 12px;
  }
}

/* ── Accessibility ──────────────────────────────────── */
.skip-link {
  position: absolute;
  right: -9999px;
  top: 8px;
  z-index: 1000;
  background: var(--primary-strong);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-s);
  font-size: 15px;
  text-decoration: none;
}

.skip-link:focus {
  right: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Beta: account card (in sidebar), login overlay, quota, upgrade, toast ── */
/* Lives in the sidebar so it's visible on desktop (sidebar is always shown)
   and on mobile inside the hamburger drawer. margin-top:auto pins it to the
   bottom, directly above the footer. */
.account-bar {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-soft);
  font-size: 13px;
}
.account-bar[hidden] { display: none; }
.account-bar:not([hidden]) + .sidebar-footer { margin-top: 0; }
.account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-name {
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-quota {
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  text-align: center;
}
.account-badge {
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.account-actions {
  display: flex;
  gap: 8px;
}
.account-upgrade {
  flex: 1 1 auto;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  font-weight: 600;
  cursor: pointer;
}
.account-upgrade:hover { background: var(--accent-hover); }
.account-signout {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  cursor: pointer;
}
.account-signout:hover { background: var(--surface); filter: brightness(0.97); }

/* Login overlay */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(160deg, #0e4f4a 0%, #14233b 100%);
}
.login-overlay[hidden] { display: none; }
.login-card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  padding: 32px 28px;
  text-align: center;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.login-logo { color: var(--primary-strong); }
.login-brand strong { font-size: 26px; color: var(--ink); }
.login-sub { color: var(--muted); font-size: 13px; }
.login-text { color: var(--ink-soft); margin: 0 0 22px; line-height: 1.6; }
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-m);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.google-btn:hover { background: var(--surface-soft); box-shadow: var(--shadow-soft); }
.google-icon { display: inline-flex; }
.login-legal { color: var(--muted); font-size: 12px; margin: 18px 0 0; line-height: 1.6; }
.login-legal a { color: var(--primary); }

/* Daily-limit banner inside the chat */
.limit-upgrade-btn {
  margin-top: 14px;
  width: 100%;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-m);
  padding: 13px 18px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.limit-upgrade-btn:hover { background: var(--accent-hover); }
.limit-upgrade-btn:active { transform: translateY(1px); }

/* Toast */
.beta-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-raised);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1100;
  max-width: 90vw;
  text-align: center;
}
.beta-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Beta admin dashboard ───────────────────────────────────────────── */
.dashboard-body { background: var(--bg); }
.dash-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dash-header h1 { font-size: 24px; margin: 0; color: var(--ink); }
.dash-sub { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.dash-auth { display: flex; align-items: center; }
.dash-userrow { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.dash-auth .google-btn { width: auto; }
.dash-message {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-num { font-size: 30px; font-weight: 800; color: var(--primary-strong); }
.dash-label { color: var(--ink-soft); font-size: 13px; }
.dash-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.dash-section-head h2 { font-size: 18px; margin: 0; color: var(--ink); }
.dash-pill {
  background: var(--surface-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}
.dash-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
}
.dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dash-table th, .dash-table td {
  text-align: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dash-table thead th { color: var(--ink-soft); font-weight: 600; background: var(--surface-soft); }
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-tag {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  background: var(--surface-soft);
  color: var(--muted);
}
.dash-tag-on { background: var(--primary-soft); color: var(--primary-strong); }
.dash-empty { color: var(--muted); padding: 18px; margin: 0; text-align: center; }

/* ── "Find the right appendix" guiding questions (facet chips) ───────── */
.facet-card { display: block; }
.facet-prompt { margin: 0 0 4px; font-weight: 700; color: var(--ink); font-size: 15px; }
.facet-sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.facet-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.facet-files { flex-direction: column; }
.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.facet-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
.facet-chip:active { transform: scale(0.97); }
.facet-chip .facet-count {
  background: var(--surface-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}
.facet-chip.chosen {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.facet-chip.chosen .facet-count { background: rgba(255, 255, 255, 0.25); color: #fff; }
.facet-chip:disabled { opacity: 0.55; cursor: default; }
.facet-chip.chosen:disabled { opacity: 1; }
/* file pick-list chips: full-width, right-aligned, wrap long names */
.file-chip {
  display: block;
  width: 100%;
  text-align: start;
  border-radius: var(--radius-m);
  white-space: normal;
  line-height: 1.5;
}

/* ── Comparison view (live) ──────────────────────────────────────────────── */
/* Overrides the teaser's no-scroll/hidden: this is now an interactive view. */
.compare-shell {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative; /* anchor for the registration gate overlay */
}

/* The compare view toggles visibility with the [hidden] attribute, but several
   of its elements set an explicit display (flex/grid), which would otherwise
   override the UA's low-specificity [hidden]{display:none}. Force it. */
.compare-shell [hidden] { display: none !important; }

.cmp-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
}

.cmp-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-bottom: 12px;
}

.cmp-profile-grid .meta-field { margin: 0; }

.cmp-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  background: var(--surface-soft);
}

.cmp-toggle input { accent-color: var(--primary); width: 16px; height: 16px; }
.cmp-toggle:has(input:checked) {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: var(--primary-soft);
}

/* ── Policy slots ── */
.cmp-slots { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

.cmp-slot {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  padding: 10px;
  background: var(--surface-soft);
}
.cmp-slot.is-resolved { border-color: var(--primary); background: var(--primary-soft); }

.cmp-slot-search { display: flex; gap: 6px; align-items: center; }
.cmp-slot-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
.cmp-slot-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.cmp-slot-go {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cmp-slot-go:hover { background: var(--accent-hover); }

.cmp-slot-remove {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.cmp-slot-remove:hover { color: var(--danger); border-color: var(--danger); }

.cmp-wizard { margin-top: 10px; }
.cmp-wiz-loading { font-size: 13px; color: var(--muted); padding: 6px 2px; }
.cmp-wiz-prompt { margin: 0 0 2px; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.cmp-wiz-sub { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.cmp-wiz-none { margin: 6px 2px 0; font-size: 13px; color: var(--warning); }

/* Resolved slot card — company + year revealed only here, after picking. */
.cmp-slot-resolved { display: flex; flex-direction: column; gap: 10px; }
.cmp-slot-id { display: flex; align-items: center; gap: 10px; }
.cmp-slot-id .company-logo {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 13px;
}
.cmp-slot-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cmp-slot-title { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-slot-sub { font-size: 12.5px; color: var(--primary-strong); }
.cmp-slot-replace {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--primary-strong);
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.cmp-slot-replace:hover { background: var(--surface); border-color: var(--primary-strong); }

.cmp-premium { display: flex; flex-direction: column; gap: 4px; }
.cmp-premium span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cmp-premium-input {
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
.cmp-premium-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.cmp-add-slot {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--primary-strong);
  font: inherit; font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
}
.cmp-add-slot:hover { background: var(--primary-soft); border-color: var(--primary); }

.cmp-inline-error { margin: 0 0 12px; color: var(--danger); font-size: 13px; font-weight: 600; }

/* ── Results side ── */
.cmp-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-soft);
}
.cmp-empty-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
  margin-bottom: 6px;
}
.cmp-empty h2 { margin: 0; font-size: 19px; color: var(--ink); }
.cmp-empty p { margin: 0; max-width: 420px; font-size: 13.5px; line-height: 1.6; }

.cmp-results { display: flex; flex-direction: column; gap: 16px; }
.cmp-loading { display: grid; place-items: center; padding: 48px 0; }

.cmp-reco-chip {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 6px;
}
.cmp-vfm { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.cmp-vfm strong { color: var(--primary-strong); }

/* Best cell in a row + parameter-relevance dot */
.cmp-table tbody td.cmp-cell-best { font-weight: 800; color: var(--primary-strong); }
.cmp-table tbody td.cmp-muted-cell { color: var(--muted); }
.cmp-weight-dot { color: var(--primary); font-size: 9px; vertical-align: middle; }
.cmp-src {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--blue);
  font-size: 11px;
  cursor: pointer;
}
.cmp-src:hover { background: var(--blue-soft); border-color: var(--blue); }

.cmp-caveats {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.cmp-caveats p { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }

@media (max-width: 900px) {
  .cmp-layout { grid-template-columns: 1fr; }
  .compare-shell { padding: 18px 16px 22px; }
}

@media (max-width: 520px) {
  .cmp-profile-grid { grid-template-columns: 1fr; }
  .cmp-toggle { flex: 1 1 auto; justify-content: center; }
  .compare-gate-card { padding: 22px 18px; }
  .cmp-slot-search { flex-wrap: wrap; }
  .cmp-slot-input { flex: 1 1 100%; }
}

/* Compare control inputs: native selects restyled with an RTL chevron. */
.cmp-control select,
.cmp-text-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
.cmp-control select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-start: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238492a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 12px;
  cursor: pointer;
}
.cmp-control select:focus,
.cmp-text-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.cmp-field-hint { margin: 5px 2px 12px; font-size: 11.5px; color: var(--muted); }

.cmp-family-extra {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmp-family-extra .cmp-profile-grid { margin: 0; }

.cmp-est-tag {
  display: inline-block;
  margin-inline-start: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warning);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.cmp-doc-tag { background: var(--blue); }

/* Wizard escape-hatch actions (chat + compare): change company / not found. */
.facet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.facet-alt {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: var(--radius-m);
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.facet-alt:hover { background: var(--surface-soft); border-color: var(--primary); }
.facet-alt:disabled { opacity: 0.55; cursor: default; }
.facet-notfound { color: var(--danger); }
.facet-notfound:hover { background: var(--surface-soft); border-color: var(--line-strong); }

/* ── Comparison registration gate (registered users only) ────────────────── */
.compare-gate { display: none; }
body.compare-locked .compare-gate {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 24px;
  background: rgba(238, 241, 247, 0.3);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
/* Tease the real tool behind the gate — light blur so it stays visible. */
body.compare-locked .cmp-layout {
  filter: blur(1px);
  pointer-events: none;
  user-select: none;
}
/* Behind the gate show a sample table instead of the empty state; revert on unlock. */
#compareDemo { display: none; }
body.compare-locked #compareDemo { display: flex; flex-direction: column; gap: 16px; }
body.compare-locked #cmpEmpty { display: none !important; }
.compare-gate-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 380px;
  padding: 30px 34px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raised);
}
.compare-gate-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.compare-gate-card h2 { margin: 4px 0 0; font-size: 21px; color: var(--ink); }
.compare-gate-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.compare-gate-btn {
  margin-top: 8px;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-m);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.compare-gate-btn:hover { background: var(--accent-hover); }


/* ── PWA "הוסף למסך הבית" — באנר התקנה (Android) + בועת הדרכה (iOS) ─────────
   הסגנונות כאן (ולא מוזרקים מ-JS) כי ה-CSP הוא style-src 'self' בלי
   unsafe-inline — <style> מוזרק נחסם. ראו static/pwa-install.js. */
.pwa-banner {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  width: min(440px, calc(100vw - 24px));
  z-index: 2147483000;
  direction: rtl;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.pwa-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.pwa-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raised);
  padding: 14px 14px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pwa-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-ico svg { width: 26px; height: 26px; }
.pwa-body { flex: 1 1 auto; min-width: 0; }
.pwa-title { font-weight: 700; font-size: .95rem; line-height: 1.3; margin: 0; }
.pwa-sub { font-size: .82rem; color: var(--ink-soft); margin: 2px 0 0; line-height: 1.45; }
.pwa-cta {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.pwa-cta:hover { background: var(--accent-hover); }
.pwa-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.pwa-close:hover { background: var(--surface-soft); color: var(--ink); }
/* בועת iOS עם חץ למטה (לכיוון כפתור השיתוף) */
.pwa-banner.ios .pwa-card {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-bottom: 16px;
}
.pwa-ios-head { display: flex; align-items: flex-start; gap: 10px; }
.pwa-ios-text { font-size: .9rem; line-height: 1.5; color: var(--ink); margin: 0; flex: 1 1 auto; }
.pwa-ios-text .pwa-share { display: inline-flex; vertical-align: -3px; margin: 0 2px; }
.pwa-banner.ios::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-right-radius: 3px;
}
@media (max-width: 380px) {
  .pwa-title { font-size: .9rem; }
  .pwa-cta { padding: 9px 12px; }
}