:root {
  --bg: #0c0d12;
  --bg-secondary: #111318;
  --bg-tertiary: #181b23;
  --border: rgba(255,255,255,0.06);
  --text: #e8eaf0;
  --text-muted: #6b7a90;
  --accent: #00d97e;
  --accent-hover: #00f090;
  --accent-dim: rgba(0,217,126,0.08);
  --accent-glow: rgba(0,217,126,0.20);
  --green: #00d97e;
  --red: #f05252;
  --orange: #f6a623;
  --orange-glow: rgba(246,166,35,0.3);
  --purple: #818cf8;
  --gold: #ffd700;
  --radius: 10px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
}

/* ─── Light Theme ─────────────────────────────────────── */
:root[data-theme="light"] {
  --accent: #059669;
  --accent-hover: #047857;
  --accent-dim: rgba(5,150,105,0.08);
  --accent-glow: rgba(5,150,105,0.2);
  --green: #059669;
  --bg: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --orange: #d97706;
  --orange-glow: rgba(217,119,6,0.15);
  --red: #dc2626;
  --purple: #6366f1;
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', system-ui, sans-serif;
}

:root[data-theme="light"] .sidebar-header {
  background: linear-gradient(135deg, rgba(5,150,105,0.05) 0%, rgba(217,119,6,0.03) 100%);
}

:root[data-theme="light"] .sidebar-header h1 {
  text-shadow: none;
}

:root[data-theme="light"] .message.out {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #fff;
  border-color: rgba(5,150,105,0.3);
}

:root[data-theme="light"] .message.out .msg-time { color: rgba(255,255,255,0.6); }
:root[data-theme="light"] .message.out .msg-body a { color: rgba(255,255,255,0.9); }

:root[data-theme="light"] .empty-state {
  background: radial-gradient(ellipse at 50% 40%, rgba(5,150,105,0.04) 0%, transparent 60%), var(--bg);
}
:root[data-theme="light"] .empty-state::before { display: none; }

:root[data-theme="light"] .welcome-brand { text-shadow: none; }
:root[data-theme="light"] .welcome-tagline { text-shadow: none; }

:root[data-theme="light"] .thread-item.active {
  background: rgba(5,150,105,0.06);
  border-left: 3px solid #059669 !important;
}
:root[data-theme="light"] .thread-item.has-unread {
  border-left: 3px solid rgba(5,150,105,0.4);
}
:root[data-theme="light"] .unread-badge {
  background: #059669;
  box-shadow: 0 0 8px rgba(5,150,105,0.3);
}

:root[data-theme="light"] .thread-item:hover:not(.active) {
  background: rgba(0,0,0,0.02);
}

:root[data-theme="light"] .modal {
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

:root[data-theme="light"] .toast {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

:root[data-theme="light"] .compose-send.send-ready {
  box-shadow: 0 0 16px rgba(5,150,105,0.3);
}

:root[data-theme="light"] .connection-banner {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

:root[data-theme="light"] .command-item:hover,
:root[data-theme="light"] .command-item.selected {
  background: rgba(5,150,105,0.06);
}

:root[data-theme="light"] .pipeline-column {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
:root[data-theme="light"] .pipeline-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}
:root[data-theme="light"] .pipeline-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
:root[data-theme="light"] .pipeline-col-header {
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .shortcut-keys kbd {
  background: #fff;
  border-color: #d1d1d6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Light mode message bubbles */
:root[data-theme="light"] .message.in {
  background: #f2f2f7;
  border-color: #e5e5ea;
  color: #1c1c1e;
}
:root[data-theme="light"] .compose textarea {
  background: #fff;
  border-color: #d1d1d6;
}
:root[data-theme="light"] .compose textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}
:root[data-theme="light"] .sidebar-header h1 {
  color: #1c1c1e;
  text-shadow: none;
}
:root[data-theme="light"] .suggest-reply-card {
  background: #fff;
  border-color: #d1d1d6;
}
:root[data-theme="light"] .draft-alt-chip {
  background: #fff;
  border-color: rgba(255,149,0,0.5);
  color: #1c1c1e;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* CRT effects removed — using clean design-system theme */

/* Global button hover glow */
button:hover, .btn:hover { box-shadow: 0 0 15px var(--accent-glow); }
/* Global input focus glow */
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 2px var(--accent-glow); }
/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,217,126,0.4); }

/* Layout */
.app {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Sidebar */
.sidebar {
  width: 300px;
  min-width: 300px;
  background: var(--bg-secondary);
  border-right: 1px solid rgba(0,217,126,0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 1px 0 0 rgba(0,217,126,0.06), 6px 0 40px rgba(0,0,0,0.6);
}

.sidebar-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,217,126,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(11,13,19,0.9);
  position: relative;
  flex-shrink: 0;
}
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

.sidebar-header h1 {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--accent);
  letter-spacing: -0.5px;
  font-family: var(--font);
}

.sidebar-header .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255,45,45,0.8), 0 0 20px rgba(255,45,45,0.3);
  animation: evil-pulse 2s infinite;
}
@keyframes evil-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,45,45,0.8), 0 0 20px rgba(255,45,45,0.3); }
  50% { box-shadow: 0 0 12px rgba(255,45,45,1), 0 0 30px rgba(255,45,45,0.5); }
}

.sidebar-header .status-dot.connected {
  background: var(--green);
  box-shadow: 0 0 8px rgba(0,217,126,0.8), 0 0 20px rgba(0,217,126,0.3);
  animation: evil-pulse-green 2s infinite;
}
@keyframes evil-pulse-green {
  0%, 100% { box-shadow: 0 0 8px rgba(0,217,126,0.8), 0 0 20px rgba(0,217,126,0.3); }
  50% { box-shadow: 0 0 12px rgba(0,217,126,1), 0 0 30px rgba(0,217,126,0.5); }
}

.sidebar-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}
.sidebar-actions .icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  transition: all 0.15s;
}
.sidebar-actions .icon-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent-glow);
}

/* Auto pill: replaces separate Auto + ⚙ buttons */
.auto-pill {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-secondary);
  font-size: 11px;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.auto-pill.on {
  border-color: var(--accent-glow);
  background: var(--accent-dim);
}
.auto-pill-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0;
  transition: color 0.15s;
  white-space: nowrap;
}
.auto-pill.on .auto-pill-toggle { color: var(--accent); }
.auto-pill-toggle:hover { color: var(--text); }
.auto-pill-dot { font-size: 8px; line-height: 1; }
.auto-pill-settings {
  padding: 5px 7px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
}
.auto-pill-settings:hover {
  color: var(--accent);
  background: rgba(0,217,126,0.07);
}

.sidebar-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.sidebar-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.sidebar-search input::placeholder {
  color: var(--text-muted);
}

/* ─── Search Container (matches HTML class) ─────────────── */
.search-container {
  padding: 8px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.search-container input,
#threadSearch {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 8px 12px 8px 32px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

.search-container input:focus,
#threadSearch:focus {
  border-color: rgba(0,217,126,0.3);
  background-color: rgba(0,217,126,0.03);
  box-shadow: 0 0 0 3px rgba(0,217,126,0.06);
}

.search-container input::placeholder,
#threadSearch::placeholder {
  color: var(--text-muted);
  font-size: 12px;
}

.thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* ─── Sidebar Bottom Nav ─────────────────────────── */
.sidebar-bottom-nav {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.sbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s;
  font-family: var(--font);
  position: relative;
}
.sbn-item:hover { color: var(--text); }
.sbn-item.active { color: var(--accent); }
.sbn-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 8px rgba(0,217,126,0.6);
}
.sbn-icon { font-size: 18px; line-height: 1; }
.sbn-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font);
}

.thread-item {
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.unread-badge {
  background: var(--accent);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,217,126,0.5);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.thread-item.has-unread {
  border-left-color: rgba(0,217,126,0.45);
}
.thread-item.has-unread .thread-name {
  color: #fff;
  font-weight: 700;
}
.thread-item.has-unread .thread-preview {
  color: rgba(232,234,240,0.7);
}

.thread-item.pinned {
  border-left-color: var(--orange);
  background: rgba(255,140,0,0.02);
}

.pin-icon {
  font-size: 10px;
}

.thread-item:hover { background: rgba(0,217,126,0.04); }

/* ─── Thread Hover Quick-Actions ────────────────────────── */
.thread-hover-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  background: linear-gradient(to right, transparent, var(--bg-tertiary) 30%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.thread-item { position: relative; overflow: hidden; }
.thread-item:hover .thread-hover-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.tha-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  flex-shrink: 0;
}
.tha-btn:hover { background: var(--bg-tertiary); color: var(--text); border-color: var(--accent); }
.tha-btn.tha-active { color: var(--orange); border-color: var(--orange); }
.tha-btn.tha-draft { color: var(--orange); border-color: rgba(255,140,0,0.3); }
.tha-btn.tha-draft:hover { background: rgba(255,140,0,0.1); border-color: var(--orange); }
.thread-item.active {
  background: rgba(0,217,126,0.07);
  border-left-color: var(--accent) !important;
  box-shadow: inset 3px 0 20px rgba(0,217,126,0.08);
}
.thread-item.active .thread-name { color: var(--accent); }

.thread-item .thread-name {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 3px;
  color: var(--text);
  font-family: var(--font);
  letter-spacing: -0.1px;
}

.thread-item .thread-preview {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font);
  line-height: 1.4;
}

/* Reply Now button on needs_reply filter thread items */
.reply-now-btn {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--accent-glow);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  margin-left: 4px;
  line-height: 1.4;
}
.reply-now-btn:hover {
  border-color: var(--accent);
  transform: scale(1.05);
  opacity: 0.85;
}

/* Needs-reply indicator dot on thread items in All view */
.needs-reply-dot {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
  margin-left: 2px;
}

.ar-queue-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  background: rgba(0, 255, 65, 0.1);
  border: 1px solid rgba(0, 255, 65, 0.25);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  animation: ar-pulse 1.8s ease-in-out infinite;
}
@keyframes ar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.thread-item .thread-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Main Content */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.main-header {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(13,15,21,0.97);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  backdrop-filter: blur(8px);
}

.main-header h2 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

.main-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.header-icon-btn {
  font-size: 15px;
  padding: 6px 9px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-icon-btn:hover {
  color: var(--accent);
}

/* Messages */
.messages-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  position: relative;
  font-family: var(--font);
}

.message.in {
  align-self: flex-start;
  background: rgba(16,20,28,0.9);
  border: 1px solid rgba(255,255,255,0.07);
  border-bottom-left-radius: 4px;
  color: var(--text);
}

.message.out {
  align-self: flex-end;
  background: linear-gradient(135deg, #00d97e 0%, #00b868 100%);
  border: none;
  border-bottom-right-radius: 4px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,217,126,0.25);
}

.message .msg-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}
.message.out .msg-time { color: rgba(255,255,255,0.55); }

/* Contact Profile */
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim) 0%, rgba(255,140,0,0.1) 100%);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin: 0 auto 8px;
}

.profile-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.profile-name:hover {
  color: var(--accent);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.ps-item {
  text-align: center;
}

.ps-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.ps-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* Message Actions */
.message.msg-selected {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.msg-action-bar {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,217,126,0.08);
}

.msg-action-bar button {
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 4px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.msg-action-bar button:hover {
  background: rgba(0,217,126,0.15);
}

.msg-action-bar button:active {
  background: rgba(0,217,126,0.25);
}

.date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 4px;
  position: relative;
}

.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.date-separator span {
  padding: 0 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Welcome / Empty State */
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-muted);
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,217,126,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(255,45,45,0.02) 0%, transparent 50%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

.welcome-logo {
  font-size: 72px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 30px var(--orange-glow));
}

.welcome-brand {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 4px;
  font-family: var(--font);
}
.welcome-tagline {
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 440px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.welcome-card {
  background: rgba(0,217,126,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  transition: all 0.3s;
}

.welcome-card:hover {
  border-color: rgba(0,217,126,0.4);
  background: rgba(0,217,126,0.07);
  box-shadow: 0 0 30px rgba(0,217,126,0.1), 0 4px 20px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.welcome-card .wc-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.welcome-card .wc-title {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.welcome-card .wc-desc {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.welcome-status {
  margin-top: 24px;
  display: flex;
  gap: 20px;
  font-size: 10px;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}

.welcome-status .ws-item {
  font-family: var(--font);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.welcome-status .ws-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: pulse 2s infinite;
}

.welcome-status .ws-dot.warn {
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange-glow);
}

.welcome-status .ws-dot.connected {
  background: var(--green);
  box-shadow: 0 0 6px var(--accent-glow);
}

.welcome-status .ws-dot.disconnected {
  background: var(--red);
  box-shadow: 0 0 6px rgba(255,49,49,0.3);
  animation: none;
}

.empty-state .icon { display: none; }
.empty-state > p { display: none; }

.onboarding {
  display: none;
}

/* Compose Area */
.compose {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(14,16,22,0.98);
  backdrop-filter: blur(8px);
}

.compose-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* + expander button */
.compose-plus {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1;
  padding: 0;
}
.compose-plus:hover { border-color: var(--accent); color: var(--accent); }
.compose-plus.open {
  transform: rotate(45deg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Expander panel */
.compose-expander {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.2s ease;
  flex-shrink: 0;
}
.compose-expander.expanded {
  max-width: 130px;
}

.compose textarea {
  flex: 1;
  background: rgba(20,24,32,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: var(--font);
  resize: none;
  min-height: 44px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.5;
}

.compose textarea:focus {
  border-color: rgba(0,217,126,0.35);
  box-shadow: 0 0 0 3px rgba(0,217,126,0.06), inset 0 0 12px rgba(0,217,126,0.03);
}

/* AI split button in compose row */
.compose-ai-wrap {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.compose-ai-btn {
  background: var(--orange);
  color: #000;
  border: none;
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 0 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  min-height: 38px;
  letter-spacing: 0;
}
.compose-ai-btn:hover { background: #ffa033; transform: scale(1.04); }
.compose-ai-btn:active { transform: scale(0.97); }
.compose-ai-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.compose-ai-chevron {
  background: #d4761a;
  color: #000;
  border: none;
  border-left: 1px solid rgba(0,0,0,0.2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 8px;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 38px;
}
.compose-ai-chevron:hover { background: #bf6b16; }

.compose-buttons {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Compose Tools Row */
.compose-tools {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.compose-tools .tool-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.compose-tools .tool-btn:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--accent-dim);
}

/* Deep Suggest Panel */
.suggest-panel {
  display: none;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  max-height: 280px;
  overflow-y: auto;
}
.suggest-panel.visible { display: block; }

.suggest-analysis {
  /* no box — just a plain container for reply cards */
}
.suggest-analysis .sa-reading { display: none; }
.suggest-analysis .sa-meta { display: none; }
.suggest-analysis .sa-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sa-tag.intent { background: rgba(0,217,126,0.1); color: var(--accent); }
.sa-tag.sentiment-positive { background: rgba(0,217,126,0.1); color: var(--green); }
.sa-tag.sentiment-negative { background: rgba(255,49,49,0.15); color: var(--red); }
.sa-tag.sentiment-neutral { background: rgba(90,122,90,0.15); color: var(--text-muted); }
.sa-tag.sentiment-mixed { background: rgba(255,140,0,0.15); color: var(--orange); }
.sa-tag.urgency-high { background: rgba(255,49,49,0.2); color: var(--red); }
.sa-tag.urgency-medium { background: rgba(255,140,0,0.15); color: var(--orange); }
.sa-tag.urgency-low { background: rgba(90,122,90,0.1); color: var(--text-muted); }

.suggest-section {
  margin-bottom: 8px;
}
.suggest-section-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.suggest-quick-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.suggest-quick-btn {
  padding: 6px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}
.suggest-quick-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.suggest-quick-btn:active { transform: scale(0.97); }
.suggest-quick-btn.empty { color: var(--text-muted); font-style: italic; }

.suggest-reply-card {
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 6px;
}
.suggest-reply-card:hover { border-color: var(--accent); background: rgba(0,217,126,0.04); }
.suggest-reply-card:active { transform: scale(0.99); }

.suggest-reply-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--orange);
  margin-bottom: 6px;
}

.suggest-reply-text {
  color: var(--text);
}

.suggest-prompt-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.suggest-prompt-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
}
.suggest-prompt-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(255,140,0,0.2);
}
.suggest-prompt-input::placeholder { color: var(--text-muted); }

.suggest-close {
  text-align: right;
  margin-top: 6px;
}

/* AI Config Panel */
.ai-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ai-config-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
}
.ai-config-section {
  margin-bottom: 14px;
}
.ai-config-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.ai-config-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-chip {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-chip:hover {
  border-color: var(--orange);
  color: var(--text);
}
.ai-chip.active {
  border-color: var(--orange);
  background: rgba(255,140,0,0.12);
  color: var(--orange);
  font-weight: 600;
}
.ai-config-select {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.ai-config-select:focus { border-color: var(--orange); }
.ai-config-select optgroup { color: var(--text-muted); font-weight: 600; }
.ai-config-select option { color: var(--text); background: var(--bg-secondary); }
.ai-config-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  outline: none;
}
.ai-config-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: 2px solid var(--bg-secondary);
}
.ai-config-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.ai-config-input:focus { border-color: var(--orange); }
.ai-config-input::placeholder { color: var(--text-muted); }
.ai-config-run {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius);
  background: var(--orange);
  color: #000;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-config-run:hover { box-shadow: 0 0 16px rgba(255,140,0,0.3); }
.ai-config-run:disabled { opacity: 0.5; cursor: not-allowed; }

/* Compose: streamlined */
.compose-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.compose-send:hover {
  border-color: rgba(0,217,126,0.3);
  color: var(--accent);
  background: rgba(0,217,126,0.06);
}

/* Draft Display */
.draft-area {
  display: none;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  position: relative;
}

.draft-area.visible { display: block; }

.draft-area .draft-label {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.draft-area .draft-text {
  color: var(--text);
  white-space: pre-wrap;
}

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

/* Analysis styles */
.analysis-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.analysis-stat .label { color: var(--text-muted); }
.analysis-stat .value { color: var(--text); font-weight: 500; }

.analysis-section {
  margin-top: 10px;
}
.analysis-section h4 {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0;
  margin-bottom: 6px;
}
.analysis-tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(0,217,126,0.1);
  color: var(--accent);
  border-radius: 12px;
  font-size: 10px;
  margin: 2px 4px 2px 0;
}
.analysis-tag.sentiment-positive { background: rgba(0,217,126,0.1); color: var(--green); }
.analysis-tag.sentiment-negative { background: rgba(255,49,49,0.15); color: var(--red); }
.analysis-tag.sentiment-mixed { background: rgba(255,140,0,0.15); color: var(--orange); }

.reply-option {
  padding: 8px 12px;
  margin: 6px 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
}
.reply-option:hover { border-color: var(--accent); }
.reply-option .option-tone {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0;
  margin-bottom: 4px;
}
.reply-option .option-text { font-size: 12px; }

/* Auto-Respond Bar */
.auto-respond-bar {
  padding: 8px 16px;
  background: rgba(0,217,126,0.05);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.ar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ar-backlog-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 10px;
}
.ar-backlog-btn {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ar-backlog-btn:hover { border-color: var(--accent); color: var(--accent); }
.ar-backlog-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
.ar-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.ar-pending-item {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ar-pending-item .ar-cancel {
  color: var(--red);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

/* Monitor Badge */
.monitor-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.monitor-badge.sentiment-positive { background: rgba(0,217,126,0.1); color: var(--green); }
.monitor-badge.sentiment-negative { background: rgba(255,49,49,0.15); color: var(--red); }
.monitor-badge.sentiment-neutral { background: rgba(90,122,90,0.15); color: var(--text-muted); }
.monitor-badge.sentiment-mixed { background: rgba(255,140,0,0.15); color: var(--orange); }
.monitor-badge.alert-urgent { background: rgba(255,49,49,0.2); color: var(--red); animation: pulse 1s infinite; }
.monitor-badge.alert-warning { background: rgba(255,140,0,0.2); color: var(--orange); }

/* Rule Card */
.rule-card {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 12px;
}
.rule-card .rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.rule-card .rule-mode {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
}
.rule-card .rule-target { color: var(--text-muted); font-size: 11px; }
.rule-card .rule-detail { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.rule-card .rule-actions { display: flex; gap: 6px; }

/* Log Entry */
.log-entry {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.log-entry .log-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
}
.log-entry .log-status.sent { background: rgba(0,217,126,0.1); color: var(--green); }
.log-entry .log-status.pending { background: rgba(255,140,0,0.15); color: var(--orange); }
.log-entry .log-status.failed { background: rgba(255,49,49,0.15); color: var(--red); }
.log-entry .log-status.cancelled { background: rgba(90,122,90,0.15); color: var(--text-muted); }

/* Buttons */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 15px rgba(0,217,126,0.2);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 30px rgba(0,217,126,0.45), 0 0 10px rgba(0,217,126,0.3); }

.btn-green {
  background: var(--green);
  color: #000;
  box-shadow: 0 0 12px rgba(0,217,126,0.2);
}
.btn-green:hover { background: #33ff66; }

.btn-orange {
  background: var(--orange);
  color: #000;
  box-shadow: 0 0 12px var(--orange-glow);
}
.btn-orange:hover { background: #ffa033; }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 8px; line-height: 1; }

/* More Menu (overflow) */
.more-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.more-menu-item:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.modal-overlay.visible { display: flex; }

.modal {
  background: var(--bg-secondary);
  border: 1px solid rgba(0,217,126,0.1);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(0,217,126,0.05);
}

.modal h3 {
  font-size: 17px;
  margin-bottom: 16px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-family: var(--font);
}

.modal label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-top: 12px;
  letter-spacing: 0;
}

.modal input, .modal textarea, .modal select {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
}

.modal input:focus, .modal textarea:focus, .modal select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0,217,126,0.1);
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  z-index: 200;
  transition: transform 0.3s;
  pointer-events: none;
}

.toast.visible { transform: translateX(-50%) translateY(0); }
.toast.success { border-color: var(--green); color: var(--green); }
.toast.error { border-color: var(--red); color: var(--red); }

/* Import area */
.import-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

/* ─── Panel Transition ─────────────────────────────────────── */
.panel-entering {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.panel-transition {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Mobile — Full-screen PWA experience */
@media (max-width: 768px) {
  .app {
    flex-direction: column;
    height: 100dvh;
  }

  .sidebar {
    width: 100%;
    min-width: 100%;
    height: 100dvh;
    border-right: none;
    border-bottom: none;
  }

  .sidebar-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .sbn-item { padding: 8px 4px; }
  .sbn-icon { font-size: 20px; }

  .sidebar.hidden { display: none; }

  .main {
    width: 100%;
    height: 100dvh;
  }
  .main.hidden { display: none; }

  .sidebar-header {
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .sidebar-actions {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
  }

  .sidebar-actions .btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  .sidebar-search {
    padding: 6px 12px;
  }

  .thread-list {
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

  .thread-item {
    padding: 14px 16px;
    min-height: 60px;
  }

  .message {
    max-width: 85%;
    font-size: 14px;
  }

  .main-header {
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    flex-wrap: wrap;
    gap: 8px;
  }

  .main-header-actions {
    gap: 2px;
  }

  .main-header-actions .btn {
    font-size: 11px;
    padding: 6px 8px;
  }

  /* Hide Pin + Find text on mobile — icon buttons are enough */
  #pinToggle, .main-header-actions .btn:nth-child(2) {
    display: none;
  }

  .messages-container {
    padding: 12px;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* Allow compression when iOS keyboard appears */
  }

  .compose {
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    flex-shrink: 0; /* Never compress — stays above keyboard */
  }

  .compose textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 40px;
  }

  .compose-buttons {
    gap: 4px;
  }

  .compose-buttons .btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  .btn { font-size: 12px; }

  .back-btn { display: inline-flex !important; }

  .welcome-brand { font-size: 28px; }
  .welcome-grid { grid-template-columns: 1fr; max-width: 280px; }
  .welcome-status { flex-direction: column; gap: 8px; }

  /* Modals full-width on mobile */
  .modal {
    max-width: 100% !important;
    width: 95vw;
    max-height: 85vh;
  }

  .search-modal {
    width: 100%;
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
  }

  .suggest-panel {
    max-height: 50vh;
  }

  .date-separator span {
    font-size: 9px;
  }
}

@media (min-width: 769px) {
  .back-btn { display: none !important; }
}

/* iOS standalone mode (PWA) */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
  .compose {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Image preview */
.image-preview {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-preview img {
  max-height: 80px;
  max-width: 120px;
  border-radius: 6px;
  object-fit: cover;
}

.image-preview-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  justify-content: space-between;
}

/* Drop overlay */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,217,126,0.08);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.drop-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.compose {
  position: relative;
}

.attach-btn {
  font-size: 18px !important;
  border: none !important;
}

/* Message images */
.message img.msg-image {
  max-width: 240px;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.message img.msg-image:hover {
  transform: scale(1.02);
}

/* Analyze panel purple accent */
.analysis-section h4 { color: #a855f7; }
.reply-option:hover { border-color: var(--orange); }
.reply-option .option-tone { color: var(--orange); }

/* ─── Command Center ─────────────────────────────────── */
.cmd-center {
  max-width: 680px !important;
  max-height: 85vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,217,126,0.15) !important;
  box-shadow: 0 0 60px rgba(0,217,126,0.08), 0 25px 50px rgba(0,0,0,0.5) !important;
  display: flex;
  flex-direction: column;
}

.cmd-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(0,217,126,0.06) 0%, rgba(255,140,0,0.04) 100%);
  border-bottom: 1px solid var(--border);
}

.cmd-header h3 {
  margin: 0 !important;
  font-size: 15px !important;
  letter-spacing: 0;
  font-weight: 700;
  font-family: var(--font);
}

.cmd-close {
  font-size: 9px !important;
  padding: 4px 10px !important;
  opacity: 0.5;
}
.cmd-close:hover { opacity: 1; }

.cmd-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow-x: auto;
}

.cmd-tab {
  flex: 1;
  padding: 10px 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  white-space: nowrap;
}

.cmd-tab:hover { color: var(--text); background: rgba(0,217,126,0.03); }

.cmd-tab.active {
  color: var(--accent);
  background: rgba(0,217,126,0.05);
}

.cmd-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 1px;
}

.cmd-stats {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.stat-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.stat-chip.sent { border-color: rgba(0,217,126,0.3); color: var(--green); }
.stat-chip.campaigns { border-color: rgba(255,140,0,0.3); color: var(--orange); }
.stat-chip.blocked { border-color: rgba(255,49,49,0.3); color: var(--red); }

.cmd-panel {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* Add Rule / Campaign Accordion */
.cmd-section-add {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.add-rule-header {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(0,217,126,0.03);
  transition: background 0.2s;
}
.add-rule-header:hover { background: rgba(0,217,126,0.06); }

.add-chevron {
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--text-muted);
}
.add-chevron.open { transform: rotate(180deg); }

.add-rule-form {
  padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  gap: 8px;
}

.btn-glow {
  box-shadow: 0 0 20px rgba(0,217,126,0.25), 0 0 40px rgba(0,217,126,0.1) !important;
}
.btn-glow:hover {
  box-shadow: 0 0 30px rgba(0,217,126,0.4), 0 0 60px rgba(0,217,126,0.15) !important;
}

.btn-red-glow {
  color: var(--red) !important;
  border-color: var(--red) !important;
}
.btn-red-glow:hover {
  background: rgba(255,49,49,0.1) !important;
  box-shadow: 0 0 15px rgba(255,49,49,0.2);
}

/* Rule Card V2 */
.rule-card-v2 {
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rule-card-v2:hover {
  border-color: rgba(0,217,126,0.2);
  box-shadow: 0 0 15px rgba(0,217,126,0.03);
}

.rule-v2-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.rule-v2-mode {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,217,126,0.1);
  color: var(--accent);
}

.rule-v2-target {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.rule-v2-instruction {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid rgba(0,217,126,0.05);
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.rule-v2-meta {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--text-muted);
}

.rule-v2-actions {
  display: flex;
  gap: 4px;
}

/* Rule editing */
.rule-edit-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--font);
  outline: none;
  resize: vertical;
  margin-bottom: 8px;
  box-shadow: 0 0 12px rgba(0,217,126,0.08);
}

/* Throttle Grid */
.throttle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.throttle-card {
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.throttle-card input {
  width: 70px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  padding: 6px;
  outline: none;
}
.throttle-card input:focus { border-color: var(--accent); box-shadow: 0 0 12px rgba(0,217,126,0.1); }

.throttle-label {
  font-size: 10px;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.throttle-live {
  grid-column: span 3;
  background: linear-gradient(135deg, rgba(0,217,126,0.04) 0%, rgba(255,140,0,0.03) 100%);
  border-color: rgba(0,217,126,0.15);
}

.throttle-live-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* Blacklist V2 */
.blacklist-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.blacklist-add select { flex: 1; }

.blacklist-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.blacklist-entry:hover { border-color: rgba(255,49,49,0.3); }

.bl-name { font-size: 12px; font-weight: 600; }
.bl-handle { font-size: 10px; color: var(--text-muted); }
.bl-flags { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Campaign Card V2 */
.campaign-card {
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.campaign-card:hover { border-color: rgba(255,140,0,0.2); }

.campaign-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.campaign-name { font-size: 13px; font-weight: 700; }

.campaign-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.campaign-status.active { background: rgba(0,217,126,0.1); color: var(--green); }
.campaign-status.paused { background: rgba(255,140,0,0.1); color: var(--orange); }
.campaign-status.completed { background: rgba(90,122,90,0.1); color: var(--text-muted); }

.campaign-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0;
}
.campaign-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--orange) 100%);
  border-radius: 2px;
  transition: width 0.3s;
  box-shadow: 0 0 8px var(--accent-glow);
}

.campaign-stats {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
}
.campaign-stats strong { color: var(--accent); }

.campaign-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

/* Activity Log V2 */
.log-entry-v2 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,217,126,0.06);
  font-size: 11px;
  align-items: flex-start;
}

.log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.log-dot.sent { background: var(--green); box-shadow: 0 0 6px var(--accent-glow); }
.log-dot.pending { background: var(--orange); box-shadow: 0 0 6px var(--orange-glow); }
.log-dot.failed { background: var(--red); }
.log-dot.cancelled { background: var(--text-muted); }

.log-content { flex: 1; }
.log-contact { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text); }
.log-reply { font-family: var(--font); font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.log-time { color: var(--text-muted); font-size: 10px; opacity: 0.6; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,217,126,0.15); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,217,126,0.3); }

/* Animations */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(0,217,126,0.1); }
  50% { box-shadow: 0 0 20px rgba(0,217,126,0.2); }
}

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

.cmd-panel > * {
  animation: slide-in 0.15s ease-out;
}

/* Global Search Modal */
.search-modal {
  max-width: 600px !important;
  width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.search-modal-header {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.search-modal-header input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
}

.search-modal-header input:focus {
  border-color: var(--accent);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 60vh;
}

.search-result {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.search-result:hover {
  background: var(--bg-tertiary);
}

.search-result .sr-contact {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}

.search-result .sr-body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.search-result .sr-body mark {
  background: rgba(255,140,0,0.3);
  color: var(--orange);
  border-radius: 2px;
  padding: 0 2px;
}

.search-result .sr-time {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .cmd-center { max-width: 100% !important; max-height: 90vh !important; width: 100% !important; border-radius: 12px 12px 0 0 !important; }
  .throttle-grid { grid-template-columns: repeat(2, 1fr); }
  .throttle-live { grid-column: span 2; }
  .form-row { flex-direction: column; gap: 0; }
}

/* ─── Contact Avatars ─────────────────────────────────── */
.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  letter-spacing: 0;
}

/* Thread item layout with avatar */
.thread-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.thread-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.thread-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.thread-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font);
}

.thread-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.thread-bottom-row .unread-badge {
  flex-shrink: 0;
}

.preview-you {
  color: var(--text-muted);
  font-weight: 600;
}

/* Remove old thread-meta since time is now in top row */
.thread-item .thread-meta {
  display: none;
}

/* ─── Scroll to Bottom FAB ────────────────────────────── */
.scroll-fab {
  position: absolute;
  bottom: 140px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.scroll-fab.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.scroll-fab:hover {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 20px var(--accent-glow);
}

.scroll-fab-arrow {
  line-height: 1;
}

.scroll-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ─── Message Flash Highlight (search) ─────────────────── */
@keyframes msg-flash {
  0% { background: rgba(255,140,0,0.3); }
  100% { background: transparent; }
}

.msg-flash {
  animation: msg-flash 2s ease-out;
}

/* ─── Thread Subtitle (last seen) ─────────────────────── */
.thread-subtitle {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* ─── Smooth Transitions ──────────────────────────────── */
.sidebar {
  transition: transform 0.25s ease;
}

.main {
  transition: transform 0.25s ease;
}

.message {
  animation: msg-appear 0.15s ease-out;
}

@keyframes msg-appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-overlay {
  transition: opacity 0.2s ease;
}

.modal {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal-overlay:not(.visible) .modal {
  transform: scale(0.95);
}

/* Thread selection glow effect */
.thread-item {
  transition: all 0.15s ease;
}

.thread-item:active {
  transform: scale(0.98);
}

/* activeThread container needs position:relative for FAB */
#activeThread {
  position: relative;
}

/* ─── Delivery Status Indicators ───────────────────────── */
.msg-status {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.6;
}

.msg-status .check {
  color: var(--accent);
}

.msg-status .check.delivered {
  color: var(--accent);
}

.msg-status .check.read {
  color: #3b82f6;
}

/* ─── Tapback Reactions ────────────────────────────────── */
.msg-reactions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.msg-reaction {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: default;
}

.msg-reaction .reaction-count {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Reaction picker */
.reaction-picker {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  animation: pop-in 0.15s ease-out;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.8); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.reaction-picker button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: transform 0.1s, background 0.1s;
}

.reaction-picker button:hover {
  transform: scale(1.3);
  background: rgba(255,255,255,0.1);
}

/* Reaction picker row in message actions */
.reaction-picker-row {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,217,126,0.06);
  justify-content: center;
}

.reaction-pick-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 8px;
  transition: transform 0.1s, background 0.15s;
  line-height: 1;
}

.reaction-pick-btn:hover {
  transform: scale(1.3);
  background: rgba(255,255,255,0.1);
}

.reaction-pick-btn.active {
  background: var(--accent-dim);
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px var(--accent);
}

/* Web UI reactions display */
.web-reactions {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.web-reaction {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 13px;
  cursor: default;
  animation: pop-in 0.15s ease-out;
}

/* ─── Message Grouping ────────────────────────────────── */
.message.msg-group-start {
  margin-bottom: 1px;
  border-radius: 12px 12px 12px 4px;
}
.message.msg-group-mid {
  margin-top: 0;
  margin-bottom: 1px;
  border-radius: 4px 12px 12px 4px;
}
.message.msg-group-end {
  margin-top: 0;
  border-radius: 4px 12px 12px 12px;
}
.message.out.msg-group-start {
  border-radius: 12px 12px 4px 12px;
}
.message.out.msg-group-mid {
  border-radius: 12px 4px 4px 12px;
}
.message.out.msg-group-end {
  border-radius: 12px 4px 12px 12px;
}

/* ─── Swipe Actions (Mobile) ──────────────────────────── */
.thread-item {
  position: relative;
  overflow: hidden;
}

.thread-item .thread-content,
.thread-item .contact-avatar {
  transition: transform 0.2s ease;
}

.swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
}

.swipe-btn {
  border: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 16px;
  cursor: pointer;
  color: #fff;
}

.swipe-pin {
  background: var(--orange);
}

.swipe-read {
  background: #3b82f6;
}

/* ─── Thread Context Menu ─────────────────────────────── */
.thread-context-menu {
  position: fixed;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  min-width: 150px;
  overflow: hidden;
  animation: pop-in 0.15s ease-out;
}

.thread-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.1s;
}

