/* ==========================================================================
   Combined Platform — additive IA styling.
   Loaded AFTER styles/main.css. Contains ONLY the new information-architecture
   components the fork introduces (dataset tabs, sidebar meters, Lead-Gen /
   AI-Integrations / Profile surfaces). Tokens (--accent, --border, --font-*,
   --shadow-hard, …) come from main.css — nothing here redefines them. Shipping
   design system: parchment bg, cathedral teal, radius 0, hard shadows.
   ========================================================================== */

/* ---- brand + workspace pill additions -------------------------------- */
.brand-sub {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 10px 12px;
}
.plan-badge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--border); padding: 1px 5px; flex: none;
}

/* funnel-stage colour dot next to each nav section header */
.nav-section .stage-dot { width: 5px; height: 5px; flex: none; display: inline-block; }

/* ---- sidebar nav: scroll the middle, pin the footer ------------------- */
/* The sidebar is a fixed-height (100vh) flex column. Without an internal
   scroll region the nav list can grow taller than the viewport and push the
   footer (usage meters + sign-out) off the bottom — worse on team workspaces,
   which add a Team Workspace row. Make just the nav list scroll so the brand +
   workspace switcher stay pinned above and the footer stays pinned below on
   any viewport height. min-height:0 is required for the flex child to shrink
   below its content height and actually scroll. */
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- sidebar footer: usage meters + Clerk user block ------------------ */
/* main.css lays .sidebar-foot out as a flex row; the merged footer stacks two
   meters above the user row, so override to a block here. flex:none keeps it
   from shrinking against the scrolling nav above it on short viewports. */
.sidebar-foot { display: block; flex: none; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.meter { margin-bottom: 12px; }
.meter-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: var(--text-muted); margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.meter-track { width: 100%; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--mf, var(--accent)); transition: width 500ms ease; }

/* Compact footer meters: name · bar · value on ONE line instead of a label
   row stacked above the bar. Halves each meter's height so the footer stays
   short and the sidebar rarely scrolls. Scoped to .sidebar-foot so the stacked
   .meter on Profile / the onboarding progress bar is unaffected. */
.sidebar-foot .meter { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sidebar-foot .meter-track { flex: 1 1 auto; width: auto; min-width: 40px; }
.meter-name {
  flex: none; max-width: 96px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 10px; color: var(--text-muted);
}
.meter-val {
  flex: none; white-space: nowrap; font-size: 10px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.user-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.avatar.ring { box-shadow: 0 0 0 1.5px var(--bg-2), 0 0 0 3px var(--accent-faint); }
.user-mail { font-size: 10px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }

/* ---- page head + eyebrow --------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 5px;
}
.charge-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; }
.cell-sub { font-size: 11.5px; color: var(--text-muted); }
.tnum { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }

/* ── Records: expandable company row → people collected for that org (#1759) ── */
.cell-name.expandable { display: flex; align-items: center; cursor: pointer; user-select: none; }
.cell-name.expandable:hover { color: var(--accent-dark); }
.expand-chev {
    flex: none; margin-right: 6px; font-size: 9px; line-height: 1;
    color: var(--text-muted); transition: transform 120ms ease;
}
.expand-chev.open { transform: rotate(90deg); color: var(--accent-dark); }
.expand-count {
    flex: none; margin-left: 7px; font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border);
    padding: 0 5px; line-height: 15px;
}
.expand-count:empty { display: none; }
/* No fill — the expanded people are a clean nested table, set off by a left
   rule + indent rather than a grey block. */
.expando-row > td { background: transparent; padding: 0; }
.expando-body { padding: 4px 0 12px 14px; border-left: 2px solid var(--accent-faint); }
.expando-empty { padding: 4px 2px 6px; color: var(--text-muted); font-size: 12px; }
/* The people-at-an-org list is a left-packed flex layout, so name · contact ·
   type sit next to each other instead of stretching across the whole table. */
.ep-list { display: flex; flex-direction: column; }
.ep-list .ep-row { display: flex; align-items: center; gap: 22px; padding: 6px 2px; border-top: 1px solid var(--border); }
.ep-list .ep-row:first-child { border-top: none; }
.ep-person { display: flex; align-items: center; gap: 8px; flex: 0 1 210px; min-width: 0; }
.ep-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ep-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-title { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-contact { flex: 0 0 auto; }
.ep-ktag { flex: 0 0 auto; }
.ep-link { color: var(--text); text-decoration: none; }
.ep-link:hover { color: var(--accent-dark); }

/* ── Unified contact column (email/phone/linkedin/website stacked) #1759 ── */
.ct-cell { display: flex; flex-direction: column; gap: 2px; }
.ct-line { font-size: 11.5px; white-space: nowrap; }
.ct-k { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.ct-v { color: var(--text-2); margin-left: 4px; }
a.ct-v { color: var(--text); text-decoration: none; }
a.ct-v:hover { color: var(--accent-dark); }

/* ── Org expanded row: section labels + type-specific details grid #1759 ── */
.expando-sec {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); margin: 14px 0 6px;
}
.expando-sec:first-child { margin-top: 2px; }
.org-details {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 7px 30px; padding: 2px 0;
}
.od-row { display: flex; gap: 10px; font-size: 12px; min-width: 0; line-height: 1.4; }
.od-k { color: var(--text-muted); flex: none; min-width: 96px; }
.od-v { color: var(--text); min-width: 0; overflow: hidden; }
/* Contact block in the expanded row gets a little more line spacing. */
.expando-body > .ct-cell { gap: 4px; margin: 2px 0 2px; }

/* Location stays on one line; its width is the resizable column width (no cap),
   so dragging the column wider reveals the whole value. */
.table tbody td.loc-col { white-space: nowrap; }

/* On the resizable Records table (and its expanded "small table"), NEVER show an
   "…": hard-clip every cell AND every span inside it (name/title/details/contact
   all had their own ellipsis). A narrowed column just cuts the letters off; widen
   it to reveal the rest. */
.table.resizable td,
.table.resizable td * { text-overflow: clip; }

/* Records grows to fit all its rows and the page scrolls, rather than the table
   scrolling inside a capped viewport. Horizontal scroll (wide/resized columns)
   still works via overflow-x. */
.records-scroll { max-height: none; }

/* Recommendation "search done" popup — a centered, dismiss-to-close dialog (not a
   small corner toast) so users notice their results landed in Records. */
.rec-done-backdrop { position: fixed; inset: 0; background: rgba(11,20,22,0.45); z-index: 300; }
.rec-done {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 301;
    background: var(--card); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-hard-lg); padding: 26px 28px; text-align: center;
    max-width: 440px; width: calc(100% - 40px);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.rec-done-check {
    width: 46px; height: 46px; display: grid; place-items: center; flex: none;
    background: var(--accent-faint); color: var(--accent-dark); font-size: 24px;
}
.rec-done-body { font-size: 14px; line-height: 1.55; color: var(--text); }
.rec-done .bracket-btn { min-width: 130px; }

/* ── "Find more people at this org" (#1770) ── */
.find-more-btn { margin: 8px 0 2px; }
.find-modal { max-width: 480px; width: calc(100% - 40px); }
.find-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 6px 0 12px; }
.find-empty { padding: 20px 4px; text-align: center; color: var(--text-muted); font-size: 13px; }
.find-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.find-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--border); }
.find-row:first-child { border-top: none; }
.find-title { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-chips { display: flex; gap: 5px; flex: none; }
.find-chip {
    font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border); padding: 1px 5px;
}
.find-get { flex: none; min-width: 64px; }
.find-err { color: var(--red); font-size: 12px; margin-top: 10px; }
.find-search { margin: 0 0 10px; }
/* Confirmation that a person was just added — a green label that pops in. */
.find-done {
    flex: none; min-width: 64px; text-align: center; font-size: 12px; font-weight: 600;
    color: var(--green); display: inline-flex; align-items: center; justify-content: center;
    animation: find-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes find-pop {
    0% { transform: scale(0.55); opacity: 0; }
    60% { transform: scale(1.14); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
/* Subtle amber "no contact on file" flag (not uppercase — it's a sentence). */
.find-nocontact {
    text-transform: none; letter-spacing: 0;
    color: #7a5f16; background: rgba(180, 137, 44, 0.14); border-color: rgba(180, 137, 44, 0.38);
}
.section-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}

/* ---- dataset view tabs (Desync Records) ------------------------------ */
.views {
  display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto;
  width: fit-content; max-width: 100%;
  border: 1px solid var(--border); background: var(--card); scrollbar-width: thin;
}
.view-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; font-size: 12.5px; color: var(--text-2);
  border-right: 1px solid var(--border); position: relative;
  transition: background 100ms ease, color 100ms ease; white-space: nowrap;
}
.view-tab:last-child { border-right: 0; }
.view-tab .vd { width: 6px; height: 6px; flex: none; background: var(--vc, var(--text-muted)); }
.view-tab .vn { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.view-tab:hover { background: var(--accent-faint); color: var(--text); }
.view-tab.active { background: var(--accent-faint); color: var(--text); font-weight: 500; }
.view-tab.active::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--vc, var(--accent)); }

