:root {
  --ink: #e4e4e7;
  --ink2: #a1a1aa;
  --ink3: #71717a;
  --bg: #09090b;
  --bg2: #18181b;
  --bg3: #27272a;
  --bg4: #3f3f46;
  --border: #27272a;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-subtle: rgba(59, 130, 246, 0.15);
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #22c55e;
  --warning: #f59e0b;
  --bounce: #ef4444;
  --unread-dot: #3b82f6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --transition: 0.15s ease;
  color-scheme: dark;
}
[data-theme="light"] {
  --ink: #18181b;
  --ink2: #52525b;
  --ink3: #a1a1aa;
  --bg: #ffffff;
  --bg2: #f4f4f5;
  --bg3: #e4e4e7;
  --bg4: #d4d4d8;
  --border: #e4e4e7;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-subtle: rgba(37, 99, 235, 0.1);
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: var(--accent); text-decoration: none; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  z-index: 10;
}
.topbar-title {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.3px;
}
.topbar-accounts {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar-accounts::-webkit-scrollbar { display: none; }
.account-select {
  padding: 6px 28px 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--bg2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  max-width: 180px;
  min-width: 120px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all var(--transition);
}
.account-select:hover { background-color: var(--bg3); border-color: var(--accent); }
.account-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}
.account-select option {
  background: var(--bg2);
  color: var(--ink);
  padding: 8px;
}
@media (max-width: 600px) {
  .account-select { max-width: 140px; font-size: 12px; }
}
.topbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 16px;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--bg3); color: var(--ink); }
.icon-btn.session-active { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.icon-btn.session-active:hover { background: rgba(74, 222, 128, 0.2); }
.session-counter { font-size: 10px; margin-left: 3px; opacity: 0.9; vertical-align: middle; }

.stats-bar {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.stats-bar::-webkit-scrollbar { display: none; }
.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink2);
  white-space: nowrap;
}
.stat-value { font-weight: 700; color: var(--ink); }
.stat-value.attention { color: var(--danger); }
.stat-value.unread { color: var(--accent); }

