/* i18n / RTL: Hebrew web fonts.
   NOTE: @import must precede all other CSS rules per spec, so this stays
   at the very top of the file. The rest of the i18n rules live at the
   bottom alongside the other recent additions. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Frank+Ruhl+Libre:wght@400;500;700&display=swap');

:root {
  --bg: #faf8f5;
  --card: #fff;
  --ink: #1c1917;
  --muted: #57534e;
  --accent: #b45309;
  --accent-soft: #fff7ed;
  --border: #e7e5e4;
  --danger: #b91c1c;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lashon-link-color: #8b2c2c;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  touch-action: pan-y;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

/* === Auth-resolution cloak ===
   Until JS confirms the user's auth state, hide auth-dependent sections so a
   logged-in user never flashes the logged-out homepage (and vice versa). The
   body.auth-resolved class is added by app.js after /api/auth/me completes,
   whether it returns 200 or 401. While unresolved, these sections render as
   invisible — far less jarring than briefly showing the wrong content. */
body:not(.auth-resolved) #hero-public,
body:not(.auth-resolved) #screen-pricing-public,
body:not(.auth-resolved) .app-shell:not(.legal-shell),
body:not(.auth-resolved) .auth-links {
  visibility: hidden;
}

.wrap {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

@media (max-width: 639px) {
  .wrap {
    max-width: 100%;
    padding: 1rem 1rem 2.5rem;
  }
}

.header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.user-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  margin-top: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}

.user-email {
  font-size: 0.88rem;
  color: var(--muted);
  word-break: break-all;
}

.tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}

.tab {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.tab:hover {
  color: var(--ink);
  background: var(--bg);
}

.tab.active {
  color: var(--ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px #fed7aa;
}

#auth-email,
#auth-password {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

#auth-email:focus,
#auth-password:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1.25rem;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}

.card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.form-row-checkbox {
  margin-top: 0.35rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.checkbox-text {
  user-select: none;
}

.checkbox-text a {
  color: var(--accent);
  text-decoration: underline;
}

.checkbox-text a:hover {
  text-decoration-thickness: 2px;
}

.field {
  margin-bottom: 1rem;
}

.field > label,
fieldset legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

fieldset.field {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
}

.radio-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  cursor: pointer;
  font-size: 0.92rem;
}

.radio-row input {
  margin-top: 0.2rem;
}

.personality-badge {
  display: inline-block;
  font-size: 0.7em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}

.personality-note {
  display: block;
  font-size: 0.75em;
  opacity: 0.65;
  margin-top: 0.15rem;
}

#daf {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

#daf:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn {
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

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

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

.btn.ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

/* Start screen — co-equal entry paths (chavrusa + beyado; this screen only) */
#screen-start .start-entry-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

#screen-start .start-entry-actions .btn {
  width: 100%;
  box-sizing: border-box;
}

#screen-start .btn.beyado-entry {
  background: #b45309;
  color: #fff;
  border-color: #b45309;
}

#screen-start .btn.primary:hover:not(:disabled),
#screen-start .btn.beyado-entry:hover {
  filter: brightness(0.92);
}

#screen-start .btn.primary:active:not(:disabled),
#screen-start .btn.beyado-entry:active {
  filter: brightness(0.85);
}

.error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.hidden {
  display: none !important;
}

.meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 6px 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.12);
}

.meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.session-meta-sources {
  white-space: nowrap;
}

