/* ============================================
   KaiMaPost: mail for the KaiMa suite
   Design language shared with Spark, LAINE and Note:
   dark navy first, one blue accent, an orange-to-blue
   gradient only where KORA (AI) is at work, Outfit for
   headings, Plus Jakarta Sans for reading. Calm, not busy.
   ============================================ */

:root {
  --font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Suite tokens (Spark / LAINE) */
  --k-bg: #070d1c;
  --k-bg-glow: #0d1b36;
  --k-surface: #0d1830;
  --k-surface-2: #111f3d;
  --k-surface-3: #1d2b4c;
  --k-line: #22355c;
  --k-line-strong: #2a3c66;
  --done: #2fd08a;
  --doing: #f5a524;
  --blocked: #ff5d6c;
  --scope: #b18cff;
  --ai-a: #ff8a3d;
  --ai-b: #3d8bff;
  --ai-grad: linear-gradient(135deg, var(--ai-a), var(--ai-b));

  /* App tokens (mapped onto the suite palette) */
  --primary: #3d8bff;
  --primary-hover: #5b9dff;
  --primary-light: rgba(61, 139, 255, 0.14);
  --primary-muted: #7fb0ff;
  --ai: #ff8a3d;
  --ai-light: rgba(255, 138, 61, 0.12);

  --bg: var(--k-bg);
  --bg-card: var(--k-surface);
  --bg-hover: var(--k-surface-2);
  --bg-input: #0a1428;
  --bg-raised: var(--k-surface-3);
  --text: #e8eefa;
  --text-secondary: #b8c4e0;
  --text-muted: #93a1c6;
  --text-light: #6f7ea6;
  --border: var(--k-line);
  --border-light: #182847;

  --tint-bad: rgba(255, 93, 108, 0.12);
  --tint-bad-strong: rgba(255, 93, 108, 0.28);
  --tint-accent-strong: rgba(61, 139, 255, 0.3);
  --tint-scope: rgba(177, 140, 255, 0.13);
  --tint-scope-strong: rgba(177, 140, 255, 0.3);
  --tint-warn: rgba(245, 165, 36, 0.13);
  --tint-warn-strong: rgba(245, 165, 36, 0.3);
  --tint-ok: rgba(47, 208, 138, 0.12);
  --tint-ok-strong: rgba(47, 208, 138, 0.3);

  --cat-important: #ff5d6c;
  --cat-promo: #b18cff;
  --cat-social: #3d8bff;
  --cat-updates: #2fd08a;
  --cat-followup: #f5a524;

  --provider-gmail: #ea4335;
  --provider-purelymail: #3d8bff;
  --provider-fastmail: #69b3e7;
  --provider-imap: #6f7ea6;

  --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --sidebar-width: 248px;
  --header-height: 60px;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --k-bg: #f3f6fc;
  --k-bg-glow: #e3ecfb;
  --k-surface: #ffffff;
  --k-surface-2: #eef3fb;
  --k-surface-3: #e3eaf6;
  --k-line: #dbe3f0;
  --k-line-strong: #c8d3e6;
  --primary: #2f7bf5;
  --primary-hover: #1f68dc;
  --primary-light: rgba(47, 123, 245, 0.1);
  --primary-muted: #8db5f7;
  --ai-light: rgba(255, 138, 61, 0.1);
  --bg-input: #f7f9fd;
  --text: #0d1830;
  --text-secondary: #3b4a6b;
  --text-muted: #63708f;
  --text-light: #9aa6bf;
  --border-light: #edf1f8;
  --done: #12a86c;
  --doing: #d98a06;
  --blocked: #e2394b;
  --scope: #8a5cf0;
  --cat-important: #e2394b;
  --cat-promo: #8a5cf0;
  --cat-social: #2f7bf5;
  --cat-updates: #12a86c;
  --cat-followup: #d98a06;
  --tint-bad: rgba(226, 57, 75, 0.09);
  --tint-scope: rgba(138, 92, 240, 0.1);
  --tint-warn: rgba(217, 138, 6, 0.1);
  --tint-ok: rgba(18, 168, 108, 0.09);
  --shadow: 0 18px 48px rgba(13, 24, 48, 0.12);
  color-scheme: light;
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   AUTH SCREEN
   ============================================ */
.auth-container {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-light) 100%);
}

.auth-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  max-width: 380px;
  width: 100%;
  box-shadow:
    0 0 0 1px var(--border),
    0 8px 40px rgba(0,0,0,0.08);
  text-align: center;
}

.auth-logo {
  width: 56px;
  height: 56px;
  background: var(--primary-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--primary);
}

.auth-logo svg {
  width: 28px;
  height: 28px;
}

.auth-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.5px;
}

.auth-subtitle {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 14px;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text);
}

.auth-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-light);
}

.auth-btn img {
  width: 18px;
  height: 18px;
}

.auth-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.auth-btn-primary:hover {
  background: var(--primary-hover, var(--primary-hover));
  border-color: var(--primary-hover, var(--primary-hover));
}

.auth-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}

.auth-btn-ghost:hover {
  background: var(--primary-light);
  border-color: transparent;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
}

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

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-form input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.auth-form input:focus {
  border-color: var(--primary);
}

/* ============================================
   APP LAYOUT
   ============================================ */
.app-container {
  display: none;
  height: 100vh;
  background: var(--bg);
}

.app-container.active {
  display: flex;
  flex-direction: column;
}

/* ============================================
   HEADER - Minimal
   ============================================ */
.header {
  height: var(--header-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.header-logo {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
}

.header-logo svg {
  color: var(--primary);
  flex-shrink: 0;
}

.header-search {
  flex: 1;
  max-width: 400px;
  position: relative;
  display: flex;
  align-items: center;
}

.header-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text);
  transition: all 0.15s ease;
}

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

.header-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.header-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.header-search input {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ============================================
   BUTTONS - Refined
   ============================================ */
.btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  white-space: nowrap;
}

.btn i {
  width: 15px;
  height: 15px;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

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

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-light);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.btn-icon {
  padding: 8px;
  border-radius: var(--radius-sm);
}

.btn-ai {
  background: var(--ai);
  color: white;
}