.main-content {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: 200px;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  overflow-y: auto;
  flex-shrink: 0;
  padding: 8px;
}
.folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink2);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.folder-item:hover { background: var(--bg3); color: var(--ink); }
.folder-item.active { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.folder-icon { flex-shrink: 0; width: 18px; text-align: center; }
.folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count {
  font-size: 11px;
  background: var(--bg4);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.folder-count.has-unread { background: var(--accent); color: #fff; }

.mail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.filter-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}
.filter-tab {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  font-size: 12px;
  transition: all var(--transition);
}
.filter-tab:hover { background: var(--bg3); color: var(--ink); }
.filter-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.filter-tab .count { margin-left: 4px; opacity: 0.7; }
.search-input-small {
  flex: 1;
  min-width: 120px;
  max-width: 300px;
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  font-size: 12px;
  outline: none;
  transition: border-color var(--transition);
}
.search-input-small:focus { border-color: var(--accent); }

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

.mail-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  align-items: flex-start;
}
.mail-item:hover { background: var(--bg2); }
.mail-item.active { background: var(--accent-subtle); }
.mail-item.unread .mi-from,
.mail-item.unread .mi-subject { font-weight: 600; color: var(--ink); }
.mi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--unread-dot);
  flex-shrink: 0;
  margin-top: 5px;
}
.mi-dot.read { background: transparent; }
.mi-content { flex: 1; min-width: 0; }
.mi-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mi-from {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mi-date { font-size: 11px; color: var(--ink3); white-space: nowrap; flex-shrink: 0; }
.mi-subject {
  font-size: 13px;
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.mi-subject-row { display: flex; align-items: center; gap: 4px; margin-top: 1px; min-width: 0; }
.mi-subject-row .mi-subject { flex: 1; min-width: 0; }
.mi-answered-icon { color: #9ca3af; font-size: 13px; flex-shrink: 0; }
.mi-forwarded-icon { color: #9ca3af; font-size: 13px; flex-shrink: 0; }
.mi-star-icon { color: #f59e0b; font-size: 14px; flex-shrink: 0; }
.mi-preview {
  font-size: 12px;
  color: var(--ink3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 2px;
}
.mi-badges { display: flex; gap: 4px; margin-top: 4px; }
.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-bounce { background: var(--danger); color: #fff; }
.badge-newsletter { background: var(--bg4); color: var(--ink2); }

.mail-actions-inline {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0;
  transition: opacity var(--transition);
}
.mail-item:hover .mail-actions-inline { opacity: 1; }
.action-btn-sm {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 11px;
  transition: all var(--transition);
}
.action-btn-sm:hover { background: var(--bg3); color: var(--ink); }

.reader-panel {
  width: 50%;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.reader-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font-size: 14px;
}
.reader-toolbar {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  transition: all var(--transition);
}
.btn:hover { background: var(--bg3); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-icon { padding: 6px 8px; }

.reader-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rh-subject { font-size: 18px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; }
.rh-meta { font-size: 13px; color: var(--ink2); line-height: 1.8; }
.rh-meta strong { color: var(--ink); font-weight: 500; }
.rh-attachments { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink2);
}

.reader-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
}
.reader-body pre {
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
}
.reader-body .html-content { max-width: 100%; overflow-x: auto; }
.reader-body .html-content img[data-blocked] {
  display: inline-block;
  width: 200px;
  height: 60px;
  background: var(--bg3);
  border: 1px dashed var(--border);
  border-radius: 4px;
  text-align: center;
  line-height: 60px;
  color: var(--ink3);
  font-size: 12px;
}

.compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.compose-panel {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.compose-header h2 { font-size: 15px; font-weight: 600; }
.compose-fields { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.compose-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.compose-field:last-child { border-bottom: none; }
.compose-field label {
  font-size: 13px;
  color: var(--ink3);
  width: 60px;
  flex-shrink: 0;
}
.compose-field input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.compose-ai-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}
.compose-ai-scratchpad {
  padding: 0;
}
.compose-ai-scratchpad-label {
  font-size: 11px;
  color: var(--ink2);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.compose-ai-scratchpad-label span {
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.compose-ai-scratchpad-input {
  width: 100%;
  background: var(--bg2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  overflow: hidden;
  min-height: 44px;
  box-sizing: border-box;
}
.compose-ai-scratchpad-input:focus {
  border-color: var(--accent);
  outline: none;
}
.compose-ai-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.compose-ai-chip {
  background: var(--bg2);
  color: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.compose-ai-chip:hover { background: var(--bg3); border-color: var(--accent); }
.compose-ai-chip:active { transform: scale(0.95); }
.compose-ai-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.compose-ai-sliders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.compose-ai-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compose-ai-slider-label {
  font-size: 11px;
  color: var(--ink2);
  width: 50px;
  flex-shrink: 0;
}
.compose-ai-slider-track {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  outline: none;
}
.compose-ai-slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.compose-ai-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink3);
  margin-top: -2px;
}
.compose-body {
  flex: 1;
  min-height: 200px;
  padding: 14px 18px;
}
.compose-body textarea {
  width: 100%;
  min-height: 200px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  overflow: hidden;
  outline: none;
  box-sizing: border-box;
}
.compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.search-view { flex: 1; display: flex; flex-direction: column; }
.search-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.search-input {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  font-size: 15px;
  outline: none;
}
.search-input:focus { border-color: var(--accent); }
.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.search-input-row { display: flex; gap: 8px; align-items: center; }
.search-input-row .search-input { flex: 1; }

.search-folder-chips { display: flex; gap: 6px; padding: 10px 20px 0; overflow-x: auto; flex-shrink: 0; }
.search-chip {
  padding: 5px 12px; border-radius: 16px; font-size: 12px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--ink2); cursor: pointer; white-space: nowrap; transition: all .15s;
}
.search-chip:hover { border-color: var(--accent); color: var(--ink); }
.search-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.search-result-item {
  display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius);
  cursor: pointer; transition: background .12s;
}
.search-result-item:hover { background: var(--bg2); }
.search-result-item.selected { background: var(--accent-subtle); }
.search-result-item.unread .sr-from, .search-result-item.unread .sr-subject { font-weight: 600; }
.sr-content { min-width: 0; }
.sr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.sr-from { flex: 1; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-date { font-size: 11px; color: var(--ink3); white-space: nowrap; flex-shrink: 0; }
.sr-subject { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-preview { font-size: 12px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.sr-folder-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg3);
  color: var(--ink3); flex-shrink: 0; white-space: nowrap;
}

.search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; color: var(--ink3); }
.search-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.search-empty-text { font-size: 14px; }

.search-section-label { padding: 12px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink3); font-weight: 600; }
.search-recent-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
  cursor: pointer; transition: background .12s;
}
.search-recent-item:hover { background: var(--bg2); }
.search-recent-icon { font-size: 14px; opacity: 0.5; flex-shrink: 0; }
.search-recent-text { flex: 1; font-size: 13px; color: var(--ink); }
.search-recent-remove { background: none; border: none; color: var(--ink3); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.search-recent-remove:hover { background: var(--bg3); color: var(--ink); }

.search-skeleton { padding: 12px; }
.skel-line { height: 12px; border-radius: 6px; background: var(--bg3); margin-bottom: 8px; animation: skel-pulse 1.2s ease-in-out infinite; }
.skel-from { width: 40%; }
.skel-subject { width: 70%; }
.skel-preview { width: 55%; }
@keyframes skel-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }

mark { background: rgba(59, 130, 246, 0.25); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Mobile Search */
.mobile-search-view { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.ms-search-bar-wrap {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0;
}
.ms-search-input {
  flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font-size: 16px; outline: none;
  -webkit-appearance: none;
}
.ms-search-input:focus { border-color: var(--accent); }
.ms-cancel-btn {
  background: none; border: none; color: var(--accent); font-size: 15px;
  cursor: pointer; padding: 6px 2px; white-space: nowrap; flex-shrink: 0;
}

.ms-chips-scroll {
  display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; flex-shrink: 0;
  -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--border);
}
.ms-chip {
  padding: 6px 14px; border-radius: 16px; font-size: 13px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--ink2); cursor: pointer; white-space: nowrap;
  min-height: 32px; transition: all .15s;
}
.ms-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.ms-search-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.ms-result-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); min-height: 44px; cursor: pointer;
  transition: background .12s; -webkit-tap-highlight-color: transparent;
}
.ms-result-item:active { background: var(--bg2); }
.ms-result-item.unread .ms-result-from,
.ms-result-item.unread .ms-result-subject { font-weight: 600; }

.ms-result-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; flex-shrink: 0; margin-top: 2px;
}

.ms-result-body { flex: 1; min-width: 0; }
.ms-result-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ms-result-from { flex: 1; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ms-result-date { font-size: 11px; color: var(--ink3); white-space: nowrap; flex-shrink: 0; }
.ms-result-subject { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-result-preview { font-size: 12px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.ms-folder-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--bg3); color: var(--ink3); flex-shrink: 0; }

.ms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: var(--ink3); }
.ms-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.ms-empty-text { font-size: 15px; }

.ms-section-label { padding: 16px 16px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink3); font-weight: 600; }
.ms-recent-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); min-height: 44px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ms-recent-item:active { background: var(--bg2); }
.ms-recent-icon { font-size: 16px; opacity: 0.4; flex-shrink: 0; }
.ms-recent-text { flex: 1; font-size: 15px; color: var(--ink); }
.ms-recent-remove { background: none; border: none; color: var(--ink3); font-size: 20px; cursor: pointer; padding: 4px 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

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

.settings-view {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 600px;
}
.settings-section { margin-bottom: 28px; }
.settings-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.setting-label { font-size: 14px; }
.toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: var(--bg4);
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
}
.toggle.on { background: var(--accent); }
.toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform var(--transition);
}
.toggle.on::after { transform: translateX(20px); }

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #fff;
  animation: toastIn 0.2s ease;
  max-width: 350px;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--accent); }
.toast-warning { background: var(--warning); color: #000; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink3);
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink3);
  padding: 40px;
}
.empty-state-icon { font-size: 40px; opacity: 0.3; }

