/* ==========================================================================
 * mail2win — theme + components. One brand color (blue); neutrals for the rest;
 * red only for errors/destructive actions. Colors are RGB triplets so Tailwind's
 * opacity modifiers work (bg-brand/10). Theme = <html data-theme="light|dark">,
 * set before paint by the layout (system follows prefers-color-scheme).
 * ========================================================================== */

@font-face {
  font-family: "Inter Variable";
  src: url("../vendor/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --page: 255 255 255;    --panel: 255 255 255;   --elevated: 246 247 249;  --input: 255 255 255;
  --line: 234 236 240;    --line-2: 219 223 230;
  --txt: 15 17 21;        --muted: 88 95 108;     --dim: 145 151 163;
  --brand: 0 144 252;     --brand-h: 0 122 222;   --on-brand: 255 255 255;
  --danger: 220 38 38;    --shadow: 15 23 42;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: 10 11 14;       --panel: 17 19 23;      --elevated: 24 27 32;     --input: 13 15 18;
  --line: 36 39 46;       --line-2: 48 52 60;
  --txt: 243 244 246;     --muted: 158 165 178;   --dim: 104 110 124;
  --brand: 26 155 255;    --brand-h: 0 133 235;   --on-brand: 255 255 255;
  --danger: 248 113 113;  --shadow: 0 0 0;
}

html, body { background: rgb(var(--page)); }
body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
::selection { background: rgb(var(--brand) / .2); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--line-2)); border-radius: 6px; border: 2px solid rgb(var(--page)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--dim) / .6); }

/* Icons (Lucide) */
.ic { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.ic-lg { width: 20px; height: 20px; }
.btn .ic, .btn-ghost .ic { margin-right: 2px; }

.err { color: rgb(var(--danger)) !important; }
.nil { font-size: 12px; color: rgb(var(--dim)); }

/* ---- App shell: sidebar + top bar ------------------------------------------- */
:root { --sb-w: 264px; }

/* One horizontal safe zone for every page (and the top bar): same side padding, same max width. */
:root { --safe-x: 32px; --page-max: 1500px; }
@media (max-width: 640px) { :root { --safe-x: 14px; } }
.page { max-width: var(--page-max); margin: 0 auto; padding: 32px var(--safe-x) 96px; }
:root.sb-collapsed { --sb-w: 72px; }
.app-main { margin-left: var(--sb-w); min-width: 0; transition: margin-left .2s ease; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 120; display: flex; flex-direction: column; gap: 18px;
  padding: 14px 12px; background: rgb(var(--panel)); border-right: 1px solid rgb(var(--line)); overflow: hidden; transition: width .2s ease, transform .2s ease; }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 4px 0 8px; }
.sb-logo { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.brand-logo { height: 24px; width: auto; display: block; }
.brand-logo.for-dark, .sb-mark { display: none; }
:root[data-theme="dark"] .brand-logo.for-light { display: none; }
:root[data-theme="dark"] .brand-logo.for-dark { display: block; }
.sb-mark { width: 32px; height: 32px; border-radius: 9px; }
.sb-toggle { border: 0; background: transparent; color: rgb(var(--dim)); width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-toggle:hover { background: rgb(var(--elevated)); color: rgb(var(--txt)); }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-link { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: rgb(var(--muted)); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.sb-link .ic { width: 18px; height: 18px; }
.sb-link:hover { background: rgb(var(--elevated)); color: rgb(var(--txt)); }
.sb-link.active { background: rgb(var(--brand) / .1); color: rgb(var(--brand)); font-weight: 600; }

.sb-section { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.sb-section[hidden] { display: none; }
.sb-grow { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.sb-label { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 4px; font-size: 11px; font-weight: 600;
  color: rgb(var(--dim)); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.sb-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: rgb(var(--brand)); color: rgb(var(--on-brand));
  font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.sb-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: rgb(var(--txt)); min-width: 0; }
.sb-item:hover { background: rgb(var(--elevated)); }
.sb-item.active { background: rgb(var(--brand) / .1); }
.sb-item.active .sb-name { color: rgb(var(--brand)); }
.sb-avatar { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--elevated)); border: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-weight: 650; font-size: 13px; }
.sb-item.active .sb-avatar, .sb-avatar.live { background: rgb(var(--brand) / .12); border-color: transparent; color: rgb(var(--brand)); }
.sb-dot-wrap { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--dim)); }
.sb-item.active .sb-dot { background: rgb(var(--brand)); }
.sb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sb-name { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sub { font-size: 11.5px; color: rgb(var(--dim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-empty { padding: 6px 12px; font-size: 12.5px; color: rgb(var(--dim)); }
.sb-stop { margin-left: auto; border: 0; background: none; color: rgb(var(--dim)); cursor: pointer; padding: 6px; border-radius: 7px; display: inline-flex; flex-shrink: 0; }
.sb-stop:hover { color: rgb(var(--danger)); background: rgb(var(--danger) / .1); }
.sb-stop .ic { width: 14px; height: 14px; }
.sb-del { opacity: 0; }   /* a chat's delete button shows on hover */
.sb-item:hover .sb-del, .sb-del:focus-visible { opacity: 1; }
@media (hover: none) { .sb-del { opacity: .6; } }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--brand) / .25); border-top-color: rgb(var(--brand)); animation: spin .8s linear infinite; display: inline-block; }

/* Collapsed (desktop): icons and avatars only; names show as tooltips */
@media (min-width: 1024px) {
  :root.sb-collapsed .sb-head { flex-direction: column; height: auto; gap: 10px; padding: 0; }
  :root.sb-collapsed .brand-logo { display: none !important; }
  :root.sb-collapsed .sb-mark { display: block; }
  :root.sb-collapsed .sb-link { justify-content: center; padding: 0; }
  :root.sb-collapsed .sb-link span, :root.sb-collapsed .sb-text, :root.sb-collapsed .sb-label span:first-child,
  :root.sb-collapsed .sb-stop, :root.sb-collapsed .sb-empty { display: none; }
  :root.sb-collapsed .sb-label { justify-content: center; padding: 0 0 4px; }
  :root.sb-collapsed .sb-item { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* Mobile: the sidebar slides in over the page */
.sb-backdrop, .sb-burger { display: none !important; }
@media (max-width: 1023px) {
  .app-main { margin-left: 0; }
  .sidebar { width: 280px; transform: translateX(-100%); box-shadow: 0 20px 60px rgb(var(--shadow) / .25); }
  :root.sb-open .sidebar { transform: none; }
  :root.sb-open .sb-backdrop { display: block !important; position: fixed; inset: 0; z-index: 110; background: rgb(0 0 0 / .4); }
  .sb-burger { display: inline-flex !important; }
}

/* Three columns so the middle (the chat's documents) stays centred whatever the sides hold. */
.topbar { position: sticky; top: 0; z-index: 100; height: 64px; display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(max-content, 1fr); align-items: center;
  gap: 16px; padding: 0 var(--safe-x); background: rgb(var(--page) / .85); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--line)); }
.topbar-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The top bar measures itself (the chat can dock beside it), not the window. */
.topbar { container-type: inline-size; }
@container (max-width: 1000px) { .map-label { display: none; } }
.topbar-center { display: flex; justify-content: center; min-width: 0; }
/* Narrow: the title takes what's left, the documents button sits at its right */
@media (max-width: 900px) { .topbar { grid-template-columns: minmax(0, 1fr) auto auto; } }
@media (max-width: 640px) { .topbar { gap: 6px; } .topbar-title { font-size: 15px; } .topbar .theme-switch { display: none; } }

.tool-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 500;
  color: rgb(var(--muted)); background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tool-btn:hover { color: rgb(var(--txt)); background: rgb(var(--elevated)); }

/* Chat search, in the sidebar */
.search { position: relative; width: 100%; min-width: 0; }
.sb-search { z-index: 5; flex-shrink: 0; }
.sb-search input { height: 38px; font-size: 13px; }
@media (max-width: 1023px) { .sb-search input { font-size: 16px; } }   /* phones don't zoom into a 16px field */
@media (min-width: 1024px) { :root.sb-collapsed .sb-search { display: none; } }
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--dim)); pointer-events: none; }
.search input { width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: 11px; font: inherit; font-size: 13.5px; color: rgb(var(--txt));
  background: rgb(var(--elevated)); border: 1px solid transparent; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.search input::placeholder { color: rgb(var(--dim)); }
.search input:focus { background: rgb(var(--input)); border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); }
.search input::-webkit-search-cancel-button { display: none; }
.search-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: rgb(var(--panel)); border: 1px solid rgb(var(--line));
  border-radius: 14px; box-shadow: 0 16px 40px rgb(var(--shadow) / .18); padding: 6px; z-index: 200; max-height: 420px; overflow: auto; }
.search-menu.hidden { display: none; }
.search-hit { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: rgb(var(--txt)); font-size: 13px; }
.search-hit.active, .search-hit:hover { background: rgb(var(--elevated)); }
.search-hit.active .sb-avatar { background: rgb(var(--brand) / .12); color: rgb(var(--brand)); border-color: transparent; }
.search-empty { padding: 14px 10px; color: rgb(var(--dim)); font-size: 13px; text-align: center; }

/* Segmented switches (language, theme) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgb(var(--elevated)); border: 1px solid rgb(var(--line)); flex-shrink: 0; }
.seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 7px; border-radius: 7px;
  border: 0; background: transparent; color: rgb(var(--dim)); cursor: pointer; font: 600 11.5px/1 inherit; letter-spacing: .02em; transition: background .15s, color .15s; }
.seg button:hover { color: rgb(var(--txt)); }
.seg button.on { background: rgb(var(--panel)); color: rgb(var(--brand)); box-shadow: 0 1px 2px rgb(var(--shadow) / .12); }
.seg .ic { width: 15px; height: 15px; }
@media (max-width: 640px) { #langSwitch { display: none; } }
/* The sidebar's own language and theme switches: phones only (the top bar keeps them elsewhere) */
.sb-foot { display: none; }
@media (max-width: 640px) { .sb-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgb(var(--line)); } }