.btn-ai:hover {
  background: var(--scope);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   AVATAR
   ============================================ */
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.avatar:hover {
  box-shadow: 0 0 0 2px var(--primary-muted);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ============================================
   SIDEBAR - Clean
   ============================================ */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-section {
  padding: 12px;
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 10px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.1s ease;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 450;
}

.sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.sidebar-item.active {
  background: var(--primary-light);
  color: var(--primary);
}

.sidebar-item i {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.sidebar-item.active i {
  opacity: 1;
}

.sidebar-item .badge {
  margin-left: auto;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}

.sidebar-item.active .badge {
  background: var(--primary);
  color: white;
}

/* Category indicators - subtle dots */
.sidebar-item[data-view="important"]::before,
.sidebar-item[data-view="promo"]::before,
.sidebar-item[data-view="social"]::before,
.sidebar-item[data-view="updates"]::before,
.sidebar-item[data-view="followup"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: -4px;
}

.sidebar-item[data-view="important"]::before { background: var(--cat-important); }
.sidebar-item[data-view="promo"]::before { background: var(--cat-promo); }
.sidebar-item[data-view="social"]::before { background: var(--cat-social); }
.sidebar-item[data-view="updates"]::before { background: var(--cat-updates); }
.sidebar-item[data-view="followup"]::before { background: var(--cat-followup); }

/* Hide old category icon colors */
.cat-important i, .cat-promo i, .cat-social i, .cat-updates i, .cat-followup i {
  color: inherit !important;
}

/* ============================================
   ACCOUNT ITEMS - Compact
   ============================================ */
.account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.1s ease;
  font-size: 13px;
}

.account-item:hover {
  background: var(--bg-hover);
}

.account-item:hover .account-remove {
  opacity: 1;
}

.account-item.active {
  background: var(--primary-light);
}

.account-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.account-avatar.gmail { background: var(--provider-gmail); }
.account-avatar.purelymail { background: var(--provider-purelymail); }
.account-avatar.fastmail { background: var(--provider-fastmail); }
.account-avatar.imap { background: var(--provider-imap); }

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

.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 12px;
}

.account-provider {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.account-remove {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
  flex-shrink: 0;
}

.account-remove:hover {
  color: var(--danger, var(--blocked));
  background: rgba(255, 93, 108, 0.1);
}

.add-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.1s ease;
}

.add-account-btn:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.add-account-btn i {
  width: 16px;
  height: 16px;
}

/* ============================================
   CONVERSATION LIST - Chat Style
   ============================================ */
.email-list-container {
  width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
}

.email-list-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-list-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  color: var(--text);
}

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

/* Conversation item - card style */
.email-item {
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.1s ease;
  border-bottom: 1px solid var(--border-light);
}

.email-item:hover {
  background: var(--bg-hover);
}

.email-item.active {
  background: var(--primary-light);
  border-left: 2px solid var(--primary);
  margin-left: -1px;
}

.email-item.unread {
  background: var(--bg-card);
}

.email-item.unread .email-from-name {
  font-weight: 600;
  color: var(--text);
}

.email-item.unread .email-subject {
  font-weight: 500;
  color: var(--text);
}

.email-from {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.email-from-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-secondary);
}

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

.email-subject {
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-snippet {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Category badge - minimal */
.email-category-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  text-transform: capitalize;
}

.email-category-badge.important { background: var(--tint-bad); color: var(--blocked); }
.email-category-badge.promo { background: var(--tint-scope); color: var(--scope); }
.email-category-badge.social { background: var(--primary-light); color: var(--primary); }
.email-category-badge.updates { background: var(--tint-ok); color: var(--done); }
.email-category-badge.followup { background: var(--tint-warn); color: var(--doing); }

.priority-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.priority-badge.urgent { background: var(--tint-bad); color: var(--blocked); }
.priority-badge.high   { background: var(--tint-warn); color: var(--doing); }

/* Priority badge inside email detail subject line */
.email-detail-subject .priority-badge {
  font-size: 11px;
  padding: 3px 8px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================
   CONVERSATION VIEW - Chat Bubbles
   ============================================ */
.email-detail-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-y: auto;
}

.email-detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-direction: column;
  gap: 12px;
}

.email-detail-empty i {
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

.email-detail-empty span {
  font-size: 14px;
}

/* Conversation header */
.email-detail-header {
  padding: 16px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.email-detail-subject {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
  letter-spacing: -0.3px;
}

.email-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.email-detail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.email-detail-from {
  flex: 1;
}

.email-detail-from-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}

.email-detail-from-email {
  font-size: 12px;
  color: var(--text-muted);
}

.email-detail-date {
  font-size: 12px;
  color: var(--text-muted);
}

/* Message body - chat bubble style */
.email-detail-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.email-detail-body > * {
  max-width: 680px;
}

.email-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Top toolbar (archive, delete, star, read) */
.email-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.btn-icon.active svg {
  fill: var(--accent);
  color: var(--accent);
}

/* Quick actions bar */
.email-detail-actions {
  padding: 16px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

/* ============================================
   AI SUMMARY - Floating Card
   ============================================ */
.ai-summary-panel {
  background: var(--ai-light);
  border-radius: var(--radius);
  padding: 16px 20px;
  border: 1px solid var(--tint-scope-strong);
}

.ai-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ai);
}

.ai-summary-header i {
  width: 16px;
  height: 16px;
}

.ai-summary-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.ai-key-points {
  margin-top: 10px;
  padding-left: 18px;
  font-size: 13px;
}

.ai-key-points li {
  margin-bottom: 4px;
  color: var(--text-secondary);
}

.ai-action-required {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--tint-bad);
  border-radius: var(--radius-sm);
  color: var(--blocked);
  font-weight: 500;
  font-size: 12px;
}

/* ============================================
   AI AUTO-DRAFT PANEL
   ============================================ */
.auto-draft-panel {
  background: var(--ai-light);
  border: 1px solid var(--tint-scope-strong);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 16px 0;
}

.auto-draft-panel.auto-draft-loading {
  opacity: 0.7;
}

.auto-draft-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ai);
}

.auto-draft-header i[data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.auto-draft-status {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 4px;
}

.auto-draft-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-secondary);
}

.auto-draft-close i[data-lucide] {
  width: 14px;
  height: 14px;
}

.auto-draft-preview {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--tint-scope);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.auto-draft-preview p {
  margin: 0 0 8px 0;
}

.auto-draft-preview p:last-child {
  margin-bottom: 0;
}

.auto-draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================
   MEETING DETECTION PANEL
   ============================================ */
.meeting-panel {
  background: var(--tint-ok);
  border: 1px solid var(--tint-ok-strong);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 16px 0;
}

.meeting-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 13px;
  color: var(--done);
}

.meeting-panel-header i[data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.meeting-panel-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-secondary);
}

.meeting-panel-close i[data-lucide] {
  width: 14px;
  height: 14px;
}

.meeting-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 10px;
}

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

.meeting-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.meeting-detail-row i[data-lucide] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--done);
}

.meeting-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================
   CONNECT PROMPT
   ============================================ */
