* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Theme: Dark (default) ──────────────── */
:root, [data-theme="dark"] {
  --bg: #0b0d13;
  --bg2: #141721;
  --bg3: #1c2030;
  --border: #272b3a;
  --text: #ecedf2;
  --text2: #838aa0;
  --accent: #7c7fff;
  --accent-hover: #9b9eff;
  --accent-subtle: rgba(124, 127, 255, 0.12);
  --green: #34d399;
  --red: #fb7185;
  --orange: #fbbf24;
  --radius: 8px;
  --blue: #60a5fa;
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(124, 127, 255, 0.15);
  --z-toast: 9000;
  --z-overlay: 8000;
  --z-sticky: 100;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Typography scale */
  --font-xs: 10px;
  --font-sm: 11px;
  --font-base: 12px;
  --font-md: 13px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-default: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* Z-index builder */
  --z-builder: 8500;

  /* Missing referenced tokens */
  --text3: #5a5f73;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-drag: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Theme: Light ──────────────────────── */
[data-theme="light"] {
  --bg: #f4f6fa;
  --bg2: #ffffff;
  --bg3: #eaedF4;
  --border: #d0d5e0;
  --text: #111827;
  --text2: #64748b;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-subtle: rgba(99, 102, 241, 0.08);
  --green: #059669;
  --red: #dc2626;
  --orange: #d97706;
  --blue: #2563eb;
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.1);
  --text3: #8891a5;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-drag: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ── Theme: Accessible (high contrast) ─── */
[data-theme="accessible"] {
  --bg: #ffffff;
  --bg2: #f3f4f6;
  --bg3: #e5e7eb;
  --border: #9ca3af;
  --text: #000000;
  --text2: #374151;
  --accent: #4338ca;
  --accent-hover: #3730a3;
  --accent-subtle: rgba(67, 56, 202, 0.1);
  --green: #15803d;
  --red: #b91c1c;
  --orange: #b45309;
  --blue: #1d4ed8;
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(67, 56, 202, 0.1);
  --text3: #4b5563;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-drag: 0 8px 32px rgba(0, 0, 0, 0.2);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Scrollbar styling ──────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text2);
}

/* ── App Sidebar (vertical, like Aircall) ─── */
#app-sidebar {
  width: 56px;
  min-width: 56px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 8500;
}

.sidebar-top, .sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sidebar-bottom {
  gap: 6px;
  padding-bottom: 10px;
}

.sidebar-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.sidebar-icon:hover {
  background: var(--bg3);
  color: var(--text);
}

.sidebar-icon.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}

.sidebar-brand {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.15s;
  letter-spacing: -0.5px;
}

.sidebar-brand:hover {
  opacity: 0.85;
}

/* ── Panel search (inside contacts panel) ──── */
.panel-search-wrap {
  padding: 14px 12px 6px;
  flex-shrink: 0;
}

.panel-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 14px;
  font-size: 13px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s;
}

.panel-search:focus {
  border-color: var(--accent);
  background: var(--bg3);
}

.panel-search::placeholder {
  color: var(--text2);
  opacity: 0.6;
}

/* ── WebSocket indicator ────────────────── */

.ws-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ws-connected {
  background: var(--green);
  box-shadow: 0 0 4px var(--green);
}

.ws-disconnected {
  background: var(--red);
  box-shadow: 0 0 4px var(--red);
  animation: rec-pulse 1.5s ease-in-out infinite;
}

/* ── Inbound call overlay ──────────────── */

