/* VIPs Tracker — manual CRM page styles. Same EP editorial language as
   /vips and the rest of the portal: dark, hairlines, mono labels, gold
   accents. No pink in titles (per house rule). */

/* Page layout — generous breathing room between sections. Big gap (28px)
   so KPI strip · filters · table don't crowd each other.
   IMPORTANT: #vt-body (the dynamic body that holds kpis + filters + table)
   needs its OWN flex-column gap, otherwise its 3 children stack flush. */
.vt-page { display: flex; flex-direction: column; gap: 28px; }
.vt-page > * + * { margin-top: 0; }
#vt-body { display: flex; flex-direction: column; gap: 28px; }

/* Hide pink from view-header kicker (page-level rule) */
.vt-page .view-header .ep-bracket { color: var(--t2); }

/* KPI strip — bigger gap row+col so cards never feel glued, especially
   when the layout wraps to 2 rows on narrower screens. */
.vt-kpis {
  display: grid;
  column-gap: 18px; row-gap: 22px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.vt-kpi {
  padding: 22px 22px; min-height: 110px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--s1, #141414);
  border: 1px solid var(--hair); border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative; overflow: hidden;
}
.vt-kpi:hover { border-color: rgba(212,168,67,0.3); transform: translateY(-1px); }
.vt-kpi-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
/* Premium status indicator — colored dot with concentric pulsing ring,
   inspired by Slack/Linear "live presence" dots. Uses --c custom property
   to color-shift per KPI. */
.vt-dot {
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.vt-dot::before {
  content: ''; position: absolute; inset: 4px;
  background: var(--c, #FFF); border-radius: 50%;
  box-shadow: 0 0 8px var(--c, #FFF), 0 0 0 1px rgba(255,255,255,0.04);
}
.vt-dot::after {
  content: ''; position: absolute; inset: 0;
  border: 1.5px solid var(--c, #FFF);
  border-radius: 50%; opacity: 0.35;
}
.vt-dot-pulse::after { animation: vt-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes vt-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.vt-kpi-val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -1.1px; line-height: 1;
}
@media (max-width: 1280px) { .vt-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .vt-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Smartico link section inside the drawer Info tab */
.vt-link-section {
  background: rgba(76,209,122,0.03);
  border: 1px solid rgba(76,209,122,0.18);
  border-radius: 10px;
  padding: 14px 16px !important;
  margin-bottom: 14px;
}
.vt-link-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.vt-link-status {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.vt-link-on  { color: #4CD17A; }
.vt-link-off { color: var(--t3); }
.vt-link-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.vt-link-info > div {
  display: flex; flex-direction: column; gap: 4px;
}
.vt-link-info strong { color: var(--t1); font-weight: 700; font-size: 13px; }
.vt-link-actions {
  margin-top: 10px;
  display: flex; gap: 8px; justify-content: flex-end;
}
.vt-link-picker {
  display: flex; gap: 8px; align-items: stretch;
}
.vt-link-picker select {
  flex: 1; background: rgba(255,255,255,0.03); color: var(--t1);
  border: 1px solid var(--hair); border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif; font-size: 12px;
}
.vt-link-picker select:focus { outline: 0; border-color: var(--gold); }

/* OCS profile section — rich PA_General data grid */
.vt-profile-section {
  background: rgba(79,160,255,0.03);
  border: 1px solid rgba(79,160,255,0.18);
  border-radius: 10px;
  padding: 14px 16px !important;
  margin-bottom: 14px;
}
.vt-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 14px;
  margin-top: 8px;
}
.vt-profile-grid > div {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.vt-profile-grid strong {
  color: var(--t1); font-weight: 600; font-size: 12.5px;
  word-break: break-word;
}

/* OCS import preset chips — quick-fill thresholds */
.vt-ocs-presets {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.vt-preset {
  padding: 6px 12px;
  background: rgba(255,255,255,0.03); color: var(--t2);
  border: 1px solid var(--hair); border-radius: 999px;
  cursor: pointer;
  font-family: 'Noto Sans Mono', monospace; font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: all 0.12s ease;
}
.vt-preset:hover {
  color: var(--gold); border-color: var(--gold);
  background: rgba(212,168,67,0.06);
}

/* Smart triage strip — surfaces the urgent buckets across all VIPs as a
   single horizontal row. Each pill is a one-tap shortcut to the matching
   filter set. Hidden when nothing is urgent. */
.vt-triage {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(239,68,68,0.04), rgba(212,168,67,0.03), rgba(76,209,122,0.02));
  border: 1px solid var(--hair);
  border-left: 3px solid #EF4444;
  border-radius: 10px;
}
.vt-triage-eyebrow {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.14em; font-weight: 700; color: var(--t3);
  text-transform: uppercase;
  margin-right: 4px;
}
.vt-triage-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--c, var(--hair));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  font-family: 'Inter', sans-serif;
}
.vt-triage-pill:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}
.vt-triage-count {
  font-family: 'Geist', 'Inter', sans-serif; font-size: 14px; font-weight: 800;
  color: var(--c, var(--t1));
  letter-spacing: -0.4px;
}
.vt-triage-label {
  font-size: 12px; font-weight: 600; color: var(--t1);
  white-space: nowrap;
}

/* Real-time toast — appears top-right when a remote change lands. */
.vt-toast {
  position: fixed; top: 90px; right: 20px;
  z-index: 9900;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--s1, #141414);
  border: 1px solid var(--c, rgba(255,255,255,0.18));
  border-left: 3px solid var(--c, #4FA0FF);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--t1);
  animation: vt-toast-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  max-width: 360px;
}
@keyframes vt-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.vt-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, #4FA0FF);
  box-shadow: 0 0 8px var(--c, #4FA0FF);
  flex-shrink: 0;
}

/* Filters */
/* Online-presence widget — sits in viewHeader.right slot, like the SEO
   Tracker pattern. Pulsing green dot + count + stacked avatar bubbles. */
.vt-presence {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(255,255,255,0.02);
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; color: var(--t3);
  margin-right: 4px;
}
.vt-online-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4CD17A; box-shadow: 0 0 6px #4CD17A;
  flex-shrink: 0;
}
.vt-online-pulse { animation: vt-pulse-dot 1.6s ease-in-out infinite; }
@keyframes vt-pulse-dot {
  0%,100% { box-shadow: 0 0 6px #4CD17A, 0 0 0 0 rgba(76,209,122,0.4); }
  50%     { box-shadow: 0 0 8px #4CD17A, 0 0 0 6px rgba(76,209,122,0); }
}
.vt-online-label {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  font-weight: 700; color: var(--t3); text-transform: uppercase;
  letter-spacing: 0.1em;
}
.vt-online-avatars { display: inline-flex; }
.vt-online-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 10.5px; font-weight: 800;
  color: var(--t1);
  background: linear-gradient(135deg, rgba(234,143,215,0.2), rgba(212,168,67,0.2));
  border: 2px solid var(--s1, #141414); margin-left: -8px;
}
.vt-online-avatar:first-child { margin-left: 0; }
.vt-online-admin { background: linear-gradient(135deg, rgba(212,168,67,0.4), rgba(212,168,67,0.15)); }
.vt-online-agent { background: linear-gradient(135deg, rgba(164,137,255,0.4), rgba(164,137,255,0.15)); }
.vt-online-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.04); color: var(--t2);
  font-family: 'Noto Sans Mono', monospace; font-size: 9px; font-weight: 700;
  border: 2px solid var(--s1, #141414); margin-left: -8px;
}

/* Tooltip on online avatars — uses data-tip attr instead of native title
   so the visual is consistent (and shows after a small delay). */
.vt-online-avatar { position: relative; cursor: default; }
.vt-online-avatar[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--s1, #141414); color: var(--t1);
  border: 1px solid var(--b2, rgba(255,255,255,0.18));
  border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 10;
  animation: vt-tip-in 0.12s ease;
}
@keyframes vt-tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Activity bell + feed panel ───────────────────────────── */
.vt-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent; color: var(--t2);
  border: 1px solid var(--hair); border-radius: 8px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.vt-bell:hover { color: var(--t1); border-color: rgba(255,255,255,0.18); }
.vt-bell svg { width: 18px; height: 18px; }
.vt-bell-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #FCA5A5; color: #0A0A0F;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 10px; font-weight: 800;
  border-radius: 999px; border: 2px solid var(--s1, #141414);
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.2px;
}
.vt-bell-badge[hidden] { display: none; }

.vt-feed-panel {
  position: fixed; z-index: 9800;
  width: 380px; max-height: 520px; overflow-y: auto;
  background: var(--s1, #141414);
  border: 1px solid var(--b2, rgba(255,255,255,0.18));
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: vt-menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.vt-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; background: var(--s1, #141414);
}
.vt-feed-count {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.06em;
}
.vt-feed-empty {
  padding: 32px 24px; text-align: center;
  color: var(--t3); font-size: 12.5px; font-style: italic;
}
.vt-feed-list { list-style: none; margin: 0; padding: 0; }
.vt-feed-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--hair);
  transition: background 0.1s ease;
}
.vt-feed-item:hover { background: rgba(255,255,255,0.025); }
.vt-feed-item:last-child { border-bottom: 0; }
.vt-feed-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  color: var(--t2); flex-shrink: 0;
}
.vt-feed-icon svg { width: 14px; height: 14px; }
.vt-feed-body { flex: 1; min-width: 0; }
.vt-feed-meta {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  margin-bottom: 4px;
}
.vt-feed-meta strong {
  color: var(--t1); font-weight: 700; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-feed-when {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.04em;
  flex-shrink: 0;
}
.vt-feed-text {
  color: var(--t2); font-size: 12px; line-height: 1.4;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vt-feed-by { color: var(--t1); font-weight: 600; }

/* ── Message actions (edit/delete on hover) ──────────────────────── */
.vt-chat-item .vt-msg-actions {
  display: flex; gap: 4px; margin-left: auto;
  opacity: 0; transition: opacity 0.12s ease;
}
.vt-chat-item:hover .vt-msg-actions { opacity: 1; }
.vt-msg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; color: var(--t3);
  border: 1px solid var(--hair); border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.vt-msg-btn:hover { color: var(--t1); border-color: rgba(255,255,255,0.18); }
.vt-msg-btn svg { width: 13px; height: 13px; }
.vt-msg-btn-del:hover { color: #FCA5A5; border-color: rgba(252,165,165,0.4); }

/* Delete VIP icon button — same shell as chat/edit but red on hover */
.vt-action-btn-del:hover {
  color: #FCA5A5; border-color: rgba(252,165,165,0.45);
  background: rgba(252,165,165,0.05);
}

/* Filter pill with a colored dot prefix — replaces emoji-style markers */
.vt-pill-with-dot {
  display: inline-flex; align-items: center; gap: 7px;
}
.vt-pill-rdot {
  position: relative;
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, currentColor);
  box-shadow: 0 0 6px var(--c, currentColor);
}

/* Feed panel — color-coded items, grouped by date, filterable */
.vt-feed-mark {
  background: transparent; border: 0; padding: 4px 8px;
  font-family: 'Inter', sans-serif; font-size: 11px;
  color: var(--t3); cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s ease, background 0.12s ease;
}
.vt-feed-mark:hover { color: var(--t1); background: rgba(255,255,255,0.04); }

.vt-feed-filters {
  display: flex; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid var(--hair); flex-wrap: wrap;
}
.vt-feed-pill {
  padding: 5px 10px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--t3); background: transparent;
  border: 1px solid var(--hair); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: all 0.12s ease;
}
.vt-feed-pill:hover { color: var(--t1); border-color: rgba(255,255,255,0.18); }
.vt-feed-pill.is-active {
  color: var(--t1); border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
}

.vt-feed-scroll {
  max-height: 420px; overflow-y: auto;
}
.vt-feed-group { padding: 6px 0; }
.vt-feed-group-head {
  padding: 6px 16px;
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.12em; color: var(--t3);
  text-transform: uppercase;
  background: rgba(255,255,255,0.015);
}

/* Each feed item: kind-color rail · user-color avatar · stacked meta */
.vt-feed-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--hair);
  transition: background 0.1s ease;
  position: relative;
}
.vt-feed-item:hover { background: rgba(255,255,255,0.025); }
.vt-feed-item:last-child { border-bottom: 0; }
.vt-feed-mention {
  background: rgba(212,168,67,0.04);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}
.vt-feed-rail {
  width: 3px; min-height: 28px; border-radius: 999px;
  flex-shrink: 0; opacity: 0.85;
  align-self: stretch;
}
.vt-feed-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 12.5px; font-weight: 800;
  flex-shrink: 0;
  border: 1px solid;
}
.vt-feed-line1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.vt-feed-by {
  font-weight: 700; font-size: 12.5px;
  white-space: nowrap;
}
.vt-feed-kind {
  display: inline-block; padding: 1px 8px;
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
  border: 1px solid; border-radius: 999px;
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.vt-feed-mention-tag {
  display: inline-block; padding: 1px 7px;
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.06em;
  background: rgba(212,168,67,0.18); color: var(--gold);
  border-radius: 999px; text-transform: uppercase;
  animation: vt-pulse-soft 2s ease-in-out infinite;
}
@keyframes vt-pulse-soft {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.6; }
}
.vt-feed-when {
  margin-left: auto;
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.04em; flex-shrink: 0;
}

.vt-edited-tag {
  font-family: 'Noto Sans Mono', monospace; font-size: 9px;
  letter-spacing: 0.06em; color: var(--t3); font-style: italic;
}

/* Inline edit row (replaces text in bubble) */
.vt-edit-row { display: flex; flex-direction: column; gap: 8px; }
.vt-edit-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 50px;
  background: rgba(255,255,255,0.05); color: var(--t1);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.45;
}
.vt-edit-input:focus {
  outline: 0; border-color: rgba(255,255,255,0.4);
}
.vt-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
/* Edit row Save button — also white, not gold */
.vt-edit-actions .btn-primary {
  background: var(--t1) !important; border-color: var(--t1) !important;
  color: #0A0A0F !important; font-weight: 700;
}

/* ── Drawer tabs (Information / Conversation) — neutral active state ─ */
.vt-drawer-tabs {
  display: flex; gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--hair);
  background: var(--s1, #141414);
}
.vt-drawer-tab {
  padding: 14px 18px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--t3);
  border: 0; border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.15s ease;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: -1px;
}
.vt-drawer-tab:hover { color: var(--t1); }
.vt-drawer-tab.is-active {
  color: var(--t1);
  border-bottom-color: var(--t1);
}
.vt-tab-count {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--t1);
  letter-spacing: 0.04em;
}
.vt-drawer-pane[hidden] { display: none; }
.vt-drawer-pane { display: flex; flex-direction: column; }