.thread-context-menu button:last-child {
  border-bottom: none;
}

.thread-context-menu button:hover,
.thread-context-menu button:active {
  background: var(--bg-tertiary);
}

/* ─── Skeleton Loading ────────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.skeleton-thread {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0a0f0a;
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s infinite;
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: #0a0f0a;
  animation: skeleton-pulse 1.5s infinite;
}

.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }

.skeleton-message {
  display: flex;
  margin-bottom: 6px;
}

.skeleton-message.out {
  justify-content: flex-end;
}

.skeleton-bubble {
  height: 32px;
  border-radius: 12px;
  background: #0a0f0a;
  animation: skeleton-pulse 1.5s infinite;
}

/* ─── Send Button Glow ────────────────────────────────── */
.compose-send.send-ready {
  background: var(--accent) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(0,217,126,0.1);
  transition: all 0.2s ease;
  animation: send-pulse 2s ease-in-out infinite;
}

@keyframes send-pulse {
  0%, 100% { box-shadow: 0 0 16px var(--accent-glow); }
  50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 40px rgba(0,217,126,0.15); }
}

/* ─── Typing Dots Animation ───────────────────────────── */
.typing-dots {
  display: inline-flex;
  gap: 3px;
  padding: 8px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 4px 0;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-bounce 1.4s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Quick Reply Chips ───────────────────────────────── */
.quick-replies {
  display: flex;
  gap: 8px;
  padding: 6px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.quick-replies::-webkit-scrollbar { display: none; }

/* Draft alternatives bar (shown after clicking ✦) */
.draft-alt-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: center;
  padding-right: 2px;
  opacity: 0.7;
}
.draft-alt-chip {
  background: var(--bg-tertiary);
  border: 1px solid var(--orange);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s, border-color 0.1s;
  flex-shrink: 0;
}
.draft-alt-chip:hover { background: rgba(255,140,0,0.15); border-color: #ffa033; }
.draft-alt-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  flex-shrink: 0;
  opacity: 0.6;
}
.draft-alt-dismiss:hover { opacity: 1; }

.quick-chip {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 5px 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.quick-chip:hover, .quick-chip:active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Scheduled Message Indicator ─────────────────────── */
.scheduled-indicator {
  padding: 4px 12px;
}

.scheduled-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,140,0,0.08);
  border: 1px solid rgba(255,140,0,0.2);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 11px;
}

.scheduled-icon {
  font-size: 12px;
}

.scheduled-text {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-time {
  color: var(--orange);
  font-size: 10px;
  white-space: nowrap;
}

/* ─── Schedule Button ─────────────────────────────────── */
.schedule-btn {
  font-size: 16px !important;
  border: none !important;
  padding: 10px !important;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.schedule-btn:hover { opacity: 1; }

/* ─── Media Gallery ───────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  max-height: 65vh;
}

.media-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg-tertiary);
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.media-item:hover img {
  transform: scale(1.05);
}

.media-date {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 9px;
  text-align: right;
}

/* Media Preview Overlay */
.media-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.media-preview-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}

.media-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-close:hover { background: rgba(255,255,255,0.4); }

@media (max-width: 768px) {
  .media-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
}

/* ─── Fix: .swiped state ──────────────────────────────── */
.thread-item.swiped {
  overflow: visible;
}

/* ─── Filter Bar (sidebar filter chips container) ────── */
.filter-bar {
  display: flex;
  gap: 3px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}

.filter-bar::-webkit-scrollbar { display: none; }

/* ─── Thread Filter Tabs ──────────────────────────────── */
.thread-filters {
  display: flex;
  gap: 3px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}

.thread-filters::-webkit-scrollbar { display: none; }

.filter-chip {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}

.filter-chip:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.filter-chip.active {
  background: rgba(0,217,126,0.1);
  color: var(--accent);
  border-color: rgba(0,217,126,0.2);
  font-weight: 600;
}

.filter-chip .filter-count {
  font-size: 9px;
  opacity: 0.7;
  margin-left: 3px;
}

.filter-sep {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.sort-chip {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}

.sort-chip:hover { color: var(--text); background: var(--bg-tertiary); }

.sort-chip.active { color: var(--accent); background: var(--accent-dim); }

/* ─── Draft Indicator ─────────────────────────────────── */
.draft-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

/* ─── Contact Photo Avatar ────────────────────────────── */
.contact-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ─── Link Preview Card ──────────────────────────────── */
.link-preview {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 11px;
  max-width: 280px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}

.link-preview:hover { border-color: var(--accent); }

.link-preview-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 1px;
}

.link-preview-text {
  flex: 1;
  overflow: hidden;
}

.link-preview-title {
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
}

.link-preview-domain {
  font-size: 9px;
  color: var(--text-muted);
}

/* ─── Thread Mute/Archive ─────────────────────────────── */
.thread-item.muted .thread-name {
  opacity: 0.5;
}

.thread-item.muted::after {
  content: '🔇';
  font-size: 10px;
  position: absolute;
  right: 8px;
  top: 8px;
}

.mute-icon {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 4px;
}

/* ─── In-Thread Search Bar ────────────────────────────── */
.thread-search-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  align-items: center;
  animation: slide-in 0.15s ease-out;
}

.thread-search-bar input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
}

.thread-search-bar input:focus { border-color: var(--accent); }

.thread-search-nav {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
}

.thread-search-nav button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}

.msg-search-highlight {
  background: rgba(255,140,0,0.4) !important;
  border: 1px solid var(--orange) !important;
}

/* ─── Pull to Refresh ─────────────────────────────────── */
.pull-indicator {
  text-align: center;
  padding: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: none;
  transition: transform 0.2s;
}

.pull-indicator.visible {
  display: block;
}

.pull-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Wave 5: Emoji Picker ───────────────────────────────── */
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  animation: slide-up 0.15s ease-out;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s, transform 0.1s;
}

.emoji-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.2); }
.emoji-btn:active { transform: scale(0.9); }

.emoji-btn-toggle {
  font-size: 16px !important;
  border: none !important;
  padding: 10px !important;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.emoji-btn-toggle:hover { opacity: 1; }

@media (max-width: 768px) {
  .emoji-picker-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ─── Wave 5: Mic / Voice Button ─────────────────────────── */
.mic-btn {
  font-size: 16px !important;
  border: none !important;
  padding: 10px !important;
  opacity: 0.6;
  transition: all 0.2s;
}
.mic-btn:hover { opacity: 1; }

.mic-btn.recording {
  opacity: 1;
  color: var(--red) !important;
  animation: pulse-mic 1s infinite;
}

@keyframes pulse-mic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,49,49,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,49,49,0); }
}

/* ─── Wave 5: Connection Status Banner ───────────────────── */
.connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  text-align: center;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: 0;
  background: var(--orange);
  color: var(--bg);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.connection-banner.visible {
  transform: translateY(0);
}

.connection-banner.offline {
  background: var(--red);
  color: #fff;
}

.connection-banner.reconnected {
  background: var(--green);
  color: var(--bg);
}

/* ─── Wave 5: Translate ──────────────────────────────────── */
.translate-loading {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.translated-text {
  color: var(--text);
}

.translate-badge {
  font-size: 9px;
  color: var(--accent);
  margin-top: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.translate-badge:hover { opacity: 1; }

/* ─── Wave 5: Link Preview Description ───────────────────── */
.link-preview-desc {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.link-preview-slot {
  display: block;
}

/* ─── Wave 5: Typing Message Alignment ───────────────────── */
.typing-message {
  align-self: flex-start;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  padding: 6px 14px;
}

/* Auto-suggest loading animation */
@keyframes blink {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

/* ─── Smart Compose: Ghost Text ──────────────────────── */
.ghost-text-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ghost-text-wrapper textarea {
  position: relative;
  z-index: 1;
  background: transparent;
  width: 100%;
}

.ghost-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  pointer-events: none;
  z-index: 0;
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 14px;
  font-family: var(--font);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 12px;
}

/* ─── Thread Categories ──────────────────────────────── */
.thread-categories {
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.thread-categories::-webkit-scrollbar { display: none; }

.category-chip {
  background: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3px 10px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}

.category-chip:hover { border-color: var(--accent); color: var(--text); }

.category-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ─── Health Ring on Thread Avatars ───────────────────── */
.thread-avatar-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.health-ring {
  display: none; /* Removed: visual clutter on thread items */
}

/* ─── Analytics Dashboard ────────────────────────────── */
.analytics-header {
  font-family: var(--font);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.analytics-header h3 {
  margin: 0;
}

.analytics-period-btn {
  font-family: var(--font);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.analytics-period-btn.active {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
}

.analytics-content {
  font-family: var(--font);
  max-height: 65vh;
  overflow-y: auto;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.analytics-stat-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.analytics-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}

.analytics-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0;
}

.analytics-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  margin: 16px 0 8px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100px;
  padding: 8px 0;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.chart-bar-stack {
  display: flex;
  gap: 1px;
  align-items: flex-end;
  width: 100%;
  justify-content: center;
}

.chart-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  max-width: 12px;
  transition: height 0.3s;
}

.chart-bar.bar-in { background: var(--accent); }
.chart-bar.bar-out { background: var(--orange); }

.chart-bar-label {
  font-size: 8px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.top-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.top-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.top-contact-bar {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}

.top-contact-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--orange));
  border-radius: 3px;
  transition: width 0.3s;
}

.top-contact-count {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: right;
}

.ar-stats-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ar-stat-chip {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
}

.ar-stat-chip .ar-stat-count {
  color: var(--accent);
  font-weight: 700;
}

/* ─── Sort Bar ────────────────────────────────────────── */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
}

.sort-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0;
  font-weight: 700;
  margin-right: 4px;
}

.sort-chip {
  background: none;
  border: none;
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.sort-chip:hover { color: var(--text); }
.sort-chip.active { background: var(--accent-dim); color: var(--accent); box-shadow: 0 0 6px rgba(0,217,126,0.2); }

/* ─── Command Palette ────────────────────────────────── */
#commandPalette.visible {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#commandPalette .modal {
  animation: palette-in 0.15s ease-out;
  border: 1px solid rgba(0,217,126,0.2);
  box-shadow: 0 0 30px rgba(0,217,126,0.06);
}

@keyframes palette-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.command-palette-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.command-palette-icon {
  font-size: 16px;
  color: var(--text-muted);
  font-family: var(--font);
}

.command-palette-input-row input {
  font-family: var(--font);
  font-size: 15px;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  width: 100%;
}

.command-palette-input-row input::placeholder {
  color: var(--text-muted);
}

.command-palette-results {
  max-height: 320px;
  overflow-y: auto;
}

.command-item {
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(0,217,126,0.04);
}

.command-item:hover, .command-item.selected {
  background: var(--accent-dim);
}

.command-item-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.command-item-text {
  flex: 1;
  min-width: 0;
}

.command-item-label {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-item-desc {
  font-size: 10px;
  color: var(--text-muted);
}

.command-item-shortcut {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font);
  white-space: nowrap;
}

/* ─── Keyboard Shortcuts Help ────────────────────────── */
.shortcuts-list {
  padding: 12px 16px;
}

.shortcut-group {
  margin-bottom: 16px;
}

.shortcut-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-bottom: 8px;
}

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

.shortcut-keys {
  display: flex;
  gap: 3px;
}

.shortcut-keys kbd {
  display: inline-block;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--font);
  color: var(--text);
  min-width: 20px;
  text-align: center;
}

/* ─── Category Badges ────────────────────────────────── */
.category-badge {
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-left: 4px;
  background: var(--accent);
  color: var(--bg);
}

/* ─── Thread Switch Transition ────────────────────────── */
#messagesContainer {
  transition: opacity 0.15s ease-out;
}

#messagesContainer.switching {
  opacity: 0.3;
}

/* ─── Welcome Shortcuts ──────────────────────────────── */
.welcome-shortcuts {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.ws-shortcut {
  font-family: var(--font);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.ws-shortcut:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.ws-shortcut kbd {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--font);
}

/* ─── Bulk Select Mode ────────────────────────────────── */
.thread-item.bulk-selected {
  background: var(--accent-dim) !important;
  border-left: 3px solid var(--accent);
}

.thread-item.bulk-selected::before {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* ─── Snooze Indicator ───────────────────────────────── */
.thread-item .mute-icon[title="Snoozed"] {
  animation: pulse-snooze 2s infinite;
}

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

/* Toast warning state */
.toast.warning {
  border-color: var(--orange);
  color: var(--orange);
}

/* ─── Toast — hacker terminal border ─────────────────── */
.toast {
  border: 1px solid rgba(0,217,126,0.15);
}

/* ─── AR Stats Dashboard ──────────────────────────────── */
.ar-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.ar-dash-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.ar-dash-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.ar-dash-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0;
}

.ar-dash-section {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.ar-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  padding: 4px 0;
}

.ar-dash-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ar-dash-bar-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 60px;
}

.ar-dash-bar-label {
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.ar-dash-contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ar-dash-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.ar-dash-contact-name {
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.ar-dash-contact-bar {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}

.ar-dash-contact-count {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 24px;
  text-align: right;
}

.ar-dash-rules {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ar-dash-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 11px;
}

.ar-dash-rule-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.ar-dash-rule-uses {
  color: var(--text-muted);
  font-size: 10px;
}

.ar-dash-rule-rate {
  font-weight: 700;
  font-size: 11px;
  min-width: 32px;
  text-align: right;
}

/* ─── Message Hover Copy ──────────────────────────────── */
.message .msg-hover-actions {
  position: absolute;
  top: -4px;
  right: 8px;
  display: none;
  gap: 2px;
  z-index: 10;
}

.message:hover .msg-hover-actions {
  display: flex;
}

.msg-hover-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.1s;
  line-height: 1;
}

.msg-hover-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ─── Enhanced Read Receipts ──────────────────────────── */
.msg-status .check.read {
  animation: read-pulse 0.4s ease-out;
}

@keyframes read-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #60a5fa; }
  100% { transform: scale(1); }
}

.msg-status .check.delivered {
  animation: deliver-fade 0.3s ease-out;
}

@keyframes deliver-fade {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Message sent flash */
.message.msg-just-sent {
  animation: msg-sent-flash 0.5s ease-out;
}

@keyframes msg-sent-flash {
  0% { background: var(--accent); transform: translateY(4px); opacity: 0.8; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Thread item new message pulse */
.thread-item.thread-new-msg {
  animation: thread-pulse 0.4s ease-out;
}

@keyframes thread-pulse {
  0% { background: var(--accent-dim); }
  100% { background: transparent; }
}

/* Smooth scrollbar styling */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

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

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.thread-list::-webkit-scrollbar {
  width: 4px;
}

.thread-list::-webkit-scrollbar-track {
  background: transparent;
}

.thread-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* ─── Empty State ─────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  animation: fade-in 0.3s ease-out;
}

.empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.7;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

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

.empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── Message Status Tooltip ──────────────────────────── */
.msg-status {
  cursor: default;
  position: relative;
}

.msg-status:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 9px;
  white-space: nowrap;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 20;
}

/* ─── Premium Aesthetic Polish ──────────────────────────── */
.sidebar {
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-glow), transparent 50%, var(--accent-glow));
  opacity: 0.2;
  pointer-events: none;
}

/* Accent line at top of app */
.app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--orange), var(--accent), transparent);
  z-index: 9999;
  opacity: 0.5;
}

/* Thread active indicator */
.thread-item.active {
  background: rgba(0,217,126,0.06);
  border-left: 3px solid var(--accent);
  box-shadow: none;
}

/* Modal backdrop blur */
.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Subtle glow on outgoing messages */
.message.out {
  box-shadow: 0 1px 8px rgba(0,217,126,0.06);
}

@media (max-width: 768px) {
  .analytics-grid { grid-template-columns: repeat(2, 1fr); }
  .ar-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .thread-categories { padding: 4px 8px; gap: 3px; }
  .category-chip { font-size: 9px; padding: 2px 8px; }
  .command-palette-input-row input { font-size: 16px; }
  .msg-hover-actions { display: none !important; }
  .sidebar::after { display: none; }
  .app::before { display: none; }
}

/* ─── Gmail Source Badge ─────────────────────────────── */
.source-badge {
  font-family: var(--font);
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  margin-left: 5px;
  vertical-align: middle;
}
.gmail-badge {
  background: rgba(234,67,53,0.12);
  color: #ea4335;
  border: 1px solid rgba(234,67,53,0.2);
}
.imessage-badge {
  background: rgba(52,199,89,0.12);
  color: #34c759;
  border: 1px solid rgba(52,199,89,0.25);
}

/* Gmail thread row left-border accent */
.thread-item.thread-gmail {
  border-left: 3px solid rgba(234,67,53,0.5);
  padding-left: calc(var(--thread-padding, 12px) - 3px);
}
.thread-item.thread-gmail.active {
  border-left-color: #ea4335;
}

/* Header platform badge (shown below thread title) */
.header-platform-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.2px;
}
.header-platform-badge.gmail {
  background: rgba(234,67,53,0.12);
  color: #ea4335;
  border: 1px solid rgba(234,67,53,0.3);
}
.header-platform-badge.imessage {
  background: rgba(52,199,89,0.1);
  color: #34c759;
  border: 1px solid rgba(52,199,89,0.25);
}

/* Gmail filter chip active state */
.filter-chip[data-filter="gmail"].active {
  background: rgba(234,67,53,0.12);
  color: #ea4335;
  border-color: rgba(234,67,53,0.3);
}

/* Gmail settings panel in Command Center */
.gmail-settings-form {
  padding: 12px 0 0;
}

.gmail-connected-card {
  background: rgba(234,67,53,0.08);
  border: 1px solid rgba(234,67,53,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.gmail-connected-email {
  font-size: 13px;
  font-weight: 600;
  color: #ea4335;
  margin-bottom: 4px;
}

.gmail-connected-meta {
  font-size: 10px;
  color: var(--text-muted);
}

/* (Design Upgrade section removed — all rules overridden by later PREMIUM VISUAL REDESIGN) */

/* ═══════════════════════════════════════════════════════════
   ★ UX/UI MEGA UPGRADE
   ═══════════════════════════════════════════════════════════ */

/* (thread-section-header + msgAppear removed — overridden by PRECISION PASS) */

/* ─── Compose char count ─────────────────────────────────── */
.compose-char-count {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.7;
  transition: color 0.2s;
}
.compose-char-count.compose-char-warn { color: var(--red); opacity: 1; }

/* ─── Empty state inside thread list ───────────────────────  */
.thread-list .empty-state {
  flex: none;
  padding: 32px 20px;
  background: none;
  margin-top: 12px;
}
.thread-list .empty-state .empty-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.thread-list .empty-state .empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.thread-list .empty-state .empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── Compose keyboard hint ──────────────────────────────── */
.compose-hint {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 4px 0;
  text-align: right;
  opacity: 0;
  transition: opacity 0.2s;
  user-select: none;
  font-family: var(--font);
}
.compose:focus-within .compose-hint { opacity: 0.6; }

/* (active thread name / hover actions / send feedback removed — overridden by PRECISION PASS) */

/* ─── Wider sidebar on large screens ────────────────────── */
@media (min-width: 1400px) {
  .sidebar { width: 340px; min-width: 340px; }
}

/* ─── Compose input transition ───────────────────────────── */
#composeInput { transition: height 0.1s ease; }
#composeInput::placeholder { opacity: 0.6; }

/* (Platform Inbox Switcher removed — overridden by DEFINITIVE PLATFORM BAR + UX POLISH Task 8) */

/* ─── AI Status Bar ───────────────────────────────────── */
.ai-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0,217,126,0.04);
  border-top: 1px solid rgba(0,217,126,0.1);
  font-size: 11px;
  color: var(--text-secondary);
  min-height: 30px;
  transition: background 0.3s, color 0.3s;
}
.ai-status-bar.ai-status-done {
  background: rgba(0,217,126,0.08);
  color: var(--accent);
}
.ai-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: aiDotPulse 1.2s ease-in-out infinite;
}
.ai-status-bar.ai-status-done .ai-status-dot {
  animation: none;
  opacity: 1;
}
@keyframes aiDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}
.ai-status-text {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.ai-status-bar:not(.ai-status-done) .ai-status-text {
  background: linear-gradient(90deg, var(--text-secondary) 0%, var(--text) 40%, var(--text-secondary) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: aiShimmer 2s linear infinite;
}
@keyframes aiShimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
.ai-status-source {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
  font-style: italic;
}

/* ─── Refine Bar ──────────────────────────────────────────── */
.refine-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0,217,126,0.06);
  background: rgba(255,255,255,0.02);
}
.refine-label {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-right: 2px;
  letter-spacing: 0;
}
.refine-btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0;
  white-space: nowrap;
}
.refine-btn:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(246,166,35,0.08);
}
.refine-btn:disabled { opacity: 0.4; cursor: default; }
.refine-redo {
  border-color: rgba(0,217,126,0.07);
  color: var(--text-muted);
}
.refine-dismiss {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.5;
  font-family: inherit;
}
.refine-dismiss:hover { opacity: 1; }
:root[data-theme="light"] .refine-bar {
  border-top-color: rgba(0,0,0,0.07);
  background: rgba(0,0,0,0.02);
}
:root[data-theme="light"] .refine-btn {
  border-color: rgba(0,0,0,0.15);
  color: #555;
}
:root[data-theme="light"] .refine-btn:hover:not(:disabled) {
  border-color: #007aff;
  color: #007aff;
  background: rgba(0,122,255,0.06);
}