.connect-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  text-align: center;
}

.connect-prompt i {
  width: 48px;
  height: 48px;
  color: var(--text-light);
}

.connect-prompt h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.connect-prompt p {
  color: var(--text-muted);
  max-width: 280px;
  font-size: 14px;
}

/* ============================================
   LOADING & SPINNER
   ============================================ */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
  gap: 10px;
  font-size: 13px;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

.spin {
  animation: spin 0.7s linear infinite;
}

.btn .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255,255,255,0.3);
  border-top-color: white;
}

.btn-ghost .spinner {
  border-color: var(--border);
  border-top-color: var(--primary);
}

/* ============================================
   SKELETON LOADER
   ============================================ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg-hover) 25%,
    var(--border-light) 50%,
    var(--bg-hover) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  margin-bottom: 8px;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

/* ============================================
   DROPDOWN
   ============================================ */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 180px;
  z-index: 100;
  display: none;
  overflow: hidden;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.1s ease;
  color: var(--text-secondary);
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.dropdown-item i {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ============================================
   MODAL - Clean & Focused
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

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

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  overflow: hidden;
}

.modal.wide {
  max-width: 640px;
}

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

.modal-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: all 0.1s ease;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.modal-close i {
  width: 18px;
  height: 18px;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  gap: 10px;
  background: var(--bg);
}

/* ============================================
   FORMS
   ============================================ */
.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-card);
  transition: all 0.15s ease;
}

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

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-field .help-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ============================================
   PROVIDER SELECTION
   ============================================ */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.provider-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-card);
}

.provider-card:hover {
  border-color: var(--primary-muted);
  background: var(--primary-light);
}

.provider-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.provider-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-bottom: 8px;
}

.provider-card-icon img {
  width: 28px;
  height: 28px;
}

.provider-card-icon i {
  width: 28px;
  height: 28px;
}

.provider-icon-purelymail i { color: var(--provider-purelymail); }
.provider-icon-fastmail i  { color: var(--provider-fastmail); }
.provider-icon-imap i      { color: var(--provider-imap); }

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

.provider-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================
   COMPOSE - Chat Input Style
   ============================================ */
.compose-field {
  margin-bottom: 14px;
}

.compose-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.compose-field input,
.compose-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-card);
}

.compose-field input:focus,
.compose-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.compose-recipients {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: text;
  background: var(--bg-card);
}

.compose-recipients:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.compose-recipients input {
  flex: 1;
  min-width: 100px;
  border: none;
  padding: 4px 0;
  font-size: 14px;
  background: transparent;
}

.compose-recipients input:focus {
  outline: none;
  box-shadow: none;
}

.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.recipient-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  padding: 0;
  display: flex;
  opacity: 0.7;
}

.recipient-chip button:hover {
  opacity: 1;
}

/* Quill editor - minimal */
.compose-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
}

.compose-editor .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 8px;
}

.compose-editor .ql-container {
  border: none;
  font-size: 14px;
  min-height: 180px;
}

.compose-editor .ql-editor {
  min-height: 180px;
  line-height: 1.6;
  color: var(--text);
}

.compose-editor .ql-editor p {
  margin: 0;
}

.compose-editor .ql-editor::before {
  color: var(--text-muted);
  font-style: normal;
}

/* ============================================
   AI COMPOSE HELPER - Prominent
   ============================================ */
.ai-compose-helper {
  background: linear-gradient(135deg, var(--ai-light) 0%, var(--tint-scope) 100%);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--tint-scope-strong);
}

.ai-compose-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ai);
}

.ai-compose-header i {
  width: 16px;
  height: 16px;
}

.ai-compose-input {
  display: flex;
  gap: 8px;
}

.ai-compose-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--tint-scope-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
}

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

.ai-compose-input input:focus {
  outline: none;
  border-color: var(--ai);
  box-shadow: 0 0 0 3px var(--ai-light);
}

.ai-compose-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.ai-compose-options select {
  padding: 6px 10px;
  border: 1px solid var(--tint-scope-strong);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg-card);
  color: var(--ai);
  cursor: pointer;
}

.ai-compose-options select:focus {
  outline: none;
  border-color: var(--ai);
}

/* ============================================
   SETTINGS
   ============================================ */
.settings-section {
  margin-bottom: 24px;
}

.settings-section-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

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

.settings-row label {
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-row select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
}

/* Toggle switch - refined */
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: 0.2s;
}

.toggle-slider:before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--bg-card);
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.toggle input:checked + .toggle-slider {
  background: var(--primary);
}

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

/* ============================================
   ADVANCED SEARCH
   ============================================ */
.search-results-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.search-results-bar i[data-lucide] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#search-results-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-clear-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.search-clear-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.search-clear-btn i[data-lucide] {
  width: 12px;
  height: 12px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--text);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: slideIn 0.2s ease;
}

.toast.error {
  background: var(--blocked);
}

.toast.success {
  background: var(--done);
}

.toast-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-width: 260px;
}

.toast-undo-msg {
  flex: 1;
}

.toast-undo-countdown {
  font-size: 11px;
  opacity: 0.55;
  min-width: 20px;
  text-align: right;
}

.toast-undo-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.toast-undo-btn:hover {
  background: rgba(255, 255, 255, 0.30);
}

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

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .sidebar {
    width: 200px;
  }

  .email-list-container {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .email-list-container {
    width: 100%;
    border-right: none;
  }

  .email-detail-container {
    display: none;
  }

  .email-detail-container.active {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
  }

  .provider-grid {
    grid-template-columns: 1fr;
  }

  .header-search {
    display: none;
  }
}

/* ============================================
   SNOOZE PICKER
   ============================================ */
.snooze-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.snooze-picker.active {
  display: block;
}

.snooze-picker-menu {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  min-width: 260px;
  padding: 6px;
  pointer-events: all;
}

.snooze-picker-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 6px 10px 8px;
}

.snooze-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s ease;
  gap: 12px;
}

.snooze-option:hover {
  background: var(--bg-hover);
}

.snooze-option-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.snooze-option-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.snooze-custom-row {
  flex-direction: column;
  align-items: flex-start;
  cursor: default;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
  padding-top: 10px;
}

.snooze-custom-row:hover {
  background: none;
}

.snooze-custom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.snooze-custom-controls input[type="datetime-local"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--bg-input);
  color: var(--text);
  outline: none;
}

.snooze-custom-controls input[type="datetime-local"]:focus {
  border-color: var(--primary);
}

/* Snooze badge in email list */
.email-snooze-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--cat-followup);
}

