/*
 * Cascade contract
 * 1) design tokens; 2) reset/base; 3) application layout; 4) shared controls;
 * 5) feature components; 6) state/visibility utilities; 7) responsive rules.
 * Component-specific media queries stay next to their component.
 * Breakpoints: 980px layout, 900px upload, 800px intro, 720px compact UI,
 * 700px collection fields and 640px phone layout.
 *
 * Design-token scales (single source of truth — do not hardcode new values):
 *   Radius:  --radius-xs 8 | --radius-sm 10 | --radius-md 12 | --radius-lg 16
 *            | --radius-xl 20 | --radius-2xl 22 | --radius-pill 999
 *   Control height: --control-h-sm 34 | --control-h-md 38 | --control-h-lg 44
 *   Spacing: --space-1 4 | --space-2 8 | --space-3 12 | --space-4 16
 *            | --space-5 20 | --space-6 24 | --space-8 32 | --space-10 40
 *   Motion:  --dur-fast .15s | --dur-normal .18s | --dur-slow .25s | --ease
 * Any new border-radius / control height / spacing value outside these scales
 * is a regression and must be reviewed (guarded by test_visual_consistency.py).
 */

/* 1. Design tokens */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #fafafa;
  --surface-muted: #f1f1f1;
  --surface-inverse: #182230;

  --text: #182230;
  --muted: #4b5563;
  --muted2: #6b7280;
  --success: var(--ok);

  --line: #dedede;
  --line-strong: #cfcfcf;
  --accent-dark: #464fd8;
  --accent: #5b64f0;
  --accent-soft: #eff0ff;
  --primary: var(--accent);
  --primary-soft: var(--accent-soft);
  --ok: #2bb673;
  --ok-soft: #e6f6ee;
  --warning-border: #e6a63b;
  --warning-soft: #fdf3e0;
  --danger: #e85b6a;
  --danger-strong: #c84655;
  --danger-soft: #fdecee;
  --teal: #20b7a8;
  --teal-soft: #e2f6f4;

  --shadow: 0 1px 2px rgba(17, 24, 39, .03), 0 8px 24px rgba(34, 47, 62, .05);
  --shadow-soft: 0 1px 2px rgba(17, 24, 39, .03), 0 4px 14px rgba(34, 47, 62, .04);
  --shadow-modal: 0 24px 70px rgba(15, 23, 42, 0.18);
  --focus: rgba(91, 100, 240, .18);

  /* Radius scale (single source of truth for all corner rounding).
   * The whole application uses ONE uniform corner radius (12px) for every
   * visual element — cards, panels, buttons, inputs, badges and chips alike.
   * All --radius-* tokens resolve to the same 12px value so the UI reads as a
   * single, consistent system. */
  --radius-xs: 12px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-2xl: 12px;
  --radius-pill: 12px;
  /* Backward-compatible aliases (kept for existing contract tests). */
  --radius: var(--radius-2xl);
  --radius-control: var(--radius-lg);

  /* Control-height scale (single source of truth for control heights). */
  --control-h-sm: 34px;
  --control-h-md: 38px;
  --control-h-lg: 44px;
  --button-height: 44px;
  --button-radius: 12px;
  --button-font-size: var(--font-size-md);
  --button-font-weight: 750;
  --button-icon-size: 42px;
  --control-height: var(--control-h-lg);

  /* Spacing scale (single source of truth for padding/gap). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Motion tokens (single source of truth for transitions/animations). */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .15s;
  --dur-normal: .18s;
  --dur-slow: .25s;

  /* Typography tokens (single source of truth for font family/size/color).
   * Font family: Inter (sans-serif) everywhere; monospace only for code blocks.
   * Font size: 3 sanctioned sizes (sm = helper/badge/table-header, md = body,
   *   lg = headings/card titles). Display headings (h1/h2/hero) are excluded.
   * Text color: 3 sanctioned colors (primary/secondary/tertiary). Accent and
   *   surface colors remain for links/accents and text on inverse backgrounds. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 18px;
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: var(--muted2);
}

/* 2. Reset and base */
* { box-sizing: border-box; }
button { font-family: inherit; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(720px 440px at 4% -8%, rgba(91, 100, 240, .10), transparent 68%),
    radial-gradient(680px 360px at 102% 6%, rgba(91, 100, 240, .07), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, #ffffff 48%);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(760px 420px at 8% 0%, rgba(91, 100, 240, .10), transparent 62%),
    radial-gradient(640px 360px at 100% 18%, rgba(91, 100, 240, .07), transparent 60%),
    linear-gradient(to right, rgba(222, 222, 222, .30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(222, 222, 222, .26) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, .7) 48%, transparent 100%);
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* 3. Application layout */
.app-shell {
  width: min(100vw - 28px, 1680px);
  margin: 0 auto;
  padding: 14px 0 30px;
}
.sidebar,
.status-card,
.technical-actions,
.technical-settings { display: none !important; }
.workspace { width: 100%; min-width: 0; }

h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: 40px; line-height: 1.05; margin-bottom: 8px; }
h2 { font-size: clamp(24px, 2vw, 32px); line-height: 1.1; margin-bottom: 6px; letter-spacing: -0.03em; }
h3 { font-size: var(--font-size-lg); line-height: 1.2; margin-bottom: 12px; color: var(--text-primary); }
h4 { margin: 0 0 8px; font-size: var(--font-size-lg); }
p { color: var(--text-secondary); margin-bottom: 0; }
code {
  color: var(--text-primary);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.hidden { display: none !important; }
.hint { color: var(--text-tertiary); font-size: var(--font-size-sm); line-height: 1.45; margin-top: 8px; }
.empty {
  color: var(--text-tertiary);
  border: 1px dashed var(--line-strong);
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.tiny-empty { font-size: var(--font-size-sm); padding: 10px; }

.topbar,
.panel,
.side-card,
.brand-block,
.subpanel,
.composer,
.chat-messages,
.card,
.modal-card,
.collection-op-panel,
.spending-summary > div,
.spending-chart-card,
.spending-table-wrap,
.answer-history-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.panel {
  padding: var(--space-6);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.topbar {
  position: sticky;
  top: 12px;
  z-index: 55;
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(360px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-2xl);
  margin-bottom: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.topbar-session {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.top-session-button {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  min-height: var(--button-height);
  padding: 9px 12px;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  cursor: pointer;
}
.top-session-button:hover { border-color: var(--line-strong); background: var(--surface); }
.top-balance {
  font-weight: 900;
  color: var(--text-primary);
  padding: 8px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--line);
}
.top-nav {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  flex-wrap: wrap;
}
.tab {
  position: relative;
  border: 0;
  border-radius: var(--button-radius);
  padding: 9px 12px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  font-weight: 800;
  white-space: nowrap;
}
.tab:hover { color: var(--text-primary); background: var(--surface-muted); transform: translateY(-1px); }
.tab.active { color: var(--accent-dark); background: var(--accent-soft); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.chat-settings-top-btn { justify-self: end; font-weight: var(--button-font-weight); padding: 10px 16px; }

.panel-title,
.actions,
.composer-actions,
.mini-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.panel-title {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.panel-title h2 { margin-bottom: 4px; }
.actions.compact { flex-wrap: wrap; justify-content: flex-end; }
.actions.stacked { flex-direction: column; align-items: stretch; }
.form-actions { margin-top: 16px; flex-wrap: wrap; align-self: start; }

/* 4. Controls and forms */
.btn {
  border-radius: var(--button-radius);
  min-height: var(--button-height);
  padding: 10px 16px;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  cursor: pointer;
  transition: transform .18s var(--ease), opacity .18s ease, background .18s ease, border-color .18s ease;
  color: var(--text-primary);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover { transform: translateY(-1px); opacity: .95; }
.btn:active { transform: translateY(0); }
.btn.primary {
  color: var(--surface);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(91, 100, 240, .22);
}
.btn.soft { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent-soft); }
.btn.ghost { color: var(--text-primary); background: var(--surface); border-color: var(--line); }
.btn.danger { color: var(--surface); background: var(--danger); border-color: var(--danger); }
.btn.danger-ghost { color: var(--danger); background: var(--surface); border-color: var(--danger); }
.btn.tiny {
  min-height: var(--button-height);
  padding: 10px 16px;
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
}
.btn.full { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-disabled="true"],
.btn.is-locked { opacity: .58; cursor: not-allowed; transform: none; }

.btn-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btn-spin .7s linear infinite;
  flex: 0 0 auto;
}
.btn.is-loading { opacity: .8; }
.btn.is-done {
  background: var(--ok-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.btn.primary.is-done,
.btn.danger.is-done {
  background: var(--ok);
  border-color: var(--ok);
  color: #ffffff;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@keyframes messageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.grid { display: grid; gap: 14px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 750;
}
input, select, textarea {
  width: 100%;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: 10px 13px;
  outline: none;
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91, 100, 240, .12);
  background: var(--surface);
}
input:disabled, select:disabled, textarea:disabled { opacity: .65; cursor: not-allowed; }
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
select { cursor: pointer; }
select[multiple] { min-height: 122px; padding: 8px; }
select[multiple] option { padding: 8px 9px; border-radius: var(--radius-sm); margin-bottom: 3px; }
select option:disabled { color: var(--text-tertiary); }

/* 5. Chat */
.chat-grid { display: block; min-width: 0; }
.chat-main {
  min-height: calc(100vh - 230px);
  display: grid;
  grid-template-rows: minmax(420px, 1fr) auto;
  gap: 16px;
}
.chat-mode-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  width: fit-content;
  max-width: 100%;
}
/* All text entities in the strip share one size and one height so the row
 * reads as a single unit: the plain label, the mode value and the context
 * chip align on the same baseline. */
.chat-mode-strip b { color: var(--text-primary); font-size: var(--font-size-sm); }
.chat-mode-strip > span:not(.context-chip),
.chat-mode-strip b {
  line-height: 1.4;
  padding: 5px 0;
}
.context-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  color: var(--text-primary);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.chat-mode-strip[data-mode="rag"] { border-color: var(--teal); background: var(--teal-soft); }
.chat-mode-strip[data-mode="assistant"] { border-color: var(--accent-soft); }
.chat-mode-strip[data-mode="plain"] { border-color: var(--accent); }
.chat-messages {
  overflow: auto;
  max-height: calc(100vh - 360px);
  min-height: 420px;
  padding: 18px;
  border-radius: var(--radius-2xl);
  background: var(--surface);
}
.chat-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.chat-message.user { grid-template-columns: minmax(0, 1fr) 42px; }
.chat-message.user .avatar { grid-column: 2; grid-row: 1; }
.chat-message.user .bubble {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--surface);
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-weight: 900;
  font-size: var(--font-size-sm);
}
.bubble {
  max-width: 1000px;
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  box-shadow: var(--shadow-soft);
  animation: messageIn .22s ease-out;
}
.bubble p { margin-top: 8px; }
.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble h1,
.bubble h2,
.bubble h3,
.bubble h4,
.bubble h5,
.bubble h6 {
  margin: 14px 0 8px;
  line-height: 1.3;
  font-weight: 700;
}
.bubble h1 { font-size: 1.35em; }
.bubble h2 { font-size: 1.2em; }
.bubble h3 { font-size: 1.1em; }
.bubble h4 { font-size: 1.02em; }
.bubble ul,
.bubble ol {
  margin: 8px 0;
  padding-left: 22px;
}
.bubble li { margin: 3px 0; }
.bubble blockquote {
  margin: 10px 0;
  padding: 6px 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface-muted, rgba(0, 0, 0, 0.03));
  color: var(--text-secondary);
  border-radius: 0 8px 8px 0;
}
.bubble code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-muted, rgba(0, 0, 0, 0.06));
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}
.bubble pre {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.06));
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.bubble pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.88em;
}
.bubble table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  font-size: 0.95em;
}
.bubble th,
.bubble td {
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  padding: 6px 10px;
  text-align: left;
}
.bubble th { background: var(--surface-muted, rgba(0, 0, 0, 0.04)); }
.bubble a { color: var(--accent); text-decoration: underline; }
.bubble hr {
  border: none;
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  margin: 12px 0;
}
.composer {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 16px;
  background: var(--surface);
}
.composer textarea { min-height: 120px; }
.composer-actions { justify-content: space-between; margin-top: 12px; padding-bottom: 10px; flex-wrap: wrap; }