/* ─── Urgency Dots ─────────────────────────────────────── */
.needs-reply-dot.urgency-yellow { color: #f5c518; }
.needs-reply-dot.urgency-orange { color: #ff9500; }
.needs-reply-dot.urgency-red    { color: #ff3b30; animation: urgencyPulse 2s ease-in-out infinite; }
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── Contact Notes Bar ────────────────────────────────── */
.contact-notes-bar {
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.contact-notes-icon {
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}
.contact-notes-input {
  flex: 1;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  min-width: 0;
  transition: color 0.2s;
}
.contact-notes-input:focus {
  color: var(--text-secondary);
}
.contact-notes-input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
  font-style: italic;
}
:root[data-theme="light"] .contact-notes-input { color: #888; }
:root[data-theme="light"] .contact-notes-input:focus { color: #444; }

/* ═══════════════════════════════════════════════════════════
   ✦ AI DRAWER — Complete Redesign
   ═══════════════════════════════════════════════════════════ */

.ai-drawer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
  border-top: 1px solid var(--border);
  border: 1px solid rgba(0,217,126,0.1);
  background: var(--bg-secondary);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}
.ai-drawer.open {
  max-height: 480px;
  opacity: 1;
  border-top-color: rgba(0,217,126,0.18);
  box-shadow: 0 -6px 32px rgba(0,0,0,0.5);
}

/* Drag pill */
.ai-drawer-pill {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  margin: 10px auto 0;
  cursor: pointer;
  transition: background 0.2s;
}
.ai-drawer-pill:hover { background: rgba(255,255,255,0.25); }

/* Header row */
.ai-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
}
.ai-head-left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ai-glyph {
  font-size: 16px;
  color: var(--orange);
  filter: drop-shadow(0 0 6px rgba(0,217,126,0.5));
  animation: glyphPulse 3s ease-in-out infinite;
}
@keyframes glyphPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(0,217,126,0.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(0,217,126,0.9)); }
}
.ai-drawer-ttl {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.ai-src-tag {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  background: rgba(0,217,126,0.1);
  border: 1px solid rgba(0,217,126,0.2);
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 500;
  min-width: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.ai-src-tag:empty { display: none; }

.ai-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Deep mode toggle */
.ai-deep-btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(0,217,126,0.08);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-deep-btn:hover { border-color: #bf5af2; color: #bf5af2; }
.ai-deep-btn.active {
  background: rgba(191,90,242,0.15);
  border-color: #bf5af2;
  color: #bf5af2;
  box-shadow: 0 0 12px rgba(191,90,242,0.3);
}
.ai-drawer-x {
  width: 24px; height: 24px;
  border: none;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
}
.ai-drawer-x:hover { background: rgba(255,255,255,0.12); color: var(--text); }

/* AI Reading strip */
.ai-reading-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 7px;
  background: rgba(0,217,126,0.04);
  border-top: 1px solid rgba(0,217,126,0.08);
  border-bottom: 1px solid rgba(0,217,126,0.08);
  font-size: 11px;
  min-height: 32px;
}
.ai-reading-icon { font-size: 13px; flex-shrink: 0; }
.ai-reading-text {
  color: var(--text-secondary);
  flex: 1;
  line-height: 1.4;
  font-style: italic;
}
.ai-reading-meta {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Reply Cards ─────────────────────────────────── */
.ai-cards-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  min-height: 130px;
  align-items: flex-start;
}
.ai-cards-row::-webkit-scrollbar { display: none; }

.ai-card {
  flex: 0 0 195px;
  scroll-snap-align: start;
  border: 1px solid rgba(0,217,126,0.1);
  border-radius: 14px;
  padding: 12px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
  position: relative;
  min-height: 110px;
}
.ai-card:hover {
  border-color: rgba(0,217,126,0.25);
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0,217,126,0.08), 0 8px 20px rgba(0,0,0,0.35);
}
.ai-card:active { transform: translateY(0) scale(0.98); }
.ai-card-lead {
  flex: 0 0 215px;
  border-color: rgba(0,217,126,0.2);
  background: rgba(0,217,126,0.03);
}
.ai-card-lead::after {
  content: '★';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 9px;
  color: var(--accent);
  opacity: 0.6;
}
.ai-card-selected {
  border-color: var(--c, var(--accent)) !important;
  box-shadow: 0 0 0 2px rgba(var(--c, 0,255,65), 0.15), 0 8px 20px rgba(0,0,0,0.3);
}

.ai-card-tone {
  font-size: 10px;
  font-weight: 700;
  color: var(--c, var(--accent));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ai-card-tone::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: 0 0 6px var(--c, var(--accent));
  flex-shrink: 0;
}

.ai-card-body {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.ai-card-use {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  text-align: right;
  transition: opacity 0.15s;
  font-style: italic;
}
.ai-card:hover .ai-card-use { opacity: 0.6; }

/* Loading state */
.ai-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  min-width: 100%;
}
.ai-loading-dots {
  display: flex;
  gap: 6px;
}
.ai-loading-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: aiDotBounce 1.2s ease-in-out infinite;
}
.ai-loading-dots span:nth-child(2) { animation-delay: 0.18s; }
.ai-loading-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiDotBounce {
  0%,80%,100% { transform: scale(0.5); opacity: 0.4; }
  40%          { transform: scale(1.1); opacity: 1; }
}
.ai-loading-text {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  font-style: italic;
}
.ai-no-replies {
  font-size: 12px;
  color: var(--text-muted);
  padding: 24px;
  text-align: center;
  font-style: italic;
}

/* ─── Guide Bar (instruction input) ──────────────── */
.ai-guide-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(0,217,126,0.05);
}
.ai-guide-spark {
  font-size: 14px;
  opacity: 0.35;
  flex-shrink: 0;
}
.ai-guide-input {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,217,126,0.06);
  border-radius: 10px;
  padding: 6px 10px;
  color: var(--text-secondary);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.ai-guide-input:focus {
  border-color: rgba(0,217,126,0.3);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.ai-guide-input::placeholder { color: var(--text-muted); opacity: 0.55; }
.ai-guide-btn {
  font-family: var(--font);
  width: 30px; height: 30px;
  border: 1px solid rgba(0,217,126,0.2);
  border-radius: 8px;
  background: rgba(0,217,126,0.06);
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ai-guide-btn:hover {
  background: rgba(0,217,126,0.14);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0,217,126,0.2);
}

/* ─── Light theme overrides ───────────────────────── */
:root[data-theme="light"] .ai-drawer {
  background: linear-gradient(180deg, #f5f5fa 0%, #efeff4 100%);
  border-top-color: rgba(0,122,255,0.2);
}
:root[data-theme="light"] .ai-drawer.open { box-shadow: 0 -4px 20px rgba(0,0,0,0.1); }
:root[data-theme="light"] .ai-glyph { color: #007aff; filter: drop-shadow(0 0 5px rgba(0,122,255,0.4)); }
:root[data-theme="light"] .ai-src-tag { color: #007aff; background: rgba(0,122,255,0.08); border-color: rgba(0,122,255,0.2); }
:root[data-theme="light"] .ai-reading-bar { background: rgba(0,122,255,0.04); border-color: rgba(0,122,255,0.1); }
:root[data-theme="light"] .ai-card { border-color: rgba(0,0,0,0.1); background: #fff; }
:root[data-theme="light"] .ai-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
:root[data-theme="light"] .ai-card-lead { border-color: rgba(0,122,255,0.25); background: rgba(0,122,255,0.02); }
:root[data-theme="light"] .ai-card-lead::after { color: #007aff; }
:root[data-theme="light"] .ai-guide-input { background: #fff; border-color: rgba(0,0,0,0.12); }
:root[data-theme="light"] .ai-guide-input:focus { border-color: rgba(0,122,255,0.4); }
:root[data-theme="light"] .ai-guide-btn { border-color: rgba(0,122,255,0.25); background: rgba(0,122,255,0.06); color: #007aff; }
:root[data-theme="light"] .ai-deep-btn:hover { border-color: #7c3aed; color: #7c3aed; }
:root[data-theme="light"] .ai-deep-btn.active { background: rgba(124,58,237,0.1); border-color: #7c3aed; color: #7c3aed; }

/* ─── Sales Pipeline ─────────────────────────────────────── */
.prospect-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  cursor: pointer;
  margin-top: 3px;
  letter-spacing: 0.2px;
  transition: opacity 0.15s;
}
.prospect-badge:hover { opacity: 0.8; }

.ai-close-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0,122,255,0.12);
  color: #0a84ff;
  border: 1px solid rgba(0,122,255,0.3);
  cursor: pointer;
  transition: background 0.15s;
}
.ai-close-btn:hover { background: rgba(0,122,255,0.22); }

/* Pipeline view modal */
.pipeline-section { margin-bottom: 16px; }
.pipeline-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 16px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pipeline-count {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.pipeline-card {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.pipeline-card:hover { background: var(--bg-secondary); }
.pipeline-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pipeline-card-service { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.pipeline-card-notes {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-style: italic;
  opacity: 0.8;
}
.pipeline-card-edit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
}
.pipeline-card:hover .pipeline-card-edit { opacity: 1; }

/* ─── Facebook Messenger Platform ──────────────────────────── */
.source-badge.fb-badge {
  background: rgba(24,119,242,0.15);
  color: #4a9ff5;
  border: 1px solid rgba(24,119,242,0.25);
}
.source-badge.ig-badge {
  background: rgba(225,48,108,0.15);
  color: #E1306C;
  border: 1px solid rgba(225,48,108,0.25);
}
.source-badge.sms-badge {
  background: rgba(13,157,219,0.15);
  color: #0D9DDB;
  border: 1px solid rgba(13,157,219,0.25);
}
.source-badge.wa-badge {
  background: rgba(37,211,102,0.15);
  color: #25D366;
  border: 1px solid rgba(37,211,102,0.25);
}
.source-badge.web-badge {
  background: rgba(129,140,248,0.15);
  color: #818cf8;
  border: 1px solid rgba(129,140,248,0.25);
}
.source-badge.chat-badge {
  background: rgba(0,200,255,0.15);
  color: #00c8ff;
  border: 1px solid rgba(0,200,255,0.25);
}
.source-badge.email-badge {
  background: rgba(0,217,126,0.15);
  color: #00d97e;
  border: 1px solid rgba(0,217,126,0.25);
}
.source-badge.test-badge {
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.06);
}
.ai-badge {
  font-size: 9px;
  background: rgba(129,140,248,0.15);
  color: #818cf8;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.header-platform-badge.facebook {
  background: rgba(24,119,242,0.12);
  color: #1877f2;
  border-color: rgba(24,119,242,0.25);
}

/* Facebook filter chip */
.fb-filter-chip.active {
  background: rgba(24,119,242,0.15) !important;
  color: #1877f2 !important;
  border-color: rgba(24,119,242,0.35) !important;
}

/* ─── Welcome Logo Wrap ──────────────────────────────── */
.welcome-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.welcome-logo-svg {
  filter: drop-shadow(0 0 20px rgba(0,217,126,0.2));
}

/* ─── Compose Hint Dot ───────────────────────────────── */
.hint-dot {
  color: var(--text-muted);
  opacity: 0.4;
  margin: 0 2px;
}

/* ─── Auto Pill Label ────────────────────────────────── */
.auto-pill-label {
  font-family: var(--font);
}

/* ─── Command Input (standalone rule) ───────────────── */
#commandInput {
  font-family: var(--font);
  font-size: 15px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  flex: 1;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   ✦ CLIENT MANAGER CRM
   ═══════════════════════════════════════════════════════════ */

.clients-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.clients-summary {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
}

.clients-summary .cs-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.clients-summary .cs-val {
  font-weight: 700;
  color: var(--text);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.client-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.client-card:hover {
  border-color: var(--border-mid, var(--border));
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.client-card-stage {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stage-active { background: rgba(0,217,126,0.12); color: var(--accent); }
.stage-prospect { background: rgba(246,166,35,0.12); color: #f6a623; }
.stage-churned { background: rgba(248,81,73,0.1); color: var(--red); }

.client-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  padding-right: 60px;
}

.client-card-niche {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.client-card-niche a {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  margin-left: 6px;
}

.client-card-niche a:hover { text-decoration: underline; }

.client-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.client-metric {
  background: var(--bg-tertiary, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
}

.client-metric-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.client-metric-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.client-metric-val.accent { color: var(--accent); }

.client-card-deal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,217,126,0.06);
  border: 1px solid rgba(0,217,126,0.15);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.client-card-deal .deal-math {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: auto;
}

.client-card-notes {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.client-card-actions {
  display: flex;
  gap: 6px;
}

.client-card-actions .btn {
  flex: 1;
  font-size: 11px;
  padding: 6px 8px;
}

/* Revenue Calculator output */
.revenue-calc-output {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: none;
}

.revenue-calc-output.visible { display: block; }

.rc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.rc-row:last-child { border-bottom: none; }

.rc-label { color: var(--text-muted); }

.rc-val {
  font-weight: 700;
  color: var(--text);
}

.rc-val.big {
  font-size: 20px;
  color: var(--accent);
}

.rc-highlight {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(0,217,126,0.08);
  border: 1px solid rgba(0,217,126,0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   ✦ AI PROMPT LIBRARY
   ═══════════════════════════════════════════════════════════ */

.prompts-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.prompt-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 16px 0 8px;
}

.prompt-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.prompt-card:hover { border-color: var(--border-mid, var(--border)); }

.prompt-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.prompt-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.prompt-ctx-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.prompt-ctx-input {
  flex: 1;
  background: var(--bg-tertiary, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s;
}

.prompt-ctx-input:focus { border-color: var(--accent); }
.prompt-ctx-input::placeholder { color: var(--text-muted); }

.prompt-text {
  background: var(--bg-tertiary, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-dim, var(--text-muted));
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: 'SF Mono', 'Fira Code', monospace;
  max-height: 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 10px;
  min-height: 60px;
}

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

/* Field inputs for modals */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.field-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,217,126,0.1);
}

.field-input::placeholder { color: var(--text-muted); }

.field-input option {
  background: var(--bg-secondary);
  color: var(--text);
}

/* URL Analyzer panel */
.url-analyzer-panel {
  padding: 4px 0;
}

.url-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.url-input-row input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s;
}

.url-input-row input:focus { border-color: var(--accent); }
.url-input-row input::placeholder { color: var(--text-muted); }

.analyzer-result {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  animation: fadeSlideIn 0.3s ease;
}

.analyzer-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.analyzer-issue:last-child { border-bottom: none; }

.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-top: 4px;
  flex-shrink: 0;
}

.ai-dot.warn { background: #f6a623; }
.ai-dot.ok { background: var(--accent); }

.analyzer-issue-text { color: var(--text); line-height: 1.5; }
.analyzer-issue-fix { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Clients summary MRR highlight */
.cs-mrr .cs-val { color: var(--accent); font-weight: 800; }

/* ─── Thread Tags ────────────────────────────────────────── */
.thread-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  padding: 0 0 2px;
}

.thread-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,217,126,0.12);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.25);
  white-space: nowrap;
}

.thread-tag-hot-lead  { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.thread-tag-client    { background: rgba(16,185,129,0.12); color: #10b981; border-color: rgba(16,185,129,0.3); }
.thread-tag-personal  { background: rgba(139,92,246,0.12); color: #8b5cf6; border-color: rgba(139,92,246,0.3); }
.thread-tag-urgent    { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.thread-tag-prospect  { background: rgba(59,130,246,0.12); color: #3b82f6; border-color: rgba(59,130,246,0.3); }
.thread-tag-vip       { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.4); }
.thread-tag-cold      { background: rgba(107,114,128,0.12); color: #6b7280; border-color: rgba(107,114,128,0.3); }
.thread-tag-follow-up { background: rgba(6,182,212,0.12); color: #06b6d4; border-color: rgba(6,182,212,0.3); }

/* Tag Picker Modal */
.tag-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.tag-preset-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}

.tag-preset-btn:hover { border-color: var(--accent); color: var(--text); }
.tag-active { font-weight: 700; }

/* ─── Stale Prospects / Follow-up ───────────────────────── */
.stale-prospect-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
  margin-bottom: 6px;
}

/* ─── Client Checklist ───────────────────────────────────── */
.checklist-section-header {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.checklist-item {
  padding: 4px 0 4px 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  border-left: 2px solid var(--border);
  margin-bottom: 2px;
}

.checklist-item.done {
  color: var(--text-muted);
  border-left-color: var(--accent);
  text-decoration: line-through;
}

/* ─── Welcome Live Stats Bar ────────────────────────────── */
.welcome-live-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 8px;
  flex-wrap: wrap;
}

.wls-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 72px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.wls-item:hover { border-color: var(--accent); }

.wls-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 3px;
}

.wls-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.wls-urgent {
  border-color: var(--accent);
  background: rgba(0,217,126,0.06);
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,217,126,0.3); }
  50% { box-shadow: 0 0 12px 2px rgba(0,217,126,0.2); }
}

/* Pipeline engagement score badge */
.pipeline-engagement-score {
  font-size: 12px;
  font-weight: 800;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* Campaign reply rate highlight */
.campaign-reply-rate { color: var(--accent); font-weight: 600; }

/* ─── Unified Activity Feed ─────────────────────────────── */
.activity-event {
  display: flex;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.activity-event:last-child { border-bottom: none; }
.activity-clickable { cursor: pointer; }
.activity-clickable:hover { background: rgba(0,217,126,0.04); border-radius: 6px; }
.activity-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; margin-top: 1px; }
.activity-body { flex: 1; min-width: 0; }
.activity-header-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.activity-name { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-badge { font-size: 10px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.activity-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.activity-detail { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.activity-extra { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-style: italic; }

/* ─── Prospect Finder ───────────────────────────────────── */
.pipeline-finder-bar {
  margin-bottom: 10px;
}

.pipeline-finder-bar input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.pipeline-finder-bar input:focus { border-color: var(--accent); }
.pipeline-finder-bar input::placeholder { color: var(--text-muted); }

.prospect-finder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 4px;
  transition: border-color 0.15s;
}

.prospect-finder-card:hover { border-color: var(--accent); }

/* ─── Daily Brief ───────────────────────────────────────── */
.brief-stats-bar {
  display: flex;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
}

.brief-stat {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-right: 1px solid var(--border);
}

.brief-stat:last-child { border-right: none; }

.brief-stat span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 2px;
}

.brief-stat label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brief-stat.accent span { color: var(--accent); }

.brief-thread-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.brief-thread-card:hover { border-color: var(--accent); }

.brief-thread-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.brief-thread-msg {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.brief-thread-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── Site Mockup Generator ─────────────────────────────── */
.mockup-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 10px;
}

.mockup-result-card {
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
  animation: fadeSlideIn 0.3s ease;
}

.mockup-result-biz {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.mockup-result-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
}

.mockup-preview-url {
  flex: 1;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mockup-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}

/* ─── Pipeline Board (Command Center Tab) ───────────────── */
.pipeline-summary-bar {
  display: flex;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.pipeline-stat {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
}

.pipeline-stat:last-child { border-right: none; }

.pipeline-stat span {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 2px;
}

.pipeline-stat label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.pipeline-stat.won span { color: var(--accent); }

.pipeline-stage-section {
  margin-bottom: 14px;
}

.pipeline-stage-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pipeline-stage-count {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  color: var(--text-muted);
}

.pipeline-bulk-btn {
  font-size: 10px !important;
  padding: 3px 8px !important;
}

.pipeline-empty-stage {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0 10px;
  font-style: italic;
}

.pipeline-board-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pipeline-board-card:hover {
  border-color: var(--accent);
  background: rgba(0,217,126,0.04);
}

.pipeline-board-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.pipeline-board-service {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pipeline-board-notes {
  font-size: 11px;
  color: var(--text-dim, var(--text-muted));
  line-height: 1.5;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 5px;
}

.pipeline-board-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pipeline-stage-select {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-family: var(--font);
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
}

.pipeline-stage-select:focus { border-color: var(--accent); }
.pipeline-stage-select option { background: var(--bg-secondary); }

/* ─── Tag Filter Bar (sidebar) ──────────────────────────── */
.tag-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.tag-filter-bar::-webkit-scrollbar { display: none; }

.tag-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  white-space: nowrap;
}

.tag-filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,217,126,0.06);
}

.tag-filter-chip.tag-filter-active {
  font-weight: 700;
  color: var(--accent);
  border-color: rgba(0,217,126,0.3);
  background: rgba(0,217,126,0.08);
}

.tfc-count {
  font-size: 10px;
  opacity: 0.7;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0 4px;
}

/* ─── Sidebar Inbox Zero Button ──────────────────────────── */
.sidebar-inbox-zero-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.sidebar-inbox-zero-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Inbox Zero Modal ───────────────────────────────────── */
.inbox-zero-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
}

.inbox-zero-modal.visible {
  display: flex;
}

.inbox-zero-inner {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(520px, 95vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.inbox-zero-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.inbox-zero-progress {
  font-size: 12px;
  color: var(--text-muted);
}

.inbox-zero-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.iz-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.iz-contact {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.iz-time {
  font-size: 11px;
  color: var(--text-muted);
}

.iz-messages {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iz-msg {
  display: flex;
}

.iz-msg-in { justify-content: flex-start; }
.iz-msg-out { justify-content: flex-end; }

.iz-msg-bubble {
  max-width: 80%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.iz-msg-in .iz-msg-bubble {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text);
}

.iz-msg-out .iz-msg-bubble {
  background: var(--accent);
  color: #000;
}

.inbox-zero-reply-row {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.inbox-zero-reply-row textarea {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  padding: 8px 10px;
  resize: none;
  outline: none;
  min-height: 60px;
  max-height: 120px;
}

.inbox-zero-reply-row textarea:focus { border-color: var(--accent); }

.inbox-zero-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-direction: column;
}

/* ─── Stale Prospects Section ────────────────────────────── */
.stale-prospect-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stale-prospect-card .spc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.stale-prospect-card .spc-days {
  font-size: 11px;
  color: var(--red, #ef4444);
  font-weight: 600;
}

/* ─── AI Thread Summary (header) ────────────────────────── */
.thread-ai-summary {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
  font-style: italic;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* ─── Template Quick-Insert Panel ───────────────────────── */
.template-pick-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 0;
  max-height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUpPanel 0.18s ease;
}

@keyframes slideUpPanel {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tpp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tpp-list {
  overflow-y: auto;
  flex: 1;
}

.tpp-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.tpp-item:last-child { border-bottom: none; }

.tpp-item:hover {
  background: rgba(0,217,126,0.06);
}

.tpp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.tpp-preview {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ─── Tone Rewriter Popover ──────────────────────────────── */
.tone-rewriter-pop {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 10px 12px;
  animation: slideUpPanel 0.15s ease;
}

.trp-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trp-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.trp-btns button {
  flex: 1;
  min-width: calc(50% - 3px);
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.trp-btns button:hover {
  border-color: var(--accent);
  background: rgba(0,217,126,0.06);
}

/* ─── Smart Digest Bell + Drawer ────────────────────────── */
.digest-bell-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 8px 3px 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}

.digest-bell-btn:hover, .digest-bell-btn.digest-bell-urgent {
  border-color: #ef4444;
  color: #ef4444;
}

.digest-badge {
  font-size: 11px;
  font-weight: 800;
  color: #ef4444;
  line-height: 1;
}

.digest-drawer {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  max-height: 280px;
  overflow-y: auto;
  animation: slideDownDrawer 0.18s ease;
}

@keyframes slideDownDrawer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.digest-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 1;
}

.digest-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 6px 12px 4px;
}

.digest-section-label.urgent { color: #ef4444; }

.digest-thread-card {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.digest-thread-card:hover {
  background: rgba(0,217,126,0.06);
}

.dtc-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.dtc-stage {
  font-size: 10px;
  color: var(--accent);
  font-weight: 500;
}

.dtc-time {
  font-size: 10px;
  color: var(--text-muted);
}

.dtc-msg {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── AI Objection Detection Bar ────────────────────────── */
.ai-objection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255, 159, 10, 0.1);
  border-top: 1px solid rgba(255, 159, 10, 0.25);
  border-bottom: 1px solid rgba(255, 159, 10, 0.25);
}

.aob-icon { font-size: 14px; flex-shrink: 0; }

.aob-text {
  flex: 1;
  font-size: 12px;
  color: #ff9f0a;
  font-weight: 600;
}

.aob-btn {
  background: rgba(255, 159, 10, 0.15);
  border: 1px solid rgba(255, 159, 10, 0.4);
  border-radius: 6px;
  color: #ff9f0a;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
}

.aob-btn:hover { background: rgba(255, 159, 10, 0.3); }

/* ─── AI Health Mini-Chart ───────────────────────────────── */
.ai-health-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
}

.ahb-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ahb-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.ahb-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.ahb-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
}

.ahb-trend {
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

/* ─── Export Modal Format Buttons ───────────────────────── */
.export-format-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font);
  transition: border-color 0.15s, background 0.15s;
}

.export-format-btn:hover {
  border-color: var(--accent);
  background: rgba(0,217,126,0.05);
}

.efb-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  font-family: monospace;
  color: var(--accent);
  font-size: 14px;
  font-weight: 900;
}

.efb-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.efb-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Speed Mode Button ──────────────────────────────────── */
.ai-speed-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  transition: all 0.15s;
}

.ai-speed-btn:hover { border-color: #ff9f0a; color: #ff9f0a; }
.ai-speed-btn.active { background: rgba(255,159,10,0.15); border-color: #ff9f0a; color: #ff9f0a; }

/* ─── Revenue Goal Tracker ───────────────────────────────── */
.revenue-goal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.rgc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rgc-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.rgc-numbers {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rgc-actual {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.rgc-sep {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 300;
}

.rgc-goal {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline dotted;
}

.rgc-pct {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-muted);
  line-height: 1;
}

.rgc-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.rgc-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.5s ease;
}

.rgc-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Semantic Search Mode Bar ───────────────────────────── */
.search-mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(139,92,246,0.08);
  border-bottom: 1px solid rgba(139,92,246,0.2);
  font-size: 12px;
  color: #8b5cf6;
}

.smb-icon { font-size: 14px; flex-shrink: 0; }

.smb-text { font-weight: 500; }

.semantic-badge {
  font-size: 10px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  color: #8b5cf6;
  font-weight: 600;
  margin-left: 6px;
}

.semantic-result .sr-body {
  font-style: italic;
  color: var(--text);
}

/* ─── Lead Score Badge ───────────────────────────────────── */
.lead-score-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Campaign Analytics Funnel ─────────────────────────── */
.campaign-funnel-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.cfc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.cfc-funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.cfc-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfc-step-label {
  font-size: 10px;
  color: var(--text-muted);
  width: 64px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cfc-bar-outer {
  flex: 1;
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
  margin: 0 auto;
}

.cfc-bar-inner {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s ease;
}

.cfc-step-val {
  font-size: 12px;
  font-weight: 800;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.cfc-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.cfc-stats strong { color: var(--text); }

/* ─── Nudge Strip ────────────────────────────────────────── */
.nudge-strip {
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  animation: slideDownDrawer 0.2s ease;
}

.nudge-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #d97706;
}

.nudge-list {
  padding: 0 0 4px;
}

.nudge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  gap: 8px;
  border-top: 1px solid rgba(251,191,36,0.1);
}

.nudge-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

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

.nudge-days {
  font-size: 10px;
  color: #d97706;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(251,191,36,0.15);
  border-radius: 4px;
  padding: 1px 5px;
}

.nudge-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── Message Sentiment Dot ──────────────────────────────── */
.msg-sentiment-dot {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
  flex-shrink: 0;
}

.message.in {
  position: relative;
}

/* ─── New Contact Onboarding Banner ─────────────────────── */
.new-contact-banner {
  margin: 8px 12px 4px;
  background: linear-gradient(135deg, rgba(0,217,126,0.08), rgba(0,122,255,0.06));
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  animation: slideDownDrawer 0.2s ease;
}

.ncb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ncb-icon { font-size: 14px; }

.ncb-title {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.ncb-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
}

.ncb-body {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

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

/* ─── AI Summary Button in Guide Bar ────────────────────── */
.ai-summary-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font);
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.ai-summary-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── AI Deal Value Button ───────────────────────────────── */
.ai-value-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s, color 0.15s;
}

.ai-value-btn:hover {
  border-color: #34c759;
  color: #34c759;
}

/* ─── Reply Speed Badge (Task #48) ───────────────────────── */
.reply-speed-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
  border: 1px solid rgba(52, 199, 89, 0.3);
  border-radius: 10px;
  padding: 1px 7px;
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* ─── Quick AI Reply Chips (Task #50) ─────────────────────── */
.quick-chip-bar {
  display: flex;
  gap: 8px;
  padding: 8px 16px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  animation: fadeIn 0.2s ease;
}
.quick-chip-bar::-webkit-scrollbar { display: none; }

.quick-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 220px;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.quick-chip:hover, .quick-chip:active {
  border-color: var(--accent);
  background: rgba(0, 122, 255, 0.06);
}
.quick-chip.qc-primary {
  border-color: rgba(0, 122, 255, 0.4);
  background: rgba(0, 122, 255, 0.06);
}
.qc-tone {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qc-preview {
  font-size: 12px;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ─── Pipeline Stage Pill in Thread List (Task #51) ────────── */
.thread-stage-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  border: 1px solid;
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 16px;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ─── Seen-but-no-reply Hint (Task #53) ────────────────────── */
.seen-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 11px;
  color: var(--text-secondary, #8e8e93);
  background: rgba(255, 159, 10, 0.07);
  border-bottom: 1px solid rgba(255, 159, 10, 0.2);
  animation: fadeIn 0.2s ease;
}
.seen-hint .btn-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  padding: 0;
}
.seen-hint .btn-link:hover { opacity: 0.7; }

/* ─── Empty Thread State (Task #55) ────────────────────────── */
.empty-thread-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  height: 100%;
  min-height: 200px;
}
.ets-icon { font-size: 40px; margin-bottom: 12px; }
.ets-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ets-desc { font-size: 13px; color: var(--text-muted); }

/* ─── Pipeline Funnel Bars (Task #56) ───────────────────────── */
.pipeline-funnel-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.pfr-stage {}
.pfr-bar-wrap {
  height: 6px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.pfr-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.pfr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pfr-label { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.pfr-count { font-size: 11px; color: var(--text); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   PREMIUM VISUAL REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ─── New design tokens ────────────────────────────────────── */
:root {
  --bg: #050505;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #111111;
  --bg-elevated: #0e0e0e;
  --border: rgba(0,217,126,0.08);
  --border-bright: rgba(0,217,126,0.12);
  --text: #d0ffd0;
  --text-secondary: #5a8a5a;
  --text-muted: #3a5a3a;
  --accent: #00d97e;
  --accent-hover: #33ff66;
  --accent-dim: rgba(0,217,126,0.06);
  --accent-glow: rgba(0,217,126,0.35);
  --accent-glow-bright: rgba(0,217,126,0.5);
  --blue: #4d7bff;
  --blue-dim: rgba(77,123,255,0.08);
  --radius: 10px;
  --radius-lg: 14px;
  --font: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* (PREMIUM VISUAL REDESIGN element overrides removed — superseded by VOL. 2 + PRECISION PASS) */

/* ═══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN VOL. 2 — Deep polish
   ═══════════════════════════════════════════════════════════════ */

/* ─── Background elevation variable ─────────────────────────── */
:root { --bg-elevated: #0e0e0e; }

/* ─── Avatars: rounded square, gradient bg, crisp initials ──── */
.contact-avatar {
  border-radius: 11px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: rgba(255,255,255,0.97) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Inner gloss on every avatar */
.contact-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, transparent 55%);
  pointer-events: none;
}
.contact-avatar img {
  border-radius: 11px !important;
  object-fit: cover;
}

/* ─── Thread items: properly layered, tight ─────────────────── */
.thread-item {
  padding: 11px 12px 11px 14px !important;
  gap: 11px !important;
  border-bottom: 1px solid rgba(0,217,126,0.04) !important;
}
.thread-item:hover { background: rgba(255,255,255,0.022) !important; }
.thread-item.active {
  background: rgba(0,217,126,0.055) !important;
}

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

.thread-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}

.thread-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  flex: 1;
  min-width: 0;
}
.thread-item.has-unread .thread-name {
  font-weight: 700 !important;
  color: #fff !important;
}

.thread-time {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.2px;
}

.thread-preview {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.thread-item.has-unread .thread-preview {
  color: var(--text-secondary) !important;
}

/* ─── Platform source colors as left border accent ──────────── */
.thread-gmail {
  border-left: 2px solid rgba(234,67,53,0.4) !important;
}
.thread-gmail.active {
  border-left-color: rgba(234,67,53,0.8) !important;
  background: rgba(234,67,53,0.04) !important;
}

/* Gmail badge */
.gmail-badge {
  background: rgba(234,67,53,0.1) !important;
  color: #f28b82 !important;
  border: 1px solid rgba(234,67,53,0.2) !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
}
.fb-badge {
  background: rgba(77,123,255,0.1) !important;
  color: #7ba7ff !important;
  border: 1px solid rgba(77,123,255,0.2) !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
}

/* ─── Thread section headers (Today / Yesterday / etc.) ─────── */
.thread-section-header {
  padding: 10px 14px 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: var(--bg-secondary) !important;
  backdrop-filter: none !important;
}
.thread-section-header::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--border) !important;
}

/* ─── Welcome screen: dot-grid background ──────────────────── */
.empty-state {
  position: relative;
}
.empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,217,126,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.empty-state > * { position: relative; z-index: 1; }

/* ─── Welcome stat cards: platform-style glow items ─────────── */
#wlsNeedReply.wls-urgent {
  border-color: rgba(255,77,92,0.25) !important;
  background: rgba(255,77,92,0.04) !important;
}
#wlsNeedReply.wls-urgent .wls-val {
  color: #ff4d5c !important;
  text-shadow: 0 0 28px rgba(255,77,92,0.4) !important;
}
#wlsPipeline .wls-val { color: #4d7bff; text-shadow: 0 0 24px rgba(77,123,255,0.3); }
#wlsSentToday .wls-val { color: var(--accent); }
#wlsReceived .wls-val { color: var(--text-secondary); text-shadow: none; }

/* ─── Message bubbles: real depth ──────────────────────────── */
.messages-container { gap: 6px !important; }

.message {
  box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
.message.out {
  background: linear-gradient(135deg, rgba(0,217,126,0.16) 0%, rgba(0,180,90,0.09) 100%) !important;
  border: 1px solid rgba(0,217,126,0.2) !important;
}
.message.in {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-bright) !important;
}
.message .msg-time {
  font-size: 10px !important;
  opacity: 0.5 !important;
  color: inherit !important;
}

/* ─── Compose: elevated glass surface ───────────────────────── */
.compose {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 14px !important;
}
.compose-row { gap: 8px !important; align-items: flex-end !important; }

/* ─── AI Drawer: floating sheet ─────────────────────────────── */
.ai-drawer {
  border-radius: 16px 16px 0 0 !important;
  border-top: 1px solid var(--border-bright) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4), 0 -1px 0 var(--border-bright) !important;
  background: var(--bg-secondary) !important;
}
.ai-drawer-pill {
  width: 32px !important;
  height: 3px !important;
  background: var(--border-bright) !important;
  border-radius: 2px !important;
  margin: 8px auto 0 !important;
  cursor: grab !important;
  transition: background 0.15s !important;
}
.ai-drawer-pill:hover { background: var(--text-muted) !important; }
.ai-drawer-head {
  padding: 12px 16px 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ─── AI suggestion cards ────────────────────────────────────── */
.suggest-reply-card, .ai-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 12px !important;
  transition: all 0.18s !important;
}
.suggest-reply-card:hover, .ai-card:hover {
  border-color: rgba(0,217,126,0.35) !important;
  background: rgba(0,217,126,0.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 16px rgba(0,217,126,0.08) !important;
}

/* ─── Urgency coloring on needs-reply dots ───────────────────── */
.needs-reply-dot { font-size: 11px !important; opacity: 0.4 !important; }
.needs-reply-dot.urgency-red {
  color: #ff4d5c !important;
  opacity: 1 !important;
  text-shadow: 0 0 8px rgba(255,77,92,0.5);
}
.needs-reply-dot.urgency-orange {
  color: var(--orange) !important;
  opacity: 0.9 !important;
}
.needs-reply-dot.urgency-yellow {
  color: #ffd700 !important;
  opacity: 0.7 !important;
}

/* ─── Unread badge: bold pill ────────────────────────────────── */
.unread-badge {
  background: var(--accent) !important;
  color: #000 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  padding: 2px 6px !important;
  border-radius: 7px !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.4) !important;
  min-width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* ─── Quick chip bar (AI pre-loaded replies) ─────────────────── */
.quick-chip-bar {
  padding: 6px 14px !important;
  gap: 6px !important;
  border-bottom: 1px solid var(--border) !important;
}
.quick-chip {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  padding: 5px 14px !important;
  transition: all 0.15s !important;
  cursor: pointer !important;
}
.quick-chip:hover {
  border-color: rgba(0,217,126,0.3) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.04) !important;
}

/* ─── Draft dot on thread name ───────────────────────────────── */
.draft-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--orange) !important;
  border-radius: 50% !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  box-shadow: 0 0 6px rgba(246,166,35,0.5) !important;
}

/* ─── Thread tags ────────────────────────────────────────────── */
.thread-tags-row { gap: 4px !important; margin-top: 4px !important; }
.thread-tag {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--text-muted) !important;
  text-transform: lowercase !important;
  letter-spacing: 0.3px !important;
}

/* ─── Stage pills on thread names ───────────────────────────── */
.thread-stage-pill {
  font-size: 11px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

/* ─── Pinned thread accent ───────────────────────────────────── */
.thread-item.pinned {
  border-left: 2px solid rgba(246,166,35,0.5) !important;
  background: rgba(246,166,35,0.02) !important;
}

/* ─── Health ring on avatars ─────────────────────────────────── */
.thread-avatar-wrapper { flex-shrink: 0 !important; }
.health-ring {
  border-radius: 13px !important;
}

/* ─── Date separators in messages ────────────────────────────── */
.date-separator::before, .date-separator::after {
  background: var(--border) !important;
}
.date-separator span {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  background: var(--bg) !important;
  padding: 2px 12px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  letter-spacing: 0.3px !important;
  font-weight: 600 !important;
}

/* ─── Nudge strip: clean orange accent bar ───────────────────── */
.nudge-strip {
  border-bottom: 1px solid rgba(246,166,35,0.12) !important;
  background: rgba(246,166,35,0.02) !important;
}
.nudge-list { padding: 0 12px 8px !important; }
.nudge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,217,126,0.04);
}
.nudge-item:last-child { border-bottom: none; }

/* ─── Thread hover quick actions ────────────────────────────── */
.tha-btn {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 7px !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  transition: all 0.1s !important;
}
.tha-btn:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text) !important;
  border-color: rgba(0,217,126,0.3) !important;
}
.tha-btn.tha-draft:hover {
  background: rgba(246,166,35,0.1) !important;
  border-color: rgba(246,166,35,0.4) !important;
  color: var(--orange) !important;
}

/* ─── Status dot connected pulse ────────────────────────────── */
@keyframes connectedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,217,126,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(0,217,126,0); }
}
.sidebar-header .status-dot.connected {
  animation: connectedPulse 2.5s ease-in-out infinite !important;
}

/* ─── Focus visible: keyboard nav ────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(0,217,126,0.5) !important;
  outline-offset: 2px !important;
}

/* ─── Scrollbar for messages container ───────────────────────── */
.messages-container::-webkit-scrollbar { width: 3px; }
.messages-container::-webkit-scrollbar-track { background: transparent; }
.messages-container::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

/* ─── Thread list scrollbar ──────────────────────────────────── */
.thread-list::-webkit-scrollbar { width: 3px; }
.thread-list::-webkit-scrollbar-track { background: transparent; }
.thread-list::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

/* ─── Global input/select dark styling ───────────────────────── */
select, input[type="text"], input[type="number"], input[type="url"],
input[type="email"], input[type="password"], input[type="datetime-local"],
textarea.field-input, input.field-input {
  background: var(--bg) !important;
  border: 1px solid var(--border-bright) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
select:focus, input:focus, textarea:focus {
  border-color: rgba(0,217,126,0.35) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.07) !important;
  outline: none !important;
}

/* ─── Scroll to bottom FAB ───────────────────────────────────── */
.scroll-fab {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-bright) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  transition: all 0.2s !important;
}
.scroll-fab:hover {
  border-color: rgba(0,217,126,0.3) !important;
  color: var(--accent) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 12px rgba(0,217,126,0.15) !important;
}

/* ─── Connection banner ──────────────────────────────────────── */
.connection-banner {
  background: rgba(255,77,92,0.06) !important;
  border-bottom: 1px solid rgba(255,77,92,0.15) !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════
   END PREMIUM REDESIGN VOL. 2
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CA$H.BOT PRECISION PASS — Design System Tightening
   ═══════════════════════════════════════════════════════════════ */

/* ─── Missing variables & utility classes ──────────────────── */
:root {
  --text-secondary: #5a8a5a;
}
.hidden { display: none !important; }

/* ─── Smooth scroll on scrollable containers ───────────────── */
.messages-container { scroll-behavior: smooth; }
.thread-list { scroll-behavior: smooth; }

/* ─── THREAD LIST ──────────────────────────────────────────── */

/* Thread items: tightened padding, proper sizing */
.thread-item {
  padding: 12px 14px !important;
  gap: 11px !important;
  border-left: 3px solid transparent !important;
  transition: background 0.15s, border-color 0.15s !important;
  overflow: visible !important;
}

/* Avatar: 38px circle with bold initials */
.thread-item .contact-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.thread-item .contact-avatar img {
  border-radius: 50% !important;
}

/* Thread name: 14px / 600 weight */
.thread-name {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Thread preview: 12px muted */
.thread-preview {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* Thread time: 11px muted right-aligned */
.thread-time {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* Active thread: 3px accent left border + subtle tint */
.thread-item.active {
  border-left: 3px solid var(--accent) !important;
  background: rgba(0,217,126,0.045) !important;
}

/* Unread threads: white/700 name, accent left border */
.thread-item.has-unread {
  border-left-color: var(--accent) !important;
}
.thread-item.has-unread .thread-name {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Section headers: 10px uppercase, generous vertical margin */
.thread-section-header {
  padding: 16px 14px 6px !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  margin-top: 4px !important;
}

/* Hover actions: no clip on active items */
.thread-item { overflow: visible !important; }
.thread-hover-actions {
  transition: opacity 0.15s, transform 0.15s !important;
}

/* ─── MESSAGE BUBBLES ──────────────────────────────────────── */

/* Outbound: gradient accent, white text, tail radius */
.message.out {
  background: linear-gradient(135deg, #00c96d 0%, #00a855 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 16px !important;
  border-bottom-right-radius: 4px !important;
  max-width: 72% !important;
  box-shadow: 0 2px 8px rgba(0,201,109,0.25) !important;
}
.message.out .msg-text,
.message.out .msg-text a {
  color: #fff !important;
}

/* Inbound: dark secondary, standard text, tail radius */
.message.in {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-bright) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
  border-bottom-left-radius: 4px !important;
  max-width: 72% !important;
}

/* Consecutive same-sender grouping */
.message.msg-group-start {
  margin-bottom: 0 !important;
}
.message.msg-group-mid {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  border-radius: 16px !important;
}
.message.msg-group-end {
  margin-top: 2px !important;
}
/* First gets full top, last gets tail bottom */
.message.msg-group-start.out { border-bottom-right-radius: 16px !important; }
.message.msg-group-start.in { border-bottom-left-radius: 16px !important; }
.message.msg-group-end.out { border-bottom-right-radius: 4px !important; }
.message.msg-group-end.in { border-bottom-left-radius: 4px !important; }
.message.msg-group-mid.out { border-bottom-right-radius: 16px !important; }
.message.msg-group-mid.in { border-bottom-left-radius: 16px !important; }

/* Timestamps: 10px muted, fade in on hover */
.message .msg-time {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}
.message:hover .msg-time {
  opacity: 0.6 !important;
}
.message.out .msg-time {
  color: rgba(255,255,255,0.5) !important;
}

/* ─── AI DRAWER ────────────────────────────────────────────── */

/* Slide-up with spring easing */
.ai-drawer {
  transition: max-height 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease !important;
}

/* Drag handle: 36x4 pill */
.ai-drawer-pill {
  width: 36px !important;
  height: 4px !important;
  border-radius: 2px !important;
}

/* Reading bar: accent left border + italic text */
.ai-reading-bar {
  border-left: 3px solid var(--accent) !important;
  margin: 0 12px !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(0,217,126,0.03) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.ai-reading-text {
  font-style: italic !important;
  color: var(--text-secondary) !important;
}

/* AI tone cards: min-width 180px, distinct left border per tone */
.ai-card {
  flex: 0 0 auto !important;
  min-width: 180px !important;
  border-left: 3px solid var(--c, var(--accent)) !important;
  border-radius: 0 12px 12px 0 !important;
}

/* Tone colors via CSS custom property --c (set inline by JS) */
/* Casual = #00d97e, Direct = #0a84ff, Witty = #ff9f0a, Supportive = #bf5af2, Thoughtful = #64d2ff */
.ai-card[style*="--c:#00d97e"], .ai-card[style*="--c: #00d97e"] { border-left-color: #00d97e !important; }
.ai-card[style*="--c:#0a84ff"], .ai-card[style*="--c: #0a84ff"] { border-left-color: #0a84ff !important; }
.ai-card[style*="--c:#ff9f0a"], .ai-card[style*="--c: #ff9f0a"] { border-left-color: #ff9f0a !important; }
.ai-card[style*="--c:#bf5af2"], .ai-card[style*="--c: #bf5af2"] { border-left-color: #bf5af2 !important; }
.ai-card[style*="--c:#64d2ff"], .ai-card[style*="--c: #64d2ff"] { border-left-color: #64d2ff !important; }

/* Selected card: filled background using tone color at low opacity */
.ai-card.ai-card-selected {
  background: color-mix(in srgb, var(--c, var(--accent)) 8%, transparent) !important;
  border-color: var(--c, var(--accent)) !important;
}

/* ─── COMPOSE AREA ─────────────────────────────────────────── */

/* Textarea: no border when empty/unfocused, subtle border on focus */
.compose textarea,
.compose #composeInput {
  background: var(--bg) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  resize: none !important;
}
.compose textarea::placeholder,
.compose #composeInput::placeholder {
  color: var(--text-muted) !important;
}
.compose textarea:focus,
.compose #composeInput:focus {
  border-color: var(--border-bright) !important;
  box-shadow: 0 0 0 2px rgba(0,217,126,0.05) !important;
  outline: none !important;
}

/* Send button: muted default, accent green + glow when has text */
.compose-send {
  background: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: all 0.25s !important;
}
.compose-send.send-ready,
.compose-send.has-text {
  background: linear-gradient(135deg, #00d97e 0%, #00c96d 100%) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(0,217,126,0.3) !important;
}
.compose-send.send-ready:hover,
.compose-send.has-text:hover {
  box-shadow: 0 4px 24px rgba(0,217,126,0.5) !important;
  transform: translateY(-1px) !important;
}

/* + expander: smooth width transition */
.compose-expand-icons {
  transition: max-width 0.25s ease, opacity 0.2s ease !important;
  overflow: hidden !important;
}

/* ─── SIDEBAR BOTTOM NAV ───────────────────────────────────── */

/* Active indicator: 2px accent line at top */
.sbn-item.active::after {
  top: 0 !important;
  bottom: auto !important;
  height: 2px !important;
  background: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent-glow) !important;
  border-radius: 0 0 2px 2px !important;
}

/* Icons 20px, labels 10px */
.sbn-icon { font-size: 20px !important; }
.sbn-label {
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Color transitions only - no bg change */
.sbn-item {
  transition: color 0.15s !important;
  background: none !important;
}
.sbn-item:hover {
  color: var(--text-secondary) !important;
  background: none !important;
}
.sbn-item.active {
  color: var(--accent) !important;
  background: none !important;
}

/* ─── LOADING SKELETONS: shimmer gradient sweep ────────────── */

@keyframes shimmerSweep {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-avatar,
.skeleton-line,
.skeleton-bubble {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 0%,
    var(--bg-elevated) 40%,
    var(--bg-tertiary) 80%
  ) !important;
  background-size: 800px 100% !important;
  animation: shimmerSweep 1.5s infinite linear !important;
}

/* Thread skeleton: 3 placeholder rows */
.skeleton-thread {
  padding: 12px 14px !important;
  gap: 11px !important;
}

/* Message skeleton: alternating left/right bubbles */
.skeleton-bubble {
  height: 36px !important;
  border-radius: 16px !important;
}

/* ─── EMPTY STATES ─────────────────────────────────────────── */

/* Welcome stats cards: clean bordered, value 28px/800, label 11px */
.wls-val {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}
.wls-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}
.wls-item {
  border-radius: 12px !important;
  padding: 16px 12px 14px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Click ripple effect on stats cards */
@keyframes wlsRipple {
  0% { transform: scale(0); opacity: 0.35; }
  100% { transform: scale(2.5); opacity: 0; }
}
.wls-item:active::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  animation: wlsRipple 0.4s ease-out forwards !important;
  pointer-events: none !important;
}

/* ─── TOAST NOTIFICATIONS ──────────────────────────────────── */

@keyframes toastSlideUp {
  0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes toastFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.toast {
  position: fixed !important;
  bottom: 32px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05) !important;
  animation: toastSlideUp 0.3s ease-out !important;
  z-index: 9999 !important;
  white-space: nowrap !important;
}
.toast.toast-exit {
  animation: toastFadeOut 0.25s ease-in forwards !important;
}

/* ─── ACCESSIBILITY: focus-visible ─────────────────────────── */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* ─── Active thread name: use text color not accent ────────── */
.thread-item.active .thread-name {
  color: var(--text) !important;
}
.thread-item.active .thread-preview {
  color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   END PRECISION PASS
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   UX POLISH — Agent A (micro-interactions, animations, tactile)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Task 3: AI Card Stagger Animation ──────────────────────── */
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ai-cards-row .ai-card {
  animation: card-in 0.2s ease both;
}

/* ─── Task 6: Message Reaction Quick-Picker ──────────────────── */
.msg-reaction-picker {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 20px;
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  position: fixed;
  z-index: 1000;
  animation: picker-pop 0.15s ease;
}
@keyframes picker-pop {
  from { opacity: 0; transform: scale(0.9) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.msg-reaction-picker span {
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.1s ease;
  line-height: 1;
  padding: 2px;
  border-radius: 6px;
}
.msg-reaction-picker span:hover {
  transform: scale(1.3);
  background: rgba(255,255,255,0.1);
}
:root[data-theme="light"] .msg-reaction-picker {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* ─── Task 7: Pull-to-Refresh Indicator Fix ──────────────────── */
.pull-indicator {
  text-align: center;
  padding: 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: none;
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0;
  transform: translateY(-8px);
}
.pull-indicator.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.pull-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: pull-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes pull-spin {
  to { transform: rotate(360deg); }
}

/* ─── Task 8: Platform Bar as Segmented Control ──────────────── */
.platform-bar {
  display: flex !important;
  align-items: center !important;
  padding: 3px !important;
  margin: 6px 10px !important;
  background: var(--bg-tertiary) !important;
  border-radius: 20px !important;
  border: none !important;
  border-bottom: none !important;
  gap: 2px !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.platform-bar::-webkit-scrollbar { display: none; }
.platform-tab {
  border: none !important;
  border-bottom: none !important;
  border-radius: 17px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  flex-direction: row !important;
  gap: 5px !important;
  position: relative;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.platform-tab:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.04) !important;
}
.platform-tab.active {
  color: #000 !important;
  background: var(--accent) !important;
  border-bottom-color: transparent !important;
}
.platform-tab[data-platform="gmail"].active {
  background: #ea4335 !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
}
.platform-tab[data-platform="facebook"].active {
  background: #1877f2 !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
}
.platform-tab[data-platform="imessage"].active {
  background: #34c759 !important;
  color: #000 !important;
  border-bottom-color: transparent !important;
}
.platform-tab-add {
  margin-left: auto !important;
  opacity: 0.4;
}
.platform-tab-add:hover {
  opacity: 1 !important;
  color: var(--accent) !important;
}

:root[data-theme="light"] .platform-bar {
  background: #e5e5ea !important;
}
:root[data-theme="light"] .platform-tab.active {
  background: #fff !important;
  color: var(--accent) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
:root[data-theme="light"] .platform-tab[data-platform="gmail"].active {
  background: #ea4335 !important;
  color: #fff !important;
}
:root[data-theme="light"] .platform-tab[data-platform="facebook"].active {
  background: #1877f2 !important;
  color: #fff !important;
}
:root[data-theme="light"] .platform-tab[data-platform="imessage"].active {
  background: #34c759 !important;
  color: #000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   END UX POLISH — Agent A
   ═══════════════════════════════════════════════════════════════ */

/* ── HACKER THEME ENHANCEMENTS ────────────────── */

/* Glowing green separators */
.sidebar-actions, .sidebar-search, .platform-bar {
  border-bottom-color: rgba(0,217,126,0.06) !important;
}

/* Thread list green hover trail */
.thread-item { transition: all 0.2s ease; border-left: 3px solid transparent; }
.thread-item:hover { border-left-color: rgba(0,217,126,0.3); }
.thread-item.active { border-left-color: var(--accent) !important; }

/* Message glow on hover */
.message:hover { box-shadow: 0 0 15px rgba(0,217,126,0.05); }

/* Compose area top border glow */
.compose { border-top: 1px solid rgba(0,217,126,0.08) !important; }

/* All cards and panels get subtle green borders */
.ai-card, .suggest-reply-card, .pipeline-card, .wls-item {
  border-color: rgba(0,217,126,0.08) !important;
  transition: all 0.3s ease;
}
.ai-card:hover, .suggest-reply-card:hover, .pipeline-card:hover, .wls-item:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 20px rgba(0,217,126,0.06);
}

/* Buttons get the glow treatment */
.btn-primary, .compose-send.send-ready {
  box-shadow: 0 0 15px rgba(0,217,126,0.15);
}
.btn-primary:hover, .compose-send.send-ready:hover {
  box-shadow: 0 0 30px rgba(0,217,126,0.3);
}

/* Selection highlight */
::selection { background: rgba(0,217,126,0.2); color: #fff; }

/* Links glow */
a { text-shadow: none; transition: text-shadow 0.2s; }
a:hover { text-shadow: 0 0 8px rgba(0,217,126,0.3); }

/* Status indicators pulse */
.auto-pill.active { box-shadow: 0 0 12px rgba(0,217,126,0.25); }

/* ── EVIL AI HACKER DEEP POLISH ────────────────── */

/* Global hover glow on interactive elements */
.btn:hover, .btn-ghost:hover, .btn-sm:hover,
.tha-btn:hover, .filter-chip:hover, .category-chip:hover,
.tag-preset-btn:hover, .tag-filter-chip:hover,
.ws-shortcut:hover, .quick-chip:hover,
.sbn-item:hover, .reply-now-btn:hover,
.export-format-btn:hover, .ai-speed-btn:hover,
.ai-summary-btn:hover, .ai-value-btn:hover,
.digest-bell-btn:hover, .sidebar-inbox-zero-btn:hover {
  box-shadow: 0 0 10px rgba(0,217,126,0.15) !important;
}

/* Global active states: green border + inset glow */
.btn:active, .btn-ghost:active,
.filter-chip:active, .quick-chip:active,
.tha-btn:active, .ws-shortcut:active {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: inset 0 0 8px rgba(0,217,126,0.1), 0 0 10px rgba(0,217,126,0.15) !important;
}

/* Buttons: default green box-shadow, stronger on hover */
.btn {
  box-shadow: 0 0 6px rgba(0,217,126,0.08);
}

/* Cards and modals: green border glow */
.modal {
  border: 1px solid rgba(0,217,126,0.15) !important;
  box-shadow: 0 0 40px rgba(0,217,126,0.06), 0 28px 80px rgba(0,0,0,0.75) !important;
}
.cmd-center {
  border-color: rgba(0,217,126,0.15) !important;
}

/* Inputs on focus: green glow */
input:focus, textarea:focus, select:focus,
.field-input:focus, .prompt-ctx-input:focus,
.ai-guide-input:focus, .ai-config-input:focus,
.ai-config-select:focus, .sidebar-search input:focus,
.thread-search-bar input:focus, .suggest-prompt-input:focus,
.url-input-row input:focus, .pipeline-finder-bar input:focus {
  border-color: rgba(0,217,126,0.35) !important;
  box-shadow: 0 0 12px rgba(0,217,126,0.12), 0 0 0 2px rgba(0,217,126,0.06) !important;
}

/* Scrollbars: thin green track/thumb (final override) */
::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: rgba(0,217,126,0.02) !important; }
::-webkit-scrollbar-thumb { background: rgba(0,217,126,0.15) !important; border-radius: 4px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,217,126,0.3) !important; }
* { scrollbar-width: thin; scrollbar-color: rgba(0,217,126,0.15) transparent; }

/* Message bubbles: outgoing — solid green, WHITE text */
.message.out {
  background: linear-gradient(135deg, #00c96d 0%, #00a855 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,201,109,0.25) !important;
}
.message.out .msg-text,
.message.out .msg-body,
.message.out .msg-text a,
.message.out p {
  color: #fff !important;
}
.message.out .msg-time {
  color: rgba(255,255,255,0.6) !important;
}

/* Message bubbles: incoming — dark bg, readable text */
.message.in {
  background: var(--bg-tertiary) !important;
  border: 1px solid rgba(0,217,126,0.12) !important;
  color: var(--text) !important;
}

/* Toast: green border */
.toast {
  border-color: rgba(0,217,126,0.15) !important;
}

/* Thread context menu: green borders */
.thread-context-menu {
  border-color: rgba(0,217,126,0.12) !important;
}
.thread-context-menu button {
  border-bottom-color: rgba(0,217,126,0.06) !important;
}

/* Reaction picker: green border */
.reaction-picker, .msg-reaction-picker {
  border-color: rgba(0,217,126,0.1) !important;
}

/* Welcome cards: green border glow on hover */
.welcome-card:hover {
  box-shadow: 0 0 20px rgba(0,217,126,0.1) !important;
}

/* Profile stats border */
.profile-stats {
  border-color: rgba(0,217,126,0.1) !important;
}

/* Analysis stat border */
.analysis-stat {
  border-bottom-color: rgba(0,217,126,0.06) !important;
}

/* Rule cards, campaign cards, throttle cards, blacklist entries */
.rule-card, .rule-card-v2, .campaign-card, .throttle-card,
.blacklist-entry, .client-card, .client-metric,
.prompt-card, .revenue-goal-card, .brief-stats-bar,
.brief-thread-card, .stale-prospect-card, .prospect-finder-card,
.mockup-history-item, .pipeline-summary-bar, .pipeline-board-card,
.ar-dash-card, .ar-stat-chip, .campaign-funnel-card,
.analyzer-result, .revenue-calc-output, .draft-area,
.image-preview, .link-preview, .typing-dots {
  border-color: rgba(0,217,126,0.08) !important;
}

/* Hover glow for card elements */
.rule-card-v2:hover, .campaign-card:hover, .client-card:hover,
.prompt-card:hover, .brief-thread-card:hover, .prospect-finder-card:hover,
.pipeline-board-card:hover, .mockup-result-card:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 15px rgba(0,217,126,0.06) !important;
}

/* Sort bar, filter sep, thread filters borders */
.sort-bar, .thread-filters, .thread-categories, .tag-filter-bar,
.cmd-stats, .cmd-tabs, .sidebar-bottom-nav {
  border-color: rgba(0,217,126,0.06) !important;
}

/* Date separator lines */
.date-separator::before, .date-separator::after {
  background: rgba(0,217,126,0.08) !important;
}
.date-separator span {
  border-color: rgba(0,217,126,0.08) !important;
}

/* Kbd elements: green tinted */
.shortcut-keys kbd, .ws-shortcut kbd {
  border-color: rgba(0,217,126,0.1) !important;
  background: rgba(0,217,126,0.04) !important;
}

/* CRT scanline removed — clean theme */

/* ═══ DEFINITIVE MESSAGE RULES — FINAL OVERRIDE ═══ */

/* Outgoing messages: green gradient, WHITE text */
.message.out {
  align-self: flex-end !important;
  background: linear-gradient(135deg, #00c96d 0%, #00a855 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 16px !important;
  border-bottom-right-radius: 4px !important;
  max-width: 72% !important;
  box-shadow: 0 2px 8px rgba(0,201,109,0.25) !important;
}
.message.out .msg-body,
.message.out .msg-text,
.message.out .msg-text a,
.message.out p,
.message.out span:not(.msg-time):not(.msg-status):not(.check) {
  color: #fff !important;
}
.message.out .msg-time {
  color: rgba(255,255,255,0.6) !important;
}

/* Incoming messages: dark bg, readable text */
.message.in {
  align-self: flex-start !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid rgba(0,217,126,0.12) !important;
  border-radius: 16px !important;
  border-bottom-left-radius: 4px !important;
  max-width: 72% !important;
  color: var(--text) !important;
}

/* ═══ DEFINITIVE PLATFORM BAR — SEGMENTED PILL ═══ */
.platform-bar {
  display: flex !important;
  align-items: center !important;
  background: var(--bg-tertiary) !important;
  border-radius: 20px !important;
  padding: 3px !important;
  margin: 8px 12px !important;
  gap: 0 !important;
  border: none !important;
  border-bottom: none !important;
}
.platform-tab {
  flex: 1 !important;
  padding: 6px 12px !important;
  border-radius: 17px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  font-family: var(--font) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0 !important;
}
.platform-tab.active {
  background: rgba(0,217,126,0.15) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.1) !important;
  border-bottom-color: transparent !important;
}
.platform-tab:hover:not(.active) {
  color: var(--text) !important;
}

/* ═══ SIDEBAR BOTTOM NAV — NO CLIPPING ═══ */
.sidebar-bottom-nav {
  flex-shrink: 0 !important;
  min-height: 60px !important;
}

/* ═══════════════════════════════════════════════════════════
   ✦ INLINE DASHBOARD — renders inside #emptyState
   ═══════════════════════════════════════════════════════════ */

.dash-inline {
  width: 100%;
  max-width: 960px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: flex-start;
  margin-top: 20px;
}

.dash-hero {
  text-align: center;
  margin-bottom: 8px;
}
.dash-brand-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.dash-brand-text {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.dash-brand-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Metric cards row */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dash-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  animation: dashFadeUp 0.4s ease both;
}
.dash-card:nth-child(1) { animation-delay: 0.05s; }
.dash-card:nth-child(2) { animation-delay: 0.1s; }
.dash-card:nth-child(3) { animation-delay: 0.15s; }
.dash-card:nth-child(4) { animation-delay: 0.2s; }

@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dash-card:hover {
  border-color: rgba(0,217,126,0.3);
  box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(0,217,126,0.05);
}
.dash-card-pulse {
  animation: dashPulse 2.5s ease-in-out infinite, dashFadeUp 0.4s ease both;
  animation-delay: 0.15s;
}
@keyframes dashPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,82,82,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(240,82,82,0); }
}

.dash-card-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.dash-card-val {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
}
.dash-card-val.gold { color: #ffd700; text-shadow: 0 0 16px rgba(255,215,0,0.3); }
.dash-card-val.green { color: var(--accent); text-shadow: 0 0 16px var(--accent-glow); }
.dash-card-val.red { color: var(--red); text-shadow: 0 0 16px rgba(240,82,82,0.3); }
.dash-card-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* 2-column grid */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dash-card-title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 600;
}

/* Funnel */
.dash-funnel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-funnel-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.dash-funnel-bar {
  position: absolute;
  left: 0; top: 0; height: 100%;
  border-radius: 6px;
  opacity: 0.08;
}
.dash-funnel-name {
  font-size: 11px;
  font-weight: 600;
  flex: 1;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.dash-funnel-count {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  z-index: 1;
}
.dash-funnel-rate {
  font-size: 10px;
  color: var(--text-muted);
  z-index: 1;
  min-width: 36px;
  text-align: right;
}

/* Lead rows */
.dash-leads { display: flex; flex-direction: column; gap: 2px; }
.dash-lead-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(30,37,53,0.5);
}
.dash-lead-row:last-child { border: none; }
.dash-lead-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--accent); flex-shrink: 0;
  font-weight: 700;
}
.dash-lead-info { flex: 1; min-width: 0; }
.dash-lead-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-lead-email { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-lead-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

/* Agent log */
.dash-agent-log {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  max-height: 200px;
  overflow-y: auto;
}
.dash-log-entry { color: var(--text-muted); }
.dash-log-ts { color: rgba(0,217,126,0.4); }
.dash-log-agent { color: var(--accent); font-weight: 600; }

/* Actions */
.dash-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dash-action-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font);
}
.dash-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-1px);
}

.dash-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 24px 0;
  font-style: italic;
}

/* ── Skeleton Loading States ── */
@keyframes skeletonPulse {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.35; }
}

.skeleton-pulse {
  animation: skeletonPulse 1.4s ease-in-out infinite;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

/* Skeleton thread item */
.skeleton-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}

.skeleton-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

.skeleton-thread-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.skeleton-line {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

.skeleton-line.name  { width: 45%; animation-delay: 0.1s; }
.skeleton-line.preview { width: 75%; animation-delay: 0.2s; }
.skeleton-line.time  { width: 22%; height: 8px; animation-delay: 0.05s; }

.skeleton-thread-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* Skeleton message bubbles */
.skeleton-msg-row {
  display: flex;
  padding: 6px 16px;
  pointer-events: none;
}

.skeleton-msg-row.in  { justify-content: flex-start; }
.skeleton-msg-row.out { justify-content: flex-end; }

.skeleton-bubble {
  height: 38px;
  border-radius: 16px;
  background: var(--bg-tertiary);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

.skeleton-msg-row.in  .skeleton-bubble { width: 55%; border-bottom-left-radius: 4px; animation-delay: 0.1s; }
.skeleton-msg-row.out .skeleton-bubble { width: 42%; border-bottom-right-radius: 4px; animation-delay: 0.2s; }

.skeleton-msg-row:nth-child(1) .skeleton-bubble { width: 48%; animation-delay: 0s; }
.skeleton-msg-row:nth-child(2) .skeleton-bubble { width: 62%; animation-delay: 0.15s; }
.skeleton-msg-row:nth-child(3) .skeleton-bubble { width: 38%; animation-delay: 0.05s; }
.skeleton-msg-row:nth-child(4) .skeleton-bubble { width: 55%; animation-delay: 0.25s; }

/* ── Dashboard responsive ── */
@media (max-width: 768px) {
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-card-val { font-size: 24px; }
  .dash-inline { margin-top: 12px; padding: 0 8px; }
}
@media (max-width: 480px) {
  .dash-metrics { grid-template-columns: 1fr; }
  .dash-actions { grid-template-columns: 1fr; }
}

/* ── Empty State Illustrations ── */
.empty-state-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 14px;
  text-align: center;
  animation: fadeInUp 0.25s ease both;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--accent-dim);
  border: 1.5px solid rgba(0,217,126,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 0 24px rgba(0,217,126,0.08);
  flex-shrink: 0;
}

.empty-state-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 200px;
}

.empty-state-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.empty-state-hint {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-top: 2px;
}

/* Main area welcome state */
.welcome-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0;
  padding: 40px 32px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 38%, rgba(0,217,126,0.04) 0%, transparent 65%), var(--bg);
  animation: fadeInUp 0.3s ease both;
  position: relative;
  overflow: hidden;
}

.welcome-empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(0,217,126,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(129,140,248,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.welcome-logo-ring {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(0,217,126,0.12) 0%, rgba(0,217,126,0.04) 100%);
  border: 1.5px solid rgba(0,217,126,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
  box-shadow:
    0 0 0 8px rgba(0,217,126,0.04),
    0 0 40px rgba(0,217,126,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  animation: welcomePulse 3s ease-in-out infinite;
}

@keyframes welcomePulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(0,217,126,0.04), 0 0 40px rgba(0,217,126,0.10), inset 0 1px 0 rgba(255,255,255,0.06); }
  50%       { box-shadow: 0 0 0 12px rgba(0,217,126,0.06), 0 0 60px rgba(0,217,126,0.16), inset 0 1px 0 rgba(255,255,255,0.06); }
}

.welcome-brand-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.welcome-brand-name span {
  color: var(--accent);
}

.welcome-tagline-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  max-width: 280px;
  line-height: 1.5;
}

.welcome-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}

.welcome-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  min-width: 80px;
  transition: border-color 0.2s, background 0.2s;
}

.welcome-stat-chip:hover {
  border-color: rgba(0,217,126,0.25);
  background: var(--bg-tertiary);
}

.welcome-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.welcome-stat-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.welcome-cta-text {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.welcome-cta-text::before,
.welcome-cta-text::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--border);
}

.welcome-cta-arrow {
  font-size: 18px;
  color: var(--accent);
  animation: arrowBounce 1.8s ease-in-out infinite;
  display: block;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(-4px); opacity: 0.5; }
  50%       { transform: translateX(4px);  opacity: 1; }
}