/* Confirm dialog */
.dlg-wrap { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); animation: fadeIn .15s ease-out; }
.dlg { width: 100%; max-width: 420px; background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 18px; padding: 24px;
  box-shadow: 0 30px 80px rgb(var(--shadow) / .3); animation: slideUp .18s ease-out; }
.dlg-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
.dlg-ic.danger { background: rgb(var(--danger) / .1); color: rgb(var(--danger)); }
.dlg-ic .ic { width: 20px; height: 20px; }
.dlg h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 6px; }
.dlg p { font-size: 13.5px; line-height: 1.55; color: rgb(var(--muted)); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dlg-actions .btn-ghost { padding: 10px 16px; font-size: 13.5px; }
.btn.btn-danger { background-color: rgb(var(--danger)); color: #fff; }
.btn.btn-danger:hover:not(:disabled) { background-color: rgb(var(--danger)); filter: brightness(.92); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dlg-wrap.hidden { display: none; }
.dlg.nc-dlg { max-width: 520px; }
.nc-mode { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(var(--line)); background: rgb(var(--elevated) / .5); }
.nc-mode .field { margin-top: 4px; }
#nModeHint.warn { color: rgb(var(--warn, 217 119 6)); }
.dash-ic.spin .ic { animation: spin 1.2s linear infinite; }
.ic.spin { animation: spin 1.1s linear infinite; }

.inp:disabled { background: rgb(var(--elevated)); color: rgb(var(--muted)); cursor: not-allowed; }

/* ---- Scraper page ------------------------------------------------------- */
.leaflet-container { font-family: inherit; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.leaflet-popup-content { font: 13px/1.5 inherit; color: #111; }
.leaflet-popup-content a { color: rgb(0 112 214); }
#map { background: rgb(var(--elevated)); }

.btn.stop { background-color: rgb(var(--danger)) !important; color: #fff !important; }
.btn.stop:hover:not(:disabled) { filter: brightness(.95); }
.btn.purple { background-color: rgb(var(--brand)) !important; }
.btn.purple:hover:not(:disabled) { background-color: rgb(var(--brand-h)) !important; }

@keyframes pulseB { 0%,100% { box-shadow: 0 0 0 3px rgb(var(--brand) / .18); } 50% { box-shadow: 0 0 0 6px rgb(var(--brand) / 0); } }
@keyframes flashRow { from { background: rgb(var(--brand) / .12); } to { background: transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes barSweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.dot-green, .dot-purple { background-color: rgb(var(--brand)) !important; animation: pulseB 1.4s ease-in-out infinite; }
.row-new { animation: flashRow 1.2s ease-out; }
.row-selected { background: rgb(var(--brand) / .07) !important; box-shadow: inset 3px 0 0 rgb(var(--brand)); }

th[data-sort="asc"]::after { content: " ▲"; font-size: 9px; color: rgb(var(--brand)); }
th[data-sort="desc"]::after { content: " ▼"; font-size: 9px; color: rgb(var(--brand)); }
#rows tr { transition: background .12s; }
#rows tr:hover { background: rgb(var(--elevated) / .7); }

.biz-cell { min-width: 170px; max-width: 240px; width: 240px; }
.biz-name { font-weight: 600; color: rgb(var(--txt)); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; }
.biz-name:hover { color: rgb(var(--brand)); }
.em-cell { min-width: 380px; }
.em-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgb(var(--line)); }
.em-row:last-of-type { border-bottom: 0; }
.em-row:first-child { padding-top: 0; }
.em-addr { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 12.5px ui-monospace, SFMono-Regular, Consolas, monospace; color: rgb(var(--txt)); text-decoration: none; }
.em-addr:hover { color: rgb(var(--brand)); }
.em-tags { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.em-extra { display: none; }
.em-open .em-extra { display: flex; }
.em-toggle { margin-top: 4px; background: none; border: 0; padding: 0; color: rgb(var(--brand)); font-size: 12px; cursor: pointer; }
.em-toggle:hover { text-decoration: underline; }

.c-del { background: transparent; border: 1px solid transparent; color: rgb(var(--dim)); border-radius: 8px; padding: 5px 7px; cursor: pointer; }
.c-del:hover { color: rgb(var(--danger)); background: rgb(var(--danger) / .08); }

#colsMenu label { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; color: rgb(var(--txt)); cursor: pointer; border-radius: 8px; margin: 0 4px; }
#colsMenu label:hover { background: rgb(var(--elevated)); }
#colsMenu input { width: 14px; height: 14px; accent-color: rgb(var(--brand)); }

#locList li, #qList li { padding: 9px 12px; cursor: pointer; font-size: 13px; color: rgb(var(--txt)); display: flex; gap: 8px; align-items: baseline; }
#locList li small, #qList li small { color: rgb(var(--dim)); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; margin-left: auto; white-space: nowrap; }
#locList li.active, #locList li:hover, #qList li.active, #qList li:hover { background: rgb(var(--elevated)); }
#locList li.empty, #qList li.empty { color: rgb(var(--dim)); cursor: default; }
#qList li { border-radius: 8px; }
#qList li b { font-weight: 600; color: rgb(var(--brand)); }
#qList li small.g { color: rgb(var(--brand)); }

.bar-running { background-image: linear-gradient(90deg, transparent, rgb(var(--brand) / .35), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: barSweep 1.4s linear infinite; }
.tile-spin { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgb(var(--line-2)); border-top-color: rgb(var(--brand)); animation: spin .7s linear infinite; display: none; }
.tile-busy .tile-spin { display: block; }

/* Stat tiles (scraper page) */
.stat { background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat span { font-size: 12px; color: rgb(var(--muted)); }

/* WhatsApp column (brand blue like everything else) */
.wa-chat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: rgb(var(--brand)); background: rgb(var(--brand) / .08); border: 1px solid rgb(var(--brand) / .3); text-decoration: none; }
.wa-chat:hover { background: rgb(var(--brand)); color: rgb(var(--on-brand)); }
.wa-chat .ic { width: 13px; height: 13px; }
.wa-src { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; cursor: help; }
.wa-website { color: rgb(var(--brand)); }
.wa-mobile { color: rgb(var(--muted)); }
.wa-possible { color: rgb(var(--dim)); }

/* Fullscreen modals: only the modal scrolls; its scroll area spans the full width. */
html.modal-open, html.modal-open body { overflow: hidden; }
.modal-full .overflow-auto { overscroll-behavior: contain; }
.mbody { padding-left: max(24px, calc((100% - var(--mw, 1200px)) / 2)); padding-right: max(24px, calc((100% - var(--mw, 1200px)) / 2)); }

/* ---- AI chat ------------------------------------------------------------ */
.chat-bubble.hidden, .chat-panel.hidden { display: none; }
.chat-bubble { position: fixed; right: 24px; bottom: 24px; z-index: 250; display: inline-flex; align-items: center; gap: 8px; height: 48px;
  padding: 0 18px 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: 600 14px/1 inherit;
  background: rgb(var(--brand)); color: rgb(var(--on-brand)); box-shadow: 0 10px 30px rgb(var(--brand) / .35), 0 2px 6px rgb(var(--shadow) / .15);
  transition: transform .15s, background .15s; }
.chat-bubble:hover { background: rgb(var(--brand-h)); transform: translateY(-1px); }
.chat-bubble .bubble-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--on-brand) / .5); }
.chat-bubble .bubble-dot.dot-purple { background: #fff !important; animation: none; box-shadow: 0 0 0 3px rgb(255 255 255 / .35); }
.chat-bubble.open .bubble-label { display: none; }
.chat-bubble.open { padding: 0 14px; }
.chat-bubble.attn { animation: bubblePop .5s ease-out; }
@keyframes bubblePop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

.chat-panel { position: fixed; right: 24px; bottom: 84px; z-index: 250; width: 460px; height: min(680px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden; background: rgb(var(--panel)); border: 1px solid rgb(var(--line));
  border-radius: 20px; box-shadow: 0 24px 60px rgb(var(--shadow) / .22), 0 2px 8px rgb(var(--shadow) / .08); }
.chat-panel:not(.hidden) { animation: slideUp .2s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .chat-panel { left: 8px; right: 8px; width: auto; bottom: 80px; height: 74vh; } .chat-bubble { right: 16px; bottom: 16px; } }
/* Split screen: the chat docks to the right edge at full height; the campaign gets the rest. */
.chat-resizer { display: none; }
:root.chat-docked .app-main { margin-right: var(--chat-w, 50vw); }
:root.chat-docked .chat-panel { top: 0; bottom: 0; right: 0; width: var(--chat-w, 50vw); height: auto; border-radius: 0;
  border-width: 0 0 0 1px; box-shadow: none; animation: none; z-index: 110; }
:root.chat-docked .chat-bubble { display: none; }
:root.chat-docked .chat-head { height: 64px; padding-top: 0; padding-bottom: 0; }
:root.chat-docked .chat-resizer { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; outline: none; }
.chat-resizer::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .15s; }
:root.chat-docked .chat-resizer:hover::after, :root.chat-docked .chat-resizer:focus-visible::after,
:root.chat-resizing .chat-resizer::after { background: rgb(var(--brand)); }
:root.chat-resizing, :root.chat-resizing * { cursor: col-resize !important; user-select: none !important; }
/* MailGPT: a campaign is a full-page chat (its leads live in the conversation: summary card, leads table, breakdown). Advanced sweeps keep the leads page. */
:root.chat-full .app-main .page, :root.chat-full .chat-bubble, :root.chat-full .chat-resizer, :root.chat-full #chatMin, :root.chat-full #chatSplit, :root.chat-full #openMap { display: none !important; }
:root.chat-full .chat-panel { display: flex !important; position: fixed; top: 64px; left: var(--sb-w); right: 0; bottom: 0; width: auto; height: auto;
  border-radius: 0; border-width: 1px 0 0; box-shadow: none; animation: none; z-index: 100; }
:root.chat-full #aiOut, :root.chat-full .chat-compose { padding-inline: max(20px, calc((100% - 820px) / 2)); }
:root.chat-full .chat-compose { padding-bottom: 22px; }
@media (max-width: 1023px) { :root.chat-full .chat-panel { left: 0; } }

.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgb(var(--line)); }
.chat-avatar { width: 34px; height: 34px; border-radius: 11px; background: rgb(var(--brand) / .1); color: rgb(var(--brand)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-icon-btn { border: 0; background: transparent; color: rgb(var(--muted)); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chat-icon-btn:hover { background: rgb(var(--elevated)); color: rgb(var(--txt)); }
#aiOut:empty::before {
  content: "Ask anything about this chat's leads.";
  color: rgb(var(--dim)); font-size: 13px; margin: auto; text-align: center; padding: 0 28px; line-height: 1.6;
}
.chat-compose { border-top: 1px solid rgb(var(--line)); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-input { display: flex; align-items: flex-end; gap: 8px; background: rgb(var(--input)); border: 1px solid rgb(var(--line-2)); border-radius: 14px; padding: 6px 6px 6px 12px; transition: border-color .15s, box-shadow .15s; }
.chat-input:focus-within { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); }
.chat-input textarea { flex: 1; border: 0; outline: 0; background: transparent; color: rgb(var(--txt)); font: inherit; font-size: 13.5px; resize: none; padding: 7px 0; min-height: 22px; max-height: 120px; }
.chat-input textarea::placeholder { color: rgb(var(--dim)); }
.chat-send { width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--brand)); color: rgb(var(--on-brand)); flex-shrink: 0; transition: background .15s; }
.chat-send:hover { background: rgb(var(--brand-h)); }
.chat-send.stop { background: rgb(var(--danger)); }

.msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.55; }
.msg-user { align-self: flex-end; background: rgb(var(--brand)); color: rgb(var(--on-brand)); border-bottom-right-radius: 5px; }
.msg-ai { align-self: flex-start; background: rgb(var(--elevated)); color: rgb(var(--txt)); border-bottom-left-radius: 5px; }
.msg-ai.msg-err { background: rgb(var(--danger) / .08); color: rgb(var(--danger)); }
.msg-note { display: block; margin-top: 4px; font-size: 11px; color: rgb(var(--dim)); font-style: italic; }
.msg-time { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; opacity: .65; font-variant-numeric: tabular-nums; }
.msg-cut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 9px 10px 9px 12px; border-radius: 12px; font-size: 12.5px;
  color: rgb(var(--muted)); background: rgb(var(--elevated)); border: 1px dashed rgb(var(--line-2)); }
.msg-cut > .ic { width: 14px; height: 14px; flex-shrink: 0; color: rgb(var(--dim)); }
.msg-cut span { flex: 1; min-width: 180px; }
.msg-cut .btn-sm { height: 30px; padding: 0 12px; font-size: 12px; gap: 5px; }
.msg-cut .btn-sm .ic { width: 13px; height: 13px; }
.msg-user .msg-time { text-align: right; }
.thinking { display: inline-flex; align-items: center; gap: 6px; color: rgb(var(--muted)); font-style: italic; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--brand)); animation: thinkDot 1.2s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes thinkDot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Markdown in AI replies (marked + DOMPurify) */
.msg.md { white-space: normal; }
.msg.md > :first-child { margin-top: 0; }
.msg.md > :last-child { margin-bottom: 0; }
.msg.md p { margin: 0 0 8px; }
.msg.md h1, .msg.md h2, .msg.md h3, .msg.md h4 { font-weight: 650; line-height: 1.3; margin: 12px 0 6px; }
.msg.md h1 { font-size: 16px; } .msg.md h2 { font-size: 15px; } .msg.md h3, .msg.md h4 { font-size: 14px; }
.msg.md ul, .msg.md ol { margin: 0 0 8px; padding-left: 20px; }
.msg.md ul { list-style: disc; } .msg.md ol { list-style: decimal; }
.msg.md li { margin: 2px 0; } .msg.md li > p { margin: 0; }
.msg.md li::marker { color: rgb(var(--dim)); }
.msg.md strong { font-weight: 650; }
.msg.md em { font-style: italic; }
.msg.md a { color: rgb(var(--brand)); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* Outreach links in replies: struck through once used, like a done to-do */
.msg.md a.outreach.contacted { color: rgb(var(--muted)); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgb(var(--brand) / .7); }
.msg.md code { font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 5px; padding: 1px 5px; }
.msg.md pre { background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; overflow-x: auto; }
.msg.md pre code { background: none; border: 0; padding: 0; white-space: pre; }
.msg.md blockquote { border-left: 3px solid rgb(var(--line-2)); padding-left: 10px; color: rgb(var(--muted)); margin: 0 0 8px; }
.msg.md hr { border: 0; border-top: 1px solid rgb(var(--line-2)); margin: 10px 0; }
.msg.md table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 8px; font-size: 12px; max-width: 100%; }
.msg.md th, .msg.md td { border: 1px solid rgb(var(--line-2)); padding: 5px 8px; text-align: left; }
.msg.md th { background: rgb(var(--panel)); font-weight: 600; }
.msg.md .msg-note { display: block; }

/* Settings › Memory */
.mem-list { display: flex; flex-direction: column; gap: 6px; }
.mem-row { display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 11px; border-radius: 10px; border: 1px solid rgb(var(--line)); background: rgb(var(--elevated)); }
.mem-row > .ic { width: 15px; height: 15px; flex-shrink: 0; color: rgb(var(--brand)); }
.mem-edit { flex: 1; min-width: 0; padding: 6px 4px; font: inherit; font-size: 13px; color: rgb(var(--txt)); background: transparent; border: 0; border-radius: 6px; outline: none; }
.mem-edit:focus { background: rgb(var(--panel)); box-shadow: 0 0 0 2px rgb(var(--brand) / .35); }
.mem-when { flex-shrink: 0; font-size: 11.5px; color: rgb(var(--dim)); }

/* MailGPT: the chat only holds your messages and the assistant's (and its tools'). A search's result is a
 * document chip on the assistant's side; the leads open as a document beside the chat (full screen on a phone). */
.msg-tool { align-self: flex-start; display: flex; flex-direction: column; gap: 8px; max-width: min(560px, 100%); }
.msg-tool .tool-line { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgb(var(--muted)); }
.msg-tool .tool-line .ic { width: 14px; height: 14px; color: rgb(var(--brand)); }
.doc-chip { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 1px 2px rgb(var(--shadow) / .05); transition: border-color .15s, box-shadow .15s; }
.doc-chip:hover { border-color: rgb(var(--brand) / .5); box-shadow: 0 8px 24px rgb(var(--shadow) / .1); }
.doc-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand)); }
.doc-ic .ic { width: 18px; height: 18px; }
.doc-chip .doc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-chip .doc-txt b { font-size: 13.5px; font-weight: 650; color: rgb(var(--txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-chip .doc-txt small { font-size: 12px; color: rgb(var(--dim)); }
.doc-chip .doc-open { flex-shrink: 0; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 650; color: rgb(var(--brand)); background: rgb(var(--brand) / .1); }
.doc-chip.on { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .12); }   /* its document is open */

.doc-panel { position: fixed; top: 64px; right: 0; bottom: 0; z-index: 105; width: var(--doc-w); display: none; flex-direction: column;
  background: rgb(var(--panel)); border-left: 1px solid rgb(var(--line)); }
:root { --doc-w: min(760px, 52vw); }
:root.doc-open .doc-panel { display: flex; }
.doc-panel.doc-in { animation: docIn .2s ease-out; }   /* only when it opens, never on a resize */
:root.doc-open.chat-full .chat-panel { right: var(--doc-w); }
@keyframes docIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.doc-resizer { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; z-index: 5; cursor: col-resize; outline: none; touch-action: none; }
.doc-resizer::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; }
.doc-resizer:hover::after, .doc-resizer:focus-visible::after, :root.doc-resizing .doc-resizer::after { background: rgb(var(--brand)); }
:root.doc-resizing, :root.doc-resizing * { cursor: col-resize !important; user-select: none !important; }
:root.doc-resizing .doc-panel, :root.doc-resizing .chat-panel { transition: none; }
.doc-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 18px; }
.doc-title { font-size: 15px; font-weight: 650; color: rgb(var(--txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: 12px; color: rgb(var(--dim)); }
.doc-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 9px; font-size: 12px; font-weight: 600; text-decoration: none;
  color: rgb(var(--txt)); border: 1px solid rgb(var(--line)); background: rgb(var(--panel)); flex-shrink: 0; }
.doc-btn:hover { border-color: rgb(var(--brand) / .5); color: rgb(var(--brand)); }
.doc-btn .ic { width: 14px; height: 14px; }
.doc-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  background: transparent; color: rgb(var(--muted)); }
.doc-close:hover { background: rgb(var(--elevated)); color: rgb(var(--txt)); }
.doc-close .ic { width: 18px; height: 18px; }
.doc-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.doc-stats span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: rgb(var(--muted)); background: rgb(var(--elevated)); }
.doc-stats .ic { width: 13px; height: 13px; color: rgb(var(--brand)); }
.doc-stats b { color: rgb(var(--txt)); font-variant-numeric: tabular-nums; }
.doc-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: rgb(var(--panel)); }
/* Separate borders: sticky header cells in a collapsed-border table can leave see-through seams while scrolling (worst at fractional zoom). */
.doc-body table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.doc-body th { position: sticky; top: 0; z-index: 2; border-top: 1px solid rgb(var(--line)); border-bottom: 1px solid rgb(var(--line)); text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: rgb(var(--dim)); background: rgb(var(--elevated)); white-space: nowrap; }
.doc-body td { padding: 8px 12px; border-bottom: 1px solid rgb(var(--line)); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; color: rgb(var(--txt)); }
.doc-body td:first-child { color: rgb(var(--dim)); font-variant-numeric: tabular-nums; }
.doc-body td small { color: rgb(var(--dim)); }
.doc-body td a { color: rgb(var(--txt)); text-decoration: none; }
.doc-body td a:hover { color: rgb(var(--brand)); text-decoration: underline; }
.doc-body tr.done td:nth-child(2) a { text-decoration: line-through; text-decoration-color: rgb(var(--brand) / .7); color: rgb(var(--muted)); }
/* Narrow screens: the document takes the whole screen (square corners), with its close button */
@media (max-width: 1023px) {
  .doc-panel { top: 0; left: 0; width: auto; z-index: 400; border-left: 0; }
  .doc-resizer { display: none; }
  :root.doc-open.chat-full .chat-panel { right: 0; }
  :root.doc-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .doc-head { padding: 12px 10px 10px 14px; gap: 8px; }
  .doc-head .doc-ic, .doc-sub { display: none; }
  .doc-btn { padding: 0 9px; }
  .doc-btn span { display: none; }
  .doc-stats { padding: 0 14px 10px; }
}

