/* ============================================================
   Dashboard — Bold Modern SaaS (dark sidebar + light workspace)
   Relies on tokens & buttons from theme.css.
   ============================================================ */

/* ---------------- App shell ---------------- */
.app { display:grid; grid-template-columns:264px 1fr; min-height:100vh; }

.side {
  background:var(--ink); color:#fff; display:flex; flex-direction:column;
  padding:20px 16px; gap:6px; position:sticky; top:0; height:100vh;
}
.side .brand { display:flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:700; font-size:18px; color:#fff; padding:6px 8px 16px; letter-spacing:-.02em; }
.side .brand .mark { width:28px; height:28px; border-radius:8px; background:var(--lime); color:var(--ink); display:grid; place-items:center; font-size:15px; }
.side h3 { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.4); margin:18px 8px 8px; }
.side .spacer { flex:1; }

.side-foot { border-top:1px solid rgba(255,255,255,.1); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.user-row { display:flex; align-items:center; gap:10px; padding:0 6px; }
.user-row .avatar { width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:grid; place-items:center; font-weight:700; font-size:15px; flex:0 0 auto; }
.user-row #user-email { font-size:13px; color:rgba(255,255,255,.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side .pill { background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); align-self:flex-start; }
.side .pill.ok { background:rgba(196,248,42,.15); color:var(--lime); }
.side .pill.bad { background:rgba(210,63,63,.2); color:#ff9a9a; }

/* sidebar buttons restyled for dark bg */
.side .btn { background:rgba(255,255,255,.08); color:#fff; }
.side .btn:hover { background:rgba(255,255,255,.14); }
.side .btn.primary { background:var(--lime); color:var(--ink); box-shadow:none; }
.side .btn.primary:hover { background:var(--lime-600); }

/* bot list */
.bot-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
.bot-list li { padding:10px 12px; border-radius:10px; cursor:pointer; font-size:14.5px; font-weight:500;
  color:rgba(255,255,255,.78); display:flex; align-items:center; gap:9px; transition:background .15s; }
.bot-list li::before { content:"🤖"; font-size:14px; }
.bot-list li:hover { background:rgba(255,255,255,.08); color:#fff; }
.bot-list li.active { background:var(--lime); color:var(--ink); font-weight:600; }

/* ---------------- Main workspace ---------------- */
.main { padding:34px 40px 60px; overflow:auto; max-width:1240px; }

/* Bot panel: forms on the left, a contextual help panel filling the right space.
   Explicit row/column placement so the (one visible) tabpane and the docs panel
   always share a row, regardless of which pane is shown. */
#bot-panel:not(.hidden) { display:grid; grid-template-columns:minmax(0,1fr) 320px;
  column-gap:34px; align-items:start; }
#bot-panel .panel-head, #bot-panel .tabs { grid-column:1 / -1; }
#bot-panel .panel-head { grid-row:1; }
#bot-panel .tabs { grid-row:2; }
#bot-panel .tabpane { grid-row:3; grid-column:1; }
#tab-docs { grid-row:3; grid-column:2; position:sticky; top:34px; }

/* Contextual help panel */
.tab-docs { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 22px 18px; }
.tab-docs .doc-kicker { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--lime-700); }
.tab-docs h4 { font-family:var(--font-display); font-size:18px; margin:6px 0 8px; }
.tab-docs .doc-intro { font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 14px; }
.tab-docs .doc-steps { list-style:none; padding:0; margin:0; counter-reset:doc; display:flex; flex-direction:column; gap:11px; }
.tab-docs .doc-steps li { position:relative; padding-left:30px; font-size:13.5px; line-height:1.5; color:var(--ink); counter-increment:doc; }
.tab-docs .doc-steps li::before { content:counter(doc); position:absolute; left:0; top:-1px; width:21px; height:21px;
  background:var(--ink); color:var(--lime); border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; }
.tab-docs .doc-tip { margin:16px 0 0; padding:11px 13px; background:var(--lime-soft); border-radius:var(--r-sm);
  font-size:13px; line-height:1.5; color:var(--lime-700); }
.tab-docs .doc-tip b { color:var(--ink); }

@media (max-width:1080px) {
  #bot-panel:not(.hidden) { display:block; }
  #tab-docs { position:static; margin-top:22px; }
}

.empty { text-align:center; margin-top:8vh; }
.empty .big-ic { font-size:64px; }
.empty h2 { font-size:34px; margin:18px 0 10px; }
.empty p { color:var(--muted); font-size:17px; max-width:42ch; margin:0 auto 26px; }
.empty-cc { font-size:14px; color:var(--lime-700); font-weight:600; margin:-18px 0 26px; }

.panel-head { display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.panel-head h2 { font-size:30px; }
.panel-head .chip.usage { background:var(--lime-soft); color:var(--lime-700); }

/* ---------------- Tabs ---------------- */
.tabs { display:flex; gap:4px; background:var(--paper-2); padding:5px; border-radius:13px;
  margin-bottom:26px; flex-wrap:wrap; width:fit-content; max-width:100%; }
.tab { background:none; border:none; padding:9px 15px; cursor:pointer; font-size:14px; font-weight:500;
  color:var(--ink-soft); border-radius:9px; font-family:var(--font-body); transition:background .15s, color .15s; display:flex; align-items:center; gap:7px; }
.tab:hover { color:var(--ink); }
.tab.active { background:#fff; color:var(--ink); font-weight:600; box-shadow:var(--shadow); }

/* ---------------- Cards & forms ---------------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; margin-bottom:20px; max-width:760px; box-shadow:var(--shadow); }
.card h3 { font-size:20px; margin:0 0 4px; }
.card .card-sub { color:var(--muted); font-size:14px; margin:0 0 18px; }
.card h3 + label, .card h3 + .card-sub + label { margin-top:8px; }

label { display:block; font-size:13.5px; font-weight:600; margin:16px 0 6px; }
label.checkbox { font-weight:500; display:flex; align-items:center; gap:9px; margin:14px 0; cursor:pointer; }
input, select, textarea {
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 4px var(--lime-soft); }
input[type=color] { height:46px; padding:5px; cursor:pointer; }
input[type=checkbox] { width:20px; height:20px; accent-color:var(--ink); cursor:pointer; flex:0 0 auto; }
textarea { min-height:100px; resize:vertical; }

.result { margin-top:14px; font-size:13.5px; color:var(--ink-soft); white-space:pre-wrap; }
.result:empty { display:none; }

.doc-list { list-style:none; padding:0; margin:0; }
.doc-list li { padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }
.doc-list li:last-child { border-bottom:none; }
.doc-list li small { color:var(--muted); }

/* ---------------- Knowledge base: source picker ---------------- */
.src-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 20px; }
.src-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink-soft);
  font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s; }
.src-tab span { font-size:15px; line-height:1; }
.src-tab:hover { border-color:var(--ink); }
.src-tab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.src-pane { animation:fade .2s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.hint { color:var(--muted); font-size:13px; margin:10px 0 0; line-height:1.5; }
.linkbtn { background:none; border:none; padding:0; width:auto; color:var(--lime-700);
  font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }

/* Dropzone */
.dropzone { border:2px dashed var(--line); border-radius:var(--r); padding:34px 20px;
  text-align:center; background:var(--paper); transition:border-color .15s, background .15s; cursor:default; }
.dropzone.over { border-color:var(--ink); background:var(--lime-soft); }
.dropzone .dz-ic { font-size:34px; line-height:1; margin-bottom:8px; }
.dropzone .dz-text { font-size:14.5px; margin:0; }
.dropzone .dz-sub { color:var(--muted); font-size:12.5px; margin:8px 0 0; }
.file-chip { display:inline-block; margin-top:14px; padding:8px 14px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }

/* In-progress crawl jobs */
.job-list { list-style:none; padding:0; margin:0; }
.job-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:14px; }
.job-row:last-child { border-bottom:none; }
.job-row small { display:block; color:var(--muted); margin-top:2px; }
.job-row.done .job-ic { color:#16a34a; font-weight:700; }
.job-row.error .job-ic { color:#dc2626; font-weight:700; }
.job-ic { font-size:16px; line-height:1.4; flex:0 0 auto; }
.job-spin { flex:0 0 auto; width:15px; height:15px; margin-top:2px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--ink); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Source rows with icon + remove */
.doc-row { display:flex; align-items:center; gap:13px; }
.doc-ic { font-size:19px; line-height:1; flex:0 0 auto; }
.doc-meta { flex:1 1 auto; min-width:0; }
.doc-meta strong { display:block; }
.doc-meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-del { flex:0 0 auto; width:auto; padding:7px 13px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--muted); font:inherit; font-size:12.5px;
  font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.doc-del:hover { border-color:#dc2626; color:#dc2626; background:#fef2f2; }
.doc-del:disabled { opacity:.5; cursor:default; }

/* ---------------- Test chat ---------------- */
.test-chat { border:1px solid var(--line); border-radius:var(--r); height:360px; overflow-y:auto;
  padding:16px; background:var(--paper); margin-bottom:12px; }
.msg { margin:8px 0; padding:11px 15px; border-radius:16px; max-width:82%; font-size:14.5px; line-height:1.45; }
.msg.user { background:var(--ink); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.msg.bot { background:var(--paper-2); border-bottom-left-radius:5px; }
.msg .conf { display:block; font-size:11px; opacity:.6; margin-top:5px; }
.chat-input-row { display:flex; gap:10px; }
.chat-input-row input { flex:1; }
.chat-input-row .btn { margin:0; }

/* ---------------- Stats / analytics ---------------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.stat .num { font-family:var(--font-display); font-size:32px; font-weight:700; }
.stat .lbl { font-size:13px; color:var(--muted); margin-top:4px; }

/* ---------------- Tables ---------------- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:11px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
tr:last-child td { border-bottom:none; }

/* ---------------- Embed code ---------------- */
.embed-code { background:var(--ink); color:#d8f9a0; padding:18px; border-radius:var(--r);
  overflow-x:auto; font-size:12.5px; white-space:pre-wrap; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.6; }

/* ---------------- Plan cards (billing) ---------------- */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-bottom:22px; }
.plan-card { background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:26px; position:relative; }
.plan-card.current { border-color:var(--ink); box-shadow:var(--shadow); }
.plan-card h3 { font-size:21px; }
.plan-card .price { font-family:var(--font-display); font-size:38px; font-weight:700; margin:6px 0 2px; }
.plan-card .price small { font-size:14px; color:var(--muted); font-weight:500; }
.plan-card ul { list-style:none; padding:0; margin:16px 0; font-size:14px; }
.plan-card li { padding:6px 0 6px 24px; position:relative; color:var(--ink-soft); }
.plan-card li::before { content:"✓"; position:absolute; left:0; color:var(--lime-700); font-weight:700; }
.plan-badge { display:inline-block; font-size:12px; font-weight:600; background:var(--lime-soft); color:var(--lime-700); padding:6px 12px; border-radius:8px; }

/* ---------------- Auth gate (minimal split) ---------------- */
.auth-screen { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
  background:var(--paper); overflow:hidden; padding:24px; }
.auth-screen::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:var(--lime); filter:blur(160px); opacity:.10; top:-200px; right:-140px; }
.auth-shell { position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(860px, 100%);
  min-height:520px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:0 40px 90px rgba(14,15,12,.10); }

/* left brand panel — minimal */
.auth-aside { position:relative; background:var(--ink); color:#fff; padding:46px 44px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth-aside::after { content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  background:var(--lime); filter:blur(130px); opacity:.13; bottom:-130px; left:-90px; }
.auth-logo { position:relative; z-index:1; display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:17px; color:#fff; }
.auth-logo .mark { width:28px; height:28px; border-radius:8px; background:var(--lime); color:var(--ink);
  display:grid; place-items:center; font-size:15px; }
.auth-aside-mid { position:relative; z-index:1; }
.auth-headline { font-family:var(--font-display); font-weight:600; font-size:36px; line-height:1.06; letter-spacing:-.025em; color:#fff; }
.auth-tagline { color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.55; margin:18px 0 0; max-width:28ch; }
.auth-foot-note { position:relative; z-index:1; color:rgba(255,255,255,.38); font-size:12px; letter-spacing:.03em; }

/* right form — minimal */
.auth-card { display:flex; align-items:center; justify-content:center; padding:46px 44px; background:#fff; }
.auth-card-inner { width:100%; max-width:312px; }
.auth-mobile-brand { display:none; }
.auth-title { font-family:var(--font-display); font-weight:600; font-size:25px; letter-spacing:-.01em; }
.auth-sub { color:var(--muted); font-size:14px; margin:8px 0 26px; }
.auth-card input { width:100%; padding:13px 15px; margin:0; }
#auth-email { margin-bottom:12px; }
.auth-pass { position:relative; margin-bottom:8px; }
#auth-password { padding-right:46px; }
.auth-eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none;
  cursor:pointer; color:var(--muted); padding:7px; border-radius:8px; display:grid; place-items:center; margin:0; }
.auth-eye:hover, .auth-eye.on { color:var(--ink); }
.auth-eye svg { width:18px; height:18px; }
.auth-card .btn { margin-top:8px; }
.auth-error { color:var(--bad); font-size:13px; margin-top:12px; min-height:16px; text-align:center; }
.auth-toggle { text-align:center; font-size:14px; color:var(--muted); margin:20px 0 0; }
.auth-toggle a { color:var(--ink); font-weight:600; cursor:pointer; }

/* "or" divider + Google button */
.auth-or { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:13px; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:var(--line); }
.google-btn { display:flex; justify-content:center; }

@media (max-width:720px){
  .auth-shell { grid-template-columns:1fr; max-width:400px; min-height:0; }
  .auth-aside { display:none; }
  .auth-card { padding:38px 28px; }
  .auth-mobile-brand { display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:16px; }
  .auth-title, .auth-sub { text-align:center; }
}

/* ---------------- Onboarding wizard ---------------- */
.wizard { position:fixed; inset:0; z-index:2500; display:none; align-items:center; justify-content:center;
  background:rgba(14,15,12,.55); backdrop-filter:blur(6px); padding:20px; }
.wizard.open { display:flex; }
.wiz-card { background:var(--paper); border-radius:var(--r-xl); width:680px; max-width:96vw; max-height:92vh;
  overflow:auto; box-shadow:var(--shadow-lg); padding:0; }
.wiz-top { display:flex; align-items:center; justify-content:space-between; padding:22px 28px 0; }
.wiz-steps { display:flex; gap:8px; }
.wiz-dot { width:30px; height:5px; border-radius:99px; background:var(--line); transition:background .3s; }
.wiz-dot.on { background:var(--lime); }
.wiz-dot.done { background:var(--ink); }
.wiz-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--muted); line-height:1; }
.wiz-body { padding:14px 28px 8px; }
.wiz-body h2 { font-size:27px; margin-bottom:6px; }
.wiz-body .lead { color:var(--ink-soft); margin:0 0 22px; }
.wiz-foot { display:flex; justify-content:space-between; align-items:center; padding:18px 28px 26px; }
.wiz-foot .btn { margin:0; }
.wiz-pane { display:none; }
.wiz-pane.show { display:block; animation:wizIn .35s var(--ease); }
@keyframes wizIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.tpl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tpl { text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  padding:16px; cursor:pointer; transition:border-color .15s, transform .15s; font-family:inherit; }
.tpl:hover { transform:translateY(-3px); border-color:#cfcfc0; }
.tpl.sel { border-color:var(--ink); box-shadow:0 0 0 3px var(--lime-soft); }
.tpl .emoji { font-size:26px; }
.tpl .t-name { font-weight:600; font-size:15.5px; margin-top:8px; }
.tpl .t-desc { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; }

.wiz-done { text-align:center; padding:10px 0; }
.wiz-done .check { width:72px; height:72px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:grid; place-items:center; font-size:38px; margin:0 auto 16px; }

/* Inline wizard test chat */
.wiz-test { margin:16px auto 0; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; max-width:400px; overflow:hidden; text-align:left; }
.wiz-test-chat { height:180px; overflow-y:auto; padding:12px; background:var(--paper); }
.wiz-test-msg { margin:6px 0; padding:9px 13px; border-radius:14px; max-width:85%; font-size:13.5px; line-height:1.45; }
.wiz-test-msg.bot { background:var(--paper-2); border-bottom-left-radius:4px; }
.wiz-test-msg.user { background:var(--ink); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.wiz-test-input-row { display:flex; gap:6px; padding:8px; border-top:1px solid var(--line); }
.wiz-test-input-row input { flex:1; padding:10px 12px; font-size:13.5px; }
.wiz-test-input-row .btn { width:auto; padding:9px 16px; margin:0; }

/* Embed snippet inside wizard */
.wiz-embed { margin-top:16px; padding:16px; background:var(--paper-2); border-radius:var(--r); text-align:left; }
.wiz-embed label { font-size:12px; margin:0 0 8px; }
.wiz-embed-hint { font-size:12px; color:var(--muted); margin-top:10px; }

/* ---------------- Responsive ---------------- */
@media (max-width:820px){
  .app { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 16px; }
  .side .brand { padding:0; }
  .side h3, .side .spacer { display:none; }
  .side-foot { border:none; padding:0; flex-direction:row; align-items:center; margin-left:auto; }
  .bot-list { flex-direction:row; flex-wrap:wrap; width:100%; }
  .main { padding:22px 18px 50px; }
  .tpl-grid { grid-template-columns:1fr; }
}

/* ---------------- Plan gating (locked features) ---------------- */
/* One cohesive "upsell" panel — shown whenever a whole feature card is locked.
   `.feat-locked` hides the card's real content so only the upsell shows. */
.feat-locked { text-align:center; }
.feat-locked > *:not(.upsell) { display:none !important; }
.upsell { display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 18px 8px; }
.upsell-ic { width:58px; height:58px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:grid; place-items:center; margin-bottom:18px; box-shadow:0 8px 22px rgba(196,248,42,.45); }
.upsell h4 { font-family:var(--font-display); font-size:20px; }
.upsell p { color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:10px 0 20px; max-width:44ch; }
.upsell .upgrade-btn { padding:11px 26px; }
.upsell-foot { color:var(--muted); font-size:12px; margin-top:13px; letter-spacing:.01em; }
.src-pane .upsell { padding:14px 10px 6px; }   /* lighter inside the train pane */

/* Clickable tier badge appended to a locked field's <label>. */
.tier-badge { display:inline-flex; align-items:center; gap:5px; margin-left:9px; vertical-align:middle;
  font-size:11px; font-weight:700; letter-spacing:.02em; background:var(--ink); color:var(--lime);
  padding:3px 10px; border-radius:99px; cursor:pointer; transition:transform .12s var(--ease); }
.tier-badge::before { content:""; width:9px; height:9px; flex:0 0 auto;
  background:currentColor; -webkit-mask:var(--lock-mask) center/contain no-repeat; mask:var(--lock-mask) center/contain no-repeat; }
.tier-badge:hover { transform:translateY(-1px); }
:root { --lock-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0z'/%3E%3C/svg%3E"); }

/* A gated field reads as intentionally locked, not broken. */
.field-locked { background:var(--paper-2) !important; color:var(--muted) !important; cursor:not-allowed; }

/* Inline "X is on Pro" hint under the channel dropdown. */
.ch-hint { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.ch-hint::before { content:""; width:12px; height:12px; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--lock-mask) center/contain no-repeat; mask:var(--lock-mask) center/contain no-repeat; }
.ch-hint a { color:var(--lime-700); font-weight:600; }

/* Locked source tab (e.g. document upload on Free). */
.src-tab.locked { opacity:.6; }
.src-tab.locked::after { content:""; display:inline-block; width:11px; height:11px; margin-left:6px;
  background:currentColor; -webkit-mask:var(--lock-mask) center/contain no-repeat; mask:var(--lock-mask) center/contain no-repeat; }

/* Tier badge on a nav tab (e.g. Conversations — Starter) and inline headings. */
.tab-tier { display:inline-block; margin-left:6px; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  background:var(--ink); color:var(--lime); padding:2px 6px; border-radius:99px; vertical-align:middle; text-transform:uppercase; }
h3 .tab-tier { font-size:10px; margin-left:8px; }

/* ---------------- Upgrade / support modal ---------------- */
.modal-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:rgba(14,15,12,.55); backdrop-filter:blur(3px); animation:modalFade .18s var(--ease); }
.modal-overlay.hidden { display:none; }
@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
.modal-card { position:relative; width:min(440px,100%); background:#fff; border-radius:var(--r-lg);
  padding:34px 30px 26px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.3); animation:modalPop .22s var(--ease); }
@keyframes modalPop { from { transform:translateY(12px) scale(.97); opacity:0; } to { transform:none; opacity:1; } }
.modal-close { position:absolute; top:12px; right:14px; width:auto; background:none; border:none; font-size:26px;
  line-height:1; color:var(--muted); cursor:pointer; padding:2px 6px; }
.modal-close:hover { color:var(--ink); }
.modal-ic { width:60px; height:60px; border-radius:50%; margin:0 auto 16px; background:var(--lime); color:var(--ink);
  display:grid; place-items:center; font-size:26px; box-shadow:0 8px 22px rgba(196,248,42,.45); }
.modal-card h3 { font-family:var(--font-display); font-size:22px; }
.modal-body { color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:10px auto 14px; max-width:42ch; }
.modal-feats { list-style:none; text-align:left; max-width:300px; margin:0 auto 20px; }
.modal-feats li { padding:6px 0 6px 26px; position:relative; color:var(--ink); font-size:14px; }
.modal-feats li::before { content:"✓"; position:absolute; left:2px; color:var(--lime-700); font-weight:800; }
.modal-actions { display:flex; gap:10px; justify-content:center; }
.modal-actions .btn { width:auto; padding:11px 22px; }

/* ---------------- À-la-carte credits card ---------------- */
.credits-row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.credits-row .btn { width:auto; flex:0 0 auto; }
#credits-balance { color:var(--lime-700); font-weight:600; }

/* ---------------- Conversations + possible leads ---------------- */
.muted { color:var(--muted); font-size:14px; }
.convo-layout { display:grid; grid-template-columns:minmax(200px,260px) 1fr; gap:18px; margin-top:14px; }
.session-list { list-style:none; max-height:440px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r); }
.session-list li { display:flex; flex-direction:column; gap:2px; padding:11px 13px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.session-list li:last-child { border-bottom:none; }
.session-list li:hover { background:var(--lime-soft); }
.session-list li.active { background:var(--ink); color:#fff; }
.session-list li.active small { color:rgba(255,255,255,.7); }
.session-list li strong { font-size:14px; font-weight:600; }
.session-list li small { font-size:11.5px; color:var(--muted); }
.session-list li.muted { cursor:default; }
.transcript-view { border:1px solid var(--line); border-radius:var(--r); padding:16px; max-height:440px; overflow-y:auto; background:var(--paper-2); }
.t-msg { margin-bottom:12px; max-width:85%; }
.t-msg.user { margin-left:auto; text-align:right; }
.t-role { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.t-bubble { display:inline-block; text-align:left; margin-top:3px; padding:9px 13px; border-radius:var(--r-sm); font-size:14px; line-height:1.5; white-space:pre-wrap; }
.t-msg.bot .t-bubble { background:#fff; border:1px solid var(--line); }
.t-msg.user .t-bubble { background:var(--ink); color:#fff; }

.lead-scores { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.lead-score { display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; border-left-width:4px; }
.lead-score.hot { border-left-color:#e5533c; }
.lead-score.warm { border-left-color:#e0a92e; }
.lead-score.cold { border-left-color:var(--line); }
.ls-score { font-family:var(--font-display); font-size:26px; font-weight:700; width:48px; text-align:center; flex:0 0 auto; }
.lead-score.hot .ls-score { color:#e5533c; }
.lead-score.warm .ls-score { color:#c8881a; }
.ls-meta { flex:1; display:flex; flex-direction:column; gap:2px; }
.ls-meta strong { font-size:14px; }
.ls-meta small { font-size:13px; color:var(--ink-soft); }
.ls-meta .ls-contact { color:var(--lime-700); font-weight:600; }
.ls-open { flex:0 0 auto; white-space:nowrap; }

@media (max-width:760px) { .convo-layout { grid-template-columns:1fr; } }