/* ---- provenance / grade / status (var-driven, table cells) ----------- */
.src {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 2px 6px;
  border: 1px solid var(--border); color: var(--text-2); white-space: nowrap;
}
.src .d { width: 5px; height: 5px; flex: none; background: var(--sc, var(--text-muted)); }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; padding: 3px 8px;
  border: 1px solid var(--border); background: var(--sw, transparent); color: var(--sc, var(--text-2));
  white-space: nowrap;
}
.status .d { width: 5px; height: 5px; background: currentColor; flex: none; }
.col-icon {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  margin-right: 2px; font-weight: 600;
}
.grade {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  border: 1.5px solid currentColor;
}
.grade.a { color: var(--green);  background: var(--green-wash); }
.grade.b { color: var(--blue);   background: var(--blue-wash); }
.grade.c { color: var(--yellow); background: var(--yellow-wash); }
.grade.d { color: var(--red);    background: var(--red-wash); }

/* ---- callout / note-strip -------------------------------------------- */
.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--cc, var(--accent));
  background: var(--card); padding: 13px 15px; display: block;
}
.callout-t { font-size: 13px; font-weight: 600; display: block; }
.callout-s { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; display: block; }
.note-strip {
  margin-top: 30px; padding: 12px 15px; border: 1px dashed var(--border);
  font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; align-items: flex-start;
}
.note-strip b { color: var(--text-2); font-weight: 600; }

/* ---- recommendations ------------------------------------------------- */
.rec-bar {
  border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-hard);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* Clear the 5px hard shadow + breathing room before "Your best customers". */
  margin-bottom: 26px;
}
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.check input { accent-color: var(--accent); width: 14px; height: 14px; }
.seed-list { display: flex; flex-direction: column; }
.seed-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.seed-row:last-child { border-bottom: 0; }
.seed-body { flex: 1; min-width: 0; }
.seed-name { font-size: 13px; font-weight: 500; display: block; }
.seed-meta { font-size: 11.5px; color: var(--text-muted); display: block; }