.inbound-overlay {
  position: fixed;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: linear-gradient(135deg, #1a2332, #243447);
  border: 2px solid #22c55e;
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 420px;
  max-width: 600px;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.3);
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inbound-overlay.visible { top: 20px; }
.inbound-overlay.visible { animation: inbound-glow 2s infinite; }
@keyframes inbound-glow {
  0%, 100% { box-shadow: 0 8px 32px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 8px 48px rgba(34, 197, 94, 0.6); }
}

.inbound-overlay-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.inbound-overlay-icon { font-size: 26px; animation: inbound-shake 0.5s infinite; }
@keyframes inbound-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}
.inbound-overlay-details { min-width: 0; }
.inbound-overlay-caller { color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbound-overlay-sub { color: #94a3b8; font-size: 12px; margin-top: 2px; }
.inbound-overlay-context { color: #64748b; font-size: 11px; margin-top: 4px; font-style: italic; }
.inbound-overlay-timer { color: #22c55e; font-size: 12px; font-variant-numeric: tabular-nums; }

.inbound-overlay-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-inbound-accept {
  background: #22c55e; color: #fff; border: none; padding: 10px 18px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.btn-inbound-accept:hover { background: #16a34a; }
.btn-inbound-reject {
  background: #ef4444; color: #fff; border: none; padding: 10px 18px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.btn-inbound-reject:hover { background: #dc2626; }

/* Missed call badge in sidebar */
.missed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  top: 2px;
  right: 2px;
}

/* ── History filters ────────────────────── */

.history-filters {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.chip:hover { background: var(--bg3); color: var(--text1); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip.outcome-chip.active[data-outcome="connected"] { background: #166534; border-color: #22c55e; color: #4ade80; }
.chip.outcome-chip.active[data-outcome="no_answer"] { background: #7f1d1d; border-color: #ef4444; color: #fca5a5; }
.chip.outcome-chip.active[data-outcome="left_voicemail"] { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
[data-theme="light"] .chip.outcome-chip.active[data-outcome="connected"] { background: #dcfce7; border-color: #22c55e; color: #15803d; }
[data-theme="light"] .chip.outcome-chip.active[data-outcome="no_answer"] { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
[data-theme="light"] .chip.outcome-chip.active[data-outcome="left_voicemail"] { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }
[data-theme="accessible"] .chip.outcome-chip.active[data-outcome="connected"] { background: #bbf7d0; border-color: #16a34a; color: #14532d; }
[data-theme="accessible"] .chip.outcome-chip.active[data-outcome="no_answer"] { background: #fecaca; border-color: #dc2626; color: #7f1d1d; }
[data-theme="accessible"] .chip.outcome-chip.active[data-outcome="left_voicemail"] { background: #bfdbfe; border-color: #2563eb; color: #1e3a8a; }

.history-search-input {
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text1);
  outline: none;
}
.history-search-input:focus { border-color: var(--accent); }
.history-search-input::placeholder { color: var(--text3); }

.history-sort-select {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
}

/* Direction icon (small arrow) for sidebar history */
.history-dir-icon {
  font-size: 11px;
  margin-right: 2px;
  opacity: 0.6;
}
.history-dir-icon.inbound { color: #f59e0b; }
.history-dir-icon.outbound { color: var(--text3); }
.history-dir-icon.missed { color: #ef4444; }

/* ── Panel history redesign ─────────────── */

.hist-group { margin-bottom: 12px; }
.hist-date {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text3);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.hist-row:hover { background: rgba(99, 102, 241, 0.08); }

.hist-dir {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.hist-dir.outbound { color: var(--text3); }
.hist-dir.inbound { color: #f59e0b; }
.hist-dir.missed { color: #ef4444; }

.hist-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hist-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .15s;
}
.hist-name:hover {
  color: var(--accent);
  text-decoration: underline;
}
.hist-company {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-outcome {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hist-outcome.connected { color: #4ade80; background: #0f291a; }
.hist-outcome.no_answer { color: #f87171; background: #291414; }
.hist-outcome.busy { color: #fbbf24; background: #29220a; }
.hist-outcome.left_voicemail { color: #60a5fa; background: #0f1a29; }
.hist-outcome.wrong_number { color: #f87171; background: #291414; }
.hist-outcome.callback { color: #a78bfa; background: #1a1429; }
[data-theme="light"] .hist-outcome.connected { color: #15803d; background: #dcfce7; }
[data-theme="light"] .hist-outcome.no_answer { color: #b91c1c; background: #fee2e2; }
[data-theme="light"] .hist-outcome.busy { color: #b45309; background: #fef3c7; }
[data-theme="light"] .hist-outcome.left_voicemail { color: #1d4ed8; background: #dbeafe; }
[data-theme="light"] .hist-outcome.wrong_number { color: #b91c1c; background: #fee2e2; }
[data-theme="light"] .hist-outcome.callback { color: #6d28d9; background: #ede9fe; }
[data-theme="accessible"] .hist-outcome.connected { color: #14532d; background: #bbf7d0; }
[data-theme="accessible"] .hist-outcome.no_answer { color: #7f1d1d; background: #fecaca; }
[data-theme="accessible"] .hist-outcome.busy { color: #78350f; background: #fde68a; }
[data-theme="accessible"] .hist-outcome.left_voicemail { color: #1e3a8a; background: #bfdbfe; }
[data-theme="accessible"] .hist-outcome.wrong_number { color: #7f1d1d; background: #fecaca; }
[data-theme="accessible"] .hist-outcome.callback { color: #4c1d95; background: #ddd6fe; }

.hist-meta {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.hist-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hist-score {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}
.hist-score.good { color: #4ade80; background: #0f291a; }
.hist-score.ok { color: #fbbf24; background: #29220a; }
.hist-score.low { color: #f87171; background: #291414; }
.hist-qual { font-size: 10px; }
.hist-attempt {
  font-size: 9px;
  color: var(--text3);
  font-weight: 600;
}
.hist-notes {
  font-size: 10px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: block;
  opacity: 0.7;
}
.hist-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.hist-more {
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  padding: 8px;
  cursor: pointer;
}
.hist-more:hover { color: var(--accent); }

/* ── Telephony badge ───────────────────── */

.telephony-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text2);
  text-transform: uppercase;
  line-height: 1;
}
.telephony-badge.mode-mac { background: var(--surface2); color: var(--text2); }
.telephony-badge.mode-telnyx { background: #1a3a2a; color: #4ade80; }
.telephony-badge.mode-twilio { background: #2a1a1a; color: #f87171; }

.caller-id-display {
  font-size: 11px;
  color: var(--text2);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ── Phone settings ─────────────────────── */

.phone-provider-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text2);
}
.phone-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
}
.phone-status-dot.connected { background: #4ade80; box-shadow: 0 0 6px #4ade8060; }
.phone-status-dot.disconnected { background: #f87171; }
.phone-status-dot.checking { background: #fbbf24; animation: pulse-dot 1s infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1 } 50% { opacity:.4 } }

.phone-inbound-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text2);
}
.phone-inbound-badge.enabled { background: #1a3a2a; color: #4ade80; }
.phone-inbound-badge.disabled { background: var(--surface2); color: var(--text3); }

.setting-value-display {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  font-variant-numeric: tabular-nums;
}

.phone-config-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-config-item {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.phone-config-item code {
  font-size: 11px;
  background: var(--surface2);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--accent);
}

/* ── Stats bar badges ───────────────────── */

.stat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  letter-spacing: .2px;
}

.stat-badge.stat-green { color: var(--green); border-color: rgba(34, 197, 94, 0.3); }
.stat-badge.stat-accent { color: var(--accent); border-color: rgba(99, 102, 241, 0.3); }
.stat-badge.stat-orange { color: var(--orange); border-color: rgba(245, 158, 11, 0.3); }
.stat-badge.stat-red { color: var(--red); border-color: rgba(239, 68, 68, 0.3); }

main {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-left: 56px;
  animation: app-slide-in 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes app-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Contacts panel ─────────────────────── */

#contacts-panel {
  width: 320px;
  min-width: 320px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Collapse contacts panel during active call */
#contacts-panel.collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
  opacity: 0;
  pointer-events: none;
}

/* search-input is now in the header — styled by .header-search */

#contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.contact-card {
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}

.contact-card:hover { background: var(--bg3); }
.contact-card.active { background: var(--accent); }

.contact-info h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.contact-info p {
  font-size: 12px;
  color: var(--text2);
}

.contact-card.active .contact-info p { color: rgba(255,255,255,0.7); }

.contact-phone-btn {
  background: var(--accent);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.contact-phone-btn:hover { background: var(--accent-hover); }

/* ── Call panel ──────────────────────────── */

#call-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 24px 32px;
  gap: 14px;
  overflow-y: auto;
  min-width: 0;
}

#call-info { text-align: left; width: 100%; }

#call-contact-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

#call-contact-name { font-size: 18px; font-weight: 600; }
#call-contact-detail { color: var(--text2); font-size: 16px; }

#call-contact-info {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text2);
}
.clickable-phone {
  font-family: monospace;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.clickable-phone:hover { background: var(--bg3); color: var(--green); }

.clickable-email {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.clickable-email:hover { background: var(--bg3); color: var(--accent); }

.clickable-link {
  cursor: pointer;
  padding: 2px;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.clickable-link:hover { opacity: 1; }
.clickable-link img { display: block; }

#icebreaker-box {
  margin-top: 8px;
}

#icebreaker-text {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  min-height: 32px;
  max-height: 200px;
  outline: none;
  font-family: inherit;
}
#icebreaker-text:focus { border-color: var(--accent); }


.btn-voicemail {
  padding: 8px 14px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-voicemail:hover { opacity: 0.85; }

.btn-call {
  padding: 8px 20px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-call:hover { opacity: 0.9; }
.btn-call:disabled { opacity: 0.4; cursor: not-allowed; }

#call-timer {
  font-size: 14px;
  font-family: monospace;
  font-weight: 600;
  color: var(--text);
  transition: color 0.3s;
}

#call-timer.timer-green { color: var(--green); }
#call-timer.timer-orange { color: var(--orange); }
#call-timer.timer-red {
  color: var(--red);
  animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#call-status {
  color: var(--green);
  font-size: 13px;
}

.btn-hangup {
  padding: 8px 20px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-hangup:hover { opacity: 0.9; }

/* ── Post-call ──────────────────────────── */

#call-post {
  width: 100%;
}

/* post-step-header h3 styled above */

#outcome-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.outcome-btn {
  padding: 8px 12px;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.outcome-btn:hover { border-color: var(--text2); }

/* Outcome color coding */
.outcome-btn[data-outcome="connected"] { border-left: 3px solid var(--green); }
.outcome-btn[data-outcome="busy"] { border-left: 3px solid var(--orange); }
.outcome-btn[data-outcome="no_answer"] { border-left: 3px solid var(--red); }
.outcome-btn[data-outcome="left_voicemail"] { border-left: 3px solid var(--blue); }
.outcome-btn[data-outcome="wrong_number"] { border-left: 3px solid var(--text2); }

.outcome-btn.selected[data-outcome="connected"] { background: var(--green); border-color: var(--green); color: white; }
.outcome-btn.selected[data-outcome="busy"] { background: var(--orange); border-color: var(--orange); color: #000; }
.outcome-btn.selected[data-outcome="no_answer"] { background: var(--red); border-color: var(--red); color: white; }
.outcome-btn.selected[data-outcome="left_voicemail"] { background: var(--blue); border-color: var(--blue); color: white; }
.outcome-btn.selected[data-outcome="wrong_number"] { background: var(--text2); border-color: var(--text2); color: #000; }

#call-notes {
  width: 100%;
  padding: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  resize: vertical;
  outline: none;
  margin-bottom: 12px;
}

#call-notes:focus { border-color: var(--accent); }

/* ── Follow-up section ──────────────────── */

#followup-section {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#followup-section h4 {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 8px;
  font-weight: 500;
}

.followup-templates {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.followup-template-btn {
  padding: 5px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.followup-template-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.followup-template-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.followup-row {
  display: flex;
  gap: 8px;
}

.followup-row input[type="date"],
.followup-row select {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.followup-row input[type="date"]:focus,
.followup-row select:focus {
  border-color: var(--accent);
}


/* ── Post-call steps ──────────────────────── */

.post-step-primary {
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.post-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.post-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.post-step-number.secondary {
  background: var(--bg3);
  color: var(--text2);
}

.post-step-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Details/summary for step 2 */
.post-step-secondary {
  margin-bottom: 8px;
}

.post-step-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  list-style: none;
}

.post-step-toggle::-webkit-details-marker { display: none; }

.toggle-chevron {
  margin-left: auto;
  transition: transform 200ms ease;
}

.toggle-chevron::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text2);
  border-bottom: 2px solid var(--text2);
  transform: rotate(-45deg);
}

details[open] .toggle-chevron::after {
  transform: rotate(45deg);
}

.post-step-content {
  padding: 12px 16px;
}

/* ── Sticky action bar ───────────────────── */

.post-actions-sticky {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  padding: 10px 0;
  display: flex;
  gap: 8px;
  z-index: var(--z-sticky);
  margin-top: 6px;
}

.btn-rdv-inline {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-rdv-inline:hover { background: var(--accent-hover); }

.btn-save {
  flex: 1;
  padding: 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-save:hover { background: var(--accent-hover); }
.btn-save:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-save-next {
  flex: 1;
  padding: 10px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-save-next:hover { opacity: 0.9; }
.btn-save-next.countdown-active {
  animation: countdown-pulse 1s ease-in-out infinite;
}
@keyframes countdown-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.btn-secondary {
  padding: 10px 20px;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}

.btn-secondary:hover { background: var(--border); }

/* ── Footer / history ────────────────────── */

footer {
  border-top: 1px solid var(--border);
  padding: 8px 24px;
  padding-left: 80px;
  flex-shrink: 0;
}

#history-bar {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  font-size: 13px;
  color: var(--text2);
}

.history-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Tabs ────────────────────────────────── */

/* Panel tabs hidden — navigation via sidebar icons */
#panel-tabs {
  display: none;
}

.tab-content { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.tab-content.active { display: flex; }

#tab-search { flex-direction: column; }

.panel-history-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Section labels ──────────────────────── */

.section-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.5px;
  padding: 12px 12px 6px;
  margin: 0;
}

/* ── Segments & Lists cards ──────────────── */

#segments-view { padding: 0 0 8px; }

.list-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin: 2px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}

.list-card:hover { background: var(--bg3); }

.list-card .card-name {
  color: var(--text);
  font-weight: 500;
}

.list-card .card-meta {
  color: var(--text2);
  font-size: 11px;
}

/* ── Queue ────────────────────────────────── */

#queue-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#queue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

#queue-back {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
#queue-back:hover { background: var(--bg3); color: var(--text); }

#queue-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

#queue-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

#queue-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}

#queue-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s ease;
}

#queue-progress-text {
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
}

#queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}

.queue-item:hover { background: var(--bg3); }
.queue-item.current { background: var(--accent); color: white; }
.queue-item.current .qi-meta { color: rgba(255,255,255,0.7); }

.qi-status {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

.queue-item.pending .qi-status { color: var(--text2); }
.queue-item.current .qi-status { color: white; }
.queue-item.called .qi-status { color: var(--green); }
.queue-item.skipped .qi-status { color: var(--orange); }

.qi-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qi-meta {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
}

/* ── Preview view ─────────────────────────── */

#preview-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

#preview-back {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
#preview-back:hover { background: var(--bg3); color: var(--text); }

#preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

#preview-count {
  font-size: 12px;
  color: var(--text2);
}

#preview-resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.15);
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}

#preview-resume-text {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

#preview-resume-btn {
  padding: 5px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
#preview-resume-btn:hover { opacity: 0.85; }

#preview-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.preview-contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.preview-contact:hover {
  background: rgba(99, 102, 241, 0.08);
}

.preview-contact.no-phone {
  opacity: 0.4;
}

.preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.preview-dot.has-phone { background: var(--green); }
.preview-dot.no-phone { background: var(--text2); }

.preview-contact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-contact-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-contact-secondary {
  font-size: 11px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-phone-label {
  color: var(--red);
  font-style: italic;
}

.preview-contact-phone {
  font-size: 12px;
  color: var(--text2);
  font-family: monospace;
  flex-shrink: 0;
}

.preview-actions {
  padding: 8px;
  flex-shrink: 0;
}

.btn-launch-session {
  width: 100%;
  padding: 12px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-launch-session:hover { opacity: 0.9; }

/* ── Queue header compact controls ───────── */

.queue-header-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.btn-session-control {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.btn-session-control:hover { background: var(--bg2); color: var(--text); }
.btn-session-control.pause:hover { color: var(--orange); border-color: var(--orange); }
.btn-session-control.stop:hover { color: var(--red); border-color: var(--red); }
.btn-session-control.paused { background: var(--green); color: white; border-color: var(--green); }

/* ── Preview briefing ─────────────────────── */

#preview-briefing {
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
}

.briefing-section {
  margin-bottom: 20px;
}

.briefing-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.briefing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.briefing-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.briefing-card-value {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
}

.briefing-card-label {
  font-size: 11px;
  color: var(--text2);
}

.briefing-card-value.green { color: var(--green); }
.briefing-card-value.accent { color: var(--accent); }
.briefing-card-value.orange { color: var(--orange); }
.briefing-card-value.red { color: var(--red); }

/* Briefing card interactive (click-to-expand) */
.briefing-card[data-briefing] { cursor: pointer; position: relative; transition: border-color 200ms, background 200ms; }
.briefing-card[data-briefing]:hover { border-color: var(--accent); background: rgba(99,102,241,0.04); }
.briefing-card-open { border-color: var(--accent) !important; background: rgba(99,102,241,0.06) !important; }

.briefing-expand {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 240px;
  z-index: 10;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 8px 10px;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  animation: briefingExpandIn 150ms ease;
}
@keyframes briefingExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.briefing-expand-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.briefing-expand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.briefing-expand-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.briefing-expand-company { font-size: 10px; color: var(--text2); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.briefing-expand-phone { font-size: 10px; color: var(--text2); font-family: monospace; }
.briefing-expand-phone.no-phone { color: var(--red); font-style: italic; font-family: inherit; }
.briefing-expand-outcome { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg3); color: var(--text2); }
.briefing-expand-outcome.connected { background: rgba(34,197,94,0.15); color: var(--green); }
.briefing-expand-outcome.no_answer { background: rgba(239,68,68,0.15); color: var(--red); }
.briefing-expand-outcome.busy { background: rgba(245,158,11,0.15); color: var(--orange); }
.briefing-expand-outcome.left_voicemail { background: rgba(59,130,246,0.15); color: var(--blue); }
.briefing-expand-dur { color: var(--text2); font-family: monospace; font-size: 10px; }
.briefing-expand-empty { font-size: 11px; color: var(--text2); font-style: italic; padding: 4px 0; }
.briefing-expand-more { font-size: 10px; color: var(--accent); padding: 4px 0; text-align: center; }

/* ── Preview contact detail (floating popup card) ─ */

/* Backdrop dims everything except the list */
.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.detail-backdrop.visible {
  opacity: 1;
}

/* Contacts panel stays above backdrop when detail is open */
#contacts-panel.detail-open {
  position: relative;
  z-index: 1001;
}

#preview-contact-detail {
  position: fixed;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  padding: 18px;
  background: var(--bg2);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 0 12px 12px 0;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.1);
  z-index: 1001;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  pointer-events: none;
}
#preview-contact-detail.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.detail-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.detail-name { font-size: 17px; font-weight: 700; }
.detail-jobtitle { font-size: 13px; color: var(--accent); margin-top: 3px; }
.detail-company { font-size: 13px; color: var(--text2); margin-top: 1px; }

.detail-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.detail-field {
  font-size: 13px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg3);
  border-radius: 6px;
}

.detail-field-icon { font-size: 14px; width: 16px; text-align: center; }

.detail-section { margin-top: 10px; }
.detail-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.detail-empty { font-size: 12px; color: var(--text2); font-style: italic; }

.detail-call-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 6px;
  transition: background 0.1s;
}
.detail-call-row:hover { background: var(--bg3); }

.detail-call-date { color: var(--text2); min-width: 50px; }
.detail-call-outcome { font-weight: 500; flex: 1; }
.detail-call-outcome.green { color: var(--green); }
.detail-call-outcome.orange { color: var(--orange); }
.detail-call-outcome.red { color: var(--red); }
.detail-call-outcome.accent { color: var(--accent); }
.detail-call-dur { color: var(--text2); font-family: monospace; }

/* ── Activity cards in contact detail ──── */

.detail-activity-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--bg2);
  transition: background .1s;
}
.detail-activity-card:hover { background: var(--bg3); }

.detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.detail-card-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text3);
}
.detail-card-date {
  font-size: 10px;
  color: var(--text3);
}
.detail-card-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.detail-card-dur {
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.detail-card-qual {
  font-size: 10px;
}
.detail-card-notes {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
  line-height: 1.3;
}

/* ── Coaching sparklines ────────────────── */

.coaching-sparklines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.spark-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spark-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.spark-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text1);
  font-variant-numeric: tabular-nums;
}
.spark-label {
  font-size: 10px;
  color: var(--text3);
}
.sparkline-svg { display: block; }

.coaching-insight-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.coaching-objection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.coaching-objection-text {
  color: var(--text1);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coaching-objection-count {
  font-weight: 600;
  color: var(--accent);
  margin-left: 8px;
}

.preview-contact.hovered { background: var(--bg3); }

/* ── Confirm modal ───────────────────────── */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.confirm-modal {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.confirm-modal h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.confirm-modal p {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.confirm-actions .btn-secondary,
.confirm-actions .btn-save {
  padding: 8px 18px;
  font-size: 13px;
}

/* ── Voicemail overlay ────────────────────── */

#voicemail-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 250ms ease;
}
#voicemail-overlay.visible {
  opacity: 1;
}

.voicemail-overlay-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 36px;
  min-width: 360px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: vm-pop-in 250ms ease;
}

@keyframes vm-pop-in {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.voicemail-overlay-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--orange);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.voicemail-overlay-label::before {
  content: '\\1F4E9';
  font-size: 16px;
}

.voicemail-overlay-script {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
  text-align: left;
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  max-height: 280px;
  overflow-y: auto;
}

.voicemail-overlay-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.voicemail-overlay-close:hover {
  background: var(--accent-hover);
}
.vm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1;
}

/* ── REC indicator ────────────────────────── */

#rec-indicator {
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  animation: rec-pulse 1s ease-in-out infinite;
}

#rec-indicator::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Live coaching zone ──────────────────── */

#live-coaching-zone {
  width: 100%;
}

#coaching-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.coaching-card {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid;
  animation: card-slide-in 0.3s ease-out;
}

@keyframes card-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.coaching-card.objection {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: var(--red);
  color: #fca5a5;
}

.coaching-card.signal {
  background: rgba(34, 197, 94, 0.1);
  border-left-color: var(--green);
  color: #86efac;
}

.coaching-card.question {
  background: rgba(99, 102, 241, 0.1);
  border-left-color: var(--accent);
  color: #a5b4fc;
}

.coaching-card.alert {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: var(--orange);
  color: #fcd34d;
}

.coaching-card.tip {
  background: rgba(156, 163, 175, 0.1);
  border-left-color: var(--text2);
  color: var(--text2);
}

.coaching-card .card-type {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  opacity: 0.8;
}

/* ── Live transcript zone ────────────────── */

#live-transcript-zone {
  width: 100%;
}

#live-transcript {
  max-height: 150px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}

.transcript-line {
  margin-bottom: 4px;
}

.transcript-line .ts {
  color: var(--text2);
  font-size: 10px;
  font-family: monospace;
  margin-right: 6px;
}

.transcript-line.interim {
  color: var(--text2);
  font-style: italic;
}

.transcript-line.final {
  color: var(--text);
}

/* ── Recording section (post-call) ───────── */

#recording-section {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#recording-section h4 {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 8px;
  font-weight: 500;
}

#recording-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#recording-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-uploading { background: rgba(245, 158, 11, 0.2); color: var(--orange); }
.badge-transcribing { background: rgba(99, 102, 241, 0.2); color: var(--accent); }
.badge-analyzing { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.badge-complete { background: rgba(34, 197, 94, 0.2); color: var(--green); }
.badge-failed { background: rgba(239, 68, 68, 0.2); color: var(--red); }

#recording-drive-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

#recording-drive-link:hover { text-decoration: underline; }

#recording-transcript-details {
  margin-top: 8px;
}

#recording-transcript-details summary {
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  padding: 4px 0;
}

#recording-transcript-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  padding: 8px;
  background: var(--bg3);
  border-radius: var(--radius);
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

#recording-analysis {
  margin-top: 10px;
  font-size: 12px;
}

#analysis-summary {
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.5;
}

#analysis-qualification {
  margin-bottom: 8px;
}

.qual-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.qual-hot { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.qual-warm { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.qual-cold { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
.qual-disqualified { background: rgba(156, 163, 175, 0.2); color: var(--text2); }

#analysis-bant {
  margin-bottom: 8px;
  color: var(--text2);
  line-height: 1.6;
}

#analysis-objections {
  margin-bottom: 8px;
  color: var(--text2);
}

#analysis-next-action {
  margin-bottom: 10px;
  color: var(--green);
  font-weight: 500;
}

#btn-apply-suggestions {
  font-size: 12px;
  padding: 6px 14px;
}

/* ── Layout 2 colonnes pendant appel ──────── */

#call-panel.call-active {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
}

#call-panel.call-active > #call-info {
  grid-column: 1;
  grid-row: 1;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border);
}

#call-panel.call-active > #call-post {
  grid-column: 1;
  grid-row: 2;
  padding: 16px 24px;
  overflow-y: auto;
}

#call-panel.call-active > .coaching-sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}

/* Hide inline coaching/transcript zones during call-active (use sidebar instead) */
#call-panel.call-active > #live-coaching-zone,
#call-panel.call-active > #live-transcript-zone {
  display: none !important;
}

/* ── Coaching sidebar ────────────────────── */

.coaching-sidebar {
  display: none;
}

.coaching-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.sidebar-tab {
  flex: 1;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sidebar-tab:hover {
  color: var(--text);
}

.sidebar-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sidebar-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
}

.sidebar-tab-content.active {
  display: flex;
  flex-direction: column;
}

.coaching-sidebar-cards {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-transcript-content {
  overflow-y: auto;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
}

/* Coaching history */
.history-contact-group {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.history-contact-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.history-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text2);
}
.history-type {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  min-width: 60px;
}
.history-item.closing-signal .history-type { color: var(--green); }
.history-item.objection .history-type { color: var(--orange); }
.history-text { flex: 1; }
.history-time {
  font-size: 10px;
  color: var(--text3);
  white-space: nowrap;
}

/* ── Call prep box ───────────────────────── */

.call-prep-content {
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-line;
  margin-top: 8px;
}

/* ── History interactive ─────────────────── */

.history-item {
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
}

.history-item:hover { background: var(--bg3); }

.history-outcome {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.history-outcome.connected { background: var(--green); }
.history-outcome.no_answer { background: var(--red); }
.history-outcome.left_voicemail { background: var(--orange); }
.history-outcome.busy { background: var(--text2); }
.history-outcome.wrong_number { background: var(--text2); }

/* ── Shortcuts overlay ────────────────────── */

.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shortcuts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.shortcuts-modal {
  position: relative;
  width: 440px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: overlay-in 200ms ease;
}

@keyframes overlay-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.shortcuts-header h2 { font-size: 15px; font-weight: 600; }

.shortcuts-close {
  background: none; border: none; color: var(--text2);
  font-size: 20px; cursor: pointer; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.shortcuts-close:hover { background: var(--bg3); color: var(--text); }

.shortcuts-body {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.shortcuts-group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 8px;
}

.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  margin-left: 3px;
}

/* ── Keyboard hints on buttons ─────────────── */

[data-kbd] { position: relative; }

[data-kbd]::after {
  content: attr(data-kbd);
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 1px 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text2);
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}

.post-actions-sticky:hover [data-kbd]::after,
[data-kbd].show-kbd::after { opacity: 1; }

.kbd-hint {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.4;
  text-align: right;
  display: block;
  padding: 2px 20px;
  padding-left: 80px;
  flex-shrink: 0;
}

/* ── Toast notifications ──────────────────── */

#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: white;
  pointer-events: auto;
  animation: toast-in 250ms ease;
  position: relative;
  overflow: hidden;
}

.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast.info { background: var(--accent); }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255,255,255,0.4);
  animation: toast-progress 3s linear forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── Auto-dial countdown overlay ──────────── */

#autodial-countdown {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg2);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  text-align: center;
}

.autodial-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.autodial-text {
  font-size: 15px;
  color: var(--text);
}

.autodial-text strong {
  font-size: 20px;
  color: var(--orange);
}

.autodial-bar {
  width: 100%;
  max-width: 200px;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}

.autodial-bar-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 2px;
  transition: width 1s linear;
}

.autodial-cancel {
  font-size: 12px;
  padding: 6px 16px;
}

/* ── Toast cancel button ─────────────────── */

.toast-cancel {
  margin-left: 10px;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.toast-cancel:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ── Settings button ─────────────────────── */

.btn-settings {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.btn-settings:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ── Settings full-page overlay ─────────── */

.settings-page-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 56px;
  z-index: var(--z-overlay);
  background: var(--bg);
  animation: settings-slide-in 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.settings-page-overlay.hidden {
  display: none;
}

@keyframes settings-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.settings-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Settings header bar ──────────────────── */

.settings-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}

.settings-page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-page-header-left h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.settings-page-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.settings-page-back:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--text2);
}

.settings-page-header-right {
  display: flex;
  gap: 8px;
}
.settings-page-header-right.hidden-for-admin { display: none; }

.settings-page-header-right .btn-save {
  padding: 8px 20px;
  font-size: 13px;
}

.settings-page-header-right .btn-secondary {
  padding: 8px 16px;
  font-size: 13px;
}

/* ── Settings body (sidebar + content) ────── */

.settings-page-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Settings sidebar nav ────────────────── */

.settings-nav {
  width: 200px;
  min-width: 200px;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: none;
  border: none;
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}

.settings-nav-item:hover {
  background: var(--bg3);
  color: var(--text);
}

.settings-nav-item.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}

.settings-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.settings-nav-item.active .settings-nav-icon {
  opacity: 1;
}

.settings-nav-label {
  white-space: nowrap;
  font-weight: 600;
}

/* ── Settings nav accordion (Admin) ───────── */
.settings-nav-accordion {
  margin-top: 4px;
}
.settings-nav-accordion-header {
  position: relative;
}
.settings-nav-chevron {
  margin-left: auto;
  font-size: 9px;
  transition: transform 0.2s;
  color: var(--text2);
}
.settings-nav-chevron.open {
  transform: rotate(90deg);
}
.settings-nav-accordion-body {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.settings-nav-sub {
  font-size: 12px !important;
  padding: 7px 12px !important;
  color: var(--text2);
}
.settings-nav-sub:hover {
  color: var(--text);
}
.settings-nav-sub.active {
  color: var(--accent);
}

/* ── Settings content area ───────────────── */

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
}

/* ── Settings panel (each section) ───────── */

.settings-panel {
  display: none;
  animation: settings-panel-in 200ms ease;
}

.settings-panel.active {
  display: block;
}
.settings-panel.active + .settings-panel.active {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

@keyframes settings-panel-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.settings-panel-header {
  margin-bottom: 24px;
}

.settings-panel-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.settings-panel-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.4;
}

/* ── Settings card (grouped fields) ──────── */

.settings-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.settings-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── Setting rows (reused from old) ──────── */

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.setting-row + .setting-row {
  border-top: 1px solid rgba(46, 49, 64, 0.5);
}

.setting-row.setting-sub {
  padding-left: 16px;
  opacity: 0.85;
}

.setting-row.setting-sub + .setting-row:not(.setting-sub) {
  border-top: 1px solid var(--border);
}

.setting-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text);
  flex-shrink: 0;
  min-width: 160px;
  max-width: 200px;
}

.setting-desc {
  font-size: 11px;
  color: var(--text2);
}

.setting-number {
  width: 72px;
  padding: 6px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  outline: none;
}

.setting-number:focus {
  border-color: var(--accent);
}

.setting-text, .setting-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
}

.setting-text:focus, .setting-select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Marché panel: slightly narrower labels for dense forms */
[data-panel="offer"] .setting-row .setting-label {
  min-width: 140px;
}

/* ── Shortcuts dual view ─────────────────── */

.shortcuts-dual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.shortcuts-view-toggle {
  display: none; /* hidden: both views always visible */
}

.shortcuts-view-btn {
  padding: 6px 16px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.shortcuts-view-btn:hover {
  color: var(--text);
}

.shortcuts-view-btn.active {
  background: var(--accent);
  color: white;
}

.shortcuts-view {
  display: block;
}

.shortcuts-view.active {
  display: block;
}

/* ── Virtual keyboard ────────────────────── */

.keyboard-card {
  padding: 20px 24px;
}

.keyboard-hint-text {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 16px;
}

.keyboard-layout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 600px;
}

.keyboard-row {
  display: flex;
  gap: 4px;
}

.keyboard-row-space {
  justify-content: center;
}

.key {
  height: 38px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  position: relative;
  transition: all 0.15s;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  user-select: none;
}

.key-sm  { width: 38px; flex-shrink: 0; }
.key-med { width: 52px; flex-shrink: 0; }
.key-wide { width: 62px; flex-shrink: 0; }
.key-xl  { width: 76px; flex-shrink: 0; }
.key-space { flex: 1; min-width: 180px; }

/* Mapped key = highlighted */
.key.key-mapped {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--accent);
  font-weight: 600;
}

/* Mapped key hover: show action label */
.key.key-mapped::after {
  content: attr(data-action-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}

.key.key-mapped:hover::after {
  opacity: 1;
}

/* Modifier key (Alt) */
.key.key-modifier.key-active {
  background: rgba(99, 102, 241, 0.25);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ── Keyboard legend ─────────────────────── */

.keyboard-legend {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.keyboard-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
}

.keyboard-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.keyboard-legend-active {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.keyboard-legend-modifier {
  background: rgba(99, 102, 241, 0.25);
  border: 1px solid var(--accent);
}

/* ── Screen mockup (shortcuts) ───────────── */

.sc-mockup-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-mockup-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
}

.sc-mockup-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sc-mockup-outcomes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sc-btn {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  position: relative;
}

.sc-btn::after {
  content: attr(data-kbd-label);
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  opacity: 0.9;
  pointer-events: none;
}

.sc-btn-call { background: var(--green); color: white; }
.sc-btn-hangup { background: var(--red); color: white; }
.sc-btn-rdv { background: var(--accent); color: white; }
.sc-btn-launch { background: var(--green); color: white; }
.sc-btn-save { background: var(--accent); color: white; }
.sc-btn-pause { background: var(--orange); color: #000; }
.sc-btn-secondary { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }

.sc-outcome { background: var(--bg3); color: var(--text); border: 2px solid var(--border); }
.sc-outcome[data-outcome="connected"] { border-left: 3px solid var(--green); }
.sc-outcome[data-outcome="busy"] { border-left: 3px solid var(--orange); }
.sc-outcome[data-outcome="no_answer"] { border-left: 3px solid var(--red); }
.sc-outcome[data-outcome="left_voicemail"] { border-left: 3px solid var(--blue); }
.sc-outcome[data-outcome="wrong_number"] { border-left: 3px solid var(--text2); }

/* Capture mode (click to rebind) */
.sc-btn.capturing {
  animation: sc-pulse 0.8s infinite;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
  border-color: var(--accent) !important;
}
.sc-btn.capturing::after {
  content: 'Appuyez...' !important;
  background: var(--red);
}
@keyframes sc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Cross-highlight */
.sc-btn.cross-highlight {
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
  border-color: var(--accent) !important;
  transform: scale(1.05);
}

.key.cross-highlight {
  background: rgba(99, 102, 241, 0.3) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.25), 0 2px 0 rgba(0, 0, 0, 0.3);
}
.key.cross-highlight::after {
  opacity: 1 !important;
}

/* ── Audio placeholder ───────────────────── */

.settings-card-placeholder {
  text-align: center;
  padding: 48px 24px;
}

.placeholder-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.placeholder-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.placeholder-desc {
  font-size: 13px;
  color: var(--text2);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Responsive: narrow viewport ─────────── */

@media (max-width: 800px) {
  .settings-nav {
    width: 56px;
    min-width: 56px;
    padding: 12px 4px;
  }

  .settings-nav-label {
    display: none;
  }

  .settings-nav-item {
    justify-content: center;
    padding: 10px 8px;
  }

  .settings-nav-icon {
    margin: 0;
  }

  .settings-content {
    padding: 20px 16px;
  }

  .setting-text, .setting-select {
    width: 140px;
  }

  .keyboard-layout {
    transform: scale(0.85);
    transform-origin: top left;
  }
}

/* ── Toggle switch ──────────────────────── */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: background 0.2s, border-color 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: var(--text2);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: white;
}

/* ── Objections editor (card-based) ─────── */

.objection-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  transition: border-color 0.15s;
}
.objection-row:hover { border-color: rgba(99, 102, 241, 0.3); }

.objection-row-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
}

.objection-row input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.15s;
}
.objection-row input:focus { border-color: var(--accent); outline: none; }
.objection-row input::placeholder { color: var(--text2); opacity: 0.6; }

.objection-row input.objection-input-response {
  font-style: italic;
  color: var(--accent);
}
.objection-row input.objection-input-response:focus { color: var(--text); font-style: normal; }

.objection-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  opacity: 0.5;
}
.objection-remove:hover { opacity: 1; }
.btn-small { font-size: 11px; padding: 4px 10px; margin-top: 4px; }
.btn-accent {
  background: var(--accent); color: white; border: none; border-radius: 6px;
  cursor: pointer; font-weight: 600; transition: opacity 0.15s;
}
.btn-accent:hover { opacity: 0.85; }