.vt-filters {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--s1, #141414);
  border: 1px solid var(--hair); border-radius: 10px;
}
.vt-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vt-pill-sep {
  width: 1px; height: 20px; background: var(--hair); margin: 0 4px;
}
.vt-pill {
  padding: 6px 12px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  border: 1px solid var(--hair); background: transparent; color: var(--t2);
  border-radius: 6px; cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.vt-pill:hover { border-color: var(--gold); color: var(--gold); }
.vt-pill.is-active {
  background: rgba(212,168,67,0.06);
  border-color: var(--gold); color: var(--gold);
}
.vt-filter-right {
  margin-left: auto; display: flex; gap: 10px; align-items: center;
}
.vt-select, .vt-search {
  font-family: 'Inter', sans-serif; font-size: 12px;
  background: rgba(255,255,255,0.02); color: var(--t1);
  border: 1px solid var(--hair); border-radius: 6px;
  padding: 7px 10px;
}
.vt-search { width: 240px; }
.vt-select:focus, .vt-search:focus { outline: 0; border-color: var(--gold); }
.vt-search::placeholder { color: var(--t3); }

/* Table */
.vt-table-card { padding: 0; overflow: hidden; }
.vt-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.vt-table thead th {
  text-align: left; padding: 16px 18px;
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--t3); border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,0.015);
  white-space: nowrap;
}
.vt-table thead th.num { text-align: right; }
.vt-table thead th.vt-th-sort {
  cursor: pointer; user-select: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.vt-table thead th.vt-th-sort:hover { color: var(--t1); background: rgba(255,255,255,0.04); }
.vt-table thead th.vt-th-sort.is-active { color: var(--gold); }
.vt-th-arrow { margin-left: 4px; font-family: 'Geist', 'Inter', sans-serif; font-size: 10px; }
.vt-table tbody td {
  padding: 16px 18px; border-bottom: 1px solid var(--hair);
  vertical-align: middle; color: var(--t2); font-size: 12.5px;
  line-height: 1.4;
}
.vt-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vt-table tbody td.num strong {
  color: var(--t1); font-family: 'Geist', 'Inter', sans-serif; font-weight: 800;
}
.vt-table tbody tr { cursor: pointer; }
.vt-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.vt-table tbody tr:last-child td { border-bottom: 0; }
.vt-idx {
  font-family: 'Noto Sans Mono', monospace; color: var(--t3);
  font-size: 11px; width: 40px;
}

/* Row avatar — same look as /vips page avatars */
.vt-row-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vt-row-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 12px; font-weight: 800;
  color: var(--t1);
}
.vt-row-avatar-fb {
  background: linear-gradient(135deg, rgba(234,143,215,0.2), rgba(212,168,67,0.2));
}
.vt-sub {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); margin-top: 2px;
}