.session-anchor-cta {
  background: transparent;
  border: none;
  color: #2563eb;
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.session-anchor-cta:hover {
  color: #1d4ed8;
}

.session-anchor-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.session-anchor-inline {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.session-anchor-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 14rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 6px;
  background: var(--bg, #fff);
  color: var(--text, inherit);
}

.session-anchor-load {
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
}

.session-anchor-error {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  color: #b91c1c;
}

.chat-title {
  margin-bottom: 0.75rem;
}

.messages {
  max-height: min(50vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
  padding: 0.25rem 0;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.msg {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.msg.user {
  align-self: flex-end;
  margin-inline-start: auto;
  background: var(--accent-soft);
  border-color: #fed7aa;
}

.msg.assistant {
  align-self: flex-start;
  background: var(--card);
}

.msg.thinking {
  opacity: 0.95;
}

.thinking-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: chat-spinner-rotate 0.75s linear infinite;
}

@keyframes chat-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.thinking-label {
  font-size: 0.92rem;
  color: var(--muted);
}

.thinking-error-msg {
  color: var(--danger);
  font-size: 0.95rem;
}

.msg .who {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.msg .msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  unicode-bidi: plaintext;   /* pick RTL/LTR per message from its content */
  text-align: start;         /* align to reading direction: right for Hebrew, left for English */
}

.msg-body .source-quote {
  border-inline-start: 3px solid rgba(139, 44, 44, 0.35);
  padding-inline-start: 0.75em;
  margin: 0.5em 0;
  color: inherit;
  font-style: normal;
  unicode-bidi: plaintext;   /* quoted Hebrew source renders RTL */
  text-align: start;
}

.lashon-ref {
  color: var(--lashon-link-color);
  cursor: pointer;
}

.lashon-ref:hover {
  text-decoration: underline;
  text-decoration-color: rgba(139, 44, 44, 0.4);
  text-decoration-thickness: 1px;
}

.btn-lashon-open {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.88rem;
}

.lashon-book-icon {
  font-size: 0.95em;
  margin-inline-start: 0.15rem;
}

.search-block {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}

.search-block strong {
  color: var(--ink);
  display: block;
  margin-bottom: 0.25rem;
}

.search-block ul {
  margin: 0.25rem 0 0;
  padding-inline-start: 1.1rem;
}

/* Preset question chips — shown in the chat empty state above the composer.
   Mobile-first: stacked column with full-width chips that can wrap to 2 lines.
   At >=600px, chips become inline auto-width pills that wrap to a row.       */
.preset-chips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.25rem 0 0.85rem;
}

.preset-chips.hidden {
  display: none;
}

.preset-chip {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: start;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.preset-chip:hover {
  background: var(--accent-soft);
  border-color: #fed7aa;
  color: var(--ink);
}

.preset-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.preset-chip:active {
  background: var(--accent-soft);
}

@media (min-width: 600px) {
  .preset-chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
  }
  .preset-chip {
    display: inline-block;
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0.55rem 0.9rem;
    min-height: 0;
    font-size: 0.9rem;
  }
}

/* Anchored variant: sits inside .messages as a sibling immediately after
   the latest assistant bubble. Lower zero margin so spacing comes from
   the .messages flex gap; align-self/start so it visually groups with the
   assistant message instead of stretching across the column.            */
.preset-chips-anchored {
  margin: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

@media (min-width: 600px) {
  .preset-chips-anchored {
    margin: 0;
  }
}

.composer {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.beyado-panel-wrap {
  margin: 0.35rem 0 0.5rem;
}

.btn-beyado-panel {
  font-size: 0.88rem;
  padding: 0.35rem 0.65rem;
}

.beyado-panel-block {
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  text-align: left;
  direction: ltr;
}

.beyado-panel-mark {
  font-size: 0.72rem;
  font-style: italic;
  text-transform: lowercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.beyado-panel-copyright {
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.beyado-panel-copyright a {
  color: var(--muted);
  text-decoration: underline;
}

.beyado-panel-amud {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.55rem;
}

.beyado-panel-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
}

.beyado-panel-sugya + .beyado-panel-sugya {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.beyado-panel-unavailable {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* Daf Yomi consumer <g> styling — reused for inline beyado panel */
.gemara-quote {
  unicode-bidi: isolate;
  direction: rtl;
  display: inline;
  font-weight: 700;
  color: #7c2d12;
  background: #fff7ed;
  padding: 0 0.12em;
  border-radius: 2px;
}

#msg-input {
  flex: 1;
  min-width: 0;
  min-height: 3.25rem;
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  max-height: 12rem;
}

#msg-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.admin-note {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.admin-note code {
  font-size: 0.82em;
  background: var(--bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
}

.progress-wrap {
  margin-top: 1rem;
}

.progress-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.15s ease-out;
}

.status-msg {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--ink);
}

.admin-footer {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

.admin-footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

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

/* App shell + chat history sidebar */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 0;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
  border-inline-end: 1px solid transparent;
  background: var(--card);
  transition:
    width 0.22s ease,
    min-width 0.22s ease,
    border-color 0.22s ease;
}

.sidebar.open {
  width: 280px;
  min-width: 280px;
  border-inline-end-color: var(--border);
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-inner {
  width: 280px;
  padding: 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 100%;
  box-sizing: border-box;
}

.main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body:not(.logged-in) .sidebar,
body:not(.logged-in) .sidebar-toggle {
  display: none;
}

/* Logged-out users have no sidebar in the layout, so the .app-shell
   flex-wrap mechanism (added with the site footer at the bottom of this
   file) collapses .main-wrap to 0px: .main-wrap (flex-basis 0%) and
   .site-footer (flex-basis 100%) sum to exactly 100% and share line 1
   with zero free space, so .main-wrap never grows. Switching .app-shell
   to block stacking for logged-out users matches the @media (max-width:
   767px) rule already in this file and lets .main-wrap take its natural
   full width. */
body:not(.logged-in) .app-shell {
  display: block;
}

/* Logged-in + desktop flex row: when the chat sidebar is closed, .sidebar
   stays a flex item with width 0 (no .open class). With .site-footer's
   flex-basis 100% on the same row as .main-wrap (flex: 1, basis 0%), the
   sum is again 100% and .main-wrap collapses to 0px — same bug as the
   logged-out case. Use block stacking while .sidebar lacks .open.
   Do not use body.sidebar-open for this: that class is only set on mobile
   when the overlay is open (see app.js), so it would not reflect desktop
   sidebar state. At <=767px, .app-shell is already display: block in the
   mobile rules below; this selector still matches when closed but is
   redundant there. */
body.logged-in .app-shell:has(.sidebar:not(.open):not(.collapsed)) {
  display: block;
}

/* When the sidebar is closed on desktop (app-shell is block-stacked above),
   collapse it fully so it takes no vertical space and doesn't push main-wrap
   down. The mobile @media (max-width:767px) rules below override this with
   the fixed-overlay behavior, so this only affects desktop. */
@media (min-width: 768px) {
  .sidebar:not(.open):not(.collapsed) {
    height: 0;
    max-height: 0;
    overflow: hidden;
  }
}

.header-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--text, currentColor);
  align-items: center;
  justify-content: center;
}

.header-inline {
  padding-top: 0.1rem;
  flex: 1;
  min-width: 0;
}

.header-inline h1 {
  margin: 0 0 0.25rem;
}

.header-inline .tagline {
  margin: 0;
}

.sidebar-new {
  width: 100%;
  font-size: 0.88rem;
  background: var(--accent-soft);
  border: 1px solid #fed7aa;
  color: var(--ink);
}

.sidebar-top-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-top-row .sidebar-new {
  flex: 1;
  margin: 0;
}

.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.sidebar-collapse-btn:hover {
  background: var(--bg);
  color: var(--ink);
}

/* Desktop rail-collapse — guarded above the mobile breakpoint only. */
@media (min-width: 768px) {
  .sidebar.collapsed {
    width: 56px;
    min-width: 56px;
  }
  .sidebar.collapsed .sidebar-new,
  .sidebar.collapsed .chat-list,
  .sidebar.collapsed .sidebar-user {
    display: none;
  }
  /* Keep the collapse toggle visible and centered in the rail */
  .sidebar.collapsed .sidebar-top-row {
    justify-content: center;
    width: 100%;
  }
  .sidebar.collapsed .sidebar-collapse-btn {
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar.collapsed .sidebar-inner {
    width: 56px;
    padding-inline: 0.5rem;
  }
}

.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}

.chat-item {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.45rem 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.86rem;
}

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

.chat-item.active {
  background: var(--accent-soft);
  border-color: #fed7aa;
}

.chat-list-error {
  padding: 0.45rem 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  line-height: 1.35;
}

.chat-list-error:hover {
  background: var(--bg);
}

.chat-item-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.35;
}

.chat-item-title-input {
  width: 100%;
  font: inherit;
  font-size: 0.86rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}

.chat-item-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.2rem;
}

.btn-icon {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.2rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2;
}

.btn-icon:hover {
  color: var(--ink);
  background: var(--bg);
}

/* === Sidebar user-identity footer === */

.sidebar-user {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.sidebar-user:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar-user:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}

.sidebar-user .user-email {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user .user-tier-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}

/* Sidebar-inner needs to lay out the footer at the bottom */
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
}

/* === Settings modal === */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

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

.modal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
  width: 100%;
  max-width: 420px;
  padding: 28px 28px 24px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  padding: 4px 8px;
}