.subpanel {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-soft);
  box-shadow: none;
}
.no-margin-top { margin-top: 0; }
.filters { margin-top: 16px; }
.chat-settings-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-height: none;
  overflow: visible;
}
.chat-settings-content [data-chat-section="prompts"],
.chat-settings-content [data-chat-section="filters"] { grid-column: 1 / -1; }
.mode-switch { display: grid; gap: 10px; }
.mode-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
}
.mode-card input { width: 18px; height: 18px; grid-row: span 2; margin: 2px 0 0; padding: 0; }
.mode-card span { font-weight: 900; }
.mode-card small { color: var(--text-secondary); line-height: 1.35; }
.mode-card.active { border-color: var(--text-primary); background: var(--surface-muted); }

.document-checkbox-list {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.document-checkbox-list.compact-picker { max-height: 150px; }
.doc-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--text-primary);
  cursor: pointer;
}
.doc-check input { width: 18px; height: 18px; padding: 0; }
.doc-check:has(input:checked) { border: 1px solid var(--line-strong); background: var(--accent-soft); }
.doc-check span { overflow-wrap: anywhere; }

/* 6. Entity cards and content */
.cards-box { display: grid; gap: 12px; margin-bottom: 14px; }
.card {
  border-radius: var(--radius);
  padding: var(--space-5);
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow), var(--shadow-soft); }
.card .text { color: var(--text-secondary); line-height: 1.5; max-height: 180px; overflow: auto; white-space: pre-wrap; }
.airy-list { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: stretch; }
.collection-cards { margin-top: 18px; }
.collection-card.active { border-color: var(--primary); }
.collection-card-head,
.assistant-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.collection-card-head h4,
.assistant-card-head h4 { font-size: var(--font-size-lg); margin-bottom: 4px; overflow-wrap: anywhere; }
.collection-card-head p,
.assistant-card-head p { font-size: var(--font-size-md); }
.assistant-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 12px; }
.assistant-card-meta span {
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  font-size: var(--font-size-sm);
}
.card .mini-actions,
.mini-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.card .mini-actions .btn { padding: 8px 10px; font-size: var(--font-size-sm); }
.collection-actions .btn { flex: 1 1 145px; }
.soft-text { color: var(--text-secondary); font-size: var(--font-size-md); line-height: 1.55; max-height: 94px; overflow: hidden; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(91, 100, 240, .06);
}
.role-badge.owner { border-color: var(--accent-soft); background: var(--accent-soft); }
.role-badge.editor { border-color: var(--accent); background: var(--accent-soft); }
.role-badge.viewer { border-color: var(--line); background: var(--surface-muted); }
.active-collection-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 750;
}
.active-collection-banner b { color: var(--text-primary); overflow-wrap: anywhere; }