/* ── Shortcut capture buttons ────────────── */

.shortcut-capture {
  padding: 6px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: monospace;
  cursor: pointer;
  min-width: 70px;
  text-align: center;
  transition: all 0.15s;
}

.shortcut-capture:hover { border-color: var(--accent); }

.shortcut-capture.capturing {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent);
  animation: capture-pulse 1s ease-in-out infinite;
}

@keyframes capture-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shortcut-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.shortcut-group-label:first-child {
  padding-top: 0;
}

/* ── Contextual action bar states ─────────── */
.post-actions-sticky[data-state="idle"] .btn-call { display: inline-flex; }
.post-actions-sticky[data-state="idle"] .btn-save-next,
.post-actions-sticky[data-state="idle"] .btn-save,
.post-actions-sticky[data-state="idle"] .btn-hangup { display: none; }

.post-actions-sticky[data-state="active"] .btn-hangup { display: inline-flex; }
.post-actions-sticky[data-state="active"] .btn-call,
.post-actions-sticky[data-state="active"] .btn-save-next { display: none; }

.btn-hangup {
  padding: 10px 20px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: none;
}
.btn-hangup:hover { opacity: 0.9; }

.btn-pause {
  padding: 8px 14px;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-pause:hover { background: var(--bg2); border-color: var(--text2); }
.btn-pause.paused {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}

/* ── Unified intro card ──────────────────── */
.intro-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}
.intro-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.intro-card-header h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  font-weight: 600;
}
.intro-card-icebreaker {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.intro-card-icebreaker:focus {
  background: var(--bg3);
  border-radius: 4px;
  padding: 4px;
}
.intro-card-prep {
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
.intro-card-prep strong { color: var(--text); }

/* Structured prep sections */
.prep-section {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
}
.prep-section + .prep-section { border-top: 1px solid var(--bg3); }
.prep-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  min-width: 68px;
  flex-shrink: 0;
}
.prep-text { font-size: 12px; color: var(--text1); line-height: 1.4; }
.prep-angle .prep-text { color: var(--accent); font-weight: 500; }
.prep-objections { display: flex; flex-wrap: wrap; gap: 4px; }
.prep-obj-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.prep-icebreaker .prep-text { font-style: italic; color: var(--text2); }

/* ── Attempt counter ─────────────────────── */
.attempt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 8px;
  margin-left: 8px;
}
.attempt-badge.attempt-high {
  color: var(--orange);
  border-color: var(--orange);
}
.attempt-badge.attempt-danger {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ── Session summary modal ───────────────── */
.session-summary-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-summary-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.session-summary-modal {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 420px;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
}
.session-summary-modal h2 {
  margin-bottom: 16px;
  font-size: 18px;
}
.summary-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.summary-stat {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.summary-stat .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}
.summary-stat .stat-value.green { color: var(--green); }
.summary-stat .stat-value.orange { color: var(--orange); }
.summary-stat .stat-label {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.summary-outcomes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.summary-outcome-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.summary-outcome-chip.connected { border-color: var(--green); color: var(--green); }
.summary-outcome-chip.no_answer { border-color: var(--red); color: var(--red); }
.summary-outcome-chip.left_voicemail { border-color: var(--blue); color: var(--blue); }
.summary-outcome-chip.busy { border-color: var(--orange); color: var(--orange); }
.session-summary-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── WhatsApp follow-up button ───────────── */
.btn-whatsapp {
  padding: 10px 16px;
  background: #25d366;
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-whatsapp:hover { background: #20bd5a; }
.btn-whatsapp img { width: 14px; height: 14px; }

/* ── Call score badge ────────────────────── */
.call-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}
.call-score-badge.score-high { background: rgba(34, 197, 94, 0.15); color: var(--green); border: 1px solid var(--green); }
.call-score-badge.score-medium { background: rgba(245, 158, 11, 0.15); color: var(--orange); border: 1px solid var(--orange); }
.call-score-badge.score-low { background: rgba(239, 68, 68, 0.15); color: var(--red); border: 1px solid var(--red); }

/* ── Closing signal alert ────────────────── */
.coaching-card.closing-signal {
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid var(--green);
  animation: pulse-green 1.5s ease-in-out 3;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.3); }
}

/* ── Rappels du jour card ────────────────── */
/* Section headers for lists */
.lists-section-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 10px 12px 4px;
  margin-top: 4px;
}

/* Suggested list cards */
.suggested-list-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin: 2px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  border-left: 3px solid var(--accent);
}
.suggested-list-card:hover { background: var(--bg3); }
.suggested-list-card .card-icon { margin-right: 8px; font-size: 14px; }
.suggested-list-card .card-name { color: var(--text); font-weight: 600; }
.suggested-list-card .card-meta { color: var(--text2); font-size: 11px; }

.suggested-empty {
  color: var(--text2);
  font-size: 12px;
  padding: 12px 16px;
  text-align: center;
  font-style: italic;
}

.rappels-card {
  background: var(--bg2);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.rappels-card:hover { background: var(--bg3); }
.rappels-card .card-name { color: var(--orange); font-weight: 600; }

/* ── Dashboard Home ──────────────────────── */

#dashboard-home {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1;
  overflow-y: auto;
  animation: home-fade-in 0.3s ease-out;
  padding: 8px 0;
}

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

/* Zone A: Welcome */
.home-welcome {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 4px;
}

.home-greeting {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.home-date {
  font-size: 13px;
  color: var(--text2);
}

/* Zone B: KPI Cards */
.home-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.home-kpi-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 10px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.home-kpi-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.1);
}

.home-kpi-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
}

.home-kpi-label {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.home-kpi-progress {
  height: 2px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.home-kpi-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  width: 0%;
  transition: width 0.6s ease-out, background 0.3s;
}

.home-kpi-target {
  font-size: 10px;
  color: var(--text2);
  opacity: 0.5;
}

/* KPI expand panel (click-to-show detail) */
.home-kpi-expand {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  z-index: 10;
  box-shadow: var(--shadow-md);
  animation: card-slide-in 0.15s ease-out;
  max-height: 200px;
  overflow-y: auto;
}
.home-kpi-expand-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.home-kpi-expand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.home-kpi-expand-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-kpi-expand-outcome { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg3); color: var(--text2); }
.home-kpi-expand-outcome.connected { background: rgba(34,197,94,0.15); color: var(--green); }
.home-kpi-expand-outcome.no_answer { background: rgba(239,68,68,0.15); color: var(--red); }
.home-kpi-expand-outcome.busy { background: rgba(245,158,11,0.15); color: var(--orange); }
.home-kpi-expand-outcome.left_voicemail { background: rgba(59,130,246,0.15); color: var(--blue); }
.home-kpi-expand-dur { color: var(--text2); font-family: monospace; font-size: 10px; }
.home-kpi-expand-empty { font-size: 11px; color: var(--text2); font-style: italic; padding: 4px 0; }
.home-kpi-card { position: relative; }

/* KPI conditional colors */
.home-kpi-card.kpi-green .home-kpi-value { color: var(--green); }
.home-kpi-card.kpi-green .home-kpi-bar { background: var(--green); }
.home-kpi-card.kpi-orange .home-kpi-value { color: var(--orange); }
.home-kpi-card.kpi-orange .home-kpi-bar { background: var(--orange); }
.home-kpi-card.kpi-red .home-kpi-value { color: var(--red); }
.home-kpi-card.kpi-red .home-kpi-bar { background: var(--red); }
.home-kpi-card.kpi-accent .home-kpi-value { color: var(--accent); }

/* Zone C: Rappels */
.home-rappels {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.home-rappels.has-rappels {
  border-color: var(--orange);
  background: rgba(245, 158, 11, 0.04);
}

.home-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.home-section-icon {
  font-size: 14px;
}

.home-rappels-count {
  background: var(--orange);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
}

.home-rappels-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}

.home-rappel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg3);
  transition: background 0.15s;
  cursor: default;
}

.home-rappel-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.home-rappel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.home-rappel-dot.urgent { background: var(--red); box-shadow: 0 0 4px var(--red); }
.home-rappel-dot.soon { background: var(--orange); box-shadow: 0 0 4px var(--orange); }
.home-rappel-dot.later { background: var(--green); }

.home-rappel-time {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  min-width: 42px;
}

