/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg:          #e8eef4;
  --surface:     #ffffff;
  --surface-2:   #f3f7fb;
  --surface-3:   #dde6f0;
  --text:        #0c1a2e;
  --text-2:      #253d58;
  --muted:       #5a7898;
  --border:      #8aabcb;
  --border-soft: #b8d0e6;
  --accent:      #1d6ff2;       /* vivid blue */
  --accent-h:    #1558d6;
  --accent-f:    rgba(29,111,242,.12);
  --accent-2:    #7c3aed;       /* purple secondary */
  --accent-2-f:  rgba(124,58,237,.11);
  --danger:      #e02424;
  --danger-f:    rgba(224,36,36,.11);
  --warn-text:   #92400e;
  --warn-bg:     rgba(245,158,11,.13);
  --ok:          #059669;
  --ok-f:        rgba(5,150,105,.12);
  --focus:       rgba(29,111,242,.28);
  --shadow:      0 1px 3px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
  --shadow-md:   0 4px 18px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  --r:           8px;
  --r-sm:        6px;
  --r-lg:        12px;
  /* Draft zone — warm amber notepad */
  --draft-bg:        #fffbf0;
  --draft-border:    #f59e0b;
  --draft-label-col: #92400e;
  --draft-label-bg:  #fef3c7;
  /* Message tints */
  --msg-in-bg:     #ffffff;
  --msg-in-stripe: #8aabcb;
  --msg-out-bg:    #f0f6ff;
  --msg-out-stripe:#1d6ff2;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #0e1c2f;
  --surface:     #172540;
  --surface-2:   #1f3050;
  --surface-3:   #283d60;
  --text:        #e4f0fd;
  --text-2:      #b8d0ec;
  --muted:       #6e90b8;
  --border:      #3a5878;
  --border-soft: #273f58;
  --accent:      #38bdf8;       /* sky blue */
  --accent-h:    #29a6e0;
  --accent-f:    rgba(56,189,248,.18);
  --accent-2:    #a78bfa;
  --accent-2-f:  rgba(167,139,250,.15);
  --danger:      #f87171;
  --danger-f:    rgba(248,113,113,.18);
  --warn-text:   #fbbf24;
  --warn-bg:     rgba(251,191,36,.15);
  --ok:          #22d3ee;
  --ok-f:        rgba(34,211,238,.16);
  --focus:       rgba(56,189,248,.32);
  --shadow:      0 2px 12px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md:   0 8px 28px rgba(0,0,0,.58), 0 2px 6px rgba(0,0,0,.30);
  --draft-bg:        #172540;
  --draft-border:    #38bdf8;
  --draft-label-col: #38bdf8;
  --draft-label-bg:  #0f1e38;
  --msg-in-bg:     #172540;
  --msg-in-stripe: #3a5878;
  --msg-out-bg:    #152038;
  --msg-out-stripe:#38bdf8;
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-2); }

/* Smooth section reveals */
@media (prefers-reduced-motion: no-preference) {
  details.form-section[open] > .form-section-body {
    animation: section-reveal .18s ease-out;
  }
}
@keyframes section-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

button, input, select, textarea { font: inherit; }

/* ── Buttons ─────────────────────────────────────────────────────── */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, filter .12s, transform .08s, box-shadow .12s;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
button:hover               { background: var(--accent-h); border-color: var(--accent-h); box-shadow: 0 2px 6px rgba(0,0,0,.14); }
button:active              { transform: translateY(1px); box-shadow: none; }
button:focus-visible       { outline: 3px solid var(--focus); outline-offset: 2px; }
button:disabled            { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

button.secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
button.secondary:hover     { background: var(--surface-2); border-color: var(--text-2); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

button.danger {
  background: var(--danger);
  border-color: var(--danger);
}
button.danger:hover        { filter: brightness(1.08); }

/* ── Inputs ──────────────────────────────────────────────────────── */
input, select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .1s, box-shadow .1s, background .1s;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--border);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--focus);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
textarea { min-height: 90px; resize: vertical; line-height: 1.55; }

/* ── App shell ───────────────────────────────────────────────────── */
.app-shell {
  height: 100%;
  display: grid;
  grid-template-columns: 214px 1fr;
  overflow: hidden;
}

/* ── Sidebar (always dark) ───────────────────────────────────────── */
.sidebar {
  /* sidebar-local tokens — always dark regardless of theme */
  --sb-bg:       #080f1e;
  --sb-s1:       #0f1a30;
  --sb-s2:       #162340;
  --sb-text:     #c8dff5;
  --sb-muted:    #5a7898;
  --sb-border:   #1a2e48;
  --sb-accent:   #38bdf8;

  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sb-bg) 0%, #050c18 100%);
  border-right: 2px solid var(--sb-border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sb-accent), #0ea5e9);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(56,189,248,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.brand-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--sb-text);
  letter-spacing: -.02em;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group-label {
  padding: 10px 8px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sb-muted);
}

.nav-divider {
  height: 1px;
  background: var(--sb-border);
  margin: 6px 8px;
}

/* nav items are .tab buttons */
.tab {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px 0 12px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--sb-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.tab:hover              { background: var(--sb-s1); color: var(--sb-text); filter: none; transform: none; box-shadow: none; }
.tab:focus-visible      { outline: 2px solid var(--sb-accent); outline-offset: 1px; }
.tab:active             { transform: none; }
.tab.active             {
  background: var(--sb-s2);
  border-color: var(--sb-border);
  color: var(--sb-text);
  box-shadow: inset 3px 0 0 var(--sb-accent);
}
.tab.active .nav-icon   { color: var(--sb-accent); }

.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: color .1s;
}
.nav-icon svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-label { flex: 1; }

.nav-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sb-accent);
  color: #0a1616;
  font-size: 11px;
  font-weight: 800;
}
.nav-badge:not(:empty) { display: inline-flex; }

/* sidebar footer: status chips */
.sidebar-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--sb-s1);
  color: var(--sb-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  transition: border-color .12s, background .12s;
}
.status-chip:hover { background: var(--sb-s2); border-color: var(--sb-border); }
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.ok   { background: #34d496; }
.status-dot.warn { background: #e0b44a; }
.status-dot.err  { background: #ff6060; }

/* ── App main ────────────────────────────────────────────────────── */
.app-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 24px;
  height: 60px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 1px 0 var(--border-soft);
}
.topbar h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
}
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-actions button {
  height: 36px;
  padding: 0 14px;
  font-weight: 700;
}

/* ── Content / views ─────────────────────────────────────────────── */
.content { flex: 1; overflow: hidden; }

.tab-view                    { display: none; }
.tab-view.active             { display: block; height: 100%; overflow-y: auto; }
.tab-view.active.full-height { overflow: hidden; }   /* unibox override */

.view-pad { padding: 26px 28px 40px; max-width: 1400px; margin: 0 auto; }

/* ── Section helpers ─────────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.section-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: var(--text); }
.section-subline  { margin: 5px 0 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.muted-copy       { color: var(--muted); font-size: 12px; }
.section-label    { margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }

.counter-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge, .metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.badge          { background: var(--surface-3); color: var(--text-2); border-color: var(--border-soft); }
.badge.sent     { background: var(--ok-f);     color: var(--ok);     border-color: var(--ok); }
.badge.failed   { background: var(--danger-f); color: var(--danger); border-color: var(--danger); }
.badge.rejected { background: var(--surface-3); color: var(--muted); }
.badge.blocked  { background: var(--warn-bg);  color: var(--warn-text); border-color: var(--warn-text); }
.badge.pending  { background: var(--accent-f); color: var(--accent); border-color: var(--accent); }
.badge.pending_auto { background: var(--ok-f); color: var(--ok); border-color: var(--ok); }
.badge.scheduled { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); }
.badge.expired  { background: var(--warn-bg);  color: var(--warn-text); border-color: var(--warn-text); }
.metric-pill    { background: transparent; color: var(--muted); border-color: transparent; font-weight: 500; }

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state {
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}
.empty-rich .empty-icon {
  background: linear-gradient(135deg, var(--accent-f), var(--surface-2));
  border: 2px solid var(--border);
}

/* ── UNIBOX ──────────────────────────────────────────────────────── */
#uniboxTab.full-height {
  display: grid;
  grid-template-rows: auto 1fr;
}

.unibox-header {
  padding: 14px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.unibox-header .section-head { margin-bottom: 0; }

#unibox {
  overflow: hidden;
  min-height: 0;
}

.unibox {
  display: grid;
  grid-template-columns: 272px 1fr;
  height: 100%;
  overflow: hidden;
}

/* thread list */
.unibox-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}
.unibox-toolbar {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.unibox-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.unibox-items { flex: 1; overflow-y: auto; }

.thread-row {
  width: 100%;
  height: auto;                /* override base button height: 34px */
  min-height: 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1.5px solid var(--border-soft);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 400;
  cursor: pointer;
  transition: background .12s, border-left-color .12s;
}
.thread-row:hover  { background: var(--surface-2); filter: none; }
.thread-row.active {
  background: var(--accent-f);
  border-left-color: var(--accent);
}
.thread-row.active .thread-name { color: var(--accent); }
.thread-row.is-pending { border-left-color: var(--warn-text); }
.thread-row.is-pending.active { border-left-color: var(--accent); }

.thread-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.thread-avatar.lg {
  width: 48px; height: 48px;
  font-size: 16px;
  border-radius: 12px;
}

.thread-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.thread-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.thread-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-time {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}
.thread-row-mid {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.thread-agent-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff !important;
  background: var(--accent);   /* fallback when inline style is empty */
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.thread-intent-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.thread-intent-dot.tone-ok    { background: var(--ok); }
.thread-intent-dot.tone-warn  { background: var(--warn-text); }
.thread-intent-dot.tone-err   { background: var(--danger); }
.thread-intent-dot.tone-info  { background: var(--accent); }
.thread-intent-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--text-2);
  font-weight: 600;
}
.thread-intent-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
}
.thread-intent-pill.tone-ok    { background: var(--ok-f);    color: var(--ok);    border-color: var(--ok); }
.thread-intent-pill.tone-warn  { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); }
.thread-intent-pill.tone-err   { background: var(--danger-f);color: var(--danger); border-color: var(--danger); }
.thread-intent-pill.tone-info  { background: var(--accent-f);color: var(--accent); border-color: var(--accent); }
.thread-snippet {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.thread-pending-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn-text);
  box-shadow: 0 0 0 3px var(--warn-bg);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* conversation detail */
.unibox-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.unibox-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.unibox-detail-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.unibox-title { min-width: 0; flex: 1; }
.unibox-title h3   { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.unibox-title-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.unibox-detail-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.unibox-status-banner {
  padding: 8px 16px;
  background: var(--accent-f);
  border-bottom: 2px solid var(--accent);
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .01em;
}
.stack-label {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.unibox-detail-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  overflow: hidden;
}
.message-stack {
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--border);
}
.draft-stack {
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-bubble {
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--text-2);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 12px 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.message-bubble.outbound {
  border-left-color: var(--accent);
  background: var(--accent-f);
  margin-left: 16px;
}
.message-bubble.inbound {
  margin-right: 16px;
}
.msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-soft);
}
.msg-dir {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.message-bubble.outbound .msg-dir { color: var(--accent); }
.msg-time { font-size: 10px; color: var(--muted); }
.msg-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.message-bubble pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

/* ── Draft card ──────────────────────────────────────────────────── */
.draft-card {
  display: block;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s;
}
.draft-card:hover { box-shadow: var(--shadow-md); border-color: var(--text-2); }
.draft-card .draft-body {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.draft-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--border);
}
.draft-meta-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.draft-meta-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.draft-meta-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
}
.draft-source-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border-soft);
}
.draft-scenario-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-f);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.draft-confidence {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 90px;
}
.conf-track {
  width: 90px;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.conf-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s;
}
.conf-fill.tone-ok   { background: var(--ok); }
.conf-fill.tone-warn { background: var(--warn-text); }
.conf-fill.tone-err  { background: var(--danger); }
.conf-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-2);
}
.draft-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.draft-body textarea { min-height: 160px; font-size: 13px; line-height: 1.55; }
.draft-body input { font-size: 13px; font-weight: 600; }
.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1.5px solid var(--border-soft);
}
.draft-action-primary { font-weight: 700; }
.notice-warn {
  border-left: 3px solid var(--danger);
  background: var(--danger-f);
  color: var(--danger);
}