/* Light mode overrides */
:root[data-theme="light"] .empty-state-icon {
  background: rgba(5,150,105,0.06);
  border-color: rgba(5,150,105,0.15);
  box-shadow: 0 0 20px rgba(5,150,105,0.06);
}

:root[data-theme="light"] .welcome-empty-state {
  background: radial-gradient(ellipse at 50% 38%, rgba(5,150,105,0.04) 0%, transparent 65%), var(--bg);
}

:root[data-theme="light"] .welcome-empty-state::before {
  background:
    radial-gradient(circle at 20% 80%, rgba(5,150,105,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,0.03) 0%, transparent 50%);
}

:root[data-theme="light"] .welcome-logo-ring {
  background: linear-gradient(135deg, rgba(5,150,105,0.10) 0%, rgba(5,150,105,0.04) 100%);
  border-color: rgba(5,150,105,0.20);
  box-shadow: 0 0 0 8px rgba(5,150,105,0.03), 0 0 30px rgba(5,150,105,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — 768px and below
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Root layout: stack sidebar + chat vertically, full viewport */
  body {
    overflow: hidden;
    height: 100dvh;
  }

  /* Main app container becomes a horizontal sliding panel host */
  #app, .app-container, [class*="app-layout"] {
    display: flex;
    flex-direction: row;
    width: 200vw;          /* two panels side by side */
    height: 100dvh;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    overflow: hidden;
  }

  /* When a thread is open, slide left to reveal chat panel */
  body.mobile-chat-open #app,
  body.mobile-chat-open .app-container,
  body.mobile-chat-open [class*="app-layout"] {
    transform: translateX(-50%);
  }

  /* ── Sidebar: full viewport width ── */
  .sidebar {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex-shrink: 0;
    height: 100dvh;
    overflow-y: auto;
    border-right: none !important;
    position: relative;
    z-index: 10;
  }

  /* ── Chat panel: full viewport width ── */
  .chat-panel,
  .main-panel,
  #chatPanel,
  #mainPanel,
  #main,
  .main {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex-shrink: 0;
    height: 100dvh;
    display: flex !important;
    flex-direction: column;
    position: relative;
    z-index: 10;
  }

  /* Hide empty state on mobile when no thread selected */
  body:not(.mobile-chat-open) #emptyState {
    display: none !important;
  }

  /* ── Back button in chat header ── */
  #mobileBackBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px 6px 2px;
    border-radius: var(--radius);
    transition: background 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  #mobileBackBtn:active {
    background: var(--accent-dim);
  }

  #mobileBackBtn svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
    stroke-width: 2.5;
    fill: none;
  }

  /* ── Chat header: tighten up ── */
  .chat-header,
  #chatHeader {
    padding: 10px 12px !important;
    gap: 8px !important;
    min-height: 54px;
  }

  .chat-header-left,
  .header-left {
    gap: 6px !important;
  }

  /* Shrink header action buttons */
  .chat-header .btn-icon,
  .header-actions .btn-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* ── Thread items: compact ── */
  .thread-item {
    padding: 10px 14px !important;
    min-height: 62px !important;
  }

  .thread-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
    flex-shrink: 0;
  }

  .thread-name {
    font-size: 14px !important;
  }

  .thread-preview {
    font-size: 12px !important;
  }

  .thread-time {
    font-size: 11px !important;
  }

  /* ── Messages area: fill remaining space ── */
  #messagesContainer,
  .messages-container {
    flex: 1 1 0;
    overflow-y: auto;
    /* Use dvh so keyboard shrinks the viewport correctly */
    max-height: calc(100dvh - 54px - var(--compose-height, 80px));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Message bubbles: slightly narrower max-width ── */
  .message .msg-bubble {
    max-width: 82vw !important;
  }

  /* ── Compose area: stick to bottom, keyboard-aware ── */
  .compose,
  #composeArea {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 8px 10px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .compose textarea,
  #composeArea textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom */
    min-height: 38px !important;
    max-height: 120px !important;
    padding: 8px 10px !important;
  }

  .compose-send,
  .send-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
  }

  /* ── Sidebar search / filters ── */
  .sidebar-search input,
  #threadSearch {
    font-size: 15px !important; /* prevent iOS zoom */
  }

  /* ── Modals: full-width on mobile ── */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    max-height: calc(100dvh - 24px) !important;
  }

  /* ── Filter pills: horizontal scroll ── */
  .filter-tabs,
  .thread-filters,
  .filter-pills,
  .filter-bar,
  .platform-bar,
  .tag-filter-bar {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .filter-tabs::-webkit-scrollbar,
  .thread-filters::-webkit-scrollbar,
  .filter-pills::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar,
  .platform-bar::-webkit-scrollbar,
  .tag-filter-bar::-webkit-scrollbar {
    display: none;
  }

  /* ── Suggest reply cards: horizontal scroll ── */
  .suggest-reply-list,
  .draft-alts {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .suggest-reply-list::-webkit-scrollbar,
  .draft-alts::-webkit-scrollbar {
    display: none;
  }

  /* ── Toast: full-width ── */
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ── FAB scroll button ── */
  .scroll-fab {
    bottom: calc(var(--compose-height, 80px) + 12px) !important;
    right: 14px !important;
  }

  /* ── Welcome empty state ── */
  .welcome-empty-state {
    padding: 32px 20px !important;
  }

  .welcome-logo-ring {
    width: 72px !important;
    height: 72px !important;
    font-size: 28px !important;
  }

  .welcome-brand {
    font-size: 22px !important;
  }

  .welcome-tagline {
    font-size: 12px !important;
  }

  .welcome-stat-chips {
    gap: 8px !important;
  }

  .welcome-stat-chip {
    padding: 8px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — 480px and below
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Typography scale-down ── */
  body {
    font-size: 13px;
  }

  /* ── Thread items: even more compact ── */
  .thread-item {
    padding: 8px 12px !important;
    min-height: 56px !important;
  }

  .thread-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  .thread-name {
    font-size: 13px !important;
  }

  .thread-preview {
    font-size: 11px !important;
    -webkit-line-clamp: 1 !important;
  }

  .thread-time {
    font-size: 10px !important;
  }

  .unread-badge {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
  }

  /* ── Message bubbles: smaller ── */
  .message .msg-bubble {
    max-width: 88vw !important;
    font-size: 13px !important;
    padding: 8px 11px !important;
  }

  .msg-time {
    font-size: 10px !important;
  }

  /* ── Chat header ── */
  .chat-header,
  #chatHeader {
    padding: 8px 10px !important;
    min-height: 48px;
  }

  .chat-header-name,
  .header-contact-name {
    font-size: 14px !important;
  }

  .chat-header-sub,
  .header-contact-sub {
    font-size: 11px !important;
  }

  /* ── Compose ── */
  .compose,
  #composeArea {
    padding: 6px 8px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  .compose textarea,
  #composeArea textarea {
    font-size: 16px !important;
    min-height: 34px !important;
    max-height: 100px !important;
  }

  /* ── Sidebar header ── */
  .sidebar-header {
    padding: 10px 12px !important;
  }

  .sidebar-header h1 {
    font-size: 16px !important;
  }

  /* ── Modals ── */
  .modal {
    width: calc(100vw - 16px) !important;
    margin: 8px !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 12px !important;
  }

  .modal-header {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  .modal-body {
    padding: 14px 16px !important;
    font-size: 13px !important;
  }

  /* ── Prospect panel / side panels ── */
  .prospect-panel,
  .side-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── Welcome state ── */
  .welcome-logo-ring {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
  }

  .welcome-brand {
    font-size: 18px !important;
  }

  .welcome-stat-chips {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .welcome-stat-chip {
    width: 100% !important;
    max-width: 200px !important;
    justify-content: center !important;
  }

  /* ── Filter pills: smaller text ── */
  .filter-tab,
  .filter-pill {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* ── Suggest reply cards ── */
  .suggest-reply-card {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* ── Safe area padding for notched phones (all sizes) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .compose,
  #composeArea {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ── AI Card Action Buttons (Copy / Use This) ── */
.suggest-reply-card {
  position: relative;
}

.ai-card-has-actions {
  padding-bottom: 36px !important;
}

.ai-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  position: absolute;
  bottom: 8px;
  right: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.suggest-reply-card:hover .ai-card-actions,
.suggest-reply-card:focus-within .ai-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ai-card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
  white-space: nowrap;
}

.ai-card-action:hover {
  background: var(--bg-tertiary);
  color: var(--text);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.ai-card-action:active {
  transform: scale(0.96);
}

.ai-card-action svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.ai-card-action-use {
  border-color: rgba(0,217,126,0.25);
  color: var(--accent);
}

.ai-card-action-use:hover {
  background: rgba(0,217,126,0.08);
  border-color: rgba(0,217,126,0.45);
  color: var(--accent-hover);
  box-shadow: 0 1px 8px rgba(0,217,126,0.15);
}

.ai-card-action-done {
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.4) !important;
}

/* Light theme */
:root[data-theme="light"] .ai-card-action {
  background: #f8fafc;
  border-color: #d1d5db;
  color: #6b7280;
}
:root[data-theme="light"] .ai-card-action:hover {
  background: #f1f5f9;
  color: #374151;
  border-color: #9ca3af;
}
:root[data-theme="light"] .ai-card-action-use {
  border-color: rgba(5,150,105,0.3);
  color: #059669;
}
:root[data-theme="light"] .ai-card-action-use:hover {
  background: rgba(5,150,105,0.06);
  border-color: rgba(5,150,105,0.5);
  color: #047857;
}

/* ── Copy Toast ── */
.copy-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg-tertiary);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.3);
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 12px rgba(0,217,126,0.12);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.copy-toast.copy-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

:root[data-theme="light"] .copy-toast {
  background: #fff;
  color: #059669;
  border-color: rgba(5,150,105,0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 10px rgba(5,150,105,0.08);
}

/* ══════════════════════════════════════════════════════════
   Revenue Card
   ══════════════════════════════════════════════════════════ */
.revenue-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.4s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 0 transparent;
}

.revenue-card:hover {
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.12);
  border-left-color: var(--gold);
}

/* Subtle gold shimmer in the top-right corner */
.revenue-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.revenue-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.revenue-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.revenue-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--gold);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.4;
}

.revenue-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  transition: color 0.3s ease;
}

.revenue-sparkline {
  height: 32px;
  margin: 2px 0;
}

.revenue-sparkline .sparkline-svg {
  width: 100%;
  height: 32px;
  display: block;
  overflow: visible;
}