.note {
  color: var(--text-secondary);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  margin-top: 14px;
  line-height: 1.45;
}
.note.warn { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

.check { flex-direction: row; align-items: center; gap: 10px; margin: 12px 0; font-weight: 650; }
.check input { width: 18px; height: 18px; padding: 0; }
.file-drop input { margin-top: 8px; }
.file-drop span {
  display: block;
  color: var(--text-tertiary);
  font-weight: 500;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface);
}

/* 7. Dialogs */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  width: min(760px, calc(100vw - 36px));
  display: grid;
  gap: 20px;
  padding: 0 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  max-height: calc(100vh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  font-family: inherit;
}
.wide-modal,
#chatSettingsModal .modal-card { width: min(980px, calc(100vw - 36px)); }
.auth-form,
.account-session { display: grid; gap: 14px; }
.login-panel { display: block; padding: 0; background: transparent; border: 0; box-shadow: none; }
.mini-kpi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.mini-kpi span { color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 750; }
.mini-kpi b { color: var(--text-primary); overflow-wrap: anywhere; }

.collection-op-panel {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.collection-modal .collection-op-panel { margin-top: 0; }
.wizard-steps { display: grid; gap: var(--space-3); }
.wizard-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}
.step-number {
  display: grid;
  place-items: center;
  align-self: start;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 900;
  cursor: help;
  box-shadow: none;
}
.step-body { min-width: 0; display: grid; gap: 12px; }
.step-body .panel-title { margin-bottom: 0; }
.compact-title { align-items: center; margin-bottom: 14px; }
.compact-title h3 { margin-bottom: 0; }
.collection-fields-list,
.custom-fields-box { display: grid; gap: 12px; }

/* 8. Tables, history and spending */
.friendly-table,
.spending-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.friendly-table th,
.friendly-table td,
.spending-table th,
.spending-table td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  color: var(--text-primary);
  line-height: 1.45;
}
.friendly-table thead th,
.friendly-table tbody th,
.spending-table th {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface-soft);
}
.friendly-table tr:last-child td,
.friendly-table tr:last-child th,
.spending-table tr:last-child td { border-bottom: 0; }
.friendly-table .table-actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 140px; }
.details-table { width: 100%; min-width: 600px; margin-top: 8px; table-layout: fixed; }
.details-table th,
.details-table td { font-size: var(--font-size-sm); padding: 8px 10px; }

.result-panel { margin-top: 20px; position: relative; z-index: 1; }
.answer-box,
.billing-box { display: none; }
.answer-history-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; min-width: 0; }
.answer-history-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: none;
}
.answer-history-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.history-question {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.history-question b,
.history-answer b { color: var(--text-primary); }
.history-answer {
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}
.chunks-details { width: 100%; min-width: 0; }
.chunks-details summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--text-primary);
  user-select: none;
}
.history-chunks-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; width: 100%; max-width: none; min-width: 0; }
.history-chunk-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 15px 16px;
  background: var(--surface-soft);
}
.history-chunk-meta { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-bottom: 8px; }
.history-chunk-meta b,
.history-chunk-meta span,
.history-chunk-text { overflow-wrap: anywhere; word-break: break-word; }
.history-chunk-meta span,
.history-chunk-text { color: var(--text-tertiary); font-size: var(--font-size-sm); line-height: 1.45; }
.history-chunk-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
  font-size: var(--font-size-md);
  line-height: 1.62;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.history-chunk-card .btn { margin-top: 10px; }
.history-search-replay {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}
.history-search-replay-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 900;
  cursor: help;
}

.spending-filters { margin-bottom: 16px; }
.spending-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.spending-summary > div,
.spending-chart-card,
.spending-table-wrap { border-radius: var(--radius-2xl); padding: 18px; box-shadow: none; }
.spending-summary b { display: block; font-size: var(--font-size-lg); margin-top: 4px; }
.spending-chart {
  min-height: 190px;
  display: flex;
  gap: 12px;
  align-items: end;
  overflow-x: auto;
  padding-top: 10px;
}
.chart-day { min-width: 86px; display: grid; gap: 8px; justify-items: center; color: var(--text-secondary); font-size: var(--font-size-sm); }
.chart-bar-wrap {
  height: 126px;
  width: 36px;
  display: flex;
  align-items: end;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  overflow: hidden;
}
.chart-bar { width: 100%; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: linear-gradient(180deg, var(--accent-dark), var(--primary)); }
.chart-day b { color: var(--text-primary); font-size: var(--font-size-sm); text-align: center; }
.spending-table-wrap { overflow-x: auto; margin-top: 16px; }
.spending-table { min-width: 760px; border-collapse: collapse; }
.money-cell { white-space: nowrap; font-weight: 800; }
.spending-details { margin-top: 8px; color: var(--text-secondary); }
.spending-details summary { cursor: pointer; font-weight: 800; color: var(--text-primary); }