/* Snoozed sidebar nav dot */
.sidebar-item[data-view="snoozed"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat-followup);
  margin-right: -4px;
}

/* ============================================
   FOLLOW-UP REMINDERS
   ============================================ */

.followup-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(245, 165, 36, 0.1);
  border-bottom: 1px solid rgba(245, 165, 36, 0.25);
  font-size: 13px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.followup-banner-icon {
  font-size: 15px;
  line-height: 1;
}

.followup-banner-text {
  flex: 1;
}

.followup-banner-link {
  color: var(--cat-followup);
  font-weight: 500;
  text-decoration: none;
}

.followup-banner-link:hover {
  text-decoration: underline;
}

.followup-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
  padding: 0 2px;
  line-height: 1;
}

.followup-banner-close:hover {
  color: var(--text-primary);
}

/* Sidebar badge count pill */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cat-followup);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  line-height: 1;
}

/* Follow-up email list item nudge text */

.followup-nudge {
  color: var(--cat-followup);
  font-size: 12px;
  font-style: italic;
}

.followup-actions {
  margin-top: 4px;
}

.followup-actions .btn-sm {
  font-size: 11px;
  padding: 2px 8px;
  height: auto;
  opacity: 0.75;
}

.followup-actions .btn-sm:hover {
  opacity: 1;
}

/* Shared empty-state for list panes (Drafts, Templates, Snoozed, Scheduled, etc.) */
.email-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

.email-list-empty i {
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 4px;
}

.email-list-empty p {
  margin: 0;
}

/* Empty state for Follow-up view */
.followup-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-secondary);
  font-size: 14px;
}

.followup-empty-state i {
  width: 36px;
  height: 36px;
  color: var(--cat-followup);
  opacity: 0.7;
}

/* ============================================
   SMART UNSUBSCRIBE
   ============================================ */

.btn-danger {
  background: var(--blocked);
  color: #fff;
  border: none;
}

.btn-danger:hover {
  background: var(--blocked);
}

.unsubscribe-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.unsubscribe-sender-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.unsubscribe-sender-card:hover {
  background: var(--bg-hover);
}

.unsubscribe-sender-info {
  flex: 1;
  min-width: 0;
}

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

.unsubscribe-sender-address {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unsubscribe-sender-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.unsubscribe-sender-subject {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-style: italic;
}

.unsubscribe-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.unsubscribe-trigger {
  color: var(--blocked);
}

.unsubscribe-trigger:hover {
  color: var(--blocked);
  background: rgba(255, 93, 108, 0.08);
}

.unsubscribe-method-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ============================================
   SEARCH AUTOCOMPLETE
   ============================================ */
.search-autocomplete {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  z-index: 300;
  overflow: hidden;
  max-height: 340px;
  overflow-y: auto;
}

.search-autocomplete.active {
  display: block;
}

.search-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.search-ac-item:hover,
.search-ac-item.highlighted {
  background: var(--bg-hover);
}

.search-ac-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.search-ac-type-saved    { color: var(--primary); }
.search-ac-type-recent   { color: var(--text-muted); }
.search-ac-type-operator { color: var(--ai); }
.search-ac-type-sender   { color: var(--cat-social); }

.search-ac-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.search-ac-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-ac-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   SAVED SEARCHES SIDEBAR
   ============================================ */
.saved-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s ease;
  font-size: 13px;
  color: var(--text-secondary);
}

.saved-search-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.saved-search-item:hover .saved-search-delete {
  opacity: 1;
}

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

.saved-search-delete {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}

.saved-search-delete:hover {
  color: var(--text);
}

.saved-search-empty {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Save search UI in results bar */
.save-search-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  margin-right: 6px;
}

.save-search-inline input {
  flex: 1;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
}

.save-search-inline input:focus {
  border-color: var(--primary);
}

.search-save-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.search-save-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-muted);
}

.search-save-btn i[data-lucide] {
  width: 12px;
  height: 12px;
}

.btn-xs {
  padding: 3px 10px !important;
  font-size: 11px !important;
}

/* ============================================
   SEND LATER — Split Send Button
   ============================================ */
.send-btn-group {
  display: flex;
  border-radius: var(--radius);
  overflow: hidden;
}

.send-btn-group .send-main-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.send-btn-group .send-schedule-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0 8px;
  min-width: 32px;
}

.send-btn-group .send-schedule-toggle i[data-lucide] {
  width: 14px;
  height: 14px;
}

/* Schedule picker bar — inside compose modal, below footer */
.schedule-picker-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-hover);
  border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
}

.schedule-picker-bar i[data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--primary);
}

.schedule-picker-bar span {
  white-space: nowrap;
}

.schedule-picker-bar input[type="datetime-local"] {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  min-width: 0;
}

.schedule-picker-bar input[type="datetime-local"]:focus {
  border-color: var(--primary);
}

.btn-sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

/* ============================================
   SEND LATER — Scheduled Emails List
   ============================================ */
.scheduled-email-item {
  cursor: pointer;
}

/* Scheduled email detail panel */
.email-body-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  width: 100%;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.scheduled-detail-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(61, 139, 255, 0.07);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}

.scheduled-detail-banner svg {
  flex-shrink: 0;
}

.scheduled-email-item .email-item-main {
  flex: 1;
  min-width: 0;
}

.email-item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.scheduled-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(61, 139, 255, 0.12);
  color: var(--primary);
  white-space: nowrap;
}

/* ============================================
   THREAD VIEW
   ============================================ */

/* Thread message count bubble in list */
.thread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 0 6px;
  min-width: 18px;
  height: 16px;
  margin: 0 4px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Thread detail — subject + count row */
