/* Blod Bolge Premium overlay for Email.
   Loaded last from robots/email/index.html. */

:root {
  --bb-cream: #FAF7F3;
  --bb-lavender: #F0EAE4;
  --bb-white: #FFFEFB;
  --bb-warm-text: #5C4D43;
  --bb-warm-text-light: #8A7E72;
  --bb-muted: #B8A898;
  --bb-divider: #E4DCD4;
  --bb-rose: #D4A89A;
  --bb-rose-dark: #9B6050;
  --bb-rose-light: #F4E8E2;
  --bb-rose-bg: #FBF3F0;
  --bb-sage: #A8C5B8;
  --bb-sage-dark: #4A7A68;
  --bb-sage-light: #E0EDE6;
  --bb-sage-bg: #F2F8F5;
  --bb-sage-text: #3D6B57;
  --bb-slate: #A8B0C4;
  --bb-slate-light: #E0E4EE;
  --bb-card-shadow: 0 1px 2px rgba(92,77,67,0.06), 0 4px 16px rgba(92,77,67,0.05), 0 12px 40px rgba(92,77,67,0.03), inset 0 1px 0 rgba(255,255,255,0.5);
  --bb-card-shadow-hover: 0 2px 4px rgba(92,77,67,0.08), 0 8px 28px rgba(92,77,67,0.08), 0 16px 48px rgba(92,77,67,0.04), inset 0 1px 0 rgba(255,255,255,0.6);

  --font-size-4xl: 24px;
  --font-size-5xl: 28px;
  --font-size-6xl: 30px;
  --font-size-8xl: 40px;
}

.email-page {
  background: linear-gradient(180deg, #FAF7F3 0%, var(--pill-bg, #F0EAE4) 100%) !important;
  overflow: hidden !important;
}

.email-page.app-layout {
  position: relative !important;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 74% 18%, rgba(212, 168, 154, 0.055) 0%, transparent 48%),
    radial-gradient(ellipse at 22% 86%, rgba(168, 197, 184, 0.045) 0%, transparent 48%),
    linear-gradient(180deg, #FAF7F3 0%, var(--pill-bg, #F0EAE4) 100%) !important;
}

.email-page.app-layout::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
}

html:has(body.email-page) {
  overflow: hidden !important;
}

html:has(.email-page),
body:has(.email-page) {
  overflow: hidden !important;
}

.email-page .main-content {
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.email-page .email-app {
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  --email-compose-cta: var(--bb-sage-dark);
  --email-compose-cta-hover: #3D6B57;
  --email-active-mark: var(--bb-sage);
  --email-unread-mark: var(--bb-rose);
  --sk-accent: var(--bb-sage-dark);
  --sk-accent-bg: rgba(168, 197, 184, 0.1);
  --sk-accent-bg-medium: var(--bb-sage-bg);
  /* Warm re-tokenisation for the WHOLE app (craft-pass 17/7). The shell's global
     tokens are cool slate (assets/css/variables.css: #384551/#646e78) and leaked
     into every component that reads --sk-text* / --sk-border — the page was warm
     only where literals had been hand-placed. Real literals here (the settings
     modal's var(--color-text-primary, …) fallbacks never fire — the globals ARE
     defined) finish the transplant. Dark twin below. */
  --sk-text: #3A2F26;
  --sk-text-secondary: #6B5F55;
  --sk-text-tertiary: #B8A898;
  --sk-text-muted: #B8A898;
  --sk-border: rgba(228, 220, 212, 0.72);
  --sk-border-medium: rgba(228, 220, 212, 0.72);
}

/* warm shadow lane, LIGHT only — any component reading --shadow-*/--sk-shadow*
   was casting the shell's cool-slate rgba(34,48,62) shade onto the cream page.
   Dark keeps the global dark shadows untouched. */
html:not([data-theme="dark"]) .email-page .email-app {
  --shadow-card: 0 3px 8px rgba(71, 52, 45, 0.09);
  --shadow-popup: 0 4px 16px rgba(71, 52, 45, 0.13);
  --shadow-bubble: 0 1px 2px rgba(71, 52, 45, 0.06);
}

[data-theme="dark"] .email-page .email-app {
  --sk-text: #F2ECE4;
  --sk-text-secondary: #C8BEB2;
  --sk-text-tertiary: #9A8E82;
  --sk-text-muted: #9A8E82;
  --sk-border: rgba(232, 224, 216, 0.10);
  --sk-border-medium: rgba(232, 224, 216, 0.10);
}

/* Settings modal is mounted at the email shell level so the backdrop also dims the shared sidebar. */
.email-page:has(> .email-settings-modal) {
  z-index: 9200 !important;
}

.email-page > .email-settings-modal {
  --sk-bg-surface: var(--color-card, var(--bb-white));
  --sk-bg-secondary: var(--color-bg, var(--bb-cream));
  --sk-bg-subtle: rgba(250, 247, 243, 0.72);
  --sk-bg-hover: rgba(168, 197, 184, 0.10);
  --sk-border: var(--color-border, rgba(228, 220, 212, 0.72));
  --sk-text: var(--color-text-primary, var(--bb-warm-text));
  --sk-text-secondary: var(--color-text-secondary, var(--bb-warm-text-light));
  --sk-text-tertiary: var(--color-text-tertiary, var(--bb-muted));
  --sk-accent: var(--bb-sage-dark);
  --sk-accent-bg: rgba(168, 197, 184, 0.10);
  z-index: 9200 !important;
}

.email-page > .email-settings-modal .email-settings-backdrop {
  background: rgba(20, 18, 15, 0.42) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal {
  --sk-bg-surface: rgba(42, 38, 34, 0.98);
  --sk-bg-secondary: rgba(35, 31, 27, 0.92);
  --sk-bg-subtle: rgba(168, 197, 184, 0.06);
  --sk-bg-hover: rgba(168, 197, 184, 0.08);
  --sk-border: rgba(232, 224, 216, 0.10);
  --sk-text: #E8DDD4;
  --sk-text-secondary: #B8ACA3;
  --sk-text-tertiary: rgba(232, 221, 212, 0.45);
  --sk-accent: var(--bb-sage, #A8C5B8);
  --sk-accent-bg: rgba(168, 197, 184, 0.08);
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-backdrop {
  background: rgba(10, 9, 8, 0.56) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.email-page .chat-lang-picker,
.email-page .chat-lang-list,
.email-page .chat-lang-option,
body:has(.email-page) .chat-lang-picker,
body:has(.email-page) .chat-lang-list,
body:has(.email-page) .chat-lang-option {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.bb-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bb-arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
}

.bb-arc-rose-1 {
  width: 400px;
  height: 400px;
  top: -180px;
  right: -120px;
  border-color: rgba(212,168,154,0.12);
}

.bb-arc-rose-2 {
  width: 260px;
  height: 260px;
  top: -90px;
  right: -50px;
  border-color: rgba(212,168,154,0.07);
}

.bb-arc-sage-1 {
  width: 350px;
  height: 350px;
  bottom: -150px;
  left: -100px;
  border-color: rgba(168,197,184,0.12);
}

.bb-arc-sage-2 {
  width: 200px;
  height: 200px;
  bottom: -80px;
  left: -40px;
  border-color: rgba(168,197,184,0.07);
}

.email-page .email-columns {
  position: relative !important;
  z-index: 1 !important;
}

/* Folder panel */
.email-page .email-folders {
  background: rgba(255, 254, 251, 0.7) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-right: none !important;
  position: relative !important;
}

.email-page .email-folders::after {
  content: '';
  position: absolute;
  right: 0;
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(228, 220, 212, 0.4) 25%, rgba(228, 220, 212, 0.4) 75%, transparent);
}

.email-page .email-folders .email-compose-btn,
.email-page .email-folders .btn-primary {
  background: var(--bb-sage-dark) !important;
  color: var(--bb-white) !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 12px rgba(92, 77, 67, 0.15) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
}

.email-page .email-folders .email-compose-btn:hover,
.email-page .email-folders .btn-primary:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(92, 77, 67, 0.2) !important;
}

.email-page .email-folder-label,
.email-page .email-folder-section,
.email-page .email-rail-heading,
.email-page .email-folders h3,
.email-page .email-folders .folder-section-label {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  color: var(--bb-warm-text-light) !important;
  padding: 16px 16px 6px !important;
}

.email-page .email-folder-item,
.email-page [data-email-folder],
.email-page [data-folder] {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  margin: 1px 8px !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.email-page .email-folder-item:hover,
.email-page [data-email-folder]:hover,
.email-page [data-folder]:hover {
  background: rgba(168, 197, 184, 0.08) !important;
}

.email-page .email-folder-item.active,
.email-page [data-email-folder].active,
.email-page [data-folder].active {
  background: var(--bb-sage-bg) !important;
  color: var(--bb-sage-dark) !important;
  font-weight: 500 !important;
}

.email-page .email-folder-item.active svg,
.email-page [data-email-folder].active svg,
.email-page [data-folder].active svg {
  color: var(--bb-sage-dark) !important;
}

.email-page .email-folder-item svg,
.email-page [data-email-folder] svg,
.email-page [data-folder] svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8 !important;
  color: var(--bb-warm-text-light) !important;
  flex-shrink: 0 !important;
}

.email-page .email-folder-badge,
.email-page .email-folder-count,
.email-page .folder-count {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  background: var(--bb-sage) !important;
  color: var(--bb-white) !important;
  border-radius: 10px !important;
  padding: 2px 8px !important;
  margin-left: auto !important;
  min-width: 20px !important;
  text-align: center !important;
}

.email-page .email-folder-add,
.email-page .email-labels-add-btn,
.email-page .new-label-btn {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
  transition: color 0.15s ease !important;
}

.email-page .email-folder-add:hover,
.email-page .email-labels-add-btn:hover,
.email-page .new-label-btn:hover {
  color: var(--bb-sage-dark) !important;
}

/* Email list */
.email-page .email-list {
  background: transparent !important;
  border-right: none !important;
  position: relative !important;
}

.email-page .email-list::after {
  content: '';
  position: absolute;
  right: 0;
  top: 3%;
  bottom: 3%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(228, 220, 212, 0.4) 20%, rgba(228, 220, 212, 0.4) 80%, transparent);
  z-index: 2;
  pointer-events: none;
}

.email-page .email-list-items {
  background: transparent !important;
}

/* Empty list states */
.email-page .email-list-state,
.email-page .email-list-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: min(420px, calc(100% - 32px)) !important;
  min-height: min(360px, calc(100vh - 190px)) !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
}

.email-page .email-list-state-icon,
.email-page .email-list-empty-icon {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  flex: 0 0 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 14px !important;
  border-radius: 18px !important;
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-sage-dark, #4A7A68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
  opacity: 1 !important;
  overflow: hidden !important;
  font-size: var(--font-size-5xl) !important;
  line-height: 1 !important;
}

.email-page .email-list-state-icon svg,
.email-page .email-list-empty-icon svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  display: block !important;
  color: currentColor !important;
}