/* Pill wrap — colored container with a glowing dot on the left and a
   native select inside (transparent + custom caret). Same construction
   used for both semaforo and result columns; the modifier class on
   .vt-pill-wrap applies the color via CSS variables. No emojis — the
   dot + the colored border carry all the meaning. */
.vt-pill-wrap {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--c, var(--hair));
  border-radius: 999px;
  background: var(--bg, transparent);
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
  min-width: 130px;
  position: relative;
}
.vt-pill-wrap:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.vt-pill-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,168,67,0.18);
}
.vt-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, currentColor);
  box-shadow: 0 0 6px var(--c, currentColor);
  margin-right: 8px; flex-shrink: 0;
}
.vt-pill-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: 0; background: transparent;
  font-family: 'Noto Sans Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.04em; font-weight: 700;
  color: var(--c, var(--t2));
  padding: 0 22px 0 0; cursor: pointer;
  outline: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-transform: uppercase;
}
.vt-pill-select option {
  background: var(--s1, #141414); color: var(--t1);
  font-family: 'Inter', sans-serif; padding: 8px;
  text-transform: none;
}
/* Variants drive `--c` so the dot, border and text stay in sync. */
.vt-sem-green  { --c: #4CD17A; --bg: rgba(76,209,122,0.04); }
.vt-sem-yellow { --c: #FBBF24; --bg: rgba(251,191,36,0.04); }
.vt-sem-red    { --c: #FCA5A5; --bg: rgba(252,165,165,0.04); }
.vt-res-success  { --c: #4CD17A; --bg: rgba(76,209,122,0.04); }
.vt-res-pending  { --c: #FBBF24; --bg: rgba(251,191,36,0.04); }
.vt-res-negative { --c: #FCA5A5; --bg: rgba(252,165,165,0.04); }
.vt-res-neutral  { --c: #4FA0FF; --bg: rgba(79,160,255,0.04); }
.vt-res-none     { --c: var(--hair); --bg: transparent; }
.vt-res-none .vt-pill-select { color: var(--t3); }

/* Custom result dropdown — button with icon + label + caret, opens a
   floating menu of options each with its own SVG icon. Replaces the
   native <select> for the result column so options can show icons. */
.vt-result-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 10px;
  border: 1px solid var(--c, var(--hair));
  border-radius: 999px;
  background: var(--bg, transparent);
  cursor: pointer;
  color: var(--c, var(--t2));
  font-family: 'Noto Sans Mono', monospace; font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 150px; white-space: nowrap;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.vt-result-trigger:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.vt-result-trigger.is-open { box-shadow: 0 0 0 2px rgba(212,168,67,0.25); }
.vt-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
}
.vt-pill-icon svg { width: 14px; height: 14px; }
.vt-pill-label { flex: 1; text-align: left; }
.vt-pill-caret {
  display: inline-flex; opacity: 0.5;
  transition: transform 0.15s ease;
}
.vt-pill-caret svg { width: 11px; height: 11px; }
.vt-result-trigger.is-open .vt-pill-caret { transform: rotate(180deg); }

.vt-result-menu {
  position: fixed; z-index: 9800;
  background: var(--s1, #141414);
  border: 1px solid var(--b2, rgba(255,255,255,0.18));
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
  animation: vt-menu-in 0.14s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes vt-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vt-result-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent; color: var(--t2);
  border: 0; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
  text-align: left; cursor: pointer; width: 100%;
  transition: background 0.1s ease, color 0.1s ease;
}
.vt-result-option:hover { background: rgba(255,255,255,0.04); color: var(--t1); }
.vt-result-option .vt-pill-icon { color: var(--c, var(--t3)); }
.vt-result-option.is-active {
  background: rgba(212,168,67,0.08); color: var(--c, var(--t1));
}
.vt-result-option.vt-res-success  { --c: #4CD17A; }
.vt-result-option.vt-res-pending  { --c: #FBBF24; }
.vt-result-option.vt-res-negative { --c: #FCA5A5; }
.vt-result-option.vt-res-neutral  { --c: #4FA0FF; }
.vt-result-option.vt-res-none     { --c: var(--t3); }

/* Follow-up urgency hints */
.vt-table tbody td.is-overdue { color: #FCA5A5; font-weight: 700; }
.vt-table tbody td.is-today { color: #FBBF24; font-weight: 700; }

/* Drawer */
.vt-drawer-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 9600; display: flex; justify-content: flex-end;
  animation: vt-fade-in 0.2s ease;
}
body.vt-drawer-open { overflow: hidden; }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
.vt-drawer {
  width: 760px; max-width: 100%; height: 100%;
  background: var(--s1, #141414); border-left: 1px solid var(--b2, rgba(255,255,255,0.18));
  overflow-y: auto;
  display: flex; flex-direction: column;
  animation: vt-slide-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: -24px 0 60px rgba(0,0,0,0.6);
}
@keyframes vt-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.vt-drawer-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; background: var(--s1);
  border-bottom: 1px solid var(--hair);
}
.vt-drawer-title {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 18px; color: var(--t1);
  font-weight: 800; letter-spacing: -0.4px;
}
.vt-sem-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.vt-drawer-username {
  font-family: 'Noto Sans Mono', monospace; font-size: 11px;
  color: var(--t3); font-weight: 600; letter-spacing: 0.04em;
}

.vt-drawer-form { padding: 18px 22px 0; flex: 1; }
.vt-drawer-section {
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--hair);
}
.vt-drawer-section:last-of-type { border-bottom: 0; }
.vt-drawer-section .card-eyebrow { margin-bottom: 12px; }

.vt-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.vt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-field label {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--t3);
}
.vt-field input, .vt-field select, .vt-field textarea {
  background: rgba(255,255,255,0.02); color: var(--t1);
  border: 1px solid var(--hair); border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif; font-size: 12.5px;
  width: 100%; box-sizing: border-box;
  resize: vertical;
}
.vt-field input:focus, .vt-field select:focus, .vt-field textarea:focus {
  outline: 0; border-color: var(--gold);
}
.vt-field input[readonly] { color: var(--t3); background: rgba(255,255,255,0.01); }
.vt-readonly {
  background: rgba(255,255,255,0.01); color: var(--t3);
  border: 1px solid var(--hair); border-radius: 6px;
  padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 12.5px;
}
/* Wider for textarea fields and long select labels */
.vt-field textarea { grid-column: 1 / -1; }
.vt-field:has(textarea) { grid-column: 1 / -1; }

.vt-drawer-footer {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; gap: 10px; align-items: center;
  padding: 14px 22px; background: var(--s1);
  border-top: 1px solid var(--hair);
}

/* ── Chat-style conversation panel ─────────────────────────────── */
.vt-drawer-thread {
  padding: 22px 22px 0;
  border-top: 1px solid var(--hair);
  background: rgba(255,255,255,0.01);
  display: flex; flex-direction: column;
}
.vt-thread-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.vt-thread-count {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700;
}

.vt-empty-thread {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--t3); font-size: 13px; text-align: center;
  padding: 36px 24px; margin-bottom: 18px;
  border: 1px dashed var(--hair); border-radius: 10px;
  background: rgba(255,255,255,0.015);
}
.vt-empty-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.04);
  color: var(--t3);
}
.vt-empty-icon svg { width: 20px; height: 20px; }

/* Chat list (newest first) */
.vt-chat {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.vt-chat-item {
  display: flex; gap: 12px; align-items: flex-start;
  animation: vt-chat-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes vt-chat-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vt-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 14px; font-weight: 800;
  color: var(--t1);
  background: linear-gradient(135deg, rgba(234,143,215,0.18), rgba(212,168,67,0.18));
  border: 1px solid rgba(255,255,255,0.06);
}
.vt-chat-avatar svg { width: 16px; height: 16px; opacity: 0.7; }
.vt-avatar-feedback {
  background: linear-gradient(135deg, rgba(79,160,255,0.22), rgba(79,160,255,0.06));
  color: #4FA0FF; border-color: rgba(79,160,255,0.25);
}
.vt-avatar-contact {
  background: linear-gradient(135deg, rgba(76,209,122,0.22), rgba(76,209,122,0.06));
  color: #4CD17A; border-color: rgba(76,209,122,0.25);
}

.vt-chat-bubble {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--hair); border-radius: 12px;
  background: var(--s1, #141414);
  transition: border-color 0.15s ease;
  position: relative;
}
.vt-chat-bubble:hover { border-color: rgba(255,255,255,0.14); }

/* Bubble variants */
.vt-bubble-team {
  background: linear-gradient(180deg, rgba(212,168,67,0.06), rgba(212,168,67,0.01));
  border-color: rgba(212,168,67,0.22);
}
.vt-bubble-agent {
  background: linear-gradient(180deg, rgba(164,137,255,0.06), rgba(164,137,255,0.01));
  border-color: rgba(164,137,255,0.22);
}
.vt-bubble-contact {
  background: linear-gradient(180deg, rgba(76,209,122,0.04), rgba(76,209,122,0.01));
  border-color: rgba(76,209,122,0.18);
}
.vt-chat-feedback .vt-chat-bubble {
  background: linear-gradient(180deg, rgba(79,160,255,0.06), rgba(79,160,255,0.01));
  border-color: rgba(79,160,255,0.22);
}

.vt-chat-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--t2); margin-bottom: 6px;
}
.vt-chat-author { color: var(--t1); font-weight: 700; font-size: 12.5px; }
.vt-chat-when {
  margin-left: auto;
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.04em; text-transform: uppercase;
}
.vt-chat-kind {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.05); color: var(--t3);
}
.vt-chat-feedback .vt-chat-kind { background: rgba(79,160,255,0.15); color: #4FA0FF; }
.vt-chat-rolebadge {
  font-family: 'Noto Sans Mono', monospace; font-size: 9px;
  letter-spacing: 0.12em; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; border: 1px solid;
}
.vt-rb-admin { color: var(--gold); border-color: var(--gold); }
.vt-rb-agent { color: #A489FF; border-color: #A489FF; }

.vt-chat-text {
  color: var(--t1); font-size: 13px; line-height: 1.6;
  word-break: break-word; white-space: pre-wrap;
}
.vt-chat-quote {
  color: var(--t1); font-size: 13.5px; line-height: 1.6;
  font-style: italic; padding: 4px 0 4px 12px;
  border-left: 2px solid #4FA0FF;
  word-break: break-word; white-space: pre-wrap;
}

.vt-chat-chip {
  display: inline-block; padding: 2px 8px;
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.04em; font-weight: 700;
  border: 1px solid var(--hair); border-radius: 4px; color: var(--t2);
  text-transform: uppercase;
}
.vt-chip-success  { color: #4CD17A; border-color: rgba(76,209,122,0.3); }
.vt-chip-pending  { color: #FBBF24; border-color: rgba(251,191,36,0.3); }
.vt-chip-negative { color: #FCA5A5; border-color: rgba(252,165,165,0.3); }
.vt-chip-neutral  { color: #4FA0FF; border-color: rgba(79,160,255,0.3); }

/* ── Composer (sticky bottom of thread) ────────────────────────────── */
.vt-composer {
  position: sticky; bottom: 0; z-index: 4;
  margin: 0 -22px; padding: 14px 22px 22px;
  background: linear-gradient(180deg, transparent, var(--s1) 18%);
  border-top: 1px solid var(--hair);
}
.vt-composer-tabs {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.vt-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--t3);
  border: 1px solid var(--hair); border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.vt-tab svg { width: 13px; height: 13px; }
.vt-tab:hover { color: var(--t1); border-color: rgba(255,255,255,0.18); }
.vt-tab.is-active {
  color: var(--t1);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
}
.vt-composer-row {
  display: flex; gap: 10px; align-items: flex-end;
}
.vt-composer-row textarea {
  flex: 1; resize: vertical; min-height: 60px;
  background: rgba(255,255,255,0.03); color: var(--t1);
  border: 1px solid var(--hair); border-radius: 10px;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.vt-composer-row textarea:focus {
  outline: 0; border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.vt-composer-row textarea::placeholder { color: var(--t3); }
/* Send button — neutral white-on-dark, NOT gold/pink. The button is a
   straight call to action; brand color reserved for table accents. */
.vt-composer-row .btn-primary {
  background: var(--t1, #FFF) !important;
  border-color: var(--t1, #FFF) !important;
  color: #0A0A0F !important;
  font-weight: 700;
}
.vt-composer-row .btn-primary:hover {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.85) !important;
}
.vt-composer-row .btn { white-space: nowrap; flex-shrink: 0; }

/* Composer hint below input */
.vt-composer-hint {
  margin-top: 6px;
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.04em;
}
.vt-composer-hint code {
  background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 3px;
  color: var(--t1); font-family: inherit;
}

/* Mention pill — gold accent inside chat bubbles */
.vt-mention {
  display: inline-block; padding: 0 4px; margin: 0 1px;
  background: rgba(212,168,67,0.14);
  color: var(--gold);
  border-radius: 3px;
  font-weight: 700;
}

/* Action icon column — explicit shortcuts inside each row */
.vt-actions-th { width: 1px; white-space: nowrap; text-align: right !important; }
.vt-actions-cell {
  white-space: nowrap;
  text-align: right;
  padding-right: 18px !important;
}
.vt-action-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  margin-left: 4px;
  background: transparent; color: var(--t3);
  border: 1px solid var(--hair); border-radius: 8px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.vt-action-btn:hover { color: var(--t1); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); }
.vt-action-btn svg { width: 14px; height: 14px; }
.vt-action-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--t1); color: #0A0A0F;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 9px; font-weight: 800;
  border-radius: 999px; border: 2px solid var(--s1, #141414);
  display: flex; align-items: center; justify-content: center;
}
.vt-action-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; right: 50%; bottom: calc(100% + 6px);
  transform: translateX(50%);
  padding: 5px 9px;
  background: var(--s1, #141414); color: var(--t1);
  border: 1px solid var(--b2, rgba(255,255,255,0.18));
  border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  white-space: nowrap; text-transform: none; letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 10;
  pointer-events: none;
}

/* Bell with mention — pulses gold when there's an unread @mention */
.vt-bell.vt-bell-mention {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 0 0 rgba(212,168,67,0.5);
  animation: vt-bell-pulse 1.6s ease-in-out infinite;
}
@keyframes vt-bell-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(212,168,67,0); }
}
.vt-bell.vt-bell-mention .vt-bell-badge {
  background: var(--gold);
}

/* Reply banner above composer */
.vt-reply-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--t1);
  border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--t2);
}
.vt-reply-banner svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--t3); }
.vt-reply-banner-label { color: var(--t3); white-space: nowrap; flex-shrink: 0; }
.vt-reply-banner-label strong { color: var(--t1); font-weight: 700; }
.vt-reply-banner-snippet {
  color: var(--t2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-reply-banner-x {
  background: transparent; color: var(--t3); border: 0;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color 0.12s ease;
}
.vt-reply-banner-x:hover { color: var(--t1); }

/* Reply preview inside chat bubble (parent message snippet) */
.vt-reply-quote {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border-left: 2px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  font-size: 11.5px; color: var(--t3);
}
.vt-reply-quote svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.6; }
.vt-reply-author { color: var(--t1); font-weight: 700; }
.vt-reply-text {
  color: var(--t2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
  .vt-drawer { width: 100%; }
  .vt-fields { grid-template-columns: 1fr; }
}

/* Modal (add / contact / import) */
.vt-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 9700; display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px; overflow: auto;
}
.vt-modal {
  background: var(--s1); border: 1px solid var(--b2); border-radius: 12px;
  width: 100%; max-width: 540px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
.vt-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--hair);
}
.vt-modal-body { padding: 18px 22px; }
.vt-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--hair);
}

/* Discover modal: full-bleed list of untracked Smartico VIPs.
   Wider than the standard Add modal to fit one-row-per-candidate
   with avatar / KPIs / activity / per-row Track button. */
.vt-discover-bg .vt-discover-modal {
  width: 96vw;
  max-width: 1600px;
  max-height: 94vh;
  display: flex; flex-direction: column;
}
.vt-discover-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,0.015);
}
.vt-disc-search { flex: 1 1 240px; min-width: 200px; }
.vt-disc-min {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); text-transform: uppercase; letter-spacing: 0.08em;
}
.vt-disc-min input {
  width: 90px;
  font-family: 'Inter', sans-serif; font-size: 12px;
  background: rgba(255,255,255,0.02); color: var(--t1);
  border: 1px solid var(--hair); border-radius: 6px;
  padding: 6px 8px;
}
.vt-disc-min input:focus { outline: 0; border-color: var(--gold); }
.vt-disc-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.vt-discover-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 0; min-height: 280px;
}
.vt-disc-empty {
  text-align: center; padding: 60px 24px;
  color: var(--t3); font-size: 13px;
}