.thread-detail-header {
  padding: 16px 24px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.thread-detail-header .email-detail-subject {
  margin-bottom: 4px;
}

.thread-message-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* Scrollable messages container */
.thread-messages-container {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Individual message card */
.thread-message {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.thread-message.expanded {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Card header row (avatar · name · date · chevron) */
.thread-message-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}

.thread-message.collapsed .thread-message-header:hover {
  background: var(--bg-hover);
}

.thread-message.expanded .thread-message-header {
  border-bottom: 1px solid var(--border);
}

/* Sender avatar */
.thread-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

/* Name + snippet/to column */
.thread-message-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thread-message-from {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
}

.thread-message-to-inline {
  font-size: 11px;
  color: var(--text-muted);
}

.thread-message-snippet {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-message-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.thread-expand-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Expanded message body */
.thread-message-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  overflow-x: auto;
}

.thread-message-body pre {
  white-space: pre-wrap;
  font-family: inherit;
}

.thread-message-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Reply / AI Reply action bar */
.thread-message-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ============================================
   ATTACHMENTS
   ============================================ */

/* Chip shared base — used in both compose and email detail */
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
}

.attach-chip i[data-lucide] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
}

.attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.attach-chip-size {
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-size: 11px;
}

/* Remove button (compose only) */
.attach-chip-remove {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  color: var(--text-tertiary);
  flex-shrink: 0;
  line-height: 1;
}

.attach-chip-remove:hover {
  color: var(--text);
}

.attach-chip-remove i[data-lucide] {
  width: 12px;
  height: 12px;
}

/* Clickable download chip (email detail) */
.attach-chip-download {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.attach-chip-download:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.attach-chip-dl-icon {
  flex-shrink: 0;
  color: var(--primary) !important;
}

.attach-chip.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Attachment Preview Modal ──────────────────────────────── */
.attachment-preview-modal-inner {
  max-width: 860px;
  width: 90vw;
  max-height: 90vh;
}
.attachment-preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  min-height: 200px;
}
.attachment-preview-body img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}
.attachment-preview-body iframe {
  width: 100%;
  height: 75vh;
  border: none;
  display: block;
}
.attachment-preview-body pre {
  width: 100%;
  height: 75vh;
  overflow: auto;
  padding: 16px;
  margin: 0;
  font-size: 13px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: none;
  align-self: flex-start;
}
.attachment-preview-loading {
  color: var(--text-secondary);
  font-size: 14px;
  padding: 40px;
}
.attachment-preview-no-preview {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ── Contact Intelligence Panel ─────────────────────────────── */
.contact-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 360px;
  transform: translateX(100%);
  transition: transform 250ms ease;
  z-index: 200;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
}
.contact-panel.active {
  transform: translateX(0);
}
.contact-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.contact-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-panel-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
}
.contact-panel-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.contact-panel-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.contact-panel-email {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  word-break: break-all;
}
.contact-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.contact-stat-tile {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.contact-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contact-section-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-freq-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-freq-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
}
.contact-freq-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.contact-freq-bar {
  width: 100%;
  background: var(--primary);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.contact-freq-col:hover .contact-freq-bar {
  opacity: 1;
}
.contact-freq-label {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.contact-threads-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-thread-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.contact-thread-item:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}
.contact-thread-subject {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-thread-date {
  font-size: 11px;
  color: var(--text-secondary);
}
.contact-thread-snippet {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-panel-loading,
.contact-panel-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}
/* Sender name/avatar click target */
.contact-trigger {
  cursor: pointer;
}
.email-detail-from-name.contact-trigger:hover,
.thread-message-from.contact-trigger:hover {
  color: var(--primary);
  text-decoration: underline;
}
.email-detail-avatar.contact-trigger:hover,
.thread-message-avatar.contact-trigger:hover {
  opacity: 0.85;
}

/* Compose attachment area — wraps chips horizontally, wraps to next line */
.compose-attachments {
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Email detail attachment strip */
.attachment-strip {
  padding: 10px 24px 4px;
}

.attachment-strip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================
   QUICK REPLIES
   ============================================ */
.quick-replies-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.quick-replies-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
  white-space: nowrap;
}

.quick-reply-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.quick-reply-chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* ============================================
   EMAIL TEMPLATES
   ============================================ */
.templates-picker-bar {
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.templates-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.templates-picker-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

.template-picker-item {
  border-bottom: 1px solid var(--border);
}

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

.template-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.template-picker-row:hover {
  background: var(--bg-selected);
}

.template-picker-info {
  flex: 1;
  min-width: 0;
}

.template-preview-btn {
  flex-shrink: 0;
}

.template-picker-preview {
  padding: 10px 16px;
  border-top: 1px dashed var(--border);
  background: var(--bg);
  font-size: 13px;
  color: var(--text);
  max-height: 240px;
  overflow-y: auto;
}

.template-picker-preview p,
.template-picker-preview div {
  margin: 0 0 6px 0;
}

.template-picker-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.template-picker-subject {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.templates-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.save-template-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-hover);
  border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  font-size: 13px;
}

/* Templates management view (sidebar → Templates) */
.templates-list-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}

.template-list-item.selected {
  background: var(--bg-selected);
}

.template-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.template-editor-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  box-shadow: 0 1px 2px var(--bg-hover);
}

.template-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.template-editor-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.template-editor-actions {
  display: flex;
  gap: 8px;
}

.template-editor-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 6px;
}

.template-editor-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

.template-editor-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.15);
}

#template-editor-body {
  min-height: 240px;
  border-radius: var(--radius);
}

#template-editor-body .ql-container {
  min-height: 240px;
  font-size: 14px;
}

.empty-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.save-template-bar i[data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--primary);
}

.save-template-bar input[type="text"] {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  min-width: 0;
}

.save-template-bar input[type="text"]:focus {
  border-color: var(--primary);
}

/* Settings — Templates list */
.settings-templates-list {
  margin-top: 4px;
}

.settings-template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

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

.settings-template-info {
  min-width: 0;
}

.settings-template-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.settings-template-subject {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============================================
   READ RECEIPTS / LINK TRACKING
   ============================================ */

/* Tracking toggle button — active (blue) when enabled */
#compose-track-btn.active {
  color: var(--primary);
  background: var(--primary-light);
}

/* Tracking panel in email detail view */
.tracking-panel {
  margin: 0 0 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}

.tracking-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tracking-panel-header i[data-lucide] {
  width: 13px;
  height: 13px;
  color: var(--primary);
}

.tracking-panel-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tracking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.tracking-row i[data-lucide] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.tracking-muted {
  color: var(--text-secondary);
}

.tracking-loading,
.tracking-error {
  font-size: 13px;
  color: var(--text-secondary);
}

.tracking-links {
  margin-top: 4px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tracking-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tracking-link-url {
  font-size: 12px;
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tracking-link-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ============================================
   INBOX ZERO COACHING PANEL
   ============================================ */
.coaching-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 380px;
  transform: translateX(100%);
  transition: transform 250ms ease;
  z-index: 200;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
}
.coaching-panel.active {
  transform: translateX(0);
}
.coaching-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.coaching-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.coaching-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.coaching-summary-card {
  background: var(--primary-light, var(--primary-light));
  border: 1px solid var(--primary-border, var(--tint-accent-strong));
  border-radius: var(--radius);
  padding: 16px;
}
.coaching-quote {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.coaching-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  gap: 14px;
}
.coaching-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.coaching-steps-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.coaching-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: opacity 200ms;
}
.coaching-step.done {
  opacity: 0.45;
}
.coaching-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.coaching-step.done .coaching-step-num {
  background: var(--text-light);
}
.coaching-step-content {
  flex: 1;
  min-width: 0;
}
.coaching-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.coaching-step-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.coaching-step-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coaching-step-count {
  font-size: 11px;
  color: var(--text-light);
}
.coaching-check-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-light);
  transition: all 150ms;
}
.coaching-check-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.coaching-step.done .coaching-check-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.coaching-zero-state {
  text-align: center;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.coaching-zero-state i[data-lucide] {
  width: 40px;
  height: 40px;
  color: var(--primary);
  margin-bottom: 8px;
}
.coaching-zero-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.coaching-zero-state p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.coaching-loading {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.coaching-refresh-btn {
  align-self: center;
  margin-top: 4px;
}

/* ============================================
   VOICE COMPOSE
   ============================================ */
@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

#compose-voice-btn.recording {
  color: var(--blocked);
  background: rgba(255, 93, 108, 0.1);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-compose-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-hover);
  border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
}