.modal-close:hover {
  color: rgba(0, 0, 0, 0.85);
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 20px 0;
}

.settings-section {
  margin-bottom: 18px;
}

.settings-section.hidden {
  display: none;
}

.settings-row-label {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-tier {
  font-size: 1.125rem;
  font-weight: 500;
}

.settings-trial-note {
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 4px;
}

.settings-trial-note.hidden {
  display: none;
}

.usage-bar {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  width: 0%;
  background: #2563eb;
  border-radius: 5px;
  transition: width 0.4s ease-out;
}

.usage-bar-fill.blocked {
  background: #dc2626;
}

.settings-blocked-note {
  font-size: 0.875rem;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 18px;
}

.settings-blocked-note.hidden {
  display: none;
}

.settings-actions {
  margin-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 16px;
}

.btn-block {
  display: block;
  width: 100%;
}

/* Destructive actions, separated from the rest of settings by a divider. */
.settings-danger-zone {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(185, 28, 28, 0.4);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.4);
}

.delete-account-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px 0;
}

/* === Pricing modal === */

.pricing-modal-card {
  max-width: min(1180px, 96vw);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 20px 14px 18px;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 280px;
}

.pricing-card.current {
  border: 2px solid #2563eb;
  background: #f0f6ff;
}

.pricing-card-name {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.pricing-card-price {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #111;
}

.pricing-card-price-suffix {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

.pricing-card-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  flex: 1;
  margin: 0 0 14px 0;
}

.pricing-card-features {
  flex: 1;
  margin: 0 0 14px 0;
}

.pricing-card-feature {
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.72);
  margin: 0 0 10px 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid rgba(37, 99, 235, 0.2);
}