.home-rappel-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-rappel-company {
  font-size: 11px;
  color: var(--text2);
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rappel-btn {
  background: var(--accent);
  border: none;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.home-rappel-btn:hover { background: var(--accent-hover); }

/* Home tabs */
.home-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.home-tab {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  position: relative;
}
.home-tab:hover {
  color: var(--text);
}
.home-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.home-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.home-tab-content {
  display: none;
}
.home-tab-content.active {
  display: block;
}

/* Zone D: Bottom two columns (legacy, kept for reference) */
.home-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.home-recent, .home-lists {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 14px;
}

.home-recent-list, .home-lists-grid {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Recent call items */
.home-call-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  transition: background 0.15s;
  cursor: pointer;
}

.home-call-item:hover { background: var(--bg3); }

.home-call-time {
  font-size: 11px;
  color: var(--text2);
  min-width: 38px;
}

.home-call-outcome {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.home-call-outcome.connected { background: var(--green); }
.home-call-outcome.no_answer { background: var(--red); }
.home-call-outcome.busy { background: var(--orange); }
.home-call-outcome.left_voicemail { background: var(--blue); }
.home-call-outcome.wrong_number { background: var(--red); }

.home-call-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-call-dur {
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* List quick access cards */
.home-list-card {
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-list-card:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

.home-list-info {
  flex: 1;
  min-width: 0;
}

.home-list-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-list-meta {
  font-size: 11px;
  color: var(--text2);
}

.home-list-progress {
  width: 50px;
  height: 3px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.home-list-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

.home-list-btn {
  background: var(--accent);
  border: none;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.home-list-card:hover .home-list-btn { opacity: 1; }
.home-list-btn:hover { background: var(--accent-hover); }

/* Empty state */
.home-empty {
  font-size: 12px;
  color: var(--text2);
  padding: 8px 0;
  text-align: center;
  opacity: 0.6;
}

/* ── Help Center ───────────────────────────── */

.help-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 56px;
  z-index: var(--z-overlay);
  background: var(--bg);
  animation: help-slide-in 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.help-backdrop {
  display: none;
}

.help-panel {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

@keyframes help-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  gap: 16px;
}

.help-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.help-header-left h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.help-version {
  font-size: 11px;
  color: var(--text2);
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.help-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.help-search-wrap {
  flex: 1;
  max-width: 360px;
}

#help-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

#help-search::placeholder { color: var(--text2); }
#help-search:focus { border-color: var(--accent); }

.help-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 22px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.help-close:hover { background: var(--bg3); color: var(--text); }

.help-nav {
  display: flex;
  gap: 4px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}

.help-nav-btn {
  padding: 6px 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.help-nav-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

.help-nav-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.help-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
  align-content: start;
}

.help-no-results {
  text-align: center;
  color: var(--text2);
  font-size: 14px;
  padding: 40px 0;
  font-style: italic;
  grid-column: 1 / -1;
}

.help-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.15s;
  cursor: default;
}

.help-card:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
}

.help-card.help-card-hidden {
  display: none;
}

.help-card-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--bg3);
  border-radius: 10px;
  flex-shrink: 0;
}

.help-card-icon img {
  display: block;
}

.help-card-content {
  flex: 1;
  min-width: 0;
}

.help-card-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.help-card-content p {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 8px;
}

.help-card-content p strong {
  color: var(--text);
  font-weight: 600;
}

.help-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.help-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
}

.help-tag-auto {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--accent);
}

.help-tag-kbd {
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.help-tag-kbd kbd {
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  margin-left: 0;
}

.help-outcome {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 2px;
}
.help-outcome-green { background: rgba(34, 197, 94, 0.15); color: var(--green); }
.help-outcome-orange { background: rgba(245, 158, 11, 0.15); color: var(--orange); }
.help-outcome-red { background: rgba(239, 68, 68, 0.15); color: var(--red); }
.help-outcome-blue { background: rgba(59, 130, 246, 0.15); color: var(--blue); }
.help-outcome-gray { background: rgba(156, 163, 175, 0.15); color: var(--text2); }

.help-rec {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  background: rgba(239, 68, 68, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.help-card-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
}

.help-shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text);
}

.help-shortcut-row span:first-child {
  color: var(--text2);
}

.kbd-hint-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.kbd-hint-link:hover { color: var(--accent-hover); }

/* ── Help card expandable details ──────── */

.help-card-expand {
  margin-top: 8px;
}

.help-expand-btn { display: none; }

.help-card.expanded {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
  grid-column: 1 / -1;
}

.help-card-details {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(46, 49, 64, 0.5);
  flex-direction: column;
  gap: 10px;
  animation: help-details-in 200ms ease;
}
.help-card.expanded .help-card-details {
  display: flex;
}

@keyframes help-details-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.help-detail-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.help-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.help-detail-label.pain { color: var(--red); }
.help-detail-label.impact { color: var(--green); }
.help-detail-label.steps { color: var(--accent); }

.help-detail-text {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

.help-detail-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.help-detail-steps li {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.help-detail-steps li::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

#btn-help {
  font-weight: 700;
  font-size: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
#btn-help:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   SPRINT 3 — All new feature styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Heatmap ──────────────────────────────────────────────────────────── */
.home-perf-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#home-heatmap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.heatmap-grid { margin: 8px 0; }
.heatmap-header { display: flex; gap: 2px; margin-bottom: 2px; }
.heatmap-corner { width: 36px; flex-shrink: 0; }
.heatmap-hour { flex: 1; text-align: center; font-size: 10px; color: var(--text2); padding: 2px 0; }
.heatmap-row { display: flex; gap: 2px; margin-bottom: 2px; }
.heatmap-day { width: 36px; flex-shrink: 0; font-size: 11px; color: var(--text2); display: flex; align-items: center; }
.heatmap-cell { flex: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: default; transition: transform 0.15s, box-shadow 0.15s; position: relative; min-height: 28px; }
.heatmap-cell:hover { transform: scale(1.15); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.heatmap-cell-value { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.8); }
[data-theme="light"] .heatmap-cell-value { color: #1f2937; }
[data-theme="accessible"] .heatmap-cell-value { color: #000; font-weight: 700; }
.heatmap-legend { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 8px; }
.heatmap-legend-label { font-size: 10px; color: var(--text2); }
.heatmap-legend-gradient { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(to right, rgba(239,68,68,0.3), rgba(99,102,241,0.5), rgba(34,197,94,0.8)); }

/* ── Analytics ────────────────────────────────────────────────────────── */
.overlay-fullpage { position: fixed; top: 0; right: 0; bottom: 0; left: 56px; z-index: 8500; background: var(--bg); overflow-y: auto; animation: help-slide-in 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.overlay-fullpage-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg2); position: sticky; top: 0; z-index: 1; }
.overlay-fullpage-header-left { display: flex; align-items: center; gap: 12px; }
.overlay-fullpage-header-left h2 { font-size: 16px; font-weight: 600; color: var(--text); }

/* ── Admin Panel ────────────────────────────────────────────────────────── */

.admin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-section-header h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.admin-section-sub { font-size: 12px; color: var(--text2); }

.admin-btn-primary { background: var(--accent); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.admin-btn-primary:hover { opacity: 0.85; }
.admin-btn-primary:disabled { opacity: 0.5; cursor: default; }
.admin-btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--radius); font-size: 13px; cursor: pointer; }
.admin-btn-secondary:hover { background: var(--bg2); }
.admin-btn-danger { background: none; color: var(--red); border: 1px solid var(--red); padding: 8px 16px; border-radius: var(--radius); font-size: 13px; cursor: pointer; }
.admin-btn-danger:hover { background: var(--red); color: #fff; }

.admin-label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; font-weight: 500; }
.admin-input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; box-sizing: border-box; }
.admin-input:focus { border-color: var(--accent); outline: none; }
.admin-textarea { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.admin-select { padding: 6px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12px; cursor: pointer; }
.admin-field-hint { font-size: 11px; color: var(--text2); margin-top: 2px; display: block; }

.admin-empty { color: var(--text2); font-size: 13px; padding: 20px 0; text-align: center; }
.admin-loading { color: var(--text2); font-size: 13px; padding: 20px 0; text-align: center; }

/* Invite form */
.admin-invite-form { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.admin-invite-form-inner { display: flex; flex-direction: column; gap: 12px; }
.admin-invite-row { display: flex; align-items: flex-end; gap: 12px; }
.admin-invite-actions { display: flex; gap: 8px; align-items: flex-end; }
.admin-status-msg { font-size: 12px; padding: 8px 12px; border-radius: var(--radius); }
.admin-status-msg.status-success { background: rgba(52,211,153,0.1); color: var(--green); }
.admin-status-msg.status-error { background: rgba(239,68,68,0.1); color: var(--red); }

/* Users list */
.admin-users-list { display: flex; flex-direction: column; gap: 2px; }

/* #1 — Users header (stats + filter) */
.admin-users-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-users-stats { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-stats-chip { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.admin-stats-chip.chip-active { background: rgba(52,211,153,0.12); color: var(--green); }
.admin-stats-chip.chip-pending { background: rgba(251,191,36,0.12); color: #f59e0b; }
.admin-stats-chip.chip-deactivated { background: rgba(239,68,68,0.08); color: var(--red); opacity: 0.8; }

/* #8 — Filter input */
.admin-users-filter {
  padding: 6px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 12px;
  width: 200px; outline: none; transition: border-color 0.15s;
}
.admin-users-filter:focus { border-color: var(--accent); }
.admin-users-filter::placeholder { color: var(--text2); opacity: 0.6; }

/* #2 — Status badges (text, not just dots) */
.admin-status-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500;
  white-space: nowrap; display: inline-block;
}
.admin-status-badge.badge-active { background: rgba(52,211,153,0.12); color: var(--green); }
.admin-status-badge.badge-pending { background: rgba(251,191,36,0.12); color: #f59e0b; }
.admin-status-badge.badge-deactivated { background: rgba(239,68,68,0.08); color: var(--red); opacity: 0.8; }

/* #2 — Activity column */
.admin-activity-text { font-size: 11px; color: var(--text2); }

/* #9 — Screen reader only helper */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* #10 — Kebab separator & icons */
.kebab-sep { height: 1px; background: var(--border); margin: 4px 0; }
.kebab-icon { display: inline-block; width: 18px; text-align: center; font-size: 12px; }

/* #4 — Custom confirm modal */
.admin-confirm-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.admin-confirm-overlay.visible { opacity: 1; pointer-events: auto; }
.admin-confirm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.admin-confirm-box { position: relative; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; min-width: 340px; max-width: 420px; box-shadow: var(--shadow-lg); }
.admin-confirm-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.admin-confirm-msg { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 20px; }
.admin-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.admin-confirm-cancel { padding: 8px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; cursor: pointer; }
.admin-confirm-cancel:hover { background: var(--bg); }
.admin-confirm-ok { padding: 8px 16px; background: var(--accent); border: none; border-radius: var(--radius); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
.admin-confirm-ok:hover { opacity: 0.85; }
.admin-confirm-ok.danger { background: var(--red); }
.admin-confirm-ok.danger:hover { opacity: 0.85; }

/* Legacy row layout (kept for compat) */
.admin-user-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg2); border-radius: var(--radius); transition: background 0.15s; }
.admin-user-row:hover { background: var(--bg3); }
.admin-user-row.deactivated { opacity: 0.5; }

/* ── Users Table ───────────────────────────────────────────────────── */
.admin-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.admin-users-table thead th {
  text-align: center;
  padding: 0 8px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.admin-users-table thead th:first-child { text-align: left; padding-left: 10px; }
.admin-users-table tbody tr {
  transition: background 0.12s;
}
.admin-users-table tbody tr:nth-child(odd) {
  background: var(--bg3);
}
.admin-users-table tbody tr:nth-child(even) {
  background: var(--bg2);
}
.admin-users-table tbody tr:hover {
  background: var(--bg3); filter: brightness(0.97);
}
/* Suppress row hover when kebab menu is open */
.admin-users-list.menu-open .admin-users-table tbody tr:hover {
  background: inherit; filter: none;
}
.admin-users-list.menu-open .admin-users-table tbody tr:nth-child(odd):hover { background: var(--bg3); }
.admin-users-list.menu-open .admin-users-table tbody tr:nth-child(even):hover { background: var(--bg2); }
.admin-users-table tbody tr.row-deactivated {
  opacity: 0.45;
}
.admin-users-table td {
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 12px;
  text-align: center;
}
.admin-users-table td:first-child { text-align: left; padding-left: 10px; border-radius: 6px 0 0 6px; }
.admin-users-table td:last-child { border-radius: 0 6px 6px 0; }
.admin-users-table .col-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-users-table { table-layout: fixed; }
.admin-users-table .col-user-h { width: 30%; }
.admin-users-table .col-role { width: 14%; }
.admin-users-table .col-tpl { width: 20%; }
.admin-users-table .col-activity { width: 14%; }
.admin-users-table .col-status { width: 12%; }
.admin-users-table .col-actions { width: 10%; }
.admin-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.admin-user-info { flex: 1; min-width: 0; line-height: 1.3; }
.admin-user-name { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-email { font-size: 10px; color: var(--text2); opacity: 0.7; }
.admin-user-role { flex-shrink: 0; }
.admin-role-select, .admin-tpl-select {
  padding: 4px 8px; border: none; border-radius: 4px;
  background: transparent; color: var(--text2); font-size: 11px;
  cursor: pointer; outline: none;
  max-width: 100%; width: 100%;
  text-align: center; text-align-last: center;
  transition: background 0.15s, color 0.15s;
}
.admin-role-select:hover, .admin-tpl-select:hover,
.admin-role-select:focus, .admin-tpl-select:focus {
  background: var(--bg); color: var(--text);
}
.admin-role-select option, .admin-tpl-select option { background: var(--bg2); color: var(--text); }
.admin-user-status { flex-shrink: 0; }
.admin-badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 500; }
.admin-badge-active { background: rgba(52,211,153,0.12); color: var(--green); }
.admin-badge-pending { background: rgba(251,191,36,0.12); color: #f59e0b; }
.admin-badge-deactivated { background: rgba(239,68,68,0.08); color: var(--red); }
/* Dot indicator as compact status */
.admin-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.admin-status-dot.dot-active { background: var(--green); }
.admin-status-dot.dot-pending { background: #f59e0b; }
.admin-status-dot.dot-deactivated { background: var(--red); opacity: 0.6; }
/* Actions: kebab menu */
.admin-user-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-kebab-btn {
  background: none; border: none; color: var(--text2); cursor: pointer;
  padding: 4px 6px; border-radius: 4px; font-size: 14px; line-height: 1;
  outline: none; -webkit-appearance: none; appearance: none;
  opacity: 0.4; transition: opacity 0.12s, background 0.12s, color 0.12s;
  display: flex; align-items: center; justify-content: center;
}
.admin-users-table tbody tr:hover .admin-kebab-btn { opacity: 0.7; }
.admin-kebab-btn:hover, .admin-kebab-btn:focus-visible { opacity: 1; background: var(--bg3); color: var(--text); }
.admin-kebab-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 9999;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  min-width: 150px; padding: 4px 0;
  display: none; isolation: isolate;
}
.admin-kebab-menu.open { display: block; animation: fadeInMenu 0.1s ease-out; }
@keyframes fadeInMenu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.admin-kebab-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 14px; background: none; border: none;
  color: var(--text); font-size: 12px; cursor: pointer;
  transition: background 0.1s;
}
.admin-kebab-menu button:hover { background: var(--bg3); }
.admin-kebab-menu button.action-delete { color: var(--red); }
.admin-kebab-menu button.action-delete:hover { background: rgba(239,68,68,0.08); }
.admin-kebab-menu button.action-activate { color: var(--green); }
.admin-kebab-menu button.action-activate:hover { background: rgba(52,211,153,0.08); }

/* ── Status filter chips ─────────────────────────────────── */
.admin-status-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-filter-chip {
  padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 500;
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.15s; user-select: none;
}
.admin-filter-chip:hover { border-color: var(--accent); color: var(--text); }
.admin-filter-chip.active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }

/* ── Admin User Drawer ───────────────────────────────────── */
.admin-drawer {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.admin-drawer.open { pointer-events: auto; opacity: 1; }

.admin-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
}

.admin-drawer-panel {
  position: absolute; inset: 0;
  background: var(--bg2);
  display: flex; flex-direction: column;
  transform: translateY(20px); opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.admin-drawer.open .admin-drawer-panel { transform: translateY(0); opacity: 1; }
/* (fullscreen panel — no slide-in needed) */

.admin-drawer-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 40px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; max-width: 880px; margin: 0 auto; width: 100%;
}
.admin-drawer-avatar-wrap {
  position: relative; width: 52px; height: 52px; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; overflow: hidden;
}
.admin-drawer-avatar-wrap:hover .admin-drawer-avatar-overlay { opacity: 1; }
.admin-drawer-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: #fff; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.admin-drawer-avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s; color: #fff;
}
.admin-drawer-title-group { flex: 1; min-width: 0; }
.admin-drawer-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-drawer-subtitle { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-drawer-close {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer;
  border-radius: 6px; transition: all 0.15s; flex-shrink: 0;
}
.admin-drawer-close:hover { background: var(--bg3); color: var(--text); }

.admin-drawer-body {
  flex: 1; overflow-y: auto; padding: 32px 40px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  max-width: 800px; margin: 0 auto; width: 100%;
}

.admin-drawer-section { margin-bottom: 24px; }
.admin-drawer-section:last-child { margin-bottom: 0; }
.admin-drawer-section-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.admin-drawer-section-fields .admin-drawer-field.full-width { grid-column: 1 / -1; }
.admin-drawer-section-title {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.admin-drawer-field { margin-bottom: 14px; }
.admin-drawer-field:last-child { margin-bottom: 0; }

.admin-drawer-danger-zone {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(239,68,68,0.2);
  display: flex; flex-direction: column; gap: 8px;
}

.admin-drawer-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 40px; border-top: 1px solid var(--border);
  flex-shrink: 0; max-width: 880px; margin: 0 auto; width: 100%;
}

/* Signature HTML editor */
.sig-editor-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; background: var(--bg3); border: 1px solid var(--border);
  border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
}
.sig-tb-btn {
  background: none; border: 1px solid transparent; color: var(--text2);
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: all 0.12s;
}
.sig-tb-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--border); }
.sig-tb-hint { font-size: 11px; color: var(--text2); opacity: 0.6; margin-left: auto; }
.sig-editor {
  min-height: 100px; max-height: 220px; overflow-y: auto;
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--text); font-size: 13px; line-height: 1.5;
  outline: none; transition: border-color 0.15s;
}
.sig-editor:focus { border-color: var(--accent); }
.sig-editor:empty::before {
  content: attr(data-placeholder); color: var(--text2); opacity: 0.5; pointer-events: none;
}
.sig-editor a { color: var(--accent); text-decoration: underline; }
.sig-editor img { max-width: 100%; height: auto; border-radius: 4px; }

/* Row clickable cursor */
.admin-users-table tbody tr { cursor: pointer; }
.admin-users-table tbody tr .col-actions { cursor: default; }

/* Integrations grid */
.admin-integrations-grid { display: flex; flex-direction: column; gap: 4px; }
.admin-integ-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.15s; }
.admin-integ-card:hover { background: var(--bg3); }
.admin-integ-card.connected { border-left: 3px solid var(--green); }
.admin-integ-card.disconnected { border-left: 3px solid var(--border); }
.admin-integ-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border-radius: 8px; color: var(--text2); flex-shrink: 0; }
.admin-integ-card.connected .admin-integ-icon { color: var(--accent); }
.admin-integ-info { flex: 1; min-width: 0; }
.admin-integ-name { font-size: 13px; font-weight: 600; color: var(--text); }
.admin-integ-desc { font-size: 11px; color: var(--text2); margin-top: 1px; }
.admin-integ-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); flex-shrink: 0; }
.admin-integ-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-integ-dot.dot-green { background: var(--green); }
.admin-integ-dot.dot-gray { background: var(--text2); opacity: 0.4; }
.admin-integ-config-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 6px 14px; border-radius: var(--radius); font-size: 12px; cursor: pointer; flex-shrink: 0; }
.admin-integ-config-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--accent); }

/* Telephony form grid */
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 600px; }
.admin-field { display: flex; flex-direction: column; }
.admin-field-actions { display: flex; gap: 8px; align-items: center; grid-column: span 2; padding-top: 4px; }
.admin-status-inline { font-size: 12px; font-weight: 500; }

/* Modal */
.admin-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.admin-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.admin-modal-content { position: relative; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; width: 480px; max-width: 90vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.admin-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.admin-modal-header h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); }
.admin-modal-close { background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
.admin-modal-close:hover { color: var(--text); }
.admin-modal-body { padding: 20px; }
.admin-modal-footer { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); }

.analytics-period-selector { display: flex; gap: 4px; margin-left: auto; }
.period-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text2); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.period-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.period-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); }
.analytics-body { padding: 20px; }
.analytics-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.analytics-kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; }
.analytics-kpi-value { font-size: 28px; font-weight: 700; color: var(--text); }
.analytics-kpi-label { font-size: 11px; color: var(--text2); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.analytics-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analytics-chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.analytics-chart-card h3 { font-size: 13px; color: var(--text2); margin: 0 0 12px; font-weight: 500; }
.analytics-chart-card canvas { width: 100%; display: block; }

/* ── Focus Mode ───────────────────────────────────────────────────────── */
.focus-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 16px; padding: 8px 20px; background: rgba(15,17,23,0.95); border-bottom: 2px solid var(--accent); backdrop-filter: blur(12px); }
.focus-timer { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 100px; color: var(--green); }
.focus-stats { display: flex; gap: 16px; }
.focus-stat { font-size: 14px; color: var(--text2); }
.focus-stat strong { font-weight: 700; color: var(--text); font-size: 18px; margin-right: 4px; }
.focus-progress { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.focus-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 1s linear; }
.focus-stop-btn { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: var(--red); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.focus-stop-btn:hover { background: rgba(239,68,68,0.25); }
body.focus-mode {}
body.focus-mode #dashboard-home,
body.focus-mode #preview-briefing { display: none !important; }

.focus-modal-content { max-width: 400px; text-align: center; }
.modal-desc { color: var(--text2); font-size: 13px; margin: 8px 0 16px; }
.focus-duration-options { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.focus-duration-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; transition: all 0.2s; }
.focus-duration-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
.focus-duration-btn:hover:not(.active) { border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: center; }
.modal-overlay { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.modal-content { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); }

.focus-summary-content { max-width: 400px; text-align: center; }
.focus-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.focus-summary-item { background: var(--bg2); border-radius: 8px; padding: 12px 8px; }
.focus-summary-value { font-size: 24px; font-weight: 700; color: var(--accent); }
.focus-summary-label { font-size: 11px; color: var(--text2); margin-top: 4px; }

/* ── Email Follow-up ──────────────────────────────────────────────────── */
.btn-email { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3); color: var(--accent); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 8px; transition: all 0.2s; }
.btn-email:hover { background: rgba(99,102,241,0.2); }
.email-preview-content { max-width: 600px; width: 90vw; }
.email-field { margin-bottom: 12px; }
.email-field label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.setting-textarea { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px 10px; width: 100%; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.setting-textarea:focus { border-color: var(--accent); outline: none; }
.setting-hint-link { font-size: 11px; color: var(--accent); text-decoration: none; }
.setting-hint-link:hover { text-decoration: underline; }

/* Email template cards in settings */
.email-template-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; position: relative; }
.email-template-card .template-delete, .email-template-card .email-tpl-delete { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text2); cursor: pointer; font-size: 14px; }
.email-template-card .template-delete:hover, .email-template-card .email-tpl-delete:hover { color: var(--red); }
.email-template-card input, .email-template-card textarea { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 6px 8px; font-size: 12px; margin-top: 4px; font-family: inherit; box-sizing: border-box; }
.email-template-card input:focus, .email-template-card textarea:focus { border-color: var(--accent); outline: none; }
.email-template-card .template-name { font-weight: 600; font-size: 13px; }

/* ── AI Auto-fill ─────────────────────────────────────────────────────── */
.ai-autofill-loading { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; font-size: 12px; color: var(--accent); animation: aiPulse 1.5s infinite; margin-bottom: 8px; }
@keyframes aiPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.ai-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; padding: 1px 6px; background: rgba(99,102,241,0.15); color: var(--accent); border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.ai-prefilled { border-color: rgba(99,102,241,0.3) !important; }
.ai-autofill-badge { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 600; color: var(--accent); background: rgba(99,102,241,0.12); border-radius: 4px; margin-bottom: 4px; animation: aiPulse 1.5s infinite; }
.ai-autofill-badge.ai-autofill-done { animation: none; background: rgba(34,197,94,0.12); color: var(--green); }
.ai-autofill-badge.ai-autofill-error { animation: none; background: rgba(239,68,68,0.12); color: var(--red); }
.ai-suggested { box-shadow: 0 0 0 2px var(--accent) !important; }

/* ── Quick Disposition ────────────────────────────────────────────────── */
.quick-disposition-flash { animation: quickFlash 0.6s ease; }
@keyframes quickFlash { 0% { background: rgba(99,102,241,0.2); } 100% { background: transparent; } }
.btn-details-link { background: none; border: none; color: var(--text2); font-size: 11px; cursor: pointer; padding: 4px 8px; opacity: 0.6; margin-top: 4px; }
.btn-details-link:hover { opacity: 1; color: var(--accent); }

/* ── Command Palette ──────────────────────────────────────────────────── */
.command-palette { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; }
.command-palette-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.command-palette-panel { position: relative; width: 560px; max-width: 90vw; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); overflow: hidden; }
.command-palette-input-wrap { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.command-palette-icon { font-size: 16px; opacity: 0.5; }
.command-palette-input-wrap input { flex: 1; background: none; border: none; color: var(--text); font-size: 16px; outline: none; }
.command-palette-input-wrap input::placeholder { color: var(--text2); }
.command-palette-kbd { font-size: 10px; padding: 2px 6px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; color: var(--text2); }
.command-palette-results { max-height: 320px; overflow-y: auto; padding: 4px 0; }
.palette-category { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); padding: 8px 16px 4px; font-weight: 600; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; transition: background 0.1s; }
.palette-item:hover, .palette-item.selected { background: rgba(99,102,241,0.1); }
.palette-item.selected { border-left: 2px solid var(--accent); }
.palette-item-icon { font-size: 14px; width: 24px; text-align: center; }
.palette-item-label { font-size: 14px; color: var(--text); flex: 1; }
.palette-item-detail { font-size: 11px; color: var(--text2); }
.palette-empty { padding: 24px; text-align: center; color: var(--text2); font-size: 13px; }
.command-palette-footer { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text2); }
.command-palette-footer kbd { font-size: 10px; padding: 1px 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; margin: 0 2px; }
.command-palette:not(.hidden) .command-palette-panel { animation: paletteSlideIn 0.15s ease; }
@keyframes paletteSlideIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── Sprint 4: Contact Timeline ──────────────────────────────────────── */
/* Inline timeline (outside calls) */
#inline-timeline { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; margin-top: 12px; max-height: 320px; overflow-y: auto; }
.inline-timeline-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; border-bottom: 1px solid var(--border); }
.inline-timeline-header h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.btn-icon-small { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: background 0.15s; }
.btn-icon-small:hover { background: var(--bg2); color: var(--text); }

.timeline-list { padding: 8px 12px; }
.timeline-empty { text-align: center; color: var(--text2); font-size: 13px; padding: 32px 0; }
.timeline-event { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); position: relative; }
.timeline-event:last-child { border-bottom: none; }
.timeline-icon { font-size: 16px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg2); border-radius: 50%; flex-shrink: 0; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-title { font-size: 13px; font-weight: 600; color: var(--text); }
.timeline-desc { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.timeline-meta { font-size: 11px; color: var(--text2); margin-top: 4px; opacity: 0.7; }
.timeline-dot { position: absolute; left: 13px; top: 38px; bottom: -10px; width: 2px; background: var(--border); }
.timeline-event:last-child .timeline-dot { display: none; }
.timeline-loading { text-align: center; padding: 20px; color: var(--text2); font-size: 12px; }

/* ── Sprint 4: Multi-phone selector ─────────────────────────────────── */
.phone-selector { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; padding: 2px 6px; max-width: 160px; cursor: pointer; }
.phone-selector option { background: var(--bg); color: var(--text); }
.phone-selector:focus { border-color: var(--accent); outline: none; }
.phone-type-badge { font-size: 9px; background: var(--accent); color: white; padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-weight: 600; }

/* ── Sprint 4: Callback Scheduling ──────────────────────────────────── */
.followup-time { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; padding: 6px 8px; width: 100px; }
.followup-time:focus { border-color: var(--accent); outline: none; }
.callback-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent); background: rgba(99,102,241,0.1); padding: 2px 8px; border-radius: 4px; margin-left: 8px; }

