/* ═══════════════════════════════════════════════════════════════════
   email-responsive.css — phone-first responsive layout
   ═══════════════════════════════════════════════════════════════════
   Base = phone (320–428 px). Desktop added via min-width.
   Loaded AFTER component CSS, so base overrides desktop defaults.

   Phone views (JS toggles .mobile-visible / .mobile-hidden):
     inbox  — sidebar hidden, full-width message list
     reader — absolute overlay with back button
     compose — full-screen compose
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Always-on: touch targets ─────────────────────────────────── */

.email-folder-item,
#email-add-label-btn { min-height: 44px; min-width: 44px; }

.email-message-star,
.sidebar-toggle {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#email-search-input,
#email-toolbar-connect { min-height: 48px; }


/* ═══════════════════════════════════════════════════════════════════
   PHONE BASE  (0 → 767 px)
   Everything below applies at ALL viewport widths.
   The @media (min-width: 768px) block restores tablet/desktop.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── App shell ────────────────────────────────────────────────── */

.app-layout.email-page .main-content > .email-app {
  height: calc(100dvh - 32px - var(--mn-bar-height, 60px));
  max-height: calc(100dvh - 32px - var(--mn-bar-height, 60px));
}

/* ─── Toolbar ──────────────────────────────────────────────────── */

.email-toolbar {
  padding: 8px 12px;
  gap: 8px;
  min-height: 48px;
}

.email-page .email-toolbar.email-header {
  min-height: 56px !important;
  padding: 10px 12px !important;
}

/* Search: expand as absolute overlay on phone */
.email-page .email-toolbar.email-header .email-search.email-search--expanded,
.email-page .email-toolbar.email-header .email-search.email-search--has-text,
.email-page .email-toolbar.email-header .email-search:has(#email-search-input:focus) {
  position: absolute !important;
  left: 12px !important;
  right: 52px !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Hide toolbar icons and Sofia hero when search is expanded on phone */
.email-page .email-toolbar.email-header .email-toolbar-leading:has(.email-search--expanded) .email-toolbar-icon-btn,
.email-page .email-toolbar.email-header .email-toolbar-leading:has(.email-search--has-text) .email-toolbar-icon-btn,
.email-page .email-toolbar.email-header .email-toolbar-leading:has(#email-search-input:focus) .email-toolbar-icon-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.email-toolbar-icon-btn { width: 36px; height: 36px; }

/* ─── Search ───────────────────────────────────────────────────── */

.email-search {
  max-width: none;
  flex: 1;
  min-width: 0;
}

.email-search input {
  min-height: 44px;
  border-radius: 22px;
}

/* ─── Account filter (horizontal scroll on phone) ──────────────── */

.email-account-filter {
  min-height: 32px;
  padding: 3px 10px;
  gap: 3px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

.email-account-filter::-webkit-scrollbar { display: none; }

.email-account-chip {
  font-size: var(--font-size-xs);
  max-width: 136px;
  padding: 2px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── AI / toolbar buttons ─────────────────────────────────────── */

.cmd-palette-trigger { display: none; }

/* ─── Folders: hidden by default, drawer via JS ────────────────── */

.email-folders { display: none; }

/* Legacy absolute slide-in: only the 601px+ inline column uses it. On phones
   (<=600px) the fixed transform drawer further down is the sole layout model.
   Leaving this rule unscoped made `.visible` (absolute) and `body.calm-drawer-open`
   (fixed + translateX) resolve on the same frame, producing a ghost "first
   foldout" before the real slide. Scoping to 601px+ leaves one clean slide. */
@media (min-width: 601px) {
  .email-folders.visible {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 20;
    background: var(--sk-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

.email-folder-toggle { display: flex; }

/* ─── Columns layout ──────────────────────────────────────────── */

.email-columns { position: relative; }

/* ─── Email list: full-width ───────────────────────────────────── */

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

.email-list-items {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

.email-list.mobile-hidden { display: none; }

.email-message-item {
  min-height: 64px;
  padding: 10px 12px;
  gap: 8px;
}

.email-message-item .email-bulk-cb {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 -4px 0 -10px;
}

.email-message-item .email-message-avatar,
.email-message-item .email-avatar-stack { display: none; }

.email-message-content { min-width: 0; }

.email-message-meta {
  min-width: 44px;
  /* 54px ellipsized the timestamp ("11:49 P…") — a clipped time is worse than none;
     72px fits the widest 12-hour form and the badges */
  max-width: 72px;
  gap: 2px;
}

.email-message-time,
.email-sent-badge { max-width: 72px; }
.email-replied-badge { max-width: 72px; }

.email-label-pills { max-height: 18px; }
.email-label-pill { max-width: 92px; }
.email-message-star svg { width: 20px; height: 20px; }

.email-message-item:hover .email-message-hover-actions { opacity: 0; visibility: hidden; pointer-events: none; }
.email-message-item:hover .email-message-time { opacity: 1; }

.email-list-loading,
.email-list-state {
  padding-bottom: calc(92px + var(--mn-bar-height, 60px));
}

.email-list-state {
  min-height: calc(100% - 8px);
  padding-left: 20px;
  padding-right: 20px;
}

.email-list-state-title { font-size: var(--font-size-base); }

.email-list-state-actions,
.email-reader-state-actions { width: 100%; }

.email-state-action,
.email-reader-state-action { min-height: 44px; }

.email-list-inline-error {
  align-items: stretch;
  flex-direction: column;
  padding: 10px 12px;
}

.email-list-inline-error .email-list-state-actions {
  justify-content: flex-start;
}

.email-dense-skeleton-row {
  grid-template-columns: 30px minmax(0, 1fr) 42px;
  min-height: 64px;
  padding: 10px 12px;
}

.email-dense-skeleton-row .email-skeleton-avatar { display: none; }
.email-skeleton-controls { gap: 6px; }

/* ─── Reader: absolute overlay, hidden until JS toggle ─────────── */

.email-reader {
  position: absolute;
  inset: 0;
  background: var(--sk-bg);
  z-index: 10;
  display: none;
}

.email-reader.mobile-visible {
  display: flex;
  padding-bottom: var(--mn-bar-height, 60px);
}

.email-reader-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.email-reader-header {
  padding: 12px 12px 10px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "back  actions actions"
    "meta  meta    meta";
  column-gap: 0;
  align-items: center;
  border-bottom: 0.5px solid var(--sk-border);
}

/* Row 1: back arrow + actions */
.email-reader-back {
  grid-area: back;
  display: inline-flex;
  justify-content: center;
  padding: 6px 4px 6px 8px;
  border-bottom: none;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}

.email-reader-back svg { width: 18px; height: 18px; }

.email-reader-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 4px;
  justify-content: flex-end;
}

/* Row 2: subject + sender line + details */
.email-reader-meta {
  grid-area: meta;
  margin-bottom: 0;
  padding: 4px 0 2px;
}

.email-reader-from {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

.email-reader-details-toggle {
  display: none;
}

.email-reader-header.show-details .email-reader-details {
  display: none;
}

.email-reader-close { display: none; }

.email-reader-subject {
  font-size: var(--font-size-lg);
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  margin-bottom: 6px;
}

.email-action-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.email-action-btn span { display: none; }
.email-action-btn svg { width: 16px; height: 16px; }
.email-action-divider { display: none; }

.email-reader-body {
  flex: none;
  overflow: visible;
}

.email-reader-state {
  min-height: calc(100dvh - 190px);
  padding: 36px 20px calc(106px + var(--mn-bar-height, 60px));
}

.email-reader-empty .email-reader-state { min-height: 100%; }
.email-reader-state-title { font-size: var(--font-size-base); }

.email-reader-state-copy,
.email-reader-state-note { font-size: var(--font-size-sm); }

.email-reader-iframe {
  width: 100%;
  max-width: 100%;
}

/* ─── AI summary ───────────────────────────────────────────────── */

.email-ai-summary-line {
  padding: 4px 12px;
  font-size: var(--font-size-sm);
}

.email-chips-list { padding: 8px 12px 12px; }
.email-chips-label { padding: 8px 12px 0; }

/* ─── Attachments ──────────────────────────────────────────────── */

.email-attachments-header {
  padding: 6px 12px;
  min-height: 22px;
}

.email-attachments-list { padding: 0 12px 12px; }
.email-attachment-name { max-width: 120px; }

.email-attachment-download {
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Compose: full-screen ─────────────────────────────────────── */

.email-compose-dialog {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  margin: 0 !important;
}

.email-compose-titlebar,
.email-compose-footer { border-radius: 0; }

.email-compose-send { position: sticky; bottom: 0; }

.email-compose-footer {
  padding-bottom: calc(8px + var(--mn-bar-height, 60px));
}

.email-compose-close,
.email-compose-attach,
.email-compose-discard { min-width: 44px; min-height: 44px; }

.email-compose-footer .btn { min-height: 44px; }

.email-compose-toggle-cc button {
  min-height: 44px;
  font-size: var(--font-size-base);
  padding: 8px 0;
}

.email-compose-toolbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  padding: 4px 8px;
}

.email-compose-toolbar::-webkit-scrollbar { display: none; }

.chip-input-container,
.email-from-trigger,
.email-compose-field input { min-height: 44px; }

/* ─── Overlays → bottom sheets ─────────────────────────────────── */

.email-vector-overlay {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  max-height: 70dvh;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  z-index: 200;
}

.email-accounts-dialog {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 80dvh;
  position: fixed;
  bottom: 0;
}

.email-more-dropdown {
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  min-width: 100%;
  max-height: 60dvh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 0 var(--mn-bar-height, 60px);
  overflow-y: auto;
  animation: sheet-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.email-more-item {
  padding: 14px 20px;
  min-height: 48px;
  font-size: var(--font-size-base);
}

.email-more-item svg { width: 18px; height: 18px; }

/* reader-more-menu: removed mobile bottom-sheet override (#2513) — menu is
   identical fixed popover across all viewports */

.email-snooze-dropdown {
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  min-width: 100%;
  max-height: 50vh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-bottom: var(--mn-bar-height, 60px);
  overflow-y: auto;
  animation: sheet-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.email-snooze-option {
  padding: 14px 20px;
  min-height: 48px;
  font-size: var(--font-size-base);
}

.email-schedule-dropdown {
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  min-width: 100%;
  max-height: 70dvh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 0 var(--mn-bar-height, 60px) !important;
  margin-bottom: 0 !important;
  animation: sheet-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10010 !important;
  overflow-y: auto;
}

.email-schedule-option {
  padding: 14px 20px;
  min-height: 48px;
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
}

.email-schedule-custom { padding: 14px 20px; }

.email-schedule-picker {
  min-height: 48px;
  font-size: var(--font-size-md);
  padding: 10px 12px;
  border-radius: var(--radius-md);
}

.email-schedule-confirm {
  min-height: 48px;
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}

.email-schedule-arrow { min-width: 44px; min-height: 44px; }

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ─── Emoji picker → bottom sheet ──────────────────────────────── */

@media (max-width: 767px) {
  .email-emoji-picker {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 60dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: var(--mn-bar-height, 60px);
    animation: sheet-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .email-emoji-search { padding: 12px 12px 6px; }

  .email-emoji-search-input {
    padding: 10px 12px;
    font-size: var(--font-size-md);
    min-height: 44px;
    box-sizing: border-box;
  }

  .email-emoji-categories { padding: 4px 8px; gap: 2px; }
  .email-emoji-categories button { width: 44px; height: 44px; font-size: var(--font-size-lg); }

  .email-emoji-grid { padding: 6px 8px 8px; flex: 1; min-height: 0; }
  .email-emoji-grid-inner { grid-template-columns: repeat(8, 1fr); gap: 2px; }

  .email-emoji-btn {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-4xl);
  }

  .email-emoji-empty { padding: 24px 16px; font-size: var(--font-size-md); }

  .email-emoji-skin-picker {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    justify-content: center;
    padding: 12px;
    padding-bottom: calc(12px + var(--mn-bar-height, 60px));
    gap: 6px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: sheet-up 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .email-emoji-skin-btn { width: 44px; height: 44px; font-size: var(--font-size-4xl); }
}

/* ─── Bulk actions ─────────────────────────────────────────────── */

.email-bulk-icon { min-width: 44px; min-height: 44px; }

.email-list > .email-bulk-bar.email-bulk-bar {
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 14px;
}

.email-bulk-spacer { display: none; }

.email-bulk-actions {
  display: grid;
  flex: 1 0 100%;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 4px;
}

.email-bulk-actions .email-bulk-icon { width: 100%; }

.email-bulk-progress {
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
}

.email-bulk-progress-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Thread view ──────────────────────────────────────────────── */

.email-thread-msg-header { gap: 6px; padding: 6px 10px; }
.email-thread-avatar { width: 20px; height: 20px; font-size: var(--font-size-xs); }
.email-thread-message.expanded .email-thread-avatar { width: 24px; height: 24px; font-size: var(--font-size-xs); }
.email-thread-msg-sender,
.email-thread-msg-snippet,
.email-thread-msg-date { font-size: var(--font-size-xs); }
.email-thread-message.expanded .email-thread-msg-body { padding: 0 10px 8px; }
.email-thread-message.expanded .email-thread-msg-header { padding: 6px 10px; }
.email-thread-older-btn { padding: 6px 10px; min-height: 44px; font-size: var(--font-size-xs); }
/* ─── Analytics ────────────────────────────────────────────────── */

.email-analytics { padding: 12px; }
.email-analytics-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.email-stat-card { padding: 10px 8px; }
.email-stat-value { font-size: var(--font-size-lg); }
.email-stat-label,
.email-hour-label,
.email-stat-bar-label,
.email-stat-bar-value { font-size: var(--font-size-xs); }
.email-analytics-hours { height: 60px; gap: 1px; }
.email-stat-bar-row { gap: 6px; }
.email-stat-bar-label { min-width: 80px; }

/* ─── Snooze / follow-up / reply-later ─────────────────────────── */

.snooze-until-badge { font-size: var(--font-size-xs); padding: 2px 6px; }
.snooze-remove-btn { min-width: 44px; min-height: 44px; }
.email-snooze-confirm { min-height: 44px; padding: 10px 16px; }

.reply-later-wait { font-size: var(--font-size-xs); padding: 2px 6px; }
.reply-later-remove-btn { min-width: 44px; min-height: 44px; }

/* ─── Chips ────────────────────────────────────────────────────── */

.email-chip { min-height: 44px; padding: 8px 14px; }
.email-context-item { min-height: 44px; padding: 8px 12px; }

.email-reply-chip {
  min-height: 44px;
  padding: 8px 14px;
  font-size: var(--font-size-base);
}

/* ─── Tour tooltip ─────────────────────────────────────────────── */

.email-tour-tooltip:not([data-position="center"]) {
  max-width: calc(100vw - 24px);
  left: 12px !important;
  right: 12px !important;
}

.email-tour-text { font-size: var(--font-size-base); }

.email-tour-next,
.email-tour-skip {
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--font-size-md);
}

/* ─── Toasts (above mobile nav) ────────────────────────────────── */

.email-toast { bottom: calc(var(--mn-bar-height, 60px) + 12px); }
.email-undo-toast { bottom: calc(var(--mn-bar-height, 60px) + 12px); }

.email-undo-action-toast {
  bottom: calc(var(--mn-bar-height, 60px) + 24px);
  width: max-content;
  max-width: calc(100vw - 24px);
  min-width: 0;
}

/* The toast is appended to document.body (outside .email-page), and its base
   rule in email-gmail-redesign.css loads after this file, so the plain
   selector above loses the (0,1,0) tie and the toast parks on top of the
   mobile nav (bottom 18px). body-scoped (0,1,1) wins the cascade on phones;
   the >=768px block below restores the gmail-redesign desktop position. */
body .email-undo-action-toast {
  bottom: calc(var(--mn-bar-height, 60px) + 24px);
}

/* ─── Close buttons ────────────────────────────────────────────── */

.email-accounts-close,
.email-reader-close {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: content-box;
}

.email-accounts-close svg,
.email-reader-close svg { width: 16px; height: 16px; }

/* ─── Settings dialog ──────────────────────────────────────────── */

.email-settings-close {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: content-box;
}

.email-settings-close svg { width: 16px; height: 16px; }

.email-settings-content { flex-direction: column; }

.email-settings-tabs {
  flex-direction: row;
  width: auto;
  overflow-x: auto;
  border-right: none;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  padding: 8px 8px 0;
  gap: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.email-settings-tabs::-webkit-scrollbar { display: none; }

.email-settings-tab {
  min-height: 44px;
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  flex: 0 0 auto;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.email-settings-tab.active {
  background: transparent;
  border-bottom-color: var(--sk-text);
}

.email-settings-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.email-settings-tab span { display: inline; font-size: var(--font-size-xs); }
.email-settings-body { flex: 1; min-height: 0; }
.email-settings-form-field select { min-height: 44px; }

.email-account-disconnect .btn,
.email-account-disconnect button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
}

/* ─── ECT ──────────────────────────────────────────────────────── */

.ect-btn { min-width: 44px; min-height: 44px; }
.ect-dropdown-toggle { font-size: var(--font-size-base); }

/* Signature toolbar mobile — scoped so desktop keeps readable 56px toggles */
@media (max-width: 767px) {
  .sig-toolbar { flex-wrap: nowrap; gap: 2px; }
  .sig-toolbar .ect-group { gap: 2px; }
  .sig-toolbar .ect-btn { min-width: 32px; height: 32px; padding: 0 4px; }
  .sig-toolbar .ect-dropdown-toggle { min-width: auto; gap: 3px; }
  .email-settings-form-buttons { flex-wrap: wrap; }
  .sig-token { font-size: var(--font-size-xs); padding: 1px 6px; }
  .sig-card { max-height: none; }
}

/* ─── Touch: eliminate 300ms tap delay ─────────────────────────── */

.email-message-item,
.email-page button,
.email-page a[href],
.email-page input,
.email-page select,
.email-page textarea,
.email-page [role="button"],
.email-page [role="tab"],
.email-page [tabindex="0"] {
  touch-action: manipulation;
}

/* Global 44px touch targets for phone */
.email-page button,
.email-page [role="button"],
.email-page [role="tab"] {
  min-width: 44px;
  min-height: 44px;
}

.email-page .email-app .email-folder-item,
.email-page .email-app #email-add-label-btn,
.email-page .email-app .email-state-action,
.email-page .email-app .email-reader-state-action {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* ─── Active states: tactile feedback ──────────────────────────── */

.email-message-item:active {
  background: var(--sk-bg-hover, rgba(0, 0, 0, 0.04));
  transition: background 0.05s ease-out;
}

.email-page button:active:not(:disabled),
.email-page a[href]:active,
.email-page [role="button"]:active,
.email-page [role="tab"]:active {
  opacity: 0.72;
}

.email-action-btn:active,
.email-toolbar-btn:active,
.email-reply-chip:active {
  opacity: 0.7;
  transform: scale(0.95);
  transition: opacity 0.05s, transform 0.05s;
}

/* ─── iOS: 16px minimum prevents auto-zoom on focus ────────────── */

.email-compose-field input,
.email-compose-subject-row input,
#email-compose-subject,
.email-compose-body,
.email-compose-body .ql-editor,
.email-reply-input,
.chip-input-typing,
#email-search-input,
.imap-wizard-field input,
.imap-wizard-field select,
.ai-prompt-input-row input,
.ai-preview-refine,
.email-tone-custom-input,
.cmd-palette-input,
.email-snooze-picker,
.email-schedule-picker {
  font-size: max(16px, var(--font-size-md));
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE DRAWER FOUNDATION  (max-width: 600px)
   Section 1: single-column layout with fixed slide-from-left
   folder drawer, warm backdrop, and body-class state.
   Simplified toolbar: burger + Sofia only (#1724).
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  /* ─── Stacking-context defeat ────────────────────────────────── */
  body .app-layout.email-page { z-index: auto !important; isolation: auto !important; transform: none !important; }
  body .main-content { z-index: auto !important; }
  body .email-app { z-index: auto !important; isolation: auto !important; }
  body .email-columns { z-index: auto !important; isolation: auto !important; }

  /* ─── App shell ─────────────────────────────────────────────── */
  .email-app.is-list-mode { padding: 0; }

  /* ─── Toolbar: simplified two-control layout ────────────────── */
  .email-toolbar.email-header {
    margin: 8px;
    padding: 8px;
    width: calc(100% - 16px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  /* Keep search visible; drawer proxies expose secondary toolbar controls. */
  .email-page .email-toolbar.email-header #email-search-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    border-radius: 12px;
    background: transparent;
    z-index: 3;
  }

  .email-page .email-toolbar.email-header #email-search-wrap:not(.email-search--expanded):not(.email-search--has-text):not(:has(#email-search-input:focus)) .email-search__field {
    display: none !important;
  }

  .email-page .email-toolbar.email-header #email-search-wrap:not(.email-search--expanded):not(.email-search--has-text):not(:has(#email-search-input:focus)) .email-search__toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px;
  }

  .email-page .email-toolbar.email-header #email-toolbar-mailkonti,
  .email-page .email-toolbar.email-header #email-toolbar-settings {
    display: none !important;
  }

  .email-page .email-toolbar.email-header #email-search-wrap.email-search--expanded,
  .email-page .email-toolbar.email-header #email-search-wrap.email-search--has-text,
  .email-page .email-toolbar.email-header #email-search-wrap:has(#email-search-input:focus) {
    display: flex !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    background: #FFFEFB !important;
    box-shadow: 0 6px 18px rgba(58, 47, 38, 0.14) !important;
    border: 1px solid rgba(110, 138, 126, 0.22) !important;
    border-radius: 22px !important;
    z-index: 5;
  }

  .email-page .email-toolbar.email-header #email-search-wrap.email-search--expanded .email-search__toggle,
  .email-page .email-toolbar.email-header #email-search-wrap.email-search--has-text .email-search__toggle,
  .email-page .email-toolbar.email-header #email-search-wrap:has(#email-search-input:focus) .email-search__toggle {
    display: none !important;
  }

  .email-page .email-toolbar.email-header #email-search-wrap.email-search--expanded .email-search__field,
  .email-page .email-toolbar.email-header #email-search-wrap.email-search--has-text .email-search__field,
  .email-page .email-toolbar.email-header #email-search-wrap:has(#email-search-input:focus) .email-search__field {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: 44px !important;
  }

  .email-page .email-toolbar.email-header #email-search-wrap .email-search__field input {
    min-height: 44px !important;
    height: 44px !important;
    font-size: var(--font-size-base) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-right: 48px !important;
  }

  .email-page .email-toolbar.email-header #email-search-wrap.email-search--expanded .email-search__clear,
  .email-page .email-toolbar.email-header #email-search-wrap.email-search--has-text .email-search__clear,
  .email-page .email-toolbar.email-header #email-search-wrap:has(#email-search-input:focus) .email-search__clear {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
  }

  .email-page .email-toolbar.email-header #email-search-wrap.email-search--expanded #email-search-input,
  .email-page .email-toolbar.email-header #email-search-wrap.email-search--has-text #email-search-input,
  .email-page .email-toolbar.email-header #email-search-wrap:has(#email-search-input:focus) #email-search-input {
    padding: 0 48px 0 34px !important;
  }

  /* Burger/folder toggle: 44x44 */
  #email-folder-toggle.calm-drawer-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #3A2F26;
    cursor: pointer;
    transition: background-color 140ms ease;
    flex: 0 0 44px !important;
    padding: 0;
  }

  #email-folder-toggle.calm-drawer-trigger:hover {
    background: rgba(110, 138, 126, 0.10);
  }

  #email-folder-toggle.calm-drawer-trigger:focus-visible {
    outline: 2px solid #6E8A7E;
    outline-offset: 2px;
  }

  #email-folder-toggle.calm-drawer-trigger svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
    fill: none;
  }

  /* Hide toolbar-left flex wrapper on mobile to flatten layout */
  .email-page .email-toolbar.email-header .email-toolbar-left {
    display: contents !important;
  }

  .email-page .email-toolbar.email-header .email-toolbar-leading {
    display: contents !important;
  }

  .email-page .email-toolbar.email-header .email-toolbar-trailing {
    display: none !important;
  }

  /* ─── Columns: single-column block ─────────────────────────── */
  .email-columns {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
  }

  /* ─── Folder drawer: fixed slide-from-left ─────────────────── */
  .email-page .email-columns > .email-folders {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 86vw !important;
    max-width: 320px !important;
    z-index: 9200 !important;
    background: #FBF8F2 !important;
    box-shadow: 4px 0 20px -6px rgba(58, 47, 38, 0.18) !important;
    transform: translateX(-100%) !important;
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 16px 12px 24px !important;
    border-right: 1px solid rgba(154, 142, 130, 0.22) !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
  }

  .email-columns > .email-folders::-webkit-scrollbar { width: 6px; }
  .email-columns > .email-folders::-webkit-scrollbar-thumb {
    background: rgba(154, 142, 130, 0.30);
    border-radius: 3px;
  }

  body.calm-drawer-open .email-page .email-columns > .email-folders {
    transform: translateX(0) !important;
  }

  /* ─── Backdrop ──────────────────────────────────────────────── */
  .calm-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 9180;
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body.calm-drawer-open .calm-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* ─── List: full viewport width ─────────────────────────────── */
  .email-columns > .email-list {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    margin: 0;
    padding: 0 12px calc(100px + env(safe-area-inset-bottom));
    background: transparent;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* ─── Close button inside drawer ────────────────────────────── */
  /* List-mode: full-height & edge-to-edge (#1727) */

  .app-layout.email-page .main-content > .email-app.is-list-mode {
    height: calc(100vh - var(--mn-bar-height, 60px));
    height: calc(100dvh - var(--mn-bar-height, 60px));
    max-height: calc(100vh - var(--mn-bar-height, 60px));
    max-height: calc(100dvh - var(--mn-bar-height, 60px));
    padding: 0;
  }

  .email-app.is-list-mode {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .email-app.is-list-mode .email-toolbar.email-header {
    margin: 0;
    padding: 8px 12px;
    width: 100%;
    border-radius: 0;
  }

  .email-app.is-list-mode .email-columns {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  .email-app.is-list-mode .email-columns > .email-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .email-app.is-list-mode .email-list-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }

  .email-app.is-list-mode .email-list-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .email-app.is-list-mode .email-list-section-header,
  .email-app.is-list-mode .email-list-time-group {
    padding-left: 16px;
    padding-right: 16px;
  }

  .email-app.is-list-mode .email-message-item {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    border-left-width: 0;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .email-app.is-list-mode .email-list-loading,
  .email-app.is-list-mode .email-list-state {
    padding-bottom: 16px;
  }

  /* Mobile drawer: keep compose and folder navigation visually separated. */
  .email-page .email-columns > .email-folders .email-rail-header {
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }

  .email-page .email-columns > .email-folders .email-rail-heading {
    display: block !important;
    margin: 18px 0 0 !important;
    padding: 0 4px 8px !important;
    color: rgba(58, 47, 38, 0.55) !important;
    font: 600 11px/1 "Inter", system-ui, sans-serif !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
  }

  .email-page .email-columns > .email-folders .email-rail-heading::before {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    margin: 0 -12px 8px !important;
    background: rgba(58, 47, 38, 0.06) !important;
  }

  .calm-drawer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #5C4D43;
    cursor: pointer;
    transition: background-color 140ms ease;
    padding: 0;
    z-index: 1;
  }

  .calm-drawer-close:hover {
    background: rgba(110, 138, 126, 0.10);
    color: #3A2F26;
  }

  .calm-drawer-close:focus-visible {
    outline: 2px solid #6E8A7E;
    outline-offset: 2px;
  }

  .calm-drawer-close svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    fill: none;
  }

  /* ─── VÆRKTØJER section inside drawer ──────────────────────── */
  .email-drawer-tools {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(154, 142, 130, 0.18);
  }

  .email-drawer-tools-heading {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8A7D74;
    padding: 0 12px 8px;
  }

  .email-drawer-tool-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #3A2F26;
    font-size: var(--font-size-base);
    font-weight: 450;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease;
  }

  .email-drawer-tool-btn:hover {
    background: rgba(110, 138, 126, 0.08);
  }

  .email-drawer-tool-btn:active {
    background: rgba(110, 138, 126, 0.14);
  }

  .email-drawer-tool-btn:focus-visible {
    outline: 2px solid #6E8A7E;
    outline-offset: -2px;
  }

  .email-drawer-tool-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* ─── Open-state suppression ────────────────────────────────── */
  body.calm-drawer-open { overflow: hidden; }

  body.calm-drawer-open .mn-bar,
  body.calm-drawer-open .mn-fab-group {
    visibility: hidden;
    pointer-events: none;
  }

  body.calm-drawer-open .email-toolbar.email-header {
    z-index: 1;
  }
}

/* ─── Reduced motion: mobile drawer ──────────────────────────── */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  body .email-page .email-columns > .email-folders { transition: none !important; }
  .calm-drawer-backdrop { transition: none !important; }
  .email-drawer-tool-btn { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   FULL-BLEED MOBILE SHELL  (max-width: 640px)
   Edge-to-edge app surface, connected header, stable reply footer
   above mobile nav, full-width reader body.
   Approved prototype — issue #1824.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  .app-layout.email-page {
    --email-mobile-nav-height: 60px;
  }

  /* ─── App shell: full-bleed, no outer gutter ─────────────────── */
  .email-page .email-app,
  .email-page .email-app.is-thread-open {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }

  .app-layout.email-page .main-content > #email-app.email-app,
  .app-layout.email-page .main-content > .email-app {
    height: calc(100dvh - var(--email-mobile-nav-height, 60px)) !important;
    max-height: calc(100dvh - var(--email-mobile-nav-height, 60px)) !important;
  }

  /* ─── Toolbar/header: connected, flush, full-width ───────────── */
  .email-page .email-app .email-toolbar,
  .email-page .email-app .email-toolbar.email-header {
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 0 !important;
    background: var(--sk-bg-surface, rgb(250, 250, 248)) !important;
    border-bottom: 1px solid rgba(92, 77, 67, 0.08) !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  /* ─── Columns: full width, no card chrome ────────────────────── */
  .email-page .email-app .email-columns {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  /* ─── Column children: single 12px reading inset ─────────────── */
  .email-page .email-app .email-columns > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* ─── Reader/content: no card chrome on open thread ──────────── */
  .email-page .email-app.is-thread-open .email-reader,
  .email-page .email-app.is-thread-open .email-reader-content {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ─── Reader body: no extra horizontal padding ───────────────── */
  .email-page .email-app .email-reader-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ─── Reply composer: stable footer above #bb-mobile-nav ─────── */
  body.has-mn-bar .email-page .email-reader-reply,
  .email-page .email-app.is-thread-open .email-reader-reply {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    background: var(--sk-bg-surface, rgb(250, 250, 248)) !important;
    border-top: 1px solid rgba(92, 77, 67, 0.08) !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    box-shadow: 0 -4px 14px rgba(92, 77, 67, 0.04) !important;
  }

  /* ─── Scroll-padding: account for sticky reply + nav ─────────── */
  body.has-mn-bar .email-page .email-app .email-columns,
  body.has-mn-bar .email-page .email-app .email-reader,
  body.has-mn-bar .email-page .email-app .email-reader-content {
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ─── Prevent horizontal overflow ────────────────────────────── */
  html,
  body {
    overflow-x: hidden !important;
  }

}


/* (REPLY KEYBOARD OPEN-blokken (640px) er UDGÅET 2026-07-09: driveren
   initReplyFocusViewportController/--email-reply-vh er erstattet af
   chat-portens visual-viewport-pin — se "iOS KEYBOARD PIN" sidst i filen.) */


/* ═══════════════════════════════════════════════════════════════════
   READER OPEN  (max-width: 640px)
   When a thread is open, hide the mobile nav bar entirely and reclaim
   the full viewport height for the reader.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body.email-reader-open #bb-mobile-nav {
    display: none !important;
  }

  body.email-reader-open .app-layout.email-page {
    --email-mobile-nav-height: 0px;
    --mn-bar-height: 0px;
  }

  body.email-reader-open .app-layout.email-page .main-content > #email-app.email-app,
  body.email-reader-open .app-layout.email-page .main-content > .email-app {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TABLET  (min-width: 768px)
   Side-by-side list + reader. Folders still hidden (drawer).
   Restores desktop-like layout for most components.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* ─── App shell ─────────────────────────────────────────────── */

  .app-layout.email-page .main-content > .email-app {
    height: 100dvh;
    max-height: 100dvh;
  }

  /* ─── Toolbar: restore desktop sizing ───────────────────────── */

  .email-toolbar {
    padding: 12px 24px;
    gap: 16px;
    min-height: 56px;
  }

  .email-page .email-toolbar.email-header {
    min-height: 64px !important;
    padding: 14px 9px 14px 0 !important;
  }

  /* Search: inline expand instead of absolute overlay */
  .email-page .email-toolbar.email-header .email-search.email-search--expanded,
  .email-page .email-toolbar.email-header .email-search.email-search--has-text,
  .email-page .email-toolbar.email-header .email-search:has(#email-search-input:focus) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    flex: 1 1 min(340px, 44vw) !important;
    width: min(340px, 44vw) !important;
    min-width: min(220px, calc(100vw - 208px)) !important;
    max-width: min(340px, calc(100vw - 208px)) !important;
  }

  .email-toolbar-icon-btn { width: 36px; height: 36px; }

  /* ─── Search ────────────────────────────────────────────────── */

  .email-search {
    max-width: 480px;
    flex: 1;
  }

  .email-search input {
    min-height: 48px;
    border-radius: 24px;
  }

  /* ─── Account filter ────────────────────────────────────────── */

  .email-account-filter {
    min-height: auto;
    padding: 4px 12px;
    gap: 4px;
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .email-account-chip {
    font-size: var(--font-size-sm);
    max-width: 150px;
    padding: 2px 9px;
    min-height: 24px;
  }

  .cmd-palette-trigger { display: inline-flex; }

  /* ─── Email list: 340px on tablet ───────────────────────────── */

  .email-list {
    width: 340px;
    border-right: 0.5px solid var(--sk-border);
  }

  .email-list-items {
    min-height: auto !important;
    flex: 1 1 auto !important;
  }

  .email-list.mobile-hidden { display: flex; }

  .email-message-item {
    padding: 8px 12px 8px 14px;
    gap: 10px;
  }

  .email-message-item .email-bulk-cb {
    display: none;
    margin: 0;
  }

  .email-message-item .email-message-avatar,
  .email-message-item .email-avatar-stack { display: flex; }

  .email-message-content { min-width: 0; }

  .email-message-meta {
    min-width: auto;
    max-width: none;
    gap: 4px;
  }

  .email-message-time,
  .email-sent-badge { max-width: none; }
  .email-replied-badge { max-width: none; }

  .email-label-pills { max-height: none; }
  .email-label-pill { max-width: none; }
  .email-message-star svg { width: 16px; height: 16px; }

  .email-message-item:hover .email-message-hover-actions { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 120ms ease, visibility 0s; }
  .email-message-item:hover .email-message-time { opacity: 0; }

  .email-list-loading,
  .email-list-state { padding-bottom: 48px; }

  .email-list-state {
    min-height: 200px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .email-list-state-title { font-size: var(--font-size-md); }

  .email-list-state-actions,
  .email-reader-state-actions { width: auto; }

  .email-state-action,
  .email-reader-state-action { min-height: 36px; }

  .email-list-inline-error {
    align-items: center;
    flex-direction: row;
    padding: 8px 16px;
  }

  .email-dense-skeleton-row {
    grid-template-columns: 36px minmax(0, 1fr) 56px;
    min-height: 64px;
    padding: 8px 12px 8px 14px;
  }

  .email-dense-skeleton-row .email-skeleton-avatar { display: block; }
  .email-skeleton-controls { gap: 8px; }

  /* ─── Reader: side-by-side on tablet ────────────────────────── */

  .email-columns { position: static; }

  .email-reader {
    position: static;
    inset: auto;
    background: var(--sk-bg-subtle);
    z-index: auto;
    display: flex;
  }

  .email-reader.mobile-visible { padding-bottom: 0; }

  .email-reader-content { overflow-y: auto; }

  .email-reader-header {
    padding: var(--calm-rh-pad-y) var(--calm-rh-pad-x) calc(var(--calm-rh-pad-y) - 2px);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "meta actions";
    column-gap: var(--calm-rh-gap);
    align-items: start;
  }

  .email-reader-back {
    display: none;
  }

  .email-reader-actions {
    grid-area: actions;
    gap: 6px;
    padding: 0;
    justify-content: flex-start;
  }

  .email-reader-meta {
    grid-area: meta;
    margin-bottom: 0;
    padding: 0;
  }

  .email-reader-from {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
    min-width: 0;
    column-gap: var(--calm-rh-meta-gap);
    row-gap: 2px;
  }

  .email-reader-from .email-reader-name {
    overflow: visible;
    text-overflow: initial;
    white-space: normal;
  }

  .email-reader-details-toggle {
    display: inline;
  }

  .email-reader-header.show-details .email-reader-details {
    display: block;
  }

  .email-reader-close {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 0;
    box-sizing: border-box;
  }

  .email-reader-close svg { width: 20px; height: 20px; }

  .email-reader-subject {
    font-size: var(--calm-rh-subject-size);
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .email-action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .email-action-btn svg { width: 18px; height: 18px; }
  .email-action-divider { display: block; }

  .email-reader-body {
    flex: 1;
    overflow: hidden;
  }

  .email-reader-state {
    min-height: auto;
    padding: 48px 24px;
  }

  .email-reader-state-title { font-size: var(--font-size-md); }

  .email-reader-state-copy,
  .email-reader-state-note { font-size: var(--font-size-base); }

  .email-reader-empty { padding: 32px 24px; }
  .email-reader-empty svg { width: 40px; height: 40px; }
  .email-reader-empty p { font-size: var(--font-size-base); }

  /* ─── AI summary ────────────────────────────────────────────── */

  .email-ai-summary-line {
    padding: 8px 16px;
    font-size: var(--font-size-base);
  }

  .email-chips-list { padding: 8px 16px 12px; }
  .email-chips-label { padding: 8px 16px 0; }

  /* ─── Attachments ───────────────────────────────────────────── */

  .email-attachments-header { padding: 6px 16px; min-height: 22px; }
  .email-attachments-list { padding: 0 16px 12px; }
  .email-attachment-name { max-width: 220px; }
  .email-attachment-download { min-width: auto; min-height: auto; }

  /* ─── Compose: dialog mode ──────────────────────────────────── */

  .email-compose-dialog {
    width: 680px !important;
    height: auto !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 48px) !important;
    border-radius: var(--radius-lg);
    margin: auto !important;
  }

  .email-compose-titlebar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .email-compose-footer { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

  .email-compose-send { position: static; }
  .email-compose-footer { padding-bottom: 8px; }

  .email-compose-footer .btn { min-height: 36px; }

  .email-compose-toggle-cc button {
    min-height: auto;
    font-size: var(--font-size-sm);
    padding: 4px 0;
  }

  .email-compose-toolbar {
    overflow-x: visible;
    flex-wrap: wrap;
    padding: 4px 12px;
  }

  .chip-input-container { min-height: 38px; }
  .email-from-trigger { min-height: 36px; }
  .email-compose-field input { min-height: 40px; }

  /* ─── Overlays: restore as dropdowns ────────────────────────── */

  .email-vector-overlay {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0;
    right: auto;
    border-radius: var(--radius-lg, 12px);
    max-height: 400px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 200;
  }

  .email-accounts-dialog {
    width: auto;
    max-width: 480px;
    border-radius: var(--radius-lg);
    max-height: 80vh;
    position: relative;
    bottom: auto;
  }

  .email-more-dropdown {
    position: absolute !important;
    bottom: auto !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    min-width: 180px;
    max-height: none;
    border-radius: var(--radius-md);
    padding: 4px 0;
    overflow-y: visible;
    animation: none;
  }

  .email-more-item {
    padding: 8px 16px;
    min-height: 36px;
    font-size: var(--font-size-sm);
  }

  .email-more-item svg { width: 16px; height: 16px; }

  .email-snooze-dropdown {
    position: absolute !important;
    bottom: auto !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    min-width: 200px;
    max-height: none;
    border-radius: var(--radius-md);
    padding-bottom: 4px;
    overflow-y: visible;
    animation: none;
  }

  .email-snooze-option {
    padding: 8px 16px;
    min-height: 36px;
    font-size: var(--font-size-sm);
  }

  .email-schedule-dropdown {
    position: absolute !important;
    bottom: auto !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    min-width: 240px;
    max-height: none;
    border-radius: var(--radius-md);
    padding: 4px 0 !important;
    margin-bottom: 0 !important;
    animation: none;
    z-index: 10010 !important;
    overflow-y: visible;
  }

  .email-schedule-option {
    padding: 8px 16px;
    min-height: 36px;
    font-size: var(--font-size-sm);
  }

  .email-schedule-custom { padding: 8px 16px; }

  .email-schedule-picker {
    min-height: 36px;
    font-size: var(--font-size-base);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
  }

  .email-schedule-confirm {
    min-height: 36px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
  }

  .email-schedule-arrow { min-width: 36px; min-height: 36px; }

  /* ─── Emoji picker ──────────────────────────────────────────── */

  .email-emoji-picker {
    position: fixed !important;
    width: 320px !important;
    max-width: 320px !important;
    height: 360px !important;
    max-height: 400px;
    border-radius: var(--radius-lg);
    padding-bottom: 0;
    animation: none;
  }

  .email-emoji-search { padding: 8px 12px 4px; }

  .email-emoji-search-input {
    padding: 6px 10px;
    font-size: var(--font-size-base);
    min-height: 32px;
  }

  .email-emoji-categories { padding: 2px 8px; gap: 0; }
  .email-emoji-categories button { width: 32px; height: 32px; font-size: var(--font-size-md); }

  .email-emoji-grid { padding: 4px 8px; }
  .email-emoji-grid-inner { grid-template-columns: repeat(8, 1fr); gap: 0; }

  .email-emoji-btn {
    min-width: 32px;
    min-height: 32px;
    font-size: var(--font-size-xl);
  }

  .email-emoji-empty { padding: 16px; font-size: var(--font-size-base); }

  .email-emoji-skin-picker {
    position: fixed !important;
    width: auto !important;
    padding: 8px;
    padding-bottom: 8px;
    gap: 4px;
    border-radius: var(--radius-md);
    animation: none;
  }

  .email-emoji-skin-btn { width: 32px; height: 32px; font-size: var(--font-size-xl); }

  /* ─── Bulk actions ──────────────────────────────────────────── */

  .email-bulk-icon { min-width: 36px; min-height: 36px; }

  .email-list > .email-bulk-bar.email-bulk-bar {
    gap: 8px;
    padding: 8px 16px;
  }

  .email-bulk-spacer { display: block; }

  .email-bulk-actions {
    display: flex;
    flex: none;
    grid-template-columns: none;
    gap: 4px;
  }

  .email-bulk-actions .email-bulk-icon { width: auto; }
  .email-bulk-progress { max-width: none; padding: 10px 16px; }
  .email-bulk-progress-text { overflow: visible; }

  /* ─── Thread ────────────────────────────────────────────────── */

  .email-thread-msg-header { gap: 8px; padding: 8px 16px; }
  .email-thread-avatar { width: 28px; height: 28px; font-size: var(--font-size-sm); }
  .email-thread-message.expanded .email-thread-avatar { width: 32px; height: 32px; font-size: var(--font-size-sm); }
  .email-thread-msg-sender,
  .email-thread-msg-snippet,
  .email-thread-msg-date { font-size: var(--font-size-sm); }
  .email-thread-message.expanded .email-thread-msg-body { padding: 0 16px 12px; }
  .email-thread-message.expanded .email-thread-msg-header { padding: 8px 16px; }
  .email-thread-older-btn { padding: 8px 16px; min-height: 36px; font-size: var(--font-size-sm); }
  /* ─── Analytics ─────────────────────────────────────────────── */

  .email-analytics { padding: 16px; }
  .email-analytics-cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
  .email-stat-card { padding: 16px; }
  .email-stat-value { font-size: var(--font-size-4xl); }
  .email-stat-label,
  .email-hour-label { font-size: var(--font-size-sm); }
  .email-stat-bar-label { font-size: var(--font-size-sm); min-width: 100px; }
  .email-stat-bar-value { font-size: var(--font-size-sm); }
  .email-analytics-hours { height: 80px; gap: 2px; }
  .email-stat-bar-row { gap: 8px; }

  /* ─── Snooze / follow-up / reply-later ──────────────────────── */

  .snooze-until-badge { font-size: var(--font-size-sm); padding: 2px 8px; }
  .snooze-remove-btn { min-width: 32px; min-height: 32px; }
  .email-snooze-confirm { min-height: 36px; padding: 8px 16px; }
  .reply-later-wait { font-size: var(--font-size-sm); padding: 2px 8px; }
  .reply-later-remove-btn { min-width: 32px; min-height: 32px; }

  /* ─── Chips ─────────────────────────────────────────────────── */

  .email-chip { min-height: 36px; padding: 6px 14px; }
  .email-context-item { min-height: 36px; padding: 8px 12px; }

  .email-reply-chip {
    min-height: 32px;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
  }

  /* ─── Tour tooltip ──────────────────────────────────────────── */

  .email-tour-tooltip:not([data-position="center"]) {
    max-width: 400px;
    left: auto !important;
    right: auto !important;
  }

  .email-tour-text { font-size: var(--font-size-md); }

  .email-tour-next,
  .email-tour-skip {
    min-height: 36px;
    padding: 8px 16px;
    font-size: var(--font-size-base);
  }

  /* ─── Toasts ────────────────────────────────────────────────── */

  .email-toast { bottom: 24px; }
  .email-undo-toast { bottom: 24px; }

  .email-undo-action-toast {
    bottom: 24px;
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    min-width: 0;
  }

  /* Desktop: keep the exact email-gmail-redesign.css base position so the
     phone-only body-scoped lift above changes nothing at >=768px. */
  body .email-undo-action-toast {
    bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  }

  /* ─── Close buttons ─────────────────────────────────────────── */

  .email-accounts-close,
  .email-reader-close {
    width: 36px;
    height: 36px;
    padding: 0;
    box-sizing: border-box;
  }

  .email-accounts-close svg,
  .email-reader-close svg { width: 20px; height: 20px; }

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

  .email-settings-close { width: 32px; height: 32px; padding: 4px; }
  .email-settings-close svg { width: 20px; height: 20px; }
  .email-settings-content { flex-direction: row; }

  .email-settings-tabs {
    flex-direction: column;
    width: 200px;
    overflow-x: visible;
    border-right: 0.5px solid rgba(0, 0, 0, 0.08);
    border-bottom: none;
    padding: 8px;
    gap: 2px;
  }

  .email-settings-tab {
    min-height: 36px;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    justify-content: flex-start;
    text-align: left;
    border-bottom: none;
    border-radius: var(--radius-sm);
  }

  .email-settings-tab.active {
    background: rgba(0, 0, 0, 0.07);
    border-bottom-color: transparent;
  }

  .email-settings-tab svg { width: 18px; height: 18px; }
  .email-settings-tab span { font-size: var(--font-size-sm); }
  .email-settings-form-field select { min-height: 36px; }

  .email-account-disconnect .btn,
  .email-account-disconnect button {
    min-height: 36px;
    min-width: auto;
    padding: 6px 16px;
  }

  /* ─── ECT ───────────────────────────────────────────────────── */

  .ect-btn { min-width: 36px; min-height: 36px; }
  .ect-dropdown-toggle { font-size: var(--font-size-sm); }

  /* Restore readable sig-toolbar dropdown toggles on desktop */
  .sig-toolbar .ect-dropdown-toggle { min-width: 56px; padding: 4px 10px; gap: 4px; }

  /* ─── Touch: relax phone-specific overrides ─────────────────── */

  .email-page button,
  .email-page [role="button"],
  .email-page [role="tab"] {
    min-width: auto;
    min-height: auto;
  }

  .email-message-item:active {
    background: transparent;
    transition: background 120ms ease;
  }

  .email-page button:active:not(:disabled),
  .email-page a[href]:active,
  .email-page [role="button"]:active,
  .email-page [role="tab"]:active {
    opacity: 1;
  }

  .email-action-btn:active,
  .email-toolbar-btn:active,
  .email-reply-chip:active {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ─── iOS zoom: not needed on tablet ────────────────────────── */

  .email-compose-field input,
  .email-compose-subject-row input,
  #email-compose-subject,
  .email-compose-body,
  .email-compose-body .ql-editor,
  .email-reply-input,
  .chip-input-typing,
  #email-search-input,
  .imap-wizard-field input,
  .imap-wizard-field select,
  .ai-prompt-input-row input,
  .ai-preview-refine,
  .email-tone-custom-input,
  .cmd-palette-input,
  .email-snooze-picker,
  .email-schedule-picker {
    font-size: inherit;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   DESKTOP  (min-width: 1024px)
   Full three-column: folders + list + reader.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* Folders: visible */
  .email-folders { display: block; }
  .email-folder-toggle { display: none; }

  /* List: desktop width */
  .email-list { width: 360px; }


  /* Reader close: desktop size */
  .email-reader-close { width: 32px; height: 32px; }
  .email-accounts-close { width: 32px; height: 32px; }

  /* Account chip: full size */
  .email-account-chip {
    max-width: none;
    padding: 2px 10px;
    min-height: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SMALL DESKTOP  (1024–1199px)
   Slightly tighter action buttons and chips.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (max-width: 1199px) {
  .email-action-btn { min-width: 44px; min-height: 44px; }
  .email-reader-close { width: 36px; height: 36px; }

  .email-account-chip {
    padding: 2px 9px;
    min-height: 24px;
    max-width: 156px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY & UTILITY
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }

  .email-message-hover-actions,
  .email-message-time {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .email-skeleton-avatar,
  .email-skeleton-line { animation: none; }

  .email-reader-state-loading .email-reader-state-icon svg { animation: none; }

  .email-reader-more-menu { animation: none; }
  .email-reader-more-item { transition: none; }
}

@media (max-height: 500px) {
  .email-tour-tooltip {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 12px 16px;
  }

  .email-tour-text { font-size: var(--font-size-base); margin-bottom: 8px; }
  .email-tour-step { font-size: var(--font-size-xs); margin-bottom: 4px; }
}

@media print {
  .email-toolbar,
  .email-folders,
  .email-list,
  .email-compose,
  .email-accounts-modal,
  .email-reader-actions,
  .sidebar,
  .mobile-nav { display: none !important; }

  .email-app { height: auto !important; }
  .email-columns { display: block; }
  .email-reader { flex: none; width: 100%; }
  .email-reader-header { border: none; }
  .email-ai-consent-modal { display: none !important; }
}

/* MOBILE READER RETURN TARGETS */
@media (max-width: 600px) {
  #email-reader #email-reader-header .email-reader-back,
  .email-reader-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-area: back !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  #email-reader #email-reader-header .email-reader-actions .email-reader-close,
  #email-reader #email-reader-header .email-reader-actions .email-reader-close-btn,
  .email-reader-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile top-bar alignment pass (2026-07-09, Morten-approved live)
   1) Toolbar: hamburger left, actions (search/account/settings) grouped
      right — kills the scattered space-between distribution.
   2) Inbox/Focus/Later switcher: full width, equal buttons, edges flush
      with the list card (12px) — was hanging at x28 with dead space.
   Cascade note: email-bulk-selection.css (loaded AFTER this file) sets
   .email-list-header padding at ≤767px with !important via 3- and
   4-class selectors (plain + .bulk-mode-active arm) — the extra
   .email-app.is-list-mode class here (5 classes) must stay, or that
   rule wins and the switcher jumps back to x28.
   A11y note: .cl-refresh is deliberately NOT hidden here —
   email-calm-preview.css keeps it as a 1×1 sr-only aria-live region on
   mobile (pull-to-refresh owns the visible refresh); display:none would
   drop it from the accessibility tree.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .email-page .email-app.is-list-mode .email-toolbar.email-header {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .email-page .email-app.is-list-mode .email-toolbar.email-header #email-search-wrap {
    margin-left: auto !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-header {
    padding: 8px 0 10px !important;
  }

  .email-page .email-app.is-list-mode .email-list-title-row {
    width: 100% !important;
  }

  .email-page .email-app.is-list-mode .email-view-switcher {
    display: flex !important;
    width: 100% !important;
  }

  .email-page .email-app.is-list-mode .email-view-switcher__btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    /* Long locales (es "Bandeja de entrada", fr "Boîte de réception") must
       shrink instead of blowing the equal-width promise. */
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .email-page .email-app.is-list-mode .email-list-title-spacer {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile reader pass (2026-07-09, Morten-approved live in device emu)
   1) App toolbar (hamburger/search/account/settings) is LIST context —
      hidden while a mail is open; the back arrow returns to it.
   2) Reader header collapses to ONE row: back | subject+sender | actions
      (was a 2-row grid eating 117px; with the toolbar that put 27% of a
      phone screen above the mail).
   3) Reader goes full-bleed (the 12px side padding read as disconnected).
   4) Reply footer: Reply/Forward/Dictate share ONE row (compressed);
      the input zone wraps to its own full-width pill — close + keyword
      input + mic + Create draft flush inside (was crushed to 45px, so
      dictated text was invisible).
   Selector notes: #email-reader-header#email-reader-header (doubled id)
   deliberately outguns a later-loading grid rule that survives plain
   .email-page scoping; do not "simplify" it. The reply rules ride
   .email-app.is-thread-open + #email-reader-reply: email-reader.css
   styles the same footer through the ID with !important ((1,x,0) beats
   any class-only selector) - class-only versions of these rules were
   DEAD declarations (lens A catch). Speaker follow-fix lives in reader-listen.js
   (mobileRide branch), not here — the anchor stays outside the scroller.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .email-page .email-app.is-thread-open .email-toolbar.email-header {
    display: none !important;
  }

  .email-app.is-thread-open #email-reader-header#email-reader-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
  }

  .email-app.is-thread-open #email-reader-header#email-reader-header .email-reader-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .email-app.is-thread-open #email-reader-header#email-reader-header .email-reader-subject {
    font-size: var(--font-size-base) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .email-app.is-thread-open #email-reader-header#email-reader-header .email-reader-from {
    font-size: var(--font-size-xs) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .email-app.is-thread-open #email-reader#email-reader {
    padding: 0 !important;
  }

  /* Listen-ikonet (anker z:6) transformerer OP forbi header-baandet under
     scroll; headeren er transparent (z:2) saa ikonet laa synligt OVENPAA
     den (Mortens telefon 9/7). Solid flade + hoejere z = ikonet glider
     UNDER, standard sticky-moenster. background-color:inherit = foraeldre-
     fladens farve (#email-reader-content), saa dark mode foelger med. */
  .email-app.is-thread-open #email-reader-header#email-reader-header {
    z-index: 7 !important;
    background-color: inherit !important;
  }

  /* Divider mellem ⋮ og ×: eksakt midte af 8px-gabet (var left:-9px = 12/22-skaev
     visuelt; Morten 9/7). Kun mobil — desktop-offsettet er en anden kontekst.
     Selector bærer #email-reader-header: ejeren er email-calm-preview.css:2737
     (#email-reader-header ... ::before, (1,2,0) !important, senere fil) — den
     første class-only version af denne regel var en død deklaration, fanget
     først i LIVE-QA (string-pin så reglen, ikke kaskaden). */
  .email-app.is-thread-open #email-reader-header .email-reader-actions .email-reader-close-btn::before {
    left: -4px !important;
  }

  .email-app.is-thread-open #email-reader-reply.email-reader-reply {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .email-app.is-thread-open #email-reader-reply .ss-footer-actionbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .email-app.is-thread-open #email-reader-reply .ss-fbtn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    font-size: var(--font-size-xs) !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .email-app.is-thread-open #email-reader-reply .ss-fbtn svg {
    width: 14px !important;
    height: 14px !important;
  }

  .email-app.is-thread-open #email-reader-reply .ss-fbtn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .email-app.is-thread-open #email-reader-reply .email-reply-input-zone {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .email-app.is-thread-open #email-reader-reply .email-reply-input-zone .email-reply-input-wrap {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    background: var(--reply-pill-bg, #FFFEFB) !important;
    border: 1px solid var(--reply-pill-border, rgba(92, 77, 67, 0.16)) !important;
    border-radius: var(--reply-pill-radius, 999px) !important;
    box-shadow: var(--reply-pill-shadow, 0 1px 2px rgba(58, 47, 38, 0.04)) !important;
    padding: 0 6px 0 4px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .email-app.is-thread-open #email-reader-reply .email-reply-input-wrap .email-reply-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--font-size-lg) !important;
    padding: 0 4px !important;
    height: 44px !important;
  }

  /* 44px tap-floor (repo a11y canon) — the 52px pill leaves 4px breathing room */
  .email-app.is-thread-open #email-reader-reply .email-reply-input-wrap .ss-ai-close,
  .email-app.is-thread-open #email-reader-reply .email-reply-input-wrap .email-reply-mic {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
  }

  .email-app.is-thread-open #email-reader-reply .email-reply-input-wrap .email-reply-draft {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-size: var(--font-size-sm) !important;
    white-space: nowrap !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   iOS KEYBOARD PIN — CHAT-PORT  (max-width: 600px)
   Port af /chat/'s BEVISTE keyboard-model (mobile-composer-viewport.js
   + pin-blokken i chat-ny-blod-bolge.css:5130-5414). iOS Safari
   understøtter ikke interactive-widget=resizes-content: når tastaturet
   åbner, beholder LAYOUT-viewporten fuld højde, og iOS panorerer den
   mindre VISUELLE viewport rundt i den — på fokus ned i det tomme
   område under appen (død zone; scrollY forbliver 0, det er et
   visual-viewport-pan, ikke et dokument-scroll).

   Fix (chattens): mens reply-feltet er fokuseret / tastaturet er åbent,
   pin <html>/<body> med position:fixed og FØLG den visuelle viewport —
   height = var(--ss-vv-height), top = var(--ss-vv-offset), begge skrevet
   af mobile-reply-viewport.js på hvert visualViewport resize/scroll.
   Shell'en er en fast flex-kolonne på tråd-åben: #email-reader-body er
   ENESTE scroller (flex:1), reply-footeren en in-flow flex:0-søskende —
   så footeren står altid præcis oven på tastaturet, som i /chat/.

   Kaskade-armor: footer-regler bærer #email-reader-reply (email-reader.css
   ejer footeren med ID+!important); .email-reader-content-scroller-swappet
   overstyrer email-responsive.css:258 (samme fil, senere = vinder). JS-
   klasserne (ss-mobile-kb-open / ss-mobile-input-active / ss-email-thread)
   sættes KUN af mobile-reply-viewport.js.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Tråd åben: klem <html> hele sessionen (ikke kun kb-åben) — iOS kan
     ellers efterlade et residual-scroll-offset når fixed-pinnen fjernes
     (chattens ss-mobile-conv-html-lærdom). */
  html.ss-email-thread {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
  }

  html.ss-mobile-input-active,
  html.ss-mobile-kb-open {
    position: fixed !important;
    top: var(--ss-vv-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
  }
  html.ss-mobile-input-active > body,
  html.ss-mobile-kb-open > body {
    position: fixed !important;
    top: var(--ss-vv-offset, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* App-kæden følger den visuelle viewport (overstyrer 100dvh-reglerne
     i READER OPEN-blokken — samme fil, senere = vinder). */
  html.ss-email-thread body.email-reader-open .app-layout.email-page .main-content,
  html.ss-email-thread body.email-reader-open .app-layout.email-page .main-content > #email-app.email-app,
  html.ss-email-thread body.email-reader-open .app-layout.email-page .main-content > .email-app {
    height: var(--ss-vv-height, 100dvh) !important;
    max-height: var(--ss-vv-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.email-reader-open .email-page .email-app .email-columns {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Scroller-swap: .email-reader-content var mobil-scroller (linje ~258);
     chattens model = shell fast, ÉT indre scroll-område. Header, meeting-
     bar, attachments og footer er flex:0-rækker; kun body scroller. */
  .email-page .email-app.is-thread-open .email-reader.mobile-visible {
    padding-bottom: 0 !important;
  }

  .email-page .email-app.is-thread-open .email-reader-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .email-page .email-app.is-thread-open .email-reader-content > .email-reader-header,
  .email-page .email-app.is-thread-open .email-reader-content > .email-meeting-bar,
  .email-page .email-app.is-thread-open .email-reader-content > .email-reader-attachments {
    flex: 0 0 auto !important;
  }

  .email-page .email-app.is-thread-open .email-reader-content > .email-reader-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .email-app.is-thread-open #email-reader-reply.email-reader-reply {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SETTINGS FULLSCREEN  (max-width: 600px) — skærm 3 i mobil-programmet
   Mortens telefon 9/7: modalen havde afrundede hjørner (fyldte ikke
   skærmen) og kun ét tab-chip var synligt — 4 af 5 sektioner utilgænge-
   lige. email-base.css HAR en ≤600-blok (5096-5130), men den taber
   kaskaden: email-blod-bolge.css (senere fil, #246-overhaul) styler
   dialog/header/tabs med (0,3,0)+!important UDEN media-gate (radius 20,
   sidebar-tabs m. border-right). Dark-varianterne dér er (0,4,0) men
   kun farver/skygge.
   Armor: (0,5,0) — dobbelt-klasse på BÅDE modal- og mål-leddet — vinder
   over alt plausibelt uanset filorden og theme. Layout-only: farver/
   gradienter arver blod-bolge (light+dark).
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .email-page > .email-settings-modal.email-settings-modal {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-dialog.email-settings-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-header.email-settings-header {
    border-radius: 0 !important;
    padding: 12px 16px !important;
    flex: 0 0 auto !important;
  }

  /* Luk-knappen op på 44px-tap-gulvet (repo-a11y-kanon). */
  .email-page > .email-settings-modal.email-settings-modal .email-settings-close.email-settings-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-content.email-settings-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Sidebar-tabs → vandret, scrollbar chip-række: ALLE 5 sektioner
     tilgængelige (Genveje/Filtre/Autosvar/Signatur/Indstillinger). */
  .email-page > .email-settings-modal.email-settings-modal .email-settings-tabs.email-settings-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    border-right: none !important;
    /* Theme-token, ikke haardkodet lys farve (hostile-medium 9/7 honoreret):
       --bb-divider har dark-override i email-blod-bolge.css:2317. */
    border-bottom: 1px solid var(--bb-divider, rgba(92, 77, 67, 0.10)) !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-tabs.email-settings-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-tab.email-settings-tab {
    flex: 0 0 auto !important;
    /* email-base.css:4190 giver width:100% (sidebar-design) -> hver chip
       fyldte hele raekken og kun 1 af 5 var synlig (Mortens telefon 10/7).
       auto = aegte chips, alle fem i baandet. */
    width: auto !important;
    white-space: nowrap !important;
    min-height: 44px !important; /* repo-tap-kanon (hostile-medium 9/7 honoreret) */
    padding: 8px 12px !important;
  }

  /* ── Panel-design (skaerm 3b, Morten 10/7): Autosvar/Signatur/Generelt
     var desktop-layoutede og ubrugelige paa mobil. Én kolonne, fulde
     felter, 16px input-tekst (iOS-zoom-vaern), 44px-mål. Selektorer
     rider modal-armoren (0,3,0)+mål — over base/blod-bolges panelregler. */
  .email-page > .email-settings-modal.email-settings-modal .email-settings-section {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-section-heading {
    font-size: var(--font-size-md) !important;
    margin: 0 0 10px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field > label {
    display: block !important;
    margin-bottom: 6px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="text"],
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="email"],
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="date"],
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="datetime-local"],
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field select,
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-size: var(--font-size-lg) !important; /* 17px-token: <16px = iOS auto-zoom ved fokus (ingen 16px-token findes; base/md=15px er zoom-faelder) */
  }

  /* Generelt-panelets selects (fortryd-forsinkelse, AI-tone) ejes af
     email-blod-bolge.css:3670 med (0,5,0)+!important (13px/34px = ulæselig
     + iOS-zoom-faelde paa mobil). Armor = (0,5,1) via dobbelt-klasse paa
     modal-leddet — slaar ejerens (0,4,1); right-align-aestetikken bevares.
     Fanget i live computed-QA 10/7 (felt-reglen (0,4,1) tabte). */
  .email-page > .email-settings-modal.email-settings-modal .email-settings-section--general .email-settings-toggle-row select {
    font-size: var(--font-size-lg) !important;
    min-height: 44px !important;
    height: auto !important;
    max-width: 60% !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 4px 0 !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-toggle-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-buttons {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-save-btn {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    font-size: var(--font-size-base) !important;
  }

  /* Dato-felter: iOS' UA-stil giver input[type=date] en indre min-bredde
     der ignorerer width:100% (loeb ud over hoejre kant paa Mortens iPhone,
     10/7) og centrerer vaerdien. appearance:none dropper UA-tvangen
     (native picker bevares ved tap); min-width:0 + block + 44px-gulv
     holder geometrien; ::-webkit-date-and-time-value venstrestiller. */
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="date"],
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="datetime-local"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="date"]::-webkit-date-and-time-value,
  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
  }

  /* Baelte: panelet maa ALDRIG scrolle vandret. */
  .email-page > .email-settings-modal.email-settings-modal .email-settings-body.email-settings-body {
    overflow-x: hidden !important; /* fallback: clip er Safari 16+ (hostile-medium 10/7) */
    overflow-x: clip !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-form-field {
    min-width: 0 !important;
  }

  /* Signatur-knapzonen (Find/Gem/Nulstil) var desktop-inline: stablet
     uden luft paa mobil (Morten 10/7). Fuldbredde-stak m. aandehuller;
     Gem beholder primaer-vaegten (48px, save-btn-reglen ovenfor). */
  .email-page > .email-settings-modal.email-settings-modal .sig-find-btn,
  .email-page > .email-settings-modal.email-settings-modal .sig-reset-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-find-btn {
    margin: 14px 0 10px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-reset-btn {
    margin: 10px 0 0 !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-reset-confirm {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-reset-confirm button {
    flex: 1 1 0 !important;
    min-height: 44px !important;
  }

  /* Signatur: kort + editor fuld bredde; compose-genbrugt toolbar wrapper
     i stedet for at loebe ud af skaermen; find-kandidater stakkes. */
  .email-page > .email-settings-modal.email-settings-modal .sig-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-toolbar.email-compose-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px !important;
    overflow-x: visible !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-toolbar .ect-btn,
  .email-page > .email-settings-modal.email-settings-modal .sig-toolbar button {
    min-width: 44px !important; /* repo-tap-kanon (hostile-medium 10/7 honoreret) */
    min-height: 44px !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-editor-area {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 160px !important;
    box-sizing: border-box !important;
    font-size: var(--font-size-lg) !important; /* zoom-vaern, token (se felt-reglen) */
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-find-candidates {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .sig-find-candidate {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .email-page > .email-settings-modal.email-settings-modal .email-settings-body.email-settings-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }
}


/* ─── Mailkonti-modalen bag bundbjaelken (#mobilfix) ──────────────────────────
   renderAccountsModal() (js/modules/accounts.js) saetter dialogen op med INLINE
   styles: position:relative + max-height:calc(100dvh - 64px). Inline slaar
   bottom-sheet-reglen hoejere oppe i denne fil, saa dialogen bliver et centreret
   kort der er 32px fra viewportens over- og underkant. Den faste mobilbjaelke er
   60px + safe-area og ligger paa z-index 9000 (modalen er 1001), saa dialogens
   nederste ~28px — "Rediger signatur"-raekken — forsvinder BAG bjaelken
   (browser-maalt paa 320x568 og 360x740).

   Modalen er position:fixed;inset:0 med align-items:center, saa en padding i
   bunden flytter centreringen op over bjaelken; max-height'erne skal med
   !important for at komme forbi inline-stilen. Gaelder ogsaa IMAP-genlogin-
   dialogen, der genbruger de samme klasser. --mn-bar-height indeholder allerede
   env(safe-area-inset-bottom). ── */
@media (max-width: 767px) {
  body.has-mn-bar .email-accounts-modal {
    padding-bottom: var(--mn-bar-height, 60px);
  }

  body.has-mn-bar .email-accounts-modal .email-accounts-dialog {
    max-height: calc(100dvh - 64px - var(--mn-bar-height, 60px)) !important;
  }

  body.has-mn-bar .email-accounts-modal .email-accounts-body {
    max-height: calc(100dvh - 140px - var(--mn-bar-height, 60px)) !important;
  }

  /* NB: bottom-sheet-reglen hoejere oppe i filen (position:fixed;bottom:0) er i
     praksis daad — inline-stilens position:relative vinder. Den maa IKKE faa en
     bottom-offset her: paa et relativt element ville den FLYTTE dialogen 60px op
     oveni polstringen, og toppen ryger ud over skaermen paa lave viewports
     (browser-maalt: top -28px paa 320x568). Skal sheet-varianten genoplives, skal
     offsetten laegges i selve den regel. */
}