.pricing-card-feature:last-child {
  margin-bottom: 0;
}

.pricing-card-action {
  margin-top: auto;
}

.pricing-card-current-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 5px;
  padding: 6px 10px;
  text-align: center;
  width: 100%;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-primary:disabled {
  background: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}

/* Inline link-style button */
.btn-link {
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}

.btn-link:hover {
  color: #1d4ed8;
}

/* === Homepage pricing section (logged-out only) === */

.pricing-public-section {
  margin-top: 32px;
  padding: 24px 0;
}

/* Hide pricing section when user is logged in */
body.logged-in .pricing-public-section {
  display: none;
}

.pricing-public-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
}

.pricing-public-subtitle {
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 20px 0;
  text-align: center;
}

/* === Toast notification === */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}

.toast.hidden {
  display: none;
}

.toast.success {
  background: #047857;
}

.toast.error {
  background: #b91c1c;
}

/* === Header redesign for logged-out homepage === */

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink, #111);
}

.brand-icon {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.7);
}

.brand span {
  letter-spacing: -0.01em;
}

.brand-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-link:hover .brand-icon,
.brand-link:focus .brand-icon,
.brand-link:hover span,
.brand-link:focus span {
  opacity: 0.85;
}

/* Auth + locale toggle: one cluster at the end of the top row (LTR/RTL-safe). */

.header-account-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  flex-shrink: 0;
  align-self: center;
}

.auth-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.logged-in .auth-links {
  display: none;
}