.confirm-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.confirm-box h3 { margin-bottom: 12px; font-size: 16px; }
.confirm-box p { margin-bottom: 18px; color: var(--ink2); font-size: 14px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

.ai-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ai-dialog-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.ai-dialog-box h3 { margin-bottom: 14px; font-size: 16px; }
.ai-style-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-style-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 13px;
  transition: all var(--transition);
}
.ai-style-btn:hover, .ai-style-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}
.ai-custom-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 14px;
  outline: none;
}
.ai-custom-input:focus { border-color: var(--accent); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.back-btn-mobile {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink2);
  font-size: 12px;
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .sidebar.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 52px 0 0 0;
    width: 260px;
    z-index: 50;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  .reader-panel { display: none; width: 100%; border-left: none; }
  .reader-panel.mobile-open {
    display: flex;
    position: fixed;
    inset: 52px 0 0 0;
    width: 100%;
    z-index: 40;
    background: var(--bg);
  }
  .back-btn-mobile { display: inline-flex; }
  .mail-panel { width: 100%; }
  .topbar-title { font-size: 14px; }
  .stats-bar { padding: 6px 12px; gap: 12px; }
  .compose-panel { max-height: 100vh; border-radius: 0; }
}

@media (max-width: 1279px) {
  .compose-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .compose-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compose-header {
    position: sticky;
    top: 0;
    background: var(--bg2);
    z-index: 10;
  }
  .compose-body {
    flex: 0 0 auto;
    min-height: 0;
  }
  .compose-body textarea {
    min-height: 200px;
  }
  .compose-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg2);
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .compose-ai-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compose-ai-chip {
    display: inline-block;
    margin-right: 6px;
  }
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 45;
}
.sidebar-overlay.visible { display: block; }

.folder-btn-mobile {
  display: none;
}
@media (max-width: 768px) {
  .folder-btn-mobile { display: inline-flex; }
}

kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  background: var(--bg3);
  color: var(--ink2);
}

/* ─── Desktop-only elements (hidden on mobile) ─────────────────── */
.drag-handle { display: none; }
.reply-panel { display: none; }
.desktop-sidebar-toggle { display: none; }
.desktop-hide { display: none; }
.mobile-hide { display: none; }

/* ─── Desktop Layout ≥1280px ────────────────────────────────────── */
@media (min-width: 1280px) {

  .folder-btn-mobile { display: none !important; }
  .desktop-hide { display: none !important; }
  .mobile-hide { display: inline-flex !important; }
  .desktop-sidebar-toggle { display: inline-flex !important; }

  .main-content {
    display: grid;
    grid-template-columns: var(--w-folder, 180px) 4px var(--w-list, 340px) 4px 1fr 4px var(--w-reply, 380px);
    overflow: hidden;
  }

  .sidebar {
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    transition: none;
  }

  .mail-panel {
    flex: unset;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  .reader-panel {
    width: auto;
    border-left: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .drag-handle {
    display: block;
    width: 4px;
    background: var(--border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
    z-index: 2;
  }
  .drag-handle:hover,
  .drag-handle.dragging { background: var(--accent); }

  .reply-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--bg2);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
  }

  /* Sidebar collapsed state */
  .app.sidebar-collapsed .sidebar {
    overflow: hidden;
  }
}

/* ─── Reply Workspace ────────────────────────────────────────────── */
.rw-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.rw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.rw-header-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rw-header-session {
  font-size: 11px;
  color: #4ade80;
  font-weight: 600;
}

.rw-presets {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.rw-preset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.rw-preset-btn {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 12px;
  text-align: left;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rw-preset-btn:hover,
.rw-preset-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}
.rw-preset-custom {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--ink3);
  font-size: 12px;
  text-align: center;
  transition: all var(--transition);
}
.rw-preset-custom:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rw-proofread-btn {
  margin: 8px 10px 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #0d9488;
  background: rgba(13, 148, 136, 0.1);
  color: #2dd4bf;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.rw-proofread-btn:hover {
  background: rgba(13, 148, 136, 0.2);
  border-color: #2dd4bf;
}
.rw-proofread-btn.loading { opacity: 0.6; pointer-events: none; }

.rw-sliders {
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.rw-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink3);
}
.rw-slider-label { width: 48px; flex-shrink: 0; }
.rw-slider-track {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: var(--bg4);
  outline: none;
  cursor: pointer;
}
.rw-slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.rw-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink3);
  width: 100%;
}

.rw-scratchpad {
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rw-scratchpad-label {
  font-size: 11px;
  color: var(--ink3);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rw-scratchpad-label span { color: var(--ink3); font-size: 10px; }
.rw-scratchpad textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 8px;
  outline: none;
  transition: border-color var(--transition);
  min-height: 60px;
}
.rw-scratchpad textarea:focus { border-color: var(--accent); }

.rw-compose {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px 4px;
}
.rw-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.rw-compose-label {
  font-size: 11px;
  color: var(--ink3);
  font-weight: 600;
}
.rw-compose-actions {
  display: flex;
  gap: 4px;
}
.rw-compose-action {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 11px;
  transition: all var(--transition);
}
.rw-compose-action:hover { background: var(--bg3); color: var(--ink); }
.rw-compose-action.generating { opacity: 0.6; pointer-events: none; }
.rw-compose textarea {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 10px;
  resize: none;
  outline: none;
  transition: border-color var(--transition);
  min-height: 80px;
}
.rw-compose textarea:focus { border-color: var(--accent); }

.rw-ccbcc-section { padding: 4px 12px 0; }
.rw-ccbcc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rw-ccbcc-fields { margin-top: 6px; }

.rw-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  gap: 6px;
}
.rw-send-btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition);
}
.rw-send-btn:hover { background: var(--accent-hover); }
.rw-send-btn:disabled { opacity: 0.5; pointer-events: none; }
.rw-discard-btn {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  transition: all var(--transition);
}
.rw-discard-btn:hover { background: var(--bg3); color: var(--ink); }
.rw-attach-btn {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}
.rw-attach-btn:hover { background: var(--bg3); color: var(--ink); }
.rw-attach-area { padding: 0 10px 6px; }
.rw-attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ─── Send Verify Modal ──────────────────────────────────────────── */
.send-verify-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.send-verify-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  min-width: 280px;
}
.send-verify-label {
  font-size: 13px;
  color: var(--ink2);
  margin-bottom: 16px;
}
.send-verify-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 16px;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1;
  user-select: none;
}
.send-verify-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 28px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  transition: border-color var(--transition);
  margin-bottom: 12px;
}
.send-verify-input:focus { border-color: var(--accent); }
.send-verify-input.error {
  border-color: var(--danger);
  animation: verifyShake 0.3s ease;
}
@keyframes verifyShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.send-verify-hint {
  font-size: 12px;
  color: var(--ink3);
}
.send-verify-hint kbd { margin: 0 2px; }