/* ── Draft groups (Drafty tab) ───────────────────────────────────── */
.draft-group {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.draft-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.draft-group-header.tone-warn   { background: var(--warn-bg); color: var(--warn-text); border-bottom-color: var(--warn-text); }
.draft-group-header.tone-accent { background: var(--accent-f); color: var(--accent); border-bottom-color: var(--accent); }
.draft-group-header.tone-ok     { background: var(--ok-f); color: var(--ok); border-bottom-color: var(--ok); }
.draft-group-header.tone-err    { background: var(--danger-f); color: var(--danger); border-bottom-color: var(--danger); }
.draft-group-header.tone-muted  { color: var(--muted); }
.draft-group-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.draft-group-body .draft-card {
  border: 0;
  border-radius: 0;
  border-bottom: 1.5px solid var(--border-soft);
  box-shadow: none;
}
.draft-group-body .draft-card:last-child { border-bottom: 0; }
.draft-group-body .draft-card:hover { box-shadow: none; border-color: var(--border-soft); background: var(--surface-2); }

/* Collapsed older drafts in conversation detail */
.older-drafts {
  margin-top: 4px;
  border: 1.5px dashed var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 0;
}
.older-drafts > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  list-style: none;
  user-select: none;
}
.older-drafts > summary::-webkit-details-marker { display: none; }
.older-drafts > summary:hover { color: var(--accent); }
.older-drafts-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}

/* Drafty top toolbar */
.draft-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.draft-bulk-actions {
  display: flex;
  gap: 8px;
}

/* ── Notice (warning) ────────────────────────────────────────────── */
.notice {
  padding: 7px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-f);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}

/* ── Button row ──────────────────────────────────────────────────── */
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Draft list (Drafts tab) ─────────────────────────────────────── */
.draft-list { display: flex; flex-direction: column; gap: 12px; }
.draft-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-height: 0; }

/* ── Settings form ───────────────────────────────────────────────── */
#configForm {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

details.form-section {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

summary.form-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  background: var(--surface-2);
  user-select: none;
  gap: 10px;
  transition: background .1s;
}
summary.form-section-title::-webkit-details-marker { display: none; }
summary.form-section-title:hover { background: var(--surface-3); }
summary.form-section-title::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  flex-shrink: 0;
  transition: transform .15s;
}
details[open] summary.form-section-title::after { transform: rotate(45deg); }

.form-section-body {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--border);
}
.form-section-desc { margin: 0; color: var(--muted); font-size: 12px; }

.field            { display: flex; flex-direction: column; gap: 6px; }
.field > label    { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 12px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: border-color .12s, background .12s;
}
.check-field:hover { border-color: var(--border); background: var(--surface-3); }
.check-field:has(input:checked) { border-color: var(--accent); background: var(--accent-f); }
.check-field input { width: auto; margin: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.segmented label {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px;
  cursor: pointer; font-size: 13px; font-weight: 600;
  transition: background .1s, color .1s;
  color: var(--muted);
  border-right: 1.5px solid var(--border);
}
.segmented label:last-child { border-right: 0; }
.segmented label:hover:not(:has(input:checked)) { background: var(--surface-3); color: var(--text); }
.segmented label:has(input:checked) { background: var(--accent-f); color: var(--accent); font-weight: 700; }
.segmented input { width: auto; margin: 0; }

.followup-row {
  display: grid;
  grid-template-columns: auto 76px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
}
.followup-row:hover { border-color: var(--border); }

.profile-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Analytics ───────────────────────────────────────────────────── */
.analytics-grid { display: flex; flex-direction: column; gap: 16px; }

/* KPI hero cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.kpi-card {
  padding: 18px 20px;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--text-2); }
.kpi-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.kpi-card.kpi-ok::before     { background: var(--ok); }
.kpi-card.kpi-warn::before   { background: var(--warn-text); }
.kpi-card.kpi-err::before    { background: var(--danger); }
.kpi-card.kpi-muted::before  { background: var(--muted); opacity: .5; }
.kpi-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
}
.kpi-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
}
.kpi-card.kpi-ok    .kpi-value { color: var(--ok); }
.kpi-card.kpi-warn  .kpi-value { color: var(--warn-text); }
.kpi-card.kpi-err   .kpi-value { color: var(--danger); }
.kpi-card.kpi-muted .kpi-value { color: var(--muted); }
.kpi-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* ── Recent Bookings list ─────────────────────────────────────── */
.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.booking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: background .12s;
}
.booking-row:hover { background: var(--surface-2); }
.booking-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #0d9488);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.booking-info { flex: 1; min-width: 0; }
.booking-lead {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-date {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Intent breakdown bars */
.intent-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}
.intent-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.intent-bar-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intent-bar-track {
  height: 18px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.intent-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .3s ease-out;
}
.intent-bar-fill.tone-ok    { background: var(--ok); }
.intent-bar-fill.tone-warn  { background: var(--warn-text); }
.intent-bar-fill.tone-err   { background: var(--danger); }
.intent-bar-fill.tone-info  { background: var(--accent); }
.intent-bar-fill.tone-muted { background: var(--muted); opacity: .6; }
.intent-bar-value {
  font-size: 12px;
  text-align: right;
  font-weight: 600;
}

/* Leaderboard */
.leaderboard { padding: 0; }
.leaderboard-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 70px 90px 70px minmax(120px, 1.2fr);
  gap: 14px;
  padding: 11px 18px;
  align-items: center;
  border-bottom: 1.5px solid var(--border-soft);
  font-size: 12px;
}
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row.leaderboard-head {
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  padding: 9px 18px;
  border-bottom: 2px solid var(--border);
}
.lb-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-rank {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 24px;
}
.lb-name strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-num strong { font-size: 14px; font-weight: 700; }
.lb-bar {
  height: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.lb-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-h));
  border-radius: 999px;
  transition: width .3s ease-out;
}

@media (max-width: 900px) {
  .leaderboard-row {
    grid-template-columns: 1fr 60px 70px;
    gap: 10px;
  }
  .leaderboard-row > .lb-num:nth-child(4),
  .leaderboard-row > .lb-bar { display: none; }
}