/* The assistant's search tool: one search bar (what | where | go), the live search, and the hand-off note */
.scrape-card { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.scrape-card .sc-bar { display: flex; align-items: stretch; padding: 5px; border-radius: 16px; background: rgb(var(--panel));
  border: 1px solid rgb(var(--line-2)); box-shadow: 0 6px 22px rgb(var(--shadow) / .1); transition: border-color .15s, box-shadow .15s; }
.scrape-card .sc-bar:focus-within { border-color: rgb(var(--brand) / .6); box-shadow: 0 0 0 4px rgb(var(--brand) / .12), 0 6px 22px rgb(var(--shadow) / .1); }
.scrape-card .sc-field { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.scrape-card .sc-field + .sc-field { border-left: 1px solid rgb(var(--line)); }
.scrape-card .sc-field > .ic { width: 16px; height: 16px; flex-shrink: 0; color: rgb(var(--dim)); }
.scrape-card .sc-field:focus-within > .ic { color: rgb(var(--brand)); }
.scrape-card .sc-field input { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: rgb(var(--txt)); }
.scrape-card .sc-field input::placeholder { color: rgb(var(--dim)); }
.scrape-card .sc-go { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 650; color: rgb(var(--on-brand)); background: rgb(var(--brand)); transition: filter .15s; }
.scrape-card .sc-go:hover { filter: brightness(1.08); }
.scrape-card .sc-go:disabled { opacity: .6; cursor: default; }
.scrape-card .sc-go .ic { width: 16px; height: 16px; }
.scrape-card .sc-list { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; margin: 0; padding: 5px; border-radius: 14px; list-style: none;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 18px 44px rgb(var(--shadow) / .22); min-width: 240px; }
.scrape-card .sc-list.hidden { display: none; }
.scrape-card .sc-list.up { top: auto; bottom: calc(100% + 10px); }   /* no room below (the card is at the bottom of the chat): open upward */
.scrape-card .sc-list li { display: flex; gap: 10px; align-items: baseline; padding: 9px 11px; border-radius: 9px; cursor: pointer; color: rgb(var(--txt)); font-size: 13.5px; }
.scrape-card .sc-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrape-card .sc-list li small { margin-left: auto; flex-shrink: 0; color: rgb(var(--dim)); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.scrape-card .sc-list li:hover, .scrape-card .sc-list li.active { background: rgb(var(--elevated)); }
.scrape-card .sc-list li.empty { color: rgb(var(--dim)); cursor: default; }
.scrape-card .sc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 6px; font-size: 11.5px; color: rgb(var(--dim)); }
.scrape-card .sc-picked { color: rgb(var(--muted)); }
.scrape-card .sc-meta:has(.sc-picked:empty) { display: none; }   /* nothing to say: no empty line */
/* A search the assistant just suggested: a few soft pulses to draw the eye */
.scrape-card.sc-attn .sc-bar { animation: scAttn 1.1s ease-in-out 3; animation-delay: var(--attn-delay, 0ms); }
@keyframes scAttn {
  0%, 100% { border-color: rgb(var(--line-2)); box-shadow: 0 6px 22px rgb(var(--shadow) / .1); }
  50% { border-color: rgb(var(--brand)); box-shadow: 0 0 0 5px rgb(var(--brand) / .2), 0 6px 22px rgb(var(--brand) / .25); }
}
@media (prefers-reduced-motion: reduce) { .scrape-card.sc-attn .sc-bar { animation: none; } }
.scrape-card .sc-picked.warn { color: rgb(var(--warn, 217 119 6)); }   /* the region matched no real place */
@media (max-width: 640px) { .scrape-card .sc-bar { flex-wrap: wrap; } .scrape-card .sc-field { flex-basis: 100%; height: 44px; }
  .scrape-card .sc-field + .sc-field { border-left: 0; border-top: 1px solid rgb(var(--line)); } .scrape-card .sc-go { width: 100%; justify-content: center; } }
.scrape-card.done { flex-direction: row; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; color: rgb(var(--muted)); border: 1px solid rgb(var(--line)); background: rgb(var(--elevated)); }
.scrape-card.done > .ic { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; color: rgb(var(--brand)); }
.scrape-card.done b { color: rgb(var(--txt)); font-weight: 600; }
.scrape-card.done a { color: rgb(var(--brand)); }
/* A new chat: the welcome in the middle of the page */
.chat-hero { align-self: center; width: 100%; max-width: 760px; margin: auto 0; padding: 4vh 0 2vh; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.chat-hero h1 { margin: 6px 0 0; font-size: 28px; font-weight: 650; letter-spacing: -.02em; color: rgb(var(--txt)); }
.chat-hero .hero-text { max-width: 560px; font-size: 14px; line-height: 1.6; color: rgb(var(--muted)); }
.chat-hero .hero-text p { margin: 0; }
.chat-hero .scrape-card { width: 100%; margin-top: 10px; text-align: left; }
.chat-hero .hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.chat-hero .hero-chips button { padding: 7px 13px; border-radius: 999px; border: 1px solid rgb(var(--line)); background: rgb(var(--panel)); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: rgb(var(--txt)); transition: border-color .15s, background .15s; }
.chat-hero .hero-chips button span { font-weight: 400; color: rgb(var(--muted)); }
.chat-hero .hero-chips button:hover { border-color: rgb(var(--brand) / .5); background: rgb(var(--brand) / .06); }
:root.chat-full .chat-head { display: none; }   /* the top bar already says which chat this is */
:root.chat-full .app-main { margin-right: 0; }   /* the old split screen doesn't apply: the top bar spans the whole width */
:root.chat-full .topbar { border-bottom-color: transparent; background: rgb(var(--page)); z-index: 105; }   /* above the chat (100), so its dropdown shows; under the phone menu backdrop (110) */
:root.chat-full .chat-panel { border-top: 0; }
.scrape-live { align-self: stretch; padding: 14px 16px; border-radius: 16px; border: 1px solid rgb(var(--line)); background: rgb(var(--panel)); font-size: 13px; }
.scrape-live .sl-top { display: flex; align-items: center; gap: 9px; }
.scrape-live .sl-top .ic { width: 16px; height: 16px; color: rgb(var(--brand)); flex-shrink: 0; }
.scrape-live .sl-n { margin-left: auto; font-size: 18px; font-variant-numeric: tabular-nums; color: rgb(var(--brand)); }
.scrape-live .sl-bar { height: 5px; margin: 10px 0 7px; border-radius: 99px; background: rgb(var(--elevated)); overflow: hidden; }
.scrape-live .sl-bar i { display: block; height: 100%; border-radius: 99px; background: rgb(var(--brand)); transition: width .6s ease; }
.scrape-live .sl-msg { font-size: 11.5px; color: rgb(var(--dim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Add this to memory?" under a reply (the AI proposed it; nothing is saved until Add) */
.mem-ask { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(var(--brand) / .3); background: rgb(var(--brand) / .06); }
.mem-q { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: rgb(var(--brand)); }
.mem-q .ic { width: 14px; height: 14px; }
.mem-text { margin: 6px 0 9px; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.45; color: rgb(var(--txt)); background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); outline: none; }
.mem-text:focus { border-color: rgb(var(--brand) / .6); box-shadow: 0 0 0 3px rgb(var(--brand) / .15); }
.mem-actions { display: flex; gap: 6px; }
.mem-actions .btn, .mem-actions .btn-ghost { height: 28px; padding: 0 11px; font-size: 12px; }
.mem-actions .ic { width: 13px; height: 13px; }
.mem-ask.done { display: flex; align-items: flex-start; gap: 7px; padding: 8px 11px; font-size: 12.5px; color: rgb(var(--muted)); border-color: rgb(var(--line)); background: rgb(var(--elevated)); }
.mem-ask.done > .ic { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; color: rgb(var(--brand)); }
.mem-ask.done b { color: rgb(var(--txt)); font-weight: 600; margin-right: 4px; }

/* Leads referenced in chat messages */
.ref-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; padding: 3px 5px 3px 9px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis;
  background: rgb(var(--brand) / .08); border: 1px solid rgb(var(--brand) / .3); color: rgb(var(--brand)); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ref-chip.ref-bulk { max-width: none; }   /* "N leads go with your next message": never cut */
.ref-chip .ic { width: 12px; height: 12px; flex-shrink: 0; }
.ref-chip button { background: none; border: 0; padding: 0 2px; color: inherit; cursor: pointer; display: inline-flex; opacity: .7; }
.ref-chip button:hover { opacity: 1; }
.ref-clear { background: none; border: 0; color: rgb(var(--muted)); font-size: 11.5px; cursor: pointer; text-decoration: underline; padding: 0 2px; }
.msg-refs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.msg-user .ref-chip { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .35); color: #fff; padding-right: 9px; }

/* ---- Dashboard ---------------------------------------------------------- */
.dash-card { background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; position: relative;
  transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; box-shadow: 0 1px 2px rgb(var(--shadow) / .05); }
.dash-card { cursor: pointer; }
.dash-card:hover { border-color: rgb(var(--brand) / .55); box-shadow: 0 14px 34px rgb(var(--shadow) / .14); transform: translateY(-2px); }
.dash-card:hover .dash-title { color: rgb(var(--brand)); }
.dash-card:active { transform: translateY(0); }
.dash-title { font-size: 16px; font-weight: 650; color: rgb(var(--txt)); text-decoration: none; line-height: 1.3; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-title:hover { color: rgb(var(--brand)); }
.dash-card .ic { width: 13px; height: 13px; }
.dash-card .c-del .ic { width: 15px; height: 15px; }
/* Top row: what's running (left) · export / delete in the very top-right corner; the name goes on the line below. */
.card-top { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: -12px -12px 6px 0; }
.card-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; margin-left: auto;
  opacity: 0; pointer-events: none; transition: opacity .15s; }   /* shown on hover (always on touch screens) */
.dash-card:hover .card-actions, .dash-card:focus-within .card-actions, .card-actions:has(.card-menu:not(.hidden)) { opacity: 1; pointer-events: auto; }
@media (hover: none) { .card-actions { opacity: 1; pointer-events: auto; } }
.card-actions .c-del { color: rgb(var(--dim)); }
.card-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 5px; cursor: default;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 12px; box-shadow: 0 14px 34px rgb(var(--shadow) / .18); }
.card-menu.hidden { display: none; }
.card-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: rgb(var(--txt)); text-decoration: none; }
.card-menu a:hover { background: rgb(var(--elevated)); }
.card-menu a .ic { width: 15px; height: 15px; color: rgb(var(--brand)); }
.card-menu small { margin-left: auto; font-size: 11.5px; font-weight: 500; color: rgb(var(--dim)); }
.dash-card .c-del[data-export]:hover { color: rgb(var(--brand)); background: rgb(var(--brand) / .08); }
/* Floating "New campaign" (dashboard), once the header button is scrolled away */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgb(var(--brand)); color: rgb(var(--on-brand)); text-decoration: none;
  box-shadow: 0 10px 30px rgb(var(--brand) / .35), 0 2px 6px rgb(var(--shadow) / .15);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .18s, transform .18s, background .15s; }
.fab.show { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: rgb(var(--brand-h)); }
.fab .ic { width: 24px; height: 24px; }
@media (max-width: 640px) { .fab { right: 16px; bottom: 16px; } }

.dash-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand)); flex-shrink: 0; }
.dash-ic .ic { width: 19px; height: 19px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: rgb(var(--brand));
  background: rgb(var(--brand) / .1); border-radius: 999px; padding: 3px 10px; }
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--brand)); animation: pulseB 1.4s ease-in-out infinite; }
.chat-icon-btn[hidden] { display: none; }