/* ─── Undo Toast ─────────────────────────────────────────────────── */
.undo-toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 24px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: undoToastIn 0.2s ease;
}
@keyframes undoToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.undo-toast-ring {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.undo-toast-ring svg {
  transform: rotate(-90deg);
}
.undo-toast-ring circle {
  fill: none;
  stroke: var(--bg4);
  stroke-width: 3;
}
.undo-toast-ring circle.progress {
  stroke: #f59e0b;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.undo-toast-text { flex: 1; white-space: nowrap; }
.undo-toast-cancel {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg4);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
}
.undo-toast-cancel:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ─── Settings Panel ─────────────────────────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  backdrop-filter: blur(2px);
}
.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(800px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 201;
  box-shadow: -8px 0 40px rgba(0,0,0,0.3);
  transform: translateX(0);
  transition: transform 0.25s ease-out;
}
.settings-panel.hidden {
  transform: translateX(100%);
}
.settings-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-panel-title {
  font-size: 20px;
  font-weight: 700;
  flex: 1;
}
.settings-panel-title span {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink3);
  margin-left: 6px;
}
.settings-panel-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.settings-panel-close:hover { background: var(--bg3); color: var(--ink); }
.settings-panel-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.settings-tabs {
  width: 200px;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  padding: 8px;
  overflow-y: auto;
  flex-shrink: 0;
}
.settings-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}
.settings-tab-btn:hover { background: var(--bg3); color: var(--ink); }
.settings-tab-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}
.settings-tab-icon { width: 16px; text-align: center; flex-shrink: 0; }
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.settings-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.settings-content .settings-subtitle {
  font-size: 13px;
  color: var(--ink3);
  margin-bottom: 20px;
}
.settings-content .settings-section {
  margin-bottom: 24px;
}
.settings-content .settings-section h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.settings-content .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.settings-content .setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 14px; flex: 1; }
.setting-label small { display: block; font-size: 11px; color: var(--ink3); margin-top: 1px; }
.setting-control { flex-shrink: 0; }
.setting-select {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.setting-select:focus { border-color: var(--accent); }
.setting-input {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 180px;
}
.setting-input:focus { border-color: var(--accent); }
.setting-slider {
  width: 140px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: var(--bg4);
  outline: none;
  cursor: pointer;
}
.setting-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.settings-panel-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink3);
}
.settings-autosave {
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.settings-footer-actions { display: flex; gap: 8px; }

/* Signature editor */
.sig-account-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.sig-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg2);
  cursor: pointer;
  user-select: none;
}
.sig-account-name { font-size: 13px; font-weight: 600; }
.sig-account-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sig-account-status.configured { color: var(--success); }
.sig-account-status.unconfigured { color: var(--ink3); }
.sig-account-body { padding: 12px 14px; border-top: 1px solid var(--border); }
.sig-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition);
  margin-bottom: 8px;
}
.sig-textarea:focus { border-color: var(--accent); }
.sig-footer { display: flex; justify-content: space-between; align-items: center; }
.sig-char-count { font-size: 11px; color: var(--ink3); }
.sig-preview-link { font-size: 11px; color: var(--accent); cursor: pointer; }
.sig-auto-insert {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink2);
}
.sig-vars-hint {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink2);
  margin-bottom: 16px;
}

/* Preset editor */
.preset-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.preset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
}
.preset-item-name { flex: 1; font-size: 13px; }
.preset-item-actions { display: flex; gap: 4px; }
.preset-action-btn {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 11px;
  transition: all var(--transition);
}
.preset-action-btn:hover { background: var(--bg3); }
.preset-action-btn.delete:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Keyboard shortcuts list */
.shortcut-list { display: flex; flex-direction: column; gap: 2px; }
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.shortcut-key { min-width: 80px; flex-shrink: 0; display: flex; gap: 4px; }
.shortcut-desc { font-size: 13px; color: var(--ink2); }

/* ─── Cheatsheet Overlay ──────────────────────────────────────────── */
.cheatsheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.cheatsheet-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.cheatsheet-box h2 { font-size: 16px; margin-bottom: 16px; }
.cheatsheet-group { margin-bottom: 16px; }
.cheatsheet-group h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink3);
  margin-bottom: 8px;
}
.cheatsheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.cheatsheet-row:last-child { border-bottom: none; }
.cheatsheet-key { min-width: 90px; display: flex; gap: 4px; flex-shrink: 0; }
.cheatsheet-desc { font-size: 12px; color: var(--ink2); }

/* ─── Bulk actions bar ────────────────────────────────────────────── */
.bulk-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  animation: undoToastIn 0.2s ease;
}
.bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  margin-right: 4px;
}
.bulk-action-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--transition);
}
.bulk-action-btn:hover { background: var(--bg3); }
.bulk-action-btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.bulk-cancel-btn {
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink3);
  font-size: 12px;
  transition: all var(--transition);
}
.bulk-cancel-btn:hover { color: var(--ink); border-color: var(--ink3); }