.revenue-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Revenue card wrapper when injected standalone */
.revenue-card-wrapper {
  padding: 0 24px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Light theme */
:root[data-theme="light"] .revenue-card {
  background: #fff;
  border-color: #e2e8f0;
  border-left-color: #d97706;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
:root[data-theme="light"] .revenue-card:hover {
  box-shadow: 0 4px 14px rgba(217,119,6,0.12);
}
:root[data-theme="light"] .revenue-value {
  color: #b45309;
  text-shadow: none;
}
:root[data-theme="light"] .revenue-badge {
  color: #b45309;
  background: rgba(180,83,9,0.08);
  border-color: rgba(180,83,9,0.2);
}
:root[data-theme="light"] .revenue-card::after {
  background: radial-gradient(circle, rgba(180,83,9,0.06) 0%, transparent 70%);
}

/* ── Keyboard Shortcut Modal ── */
.shortcut-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shortcut-backdrop-in 0.15s ease;
}

@keyframes shortcut-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.shortcut-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
  width: min(640px, 92vw);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: shortcut-modal-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shortcut-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

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

.shortcut-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.shortcut-modal-title svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.shortcut-modal-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.shortcut-modal-close:hover {
  background: var(--bg-tertiary);
  color: var(--text);
  border-color: rgba(255,255,255,0.12);
}

.shortcut-modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shortcut-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

@media (max-width: 480px) {
  .shortcut-grid {
    grid-template-columns: 1fr;
  }
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background 0.12s;
}

.shortcut-row:hover {
  background: var(--bg-tertiary);
}

.shortcut-desc {
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-tertiary);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  min-width: 22px;
  height: 22px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
  white-space: nowrap;
}

.shortcut-keys .shortcut-plus {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.shortcut-modal-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shortcut-modal-footer span {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.shortcut-modal-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  height: 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
  margin: 0 3px;
}

/* Light theme overrides */
:root[data-theme="light"] .shortcut-modal {
  box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
}

:root[data-theme="light"] .shortcut-keys kbd {
  background: #fff;
  border-color: #d1d1d6;
  border-bottom-color: #b0b0b8;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
  color: #1c1c1e;
}

:root[data-theme="light"] .shortcut-modal-footer kbd {
  background: #f2f2f7;
  border-color: #d1d1d6;
  border-bottom-color: #b0b0b8;
  color: #6b7280;
}

/* ── Follow-Up Needed Badge ── */
.followup-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 6px rgba(240, 82, 82, 0.45);
}

.followup-badge.followup-pulse {
  animation: followup-pulse-anim 1.4s ease-in-out infinite;
}

@keyframes followup-pulse-anim {
  0%   { box-shadow: 0 0 4px rgba(240,82,82,0.5);  opacity: 1; }
  50%  { box-shadow: 0 0 14px rgba(240,82,82,0.9); opacity: 0.75; }
  100% { box-shadow: 0 0 4px rgba(240,82,82,0.5);  opacity: 1; }
}

/* Light theme tweak */
:root[data-theme="light"] .followup-badge {
  background: var(--red);
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   ✦ PREMIUM POLISH — FINAL PASS (Mar 10 2026)
   Toast glows, header accents, modal strip, compose focus,
   filter chips, sidebar header, quick-reply, date sep, panels
   ═══════════════════════════════════════════════════════════ */

/* ── Toast: distinct success / error glow states ─────────── */
.toast.success {
  border-color: rgba(0,217,126,0.45) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(0,217,126,0.2) !important;
  background: rgba(0,217,126,0.06) !important;
}
.toast.error {
  border-color: rgba(240,82,82,0.45) !important;
  color: var(--red) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(240,82,82,0.2) !important;
  background: rgba(240,82,82,0.05) !important;
}
.toast.warning {
  border-color: rgba(246,166,35,0.45) !important;
  color: var(--orange) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(246,166,35,0.15) !important;
  background: rgba(246,166,35,0.05) !important;
}

/* ── Main chat header: accent bottom line ────────────────── */
.main-header {
  border-bottom: 1px solid rgba(0,217,126,0.12) !important;
  box-shadow: 0 1px 0 rgba(0,217,126,0.06), 0 2px 12px rgba(0,0,0,0.2) !important;
}

/* ── Modal: top accent strip ──────────────────────────────── */
.modal {
  border-top: 1px solid rgba(0,217,126,0.2) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04), 0 0 40px rgba(0,217,126,0.05) !important;
}

/* ── Filter chip active: subtle inset glow ────────────────── */
.filter-chip.active {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.2), 0 0 12px rgba(0,217,126,0.06) !important;
}

/* ── Sidebar header: top gradient strip ───────────────────── */
.sidebar-header {
  background: linear-gradient(180deg, rgba(0,217,126,0.04) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(0,217,126,0.08) !important;
}

/* ── Sidebar bottom nav: gradient top instead of solid ─────── */
.sidebar-bottom-nav {
  border-top: 1px solid rgba(0,217,126,0.08) !important;
  background: linear-gradient(180deg, rgba(0,217,126,0.015) 0%, var(--bg-secondary) 100%) !important;
}

/* ── Compose send button: green when has text ──────────────── */
.compose-send.send-ready {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px rgba(0,217,126,0.35) !important;
  transform: scale(1.04);
}

/* ── Compose textarea: more polished default ─────────────── */
.compose textarea, #composeInput {
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.02) !important;
}
.compose textarea:focus, #composeInput:focus {
  border-color: rgba(0,217,126,0.35) !important;
  background: rgba(0,217,126,0.02) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.06), inset 0 0 12px rgba(0,217,126,0.02) !important;
}

/* ── Date separator: glowing line ─────────────────────────── */
.date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}
.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.12), transparent) !important;
}
.date-separator span {
  padding: 2px 10px;
  border: 1px solid rgba(0,217,126,0.1) !important;
  border-radius: 99px;
  background: rgba(0,217,126,0.04);
  font-family: var(--font-mono);
}

/* ── Quick reply pills: enhanced ─────────────────────────── */
.quick-chip, .quick-reply-chip, .quick-reply-btn {
  border-color: rgba(0,217,126,0.15) !important;
  transition: all 0.15s ease !important;
}
.quick-chip:hover, .quick-reply-chip:hover, .quick-reply-btn:hover {
  border-color: rgba(0,217,126,0.4) !important;
  background: rgba(0,217,126,0.06) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.1) !important;
}

/* ── Thread item: stronger hover left bar ─────────────────── */
.thread-item:hover:not(.active) {
  background: rgba(255,255,255,0.025) !important;
  border-left-color: rgba(0,217,126,0.35) !important;
}

/* ── Thread active: more prominent glow ──────────────────── */
.thread-item.active {
  background: rgba(0,217,126,0.05) !important;
  border-left-color: var(--accent) !important;
  box-shadow: inset 3px 0 12px rgba(0,217,126,0.06) !important;
}

/* ── Contact avatar in chat header: ring glow ────────────── */
.main-header .contact-avatar,
#chatHeader .contact-avatar {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.2), 0 0 12px rgba(0,217,126,0.1) !important;
}

/* ── Compose tools row: better spacing ───────────────────── */
.compose-tools {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding-top: 6px !important;
}

/* ── Icon-btns in sidebar header: subtle default border ──── */
.sidebar-actions .icon-btn {
  border-color: rgba(255,255,255,0.05) !important;
}
.sidebar-actions .icon-btn:hover {
  box-shadow: 0 0 8px rgba(0,217,126,0.12) !important;
}

/* ── Panel view: fade-in animation on switch ─────────────── */
.panel-view.active {
  animation: panelFadeIn 0.22s ease both;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Unread badge: stronger contrast ─────────────────────── */
.unread-badge {
  font-family: var(--font-mono) !important;
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.4) !important;
  font-weight: 800 !important;
}

/* ── Messages container: slightly more breathing room ─────── */
.messages-container {
  scroll-behavior: smooth;
}

/* ── Message hover: show time ─────────────────────────────── */
.message:hover .msg-time {
  opacity: 0.8 !important;
}

/* ── Light mode: toast overrides ─────────────────────────── */
:root[data-theme="light"] .toast.success {
  background: rgba(5,150,105,0.06) !important;
  border-color: rgba(5,150,105,0.4) !important;
  color: #047857 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 16px rgba(5,150,105,0.12) !important;
}
:root[data-theme="light"] .toast.error {
  background: rgba(220,38,38,0.05) !important;
  border-color: rgba(220,38,38,0.4) !important;
  color: #dc2626 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 16px rgba(220,38,38,0.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   END PREMIUM POLISH
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 3 — DATA SURFACES + DEPTH
   ═══════════════════════════════════════════════════════════ */

/* ── WLS stat cards: font-mono values + glow ─────────────── */
.wls-val {
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.06) !important;
}
.wls-urgent .wls-val {
  color: var(--accent) !important;
  text-shadow: 0 0 16px rgba(0,217,126,0.4) !important;
}
.wls-item {
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.wls-item:hover {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.3), 0 0 16px rgba(0,217,126,0.1) !important;
  transform: translateY(-1px) !important;
}
.wls-item::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(0,217,126,0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.wls-item:hover::after { opacity: 1; }

/* ── Compose AI button: orange glow on hover ─────────────── */
.compose-ai-btn:hover {
  box-shadow: 0 0 20px rgba(246,166,35,0.4), 0 4px 12px rgba(246,166,35,0.2) !important;
}

/* ── AI Drawer: stronger accent top strip ─────────────────── */
.ai-drawer {
  border-top: 1px solid rgba(0,217,126,0.25) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,217,126,0.05) !important;
}

/* ── Suggest panel: glass treatment when open ────────────── */
.suggest-panel.visible {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(17,19,24,0.96) !important;
  border-top: 1px solid rgba(0,217,126,0.1) !important;
}

/* ── Welcome brand: gradient text ────────────────────────── */
.welcome-brand {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 65%, #00f090 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
}

/* ── Welcome card: accent top sweep on hover ─────────────── */
.welcome-card {
  position: relative !important;
  overflow: hidden !important;
}
.welcome-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.welcome-card:hover::before { opacity: 1; }

/* ── Activity event: hover left bar ──────────────────────── */
.activity-event {
  transition: background 0.12s, border-left-color 0.12s !important;
  border-left: 2px solid transparent !important;
}
.activity-event:hover {
  border-left-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.02) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* ── Incoming message: subtle left accent line ────────────── */
.message.in {
  border-left: 2px solid rgba(0,217,126,0.1) !important;
}

/* ── Thread unread: name boost ────────────────────────────── */
.thread-item.unread .thread-name {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* ── cb-topnav active: soft glow ──────────────────────────── */
.cb-topnav a.active {
  box-shadow: 0 0 12px rgba(0,217,126,0.1) inset !important;
}

/* ── Welcome stat values: font-mono glow ─────────────────── */
.ps-value {
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 14px rgba(0,217,126,0.35) !important;
}

/* ── Lead/score badges: font-mono ─────────────────────────── */
.lead-score, .score-badge, .ls-score {
  font-family: var(--font-mono) !important;
}

/* ── Filter chip: scale on click ──────────────────────────── */
.filter-chip:active {
  transform: scale(0.95) !important;
}

/* ── Compose send: pulse when ready to send ───────────────── */
@keyframes sendReadyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,217,126,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(0,217,126,0); }
}
.compose-send.send-ready {
  animation: sendReadyPulse 1.8s ease-in-out infinite !important;
}

/* ── Scrollbar: tailored per surface ─────────────────────── */
.messages-container::-webkit-scrollbar { width: 5px !important; }
.thread-list::-webkit-scrollbar { width: 3px !important; }

/* ── Sort chip: accent glow on active ─────────────────────── */
.sort-chip.active, .sort-chip[data-active="true"] {
  box-shadow: 0 0 8px rgba(0,217,126,0.12) !important;
}

/* ── Thread preview drafted: italic green hint ────────────── */
.thread-preview.drafted {
  color: rgba(0,217,126,0.55) !important;
  font-style: italic !important;
}

/* ── Light mode: welcome brand ────────────────────────────── */
:root[data-theme="light"] .welcome-brand {
  background: linear-gradient(135deg, #0f172a 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
:root[data-theme="light"] .wls-urgent .wls-val {
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 3
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 4 — MICRO-POLISH + SURFACE DEPTH
   ═══════════════════════════════════════════════════════════ */

/* ── Tag filter chip active: glow ring ───────────────────── */
.tag-filter-chip.tag-filter-active {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.25), 0 0 10px rgba(0,217,126,0.08) !important;
}

/* ── Tag filter bar: accent gradient border-bottom ───────── */
.tag-filter-bar {
  border-bottom: 1px solid transparent !important;
  background-image: linear-gradient(var(--bg-secondary), var(--bg-secondary)),
    linear-gradient(90deg, transparent, rgba(0,217,126,0.12), transparent) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* ── Inbox-zero button: glow on hover ────────────────────── */
.sidebar-inbox-zero-btn:hover {
  box-shadow: 0 0 12px rgba(0,217,126,0.15) !important;
}

/* ── Inbox-zero modal: premium glass overlay ─────────────── */
.inbox-zero-modal {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.inbox-zero-inner {
  border: 1px solid rgba(0,217,126,0.12) !important;
  border-top: 2px solid rgba(0,217,126,0.2) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 40px rgba(0,217,126,0.04) !important;
}
.inbox-zero-header {
  background: linear-gradient(180deg, rgba(0,217,126,0.04) 0%, transparent 100%) !important;
}

/* ── Inbox-zero message times: font-mono ─────────────────── */
.iz-time {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* ── Inbox-zero outgoing bubble: green ───────────────────── */
.iz-msg-out .iz-msg-bubble {
  background: linear-gradient(135deg, #00c96d 0%, #00a855 100%) !important;
  color: #fff !important;
}
.iz-msg-in .iz-msg-bubble {
  border-left: 2px solid rgba(0,217,126,0.12) !important;
}

/* ── Scheduled message time: font-mono ───────────────────── */
.scheduled-time {
  font-family: var(--font-mono) !important;
}
.scheduled-msg:hover {
  border-color: rgba(255,140,0,0.35) !important;
  background: rgba(255,140,0,0.1) !important;
}

/* ── Thread context menu: green left indicator on hover ──── */
.thread-context-menu button:hover,
.thread-context-menu button:active {
  background: rgba(0,217,126,0.04) !important;
  color: var(--accent) !important;
  border-left: 2px solid rgba(0,217,126,0.4) !important;
  padding-left: 12px !important;
}
.thread-context-menu button {
  border-left: 2px solid transparent !important;
  transition: all 0.12s !important;
}

/* ── Modal overlay: stronger blur ────────────────────────── */
.modal-overlay {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── TFC count badge: font-mono ──────────────────────────── */
.tfc-count {
  font-family: var(--font-mono) !important;
}

/* ── Rev labels: font-mono ───────────────────────────────── */
.rev-labels {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* ── Stat sub: muted italic description ──────────────────── */
.stat-sub {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* ── Thread name: clamp to 1 line ────────────────────────── */
.thread-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── Message container: bottom padding for breathing room ── */
.messages-container {
  padding-bottom: 8px !important;
}

/* ── Compose row: tighter on small screens ───────────────── */
.compose-row {
  align-items: flex-end !important;
}

/* ── Funnel flow: label font-mono ────────────────────────── */
.funnel-label, .funnel-name {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}
.funnel-count, .funnel-num {
  font-family: var(--font-mono) !important;
}

/* ── Pipeline stat label: uppercase letter-spacing ──────── */
.pipe-stat .label {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 10px !important;
}

/* ── Empty-state filter text: softer ─────────────────────── */
.empty-filter-state, .welcome-empty-state, .thread-list-empty {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

/* ── Light mode adjustments ──────────────────────────────── */
:root[data-theme="light"] .thread-context-menu button:hover {
  background: rgba(5,150,105,0.05) !important;
  color: var(--accent) !important;
}
:root[data-theme="light"] .inbox-zero-inner {
  border-color: rgba(5,150,105,0.15) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 4
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 5 — COMMAND PALETTE + TYPING + THREAD TIMESTAMPS
   ═══════════════════════════════════════════════════════════ */

/* ── Typing dots: green (AI is responding) ───────────────── */
.typing-dots span {
  background: var(--accent) !important;
  opacity: 0.5;
}
.typing-dots {
  border-color: rgba(0,217,126,0.12) !important;
  background: rgba(0,217,126,0.04) !important;
}

/* ── Command palette: stronger top accent ────────────────── */
.cmd-center {
  border-top: 2px solid rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 80px rgba(0,0,0,0.7), 0 0 40px rgba(0,217,126,0.08) !important;
}
#commandPalette .modal {
  border-top: 2px solid rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 50px rgba(0,0,0,0.7), 0 0 30px rgba(0,217,126,0.08) !important;
}

/* ── Command item: selected/hover with left indicator ─────── */
.command-item:hover,
.command-item.selected {
  background: rgba(0,217,126,0.06) !important;
  border-left: 2px solid rgba(0,217,126,0.4) !important;
  padding-left: 14px !important;
}
.command-item {
  border-left: 2px solid transparent !important;
  transition: all 0.12s !important;
}

/* ── Command item shortcut: font-mono kbd style ──────────── */
.command-item-shortcut {
  font-family: var(--font-mono) !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
}

/* ── Command palette input: green caret ──────────────────── */
.command-palette-input-row input {
  caret-color: var(--accent) !important;
}
.command-palette-icon {
  color: var(--accent) !important;
  opacity: 0.6;
}

/* ── Search result: hover with left green bar ────────────── */
.search-result:hover {
  background: rgba(0,217,126,0.03) !important;
  border-left: 2px solid rgba(0,217,126,0.3) !important;
  padding-left: 10px !important;
}
.search-result {
  border-left: 2px solid transparent !important;
  transition: all 0.12s !important;
}

/* ── Search highlight mark: green accent ─────────────────── */
.search-result .sr-body mark {
  background: rgba(0,217,126,0.18) !important;
  color: var(--accent) !important;
}

/* ── Search result time: font-mono ───────────────────────── */
.search-result .sr-time {
  font-family: var(--font-mono) !important;
}

/* ── Thread time: font-mono timestamps ───────────────────── */
.thread-time {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.thread-item.unread .thread-time {
  color: rgba(0,217,126,0.6) !important;
}

/* ── Contact avatar in thread list: subtle ring ──────────── */
.thread-item .contact-avatar {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) !important;
  transition: box-shadow 0.15s !important;
}
.thread-item.active .contact-avatar,
.thread-item:hover .contact-avatar {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.2) !important;
}

/* ── Urgency dot: pulse animation ────────────────────────── */
.needs-reply-dot.urgency-red {
  animation: urgencyPulse 1.5s ease-in-out infinite !important;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Search modal: accent top strip ──────────────────────── */
.search-modal {
  border-top: 2px solid rgba(0,217,126,0.2) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 40px rgba(0,217,126,0.06) !important;
}
.search-modal-header input {
  caret-color: var(--accent) !important;
}

/* ── Compose + search: green caret throughout ────────────── */
#composeInput, .compose textarea, #threadSearch {
  caret-color: var(--accent) !important;
}

/* ── Pipeline: empty state ───────────────────────────────── */
.pipe-empty {
  color: var(--text-muted) !important;
  font-style: italic !important;
  padding: 32px !important;
  text-align: center !important;
}

/* ── Swarm counters: font-mono ───────────────────────────── */
#s-tasks, #s-pipeline, #s-active {
  font-family: var(--font-mono) !important;
}

/* ── Dashboard counts: font-mono ─────────────────────────── */
#d-close, #d-demo, #d-reply {
  font-family: var(--font-mono) !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 5
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 6 — MEDIA, REACTIONS, MSG BUBBLES, DATE SEPARATORS
   ═══════════════════════════════════════════════════════════ */

/* ── Media grid: hover glow border + scale overlay ───────── */
.media-item {
  transition: box-shadow 0.18s, transform 0.18s !important;
}
.media-item:hover {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.35), 0 0 16px rgba(0,217,126,0.12) !important;
  transform: scale(1.01) !important;
}
.media-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,217,126,0) !important;
  transition: background 0.18s !important;
  pointer-events: none !important;
  border-radius: 4px !important;
}
.media-item:hover::after {
  background: rgba(0,217,126,0.04) !important;
}

/* ── Date separator: font-mono + accent tinted lines ─────── */
.date-separator span {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,0.2) !important;
  background: var(--bg) !important;
  padding: 0 10px !important;
}
.date-separator::before,
.date-separator::after {
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.08), transparent) !important;
}

/* ── Web reactions: glow ring on hover ───────────────────── */
.web-reaction:hover {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 0 1px rgba(0,217,126,0.15), 0 0 8px rgba(0,217,126,0.08) !important;
  transform: scale(1.08) !important;
}
.web-reaction {
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s !important;
}

/* ── msg-action-bar: pill buttons, scale on press ────────── */
.msg-action-bar button {
  border-radius: var(--radius-full) !important;
  font-size: 10px !important;
  padding: 3px 10px !important;
  letter-spacing: 0.02em !important;
  transition: background 0.12s, transform 0.08s, box-shadow 0.12s !important;
}
.msg-action-bar button:hover {
  background: rgba(0,217,126,0.12) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.1) !important;
  transform: translateY(-1px) !important;
}
.msg-action-bar button:active {
  transform: scale(0.95) !important;
}

/* ── msg-time: font-mono throughout ─────────────────────── */
.message .msg-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.02em !important;
}

/* ── Contact notes: green caret, focus subtle treatment ──── */
.contact-notes-input {
  caret-color: var(--accent) !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.contact-notes-bar:focus-within {
  border-bottom: 1px solid rgba(0,217,126,0.15) !important;
}

/* ── Message bubble: slide-in on first paint ─────────────── */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.message.msg-new {
  animation: msgSlideIn 0.22s var(--ease-out) both !important;
}

/* ── Media preview close btn: scale hover ────────────────── */
.media-close {
  transition: background 0.15s, transform 0.15s !important;
}
.media-close:hover {
  transform: scale(1.1) !important;
  background: rgba(255,255,255,0.35) !important;
}

/* ── AI card: token shimmer line at top on hover ─────────── */
@keyframes aiCardShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}
.ai-card {
  overflow: hidden !important;
}
.ai-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.6), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
  pointer-events: none !important;
}
.ai-card:hover::before {
  opacity: 1 !important;
  animation: aiCardShimmer 1.2s ease-in-out !important;
}

/* ── Suggest-reply-card: font-mono label ─────────────────── */
.suggest-reply-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

/* ── Skeleton shimmer: tighter timing ────────────────────── */
.skeleton {
  animation-duration: 1.2s !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 6
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 7 — START SCREEN, SHORTCUTS, EMOJI, WELCOME STATS
   ═══════════════════════════════════════════════════════════ */

/* ── Welcome stat chips: font-mono value + glow on hover ─── */
.welcome-stat-val {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  letter-spacing: -1px !important;
  text-shadow: 0 0 14px rgba(0,217,126,0.3) !important;
}
.welcome-stat-chip:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.04) !important;
  box-shadow: 0 0 20px rgba(0,217,126,0.08) !important;
  transform: translateY(-1px) !important;
}
.welcome-stat-chip {
  transition: all 0.2s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}
.welcome-stat-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
}

/* ── Welcome card icon: scale + glow on hover ────────────── */
.welcome-card .wc-icon {
  transition: transform 0.2s, filter 0.2s !important;
  display: inline-block !important;
}
.welcome-card:hover .wc-icon {
  transform: scale(1.2) translateY(-1px) !important;
  filter: drop-shadow(0 0 6px rgba(0,217,126,0.4)) !important;
}

/* ── ws-shortcut: font-mono kbd, tighter hover ───────────── */
.ws-shortcut kbd {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-mid) !important;
  border-bottom: 2px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}
.ws-shortcut:hover {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.2), 0 0 12px rgba(0,217,126,0.06) !important;
}

/* ── Emoji picker: accent top border + glass effect ──────── */
.emoji-picker-grid {
  border-top: 2px solid rgba(0,217,126,0.12) !important;
  background: rgba(17,19,24,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.emoji-btn:hover {
  background: rgba(0,217,126,0.08) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.1) !important;
}

/* ── Scheduled msg: time font-mono + cleaner icon ────────── */
.scheduled-msg {
  border-radius: var(--radius) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.scheduled-msg:hover {
  border-color: rgba(255,140,0,0.4) !important;
  box-shadow: 0 0 12px rgba(255,140,0,0.08) !important;
}
.scheduled-time {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* ── Bulk-selected thread: stronger accent ring ───────────── */
.thread-item.bulk-selected {
  background: rgba(0,217,126,0.06) !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(0,217,126,0.1) !important;
}

/* ── ws-dot: larger glow pulse ───────────────────────────── */
.welcome-status .ws-dot {
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 0 2px rgba(0,217,126,0.15), 0 0 8px rgba(0,217,126,0.3) !important;
}

/* ── schedule-btn: green tint on hover ───────────────────── */
.schedule-btn:hover {
  color: var(--accent) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(0,217,126,0.4) !important;
}
.emoji-btn-toggle:hover, .mic-btn:hover {
  color: var(--accent) !important;
  opacity: 1 !important;
}

/* ── Date separator: slightly stronger lines ─────────────── */
.date-separator {
  margin: 16px 0 8px !important;
}

/* ── Message container: smoother overall scroll ──────────── */
.messages-container {
  scroll-behavior: smooth !important;
}

/* ── Tool buttons: equal size, pill, consistent hover ─────── */
.tool-btn {
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  transition: all 0.12s !important;
}
.tool-btn:hover {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 7
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 8 — HEADER, RECEIPTS, REACTIONS, CHIPS, MISC POLISH
   ═══════════════════════════════════════════════════════════ */

/* ── Main header: subtle accent gradient bottom border ───── */
.main-header {
  position: relative !important;
}
.main-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.12), transparent) !important;
  pointer-events: none !important;
}

/* ── Read receipt: green instead of blue ─────────────────── */
.msg-status .check.read {
  color: var(--accent) !important;
}
@keyframes read-pulse {
  0%   { transform: scale(1); color: var(--accent); }
  50%  { transform: scale(1.25); color: var(--accent-hover); }
  100% { transform: scale(1); color: var(--accent); }
}

/* ── Reaction count: font-mono ───────────────────────────── */
.msg-reaction .reaction-count {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/* ── tha-btn active state: orange glow ───────────────────── */
.tha-btn.tha-active {
  box-shadow: 0 0 10px rgba(246,166,35,0.2) !important;
}
.tha-btn.tha-draft {
  box-shadow: 0 0 8px rgba(246,166,35,0.12) !important;
}

/* ── category-chip.active: soft glow ring ────────────────── */
.category-chip.active {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.25), 0 0 12px rgba(0,217,126,0.12) !important;
}

/* ── msg-hover-actions: glass pill container ─────────────── */
.message .msg-hover-actions {
  background: rgba(17,19,24,0.92) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 4px !important;
  gap: 1px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
.msg-hover-btn {
  border-radius: var(--radius-full) !important;
  font-size: 10px !important;
  border: none !important;
  padding: 3px 8px !important;
}
.msg-hover-btn:hover {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

/* ── Attachment image: subtle border + glow on hover ─────── */
.msg-attachment img, .msg-attachment video {
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.msg-attachment img:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 20px rgba(0,217,126,0.08) !important;
}

/* ── Revenue card: glow on hover ─────────────────────────── */
.revenue-card {
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.revenue-card:hover {
  border-left-color: rgba(255,215,0,0.8) !important;
  box-shadow: 0 0 20px rgba(255,215,0,0.06), 0 4px 16px rgba(0,0,0,0.3) !important;
}

/* ── Search focus: stronger glow ─────────────────────────── */
.search-container input:focus,
#threadSearch:focus {
  box-shadow: 0 0 0 3px rgba(0,217,126,0.08), 0 2px 8px rgba(0,217,126,0.06) !important;
}

/* ── msg-sentiment-dot: subtle pulse ─────────────────────── */
.msg-sentiment-dot {
  animation: sentimentPulse 3s ease-in-out infinite !important;
}
@keyframes sentimentPulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* ── Pull indicator: accent text ─────────────────────────── */
.pull-indicator {
  color: var(--accent) !important;
  letter-spacing: 0.05em !important;
  font-family: var(--font-mono) !important;
}

/* ── Swipe buttons: pill shape, more premium ─────────────── */
.swipe-btn {
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.swipe-pin {
  background: rgba(0,217,126,0.15) !important;
  color: var(--accent) !important;
}
.swipe-read {
  background: rgba(107,122,144,0.15) !important;
  color: var(--text-muted) !important;
}
.swipe-pin:hover { background: rgba(0,217,126,0.25) !important; }
.swipe-read:hover { background: rgba(107,122,144,0.25) !important; }

/* ── Thread count badge: font-mono ───────────────────────── */
#threadCountBadge {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 8
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 9 — DIGEST, ANALYTICS, PROMPT CARDS, AI HEALTH
   ═══════════════════════════════════════════════════════════ */

/* ── Digest badge: font-mono, glow ──────────────────────── */
.digest-badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  background: rgba(240,82,82,0.15) !important;
  color: #ef4444 !important;
  border-radius: var(--radius-full) !important;
  padding: 1px 6px !important;
  box-shadow: 0 0 8px rgba(240,82,82,0.25) !important;
}

/* ── Digest drawer: sharper glass ──────────────────────── */
.digest-drawer {
  background: rgba(17,19,24,0.98) !important;
  border-bottom: 1px solid rgba(0,217,126,0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ── Digest drawer header: accent left strip ────────────── */
.digest-drawer-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(0,217,126,0.08) !important;
  background: rgba(10,11,16,0.97) !important;
}

/* ── Digest section label: tighter uppercase ────────────── */
.digest-section-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}
.digest-section-label.urgent {
  color: #ef4444 !important;
  text-shadow: 0 0 10px rgba(240,82,82,0.3) !important;
}

/* ── Digest thread card: hover accent shift ─────────────── */
.digest-thread-card {
  transition: background 0.12s, border-left-color 0.12s !important;
  border-left: 2px solid transparent !important;
  padding-left: 10px !important;
}
.digest-thread-card:hover {
  background: rgba(0,217,126,0.05) !important;
  border-left-color: var(--accent) !important;
}

/* ── dtc-name: slightly bolder ──────────────────────────── */
.dtc-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.dtc-stage {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
}
.dtc-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/* ── Analytics stat cards: mono value, hover glow ──────── */
.analytics-stat-card {
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s !important;
}
.analytics-stat-card:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 20px rgba(0,217,126,0.07) !important;
  transform: translateY(-1px) !important;
}
.analytics-stat-value {
  font-family: var(--font-mono) !important;
  font-size: 26px !important;
  letter-spacing: -1px !important;
  text-shadow: 0 0 16px rgba(0,217,126,0.25) !important;
}
.analytics-stat-label {
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.analytics-section-title {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}
.analytics-period-btn {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  transition: all 0.15s !important;
}

/* ── Chart bars: rounded top, accent glow ───────────────── */
.chart-bar {
  transition: height 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
  border-radius: 3px 3px 0 0 !important;
}
.chart-bar.bar-in {
  box-shadow: 0 0 6px rgba(0,217,126,0.25) !important;
}
.chart-bar.bar-out {
  box-shadow: 0 0 6px rgba(246,166,35,0.2) !important;
}
.chart-bar-label {
  font-family: var(--font-mono) !important;
  font-size: 7px !important;
  letter-spacing: 0 !important;
}
.top-contact-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* ── AR stat chip: hover glow ───────────────────────────── */
.ar-stat-chip {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.ar-stat-chip:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.08) !important;
}

/* ── Prompt card: title bold, text mono ─────────────────── */
.prompt-card {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.prompt-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 16px rgba(0,217,126,0.07) !important;
}
.prompt-card-title {
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}
.prompt-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  background: rgba(10,11,16,0.7) !important;
  border-color: rgba(0,217,126,0.08) !important;
}

/* ── Brief thread card: left accent on hover ────────────── */
.brief-thread-card {
  transition: border-color 0.15s, box-shadow 0.15s, border-left-color 0.15s !important;
  border-left: 2px solid transparent !important;
}
.brief-thread-card:hover {
  border-left-color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,217,126,0.07) !important;
}
.brief-thread-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.brief-thread-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/* ── AI objection bar: pulse glow ───────────────────────── */
.ai-objection-bar {
  position: relative !important;
}
@keyframes objWarningPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 10px rgba(255,159,10,0.12); }
}
.ai-objection-bar {
  animation: objWarningPulse 2.5s ease-in-out infinite !important;
}
.aob-text {
  font-weight: 700 !important;
  font-size: 11px !important;
}
.aob-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}

/* ── AI health bar: segment labels mono ─────────────────── */
.ahb-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.5px !important;
}
.ahb-trend {
  font-family: var(--font-mono) !important;
}
.ahb-bar {
  transition: width 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}