.analytics-card {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.analytics-card-head {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1px;
  background: var(--border);
}
.metric-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
}
.metric-box strong { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.metric-box span   { font-size: 11px; color: var(--muted); font-weight: 700; }

.analytics-table { width: 100%; }
.analytics-row {
  display: grid;
  grid-template-columns: minmax(0,2fr) repeat(4, minmax(52px,.5fr));
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  align-items: center;
}
/* Scenario table has 6 columns */
.analytics-row.analytics-head ~ .analytics-row,
.analytics-row.analytics-head {
  grid-template-columns: minmax(0,2fr) repeat(5, minmax(52px,.5fr));
}
.analytics-row:last-child { border-bottom: 0; }
.analytics-row.head, .analytics-head {
  font-size: 11px; font-weight: 800;
  color: var(--muted);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Conversion funnel ───────────────────────────────────────────── */
.funnel-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.funnel-step {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 1fr minmax(100px, 1fr);
  gap: 12px;
  align-items: center;
}
.funnel-step-label {
  font-size: 13px;
  font-weight: 500;
}
.funnel-step-bar-wrap {
  background: var(--surface-2, #eee);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
.funnel-step-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  background: var(--accent);
}
.funnel-step-bar.tone-ok { background: var(--ok); }
.funnel-step-bar.tone-warn { background: var(--warn-text, #f59e0b); }
.funnel-step-bar.tone-accent { background: var(--accent, #6c63ff); }
.funnel-step-value {
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.funnel-drop {
  font-size: 11px;
  color: var(--danger, #ef4444);
  font-weight: 600;
}

/* ── Tasks ───────────────────────────────────────────────────────── */
.task-grid { display: flex; flex-direction: column; gap: 18px; }

.task-group {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.task-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.task-group-header.tone-warn   { background: var(--warn-bg); color: var(--warn-text); border-bottom-color: var(--warn-text); }
.task-group-header.tone-accent { background: var(--accent-f); color: var(--accent); border-bottom-color: var(--accent); }
.task-group-header.tone-ok     { background: var(--ok-f); color: var(--ok); border-bottom-color: var(--ok); }
.task-group-header.tone-err    { background: var(--danger-f); color: var(--danger); border-bottom-color: var(--danger); }
.task-group-header.tone-muted  { color: var(--muted); }
.task-group-count {
  background: rgba(0, 0, 0, .15);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.task-group-body {
  display: flex;
  flex-direction: column;
}

.task-card {
  border-bottom: 1.5px solid var(--border-soft);
  background: var(--surface);
  overflow: hidden;
  transition: background .12s;
}
.task-card:last-child { border-bottom: 0; }
.task-card:hover { background: var(--surface-2); }
.task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 6px;
}
.task-head-main { min-width: 0; flex: 1; }
.task-head h3 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--text); }
.task-head p  { margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.task-time {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--border-soft);
  background: var(--surface-2);
  white-space: nowrap;
}
.task-time.tone-warn   { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); }
.task-time.tone-accent { background: var(--accent-f); color: var(--accent); border-color: var(--accent); }
.task-time.tone-muted  { color: var(--muted); }

.task-body { padding: 4px 16px 12px; font-size: 12px; }
.task-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Profile cards ───────────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;                /* override base button height */
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  height: auto;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.profile-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  filter: none;
  background: var(--surface);
}
.profile-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-f), var(--shadow);
}

.profile-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.profile-avatar {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-h));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
.profile-card-title {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.profile-id {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: var(--text-2);
}
.profile-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.profile-stat span { color: var(--muted); font-size: 11px; }
.profile-stat strong { color: var(--text); font-weight: 600; font-size: 12px; }

.profile-card-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.profile-card-foot button {
  height: 28px;
  font-size: 11px;
  padding: 0 6px;
  width: 100%;
}

.profile-card.add-card {
  border-style: dashed;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  box-shadow: none;
}
.profile-card.add-card:hover {
  background: var(--accent-f);
  color: var(--accent);
  border-color: var(--accent);
  transform: none;
}
.profile-card.add-card .plus-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600;
  color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.profile-card.add-card:hover .plus-mark {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.profile-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.profile-editor-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-editor-title .profile-avatar { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.profile-editor-title h2 { margin: 0; font-size: 17px; font-weight: 700; }
.profile-editor-title p  { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-back::before {
  content: '';
  width: 7px; height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ── Test tab ────────────────────────────────────────────────────── */
.code-textarea {
  min-height: 260px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

.result-box {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 380px;
  margin-top: 12px;
  color: var(--text);
}

/* ── Settings tab (minimal global) ───────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  max-width: 1200px;
}
.settings-card {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.settings-card-info {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.settings-card-head {
  padding: 14px 18px;
  border-bottom: 2px solid var(--border);
  background: var(--surface-2);
}
.settings-card-head h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.settings-card-head p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.settings-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Global LLM provider picker */
.global-provider-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.provider-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.provider-radio:hover { border-color: var(--accent); }
.provider-radio.selected { border-color: var(--accent); background: var(--accent-f); }
.provider-radio input[type="radio"] { margin-top: 2px; accent-color: var(--accent); }
.provider-radio-body { display: flex; flex-direction: column; gap: 3px; }
.provider-radio-label { font-weight: 600; font-size: 14px; color: var(--text); }
.provider-radio-hint { font-size: 12px; color: var(--text-muted); line-height: 1.35; }

/* API key field (editable, with status) — used in Settings */
.api-key-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
  transition: border-color .12s, background .12s;
}
.api-key-field.has-value { border-color: var(--ok); background: var(--ok-f); }
.api-key-field.missing   { border-color: var(--warn-text); background: var(--warn-bg); }
.api-key-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.api-key-info { display: flex; align-items: center; gap: 10px; }
.api-key-label { font-size: 13px; font-weight: 700; color: var(--text); }
.api-key-status {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1.5px solid;
}
.api-key-status.ok      { color: var(--ok);        border-color: var(--ok);        background: var(--surface); }
.api-key-status.missing { color: var(--warn-text); border-color: var(--warn-text); background: var(--surface); }
.api-key-getlink {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.api-key-getlink:hover { text-decoration: underline; }
.api-key-field input[type="password"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  background: var(--surface);
  border-color: var(--border-soft);
}
.api-key-hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.4;
}
.api-key-hint code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  font-size: 10px;
}

.settings-card-keys { /* highlight that these are editable LLM keys */ }
.settings-card-keys .settings-card-head { background: linear-gradient(180deg, var(--accent-f), var(--surface-2)); }

.env-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.env-key-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.env-key-label { font-weight: 700; font-size: 13px; }
.env-key-name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  padding: 0;
}
.env-key-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1.5px solid;
}
.env-key-status.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-f); }
.env-key-status.missing { color: var(--warn-text); border-color: var(--warn-text); background: var(--warn-bg); }

.settings-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.settings-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.settings-stat-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.settings-stat strong { font-size: 14px; font-weight: 800; color: var(--text); }

/* ── Setup / integration tab ─────────────────────────────────────── */
.setup-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.setup-status-banner.ok {
  background: var(--ok-f);
  border-color: var(--ok);
}
.setup-status-banner.warn {
  background: var(--warn-bg);
  border-color: var(--warn-text);
}
.setup-status-banner strong { font-size: 15px; font-weight: 800; }
.setup-status-banner p { margin: 3px 0 0; font-size: 12px; color: var(--text-2); }
.setup-status-icon {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid currentColor;
  flex-shrink: 0;
}
.setup-status-banner.ok .setup-status-icon { color: var(--ok); }
.setup-status-banner.warn .setup-status-icon { color: var(--warn-text); }

.copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copy-code {
  flex: 1;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}
.copy-row button { flex-shrink: 0; }

.routing-steps {
  list-style: decimal;
  padding-left: 20px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.routing-steps li { padding: 4px 0; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.checklist-item.ok { border-color: var(--ok); background: var(--ok-f); }
.checklist-item.todo { border-color: var(--warn-text); background: var(--warn-bg); }
.checklist-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
}
.checklist-item.ok .checklist-icon { color: var(--ok); background: var(--surface); }
.checklist-item.todo .checklist-icon { color: var(--warn-text); background: var(--surface); }
.checklist-item strong { font-size: 13px; color: var(--text); }
.checklist-item p { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

/* ── Test webhook presets ────────────────────────────────────────── */
.test-presets { margin-bottom: 16px; }
.test-presets-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.test-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.test-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  height: auto;
  padding: 10px 12px;
  border: 2px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
  box-shadow: none;
}
.test-preset-btn:hover { border-color: var(--accent); background: var(--accent-f); transform: translateY(-1px); }
.test-preset-label { font-size: 13px; font-weight: 700; }
.test-preset-desc { font-size: 11px; color: var(--muted); font-weight: 500; }

/* Old setup-row (legacy) — keep for any leftover usage */
.setup-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.setup-row strong {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.setup-row code {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ── Campaign picker (Instantly connect) ─────────────────────────── */
.campaign-picker {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.campaign-picker input[type="text"] { width: 100%; }
.campaign-picker button { white-space: nowrap; }
.campaign-picker button[disabled] { opacity: .45; cursor: not-allowed; }
.campaign-picker-dropdown {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  z-index: 200 !important;
}
.campaign-picker-option:hover { background: var(--accent-f) !important; }
.campaign-picker-option:last-child { border-bottom: none !important; }

.campaign-picker-status {
  font-size: 12px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  line-height: 1.4;
}
.campaign-picker-status.ok      { background: var(--ok-f);     color: var(--ok); }
.campaign-picker-status.warn    { background: var(--warn-bg);  color: var(--warn-text); }
.campaign-picker-status.error   { background: var(--danger-f); color: var(--danger); }
.campaign-picker-status.loading { background: var(--accent-f); color: var(--accent); }
.campaign-picker-status code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.15);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

/* Connected campaigns pills */
.connected-campaigns-zone {
  margin-bottom: 14px;
}
.connected-campaigns-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.connected-campaigns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.connected-campaign-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--accent-f);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .15s, opacity .15s;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected-campaign-pill:hover {
  background: rgba(224,36,36,.1);
  border-color: var(--danger);
  color: var(--danger);
}
.connected-campaign-pill-x {
  font-size: 14px;
  line-height: 1;
  opacity: .7;
}

/* Nested form-section (override mode within a parent section) */
details.nested-section {
  border-color: var(--border);
  background: var(--bg);
}
details.nested-section > summary.form-section-title {
  background: var(--surface-3);
  font-size: 12px;
  padding: 8px 12px;
}

/* ── Profile editor 2-col layout ─────────────────────────────────── */
.profile-editor-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 22px;
  align-items: start;
}

.profile-editor-sidebar {
  position: sticky;
  top: 22px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.profile-editor-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.profile-editor-sidebar-head .profile-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.profile-editor-sidebar-title { min-width: 0; flex: 1; }
.profile-editor-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-editor-id {
  margin: 1px 0 0;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-back-btn {
  width: 100%;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
}
.profile-section-nav {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.profile-section-nav button {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  height: auto;
  white-space: nowrap;
  transition: background .12s;
}
.profile-section-nav button:hover { background: var(--surface-2); filter: none; }
.profile-section-nav button.active {
  background: var(--accent-f);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.nav-section-icon { font-size: 14px; line-height: 1; }
.nav-section-label { overflow: hidden; text-overflow: ellipsis; }
.nav-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--surface-3);
  flex-shrink: 0;
}
.nav-status-dot.tone-ok    { background: var(--ok); }
.nav-status-dot.tone-warn  { background: var(--warn-text); }
.nav-status-dot.tone-err   { background: var(--danger); }
.nav-status-dot.tone-muted { background: var(--muted); opacity: .35; }

.profile-editor-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Provider cards ──────────────────────────────────────────────── */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.provider-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  height: auto;                 /* override base button height */
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  height: auto;
  transition: border-color .12s, background .12s, transform .12s;
}
.provider-card:hover {
  background: var(--surface-3);
  border-color: var(--text-2);
  filter: none;
  transform: translateY(-1px);
}
.provider-card.is-active {
  background: var(--accent-f);
  border-color: var(--accent);
  border-width: 2px;
  padding: 11px 13px;
}
.provider-card-name { font-size: 14px; font-weight: 700; }
.provider-card-desc { font-size: 11px; color: var(--muted); line-height: 1.35; }
.provider-card-status {
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  align-self: flex-start;
  background: var(--surface-3);
}
.provider-card-status.ok   { background: var(--ok-f);    color: var(--ok); }
.provider-card-status.warn { background: var(--warn-bg); color: var(--warn-text); }
.provider-config { display: flex; flex-direction: column; gap: 10px; }
.provider-config[hidden] { display: none; }

/* Strong card-style sections — bold borders so each card cleanly separates from bg */
details.form-section {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
details.form-section[open] { box-shadow: var(--shadow-md); border-color: var(--text-2); }
details.nested-section { border-width: 1.5px; border-color: var(--border-soft); }
summary.form-section-title {
  font-size: 14px;
  font-weight: 700;
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 0;
}
details.form-section[open] > summary.form-section-title { border-bottom: 1px solid var(--border); }
.form-section-body { padding: 18px; gap: 14px; border-top: 0; }

/* Sticky save bar inside the main column */
.profile-editor-main .sticky-save-bar {
  margin: 0;
  border-radius: var(--r-lg);
  border: 2px solid var(--border);
  position: sticky;
  bottom: 16px;
  background: var(--surface);
}

/* Responsive: fold sidebar */
@media (max-width: 1080px) {
  .profile-editor-shell { grid-template-columns: 1fr; }
  .profile-editor-sidebar { position: static; max-height: none; }
  .profile-section-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .profile-section-nav button { width: auto; flex-shrink: 0; }
}

/* ── Profile audit / lint ────────────────────────────────────────── */
.audit-panel {
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.audit-empty { background: var(--ok-f); color: var(--ok); border-left: 3px solid var(--ok); font-weight: 600; }
.audit-head { font-size: 13px; margin-bottom: 8px; color: var(--text); }
.audit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.audit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12px;
  line-height: 1.45;
}
.audit-item.audit-err  { background: var(--danger-f); color: var(--danger); }
.audit-item.audit-warn { background: var(--warn-bg);  color: var(--warn-text); }
.audit-icon { font-weight: 800; flex-shrink: 0; width: 16px; text-align: center; }

/* ── Clone-from select in editor head ────────────────────────────── */
.clone-from-select {
  width: auto;
  min-width: 180px;
  font-size: 12px;
  padding: 6px 10px;
  height: 30px;
}

/* ── Per-scenario inline test ────────────────────────────────────── */
.scenario-test-row {
  margin-top: 4px;
}
.scenario-test-row button {
  height: 28px;
  font-size: 11px;
  padding: 0 10px;
}
.scenario-test-result {
  margin-top: 8px;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2);
  font-size: 12px;
  line-height: 1.45;
}
.scenario-test-result pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-2);
}
.scenario-test-meta {
  font-size: 11px;
  margin-bottom: 6px;
  color: var(--ok);
  font-weight: 600;
}

/* ── Reply scenarios ─────────────────────────────────────────────── */
.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scenario-row {
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .12s;
}
.scenario-row:hover { border-color: var(--accent); }
.scenario-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--border);
}
.scenario-head input[type="text"] {
  font-weight: 700;
  background: transparent;
  border-color: transparent;
  padding: 4px 8px;
}
.scenario-head input[type="text"]:focus {
  background: var(--surface);
  border-color: var(--accent);
}
.scenario-head button {
  height: 28px;
  width: 28px;
  padding: 0;
  font-weight: 700;
  font-size: 13px;
}
.scenario-up, .scenario-down { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.scenario-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scenario-body textarea {
  min-height: 38px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.scenario-body [data-scenario-description] {
  font-family: inherit;
}
.scenario-keywords-details {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 0;
}
.scenario-keywords-details > summary {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.scenario-keywords-details > summary::-webkit-details-marker { display: none; }
.scenario-keywords-details > textarea {
  margin: 0 8px 8px;
  width: calc(100% - 16px);
}

/* ── Callouts (highlighted info boxes) ───────────────────────────── */
.callout {
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-f);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.callout-accent { border-left-color: var(--accent); background: var(--accent-f); }
.callout strong { font-weight: 700; color: var(--text); }
.callout-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Section status badges (in <summary>) ───────────────────────── */
.section-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.section-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.section-status-ok    { background: var(--ok-f);     color: var(--ok); }
.section-status-warn  { background: var(--warn-bg);  color: var(--warn-text); }
.section-status-err   { background: var(--danger-f); color: var(--danger); }
.section-status-muted { background: var(--surface-3); color: var(--muted); }

summary.form-section-title {
  gap: 8px;
}

/* ── Help icon with tooltip ──────────────────────────────────────── */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  cursor: help;
  position: relative;
  user-select: none;
  vertical-align: middle;
}
.help-icon:hover, .help-icon:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}
.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 50;
  white-space: normal;
  text-align: center;
}
.help-icon:hover::after, .help-icon:focus-visible::after { opacity: 1; }

/* ── Sticky save bar ─────────────────────────────────────────────── */
.sticky-save-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: 8px -24px -22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -4px 18px rgba(0,0,0,.06);
  z-index: 10;
}
.save-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.save-state .save-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--surface-3);
  transition: background .15s;
}
.save-state[data-state="dirty"] { color: var(--warn-text); }
.save-state[data-state="dirty"] .save-dot { background: var(--warn-text); animation: pulse-dot 1.6s ease-in-out infinite; }
.save-state[data-state="saving"] { color: var(--accent); }
.save-state[data-state="saving"] .save-dot { background: var(--accent); animation: pulse-dot 1s ease-in-out infinite; }
.save-state[data-state="saved"] { color: var(--ok); }
.save-state[data-state="saved"] .save-dot { background: var(--ok); }
.save-state[data-state="clean"] .save-dot { background: var(--muted); }
.save-actions { display: flex; gap: 8px; }

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .7; }
}