/* ── Sprint 4: Activity Feed ────────────────────────────────────────── */
.activity-feed-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; background: var(--bg); border-left: 1px solid var(--border); z-index: 800; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.3); animation: feedSlideIn 0.2s ease; }
@keyframes feedSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.activity-feed-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); }
.activity-feed-header h3 { font-size: 15px; color: var(--text); margin: 0; }
.activity-feed-close { background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.activity-feed-close:hover { color: var(--text); }
.activity-feed-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.activity-feed-empty { text-align: center; color: var(--text2); font-size: 13px; padding: 32px 16px; }
.activity-feed-item { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; }
.activity-feed-item:hover { background: rgba(255,255,255,0.02); }
.activity-feed-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; flex-shrink: 0; font-weight: 600; }
.activity-feed-body { flex: 1; min-width: 0; }
.activity-feed-text { font-size: 13px; color: var(--text); }
.activity-feed-text strong { color: var(--accent); }
.activity-feed-time { font-size: 11px; color: var(--text2); margin-top: 2px; }
.activity-feed-outcome { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; margin-left: 4px; }
.activity-feed-outcome.connected { background: rgba(34,197,94,0.15); color: var(--green); }
.activity-feed-outcome.no_answer { background: rgba(239,68,68,0.15); color: var(--red); }
.activity-feed-outcome.busy { background: rgba(251,146,60,0.15); color: #fb923c; }
.activity-feed-outcome.left_voicemail { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* ── Sprint 4: Daily Report ─────────────────────────────────────────── */
.daily-report-content { max-width: 520px; }
.daily-report-body { background: var(--bg2); border-radius: 8px; padding: 16px; font-size: 13px; color: var(--text); line-height: 1.6; max-height: 400px; overflow-y: auto; }
.daily-report-body .report-header { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.daily-report-body .report-kpi { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.daily-report-body .report-kpi-item { background: var(--bg); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); text-align: center; min-width: 80px; }
.daily-report-body .report-kpi-value { font-size: 20px; font-weight: 700; color: var(--accent); }
.daily-report-body .report-kpi-label { font-size: 11px; color: var(--text2); }
.daily-report-body .report-section { margin-top: 12px; }
.daily-report-body .report-section h4 { font-size: 12px; text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }

/* ── Sprint 4: Export CSV button in analytics ────────────────────────── */
.analytics-period-selector .btn-small { margin-left: 8px; font-size: 12px; }

/* ── Post-call contextual visibility ─────── */

#post-call-steps {
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
}
#post-call-steps.post-call-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}
#post-call-steps.post-call-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 2000px;
  overflow: visible;
}

/* ── Pains & Solutions card ───────────────── */
.pains-solutions-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 10px 0;
}
.pains-solutions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pains-solutions-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  font-weight: 600;
}
.pains-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.pains-col-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  font-weight: 600;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--border);
}
.pains-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pains-row:last-child {
  border-bottom: none;
}
.pains-cell {
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.4;
}
.pains-cell-pain {
  font-weight: 500;
}
.pains-cell-impact {
  color: var(--text2);
}
.pains-cell-solution {
  color: var(--green);
}
.pains-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
}
.pains-skeleton-line {
  height: 12px;
  background: var(--bg3);
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ── Gmail OAuth2 ────────────────────────── */

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Google Sans', -apple-system, sans-serif;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-google:hover {
  background: #f7f8f8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}

.gmail-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  color: #22c55e;
  font-size: 13px;
  font-weight: 500;
}
.gmail-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

/* ── Pre-call context cards ──────────────── */

.pre-call-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  align-items: center;
}
.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
}
.ctx-chip:empty { display: none; }
.ctx-chip.ctx-deal { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.ctx-chip.ctx-hot { color: #f97316; border-color: color-mix(in srgb, #f97316 40%, transparent); background: rgba(249,115,22,.08); }
.ctx-chip.ctx-warm { color: #eab308; border-color: color-mix(in srgb, #eab308 40%, transparent); }
.ctx-chip.ctx-cold { color: var(--text3); }
.ctx-chip.ctx-last { color: var(--text2); }
.pre-call-deal-name {
  font-weight: 600;
  margin-bottom: 4px;
}
.pre-call-deal-amount {
  color: var(--green);
  font-weight: 600;
}
.pre-call-deal-stage {
  color: var(--text2);
  font-size: 12px;
}
.pre-call-last-call {
  margin-bottom: 6px;
}
.pre-call-last-call-date {
  font-weight: 600;
}
.pre-call-last-call-outcome {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg3);
}
.pre-call-last-note {
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pre-call-empty {
  color: var(--text2);
  font-size: 12px;
  font-style: italic;
}

/* ── Settings Search ────────────────────── */
.settings-search-wrap { padding: 0 8px 8px; }
.settings-search-input {
  width: 100%; padding: 7px 10px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 12px; outline: none;
}
.settings-search-input:focus { border-color: var(--accent); }
.settings-nav-item.search-hidden { display: none; }

/* ── Personas ───────────────────────────── */
.persona-block {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; border-left: 3px solid var(--border);
  transition: opacity 0.2s, border-color 0.2s;
}
.persona-block.persona-decideur { border-left-color: var(--accent); }
.persona-block.persona-champion { border-left-color: #f59e0b; }
.persona-block.persona-utilisateur { border-left-color: #10b981; }
.persona-block.persona-disabled {
  opacity: 0.45;
}
.persona-block.persona-disabled .persona-fields { display: none; }

/* ── Accordion sections ────────────── */
.accordion-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--card);
}
.accordion-header {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 16px;
  background: transparent; border: none;
  color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: background .15s;
}
.accordion-header:hover { background: var(--hover); }
.accordion-icon {
  font-size: 10px; transition: transform .2s;
  color: var(--text2);
}
.accordion-section.open .accordion-icon { transform: rotate(90deg); }
.accordion-badge {
  margin-left: auto; font-size: 11px; font-weight: 500;
  color: var(--text2); background: var(--bg); padding: 2px 8px;
  border-radius: 10px;
}
.accordion-badge.complete { color: #10b981; }
.accordion-body {
  padding: 0 16px 16px;
}
.accordion-body.hidden {
  display: none;
}

/* ── Reference / Use Case Cards ───── */
.ref-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; margin-top: 8px;
  position: relative; transition: border-color .15s;
}
.ref-card:hover { border-color: var(--accent); }
.ref-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.ref-card-client {
  font-weight: 600; font-size: 13px; color: var(--text);
}
.ref-card-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: rgba(99,102,241,.15); color: var(--accent);
}
.ref-card-size {
  font-size: 11px; color: var(--text2);
}
.ref-card-body {
  font-size: 12px; color: var(--text2); line-height: 1.5;
}
.ref-card-body strong { color: var(--text); font-weight: 500; }
.ref-card-drop {
  margin-bottom: 8px; padding: 8px 10px;
  background: rgba(99,102,241,.08); border-radius: 6px;
  font-size: 12.5px; font-style: italic; color: var(--text);
  border-left: 3px solid var(--accent); line-height: 1.4;
}
.ref-card-chips {
  display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.ref-card-chip {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(16,185,129,.15); color: #10b981;
}
.ref-card-actions {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 4px; opacity: 0; transition: opacity .15s;
}
.ref-card:hover .ref-card-actions { opacity: 1; }
.ref-card-actions button {
  background: var(--hover); border: none; border-radius: 4px;
  width: 24px; height: 24px; cursor: pointer; font-size: 12px;
  color: var(--text2); display: flex; align-items: center; justify-content: center;
}
.ref-card-actions button:hover { background: var(--border); color: var(--text); }
.ref-card-actions .ref-delete:hover, .ref-card-actions .offer-delete:hover { color: #ef4444; }

.btn-add-ref {
  background: var(--accent); color: #fff; border: none;
  border-radius: 6px; padding: 3px 10px; font-size: 11px;
  font-weight: 600; cursor: pointer;
}
.btn-add-ref:hover { opacity: .85; }
.btn-reset-refs {
  background: transparent; color: #ef4444; border: 1px solid #ef4444;
  border-radius: 6px; padding: 3px 10px; font-size: 11px;
  font-weight: 600; cursor: pointer; margin-left: auto;
}
.btn-reset-refs:hover { background: rgba(239,68,68,.1); }
.confirm-input-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6); display: flex; align-items: center;
  justify-content: center; z-index: 9999;
}
.confirm-input-modal.hidden { display: none; }
.confirm-input-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px; width: 380px; text-align: center;
}
.confirm-input-box h4 { margin: 0 0 8px; color: #ef4444; font-size: 15px; }
.confirm-input-box p { margin: 0 0 14px; font-size: 13px; color: var(--text2); }
.confirm-input-box input {
  width: 100%; padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 13px; text-align: center;
  margin-bottom: 12px;
}
.confirm-input-box .btn-row { display: flex; gap: 8px; justify-content: center; }
.confirm-input-box .btn-danger {
  background: #ef4444; color: #fff; border: none; border-radius: 6px;
  padding: 6px 16px; font-weight: 600; cursor: pointer; opacity: .4;
  pointer-events: none;
}
.confirm-input-box .btn-danger.active { opacity: 1; pointer-events: auto; }

.ref-add-form {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; margin-top: 8px;
}
.ref-add-form.hidden { display: none; }
.ref-add-form .setting-text,
.ref-add-form .setting-select,
.ref-add-form .setting-textarea {
  width: 100%; box-sizing: border-box;
}
.ref-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.refs-show-more { text-align: center; margin-top: 8px; }
.refs-show-more.hidden { display: none; }
.accordion-body .settings-card {
  border: none; padding: 0; background: transparent;
}

/* Card slide-out animation */
.ref-card { transition: transform .25s ease, opacity .25s ease, max-height .3s ease; max-height: 500px; }
.ref-card.slide-out { transform: translateX(40px); opacity: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; }

/* Inline confirm pattern */
.inline-confirm-wrap { display: inline-flex; gap: 6px; align-items: center; }
.inline-confirm-wrap .btn-confirm-yes {
  background: #ef4444; color: #fff; border: none; border-radius: 6px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
  animation: pulse-red .8s infinite alternate;
}
.inline-confirm-wrap .btn-confirm-no {
  background: var(--hover); color: var(--text2); border: none; border-radius: 6px;
  padding: 3px 10px; font-size: 11px; cursor: pointer;
}
@keyframes pulse-red { from { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } to { box-shadow: 0 0 0 4px rgba(239,68,68,0); } }

/* Undo toast */
.undo-toast {
  position: fixed; bottom: 24px; left: 24px; z-index: 10000;
  background: #1e1e2e; color: #fff; border-radius: 10px; padding: 10px 16px;
  font-size: 13px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); transform: translateY(20px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.undo-toast.visible { transform: translateY(0); opacity: 1; }
.undo-toast .undo-btn {
  background: none; border: none; color: var(--accent); font-weight: 600;
  cursor: pointer; text-decoration: underline; font-size: 13px;
}
.undo-toast .undo-timer {
  width: 100%; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px;
  position: absolute; bottom: 0; left: 0; overflow: hidden;
}
.undo-toast .undo-timer-bar {
  height: 100%; background: var(--accent); transition: width linear;
}

.btn-generate-personas {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff; border: none; border-radius: 6px;
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s;
}
.btn-generate-personas:hover { opacity: .85; }
.btn-generate-personas:disabled { opacity: .5; cursor: wait; }
.btn-generate-personas.loading::after {
  content: ''; display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite; margin-left: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.persona-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.persona-badge {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  color: white; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.persona-decideur .persona-badge { background: var(--accent); }
.persona-champion .persona-badge { background: #f59e0b; }
.persona-utilisateur .persona-badge { background: #10b981; }

.persona-label { font-weight: 600; font-size: 13px; color: var(--text); }
.persona-hint { font-size: 11px; color: var(--text2); }
.persona-required {
  font-size: 10px; color: var(--accent); font-weight: 600;
  margin-left: auto; text-transform: uppercase; letter-spacing: 0.5px;
}
.persona-fields { display: flex; flex-direction: column; gap: 6px; }
.persona-fields .setting-text,
.persona-fields .setting-textarea {
  padding: 6px 10px; font-size: 12px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); width: 100%; box-sizing: border-box;
  font-family: inherit; resize: vertical;
}
.persona-fields .setting-text:focus,
.persona-fields .setting-textarea:focus { border-color: var(--accent); outline: none; }

/* Persona toggle (mini switch) */
.persona-toggle {
  margin-left: auto; position: relative; display: inline-block;
  width: 34px; height: 18px; cursor: pointer;
}
.persona-toggle input { opacity: 0; width: 0; height: 0; }
.persona-toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg3); border-radius: 9px; transition: 0.2s;
}
.persona-toggle-slider::before {
  content: ''; position: absolute; width: 14px; height: 14px;
  left: 2px; bottom: 2px; background: white; border-radius: 50%; transition: 0.2s;
}
.persona-toggle input:checked + .persona-toggle-slider { background: var(--accent); }
.persona-toggle input:checked + .persona-toggle-slider::before { transform: translateX(16px); }

/* Preset bar */
.persona-preset-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}

/* Save status indicator */
.persona-save-status {
  font-size: 11px; color: var(--green); font-weight: 500;
  opacity: 0; transition: opacity 0.3s;
}
.persona-save-status.visible { opacity: 1; }

/* ── ICP Tabs (settings) ─────────────────── */
.icp-tabs-bar {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--border); padding-bottom: 0; margin-bottom: 0;
  position: relative;
}
.icp-tabs {
  display: flex; gap: 2px; flex: 1; flex-wrap: wrap;
}
.icp-tab {
  padding: 8px 14px; font-size: 12px; font-weight: 500;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text2); cursor: pointer; white-space: nowrap;
  transition: all 0.15s; position: relative;
  display: inline-flex; align-items: center; gap: 4px;
}
.icp-tab:hover { color: var(--text); background: var(--bg2); border-radius: 6px 6px 0 0; }
.icp-tab.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}
.icp-tab .icp-tab-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  display: inline-block; margin-right: 6px;
}
.icp-tab .icp-tab-menu {
  font-size: 14px; margin-left: 6px; opacity: 0; transition: opacity 0.15s; cursor: pointer;
}
.icp-tab:hover .icp-tab-menu { opacity: 0.6; }
.icp-tab .icp-tab-menu:hover { opacity: 1; }
.icp-add-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px dashed var(--border);
  background: none; color: var(--text2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.15s;
}
.icp-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,0.08); }

/* ICP Profile grid */
.icp-profile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.icp-profile-field label {
  display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px;
}
.icp-profile-field .setting-select {
  width: 100%; font-size: 12px; padding: 6px 8px;
}

/* ICP Tab context menu */
.icp-tab-context {
  position: fixed; z-index: 10000;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 140px; padding: 4px;
}
.icp-tab-context button {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  font-size: 12px; background: none; border: none; color: var(--text);
  cursor: pointer; border-radius: 4px;
}
.icp-tab-context button:hover { background: var(--bg3); }
.icp-tab-context button.danger { color: var(--red, #ef4444); }

/* ICP inline rename */
.icp-rename-input {
  background: var(--bg); border: 1px solid var(--accent); border-radius: 4px;
  color: var(--text); font-size: 12px; font-weight: 600; padding: 2px 6px;
  width: 120px; outline: none;
}

/* ICP create popover */
.icp-create-popover {
  position: absolute; top: 100%; left: 0; z-index: 150;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); padding: 14px 16px;
  min-width: 260px; margin-top: 6px;
}
.icp-pop-title {
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.icp-pop-input {
  width: 100%; padding: 7px 10px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 12px; outline: none; box-sizing: border-box; margin-bottom: 8px;
}
.icp-pop-input:focus { border-color: var(--accent); }
.icp-pop-select {
  width: 100%; padding: 7px 10px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 12px; outline: none; box-sizing: border-box; margin-bottom: 12px;
}
.icp-pop-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}
.icp-pop-cancel {
  padding: 5px 12px; font-size: 12px; background: none; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text2); cursor: pointer;
}
.icp-pop-cancel:hover { background: var(--bg3); }
.icp-pop-create {
  padding: 5px 14px; font-size: 12px;
}

/* ICP Tags (vocabulary, tone, references) */
.icp-tags-wrap {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 4px 6px; min-height: 32px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  cursor: text;
}
.icp-tags-wrap:focus-within { border-color: var(--accent); }
.icp-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(99,102,241,0.12); color: var(--accent);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.icp-tag::before { content: '#'; opacity: 0.6; }
.icp-tag-remove {
  cursor: pointer; opacity: 0.5; font-size: 13px; margin-left: 2px; line-height: 1;
}
.icp-tag-remove:hover { opacity: 1; }
.icp-tag-input {
  border: none; background: none; outline: none; color: var(--text);
  font-size: 12px; min-width: 80px; flex: 1; padding: 2px 0;
}
.icp-tag-input::placeholder { color: var(--text2); opacity: 0.6; }

/* ── ICP Topbar Selector ─────────────────── */
.icp-selector-wrap {
  position: relative; margin-left: 12px;
}
.icp-selector-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.icp-selector-btn:hover { border-color: var(--accent); }
.icp-selector-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.icp-selector-arrow { font-size: 10px; color: var(--text2); }
.icp-selector-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); min-width: 180px; padding: 4px;
}
.icp-selector-dropdown .icp-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; font-size: 12px; cursor: pointer;
  border-radius: 4px; transition: background 0.1s;
}
.icp-selector-dropdown .icp-dd-item:hover { background: var(--bg3); }
.icp-selector-dropdown .icp-dd-item.active { color: var(--accent); font-weight: 600; }
.icp-selector-dropdown .icp-dd-item .icp-dd-check {
  width: 14px; text-align: center; font-size: 12px;
}
.icp-selector-dropdown .icp-dd-divider {
  height: 1px; background: var(--border); margin: 4px 0;
}
.icp-selector-dropdown .icp-dd-manage {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  font-size: 11px; color: var(--text2); background: none; border: none;
  cursor: pointer; border-radius: 4px;
}
.icp-selector-dropdown .icp-dd-manage:hover { background: var(--bg3); color: var(--text); }

/* ── Utility ─────────────────────────────── */

/* Card completeness bar */
.card-completeness {
  height: 3px; background: var(--bg); border-radius: 3px 3px 0 0; overflow: hidden;
  margin: -10px -12px 8px -12px;
}
.card-completeness-bar {
  height: 100%; border-radius: 3px; transition: width 0.3s ease;
}