/* ── Mockup result card: preview URL mono ───────────────── */
.mockup-result-card {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.mockup-result-card:hover {
  box-shadow: 0 0 20px rgba(0,217,126,0.1) !important;
}
.mockup-preview-url {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.mockup-result-biz {
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

/* ── Mockup history: hover accent ───────────────────────── */
.mockup-history-item {
  transition: border-color 0.15s, background 0.15s !important;
}
.mockup-history-item:hover {
  border-color: rgba(0,217,126,0.2) !important;
  background: rgba(0,217,126,0.03) !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 9
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 10 — CLIENT CARDS, CAMPAIGN FUNNEL, LEAD SCORE, RULES
   ═══════════════════════════════════════════════════════════ */

/* ── Client card: deeper hover glow per stage ───────────── */
.client-card {
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s !important;
}
.client-card:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 0 18px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}

/* ── client-card-stage: font-mono, tighter ──────────────── */
.client-card-stage {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

/* ── client-metric-val: font-mono ───────────────────────── */
.client-metric-val {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  letter-spacing: -0.5px !important;
}
.client-metric-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
}

/* ── client-card-deal: accent glow strip ────────────────── */
.client-card-deal {
  box-shadow: 0 0 12px rgba(0,217,126,0.08) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}
.client-card-deal .deal-math {
  font-family: var(--font-mono) !important;
}

/* ── Lead score badge: font-mono, glow per score level ─── */
.lead-score-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
}

/* ── Campaign funnel card: title mono ───────────────────── */
.campaign-funnel-card {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.campaign-funnel-card:hover {
  border-color: rgba(0,217,126,0.15) !important;
  box-shadow: 0 0 16px rgba(0,217,126,0.06) !important;
}
.cfc-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.cfc-step-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
}
.cfc-step-val {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.cfc-bar-inner {
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}
.cfc-bar-outer {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 7px !important;
}

/* ── Rule card v2: left accent border on hover ──────────── */
.rule-card-v2 {
  transition: border-color 0.15s, box-shadow 0.15s, border-left-color 0.15s !important;
  border-left: 2px solid transparent !important;
}
.rule-card-v2:hover {
  border-left-color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,217,126,0.06) !important;
}

/* ── Thread stage pill: font-mono ───────────────────────── */
.thread-stage-pill {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
}

/* ── Nudge item: accent left border on hover ────────────── */
.nudge-item {
  transition: background 0.12s, border-left-color 0.12s !important;
  border-left: 2px solid transparent !important;
  padding-left: 6px !important;
}
.nudge-item:hover {
  background: rgba(0,217,126,0.03) !important;
  border-left-color: rgba(246,166,35,0.4) !important;
}

/* ── Top contact fill: gradient + smooth animation ──────── */
.top-contact-fill {
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1) !important;
  background: linear-gradient(90deg, var(--accent), #00a855) !important;
}

/* ── ar-dash-card: settings/analytics card hover ────────── */
.ar-dash-card {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.ar-dash-card:hover {
  border-color: rgba(0,217,126,0.18) !important;
  box-shadow: 0 0 16px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}

/* ── Score badge shine on lead score 8-10 ───────────────── */
.lead-score, .score-badge, .ls-score {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}

/* ── field-label: font-mono throughout ─────────────────── */
.field-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 10
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 11 — LIVE STATS, PROSPECTS, BRIEF, TYPING, LINK PREVIEW
   ═══════════════════════════════════════════════════════════ */

/* ── Welcome live stats bar: font-mono + hover glow ─────── */
.wls-val {
  font-family: var(--font-mono) !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
}
.wls-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
}
.wls-item {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.wls-item:hover {
  box-shadow: 0 0 14px rgba(0,217,126,0.08) !important;
  transform: translateY(-1px) !important;
}
.wls-urgent {
  box-shadow: 0 0 12px rgba(0,217,126,0.1) !important;
}

/* ── Brief stat bar: font-mono numbers ──────────────────── */
.brief-stat span {
  font-family: var(--font-mono) !important;
  font-size: 20px !important;
  letter-spacing: -0.5px !important;
}
.brief-stat label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.8px !important;
}
.brief-stats-bar {
  transition: border-color 0.15s !important;
}
.brief-stats-bar:hover {
  border-color: rgba(0,217,126,0.12) !important;
}

/* ── Stale prospect card: pulse warning border ──────────── */
.stale-prospect-card {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.stale-prospect-card:hover {
  border-color: rgba(245,158,11,0.4) !important;
  box-shadow: 0 0 14px rgba(245,158,11,0.08) !important;
}

/* ── Prospect finder card: left accent on hover ─────────── */
.prospect-finder-card {
  transition: border-color 0.15s, box-shadow 0.15s, border-left-color 0.15s !important;
  border-left: 2px solid transparent !important;
}
.prospect-finder-card:hover {
  border-left-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(0,217,126,0.07) !important;
}

/* ── Checklist items: done = accent, pending = subtle ───── */
.checklist-item {
  transition: border-left-color 0.15s !important;
}
.checklist-item.done {
  border-left-color: var(--accent) !important;
}
.checklist-section-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
}

/* ── Typing dots: green accent ──────────────────────────── */
.typing-dots span {
  background: var(--accent) !important;
  opacity: 0.5 !important;
}
.typing-dots {
  border-color: rgba(0,217,126,0.1) !important;
  background: rgba(17,19,24,0.8) !important;
}

/* ── Link preview: stronger hover treatment ─────────────── */
.link-preview {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.link-preview:hover {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.07) !important;
}
.link-preview-title {
  font-size: 10px !important;
  letter-spacing: 0.01em !important;
}
.link-preview-domain {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
}

/* ── Draft area: caret green, focus glow ────────────────── */
.draft-area .draft-text {
  caret-color: var(--accent) !important;
}
.draft-area:focus-within {
  border-color: rgba(0,217,126,0.15) !important;
}

/* ── Image preview: border + hover glow ─────────────────── */
.image-preview {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.image-preview:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 14px rgba(0,217,126,0.08) !important;
}

/* ── Tag filter chip count badge: font-mono ─────────────── */
.tfc-count {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/* ── Tag filter chip active: glow ring ──────────────────── */
.tag-filter-chip.tag-filter-active {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.2) !important;
}

/* ── Sort chip active: font-mono ────────────────────────── */
.sort-chip.active {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
}
.sort-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════
   END WAVE 11
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WAVE 12 — REVENUE GOAL, ANALYZER, THREAD TAGS, AI DRAWER, SEMANTIC SEARCH
   ═══════════════════════════════════════════════════════════ */

/* ── Revenue Goal Card ──────────────────────────────────── */
.revenue-goal-card {
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s !important;
}
.revenue-goal-card:hover {
  border-color: rgba(0,217,126,0.22) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 0 20px rgba(0,217,126,0.07) !important;
  transform: translateY(-1px) !important;
}
.rgc-actual {
  font-family: var(--font-mono) !important;
  font-size: 30px !important;
  letter-spacing: -1.5px !important;
  text-shadow: 0 0 20px rgba(0,217,126,0.3) !important;
}
.rgc-goal {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  letter-spacing: -1px !important;
}
.rgc-pct {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.rgc-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.rgc-bar {
  background: linear-gradient(90deg, var(--accent), rgba(0,217,126,0.4)) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.3) !important;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: var(--radius-full) !important;
}
.rgc-sub {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.5px !important;
}

/* ── Analyzer Result ─────────────────────────────────────── */
.analyzer-result {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.analyzer-result:hover {
  border-color: rgba(0,217,126,0.15) !important;
  box-shadow: 0 0 16px rgba(0,0,0,0.2) !important;
}
.analyzer-issue {
  transition: background 0.12s !important;
}
.analyzer-issue:hover {
  background: rgba(255,255,255,0.02) !important;
}
.analyzer-issue-text {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.analyzer-issue-fix {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  opacity: 0.8 !important;
}

/* ai-dot severity glow */
@keyframes aiDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.ai-dot {
  animation: aiDotPulse 2.4s ease-in-out infinite !important;
}
.ai-dot.warn {
  box-shadow: 0 0 6px rgba(246,166,35,0.5) !important;
}
.ai-dot.ok {
  box-shadow: 0 0 6px rgba(0,217,126,0.5) !important;
  animation-duration: 3.5s !important;
}
.ai-dot:not(.warn):not(.ok) {
  box-shadow: 0 0 6px rgba(240,82,82,0.5) !important;
}

/* ── Thread Tags ─────────────────────────────────────────── */
.thread-tag {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  transition: box-shadow 0.12s, transform 0.12s !important;
}
.thread-tag:hover {
  transform: scale(1.05) !important;
}
.thread-tag-hot-lead:hover {
  box-shadow: 0 0 8px rgba(239,68,68,0.25) !important;
}
.thread-tag-client:hover {
  box-shadow: 0 0 8px rgba(16,185,129,0.25) !important;
}
.thread-tag-personal:hover {
  box-shadow: 0 0 8px rgba(139,92,246,0.25) !important;
}
.thread-tag-urgent:hover {
  box-shadow: 0 0 8px rgba(245,158,11,0.3) !important;
}
.thread-tag-prospect:hover {
  box-shadow: 0 0 8px rgba(59,130,246,0.25) !important;
}
.thread-tag-vip {
  box-shadow: 0 0 6px rgba(245,158,11,0.15) !important;
}
.thread-tag-vip:hover {
  box-shadow: 0 0 12px rgba(245,158,11,0.35) !important;
}
.thread-tag-cold {
  opacity: 0.7 !important;
}
.thread-tag-follow-up:hover {
  box-shadow: 0 0 8px rgba(6,182,212,0.25) !important;
}

/* ── Semantic Search Bar ─────────────────────────────────── */
.search-mode-bar {
  border-radius: var(--radius) !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.search-mode-bar:focus-within {
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.06), 0 4px 14px rgba(0,0,0,0.2) !important;
}
.semantic-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.smb-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}

/* ── AI Drawer Polish ─────────────────────────────────────── */
.ai-drawer-pill {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.15s, transform 0.12s !important;
}
.ai-drawer-pill:hover {
  transform: scale(1.03) !important;
}
.ai-drawer-ttl {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.ai-drawer-x {
  transition: background 0.12s, transform 0.1s !important;
}
.ai-drawer-x:hover {
  transform: scale(1.15) !important;
}

/* ── Revenue Calc Output ─────────────────────────────────── */
.revenue-calc-output {
  font-family: var(--font-mono) !important;
  border: 1px solid rgba(0,217,126,0.15) !important;
  background: rgba(0,217,126,0.04) !important;
  border-radius: var(--radius) !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.revenue-calc-output.visible {
  box-shadow: 0 0 20px rgba(0,217,126,0.08) !important;
}

/*   END WAVE 12   */

/* ═══════════════════════════════════════════════════════════
   WAVE 13 — ACTIVITY FEED, LOG ENTRIES, PROFILE STATS, CONTACT PANEL
   ═══════════════════════════════════════════════════════════ */

/* ── Activity Feed ───────────────────────────────────────── */
.activity-event {
  transition: background 0.12s !important;
  border-radius: 6px !important;
}
.activity-event:hover {
  background: rgba(0,217,126,0.03) !important;
}
.activity-name {
  font-weight: 600 !important;
  color: var(--text) !important;
}
.activity-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.activity-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}
.activity-detail {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

/* ── Log Entry v2 ────────────────────────────────────────── */
.log-entry-v2 {
  transition: background 0.12s !important;
  border-radius: 6px !important;
  padding: 8px 6px !important;
}
.log-entry-v2:hover {
  background: rgba(0,217,126,0.02) !important;
}
.log-contact {
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}
.log-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}
.log-dot.sent {
  animation: aiDotPulse 3s ease-in-out infinite !important;
}

/* ── Log Entry v1 (older): font-mono status ─────────────── */
.log-entry .log-status {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.3px !important;
}
.log-entry {
  transition: background 0.1s !important;
}
.log-entry:hover {
  background: rgba(255,255,255,0.01) !important;
}

/* ── Profile Stats Panel ─────────────────────────────────── */
.profile-avatar {
  box-shadow: 0 0 0 3px rgba(0,217,126,0.15), 0 0 20px rgba(0,217,126,0.1) !important;
  transition: box-shadow 0.2s !important;
}
.profile-avatar:hover {
  box-shadow: 0 0 0 3px rgba(0,217,126,0.35), 0 0 30px rgba(0,217,126,0.2) !important;
}
.profile-stats {
  background: var(--bg) !important;
  border-color: rgba(0,217,126,0.08) !important;
  transition: border-color 0.15s !important;
}
.profile-stats:hover {
  border-color: rgba(0,217,126,0.15) !important;
}
.ps-value {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}
.ps-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ── Pipeline Finder Bar ─────────────────────────────────── */
.pipeline-finder-bar input {
  caret-color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}
.pipeline-finder-bar input:focus {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.12) !important;
}

/* ── Log Dot Accent Colors ───────────────────────────────── */
.log-dot.sent {
  box-shadow: 0 0 8px rgba(0,217,126,0.4) !important;
}
.log-dot.pending {
  box-shadow: 0 0 6px rgba(246,166,35,0.3) !important;
}
.log-dot.failed {
  box-shadow: 0 0 6px rgba(240,82,82,0.3) !important;
}

/* ── Search Modal Header Input ───────────────────────────── */
.search-modal-header input {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  caret-color: var(--accent) !important;
}
.search-modal-header input:focus {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.1) !important;
}

/*   END WAVE 13   */

/* ═══════════════════════════════════════════════════════════
   WAVE 14 — CAMPAIGN CARDS, SENTIMENT TAGS, SUGGEST PANEL, QUICK REPLY
   ═══════════════════════════════════════════════════════════ */

/* ── Campaign Card v2: deeper hover ─────────────────────── */
.campaign-card {
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s !important;
}
.campaign-card:hover {
  border-color: rgba(246,166,35,0.3) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2), 0 0 14px rgba(246,166,35,0.06) !important;
  transform: translateY(-1px) !important;
}
.campaign-name {
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
.campaign-status {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.5px !important;
}
.campaign-stats {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.campaign-stats strong {
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(0,217,126,0.2) !important;
}

/* ── Sentiment / Analysis Tags: font-mono ────────────────── */
.sa-tag,
.analysis-tag,
.monitor-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  transition: box-shadow 0.12s, transform 0.1s !important;
}
.sa-tag:hover,
.analysis-tag:hover {
  transform: scale(1.05) !important;
}
.sa-tag.sentiment-positive,
.analysis-tag.sentiment-positive {
  box-shadow: 0 0 6px rgba(0,217,126,0.15) !important;
}
.sa-tag.sentiment-negative,
.analysis-tag.sentiment-negative {
  box-shadow: 0 0 6px rgba(240,82,82,0.15) !important;
}
.sa-tag.urgency-high {
  box-shadow: 0 0 6px rgba(240,82,82,0.2) !important;
}
.monitor-badge.alert-urgent {
  box-shadow: 0 0 8px rgba(240,82,82,0.25) !important;
}

/* ── Suggest Panel: glass surface ────────────────────────── */
.suggest-panel {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(0,217,126,0.08) !important;
}
.suggest-section-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}

/* ── Quick Reply Buttons: better hover ───────────────────── */
.suggest-quick-btn {
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.1s !important;
  font-size: 12px !important;
}
.suggest-quick-btn:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.06) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.08) !important;
  transform: translateY(-1px) !important;
  color: var(--accent) !important;
}

/* ── Analysis Section: accent header ─────────────────────── */
.analysis-section h4 {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/*   END WAVE 14   */

/* ═══════════════════════════════════════════════════════════
   WAVE 15 — SUGGEST REPLY CARDS, REPLY OPTIONS, AI CONFIG, COMPOSE
   ═══════════════════════════════════════════════════════════ */

/* ── Suggest Reply Cards: glow on hover ──────────────────── */
.suggest-reply-card {
  border-radius: var(--radius) !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s !important;
}
.suggest-reply-card:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.04) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 12px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}
.suggest-reply-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── Reply Options (alternate): richer hover ─────────────── */
.reply-option {
  transition: border-color 0.15s, box-shadow 0.14s, background 0.14s !important;
}
.reply-option:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.03) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.05) !important;
}
.reply-option .option-tone {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ── Suggest Prompt Input: green caret ───────────────────── */
.suggest-prompt-input {
  caret-color: var(--accent) !important;
  font-size: 12px !important;
}
.suggest-prompt-input:focus {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 0 2px rgba(0,217,126,0.08) !important;
}

/* ── AI Config Section: font-mono labels ─────────────────── */
.ai-config-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.ai-config-title {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.5px !important;
}

/* ── Auto-Respond Bar: subtle polish ─────────────────────── */
.auto-respond-bar {
  border-bottom: 1px solid rgba(0,217,126,0.06) !important;
}

/* ── Attach Button: hover ────────────────────────────────── */
.attach-btn {
  transition: background 0.12s, transform 0.1s !important;
}
.attach-btn:hover {
  transform: scale(1.1) !important;
}

/* ── Emoji Button ────────────────────────────────────────── */
.emoji-btn,
.emoji-btn-toggle {
  transition: background 0.12s, transform 0.12s, opacity 0.12s !important;
}
.emoji-btn:hover {
  box-shadow: 0 0 8px rgba(246,166,35,0.15) !important;
}

/*   END WAVE 15   */

/* ═══════════════════════════════════════════════════════════
   WAVE 16 — WELCOME SCREEN, EMPTY STATE, STATUS DOTS, WELCOME CARDS
   ═══════════════════════════════════════════════════════════ */

/* ── Welcome Brand: font-mono upgrade ────────────────────── */
.welcome-brand {
  font-family: var(--font-mono) !important;
  letter-spacing: -1px !important;
  text-shadow: 0 0 40px rgba(0,217,126,0.15) !important;
}
.welcome-tagline {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--text-muted) !important;
}

/* ── Welcome Cards: richer hover ─────────────────────────── */
.welcome-card {
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.18s !important;
  border-radius: var(--radius) !important;
}
.welcome-card:hover {
  box-shadow: 0 0 30px rgba(0,217,126,0.12), 0 8px 24px rgba(0,0,0,0.35) !important;
  transform: translateY(-2px) !important;
}
.welcome-card .wc-title {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;
}
.welcome-card .wc-desc {
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}

/* ── Welcome Status Bar: font-mono ───────────────────────── */
.welcome-status .ws-item {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
}

/* ── Thread List Empty State: centered polish ─────────────── */
.thread-list .empty-state .empty-title {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: -0.2px !important;
}
.thread-list .empty-state .empty-desc {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* ── Inbox Zero Button: glow on hover ────────────────────── */
.sidebar-inbox-zero-btn {
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s !important;
}
.sidebar-inbox-zero-btn:hover {
  box-shadow: 0 0 14px rgba(0,217,126,0.12) !important;
  transform: translateY(-1px) !important;
}

/* ── Inbox Zero Modal: glass refinement ──────────────────── */
.inbox-zero-modal {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── ws-dot: glow intensities ────────────────────────────── */
.welcome-status .ws-dot {
  box-shadow: 0 0 8px rgba(0,217,126,0.4) !important;
}
.welcome-status .ws-dot.warn {
  box-shadow: 0 0 8px rgba(246,166,35,0.4) !important;
}
.welcome-status .ws-dot.disconnected {
  box-shadow: 0 0 8px rgba(240,82,82,0.35) !important;
}

/*   END WAVE 16   */

/* ═══════════════════════════════════════════════════════════
   WAVE 17 — THREAD LIST ITEMS, MSG STATUS, HOVER ACTIONS, REACTIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Thread Item: stronger unread presence ───────────────── */
.thread-item.has-unread {
  border-left-color: rgba(0,217,126,0.55) !important;
  background: rgba(0,217,126,0.025) !important;
}
.thread-item.has-unread .thread-name {
  text-shadow: 0 0 12px rgba(0,217,126,0.12) !important;
}
.thread-item.pinned {
  background: rgba(246,166,35,0.025) !important;
}
.thread-item:hover {
  background: rgba(0,217,126,0.04) !important;
}
.thread-item.active {
  border-left-color: var(--accent) !important;
  background: rgba(0,217,126,0.06) !important;
}

/* ── Thread Hover Actions: sharper reveal ────────────────── */
.tha-btn {
  font-size: 12px !important;
  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.1s !important;
}
.tha-btn:hover {
  background: var(--bg-elevated) !important;
  border-color: rgba(0,217,126,0.25) !important;
  color: var(--accent) !important;
  transform: scale(1.08) !important;
}

/* ── Unread Badge: stronger glow ─────────────────────────── */
.unread-badge {
  font-family: var(--font-mono) !important;
  box-shadow: 0 0 12px rgba(0,217,126,0.55) !important;
  animation: aiDotPulse 2.5s ease-in-out infinite !important;
}

/* ── Message Status Checks ───────────────────────────────── */
.msg-status .check {
  transition: color 0.15s !important;
}
.msg-status .check.read {
  text-shadow: 0 0 6px rgba(59,130,246,0.4) !important;
}
.msg-status .check.delivered {
  text-shadow: 0 0 6px rgba(0,217,126,0.3) !important;
}

/* ── Message Reactions ───────────────────────────────────── */
.msg-reaction {
  transition: background 0.12s, border-color 0.12s, transform 0.1s !important;
  font-size: 12px !important;
}
.msg-reaction:hover {
  background: rgba(0,217,126,0.06) !important;
  border-color: rgba(0,217,126,0.2) !important;
  transform: scale(1.08) !important;
}

/* ── Thread Name: name display polish ────────────────────── */
.thread-item .thread-name {
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}
.thread-item .thread-preview {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.thread-item .thread-meta {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/*   END WAVE 17   */

/* ═══════════════════════════════════════════════════════════
   WAVE 18 — EXPORT BUTTONS, BULK SELECT, SHORTCUT ROWS, FILTER CHIPS
   ═══════════════════════════════════════════════════════════ */

/* ── Export Format Buttons: premium hover ────────────────── */
.export-format-btn {
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s !important;
  border-radius: var(--radius) !important;
}
.export-format-btn:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.05) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 12px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}
.efb-icon {
  font-family: var(--font-mono) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(0,217,126,0.3) !important;
}
.efb-title {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}
.efb-desc {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* ── Bulk Selected Threads: vivid accent ─────────────────── */
.thread-item.bulk-selected {
  background: rgba(0,217,126,0.07) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
.thread-item.bulk-selected::before {
  box-shadow: 0 0 8px rgba(0,217,126,0.4) !important;
  font-family: var(--font-mono) !important;
}

/* ── Pipeline Bulk Btn ───────────────────────────────────── */
.pipeline-bulk-btn {
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s !important;
}
.pipeline-bulk-btn:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.06) !important;
}

/* ── Shortcut Row: font-mono desc + hover lift ───────────── */
.shortcut-row {
  transition: background 0.12s, box-shadow 0.12s !important;
  border-radius: var(--radius-sm) !important;
}
.shortcut-row:hover {
  background: rgba(0,217,126,0.04) !important;
  box-shadow: inset 2px 0 0 rgba(0,217,126,0.3) !important;
}
.shortcut-desc {
  font-size: 12.5px !important;
}
.shortcut-keys kbd {
  transition: box-shadow 0.12s !important;
}
.shortcut-row:hover .shortcut-keys kbd {
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 6px rgba(0,217,126,0.1) !important;
  border-color: rgba(0,217,126,0.2) !important;
}

/* ── Filter Chips: accent active state ───────────────────── */
.filter-chip {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  transition: color 0.12s, background 0.12s, box-shadow 0.12s !important;
}
.filter-chip.active {
  box-shadow: 0 0 0 1px rgba(0,217,126,0.2), 0 0 10px rgba(0,217,126,0.08) !important;
}
.filter-chip .filter-count {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/*   END WAVE 18   */

/* ═══════════════════════════════════════════════════════════
   WAVE 19 — PIPELINE BOARD CARDS, STAGE SELECT, PIPELINE CARD v1
   ═══════════════════════════════════════════════════════════ */

/* ── Pipeline Board Card: richer hover ───────────────────── */
.pipeline-board-card {
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.14s !important;
  border-radius: var(--radius) !important;
}
.pipeline-board-card:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.04) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 14px rgba(0,217,126,0.07) !important;
  transform: translateY(-1px) !important;
}
.pipeline-board-name {
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}
.pipeline-board-service {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
}
.pipeline-board-notes {
  font-size: 11px !important;
  border: 1px solid rgba(0,217,126,0.06) !important;
  background: rgba(0,0,0,0.15) !important;
}

/* ── Pipeline Stage Select ───────────────────────────────── */
.pipeline-stage-select {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  transition: border-color 0.12s !important;
}
.pipeline-stage-select:focus {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.12) !important;
}

/* ── Pipeline Card v1 (sidebar): hover lift ──────────────── */
.pipeline-card {
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.14s !important;
  border-radius: var(--radius) !important;
}
.pipeline-card:hover {
  background: var(--bg-secondary) !important;
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15), 0 0 10px rgba(0,217,126,0.05) !important;
  transform: translateY(-1px) !important;
}
.pipeline-card-name {
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}
.pipeline-card-service {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.pipeline-card-notes {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

/*   END WAVE 19   */

/* ═══════════════════════════════════════════════════════════
   WAVE 20 — CONTACT NOTES, ENGAGEMENT SCORE, AR DASH ROWS, MISC
   ═══════════════════════════════════════════════════════════ */

/* ── Contact Notes Input: green caret + focus glow ──────── */
.contact-notes-input {
  caret-color: var(--accent) !important;
  font-size: 12px !important;
  transition: color 0.15s !important;
}
.contact-notes-bar:focus-within {
  background: rgba(0,217,126,0.03) !important;
  border-radius: 6px !important;
}

/* ── Pipeline Engagement Score: font-mono ────────────────── */
.pipeline-engagement-score {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* ── Campaign Reply Rate: accent glow ────────────────────── */
.campaign-reply-rate {
  font-family: var(--font-mono) !important;
  text-shadow: 0 0 10px rgba(0,217,126,0.2) !important;
}

/* ── AR Dash Contact Row: font-mono names ────────────────── */
.ar-dash-contact-name {
  font-weight: 600 !important;
  font-size: 11px !important;
}
.ar-dash-contact-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.ar-dash-contact-bar {
  border-radius: var(--radius-full) !important;
}

/* ── AR Dash Rule: font-mono ─────────────────────────────── */
.ar-dash-rule {
  transition: background 0.1s !important;
  border-radius: 5px !important;
  padding: 2px 4px !important;
}
.ar-dash-rule:hover {
  background: rgba(0,217,126,0.03) !important;
}

/* ── Stale Prospect: spc-name font-mono ──────────────────── */
.stale-prospect-card .spc-name {
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

/* ── Pipeline Column Headers ─────────────────────────────── */
.pipeline-col-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/*   END WAVE 20   */

/* ═══════════════════════════════════════════════════════════
   WAVE 21 — MODAL POLISH, TOAST, IMPORT AREA, LABELS
   ═══════════════════════════════════════════════════════════ */

/* ── Modal: stronger glass + border ─────────────────────── */
.modal {
  background: rgba(17,19,24,0.98) !important;
  border-color: rgba(0,217,126,0.12) !important;
  box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 30px rgba(0,217,126,0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.modal h3 {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  letter-spacing: -0.3px !important;
  color: var(--text) !important;
}
.modal label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.modal input:focus,
.modal textarea:focus,
.modal select:focus {
  border-color: rgba(0,217,126,0.35) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.08) !important;
}
.modal input,
.modal textarea,
.modal select {
  caret-color: var(--accent) !important;
}
.modal-overlay {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── Toast: semantic glow ────────────────────────────────── */
.toast {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
  border-radius: var(--radius) !important;
}
.toast.success {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(0,217,126,0.15) !important;
  border-color: rgba(0,217,126,0.3) !important;
}
.toast.error {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(240,82,82,0.12) !important;
  border-color: rgba(240,82,82,0.3) !important;
}

/* ── Import Textarea: green caret ────────────────────────── */
.import-textarea {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  caret-color: var(--accent) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 10px 12px !important;
  outline: none !important;
  line-height: 1.6 !important;
  resize: vertical !important;
  transition: border-color 0.15s !important;
}
.import-textarea:focus {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 0 2px rgba(0,217,126,0.06) !important;
}

/* ── Section Labels in modals / panels ───────────────────── */
.modal-actions {
  margin-top: 20px !important;
  gap: 8px !important;
}

/*   END WAVE 21   */

/* ═══════════════════════════════════════════════════════════
   WAVE 22 — CMD CENTER, STAT CHIPS, QUICK CHIPS, SCHEDULED MSGS
   ═══════════════════════════════════════════════════════════ */

/* ── CMD Center Modal: stronger glow ─────────────────────── */
.cmd-center {
  box-shadow: 0 0 80px rgba(0,217,126,0.1), 0 25px 60px rgba(0,0,0,0.6) !important;
}
.cmd-header {
  background: linear-gradient(135deg, rgba(0,217,126,0.07) 0%, rgba(246,166,35,0.04) 100%) !important;
}
.cmd-header h3 {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.3px !important;
}

/* ── CMD Tabs: font-mono + active glow ───────────────────── */
.cmd-tab {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  transition: color 0.12s, background 0.12s !important;
}
.cmd-tab.active {
  text-shadow: 0 0 10px rgba(0,217,126,0.2) !important;
}
.cmd-tab.active::after {
  box-shadow: 0 0 10px rgba(0,217,126,0.3) !important;
}

/* ── Stat Chips: font-mono ───────────────────────────────── */
.stat-chip {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: box-shadow 0.12s, transform 0.1s !important;
}
.stat-chip.sent {
  box-shadow: 0 0 8px rgba(0,217,126,0.12) !important;
}
.stat-chip.campaigns {
  box-shadow: 0 0 8px rgba(246,166,35,0.1) !important;
}

/* ── Quick Chips: stronger hover ─────────────────────────── */
.quick-chip {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  transition: all 0.14s !important;
}
.quick-chip:hover {
  background: rgba(0,217,126,0.07) !important;
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.08) !important;
  transform: translateY(-1px) !important;
}

/* ── Scheduled Message: cleaner display ──────────────────── */
.scheduled-msg {
  transition: border-color 0.12s, background 0.12s !important;
  border-radius: var(--radius-sm) !important;
}
.scheduled-msg:hover {
  border-color: rgba(246,166,35,0.35) !important;
  background: rgba(246,166,35,0.07) !important;
}
.scheduled-text {
  font-size: 11.5px !important;
}
.scheduled-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}

/*   END WAVE 22   */

/* ═══════════════════════════════════════════════════════════
   WAVE 23 — AI CARDS, SPEED BTNS, AI LOADING STATE
   ═══════════════════════════════════════════════════════════ */

/* ── AI Card: stronger glow on hover ─────────────────────── */
.ai-card {
  border-radius: var(--radius) !important;
  transition: border-color 0.18s, background 0.18s, transform 0.14s, box-shadow 0.18s !important;
}
.ai-card:hover {
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.04) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 24px rgba(0,217,126,0.1), 0 10px 24px rgba(0,0,0,0.4) !important;
}
.ai-card-lead {
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 0 12px rgba(0,217,126,0.06) !important;
}
.ai-card-selected {
  box-shadow: 0 0 0 2px rgba(0,217,126,0.2), 0 0 20px rgba(0,217,126,0.1), 0 8px 20px rgba(0,0,0,0.3) !important;
}

/* ── AI Card Tone: font-mono ─────────────────────────────── */
.ai-card-tone {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
}
.ai-card-tone::before {
  animation: aiDotPulse 3s ease-in-out infinite !important;
}

/* ── AI Card Body: improved readability ──────────────────── */
.ai-card-body {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
}
.ai-card-use {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.3px !important;
}

/* ── AI Speed Btn: orange glow on active ─────────────────── */
.ai-speed-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s !important;
}
.ai-speed-btn:hover {
  box-shadow: 0 0 10px rgba(255,159,10,0.15) !important;
}
.ai-speed-btn.active {
  box-shadow: 0 0 14px rgba(255,159,10,0.2) !important;
}

/* ── AI Loading State: pulse ─────────────────────────────── */
.ai-loading-state {
  opacity: 0.8 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/*   END WAVE 23   */

/* ═══════════════════════════════════════════════════════════
   WAVE 24 — AI STATUS BAR, TAG PRESET BTNS, FINAL POLISH
   ═══════════════════════════════════════════════════════════ */

/* ── AI Status Bar: stronger presence ────────────────────── */
.ai-status-bar {
  background: rgba(0,217,126,0.05) !important;
  border-top: 1px solid rgba(0,217,126,0.12) !important;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s !important;
}
.ai-status-bar.ai-status-done {
  background: rgba(0,217,126,0.09) !important;
  box-shadow: 0 -1px 0 rgba(0,217,126,0.1) !important;
}
.ai-status-dot {
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.4) !important;
}
.ai-status-text {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
}
.ai-status-bar.ai-status-done .ai-status-text {
  text-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}

/* ── Tag Preset Buttons: font-mono + glow hover ──────────── */
.tag-preset-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.1s !important;
}
.tag-preset-btn:hover {
  border-color: rgba(0,217,126,0.3) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.05) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.08) !important;
  transform: translateY(-1px) !important;
}

/* ── Stale Prospect Card: deeper warning hover ───────────── */
.stale-prospect-card {
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
  border-radius: var(--radius) !important;
}
.stale-prospect-card:hover {
  border-color: rgba(245,158,11,0.45) !important;
  background: rgba(245,158,11,0.09) !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.08) !important;
}

/* ── Scrollbar: green accent on focus areas ──────────────── */
.messages-pane::-webkit-scrollbar-thumb,
.thread-list::-webkit-scrollbar-thumb,
.ai-drawer::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.12) !important;
}
.messages-pane::-webkit-scrollbar-thumb:hover,
.thread-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0,217,126,0.22) !important;
}

/*   END WAVE 24   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 25 — Analytics Stats, Client Cards, WLS, Digest, Checklist
   ═══════════════════════════════════════════════════════════ */