/* ---- Assistant settings page -------------------------------------------------- */
.set-card { background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 1px 2px rgb(var(--shadow) / .05); }
.set-card > header h2 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.set-card > header p { font-size: 13px; color: rgb(var(--muted)); margin-top: 2px; line-height: 1.5; }
.set-text { resize: vertical; line-height: 1.55; font-size: 13px; }
.set-hint { font-size: 12px; font-weight: 400; color: rgb(var(--dim)); }
.set-reset { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 500; color: rgb(var(--dim)); cursor: pointer; }
.set-reset:hover { color: rgb(var(--brand)); }
.set-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: rgb(var(--dim)); }
.set-vars button, .set-chip { border: 1px solid rgb(var(--line-2)); background: rgb(var(--elevated)); color: rgb(var(--muted)); border-radius: 999px;
  padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; }
.set-vars button { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; padding: 2px 8px; }
.set-vars button:hover, .set-chip:hover { border-color: rgb(var(--brand) / .5); color: rgb(var(--brand)); }
.set-chip.on { background: rgb(var(--brand) / .1); border-color: rgb(var(--brand) / .4); color: rgb(var(--brand)); }
#leadFields .set-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; font-size: 12.5px; }
#leadFields .set-chip .ic { width: 13px; height: 13px; }
.set-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--brand) / .1); color: rgb(var(--brand)); flex-shrink: 0; }
.set-avatar img, .chat-avatar img, #bubbleIcon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-avatar .ic-lg { width: 28px; height: 28px; }