/* Battle Cards / Competitors */
.competitor-row {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; margin-bottom: 6px;
}
.competitor-row-header {
  display: flex; gap: 6px; align-items: center;
}
.competitor-row-header .comp-name { flex: 1; font-weight: 600; }
.competitor-row-header .comp-tier { flex: none; }
.competitor-row input, .competitor-row select { font-size: 11px; padding: 4px 6px; width: 100%; box-sizing: border-box; }
.comp-punchline { border-left: 3px solid var(--accent) !important; }
.comp-pivot { border-left: 3px solid var(--info) !important; }
.offer-battlecards {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
}
.battlecard-label { font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
.battlecard-chip {
  font-size: 11px; color: var(--text2); padding: 2px 0;
}
.battlecard-chip strong { color: var(--text); }
.battlecard-chip em { color: var(--accent); font-style: normal; }

/* Sidebar Battle Cards */
.sidebar-battlecards-list { padding: 8px; overflow-y: auto; }
.sbc-offer-group { margin-bottom: 10px; }
.sbc-offer-title { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sbc-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.4;
  transition: border-color .2s;
}
.sbc-card.sbc-detected {
  border-color: var(--accent); background: rgba(99,102,241,.08);
  animation: sbc-pulse .6s ease-out;
}
@keyframes sbc-pulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,.4); } 100% { box-shadow: 0 0 0 8px transparent; } }
.sbc-header { font-weight: 600; margin-bottom: 4px; }
.sbc-badge { background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.sbc-punchline { color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.sbc-objection { background: var(--card); padding: 5px 7px; border-radius: 4px; margin-bottom: 4px; font-size: 11px; }
.sbc-if { color: var(--muted); font-weight: 600; }
.sbc-then { color: var(--success); font-weight: 600; }
.sbc-pivot { color: var(--info); font-size: 11px; margin-bottom: 3px; }
.sbc-proof { color: var(--text2); font-size: 11px; font-style: italic; }

/* Persona objection group */
.persona-objection-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.persona-hook {
  border-left: 3px solid var(--accent) !important; padding-left: 10px !important;
}

/* ── Smart Generate blocks ───────────────── */
.smart-generate-block {
  margin-top: 4px;
}
.btn-smart-generate {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 10px 16px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
  border: 1px solid rgba(99,102,241,0.25);
  color: var(--text); cursor: pointer; transition: all 0.15s;
  text-align: left;
}
.btn-smart-generate:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));
  border-color: rgba(99,102,241,0.4);
}
.btn-smart-generate:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.btn-smart-generate.loading {
  opacity: 0.7; pointer-events: none;
}
.smart-gen-label {
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.smart-gen-sources {
  font-size: 11px; color: var(--text2); opacity: 0.7;
}
.smart-gen-status {
  display: block; font-size: 12px; margin-top: 6px; min-height: 16px;
}
.smart-gen-extra {
  margin-top: 6px;
}
.smart-gen-toggle {
  font-size: 11px; color: var(--text2); opacity: 0.5; cursor: pointer;
  text-decoration: none; transition: opacity 0.15s; user-select: none;
}
.smart-gen-toggle:hover { opacity: 0.8; }
.smart-gen-toggle.open { }
.smart-gen-textarea {
  margin-top: 6px; font-size: 12px;
}

.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* ── Call Detail Inline (in contact zone) ── */
.call-detail-inline {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: cdiIn .2s ease;
}
@keyframes cdiIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.cdi-loading { font-size: 11px; color: var(--text3); }
.cdi-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.cdi-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--accent);
}
.cdi-close {
  background: none; border: none; color: var(--text3);
  font-size: 18px; cursor: pointer; line-height: 1;
  padding: 0 2px;
}
.cdi-close:hover { color: var(--text1); }
.cdi-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--text3); margin-bottom: 10px;
}

/* Sections */
.cdi-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.cdi-section:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.cdi-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text3); margin-bottom: 4px;
}
.cdi-text { font-size: 12px; color: var(--text1); line-height: 1.5; }
.cdi-empty { font-size: 11px; color: var(--text3); text-align: center; padding: 12px 0; }

/* Score */
.cdi-score {
  display: inline-flex; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 8px;
}
.cdi-score.good { color: #4ade80; background: rgba(74,222,128,.12); }
.cdi-score.ok { color: #facc15; background: rgba(250,204,21,.12); }
.cdi-score.low { color: #f87171; background: rgba(248,113,113,.12); }

/* BANT */
.cdi-bant { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cdi-bant-item {
  display: flex; gap: 6px; align-items: baseline;
  padding: 4px 8px; background: var(--bg3);
  border-radius: 5px; border: 1px solid var(--border);
}
.cdi-bant-k {
  font-size: 10px; font-weight: 700; color: var(--accent);
  min-width: 12px;
}
.cdi-bant-v { font-size: 11px; color: var(--text1); }

/* Objections */
.cdi-obj-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cdi-obj-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
  background: rgba(239,68,68,.08); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.15);
}

/* Next action */
.cdi-next {
  padding: 6px 10px; background: rgba(59,130,246,.08);
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
  font-size: 12px; color: var(--text1);
}

/* Notes */
.cdi-notes {
  font-size: 12px; color: var(--text2); line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}

/* Coaching */
.cdi-coaching { display: flex; gap: 5px; align-items: baseline; padding: 3px 0; }
.cdi-coaching-type {
  font-size: 8px; font-weight: 700; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
.cdi-coaching-type.suggestion { color: #60a5fa; background: rgba(96,165,250,.12); }
.cdi-coaching-type.objection { color: #f97316; background: rgba(249,115,22,.12); }
.cdi-coaching-type.alert { color: #f87171; background: rgba(248,113,113,.12); }
.cdi-coaching-txt { font-size: 11px; color: var(--text2); }

/* Talk ratio */
.cdi-ratio { display: flex; align-items: center; gap: 8px; }
.cdi-ratio-bar { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.cdi-ratio-fill { height: 100%; border-radius: 3px; }
.cdi-ratio-pct { font-size: 11px; color: var(--text2); }

/* Transcript */
.cdi-transcript-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border);
  color: var(--text2); font-size: 11px;
  padding: 5px 10px; border-radius: 6px;
  cursor: pointer; width: 100%; text-align: left;
}
.cdi-transcript-toggle:hover { background: var(--bg3); }
.cdi-transcript {
  display: none; margin-top: 6px; padding: 8px;
  background: var(--bg3); border-radius: 6px;
  font-size: 11px; line-height: 1.5; color: var(--text2);
  white-space: pre-wrap; max-height: 300px; overflow-y: auto;
}
.cdi-transcript.open { display: block; }

/* ===== Block Layout Engine ===== */

/* Layout blocks use CSS order for reordering */
[data-layout-zone="contact"],
[data-layout-zone="dashboard"] .home-perf-content,
[data-layout-zone="analytics"] .analytics-charts {
  display: flex;
  flex-direction: column;
}

.layout-block {
  transition: order 0.2s ease, opacity 0.2s ease;
}

.block-hidden {
  display: none !important;
}

/* Edit mode button */
.btn-edit-layout {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: auto;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.btn-edit-layout:hover {
  opacity: 1;
  background: var(--bg3);
}

/* ── In-Page Builder (Lightning-style) ──────────────────────────────── */

/* Builder toolbar */
.builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 10px;
  margin-bottom: 10px;
  gap: 12px;
  box-shadow: var(--shadow-glow, 0 0 20px rgba(124,127,255,0.15));
}
.builder-toolbar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.builder-toolbar-center {
  display: flex;
  gap: 6px;
}
.builder-toolbar-center .layout-template-thumb {
  width: 40px;
  height: 26px;
  padding: 3px;
}
.builder-done-btn {
  padding: 5px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.builder-done-btn:hover { background: var(--accent-hover); }

/* Builder component shelf */
.builder-shelf {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.builder-shelf-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.builder-shelf-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin: 0 4px 4px 0;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text2);
  font-size: 11px;
  cursor: grab;
  transition: all 0.15s;
}
.builder-shelf-item:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle, rgba(124,127,255,0.06));
}
.builder-shelf-item.vb-dragging { opacity: 0.3; }
.builder-shelf-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Edit mode: zone with dashed borders + accent outline */
.layout-editing {
  position: relative;
}
.layout-editing .layout-block {
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  position: relative;
  transition: border-color 0.15s;
}
.layout-editing .layout-block:hover {
  border-color: var(--accent);
}

.layout-editing .block-dimmed {
  opacity: 0.3;
}

/* Column highlights in edit mode */
.builder-col-highlight {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 4px;
  min-height: 80px;
  transition: border-color 0.15s, background 0.15s;
}
.builder-col-highlight.column-drag-over {
  border-color: var(--accent);
  background: var(--accent-subtle, rgba(124,127,255,0.06));
}

/* Block edit bar (overlay on each block) */
.block-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--accent);
  border-radius: 6px 6px 0 0;
  font-size: 11px;
  color: #fff;
}
.block-handle {
  cursor: grab;
  font-size: 14px;
  user-select: none;
  opacity: 0.7;
  line-height: 1;
}
.block-handle:hover { opacity: 1; }
.block-handle:active { cursor: grabbing; }
.block-label { flex: 1; font-weight: 600; }
.block-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  padding: 0 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.block-remove-btn:hover { color: #fff; }

/* Block config button (pencil) — legacy */
.block-config-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding: 0 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.block-config-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}

/* Block fields badge — visible indicator for configurable blocks */
.block-fields-badge {
  background: rgba(99,102,241,0.25);
  border: 1px solid rgba(99,102,241,0.5);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #a5b4fc;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  animation: badgePulse 2s ease-in-out 1;
}
.block-fields-badge:hover {
  color: #fff;
  background: rgba(99,102,241,0.45);
  transform: scale(1.05);
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  50% { box-shadow: 0 0 0 4px rgba(99,102,241,0.3); }
}

/* Block field popover */
.block-field-popover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  margin-top: 4px;
  animation: popoverSlideIn 0.2s ease-out;
}
@keyframes popoverSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.block-field-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.block-field-popover-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.block-field-popover-count {
  font-size: 11px;
  color: var(--text2);
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: 4px;
}
.block-field-popover-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.block-field-popover-close:hover { color: var(--text); }
.block-field-popover-body {
  padding: 10px 12px;
}
.block-field-popover-body .views-field-active {
  margin-bottom: 8px;
}
.block-field-popover-body .views-field-chip {
  font-size: 11px;
}

/* Settings card hint */
.settings-card-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text2);
  opacity: 0.7;
  line-height: 1.4;
}

/* Drag states */
.block-dragging {
  opacity: 0.4;
  border-color: var(--accent) !important;
}
.block-drag-over {
  border-color: var(--accent) !important;
  background: rgba(99, 102, 241, 0.06);
}

/* ===== Settings: Views panel ===== */

.views-preset-selector {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}
.views-preset-btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.views-preset-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.views-preset-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.views-block-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.views-block-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg3);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: default;
  transition: border-color 0.15s;
}
.views-block-item:hover {
  border-color: var(--border);
}
.views-block-item.block-dragging {
  opacity: 0.4;
}
.views-block-item.block-drag-over {
  border-color: var(--accent);
}
.views-block-handle {
  cursor: grab;
  font-size: 14px;
  opacity: 0.4;
  user-select: none;
}
.views-block-handle:hover { opacity: 0.8; }
.views-block-handle:active { cursor: grabbing; }
.views-block-order {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  background: var(--bg2);
  border-radius: 4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.views-block-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
}
.views-block-remove {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.views-block-item:hover .views-block-remove { opacity: 1; }
.views-block-remove:hover { color: var(--red); }

/* Available (hidden) blocks — add buttons */
.views-block-available {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.views-block-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.views-block-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}
.views-block-add-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Drop indicator line */
.views-drop-indicator {
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  margin: 2px 0;
}

.toggle-switch-sm {
  transform: scale(0.75);
  transform-origin: right center;
}

/* Field chips (draggable horizontal) */
.views-fields-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.views-field-active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.views-field-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: default;
  transition: border-color 0.15s, opacity 0.15s;
}
.views-field-chip[draggable="true"] { cursor: grab; }
.views-field-chip[draggable="true"]:active { cursor: grabbing; }
.views-field-chip.locked {
  opacity: 0.6;
  border-style: dashed;
}
.views-field-chip.block-dragging { opacity: 0.35; }
.views-field-drop-target {
  border-color: var(--accent) !important;
  background: rgba(99, 102, 241, 0.1);
}
.views-field-grip {
  font-size: 10px;
  opacity: 0.4;
  user-select: none;
}
.views-field-remove {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
}
.views-field-chip:hover .views-field-remove { opacity: 1; }
.views-field-remove:hover { color: var(--red); }

.views-field-active {
  min-height: 32px;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s;
}
.views-field-active.views-field-drop-target {
  background: rgba(99, 102, 241, 0.06);
}
.views-field-available {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.views-field-chip.available {
  border-style: dashed;
  opacity: 0.5;
  cursor: grab;
}
.views-field-chip.available:hover {
  opacity: 0.8;
  border-color: var(--accent);
}
.views-field-chip.available:active { cursor: grabbing; }

/* ============================================================
   Section-Based Layout Engine
   ============================================================ */

/* Section wrapper */
.layout-section {
  margin-bottom: 4px;
}

/* Collapse bar (clickable) */
.section-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  user-select: none;
}
.section-collapse-bar:hover {
  background: var(--bg2);
}
.section-collapse-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.section-collapse-chevron {
  font-size: 10px;
  color: var(--text2);
}

/* Section grid (per-section column template) */
.section-grid {
  display: grid;
  gap: 14px;
  width: 100%;
}
.section-grid[data-template="single"]  { grid-template-columns: 1fr; }
.section-grid[data-template="50-50"]   { grid-template-columns: 1fr 1fr; }
.section-grid[data-template="33-67"]   { grid-template-columns: 1fr 2fr; }
.section-grid[data-template="67-33"]   { grid-template-columns: 2fr 1fr; }
.section-grid[data-template="60-40"]   { grid-template-columns: 3fr 2fr; }

.section-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 40px;
}

@media (max-width: 768px) {
  .section-grid[data-template] { grid-template-columns: 1fr !important; }
}

/* Column drop zone (edit mode) */
.section-column.column-drag-over,
.section-column.builder-col-highlight.column-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
  background: rgba(124, 127, 255, 0.05);
}

/* Section edit bar */
.section-edit-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg2);
  border: 1px dashed var(--accent);
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
}
.section-edit-bar.section-locked {
  border-color: var(--border);
  border-style: solid;
}
.section-drag-handle {
  cursor: grab;
  font-size: 16px;
  color: var(--text2);
  user-select: none;
}
.section-drag-handle:active { cursor: grabbing; }
.section-lock-icon {
  font-size: 12px;
  opacity: 0.5;
}
.section-edit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* Template thumbs (inline in section edit bar) */
.section-template-thumbs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.section-tpl-thumb {
  width: 32px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  padding: 2px;
  background: var(--bg);
  transition: border-color 0.15s;
  align-items: stretch;
}
.section-tpl-thumb:hover { border-color: var(--text2); }
.section-tpl-thumb.active { border-color: var(--accent); background: rgba(124, 127, 255, 0.1); }
.section-tpl-thumb .tpl-col {
  background: var(--border);
  border-radius: 1px;
  flex: 1;
}
.section-tpl-thumb.active .tpl-col { background: var(--accent); }

.section-remove-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.section-remove-btn:hover { opacity: 1; }

/* Section dragging */
.section-dragging { opacity: 0.4; }
.section-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Add section button */
.section-add-btn {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.section-add-trigger {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text2);
  font-size: 11px;
  padding: 4px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.section-add-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* VB Section cards (in settings panel) */
.vb-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.vb-section-locked {
  border-left: 3px solid var(--text2);
}
.vb-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.vb-lock { font-size: 10px; opacity: 0.5; }
.vb-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.vb-section-tpl {
  font-size: 10px;
  color: var(--text2);
  margin-left: auto;
}
.vb-section-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vb-block-pill {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text2);
}
.vb-empty-hint {
  font-size: 10px;
  color: var(--text2);
  opacity: 0.5;
  font-style: italic;
}

/* Hint for template selector replacement */
.tpl-section-hint {
  font-size: 11px;
  color: var(--text2);
  font-style: italic;
}

/* Builder toolbar buttons — Undo, Reset */
.builder-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.builder-undo-btn, .builder-reset-btn {
  padding: 5px 12px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.builder-undo-btn:hover { color: var(--accent); border-color: var(--accent); }
.builder-reset-btn:hover { color: var(--red); border-color: var(--red); }
.builder-reset-btn.confirm { background: var(--red); color: #fff; border-color: var(--red); }

/* Section empty placeholder */
.section-empty-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  color: var(--text2);
  font-size: 13px;
  margin: 6px 0;
}
.section-empty-edit {
  padding: 4px 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.section-empty-edit:hover { background: var(--accent-hover); }

/* Layout toast notification */
.layout-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
}
.layout-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Admin permissions matrix table */
.perms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}
.perms-table th,
.perms-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.perms-table th {
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.perms-table th:first-child,
.perms-table td:first-child {
  text-align: left;
  color: var(--text);
  font-weight: 500;
}
.perms-table td:first-child {
  font-size: 12px;
}
.perms-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.perms-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.perms-table tr:hover {
  background: var(--bg2);
}

/* Legacy compat — keep old grid for migration */
.layout-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}
.layout-grid[data-template="single"] { grid-template-columns: 1fr; }
.layout-grid[data-template="50-50"]  { grid-template-columns: 1fr 1fr; }
.layout-grid[data-template="33-67"]  { grid-template-columns: 1fr 2fr; }
.layout-grid[data-template="67-33"]  { grid-template-columns: 2fr 1fr; }
.layout-grid[data-template="60-40"]  { grid-template-columns: 3fr 2fr; }
.layout-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 80px;
}

/* ============================================================
   Template Selector — Thumbnails in settings
   ============================================================ */
.layout-template-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.layout-template-thumb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.layout-template-thumb {
  width: 56px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg2);
  transition: border-color 0.15s, background 0.15s;
  align-items: stretch;
}
.layout-template-thumb:hover {
  border-color: var(--text2);
  background: var(--bg3);
}
.layout-template-thumb.active {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}
.layout-template-thumb .tpl-col {
  background: var(--border);
  border-radius: 2px;
  flex-shrink: 0;
}
.layout-template-thumb.active .tpl-col {
  background: var(--accent);
  opacity: 0.6;
}
/* Column widths per template */
.layout-template-thumb[data-tpl="single"] .tpl-col { flex: 1; }
.layout-template-thumb[data-tpl="50-50"] .tpl-col { flex: 1; }
.layout-template-thumb[data-tpl="33-67"] .tpl-col:first-child { flex: 1; }
.layout-template-thumb[data-tpl="33-67"] .tpl-col:last-child { flex: 2; }
.layout-template-thumb[data-tpl="67-33"] .tpl-col:first-child { flex: 2; }
.layout-template-thumb[data-tpl="67-33"] .tpl-col:last-child { flex: 1; }
.layout-template-thumb[data-tpl="60-40"] .tpl-col:first-child { flex: 3; }
.layout-template-thumb[data-tpl="60-40"] .tpl-col:last-child { flex: 2; }

.layout-template-label {
  font-size: 10px;
  color: var(--text2);
  text-align: center;
  margin-top: 2px;
}

/* Column indicator in block list items (settings) */
.views-block-col-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg3);
  color: var(--text2);
  margin-left: auto;
  margin-right: 4px;
  flex-shrink: 0;
}
.views-block-col-badge.col-1 {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent);
}

/* (old split column classes removed — replaced by vb-* visual builder) */

/* ── Visual Builder Grid ─────────────────────────────────────────────── */
.vb-grid {
  display: flex;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  min-height: 140px;
}
.vb-grid[data-tpl="single"] { flex-direction: column; }
.vb-grid[data-tpl="single"] .vb-col { flex: 1; }
.vb-grid[data-tpl="50-50"] .vb-col { flex: 1; }
.vb-grid[data-tpl="33-67"] .vb-col:first-child { flex: 1; }
.vb-grid[data-tpl="33-67"] .vb-col:last-child { flex: 2; }
.vb-grid[data-tpl="67-33"] .vb-col:first-child { flex: 2; }
.vb-grid[data-tpl="67-33"] .vb-col:last-child { flex: 1; }
.vb-grid[data-tpl="60-40"] .vb-col:first-child { flex: 3; }
.vb-grid[data-tpl="60-40"] .vb-col:last-child { flex: 2; }