/* Analytics stat cards — mono values, hover lift */
.analytics-stat-card {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.analytics-stat-card:hover {
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 12px rgba(0,217,126,0.07) !important;
  transform: translateY(-1px) !important;
}
.analytics-stat-value {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 0 16px rgba(0,217,126,0.25) !important;
}
.analytics-stat-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}
.analytics-section-title {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}
.analytics-period-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.analytics-header h3 {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* Client Manager CRM cards */
.client-card:hover {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2), 0 0 16px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}
.client-card-name {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
.client-card-stage {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
}
.client-metric-val {
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.client-metric-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.8px !important;
}
.client-metric {
  transition: border-color 0.12s, background 0.12s !important;
}
.client-metric:hover {
  border-color: rgba(0,217,126,0.2) !important;
  background: rgba(0,217,126,0.03) !important;
}
.client-card-deal {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}
.client-card-deal .deal-math {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2px !important;
}
.clients-summary .cs-val {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

/* WLS (Welcome Live Stats) — bigger hover glow */
.wls-item {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
.wls-item:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,217,126,0.1) !important;
  transform: translateY(-1px) !important;
}
.wls-val {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.wls-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.8px !important;
}

/* Digest drawer — mono labels, richer hover */
.digest-bell-btn {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.digest-badge {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
}
.digest-section-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
}
.digest-thread-card:hover {
  background: rgba(0,217,126,0.06) !important;
}
.dtc-name {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.dtc-stage {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}
.dtc-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
}
.dtc-msg {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.digest-drawer-header {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* Checklist — done items richer accent */
.checklist-item {
  transition: border-left-color 0.15s, color 0.15s !important;
}
.checklist-item.done {
  border-left-color: var(--accent) !important;
  opacity: 0.6 !important;
}
.checklist-section-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}

/*   END WAVE 25   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 26 — Nudge Strip, Objection Bar, Typing, Link Preview, Scroll FAB, Compose
   ═══════════════════════════════════════════════════════════ */

/* Nudge strip — mono labels, stronger warning */
.nudge-strip-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.nudge-name {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.nudge-days {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

/* AI Objection Bar — stronger orange */
.ai-objection-bar {
  background: rgba(255,159,10,0.08) !important;
  border-top-color: rgba(255,159,10,0.2) !important;
  border-bottom-color: rgba(255,159,10,0.2) !important;
}
.aob-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.aob-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: background 0.12s, box-shadow 0.12s !important;
}
.aob-btn:hover {
  background: rgba(255,159,10,0.25) !important;
  box-shadow: 0 0 8px rgba(255,159,10,0.2) !important;
}

/* AI Health Bar — mono labels */
.ahb-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}
.ahb-trend {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}
.ahb-bar {
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}

/* Typing indicator — green accent dots */
.typing-dots span {
  background: var(--accent) !important;
  opacity: 0.5 !important;
}
.typing-dots {
  border-color: rgba(0,217,126,0.15) !important;
  background: rgba(0,217,126,0.04) !important;
}

/* Link preview — mono title, stronger hover */
.link-preview {
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.link-preview:hover {
  border-color: rgba(0,217,126,0.35) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.06) !important;
}
.link-preview-title {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.link-preview-domain {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.5px !important;
}

/* Scroll FAB — stronger glow hover */
.scroll-fab {
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 10px rgba(0,217,126,0.06) !important;
  transition: all 0.18s cubic-bezier(0.16,1,0.3,1) !important;
}
.scroll-fab:hover {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 0 24px rgba(0,217,126,0.3), 0 6px 20px rgba(0,0,0,0.4) !important;
}
.scroll-fab-badge {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

/* Compose hint — mono, subtle */
.compose-hint {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
}

/* Msg hover actions — stronger green hover */
.msg-hover-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transition: all 0.1s !important;
}
.msg-hover-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.35) !important;
  background: rgba(0,217,126,0.07) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.1) !important;
}

/* Lead score badge — mono bold */
.lead-score-badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

/* Campaign funnel card extras */
.cfc-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
}
.cfc-step-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
}
.cfc-step-val {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.cfc-stats {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/*   END WAVE 26   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 27 — Pipeline Stats, Chart Bars, Top Contacts, Funnel, Source Badges
   ═══════════════════════════════════════════════════════════ */

/* Pipeline summary bar — mono values */
.pipeline-stat span {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.pipeline-stat label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
}
.pipeline-stat {
  transition: background 0.12s !important;
}
.pipeline-stat:hover {
  background: rgba(0,217,126,0.03) !important;
}
.pipeline-stat.won span {
  text-shadow: 0 0 16px rgba(0,217,126,0.25) !important;
}

/* Pipeline stage header — mono */
.pipeline-stage-head {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: var(--text-muted) !important;
}
.pipeline-stage-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.pipeline-section-head {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
.pipeline-count {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

/* Pipeline card edit link — stronger accent */
.pipeline-card-edit {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Chart bars — hover glow, mono labels */
.chart-bar {
  transition: height 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.15s !important;
  cursor: pointer !important;
}
.chart-bar.bar-in:hover {
  box-shadow: 0 0 8px rgba(0,217,126,0.4) !important;
  filter: brightness(1.2) !important;
}
.chart-bar.bar-out:hover {
  box-shadow: 0 0 8px rgba(246,166,35,0.4) !important;
  filter: brightness(1.2) !important;
}
.chart-bar-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.3px !important;
}

/* Top contacts list — mono values */
.top-contact-item {
  transition: background 0.12s !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
}
.top-contact-item:hover {
  background: rgba(0,217,126,0.04) !important;
}

/* Funnel rows — mono */
.funnel-label, .funnel-name {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.funnel-count, .funnel-num {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Source badges — stronger borders */
.source-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
}
.source-badge.fb-badge {
  box-shadow: 0 0 6px rgba(24,119,242,0.08) !important;
}
.source-badge.ig-badge {
  box-shadow: 0 0 6px rgba(225,48,108,0.08) !important;
}

/* Pipeline board column header */
.pipeline-column-header, .board-col-header, .kanban-col-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Revenue sparkline */
.revenue-sparkline .sparkline-svg {
  filter: drop-shadow(0 0 4px rgba(0,217,126,0.2)) !important;
}

/*   END WAVE 27   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 28 — Platform Tabs, Rule Cards, AR Stats, Sort Bar, Image Preview
   ═══════════════════════════════════════════════════════════ */

/* Platform tab — mono labels, stronger glow on active */
.platform-tab {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.3px !important;
  font-weight: 700 !important;
}
.platform-tab.active {
  box-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}

/* Rule card v2 — stronger hover glow + mono */
.rule-card-v2:hover {
  border-color: rgba(0,217,126,0.28) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 14px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}
.rule-v2-mode {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1.2px !important;
}
.rule-v2-target {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.rule-v2-meta {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.2px !important;
}
.rule-edit-textarea {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  caret-color: var(--accent) !important;
  line-height: 1.6 !important;
}
.rule-v2-instruction {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}

/* AR stat chips — mono count */
.ar-stat-chip {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  transition: border-color 0.12s, box-shadow 0.12s !important;
}
.ar-stat-chip:hover {
  border-color: rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.06) !important;
}
.ar-stat-chip .ar-stat-count {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(0,217,126,0.2) !important;
}

/* Sort bar — mono labels */
.sort-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 1px !important;
}
.sort-chip {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.sort-chip.active {
  box-shadow: 0 0 8px rgba(0,217,126,0.2), inset 0 0 6px rgba(0,217,126,0.04) !important;
}

/* Image preview — rounded, shadow */
.image-preview {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
.image-preview img {
  transition: transform 0.2s !important;
}
.image-preview img:hover {
  transform: scale(1.02) !important;
}
.image-preview-info {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* Message image hover */
.message img.msg-image:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

/* Drop overlay — stronger glow */
.drop-overlay {
  background: rgba(0,217,126,0.05) !important;
  border: 2px dashed rgba(0,217,126,0.5) !important;
  box-shadow: inset 0 0 40px rgba(0,217,126,0.04) !important;
}
.drop-overlay-content {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 16px rgba(0,217,126,0.3) !important;
}

/*   END WAVE 28   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 29 — Profile Name, Date Separator, Auto Pill, Msg Action Bar, Sidebar Logo
   ═══════════════════════════════════════════════════════════ */

/* Sidebar header logo — stronger mono glow */
.sidebar-header h1 {
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 0 20px rgba(0,217,126,0.35) !important;
}

/* Profile name — lift on hover + mono */
.profile-name {
  font-family: var(--font-mono) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  transition: color 0.15s, text-shadow 0.15s !important;
}
.profile-name:hover {
  text-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}

/* Date separator — mono label, stronger accent line */
.date-separator span {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  color: var(--text-muted) !important;
  background: var(--bg) !important;
  padding: 0 10px !important;
}
.date-separator::before,
.date-separator::after {
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.12), transparent) !important;
}

/* Message action bar — stronger hover */
.msg-action-bar button {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: background 0.12s, box-shadow 0.12s !important;
}
.msg-action-bar button:hover {
  background: rgba(0,217,126,0.12) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.1) !important;
}

/* Auto pill — stronger glow when ON */
.auto-pill {
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.auto-pill.on {
  box-shadow: 0 0 12px rgba(0,217,126,0.15) !important;
}
.auto-pill-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Compose — green caret, mono when focused */
.compose #composeInput {
  caret-color: var(--accent) !important;
}
#composeInput {
  caret-color: var(--accent) !important;
}

/* Attach button — hover glow */
.attach-btn:hover {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(0,217,126,0.3) !important;
}

/* Message selected outline — stronger */
.message.msg-selected {
  outline: 2px solid rgba(0,217,126,0.4) !important;
  background: rgba(0,217,126,0.03) !important;
}

/* Message new — stronger flash */
.message.msg-new {
  animation: msg-sent-flash 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}

/* Thread name in sidebar header — mono */
.chat-header-name {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}
.chat-header-meta {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2px !important;
}

/*   END WAVE 29   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 30 — Template Panel, Followup Badge, Global Scroll Polish, Micro-Animations
   ═══════════════════════════════════════════════════════════ */

/* Template pick panel — mono, richer hover */
.template-pick-panel {
  border-color: rgba(0,217,126,0.12) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3), 0 0 20px rgba(0,217,126,0.05) !important;
}
.tpp-header {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border-bottom-color: rgba(0,217,126,0.08) !important;
}
.tpp-item:hover {
  background: rgba(0,217,126,0.05) !important;
  border-left: 2px solid var(--accent) !important;
  padding-left: 10px !important;
}
.tpp-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.tpp-preview {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* Followup badge — stronger pulse glow */
.followup-badge {
  box-shadow: 0 0 8px rgba(240,82,82,0.5) !important;
}
.followup-badge.followup-pulse {
  animation: followup-pulse-anim 1.2s ease-in-out infinite !important;
}

/* Global scroll polish — all overflow-y containers */
.analytics-content::-webkit-scrollbar,
.tpp-list::-webkit-scrollbar,
.digest-drawer::-webkit-scrollbar,
.suggest-panel::-webkit-scrollbar,
.ai-drawer::-webkit-scrollbar { width: 4px !important; }

.analytics-content::-webkit-scrollbar-thumb,
.tpp-list::-webkit-scrollbar-thumb,
.digest-drawer::-webkit-scrollbar-thumb,
.suggest-panel::-webkit-scrollbar-thumb,
.ai-drawer::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.12) !important;
  border-radius: 2px !important;
}

.analytics-content::-webkit-scrollbar-thumb:hover,
.tpp-list::-webkit-scrollbar-thumb:hover,
.digest-drawer::-webkit-scrollbar-thumb:hover,
.ai-drawer::-webkit-scrollbar-thumb:hover {
  background: rgba(0,217,126,0.25) !important;
}

/* Chat messages scrollbar — green tint */
.chat-messages::-webkit-scrollbar { width: 4px !important; }
.chat-messages::-webkit-scrollbar-track { background: transparent !important; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1) !important;
  border-radius: 2px !important;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0,217,126,0.22) !important;
}

/* Thread list scrollbar */
.thread-list::-webkit-scrollbar { width: 3px !important; }
.thread-list::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1) !important;
  border-radius: 2px !important;
}

/* Pipeline panel scrollbar */
.pipeline-content::-webkit-scrollbar,
.clients-grid::-webkit-scrollbar { width: 4px !important; }

/* Micro-animation: button press tactile */
.btn-primary:active,
.btn-secondary:active,
.sort-chip:active,
.filter-chip:active,
.quick-chip:active,
.tag-preset-btn:active,
.suggest-quick-btn:active {
  transform: scale(0.97) translateY(0) !important;
  transition-duration: 50ms !important;
}

/* Focus-visible glow — green on all interactive */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(0,217,126,0.5) !important;
  outline-offset: 2px !important;
}

/* Empty state radial glow — stronger */
.empty-state {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(0,217,126,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(129,140,248,0.02) 0%, transparent 50%),
    var(--bg) !important;
}

/* Mute icon — green dot for snoozed */
.thread-item .mute-icon[title="Snoozed"] {
  opacity: 0.7 !important;
  filter: hue-rotate(30deg) !important;
}

/*   END WAVE 30   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 31 — Compose Send, Compose Tools, Filter Bar, Search Container, Draft Area
   ═══════════════════════════════════════════════════════════ */

/* Compose send button — stronger ready glow */
.compose-send {
  transition: all 0.15s cubic-bezier(0.16,1,0.3,1) !important;
}
.compose-send.send-ready {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px rgba(0,217,126,0.35), 0 0 6px rgba(0,217,126,0.4) !important;
  transform: scale(1.05) !important;
}
.compose-send:hover {
  transform: scale(1.05) !important;
}
.compose-send:active {
  transform: scale(0.96) !important;
}

/* Compose tools — mono, stronger hover */
.compose-tools .tool-btn {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.12s !important;
}
.compose-tools .tool-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.06) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.08) !important;
  transform: translateY(-1px) !important;
}

/* Filter bar — shadow separator */
.filter-bar {
  box-shadow: 0 1px 0 rgba(0,217,126,0.05) !important;
}

/* Search container — stronger focus */
.search-container input:focus {
  box-shadow: 0 0 0 3px rgba(0,217,126,0.08) !important;
}

/* Draft area — mono, green accent */
.draft-area {
  border-color: rgba(0,217,126,0.15) !important;
  background: rgba(0,217,126,0.03) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

/* Tag filter bar — lighter separator */
.tag-filter-bar {
  border-bottom-color: rgba(0,217,126,0.06) !important;
  padding: 4px 10px !important;
}

/* Main header — stronger green separator */
.main-header {
  border-bottom-color: rgba(0,217,126,0.08) !important;
  box-shadow: 0 1px 0 rgba(0,217,126,0.04) !important;
}
.main-header h2 {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

/* Compose row — subtle top border */
.compose-row {
  border-top: 1px solid rgba(0,217,126,0.05) !important;
}

/* Inbox zero button — stronger glow */
.sidebar-inbox-zero-btn:hover {
  box-shadow: 0 0 16px rgba(0,217,126,0.15) !important;
  transform: translateY(-2px) !important;
}

/* Compose — when focused, green glow */
.compose:focus-within {
  background: rgba(0,217,126,0.01) !important;
}
.compose:focus-within .compose-row {
  border-top-color: rgba(0,217,126,0.1) !important;
}

/* Status indicator text — mono */
.ar-status {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/*   END WAVE 31   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 32 — Dashboard Cards Deep Polish, Brand Text, Subgrids
   ═══════════════════════════════════════════════════════════ */

/* Dash brand — stronger mono glow */
.dash-brand-text {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 0 30px rgba(0,217,126,0.1) !important;
}
.dash-brand-sub {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  color: var(--accent) !important;
  opacity: 0.6 !important;
}

/* Dash card — stronger hover depth */
.dash-card {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
.dash-card:hover {
  border-color: rgba(0,217,126,0.32) !important;
  box-shadow: 0 0 24px rgba(0,217,126,0.1), 0 8px 30px rgba(0,0,0,0.3) !important;
  transform: translateY(-2px) !important;
}
.dash-card-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--text-muted) !important;
}
.dash-card-sub {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}
.dash-card-title {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: var(--accent) !important;
  opacity: 0.7 !important;
}

/* Dash card val — already mono, boost shadow */
.dash-card-val {
  text-shadow: 0 0 20px rgba(0,217,126,0.08) !important;
}
.dash-card-val.gold {
  text-shadow: 0 0 20px rgba(255,215,0,0.35) !important;
}
.dash-card-val.green {
  text-shadow: 0 0 20px rgba(0,217,126,0.35) !important;
}
.dash-card-val.red {
  text-shadow: 0 0 16px rgba(240,82,82,0.35) !important;
}

/* Dash pulse card — alert pulse more visible */
.dash-card-pulse {
  border-color: rgba(240,82,82,0.25) !important;
}
.dash-card-pulse:hover {
  border-color: rgba(240,82,82,0.4) !important;
  box-shadow: 0 0 20px rgba(240,82,82,0.1), 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* Dash grid separator — subtle line */
.dash-grid-2 {
  gap: 14px !important;
}

/* Dash hero section — tighter spacing */
.dash-hero {
  padding-bottom: 4px !important;
}

/* Obj warning pulse — make it stronger */
@keyframes objWarningPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,159,10,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(255,159,10,0); }
}

/* Pipeline funnel row — mono */
.pipeline-funnel-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  transition: background 0.12s !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
}
.pipeline-funnel-row:hover {
  background: rgba(0,217,126,0.03) !important;
}

/* Mute icon — faded, green tint */
.mute-icon {
  opacity: 0.45 !important;
  font-size: 11px !important;
}

/* Panel view slide-in */
.panel-view {
  animation: fadeIn 0.2s var(--ease-out) both !important;
}

/* Quick reply chips — spacing boost */
.quick-replies {
  gap: 6px !important;
  padding: 8px 14px !important;
}

/* Snooze dropdown — glass, mono */
.snooze-dropdown {
  background: rgba(17,19,24,0.97) !important;
  border-color: rgba(0,217,126,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(0,217,126,0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 12px !important;
}

/*   END WAVE 32   */

/* ═══════════════════════════════════════════════════════════
   ✦ WAVE 33 — Panels.js Components: Agent Cards, Lead Items, Stage Cols, Pipe Cards, Feed
   ═══════════════════════════════════════════════════════════ */

/* ── Agent Cards ─────────────────────────────────────────── */
.agent-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.agent-card:hover {
  border-color: rgba(0,217,126,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 14px rgba(0,217,126,0.07);
  transform: translateY(-1px);
}
.agent-card.idle {
  opacity: 0.65;
  border-color: var(--border);
}
.agent-card.idle:hover {
  opacity: 0.85;
  border-color: rgba(0,217,126,0.15);
}
.agent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.agent-icon {
  font-size: 22px;
  line-height: 1;
}
.agent-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.agent-task {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
  min-height: 30px;
}
.agent-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.metric-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.metric-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.5px;
  text-shadow: 0 0 14px rgba(0,217,126,0.2);
}
.metric-value.zero {
  color: var(--text-muted);
  text-shadow: none;
}
.agent-footer {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.status-pill {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.status-pill.working {
  background: rgba(0,217,126,0.12);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(0,217,126,0.15);
  animation: aiDotPulse 2s ease-in-out infinite;
}
.status-pill.idle {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}

/* ── Lead Items ──────────────────────────────────────────── */
.lead-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.lead-item:hover {
  background: rgba(0,217,126,0.04);
}
.lead-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0,217,126,0.2);
}
.lead-info {
  flex: 1;
  min-width: 0;
}
.lead-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-goals {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.lead-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.lead-stage {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.lead-stage.stage-hot, .lead-stage.stage-closing { background: rgba(0,217,126,0.12); color: var(--accent); }
.lead-stage.stage-warm { background: rgba(246,166,35,0.12); color: var(--orange); }
.lead-stage.stage-cold { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.lead-time {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
}

/* ── Pipeline Stage Cols (panels.js) ─────────────────────── */
.stage-col {
  flex: 1;
  min-width: 160px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}
.stage-name {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stage-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
}

/* ── Pipe Cards ──────────────────────────────────────────── */
.pipe-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s, border-left-color 0.12s;
  border-left: 2px solid transparent;
}
.pipe-card:hover {
  background: rgba(0,217,126,0.04);
  border-left-color: var(--accent);
}
.pc-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-biz {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pc-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}
.pc-tag.site { background: rgba(0,217,126,0.1); color: var(--accent); }
.pc-tag.goals { background: rgba(129,140,248,0.1); color: var(--purple); }
.pc-time { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); margin-top: 4px; }
.pipe-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 16px 12px;
  font-style: italic;
  opacity: 0.6;
}

/* ── Activity Feed (panels.js) ───────────────────────────── */
.feed-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-right: 4px;
}
.feed-agent {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-right: 4px;
}
.feed-action {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

/* Log entries (panels.js) */
.log-ts {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.log-agent {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.log-msg {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Funnel steps (panels.js) */
.funnel-arrow {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.4;
}
.funnel-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  margin-bottom: 3px;
  transition: border-color 0.12s, background 0.12s;
}
.funnel-step:hover {
  border-color: rgba(0,217,126,0.2);
  background: rgba(0,217,126,0.03);
}
.funnel-step-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.funnel-step-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

/* Pipeline container */
.pipeline {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}

/*   END WAVE 33   */

/* ════════════════════════════════════════════════
   WAVE 34 — Activity Feed, AI Thinking, AI Cards
   ════════════════════════════════════════════════ */

/* Activity feed items */
.activity-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.activity-event:hover {
  background: rgba(255,255,255,0.03) !important;
}
.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: var(--accent);
}
.activity-body {
  flex: 1;
  min-width: 0;
}
.activity-name {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-detail {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 2px;
  line-height: 1.4;
}
.activity-extra {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono) !important;
  opacity: 0.6;
}
.activity-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  margin-top: 2px;
}
.activity-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  background: rgba(0,217,126,0.1);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.15);
}
.activity-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.activity-clickable {
  cursor: pointer;
}
.activity-clickable:hover .activity-name {
  color: var(--accent) !important;
}

/* AI Thinking Indicator */
.ai-thinking-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,217,126,0.04) !important;
  border: 1px solid rgba(0,217,126,0.12) !important;
  border-radius: var(--radius) !important;
  margin: 4px 0;
}
.ai-think-emoji {
  font-size: 16px;
  flex-shrink: 0;
  animation: aiThinkSpin 3s linear infinite;
}
@keyframes aiThinkSpin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
.ai-think-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  flex: 1;
}
.ai-think-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ai-think-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: aiDotPulse 1.4s ease-in-out infinite both;
}
.ai-think-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-think-dots span:nth-child(3) { animation-delay: 0.4s; }
.ai-reading-icon {
  font-size: 14px;
  color: var(--accent);
  opacity: 0.7;
}
.ai-reading-meta {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px;
}
.ai-reading-text {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5;
}
.ai-no-replies {
  padding: 20px;
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}

/* AI Cards (suggest drawer) */
.ai-card-body {
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  line-height: 1.55;
}
.ai-card-body:hover {
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 0 12px rgba(0,217,126,0.07) !important;
  background: rgba(0,217,126,0.03) !important;
}
.ai-card-tone {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-card-use {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5;
}
.ai-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ai-card-action {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  transition: all 0.12s;
}
.ai-card-action:hover {
  border-color: rgba(0,217,126,0.25) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.05) !important;
}
.ai-card-action-use {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  font-weight: 800 !important;
}
.ai-card-action-use:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.25) !important;
  color: #000 !important;
}
.ai-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.ai-close-btn:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.05) !important;
}

/*   END WAVE 34   */

/* ════════════════════════════════════════════════
   WAVE 35 — Revenue Cards, Skeleton Loaders, Search Results
   ════════════════════════════════════════════════ */

/* Revenue Card */
.revenue-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.revenue-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.revenue-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,217,126,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.revenue-card:hover {
  border-color: rgba(0,217,126,0.28) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 14px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}
.revenue-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.revenue-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
.revenue-value {
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--accent) !important;
  text-shadow: 0 0 16px rgba(0,217,126,0.25) !important;
  line-height: 1;
}
.revenue-sub {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 4px;
}
.revenue-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  background: rgba(0,217,126,0.1);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.2);
}

/* Skeleton Loaders */
.skeleton-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  flex-shrink: 0;
  animation: skeleton-shimmer 1.5s ease-in-out 0.1s infinite;
}
.skeleton-thread-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skeleton-thread-meta {
  height: 8px;
  width: 60%;
  border-radius: 4px;
  background: var(--bg-elevated);
  animation: skeleton-shimmer 1.5s ease-in-out 0.15s infinite;
}
.skeleton-content {
  height: 10px;
  width: 80%;
  border-radius: 4px;
  background: var(--bg-elevated);
  animation: skeleton-shimmer 1.5s ease-in-out 0.2s infinite;
}
.skeleton-line {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-elevated);
  animation: skeleton-shimmer 1.5s ease-in-out 0.25s infinite;
}
.skeleton-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.skeleton-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.skeleton-msg-row.out {
  flex-direction: row-reverse;
}
.skeleton-bubble {
  height: 36px;
  border-radius: 12px;
  background: var(--bg-elevated);
  animation: skeleton-shimmer 1.5s ease-in-out 0.1s infinite;
  max-width: 60%;
  min-width: 120px;
}

/* Search Results */
.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  border-left: 2px solid transparent;
}
.search-result:hover {
  background: rgba(0,217,126,0.04) !important;
  border-left-color: rgba(0,217,126,0.35) !important;
}
.sr-contact {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.sr-body {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.sr-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}

/* Semantic badges & results */
.semantic-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  background: rgba(129,140,248,0.1);
  color: var(--purple);
  border: 1px solid rgba(129,140,248,0.2);
}
.semantic-result {
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  line-height: 1.55;
  transition: border-left-color 0.12s;
}
.semantic-result:hover {
  border-left-color: var(--accent) !important;
  color: var(--text) !important;
}

/*   END WAVE 35   */

/* ════════════════════════════════════════════════
   WAVE 36 — Shortcut Modal, Swipe Actions, Thread Context Menu
   ════════════════════════════════════════════════ */

/* Shortcut Modal */
.shortcut-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s var(--ease-out) both;
}
.shortcut-modal {
  background: var(--bg-secondary);
  border: 1px solid rgba(0,217,126,0.15);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,217,126,0.05);
  width: min(580px, 90vw);
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.2s var(--ease-out) both;
}
.shortcut-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shortcut-modal-title {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  color: var(--text) !important;
}
.shortcut-modal-close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.shortcut-modal-close:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}
.shortcut-modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.12) transparent;
}
.shortcut-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  text-align: center;
}
.shortcut-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shortcut-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shortcut-section-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 4px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.shortcut-row:hover {
  background: rgba(255,255,255,0.03) !important;
}
.shortcut-desc {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}
.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
}
.shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.shortcut-plus {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  opacity: 0.5;
}

/* Swipe Actions */
.swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.swipe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: filter 0.12s;
  font-family: var(--font-mono) !important;
}
.swipe-btn:hover {
  filter: brightness(1.15) !important;
}
.swipe-read {
  background: rgba(0,217,126,0.15) !important;
  color: var(--accent) !important;
}
.swipe-pin {
  background: rgba(246,166,35,0.15) !important;
  color: var(--orange) !important;
}

/* Thread Context Menu */
.thread-context-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid rgba(0,217,126,0.15);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(0,217,126,0.05);
  min-width: 180px;
  overflow: hidden;
  z-index: 5000;
  animation: slideUp 0.15s var(--ease-out) both;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.thread-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.thread-context-menu button:hover {
  background: rgba(0,217,126,0.06) !important;
  color: var(--text) !important;
}
.thread-context-menu .separator {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

/*   END WAVE 36   */

/* ════════════════════════════════════════════════
   WAVE 37 — Thread Tags, Stage Pill, Avatar Wrapper, AR Dash
   ════════════════════════════════════════════════ */

/* Thread Stage Pill */
.thread-stage-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  background: rgba(0,217,126,0.08);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.15);
  white-space: nowrap;
}
.thread-stage-pill.stage-closed {
  background: rgba(240,82,82,0.08) !important;
  color: var(--red) !important;
  border-color: rgba(240,82,82,0.15) !important;
}
.thread-stage-pill.stage-demo,
.thread-stage-pill.stage-warm {
  background: rgba(246,166,35,0.08) !important;
  color: var(--orange) !important;
  border-color: rgba(246,166,35,0.15) !important;
}
.thread-stage-pill.stage-won {
  background: rgba(0,217,126,0.14) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.12) !important;
}

/* Thread Tags */
.thread-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.thread-tag:hover {
  background: rgba(0,217,126,0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.2) !important;
}
.thread-tag.tag-active {
  background: rgba(0,217,126,0.1) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.22) !important;
}
.thread-tags-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.tag-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.tag-filter-chip:hover {
  background: rgba(0,217,126,0.07) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.2) !important;
}
.tag-filter-chip.tag-filter-active {
  background: rgba(0,217,126,0.12) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.28) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.1) !important;
}

/* Thread Avatar Wrapper */
.thread-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.thread-avatar-wrapper .unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-secondary);
  box-shadow: 0 0 6px rgba(0,217,126,0.35);
  animation: aiDotPulse 2s ease-in-out infinite;
}

/* AR Dashboard */
.ar-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ar-dash-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ar-dash-card:hover {
  border-color: rgba(0,217,126,0.22) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.05) !important;
}
.ar-dash-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 6px;
}
.ar-dash-value {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}
.ar-dash-section {
  margin-bottom: 16px;
}
.ar-dash-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ar-dash-bar-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px;
}
.ar-dash-bar-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.ar-dash-bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 60px;
}
.ar-dash-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.ar-dash-contact-row:hover {
  background: rgba(255,255,255,0.03) !important;
}
.ar-dash-contact-name {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  flex: 1;
}
.ar-dash-contact-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--accent) !important;
}
.ar-dash-contact-bar {
  height: 3px;
  background: rgba(0,217,126,0.2);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.ar-dash-contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ar-dash-rule {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.12s, background 0.12s;
  cursor: pointer;
}
.ar-dash-rule:hover {
  border-color: rgba(0,217,126,0.15) !important;
  background: rgba(0,217,126,0.03) !important;
}
.ar-dash-rule-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.ar-dash-rule-uses {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px;
}
.ar-dash-rule-rate {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.ar-dash-rules {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ar-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.ar-pending-item:hover {
  border-color: rgba(0,217,126,0.2) !important;
  background: rgba(0,217,126,0.03) !important;
}
.ar-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  background: rgba(0,217,126,0.12);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.2);
  box-shadow: 0 0 6px rgba(0,217,126,0.1);
}

/*   END WAVE 37   */

/* ════════════════════════════════════════════════
   WAVE 38 — Prospect Finder, Analysis, Translate, Scheduled Msg
   ════════════════════════════════════════════════ */

/* Prospect Finder */
.prospect-finder-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
}
.prospect-finder-card:hover {
  border-color: rgba(0,217,126,0.28) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 12px rgba(0,217,126,0.05) !important;
  transform: translateY(-1px) !important;
}
.prospect-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}
.prospect-badge.hot {
  background: rgba(0,217,126,0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(0,217,126,0.2) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.12) !important;
}
.prospect-badge.warm {
  background: rgba(246,166,35,0.1) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(246,166,35,0.18) !important;
}
.prospect-badge.cold {
  background: rgba(129,140,248,0.08) !important;
  color: var(--purple) !important;
  border: 1px solid rgba(129,140,248,0.15) !important;
}
.pfr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pfr-stage {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
.stale-prospect-card {
  background: rgba(246,166,35,0.04);
  border: 1px solid rgba(246,166,35,0.12);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.stale-prospect-card:hover {
  border-color: rgba(246,166,35,0.25) !important;
  background: rgba(246,166,35,0.07) !important;
}

/* Analysis Section */
.analysis-section {
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}
.analysis-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.analysis-stat:last-child {
  border-bottom: none;
}
.analysis-stat strong {
  font-weight: 800 !important;
  color: var(--text) !important;
  font-size: 13px !important;
}
.analysis-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  background: rgba(129,140,248,0.08);
  color: var(--purple);
  border: 1px solid rgba(129,140,248,0.14);
  cursor: default;
}

/* Analyzer Results */
.analyzer-result {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color 0.15s;
}
.analyzer-result:hover {
  border-color: rgba(0,217,126,0.2) !important;
}
.analyzer-issue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-left: 2px solid var(--orange);
  background: rgba(246,166,35,0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 6px;
}
.analyzer-issue-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.4;
}
.analyzer-issue-fix {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--accent) !important;
  cursor: pointer;
  transition: opacity 0.12s;
}
.analyzer-issue-fix:hover {
  opacity: 0.75 !important;
  text-decoration: underline;
}

/* Translate */
.translate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  background: rgba(129,140,248,0.09);
  color: var(--purple);
  border: 1px solid rgba(129,140,248,0.15);
  cursor: pointer;
  transition: all 0.12s;
}
.translate-badge:hover {
  background: rgba(129,140,248,0.16) !important;
  box-shadow: 0 0 8px rgba(129,140,248,0.12) !important;
}
.translate-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  opacity: 0.7;
}
.translated-text {
  padding: 8px 12px;
  border-left: 2px solid rgba(129,140,248,0.35);
  background: rgba(129,140,248,0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  line-height: 1.55;
  margin-top: 4px;
}

/* Scheduled Messages */
.scheduled-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(129,140,248,0.06);
  border: 1px solid rgba(129,140,248,0.14);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.scheduled-msg:hover {
  border-color: rgba(129,140,248,0.25) !important;
  background: rgba(129,140,248,0.1) !important;
}
.scheduled-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scheduled-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--purple) !important;
  white-space: nowrap;
}
.scheduled-icon {
  font-size: 12px;
  color: var(--purple);
  opacity: 0.7;
}

/* QC Preview */
.qc-preview {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.qc-tone {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 5px;
}

/*   END WAVE 38   */

/* ════════════════════════════════════════════════
   WAVE 39 — Top Contacts Bar, Pipeline Board, Quick Chips, RC Row
   ════════════════════════════════════════════════ */

/* Top Contact Bar (progress bar contact leaderboard) */
.top-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.top-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
  cursor: pointer;
}
.top-contact-item:hover {
  background: rgba(255,255,255,0.03) !important;
}
.top-contact-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.top-contact-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,217,126,0.25);
  transition: width 0.5s var(--ease-out);
}
.top-contact-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  min-width: 20px;
  text-align: right;
}

/* Pipeline Board Cards */
.pipeline-board-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.pipeline-board-card:hover {
  border-color: rgba(0,217,126,0.28) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 10px rgba(0,217,126,0.06) !important;
  transform: translateY(-1px) !important;
}
.pipeline-board-name {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 3px;
}
.pipeline-board-service {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--accent) !important;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
}
.pipeline-board-notes {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipeline-board-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  justify-content: flex-end;
}
.pipeline-bulk-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  transition: all 0.12s;
}
.pipeline-bulk-btn:hover {
  border-color: rgba(0,217,126,0.25) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.05) !important;
}
.pipeline-summary-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pipeline-empty-stage {
  padding: 20px;
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  opacity: 0.5;
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
}
.pipeline-stage-select {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.pipeline-stage-select:focus {
  border-color: var(--accent) !important;
  outline: none;
}

/* Quick Chips / QR Pills */
.quick-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.quick-chip:hover {
  border-color: rgba(0,217,126,0.28) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.05) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.08) !important;
}
.qr-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(0,217,126,0.08);
  border: 1px solid rgba(0,217,126,0.18);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.qr-pill:hover {
  background: rgba(0,217,126,0.14) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.12) !important;
  transform: scale(1.02) !important;
}
.qr-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(129,140,248,0.08);
  border: 1px solid rgba(129,140,248,0.16);
  color: var(--purple);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.qr-ai-pill:hover {
  background: rgba(129,140,248,0.14) !important;
  box-shadow: 0 0 8px rgba(129,140,248,0.1) !important;
}