.voice-compose-bar i[data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--blocked);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-compose-bar span {
  flex: 1;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   ANNOUNCEMENT BANNER (populated from admin panel)
   ============================================ */
.announcement-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 16px; font-size: 13px; line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.announcement-banner-info     { background: var(--primary-light); color: var(--primary); border-bottom-color: var(--tint-accent-strong); }
.announcement-banner-warning  { background: var(--tint-warn); color: var(--doing); border-bottom-color: var(--tint-warn-strong); }
.announcement-banner-critical { background: var(--tint-bad); color: var(--blocked); border-bottom-color: var(--tint-bad-strong); }
.announcement-banner-content { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.announcement-banner-title { font-weight: 600; }
.announcement-banner-body { opacity: 0.85; }
.announcement-banner-dismiss {
  background: transparent; border: none; color: currentColor; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px; opacity: 0.6;
}
.announcement-banner-dismiss:hover { opacity: 1; }

/* Global-template badge in the compose picker */
.template-global-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--primary-light); color: var(--primary-hover);
}

/* ============================================
   KAIMAPOST LAYER
   Suite look, KORA, AI eyes, suite wheel
   ============================================ */
body {
  background:
    radial-gradient(1100px 520px at 85% -12%, var(--k-bg-glow), transparent 62%),
    var(--bg);
  letter-spacing: 0.005em;
}
h1, h2, h3, .auth-title, .modal-title, .email-list-title, .email-detail-subject, .coaching-panel-title,
.sidebar-section-title, .header-logo span, .settings-section-title {
  font-family: var(--font-head);
}
.email-list-title { font-weight: 650; letter-spacing: 0.01em; }
::selection { background: rgba(61, 139, 255, 0.35); }
* { scrollbar-width: thin; scrollbar-color: var(--k-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--k-line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* Header */
.header {
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
}
.header-logo { gap: 10px; }
.header-logo span { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.header-logo span b { font-weight: 700; background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kp-mark {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ai-grad); color: #fff; box-shadow: 0 6px 18px rgba(61, 139, 255, 0.3);
}
.kp-mark svg { width: 17px; height: 17px; }
.header-search input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; }
.header-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.btn { border-radius: 999px; font-family: var(--font-body); }
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }

/* KORA buttons: gradient ring, used only where KORA works */
.btn-ai, #categorize-btn, #score-priority-btn, #ai-compose-btn, #compose-ai-improve {
  position: relative;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--ai-grad) border-box;
  border: 1px solid transparent !important;
  color: var(--text);
}
.btn-ai:hover, #categorize-btn:hover, #score-priority-btn:hover, #ai-compose-btn:hover, #compose-ai-improve:hover {
  background:
    linear-gradient(var(--bg-hover), var(--bg-hover)) padding-box,
    var(--ai-grad) border-box;
}
.ai-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ai-grad); margin-right: 6px; vertical-align: middle; }

/* Theme toggle + suite wheel (upper right, same spot in every KaiMa app) */
.kp-icon-btn {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.kp-icon-btn:hover { color: var(--text); border-color: var(--k-line-strong); background: var(--bg-hover); }
.kp-icon-btn svg { width: 17px; height: 17px; }
.kp-theme .sun { display: none; }
:root[data-theme="light"] .kp-theme .sun { display: block; }
:root[data-theme="light"] .kp-theme .moon { display: none; }

.kp-wheel { position: relative; }
.kp-wheel-btn { overflow: hidden; }
.kp-wheel-btn .wheel-ring {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(#3d8bff 0 25%, #ff8a3d 0 50%, #2fd08a 0 75%, #b18cff 0);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px);
  mask: radial-gradient(circle, transparent 5px, #000 5.5px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.kp-wheel.open .wheel-ring { transform: rotate(90deg); }
.kp-wheel-menu {
  position: absolute; top: 44px; right: 0; width: 240px; padding: 8px; z-index: 300;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .15s, transform .15s;
}
.kp-wheel.open .kp-wheel-menu { opacity: 1; transform: none; pointer-events: auto; }
.kp-wheel-menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; color: var(--text); text-decoration: none;
}
.kp-wheel-menu a:hover { background: var(--bg-hover); }
.kp-wheel-menu a.current { background: var(--primary-light); }
.kp-wheel-menu .app-dot { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font: 700 13px var(--font-head); color: #fff; }
.kp-wheel-menu .app-name { font: 600 14px var(--font-head); }
.kp-wheel-menu .app-sub { font-size: 12px; color: var(--text-muted); }
.kp-wheel-menu .here { margin-left: auto; font-size: 11px; color: var(--primary); }

/* Auth */
.auth-container { background: radial-gradient(900px 500px at 70% -10%, var(--k-bg-glow), transparent 60%), var(--bg); }
.auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.auth-logo { background: var(--ai-grad) !important; color: #fff !important; border-radius: 16px !important; }
.auth-title { font-weight: 700; letter-spacing: -0.02em; }
.auth-title b { background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-form input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 12px; }
.auth-form input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-light); }
.auth-btn { border-radius: 12px; }
.auth-note { font-size: 12.5px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }
.auth-link { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; margin-top: 6px; }
.auth-link:hover { color: var(--text); }
.auth-sent { display: none; text-align: center; padding: 8px 0 2px; }
.auth-sent.show { display: block; }
.auth-sent b { display: block; font: 600 16px var(--font-head); margin-bottom: 6px; }

/* Sidebar */
.sidebar { background: color-mix(in srgb, var(--bg-card) 70%, transparent); border-right: 1px solid var(--border); }
.sidebar-item { border-radius: 10px; }
.sidebar-item.active { background: var(--primary-light); color: var(--text); }
.sidebar-item.active i, .sidebar-item.active svg { color: var(--primary); }
.kp-build { font-size: 11px; color: var(--text-light); padding: 10px 12px 4px; font-family: Consolas, Menlo, monospace; }

/* Email list + detail */
.email-list-container { background: transparent; }
.email-item { border-bottom: 1px solid var(--border-light); }
.email-item.active { background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); }
.email-detail { background: color-mix(in srgb, var(--bg-card) 55%, transparent); }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.modal-overlay { background: rgba(3, 7, 16, 0.6); backdrop-filter: blur(4px); }
:root[data-theme="light"] .modal-overlay { background: rgba(13, 24, 48, 0.28); }
input, select, textarea { color: var(--text); }
select, .settings-row select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 10px; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border) !important; }
.ql-snow .ql-stroke { stroke: var(--text-muted) !important; }
.ql-snow .ql-fill { fill: var(--text-muted) !important; }
.ql-snow .ql-picker { color: var(--text-muted) !important; }
.ql-editor { color: var(--text); }
.ql-editor.ql-blank::before { color: var(--text-light) !important; }
.email-body-frame, .email-body-html { background: #fff; color: #111; border-radius: 12px; }

/* ---------- AI eyes: one check mark per mailbox, label and thread ---------- */
.kp-eye {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
  border-radius: 999px; padding: 4px 10px 4px 6px; font: 500 12px var(--font-body); white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.kp-eye:hover { color: var(--text); border-color: var(--k-line-strong); }
.kp-eye .box {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--k-line-strong); display: grid; place-items: center; flex: 0 0 16px;
}
.kp-eye .box svg { width: 11px; height: 11px; opacity: 0; color: #fff; }
.kp-eye.on { color: var(--text-secondary); }
.kp-eye.on .box { background: var(--ai-grad); border-color: transparent; }
.kp-eye.on .box svg { opacity: 1; }
.kp-eye.off { color: var(--text-muted); border-style: dashed; }
.kp-eye-mini {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--k-line-strong); background: transparent;
  display: grid; place-items: center; cursor: pointer; flex: 0 0 20px; padding: 0; margin-left: 4px;
}
.kp-eye-mini svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.kp-eye-mini.on { background: var(--ai-grad); border-color: transparent; }
.kp-eye-mini.on svg { opacity: 1; }
.kp-eye-mini:hover { border-color: var(--primary); }
.sidebar-item .kp-eye-mini, .account-item .kp-eye-mini { margin-left: auto; }
.account-item .kp-eye-mini + .account-remove { margin-left: 6px; }
.kp-hidden-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-light);
  border: 1px dashed var(--k-line-strong); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.kp-hidden-tag svg { width: 11px; height: 11px; }