.vb-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.vb-col.vb-col-over {
  border-color: var(--accent);
  background: var(--accent-subtle, rgba(124,127,255,0.06));
}

/* ── Visual Builder Block (mini component preview) ──────────────────── */
.vb-block {
  display: flex;
  align-items: stretch;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
  position: relative;
}
.vb-block:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.vb-block.vb-dragging {
  opacity: 0.3;
}
.vb-block.vb-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle, rgba(124,127,255,0.2));
}
.vb-block:active { cursor: grabbing; }

.vb-block-grip {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--text2);
  opacity: 0.3;
  font-size: 12px;
  background: var(--bg3);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.vb-block:hover .vb-block-grip { opacity: 0.7; }

.vb-block-body {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vb-block-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.vb-block-preview {
  display: flex;
  gap: 6px;
  align-items: center;
}
.vb-block-preview-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg3);
}
.vb-block-preview-bar.accent { background: var(--accent); opacity: 0.5; }
.vb-block-preview-bar.w30 { width: 30%; }
.vb-block-preview-bar.w50 { width: 50%; }
.vb-block-preview-bar.w70 { width: 70%; }
.vb-block-preview-bar.w100 { flex: 1; }

.vb-block-preview-dots {
  display: flex;
  gap: 3px;
}
.vb-block-preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg3);
}
.vb-block-preview-dot.green { background: var(--green); opacity: 0.5; }
.vb-block-preview-dot.accent { background: var(--accent); opacity: 0.5; }

.vb-block-remove {
  position: absolute;
  top: 2px;
  right: 4px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: opacity 0.15s, color 0.15s;
}
.vb-block:hover .vb-block-remove { opacity: 0.6; }
.vb-block-remove:hover { opacity: 1 !important; color: var(--red); }

/* ── Visual Builder Empty state ─────────────────────────────────────── */
.vb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: var(--text2);
  font-size: 11px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  opacity: 0.5;
}

/* ── Visual Builder Shelf (hidden blocks) ───────────────────────────── */
.vb-shelf {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.vb-shelf-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.vb-shelf-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vb-shelf-block {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text2);
  font-size: 11px;
  cursor: grab;
  transition: all 0.15s;
}
.vb-shelf-block:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle, rgba(124,127,255,0.06));
}
.vb-shelf-block.vb-dragging { opacity: 0.3; }
.vb-shelf-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* ── Admin Branding ──────────────────────────────────────────────────── */
/* ── Branding Section Shared ───────────────────────────────────────────── */
.branding-section-desc {
  font-size: 12px; color: var(--text2); margin-bottom: 12px; line-height: 1.4;
}
.branding-mt { margin-top: 14px; }
.branding-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap;
}
.branding-save-btn { position: relative; }
.branding-save-btn .unsaved-dot {
  position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--orange, #f97316);
  border: 2px solid var(--bg); display: none;
}
.branding-save-btn.has-changes .unsaved-dot { display: block; }

/* ── Color Picker ─────────────────────────────────────────────────────── */
.branding-color-row {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.branding-color-input {
  width: 42px; height: 42px; border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; background: none; padding: 2px;
}
.branding-color-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.branding-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.branding-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.branding-hex-input {
  width: 100px; font-family: monospace; font-size: 13px; text-transform: uppercase;
}
.branding-contrast-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  white-space: nowrap; line-height: 1.4;
}
.branding-contrast-badge.pass { background: rgba(34,197,94,0.15); color: #22c55e; }
.branding-contrast-badge.warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.branding-contrast-badge.fail { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ── Presets ──────────────────────────────────────────────────────────── */
.branding-presets {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.branding-preset-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.branding-preset-btn:hover { transform: scale(1.15); border-color: var(--text2); }
.branding-preset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.branding-preset-btn.active {
  border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor;
}
@media (forced-colors: active) {
  .branding-preset-btn.active { outline: 3px solid CanvasText; }
}

/* ── Enriched Preview ─────────────────────────────────────────────────── */
.branding-preview-card {
  display: flex; gap: 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; height: 120px; background: var(--bg); transition: background 0.2s;
}
.branding-preview-sidebar {
  width: 44px; background: var(--bg2); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding-top: 10px; border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.branding-preview-logo-slot {
  width: 20px; height: 20px; border-radius: 4px; background: var(--bg3);
  margin-bottom: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.branding-preview-logo-slot img { width: 100%; height: 100%; object-fit: contain; }
.branding-preview-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.branding-preview-dot.active { background: var(--accent); }
.branding-preview-main {
  flex: 1; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px;
  transition: background 0.2s;
}
.branding-preview-row {
  display: flex; align-items: center; gap: 8px;
}
.branding-preview-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1;
}
.branding-preview-kpi-val {
  font-size: 16px; font-weight: 700; color: var(--accent); line-height: 1;
}
.branding-preview-kpi-label {
  font-size: 8px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em;
}
.branding-preview-bar {
  height: 6px; border-radius: 3px; background: var(--bg3); flex: 1;
}
.branding-preview-bar.accent { background: var(--accent); flex: 0.4; }
.branding-preview-badge {
  font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: var(--accent-subtle, rgba(124,127,255,0.12)); color: var(--accent);
}
.branding-preview-btn {
  font-size: 9px; font-weight: 600; padding: 3px 12px; border-radius: 4px;
  background: var(--accent); color: #fff; margin-left: auto;
}

/* ── Upload & Palette ─────────────────────────────────────────────────── */
.branding-upload-zone {
  position: relative; border: 2px dashed var(--border); border-radius: 10px;
  padding: 20px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 8px; min-height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.branding-upload-zone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.branding-upload-zone:hover,
.branding-upload-zone.dragover {
  border-color: var(--accent); background: var(--accent-subtle, rgba(124,127,255,0.08));
}
.branding-upload-zone.has-logo { border-style: solid; border-color: var(--border); }
.branding-upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text2); font-size: 13px;
}
.branding-upload-placeholder svg { opacity: 0.5; }
.branding-upload-placeholder small { font-size: 11px; opacity: 0.6; line-height: 1.4; }
.branding-upload-preview {
  max-width: 120px; max-height: 60px; object-fit: contain; border-radius: 6px;
}
.branding-upload-remove {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--red, #ef4444); color: #fff; border: none;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: opacity 0.15s;
}
.branding-upload-remove:hover { opacity: 0.85; }
.branding-upload-error {
  color: var(--red, #ef4444); font-size: 12px; margin-top: 4px;
}
.branding-upload-error.hidden { display: none; }
.branding-palette-section { margin-top: 4px; }
.branding-palette {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.branding-palette-color {
  position: relative; width: 36px; height: 36px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s; padding: 0; outline: none;
}
.branding-palette-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.branding-palette-color:hover { transform: scale(1.12); }
.branding-palette-color.role-primary { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.contrast-dot {
  position: absolute; bottom: 2px; right: 2px; width: 8px; height: 8px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
}
.contrast-dot.ok { background: #22c55e; }
.contrast-dot.warn { background: #f59e0b; }
.contrast-dot.fail { background: #ef4444; }
.branding-contrast-legend {
  display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--text2);
}
.contrast-legend-item {
  display: flex; align-items: center; gap: 4px;
}
.contrast-legend-item .contrast-dot {
  position: static; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3); flex-shrink: 0;
}
.branding-theme-indicator {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
  background: var(--accent-subtle, rgba(124,127,255,0.12)); color: var(--accent);
}
.branding-palette-hint {
  font-size: 11px; color: var(--text2); opacity: 0.6; margin-top: 6px;
}
/* Sidebar brand with logo */
.sidebar-brand.has-logo {
  background: transparent; overflow: visible; padding: 0;
  width: 36px; height: 36px; border-radius: 6px;
}
.sidebar-brand.has-logo img {
  width: 36px; height: 36px; object-fit: contain; display: block; border-radius: 6px;
}
/* Call header logo */
.call-header-logo {
  width: 20px; height: 20px; border-radius: 4px; object-fit: contain;
  margin-right: 6px; vertical-align: middle;
}

/* ── Theme Toggle ─────────────────────────────────────────────────────── */
.branding-theme-toggle {
  display: flex; gap: 8px;
}
.branding-theme-btn {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  border-radius: 8px; border: 2px solid var(--border); background: var(--bg2);
  color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 0.2s;
}
.branding-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.branding-theme-btn:hover { border-color: var(--text2); color: var(--text); }
.branding-theme-btn.active {
  border-color: var(--accent); background: var(--accent-subtle, rgba(124,127,255,0.1));
  color: var(--accent);
}
@media (forced-colors: active) {
  .branding-theme-btn.active { outline: 3px solid CanvasText; }
}

/* ── Theme transition ─────────────────────────────────────────────────── */
.theme-transitioning * { transition: background-color 0.25s, color 0.25s, border-color 0.25s !important; }

/* ── Admin Layout Permissions ──────────────────────────────────────────── */
.admin-layout-perms {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: 13px;
  color: var(--text);
}
.admin-toggle-row:hover {
  border-color: var(--accent);
}
.admin-toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Parallel Dialing ──────────────────────────────────────────────────── */

#parallel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

#parallel-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.parallel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--text2);
  font-size: 12px;
  transition: all 0.2s;
}
.parallel-toggle:hover { border-color: var(--accent); }

.parallel-toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--bg3);
  border-radius: 9px;
  transition: background 0.2s;
}
.parallel-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text2);
  border-radius: 50%;
  transition: transform 0.2s;
}
.parallel-toggle.active .parallel-toggle-switch {
  background: var(--accent);
}
.parallel-toggle.active .parallel-toggle-knob {
  transform: translateX(14px);
  background: #fff;
}

.parallel-active-label { opacity: 0.4; }
.parallel-toggle.active .parallel-active-label { opacity: 1; color: var(--accent); }
.parallel-toggle.active .parallel-toggle-label:first-child { opacity: 0.4; }

#parallel-adaptive-info {
  font-size: 11px;
  color: var(--text3);
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 10px;
}

#parallel-dropped-count {
  font-size: 11px;
  color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Multi-slot cards */
#parallel-slots {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg2);
  overflow-x: auto;
}