.set-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none; }
.set-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.set-switch span { width: 36px; height: 20px; border-radius: 99px; background: rgb(var(--line-2)); position: relative; transition: background .15s; flex-shrink: 0; }
.set-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s; }
.set-switch input:checked + span { background: rgb(var(--brand)); }
.set-switch input:checked + span::after { transform: translateX(16px); }
.set-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgb(var(--brand) / .25); }


.save-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(calc(-50% + var(--sb-w) / 2)); z-index: 95; display: flex; align-items: center; gap: 18px;
  padding: 10px 10px 10px 18px; border-radius: 16px; background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 16px 40px rgb(var(--shadow) / .2); }
.save-bar.hidden { display: none; }
@media (max-width: 1023px) { .save-bar { transform: translateX(-50%); } }

/* ---- Chat: compaction divider and context meter ------------------------------- */
.chat-note { align-self: stretch; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: rgb(var(--dim)); }
.chat-note > button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.chat-note > button::before, .chat-note > button::after { content: ""; flex: 1; height: 1px; background: rgb(var(--line-2)); }
.chat-note > button:hover { color: rgb(var(--brand)); }
.chat-note .msg { max-width: none; align-self: stretch; font-size: 12.5px; background: rgb(var(--elevated) / .6); border: 1px dashed rgb(var(--line-2)); }
.ctx-meter { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgb(var(--dim)); padding: 0 2px; white-space: nowrap; flex-shrink: 0; }
.ctx-meter .track { flex: 0 0 64px; height: 4px; border-radius: 99px; background: rgb(var(--elevated)); overflow: hidden; }
.ctx-meter .track > i { display: block; height: 100%; border-radius: 99px; background: rgb(var(--brand)); }
.chat-avatar { overflow: hidden; }
.chat-avatar:has(img) { border-radius: 50%; }
.chat-bubble.has-avatar { padding-left: 8px; }
.chat-bubble #bubbleIcon img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .6); }
.chat-bubble.open #bubbleIcon img { display: none; }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-doc { border: 1px solid rgb(var(--line)); border-radius: 12px; font-size: 13.5px; transition: border-color .15s; }
.kb-doc.open { border-color: rgb(var(--line-2)); }
.kb-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; }
.kb-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; color: rgb(var(--txt));
  font: inherit; cursor: pointer; border-radius: 8px; }
.kb-toggle:hover { background: rgb(var(--elevated)); }
.kb-chev { color: rgb(var(--dim)); transition: transform .15s; }
.kb-doc.open .kb-chev { transform: rotate(90deg); }
.kb-doc.off .kb-toggle .min-w-0 { opacity: .5; }
.kb-body { display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 16px; border-top: 1px solid rgb(var(--line)); padding-top: 14px; }

/* Settings: section nav beside the content */
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.set-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.set-nav a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: rgb(var(--muted)); text-decoration: none; }
.set-nav a:hover { background: rgb(var(--elevated)); color: rgb(var(--txt)); }
.set-nav a.active { background: rgb(var(--brand) / .1); color: rgb(var(--brand)); font-weight: 600; }
.set-nav .ic { width: 17px; height: 17px; }
.set-intro { scroll-margin-top: 88px; }
.set-intro h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.set-intro p { font-size: 13px; color: rgb(var(--muted)); margin-top: 2px; }
@media (max-width: 900px) { .set-layout { grid-template-columns: 1fr; gap: 16px; } .set-nav { position: static; flex-direction: row; overflow-x: auto; } }

/* Chat: "Search the web" for the next message only */
.web-toggle { display: inline-flex; flex-shrink: 0; cursor: pointer; user-select: none; }
.web-toggle.hidden { display: none; }
.web-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.web-toggle span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: rgb(var(--muted)); border: 1px solid rgb(var(--line-2)); background: transparent; transition: all .15s; }
.web-toggle span .ic { width: 13px; height: 13px; }
.web-toggle:hover span { color: rgb(var(--txt)); border-color: rgb(var(--dim) / .6); }
.web-toggle input:checked + span { color: rgb(var(--on-brand)); background: rgb(var(--brand)); border-color: rgb(var(--brand)); }
.web-toggle input:focus-visible + span { box-shadow: 0 0 0 3px rgb(var(--brand) / .25); }

/* Leads table: social profiles as platform logos (one color, like the rest of the UI) */
.social { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 2px 2px 0; border-radius: 9px;
  color: rgb(var(--muted)); background: rgb(var(--elevated)); border: 1px solid rgb(var(--line)); transition: color .15s, background .15s, border-color .15s; }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.social:hover { color: rgb(var(--on-brand)); background: rgb(var(--brand)); border-color: rgb(var(--brand)); }