/* ── Smart-fill button (next to textarea) ────────────────────────── */
.smartfill-btn {
  margin-top: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Instantly lead-status workflow ──────────────────────────────── */
.status-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.status-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background .1s, border-color .1s;
}
.status-check:hover { background: var(--surface-3); border-color: var(--border); }
.status-check input { width: auto; margin: 0; }
.status-check:has(input:checked) { background: var(--accent-f); border-color: var(--accent); color: var(--accent); }

.status-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 12px;
}
.status-map-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.status-map-row:hover { border-color: var(--border); }
.status-map-key {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-map-key small {
  font-family: inherit;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.status-map-row select { font-size: 12px; }

@media (max-width: 700px) {
  .status-map-row { grid-template-columns: 1fr; }
}

/* ── Skeleton loaders ────────────────────────────────────────────── */
.skeleton-pad { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.skel-stack { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-avatar { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.skel-line { height: 10px; }
.skel-line.w70 { width: 70%; }
.skel-line.w40 { width: 40%; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Calendly preview ────────────────────────────────────────────── */
.calendly-preview {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendly-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.calendly-preview-head strong { color: var(--text); font-size: 12px; letter-spacing: 0; text-transform: none; }
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.slot-pill {
  padding: 9px 11px;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
}
.slot-day { color: var(--text); }

/* Calendly link field row */
.calendly-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.calendly-link-row input {
  flex: 1;
}
.calendly-link-row button {
  flex-shrink: 0;
  white-space: nowrap;
}
.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
}

/* ── Campaigns table ─────────────────────────────────────────────── */
.campaign-table {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.campaign-row {
  display: grid;
  grid-template-columns: 36px minmax(180px, 2fr) 90px minmax(140px, 1.2fr) minmax(180px, 1.4fr) minmax(180px, 1.6fr);
  gap: 14px;
  padding: 14px 18px;
  align-items: center;
  border-bottom: 1.5px solid var(--border-soft);
  font-size: 12px;
  transition: background .12s;
}
.campaign-row:not(.campaign-head):hover { background: var(--surface-2); }
.campaign-row:last-child { border-bottom: 0; }
.campaign-row.campaign-head {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px 18px;
  border-bottom: 2px solid var(--border);
}
.campaign-row.is-orphan { background: var(--warn-bg); }
.campaign-row.is-orphan:hover { background: var(--warn-bg); filter: brightness(1.05); }
.campaign-row.is-multi  { background: var(--danger-f); }
.cell-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell-stack strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.campaign-status-cell {
  display: flex; align-items: center; justify-content: center;
}
.campaign-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.campaign-dot.dot-active {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-f);
  animation: pulse-dot 2s ease-in-out infinite;
}
.campaign-dot.dot-paused {
  background: var(--warn-text);
  box-shadow: 0 0 0 3px var(--warn-bg);
}
.campaign-dot.dot-live-other {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-f);
}
.campaign-dot.dot-derived {
  background: var(--muted);
  opacity: .5;
}

.cell-inbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.cell-inbox strong { font-size: 18px; font-weight: 800; line-height: 1; }
.cell-inbox span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.cell-activity { display: flex; flex-direction: column; gap: 2px; }
.cell-activity strong { font-size: 14px; font-weight: 700; }

.cell-agent { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  max-width: 100%;
}
.agent-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-chip-off {
  font-size: 9px;
  background: rgba(0,0,0,.25);
  padding: 1px 5px;
  border-radius: 4px;
}
.agent-chip-orphan {
  background: var(--warn-bg) !important;
  color: var(--warn-text) !important;
  border: 1.5px solid var(--warn-text);
  box-shadow: none;
}

.cell-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}
.cell-actions select {
  font-size: 11px;
  height: 30px;
  padding: 0 8px;
}
.cell-actions button {
  height: 30px;
  width: 30px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 1100px) {
  .campaign-row {
    grid-template-columns: 36px 1fr;
    gap: 8px;
  }
  .campaign-row.campaign-head { display: none; }
  .cell-inbox, .cell-activity, .cell-agent, .cell-actions {
    grid-column: 2;
    padding-left: 0;
  }
}

/* ── Bulk fields (40 inboxes UX) ─────────────────────────────────── */
.bulk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r);
}
.bulk-field-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bulk-field-head label { font: inherit; color: inherit; }
.bulk-counter {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.bulk-counter.has-warning { background: var(--warn-bg); color: var(--warn-text); }
.bulk-validation {
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
}
.bulk-validation.is-error { color: var(--danger); }
.bulk-validation.is-ok    { color: var(--ok); }

.mapping-summary { font-size: 11px; }

/* ── Lead pipeline (Unibox) ──────────────────────────────────────── */
.lead-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pipeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pipeline-chip:hover { background: var(--surface-3); filter: none; }
.pipeline-chip .pipeline-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.pipeline-chip.ok    { border-color: var(--ok-f);  color: var(--ok);          background: var(--ok-f); }
.pipeline-chip.warn  { border-color: rgba(138,88,0,.35);   color: var(--warn-text);   background: var(--warn-bg); }
.pipeline-chip.err   { border-color: rgba(192,48,64,.35);  color: var(--danger);      background: var(--danger-f); }
.pipeline-chip.info  { border-color: rgba(11,140,130,.35); color: var(--accent);      background: var(--accent-f); }
.pipeline-chip.muted { color: var(--muted); }
.pipeline-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pipeline-chip.is-active .pipeline-count { background: rgba(255,255,255,.22); color: #fff; }

/* ── Knowledge base & custom variable rows ──────────────────────── */
.kb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
  padding: 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.kb-row:hover { border-color: var(--border); }
.kb-row textarea { min-height: 48px; }

/* Learnings panel */
.learnings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.learning-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-alt, #f8f9fa);
  border: 1px solid var(--border, #dee2e6);
  border-left: 3px solid var(--accent, #6c63ff);
  border-radius: 6px;
  font-size: 13px;
}
.learning-text {
  flex: 1;
  line-height: 1.4;
}
.learning-date {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.learning-delete {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 13px;
  line-height: 1;
}

.var-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.var-row:hover { border-color: var(--border); }

.kb-remove {
  width: 30px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.form-section-desc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

/* ── Toasts ──────────────────────────────────────────────────────── */
.toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  animation: toast-in .22s cubic-bezier(.2,.9,.3,1.2);
  color: var(--text);
}
.toast.toast-success { border-left-color: var(--ok); }
.toast.toast-error   { border-left-color: var(--danger); }
.toast.toast-warn    { border-left-color: var(--warn-text); }
.toast .toast-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.toast.toast-success .toast-icon { color: var(--ok); }
.toast.toast-error   .toast-icon { color: var(--danger); }
.toast.toast-warn    .toast-icon { color: var(--warn-text); }
.toast.toast-info    .toast-icon { color: var(--accent); }
.toast .toast-body { flex: 1; }
.toast.is-leaving { animation: toast-out .15s ease-in forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }

/* ── Command Palette (Cmd+K) ─────────────────────────────────────── */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmd-palette[hidden] { display: none; }
.cmd-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 16, .6);
  backdrop-filter: blur(4px);
  animation: toast-in .14s;
}
.cmd-palette-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: palette-pop .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes palette-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.cmd-palette-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--border);
  background: var(--surface-2);
}
.cmd-palette-icon {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.04em;
}
#cmdPaletteInput {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  padding: 0;
  outline: none;
  box-shadow: none;
}
#cmdPaletteInput:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.cmd-palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.cmd-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  padding: 11px 13px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  box-shadow: none;
  transition: background .08s;
}
.cmd-item:hover, .cmd-item.is-active {
  background: var(--accent-f);
  color: var(--accent);
  filter: none;
  box-shadow: none;
  transform: none;
}
.cmd-item.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.cmd-item-icon { font-size: 18px; line-height: 1; text-align: center; }
.cmd-item-label { font-size: 13px; font-weight: 600; }
.cmd-item-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
}
.cmd-item.kind-danger .cmd-item-kind { background: var(--danger-f); color: var(--danger); }
.cmd-item.kind-action .cmd-item-kind { background: var(--accent-f); color: var(--accent); }
.cmd-item.kind-profile .cmd-item-kind { background: var(--ok-f); color: var(--ok); }
.cmd-item.kind-lead .cmd-item-kind { background: var(--warn-bg); color: var(--warn-text); }

.cmd-palette-empty {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.cmd-palette-foot {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1.5px solid var(--border-soft);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--muted);
}
.cmd-palette-foot kbd { font-size: 10px; padding: 1px 5px; }

/* ── Modal (shortcuts help) ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8, 16, 16, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: toast-in .12s ease-out;
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.modal-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.modal-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shortcut-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.shortcut-row span { color: var(--muted); }
kbd {
  display: inline-block;
  padding: 2px 7px;
  margin-right: 3px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 18px;
  text-align: center;
}

/* ── Profile health row & sandbox ────────────────────────────────── */
.health-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 4px;
}
.health-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.health-chip.ok   { background: var(--ok-f);     color: var(--ok); }
.health-chip.warn { background: var(--warn-bg);  color: var(--warn-text); }
.health-chip.err  { background: var(--danger-f); color: var(--danger); }
.health-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.sandbox-result {
  margin-top: 10px;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-2);
  display: none;
}
.sandbox-result.is-visible { display: block; }
.sandbox-result h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.sandbox-result .sandbox-subject {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
.sandbox-result pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.sandbox-result .sandbox-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

/* ── Empty state CTA ─────────────────────────────────────────────── */
.empty-rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
}
.empty-rich .empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent-f);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
}
.empty-rich h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.empty-rich p { margin: 0; max-width: 420px; font-size: 13px; }
.empty-rich .button-row { justify-content: center; }