.parallel-card {
  flex: 0 0 200px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.parallel-card .pc-icon {
  font-size: 18px;
  margin-bottom: 4px;
}
.parallel-card .pc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parallel-card .pc-company {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parallel-card .pc-rings {
  margin-top: 6px;
  display: flex;
  gap: 3px;
}
.parallel-card .pc-ring-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}
.parallel-card .pc-ring-dot.active {
  background: var(--accent);
}
.parallel-card .pc-status {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
}

/* Ringing animation */
.parallel-card.ringing {
  animation: parallelPulse 1.5s ease-in-out infinite;
  border-color: var(--accent);
}
@keyframes parallelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

/* Connected (winner) */
.parallel-card.connected {
  border-color: var(--success, #22c55e);
  background: rgba(34, 197, 94, 0.05);
  transform: scale(1.02);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

/* AMD / Machine */
.parallel-card.machine {
  opacity: 0.4;
  border-color: var(--warning, #f59e0b);
}
.parallel-card.machine::after {
  content: 'Répondeur';
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning, #f59e0b);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Dropped / no-answer / busy */
.parallel-card.dropped,
.parallel-card.no-answer,
.parallel-card.busy,
.parallel-card.hung-up {
  opacity: 0.3;
  transform: scale(0.95);
  transition: all 0.2s ease;
}
.parallel-card.dropped::after {
  content: 'Dropped';
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger, #ef4444);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Winner expand animation */
.parallel-card.winner-expand {
  animation: winnerExpand 0.3s ease forwards;
}
@keyframes winnerExpand {
  from { flex: 0 0 200px; }
  to { flex: 1 1 100%; }
}

/* Whisper Brief overlay */
#whisper-brief {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(15, 17, 23, 0.85);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  animation: whisperFadeIn 0.2s ease;
  pointer-events: none;
}
#whisper-brief.fade-out {
  animation: whisperFadeOut 0.5s ease forwards;
}
@keyframes whisperFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes whisperFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.whisper-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.whisper-detail {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 6px;
}
.whisper-context {
  font-size: 12px;
  color: var(--text3);
}

/* Responsive: stack cards vertically on small screens */
@media (max-width: 768px) {
  #parallel-slots {
    flex-direction: column;
  }
  .parallel-card {
    flex: none;
    width: 100%;
  }
}

/* ── Test Health Dashboard ─────────────────────────────────────────── */

.btn-run-tests {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}
.btn-run-tests:hover {
  background: var(--accent);
  color: #fff;
}

.test-run-spinner {
  animation: test-spin 1s linear infinite;
}
@keyframes test-spin {
  to { transform: rotate(360deg); }
}

.test-health-ts {
  font-size: 11px;
  color: var(--text2);
  margin-left: 8px;
}

.test-health-overview {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
}

.test-health-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.test-health-ring {
  width: 100%;
  height: 100%;
}
.test-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.test-health-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.test-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.test-summary-label {
  color: var(--text2);
  min-width: 60px;
}
.test-summary-value {
  font-weight: 600;
  color: var(--text);
}

.test-level-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.test-level-tab {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
.test-level-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.test-level-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.test-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.test-feature-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg2);
  border-left: 3px solid var(--green);
}
.test-feature-card.test-card-fail {
  border-left-color: var(--red);
}
.test-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.test-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.test-card-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.test-badge-unit { background: rgba(99,102,241,0.15); color: var(--accent); }
.test-badge-integration { background: rgba(59,130,246,0.15); color: var(--blue, #3b82f6); }
.test-badge-e2e { background: rgba(245,158,11,0.15); color: var(--orange, #f59e0b); }
.test-badge-regression { background: rgba(239,68,68,0.15); color: var(--red); }

.test-card-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text2);
}
.test-card-pct {
  font-weight: 600;
}

.test-health-empty {
  font-size: 12px;
  color: var(--text2);
  padding: 16px 0;
  text-align: center;
}

/* ── Role: Viewer (read-only mode) ──────────────── */
body.role-viewer .action-bar,
body.role-viewer .btn-dial,
body.role-viewer .btn-hangup,
body.role-viewer #btn-settings,
body.role-viewer .post-call-actions,
body.role-viewer .settings-card input:not([readonly]),
body.role-viewer .settings-card select,
body.role-viewer .settings-card textarea,
body.role-viewer .settings-card button {
  pointer-events: none;
  opacity: 0.5;
}
body.role-viewer::after {
  content: 'MODE LECTURE';
  position: fixed;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 9999;
  letter-spacing: 0.5px;
}

/* ── Team Stats ──────────────────────────────── */
.team-stats-grid {
  display: grid;
  gap: 10px;
}
.team-agent-card {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.team-agent-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}
.team-agent-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.team-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.team-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.team-stat-lbl {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
}

/* ── Recording Player ──────────────────────────── */
.recording-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
}
.rec-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.rec-play-btn:hover { background: var(--accent-hover, #818cf8); }
.rec-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rec-time {
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
}
.rec-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.rec-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s linear;
}
.rec-speed-btn {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.rec-speed-btn:hover { color: var(--text); }

/* Player in call detail inline */
.cdi-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 8px 0;
}
.cdi-player .rec-play-btn { width: 28px; height: 28px; font-size: 11px; }
.cdi-player .rec-progress-bar { height: 4px; }

/* ============================================================
   Template Gallery
   ============================================================ */

.template-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Category tabs */
.template-category-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.template-cat-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg2);
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.template-cat-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.template-cat-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Cards grid */
.template-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.template-card {
  position: relative;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.template-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(124, 127, 255, 0.12);
  transform: translateY(-1px);
}

/* ── Hover overlay with actions ── */
/* Pencil edit button — top-right of preview */
.template-preview { position: relative; }
.tpl-edit-pencil {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: none;
  color: #fff; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.template-card:hover .tpl-edit-pencil { opacity: 1; }
.tpl-edit-pencil:hover { transform: scale(1.15); }
.tpl-edit-pencil:active { transform: scale(0.95); }
.template-active-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  z-index: 3;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Mobile: show pencil on touch-active */
@media (hover: none) {
  .template-card.touch-active .tpl-edit-pencil { opacity: 1; }
}
.template-card.active {
  border-color: var(--accent);
  background: var(--accent-subtle, rgba(124,127,255,0.06));
  box-shadow: 0 0 0 2px var(--accent-subtle, rgba(124,127,255,0.15));
}

/* Mini preview */
.template-preview {
  height: 60px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px;
}

.tpl-mini-layout {
  display: flex;
  gap: 3px;
  height: 100%;
}
.tpl-mini-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tpl-mini-section {
  display: flex;
  gap: 1px;
  flex: 1;
  min-height: 0;
}
.tpl-mini-section[data-tpl="single"] { flex-direction: column; }
.tpl-mini-section[data-tpl="50-50"] .tpl-mini-col { flex: 1; }
.tpl-mini-section[data-tpl="33-67"] .tpl-mini-col:first-child { flex: 1; }
.tpl-mini-section[data-tpl="33-67"] .tpl-mini-col:last-child { flex: 2; }
.tpl-mini-section[data-tpl="67-33"] .tpl-mini-col:first-child { flex: 2; }
.tpl-mini-section[data-tpl="67-33"] .tpl-mini-col:last-child { flex: 1; }
.tpl-mini-section[data-tpl="60-40"] .tpl-mini-col:first-child { flex: 3; }
.tpl-mini-section[data-tpl="60-40"] .tpl-mini-col:last-child { flex: 2; }

.tpl-mini-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.tpl-mini-block {
  background: var(--border);
  border-radius: 2px;
  min-height: 4px;
  flex: 1;
}
.template-card.active .tpl-mini-block {
  background: var(--accent);
  opacity: 0.5;
}
.tpl-mini-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text2);
  font-size: 16px;
  opacity: 0.3;
}

/* Template info */
.template-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.template-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.template-desc {
  font-size: 10px;
  color: var(--text2);
  line-height: 1.3;
}

/* Badges */
.template-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.template-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.template-badge-prospection { background: rgba(59,130,246,0.15); color: #60a5fa; }
.template-badge-management { background: rgba(168,85,247,0.15); color: #c084fc; }
.template-badge-coaching { background: rgba(34,197,94,0.15); color: #4ade80; }
.template-badge-custom { background: rgba(251,146,60,0.15); color: #fb923c; }
.template-badge-custom-user { background: rgba(124,127,255,0.15); color: var(--accent); }

/* Health badge */
.template-health {
  margin-top: 4px;
}
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.health-badge.health-ok {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}
.health-badge.health-ok::before {
  content: '\u25CF';
  font-size: 8px;
}
.health-badge.health-modified {
  background: rgba(251,146,60,0.12);
  color: #fb923c;
}
.health-badge.health-modified::before {
  content: '\u25CF';
  font-size: 8px;
}

/* Error recovery banner */
.layout-error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #f87171;
}
.layout-error-reset-btn {
  padding: 4px 12px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.layout-error-reset-btn:hover {
  background: #dc2626;
}

/* Inline rename input */
.section-rename-input {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  outline: none;
  width: 140px;
  flex: 1;
}
.section-rename-input:focus {
  box-shadow: 0 0 0 2px var(--accent-subtle, rgba(124,127,255,0.2));
}

/* Save as template button */
.builder-save-template-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.15s;
}
.builder-save-template-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.builder-save-template-btn.hidden { display: none; }

/* Admin custom templates list */
.admin-custom-tpl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.admin-custom-tpl-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.admin-custom-tpl-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.admin-custom-tpl-cat {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text2);
  text-transform: uppercase;
}
.admin-custom-tpl-desc {
  font-size: 11px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Admin Layout Management (direct control)
   ============================================================ */

.admin-layout-current {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

/* Preset row */
.admin-layout-preset-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-layout-preset-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
}
.admin-layout-preset-btns {
  display: flex;
  gap: 6px;
}
.admin-preset-btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-preset-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.admin-preset-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Template gallery in admin */
.admin-tpl-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-tpl-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.admin-tpl-tab {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg2);
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.admin-tpl-tab:hover {
  border-color: var(--accent);
  color: var(--text);
}
.admin-tpl-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.admin-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.admin-tpl-card {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-tpl-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(124, 127, 255, 0.12);
  transform: translateY(-1px);
}
.admin-tpl-card-preview {
  height: 50px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px;
}
.admin-tpl-card-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-tpl-card-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.admin-tpl-card-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.admin-tpl-badge-prospection { background: rgba(59,130,246,0.15); color: #60a5fa; }
.admin-tpl-badge-management { background: rgba(168,85,247,0.15); color: #c084fc; }
.admin-tpl-badge-coaching { background: rgba(34,197,94,0.15); color: #4ade80; }
.admin-tpl-badge-custom { background: rgba(251,146,60,0.15); color: #fb923c; }

/* (accordion + sub-tab styles removed — replaced by Lightning Builder) */

/* ============================================================
   Admin Layout Builder (ALB) — interactive zone editor
   ============================================================ */

.alb-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.alb-section.alb-locked {
  border-left: 3px solid var(--text2);
}

/* Section bar */
.alb-section-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.alb-lock { font-size: 11px; opacity: 0.5; }
.alb-section-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: default;
  flex-shrink: 0;
}
.alb-section:not(.alb-locked) .alb-section-name {
  cursor: text;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
  position: relative;
  padding-right: 16px;
}
.alb-section:not(.alb-locked) .alb-section-name::after {
  content: '\270E';
  position: absolute;
  right: 0;
  opacity: 0;
  font-size: 10px;
  transition: opacity 0.15s;
}
.alb-section:not(.alb-locked) .alb-section-name:hover {
  border-color: var(--text2);
}
.alb-section:not(.alb-locked) .alb-section-name:hover::after {
  opacity: 0.5;
}

/* Template thumbs */
.alb-tpl-thumbs {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.alb-tpl-thumb {
  width: 28px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  padding: 2px;
  background: var(--bg);
  transition: border-color 0.15s;
  align-items: stretch;
}
.alb-tpl-thumb:hover { border-color: var(--text2); }
.alb-tpl-thumb.active { border-color: var(--accent); background: rgba(124, 127, 255, 0.1); }
.alb-tpl-thumb .tpl-col {
  background: var(--border);
  border-radius: 1px;
  flex: 1;
}
.alb-tpl-thumb.active .tpl-col { background: var(--accent); }
/* Template column widths */
.alb-tpl-thumb[data-tpl="single"] .tpl-col { flex: 1; }
.alb-tpl-thumb[data-tpl="50-50"] .tpl-col { flex: 1; }
.alb-tpl-thumb[data-tpl="33-67"] .tpl-col:first-child { flex: 1; }
.alb-tpl-thumb[data-tpl="33-67"] .tpl-col:last-child { flex: 2; }
.alb-tpl-thumb[data-tpl="67-33"] .tpl-col:first-child { flex: 2; }
.alb-tpl-thumb[data-tpl="67-33"] .tpl-col:last-child { flex: 1; }
.alb-tpl-thumb[data-tpl="60-40"] .tpl-col:first-child { flex: 3; }
.alb-tpl-thumb[data-tpl="60-40"] .tpl-col:last-child { flex: 2; }

/* Remove section */
.alb-remove-sec {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.alb-remove-sec:hover { opacity: 1; }

/* Grid layout — matches real section-grid */
.alb-grid {
  display: grid;
  gap: 14px;
  padding: 10px 12px 12px;
  min-height: 60px;
}
.alb-grid[data-template="single"]  { grid-template-columns: 1fr; }
.alb-grid[data-template="50-50"]   { grid-template-columns: 1fr 1fr; }
.alb-grid[data-template="33-67"]   { grid-template-columns: 1fr 2fr; }
.alb-grid[data-template="67-33"]   { grid-template-columns: 2fr 1fr; }
.alb-grid[data-template="60-40"]   { grid-template-columns: 3fr 2fr; }

/* Columns — matches real builder-col-highlight */
.alb-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.alb-col.alb-drag-over {
  border-color: var(--accent);
  background: rgba(124, 127, 255, 0.06);
}
.alb-col-empty {
  font-size: 11px;
  color: var(--text2);
  opacity: 0.4;
  text-align: center;
  padding: 16px 6px;
  font-style: italic;
}

/* Block cards — matches real layout-block + block-bar style */
.alb-block {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: grab;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.alb-block:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.alb-block:active { cursor: grabbing; }
.alb-block.alb-dragging { opacity: 0.3; transform: scale(0.96); }
.alb-block.alb-drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 127, 255, 0.2);
}

/* Block accent bar — matches real block-bar */
.alb-block-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--accent);
  font-size: 11px;
  color: #fff;
}
.alb-block-handle {
  cursor: grab;
  font-size: 14px;
  user-select: none;
  opacity: 0.7;
  line-height: 1;
}
.alb-block-handle:hover { opacity: 1; }
.alb-block-handle:active { cursor: grabbing; }
.alb-block-name {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.alb-block-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.alb-block-remove:hover { color: #fff; }

/* Config fields button in LB builder */
.alb-block-config {
  background: rgba(99,102,241,0.25);
  border: 1px solid rgba(99,102,241,0.5);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.4;
  margin-left: auto;
  margin-right: 4px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.alb-block-config:hover {
  color: #fff;
  background: rgba(99,102,241,0.45);
  transform: scale(1.05);
}

/* Allow popover to overflow section when inside LB builder */
.alb-section:has(.block-field-popover) { overflow: visible; }
.alb-block:has(.block-field-popover) { overflow: visible; z-index: 100; }
.alb-block .block-field-popover { z-index: 300; }

/* Block body — real content preview */
.alb-block-body {
  background: var(--bg);
  max-height: 180px;
  overflow: hidden;
  position: relative;
  pointer-events: none;
  user-select: none;
}
.alb-block-body::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}

/* Shelf (unplaced blocks) */
.alb-shelf {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.alb-shelf-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.alb-shelf-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.alb-shelf-block {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.alb-shelf-block:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124, 127, 255, 0.06);
}
.alb-shelf-icon { font-weight: 700; font-size: 13px; }

/* Add section */
.alb-add-section {
  display: block;
  width: 100%;
  padding: 6px;
  margin-top: 6px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-align: center;
}
.alb-add-section:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   Lightning Builder — full immersive overlay
   ============================================================ */

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-builder);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.lb-overlay.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lb-overlay.hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 150ms ease-in, transform 150ms ease-in, visibility 0ms 150ms;
}

/* ── Top bar ── */
.lb-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 48px;
  min-height: 48px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.lb-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.lb-back-btn:hover { background: var(--bg2); border-color: var(--text2); }

.lb-topbar-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
  opacity: 0.6;
  margin-left: 12px;
  margin-right: 4px;
}

.lb-preset-tabs {
  display: flex;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.lb-preset-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.lb-preset-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.lb-preset-btn.active { background: var(--accent); color: #fff; }
.lb-preset-btn .lb-preset-dot {
  display: none;
}
.lb-preset-btn .lb-preset-active-indicator {
  display: none;
}
.lb-activate-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.lb-activate-btn:hover { filter: brightness(1.1); }
.lb-activate-btn.hidden { display: none; }

.lb-page-tabs {
  display: flex;
  gap: 0;
}
.lb-page-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  opacity: 0.7;
}
.lb-page-btn:hover { color: var(--text); opacity: 1; }
.lb-page-btn.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; opacity: 1; }

.lb-canvas-count {
  font-size: 11px;
  color: var(--text2);
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 10px;
}

.lb-topbar-action {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.lb-topbar-action:hover { border-color: var(--red, #ef4444); color: var(--red, #ef4444); }

/* ── Main area: shelf + canvas ── */
.lb-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.lb-shelf-panel {
  width: 200px;
  min-width: 200px;
  background: rgba(0,0,0,0.1);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding-bottom: 12px;
}

.lb-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text2);
  padding: 14px 12px 8px;
}

.lb-shelf {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 8px;
}

.lb-shelf-block {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: 11px;
  cursor: grab;
  transition: all 0.15s;
}
.lb-shelf-block:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg3);
}
.lb-shelf-block:active { cursor: grabbing; }
.lb-shelf-block .lb-shelf-icon {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.lb-shelf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lb-shelf-name { font-size: 11px; color: var(--text); }
.lb-shelf-desc { font-size: 9px; color: var(--text2); opacity: 0.7; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Shelf complete empty state ── */
/* ── Ghost drag preview ── */
.alb-drag-ghost {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.9;
  transform: rotate(2deg) scale(0.95);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px var(--accent);
}

/* ── Drop indicator ── */
.alb-drop-indicator {
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  margin: -1px 4px;
  position: relative;
}
.alb-drop-indicator::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Block animations ── */
.alb-block.alb-entering { animation: alb-enter 250ms cubic-bezier(0.2,0,0,1); }
@keyframes alb-enter { from { opacity: 0; transform: scale(0.92) translateY(8px); } }

/* ── Section drag reorder ── */
.alb-section-drag {
  cursor: grab;
  font-size: 14px;
  opacity: 0.3;
  transition: opacity 0.15s;
  user-select: none;
}
.alb-section-drag:hover { opacity: 0.8; }
.alb-section-drag:active { cursor: grabbing; }
.alb-section.alb-section-dragging { opacity: 0.4; transform: scale(0.98); transition: opacity 0.15s, transform 0.15s; }
.alb-section.alb-section-drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,127,255,0.2); }

.alb-block.alb-landed { animation: alb-land 300ms cubic-bezier(0.2,0,0,1); }
@keyframes alb-land { 0% { transform: scale(0.96); box-shadow: 0 0 0 3px rgba(124,127,255,0.4); } 60% { transform: scale(1.01); } 100% { transform: scale(1); box-shadow: none; } }

/* ── Inline rename input ── */
.alb-rename-input {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  outline: none;
  min-width: 80px;
}

.lb-shelf-complete { display: flex; flex-direction: column; align-items: center; padding: 20px 12px; gap: 8px; }
.lb-shelf-check { width: 32px; height: 32px; }
@keyframes lb-check-draw { to { stroke-dashoffset: 0; } }
.lb-shelf-complete-text { font-size: 11px; color: var(--green); font-weight: 600; opacity: 0; animation: lb-fadein 300ms 600ms ease forwards; }
.lb-shelf-complete-hint { font-size: 9px; color: var(--text2); opacity: 0; animation: lb-fadein 300ms 700ms ease forwards; text-align: center; }
@keyframes lb-fadein { to { opacity: 1; } }

/* ── Canvas ── */
.lb-canvas-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--bg2);
  transition: opacity 150ms ease, transform 150ms ease;
}

#lb-zone-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lb-canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text2);
  font-size: 13px;
  gap: 8px;
}
.lb-canvas-empty-icon { font-size: 32px; opacity: 0.3; }

/* ── Builder confirm modal ── */
.lb-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
}
.lb-confirm-overlay.visible { opacity: 1; }
.lb-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.lb-confirm-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transform: translateY(8px);
  transition: transform 150ms ease;
}
.lb-confirm-overlay.visible .lb-confirm-box { transform: translateY(0); }
.lb-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.lb-confirm-msg {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 20px;
}
.lb-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.lb-confirm-cancel {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.lb-confirm-cancel:hover { border-color: var(--text2); color: var(--text); }
.lb-confirm-ok {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.lb-confirm-ok:hover { filter: brightness(1.1); }
.lb-confirm-ok:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Focus-visible for builder interactives ── */
.lb-back-btn:focus-visible,
.lb-preset-btn:focus-visible,
.lb-page-btn:focus-visible,
.lb-activate-btn:focus-visible,
.lb-topbar-action:focus-visible,
.lb-shelf-block:focus-visible,
.alb-block:focus-visible,
.alb-tpl-thumb:focus-visible,
.alb-remove-sec:focus-visible,
.alb-add-section:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout Templates V2 — Impersonation Banner, View Selector, Admin Enriched
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Impersonation Banner ──────────────────────────────────────────────── */
.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1a1a2e;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10000;
  transition: height 0.25s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.impersonation-banner.active {
  height: 40px;
}
.impersonation-banner-text {
  display: flex;
  align-items: center;
}
.impersonation-end-btn {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.2);
  color: inherit;
  padding: 3px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}
.impersonation-end-btn:hover {
  background: rgba(0,0,0,0.25);
}

/* Body shift when impersonating */
body.impersonating main {
  padding-top: 40px;
}
body.impersonating #app-sidebar {
  top: 40px;
  height: calc(100vh - 40px);
}

/* ── View Selector (Settings > General) ──────────────────────────────── */
.user-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.user-template-card {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.user-template-card:hover {
  border-color: var(--accent);
  background: var(--bg3);
  transform: translateY(-1px);
}
.user-template-card.active {
  border-color: var(--accent);
  background: rgba(124, 127, 255, 0.08);
  box-shadow: 0 0 0 1px var(--accent);
}
.user-template-card.active::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--accent);
  font-weight: bold;
  font-size: 14px;
}
.user-template-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.user-template-card-desc {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
}
.user-template-card-category {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  color: var(--accent);
  background: rgba(124, 127, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Pencil icon on user template cards */
.user-tpl-edit-pencil {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.user-template-card:hover .user-tpl-edit-pencil { opacity: 1; }
.user-template-card.active .user-tpl-edit-pencil { display: none; }

/* ── Admin Enriched User Info ────────────────────────────────────────── */
.admin-user-enriched {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.admin-user-team,
.admin-user-template,
.admin-user-last-login {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--text2);
  background: var(--bg3);
}
.admin-user-team { color: var(--blue); }
.admin-user-template { color: var(--accent); }
.admin-user-last-login { color: var(--text2); }

/* ── Template Assign Select (user row) ───────────────────────────────── */
.admin-user-template-assign {
  flex: 0 0 auto;
}
.admin-tpl-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  max-width: 150px;
}
.admin-tpl-select:focus {
  border-color: var(--accent);
  outline: none;
}

/* ── Templates & Assignation Grid (Admin > Droits) ───────────────────── */
.admin-tpl-assign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.admin-tpl-assign-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-tpl-assign-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(124, 127, 255, 0.1);
}
.admin-tpl-assign-preview {
  background: var(--bg2);
  padding: 10px;
  border-bottom: 1px solid var(--border);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-tpl-assign-preview .tpl-mini-layout {
  transform: scale(0.85);
}
.admin-tpl-assign-body {
  padding: 10px 12px 12px;
}
.admin-tpl-assign-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.admin-tpl-assign-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-tpl-assign-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  background: var(--bg3);
  color: var(--text2);
}
.admin-tpl-assign-badge-prospection { color: var(--green); background: rgba(34,197,94,0.1); }
.admin-tpl-assign-badge-management { color: var(--blue); background: rgba(59,130,246,0.1); }
.admin-tpl-assign-badge-coaching { color: var(--orange); background: rgba(251,191,36,0.1); }
.admin-tpl-assign-badge-custom { color: var(--accent); background: rgba(124,127,255,0.1); }
.admin-tpl-assign-builtin {
  font-size: 9px;
  color: var(--text2);
  opacity: 0.6;
}
.admin-tpl-assign-delete {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.admin-tpl-assign-delete:hover { color: var(--red); }
.admin-tpl-assign-desc {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 8px;
  line-height: 1.3;
}
.admin-tpl-assign-users {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.admin-tpl-assign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(124, 127, 255, 0.12);
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.assign-chip:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}
.assign-chip-empty {
  font-size: 10px;
  color: var(--text2);
  opacity: 0.5;
  font-style: italic;
}
.admin-tpl-add-user-select {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}
.admin-tpl-add-user-select:focus {
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

/* Bulk assign checkboxes */
.admin-tpl-bulk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 0;
}
.admin-tpl-bulk-label {
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-tpl-bulk-label:hover { color: var(--text); }
.admin-tpl-bulk-btn {
  margin-top: 6px;
  padding: 4px 12px;
  font-size: 11px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-tpl-bulk-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Role icons on cards */
.template-role-icon, .admin-tpl-roles .template-role-icon {
  font-size: 12px;
  margin-left: 2px;
  opacity: 0.6;
}
.template-roles, .admin-tpl-roles {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}
.template-lock-icon {
  margin-right: 4px;
  font-size: 12px;
}
.template-creator, .admin-tpl-assign-creator {
  font-size: 10px;
  color: var(--text2);
  opacity: 0.6;
  margin-top: 2px;
}

/* Delete confirmation modal */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.admin-modal-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
}
.admin-modal-box h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text);
}
.admin-modal-impact {
  font-size: 13px;
  color: var(--text2);
  margin: 0 0 16px;
  line-height: 1.4;
}
.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.admin-modal-cancel {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
}
.admin-modal-cancel:hover { color: var(--text); }
.admin-modal-confirm {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: var(--red, #ef4444);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.admin-modal-confirm:hover { opacity: 0.85; }

/* ── Connect As Button ───────────────────────────────────────────────── */
.admin-action-connect {
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}
.admin-action-connect:hover {
  background: rgba(251, 191, 36, 0.1) !important;
}

/* ── Admin Edit Modal ────────────────────────────────────────────────── */
.admin-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
}
.admin-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.admin-modal-content {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.admin-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.admin-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-modal-body .setting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-modal-input,
.admin-modal-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.admin-modal-input:focus,
.admin-modal-select:focus {
  border-color: var(--accent);
  outline: none;
}
.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── Admin Teams ─────────────────────────── */
.admin-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.admin-team-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s; }
.admin-team-card:hover { border-color: var(--accent); }
.admin-team-card-header { display: flex; align-items: center; gap: 10px; }
.admin-team-avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.admin-team-info { flex: 1; min-width: 0; }
.admin-team-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-team-desc { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-team-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text2); }
.admin-team-meta svg { opacity: 0.5; vertical-align: -2px; margin-right: 2px; }
.admin-team-actions { display: flex; gap: 6px; margin-top: 4px; }
.admin-team-btn { background: transparent; border: 1px solid var(--border); color: var(--text2); font-size: 12px; padding: 4px 10px; border-radius: var(--radius); cursor: pointer; transition: all 0.15s; }
.admin-team-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-team-btn-danger:hover { border-color: var(--red); color: var(--red); }

/* Team Drawer */
.team-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--bg); border-left: 1px solid var(--border); z-index: 10001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease; }
.team-drawer.open { transform: translateX(0); }
.team-drawer-header { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--border); }
.team-drawer-header h3 { flex: 1; font-size: 15px; font-weight: 600; margin: 0; color: var(--text); }
.team-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.team-drawer-add { display: flex; gap: 8px; margin-bottom: 16px; }
.team-drawer-member { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius); }
.team-drawer-member:hover { background: var(--bg2); }
.team-drawer-member-info { flex: 1; min-width: 0; }
.team-drawer-member-name { font-size: 13px; font-weight: 500; color: var(--text); }
.team-drawer-member-email { font-size: 11px; color: var(--text2); }
.team-drawer-member-role { font-size: 11px; color: var(--accent); font-weight: 500; }
.team-drawer-remove { background: transparent; border: none; color: var(--text2); cursor: pointer; padding: 4px; border-radius: 4px; }
.team-drawer-remove:hover { color: var(--red); background: rgba(239,68,68,0.1); }