/* Range slider (New campaign › Intensity) */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 2px 0; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, rgb(var(--brand)) var(--fill, 100%), rgb(var(--elevated)) var(--fill, 100%)); border: 1px solid rgb(var(--line)); }
.range::-moz-range-track { height: 6px; border-radius: 99px; background: rgb(var(--elevated)); }
.range::-moz-range-progress { height: 6px; border-radius: 99px; background: rgb(var(--brand)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: #fff; border: 2px solid rgb(var(--brand)); box-shadow: 0 1px 4px rgb(var(--shadow) / .25); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgb(var(--brand)); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(var(--brand) / .25); }
.int-remind { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; font-size: 12px; font-weight: 500; line-height: 1.45;
  color: rgb(var(--brand)); background: rgb(var(--brand) / .08); border: 1px solid rgb(var(--brand) / .25); }
.int-remind.hidden { display: none; }
.int-remind .ic { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; }

/* Chat locked (campaign not scraped yet, or scraping) */
.chat-compose.locked .chat-input { opacity: .6; }
.chat-compose.locked textarea { cursor: not-allowed; }
.chat-compose.locked .chat-send { pointer-events: none; }

/* Settings › Business profile */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-grid .pf-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .pf-grid { grid-template-columns: 1fr; } }
.set-code { font: 11.5px ui-monospace, SFMono-Regular, Consolas, monospace; padding: 2px 7px; border-radius: 6px;
  background: rgb(var(--brand) / .08); color: rgb(var(--brand)); border: 1px solid rgb(var(--brand) / .2); }
.seg.seg-lg button { height: 34px; padding: 0 14px; gap: 7px; font-size: 13px; }
.seg.seg-lg .ic { width: 16px; height: 16px; }

/* ---- Campaign page: lead cards ------------------------------------------------- *
 * Name, category, rating, then one line per detail. Every line is a single line ("…" when too
 * long) and every card has the same lines, so cards are the same height. No separators. */
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.lead { display: flex; flex-direction: column; min-width: 0; cursor: pointer; border-radius: 16px; overflow: hidden;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 1px 2px rgb(var(--shadow) / .05);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.lead:hover { border-color: rgb(var(--brand) / .45); box-shadow: 0 10px 28px rgb(var(--shadow) / .12); transform: translateY(-1px); }
.lead.row-selected { border-color: rgb(var(--brand)); box-shadow: 0 0 0 3px rgb(var(--brand) / .18); background: rgb(var(--panel)) !important; }
.lead.row-new { animation: flashRow 1.2s ease-out; }

.lead-head { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 10px; min-width: 0; }
.lead-name, .lead-cat, .lead-rating, .lead-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lead-name { font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: rgb(var(--txt)); }
.lead-cat { font-size: 12.5px; color: rgb(var(--muted)); line-height: 1.4; }
.lead-rating { font-size: 12.5px; line-height: 1.4; color: rgb(var(--txt)); }
.lead-rating b { font-weight: 700; }
.lead-reviews { color: rgb(var(--dim)); }
.lead-none { color: rgb(var(--dim)); font-style: italic; }

.lead-body { display: flex; flex-direction: column; gap: 2px; padding: 0 18px 8px; flex: 1; }
.lead-line { display: flex; align-items: center; gap: 10px; min-height: 28px; min-width: 0; font-size: 13px; }
.lead-line > .ic { width: 15px; height: 15px; flex-shrink: 0; color: rgb(var(--brand)); }
.lead-line.none > .ic { color: rgb(var(--line-2)); }
.lead-val { flex: 1; }
.lead-line.none .lead-val { color: rgb(var(--dim)); font-size: 12.5px; font-style: italic; }
.lead-line a { color: rgb(var(--txt)); text-decoration: none; }
.lead-line a:hover { color: rgb(var(--brand)); text-decoration: underline; text-underline-offset: 2px; }
.lead-line[data-col="address"] a { color: rgb(var(--muted)); }
.lead-line .wa-chat { padding: 2px 9px; font-size: 11.5px; }
.lead-line .wa-src { margin-top: 0; font-size: 9.5px; }
/* Emails: the best one on the line; "+N" opens the rest below it (only then does the card grow). */
.lead-emails { align-items: flex-start; padding: 5px 0; }
.lead-emails > .ic { margin-top: 2px; }
.lead-emails .lead-val { white-space: normal; }
.lead-emails .em-row { padding: 0; gap: 8px; border: 0; }
.lead-emails.em-open .em-row + .em-row { margin-top: 6px; }
.lead-emails .em-addr { font-size: 12.5px; }
.lead-emails .em-toggle { margin: 0 0 0 2px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none;
  color: rgb(var(--brand)); background: rgb(var(--brand) / .1); }
.lead-emails .em-toggle:hover { background: rgb(var(--brand)); color: rgb(var(--on-brand)); text-decoration: none; }

.lead-foot { display: flex; align-items: center; min-height: 44px; padding: 2px 18px 14px; }
.lead-socials { display: flex; flex-wrap: nowrap; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.lead-socials .lead-none { font-size: 12.5px; }
.lead-socials .social { margin: 0; width: 28px; height: 28px; flex-shrink: 0; background: rgb(var(--panel)); }
.lead-socials .social:hover { color: rgb(var(--on-brand)); background: rgb(var(--brand)); border-color: rgb(var(--brand)); }
.lead-contacted { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: rgb(var(--brand)); background: rgb(var(--brand) / .1); border: 1px solid rgb(var(--brand) / .3); cursor: default; }
.lead-contacted .ic { width: 12px; height: 12px; }

/* Card: WhatsApp line (number · where it came from · Chat) */
.ic-fill { fill: currentColor; stroke: none; }
.lead-wa .lead-val { display: flex; align-items: baseline; gap: 8px; }
.lead-wa .lead-val a { flex-shrink: 0; }
.wa-note { font-size: 11.5px; color: rgb(var(--dim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.wa-note.wa-website { color: rgb(var(--brand)); }
.wa-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; text-decoration: none !important; color: rgb(var(--brand)) !important; background: rgb(var(--brand) / .1);
  transition: background .15s, color .15s; }
.wa-btn .ic { width: 13px; height: 13px; }
.wa-btn:hover { background: rgb(var(--brand)); color: rgb(var(--on-brand)) !important; }

/* Campaign page: Filters menu (Any / With / Without per detail) */
.filt-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; width: 330px; padding: 8px; border-radius: 14px;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 16px 40px rgb(var(--shadow) / .18); }
.filt-menu.hidden { display: none; }
.filt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px; font-size: 13px; font-weight: 500; }
.seg.seg-sm { padding: 2px; }
.seg.seg-sm button { height: 24px; min-width: 0; padding: 0 9px; font-size: 11.5px; }
.filt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 2px; margin-top: 4px; border-top: 1px solid rgb(var(--line)); }
.filt-foot #filtClear { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--brand)); cursor: pointer; padding: 0; }
.filt-foot #filtClear:hover { text-decoration: underline; }
.filt-foot #filtRef { height: 32px; padding: 0 12px; font-size: 12.5px; }
.filt-foot #filtRef .ic { width: 14px; height: 14px; }
.filt-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--muted)); }
.filt-range .inp { width: 62px; height: 28px; padding: 0 8px; font-size: 12.5px; text-align: center; }
#filtBtn.active { border-color: rgb(var(--brand) / .5); color: rgb(var(--brand)); }
.filt-count { min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 99px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--brand)); color: rgb(var(--on-brand)); }
.filt-count.hidden { display: none; }

.range:disabled { opacity: .4; cursor: not-allowed; }

/* Sidebar: "last visited" marker on the campaign opened last */
.sb-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  line-height: 15px; vertical-align: 1px; color: rgb(var(--brand)); background: rgb(var(--brand) / .12); }

/* ---- Motion: page changes and content arriving ----------------------------------
 * Between pages the browser crossfades (cross-document view transitions); the sidebar, top bar
 * and docked chat stay put. Content that arrives fades and rises in, slightly staggered. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
.chat-panel:not(.hidden) { view-transition-name: chat; }
::view-transition-group(sidebar), ::view-transition-group(chat) { animation: none; }
::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(chat), ::view-transition-new(chat) { animation: none; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation-duration: .18s; }
::view-transition-old(root) { animation: vtOut .14s ease both; }
::view-transition-new(root) { animation: vtIn .26s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

/* Cards that just arrived: --i = their place in the batch (sets the stagger). */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }
.card-in { animation: riseIn .38s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .card-in, .row-new { animation: none !important; }
}

/* Before scripts run (states set in <head>): a campaign's open chat and the theme switch's
 * choice show from the first paint, so nothing pops in when moving between pages. */
:root.chat-open .chat-panel.hidden { display: flex; }
:root[data-theme-pref="light"] [data-theme-pref="light"], :root[data-theme-pref="dark"] [data-theme-pref="dark"],
:root[data-theme-pref="system"] [data-theme-pref="system"] {
  background: rgb(var(--panel)); color: rgb(var(--brand)); box-shadow: 0 1px 2px rgb(var(--shadow) / .12); }

/* Collapsed sidebar: icons only; the campaign lists (just dots without their names) are hidden. */
@media (min-width: 1024px) { :root.sb-collapsed .sb-section { display: none; } }

/* ---- Leads as a list: one lead per row (same markup as the cards, laid out as columns) ---- *
 * name · category · rating | address | phone | WhatsApp | website | email | socials */
#leadGrid { container-type: inline-size; }
.lead-grid.as-list { grid-template-columns: 1fr; gap: 6px; }
.as-list .lead { display: grid; align-items: center; border-radius: 12px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.5fr) 190px; }   /* fixed: every row lines up */
.as-list .lead:hover { transform: none; }
.as-list .lead-head { padding: 10px 14px; gap: 1px; }
.as-list .lead-name { font-size: 13.5px; }
.as-list .lead-cat, .as-list .lead-rating { font-size: 11.5px; }
.as-list .lead-body { display: contents; }
.as-list .lead-line { min-height: 0; padding: 10px 12px; gap: 8px; font-size: 12.5px; }
.as-list .lead-line > .ic { width: 14px; height: 14px; }
.as-list .lead-emails { padding: 10px 12px; }
.as-list .lead-wa .wa-note { display: none; }   /* the Chat button and the number are enough on one row */
.as-list .lead-foot { min-height: 0; padding: 0 14px 0 6px; justify-content: flex-end; }
.as-list .lead-socials { flex: 0 1 auto; justify-content: flex-end; }
.as-list .lead-socials .social { width: 26px; height: 26px; }
.as-list .lead-socials .lead-none { display: none; }
/* Narrower (e.g. with the chat docked): line 1 = the lead, line 2 = only the details it has,
 * side by side, then its socials. */
@container (max-width: 1100px) {
  .as-list .lead { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 0; padding-bottom: 8px; }
  .as-list .lead-head { flex: 1 1 100%; padding-bottom: 4px; }
  .as-list .lead-line { flex: 0 1 auto; max-width: 100%; padding: 4px 4px 4px 14px; }
  .as-list .lead-line.none { display: none; }
  .as-list .lead-line .lead-val { flex: 0 1 auto; }
  .as-list .lead-line[data-col="address"] .lead-val { max-width: 280px; }
  .as-list .lead-emails .lead-val { max-width: 300px; }
  .as-list .lead-foot { flex: 1 0 auto; justify-content: flex-end; padding: 0 14px 0 4px; }
}
.view-switch button { min-width: 34px; height: 30px; }
.ref-n { font-weight: 700; margin-right: 1px; opacity: .8; }

/* The chat's documents beside the conversation, in the free space right of it (full-page chat, wide enough only),
 * and as tabs at the top of the open document. */