/* Action-bar count picker. */
.rec-count { display: flex; align-items: center; gap: 8px; }
.rec-count input {
  width: 58px; border: 1px solid var(--border); background: var(--raised);
  padding: 5px 7px; font-family: var(--font-mono); font-size: 13px; color: var(--text);
}
.rec-count input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Editable best-customer seed rows (website / contact / deal size / find). */
.rec-seed {
  border: 1px solid var(--border); background: var(--card);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
.rec-seed-l1 { display: flex; align-items: center; gap: 8px; }
.rec-seed-l2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-in {
  border: 1px solid var(--border); background: var(--raised);
  padding: 6px 8px; font-size: 12.5px; color: var(--text);
}
.rec-in:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.rec-seed-l1 .rec-in { flex: 1; min-width: 0; }
.rec-seed-l2 > .rec-in:first-child { flex: 1; min-width: 160px; }
.rec-seed-l2 select.rec-in { width: 160px; flex: none; }

/* Ranked result cards. */
.rec-results { display: flex; flex-direction: column; gap: 10px; }
.rec-card {
  border: 1px solid var(--border); background: var(--card);
  padding: 14px; display: flex; gap: 12px; align-items: flex-start;
}
.rec-card:hover { border-color: var(--accent); }
.rec-rank {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.rec-main { flex: 1; min-width: 0; }
.rec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.rec-type {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 6px; border: 1px solid var(--border); color: var(--sc, var(--text-2));
}
.rec-pct {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 6px;
  background: var(--accent-faint); color: var(--accent);
}
.rec-company { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rec-chips .chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-reason { font-size: 13px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }
.rec-info { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.rec-add { flex: none; }

/* Orchestrated recommendation card: provenance sub-line, labeled "why they'd
   buy" / "what they do", company contact, and the resolved "reach out to"
   person. Sections render only when their data exists (no empty-state dashes). */
.rec-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.rec-flabel {
  display: block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.09em; font-weight: 600; color: var(--accent); margin-bottom: 4px;
}
.rec-fval { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }
.rec-why {
  margin-top: 10px; padding: 9px 11px; background: var(--accent-faint);
  border-left: 2px solid var(--accent);
}
.rec-field { margin-top: 10px; }
.rec-field .rec-flabel { color: var(--text-muted); }
.rec-person { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rec-person .rec-flabel { color: var(--text-muted); }
.rec-person-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rec-person-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rec-person-role { font-size: 12px; color: var(--text-muted); }

/* Fresh-run loading panel + spinner (also reused inline for "find more"). */
.rec-loading {
  border: 1px solid var(--border); background: var(--card); margin-top: 16px;
  padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.rec-spin {
  width: 22px; height: 22px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: rec-spin 0.8s linear infinite;
}
@keyframes rec-spin { to { transform: rotate(360deg); } }

/* ---- "a saint for the wait" loading game ---------------------------- */
.saint-card {
  max-width: 460px; margin: 16px auto 0; border: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-hard); overflow: hidden;
}
.saint-head {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px 8px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.saint-bar { position: relative; height: 4px; margin: 0 16px; background: var(--bg-2); overflow: hidden; }
.saint-bar-fill {
  position: absolute; top: 0; height: 100%; width: 40%; background: var(--accent);
  animation: saint-indet 1.3s ease-in-out infinite;
}
.saint-sub { padding: 8px 16px 14px; font-size: 11px; color: var(--text-muted); }
.saint-body {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px;
  border-top: 1px solid var(--border); background: var(--bg-2);
}
.saint-portrait {
  flex: none; width: 96px; height: 120px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border); overflow: hidden;
}
.saint-portrait img { max-width: 100%; max-height: 100%; object-fit: contain; }
.saint-name { font-family: var(--font-serif, Georgia, serif); font-size: 19px; color: var(--accent); line-height: 1.2; }
.saint-meta { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--yellow); }
.saint-quiz { padding: 14px 16px; border-top: 1px solid var(--border); }
.saint-q-label {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--yellow); margin-bottom: 5px;
}
.saint-q { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 10px; }
.saint-choices { display: flex; flex-direction: column; gap: 7px; }
.saint-choice {
  text-align: left; padding: 8px 11px; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--border); background: var(--bg); transition: background 0.1s, border-color 0.1s;
}
.saint-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-faint); }
.saint-choice:disabled { cursor: default; }
.saint-choice.correct { border-color: var(--green); background: rgba(111,166,156,.16); color: #2E7D5B; font-weight: 600; }
.saint-choice.wrong { border-color: var(--red); background: rgba(192,57,43,.08); color: var(--red); }
.saint-choice.dim { color: var(--text-muted); }
.saint-reveal {
  margin-top: 11px; padding: 10px 12px; border-left: 3px solid var(--accent);
  background: var(--accent-faint); font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.saint-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
@keyframes saint-indet { 0% { left: -45%; } 100% { left: 100%; } }

/* ---- AI Search chat -------------------------------------------------- */
.chat { border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-hard); }
.chat-log { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.bubble { display: flex; gap: 10px; align-items: flex-start; }
.bubble .who {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; border: 1px solid var(--border);
}
.bubble.user .who { background: var(--bg-2); color: var(--text-2); }
.bubble.ai .who { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bubble-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.bubble.user .bubble-body { color: var(--text); font-weight: 500; }
.chat-input {
  border-top: 1px solid var(--border); padding: 11px 14px; display: flex;
  align-items: center; gap: 10px; background: var(--bg-2);
}
.chat-input input { flex: 1; border: 1px solid var(--border); background: var(--raised); padding: 8px 10px; font-size: 13px; }
.chat-input input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.example, .prompt {
  border: 1px solid var(--border); background: var(--card); padding: 6px 11px;
  font-size: 12px; color: var(--text-2); transition: all 100ms ease;
}
.example:hover, .prompt:hover { border-color: var(--accent); color: var(--text); background: var(--accent-faint); }
.prompt-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- AI Integrations ------------------------------------------------- */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: 22px 30px;
  padding: 14px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.stat-strip .stat { display: flex; flex-direction: column; gap: 1px; }
.stat-strip .stat .v {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; color: var(--sv, var(--text));
}
.stat-strip .stat .k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.int-card {
  border: 1px solid var(--border); background: var(--card); padding: 14px;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.int-card:hover { box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); border-color: var(--accent); }
.int-card.on { border-color: var(--accent); border-width: 1.5px; background: var(--accent-faint); }
.int-ico {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--accent);
}
.int-ico svg { width: 15px; height: 15px; }
.int-name { font-size: 13.5px; font-weight: 600; }
.int-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.steps { display: flex; flex-direction: column; counter-reset: step; }
.step {
  display: flex; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.step:last-child { border-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 19px; height: 19px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--bg-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-2);
}
.step code, .step .lit {
  font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-2);
  border: 1px solid var(--border); padding: 0 4px; color: var(--text);
}
.code-wrap { border: 1px solid var(--border); background: var(--card); }
.code-head { display: flex; align-items: center; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.code-tab {
  padding: 8px 14px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-2); border-right: 1px solid var(--border);
}
.code-tab.on { color: var(--text); font-weight: 600; background: var(--card); }
pre.code {
  margin: 0; padding: 14px; overflow-x: auto; font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.6; color: var(--text-2); background: var(--card); tab-size: 2;
}
.key-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px;
}
.key-row:last-child { border-bottom: 0; }
.key-val { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }

/* ---- API keys tab --------------------------------------------------- */
/* Inline literal outside a .step (page-sub, note-strip): mono chip. */
.lit { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); border: 1px solid var(--border); padding: 0 4px; color: var(--text); }
.apikey-list { border: 1px solid var(--border); background: var(--card); }
.apikey-val { color: var(--text); word-break: break-all; white-space: normal; overflow: visible; text-overflow: clip; }
/* The one time a full key is on screen (just minted) — nudge them to copy it. */
.apikey-fresh { background: var(--accent-faint); }
.apikey-off .apikey-val { color: var(--text-muted); text-decoration: line-through; }
.apikey-confirm { display: inline-flex; gap: 6px; flex: none; }
.apikey-danger { color: var(--red); }
.apikey-danger:hover { border-color: var(--red); color: var(--red); background: rgba(192,57,43,0.06); }
.apikey-note {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  padding: 10px 14px; border: 1px solid var(--accent); background: var(--accent-faint);
  font-size: 12.5px; color: var(--text);
}
.apikey-note.err { border-color: var(--red); background: rgba(192,57,43,0.06); }

.video-wrap { border: 1px solid var(--border); background: var(--card); margin-bottom: 14px; }
.video-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.video-head svg { color: var(--accent); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* code-tab hover / active underline / copy chip + syntax highlight (OpenAI + builder) */
.code-tab { position: relative; }
.code-tab:hover { background: var(--accent-faint); color: var(--text); }
.code-tab.on::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--accent); }
.code-copy { margin-left: auto; margin-right: 8px; }
pre.code .k { color: var(--accent); }
pre.code .s { color: var(--green); }
pre.code .c { color: var(--text-muted); font-style: italic; }

/* ---- REST request builder (the /integrations REST API pane) ---------- */
.ep-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); background: var(--card); }
.ep-tab {
  padding: 8px 13px; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-2); border-right: 1px solid var(--border); position: relative; white-space: nowrap;
}
.ep-tab:last-child { border-right: 0; }
.ep-tab:hover { background: var(--accent-faint); color: var(--text); }
.ep-tab.on { background: var(--accent-faint); color: var(--text); font-weight: 600; }
.ep-tab.on::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); }
.ep-url {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border: 1px solid var(--border); border-top: 0; background: var(--bg-2);
  font-family: var(--font-mono); font-size: 12px;
}
.ep-verb {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 7px;
  background: var(--accent); color: var(--on-accent);
}
.ep-path { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.ep-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 12px 0 0; max-width: 78ch; }
.ep-note {
  margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--border);
  font-size: 12px; color: var(--text-2); display: flex; gap: 9px; align-items: flex-start;
}
.ep-note svg { flex: none; margin-top: 2px; color: var(--gold, var(--yellow)); width: 13px; height: 13px; }
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 14px; }
@media (max-width: 1120px) { .builder { grid-template-columns: 1fr; } }
.finder { border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-hard); }
.finder-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; background: var(--bg-2);
}
.finder-head .ft {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.finder-body { padding: 16px; display: grid; gap: 14px; }
.fg { margin-top: 4px; }
.fg-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted);
}
.fg-head .line { flex: 1; height: 1px; background: var(--border); }
.fg-head .shape { color: var(--accent); text-transform: none; letter-spacing: 0.02em; }
/* Builder field controls are scoped to .finder-body so they never collide with
   the drawer's .field / .field-grid (a different key/value widget). */
.finder-body .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.finder-body .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.finder-body .field label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.finder-body .field input, .finder-body .field select, .finder-body .field textarea {
  border: 1px solid var(--border); background: var(--raised);
  padding: 7px 9px; font-size: 13px; font-family: var(--font-sans); width: 100%; box-sizing: border-box;
}
.finder-body .field input:focus, .finder-body .field select:focus, .finder-body .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.finder-body .field input::placeholder, .finder-body .field textarea::placeholder { color: var(--text-muted); }
.finder-body .field .hint { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.finder-body .field .check-inline { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; color: var(--text-2); }
.finder-body .field .check-inline input { accent-color: var(--accent); width: 14px; height: 14px; }
.resp-sec { border: 1px solid var(--border); margin-top: -1px; }
.resp-sec > summary {
  padding: 8px 12px; cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 8px; background: var(--bg-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
}
.resp-sec > summary::-webkit-details-marker { display: none; }
.resp-sec > summary::before { content: "\25B8"; font-size: 9px; color: var(--text-muted); }
.resp-sec[open] > summary::before { content: "\25BE"; }
.resp-sec > summary:hover { background: var(--accent-faint); color: var(--text); }
.billable {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--yellow); color: var(--yellow);
}
.free {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--border); color: var(--text-muted);
}

/* ---- Profile: company + best customers ------------------------------- */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } }
.set-card { border: 1px solid var(--border); background: var(--card); }
.set-head { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); display: flex; align-items: center; }
.set-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.set-body { padding: 14px; display: grid; gap: 13px; }
.member-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: 0; }
.member-body { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 500; }
.member-mail { font-size: 11.5px; color: var(--text-muted); }
.role {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; border: 1px solid var(--border); padding: 2px 7px; color: var(--text-2);
}
.pick-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pick { border: 1px solid var(--border); background: var(--card); padding: 5px 11px; font-size: 12px; color: var(--text-2); transition: all 100ms ease; }
.pick:hover { border-color: var(--accent); color: var(--text); }
.pick.on { border-color: var(--accent); background: var(--accent-faint); color: var(--accent-dark); font-weight: 500; }
.cust-row {
  display: grid; grid-template-columns: 1fr 1fr 130px 28px; gap: 8px;
  align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.cust-row:last-of-type { border-bottom: 0; }
.cust-row input, .cust-row select {
  border: 1px solid var(--border); background: var(--raised); padding: 6px 8px; font-size: 12.5px; width: 100%;
}
.cust-row input:focus, .cust-row select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Remove-row (×) button — its own narrow grid column. */
.cust-row-x {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center; justify-self: center;
  border: 1px solid var(--border); background: var(--card); color: var(--text-muted);
  font-size: 15px; line-height: 1; cursor: pointer; transition: all 100ms ease;
}
.cust-row-x:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 720px) { .cust-row { grid-template-columns: 1fr; } }

/* ---- settings / profile form controls -------------------------------- */
/* main.css only styles `.field input` INSIDE a drawer, so the Profile page's
   "Your company" inputs fell through to unstyled white boxes. Give the
   settings-card controls the same parchment look as `.cust-row`. */
.set-card .field { gap: 6px; }
.set-card .field label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
}
.set-card .field input,
.set-card .field textarea,
.set-card .field select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--raised);
  padding: 7px 9px; font-size: 12.5px; color: var(--text); font-family: inherit;
}
.set-card .field textarea { resize: vertical; line-height: 1.45; }
.set-card .field input:focus,
.set-card .field textarea:focus,
.set-card .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.set-card .field input::placeholder,
.set-card .field textarea::placeholder { color: var(--text-muted); }