.email-page .email-list-state-title,
.email-page .email-list-empty-title {
  max-width: 100% !important;
  margin: 0 0 6px !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 500 !important;
  color: var(--bb-warm-text, #5C4D43) !important;
}

.email-page .email-list-state-copy,
.email-page .email-list-state-note,
.email-page .email-list-empty-sub {
  max-width: 100% !important;
  margin: 0 !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.5 !important;
  color: var(--bb-warm-text-light, #8A7E72) !important;
}

.email-page .email-list-state-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.email-page .email-state-action {
  min-height: 44px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(168, 197, 184, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(168, 197, 184, 0.08) !important;
  color: var(--bb-sage-dark, #4A7A68) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
}

.email-page .email-state-action.primary {
  background: var(--bb-sage-dark, #4A7A68) !important;
  border-color: var(--bb-sage-dark, #4A7A68) !important;
  color: var(--bb-white, #FFFEFB) !important;
}

.email-page .email-list-header {
  padding: 16px 20px 8px !important;
  background: transparent !important;
  border: none !important;
}

.email-page .email-list-header h2,
.email-page .email-list-header .folder-name,
.email-page .email-list-title {
  font-family: var(--font-family) !important;
  font-size: var(--text-h1, 32px) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-list-header .message-count,
.email-page .email-list-count {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page .email-date-header,
.email-page .email-section-header,
.email-page .email-list-section-header,
.email-page .email-list-time-group {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  color: var(--bb-warm-text-light) !important;
  padding: 16px 20px 6px !important;
  background: transparent !important;
  border: none !important;
}

.email-page .email-row,
.email-page .email-message-item,
.email-page [data-email-id] {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(228, 220, 212, 0.25) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  position: relative !important;
  background: transparent !important;
}

.email-page .email-row:hover,
.email-page .email-message-item:hover,
.email-page [data-email-id]:hover {
  background: rgba(255, 254, 251, 0.6) !important;
}

.email-page .email-row.active,
.email-page .email-row.selected,
.email-page .email-message-item.active,
.email-page .email-message-item.selected,
.email-page [data-email-id].active {
  background: rgba(168, 197, 184, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

.email-page .email-row.active:hover,
.email-page .email-row.selected:hover,
.email-page .email-message-item.active:hover,
.email-page .email-message-item.selected:hover,
.email-page [data-email-id].active:hover {
  background: rgba(168, 197, 184, 0.14) !important;
  border-left: none !important;
  box-shadow: none !important;
}

.email-page .email-row.unread::before,
.email-page .email-message-item.unread::before {
  content: none !important;
}

.email-page .email-unread-dot {
  content: '' !important;
  display: none !important;
}

.email-page .email-row.unread .email-row-controls::before,
.email-page .email-message-item.unread .email-row-controls::before,
.email-page .email-dense-row.unread .email-row-controls::before {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--bb-sage) !important;
  transform: translateY(-50%) !important;
}

.email-page .email-star,
.email-page .email-message-star {
  color: var(--bb-muted) !important;
  transition: color 0.15s ease !important;
}

.email-page .email-star:hover,
.email-page .email-message-star:hover {
  color: var(--bb-warm-text) !important;
}

.email-page .email-star.starred,
.email-page .email-star.active,
.email-page .email-message-star.starred {
  color: var(--bb-warm-text) !important;
  fill: var(--bb-warm-text) !important;
}

.email-page .email-sender,
.email-page .email-msg-sender,
.email-page .email-message-sender,
.email-page .email-sender-name {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-row.unread .email-sender,
.email-page .email-message-item.unread .email-message-sender,
.email-page .email-message-item.unread .email-sender-name {
  font-weight: 600 !important;
}

.email-page .email-badge,
.email-page .email-count-badge,
.email-page .email-thread-badge {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  background: var(--bb-sage) !important;
  color: var(--bb-white) !important;
  border-radius: 8px !important;
  padding: 1px 6px !important;
  min-width: 16px !important;
  text-align: center !important;
  border: none !important;
}

.email-page .email-subject,
.email-page .email-msg-subject,
.email-page .email-message-subject {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-row.unread .email-subject,
.email-page .email-message-item.unread .email-message-subject {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
}

.email-page .email-preview,
.email-page .email-snippet,
.email-page .email-msg-preview,
.email-page .email-message-snippet {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text-light) !important;
  line-height: 1.4 !important;
}

.email-page .email-date,
.email-page .email-time,
.email-page .email-msg-time,
.email-page .email-message-time {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page .email-row[data-category="personal"],
.email-page .email-row[data-category="email"] {
  border-left: 3px solid var(--bb-sage) !important;
}

.email-page .email-row[data-category="urgent"],
.email-page .email-row[data-category="flagged"],
.email-page .email-message-item.urgent {
  border-left: 3px solid var(--bb-rose) !important;
}

.email-page .email-row[data-category="newsletter"],
.email-page .email-row[data-category="notification"] {
  border-left: 3px solid var(--bb-slate) !important;
}

/* Keep Gmail-style dense list compact; avatar styling is reader-only. */
.email-page .email-list .email-dense-row {
  min-height: 56px !important;
  padding: 6px 12px 6px 8px !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 92px !important;
    min-height: 48px !important;
    padding: 0 12px 0 8px !important;
    gap: 8px !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row .email-message-avatar,
  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row .email-avatar-stack {
    display: none !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row .email-message-content {
    display: grid !important;
    grid-template-columns: clamp(150px, 23%, 240px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row .email-message-sender {
    grid-column: 1 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row .email-message-line {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list .email-dense-row .email-message-meta {
    grid-column: 3 !important;
  }
}

@media (min-width: 1200px) {
  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-dense-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 58px !important;
    min-height: 54px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-dense-row .email-message-avatar,
  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-dense-row .email-avatar-stack {
    display: none !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-dense-row .email-message-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
}

.email-page .email-dense-row .email-message-subject,
.email-page .email-dense-row .email-message-snippet,
.email-page .email-dense-row .email-sender-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Reading pane */
.email-page .email-reader {
  background: rgba(255, 254, 251, 0.5) !important;
  position: relative !important;
}

.email-page .email-reader-empty {
  color: var(--bb-warm-text-light) !important;
}

.email-page .email-reader-empty svg {
  color: var(--bb-muted) !important;
  opacity: 0.5 !important;
}

.email-page .email-reader-empty p {
  font-family: var(--font-family) !important;
  font-style: italic !important;
  font-size: var(--font-size-base) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page .email-reader-header {
  padding: 24px 20px 16px !important;
  border-bottom: none !important;
  background: transparent !important;
}

.email-page .email-sender-avatar,
.email-page .email-reader-header .email-message-avatar,
.email-page .email-thread-sender .email-message-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.12) !important;
}

.email-page .email-reader-sender-name,
.email-page .email-reader-from strong {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 500 !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-reader-sender-email,
.email-page .email-reader-email,
.email-page .email-reader-to,
.email-page .email-reader-date {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page .email-reader-actions button,
.email-page .email-action-btn {
  color: var(--bb-warm-text-light) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  transition: all 0.15s ease !important;
}

.email-page .email-reader-actions button:hover,
.email-page .email-action-btn:hover {
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-warm-text) !important;
}

/* --- WU2: AI summary trigger button in header --- */

.email-page .email-ai-summary-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--bb-sage-dark) !important;
  cursor: pointer !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.email-page .email-ai-summary-trigger:hover {
  background: rgba(168, 197, 184, 0.12) !important;
  color: var(--bb-sage-dark) !important;
}

.email-page .email-ai-summary-trigger.is-active {
  background: rgba(168, 197, 184, 0.18) !important;
  color: var(--bb-sage-dark) !important;
}

.email-page .email-reader-body {
  padding: 0 32px 24px !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.5 !important;
  color: var(--bb-warm-text) !important;
}

/* Ask Sofia side panel */
.email-page .email-columns > .ask-ai-panel {
  background: #FFFEFB !important;
  background-image: none !important;
  border-left: 1px solid rgba(228, 220, 212, 0.45) !important;
  box-shadow: -12px 0 32px rgba(92, 77, 67, 0.06) !important;
  color: var(--bb-warm-text) !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin-left: 12px;
}

.email-page .ask-ai-header {
  background: #FFFEFB !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(228, 220, 212, 0.55) !important;
}

.email-page .ask-ai-header span,
.email-page .ask-ai-context-title {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  letter-spacing: 0 !important;
}

.email-page .ask-ai-trust-line,
.email-page .ask-ai-context-kicker,
.email-page .ask-ai-quick-title {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page .ask-ai-context,
.email-page .ask-ai-quick-actions,
.email-page .ask-ai-messages {
  background: transparent !important;
  border-color: rgba(228, 220, 212, 0.3) !important;
}

.email-page .ask-ai-context-chip,
.email-page .ask-ai-context-meta span {
  background: var(--bb-sage-bg) !important;
  color: var(--bb-sage-dark) !important;
}

.email-page .ask-ai-suggestion,
.email-page .ask-ai-quick-action {
  /* Solid white, visible border, real shadow: the 82%-alpha pills melted into
     the tinted panel and stopped reading as clickable (Morten 2026-07-02). */
  border: 1px solid rgba(168, 197, 184, 0.5) !important;
  background: #FFFFFF !important;
  color: var(--bb-warm-text) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(92, 77, 67, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.email-page .ask-ai-suggestion:hover,
.email-page .ask-ai-quick-action:hover:not(:disabled) {
  background: var(--bb-sage-bg) !important;
  border-color: var(--bb-sage) !important;
  color: var(--bb-sage-dark) !important;
}

.email-page .ask-ai-suggestion.is-loading {
  pointer-events: none !important;
  opacity: 0.72 !important;
}

.email-page .ask-ai-suggestion.is-loading svg {
  animation: bb-sofia-pulse 1.2s ease-in-out infinite;
}

.email-page .ask-ai-suggestion--primary {
  background: var(--bb-sage-dark, #4A7A68) !important;
  border-color: var(--bb-sage-dark, #4A7A68) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.email-page .ask-ai-suggestion--primary:hover {
  background: var(--bb-sage-text, #3D6B57) !important;
  border-color: var(--bb-sage-text, #3D6B57) !important;
  color: #fff !important;
}

.email-page .ask-ai-suggestion--primary svg {
  color: rgba(255, 255, 255, 0.85) !important;
}

.email-page .ask-ai-suggestion svg,
.email-page .ask-ai-quick-action svg {
  color: var(--bb-sage-dark) !important;
}

.email-page .ask-ai-panel .ask-ai-input-row {
  background: #FBF8F2 !important;
  background-image: none !important;
  border: none !important;
  border-top: 1px solid rgba(228, 220, 212, 0.55) !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 10px 14px 14px !important;
  box-shadow: none !important;
}

.email-page .ask-ai-panel .ask-ai-input {
  font-family: var(--font-family) !important;
  font-style: normal !important;
  color: var(--bb-warm-text) !important;
}

.email-page .ask-ai-panel .ask-ai-input::placeholder {
  color: var(--bb-muted) !important;
  font-style: normal !important;
}

.email-page .ask-ai-panel .ask-ai-send {
  background: var(--bb-sage-dark) !important;
  color: var(--bb-white) !important;
  box-shadow: none !important;
}

.email-page .email-chips-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
}

/* -- Individual chip: premium pill -- */
.email-page .email-chip {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
  color: var(--bb-sage-dark, #4A7A68) !important;
  background: rgba(168, 197, 184, 0.07) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(168, 197, 184, 0.22) !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  min-height: 44px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease !important;
  max-width: 280px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  animation: chipIn 0.2s ease both !important;
  position: relative !important;
}

.email-page .email-chip:nth-child(1) { animation-delay: 0s !important; }
.email-page .email-chip:nth-child(2) { animation-delay: 0.06s !important; }
.email-page .email-chip:nth-child(3) { animation-delay: 0.12s !important; }

.email-page .email-chip:hover {
  background: rgba(168, 197, 184, 0.14) !important;
  border-color: rgba(168, 197, 184, 0.40) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.email-page .email-chip:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition-duration: 0.06s !important;
}

.email-page .email-chip:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.email-page .email-chip.email-chip-generating {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.email-page .email-chip.email-chip-generating::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 8px !important;
  right: 8px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--bb-sage, #A8C5B8), transparent) !important;
  background-size: 200% 100% !important;
  animation: email-shimmer 1.2s ease infinite !important;
  border-radius: 0 0 999px 999px !important;
}

.email-page .email-reply-draft.email-chip-generating {
  position: relative !important;
  overflow: hidden !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

.email-page .email-reply-draft.email-chip-generating::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 8px !important;
  right: 8px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--bb-sage, #A8C5B8), transparent) !important;
  background-size: 200% 100% !important;
  animation: email-shimmer 1.2s ease infinite !important;
  border-radius: 0 0 999px 999px !important;
}

.email-page .email-chip.email-chip-loading {
  opacity: 0.35 !important;
  pointer-events: none !important;
  min-width: 110px !important;
  background: rgba(168, 197, 184, 0.05) !important;
  border-color: rgba(168, 197, 184, 0.12) !important;
}

@keyframes chipIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.email-page .email-reply-bar,
.email-page .email-reader-reply {
  padding: 12px 32px 20px !important;
  border-top: 1px solid rgba(228, 220, 212, 0.3) !important;
}

.email-page .email-reply-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 254, 251, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(228, 220, 212, 0.5) !important;
  border-radius: 22px !important;
  padding: 6px 6px 6px 16px !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.2s ease !important;
}

.email-page .email-reply-input-wrap:hover {
  border-color: rgba(228, 220, 212, 0.8) !important;
}

.email-page .email-reply-input-wrap:focus-within {
  border-color: var(--reply-pill-border-focus, rgba(92, 77, 67, 0.55)) !important;
  box-shadow: var(--reply-pill-shadow-focus, 0 0 0 2px rgba(92, 77, 67, 0.08), 0 1px 2px rgba(58, 47, 38, 0.05)) !important;
}

.email-page .email-reply-icon {
  color: var(--bb-warm-text-light) !important;
  flex-shrink: 0 !important;
}

.email-page .email-reply-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font-family) !important;
  font-size: var(--reply-input-size, 16px) !important;
  font-style: normal !important;
  color: var(--bb-warm-text) !important;
  outline: none !important;
}

.email-page .email-reply-input::placeholder {
  color: var(--bb-muted) !important;
  font-style: normal !important;
}

.email-page .email-reply-mic {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  background: transparent !important;
  color: var(--bb-warm-text-light) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.email-page .email-reply-mic:hover {
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-reply-send {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  background: var(--bb-sage-dark) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(92, 77, 67, 0.15) !important;
  transition: all 0.2s ease !important;
}

.email-page .email-reply-send:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(92, 77, 67, 0.2) !important;
}

.email-page .email-reply-send svg {
  color: white !important;
  stroke: white !important;
}

.email-page .email-reply-draft {
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--sk-border, rgba(228,220,212,0.72)) !important;
  background: transparent !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: var(--font-size-sm, 13px) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  color: var(--sk-text-secondary, #6B5E54) !important;
  white-space: nowrap !important;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease !important;
  flex-shrink: 0 !important;
}

.email-page .email-reply-draft:hover {
  background: var(--sk-bg-hover, rgba(0,0,0,0.04)) !important;
  border-color: var(--sk-text-tertiary) !important;
  color: var(--sk-text) !important;
}

.email-page .email-reply-hint-row {
  display: none !important;
}

/* Compose dialog */
.email-page .email-compose-overlay {
  background: rgba(250, 247, 243, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.email-page .email-compose-dialog {
  background: var(--bb-white) !important;
  border: 1px solid rgba(228, 220, 212, 0.4) !important;
  border-radius: var(--radius-card, 18px) !important;
  box-shadow: 0 4px 16px rgba(92, 77, 67, 0.08), 0 16px 48px rgba(92, 77, 67, 0.06), 0 32px 80px rgba(92, 77, 67, 0.04) !important;
  overflow: hidden !important;
}

.email-page .bb-compose-main {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-direction: column !important;
}

.email-page .email-compose-dialog.with-sofia {
  display: flex !important;
  flex-direction: row !important;
  width: min(980px, calc(100vw - 44px)) !important;
  max-width: calc(100vw - 44px) !important;
}

.email-page .email-compose-dialog.with-sofia .bb-compose-main {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
}

.email-page .email-compose-titlebar {
  background: rgba(255, 254, 251, 0.9) !important;
  border-bottom: 1px solid rgba(228, 220, 212, 0.3) !important;
  border-radius: var(--radius-card, 18px) var(--radius-card, 18px) 0 0 !important;
  padding: 12px 20px !important;
}

.email-page .email-compose-dialog.with-sofia .email-compose-titlebar {
  border-radius: var(--radius-card, 18px) 0 0 0 !important;
}

.email-page .email-compose-title {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 500 !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-compose-window-btn {
  color: var(--bb-warm-text-light) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.email-page .email-compose-window-btn:hover {
  background: rgba(212, 168, 154, 0.1) !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-compose-close {
  color: var(--bb-warm-text-light) !important;
  transition: color 0.15s ease !important;
}

.email-page .email-compose-close:hover {
  color: var(--bb-rose-dark) !important;
}

.email-page .email-compose-field {
  border-bottom: 1px solid rgba(228, 220, 212, 0.3) !important;
  padding: 8px 20px !important;
}

.email-page .email-compose-field label {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  color: var(--bb-warm-text-light) !important;
  min-width: 40px !important;
}

.email-page .email-compose-field input,
.email-page .chip-input-typing {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-compose-subject-row input,
.email-page #email-compose-subject {
  font-size: max(16px, var(--font-size-md)) !important;
}

/* Phones: recipient fields must stay >=16px or iOS Safari zooms the page on
   focus. The compact rule above wins over the email-responsive.css guard by
   load order, so re-apply the same floor the subject row gets. Desktop keeps
   the compact size. */
@media (max-width: 767px) {
  .email-page .email-compose-field input,
  .email-page .chip-input-typing {
    font-size: max(16px, var(--font-size-md)) !important;
  }
}

.email-page .email-compose-field input::placeholder {
  color: var(--bb-muted) !important;
}

.email-page .email-compose-recipient-link {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  color: var(--bb-sage-dark) !important;
  transition: color 0.15s ease !important;
}

.email-page .email-compose-body {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.7 !important;
  color: var(--bb-warm-text) !important;
  padding: 20px !important;
}

.email-page .email-compose-body.email-compose-quill,
.email-page .email-compose-body.ql-container {
  padding: 0 !important;
}

.email-page .email-compose-body[data-placeholder]::before {
  font-family: var(--font-family) !important;
  font-style: italic !important;
  color: var(--bb-muted) !important;
}

.email-page .email-compose-footer {
  border-top: 1px solid rgba(228, 220, 212, 0.3) !important;
  padding: 12px 20px !important;
  background: rgba(255, 254, 251, 0.5) !important;
}

.email-page .email-compose-footer .btn-primary,
.email-page #email-compose-send {
  background: var(--bb-sage-dark) !important;
  color: var(--bb-white) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 8px 20px !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 12px rgba(92, 77, 67, 0.15) !important;
  transition: all 0.2s ease !important;
}

.email-page .email-compose-footer .btn-primary:hover,
.email-page #email-compose-send:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(92, 77, 67, 0.2) !important;
}

.email-page .email-compose-attach,
.email-page .email-compose-discard {
  color: var(--bb-warm-text-light) !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

.email-page .email-compose-attach:hover {
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-warm-text) !important;
}

.email-page .email-compose-discard:hover {
  background: rgba(212, 168, 154, 0.1) !important;
  color: var(--bb-rose-dark) !important;
}

@media (max-width: 767px) {
  .email-page .email-compose-titlebar {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 8px 0 16px !important;
  }

  .email-page .email-compose-field {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
  }

  /* …but NOT the recipient rows. Their chip container wraps to one line per
     recipient, and the hard height above pinned the row at a single 44px line:
     align-items:center then centred a 100px-tall stack of chips on it, so the
     chips bled 28px UP into the titlebar and 28px DOWN over the subject row
     (Mortens telefon, 3 modtagere — the chips visibly left the card).
     Here 44px is a FLOOR, not a cap: the row grows with the chips and pushes
     the rest of the compose down, the way it already does on desktop. */
  .email-page .email-compose-to-row,
  .email-page .email-compose-cc-row,
  .email-page .email-compose-bcc-row {
    height: auto !important;
    min-height: 44px !important;
    align-items: flex-start !important;
    padding-block: 6px !important;
  }

  /* Growth has a ceiling: ~8 recipients is where the list would start pushing the
     subject line and the editor off a phone screen. Past that the chips scroll
     instead of eating the compose window.
     The scroll lives on the CHIP CONTAINER, never on the row: compose.js appends
     the contact autocomplete (.email-autocomplete) into the ROW itself, so a
     clipping/scrolling row would swallow the whole suggestion dropdown. */
  .email-page .email-compose-to-row .chip-input-container,
  .email-page .email-compose-cc-row .chip-input-container,
  .email-page .email-compose-bcc-row .chip-input-container {
    max-height: 30vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Label + Cc/Bcc links ride the FIRST chip line instead of the middle of a
     tall stack (flex-start would otherwise glue them to the very top edge). */
  .email-page .email-compose-to-row > label,
  .email-page .email-compose-cc-row > label,
  .email-page .email-compose-bcc-row > label,
  .email-page .email-compose-to-row .email-compose-recipient-links {
    align-self: flex-start !important;
    line-height: 32px !important;
  }

  /* A chip may never be wider than the space it sits in. The 200px cap is wider
     than the container on a 320-360px phone, so a long address overflowed the
     box horizontally and was clipped mid-word by the container's overflow:hidden. */
  .email-page .chip-input-chip {
    max-width: 100% !important;
  }

  .email-page .email-compose-footer {
    min-height: 64px !important;
    padding: 10px 16px !important;
  }

  .email-page .email-compose-footer {
    gap: 8px !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: #FFFEFB !important;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08) !important;
  }

  .email-page .email-compose-footer .btn-primary,
  .email-page #email-compose-send {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 22px !important;
    border-radius: var(--radius-sm) !important;
    background: #6E8A7E !important;
    border: none !important;
    color: #fff !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .email-page .email-compose-footer .btn-primary:hover,
  .email-page #email-compose-send:hover {
    background: #6E8A7E !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .email-page .email-compose-attach,
  .email-page .email-compose-dictate {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: var(--radius-sm) !important;
    background: #fff !important;
    color: var(--sk-text-secondary) !important;
  }

  .email-page .email-compose-dictate.is-recording,
  .email-page .email-compose-dictate.ss-mic--connecting,
  .email-page .email-compose-dictate.ss-mic--listening {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.40) !important;
    color: #ef4444 !important;
  }

  /* ── Dark-mode mobile compose footer icon buttons (#2551) ── */
  [data-theme="dark"] .email-page .email-compose-attach,
  [data-theme="dark"] .email-page .email-compose-dictate {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--sk-text-secondary) !important;
  }

  [data-theme="dark"] .email-page .email-compose-dictate.is-recording,
  [data-theme="dark"] .email-page .email-compose-dictate.ss-mic--connecting,
  [data-theme="dark"] .email-page .email-compose-dictate.ss-mic--listening {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.50) !important;
    color: #ef4444 !important;
  }
}

.email-page .email-compose-autosave,
.email-page .compose-autosave,
.email-page .email-draft-saved {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  color: var(--bb-warm-text-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Compose Sofia panel */
.bb-compose-sofia {
  width: 320px;
  background: linear-gradient(180deg, rgba(255,254,251,0.92) 0%, rgba(242,248,245,0.7) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(228, 220, 212, 0.3);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: -340px;
  top: 0;
  bottom: 0;
  border-radius: 0 22px 22px 0;
  box-shadow: 4px 0 24px rgba(92, 77, 67, 0.04);
  z-index: 10;
}

.email-compose-dialog.with-sofia .bb-compose-sofia {
  position: relative;
  right: auto;
}

.bb-compose-sofia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 7px 14px;
}

.bb-compose-sofia-header .bb-sofia-avatar {
  display: none;
}

.bb-compose-sofia-header .bb-sofia-avatar span {
  font-family: inherit;
  display: none;
}

.bb-compose-sofia-header .bb-sofia-name {
  font-family: inherit;
  display: none;
}

.bb-compose-sofia-actions {
  display: flex;
  gap: 4px;
}

.bb-compose-sofia-actions button {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--bb-warm-text-light);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.bb-compose-sofia-actions button:hover {
  background: rgba(228, 220, 212, 0.3);
  color: var(--bb-warm-text);
}

.bb-compose-sofia-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bb-compose-sofia-subtitle {
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--bb-warm-text-light);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.bb-compose-sofia-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.bb-compose-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 254, 251, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(228, 220, 212, 0.4);
  border-radius: var(--radius-card, 18px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.bb-compose-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(92, 77, 67, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-color: rgba(168, 197, 184, 0.3);
}

.bb-compose-action-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-compose-action-icon--sage {
  background: var(--bb-sage-light);
  color: var(--bb-sage-dark);
}

.bb-compose-action-icon--rose {
  background: var(--bb-rose-light);
  color: var(--bb-rose-dark);
}

.bb-compose-action-icon--slate {
  background: var(--bb-slate-light);
  color: #4E5370;
}

.bb-compose-action-title {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--bb-warm-text);
  display: block;
}

.bb-compose-action-desc {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--bb-warm-text-light);
  display: block;
  margin-top: 2px;
}

.bb-compose-sofia-tip {
  background: rgba(168, 197, 184, 0.08);
  border: 1px solid rgba(168, 197, 184, 0.15);
  border-radius: var(--radius-card, 18px);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.bb-compose-sofia-tip-icon {
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--bb-sage-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.bb-compose-sofia-tip-icon svg {
  color: var(--bb-sage);
}

.bb-compose-sofia-tip p {
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--bb-warm-text);
  margin: 0;
  line-height: 1.5;
}

.bb-compose-sofia-tip-leaf {
  position: absolute;
  bottom: -5px;
  right: -5px;
  opacity: 0.7;
  pointer-events: none;
}

.email-page .bb-compose-sofia-body--writer {
  gap: 12px;
}

.email-page .bb-sofia-context-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(228, 220, 212, 0.72);
  border-radius: 14px;
  background: rgba(255, 254, 251, 0.78);
}

.email-page .bb-sofia-context-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: #6E8A7E;
  box-shadow: 0 0 0 4px rgba(168, 197, 184, 0.18);
  flex: 0 0 9px;
}

.email-page .bb-sofia-context-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-page .bb-sofia-context-copy strong {
  color: #3A2F26;
  font: 650 13.5px/1.25 var(--font-family);
}

.email-page .bb-sofia-context-copy span {
  color: #8A7E72;
  font: 400 12.5px/1.35 var(--font-family);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-page .bb-sofia-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 112px;
  max-height: min(330px, 42vh);
  overflow-y: auto;
  padding: 2px 2px 4px;
}

.email-page .bb-sofia-chat-msg {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.email-page .bb-sofia-chat-msg--user {
  grid-template-columns: minmax(0, 1fr) 26px;
}

.email-page .bb-sofia-chat-msg--user .bb-sofia-chat-avatar {
  grid-column: 2;
  grid-row: 1;
  background: rgba(92, 77, 67, 0.08);
  color: #5C4D43;
}

.email-page .bb-sofia-chat-msg--user .bb-sofia-chat-bubble {
  grid-column: 1;
  justify-self: end;
  background: rgba(168, 197, 184, 0.18);
  border-color: rgba(168, 197, 184, 0.42);
}

.email-page .bb-sofia-chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6E8A7E 0%, #5F7C70 100%);
  color: #FFFEFB;
  font: 700 11px/1 var(--font-family);
}

.email-page .bb-sofia-chat-bubble {
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(228, 220, 212, 0.72);
  border-radius: 14px;
  background: #FFFEFB;
  color: #5C4D43;
  box-shadow: 0 1px 2px rgba(92, 77, 67, 0.04);
}

.email-page .bb-sofia-chat-content {
  font: 400 13.5px/1.45 var(--font-family);
  overflow-wrap: anywhere;
}

.email-page .bb-sofia-chat-msg.is-quiet .bb-sofia-chat-bubble {
  background: rgba(251, 248, 242, 0.82);
  box-shadow: none;
}

.email-page .bb-sofia-chat-msg.is-loading .bb-sofia-chat-content::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-left: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110, 138, 126, 0.18), rgba(110, 138, 126, 0.68), rgba(110, 138, 126, 0.18));
  animation: bb-sofia-thinking 900ms ease-in-out infinite;
}

@keyframes bb-sofia-thinking {
  0%, 100% { opacity: 0.35; transform: translateY(-1px); }
  50% { opacity: 1; transform: translateY(0); }
}

.email-page .bb-sofia-result-headline,
.email-page .bb-sofia-result-preview {
  margin: 0;
}

.email-page .bb-sofia-result-headline {
  color: #3A2F26;
  font-weight: 650;
}

.email-page .bb-sofia-result-preview {
  margin-top: 6px;
  color: #8A7E72;
}

.email-page .bb-sofia-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.email-page .bb-sofia-result-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 10px;
  /* Morten 2026-07-02: the refine pills (Kortere / Mere venlig / Ret fejl) were a sage tint on
     cream — invisible as buttons. White with a warm border + whisper of shadow = clearly clickable,
     same surface language as the draft card and the compose window. */
  background: #FFFEFB;
  color: #4A7A68;
  font: 600 13px/1 var(--font-family); /* design panel: join the 12/13 type ramp (was a lone 12.5) */
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

/* Design panel 2026-07-02: the COMMIT button was the only dead control in the panel — no focus
   ring, no press feedback. Ring matches the ask-ai-send convention. */
.email-page .bb-sofia-result-actions button:focus-visible {
  outline: 2px solid #6e8a7e;
  outline-offset: 2px;
}

.email-page .bb-sofia-result-actions .bb-sofia-result-primary:active {
  transform: scale(0.97);
}

.email-page .bb-sofia-result-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.email-page .bb-sofia-result-actions .bb-sofia-result-primary {
  border-color: #4A7A68;
  background: #4A7A68;
  color: #FFFEFB;
}

.email-page .bb-sofia-result-actions button:hover {
  background: rgba(168, 197, 184, 0.2);
}

.email-page .bb-sofia-result-actions .bb-sofia-result-primary:hover {
  background: #3D6B59;
}

.email-page .bb-sofia-result-primary--full {
  width: 100%;
  min-height: 38px;
  font-size: var(--font-size-sm);
  border-radius: 12px;
}

.email-page .bb-sofia-result-actions--card {
  flex-direction: column;
  align-items: stretch;
}

.email-page .bb-sofia-result-secondary {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 2px;
}

.email-page .bb-sofia-link-btn {
  background: none;
  border: none;
  padding: 10px 6px; /* design panel: ~40px tap target (was 4px 2px ⇒ 20px — below the calm floor) */
  color: #786C60;    /* design panel: was #8A7E72 = 3.73:1 (AA fail at 12px); #786C60 = 4.82:1, still warm */
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.email-page .bb-sofia-link-btn:focus-visible {
  outline: 2px solid #6e8a7e;
  outline-offset: 2px;
}

.email-page .bb-sofia-link-btn:hover {
  color: #4A7A68;
  text-decoration-color: currentColor;
}

.email-page .bb-sofia-changes-panel {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(168, 197, 184, 0.08);
  border-radius: 8px;
}

.email-page .bb-sofia-changes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.email-page .bb-sofia-changes-table td {
  padding: 4px 6px;
  vertical-align: top;
}

/* Phrase rows can wrap — a calm divider keeps each change readable. */
.email-page .bb-sofia-changes-table tr + tr td {
  border-top: 1px solid rgba(228, 220, 212, 0.5);
  padding-top: 6px;
}

.email-page .bb-sofia-change-before {
  color: #B5564E;
  text-decoration: line-through;
}

.email-page .bb-sofia-change-arrow {
  color: #8A7E72;
  text-align: center;
  width: 20px;
}

.email-page .bb-sofia-change-after {
  color: #4A7A68;
  font-weight: 600;
}

.email-page .bb-sofia-adjust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.email-page .bb-sofia-adjust-chips[hidden] {
  display: none;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card:has(.bb-sofia-adjust-chips) {
  gap: 6px;
  margin-top: 10px;
  padding: 8px 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(228, 220, 212, 0.55);
  border-radius: 0;
  box-shadow: none;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card [data-sofia-msg-action="adjust-toggle"] {
  display: none;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card [data-sofia-msg-action="adjust-toggle"]::before {
  content: none;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card .bb-sofia-adjust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card .bb-sofia-adjust-chips button {
  min-height: auto;
  padding: 6px 10px;
  font: 500 12.5px/1 Inter, system-ui, sans-serif;
  color: #5C4D43;
  /* Solid white like every other panel pill — cream-on-cream vanished
     (Morten 2026-07-02, round 2). */
  background: #FFFFFF;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(58, 47, 38, 0.07);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card .bb-sofia-adjust-chips button:hover {
  background: rgba(110, 138, 126, 0.10);
  border-color: rgba(110, 138, 126, 0.45);
  color: #4A7A68;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card .bb-sofia-result-secondary {
  order: 2;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(228, 220, 212, 0.55);
  min-block-size: 0;
  line-height: 1;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card [data-sofia-msg-action="undo-draft"] {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: transparent;
  border: none;
  padding: 4px 6px;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  color: #9A8E82;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card [data-sofia-msg-action="undo-draft"]::before {
  content: "\21B6";
  font-size: var(--font-size-sm);
  line-height: 1;
  color: inherit;
  transform: translateY(-0.5px);
}

.ask-ai-msg-ai .bb-sofia-result-actions--card [data-sofia-msg-action="undo-draft"]:hover {
  background: rgba(166, 89, 75, 0.10);
  color: #A6594B;
}

.ask-ai-msg-ai .bb-sofia-result-actions--card .bb-sofia-adjust-chips button:focus-visible,
.ask-ai-msg-ai .bb-sofia-result-actions--card [data-sofia-msg-action="undo-draft"]:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ask-ai-msg-ai .bb-sofia-result-actions--card *,
  .ask-ai-msg-ai .bb-sofia-result-actions--card *::before {
    transition: none !important;
  }
}

/* Design panel 2026-07-02 (Morten): the draft — the panel's actual content — sat on a 94%-
   transparent tint (1.04:1 vs the surround, below perception). Now a real white card in the
   compose window's own language; margin-top 12px restores the heading→card cadence after the
   proposal-flag line was removed. */
.email-page .bb-sofia-draft-proof {
  margin-top: 12px;
  padding: 12px 14px;
  background: #FFFEFB;
  border: 1px solid rgba(228, 220, 212, 0.55);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(58, 47, 38, 0.06);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: #3A2F26;
  overflow-wrap: anywhere;
}

.email-page .bb-sofia-draft-proof--collapsed {
  max-height: 120px;
  overflow: hidden;
  position: relative;
}

.email-page .bb-sofia-draft-proof--collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  /* fade into the card's OWN white — the old sage target painted a faint green band */
  background: linear-gradient(transparent, #FFFEFB);
  border-radius: 0 0 10px 10px;
  pointer-events: none;
}

.email-page .bb-sofia-preview-para {
  margin: 0 0 0.5em;
}

.email-page .bb-sofia-preview-para:last-child {
  margin-bottom: 0;
}

.email-page .bb-sofia-draft-proof-toggle {
  display: block;
  margin-top: 4px;
}

/* Dark twin for the white refine pills (2026-07-02): the WHITE base would glare in dark; the
   canonical dark card value instead. (Draft-proof, primary #6EAE94 and link-btn dark rules
   already exist further down — untouched.) */
[data-theme="dark"] .email-page .bb-sofia-result-actions button {
  background: rgba(42, 38, 34, 0.97);
  border-color: rgba(232, 221, 212, 0.16);
  color: #A8C5B8;
  box-shadow: none;
}

.email-page .bb-sofia-help-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: #5C4D43;
  overflow-wrap: anywhere;
}

.email-page .bb-sofia-help-list li {
  margin-bottom: 4px;
}

/* Sofia messages, suggestions and tone controls */
.bb-sofia-message {
  padding: 12px 16px;
  background: var(--bb-sage-bg);
  border: 1px solid rgba(168, 197, 184, 0.2);
  border-radius: 12px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--bb-sage-text);
  margin-top: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bb-sofia-message--visible {
  opacity: 1;
  transform: translateY(0);
}

.bb-sofia-suggestion {
  margin-top: 16px;
  border: 1px solid rgba(168, 197, 184, 0.3);
  border-radius: var(--radius-card, 18px);
  overflow: hidden;
  background: rgba(255, 254, 251, 0.9);
}

.bb-sofia-suggestion-preview {
  padding: 16px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--bb-warm-text);
  max-height: 200px;
  overflow-y: auto;
}

.bb-sofia-suggestion-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(228, 220, 212, 0.3);
}

.bb-sofia-suggestion-accept,
.bb-sofia-suggestion-dismiss {
  min-height: 44px;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.bb-sofia-suggestion-accept {
  flex: 1;
  padding: 10px;
  border: none;
  background: var(--bb-sage-dark);
  color: var(--bb-white);
  font-weight: 600;
}

.bb-sofia-suggestion-accept:hover {
  background: #3D6B57;
}

.bb-sofia-suggestion-dismiss {
  padding: 10px 16px;
  border: 1px solid rgba(228, 220, 212, 0.5);
  background: transparent;
  color: var(--bb-warm-text-light);
}

.bb-sofia-suggestion-dismiss:hover {
  border-color: var(--bb-warm-text-light);
  color: var(--bb-warm-text);
}

.bb-compose-action-icon.bb-loading {
  animation: bb-sofia-pulse 1.2s ease-in-out infinite;
}

@keyframes bb-sofia-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.bb-compose-action:focus-visible,
.bb-compose-sofia-actions button:focus-visible,
.bb-sofia-suggestion-accept:focus-visible,
.bb-sofia-suggestion-dismiss:focus-visible {
  outline: none;
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  .bb-compose-sofia {
    display: none !important;
  }

  .email-page .email-compose-dialog.with-sofia {
    width: clamp(560px, 42vw, 640px) !important;
  }

  .email-page .email-compose-dialog.with-sofia .bb-compose-main {
    width: 100% !important;
  }
}

.email-page .email-compose.is-minimized .bb-compose-sofia {
  display: none !important;
}

.email-page .email-compose.is-minimized .email-compose-dialog.with-sofia {
  width: min(360px, calc(100vw - 32px)) !important;
  flex-direction: column !important;
}

/* Warm scrollbar */
.email-page .email-list-items::-webkit-scrollbar,
.email-page .email-reader-content::-webkit-scrollbar,
.email-page .email-folders::-webkit-scrollbar,
.email-page .bb-compose-sofia .ask-ai-messages::-webkit-scrollbar {
  width: 6px;
}

.email-page .email-list-items::-webkit-scrollbar-track,
.email-page .email-reader-content::-webkit-scrollbar-track,
.email-page .email-folders::-webkit-scrollbar-track,
.email-page .bb-compose-sofia .ask-ai-messages::-webkit-scrollbar-track {
  background: transparent;
}

.email-page .email-list-items::-webkit-scrollbar-thumb,
.email-page .email-reader-content::-webkit-scrollbar-thumb,
.email-page .email-folders::-webkit-scrollbar-thumb,
.email-page .bb-compose-sofia .ask-ai-messages::-webkit-scrollbar-thumb {
  background: rgba(184, 168, 152, 0.3);
  border-radius: 3px;
}

.email-page .email-list-items::-webkit-scrollbar-thumb:hover,
.email-page .email-reader-content::-webkit-scrollbar-thumb:hover,
.email-page .email-folders::-webkit-scrollbar-thumb:hover,
.email-page .bb-compose-sofia .ask-ai-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 168, 152, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .email-page .email-row:hover,
  .email-page .email-message-item:hover,
  .email-page .bb-compose-action:hover,
  .email-page .email-chip:hover,
  .email-page .email-compose-btn:hover,
  .email-page .email-rail-compose:hover {
    transform: none !important;
    transition: none !important;
  }

  .email-page .email-chip {
    animation: none !important;
  }

  .email-page .bb-compose-action-icon.bb-loading {
    animation: none !important;
  }

  .email-page .bb-sofia-message,
  .email-page .bb-sofia-suggestion-accept,
  .email-page .bb-sofia-suggestion-dismiss {
    transition: none !important;
  }

  .email-page .email-reply-draft.email-chip-generating::after {
    animation: none !important;
    background: var(--bb-sage, #A8C5B8) !important;
    background-size: auto !important;
    opacity: 0.6 !important;
  }
}

.email-page button:focus-visible,
.email-page a:focus-visible,
.email-page input:focus-visible {
  outline: none !important;
  outline-offset: 2px !important;
}

.email-page .email-toolbar-icon-btn:focus-visible {
  outline: 2px solid var(--bb-sage, var(--sk-accent, #4A7A68)) !important;
  outline-offset: 2px !important;
}

/* Dark mode stubs */
[data-theme="dark"] .email-page {
  /* #3225 — consume the shared app dark canvas (assets/css/blod-bolge-shell.css). */
  background: var(--app-dark-canvas) !important;
  --bb-white: #F7F2EA;
  --bb-warm-text: #EDE6DD;
  --bb-warm-text-light: #C9BAAA;
  --bb-muted: #9F9184;
  --bb-divider: rgba(255, 255, 255, 0.12);
  --bb-sage-bg: rgba(74, 122, 104, 0.22);
  --bb-sage-light: rgba(168, 197, 184, 0.22);
  --bb-rose-light: rgba(212, 168, 154, 0.18);
  --bb-sage-dark: #5A9A82;
  --bb-rose-dark: #D4A89A;
  --bb-cream: #2A2420;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page.app-layout {
  background: var(--app-dark-canvas) !important; /* #3225 shared app dark canvas */
}

[data-theme="dark"] .email-page.app-layout::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
}

[data-theme="dark"] .email-page .email-reply-input-wrap {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--bb-warm-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-reply-input,
[data-theme="dark"] .email-page .ask-ai-input {
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-reply-input {
  font-family: var(--font-family) !important;
  font-style: normal !important;
}

[data-theme="dark"] .email-page .email-reply-input::placeholder,
[data-theme="dark"] .email-page .ask-ai-input::placeholder {
  color: var(--bb-muted) !important;
}

[data-theme="dark"] .email-page .bb-sofia-result-headline {
  color: #E8E0D8;
}

[data-theme="dark"] .email-page .bb-sofia-link-btn {
  color: var(--bb-muted);
}

[data-theme="dark"] .email-page .bb-sofia-link-btn:hover {
  color: var(--bb-sage-dark);
}

[data-theme="dark"] .email-page .bb-sofia-result-actions .bb-sofia-result-primary {
  background: #6EAE94;
  border-color: #6EAE94;
  color: #1A1714;
}

[data-theme="dark"] .email-page .bb-sofia-result-actions .bb-sofia-result-primary:hover {
  background: #80BCA2;
}

[data-theme="dark"] .email-page .bb-sofia-changes-panel {
  background: rgba(168, 197, 184, 0.1);
}

[data-theme="dark"] .email-page .bb-sofia-change-before {
  color: var(--bb-rose-dark);
}

[data-theme="dark"] .email-page .bb-sofia-change-arrow {
  color: #C9BFB4;
}

[data-theme="dark"] .email-page .bb-sofia-change-after {
  color: #A8C5B8;
}

[data-theme="dark"] .email-page .bb-sofia-draft-proof {
  color: #E8E0D8;
  background: rgba(168, 197, 184, 0.08);
}

[data-theme="dark"] .email-page .bb-sofia-draft-proof--collapsed::after {
  background: linear-gradient(transparent, rgba(30, 27, 24, 0.98));
}

[data-theme="dark"] .email-page .bb-sofia-help-list {
  color: #C9BFB4;
}

[data-theme="dark"] .email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-messages {
  background: rgba(30, 27, 24, 0.98) !important;
}

[data-theme="dark"] .email-page .email-folders {
  background: rgba(30, 26, 23, 0.7) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-label-form {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .email-page .email-label-form input[type="text"] {
  border-color: var(--bb-divider) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-label-form input[type="text"]:focus,
[data-theme="dark"] .email-page .email-label-form input[type="text"]:focus-visible {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="dark"] .email-page .email-label-form input[type="text"]::placeholder {
  color: var(--bb-muted) !important;
}

[data-theme="dark"] .email-page .email-label-swatch {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .email-page .email-label-swatch.selected {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.90), 0 0 0 2px rgba(255,255,255,0.45) !important;
}

[data-theme="dark"] .email-page .email-label-create-btn {
  background: rgb(74,122,104) !important;
  color: rgb(255,254,251) !important;
  border: none !important;
}

[data-theme="dark"] .email-page .email-label-create-btn:hover {
  background: rgb(64,108,91) !important;
}

[data-theme="dark"] .email-page .email-label-cancel-btn {
  background: transparent !important;
  border-color: var(--bb-divider) !important;
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-label-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-row.active,
[data-theme="dark"] .email-page .email-row.selected,
[data-theme="dark"] .email-page .email-message-item.active,
[data-theme="dark"] .email-page .email-message-item.selected {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-list-state-icon,
[data-theme="dark"] .email-page .email-list-empty-icon {
  background: rgba(168, 197, 184, 0.08) !important;
  color: #A8C5B8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-list-state-title,
[data-theme="dark"] .email-page .email-list-empty-title {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page .email-list-state-copy,
[data-theme="dark"] .email-page .email-list-state-note,
[data-theme="dark"] .email-page .email-list-empty-sub {
  color: rgba(232, 221, 212, 0.62) !important;
}

[data-theme="dark"] .email-page .email-state-action {
  background: rgba(168, 197, 184, 0.08) !important;
  border-color: rgba(168, 197, 184, 0.16) !important;
  color: #A8C5B8 !important;
}

[data-theme="dark"] .email-page .email-state-action.primary {
  background: var(--bb-sage-dark, #4A7A68) !important;
  border-color: var(--bb-sage-dark, #4A7A68) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page .email-columns > .ask-ai-panel {
  background: linear-gradient(180deg, rgba(30, 26, 23, 0.95) 0%, rgba(26, 30, 28, 0.9) 100%) !important;
  border-left-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin-left: 12px;
  backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .ask-ai-header,
[data-theme="dark"] .email-page .ask-ai-context,
[data-theme="dark"] .email-page .ask-ai-quick-actions,
[data-theme="dark"] .email-page .ask-ai-messages,
[data-theme="dark"] .email-page .ask-ai-input-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .email-page .ask-ai-suggestion,
[data-theme="dark"] .email-page .ask-ai-quick-action {
  /* Dark twin of the white-pill lift — 5%/8% was as invisible as the light
     alphas; buttons need a surface in both themes. */
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-theme="dark"] .email-page .ask-ai-suggestion--primary {
  background: #4A7A68 !important;
  border-color: #4A7A68 !important;
  color: #F0EBE5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(212, 168, 154, 0.15) !important;
}

[data-theme="dark"] .email-page .ask-ai-suggestion--primary:hover {
  background: #5A8A78 !important;
  border-color: #5A8A78 !important;
}

[data-theme="dark"] .email-page .ask-ai-suggestion--primary svg {
  color: rgba(240, 235, 229, 0.85) !important;
}

[data-theme="dark"] .email-page .email-compose-dialog {
  background: #241F1B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .email-page .email-compose-titlebar,
[data-theme="dark"] .email-page .email-compose-footer,
[data-theme="dark"] .email-page .email-compose-field {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .email-page .email-compose-body,
[data-theme="dark"] .email-page .chip-input-typing,
[data-theme="dark"] .email-page .email-compose-field input {
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-compose-formatbar,
[data-theme="dark"] .email-page .email-compose-toolbar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bb-compose-sofia {
  background: linear-gradient(180deg, rgba(30,26,23,0.95) 0%, rgba(26,30,28,0.9) 100%) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .bb-compose-action {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] .bb-sofia-message {
  background: rgba(168, 197, 184, 0.08) !important;
  border-color: rgba(168, 197, 184, 0.1) !important;
  color: #E0EDE6 !important;
}

[data-theme="dark"] .bb-sofia-suggestion {
  background: rgba(42, 38, 34, 0.8) !important;
  border-color: rgba(168, 197, 184, 0.15) !important;
}

[data-theme="dark"] .bb-sofia-suggestion-preview {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .bb-sofia-suggestion-dismiss {
  border-color: rgba(200, 190, 178, 0.2) !important;
  color: rgba(200, 190, 178, 0.6) !important;
}

[data-theme="dark"] .bb-sofia-suggestion-dismiss:hover {
  border-color: rgba(168, 197, 184, 0.28) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .bb-decor .bb-arc {
  border-color: rgba(255, 255, 255, 0.03) !important;
}

/* Backdrop-filter leak fixes */
[data-theme="dark"] .email-page .s-dropdown {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-compose-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-reply-input-wrap {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dark mode: email reader */
[data-theme="dark"] .email-page .email-reader {
  background: rgba(30, 26, 23, 0.95) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page .email-reader-content {
  background: transparent !important;
}

[data-theme="dark"] .email-page .email-reader-body {
  color: #D8CFC5 !important;
}

[data-theme="dark"] .email-page .email-reader-header {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page .email-chip {
  background: rgba(168, 197, 184, 0.08) !important;
  border-color: rgba(168, 197, 184, 0.15) !important;
  color: var(--bb-sage, #A8C5B8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .email-page .email-chip:hover {
  background: rgba(168, 197, 184, 0.14) !important;
  border-color: rgba(168, 197, 184, 0.28) !important;
  color: #E8DDD4 !important;
  box-shadow: 0 2px 8px rgba(212, 168, 154, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .email-page .email-chip:active {
  background: rgba(168, 197, 184, 0.18) !important;
}

[data-theme="dark"] .email-page .email-chip:focus-visible {
  box-shadow: none !important;
}

[data-theme="dark"] .email-page .email-chip.email-chip-loading {
  background: rgba(168, 197, 184, 0.04) !important;
  border-color: rgba(168, 197, 184, 0.08) !important;
}

[data-theme="dark"] .email-page .email-chip.email-chip-generating::after {
  background: linear-gradient(90deg, transparent, rgba(168, 197, 184, 0.4), transparent) !important;
}

[data-theme="dark"] .email-page .email-reply-draft.email-chip-generating {
  opacity: 0.6 !important;
}

[data-theme="dark"] .email-page .email-reply-draft.email-chip-generating::after {
  background: linear-gradient(90deg, transparent, rgba(168, 197, 184, 0.5), transparent) !important;
}

/* Dark mode completion: warm Blod Bolge overrides */

[data-theme="dark"] .email-page .email-folders::after {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.06) 75%, transparent) !important;
}

[data-theme="dark"] .email-page .email-list::after {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent) !important;
}

[data-theme="dark"] .email-page .email-row,
[data-theme="dark"] .email-page .email-message-item,
[data-theme="dark"] .email-page [data-email-id] {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .email-page .email-reply-bar,
[data-theme="dark"] .email-page .email-reader-reply {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .email-page .email-row:hover,
[data-theme="dark"] .email-page .email-message-item:hover,
[data-theme="dark"] .email-page [data-email-id]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
}

[data-theme="dark"] .email-page .email-row.active,
[data-theme="dark"] .email-page .email-row.selected,
[data-theme="dark"] .email-page .email-message-item.active,
[data-theme="dark"] .email-page .email-message-item.selected,
[data-theme="dark"] .email-page [data-email-id].active {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .email-page .email-row.unread::before,
[data-theme="dark"] .email-page .email-message-item.unread::before,
[data-theme="dark"] .email-page .email-unread-dot {
  box-shadow: none !important;
}

[data-theme="dark"] .email-page .email-folder-item:hover,
[data-theme="dark"] .email-page [data-email-folder]:hover,
[data-theme="dark"] .email-page [data-folder]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .email-page .email-folder-item.active,
[data-theme="dark"] .email-page [data-email-folder].active,
[data-theme="dark"] .email-page [data-folder].active {
  background: var(--bb-sage-bg) !important;
  color: var(--bb-sage-dark) !important;
}

[data-theme="dark"] .email-page .email-folder-badge,
[data-theme="dark"] .email-page .email-folder-count,
[data-theme="dark"] .email-page .folder-count {
  background: rgba(168, 197, 184, 0.18) !important;
  color: #A8C5B8 !important;
}

[data-theme="dark"] .email-page .email-folder-add:hover,
[data-theme="dark"] .email-page .email-labels-add-btn:hover,
[data-theme="dark"] .email-page .new-label-btn:hover {
  color: var(--bb-sage) !important;
}

[data-theme="dark"] .email-page .email-reader-header {
  background: transparent !important;
  border-bottom: none !important;
}

[data-theme="dark"] .email-page .email-sender-avatar,
[data-theme="dark"] .email-page .email-reader-header .email-message-avatar,
[data-theme="dark"] .email-page .email-thread-sender .email-message-avatar {
  box-shadow: 0 2px 8px rgba(20, 18, 15, 0.3) !important;
}

[data-theme="dark"] .email-page .email-reader-sender-name,
[data-theme="dark"] .email-page .email-reader-from strong {
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-reader-sender-email,
[data-theme="dark"] .email-page .email-reader-email,
[data-theme="dark"] .email-page .email-reader-to,
[data-theme="dark"] .email-page .email-reader-date {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-reader-actions button:hover,
[data-theme="dark"] .email-page .email-action-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-ai-summary-trigger {
  color: #A8C5B8 !important;
}

[data-theme="dark"] .email-page .email-ai-summary-trigger:hover {
  background: rgba(168, 197, 184, 0.12) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page .email-ai-summary-trigger.is-active {
  background: rgba(168, 197, 184, 0.18) !important;
  color: #E8DDD4 !important;
}


[data-theme="dark"] .email-page .email-reader-body {
  color: #D8CFC5 !important;
  background: transparent !important;
}

[data-theme="dark"] .email-page .ask-ai-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .email-page .ask-ai-context-title {
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .ask-ai-trust-line,
[data-theme="dark"] .email-page .ask-ai-context-kicker,
[data-theme="dark"] .email-page .ask-ai-quick-title {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .ask-ai-context-chip,
[data-theme="dark"] .email-page .ask-ai-context-meta span {
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-sage) !important;
}

[data-theme="dark"] .email-page .ask-ai-suggestion:hover,
[data-theme="dark"] .email-page .ask-ai-quick-action:hover:not(:disabled) {
  background: rgba(168, 197, 184, 0.1) !important;
  border-color: var(--bb-sage) !important;
  color: var(--bb-sage) !important;
}

[data-theme="dark"] .email-page .ask-ai-suggestion svg,
[data-theme="dark"] .email-page .ask-ai-quick-action svg {
  color: var(--bb-sage) !important;
}

[data-theme="dark"] .email-page .ask-ai-input-row {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .email-page .ask-ai-send {
  background: var(--bb-sage-dark) !important;
  box-shadow: 0 4px 12px rgba(90, 154, 130, 0.25) !important;
}

[data-theme="dark"] .email-page .email-reply-input-wrap:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .email-page .email-reply-input-wrap:focus-within {
  border-color: rgba(200, 190, 178, 0.48) !important;
  box-shadow: 0 0 0 2px rgba(200, 190, 178, 0.10) !important;
}

[data-theme="dark"] .email-page .email-reply-send {
  background: var(--bb-sage-dark) !important;
  box-shadow: 0 4px 12px rgba(90, 154, 130, 0.25) !important;
}

[data-theme="dark"] .email-page .email-reply-send:hover {
  box-shadow: 0 6px 18px rgba(90, 154, 130, 0.35) !important;
}

[data-theme="dark"] .email-page .email-reply-draft {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--bb-warm-muted, #A89A8E) !important;
}

[data-theme="dark"] .email-page .email-reply-draft:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: var(--bb-warm-text, #E8DDD4) !important;
}

[data-theme="dark"] .email-page .email-compose-overlay {
  background: rgba(20, 18, 15, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .email-page .email-compose-title {
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-compose-window-btn {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-compose-window-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-compose-close {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-compose-close:hover {
  color: var(--bb-rose-dark) !important;
  background: rgba(212, 168, 154, 0.12) !important;
}

[data-theme="dark"] .email-page .email-compose-fields {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .email-page .email-compose-field label {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-compose-field input,
[data-theme="dark"] .email-page .chip-input-typing {
  background: transparent !important;
}

[data-theme="dark"] .email-page .email-compose-field input::placeholder {
  color: var(--bb-muted) !important;
}

[data-theme="dark"] .email-page .email-compose-recipient-link {
  color: var(--bb-sage) !important;
}

[data-theme="dark"] .email-page .email-compose-recipient-link:hover {
  color: #A8C5B8 !important;
}

[data-theme="dark"] .email-page .email-compose-body-wrap {
  background: transparent !important;
}

[data-theme="dark"] .email-page .email-compose-body {
  background: transparent !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-compose-body[data-placeholder]::before {
  color: var(--bb-muted) !important;
}

[data-theme="dark"] .email-page .email-compose-body [contenteditable] {
  color: var(--bb-warm-text) !important;
  caret-color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-compose-body blockquote {
  border-left-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--bb-warm-text-light) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .email-page .email-compose-body .email-quoted,
[data-theme="dark"] .email-page .email-compose-body .email-quoted * {
  background-color: transparent !important;
}

[data-theme="dark"] .email-page .email-compose-body div:not(.email-signature-host *):not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body p:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body span:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body font:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body table:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body tbody:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body tr:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body td:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body th:not(.email-signature *),
[data-theme="dark"] .email-page .email-compose-body li:not(.email-signature *) {
  color: inherit !important;
  background-color: transparent !important;
}

[data-theme="dark"] .email-page .email-compose-footer .btn-primary,
[data-theme="dark"] .email-page #email-compose-send {
  background: var(--email-control-fill) !important;
  color: var(--email-control-on-fill) !important;
  border-color: var(--email-control-fill) !important;
  box-shadow: 0 2px 8px rgba(20, 18, 15, 0.18) !important;
}

[data-theme="dark"] .email-page .email-compose-footer .btn-primary:hover,
[data-theme="dark"] .email-page #email-compose-send:hover {
  background: var(--email-control-fill-hover) !important;
  border-color: var(--email-control-fill-hover) !important;
  color: var(--email-control-on-fill) !important;
  box-shadow: 0 3px 10px rgba(20, 18, 15, 0.22) !important;
}

[data-theme="dark"] .email-page .email-compose-attach,
[data-theme="dark"] .email-page .email-compose-discard {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-compose-attach:hover {
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-compose-discard:hover {
  background: rgba(212, 168, 154, 0.12) !important;
  color: var(--bb-rose-dark) !important;
}

[data-theme="dark"] .email-page .email-compose-autosave,
[data-theme="dark"] .email-page .compose-autosave,
[data-theme="dark"] .email-page .email-draft-saved {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-compose-from-row {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .email-page .email-compose-toggle-cc {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .email-page .chip-input-chip {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--bb-warm-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .email-page .chip-input-chip.selected {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .chip-input-remove {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .chip-input-remove:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-autocomplete {
  background: #241F1B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(20, 18, 15, 0.4) !important;
}

[data-theme="dark"] .email-page .email-autocomplete-item:hover,
[data-theme="dark"] .email-page .email-autocomplete-item.active {
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .email-page .email-autocomplete-name {
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-autocomplete-email {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-bulk-bar {
  background: rgba(30, 26, 23, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-bulk-cb::before {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .email-page .email-bulk-cb:checked::before,
[data-theme="dark"] .email-page .email-bulk-toggle input:checked::before {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="dark"] .email-page .email-bulk-icon {
  color: var(--bb-warm-text-light) !important;
}

[data-theme="dark"] .email-page .email-bulk-icon:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--bb-warm-text) !important;
}

[data-theme="dark"] .email-page .email-snooze-dropdown,
[data-theme="dark"] .email-page .snooze-dropdown,
[data-theme="dark"] .email-page .email-schedule-dropdown,
[data-theme="dark"] .email-page .s-dropdown {
  background: #241F1B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(20, 18, 15, 0.4) !important;
  color: var(--bb-warm-text) !important;
}

/* Mobile polish: touch targets, safe areas and dynamic viewport units. */
@media (max-width: 767px) {
  .email-page .email-app {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom))) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .email-page .email-header {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }

  .email-page .email-action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  .email-page .email-actions-bar {
    gap: 4px !important;
  }

  .email-page .email-reader-actions button,
  .email-page .email-reader-actions [role="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .email-page .email-snooze-dropdown,
  .email-page .snooze-dropdown {
    max-height: 50vh !important;
    max-height: 50dvh !important;
  }

  .email-page .email-list-empty {
    min-height: min(360px, calc(100vh - 190px)) !important;
    min-height: min(360px, calc(100dvh - 190px)) !important;
  }

  .email-page .email-list-panel,
  .email-page .email-list {
    width: 100% !important;
    max-width: 100vw !important;
    border-right: none !important;
  }

  [data-theme="dark"] .email-page .email-list-item,
  [data-theme="dark"] .email-page .email-message-item {
    border-bottom: 1px solid rgba(232, 224, 216, 0.08) !important;
  }

  [data-theme="dark"] .email-page .email-action-btn:hover {
    background: rgba(168, 197, 184, 0.08) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .email-page .email-reader-panel,
  .email-page .email-reader {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .email-page .email-compose-panel,
  .email-page .email-compose-dialog {
    max-height: 85vh !important;
    max-height: 85dvh !important;
  }

  .email-page .ai-suggestions-panel,
  .email-page .email-ai-suggestions-panel {
    max-height: 50vh !important;
    max-height: 50dvh !important;
  }

  .email-page .snooze-dropdown,
  .email-page .email-snooze-dropdown {
    max-height: 40vh !important;
    max-height: 40dvh !important;
  }

  .email-page .email-app {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}

@media (max-width: 375px) {
  .email-page .email-subject {
    font-size: var(--font-size-base) !important;
    line-height: 1.3 !important;
  }

  .email-page .email-preview-text {
    font-size: var(--font-size-sm) !important;
    -webkit-line-clamp: 1 !important;
  }

  .email-page .email-list-item,
  .email-page .email-message-item {
    padding: 10px 8px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .email-page button,
  .email-page [role="button"],
  .email-page .email-list-item,
  .email-page .email-message-item,
  .email-page .email-action-btn {
    -webkit-tap-highlight-color: transparent;
  }
}

/* -- Mobile chip sizes -- */
@media (max-width: 767px) {
  .email-page .email-chip {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: var(--font-size-sm) !important;
    max-width: calc(100% - 8px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .email-page .email-chips-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }

  .email-page .email-chips-list::-webkit-scrollbar {
    display: none !important;
  }

  .email-page .email-chip {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    max-width: min(240px, calc(100vw - 80px)) !important;
  }
}

/* Bulk selection repair: keep custom checkboxes centered and let narrow list text breathe. */
.email-page .email-bulk-cb,
.email-page .email-bulk-toggle input {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.email-page .email-bulk-cb::before,
.email-page .email-bulk-toggle input::before,
.email-page .email-dense-row .email-row-controls .email-bulk-cb::before {
  inset: auto !important;
  left: calc(50% - 10px) !important;
  top: calc(50% - 10px) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

.email-page .email-bulk-cb:checked::after,
.email-page .email-bulk-toggle input:checked::after,
.email-page .email-dense-row .email-row-controls .email-bulk-cb:checked::after {
  left: calc(50% - 4px) !important;
  top: calc(50% - 3px) !important;
  width: 9px !important;
  height: 5px !important;
  border: 0 !important;
  border-left: 2px solid var(--email-control-on-fill, #fff) !important;
  border-bottom: 2px solid var(--email-control-on-fill, #fff) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  transform: rotate(-45deg) !important;
  transform-origin: center !important;
}

.email-page .email-list > .email-bulk-bar.email-bulk-bar {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px 8px !important;
  min-height: auto !important;
  padding: 6px 12px 6px 14px !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-toggle {
  min-width: 0 !important;
  gap: 6px !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-toggle-text,
.email-page .email-list > .email-bulk-bar .email-bulk-count {
  white-space: nowrap !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-summary {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-clear {
  flex: 0 0 auto !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-spacer {
  display: block !important;
  flex: 1 !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-actions {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

/* Reader header action repair: keep the split-view toolbar calm and uncramped. */
@media (min-width: 768px) {
  .email-page .email-app.is-thread-open .email-reader-header {
    grid-template-columns: 40px minmax(0, 1fr) max-content !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px 20px 14px !important;
    box-sizing: border-box !important;
  }

  .email-page .email-app.is-thread-open .email-reader-meta {
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  .email-page .email-app.is-thread-open .email-reader-from {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .email-page .email-app.is-thread-open .email-reader-from strong,
  .email-page .email-app.is-thread-open .email-reader-email,
  .email-page .email-app.is-thread-open .email-reader-to,
  .email-page .email-app.is-thread-open .email-reader-date,
  .email-page .email-app.is-thread-open .email-reader-subject {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .email-page .email-app.is-thread-open .email-reader-email,
  .email-page .email-app.is-thread-open .email-reader-to,
  .email-page .email-app.is-thread-open .email-reader-date {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .email-page .email-app.is-thread-open .email-reader-from .email-reader-close {
    display: none !important;
  }

  .email-page .email-app.is-thread-open .email-reader-actions {
    display: flex !important;
    align-items: center !important;
    align-self: start !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    min-width: max-content !important;
    height: 40px !important;
  }

  .email-page .email-app.is-thread-open .email-reader-actions > .email-snooze-btn-wrapper,
  .email-page .email-app.is-thread-open .email-reader-actions > .email-more-wrapper,
  .email-page .email-app.is-thread-open .email-reader-actions > .email-label-dropdown-wrapper,
  .email-page .email-app.is-thread-open .email-reader-actions > .email-reminder-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 40px !important;
  }

  /* 40px square lock removed for action btns — calm-preview.css owns sizing (#2306) */
}

/* List-mode card composition: folders+list form one even 22px-framed rounded card.
   Held from tablet (768px) up so the frame + rounded corners NEVER collapse on resize.
   Previously gated at 1200px, which dropped the padding to 0 and flattened the corners the
   moment the window narrowed below 1200. Even 22px matches /kalender/ + /skrivebord/.
   List mode only — reader-split keeps its own 1200px composition below. */
@media (min-width: 768px) {
  .email-page .email-app:not(.is-thread-open) {
    padding: 22px !important;
    box-sizing: border-box !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-columns {
    flex: 1 1 auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-folders {
    border-radius: 14px 0 0 14px !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 0 14px 14px 0 !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list-header {
    border-radius: 0 14px 0 0 !important;
  }
}

/* Reader split (thread open) keeps its larger-viewport (1200px) two-card composition. */
@media (min-width: 1200px) {
  .email-page .email-app.is-thread-open.is-reader-split {
    padding: 22px !important;
    box-sizing: border-box !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-columns {
    flex: 1 1 auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

}

/* Thread open below the 1200px split threshold (768-1199): the email opens WITHOUT
   .is-reader-split, so neither the list-mode (:not(.is-thread-open)) frame nor the
   >=1200 reader-split frame applies and the app padding would fall back to 0. Give it the
   same even 22px frame so opening/closing an email never jumps the outer card at any width. */
@media (min-width: 768px) {
  .email-page .email-app.is-thread-open:not(.is-reader-split) {
    padding: 22px !important;
    box-sizing: border-box !important;
  }
}

/* A11y: keep undo action readable on the dark toast surface. */
.email-page .email-undo-btn {
  color: rgba(255, 255, 255, 0.90) !important;
}

.email-page .email-undo-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* A11y: Focus-visible ring for all interactive email elements. */
.email-page button:focus-visible,
.email-page a:focus-visible,
.email-page input:focus-visible,
.email-page textarea:focus-visible,
.email-page select:focus-visible,
.email-page [role="button"]:focus-visible,
.email-page [role="tab"]:focus-visible,
.email-page [role="option"]:focus-visible,
.email-page [role="combobox"]:focus-visible,
.email-page [tabindex]:focus-visible {
  outline: none !important;
  outline-offset: 2px !important;
}

.email-page .email-toolbar-icon-btn:focus-visible {
  outline: 2px solid var(--bb-sage, var(--sk-accent, #4A7A68)) !important;
  outline-offset: 2px !important;
}

/* These controls already expose focus via their parent shell/border. */
.email-page .email-search input:focus-visible,
.email-page .compose-body:focus-visible,
.email-page .email-compose-body:focus-visible,
.email-page .ask-ai-input textarea:focus-visible {
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Settings modal — full blod-bølge overhaul (#246)
   ═══════════════════════════════════════════════════════════════ */

/* --- Modal chrome --- */
.email-page > .email-settings-modal .email-settings-dialog {
  border-radius: 20px !important;
  box-shadow: var(--bb-card-shadow), 0 24px 64px rgba(92, 77, 67, 0.12) !important;
  border: 1px solid rgba(228, 220, 212, 0.3) !important;
  overflow: visible !important;
}

.email-page > .email-settings-modal .email-settings-header {
  background: linear-gradient(180deg, var(--bb-cream) 0%, rgba(250, 247, 243, 0.85) 100%) !important;
  border-bottom: 1px solid var(--bb-divider) !important;
  padding: 18px 24px !important;
  border-radius: 20px 20px 0 0 !important;
}

.email-page > .email-settings-modal .email-settings-header h3 {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text) !important;
  letter-spacing: 0 !important;
}

.email-page > .email-settings-modal .email-settings-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page > .email-settings-modal .email-settings-close:hover {
  background: rgba(212, 168, 154, 0.12) !important;
  color: var(--bb-rose-dark) !important;
}

/* --- Tab sidebar --- */
.email-page > .email-settings-modal .email-settings-tabs {
  background: linear-gradient(180deg, rgba(250, 247, 243, 0.6) 0%, rgba(240, 237, 245, 0.3) 100%) !important;
  border-right: 1px solid var(--bb-divider) !important;
  padding: 16px 10px !important;
  gap: 4px !important;
}

.email-page > .email-settings-modal .email-settings-tab {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  color: var(--bb-warm-text-light) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
}

.email-page > .email-settings-modal .email-settings-tab:hover {
  background: rgba(58, 47, 38, 0.05) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .email-settings-tab.active {
  background: rgba(74, 122, 104, 0.12) !important;
  color: rgb(45, 79, 66) !important;
  font-weight: 600 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.email-page > .email-settings-modal .email-settings-tab.active svg {
  color: rgb(74, 122, 104) !important;
}

.email-page > .email-settings-modal .email-settings-tab svg {
  color: var(--bb-warm-text-light) !important;
}

/* --- Body panel --- */
.email-page > .email-settings-modal .email-settings-body {
  background: var(--bb-white) !important;
  padding: 24px !important;
  border-radius: 0 0 20px 0 !important;
}

.email-page > .email-settings-modal .email-settings-body--general {
  background: rgb(255, 254, 251) !important;
  border-radius: 0 0 20px 20px !important;
}

.email-page > .email-settings-modal .email-settings-content {
  overflow: visible !important;
}

/* --- Form labels --- */
.email-page > .email-settings-modal .email-settings-form-field > label {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

/* --- Form inputs (all tabs) --- */
.email-page > .email-settings-modal .email-settings-form-field input[type="text"],
.email-page > .email-settings-modal .email-settings-form-field input[type="date"],
.email-page > .email-settings-modal .email-settings-form-field select,
.email-page > .email-settings-modal .email-settings-form-field textarea {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
  background: var(--bb-white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.email-page > .email-settings-modal .email-settings-form-field input:focus-visible,
.email-page > .email-settings-modal .email-settings-form-field select:focus-visible,
.email-page > .email-settings-modal .email-settings-form-field textarea:focus-visible {
  border-color: var(--bb-sage) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Konto-vælgeren (Signatur-fanen) — hjælp-formularens opskrift (Mortens valg
   19/7): fyld/kant/radius arves fra reglen ovenfor; her erstattes kun den rå
   OS-pil med husets bløde 16px-chevron. background-image som longhand EFTER
   `background:`-shorthanden ovenfor (den nulstiller ellers billedet). Direct
   child — Generelt-fanens toggle-row-selects er nested og rammes ikke. */
.email-page > .email-settings-modal .email-settings-form-field > select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A7E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
}

.email-page > .email-settings-modal .email-settings-form-field > select:hover {
  border-color: #D6CCC2 !important;
}

.email-page > .email-settings-modal .email-settings-form-field input::placeholder,
.email-page > .email-settings-modal .email-settings-form-field textarea::placeholder {
  color: var(--bb-muted) !important;
  font-style: italic !important;
}

/* --- Toggle switches --- */
.email-page > .email-settings-modal .email-settings-toggle-track {
  background: rgba(184, 168, 152, 0.25) !important;
}

.email-page > .email-settings-modal .email-settings-toggle-label input:checked + .email-settings-toggle-track {
  background: var(--bb-sage-dark) !important;
}

.email-page > .email-settings-modal .email-settings-toggle-row {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
  padding: 10px 0 !important;
}

.email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row {
  font-size: var(--email-fs-meta) !important;
  font-weight: 500 !important;
  color: rgb(58, 47, 38) !important;
  padding: 0 !important;
  min-height: 56px !important;
  gap: 16px !important;
}

/* --- General tab: flat inline selects --- */
.email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  height: 34px !important;
  color: rgb(58, 47, 38) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  text-align: right !important;
  text-align-last: right !important;
}

.email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select:hover {
  background: rgba(92, 77, 67, 0.04) !important;
}

.email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select:focus {
  background: rgba(92, 77, 67, 0.05) !important;
  border: 1px solid rgba(228, 220, 212, 0.9) !important;
  outline: none !important;
}

/* --- General tab: flat form fields with warm hairline dividers --- */
.email-page > .email-settings-modal .email-settings-section--general .email-settings-form-field {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(228, 220, 212, 0.55) !important;
}

.email-page > .email-settings-modal .email-settings-section--general .email-settings-form-field:first-child {
  border-top: none !important;
}

/* --- Checkbox --- */
.email-page > .email-settings-modal .email-settings-checkbox-label input[type="checkbox"] {
  accent-color: var(--bb-sage-dark) !important;
}

/* --- Primary save buttons (all tabs) --- */
.email-page > .email-settings-modal .email-settings-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 10px 28px;
  background: var(--bb-sage-dark);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(74, 122, 104, 0.2);
}

.email-page > .email-settings-modal .email-settings-save-btn:hover {
  background: #3D6B57;
  box-shadow: 0 4px 14px rgba(74, 122, 104, 0.3);
  transform: translateY(-1px);
}

.email-page > .email-settings-modal .email-settings-save-btn:active {
  transform: translateY(0);
}

/* --- Cancel / secondary buttons --- */
.email-page > .email-settings-modal .email-settings-cancel-rule {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 12px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
  transition: all 0.15s ease !important;
}

.email-page > .email-settings-modal .email-settings-cancel-rule:hover {
  border-color: var(--bb-warm-text-light) !important;
  background: rgba(250, 247, 243, 0.6) !important;
  color: var(--bb-warm-text) !important;
}

/* --- Back button --- */
.email-page > .email-settings-modal .email-settings-back-btn {
  font-family: var(--font-family) !important;
  color: var(--bb-sage-dark) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}

.email-page > .email-settings-modal .email-settings-back-btn:hover {
  background: rgba(168, 197, 184, 0.08) !important;
}

/* --- Filtre tab: rule list --- */
.email-page > .email-settings-modal .email-settings-rule-item {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  transition: all 0.15s ease !important;
  background: var(--bb-white) !important;
}

.email-page > .email-settings-modal .email-settings-rule-item:hover {
  border-color: var(--bb-sage) !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.06) !important;
}

.email-page > .email-settings-modal .email-settings-rule-info strong {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .email-settings-rule-desc {
  color: var(--bb-warm-text-light) !important;
}

.email-page > .email-settings-modal .email-settings-add-rule-btn {
  border: 1.5px dashed var(--bb-divider) !important;
  border-radius: 14px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-sage-dark) !important;
  font-weight: 500 !important;
  padding: 12px !important;
  transition: all 0.15s ease !important;
}

.email-page > .email-settings-modal .email-settings-add-rule-btn:hover {
  border-color: var(--bb-sage) !important;
  background: rgba(168, 197, 184, 0.06) !important;
}

/* --- Filtre tab: condition/action rows --- */
.email-page > .email-settings-modal .email-settings-cond-row select,
.email-page > .email-settings-modal .email-settings-action-row select {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 10px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: rgb(255, 254, 251) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23767A86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  padding-right: 38px !important;
}

.email-page > .email-settings-modal .email-settings-cond-val {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 10px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .email-settings-cond-val:focus-visible,
.email-page > .email-settings-modal .email-settings-cond-row select:focus-visible,
.email-page > .email-settings-modal .email-settings-action-row select:focus-visible {
  border-color: rgb(74, 122, 104) !important;
  box-shadow: 0 0 0 3px rgba(74, 122, 104, 0.15) !important;
  outline: none !important;
}

.email-page > .email-settings-modal .email-settings-rule-form input[type="text"]:focus-visible {
  border-color: rgb(74, 122, 104) !important;
  box-shadow: 0 0 0 3px rgba(74, 122, 104, 0.15) !important;
  outline: none !important;
}

.email-page > .email-settings-modal .email-settings-add-cond,
.email-page > .email-settings-modal .email-settings-add-action {
  font-family: var(--font-family) !important;
  color: var(--bb-sage-dark) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}

.email-page > .email-settings-modal .email-settings-add-cond:hover,
.email-page > .email-settings-modal .email-settings-add-action:hover {
  background: rgba(74, 122, 104, 0.08) !important;
}

/* --- Filtre tab: rule edit/delete buttons --- */
.email-page > .email-settings-modal .email-settings-rule-edit,
.email-page > .email-settings-modal .email-settings-rule-delete {
  border-radius: 8px !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page > .email-settings-modal .email-settings-rule-edit:hover {
  background: rgba(168, 197, 184, 0.1) !important;
  color: var(--bb-sage-dark) !important;
}

.email-page > .email-settings-modal .email-settings-rule-delete:hover {
  background: rgba(212, 168, 154, 0.12) !important;
  color: var(--bb-rose-dark) !important;
}

/* --- Signatur tab: sig-card wrapper (toolbar + editor + results) --- */
.email-page > .email-settings-modal .sig-card {
  border: 1px solid var(--bb-divider);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bb-white);
  max-height: 460px;
}

/* --- Signatur tab: account select --- */
.email-page > .email-settings-modal #settings-sig-account {
  padding-right: 32px;
}

/* --- Signatur tab: editor area --- */
.email-page > .email-settings-modal .sig-editor-area {
  border: none !important;
  border-radius: 0 !important;
  background: var(--bb-white) !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .sig-editor-area:focus-visible {
  border-color: var(--bb-sage) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Signatur tab: compose grammar toolbar overrides --- */
.email-page > .email-settings-modal .sig-toolbar {
  border: none !important;
  border-top: 1px solid rgba(92, 77, 67, 0.10) !important;
  border-radius: 0 !important;
  background: #FBF8F2 !important;
  padding: 6px 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: flex !important;
  gap: 4px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.email-page > .email-settings-modal .sig-toolbar .ect-btn {
  color: var(--bb-warm-text-light) !important;
  border-radius: 8px !important;
}

.email-page > .email-settings-modal .sig-toolbar .ect-btn:hover {
  background: rgba(168, 197, 184, 0.12) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .sig-toolbar .ect-btn.ect-active,
.email-page > .email-settings-modal .sig-toolbar .ect-btn[aria-pressed="true"] {
  background: rgba(110, 138, 126, 0.16) !important;
  color: var(--bb-sage-dark) !important;
}

.email-page > .email-settings-modal .sig-toolbar .ect-btn.ect-dropdown-toggle {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 10px !important;
  gap: 6px !important;
  min-width: 0 !important;
  height: 30px !important;
  border-radius: 8px !important;
}

.email-page > .email-settings-modal .sig-toolbar .ect-divider {
  background: var(--bb-divider) !important;
}

.email-page > .email-settings-modal .sig-save-btn {
  background: var(--bb-sage-dark) !important;
  font-family: var(--font-family) !important;
}

.email-page > .email-settings-modal .sig-save-btn:hover {
  background: var(--bb-sage-dark) !important;
}

.email-page > .email-settings-modal .sig-reset-btn {
  border-color: var(--bb-divider) !important;
  color: var(--bb-warm-text-light) !important;
  font-family: var(--font-family) !important;
}

.email-page > .email-settings-modal .sig-reset-btn:hover {
  background: rgba(168, 197, 184, 0.08) !important;
  border-color: var(--bb-sage) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .sig-find-btn {
  border-color: var(--bb-divider) !important;
  color: var(--bb-warm-text-light) !important;
  font-family: var(--font-family) !important;
}
.email-page > .email-settings-modal .sig-find-btn:hover {
  background: rgba(168, 197, 184, 0.08) !important;
  border-color: var(--bb-sage) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .sig-editor-area:focus {
  border-color: var(--bb-sage, #6b9d8a);
}

.email-page > .email-settings-modal .sig-more-icon {
  color: var(--bb-warm-text-light) !important;
}

.email-page > .email-settings-modal .sig-more-divider {
  background: var(--bb-divider) !important;
}

.email-page > .email-settings-modal .email-settings-dialog:has(.sig-link-overlay) {
  overflow: hidden !important;
}

/* --- Signatur tab: link/HTML dialogs --- */
.email-page > .email-settings-modal .sig-link-overlay {
  border-radius: 20px !important;
}

.email-page > .email-settings-modal > .sig-link-overlay {
  border-radius: 0 !important;
}

.email-page > .email-settings-modal .sig-link-dialog {
  background: var(--bb-white) !important;
  border: 1px solid var(--bb-divider) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 36px rgba(92, 77, 67, 0.15) !important;
  padding: 20px 24px !important;
}

.email-page > .email-settings-modal .sig-link-dialog-title {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
}

.email-page > .email-settings-modal .sig-link-field label {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page > .email-settings-modal .sig-link-field input {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 10px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  background: var(--bb-white) !important;
}

.email-page > .email-settings-modal .sig-link-field input:focus-visible {
  border-color: var(--bb-sage) !important;
  box-shadow: none !important;
  outline: none !important;
}

.email-page > .email-settings-modal .sig-link-ok {
  background: var(--bb-sage-dark) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-family: var(--font-family) !important;
}

.email-page > .email-settings-modal .sig-link-cancel,
.email-page > .email-settings-modal .sig-link-remove {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 10px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
}

.email-page > .email-settings-modal .sig-link-remove {
  color: var(--bb-rose-dark) !important;
  border-color: var(--bb-rose) !important;
}

/* --- Indstillinger tab: snippets link (flush-left flat) --- */
.email-page > .email-settings-modal .email-settings-snippets-link {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.email-page > .email-settings-modal .email-settings-snippets-link:hover {
  background: transparent !important;
  box-shadow: inset 0 0 0 100px rgba(92, 77, 67, 0.035) !important;
}

.email-page > .email-settings-modal .email-settings-snippets-count {
  background: rgba(110, 138, 126, 0.15) !important;
  color: rgb(74, 122, 104) !important;
  border-radius: 12px !important;
  padding: 0 6px !important;
}

/* --- Indstillinger tab: divider --- */
.email-page > .email-settings-modal .email-settings-divider {
  border: none !important;
  border-top: 1px solid rgba(228, 220, 212, 0.7) !important;
  margin: 22px 0 !important;
}

/* --- Indstillinger tab: section title --- */
.email-page > .email-settings-modal .email-settings-section-title {
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: rgb(124, 109, 96) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  .email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select,
  .email-page > .email-settings-modal .email-settings-snippets-link {
    transition: none !important;
  }
}

/* --- Indstillinger tab: hint text --- */
.email-page > .email-settings-modal .email-settings-hint {
  color: var(--bb-muted) !important;
  font-family: var(--font-family) !important;
}

/* --- Snippet var tags --- */
.email-page > .email-settings-modal .snippet-var-tag {
  background: var(--bb-sage-bg) !important;
  color: var(--bb-sage-dark) !important;
  border-radius: 8px !important;
}

.email-page > .email-settings-modal .snippet-trigger-label {
  color: var(--bb-sage-dark) !important;
}

/* --- Snippet category header --- */
.email-page > .email-settings-modal .snippet-category-header {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
}

/* --- Empty state --- */
.email-page > .email-settings-modal .email-settings-empty {
  color: var(--bb-muted) !important;
  font-family: var(--font-family) !important;
  font-style: italic !important;
}

/* --- Focus-visible inside settings --- */
.email-page > .email-settings-modal button:focus-visible,
.email-page > .email-settings-modal select:focus-visible,
.email-page > .email-settings-modal input:focus-visible,
.email-page > .email-settings-modal textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.email-page > .email-settings-modal .email-settings-logout-btn:focus-visible {
  outline: 2px solid var(--bb-sage, var(--sk-accent, #4A7A68)) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.email-page > .email-settings-modal .email-settings-toggle-label input:focus-visible + .email-settings-toggle-track {
  outline: none !important;
  box-shadow: none !important;
}

/* Inputs inside the form use border focus, not outline rings. */
.email-page > .email-settings-modal .email-settings-form-field input:focus-visible,
.email-page > .email-settings-modal .email-settings-form-field select:focus-visible,
.email-page > .email-settings-modal .email-settings-form-field textarea:focus-visible,
.email-page > .email-settings-modal .sig-editor-area:focus-visible,
.email-page > .email-settings-modal .sig-link-field input:focus-visible,
.email-page > .email-settings-modal .email-settings-cond-val:focus-visible {
  outline: none !important;
}

/* --- Dark mode overrides for settings --- */
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-dialog {
  border-color: rgba(232, 221, 212, 0.08) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-header {
  background: rgba(35, 31, 27, 0.95) !important;
  border-bottom-color: rgba(232, 221, 212, 0.08) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-tabs {
  background: rgba(30, 27, 23, 0.8) !important;
  border-right-color: rgba(232, 221, 212, 0.06) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-tab {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-tab:hover {
  background: rgba(168, 197, 184, 0.06) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-tab.active {
  background: rgba(74, 122, 104, 0.2) !important;
  color: var(--bb-sage, #a8c5b8) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-body {
  background: rgba(42, 38, 34, 0.98) !important;
}

/* Genveje tab: cards + keycaps need explicit elevation in dark mode — the
   token --sk-bg-subtle dims to a near-invisible 6% sage on the dark body. */
[data-theme="dark"] .email-page > .email-settings-modal .email-shortcuts-group {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(232, 221, 212, 0.1) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-shortcut-key {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(232, 221, 212, 0.14) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field input[type="text"],
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field input[type="date"],
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field select,
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field textarea {
  border-color: rgba(232, 221, 212, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field input:focus-visible,
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field select:focus-visible,
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field textarea:focus-visible {
  border-color: var(--bb-sage) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Konto-vælgerens dark-chevron — genskrives EFTER dark-`background:`-shorthanden
   ovenfor (den nulstiller billedet fra light-overlayet). Kant løftes til .16 så
   feltet stadig tegner en linje på det svage .04-fyld. */
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field > select {
  border-color: rgba(232, 221, 212, 0.16) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b8aea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-form-field > select:hover {
  border-color: rgba(232, 221, 212, 0.28) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-toggle-track {
  background: rgba(232, 221, 212, 0.12) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-save-btn {
  background: var(--bb-sage-dark) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-rule-item {
  border-color: rgba(232, 221, 212, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-rule-item:hover {
  border-color: rgba(168, 197, 184, 0.2) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-add-rule-btn {
  border-color: rgba(232, 221, 212, 0.12) !important;
  color: var(--bb-sage) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .sig-card {
  border-color: rgba(232, 221, 212, 0.18);
  background: rgba(30, 27, 23, 0.6);
}

[data-theme="dark"] .email-page > .email-settings-modal .sig-editor-area {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .sig-toolbar {
  border-top-color: rgba(232, 221, 212, 0.18) !important;
  background: rgba(30, 27, 23, 0.9) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .sig-token {
  background: rgba(107,157,138,0.15);
  color: var(--bb-sage-light, #a8d4bf);
  border-color: rgba(107,157,138,0.25);
}

[data-theme="dark"] .email-page > .email-settings-modal .sig-link-dialog {
  background: rgba(42, 38, 34, 0.98) !important;
  border-color: rgba(232, 221, 212, 0.1) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .sig-link-field input {
  border-color: rgba(232, 221, 212, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-cond-row select,
[data-theme="dark"] .email-page > .email-settings-modal .email-settings-action-row select {
  border-color: rgba(232, 221, 212, 0.1) !important;
  color: #E8DDD4 !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23B8ACA3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-cond-val {
  border-color: rgba(232, 221, 212, 0.1) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-cancel-rule {
  border-color: rgba(232, 221, 212, 0.1) !important;
  color: #B8ACA3 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-snippets-link {
  border: none !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-snippets-link:hover {
  box-shadow: inset 0 0 0 100px rgba(168, 197, 184, 0.06) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-snippets-count {
  background: rgba(107, 157, 138, 0.2) !important;
  color: var(--bb-sage-light, #a8d4bf) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-divider {
  border-top-color: rgba(232, 221, 212, 0.1) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-section-title {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-section--general .email-settings-form-field {
  border-top-color: rgba(232, 221, 212, 0.1) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row > span {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select {
  color: #E8DDD4 !important;
  background: transparent !important;
  border-color: transparent !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select:hover {
  background: rgba(168, 197, 184, 0.06) !important;
}

[data-theme="dark"] .email-page > .email-settings-modal .email-settings-section--general .email-settings-toggle-row select:focus {
  background: rgba(168, 197, 184, 0.08) !important;
  border-color: rgba(232, 221, 212, 0.15) !important;
}

/* --- Mobile responsive for settings tabs --- */
@media (max-width: 767px) {
  .email-page > .email-settings-modal .email-settings-tabs {
    border-right: none !important;
    border-bottom: 1px solid var(--bb-divider) !important;
    border-radius: 0 !important;
  }

  .email-page > .email-settings-modal .email-settings-tab.active {
    background: rgba(74, 122, 104, 0.12) !important;
    color: rgb(45, 79, 66) !important;
  }

  .email-page > .email-settings-modal .email-settings-body {
    border-radius: 0 0 20px 20px !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   Accounts dialog — full blod-bølge overhaul (#434)
   Modal is appended to document.body, NOT inside .email-page.
   ═══════════════════════════════════════════════════════════════ */

/* --- Modal chrome --- */
.email-accounts-dialog {
  border-radius: 20px !important;
  box-shadow: var(--bb-card-shadow), 0 24px 64px rgba(92, 77, 67, 0.12) !important;
  border: 1px solid rgba(228, 220, 212, 0.3) !important;
  background: var(--bb-white) !important;
}

.email-accounts-header {
  background: linear-gradient(180deg, var(--bb-cream) 0%, rgba(250, 247, 243, 0.85) 100%) !important;
  border-bottom: 1px solid var(--bb-divider) !important;
  padding: 18px 24px !important;
  border-radius: 20px 20px 0 0 !important;
}

.email-accounts-header h3 {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text) !important;
  letter-spacing: 0 !important;
}

.email-accounts-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  color: var(--bb-warm-text-light) !important;
}

.email-accounts-close:hover {
  background: rgba(212, 168, 154, 0.12) !important;
  color: var(--bb-rose-dark) !important;
}

/* --- Body --- */
.email-accounts-body {
  background: var(--bb-white) !important;
  padding: 24px !important;
}

.email-accounts-section-title {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* --- Account cards --- */
.email-account-item {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 14px !important;
  transition: all 0.15s ease !important;
  background: var(--bb-white) !important;
}

.email-account-item:hover {
  border-color: var(--bb-sage) !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.06) !important;
}

.email-account-name {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
}

.email-account-email {
  color: var(--bb-warm-text-light) !important;
}

.email-account-disconnect {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 10px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

.email-account-disconnect:hover {
  border-color: var(--bb-rose) !important;
  background: rgba(212, 168, 154, 0.08) !important;
  color: var(--bb-rose-dark) !important;
}

/* --- Provider grid --- */
.imap-provider-option {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 14px !important;
  background: var(--bb-white) !important;
  transition: all 0.15s ease !important;
}

.imap-provider-option:hover {
  border-color: var(--bb-sage) !important;
  background: rgba(168, 197, 184, 0.06) !important;
  box-shadow: 0 2px 8px rgba(92, 77, 67, 0.06) !important;
}

.imap-provider-name {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  font-weight: 600 !important;
}

.imap-provider-desc {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
}

/* --- IMAP wizard header --- */
.imap-wizard-header h3 {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text) !important;
}

.imap-wizard-step {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text-light) !important;
}

.imap-wizard-back {
  border-radius: 10px !important;
  color: var(--bb-warm-text-light) !important;
}

.imap-wizard-back:hover {
  background: rgba(168, 197, 184, 0.08) !important;
  color: var(--bb-sage-dark) !important;
}

/* --- IMAP wizard inputs --- */
.imap-wizard-field input,
.imap-wizard-field select {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--bb-warm-text) !important;
  background: var(--bb-white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.imap-wizard-field input:focus-visible,
.imap-wizard-field select:focus-visible {
  border-color: var(--bb-sage) !important;
  box-shadow: none !important;
  outline: none !important;
}

.imap-wizard-field input::placeholder {
  color: var(--bb-muted) !important;
  font-style: italic !important;
}

.imap-wizard-field label {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 600 !important;
  color: var(--bb-warm-text-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* --- IMAP section fieldsets --- */
.imap-section legend {
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  font-weight: 600 !important;
}

/* --- IMAP wizard CTA buttons --- */
.imap-wizard-next {
  background: var(--bb-sage-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(74, 122, 104, 0.2) !important;
  transition: all 0.2s ease !important;
}

.imap-wizard-next:hover:not(:disabled) {
  background: #3D6B57 !important;
  box-shadow: 0 4px 14px rgba(74, 122, 104, 0.3) !important;
  transform: translateY(-1px);
}

.imap-wizard-next:active:not(:disabled) {
  transform: translateY(0);
}

/* --- IMAP wizard link/secondary buttons --- */
.imap-link-btn {
  font-family: var(--font-family) !important;
  color: var(--bb-sage-dark) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}

.imap-link-btn:hover {
  background: rgba(168, 197, 184, 0.08) !important;
}

.imap-detect-manual-btn {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 12px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-sage-dark) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.imap-detect-manual-btn:hover {
  border-color: var(--bb-sage) !important;
  background: rgba(168, 197, 184, 0.06) !important;
}

/* --- Signature link inside accounts --- */
.email-accounts-modal .email-sig-open-settings {
  border: 1px solid var(--bb-divider) !important;
  border-radius: 14px !important;
  font-family: var(--font-family) !important;
  color: var(--bb-warm-text) !important;
  background: rgba(250, 247, 243, 0.6) !important;
}

.email-accounts-modal .email-sig-open-settings:hover {
  border-color: var(--bb-sage) !important;
  background: rgba(168, 197, 184, 0.04) !important;
}

/* --- Focus-visible inside accounts --- */
.email-accounts-modal button:focus-visible,
.email-accounts-modal input:focus-visible,
.email-accounts-modal select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* --- Mobile bottom-sheet: keep top-only radius --- */
@media (max-width: 767px) {
  .email-accounts-dialog {
    border-radius: 20px 20px 0 0 !important;
  }
}

/* --- Dark mode overrides for accounts --- */
[data-theme="dark"] .email-accounts-dialog {
  border-color: rgba(232, 221, 212, 0.08) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4) !important;
  background: rgba(42, 38, 34, 0.98) !important;
}

[data-theme="dark"] .email-accounts-header {
  background: rgba(35, 31, 27, 0.95) !important;
  border-bottom-color: rgba(232, 221, 212, 0.08) !important;
}

[data-theme="dark"] .email-accounts-header h3 {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-accounts-close {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .email-accounts-body {
  background: rgba(42, 38, 34, 0.98) !important;
}

[data-theme="dark"] .email-accounts-section-title {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .email-account-item {
  border-color: rgba(232, 221, 212, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .email-account-item:hover {
  border-color: rgba(168, 197, 184, 0.2) !important;
}

[data-theme="dark"] .email-account-name {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-account-email {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .email-account-disconnect {
  border-color: rgba(232, 221, 212, 0.1) !important;
  color: #B8ACA3 !important;
}

[data-theme="dark"] .imap-provider-option {
  border-color: rgba(232, 221, 212, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .imap-provider-option:hover {
  border-color: rgba(168, 197, 184, 0.2) !important;
  background: rgba(168, 197, 184, 0.06) !important;
}

[data-theme="dark"] .imap-provider-name {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .imap-provider-desc {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .imap-wizard-field input,
[data-theme="dark"] .imap-wizard-field select {
  border-color: rgba(232, 221, 212, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .imap-wizard-field input:focus-visible,
[data-theme="dark"] .imap-wizard-field select:focus-visible {
  border-color: var(--bb-sage) !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="dark"] .imap-wizard-header h3 {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .imap-wizard-step {
  color: #B8ACA3 !important;
}

[data-theme="dark"] .imap-wizard-next {
  background: var(--bb-sage-dark) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .imap-section legend {
  color: #E8DDD4 !important;
}

[data-theme="dark"] .email-accounts-modal .email-sig-open-settings {
  border-color: rgba(232, 221, 212, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #E8DDD4 !important;
}

[data-theme="dark"] .imap-detect-manual-btn {
  border-color: rgba(232, 221, 212, 0.12) !important;
  color: var(--bb-sage) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile-only fixes (max-width: 768px)
   1. Double footer: remove duplicate padding that stacks above mn-bar
   2. Select-all checkbox: hide on mobile
   3. Reader header: simplify action toolbar
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* --- FIX 1: Double footer ---
     The email-app had excessive bottom padding from safe-area rules
     that stacked on top of the mn-bar (60px). The reader already
     accounts for mn-bar-height via padding-bottom on .email-reader.
     Remove the duplicate spacing from the app shell. */

  .email-page .email-app {
    padding-bottom: 0 !important;
  }

  /* --- FIX 2: Hide select-all / select-visible checkbox on mobile ---
     The checkbox icon in the list header is useless on phones.
     Keep the refresh button, hide only the select tool. */

  .email-page .email-list-tool[data-list-action="select-visible"] {
    display: none !important;
  }

  /* Also hide the bulk-bar select-all toggle on mobile —
     bulk selection still works via long-press on individual rows. */
  .email-page .email-list > .email-bulk-bar .email-bulk-toggle {
    display: none !important;
  }

  /* --- FIX 3: Simplify reader header on mobile ---
     On phones the reader header was rendering ALL action buttons
     (reply, reply-all, forward, archive, delete, snooze, AI, more)
     in a single row alongside the back button, creating a cramped
     multi-row toolbar.

     Strategy:
     - Keep: back arrow, reply, archive, delete, more ("...")
     - Hide: reply-all, forward, snooze wrapper, AI summary trigger,
             divider — these are either niche or available elsewhere.
     - Give the remaining items proper spacing. */

  /* Hide secondary actions to reduce toolbar clutter */
  .email-page .email-reader-header .email-reply-all-btn,
  .email-page .email-reader-header .email-forward-btn,
  .email-page .email-reader-header .email-snooze-btn-wrapper,
  .email-page .email-reader-header .email-action-divider,
  .email-page .email-reader-header .email-ai-summary-trigger {
    display: none !important;
  }

  /* Actions row: less cramped, proper alignment */
  .email-page .email-reader-header .email-reader-actions {
    gap: 2px !important;
    flex: 0 0 auto !important;
    padding: 0 4px 0 0 !important;
  }

  /* Back button: compact but tappable */
  .email-page .email-reader-header .email-reader-back {
    flex: 0 0 44px !important;
  }

  /* Meta section: breathing room for subject and sender */
  .email-page .email-reader-header .email-reader-meta {
    padding: 8px 14px 10px !important;
  }

  /* Subject: clear, readable size */
  .email-page .email-reader-header .email-reader-subject {
    font-size: var(--font-size-lg) !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
  }

  /* Sender name: slightly smaller but still prominent */
  .email-page .email-reader-header .email-reader-from strong {
    font-size: var(--font-size-base) !important;
  }

  /* Date: subtle, single line */
  .email-page .email-reader-header .email-reader-date {
    font-size: var(--font-size-xs) !important;
    margin-bottom: 2px !important;
  }
}

/* Compose/list polish: remove clipped labels, broken dense rows, and draft noise. */
.email-page .email-folder-item {
  min-height: 42px !important;
  overflow: visible !important;
}

.email-page .email-folder-item .email-folder-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 19px !important;
  line-height: 1.32 !important;
  padding-block: 1px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.email-page .email-list .email-message-item.email-dense-row {
  grid-template-columns: 52px minmax(0, 1fr) 64px !important;
  column-gap: 10px !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-row-controls {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-list .email-message-item.email-dense-row .email-avatar-stack {
  display: none !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-meta {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-hover-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.email-page .email-compose-footer .email-draft-saved,
.email-page .email-draft-saved,
.email-draft-toast {
  display: none !important;
  visibility: hidden !important;
}

.email-compose-dialog.with-sofia .bb-compose-sofia .ask-ai-mic svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8 !important;
}

.email-compose-dialog.with-sofia .bb-compose-sofia .ask-ai-mic.ss-mic--connecting,
.email-compose-dialog.with-sofia .bb-compose-sofia .ask-ai-mic.ss-mic--listening {
  background: rgba(168, 197, 184, 0.24) !important;
  color: #4A7A68 !important;
  box-shadow: 0 0 0 3px rgba(168, 197, 184, 0.18) !important;
}

/* #3974: compose Sofia recipient + subject proposal rows. A calm plan preview
   (Til / Emne) shown above the Indsæt action. Nothing is filled until the user
   confirms; ambiguous recipients become at most three inline choice buttons. */
.bb-sofia-proposal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 10px;
  background: transparent;
}
.bb-sofia-proposal-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.bb-sofia-proposal-label {
  flex: 0 0 auto;
  min-width: 38px;
  font-weight: 600;
  color: #9A8E82;
}
.bb-sofia-proposal-value {
  flex: 1 1 auto;
  min-width: 0;
  color: #3A2F26;
  word-break: break-word;
}
.bb-sofia-proposal-hint {
  color: #9A8E82;
}
.bb-sofia-recipient-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.bb-sofia-recipient-choice {
  padding: 3px 10px;
  border: 1px solid rgba(228, 220, 212, 0.9);
  border-radius: 100px;
  background: transparent;
  color: #5C4D43;
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.bb-sofia-recipient-choice:hover {
  background: rgba(110, 138, 126, 0.10);
  border-color: rgba(110, 138, 126, 0.5);
}
.bb-sofia-recipient-choice.is-selected {
  background: rgba(110, 138, 126, 0.16);
  border-color: #6E8A7E;
  color: #3A2F26;
}
.bb-sofia-recipient-choice:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bb-sofia-recipient-choice { transition: none; }
}

[data-theme="dark"] .email-page .bb-sofia-proposal {
  border-color: rgba(232, 224, 216, 0.12);
}
[data-theme="dark"] .email-page .bb-sofia-proposal-row {
  color: #E8E0D8;
}
[data-theme="dark"] .email-page .bb-sofia-proposal-label,
[data-theme="dark"] .email-page .bb-sofia-proposal-hint {
  color: #C9BFB4;
}
[data-theme="dark"] .email-page .bb-sofia-proposal-value {
  color: #E8E0D8;
}
[data-theme="dark"] .email-page .bb-sofia-recipient-choice {
  border-color: rgba(232, 224, 216, 0.18);
  color: #E8E0D8;
}
[data-theme="dark"] .email-page .bb-sofia-recipient-choice:hover {
  background: rgba(168, 197, 184, 0.12);
  border-color: rgba(168, 197, 184, 0.5);
}
[data-theme="dark"] .email-page .bb-sofia-recipient-choice.is-selected {
  background: rgba(168, 197, 184, 0.18);
  border-color: #8FB3A2;
  color: #FFFFFF;
}