/* 9. Feedback */
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 44px));
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: border-radius var(--dur-fast) ease, max-width var(--dur-fast) ease;
}
.toast:focus-visible { box-shadow: 0 0 0 3px rgba(91,100,240,.25), var(--shadow); }
.toast-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.toast-details {
  display: none;
  min-width: 0;
  font-size: var(--font-size-md);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.toast:hover .toast-details,
.toast:focus .toast-details,
.toast:focus-within .toast-details {
  display: block;
}
.toast:hover,
.toast:focus,
.toast:focus-within {
  border-radius: var(--radius-lg);
}
/* Success (default) */
.toast .toast-icon { background: var(--success); }
.toast .toast-icon::before { content: "✓"; }
/* Warning */
.toast.warn { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.toast.warn .toast-icon { background: var(--accent); }
.toast.warn .toast-icon::before { content: "!"; }

.result-focus-flash { animation: resultFocusFlash 1.6s ease-out; }
@keyframes resultFocusFlash {
  0% { box-shadow: 0 0 0 0 rgba(91, 100, 240, .28), var(--shadow); border-color: var(--primary); }
  100% { box-shadow: var(--shadow); border-color: var(--line); }
}

/* 10. Responsive base */
@media (max-width: 980px) {
  .app-shell { width: min(100vw - 18px, 1680px); }
  .topbar { grid-template-columns: 1fr; align-items: stretch; }
  .topbar-session,
  .top-nav,
  .chat-settings-top-btn { justify-self: stretch; }
  .top-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .chat-settings-top-btn { width: 100%; }
  .chat-settings-content { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .spending-summary { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar-session { flex-wrap: wrap; }
  .top-session-button { max-width: 100%; }
  .top-nav .tab { padding: 8px 10px; }
  .panel-title { flex-direction: column; }
  .actions.compact { justify-content: flex-start; }
  .side-nav,
  .cols-2,
  .cols-3 { grid-template-columns: 1fr; }
  .wizard-step { grid-template-columns: 1fr; padding: 16px; }
  .chat-message,
  .chat-message.user { grid-template-columns: 36px minmax(0, 1fr); }
  .chat-message.user .avatar { grid-column: 1; }
  .chat-message.user .bubble { grid-column: 2; justify-self: stretch; }
  .avatar { width: 36px; height: 36px; }
  .details-table { min-width: 0; }
}

/* 11. Collection and document selection */
.chunk-search-params { margin-bottom: 16px; }
.chunk-documents-block {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.chunk-documents-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.chunk-documents-head h4 { margin: 0 0 3px; }
.document-checkbox-list.document-card-picker {
  width: 100%;
  max-height: 360px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
  padding: 12px;
}
.document-card-picker .doc-check {
  min-height: 64px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.document-card-picker .doc-check:hover { border-color: var(--line-strong); }
.document-card-picker .doc-check:has(input:checked) { background: var(--accent-soft); }
@media (max-width: 720px) {
  .document-checkbox-list.document-card-picker { grid-template-columns: 1fr; }
  .chunk-documents-head { align-items: flex-start; flex-direction: column; }
}

.recent-chats { position: relative; }
.recent-chats-trigger {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  border: 1px solid var(--line);
  background: var(--primary-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.recent-chats-trigger:hover, .recent-chats-trigger:focus-visible { background: var(--accent-soft); outline: none; }
.recent-chats-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  right: 0;
  width: min(420px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast) ease;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  overflow: hidden;
}
.recent-chats.open .recent-chats-popover { opacity: 1; visibility: visible; transform: translateY(0); }
.recent-chats-title { font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.recent-chats-list { display: grid; gap: 7px; }
.recent-chat-item { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); text-align: left; cursor: pointer; font: inherit; }
.recent-chat-context { font-size: var(--font-size-sm); font-weight: 800; color: var(--text-primary); margin-bottom: 3px; }
.recent-chat-question { font-size: var(--font-size-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-chat-empty { padding: 10px; color: var(--text-secondary); text-align: center; }
@media (max-width: 720px) { .recent-chats-popover { left: 0; right: auto; } }

.new-chat-trigger {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  min-width: var(--control-h-sm);
  min-height: var(--control-h-sm);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--button-font-weight);
  line-height: 1;
  cursor: pointer;
}
.new-chat-trigger:hover, .new-chat-trigger:focus-visible { background: var(--accent-soft); outline: none; }
.recent-chat-item:hover, .recent-chat-item:focus-visible { border-color: var(--accent-soft); background: var(--primary-soft); outline: none; }


.assistant-empty-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.mode-card.disabled {
  opacity: .55;
  cursor: not-allowed;
}
.mode-card.disabled input { cursor: not-allowed; }
@media (max-width: 720px) {
  .assistant-empty-hint { align-items: flex-start; flex-direction: column; }
}


/* 12. Chat documents */
.chat-documents-list { display: grid; gap: .65rem; margin-top: .8rem; }
.chat-document-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  padding: .8rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.chat-document-main { min-width:0; flex:1; display:grid; gap:.3rem; }
.chat-document-main b { overflow-wrap:anywhere; }
.chat-document-status { color: var(--text-secondary); }
.chat-document-error { color:var(--accent); }
.chat-document-progress { height:6px; border-radius:var(--radius-pill); overflow:hidden; background:rgba(127,127,127,.18); }
.chat-document-progress span { display:block; height:100%; background:currentColor; transition:width var(--dur-slow) ease; }
.status-ready .chat-document-progress { color:var(--accent-dark); }
.status-failed .chat-document-progress,.status-expired .chat-document-progress { color:var(--accent); }
.chat-document-remove {
  display: grid;
  place-items: center;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--accent);
  font: 400 22px/1 var(--font-sans);
  cursor: pointer;
}
@media (max-width: 640px) { .chat-document-card { flex-direction:column; } .chat-document-remove { width:100%; } }


/* Chat composer and document upload */
.sr-only,
.native-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.composer-input-row { display:flex; align-items:flex-end; gap:10px; }
.composer-question { flex:1; margin:0; }
.composer-question textarea { min-height:72px; resize:vertical; border-radius:var(--radius-lg); }
.composer-attach {
  display: grid;
  place-items: center;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: var(--surface-soft);
  cursor: pointer;
  font-size: var(--font-size-lg);
}
.composer-attach:hover,.composer-attach:focus-visible { border-color:var(--line-strong); background:var(--accent-soft); outline:none; }
.composer-attach:disabled { opacity:.55; cursor:wait; }
.composer-submit-group { display:flex; align-items:center; gap:9px; margin-left:auto; }
.composer-model { position: relative; display: flex; align-items: center; gap: 7px; min-width: 190px; margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 700; }
.composer-model select { width:auto; min-width:150px; max-width:240px; height:var(--control-h-md); padding:7px 30px 7px 10px; border-radius:var(--radius-md); font-size:var(--font-size-sm); background:var(--accent-soft); }
.composer-documents { margin:0 0 10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.composer-documents .chat-document-card { padding:.65rem .75rem; box-shadow:none; background:var(--accent-soft); }
.chat-drop-overlay { position:absolute; inset:0; z-index:15; display:grid; place-items:center; border:2px dashed var(--accent); border-radius:var(--radius-2xl); background:var(--accent-soft); color:var(--accent); font-size:var(--font-size-md); font-weight:800; text-align:center; padding:24px; }
@media (max-width: 720px) {
  .composer-actions { align-items: stretch; }
  .composer-submit-group { width: 100%; margin-left: 0; }
  .composer-model { flex: 1; min-width: 0; }
  .composer-model select { min-width: 0; width: 100%; }
  .composer-submit-group .btn { flex: 0 0 auto; }
}

/* Model picker */
.model-picker-trigger {
  width: 100%; min-height: var(--button-height); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--accent-soft); border-radius: var(--radius-md); background: var(--accent-soft);
  color: var(--text-primary); font: inherit; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer;
}
.model-picker-trigger:hover,.model-picker-trigger:focus-visible { background:var(--accent-soft); border-color:var(--accent); outline:none; }
.model-picker-menu {
  position:absolute; right:0; bottom:calc(100% + 8px); z-index:90; width:min(360px,calc(100vw - 24px));
  max-height:min(420px,60vh); overflow:auto; display:none; padding:7px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft); box-sizing:border-box;
}
.composer-model.open .model-picker-menu { display:grid; gap:5px; }
.model-picker-option { position:relative; display:grid; gap:4px; width:100%; min-width:0; padding:10px 34px 10px 11px; border:0; border-radius:var(--radius-md); background:transparent; text-align:left; font:inherit; cursor:pointer; }
.model-picker-option:hover,.model-picker-option:focus-visible { background:var(--accent-soft); outline:none; }
.model-picker-option[aria-selected="true"] { background:var(--accent-soft); }
.model-picker-option-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--font-size-sm); font-weight:800; color:var(--text-primary); }
.model-picker-option-details { font-size:var(--font-size-sm); line-height:1.45; color:var(--text-secondary); }
.model-picker-check { position:absolute; right:12px; top:11px; color:var(--accent); font-weight:900; }

/* Document processing states */
.chat-document-indicator { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:var(--radius-pill); font-size:var(--font-size-sm); font-weight:900; }
.chat-document-indicator.is-loading { border:2px solid var(--accent-soft); border-top-color:var(--accent); animation:chat-document-spin .8s linear infinite; }
.chat-document-indicator.is-ready { background:var(--accent-soft); color:var(--accent-dark); }
.chat-document-indicator.is-failed { background:var(--accent-soft); color:var(--accent); }
@keyframes chat-document-spin { to { transform:rotate(360deg); } }
.chat-document-remove:hover,.chat-document-remove:focus-visible { background:var(--accent-soft); color:var(--accent); outline:none; }

/* Recent chats overflow contract */
.recent-chats,.recent-chats-list,.recent-chat-item { min-width:0; max-width:100%; box-sizing:border-box; }
.recent-chat-context,.recent-chat-question { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:720px) {
  .model-picker-menu { position:fixed; left:12px; right:12px; bottom:76px; width:auto; }
  .chat-document-card { flex-direction:row; }
  .chat-document-remove { width:32px; }
  .recent-chats-popover { left:auto; right:0; width:min(420px,calc(100vw - 24px)); }
}

.guest-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: auto;
  margin: 12px 18px 0;
  padding: 10px 14px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}


/* Shared utility components */
.title-with-info{display:flex;align-items:center;gap:10px}.icon-btn{width:var(--button-icon-size);height:var(--button-icon-size);border:1px solid var(--line);border-radius:var(--button-radius);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);cursor:pointer}.info-icon{font-family:inherit;font-weight:var(--button-font-weight);font-size:var(--font-size-md)}.upload-status{margin-top:10px;padding:10px 12px;border:1px solid var(--accent-soft);border-radius:var(--radius-sm);background:var(--accent-soft)}.upload-status-line{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:var(--font-size-sm)}.upload-status progress{width:100%;height:8px}.email-suggestions{border:1px solid var(--accent-soft);border-radius:var(--radius-sm);background:#fff;margin-top:6px;max-height:180px;overflow:auto}.email-suggestions button{display:block;width:100%;padding:9px 12px;border:0;background:#fff;text-align:left;cursor:pointer}.email-suggestions button:hover{background:var(--accent-soft)}.info-content p { margin: 0 0 12px; line-height: 1.5; }.wizard-step,.side-card,.panel,.collection-card,.assistant-card{box-sizing:border-box}

/* Guest session
 * The guest-mode badge, the guest-limit badge and the auth button sit on the
 * same row, so they share one border style and one block height (compact
 * control height) to read as a single unit. */
.guest-mode-badge,.guest-limit-badge{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-h-sm);padding:0 12px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:700}
.guest-mode-badge{background:var(--accent-soft);border:1px solid var(--line);color:var(--accent-dark)}
.guest-limit-badge{background:var(--accent-soft);border:1px solid var(--line);color:var(--accent-dark)}
.guest-auth-actions,.registered-session{display:flex;align-items:center;gap:8px}
.guest-auth-actions .btn{min-height:var(--control-h-sm);border:1px solid var(--line);background:var(--accent-soft);color:var(--accent-dark)}
.guest-auth-actions .btn:hover{background:var(--accent-soft);border-color:var(--accent)}
.guest-notice { margin: 16px 18px 18px; clear: both; position: relative; z-index: 0; }
#query{margin-top:0}
@media (max-width: 720px) {
  .guest-auth-actions { width: 100%; }
  .guest-auth-actions .btn { flex: 1; }
  .guest-notice { margin: 12px 12px 16px; }
}

.upload-mode-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.upload-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.upload-mode-switch label.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.upload-mode-switch label.is-disabled input { pointer-events: none; }
.upload-mode-switch label {
  min-height: var(--control-h-md);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
}
.upload-mode-switch label.active {
  background: var(--surface);
  color: var(--accent-dark);
  box-shadow: 0 5px 14px rgba(15,23,42,.08);
}
.upload-mode-switch input { position: absolute; opacity: 0; pointer-events: none; }
.field-label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.chat-config .actions.stacked {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.upload-method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.upload-method-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}
.upload-method-card h4 { margin: 4px 0 0; }
.custom-fields-box { padding-top: 12px; border-top: 1px solid var(--line); }
.upload-custom-field-row {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(160px, 1.2fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}
.upload-method-card .form-actions { margin-top: auto; padding-top: 4px; }
@media (max-width: 900px) {
  .upload-mode-toolbar { align-items: stretch; flex-direction: column; }
  .upload-mode-switch { width: 100%; }
  .upload-method-grid { grid-template-columns: 1fr; }
  .upload-custom-field-row { grid-template-columns: 1fr; }
  .upload-custom-field-row .btn { justify-self: start; }
}


/* Collection and assistant search */
.list-search { display: inline-flex; align-items: center; gap: 8px; }
.search-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-toggle.active { background: var(--surface-muted); border-color: var(--line-strong); }
.list-search-field { width: min(230px, 34vw); }
.list-search-field input { width: 100%; height: var(--control-h-md); padding: 8px 12px; border-radius: var(--radius-sm); }
.collection-title-actions, .assistant-title-actions { align-items: center; }
@media (max-width: 720px) {
  .list-search { width: 100%; }
  .list-search-field { flex: 1; width: auto; }
}
.upload-status.is-success{border-color:var(--accent-soft);background:var(--accent-soft)}.upload-status.is-error{border-color:var(--accent-soft);background:var(--accent-soft)}.upload-status.is-success progress{accent-color:var(--accent-dark)}.upload-status.is-error progress{accent-color:var(--accent)}

/* Audio upload two-step editor */
.audio-editor-step { display: flex; flex-direction: column; gap: 12px; }
.audio-editor-step textarea { min-height: 180px; resize: vertical; }
.audio-billing-box {
  padding: 10px 12px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.audio-billing-box b { color: var(--accent-dark); }


/* Product introduction dialog */
.topbar-help-group{display:flex;align-items:center;justify-self:end;gap:10px}
.top-info-button{width:var(--button-height);height:var(--button-height);border-radius:var(--button-radius);border:1px solid var(--line-strong);background:#fff;color:var(--primary);font-family:inherit;font-size:var(--font-size-lg);font-weight:var(--button-font-weight);line-height:1;cursor:pointer;display:grid;place-items:center;transition:.18s ease;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.top-info-button:hover{transform:translateY(-1px);border-color:var(--primary);background:var(--surface-soft)}
.admin-cabinet-link{display:inline-flex;align-items:center;height:var(--button-height);padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--button-radius);background:#fff;color:var(--primary);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--button-font-weight);line-height:1;text-decoration:none;cursor:pointer;transition:.18s ease;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.admin-cabinet-link:hover{transform:translateY(-1px);border-color:var(--primary);background:var(--surface-soft)}
.product-intro-card{width:min(900px,calc(100vw - 36px));padding:0;overflow:hidden;gap:0;background:#fff}
.product-intro-head{padding:var(--space-6) 26px 18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--accent-soft) 0%,#fff 65%)}
.product-intro-head h3{margin:5px 0 0;font-size:var(--font-size-lg)}
.product-kicker,.intro-slide-label{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--primary);font-weight:900}
.product-intro-stage{min-height:430px;padding:var(--space-10) var(--space-8) var(--space-6)}
.product-intro-slide{display:none;animation:introFade .22s ease}
.product-intro-slide.active{display:block}
.product-intro-slide h4{font-size:var(--font-size-lg);line-height:1.16;margin:10px 0 14px;max-width:720px}
.product-intro-slide>p{font-size:var(--font-size-md);line-height:1.6;color:var(--text-secondary);max-width:760px}
.intro-hero-mark{width:66px;height:66px;border-radius:var(--radius-xl);background:linear-gradient(145deg,var(--primary),var(--accent-dark));color:#fff;display:grid;place-items:center;font-size:var(--font-size-lg);font-weight:950;box-shadow:0 14px 30px rgba(91,100,240,.22)}
.intro-feature-grid,.intro-audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.intro-feature-grid>div,.intro-audience-grid>div{padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-soft);display:grid;gap:6px}
.intro-feature-grid b,.intro-audience-grid b{font-size:var(--font-size-md)}.intro-feature-grid span,.intro-audience-grid span{color:var(--text-secondary);line-height:1.45}
.intro-points{display:grid;gap:12px;margin-top:22px}.intro-points>div{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line)}
.intro-points>div>span{color:var(--primary);font-weight:950}.intro-points p{margin:0;line-height:1.5;color:var(--text-secondary)}.intro-points b{color:var(--text-primary)}
.intro-mode-card{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px;border-radius:var(--radius-2xl);margin-top:24px;border:1px solid var(--line)}
.intro-mode-card.guest{background:var(--accent-soft)}.intro-mode-card.registered{background:var(--accent-soft);border-color:var(--accent-soft)}
.intro-mode-icon{width:58px;height:58px;border-radius:var(--radius-lg);display:grid;place-items:center;font-size:var(--font-size-lg);font-weight:950;background:#fff;border:1px solid var(--line)}
.intro-mode-card.registered .intro-mode-icon{background:var(--primary);color:#fff;border-color:var(--primary)}
.intro-mode-card ul{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--text-secondary);line-height:1.4}
.intro-note { margin-top: 16px; padding: 13px 15px; border: 1px solid var(--accent-soft); border-radius: var(--radius-md); background: var(--accent-soft); font-size: var(--font-size-md); }
.intro-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}.intro-steps>div{position:relative;padding:19px 18px 18px 56px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-soft);min-height:116px}.intro-steps>div>span{position:absolute;left:16px;top:17px;width:28px;height:28px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900}.intro-steps p{margin:7px 0 0;color:var(--text-secondary);line-height:1.4}
.intro-final-note{margin-top:18px;padding:16px 18px;border-radius:var(--radius-lg);background:var(--accent-dark);color:#fff;display:flex;justify-content:space-between;gap:15px;align-items:center}.intro-final-note span{color:var(--accent-soft)}
.product-intro-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;border-top:1px solid var(--line);background:var(--accent-soft)}.intro-progress{display:flex;gap:7px}.intro-progress button{width:8px;height:8px;border:0;padding:0;border-radius:var(--radius-pill);background:var(--accent-soft);cursor:pointer;transition:var(--dur-normal)}.intro-progress button.active{width:28px;background:var(--primary)}.intro-navigation{display:flex;gap:10px}
@keyframes introFade{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:800px){.topbar-help-group{justify-self:stretch}.topbar-help-group .chat-settings-top-btn{flex:1}.product-intro-stage{padding:24px 20px;min-height:470px}.product-intro-slide h4{font-size:23px}.intro-feature-grid,.intro-audience-grid,.intro-steps{grid-template-columns:1fr}.intro-mode-card{grid-template-columns:1fr}.intro-final-note{align-items:flex-start;flex-direction:column}.product-intro-footer{align-items:flex-start;flex-direction:column}.intro-navigation{width:100%}.intro-navigation .btn{flex:1}}

/* Authentication and password recovery */
.auth-modal-card { width: min(600px, 100%); }
.auth-step { display: grid; gap: 14px; }
.auth-step-heading { display: grid; gap: 5px; }
.auth-step-heading h2 { margin: 0; font-size: var(--font-size-lg); }
.auth-step-heading p { margin: 0; }
.auth-primary-actions { align-items: stretch; }
.auth-primary-actions .btn { flex: 1; }
.auth-link-button {
  width: fit-content;
  justify-self: start;
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 800;
  cursor: pointer;
}
.auth-link-button:hover,
.auth-link-button:focus-visible { text-decoration: underline; outline: none; }
.auth-timer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.auth-timer-grid > div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.auth-timer-grid span { color: var(--text-tertiary); font-size: var(--font-size-sm); font-weight: 750; }
.auth-timer-grid b { font-variant-numeric: tabular-nums; }
#loginVerificationCode,
#passwordVerificationCode {
  text-align: center;
  letter-spacing: .28em;
  font-size: var(--font-size-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.auth-password-meta { display: flex; justify-content: flex-end; color: var(--text-tertiary); font-size: var(--font-size-sm); font-weight: 750; }
.auth-message.warn { border-color: var(--accent-soft); background: var(--danger-soft); color: var(--danger); }
@media (max-width: 640px) {
  .auth-primary-actions { flex-direction: column; }
  .auth-timer-grid { grid-template-columns: 1fr; }
}

/* Access management */
.access-list { position: relative; margin-top: 16px; overflow-x: auto; scrollbar-width: thin; }
.access-table { width: 100%; min-width: 680px; }
.access-table select { min-width: 170px; }
.access-table td:last-child { width: 110px; text-align: right; }
.access-conflict {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: rgba(91,100,240,.10);
  color: var(--text-secondary);
  line-height: 1.45;
}
.access-conflict p { margin: 0 0 10px; }
.verified-user b { display: inline-flex; align-items: center; gap: 6px; }
.verified-check {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-dark);
  color: var(--surface);
  font-size: var(--font-size-sm);
  line-height: 1;
}
.query-debug-box { width: 100%; max-width: none; margin: 12px 0 16px; padding: 0; overflow-x: auto; border: 0; background: transparent; }

.role-badge.admin {
  font-weight: 700;
  border-style: solid;
}


/* Accessibility, validation and overflow safeguards */
body.modal-open { overflow: hidden; }
body.is-busy { cursor: progress; }

:where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(91,100,240,.35);
  outline-offset: 2px;
}

.btn.tiny,
.icon-btn,
.top-info-button {
  min-width: var(--button-height);
  min-height: var(--button-height);
}


.collection-card,
.assistant-card,
.collection-card-head,
.assistant-card-head,
.collection-card-head > div,
.assistant-card-head > div {
  min-width: 0;
  max-width: 100%;
}
.collection-card-head h4,
.collection-card-head p,
.assistant-card-head h4,
.assistant-card-head p,
.assistant-card-meta,
.soft-text,
.card .text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#chatSettingsModal .modal-card { overflow-y: auto; }
#chatSettingsModal .chat-settings-content { max-height: none; overflow: visible; }

.field-error {
  margin-top: 2px;
  color: var(--danger);
  font-size: var(--font-size-sm);
  font-weight: 750;
  line-height: 1.4;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(91,100,240,.12);
}

.step-help {
  margin: -8px 0 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.step-number:focus-visible { outline-color: rgba(255,255,255,.9); box-shadow: 0 0 0 4px rgba(91,100,240,.25); }

.file-drop { cursor: pointer; }
.file-drop-label { color: var(--text-primary); font-size: var(--font-size-sm); font-weight: 750; }
.file-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.file-drop:hover .file-picker-row,
.file-drop:focus-within .file-picker-row { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,100,240,.08); }
.file-picker-button { flex: 0 0 auto; pointer-events: none; }
.file-name-hint { min-width: 0; color: var(--text-tertiary); font-weight: 500; overflow-wrap: anywhere; }
.file-drop > span { border: 0; padding: 0; background: transparent; }

.toast.error { border-color: var(--accent-soft); background: var(--danger-soft); color: var(--danger-strong); }
.toast.error .toast-icon { background: var(--danger); }
.toast.error .toast-icon::before { content: "✕"; }

.scrollable-tabs {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior-x: contain;
}
.scrollable-tabs::-webkit-scrollbar { height: 5px; }
.scrollable-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-md); }
@media (max-width: 980px) {
  .scrollable-tabs.is-scrollable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
    padding-right: 30px;
  }
}