.kp-hidden-banner {
  display: flex; gap: 10px; align-items: center; margin: 12px 20px 0; padding: 10px 14px;
  border: 1px dashed var(--k-line-strong); border-radius: 14px; color: var(--text-muted); font-size: 13px;
}
.kp-hidden-banner svg { width: 16px; height: 16px; flex: 0 0 16px; }
.kp-ai-hidden [onclick^="aiReply"], .kp-ai-hidden [onclick^="aiSummarize"],
.kp-ai-hidden #auto-draft-container, .kp-ai-hidden #meeting-detect-container, .kp-ai-hidden #ai-summary-container { display: none !important; }
.provider-card.kp-needs-setup { opacity: .55; }
.provider-card.kp-needs-setup::after { content: "Needs setup"; display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.hidden { display: none !important; }

/* ---------- KORA orb (bottom right, same as Spark) ---------- */
.kora-orb {
  position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; z-index: 400;
  background: radial-gradient(circle at 32% 30%, #ffd2b0 0, #ff8a3d 22%, #7d6bff 58%, #3d8bff 78%, #1b3f8f 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 34px rgba(61, 139, 255, .42), 0 0 46px rgba(255, 138, 61, .22);
  animation: kora-breathe 5.5s ease-in-out infinite;
  overflow: hidden;
}
.kora-orb::before, .kora-orb::after {
  content: ""; position: absolute; inset: -30%; border-radius: 45%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .35), transparent 40%);
  animation: kora-wisp 9s linear infinite; mix-blend-mode: screen;
}
.kora-orb::after { animation-duration: 13s; animation-direction: reverse; inset: -40%; opacity: .6;
  background: radial-gradient(circle at 30% 70%, rgba(255, 170, 110, .45), transparent 38%); }
.kora-orb.busy { animation: kora-breathe 1.4s ease-in-out infinite; }
.kora-orb .kora-label {
  position: absolute; right: 70px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font: 600 12.5px var(--font-head);
  padding: 6px 12px; border-radius: 999px; opacity: 0; transition: opacity .15s;
}
.kora-orb:hover .kora-label { opacity: 1; }
@keyframes kora-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes kora-wisp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kora-orb, .kora-orb::before, .kora-orb::after { animation: none; } }