/* RC (Revenue Contact) Row */
.rc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
  cursor: pointer;
}
.rc-row:hover {
  background: rgba(255,255,255,0.03) !important;
}
.rc-highlight {
  border-left: 2px solid var(--accent) !important;
  background: rgba(0,217,126,0.04) !important;
}
.rc-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  flex: 1;
}
.rc-val {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: -0.3px;
}

/* New contact banner */
.new-contact-banner {
  padding: 10px 14px;
  background: rgba(0,217,126,0.06);
  border: 1px solid rgba(0,217,126,0.18);
  border-radius: var(--radius);
  margin-bottom: 12px;
  animation: slideUp 0.25s var(--ease-out) both;
}

/* Connection banner */
.connection-banner {
  padding: 8px 16px;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center;
  background: rgba(246,166,35,0.08);
  color: var(--orange);
  border-bottom: 1px solid rgba(246,166,35,0.15);
  letter-spacing: 0.3px;
}
.connection-banner.connected {
  background: rgba(0,217,126,0.06) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.12) !important;
}

/* Pull spinner */
.pull-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--accent);
  opacity: 0.6;
}

/*   END WAVE 39   */

/* ════════════════════════════════════════════════
   WAVE 40 — Media Preview, Reaction Picker, Toast, Monitor Badge
   ════════════════════════════════════════════════ */

/* Media Preview Overlay */
.media-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s var(--ease-out) both;
}
.media-preview-overlay img,
.media-preview-overlay video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  object-fit: contain;
}

/* Reaction Picker */
.msg-reaction-picker {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid rgba(0,217,126,0.15);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 14px rgba(0,217,126,0.05);
  padding: 8px;
  z-index: 500;
  animation: slideUp 0.15s var(--ease-out) both;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.reaction-picker-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 200px;
}
.reaction-pick-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.1s;
}
.reaction-pick-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  transform: scale(1.15) !important;
}
.web-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.web-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.12s;
}
.web-reaction:hover {
  background: rgba(0,217,126,0.08) !important;
  border-color: rgba(0,217,126,0.2) !important;
  transform: scale(1.08) !important;
}
.reaction-count {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-elevated);
  border: 1px solid rgba(0,217,126,0.2);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 16px rgba(0,217,126,0.08);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.3px;
}
.toast.visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
.toast.error {
  border-color: rgba(240,82,82,0.25) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 16px rgba(240,82,82,0.08) !important;
}
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(0,217,126,0.35), 0 0 24px rgba(0,217,126,0.2);
  z-index: 9999;
  animation: slideUp 0.18s var(--ease-out) both;
  pointer-events: none;
}

/* Monitor / lead badges */
.monitor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  background: rgba(0,217,126,0.08);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.16);
  animation: aiDotPulse 2s ease-in-out infinite;
}
.lead-toast {
  position: fixed;
  top: 60px;
  right: 16px;
  background: var(--bg-elevated);
  border: 1px solid rgba(0,217,126,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  max-width: 280px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 16px rgba(0,217,126,0.06);
  z-index: 9000;
  animation: slideUp 0.2s var(--ease-out) both;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text) !important;
}
.lead-toast-in {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(0,217,126,0.1) !important;
}

/* Emoji Picker */
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.emoji-picker-grid button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-grid button:hover {
  background: rgba(255,255,255,0.06) !important;
  transform: scale(1.2) !important;
}

/* Compose char count */
.compose-char-count {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  padding: 0 4px;
  transition: color 0.15s;
}
.compose-char-count.warn {
  color: var(--orange) !important;
}
.compose-char-count.over {
  color: var(--red) !important;
}

/* Status indicators on messages */
.status-sending {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}

/* Test badge */
.test-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(246,166,35,0.08);
  color: var(--orange);
  border: 1px solid rgba(246,166,35,0.15);
}

/* SMS Badge, WA Badge, Sms/WA platform icons */
.sms-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  background: rgba(0,217,126,0.08);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.14);
}
.wa-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  background: rgba(37,211,102,0.08);
  color: #25d366;
  border: 1px solid rgba(37,211,102,0.14);
}
.web-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  background: rgba(129,140,248,0.08);
  color: var(--purple);
  border: 1px solid rgba(129,140,248,0.14);
}

/*   END WAVE 40   */

/* ════════════════════════════════════════════════
   WAVE 41 — Thread List Item Deep Polish
   ════════════════════════════════════════════════ */

/* Thread Item overhaul */
.thread-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.12s, border-left-color 0.12s;
  border-left: 2px solid transparent;
}
.thread-item:hover {
  background: rgba(255,255,255,0.025) !important;
  border-left-color: rgba(0,217,126,0.25) !important;
}
.thread-item.selected,
.thread-item.active {
  background: rgba(0,217,126,0.06) !important;
  border-left-color: var(--accent) !important;
}
.thread-item.unread .thread-name {
  font-weight: 800 !important;
  color: var(--text) !important;
}
.thread-item.unread .thread-preview {
  color: var(--text-secondary) !important;
}
.thread-item.urgent {
  border-left-color: var(--red) !important;
  background: rgba(240,82,82,0.03) !important;
}
.thread-item.urgent:hover {
  background: rgba(240,82,82,0.06) !important;
}

/* Thread content layout */
.thread-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.thread-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.thread-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.thread-name {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  letter-spacing: -0.2px;
}
.thread-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  white-space: nowrap;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.thread-preview {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.thread-section-header {
  padding: 6px 12px 4px;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Unread badge (on thread list) */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 8px rgba(0,217,126,0.3);
  flex-shrink: 0;
}
.thread-item.unread .unread-badge {
  animation: aiDotPulse 3s ease-in-out infinite;
}

/* Thread hover actions (pin/snooze/mark read buttons on hover) */
.thread-hover-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  box-shadow: var(--shadow-md);
}
.thread-item:hover .thread-hover-actions {
  display: flex !important;
}
.tha-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.tha-btn:hover {
  background: rgba(0,217,126,0.08) !important;
  color: var(--accent) !important;
}
.tha-active {
  color: var(--accent) !important;
  background: rgba(0,217,126,0.08) !important;
}
.tha-draft {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(246,166,35,0.4);
}

/* Pin icon on thread */
.pin-icon {
  color: var(--orange);
  font-size: 10px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Bulk select target checkbox */
.target-cb {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.thread-item:hover .target-cb,
.thread-item.selected .target-cb {
  opacity: 1 !important;
}

/*   END WAVE 41   */

/* ════════════════════════════════════════════════
   WAVE 42 — Message Bubbles Deep Polish
   ════════════════════════════════════════════════ */

/* Message bubbles */
.message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: 3px;
  animation: fadeIn 0.15s var(--ease-out) both;
}
.message.in {
  align-self: flex-start;
  align-items: flex-start;
}
.message.out {
  align-self: flex-end;
  align-items: flex-end;
}
.message .bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  position: relative;
}
.message.in .bubble {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text);
}
.message.out .bubble {
  background: rgba(0,217,126,0.15);
  border: 1px solid rgba(0,217,126,0.25);
  border-bottom-right-radius: 4px;
  color: var(--text);
  box-shadow: 0 0 12px rgba(0,217,126,0.06);
}
.message .time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.2px;
  opacity: 0.6;
}
.message.msg-selected .bubble {
  outline: 2px solid var(--accent) !important;
  background: rgba(0,217,126,0.08) !important;
}
@keyframes msgNewFlash {
  0% { background: rgba(0,217,126,0.25); }
  100% { background: transparent; }
}
.message.msg-new {
  animation: msgNewFlash 1.2s var(--ease-out) both !important;
}
.message.preview .bubble {
  opacity: 0.55;
  border-style: dashed !important;
}
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.typing-indicator .typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: aiDotPulse 1.4s ease-in-out infinite;
  opacity: 0.4;
}
.typing-indicator .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Chat group label / date separator */
.date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 0 16px;
}
.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,217,126,0.12), transparent);
}
.date-separator span {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  white-space: nowrap;
}

/* Message action bar (on hover over message) */
.msg-action-bar {
  display: none;
  position: absolute;
  top: -14px;
  right: 4px;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid rgba(0,217,126,0.12);
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 10;
  backdrop-filter: blur(8px);
}
.message:hover .msg-action-bar {
  display: flex !important;
}
.msg-action-bar button {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.msg-action-bar button:hover {
  background: rgba(0,217,126,0.08) !important;
  color: var(--accent) !important;
}

/* Messages container */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.12) transparent;
  scroll-behavior: smooth;
}
.messages-container::-webkit-scrollbar {
  width: 4px;
}
.messages-container::-webkit-scrollbar-track {
  background: transparent;
}
.messages-container::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.12);
  border-radius: 2px;
}
.messages-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0,217,126,0.22) !important;
}

/* Reply now button */
.reply-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  transition: all 0.12s;
  box-shadow: 0 0 10px rgba(0,217,126,0.2);
}
.reply-now-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 0 16px rgba(0,217,126,0.3) !important;
  transform: scale(1.03) !important;
}

/* msg-hover-btn (pencil/quote icons on message hover) */
.msg-hover-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.12s;
}
.msg-hover-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.3) !important;
  background: rgba(0,217,126,0.06) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.1) !important;
}

/*   END WAVE 42   */

/* ════════════════════════════════════════════════
   WAVE 43 — Global Glow-Ups: Focus, Hover, Scroll-to-Top
   ════════════════════════════════════════════════ */

/* ── Focus visible ring ─── */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* ── Modal overlays backdrop ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s var(--ease-out) both;
}
.modal {
  background: var(--bg-secondary);
  border: 1px solid rgba(0,217,126,0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,217,126,0.04);
  width: min(520px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.2s var(--ease-out) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}

/* ── Sidebar polish ─── */
.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.sidebar-actions {
  display: flex;
  gap: 4px;
}
.icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.icon-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
}

/* ── Search container polish ─── */
.search-container {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.search-container input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: var(--accent);
}
.search-container input:focus {
  border-color: rgba(0,217,126,0.35) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.07) !important;
}
.search-container input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

/* ── Filter bar chips polish ─── */
.filter-bar {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.filter-chip:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.filter-chip.active {
  background: rgba(0,217,126,0.1) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.1) !important;
}

/* ── Thread list scrollbar ─── */
.thread-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.thread-list::-webkit-scrollbar { width: 3px; }
.thread-list::-webkit-scrollbar-track { background: transparent; }
.thread-list::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1);
  border-radius: 2px;
}
.thread-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0,217,126,0.2) !important;
}

/* ── Compose area polish ─── */
.compose {
  border-top: 1px solid rgba(0,217,126,0.08);
  background: var(--bg-secondary);
  flex-shrink: 0;
  transition: background 0.15s;
}
.compose:focus-within {
  background: rgba(0,217,126,0.015) !important;
}
.compose-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 4px;
}
#composeInput {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font) !important;
  font-size: 13px !important;
  resize: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: var(--accent);
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
  line-height: 1.45;
}
#composeInput:focus {
  border-color: rgba(0,217,126,0.3) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.06) !important;
}
#composeInput::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
}
.compose-send {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.compose-send:hover {
  border-color: rgba(0,217,126,0.3) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.06) !important;
}
.compose-send.send-ready {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,217,126,0.3), 0 0 6px rgba(0,217,126,0.4) !important;
  transform: scale(1.04) !important;
}
.compose-tools {
  display: flex;
  gap: 4px;
  padding: 6px 12px 10px;
  flex-wrap: wrap;
}
.tool-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.2px;
}
.tool-btn:hover {
  border-color: rgba(0,217,126,0.2) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.04) !important;
  transform: translateY(-1px) !important;
}

/* ── Chat view main area ─── */
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,217,126,0.07);
  flex-shrink: 0;
  background: var(--bg-secondary);
  min-height: 52px;
}
.main-header h2 {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  color: var(--text) !important;
}
.main-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
#chatHeader {
  background: var(--bg-secondary);
}
.chat-header-name {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.3px;
}
.chat-header-meta {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px;
}

/*   END WAVE 43   */

/* ════════════════════════════════════════════════
   WAVE 44 — Settings Modal, Profile Panel, WLS Refinements
   ════════════════════════════════════════════════ */

/* ── Settings Modal Content ─── */
#settingsContent {
  padding: 24px;
  max-width: 520px;
  width: 100%;
}
#settingsContent h2 {
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
  color: var(--text) !important;
  margin-bottom: 20px;
}
#settingsContent label {
  display: block;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 6px;
}
#settingsContent input[type="text"],
#settingsContent input[type="number"],
#settingsContent select,
#settingsContent textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  caret-color: var(--accent);
}
#settingsContent input:focus,
#settingsContent select:focus,
#settingsContent textarea:focus {
  border-color: rgba(0,217,126,0.35) !important;
  box-shadow: 0 0 0 3px rgba(0,217,126,0.07) !important;
}
#settingsContent .setting-row {
  margin-bottom: 16px;
}
#settingsContent .setting-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
#settingsContent .setting-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
#settingsContent .setting-section-title {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 12px;
}
#settingsContent .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
#settingsContent .toggle-label {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
#settingsContent .toggle-desc {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 2px;
}

/* ── Toggle Switch ─── */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: rgba(0,217,126,0.2) !important;
  border-color: var(--accent) !important;
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px) !important;
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.3) !important;
}

/* ── Profile panel ─── */
.profile-panel {
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.profile-header {
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.profile-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 2px solid rgba(0,217,126,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,217,126,0.15);
}
.profile-name {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: color 0.12s;
}
.profile-name:hover {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(0,217,126,0.25) !important;
}
.profile-section {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-section-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 8px;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.profile-field-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.3px;
}
.profile-field-value {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.35;
}

/* ── Score bars ─── */
.lead-score-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.lead-score-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 6px rgba(0,217,126,0.25);
  transition: width 0.6s var(--ease-out);
}
.lead-score-fill.hot {
  background: linear-gradient(90deg, var(--accent), #00ff90) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.35) !important;
}
.lead-score-fill.warm {
  background: linear-gradient(90deg, var(--orange), #ffb020) !important;
  box-shadow: 0 0 8px rgba(246,166,35,0.25) !important;
}
.lead-score-fill.cold {
  background: linear-gradient(90deg, var(--purple), #a5b4fc) !important;
  box-shadow: 0 0 6px rgba(129,140,248,0.2) !important;
}

/* ── WLS (Win-Loss Stats) refined ─── */
.wls-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-top: 3px;
}
.wls-val {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--text) !important;
}
.wls-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  cursor: default;
}
.wls-item:hover {
  border-color: rgba(0,217,126,0.2) !important;
  background: rgba(0,217,126,0.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.04) !important;
}
.wls-item.green .wls-val { color: var(--accent) !important; text-shadow: 0 0 10px rgba(0,217,126,0.2) !important; }
.wls-item.red .wls-val { color: var(--red) !important; }
.wls-item.orange .wls-val { color: var(--orange) !important; }

/*   END WAVE 44   */

/* ════════════════════════════════════════════════
   WAVE 45 — Swarm Panel Deep Polish
   ════════════════════════════════════════════════ */

/* Swarm container */
.swarm-container {
  padding: 20px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.swarm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.swarm-title {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
  color: var(--text) !important;
}
.swarm-title .accent {
  color: var(--accent) !important;
  text-shadow: 0 0 18px rgba(0,217,126,0.3) !important;
}
.swarm-stats {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  flex-wrap: wrap;
}
.swarm-stats .val {
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.3px;
}
.swarm-stats .val.green {
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(0,217,126,0.2) !important;
}

/* Agent grid */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* Feed terminal (swarm log) */
.feed-terminal {
  background: #050609;
  border: 1px solid rgba(0,217,126,0.12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 0 40px rgba(0,0,0,0.2);
}
.feed-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(0,217,126,0.08);
}
.feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.feed-dot.r { background: #ff5f57; }
.feed-dot.y { background: #febc2e; }
.feed-dot.g { background: #28c840; }
.feed-title {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-left: 4px;
}
.feed-body {
  padding: 10px 12px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.feed-body::-webkit-scrollbar { width: 3px; }
.feed-body::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1);
  border-radius: 2px;
}
.feed-entry {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  line-height: 1.45;
  padding: 1px 0;
  border-bottom: 1px solid rgba(255,255,255,0.025);
}
.feed-entry:last-child { border-bottom: none; }
.feed-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: rgba(0,217,126,0.35) !important;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.feed-agent {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.feed-action {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  line-height: 1.4;
}

/* Agent terminal */
.agent-log {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(0,217,126,0.6) !important;
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
  background: #050609;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
  line-height: 1.45;
}
.agent-log::-webkit-scrollbar { width: 3px; }
.agent-log::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1);
  border-radius: 2px;
}
.agent-log .log-ts {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: rgba(0,217,126,0.3) !important;
  margin-right: 6px;
}
.agent-log .log-agent {
  font-weight: 700 !important;
  color: var(--accent) !important;
  margin-right: 4px;
}
.agent-log .log-msg {
  color: rgba(0,217,126,0.6) !important;
}
.agent-log .empty {
  color: rgba(255,255,255,0.2) !important;
  font-style: italic;
}

/* s-feedcount */
#s-feedcount {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.3px;
  color: var(--text-muted) !important;
}

/* Agent metric in swarm */
.agent-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/*   END WAVE 45   */

/* ════════════════════════════════════════════════
   WAVE 46 — Start Screen, Empty States, App Layout
   ════════════════════════════════════════════════ */

/* App layout */
.app {
  display: flex;
  height: calc(100vh - 44px); /* minus topnav height */
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
}

/* Panel view transition */
.panel-view {
  display: none;
  position: fixed;
  inset: 44px 0 0;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg);
  animation: fadeIn 0.18s var(--ease-out) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.panel-view.active {
  display: block !important;
}
.panel-view::-webkit-scrollbar { width: 5px; }
.panel-view::-webkit-scrollbar-track { background: transparent; }
.panel-view::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1);
  border-radius: 3px;
}
.panel-view::-webkit-scrollbar-thumb:hover {
  background: rgba(0,217,126,0.2) !important;
}

/* Start screen / empty state */
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,217,126,0.04) 0%, transparent 60%),
              var(--bg);
}
#startScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  text-align: center;
}
.start-logo {
  font-family: var(--font-mono) !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  color: var(--accent) !important;
  text-shadow: 0 0 30px rgba(0,217,126,0.4), 0 0 60px rgba(0,217,126,0.15) !important;
  animation: slideUp 0.4s var(--ease-out) both;
}
.start-subtitle {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.5px;
  animation: slideUp 0.4s var(--ease-out) 0.05s both;
}
.start-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  animation: slideUp 0.4s var(--ease-out) 0.1s both;
}
.start-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 400px;
  animation: slideUp 0.4s var(--ease-out) 0.15s both;
}
.start-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.start-stat:hover {
  border-color: rgba(0,217,126,0.22) !important;
  transform: translateY(-1px) !important;
}
.start-stat-val {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(0,217,126,0.2) !important;
}
.start-stat-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-top: 3px;
}

/* Empty message in lists */
.empty {
  padding: 20px;
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  opacity: 0.45;
}

/* Arena view */
#arenaView {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* Sidebar inbox-zero */
.sidebar-inbox-zero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
  gap: 10px;
}
.sidebar-inbox-zero-icon {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 4px;
}
.sidebar-inbox-zero-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.5;
}
.sidebar-inbox-zero-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: var(--accent-dim);
  border: 1px solid rgba(0,217,126,0.2);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.12s;
  margin-top: 4px;
}
.sidebar-inbox-zero-btn:hover {
  background: rgba(0,217,126,0.14) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.12) !important;
  transform: translateY(-1px) !important;
}

/* Global page background overlay */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,217,126,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(129,140,248,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0,217,126,0.01) 0%, transparent 70%),
    var(--bg);
}

/*   END WAVE 46   */

/* ════════════════════════════════════════════════
   WAVE 47 — Suggest Panel, Digest Drawer, Schedule Modal
   ════════════════════════════════════════════════ */

/* Suggest / AI drawer */
.suggest-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s var(--ease-out);
}
.suggest-panel.hidden {
  width: 0 !important;
  border: none !important;
}
.suggest-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.suggest-panel-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  color: var(--text) !important;
}
.suggest-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.suggest-panel-body::-webkit-scrollbar { width: 3px; }
.suggest-panel-body::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1);
  border-radius: 2px;
}
.suggest-section-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 4px;
}
.suggest-close {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.suggest-close:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
}

/* AI drawer (floating right panel) */
.ai-drawer {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--bg-secondary);
  border-left: 1px solid rgba(0,217,126,0.12);
  box-shadow: -8px 0 30px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.25s var(--ease-out);
}
.ai-drawer.open {
  transform: translateX(0) !important;
}
.ai-drawer-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ai-drawer-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: 0.3px;
}
.ai-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
.ai-drawer-body::-webkit-scrollbar { width: 3px; }
.ai-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.1);
  border-radius: 2px;
}

/* Digest drawer */
.digest-drawer {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--bg-secondary);
  border-left: 1px solid rgba(0,217,126,0.12);
  box-shadow: -8px 0 30px rgba(0,0,0,0.25);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.25s var(--ease-out);
}
.digest-drawer.open {
  transform: translateX(0) !important;
}
.digest-drawer-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.digest-drawer-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}
.digest-section-label {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 6px;
  padding: 0 14px;
  margin-top: 12px;
}
.digest-bell-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.digest-bell-btn:hover {
  border-color: rgba(0,217,126,0.25) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.05) !important;
}
.digest-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0,217,126,0.3);
  animation: aiDotPulse 2.5s ease-in-out infinite;
}
.dtc-name {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.dtc-stage {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--accent) !important;
  letter-spacing: 0.3px;
}
.dtc-time {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
}
.dtc-msg {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-secondary) !important;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Schedule modal */
.schedule-modal {
  background: var(--bg-secondary);
  border: 1px solid rgba(0,217,126,0.15);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0,217,126,0.04);
  padding: 20px 24px;
  width: min(400px, 90vw);
  animation: slideUp 0.2s var(--ease-out) both;
}
.schedule-modal h3 {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}
.schedule-modal .schedule-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.schedule-option-btn {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.12s;
  text-align: center;
}
.schedule-option-btn:hover {
  border-color: rgba(0,217,126,0.25) !important;
  color: var(--accent) !important;
  background: rgba(0,217,126,0.05) !important;
}

/*   END WAVE 47   */

/* ════════════════════════════════════════════════
   WAVE 48 — Dashboard Funnel, Stats, Revenue Track Refined
   ════════════════════════════════════════════════ */

/* Dashboard shell */
.dash {
  padding: 20px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section title in dashboard */
.section-title {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 10px;
  margin-top: 20px;
  padding-top: 4px;
}
.section-title:first-child { margin-top: 0; }

/* Row grid helpers */
.row { display: grid; gap: 12px; margin-bottom: 16px; }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .row-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .row-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .row-2, .row-3, .row-4 { grid-template-columns: 1fr !important; }
}

/* Stat blocks */
.stat-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 4px;
}
.stat-big {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--text) !important;
  line-height: 1;
}
.stat-sub {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--text-muted) !important;
  margin-top: 4px;
}

/* Revenue progress track */
.rev-track {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0 5px;
}
.rev-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0,217,126,0.25);
  transition: width 0.8s var(--ease-out);
}
.rev-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
}

/* Action cards (close/demo/reply) */
.action-card {
  cursor: pointer;
  text-align: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.action-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.action-card:hover::before { opacity: 1; }
.action-card.close::before {
  background: radial-gradient(ellipse at center, rgba(0,217,126,0.06), transparent 70%);
}
.action-card.demo::before {
  background: radial-gradient(ellipse at center, rgba(129,140,248,0.06), transparent 70%);
}
.action-card.reply::before {
  background: radial-gradient(ellipse at center, rgba(246,166,35,0.06), transparent 70%);
}
.action-count {
  font-family: var(--font-mono) !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  line-height: 1;
  color: var(--text) !important;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.action-card.close .action-count { color: var(--accent) !important; text-shadow: 0 0 20px rgba(0,217,126,0.2) !important; }
.action-card.demo .action-count { color: var(--purple) !important; }
.action-card.reply .action-count { color: var(--orange) !important; }
.action-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.action-desc {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  color: var(--text-muted) !important;
  line-height: 1.4;
}
.action-card:hover .action-count {
  transform: scale(1.05);
}

/* Funnel flow */
.funnel-flow {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.funnel-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  position: relative;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
}
.funnel-step:hover {
  background: rgba(0,217,126,0.04) !important;
}
.funnel-step-name {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 5px;
}
.funnel-step-count {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--text) !important;
  line-height: 1;
}
.funnel-step-count.green { color: var(--accent) !important; text-shadow: 0 0 10px rgba(0,217,126,0.2) !important; }
.funnel-step-count.orange { color: var(--orange) !important; }
.funnel-step-count.red { color: var(--red) !important; }
.funnel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-mid);
  font-size: 14px;
  flex-shrink: 0;
  padding: 0 4px;
}

/* Pipeline funnel row */
.pipeline-funnel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  cursor: pointer;
  transition: background 0.12s;
}
.pipeline-funnel-row:hover {
  background: rgba(0,217,126,0.04) !important;
}

/* Terminal bar in dashboard */
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(0,217,126,0.08);
}
.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.terminal-dot.r { background: #ff5f57; }
.terminal-dot.y { background: #febc2e; }
.terminal-dot.g { background: #28c840; }
.terminal-title {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-left: 4px;
}

/* D-leads (recent leads list on dash) */
#d-leads .lead-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: padding-left 0.1s;
}
#d-leads .lead-row:hover {
  padding-left: 4px !important;
}
#d-leads .lead-row:last-child { border-bottom: none; }

/*   END WAVE 48   */

/* ════════════════════════════════════════════════
   WAVE 49 — Mobile Responsive + Touch Refinements
   ════════════════════════════════════════════════ */

/* ── Responsive breakpoints ─── */
@media (max-width: 768px) {
  /* Sidebar collapses off-screen on mobile */
  .sidebar {
    position: fixed !important;
    left: -100% !important;
    top: 44px !important;
    bottom: 0 !important;
    width: 85vw !important;
    max-width: 320px !important;
    z-index: 500 !important;
    transition: left 0.25s var(--ease-out) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.4) !important;
  }
  .sidebar.mobile-open {
    left: 0 !important;
  }
  .app {
    display: block !important;
    height: calc(100vh - 44px) !important;
  }
  .main {
    height: calc(100vh - 44px) !important;
  }
  /* Panel views full height on mobile */
  .panel-view {
    inset: 44px 0 0 !important;
  }
  /* Swarm container narrow padding */
  .swarm-container {
    padding: 12px 14px !important;
  }
  .agent-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Dash grid 2 cols on mobile */
  .dash {
    padding: 12px 14px !important;
  }
  /* Topnav adjustments */
  .cb-topnav .nav-secondary {
    display: none !important;
  }
  /* Compose full width */
  .suggest-panel { display: none !important; }
  .ai-drawer { width: 90vw !important; }
  .digest-drawer { width: 90vw !important; }
}

@media (max-width: 500px) {
  .row-2, .row-3, .row-4 {
    grid-template-columns: 1fr !important;
  }
  .action-count {
    font-size: 32px !important;
  }
  .swarm-stats {
    gap: 8px !important;
    font-size: 10px !important;
  }
  .agent-grid {
    grid-template-columns: 1fr !important;
  }
  .pipe-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Touch-friendly hit targets ─── */
@media (hover: none) and (pointer: coarse) {
  .filter-chip,
  .tag-filter-chip,
  .thread-item,
  .tool-btn,
  .sort-chip,
  .filter-chip {
    min-height: 36px !important;
  }
  .icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .compose-send {
    width: 40px !important;
    height: 40px !important;
  }
  .thread-hover-actions {
    display: none !important; /* hover actions don't work on touch */
  }
  /* Swipe actions visible on touch */
  .swipe-actions {
    display: flex !important;
  }
  /* Bigger quick chips on touch */
  .quick-chip {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
  .qr-pill, .qr-ai-pill {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}

/* ── Focus visible only on keyboard nav ─── */
@media (hover: hover) {
  button:focus:not(:focus-visible),
  a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* ── Pipe container narrow ─── */
.pipe-container {
  padding: 20px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.pipe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pipe-header h2 {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
  color: var(--text) !important;
}
.pipe-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .pipe-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pipe-container {
    padding: 12px 14px !important;
  }
}
.pipe-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s;
}
.pipe-stat:hover {
  border-color: rgba(0,217,126,0.2) !important;
}
.pipe-stat .label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 5px;
}
.pipe-stat .value {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--text) !important;
}
.pipe-stat .value.green { color: var(--accent) !important; text-shadow: 0 0 10px rgba(0,217,126,0.2) !important; }
.pipe-stat .value.gold { color: var(--gold) !important; }

/* Pipeline board columns */
#p-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,217,126,0.1) transparent;
}
#p-board::-webkit-scrollbar { height: 4px; }
#p-board::-webkit-scrollbar-thumb {
  background: rgba(0,217,126,0.12);
  border-radius: 2px;
}

/*   END WAVE 49   */

/* ════════════════════════════════════════════════
   WAVE 50 — Micro-Interactions, Keyframes, Final Polish
   ════════════════════════════════════════════════ */

/* ── Keyframe library ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bounceIn {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0,217,126,0.15); }
  50% { box-shadow: 0 0 24px rgba(0,217,126,0.35), 0 0 48px rgba(0,217,126,0.1); }
}
@keyframes textGlowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(0,217,126,0.15); }
  50% { text-shadow: 0 0 24px rgba(0,217,126,0.5), 0 0 48px rgba(0,217,126,0.2); }
}
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(0,217,126,0.15); }
  50% { border-color: rgba(0,217,126,0.4); }
}

/* ── Loading states ─── */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0,217,126,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loading-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: aiDotPulse 1.2s ease-in-out infinite;
  opacity: 0.4;
}
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ── Glow utility classes ─── */
.glow-green {
  box-shadow: 0 0 16px rgba(0,217,126,0.25), 0 0 32px rgba(0,217,126,0.1) !important;
}
.glow-accent {
  text-shadow: 0 0 16px rgba(0,217,126,0.4) !important;
}
.border-accent {
  border-color: rgba(0,217,126,0.3) !important;
}

/* ── Status dots ─── */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.online { background: var(--accent); box-shadow: 0 0 6px rgba(0,217,126,0.4); animation: pulse 2s ease-in-out infinite; }
.status-dot.away { background: var(--orange); }
.status-dot.offline { background: var(--text-muted); opacity: 0.4; }

/* ── Gradient text (utility) ─── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #00b0ff 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Number ticker effect ─── */
.num-tick {
  display: inline-block;
  transition: all 0.5s var(--ease-out);
}

/* ── Hover group (parent hover triggers child effects) ─── */
.hover-group:hover .hover-reveal {
  opacity: 1 !important;
}
.hover-reveal {
  opacity: 0;
  transition: opacity 0.15s;
}

/* ── Sticky header on dashboard ─── */
.dash-sticky-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 12px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Quick reply pills container ─── */
.quick-replies {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Checklist items ─── */
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: color 0.12s;
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item:hover { color: var(--text) !important; }
.checklist-item.done {
  color: var(--text-muted) !important;
  text-decoration: line-through;
  opacity: 0.5;
}
.checklist-item.done::before {
  content: '✓';
  color: var(--accent) !important;
  font-weight: 800;
  text-decoration: none;
}
.checklist-section-header {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  padding: 10px 0 4px;
}

/* ── Followup badge ─── */
.followup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  background: rgba(246,166,35,0.1);
  color: var(--orange);
  border: 1px solid rgba(246,166,35,0.2);
  animation: glowPulse 3s ease-in-out infinite;
}

/* ── Sort bar ─── */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-wrap: wrap;
}
.sort-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-right: 4px;
}
.sort-chip {
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.sort-chip:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
}
.sort-chip.active {
  background: rgba(0,217,126,0.1) !important;
  color: var(--accent) !important;
  border-color: rgba(0,217,126,0.25) !important;
  box-shadow: 0 0 6px rgba(0,217,126,0.1) !important;
}

/* ── Mute icon ─── */
.mute-icon {
  color: var(--accent);
  opacity: 0.25;
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Auto-pill (auto-responder toggle) ─── */
.auto-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.auto-pill.on {
  background: rgba(0,217,126,0.1) !important;
  border-color: rgba(0,217,126,0.3) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(0,217,126,0.15), 0 0 20px rgba(0,217,126,0.07) !important;
}
.auto-pill-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}
.ar-status {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.3px;
}

/* ── Lead score badge ─── */
.lead-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  background: rgba(0,217,126,0.1);
  color: var(--accent);
  border: 1px solid rgba(0,217,126,0.18);
}
.lead-score-badge.hot {
  background: rgba(0,217,126,0.15) !important;
  box-shadow: 0 0 8px rgba(0,217,126,0.2) !important;
}
.lead-score-badge.cold {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-muted) !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* ── Draft indicator ─── */
.draft-area {
  padding: 8px 10px;
  background: rgba(0,217,126,0.03);
  border: 1px solid rgba(0,217,126,0.15);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  font-style: italic;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.draft-area:hover {
  border-color: rgba(0,217,126,0.28) !important;
  background: rgba(0,217,126,0.05) !important;
}

/* ── Drop overlay ─── */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,217,126,0.06);
  border: 2px dashed rgba(0,217,126,0.4);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: inset 0 0 30px rgba(0,217,126,0.06);
}
.drop-overlay-content {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 16px rgba(0,217,126,0.3) !important;
}

/* ── Scroll FAB ─── */
.scroll-fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid rgba(0,217,126,0.2);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: all 0.15s;
  z-index: 100;
}
.scroll-fab:hover {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px rgba(0,217,126,0.3), 0 6px 20px rgba(0,0,0,0.35) !important;
  transform: scale(1.08) !important;
}
.scroll-fab-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── AI objection bar ─── */
.ai-objection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(246,166,35,0.06);
  border: 1px solid rgba(246,166,35,0.15);
  border-radius: var(--radius);
  margin: 6px 0;
}
.aob-text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  flex: 1;
  line-height: 1.4;
}
.aob-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(246,166,35,0.12);
  border: 1px solid rgba(246,166,35,0.2);
  color: var(--orange);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.aob-btn:hover {
  background: rgba(246,166,35,0.2) !important;
  box-shadow: 0 0 8px rgba(246,166,35,0.15) !important;
}

/*   END WAVE 50   */