/* ── Live Feed ───────────────────────────────────────────────────── */
.live-feed {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9000;
  max-width: 480px;
  width: calc(100vw - 32px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.live-feed.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.live-feed-inner {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  position: relative;
}
.live-feed-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.live-feed-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 200px;
  overflow-y: auto;
}
.live-feed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 0;
}
.lf-time {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}
.lf-icon { flex-shrink: 0; }
.lf-profile {
  background: var(--accent-f);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lf-desc {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-feed-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
}
.live-feed-close:hover { color: var(--text); background: var(--surface-2); }

/* ── Draft retry button ──────────────────────────────────────────── */
.draft-retry-btn {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .unibox-detail-body { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .sidebar {
    flex-direction: row;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--sb-border);
    overflow-x: auto;
  }
  .sidebar-brand     { border-bottom: none; border-right: 1px solid var(--sb-border); padding: 10px 12px; flex-shrink: 0; }
  .sidebar-nav       { flex-direction: row; padding: 6px 8px; gap: 2px; overflow-x: auto; overflow-y: hidden; }
  .sidebar-footer    { display: none; }
  .nav-group-label, .nav-divider { display: none; }

  .tab { width: auto; flex-shrink: 0; height: 34px; }
  .unibox { grid-template-columns: 1fr; }
  .content { overflow-y: auto; }
  #uniboxTab.full-height { overflow-y: auto; grid-template-rows: none; }
  #unibox { overflow: visible; height: auto; }
  .unibox { height: auto; grid-template-columns: 1fr; }
  .unibox-list { height: auto; max-height: 320px; }
  .unibox-detail { min-height: 400px; }
}

@media (max-width: 600px) {
  .topbar       { padding: 0 14px; }
  .view-pad     { padding: 14px; }
  .two-col, .followup-row, .metric-grid, .analytics-row { grid-template-columns: 1fr; }
  .unibox-detail-body { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — 768px and below
   Primary use-case: view and send email drafts from phone
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Base sizing ──────────────────────────────────────────────── */
  html, body { overflow: hidden; }
  body { font-size: 14px; }

  /* ── App shell: stacked, full height ─────────────────────────── */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100dvh; /* dynamic viewport for mobile browsers */
    height: 100vh;  /* fallback */
  }

  /* ── Top navigation bar (was sidebar) ────────────────────────── */
  .sidebar {
    flex-direction: row;
    align-items: center;
    height: 52px;
    min-height: 52px;
    border-right: none;
    border-bottom: 2px solid var(--sb-border);
    overflow: hidden;            /* clip overflow, scroll is inside nav */
    flex-shrink: 0;
  }
  .sidebar-brand {
    border-bottom: none;
    border-right: 1px solid var(--sb-border);
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .brand-name { font-size: 14px; }

  .sidebar-nav {
    flex-direction: row;
    flex: 1;
    padding: 0 6px;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* hide scrollbar on mobile */
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }

  .sidebar-footer { display: none; }
  .nav-group-label, .nav-divider { display: none; }

  /* Nav tab touch targets: min 44px per WCAG/Apple HIG */
  .tab {
    width: auto;
    flex-shrink: 0;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    gap: 6px;
    font-size: 13px;
  }
  /* Keep label visible but compact */
  .nav-label { font-size: 12px; }

  /* ── Topbar ───────────────────────────────────────────────────── */
  .topbar {
    height: 50px;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar h1 { font-size: 16px; }
  .top-actions { gap: 6px; }
  .top-actions button { height: 36px; padding: 0 10px; font-size: 12px; }

  /* ── Main content area: full remaining height, scrollable ─────── */
  .app-main { overflow: hidden; }
  .content  { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Tab views: allow normal scroll */
  .tab-view.active            { display: block; height: auto; min-height: 0; overflow-y: visible; }
  .tab-view.active.full-height{ overflow-y: visible; height: auto; }

  /* View padding: tighter on mobile */
  .view-pad { padding: 14px 12px 32px; }

  /* ── Section head: wrap on small screens ─────────────────────── */
  .section-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }
  .section-head h2 { font-size: 17px; }
  .counter-row { justify-content: flex-start; }

  /* ── Unibox v2: full mobile layout ───────────────────────────── */
  #uniboxTab.full-height {
    display: block;
    overflow-y: auto;
    height: calc(100dvh - 52px - 50px); /* total - nav - topbar */
    height: calc(100vh - 52px - 50px);
  }
  #unibox {
    overflow: visible;
    height: auto;
  }

  /* The two-pane grid collapses to a single full-width column */
  .unibox-v2 {
    display: block;
    height: auto;
    position: relative;
  }
  .unibox-v2.has-sidebar { display: block; }

  /* Thread list: full width, natural height */
  .unibox-v2 .unibox-list {
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  /* Conversation detail: rendered below the list normally
     When a conversation is active, slide it over the list.
     We use a class .has-active-conversation on .unibox-v2 for this. */
  .unibox-v2.has-active-conversation .unibox-list { display: none; }
  .unibox-v2.has-active-conversation .unibox-detail { display: flex; }
  .unibox-v2 .unibox-detail {
    display: none;        /* hidden by default; shown when conversation selected */
    flex-direction: column;
    min-height: calc(100dvh - 52px - 50px);
    min-height: calc(100vh - 52px - 50px);
    height: auto;
    overflow: visible;
  }

  /* Also handle the legacy .unibox (non-v2) layout */
  .unibox { height: auto; grid-template-columns: 1fr; }
  .unibox-list { height: auto; max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
  .unibox-detail { min-height: 0; height: auto; overflow: visible; }

  /* Unibox toolbar: stack search above filter pills */
  .unibox-toolbar { gap: 8px; }
  .quick-filter-pills { gap: 4px; }
  .qf-pill { height: 34px; padding: 0 10px; font-size: 12px; }

  /* Thread rows: bigger tap target */
  .thread-row-v2, .thread-row {
    padding: 14px 14px 12px 18px;
    min-height: 64px;
  }

  /* ── Conversation detail header ───────────────────────────────── */
  .udetail-head-v2 { padding: 12px 14px; }
  .udetail-head-row1 { flex-wrap: wrap; gap: 10px; }
  .udetail-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Action buttons in detail header: min 44px */
  .udetail-action-btn {
    height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* Context bar: wrap items */
  .udetail-context-bar { flex-wrap: wrap; padding: 0 12px; min-height: auto; }
  .udetail-ctx-item { padding: 6px 10px 6px 0; font-size: 11px; }

  /* ── Draft zone in detail ─────────────────────────────────────── */
  .udetail-draft-zone {
    max-height: none;     /* remove height cap on mobile — show full draft */
    overflow-y: visible;
  }
  .udetail-draft-zone .draft-body textarea { min-height: 140px; }

  /* ── Draft cards (in Kolejka tab and in detail) ───────────────── */
  .draft-card .draft-body { padding: 14px; }
  .draft-meta { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .draft-confidence { min-width: unset; align-items: flex-start; }

  /* Draft action buttons: prominently tappable (min 44px) */
  .draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
  }
  .draft-actions button {
    height: 46px;
    padding: 0 18px;
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 100px;
  }
  /* Primary send/approve button: full-width on mobile */
  .draft-actions .draft-action-primary {
    flex: 1 1 100%;
    height: 50px;
    font-size: 15px;
    border-radius: var(--r);
  }
  /* Secondary buttons row */
  .draft-actions .secondary { flex: 1 1 auto; }
  /* Reject button: keep it small but still 44px */
  .draft-actions .draft-reject-btn { flex: 0 0 auto; min-width: 80px; }

  /* Bulk approve bar in Kolejka */
  .draft-bulk-bar { gap: 8px; }
  .draft-bulk-bar button, .bulk-approve-btn {
    height: 44px;
    font-size: 14px;
    padding: 0 18px;
  }

  /* ── Draft list / groups (Kolejka tab) ───────────────────────── */
  .draft-group { margin-bottom: 12px; }
  .draft-group-header { padding: 10px 14px; font-size: 11px; }

  /* ── Analytics ────────────────────────────────────────────────── */
  .analytics-toolbar { flex-wrap: wrap; gap: 8px; }
  .analytics-range-pills { flex-wrap: wrap; gap: 4px; }
  .range-pill { height: 36px; padding: 0 12px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card { padding: 14px 14px; }
  .kpi-value { font-size: 26px; }
  .intent-bar-row { grid-template-columns: 100px 1fr 60px; gap: 8px; }
  .leaderboard-row {
    grid-template-columns: 1fr 60px;
    gap: 8px;
    padding: 10px 12px;
  }
  .leaderboard-row > *:nth-child(n+3) { display: none; }
  .leaderboard-row.leaderboard-head { display: none; }

  /* ── Settings / forms ─────────────────────────────────────────── */
  .settings-grid { grid-template-columns: 1fr; gap: 10px; }
  .two-col        { grid-template-columns: 1fr; gap: 10px; }
  .followup-row   { grid-template-columns: 1fr; gap: 8px; }
  .metric-grid    { grid-template-columns: repeat(2, 1fr); }
  .mode-cards     { grid-template-columns: 1fr; gap: 8px; }
  .provider-grid  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .status-checkboxes { grid-template-columns: repeat(2, 1fr); }
  .perf-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .campaign-picker { grid-template-columns: 1fr; }
  .campaign-picker button { width: 100%; }
  .copy-row { flex-wrap: wrap; }
  .copy-code { font-size: 11px; }
  .analytics-row { grid-template-columns: 1fr !important; }

  /* Form summary toggle: bigger tap target */
  summary.form-section-title { padding: 14px 16px; min-height: 48px; }

  /* Input / select / textarea: prevent iOS zoom (font-size >= 16px when focused) */
  input, select, textarea { font-size: 16px; }

  /* ── Tasks ────────────────────────────────────────────────────── */
  .task-head { flex-wrap: wrap; gap: 8px; }

  /* ── Profile grid ─────────────────────────────────────────────── */
  .profile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .profile-card.add-card { min-height: 160px; }

  /* ── Campaigns table ──────────────────────────────────────────── */
  .campaign-row {
    grid-template-columns: 24px 1fr;
    gap: 6px;
    padding: 10px 12px;
  }
  .campaign-row.campaign-head { display: none; }
  .cell-inbox, .cell-activity, .cell-agent, .cell-actions {
    grid-column: 2;
  }

  /* ── Sticky save bar ──────────────────────────────────────────── */
  .sticky-save-bar {
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px -12px -22px;
    padding: 12px 14px;
  }
  .sticky-save-bar button { height: 44px; font-size: 14px; }
  .save-actions { width: 100%; gap: 8px; }
  .save-actions button { flex: 1; }

  /* ── Toast host: full width at bottom ────────────────────────── */
  .toast-host {
    right: 8px;
    left: 8px;
    bottom: 12px;
    max-width: none;
  }

  /* ── Cmd palette ──────────────────────────────────────────────── */
  .cmd-palette { padding-top: 4vh; padding-left: 10px; padding-right: 10px; }
  .cmd-palette-box { max-height: 80vh; }

  /* ── Live feed: tighter on mobile ────────────────────────────── */
  .live-feed { bottom: 10px; right: 8px; left: 8px; width: auto; }

  /* ── Back button in mobile unibox detail ──────────────────────── */
  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-back-btn::before {
    content: '‹';
    font-size: 18px;
    line-height: 1;
  }
}

/* Hide back button on desktop */
.mobile-back-btn { display: none; }

/* ── Very small phones (≤ 375px) ─────────────────────────────────── */
@media (max-width: 375px) {
  .tab { padding: 0 8px; }
  .nav-label { display: none; }          /* icon-only tabs on tiny screens */
  .profile-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr; }
  .draft-actions button { font-size: 13px; }
}

/* ── Range pills for analytics ───────────────────────────────────── */
.analytics-range-pills {
  display: flex;
  gap: 6px;
}
.range-pill {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  height: auto;
}
.range-pill.active, .range-pill:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Icon-only button ────────────────────────────────────────────── */
.icon-btn {
  padding: 6px 10px;
  font-size: 14px;
  min-width: 0;
}

/* ── Reject button — softer than full danger ─────────────────────── */
.draft-reject-btn {
  color: var(--danger, #ef4444);
  border-color: transparent;
  background: transparent;
}
.draft-reject-btn:hover {
  background: var(--danger-f, #fee2e2);
  border-color: var(--danger);
}

/* ── Balance widget ─────────────────────────────────────────────── */
.balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.balance-row:last-child { border-bottom: 0; }
.balance-provider { font-weight: 600; min-width: 100px; }
.balance-amount { font-size: 18px; font-weight: 700; }
.balance-amount.tone-ok  { color: var(--ok); }
.balance-amount.tone-err { color: var(--danger); }
.balance-note { font-size: 12px; color: var(--muted); }

/* ── All caught up banner ────────────────────────────────────────── */
.all-caught-up-banner {
  padding: 10px 16px;
  background: var(--ok-f);
  color: var(--ok);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* ── A/B Testing ─────────────────────────────────────────────────── */
.ab-variants-section {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ab-variant-block {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: var(--surface-2);
}

.ab-variant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ab-variant-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}

.ab-stats-placeholder {
  padding: 6px 0;
}

.ab-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ab-stats-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border);
}
.ab-stats-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.ab-stats-table tr:last-child td { border-bottom: 0; }

.ab-winner-row td:first-child { color: var(--ok); }
.ab-cvr-winner { color: var(--ok); font-weight: 700; }

.ab-bar-wrap {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}
.ab-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  min-width: 2px;
}
.ab-bar-num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  vertical-align: middle;
}

/* ── Analytics toolbar (range pills + export in one row) ──────────── */
.analytics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.analytics-toolbar .analytics-range-pills { margin-bottom: 0; }

/* Analytics empty / error / loading states */
.analytics-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}
.analytics-empty-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 8px;
  opacity: .6;
}
.analytics-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.analytics-empty-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Message bubble — replace <pre> with readable div ─────────────── */
.msg-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.msg-quoted {
  margin-top: 8px;
  border-top: 1px solid var(--border-soft);
  padding-top: 6px;
}
.msg-quoted summary {
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.msg-quoted summary::before { content: '▶'; font-size: 9px; }
.msg-quoted[open] summary::before { content: '▼'; }
.msg-quoted-body {
  margin-top: 8px;
  opacity: .65;
  font-size: 12px;
}

/* ── Unibox status banner — cleaner ───────────────────────────────── */
.status-banner-intent {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.status-banner-time {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

/* ── Metric pill muted variant ────────────────────────────────────── */
.metric-pill.muted {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--muted);
  font-weight: 500;
}

/* ── Auto-send: mode cards ────────────────────────────────────────── */
.mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.mode-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 2px solid var(--border-soft);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.mode-card input[type="radio"] { display: none; }
.mode-card:hover { border-color: var(--border); }
.mode-card.mode-card-active {
  border-color: var(--accent);
  background: var(--accent-f);
}
.mode-card-icon { font-size: 20px; line-height: 1; }
.mode-card-title { font-weight: 700; font-size: 14px; margin-top: 2px; }
.mode-card-desc { font-size: 12px; color: var(--muted); }

/* ── Auto-send: params show/hide ─────────────────────────────────── */
.autosend-params { }
.autosend-params-hidden { display: none; }

/* ── Auto-send: confidence slider ───────────────────────────────── */
.conf-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  accent-color: var(--accent);
  outline: none;
  margin-top: 8px;
  cursor: pointer;
}
.conf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.confidence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-f);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 8px;
  min-width: 44px;
  border: 1px solid rgba(11,140,130,.2);
}