.access-table th:last-child,
.access-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -10px 0 14px -14px rgba(15,23,42,.8);
}
.access-table thead th:last-child { background: var(--surface-soft); z-index: 3; }

.guest-banner-text { flex: 1 1 auto; min-width: 0; }
.guest-banner-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  padding: 2px 0;
}

@media (max-width: 640px) {
  .app-shell { width: calc(100vw - 12px); padding-top: 6px; }
  .topbar { top: 6px; gap: 9px; padding: 10px; border-radius: var(--radius-lg); }
  .topbar-help-group { gap: 8px; }
  .panel { padding: 14px; border-radius: var(--radius-lg); }
  .modal { padding: 8px; align-items: center; }
  .modal-card { width: 100%; max-height: calc(100dvh - 16px); padding: 16px; border-radius: var(--radius-lg); }
  .wide-modal,
  #chatSettingsModal .modal-card { width: 100%; }
  .modal-head { flex-direction: row; gap: 10px; }
  .file-picker-row { align-items: stretch; flex-direction: column; }
  .file-picker-button { width: 100%; }
  .access-list::before {
    content: 'Прокрутите таблицу вправо, чтобы увидеть действия';
    display: block;
    margin-bottom: 8px;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
  }
  .guest-banner { align-items: flex-start; }
  .guest-banner-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .guest-banner.expanded .guest-banner-text { display: block; overflow: visible; }
  .guest-banner-toggle { display: inline-flex; flex: 0 0 auto; }
  .chat-mode-strip { width: 100%; border-radius: var(--radius-lg); }
}