.doc-rail { display: none; }
:root.chat-full .chat-panel { container-type: inline-size; }
@container (min-width: 1300px) {
  .doc-rail:not([hidden]) { display: flex; flex-direction: column; gap: 2px; position: absolute; z-index: 2; top: 18px; right: 24px;
    width: min(260px, calc((100% - 820px) / 2 - 36px)); max-height: calc(100% - 150px); overflow: auto; }
}
.doc-rail-label { padding: 0 10px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--dim)); }
.doc-rail-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: rgb(var(--txt)); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.doc-rail-item:hover:not(:disabled) { background: rgb(var(--elevated)); }
.doc-rail-item:disabled { cursor: default; opacity: .7; }
.doc-rail-item.on { background: rgb(var(--brand) / .1); border-color: rgb(var(--brand) / .35); }
.doc-rail-item > .ic { width: 16px; height: 16px; flex-shrink: 0; color: rgb(var(--brand)); }
.doc-rail-item > span { min-width: 0; display: flex; flex-direction: column; }
.doc-rail-item b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-rail-item small { font-size: 11.5px; color: rgb(var(--dim)); font-variant-numeric: tabular-nums; }
.doc-tabs { display: flex; gap: 6px; padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none; }
.doc-tab { flex-shrink: 0; max-width: 220px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgb(var(--line)); background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: rgb(var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-tab:hover { color: rgb(var(--txt)); border-color: rgb(var(--brand) / .5); }
.doc-tab.on { color: rgb(var(--brand)); background: rgb(var(--brand) / .1); border-color: rgb(var(--brand) / .4); }

/* A reply still being written: its links stay links but do nothing until it's done (chat.js) */
.msg.streaming a[href] { cursor: progress; }

/* A search that found nothing in its area */
.msg-tool .tool-line.none .ic { color: rgb(var(--dim)); }
.scrape-card .sc-empty { color: rgb(var(--warn, 217 119 6)); font-weight: 600; }

/* The chat's documents in the top bar: a dropdown of each search's leads (items as in .doc-rail) */
.doc-menu { position: relative; }
.doc-menu[hidden] { display: none; }
.doc-menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: rgb(var(--txt)); background: rgb(var(--elevated)); border: 1px solid rgb(var(--line)); white-space: nowrap;
  transition: border-color .15s, background .15s; }
.doc-menu-btn:hover, .doc-menu-btn[aria-expanded="true"] { border-color: rgb(var(--brand) / .5); }
.doc-menu-btn > .ic { width: 16px; height: 16px; color: rgb(var(--brand)); }
.doc-menu-btn .doc-menu-caret { width: 14px; height: 14px; color: rgb(var(--dim)); transition: transform .15s; }
.doc-menu-btn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--brand) / .12); color: rgb(var(--brand)); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .doc-menu-btn { padding: 0 10px; gap: 6px; }
  .doc-menu-label { display: none; }
}
/* …which opens a drawer from the right, the mirror of the phone sidebar */
.doc-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(300px, 86vw); display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px max(14px, env(safe-area-inset-bottom)); background: rgb(var(--panel)); border-left: 1px solid rgb(var(--line));
  box-shadow: 0 20px 60px rgb(var(--shadow) / .25); transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
:root.docs-open .doc-drawer { transform: none; visibility: visible; transition: transform .2s ease; }
.doc-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 4px 0 8px; }
.doc-drawer-head b { font-size: 14px; font-weight: 650; }
.doc-drawer-head .tool-btn { width: 36px; padding: 0; justify-content: center; }
.doc-menu-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.doc-drawer-backdrop { display: none; }
:root.docs-open .doc-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgb(0 0 0 / .4); animation: fadeIn .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .doc-drawer { transition: none; } }

/* Phones: the conversation uses the whole width, fields don't zoom, tables scroll instead of squeezing */
@media (max-width: 640px) {
  :root.chat-full #aiOut, :root.chat-full .chat-compose { padding-inline: 12px; }
  :root.chat-full #aiOut { padding-top: 12px; }
  :root.chat-full .chat-compose { padding-top: 8px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .msg { max-width: 92%; font-size: 14px; }
  .msg-ai { max-width: 100%; }
  .chat-input textarea, .scrape-card .sc-field input { font-size: 16px; }
  .chat-hero { padding-top: 2vh; gap: 12px; }
  .chat-hero h1 { font-size: 23px; }
  .chat-hero .hero-text { font-size: 13.5px; }
  .msg-tool, .msg-tool .doc-chip { max-width: 100%; }
  .mem-ask { margin-inline: 0; }
}
/* Tables in replies: words wrap whole (no "Compan / y"), the lead number never wraps; too wide = scroll sideways */
.msg.md table { word-break: normal; overflow-wrap: normal; -webkit-overflow-scrolling: touch; }
.msg.md td a { word-break: normal; }
.msg.md th:first-child, .msg.md td:first-child { white-space: nowrap; }
/* The search card inside a reply keeps normal wrapping ("Advanced" doesn't split) */
.scrape-card { white-space: normal; word-break: normal; }

/* The live search card's footer: progress in words, and Stop */
.scrape-live .sl-foot { display: flex; align-items: center; gap: 10px; }
.scrape-live .sl-foot .sl-msg { flex: 1; min-width: 0; }
.scrape-live .sl-stop { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  font: inherit; font-size: 11.5px; font-weight: 600; color: rgb(var(--muted)); background: transparent; border: 1px solid rgb(var(--line)); }
.scrape-live .sl-stop:hover { color: rgb(var(--danger)); border-color: rgb(var(--danger) / .4); background: rgb(var(--danger) / .06); }
.scrape-live .sl-stop .ic { width: 11px; height: 11px; }

/* The document's Export menu: CSV or JSON */
.doc-export { position: relative; flex-shrink: 0; }
.doc-btn { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.doc-btn .doc-caret { width: 12px; height: 12px; color: rgb(var(--dim)); }
.doc-export-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 210px; padding: 5px; border-radius: 12px;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 16px 40px rgb(var(--shadow) / .22); display: flex; flex-direction: column; gap: 2px; }
.doc-export-menu.hidden { display: none; }
.doc-export-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: rgb(var(--txt)); }
.doc-export-menu a:hover { background: rgb(var(--elevated)); }
.doc-export-menu a > .ic { width: 16px; height: 16px; color: rgb(var(--brand)); flex-shrink: 0; }
.doc-export-menu span { display: flex; flex-direction: column; line-height: 1.3; }
.doc-export-menu b { font-size: 13px; font-weight: 600; }
.doc-export-menu small { font-size: 11.5px; color: rgb(var(--dim)); }