/* ── Auto-send: day pills ────────────────────────────────────────── */
.day-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  color: var(--muted);
  user-select: none;
  position: relative;
}
.day-pill:hover { border-color: var(--accent); color: var(--accent); }
.day-pill.day-pill-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Auto-send: input with unit suffix ───────────────────────────── */
.input-with-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-with-unit input { flex: 1; min-width: 0; }
.input-unit {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 2px;
}

/* ── Form divider ────────────────────────────────────────────────── */
.form-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 14px 0;
}

/* ── Bulk approve button ─────────────────────────────────────────── */
.bulk-approve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.bulk-approve-btn:hover { opacity: .85; }
.bulk-approve-btn:disabled { opacity: .5; cursor: not-allowed; }
.bulk-approve-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(255,255,255,.3);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Regen-with-instruction row ─────────────────────────────────── */
.regen-row {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: slideDown .15s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.regen-row .regen-instruction {
  width: 100%;
  resize: vertical;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
}
.regen-row .regen-instruction:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-f);
}
.regen-row-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}
.regen-row-actions button {
  font-size: 12px;
  padding: 4px 12px;
}
.regen-row-hint {
  font-size: 11px;
  color: var(--muted);
}

/* ── Quick regen chips ───────────────────────────────────────────── */
.regen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 2px;
}
.regen-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  font-family: inherit;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.5;
}
.regen-chip:hover {
  background: var(--accent-f);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Research toggle card ────────────────────────────────────────── */
.research-toggle-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.research-toggle-card-on {
  border-color: var(--accent);
  background: var(--accent-f);
}
.research-toggle-left { flex: 1; min-width: 0; }
.research-toggle-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.research-toggle-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.research-toggle-desc code {
  font-family: monospace;
  background: var(--border);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ── Toggle switch ───────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  cursor: pointer;
  margin-top: 2px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: var(--border);
  transition: background .2s;
  position: relative;
}
.toggle-switch input:checked ~ .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(18px); }