/* Collection custom attributes */
.collection-fields-list { display: grid; gap: 12px; }
.collection-field-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.collection-field-editor-row:last-child { border-bottom: 0; padding-bottom: 0; }
.collection-field-editor-row > label:first-child { grid-column: 1 / -1; }
.collection-field-editor-row .check { grid-column: 1; margin: 0; }
.custom-attribute-filters { display: grid; gap: 12px; margin-top: 14px; }
.custom-attribute-filter { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 12px; }
.custom-attribute-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.custom-attribute-filter-head b { overflow-wrap: anywhere; }
.custom-attribute-filter .document-checkbox-list { margin-top: 0; }
.custom-fields-summary { color: var(--text-secondary); font-size: var(--font-size-sm); }
@media (max-width: 700px) {
  .collection-field-editor-row { grid-template-columns: 1fr auto; }
  .collection-field-editor-row .btn { justify-self: end; }
}

/* Icon controls and retention warnings */
.ui-icon-button {
  position: relative;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  padding: 0;
  border-radius: var(--button-radius);
  flex: 0 0 var(--button-icon-size);
  line-height: 1;
}
.ui-icon-button svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.ui-icon-button.btn.primary,
.ui-icon-button.btn.danger { box-shadow: none; }
.ui-icon-button.icon-btn { display: inline-flex; }
.icon-action-row { gap: 8px; align-items: center; }
.collection-actions.icon-action-row .btn,
.card .mini-actions.icon-action-row .btn { flex: 0 0 var(--button-icon-size); padding: 0; font-size: inherit; }