/* The page's title and subtitle in the top bar (the subtitle where there's room) */
.topbar-heading { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; }
.topbar-sub { margin: 1px 0 0; font-size: 12px; color: rgb(var(--dim)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .topbar-sub { display: none; } }

/* Social profiles in a lead document: small platform logos */
.doc-body td.doc-socials { max-width: none; }
.doc-social { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 3px; border-radius: 7px; vertical-align: middle;
  color: rgb(var(--muted)) !important; background: rgb(var(--elevated)); font-size: 11px; font-weight: 700; text-decoration: none !important; }
.doc-social:hover { color: rgb(var(--on-brand)) !important; background: rgb(var(--brand)); }
.doc-social svg { width: 13px; height: 13px; fill: currentColor; }

/* Log in / create an account */
.auth-page { min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; border-radius: 20px;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 30px 80px rgb(var(--shadow) / .18); }
.auth-logo { height: 28px; align-self: flex-start; margin-bottom: 6px; }
.auth-card h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.auth-sub { margin: -8px 0 4px; color: rgb(var(--muted)); font-size: 13.5px; line-height: 1.5; }
.auth-card .inp { font-size: 15px; }
@media (max-width: 640px) { .auth-card .inp { font-size: 16px; } .auth-card { padding: 26px 20px; } }
.auth-error { padding: 10px 12px; border-radius: 10px; font-size: 13px; color: rgb(var(--danger)); background: rgb(var(--danger) / .08); border: 1px solid rgb(var(--danger) / .25); }
.auth-error.hidden { display: none; }
.auth-go { justify-content: center; height: 44px; font-size: 14.5px; }
.auth-switch { margin: 0; text-align: center; font-size: 13px; color: rgb(var(--muted)); }
.auth-switch a { color: rgb(var(--brand)); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* The account at the bottom of the sidebar */
.sb-account { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0 8px; border-top: 1px solid rgb(var(--line)); flex-shrink: 0; }
.sb-account .sb-avatar { width: 30px; height: 30px; font-size: 12px; }
.sb-logout { margin-left: auto; }
.sb-logout:hover { color: rgb(var(--txt)); background: rgb(var(--elevated)); }
@media (min-width: 1024px) { :root.sb-collapsed .sb-account { justify-content: center; padding-left: 0; padding-right: 0; } :root.sb-collapsed .sb-account .sb-text, :root.sb-collapsed .sb-logout { display: none; } }

/* Settings › Profile: three type buttons (they wrap on a phone), "Coming soon" badge */
.pf-kinds { flex-wrap: wrap; max-width: 100%; }
.soon-badge { margin-left: 4px; padding: 2px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 600; color: rgb(var(--brand)); background: rgb(var(--brand) / .1); }

/* ---- Outreach: the confirm dialog (centered, neutral) and the "did you send it?" check-in (bottom, brand) ---- */
.or-dlg .or-to { font-size: 13px; color: rgb(var(--dim)); word-break: break-all; }
.or-dlg .or-note, .or-dlg .or-wait { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.or-dlg .or-note { background: rgb(var(--brand) / .08); color: rgb(var(--txt)); }
.or-dlg .or-wait { background: rgb(var(--warn, 217 119 6) / .1); color: rgb(var(--txt)); }
.or-dlg .or-wait[hidden] { display: none; }
.or-dlg .or-note .ic, .or-dlg .or-wait .ic { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.or-dlg .or-wait .ic { color: rgb(var(--warn, 217 119 6)); }
.or-dlg .or-go { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.or-dlg .or-go .ic { width: 16px; height: 16px; }
.or-dlg .or-go.disabled { opacity: .45; cursor: not-allowed; pointer-events: auto; }

.ci-wrap { position: fixed; inset: 0; z-index: 510; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .2s ease-out; }
.ci { width: 100%; max-width: 440px; border-radius: 22px; padding: 18px 18px 16px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand) / .78)); box-shadow: 0 24px 60px rgb(var(--brand) / .35), 0 8px 20px rgb(0 0 0 / .2);
  animation: ciIn .42s cubic-bezier(.2, 1.3, .4, 1); }
.ci::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgb(255 255 255 / .1); pointer-events: none; }
.ci-wrap.out { animation: fadeOut .22s ease-in forwards; }
.ci-wrap.out .ci { animation: ciOut .22s ease-in forwards; }
@keyframes ciIn { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ciOut { to { opacity: 0; transform: translateY(40px); } }
@keyframes fadeOut { to { opacity: 0; } }
.ci-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ci-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.ci-ic .ic { width: 17px; height: 17px; }
.ci-kicker { font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.ci h2 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.ci p { margin-top: 4px; font-size: 13px; opacity: .85; }
.ci-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ci-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 14px; font-size: 14px; font-weight: 650; }
.ci-actions .ic { width: 16px; height: 16px; }
.ci-yes { background: #fff; color: rgb(var(--brand)); }
.ci-no { background: rgb(255 255 255 / .14); color: #fff; border: 1px solid rgb(255 255 255 / .35); }
.ci-actions button:disabled { opacity: .6; }
.ci-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ci, .ci-wrap, .ci-wrap.out .ci { animation: none; } }


/* Settings at the top bar's far right where the sidebar is tucked away */
.tb-settings { display: none; }
@media (max-width: 1023px) { .tb-settings { display: inline-flex; width: 36px; padding: 0; justify-content: center; } }

/* ---- Install the app (PWA): a sheet from the bottom on phones ---- */
.pwa-wrap { position: fixed; inset: 0; z-index: 520; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); animation: fadeIn .2s ease-out; }
.pwa { width: 100%; max-width: 440px; background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); border-radius: 24px; padding: 20px;
  box-shadow: 0 30px 80px rgb(var(--shadow) / .35); animation: ciIn .4s cubic-bezier(.2, 1.2, .4, 1); }
.pwa-wrap.out { animation: fadeOut .22s ease-in forwards; }
.pwa-wrap.out .pwa { animation: ciOut .22s ease-in forwards; }
.pwa-head { display: flex; align-items: center; gap: 14px; }
.pwa-icon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 6px 16px rgb(0 0 0 / .25); }
.pwa-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pwa-head p { font-size: 13px; color: rgb(var(--dim)); margin-top: 2px; }
.pwa-perks { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.pwa-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: rgb(var(--txt)); }
.pwa-perks .ic { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: rgb(var(--brand)); }
.pwa-steps { margin: 16px 0 0; padding: 12px; list-style: none; border-radius: 14px; background: rgb(var(--brand) / .07); display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.pwa-steps li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.4; color: rgb(var(--txt)); }
.pwa-step-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); color: rgb(var(--brand)); }
.pwa-step-ic .ic { width: 16px; height: 16px; }
.pwa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pwa-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pwa-actions .btn .ic { width: 16px; height: 16px; }
.or-dlg .or-app { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 650; color: rgb(var(--brand)); }
.or-dlg .or-app[hidden] { display: none; }
.or-dlg .or-app .ic { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pwa, .pwa-wrap, .pwa-wrap.out .pwa { animation: none; } }

/* Settings › Profile: the privacy note and private field tags */
.pf-privacy { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: rgb(var(--brand) / .07); color: rgb(var(--txt)); }
.pf-privacy .ic { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: rgb(var(--brand)); }
.pf-private { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: rgb(var(--dim)); }
.pf-private .ic { width: 12px; height: 12px; }

/* ---- Onboarding: one question per screen, thumb-first (bottom button, big targets, 16px inputs) ---- */
.ob { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: 0 20px; }
.ob-top { display: flex; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 0 10px; }
.ob-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; color: rgb(var(--txt)); }
.ob-back:hover { background: rgb(var(--elevated)); }
.ob-back .ic { width: 20px; height: 20px; }
.ob-progress { flex: 1; height: 6px; border-radius: 99px; background: rgb(var(--line)); overflow: hidden; }
.ob-progress i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--brand)); transition: width .3s ease; }
.ob-count { font-size: 12px; font-weight: 600; color: rgb(var(--dim)); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.ob-body { flex: 1; display: flex; flex-direction: column; padding-top: 18px; }
.ob-step { display: flex; flex-direction: column; gap: 14px; }
.ob-step.in-next { animation: obNext .28s cubic-bezier(.2, .8, .3, 1); }
.ob-step.in-back { animation: obBack .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes obNext { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes obBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.ob-step h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.ob-help { margin-top: -6px; font-size: 14.5px; line-height: 1.5; color: rgb(var(--muted)); }
.ob-small { font-size: 12.5px; color: rgb(var(--dim)); line-height: 1.45; }
.ob .ob-inp { font-size: 16px; height: 52px; padding: 0 16px; border-radius: 14px; }
.ob .ob-text { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.ob-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.ob-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px; border-radius: 18px; text-align: left;
  border: 1.5px solid rgb(var(--line)); background: rgb(var(--panel)); transition: border-color .15s, background .15s, transform .1s; }
.ob-card:active { transform: scale(.98); }
.ob-card .ic { width: 26px; height: 26px; color: rgb(var(--brand)); margin-bottom: 6px; }
.ob-card b { font-size: 16px; font-weight: 650; }
.ob-card span { font-size: 13px; color: rgb(var(--muted)); }
.ob-card.on { border-color: rgb(var(--brand)); background: rgb(var(--brand) / .08); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chips button { padding: 8px 13px; border-radius: 99px; font-size: 13.5px; border: 1px solid rgb(var(--line)); background: rgb(var(--panel)); color: rgb(var(--txt)); }
.ob-chips button:active, .ob-examples button:active { background: rgb(var(--brand) / .1); }
.ob-examples { display: flex; flex-direction: column; gap: 8px; margin-top: -6px; }
.ob-examples button { padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; text-align: left; color: rgb(var(--txt));
  border: 1px dashed rgb(var(--line-2, var(--line))); background: rgb(var(--elevated) / .5); }
.ob-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; background: rgb(var(--brand) / .08); }
.ob-note .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: rgb(var(--brand)); }
.ob-field { position: relative; display: block; }
.ob-field > .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgb(var(--dim)); pointer-events: none; }
.ob-field .ob-inp { padding-left: 44px; width: 100%; }
.ob-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-picks:empty { display: none; }
.ob-pick { display: inline-flex; align-items: center; gap: 4px; padding: 7px 6px 7px 13px; border-radius: 99px; font-size: 14px; font-weight: 600;
  background: rgb(var(--brand) / .12); color: rgb(var(--brand)); }
.ob-pick button { display: inline-flex; padding: 3px; border-radius: 99px; color: inherit; }
.ob-pick .ic { width: 14px; height: 14px; }
.ob-search { position: relative; }
.ob-search.hidden { display: none; }
.ob-search .ob-inp { width: 100%; }
.ob-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; padding: 6px; border-radius: 14px; list-style: none; margin: 0;
  background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); box-shadow: 0 16px 40px rgb(var(--shadow) / .2); }
.ob-sugg.hidden { display: none; }
.ob-sugg li { padding: 11px 12px; border-radius: 10px; font-size: 14.5px; cursor: pointer; }
.ob-sugg li.active, .ob-sugg li:hover { background: rgb(var(--brand) / .1); }
.ob-toggle { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; cursor: pointer; border: 1.5px solid rgb(var(--line)); background: rgb(var(--panel)); }
.ob-toggle.on { border-color: rgb(var(--brand)); background: rgb(var(--brand) / .08); }
.ob-toggle-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; background: rgb(var(--brand) / .12); color: rgb(var(--brand)); }
.ob-toggle-ic .ic { width: 22px; height: 22px; }
.ob-toggle-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-toggle-txt b { font-size: 16px; }
.ob-toggle-txt span { font-size: 13px; color: rgb(var(--muted)); line-height: 1.4; }
.ob-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ob-switch { width: 46px; height: 28px; border-radius: 99px; flex-shrink: 0; position: relative; background: rgb(var(--line)); transition: background .15s; }
.ob-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s; }
.ob-toggle.on .ob-switch { background: rgb(var(--brand)); }
.ob-toggle.on .ob-switch::after { transform: translateX(18px); }
.ob-error { margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: rgb(var(--danger)); background: rgb(var(--danger) / .08); }
.ob-error.hidden { display: none; }
.ob-foot { position: sticky; bottom: 0; margin-top: auto; padding: 18px 0 max(18px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgb(var(--page)) 70%, transparent); }
.ob-next { width: 100%; height: 54px; border-radius: 16px; font-size: 16px; font-weight: 650; justify-content: center; }
.ob-next.hidden { display: none; }
@media (min-width: 641px) { .ob-body { padding-top: 6vh; } .ob-foot { position: static; background: none; } }
@media (prefers-reduced-motion: reduce) { .ob-step.in-next, .ob-step.in-back { animation: none; } }

/* A DM's message in its confirm dialog: shown, copied on Open */
.or-dlg .or-msg { margin-top: 12px; max-height: 180px; overflow: auto; padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; color: rgb(var(--txt)); background: rgb(var(--elevated)); border: 1px solid rgb(var(--line)); }
.or-dlg .or-hint { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: rgb(var(--muted)); }
.or-dlg .or-hint .ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: rgb(var(--brand)); }
.or-dlg .or-msg { user-select: text; }
.or-dlg .or-copy { margin-left: 2px; font-weight: 650; color: rgb(var(--brand)); text-decoration: underline; }   /* in the hint: copy without opening */

/* A chat starts with a search: no message box (nor "Remember this") until its first one */
:root.chat-nosearch #aiForm { display: none !important; }