/* ── Performance learning loop ───────────────────────────────────── */
.perf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.perf-stat {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.perf-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.perf-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.perf-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perf-insight-card {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.perf-insight-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.perf-insight-type {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--accent-f);
  color: var(--accent);
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.perf-insight-content {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.5;
}
.perf-insight-reasoning {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.4;
}
.perf-insight-actions {
  display: flex;
  gap: 7px;
}
.perf-insight-actions button {
  font-size: 12px;
  padding: 4px 14px;
}

/* ── KB upload + docs ────────────────────────────────────────────── */
.kb-upload-zone {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.kb-docs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.kb-doc-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.kb-doc-icon { font-size: 22px; }
.kb-doc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-doc-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kb-doc-row button { font-size: 14px; padding: 4px 8px; }

/* ── Draft strategy badge ────────────────────────────────────────── */
.draft-strategy-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.strategy-reply            { background: rgba(120,120,120,.15); color: var(--muted); }
.strategy-qualify          { background: rgba(255,170,0,.18);   color: #b87900; }
.strategy-push_call        { background: var(--accent-f);    color: var(--accent); }
.strategy-provide_resource { background: rgba(0,120,200,.18);   color: #0470a0; }
.strategy-disengage        { background: rgba(180,40,40,.15);   color: #a02020; }

/* ── Side action chips on draft cards ────────────────────────────── */
.draft-side-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(140, 80, 200, .15);
  color: #7a40c0;
  margin-left: 2px;
}

/* ── Hot lead badge in unibox row ────────────────────────────────── */
.hot-lead-badge {
  background: linear-gradient(135deg, #ff6a00, #ff2d55);
  color: #fff !important;
  font-weight: 700;
  animation: hotPulse 1.6s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 60, 60, 0); }
}

/* ── TLDR conversation summary card ─────────────────────────────── */
.tldr-card {
  margin: 8px 14px 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--accent-f), transparent);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.tldr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tldr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.tldr-time { font-size: 11px; }
.tldr-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 6px;
}
.tldr-next {
  font-size: 12px;
  color: var(--muted);
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.tldr-next strong { color: var(--accent); }

/* ── Quality critique chips on draft card ────────────────────────── */
.critique-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.critique-pass  { background: var(--accent-f);   color: var(--accent); }
.critique-fixed { background: rgba(255,170,0,.18);  color: #b87900; }
.critique-fail  { background: rgba(220,60,60,.18);  color: #a02020; }

/* ═══════════════════════════════════════════════════════════════════════
   UNIBOX v2 — Instantly-style rebuild
   Three goals: scannable rows, unified timeline, prominent action.
═══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: search + quick-filter pills ────────────────────────── */
.unibox-v2 .unibox-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.unibox-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.unibox-search-icon {
  position: absolute;
  left: 10px;
  font-size: 13px;
  opacity: 0.6;
  pointer-events: none;
}
.unibox-search-wrap input[type="search"] {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.unibox-search-wrap input[type="search"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-f);
}

.quick-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.qf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  height: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.qf-pill:hover { border-color: var(--accent); color: var(--text); }
.qf-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.qf-pill.active .qf-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.qf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--border);
  color: var(--muted);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}
.qf-count-blue { background: var(--accent); color: #fff; }
.qf-count-warn { background: #ff8c00; color: #fff; }
.qf-count-hot  { background: #ff2d55; color: #fff; }

/* ── Empty filter state ─────────────────────────────────────────── */
.unibox-empty-filter {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Thread row v2 (cleaner, Instantly-like) ────────────────────── */
.thread-row-v2 {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px 14px 10px 18px;
  width: 100%;
  height: auto;          /* override base button height: 36px */
  min-height: 0;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background .12s;
  color: var(--text);
}
.thread-row-v2:hover {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--border);
}
.thread-row-v2.active {
  background: var(--accent-f);
  box-shadow: inset 3px 0 0 var(--accent);
  border-left: none;
  padding-left: 18px;
}
.thread-row-v2.unread .trow-name { font-weight: 700; color: var(--text); }
.thread-row-v2.unread .trow-subject { color: var(--text); font-weight: 500; }
.thread-row-v2.unread .trow-time { color: var(--accent); font-weight: 700; }

/* Left indicator bar — color-coded conversation status */
.thread-indicator {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}
.thread-indicator.ind-unread  { background: var(--accent); }
.thread-indicator.ind-pending { background: #ff8c00; }
.thread-indicator.ind-hot     { background: linear-gradient(180deg,#ff6a00,#ff2d55); }
.thread-indicator.ind-booked  { background: var(--accent); }
.thread-indicator.ind-failed  { background: #dc3c3c; }
.thread-indicator.ind-stalled { background: var(--muted); opacity: .4; }

.thread-avatar-v2 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.thread-avatar-v2.lg { width: 44px; height: 44px; font-size: 15px; }

.thread-body-v2 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trow-line1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.trow-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.trow-time {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.trow-line2 .trow-subject {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.trow-line3 .trow-snippet {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: 1.4;
}
.trow-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 10px;
}
.trow-intent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.trow-spacer { flex: 1; }
.trow-profile-mini {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.2px;
  opacity: 0;
  transition: opacity .15s;
}
.thread-row-v2:hover .trow-profile-mini,
.thread-row-v2.active .trow-profile-mini { opacity: 0.7; }
.trow-inbox-mini {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
}
.thread-row-v2:hover .trow-inbox-mini,
.thread-row-v2.active .trow-inbox-mini { opacity: 1; }
.trow-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}
.trow-chip-pending { background: rgba(255,140,0,.15);  color: #b87900; }
.trow-chip-failed  { background: rgba(220,60,60,.15);  color: #a02020; font-weight: 700; }
.trow-chip-hot     { background: linear-gradient(135deg,#ff6a00,#ff2d55); color: #fff; }
.trow-chip-booked  { background: var(--accent-f);   color: var(--accent); }
.trow-chip-ooo     { background: rgba(120,120,120,.15); color: var(--muted); }

/* Inline status labels next to lead name in thread row */
.trow-label {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1.6;
}
.trow-label-draft {
  background: rgba(99,102,241,.13);
  color: #6366f1;
}
.trow-label-auto {
  background: rgba(16,185,129,.13);
  color: #059669;
}

/* ── Detail panel v2 ────────────────────────────────────────────── */
.unibox-detail-v2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-2);
}
.udetail-head-v2 {
  padding: 14px 18px;
  border-bottom: 2px solid var(--border);
  border-top: 3px solid var(--accent);
  background: var(--surface);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.udetail-head-row1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.udetail-id { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.udetail-name-block { min-width: 0; flex: 1; }
.udetail-name {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.udetail-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.udetail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Mobile-only pills row (hidden on desktop) */
.udetail-mobile-pills {
  display: none;
}
.hot-pill-large {
  background: linear-gradient(135deg,#ff6a00,#ff2d55);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: hotPulse 1.6s ease-in-out infinite;
}
.udetail-subject-line {
  margin-top: 8px;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Campaign / inbox context bar ───────────────────────────────── */
.udetail-context-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 34px;
}
.udetail-ctx-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px 7px 0;
  margin-right: 14px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.udetail-ctx-item + .udetail-ctx-item {
  border-left: 1px solid var(--border-soft);
  padding-left: 14px;
  margin-left: 0;
}
.udetail-ctx-icon { font-size: 13px; }
.udetail-ctx-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.udetail-ctx-val {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.udetail-ctx-muted .udetail-ctx-val { color: var(--muted); font-weight: 500; }

/* ── Message timeline (history only — scrollable) ───────────────── */
.udetail-timeline {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
}

/* ── Email thread — flat Instantly-style (no card boxes) ────────── */
.etmsg {
  flex-shrink: 0;
  padding: 14px 20px 16px 20px;
  background: var(--msg-in-bg, var(--surface));
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid var(--msg-in-stripe, var(--border));
  position: relative;
  transition: background .1s;
}
.etmsg:hover { background: var(--surface-2); }
/* outbound (sent by agent) — blue tint */
.etmsg.outbound {
  background: var(--msg-out-bg, var(--surface));
  border-left: 3px solid var(--msg-out-stripe, var(--accent));
  padding-left: 20px;
}
.etmsg.outbound:hover { filter: brightness(.97); }
/* synthetic outbound (reconstructed from lead's quoted chain) */
.etmsg.outbound.synthetic {
  opacity: .88;
  border-left-style: dashed;
}
.etmsg-outreach-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7c3aed;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.etmsg-synthetic-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* header row: sender on left, date on right */
.etmsg-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.etmsg-from-col {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.etmsg-from-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.etmsg-from-email {
  font-size: 12px;
  color: var(--muted);
}
.etmsg-date {
  font-size: 11.5px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* to: and subject rows */
.etmsg-to-row {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.etmsg-to-addr {
  color: var(--text-2);
}
.etmsg-subject-row {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 3px;
}

/* thin divider between header and body */
.etmsg-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 10px 0;
}

/* email body */
.etmsg-body {
  margin: 0;
}
.etmsg-main {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* always-visible quoted reply chain */
.etmsg-quoted-block {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--border-soft);
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

/* Draft card inside top zone: seamless, no double borders */
.udetail-draft-zone .draft-card {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}
.udetail-draft-zone .draft-card:hover {
  box-shadow: none;
  border: none;
  background: rgba(255,255,255,.03);
}
.udetail-draft-zone .draft-meta {
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 16px;
}
.udetail-draft-zone .draft-body textarea { min-height: 100px; }
.udetail-draft-zone .draft-body { padding: 12px 16px; gap: 10px; }
.udetail-draft-zone input,
.udetail-draft-zone textarea {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text);
}
.udetail-draft-zone input:focus,
.udetail-draft-zone textarea:focus {
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
.udetail-draft-zone .notice {
  background: rgba(56,189,248,.10);
  border-left-color: var(--accent);
  color: var(--text-2);
}
.udetail-draft-zone .notice-warn {
  background: rgba(248,113,113,.10);
  border-left-color: var(--danger);
  color: var(--danger);
}

/* keep old aliases so nothing crashes */
.msg-v2 { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 14px; }
.msg-text-v2 { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); }

/* ── Draft zone: amber notepad at top ───────────────────────────── */
.udetail-draft-zone {
  flex-shrink: 0;
  max-height: 58%;
  overflow-y: auto;
  border-bottom: 3px solid var(--draft-border, #f59e0b);
  background: var(--draft-bg, #fffbf0);
  display: flex;
  flex-direction: column;
}
.udetail-draft-zone-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--draft-label-col, #92400e);
  background: var(--draft-label-bg, #fef3c7);
  border-bottom: 1px solid var(--draft-border, rgba(245,158,11,.30));
  position: sticky;
  top: 0;
  z-index: 1;
}
.udetail-draft-hist {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: var(--border);
  padding: 1px 7px;
  border-radius: 8px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

/* ── Composer ───────────────────────────────────────────────────── */
.udetail-composer {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.udetail-compose-btn {
  width: 100%;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.udetail-compose-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-f); }
.udetail-compose-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
.udetail-compose-hint {
  font-size: 11px;
  color: var(--muted);
}

/* ── Unibox detail action buttons (snooze / done / sidebar toggle) ──── */
.udetail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  height: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
}
.udetail-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.udetail-action-btn-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.snooze-menu-wrap { position: relative; display: inline-block; }
.snooze-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 100;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.snooze-menu[hidden] { display: none; }
.snooze-menu button {
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.snooze-menu button:hover { background: var(--accent-f); color: var(--accent); }

/* Snoozed / done thread chips */
.trow-chip-snoozed { background: rgba(140,140,200,.18); color: #5a5aa0; }
.trow-chip-done    { background: var(--accent-f);    color: var(--accent); }

/* ── 3-column layout when sidebar open ─────────────────────────────── */
.unibox-v2 { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; height: 100%; }
.unibox-v2.has-sidebar { grid-template-columns: minmax(280px, 340px) 1fr 320px; }
.unibox-v2 .unibox-list {
  border-right: 2px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
}
.unibox-v2 .unibox-detail { overflow: hidden; display: flex; flex-direction: column; }

/* ── Right intel sidebar ──────────────────────────────────────────── */
.intel-sidebar {
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.intel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.intel-head h4 { margin: 0; font-size: 13px; font-weight: 600; }
.intel-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.intel-close:hover { color: var(--text); }
.intel-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.intel-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.intel-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
  margin-bottom: 4px;
}
.intel-kv { display: flex; gap: 6px; font-size: 12px; line-height: 1.55; margin-bottom: 3px; }
.intel-k { color: var(--muted); flex-shrink: 0; min-width: 50px; }
.intel-v { color: var(--text); word-break: break-word; }
.intel-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
.intel-list li { margin-bottom: 3px; }
.intel-list-muted li { color: var(--muted); font-style: italic; }
.intel-bio {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
}
.intel-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  text-align: center;
}
.intel-metrics > div {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 6px;
}
.intel-num { display: block; font-size: 18px; font-weight: 700; color: var(--accent); }
.intel-lbl { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.intel-strategy-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.strat-chain-pill {
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}
.strat-chain-arrow { color: var(--muted); font-size: 10px; }
.intel-empty {
  text-align: center;
  padding: 12px 8px;
  color: var(--muted);
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   UNIBOX V2 — INSTANTLY-STYLE REDESIGN
   Overrides that improve desktop + mobile. Must come last.
   ══════════════════════════════════════════════════════════════════ */

/* ── Filter pills: single scrollable row (no wrapping) ──────────── */
.quick-filter-pills {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.quick-filter-pills::-webkit-scrollbar { display: none; }
.qf-pill {
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 500;
}
.qf-pill.active { font-weight: 600; }

/* ── Thread toolbar: tighter, cleaner ──────────────────────────── */
.unibox-v2 .unibox-toolbar {
  padding: 8px 10px 7px;
  gap: 7px;
  background: var(--surface);
}

/* ── Thread list background ─────────────────────────────────────── */
.unibox-v2 .unibox-list { background: var(--surface); }

/* ── Thread rows: slightly tighter, cleaner ─────────────────────── */
.thread-row-v2 {
  padding: 10px 14px 10px 16px;
}
.trow-name { font-size: 13px; }
.trow-line2 .trow-subject { font-size: 12px; }
.trow-line3 .trow-snippet { font-size: 11.5px; color: var(--muted); }

/* ── Unread dot: small blue dot on the left ─────────────────────── */
.thread-row-v2.unread .thread-indicator { background: var(--accent); }
.thread-row-v2.unread .trow-snippet { color: var(--text-2); }

/* ── Unibox detail head: slightly compact ───────────────────────── */
.udetail-head-v2 { padding: 12px 18px; }
.udetail-name { font-size: 16px; }

/* ── Message bubbles: slightly more breathing room ──────────────── */
.etmsg { padding: 14px 20px; }
.etmsg-main { font-size: 13px; line-height: 1.65; }

/* ── Bottom nav: HIDDEN on desktop ─────────────────────────────── */
.bottom-nav { display: none; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE REDESIGN — bottom nav + full-height panels
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Bottom nav: fixed at bottom ─────────────────────────────── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--surface);
    border-top: 1.5px solid var(--border);
    z-index: 200;
    box-shadow: 0 -3px 16px rgba(0,0,0,.10);
    /* Safe area for iPhone home bar */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 6px 2px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    position: relative;
    transition: color .12s;
    box-shadow: none;
  }
  .bnav-item:hover, .bnav-item:active { filter: none; transform: none; }
  .bnav-item svg {
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform .1s;
  }
  .bnav-item.active { color: var(--accent); }
  .bnav-item.active svg { stroke: var(--accent); transform: scale(1.05); }
  .bnav-item.active::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 2.5px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
  }
  .bnav-badge {
    position: absolute;
    top: 5px; right: calc(50% - 18px);
    min-width: 15px; height: 15px;
    padding: 0 4px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .bnav-badge:empty { display: none; }

  /* ── App shell: single column, full height ───────────────────── */
  .sidebar { display: none !important; }
  .app-shell {
    grid-template-columns: 1fr;
    height: 100dvh;
    height: 100vh;
  }

  /* ── App main: full height, bottom nav space ─────────────────── */
  .app-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  /* ── Hide desktop topbar ─────────────────────────────────────── */
  .topbar { display: none !important; }

  /* ── Content: flex child fills remaining space ───────────────── */
  .content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* ── Other tabs: scroll normally ─────────────────────────────── */
  .tab-view.active {
    display: block;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }

  /* ── Unibox tab: full height flex layout ─────────────────────── */
  #uniboxTab {
    display: none;
    height: 100%;
    overflow: hidden;
  }
  #uniboxTab.active,
  #uniboxTab.tab-view.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding-bottom: 0;
  }

  /* Unibox header: compact */
  .unibox-header {
    padding: 10px 12px 8px;
    flex-shrink: 0;
  }
  .unibox-header .section-head { margin-bottom: 0; }
  .unibox-header .section-head h2 { font-size: 15px; }
  #uniboxSubline { font-size: 11px; }
  #uniboxCounters { display: none; }

  /* #unibox container: fills remaining height */
  #unibox {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ── Unibox v2 layout: full height flex ──────────────────────── */
  .unibox-v2 {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .unibox-v2.has-sidebar { display: flex !important; }

  /* Thread list: full width, fills available height */
  .unibox-v2 .unibox-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    border-right: none;
    overflow: hidden;
  }
  .unibox-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Toolbar: shrink to content */
  .unibox-v2 .unibox-toolbar {
    flex-shrink: 0;
    padding: 8px 10px 7px;
    gap: 7px;
  }

  /* ── Stack navigation: show list OR detail ───────────────────── */
  .unibox-v2 .unibox-detail { display: none; }
  .unibox-v2.has-active-conversation .unibox-list { display: none; }
  .unibox-v2.has-active-conversation .unibox-detail {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
  }

  /* ── Intel sidebar: hidden on mobile ─────────────────────────── */
  .intel-sidebar { display: none !important; }

  /* ── Detail panel: full height flex ─────────────────────────── */
  .unibox-detail-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* Detail head: compact + back button visible */
  .udetail-head-v2 {
    padding: 10px 12px;
    flex-shrink: 0;
    border-top: none;
  }
  .udetail-head-row1 {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .udetail-id { gap: 8px; }
  .udetail-name { font-size: 15px; margin-bottom: 0; }
  .udetail-sub { display: none; }
  .udetail-actions {
    flex-wrap: nowrap;
    width: auto;
    gap: 5px;
    justify-content: flex-end;
    overflow: visible;
  }
  .udetail-subject-line { font-size: 11px; margin-top: 5px; }

  /* Context bar: scrollable row */
  .udetail-context-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px;
    min-height: 32px;
  }
  .udetail-context-bar::-webkit-scrollbar { display: none; }
  .udetail-ctx-item { flex-shrink: 0; padding: 6px 10px 6px 0; font-size: 11px; }

  /* Draft zone: scrollable, but capped */
  .udetail-draft-zone {
    flex-shrink: 0;
    max-height: 48%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .udetail-draft-zone .draft-body textarea { min-height: 90px; }
  .udetail-draft-zone .draft-body { padding: 10px 14px; }

  /* Message timeline: scrollable */
  .udetail-timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Composer */
  .udetail-composer { padding: 10px 14px; flex-shrink: 0; }

  /* ── Back button: iOS-style chevron + blue text ───────────────── */
  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    height: 36px;
    padding: 0 8px 0 2px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
  }
  .mobile-back-btn:hover { background: transparent; filter: none; }
  .mobile-back-btn::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    border-left: 2.5px solid var(--accent);
    border-bottom: 2.5px solid var(--accent);
    transform: rotate(45deg) translateY(-1px);
    margin-right: 2px;
    flex-shrink: 0;
  }

  /* ── Action buttons in detail: compact ───────────────────────── */
  .udetail-action-btn {
    height: 32px;
    padding: 0 9px;
    font-size: 12px;
    border-radius: 7px;
  }

  /* ── Draft cards: tappable ───────────────────────────────────── */
  .draft-actions button { height: 44px; padding: 0 16px; font-size: 13px; }
  .draft-actions .draft-action-primary { flex: 1 1 100%; height: 48px; font-size: 14px; }
  .draft-actions .secondary { flex: 1 1 auto; }

  /* ── Filter pills: tighter on mobile ─────────────────────────── */
  .quick-filter-pills { gap: 5px; }
  .qf-pill { height: 28px; padding: 0 10px; font-size: 11.5px; }

  /* ── Thread rows: good touch targets ─────────────────────────── */
  .thread-row-v2 { padding: 11px 14px 9px 18px; min-height: 60px; }

  /* ── Other views: padding at bottom ──────────────────────────── */
  .view-pad { padding: 14px 12px 24px; }

  /* ── Snooze menu: higher z-index ─────────────────────────────── */
  .snooze-menu { z-index: 300; }

  /* ── Toast: above bottom nav ─────────────────────────────────── */
  .toast-host { bottom: 68px; right: 8px; left: 8px; max-width: none; }

  /* ── Live feed: above bottom nav ─────────────────────────────── */
  .live-feed { bottom: 68px; }

  /* ── Cmd palette: centered, enough clearance ─────────────────── */
  .cmd-palette { padding: 4vh 10px 0; z-index: 500; }
  .cmd-palette-box { max-height: 75vh; }

  /* ── Font sizes: prevent iOS auto-zoom ───────────────────────── */
  input, select, textarea { font-size: 16px !important; }
}

/* ── Tiny screens: icon-only bottom nav ────────────────────────── */
@media (max-width: 360px) {
  .bnav-item span { display: none; }
  .bnav-item { gap: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   UNIBOX POLISH — final pass, highest specificity
   Fixes layout bugs + improves both mobile and desktop experience.
   ══════════════════════════════════════════════════════════════════ */

/* ── Desktop: thread row hover shows accent left bar ───────────── */
.thread-row-v2:hover {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.thread-row-v2.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Desktop: slightly larger avatar ───────────────────────────── */
.thread-avatar-v2 { width: 38px; height: 38px; font-size: 14px; }

/* ── Unread indicator: subtle pulse ────────────────────────────── */
@keyframes ind-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.thread-indicator.ind-unread { animation: ind-pulse 2.4s ease-in-out infinite; }

/* ── trow-label: baseline-aligned, doesn't shrink name ─────────── */
.trow-line1 { align-items: center; }
.trow-name  { line-height: 1.3; }

/* ── Empty-filter state ─────────────────────────────────────────── */
.unibox-empty-filter {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 768px) {

  /* ════════════════════════════════════════════════════════════════
     1. FIX APP-SHELL LAYOUT
     Root cause: grid-template-rows:auto 1fr from older media query
     persists. With sidebar display:none, app-main lands in the
     auto row (content-sized) instead of the 1fr row → wrong height.
     Fix: switch shell to flexbox on mobile.
     ════════════════════════════════════════════════════════════════ */
  .app-shell {
    display: flex !important;
    flex-direction: column;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
  }
  .app-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* ════════════════════════════════════════════════════════════════
     2. HIDE REDUNDANT UNIBOX HEADER
     Bottom nav already labels the tab. "Unibox / 23 rozmów" header
     wastes ~52px of vertical space on phones.
     ════════════════════════════════════════════════════════════════ */
  .unibox-header { display: none !important; }

  /* ════════════════════════════════════════════════════════════════
     3. THREAD LIST — cleaner, faster to scan
     ════════════════════════════════════════════════════════════════ */

  /* 3-line layout: name+time / subject / meta (drop snippet) */
  .trow-line3  { display: none; }
  .thread-body-v2 { gap: 2px; }

  .thread-row-v2 {
    padding: 11px 14px 10px 16px;
    gap: 10px;
    min-height: 62px;
  }
  .thread-avatar-v2 { width: 40px; height: 40px; font-size: 14px; }

  /* Unread: bolder indicator */
  .thread-row-v2.unread .thread-indicator { width: 4px; }

  /* Active row: clear highlight */
  .thread-row-v2.active {
    background: var(--accent-f);
    box-shadow: inset 4px 0 0 var(--accent);
  }

  /* ════════════════════════════════════════════════════════════════
     4. TOOLBAR
     ════════════════════════════════════════════════════════════════ */
  .unibox-v2 .unibox-toolbar {
    padding: 8px 10px 6px;
    gap: 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
  }
  .unibox-search-wrap { flex: 1; }
  #uniboxSearch { height: 36px; font-size: 14px !important; }

  /* ════════════════════════════════════════════════════════════════
     5. DETAIL VIEW — proper proportions
     ════════════════════════════════════════════════════════════════ */

  /* Detail head: compact, clear back button */
  .udetail-head-v2 {
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 1.5px solid var(--border);
    background: var(--surface);
  }
  .udetail-name { font-size: 14px; font-weight: 700; }
  .udetail-sub  { display: none; }

  /* Hide avatar — wastes 48px in a cramped header */
  .udetail-head-v2 .thread-avatar-v2 { display: none !important; }

  /* Icon-only action buttons — hide text label, keep emoji */
  .udetail-action-btn .btn-txt { display: none; }
  .udetail-action-btn {
    width: 34px;
    min-width: 34px;
    padding: 0;
    justify-content: center;
    font-size: 16px;
  }

  /* Context bar: horizontal scroll, compact */
  .udetail-context-bar {
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px;
    min-height: 30px;
  }
  .udetail-context-bar::-webkit-scrollbar { display: none; }
  .udetail-ctx-item { font-size: 11px; padding: 5px 10px 5px 0; flex-shrink: 0; }

  /* Timeline: scrollable, fills remaining space */
  .udetail-timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Draft zone: max 45% so messages stay visible */
  .udetail-draft-zone {
    flex-shrink: 0;
    max-height: 45%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Draft textarea: comfortable writing */
  .udetail-draft-zone .draft-body          { padding: 10px 12px; }
  .udetail-draft-zone .draft-body textarea {
    min-height: 80px;
    font-size: 14px !important;
    line-height: 1.55;
  }

  /* Primary send button: full-width thumb-tap target */
  .draft-actions .draft-action-primary {
    flex: 1 1 100%;
    height: 50px;
    font-size: 15px;
    border-radius: 10px;
  }
  .draft-actions { flex-wrap: wrap; gap: 8px; }
  .draft-actions .secondary { flex: 1 1 auto; height: 44px; }

  /* Email messages: comfortable reading */
  .etmsg { padding: 12px 14px; }
  .etmsg-main { font-size: 13.5px; line-height: 1.65; }

  /* ════════════════════════════════════════════════════════════════
     6. BACK BUTTON — iOS-style, clearly tappable
     ════════════════════════════════════════════════════════════════ */
  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 38px;
    min-width: 44px;
    padding: 0 10px 0 4px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
    cursor: pointer;
  }
  .mobile-back-btn:hover,
  .mobile-back-btn:active { background: transparent; filter: none; }
  .mobile-back-btn::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    border-left: 2.5px solid var(--accent);
    border-bottom: 2.5px solid var(--accent);
    transform: rotate(45deg) translateY(-1px);
    flex-shrink: 0;
  }

  /* ════════════════════════════════════════════════════════════════
     7. ACTION BUTTONS IN DETAIL HEAD
     ════════════════════════════════════════════════════════════════ */
  .udetail-action-btn {
    height: 32px;
    padding: 0 9px;
    font-size: 11.5px;
    border-radius: 7px;
  }
  /* Keep actions row from overflowing — hide less-important elements */
  .udetail-actions {
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .udetail-actions::-webkit-scrollbar { display: none; }

  /* Hide skip-lead button + heavy chips from the tight header row on mobile */
  .udetail-actions .skip-lead-btn,
  .udetail-actions .udetail-intent-pill,
  .udetail-actions .udetail-agent-chip,
  .udetail-actions .hot-pill-large { display: none !important; }

  /* Mobile pills row: shows below context bar, compact */
  .udetail-mobile-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
  }
  .udetail-mobile-pills::-webkit-scrollbar { display: none; }
  .udetail-mobile-pills .thread-intent-pill { font-size: 10px; padding: 2px 7px; }
  .udetail-mobile-pills .thread-agent-chip  { font-size: 10px !important; padding: 2px 8px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .udetail-mobile-pills .hot-pill-large { font-size: 10px; padding: 2px 7px; }

  /* ════════════════════════════════════════════════════════════════
     7b. STATUS BANNER — compact single-line on mobile
     ════════════════════════════════════════════════════════════════ */
  .unibox-status-banner {
    padding: 5px 12px;
    font-size: 11px;
    gap: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .unibox-status-banner strong,
  .status-banner-intent { overflow: hidden; text-overflow: ellipsis; }
  .status-banner-time { flex-shrink: 0; }

  /* ════════════════════════════════════════════════════════════════
     7c. DRAFT REGEN CHIPS — wrap tightly, smaller text
     ════════════════════════════════════════════════════════════════ */
  .regen-chips { gap: 5px; }
  .regen-chip {
    font-size: 11.5px;
    padding: 4px 9px;
    height: auto;
    border-radius: 14px;
  }

  /* ════════════════════════════════════════════════════════════════
     8. FILTER PILLS
     ════════════════════════════════════════════════════════════════ */
  .quick-filter-pills { gap: 5px; padding-bottom: 2px; }
  .qf-pill { height: 27px; padding: 0 10px; font-size: 11px; border-radius: 20px; }
  .qf-pill.active { font-weight: 700; }
}

/* ── Very small screens ─────────────────────────────────────────── */
@media (max-width: 360px) {
  .thread-row-v2 { padding: 10px 10px 9px 14px; }
  .thread-avatar-v2 { width: 34px; height: 34px; font-size: 12px; }
  .trow-name { font-size: 12.5px; }
}