/* Thread view */
.thread-message {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.thread-message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.thread-message-header:hover { background: var(--bg3); }
.thread-message-header.expanded { background: var(--bg); }
.thread-msg-from { font-size: 13px; font-weight: 600; flex: 1; }
.thread-msg-date { font-size: 11px; color: var(--ink3); }
.thread-msg-snippet { font-size: 12px; color: var(--ink3); flex: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-msg-chevron { color: var(--ink3); font-size: 10px; flex-shrink: 0; }
.thread-message-body { padding: 14px; border-top: 1px solid var(--border); }

/* Attachment preview */
.attachment-chip {
  cursor: pointer;
  transition: all var(--transition);
}
.attachment-chip:hover { background: var(--bg4); color: var(--ink); }
.attachment-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.attachment-preview-box {
  max-width: 90vw;
  max-height: 90vh;
  background: var(--bg2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
.attachment-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.attachment-preview-title { font-size: 13px; font-weight: 600; }
.attachment-preview-content { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.attachment-preview-content img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 4px; }
.attachment-preview-content iframe { width: 70vw; height: 70vh; border: none; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  (≤ 1279px)
   All rules below are scoped to the mobile-app container or wrapped
   in @media (max-width: 1279px). Desktop (≥ 1280px) is untouched.
   ═══════════════════════════════════════════════════════════════════ */

.mobile-app {
  display: none;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  position: fixed;
  inset: 0;
  padding-top: env(safe-area-inset-top);
}

@media (max-width: 1279px) {
  .app { display: none !important; }
  .mobile-app { display: flex; }
}

@media (min-width: 1280px) {
  .mobile-app { display: none !important; }
}

/* ── Mobile Header ───────────────────────────────────────── */
.mobile-header {
  height: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}
.mh-folder-btn, .mh-back-btn, .mh-cancel-btn {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
  gap: 2px;
  padding: 0 8px;
  touch-action: manipulation;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.mh-folder-btn { color: var(--ink2); font-size: 20px; }
.mh-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}
.mh-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mh-icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
}
.mh-send-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.mh-send-btn:disabled { opacity: 0.35; pointer-events: none; }

/* ── View Stack ──────────────────────────────────────────── */
.mobile-view-stack {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.vs-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg);
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.vs-view.vs-slide-in {
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vs-view.vs-slide-in.vs-active { transform: translateX(0); }
.vs-view.vs-slide-out {
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vs-view.vs-slide-out.vs-leaving { transform: translateX(105%); }
.vs-view.vs-behind {
  transform: translateX(-28%);
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.vs-view.vs-behind.vs-restoring {
  transform: translateX(0);
}
.vs-view.vs-restoring {
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Bottom Tab Bar ──────────────────────────────────────── */
.mobile-tab-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mobile-tab-bar.tab-bar-hidden {
  transform: translateY(100%);
  pointer-events: none;
}
.mtb-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  color: var(--ink3);
  padding: 7px 4px;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 49px;
  transition: color 0.15s;
}
.mtb-tab.active { color: var(--accent); }
.mtb-icon { font-size: 22px; line-height: 1; display: block; }
.mtb-label { font-size: 10px; font-weight: 500; display: block; }

/* ── Pull-to-Refresh ─────────────────────────────────────── */
.ptr-container {
  overflow: hidden;
  transition: height 0.2s ease;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink3);
}
.ptr-container.ptr-visible { height: 44px; }
.ptr-arrow { font-size: 16px; transition: transform 0.2s; display: inline-block; }
.ptr-arrow.ptr-ready { transform: rotate(180deg); }
.ptr-spinner-wrap { display: none; }
.ptr-container.ptr-loading .ptr-spinner-wrap { display: flex; }
.ptr-container.ptr-loading .ptr-arrow { display: none; }

/* ── Mobile Mail List ────────────────────────────────────── */
.mobile-mail-list { flex: 1; display: flex; flex-direction: column; }

.mobile-filter-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.mobile-filter-bar::-webkit-scrollbar { display: none; }
.mobile-filter-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
.mobile-filter-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.mmi-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mmi-swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
}
.mmi-action-left, .mmi-action-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  width: 80px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.mmi-action-left { order: 1; }
.mmi-action-right { order: 3; margin-left: auto; }
.mmi-action-spacer { flex: 1; order: 2; }
.mmi-action-icon { font-size: 20px; }
.mmi-action-left.archive-action { background: var(--accent); }
.mmi-action-right.delete-action { background: var(--danger); }
.mmi-action-left.star-action { background: var(--warning); }
.mmi-action-right.mark-action { background: var(--bg4); color: var(--ink); }

.mmi-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 88px;
  background: var(--bg);
  will-change: transform;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.mmi-dot-col { width: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mmi-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.mmi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.mmi-body { flex: 1; min-width: 0; }
.mmi-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.mmi-from {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mmi-from.mmi-read { font-weight: 400; color: var(--ink2); }
.mmi-date { font-size: 12px; color: var(--ink3); white-space: nowrap; flex-shrink: 0; }
.mmi-row2 { display: flex; align-items: center; gap: 4px; min-width: 0; margin-bottom: 1px; }
.mmi-subject {
  font-size: 14px;
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.mmi-subject.mmi-subj-unread { color: var(--ink); font-weight: 600; }
.mmi-answered-icon { color: #9ca3af; font-size: 14px; flex-shrink: 0; }
.mmi-forwarded-icon { color: #9ca3af; font-size: 14px; flex-shrink: 0; }
.mmi-star-icon { color: #f59e0b; font-size: 14px; flex-shrink: 0; }
.mmi-preview { font-size: 13px; color: var(--ink3); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mmi-cc-row { font-size: 11px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.mmi-checkbox-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  font-size: 13px;
}
.mmi-checkbox-circle.mmi-checked { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Bulk header */
.mobile-bulk-header {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  z-index: 20;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.mbh-cancel, .mbh-all {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 15px;
  padding: 0 10px;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
}
.mbh-count { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }

/* Mobile bulk actions bar */
.mobile-bulk-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
.mbb-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
}
.mbb-btn.mbb-danger { color: var(--danger); border-color: var(--danger); }

/* Infinite scroll */
.mobile-infinite-sentinel { height: 1px; }
.mobile-load-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 8px;
  color: var(--ink3);
  font-size: 13px;
}

/* Empty state */
.mobile-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--ink3);
  text-align: center;
  min-height: 200px;
}
.mobile-empty-icon { font-size: 48px; opacity: 0.3; }
.mobile-empty-text { font-size: 16px; }

/* ── Mobile Reader ───────────────────────────────────────── */
.mobile-reader { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mobile-reader-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.mobile-reader-sender {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
}
.mobile-reader-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.mobile-reader-sender-info { flex: 1; min-width: 0; }
.mobile-reader-name { font-size: 14px; font-weight: 600; }
.mobile-reader-email { font-size: 12px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-reader-to { font-size: 12px; color: var(--ink3); }
.mobile-reader-date { font-size: 12px; color: var(--ink3); flex-shrink: 0; align-self: flex-start; padding-top: 2px; }
.mobile-reader-subject {
  font-size: 24px;
  font-weight: 700;
  padding: 18px 18px 10px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.mobile-reader-body {
  padding: 4px 18px 20px;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  color: var(--ink);
}
.mobile-reader-body .plain-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
.mobile-reader-body .plain-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.mobile-reader-body .plain-content br + br { display: block; content: ''; margin-top: 8px; }
.mobile-reader-body pre { white-space: pre-wrap; word-break: break-word; font: inherit; }
.mobile-reader-body .html-content {
  max-width: 100%;
  overflow-x: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
}
.mobile-reader-body .html-content p { margin: 0 0 12px; }
.mobile-reader-body .html-content p:last-child { margin-bottom: 0; }
.mobile-reader-body .html-content a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.mobile-reader-body .html-content blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border);
  color: var(--ink2);
}
.mobile-reader-body .html-content ul, .mobile-reader-body .html-content ol {
  padding-left: 22px;
  margin: 8px 0;
}
.mobile-reader-body .html-content img { max-width: 100%; height: auto; border-radius: 4px; }
.mobile-reader-meta {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--ink3);
  border-top: 1px solid var(--border);
}
.mobile-reader-attachments { padding: 8px 16px; display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); }

/* ── FAB ─────────────────────────────────────────────────── */
.mobile-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59,130,246,0.45);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s;
}
.mobile-fab:active { transform: translateX(-50%) scale(0.92); box-shadow: 0 2px 8px rgba(59,130,246,0.3); }
.mobile-fab.fab-open { transform: translateX(-50%) rotate(45deg); background: var(--ink3); }
.mobile-fab svg { width: 24px; height: 24px; }

/* FAB Radial Menu */
.fab-menu-active { -webkit-user-select: none; user-select: none; }
.fab-radial-backdrop {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fab-radial-backdrop.visible { opacity: 1; }
.fab-radial-container {
  position: fixed;
  inset: 0;
  z-index: 102;
  pointer-events: none;
}
.fab-radial-item {
  position: fixed;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  -webkit-user-select: none;
  user-select: none;
}
.fab-radial-item.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.fab-radial-item:active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.fab-radial-secondary {
  position: fixed;
  pointer-events: auto;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  justify-content: center;
}
.fab-radial-sec-item {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--ink2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.fab-radial-sec-item.visible {
  transform: scale(1);
  opacity: 1;
}
.fab-radial-sec-item:active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Reply Mobile ────────────────────────────────────────── */
.mobile-reply-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mrv-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.mrv-recipients {
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--border);
}
.mrv-recip-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 14px;
}
.mrv-recip-label { color: var(--ink3); font-size: 13px; min-width: 52px; flex-shrink: 0; }
.mrv-recip-value { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mrv-more-toggle { color: var(--accent); font-size: 13px; cursor: pointer; touch-action: manipulation; margin-left: auto; flex-shrink: 0; }
.mrv-ccbcc-fields { margin-top: 2px; }
.mrv-cc-input { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; font-size: 14px; color: var(--ink); outline: none; }

.mrv-session-banner {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
.mrv-session-banner.mrv-session-on {
  background: rgba(74,222,128,0.12);
  border-bottom-color: rgba(74,222,128,0.3);
  color: #4ade80;
}
.mrv-session-banner.mrv-session-off {
  background: rgba(148,163,184,0.06);
  color: var(--ink3);
  font-weight: 500;
}

.mrv-presets-row {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.mrv-presets-row::-webkit-scrollbar { display: none; }
.mrv-preset-pill {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: all 0.15s;
}
.mrv-preset-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mrv-preset-pill:active { opacity: 0.8; }

.mrv-proofread-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 14px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #0d9488;
  background: rgba(13,148,136,0.08);
  color: #2dd4bf;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.mrv-proofread-btn.loading { opacity: 0.6; }

.mrv-section-header {
  padding: 8px 14px 3px;
  font-size: 12px;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mrv-scratchpad-input {
  display: block;
  margin: 0 14px 4px;
  padding: 10px;
  width: calc(100% - 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: 72px;
  transition: border-color 0.15s;
}
.mrv-scratchpad-input:focus { border-color: var(--accent); }
.mrv-scratchpad-count { padding: 0 14px 6px; font-size: 11px; color: var(--ink3); text-align: right; }

.mrv-compose-area {
  display: block;
  margin: 0 14px 8px;
  padding: 12px;
  width: calc(100% - 28px);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  resize: none;
  outline: none;
  font-family: inherit;
  min-height: 160px;
  transition: border-color 0.15s;
}
.mrv-compose-meta { padding: 2px 14px 4px; display: flex; justify-content: space-between; align-items: center; }
.mrv-compose-label { font-size: 12px; color: var(--ink3); font-weight: 600; }
.mrv-regen-btn-sm {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  line-height: 1;
}
.mrv-regen-btn-sm:active { background: rgba(59, 130, 246, 0.2); transform: scale(0.96); }

.mrv-sliders { padding: 8px 14px 12px; }
.mrv-slider-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); margin-bottom: 8px; }
.mrv-slider-label { width: 52px; flex-shrink: 0; font-size: 11px; }
.mrv-slider-track {
  flex: 1;
  -webkit-appearance: none;
  height: 3px;
  border-radius: 3px;
  background: var(--bg4);
  outline: none;
}
.mrv-slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* Floating send bar */
.mrv-floating-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
.mrv-regen-btn {
  flex: 1;
  padding: 13px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mrv-send-btn {
  flex: 2;
  padding: 13px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mrv-send-btn:disabled { opacity: 0.45; }
.mrv-attach-btn {
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}
.mrv-attach-btn:active { background: var(--bg3); }
.mrv-attach-area { padding: 8px 14px 4px; }
.mrv-attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mrv-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  min-height: 44px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--ink2);
  touch-action: manipulation;
}
.mrv-attach-remove {
  cursor: pointer;
  color: var(--danger);
  margin-left: 4px;
  font-size: 16px;
  padding: 2px 4px;
}

/* ── Bottom Sheet ────────────────────────────────────────── */
.bs-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg2);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: bsSlideUp 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
@keyframes bsSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.bs-handle {
  width: 36px;
  height: 4px;
  background: var(--bg4);
  border-radius: 2px;
  margin: 10px auto 0;
  cursor: grab;
}
.bs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
}
.bs-title { font-size: 17px; font-weight: 700; }
.bs-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  margin: -8px -8px -8px 0;
}

/* ── Verify Sheet ────────────────────────────────────────── */
.verify-content { padding: 4px 24px 16px; text-align: center; }
.vs-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.vs-subtitle { font-size: 14px; color: var(--ink3); margin-bottom: 20px; }
.vs-code-display {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: clamp(36px, 13vw, 56px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.vs-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-size: 28px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 12px;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 10px;
}
.vs-input:focus { border-color: var(--accent); }
.vs-input.vs-error { border-color: var(--danger); animation: verifyShake 0.3s ease; }
.vs-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.vs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: all 0.15s;
}
.vs-dot.vs-dot-filled { background: var(--accent); border-color: var(--accent); }
.vs-hint-text { font-size: 12px; color: var(--ink3); margin-bottom: 16px; }
.vs-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.vs-submit-btn.vs-enabled { opacity: 1; }
.vs-cancel-plain {
  width: 100%;
  padding: 14px;
  border: none;
  background: none;
  color: var(--ink2);
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}

/* ── Mobile Undo Toast ───────────────────────────────────── */
.undo-toast-mobile {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 14px;
  color: var(--ink);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  animation: undoToastIn 0.2s ease;
  cursor: pointer;
}
.utm-ring { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
.utm-ring svg { transform: rotate(-90deg); }
.utm-ring circle { fill: none; stroke: var(--bg4); stroke-width: 3; }
.utm-ring circle.utm-progress { stroke: #f59e0b; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.utm-text { flex: 1; }
.utm-cancel { padding: 5px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg4); color: var(--ink); font-size: 13px; font-weight: 600; touch-action: manipulation; }

/* ── Folder Picker Sheet ─────────────────────────────────── */
.folder-sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
  background: transparent;
  transition: background 0.1s;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.folder-sheet-item:focus,
.folder-sheet-item:focus-visible {
  outline: none;
  box-shadow: none;
}
.folder-sheet-item:active { background: var(--bg3); }
.folder-sheet-item.fsi-active { color: var(--accent); }
.fsi-icon { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }
.fsi-name { flex: 1; font-size: 16px; font-weight: 500; }
.fsi-count {
  font-size: 12px;
  background: var(--bg4);
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--ink2);
}
.fsi-count.fsi-unread { background: var(--accent); color: #fff; }

/* ── Mobile Settings ─────────────────────────────────────── */
.mobile-settings { display: block; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.ms-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 5;
  flex-shrink: 0;
}
.ms-search-bar {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--ink);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
}
.ms-search-bar:focus { border-color: var(--accent); }
.ms-group-label {
  padding: 16px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.ms-group-card {
  margin: 0 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
}
.ms-tab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  min-height: 56px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  touch-action: manipulation;
  background: var(--bg2);
  transition: background 0.1s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  font-size: inherit;
}
.ms-tab-item:last-child { border-bottom: none; }
.ms-tab-item:active { background: var(--bg3); }
.ms-tab-icon { font-size: 22px; width: 34px; text-align: center; flex-shrink: 0; }
.ms-tab-info { flex: 1; min-width: 0; }
.ms-tab-name { font-size: 16px; font-weight: 500; }
.ms-tab-sub { font-size: 13px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tab-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: var(--accent); color: #fff; flex-shrink: 0; }
.ms-tab-chevron { color: var(--ink3); font-size: 14px; flex-shrink: 0; }
.ms-footer {
  padding: 24px 12px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--ink3);
}
.ms-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink3);
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Mobile Settings Detail (level 2) */
.mobile-settings-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.msd-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 40px;
}

/* ── Mobile-specific swipe config (Settings > Mobile tab) ── */
.ms-swipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.ms-swipe-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-swipe-label { font-size: 12px; color: var(--ink3); margin-bottom: 4px; }
.ms-swipe-select {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

/* Touch action for all interactive elements */
button, a, [role="button"], .cursor-pointer {
  touch-action: manipulation;
}

/* Prevent tap delay on mobile */
@media (max-width: 1279px) {
  * { -webkit-tap-highlight-color: transparent; }
  input, textarea, select { font-size: 16px; }
}

/* ── Compact mode (mc.mobile.compact = true) ─────────────── */
.mobile-compact .mmi-content { min-height: 60px; padding: 8px 14px; }
.mobile-compact .mmi-avatar { width: 34px; height: 34px; font-size: 13px; }
.mobile-compact .mmi-from { font-size: 14px; }
.mobile-compact .mmi-subject { font-size: 13px; }
.mobile-compact .mmi-preview { display: none; }

/* ── Thread view (mobile reader) ────────────────────────── */
.thread-message {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 4px 16px;
  overflow: hidden;
  background: var(--bg2);
}
.thread-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  touch-action: manipulation;
  flex-wrap: wrap;
}
.thread-message-header.expanded { background: var(--bg3); }
.thread-msg-from { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-msg-snippet { font-size: 13px; color: var(--ink3); flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; order: 10; }
.thread-msg-date { font-size: 12px; color: var(--ink3); flex-shrink: 0; }
.thread-msg-chevron { font-size: 11px; color: var(--ink3); flex-shrink: 0; }
.thread-message-body {
  padding: 8px 14px 12px;
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid var(--border);
  overflow-x: hidden;
}

/* ── Attachment chip ─────────────────────────────────────── */
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg2);
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  touch-action: manipulation;
}
.attachment-chip:active { background: var(--bg3); }

/* ── iOS Safari: prevent overscroll bounce on body ───────── */
html, body {
  overscroll-behavior: none;
}

/* ── A11y: focus-visible for keyboard users ──────────────── */
@media (max-width: 1279px) {
  button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}


.mtb-session-on {
  background: linear-gradient(to top, rgba(74, 222, 128, 0.22), rgba(74, 222, 128, 0.08));
  color: #4ade80 !important;
}
.mtb-session-on .mtb-icon { color: #4ade80; }
.mtb-session-on .mtb-label {
  color: #4ade80 !important;
  font-weight: 700;
  font-size: 11px;
}
.mtb-session-on::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: mtb-session-pulse 1.6s ease-in-out infinite;
}
@keyframes mtb-session-pulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.5; transform: translateX(-50%) scale(1.3); }
}
.mtb-tab { position: relative; }

.mrv-draft-btn {
  flex: 1;
  padding: 13px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: opacity 0.15s;
}
.mrv-draft-btn:active { background: var(--bg3); transform: scale(0.97); }
.mrv-draft-btn:disabled { opacity: 0.5; }

.ext-image-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--ink2);
}
.ext-image-load-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.ext-image-load-btn:hover { filter: brightness(1.1); }