.vt-disc-row {
  display: grid;
  grid-template-columns: 36px minmax(220px, 1.3fr) minmax(120px, 0.7fr) minmax(150px, 0.9fr) auto;
  align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hair);
  cursor: default;
  transition: background 0.1s ease;
}
.vt-disc-row:hover { background: rgba(255,255,255,0.025); }
.vt-disc-row.is-selected {
  background: rgba(212,168,67,0.05);
  box-shadow: inset 3px 0 0 var(--gold);
}
.vt-disc-row:last-child { border-bottom: 0; }

.vt-disc-check {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.vt-disc-check input { cursor: pointer; width: 16px; height: 16px; }

.vt-disc-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vt-disc-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 13px; font-weight: 800;
  color: var(--t1);
}
.vt-disc-avatar-fb {
  background: linear-gradient(135deg, rgba(234,143,215,0.2), rgba(212,168,67,0.2));
}
.vt-disc-meta { min-width: 0; flex: 1; }
.vt-disc-name {
  font-family: 'Geist', 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--t1);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.vt-disc-sub {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 3px; font-size: 11px;
}
.vt-disc-uid {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.04em;
}
.vt-disc-rfm {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold);
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 4px;
}
.vt-disc-tag {
  font-family: 'Noto Sans Mono', monospace; font-size: 9.5px;
  color: var(--t3); letter-spacing: 0.04em;
  padding: 1px 5px;
  border: 1px solid var(--hair); border-radius: 3px;
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}