/* ---- toast ----------------------------------------------------------- */
.toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 15px;
  border: 1px solid var(--accent); background: var(--bg); box-shadow: var(--shadow-hard); font-size: 12.5px;
}
.toast .tk { color: var(--green); display: grid; place-items: center; }

/* ---- login: sign-in help / wrong-password alert ---------------------- */
/* Ported from the beta webapp's AuthLogin guidance box. The webapp used
   Tailwind utilities; the platform ships no Tailwind, so these are real rules
   on the platform tokens (square corners, cathedral teal, rubric red). The
   `--raised`/`--red-wash` fallbacks cover the default :root, where those wash
   tokens are only defined once a data-theme is stamped. */
.login-msg {
  width: 100%; max-width: 400px; text-align: center;
  border: 1px solid var(--border); background: var(--raised, #FBF9F5);
  padding: 11px 14px;
}
.login-msg p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.login-msg .em { font-weight: 600; color: var(--accent); }
.login-msg.alert { border: 1.5px solid var(--red); background: var(--red-wash, #F3DEDA); }
.login-msg.alert p,
.login-msg.alert .em { color: var(--red); }
.login-msg.alert .login-msg-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }

/* ============================================================================
   Sidebar + topbar — match the mockup's spacing (route-by-route pass 1)
   ============================================================================ */

/* Section headers: main.css lays these out without flex, so the colour dot
   hugged the label. The mockup is a flex row with a 7px gap between dot + text. */
.nav-section { display: flex; align-items: center; gap: 7px; }

/* Topbar search: vertically centre the magnifier — it's an inline `.ico` span
   that sat on the text baseline — and hold the far-right theme toggle. */
.topbar .search .ico, .topbar .icon-btn .ico { display: grid; place-items: center; flex: none; }
.topbar .search .ico svg, .topbar .icon-btn .ico svg { display: block; }
.topbar .icon-btn { flex: none; }
.topbar .icon-btn .ico { color: inherit; }

/* ---- light / dark theme tokens -----------------------------------------
   The app defaults to LIGHT (main.css :root). The topbar toggle stamps
   `data-theme` on <html>; these blocks override the tokens per explicit mode. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0E1A17; --bg-2:#172420; --card:#111E1A; --raised:#16241F;
  --text:#E9F0EB; --text-2:#C4D0CA; --text-muted:#8B9C93;
  --accent:#6FB8B2; --accent-light:#7FC8AE; --accent-dark:#A9D6D0; --accent-faint:rgba(111,184,178,0.12);
  --border:#2C3A35; --border-strong:#3A4A44;
  --green:#7FC8AE; --green-wash:#16302A; --yellow:#D9AE52; --yellow-wash:#2E2716;
  --red:#E06456; --red-wash:#331A17; --blue:#6FB8B2; --blue-wash:#14312E; --purple:#8B7BB0;
  --on-accent:#08201D;
  --shadow-hard:5px 5px 0 rgba(0,0,0,0.34); --shadow-hard-lg:8px 8px 0 rgba(0,0,0,0.40);
  --grid-ink:rgba(233,240,235,0.045);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#F7F4EE; --bg-2:#E7E3DA; --card:#F7F4EE; --raised:#FBF9F5;
  --text:#283238; --text-2:#55636B; --text-muted:#8B958F;
  --accent:#0E3D41; --accent-light:#6FA69C; --accent-dark:#0A2E31; --accent-faint:rgba(14,61,65,0.07);
  --border:#D5CFC1; --border-strong:#C9C3B5;
  --green:#6FA69C; --green-wash:#E7EFE8; --yellow:#B4892C; --yellow-wash:#F1E7D0;
  --red:#C0392B; --red-wash:#F3DEDA; --blue:#3F6E78; --blue-wash:#DDE7E1; --purple:#7A6A9C;
  --on-accent:#F7F4EE;
  --shadow-hard:5px 5px 0 rgba(11,20,22,0.10); --shadow-hard-lg:8px 8px 0 rgba(11,20,22,0.14);
  --grid-ink:rgba(40,50,56,0.05);
}

/* ============================================================================
   Notes card grid — mockup look (screen #s-notes; ported .tbl-grid / .tbl-card
   / .tc-* from the mockup app.css). Rendered on a <div> (not the mockup's
   <button>) because live notes keep inline-editable title + body and a delete
   control, which a <button> can't legally contain.
   ============================================================================ */
.tbl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tbl-card {
  border: 1px solid var(--border); background: var(--card); padding: 14px;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.tbl-card:hover { box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); border-color: var(--accent); }
.tbl-card .tc-head { display: flex; align-items: center; gap: 8px; }
.tbl-card .tc-head .spacer { flex: 1; }
.tbl-card .tc-ico {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--accent);
}
.tbl-card .tc-ico svg { width: 14px; height: 14px; }
.tbl-card .tc-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  outline: none; padding: 1px 3px; margin: -1px -3px;
}
.tbl-card .tc-name:focus { background: var(--accent-faint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tbl-card .tc-meta {
  font-size: 12px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap;
  min-height: 34px; outline: none; padding: 3px 5px; margin: -3px -5px;
}
.tbl-card .tc-meta:focus { background: var(--accent-faint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tbl-card .tc-meta:empty::before { content: "Add note detail…"; color: var(--text-muted); }
.tbl-card .tc-foot { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.tbl-card .tc-foot .spacer { flex: 1; }

/* ============================================================================
   Tasks table — mockup pills + two-line Task cell (screen #s-tasks). Reuses the
   app's .table / .status / .pri-select; adds only the pieces the mockup needs:
   a due pill (kept inline-editable, coloured by real due-state) and a stacked
   title+subtitle Task cell.
   ============================================================================ */
.cell-task {
  white-space: normal; vertical-align: middle;
  padding-top: 8px; padding-bottom: 8px; height: auto;
  min-width: 180px;
}
.cell-task .tt {
  font-weight: 500; color: var(--text); outline: none; cursor: text;
  padding: 1px 3px; margin: -1px -3px; border-radius: 0;
}
.cell-task .tt:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cell-task.done .tt { text-decoration: line-through; color: var(--text-muted); }
.cell-task .cell-sub { margin-top: 2px; white-space: normal; }
/* Due pill: mockup's .status idiom (var-driven --sc/--sw), but contenteditable so
   the live inline due edit survives. No .d dot child (it would be editable text). */
.due-pill {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border: 1px solid var(--border); background: var(--sw, transparent);
  color: var(--sc, var(--text-muted)); font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; white-space: nowrap; min-width: 44px;
  outline: none; cursor: text;
}
.due-pill:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.due-pill:empty::before { content: "—"; color: var(--text-muted); }
.cell-owner { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.cell-related { color: var(--text-2); font-size: 12px; white-space: normal; }

/* ============================================================================
   Billing — /subscribe + /manage-subscriptions (ported from the beta webapp's
   Stripe Elements surface; restyled onto platform tokens: parchment, cathedral
   teal, radius 0, hard shadows — no Tailwind, no rounded look).
   ============================================================================ */
.bill-page { max-width: 960px; margin: 0 auto; }
.bill-head { text-align: center; margin-bottom: 24px; }
.bill-title {
  font-family: var(--font-serif); font-size: 30px; font-weight: 600;
  color: var(--text); letter-spacing: 0.01em; margin: 2px 0 8px;
}
.bill-title .br { color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
.bill-lede { color: var(--text-2); font-size: 13.5px; line-height: 1.6; max-width: 620px; margin: 0 auto; }

/* monthly / annual toggle */
.bill-toggle-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.bill-config-note { font-size: 12px; color: var(--text-muted); font-style: italic; }
.bill-config-note.center { text-align: center; margin: 0 0 14px; }

/* plan grid */
.bill-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin-top: 8px; }
@media (max-width: 860px) { .bill-plans { grid-template-columns: 1fr; } }
.bill-plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--card);
  padding: 26px 20px 20px; overflow: visible;
}
.bill-plan.hot { border-width: 2px; border-color: var(--accent); box-shadow: var(--shadow-hard); }
.bill-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px;
}
.bill-plan-ico {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--accent); margin-bottom: 12px;
}
.bill-plan.hot .bill-plan-ico { background: var(--accent-faint); border-color: var(--accent); }
.bill-plan-name { font-size: 17px; font-weight: 700; color: var(--text); }
.bill-plan-records {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 3px;
}
.bill-price { margin: 14px 0 2px; display: flex; align-items: baseline; gap: 4px; }
.bill-price .amt { font-size: 30px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bill-price .per { font-size: 13px; color: var(--text-muted); }
.bill-subline { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.bill-feats { list-style: none; margin: 16px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bill-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.bill-feat-ico { color: var(--accent); flex: none; display: grid; place-items: center; margin-top: 1px; }
.bill-cta { width: 100%; box-sizing: border-box; margin-top: auto; }

/* enterprise row */
.bill-enterprise {
  margin-top: 24px; padding: 18px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.bill-enterprise-lead { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.bill-enterprise-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bill-enterprise-head h3 { font-size: 17px; font-weight: 700; color: var(--text); }
.bill-enterprise-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}

/* shared card-lead icon chip + text (enterprise, payment method, sub rows) */
.bill-card-ico {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--accent-faint); color: var(--accent);
}
.bill-card-ico.muted { background: var(--bg-2); color: var(--text-muted); }
.bill-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.bill-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

/* referral redeem box */
.bill-referral {
  margin: 26px auto 0; max-width: 380px; text-align: center;
  border: 1px solid var(--border); background: var(--card); padding: 16px 18px;
}
.bill-referral-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.bill-referral-sub { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 12px; }
.bill-referral-row { display: flex; gap: 8px; }
.bill-referral-row .bill-input { flex: 1; min-width: 0; }
.bill-referral-done { margin-top: 26px; text-align: center; }
.bill-referral-done p { font-size: 13px; color: var(--accent-dark); font-weight: 600; margin-bottom: 4px; }

/* footer links */
.bill-foot { margin-top: 22px; text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.7; }
.bill-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.bill-link:hover { text-decoration: underline; }

/* ---- manage-subscriptions ------------------------------------------------ */
.bill-manage-top { margin-bottom: 20px; }
.bill-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text-2); text-decoration: none; margin-bottom: 12px;
}
.bill-back:hover { color: var(--accent); }
.bill-sub-list { margin-bottom: 8px; }
.bill-sub-list .section-head { margin: 20px 0 10px; }
.bill-sub-row {
  padding: 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.bill-sub-row.past { opacity: 0.7; }
.bill-sub-lead { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.bill-sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.bill-sub-head h3 { font-size: 14px; font-weight: 600; color: var(--text); }
.bill-sub-price { font-size: 17px; font-weight: 700; color: var(--accent); }
.bill-sub-renew { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.bill-cancel-btn { --bk: var(--red); color: var(--red); }
.bill-cancel-btn:hover { background-color: var(--red-wash); color: var(--red); }
.bill-empty { padding: 30px 24px; text-align: center; margin-bottom: 12px; }
.bill-empty h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.bill-empty p { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.bill-help { margin-top: 32px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.bill-help a { color: var(--accent); text-decoration: none; }
.bill-help a:hover { text-decoration: underline; }

/* ---- payment-method section ---------------------------------------------- */
.bill-pay { margin-top: 26px; }
.bill-pay .section-head { margin-bottom: 10px; }
.bill-card-row {
  padding: 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.bill-card-lead { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }

/* ---- alerts, loading, spinner -------------------------------------------- */
.bill-alert {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  font-size: 12.5px; line-height: 1.5; border: 1px solid var(--border); margin: 12px 0;
}
.bill-alert .ico { flex: none; margin-top: 1px; }
.bill-alert.ok { border-color: var(--green); background: var(--green-wash); color: #2E5A52; }
.bill-alert.err { border-color: var(--red); background: var(--red-wash); color: #A2342A; }
.bill-loading { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.bill-loading.center { justify-content: center; padding: 30px 0; }
.bill-spin { animation: bill-spin 0.7s linear infinite; color: var(--accent); }
@keyframes bill-spin { to { transform: rotate(360deg); } }

/* ---- modal internals (reuses main.css .modal-backdrop / .modal-card) ------ */
.bill-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bill-x {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
}
.bill-x:hover { color: var(--text); }
.bill-x:disabled { opacity: 0.4; cursor: default; }
.bill-total { border: 1px solid var(--border); background: var(--bg-2); padding: 12px; margin: 4px 0 14px; }
.bill-total-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.bill-total-amt { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bill-total-note { font-size: 11.5px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }
.bill-total-note .em { font-weight: 700; color: var(--accent); }
.bill-total-err { font-size: 11.5px; color: var(--red); margin-top: 8px; }
.bill-card-field { border: 1px solid var(--border); background: var(--raised); padding: 13px; margin: 6px 0 14px; min-height: 3rem; }
.bill-submit { width: 100%; box-sizing: border-box; margin-top: 6px; }
.bill-fineprint { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.bill-fineprint.left { text-align: left; margin: 0 0 12px; }
.bill-modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.bill-modal-actions .bracket-btn { flex: 1; }
.bracket-btn.solid.danger { background: var(--red); color: #fff; }
.bracket-btn.solid.danger:hover { background: #A2342A; }
.bracket-btn.solid.danger:disabled { opacity: 0.5; }

/* ---- post-payment overlay ------------------------------------------------- */
.bill-overlay { text-align: center; }
.bill-overlay h3 { font-size: 18px; font-weight: 600; color: var(--text); margin: 4px 0 8px; }
.bill-overlay p { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 16px; }
.bill-overlay-ico { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border: 1.5px solid currentColor; }
.bill-overlay-ico.ok { color: var(--green); background: var(--green-wash); }

/* ---- onboarding questionnaire ("entrance exam") ----------------------- */
/* The mandatory multi-step intro, ported from the lead-gen webapp. Full-screen
   parchment; a single .set-card so its .field controls inherit the settings-card
   parchment look. One question per step, Continue gated until answered. */
.onb-screen {
  min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; background: var(--bg);
}
.onb-card { width: 100%; max-width: 560px; margin-top: 20px; box-shadow: var(--shadow-hard); }
.onb-bracket { color: var(--accent); }

/* progress bar — reuses the sidebar meter track/fill idiom */
.onb-progress { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0; }
.onb-progress .meter-track { flex: 1; }
.onb-progress-num {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; flex: none;
}

/* step body — fixed min-height so the card doesn't jump between steps */
.onb-step { padding: 16px 14px; min-height: 280px; display: flex; flex-direction: column; gap: 14px; }
.onb-q { display: flex; flex-direction: column; gap: 4px; }
.onb-q-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.35; }
.onb-q-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* intro step (0) */
.onb-intro { display: flex; flex-direction: column; gap: 14px; }
.onb-intro-head { display: flex; align-items: center; gap: 9px; }
.onb-badge {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11px;
}
.onb-intro-title { font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--text); }
.onb-intro p { font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin: 0; }
.onb-intro p.muted { color: var(--text-muted); }

/* best-customer rows (final step) */
.onb-body-list { display: flex; flex-direction: column; gap: 12px; }
.onb-cust { border: 1px solid var(--border); background: var(--bg-2); padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.onb-cust-head { display: flex; align-items: center; justify-content: space-between; }
.onb-cust-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
}
.onb-cust-x {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); transition: color 100ms ease;
}
.onb-cust-x:hover { color: var(--red); }
.onb-add {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}
.onb-add:hover { text-decoration: underline; }
.onb-warn { font-family: var(--font-mono); font-size: 10.5px; color: var(--yellow); margin: 0; }

/* footer: BACK (plain) + spacer + CONTINUE (solid bracket button) */
.onb-err { font-family: var(--font-mono); font-size: 11px; color: var(--red); margin: 0; padding: 0 14px 8px; }
.onb-foot { display: flex; align-items: center; gap: 8px; padding: 0 14px 16px; }
.onb-foot .spacer { flex: 1; }
.onb-back {
  background: none; border: 0; padding: 8px 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2); transition: color 120ms ease;
}
.onb-back:hover { color: var(--text); }
.onb-back:disabled { opacity: 0.4; cursor: default; }

/* ==========================================================================
   AI Search — database toggle, agent chat, confirm card, results table.
   Reuses the site idiom (radius 0, hard shadows, --accent). Spinner reuses
   the existing @keyframes rec-spin.
   ========================================================================== */

/* Recommend-Recommendations banner */
.ai-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 18px; padding: 12px 14px;
  background: var(--accent-faint); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.ai-banner-ico { color: var(--accent); display: inline-flex; flex: none; }
.ai-banner-txt { flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ai-banner-txt b { color: var(--text); font-weight: 600; }
.ai-banner .bracket-btn { flex: none; }

/* Database toggle */
.ai-toggle-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 8px;
}
.ai-db-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-db {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 500;
  color: var(--text-2); background: var(--raised);
  border: 1px solid var(--border); cursor: pointer; transition: all 120ms ease;
}
.ai-db:hover { border-color: var(--accent); color: var(--text); }
.ai-db.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--shadow-hard);
}
.ai-db.active svg { color: var(--on-accent); }
.ai-db-blurb { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }

/* Chat shell */
.ai-chat { margin-top: 14px; }
.ai-chat .chat-log { min-height: 120px; }

/* Empty-state hero */
.ai-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 8px 8px; gap: 4px; }
.ai-hero-ico { color: var(--accent); display: inline-flex; }
.ai-hero-h { font-size: 18px; font-weight: 600; color: var(--text); }
.ai-hero-s { font-size: 13px; color: var(--text-muted); }

/* Message internals */
.ai-pre { white-space: pre-wrap; }
.ai-msg-parts { display: flex; flex-direction: column; gap: 6px; }
.ai-tool-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 9px; font-size: 11px; font-weight: 500; color: var(--accent-dark);
  background: var(--accent-faint); border: 1px solid var(--border);
}
.ai-tool-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ai-pulse 1.1s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.ai-thinking { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); padding: 4px 0; }
.ai-spin {
  width: 14px; height: 14px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: rec-spin 0.8s linear infinite;
  display: inline-block; flex: none;
}
.ai-error {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--red);
  background: var(--red-wash); border: 1px solid var(--border); padding: 8px 10px;
}

/* Confirm-before-billing card */
.ai-preview {
  margin: 0 16px 12px; padding: 14px;
  background: var(--accent-faint); border: 1px solid var(--accent);
  display: flex; flex-direction: column; gap: 10px;
}
.ai-preview-head { display: flex; flex-direction: column; gap: 4px; }
.ai-preview-t { font-size: 13px; font-weight: 600; color: var(--text); }
.ai-preview-s { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.ai-preview-s b { color: var(--text); font-weight: 600; }
.ai-preview-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-prev-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: var(--raised); border: 1px solid var(--border); font-size: 11px; }
.ai-prev-k { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.ai-prev-v { color: var(--text); font-weight: 500; }
.ai-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Quick-reply buttons (the clarifying-question popups) */
.ai-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.ai-reply {
  padding: 7px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  color: var(--text); background: var(--raised); border: 1px solid var(--border);
  transition: all 120ms ease;
}
.ai-reply:hover { border-color: var(--accent); }
.ai-reply.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.ai-reply.primary:hover { background: var(--accent-dark); }

/* Input row */
.ai-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.ai-textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 140px; overflow-y: auto; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--raised);
  padding: 10px; font: inherit; font-size: 13px; color: var(--text); line-height: 1.5;
}
.ai-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ai-textarea:disabled { opacity: 0.55; }
.ai-textarea::placeholder { color: var(--text-muted); }
.ai-max { flex: none; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; background: var(--bg-2); border: 1px solid var(--border); }
.ai-max.invalid { border-color: var(--red); }
.ai-max-l { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; color: var(--text-muted); }
.ai-max input { width: 42px; background: transparent; border: 0; text-align: right; font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.ai-max input:focus { outline: none; }
.ai-send {
  flex: none; width: 40px; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer; transition: background 120ms ease;
}
.ai-send:hover:not(:disabled) { background: var(--accent-dark); }
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Empty-state footers */
.ai-subgate { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); padding: 12px 16px; border-top: 1px solid var(--border); }
.ai-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.ai-link:hover { text-decoration: underline; }
.ai-examples-wrap { padding: 0 16px 14px; }
.ai-examples-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }

/* Results table */
.ai-results-wrap { margin-top: 16px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-hard); }
.ai-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ai-results-t { font-size: 13px; font-weight: 600; color: var(--text); }
.ai-results-n { color: var(--text-2); font-weight: 400; }
.ai-results-scroll { overflow-x: auto; }
table.ai-results { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ai-results th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ai-results td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); white-space: nowrap; vertical-align: top; }
.ai-results tbody tr:last-child td { border-bottom: 0; }
.ai-results tbody tr:hover td { background: var(--accent-faint); }
.ai-res-link { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); text-decoration: none; font-size: 12px; }
.ai-res-link:hover { text-decoration: underline; }
.ai-res-dash { color: var(--text-muted); }

/* --- AI Search two-step picker: category -> database -> chat -------------- */
.ai-step { margin-top: 6px; }
.ai-step-q { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }

.ai-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ai-cat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 18px; cursor: pointer; background: var(--raised); border: 1px solid var(--border);
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.ai-cat:hover { border-color: var(--accent); box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); }
.ai-cat-ico { color: var(--accent); display: inline-flex; margin-bottom: 2px; }
.ai-cat-t { font-size: 15px; font-weight: 600; color: var(--text); }
.ai-cat-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.ai-back {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer;
  padding: 0; margin-bottom: 12px; font-size: 12px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; transition: color 120ms ease;
}
.ai-back:hover { color: var(--accent); }