/* ── Sender Card (shared mobile + desktop) ─────────────── */
.mmi-sender-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--bg2);
  border-radius: 16px;
  margin: 12px 14px 0;
  position: relative;
}
.mmi-sender-card .mmi-sender-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.mmi-sender-card .mmi-sender-info {
  flex: 1;
  min-width: 0;
}
.mmi-sender-card .mmi-sender-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.mmi-sender-card .mmi-sender-email,
.mmi-sender-card .mmi-sender-to,
.mmi-sender-card .mmi-sender-cc {
  font-size: 13px;
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}
.mmi-sender-card .mmi-sender-date {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
}

/* ── Forensics Pill ────────────────────────────────────── */
.mmi-forensics-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  margin: 10px 14px 0;
  transition: background var(--transition);
}
.mmi-forensics-pill:hover { background: var(--bg3); }
.mmi-forensics-pill .mmi-fp-icon {
  font-size: 15px;
  line-height: 1;
}

/* ── Attachments Grid ──────────────────────────────────── */
.mmi-attach-section {
  padding: 0 18px 8px;
}
.mmi-attach-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 12px;
}
.mmi-attach-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.mmi-attach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mmi-attach-card {
  background: var(--bg2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mmi-attach-card:active {
  transform: scale(0.97);
}
.mmi-attach-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg3);
  position: relative;
}
.mmi-attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mmi-attach-thumb .mmi-att-icon {
  font-size: 48px;
  color: var(--ink3);
  opacity: 0.7;
}
.mmi-attach-thumb .mmi-pdf-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.mmi-attach-meta {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmi-attach-meta .mmi-att-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.mmi-attach-meta .mmi-att-size {
  font-size: 11px;
  color: var(--ink3);
  flex-shrink: 0;
}
.mmi-attach-meta .mmi-att-dl {
  font-size: 12px;
  color: var(--ink3);
  flex-shrink: 0;
  margin-left: 2px;
}

/* ── Desktop reader: wider attachment grid ─────────────── */
.mr-sender-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg2);
  border-radius: 16px;
  margin: 0 0 12px;
  position: relative;
}
.mr-sender-card .mr-sender-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.mr-sender-card .mr-sender-info { flex: 1; min-width: 0; }
.mr-sender-card .mr-sender-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.mr-sender-card .mr-sender-email,
.mr-sender-card .mr-sender-to,
.mr-sender-card .mr-sender-cc { font-size: 13px; color: var(--ink3); line-height: 1.5; }
.mr-sender-card .mr-sender-date { position: absolute; top: 16px; right: 20px; font-size: 12px; color: var(--ink3); }
.mr-forensics-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  cursor: pointer;
  margin: 8px 0 12px;
  transition: background var(--transition);
}
.mr-forensics-pill:hover { background: var(--bg3); }
.mr-attach-section { margin-top: 12px; }
.mr-attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.mr-attach-card {
  background: var(--bg2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mr-attach-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* Mail-Body: Plain-Text mit erhaltenen Zeilenumbrüchen */
.mail-body-plain {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.55;
  font-size: 15px;
}
.mail-body-html {
  line-height: 1.55;
  font-size: 15px;
}

/* Status-Bar */
.desktop-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 16px;
  font-size: 12px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.mobile-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 5px;
  font-size: 12px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-clock { font-weight: 600; color: var(--ink); }
.sb-date { color: var(--ink2); }
.sb-sync { margin-left: auto; }
.sb-sync.sb-sync-fresh { color: var(--success); }
.sb-sync.sb-sync-stale { color: var(--ink3); }
.sb-sep { color: var(--ink3); opacity: 0.5; }

/* Pending-Bar */
.pending-bar {
  display: none;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  white-space: nowrap;
  padding: 4px 12px;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.pending-bar.has-items { display: flex; }
.pending-bar::-webkit-scrollbar { display: none; }
.pb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 240px;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pb-pill:hover { background: var(--bg); }
.pb-pill-soon { border-color: var(--accent); }
.pb-pill-warn { border-color: #d4a017; }
.pb-pill-icon { font-size: 13px; flex-shrink: 0; }
.pb-pill-text { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.pb-pill-time { color: var(--ink3); flex-shrink: 0; }
@media (max-width: 1279px) {
  .desktop-pending-bar { display: none !important; }
  .mobile-pending-bar.has-items { display: flex; }
  .pb-pill { font-size: 11px; padding: 3px 8px; }
}
@media (min-width: 1280px) {
  .mobile-pending-bar { display: none !important; }
}

/* Quote-Level-Styling */
.mail-body-plain .quote-1,
.mail-body-html blockquote,
.reader-body .quote-1 {
  border-left: 3px solid #444;
  padding-left: 12px;
  color: #888;
  margin: 8px 0;
}
.mail-body-plain .quote-2,
.mail-body-html blockquote blockquote,
.reader-body .quote-2 {
  border-left: 3px solid #333;
  padding-left: 12px;
  color: #707070;
  margin: 6px 0;
}
.mail-body-plain .quote-3,
.mail-body-html blockquote blockquote blockquote,
.reader-body .quote-3 {
  border-left: 3px solid #2a2a2a;
  padding-left: 12px;
  color: #5e5e5e;
  margin: 4px 0;
}

/* Reply-Header ("Am ... schrieb ...") */
.mail-body-plain .reply-header,
.mail-body-html .reply-header,
.reader-body .reply-header {
  font-size: 13px;
  color: #888;
  margin: 12px 0 4px;
}

/* Signatur */
.mail-body-plain .signature,
.mail-body-html .signature,
.reader-body .signature {
  font-size: 13px;
  color: #888;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid #2a2a2a;
}