.vt-disc-num { text-align: right; }
.vt-disc-num-val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 16px; font-weight: 800;
  color: var(--t1); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vt-disc-num-lbl {
  font-family: 'Noto Sans Mono', monospace; font-size: 9px;
  color: var(--t3); letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 2px;
}

.vt-disc-activity {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.vt-disc-act-line {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 12px;
}
.vt-disc-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.vt-disc-days { font-weight: 600; color: var(--t1); }
.vt-disc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.vt-disc-last {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3);
}

.vt-disc-track-one {
  white-space: nowrap;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  padding: 6px 12px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: transparent; color: var(--t2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.12s ease;
}
.vt-disc-track-one:hover {
  border-color: #EA8FD7; color: #EA8FD7;
  background: rgba(234,143,215,0.05);
}
.vt-disc-track-one:disabled {
  opacity: 0.55; cursor: not-allowed;
  border-color: var(--hair); color: var(--t3); background: transparent;
}
.vt-track-plus {
  font-family: 'Geist', 'Inter', sans-serif; font-weight: 800;
  font-size: 13px; line-height: 1;
}

.vt-discover-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.vt-disc-summary {
  font-family: 'Noto Sans Mono', monospace; font-size: 10px;
  color: var(--t3); letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .vt-disc-row {
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
  }
  .vt-disc-num, .vt-disc-activity { display: none; }
  .vt-disc-track-one { padding: 5px 9px; font-size: 10px; }
  .vt-discover-toolbar { padding: 10px 14px; }
  .vt-disc-min { font-size: 9px; }
  .vt-disc-min input { width: 70px; }
}