.auth-link {
  font-size: 0.9375rem;
  text-decoration: none;
}

.auth-link-cta {
  padding: 8px 16px;
  font-size: 0.9375rem;
}

/* === Hero section === */

.hero-section {
  text-align: center;
  padding: 60px 20px 40px;
  max-width: 720px;
  margin: 0 auto;
}

body.logged-in .hero-section {
  display: none;
}

.free-signup-section {
  text-align: center;
  padding: 20px 20px 40px;
  max-width: 720px;
  margin: 0 auto;
}
body.logged-in .free-signup-section {
  display: none;
}
.free-signup-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.free-signup-body {
  font-size: 1.125rem;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 20px 0;
  line-height: 1.5;
}
.free-signup-bridge {
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.55);
  margin: 16px 0 0 0;
}
@media (max-width: 600px) {
  .free-signup-section {
    padding: 12px 16px 24px;
  }
  .free-signup-title {
    font-size: 1.375rem;
  }
  .free-signup-body {
    font-size: 1rem;
  }
}

.hero-headline {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hero-subheadline {
  font-size: 1.125rem;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .hero-section {
    padding: 36px 16px 24px;
  }

  .hero-headline {
    font-size: 1.625rem;
  }

  .hero-subheadline {
    font-size: 1rem;
  }
}

/* === Pricing grid: five columns on desktop, single column on small screens === */

.pricing-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing-public-section can be wider than before now that it's the hero content */

.pricing-public-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.pricing-public-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

/* === Auth modal === */

.auth-modal-card {
  max-width: 420px;
}

/* The screen-auth section inside the modal shouldn't have its own card styling */
.auth-modal-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* === Invite link below pricing cards === */

.invite-link-wrap {
  text-align: center;
  margin-top: 28px;
}

.invite-link {
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
}

.invite-link:hover {
  color: #2563eb;
}

body.logged-in .invite-link-wrap {
  display: none;
}

/* === Mobile sidebar: slide-over overlay (<= 767px) === */

.sidebar-backdrop {
  display: none;
}

@media (max-width: 767px) {
  body.logged-in .mobile-menu-btn { display: inline-flex; }

  /* Sidebar becomes an overlay; it should not consume layout width */
  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100vh;
    width: min(320px, 85vw);
    min-width: 0;
    overflow: visible;
    border-inline-end-color: var(--border);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: 120;
  }

  .sidebar.open {
    width: min(320px, 85vw);
    min-width: 0;
    transform: translateX(0);
  }

  [dir="rtl"] .sidebar {
    transform: translateX(105%);
  }
  [dir="rtl"] .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* Backdrop shown only while sidebar is open */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 110;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  /* Keep main content full-width behind overlay */
  .app-shell {
    display: block;
  }

  .main-wrap {
    width: 100%;
  }
}

/* === Hero anchor line (third line, quieter) === */

.hero-anchor-line {
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.55);
  margin: 16px 0 0 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .hero-anchor-line {
    font-size: 0.875rem;
    margin-top: 12px;
  }
}

/* === Lashon side panel === */

.lashon-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(28, 25, 23, 0.38);
}

.lashon-backdrop.hidden {
  display: none;
}

.lashon-panel {
  position: fixed;
  z-index: 131;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(28, 25, 23, 0.12);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.24s ease,
    visibility 0.24s;
}

.lashon-panel--open {
  visibility: visible;
  pointer-events: auto;
}

.lashon-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

.lashon-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.lashon-pin {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  padding: 4px 8px;
}

.lashon-pin:hover {
  color: rgba(0, 0, 0, 0.85);
}

.lashon-panel-header-actions #lashon-close {
  position: static;
  top: auto;
  inset-inline-end: auto;
  padding: 4px 8px;
}

@media (max-width: 899px) {
  .lashon-pin {
    display: none !important;
  }
}

.lashon-panel-title {
  margin: 0;
  font-size: 1.05rem;
}