.kora-drawer {
  position: fixed; right: 22px; bottom: 92px; width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 130px));
  display: flex; flex-direction: column; z-index: 401;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity .18s, transform .18s;
}
.kora-drawer.open { opacity: 1; transform: none; pointer-events: auto; }
.kora-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-light); }
.kora-head .mini-orb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffd2b0, #ff8a3d 25%, #7d6bff 60%, #3d8bff); }
.kora-head .t { font: 650 15px var(--font-head); }
.kora-head .s { font-size: 12px; color: var(--text-muted); }
.kora-head .grow { flex: 1; }
.kora-head .x { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 8px; }
.kora-head .x:hover { color: var(--text); background: var(--bg-hover); }
.kora-scope { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }
.kora-chip { border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.kora-chip.on { color: var(--text); border-color: var(--primary); background: var(--primary-light); }
.kora-log { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.kora-msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.kora-msg.me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.kora-msg.kora { align-self: flex-start; background: var(--bg-hover); border: 1px solid var(--border-light); border-bottom-left-radius: 4px; }
.kora-msg.note { align-self: center; background: none; color: var(--text-muted); font-size: 12px; text-align: center; }
.kora-sources { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.kora-source { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-muted); cursor: pointer; background: none; border: 0; padding: 2px 0; text-align: left; font-family: inherit; }
.kora-source:hover { color: var(--primary); }
.kora-source .n { font: 600 11px var(--font-head); color: var(--primary); }
.kora-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.kora-suggest button { border: 1px dashed var(--k-line-strong); background: none; color: var(--text-muted); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.kora-suggest button:hover { color: var(--text); border-style: solid; }
.kora-input { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border-light); }
.kora-input textarea {
  flex: 1; resize: none; height: 42px; max-height: 120px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; font: 13.5px var(--font-body); color: var(--text); outline: none;
}
.kora-input textarea:focus { border-color: var(--primary); }
.kora-input button { width: 42px; height: 42px; border-radius: 14px; border: 0; background: var(--ai-grad); color: #fff; cursor: pointer; display: grid; place-items: center; }
.kora-input button:disabled { opacity: .5; cursor: default; }
.kora-foot { font-size: 11px; color: var(--text-light); padding: 0 16px 10px; }

/* ---------- Settings: What KORA knows ---------- */
.kimi-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; margin-top: 8px; }
.kimi-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 12px; font-size: 13px; }
.kimi-row .k { font: 600 10.5px var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--primary); padding-top: 2px; min-width: 58px; }
.kimi-row .c { flex: 1; color: var(--text-secondary); }
.kimi-row button { background: none; border: 0; color: var(--text-light); cursor: pointer; font-size: 12px; }
.kimi-row button:hover { color: var(--blocked); }
.kimi-empty { color: var(--text-muted); font-size: 13px; padding: 6px 0; }
.kimi-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.kimi-help { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 760px) {
  .kora-orb { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .kora-drawer { right: 10px; bottom: 76px; }
}

/* ============================================
   SEALED EMAIL FRAMES (v1.1 safety pass)
   Email bodies render inside a sandboxed frame (scripts off) as a light "paper" sheet,
   so a sender's styles can never reach the app. Remote images stay off until asked.
   ============================================ */
.kp-mail { width: 100%; }
.kp-mail-frame {
  display: block;
  width: 100%;
  min-height: 80px;
  border: 0;
  border-radius: var(--radius, 10px);
  background: #fff;
  color-scheme: light;
}
.email-body-card:has(> .kp-mail) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: 820px;
}
.thread-message-body:has(> .kp-mail) { padding: 12px 16px 16px; }
.kp-img-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-hover);
  color: var(--text-muted, var(--text));
  font-size: 12.5px;
}
.kp-img-bar[hidden] { display: none; }
.kp-img-show {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.kp-img-show:hover { border-color: var(--primary); color: var(--primary); }
pre.kp-plain { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* ============================================
   v1.1 BUCKETS ACROSS THE TOP + ACTION ROW
   ============================================ */
.kp-mailpane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.kp-panes { flex: 1; min-height: 0; display: flex; }
.kp-bucketbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 75%, transparent);
  min-height: 48px;
}
.kp-bucketbar[hidden] { display: none; }
.kp-mailbox-select {
  flex-shrink: 0; max-width: 220px; padding: 6px 10px; font-size: 12.5px;
  border-radius: 999px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
}
.kp-buckets { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: thin; padding: 2px 0; }
.kp-bucket {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--text-muted, var(--text)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.kp-bucket:hover { background: var(--bg-hover); color: var(--text); }
.kp-bucket.on { background: var(--primary-light); color: var(--text); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.kp-bucket-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.kp-bucket-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; }
.kp-bucket-note { font-size: 12.5px; color: var(--text-muted, var(--text)); padding: 6px; }
.kp-bucket-manage {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.kp-bucket-manage svg { width: 14px; height: 14px; }
.kp-bucket-manage:hover { border-color: var(--primary); }

.kp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 24px 4px; }
.kp-actions:empty { display: none; }
.kp-act {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.kp-act svg { width: 14px; height: 14px; }
.kp-act:hover { border-color: var(--primary); }
.kp-act.on { border-color: var(--primary); background: var(--primary-light); }
.kp-act.kora svg { color: var(--primary); }
.kp-act[aria-disabled="true"] { opacity: .55; }

.kp-menu {
  position: fixed; z-index: 3000; min-width: 220px; max-width: 320px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,.35));
}
.kp-menu-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted, var(--text)); padding: 6px 10px 4px; }
.kp-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.kp-menu-item:hover { background: var(--bg-hover); }
.kp-menu-item.on { font-weight: 700; }
.kp-menu-item.danger { color: var(--danger, #ff5d6c); }
.kp-menu-sub { margin-left: auto; font-size: 11.5px; color: var(--text-muted, var(--text)); }
.kp-menu-check { margin-left: auto; color: var(--primary); }
.kp-menu-row { display: flex; gap: 6px; padding: 6px 10px; align-items: center; }
.kp-menu-date { flex: 1; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); }
.kp-menu-always { display: flex; align-items: center; gap: 4px; padding: 8px 10px 4px; font-size: 12px; color: var(--text-muted, var(--text)); border-top: 1px solid var(--border); margin-top: 4px; }

.kp-follow-badge { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--primary); }
.kp-follow-badge.due { color: #ff8a3d; }
.auto-draft-subject { font-size: 12.5px; color: var(--text-muted, var(--text)); padding: 0 0 6px; }

.kp-manage-modal { width: min(640px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.kp-manage { overflow-y: auto; }
.kp-manage-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; border-top: 1px solid var(--border); }
.kp-manage-row:first-child { border-top: 0; }
.kp-manage-name { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font: inherit; font-weight: 600; }
.kp-manage-color { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.kp-manage-vis { font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.kp-manage-builtin { font-size: 11px; color: var(--text-muted, var(--text)); padding: 0 6px; }
.kp-rules { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px 38px; align-items: center; }
.kp-rule { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--bg-hover); }
.kp-rule-x { border: 0; background: transparent; color: var(--text-muted, var(--text)); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 6px; }
.kp-rule-add { display: flex; gap: 6px; width: 100%; }
.kp-rule-field, .kp-rule-pattern { padding: 5px 8px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); }
.kp-rule-pattern { flex: 1; min-width: 0; }
.kp-manage-new { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.kp-manage-new input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font: inherit; }
.kp-manage-help { font-size: 12px; color: var(--text-muted, var(--text)); margin: 10px 0 0; }

.kp-cal-modal { width: min(520px, 94vw); }
.kp-cal { display: flex; flex-direction: column; gap: 10px; }
.kp-cal-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted, var(--text)); flex: 1; }
.kp-cal-field input, .kp-cal-field select, .kp-cal-field textarea { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font: inherit; font-size: 13.5px; }
.kp-cal-row { display: flex; gap: 10px; }
.kp-cal-note { margin: 0; font-size: 12.5px; color: var(--primary); }
.kp-cal-help { margin: 0; font-size: 12px; color: var(--text-muted, var(--text)); }
@media (max-width: 900px) {
  .kp-mailbox-select { max-width: 140px; }
  .kp-cal-row { flex-direction: column; }
}
.add-account-who { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted, var(--text)); }