.ui-floating-tooltip {
  position: fixed;
  z-index: 10050;
  width: max-content;
  max-width: min(320px, calc(100vw - 20px));
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--surface);
  font-size: var(--font-size-sm);
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
}

.tab-retention-badge {
  position: absolute;
  top: -6px;
  right: -5px;
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--surface);
  font-size: var(--font-size-sm);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(91,100,240,.22);
}
.tab.active .tab-retention-badge { border-color: var(--text-primary); }
.entity-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.entity-title-line h4 { margin: 0; min-width: 0; }
.retention-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--font-size-sm);
  font-weight: 850;
  white-space: nowrap;
  cursor: help;
}
.retention-badge.urgent {
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  color: var(--accent);
}
.retention-warning-card { border-color: var(--accent-soft); }
.retention-warning-card:hover { border-color: var(--accent); }

/* Unified modal layout */
.modal-card.wide-modal,
.collection-modal-card { width: min(980px, calc(100vw - 36px)); }
.modal-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 -22px 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
}
.modal-head h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.25;
  letter-spacing: -.015em;
}
.modal-head-content { min-width: 0; flex: 1 1 auto; }
.modal-head-actions {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-left: auto;
  flex: 0 0 auto;
}
.modal-head-actions > .modal-close-button,
.modal-help-button {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  flex-basis: var(--button-icon-size);
  border-radius: var(--button-radius);
  color: var(--text-secondary);
  background: var(--surface-soft);
}
.modal-close-button span { transform: translateY(-1px); }
.modal-head-actions > .btn:hover,
.modal-help-button:hover { color: var(--text-primary); background: var(--surface-muted); opacity: 1; }
.modal-context-line {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.modal-help-source { display: none !important; }
.modal-help-popover {
  position: absolute;
  top: 72px;
  right: 22px;
  z-index: 3;
  width: min(520px, 100%);
  max-height: min(360px, calc(100vh - 120px));
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .12);
}
.modal-help-popover b { display: block; margin-bottom: 8px; font-size: var(--font-size-sm); }
.modal-help-popover ul,
.section-help-content ul { margin: 0; padding-left: 19px; color: var(--text-secondary); }
.modal-help-popover li,
.section-help-content li { margin: 5px 0; line-height: 1.45; }