.lashon-panel-body {
  padding: 0.85rem 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.lashon-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.lashon-search-input {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.lashon-search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.lashon-status {
  min-height: 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.lashon-status.lashon-status--error {
  color: var(--danger);
}

.lashon-citation {
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0 0 0.65rem;
  word-break: break-word;
}

.lashon-hebrew {
  font-family: "SBL Hebrew", "Ezra SIL", "Frank Ruhl Libre", "Noto Serif Hebrew", serif;
  font-size: 1.02rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.65rem 0.5rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  min-height: 3rem;
}

.lashon-loading,
.lashon-empty,
.lashon-error {
  padding: 12px;
  color: var(--muted-text, #666);
  font-size: 14px;
}
.lashon-error {
  color: var(--error-text, #c33);
}
.lashon-search-header {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text, #666);
  margin: 12px 0 6px;
}
.lashon-search-card {
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid var(--card-border, #e0d8c8);
  border-radius: 6px;
  background: var(--card-bg, #fafaf6);
  cursor: pointer;
  transition: background 0.15s;
}
.lashon-search-card:hover {
  background: var(--card-bg-hover, #f0e8d8);
}
.lashon-search-card.expanded {
  background: var(--card-bg-hover, #f0e8d8);
}
.lashon-search-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-text, #666);
  margin-bottom: 4px;
}
.lashon-search-card-snippet {
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-text, #222);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.lashon-section {
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid var(--card-border, #e0d8c8);
  border-radius: 6px;
  background: var(--card-bg, #fafaf6);
}

.lashon-section-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-text, #666);
  margin-bottom: 6px;
}

.lashon-section-body {
  font-family: "SBL Hebrew", "Ezra SIL", "Frank Ruhl Libre", "Noto Serif Hebrew", serif;
  font-size: 1.02rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

@media (min-width: 769px) {
  .lashon-panel {
    top: 0;
    inset-inline-end: 0;
    width: min(400px, 96vw);
    height: 100%;
    transform: translateX(100%);
  }

  .lashon-panel.lashon-panel--open {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .lashon-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: min(48vh, 420px);
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(100%);
  }

  .lashon-panel.lashon-panel--open {
    transform: translateY(0);
  }
}

@media (min-width: 900px) {
  body.lashon-pinned #lashon-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 400px;
    height: auto;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 200ms ease,
      width 200ms ease,
      visibility 200ms;
  }

  body.lashon-pinned #lashon-backdrop {
    display: none !important;
  }

  body.lashon-pinned .main-wrap {
    margin-right: 400px;
    transition: margin 200ms ease;
  }

  body.lashon-pinned #lashon-close {
    display: none;
  }

  html[dir="rtl"] body.lashon-pinned #lashon-panel,
  :root[lang="he"] body.lashon-pinned #lashon-panel {
    right: auto;
    left: 0;
    box-shadow: 4px 0 24px rgba(28, 25, 23, 0.12);
  }

  html[dir="rtl"] body.lashon-pinned .main-wrap,
  :root[lang="he"] body.lashon-pinned .main-wrap {
    margin-right: 0;
    margin-left: 400px;
  }
}

/* === Pricing modal migration banner === */

.pricing-migration-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pricing-migration-banner.hidden {
  display: none;
}

/* === Grace-finish countdown (free tier, mid-conversation past cap) === */

.grace-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 0.9em;
  text-align: center;
}

/* === Early access section (alternative to pricing cards when free signup is disabled) === */

.early-access-section {
  text-align: center;
  padding: 40px 20px 60px;
  max-width: 540px;
  margin: 0 auto;
}

.early-access-section.hidden {
  display: none;
}

body.logged-in .early-access-section {
  display: none;
}

.early-access-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

.early-access-body {
  font-size: 1.0625rem;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 28px 0;
  line-height: 1.5;
}

.btn-early-access-cta {
  font-size: 1rem;
  padding: 12px 32px;
}

@media (max-width: 600px) {
  .early-access-section {
    padding: 32px 16px 40px;
  }

  .early-access-title {
    font-size: 1.5rem;
  }

  .early-access-body {
    font-size: 1rem;
  }
}

/* === Pricing modal Chaim trial-exhausted banner === */

.pricing-chaim-banner {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pricing-chaim-banner.hidden {
  display: none;
}

/* === בס"ד mark (placed at top of every page) === */

.bsd-mark {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);
  padding: 6px 0 2px 0;
  font-family: "Frank Ruehl CLM", "David CLM", "Arial Hebrew", "SBL Hebrew", serif;
  letter-spacing: 0.05em;
  line-height: 1;
  user-select: none;
}

@media (max-width: 600px) {
  .bsd-mark {
    font-size: 0.6875rem;
    padding: 4px 0 2px 0;
  }
}

/* === Site footer (every page) === */

.app-shell {
  flex-wrap: wrap;
}

.site-footer {
  flex: 1 1 100%;
  width: 100%;
  margin-top: auto;
  padding: 24px 20px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.6;
}

.footer-disclaimer {
  max-width: 720px;
  margin: 0 auto 12px;
  font-style: italic;
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.5);
  direction: ltr;
  text-align: center;
  unicode-bidi: isolate;
}

.footer-business,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin-bottom: 6px;
}

.footer-sep {
  color: rgba(0, 0, 0, 0.25);
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: rgba(0, 0, 0, 0.75);
}

@media (max-width: 600px) {
  .site-footer {
    padding: 20px 14px 24px;
    font-size: 0.75rem;
  }
  .footer-disclaimer {
    font-size: 0.75rem;
  }
  .footer-sep {
    display: none;
  }
  .footer-business,
  .footer-links {
    flex-direction: column;
    gap: 2px;
  }
}

/* === Legal pages (privacy, terms) === */

.legal-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.legal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 1.125rem;
}

.legal-logo-mark {
  font-size: 1.25rem;
}

.legal-logo-text {
  letter-spacing: -0.02em;
}

.legal-main {
  flex: 1;
  padding: 40px 20px 60px;
}

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.85);
}