.ai-db-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ai-dbcard {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; cursor: pointer;
  background: var(--raised); border: 1px solid var(--border);
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.ai-dbcard:hover { border-color: var(--accent); box-shadow: var(--shadow-hard); transform: translate(-1px, -1px); }
.ai-dbcard:hover .ai-dbcard-arrow { color: var(--accent); }
.ai-dbcard-ico { flex: none; color: var(--accent); display: inline-flex; }
.ai-dbcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-dbcard-t { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ai-dbcard-d { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ai-dbcard-arrow { flex: none; color: var(--text-muted); display: inline-flex; transition: color 120ms ease; }

/* Active category/database context bar above the chat */
.ai-context {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border);
}
.ai-context-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ai-context-crumb b { color: var(--text); font-weight: 600; }
.ai-context-crumb svg { color: var(--text-muted); }
.ai-change {
  display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 500; color: var(--text-muted); transition: color 120ms ease;
}
.ai-change:hover { color: var(--accent); }

@media (max-width: 640px) {
  .ai-cat-grid, .ai-db-grid { grid-template-columns: 1fr; }
}

/* AI Search results toolbar (Export CSV + Find more) */
.ai-results-actions { display: flex; gap: 8px; flex: none; }

/* ── Lead Digest setup (/lead-digest, epic #1237) ─────────────────────────── */
.digest-page { max-width: 640px; }
.digest-form { display: flex; flex-direction: column; gap: 16px; }

/* Card sections group related fields with room to breathe. */
.digest-card { border: 1px solid var(--border); background: var(--card); padding: 20px 22px; }
.digest-card-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 16px;
}

.digest-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.digest-ws { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.digest-lastrun { font-size: 11px; color: var(--text-muted); margin-left: auto; }

.digest-field { margin-bottom: 20px; }
.digest-field:last-child { margin-bottom: 0; }
.digest-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 9px; }
.digest-field-hint { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }
.digest-inline-row { display: flex; align-items: center; gap: 10px; }
.digest-hint { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin: 8px 0 0; max-width: 60ch; }

/* Day toggles — equal-width squares, filled when active. */
.digest-days { display: flex; gap: 7px; flex-wrap: wrap; }
.digest-day {
  min-width: 46px; padding: 8px 4px; text-align: center; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.digest-day:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.digest-day.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.digest-day:disabled { opacity: 0.4; cursor: not-allowed; }

.digest-time { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.digest-select { width: auto; min-width: 74px; }
.digest-colon { color: var(--text-muted); font-weight: 600; }
.digest-tz-select { min-width: 220px; max-width: 100%; }
.digest-count { width: 96px; }
.digest-fmt { min-width: 160px; }

/* Contact-filter checkboxes — spaced out, not cramped. */
.digest-checks { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 2px; }
.digest-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.digest-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.digest-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.digest-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #2E7D5B; }

.digest-loading { color: var(--text-muted); }
.digest-upsell { display: flex; align-items: flex-start; gap: 14px; }
.digest-upsell-ico { flex: none; color: var(--accent); display: inline-flex; margin-top: 2px; }
.digest-upsell-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.digest-upsell p { font-size: 13px; color: var(--text-2); margin: 0 0 14px; max-width: 52ch; }