.step-body h3 { margin: 0; font-size: var(--font-size-md); }
.modal .grid { gap: 12px; }
.modal label { gap: 7px; font-size: var(--font-size-sm); }
.modal input,
.modal select,
.modal textarea { border-radius: var(--radius-md); }
.modal .form-actions {
  justify-content: flex-end;
  width: 100%;
  margin-top: 14px;
}
.modal .panel-title.compact-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.modal .note,
.modal .upload-method-card,
.modal .access-conflict {
  border-radius: var(--radius-md);
  box-shadow: none;
}
.compact-help-modal { width: min(560px, calc(100vw - 36px)); }
.section-help-content { font-size: var(--font-size-md); }

/* History details and chunk text */
.query-debug-box .history-search-replay-head { margin: 14px 0 8px; }
.details-table th { width: 230px; }
.details-table td,
.query-detail-value { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.history-chunks-list,
.history-chunk-card,
.history-chunk-text { width: 100%; max-width: none; min-width: 0; }
.history-chunk-card .ui-icon-button { margin-top: 12px; }

@media (max-width: 720px) {
  .modal { padding: 8px; align-items: flex-end; }
  .modal-card,
  .modal-card.wide-modal,
  .collection-modal-card { width: 100%; max-height: calc(100dvh - 16px); padding: 0 15px 18px; border-radius: var(--radius-lg); }
  .modal-head { margin: 0 -15px 16px; padding: 15px; }
  .modal-head h3 { font-size: var(--font-size-lg); }
  .wizard-step { grid-template-columns: 1fr; padding: 14px; }
  .step-number { display: none; }
  .details-table { min-width: 520px; }
  .entity-title-line { align-items: flex-start; }
}

@media (max-width: 720px) {
  .modal-help-popover {
    position: absolute;
    top: 66px;
    right: 15px;
    left: 15px;
    width: auto;
    max-height: min(320px, calc(100dvh - 100px));
  }
}


/* Shared control and guest-access contracts */
.tab,
.model-picker-trigger,
.auth-link-button,
.guest-banner-toggle,
.top-session-button {
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  border-radius: var(--button-radius);
}
.model-picker-trigger,
.auth-link-button,
.guest-banner-toggle,
.top-session-button {
  min-height: var(--button-height);
}
.model-picker-option,
.recent-chat-item {
  border-radius: var(--button-radius);
  font-family: inherit;
}
.icon-btn,
.top-info-button,
.composer-attach,
.chat-document-remove,
.guest-banner-close {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  flex-basis: var(--button-icon-size);
  border-radius: var(--button-radius);
  font-family: inherit;
}
.guest-banner-close {
  flex: 0 0 var(--button-icon-size);
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-dark);
  font-size: var(--font-size-lg);
  cursor: pointer;
}
.guest-banner-close:hover { background: rgba(91,100,240,.08); }
.registered-only-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
}
.registered-only-notice h3 { margin: 0 0 5px; font-size: var(--font-size-md); }
.registered-only-notice p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); max-width: 760px; }
.is-locked { filter: grayscale(.15); }
@media (max-width: 640px) {
  .registered-only-notice { align-items: stretch; flex-direction: column; }
  .registered-only-notice .btn { width: 100%; }
}


/* 8. Payments and legal footer */
.account-balance-kpi { gap: 9px; }
.account-balance-kpi .btn { align-self: flex-start; }
.account-topup {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}
.account-topup-head,
.account-topup-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.account-topup-head h3,
.account-topup-history-head h3 { margin-bottom: 4px; }
.account-topup-head p { font-size: var(--font-size-sm); line-height: 1.5; }
.text-link { color: var(--accent-dark); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.topup-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.topup-consent,
.topup-tax-note { font-size: var(--font-size-sm); line-height: 1.55; color: var(--text-tertiary); }
.topup-consent a { color: var(--accent-dark); }
.note.ok-note { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.account-topup-history { display: grid; gap: 10px; padding-top: 4px; }
.topup-history-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.topup-history-table { min-width: 560px; }
.topup-history-table th:last-child,
.topup-history-table td:last-child { text-align: right; }
.topup-status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft); font-size: var(--font-size-sm); font-weight: 800; }
.topup-status-succeeded { border-color: var(--accent); background: var(--accent-soft); }
.topup-status-canceled,
.topup-status-provider_error { border-color: var(--line-strong); background: var(--surface-muted); }
.topup-history-action { white-space: nowrap; }
.account-danger-actions { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.app-legal-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: min(100vw - 28px, 1680px);
  margin: 4px auto 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.app-legal-footer > div { display: grid; gap: 3px; }
.app-legal-footer b { color: var(--text-primary); font-size: var(--font-size-md); }
.app-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; }
.app-legal-footer a { color: var(--accent-dark); font-weight: 750; }
@media(max-width:720px) {
  .account-topup-head,
  .account-topup-history-head,
  .app-legal-footer { flex-direction: column; }
  .app-legal-footer nav { justify-content: flex-start; }
}