.legal-content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 32px 0 12px 0;
  letter-spacing: -0.005em;
}

.legal-content h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 20px 0 8px 0;
}

.legal-content p {
  margin: 0 0 14px 0;
}

.legal-content ul {
  margin: 0 0 14px 0;
  padding-left: 24px;
}

.legal-content li {
  margin-bottom: 6px;
}

.legal-content a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-meta {
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.9375rem;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .legal-main {
    padding: 32px 16px 40px;
  }
  .legal-content {
    font-size: 0.9375rem;
  }
  .legal-content h1 {
    font-size: 1.625rem;
  }
  .legal-content h2 {
    font-size: 1.125rem;
  }
}

/* === Email verification gate (modal overlay) === */
/* Shown over the dimmed app for unverified users at checkout/upgrade or
   after grace messages are spent. Backend endpoints that could trigger an
   LLM call also return 403 when unverified — this is the UI side. */

.verification-required {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
}

.verification-required.hidden {
  display: none;
}

.verification-card {
  background: var(--card-bg, var(--card, #fff));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  width: 100%;
  padding: 24px;
  text-align: center;
}

.verification-card .bsd-mark {
  position: static;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.verification-card .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--accent);
}

.verification-card h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--ink);
}

.verification-card p {
  color: var(--ink);
  margin: 0.75rem 0;
  line-height: 1.5;
}

.verification-card .verification-help {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 1.5rem;
}

.verification-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.verification-actions .btn {
  width: 100%;
}

.verification-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.verification-status.success {
  color: #047857;
}

.verification-status.error {
  color: var(--danger);
}

.verification-resend-inline {
  margin-top: 0.75rem;
}

.verification-resend-inline.hidden {
  display: none;
}

.verification-signout {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Inline text-button used inside the gate's "Sign out" row (and reused
   by the standalone /verify landing page for consistency). Scoped to
   avoid clobbering the existing global .btn-link style. */
.banner-link {
  background: none;
  border: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.banner-link:hover {
  text-decoration-thickness: 2px;
}

.banner-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.verify-signout-link {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--muted-text, #666);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

.verify-signout-link:hover,
.verify-signout-link:focus {
  color: var(--main-text, #222);
}

.auth-forgot-row {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 12px;
}

.auth-forgot-link {
  font-size: 14px;
  color: var(--muted-text, #666);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.auth-forgot-link:hover {
  color: var(--main-text, #222);
}

.modal-subtle {
  color: var(--muted-text, #666);
  font-size: 14px;
  margin-bottom: 16px;
}

.success-msg {
  color: #2d7a3e;
  font-size: 14px;
  margin: 12px 0;
}

/* Standalone /reset-password page (mirrors verify flow layout) */
.verify-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

.verify-main {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.verify-main > .brand-link {
  margin-bottom: 1.5rem;
}

.verify-title {
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.verify-body-text {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

/* ===== i18n / RTL support ===== */
/* @import for Hebrew fonts lives at the top of this file — see note there. */

:root[lang="he"] {
  font-family: 'Heebo', system-ui, -apple-system, 'Arial Hebrew', sans-serif;
}

:root[lang="he"] .chat-bubble,
:root[lang="he"] .prose {
  font-family: 'Frank Ruhl Libre', 'Heebo', serif;
  line-height: 1.7;
}

.lang-toggle {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.85;
}
.lang-toggle:hover { opacity: 1; }

/* Legal pages: body stays LTR/English even inside RTL chrome */
.legal-body {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  max-width: 760px;
  margin-inline: auto;
}
.legal-body h1,
.legal-body h2,
.legal-body h3,
.legal-body p,
.legal-body li {
  text-align: left;
}

/* RTL adjustments — add overrides as found in the audit.
   Prefer migrating to logical properties over RTL-specific rules:
     margin-left  → margin-inline-start
     margin-right → margin-inline-end
     left/right   → inset-inline-start / inset-inline-end
     text-align: left → text-align: start
     border-left  → border-inline-start
*/

.chat-empty-state {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.35rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
}

/* === Mobile chavrusa chat: no horizontal pan, maximize conversation === */
@media (max-width: 640px) {
  body.logged-in:has(#screen-chat:not(.hidden)) .app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.logged-in:has(#screen-chat:not(.hidden)) .main-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.logged-in:has(#screen-chat:not(.hidden)) .wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0.65rem 1rem 0;
    overflow: hidden;
  }

  body.logged-in:has(#screen-chat:not(.hidden)) .header-row {
    flex: 0 0 auto;
  }

  #screen-chat:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #screen-chat:not(.hidden) .meta-bar {
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    padding: 4px 10px;
    position: sticky;
  }

  #screen-chat:not(.hidden) .meta-bar .meta {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    overflow: visible;
    white-space: normal;
  }

  #screen-chat:not(.hidden) .chat-card {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0.5rem;
    padding: 0.75rem 0.85rem;
  }

  #screen-chat:not(.hidden) .chat-title {
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  #screen-chat:not(.hidden) .messages {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0.65rem;
  }

  #screen-chat:not(.hidden) .composer,
  #screen-chat:not(.hidden) .preset-chips,
  #screen-chat:not(.hidden) .beyado-panel-wrap {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  body.logged-in:has(#screen-chat:not(.hidden)) .site-footer {
    flex: 0 0 auto;
    padding: 12px 16px 16px;
    font-size: 0.75rem;
  }
}

/* === Tier 3 caveat banner (post-process from chavrusa_engine.py) === */
.tier3-banner {
  font-size: 0.85em;
  color: #888;
  font-style: italic;
  margin-top: 0.75em;
  margin-bottom: 0;
}

.tier3-inline {
  display: inline-block;
  font-size: 0.7em;
  vertical-align: super;
  color: #b45309;        /* amber — caution without alarm */
  cursor: pointer;
  margin-left: 1px;
  font-weight: 600;
}
.tier3-inline:hover, .tier3-inline:focus { color: #92400e; outline: none; }

/* === Per-message copy action row === */
.msg-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
}
.msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.3rem;
  color: #999;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.msg-action-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}
.msg-action-btn.copied {
  color: #2e7d32;
}
.msg-action-btn svg {
  display: block;
}