/* ════════════════════════════════════════════════════
   iubi Mail — Design System
   Linear-inspired minimalism + iubi brand identity
   ════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* ─── Design tokens ─── */
:root {
  /* Brand iubi (consistent with iubi.ma) */
  --iubi-blue: #2563eb;
  --iubi-blue-2: #0ea5e9;
  
  /* Surfaces (Linear-inspired) */
  --bg: #FAFAFA;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-hover: #F4F4F5;
  
  /* Text */
  --text: #0A0A0A;
  --text-2: #525252;
  --text-3: #A3A3A3;
  
  /* Borders */
  --border: #E5E5E5;
  --border-2: #D4D4D4;
  --focus-ring: rgba(37, 99, 235, .15);
  
  /* Semantic */
  --success: #059669;
  --success-bg: #ECFDF5;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --info: #0284C7;
  --info-bg: #F0F9FF;
  
  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  
  /* Shadows (subtle, Linear-style) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.08);
  
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  
  /* Transitions */
  --t-fast: 100ms ease-out;
  --t: 150ms ease-out;
  --t-slow: 250ms ease-out;
}

/* ─── Base ─── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--iubi-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Typography ─── */
.h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.text-sm  { font-size: 13px; }
.text-xs  { font-size: 12px; }
.text-muted { color: var(--text-2); }
.text-dim   { color: var(--text-3); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--text);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: #262626; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-2);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text);
}

.btn-accent {
  background: var(--iubi-blue);
  color: #fff;
}
.btn-accent:hover:not(:disabled) { background: #1d4ed8; }

.btn-block { width: 100%; }
.btn-lg { padding: 10px 18px; font-size: 15px; }
.btn-sm { padding: 6px 10px; font-size: 13px; }

/* ─── Inputs ─── */
.input, .select, .textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
  transition: var(--t);
  outline: none;
}
.input:hover, .select:hover { border-color: var(--border-2); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--iubi-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.input::placeholder { color: var(--text-3); }
.textarea { resize: vertical; min-height: 100px; padding: 10px 12px; }

.field { margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.field-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ─── Cards ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-padded { padding: 32px; }

/* ─── Alerts ─── */
.alert {
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 13px;
  border: 1px solid;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.alert-success { background: var(--success-bg); border-color: #A7F3D0; color: var(--success); }
.alert-error   { background: var(--error-bg);   border-color: #FECACA; color: var(--error); }
.alert-warning { background: var(--warning-bg); border-color: #FDE68A; color: var(--warning); }
.alert-info    { background: var(--info-bg);    border-color: #BAE6FD; color: var(--info); }

/* ─── Brand mark (logo) ─── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-mark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--iubi-blue);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700;
}

/* ─── Utilities ─── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.w-full { width: 100%; }
.text-center { text-align: center; }

/* ─── Animations ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  display: inline-block;
}

/* ════════════════════════════════════════════════════
   Mail Dashboard — JS-generated cards (Linear style)
   ════════════════════════════════════════════════════ */

/* ─── Mailboxes ─── */
.mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.mb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: var(--t);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mb-card:hover { border-color: var(--border-2); }

.mb-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mb-ico {
  width: 36px; height: 36px;
  border-radius: var(--r);
  background: var(--iubi-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}
.mb-info { flex: 1; min-width: 0; }
.mb-email {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-name {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.mb-quota {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 4px;
}
.mb-bar {
  width: 100%; height: 4px;
  background: var(--surface-hover);
  border-radius: 999px;
  overflow: hidden;
}
.mb-bar-fill {
  height: 100%;
  background: var(--text);
  border-radius: 999px;
  transition: width var(--t-slow);
}
.mb-bar-fill.warn   { background: var(--warning); }
.mb-bar-fill.danger { background: var(--error); }

.mb-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.mb-btn {
  flex: 1;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
.mb-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-2);
  text-decoration: none;
}
.mb-btn.primary {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.mb-btn.primary:hover { background: #262626; color: #fff; }
.mb-btn.danger:hover {
  background: var(--error-bg);
  color: var(--error);
  border-color: #FECACA;
}

/* ─── Aliases ─── */
.alias-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  margin-bottom: 8px;
  transition: var(--t);
}
.alias-card:hover { border-color: var(--border-2); }
.alias-ico {
  width: 32px; height: 32px;
  border-radius: var(--r);
  background: var(--surface-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.alias-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}
.alias-info b {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alias-info span {
  color: var(--text-3);
  flex-shrink: 0;
}

/* ─── Domains ─── */
.dom-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: var(--t);
  flex-wrap: wrap;
}
.dom-card:hover { border-color: var(--border-2); }
.dom-ico {
  width: 36px; height: 36px;
  border-radius: var(--r);
  background: var(--surface-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dom-info { flex: 1; min-width: 200px; }
.dom-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.dom-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.badge.ok {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #A7F3D0;
}
.badge.warn {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid #FDE68A;
}
.badge.err, .badge.danger {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid #FECACA;
}

/* ─── Empty state (JS-generated) ─── */
.empty .ico {
  font-size: 32px;
  opacity: .4;
  margin-bottom: 8px;
}
.empty h3 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.empty p {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
}

/* ─── DNS section ─── */
.dns-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.dns-domain-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dns-record {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
  word-break: break-all;
}

/* ─── Modals (si utilisées) ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.modal-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Mobile mailbox grid */
@media (max-width: 720px) {
  .mb-grid { grid-template-columns: 1fr; }
  .dom-card { padding: 12px; }
  .dom-meta { gap: 6px; font-size: 11px; }
  .alias-info { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════
   Modals (Linear-style)
   ════════════════════════════════════════════════════ */

/* Old class compatibility */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-bg.show { display: flex; }

.modal-bg .modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 0;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn 200ms ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.modal-body {
  padding: 18px 22px;
}

.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--bg);
}

/* Form group (.fg) — compatibilité */
.fg {
  margin-bottom: 14px;
}
.fg:last-child { margin-bottom: 0; }
.fg label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.fg input,
.fg select,
.fg textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
  transition: var(--t);
  outline: none;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--iubi-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fg-help {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}

/* Boutons confirm/cancel — compatibilité */
.btn-cancel,
.btn-confirm {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--t);
  border: 1px solid transparent;
}
.btn-cancel {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-cancel:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-2);
}
.btn-confirm {
  background: var(--text);
  color: #fff;
}
.btn-confirm:hover { background: #262626; }
.btn-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* Toast notifications (si utilisées) */
.toast {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  animation: toastIn 200ms ease-out;
}
.toast.err { background: var(--error); }
.toast.ok  { background: var(--success); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toast hidden by default — show when .show class added */
.toast {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toast.err { background: var(--error); }
.toast.ok  { background: var(--success); }

/* ════════════════════════════════════════════════════
   Settings — Mobile tabs fix + folder/filter rows
   ════════════════════════════════════════════════════ */

/* Mobile tabs — make them look like proper pills */
@media (max-width: 768px) {
  .tabs {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: none !important;
    background: var(--surface);
    position: sticky;
    top: 50px;
    z-index: 40;
  }
  .tabs::-webkit-scrollbar { display: none; }
  
  .tabs .tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    font-size: 13px !important;
  }
  .tabs .tab-btn:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-2) !important;
  }
  .tabs .tab-btn.active {
    background: var(--text) !important;
    color: #fff !important;
    border-color: var(--text) !important;
  }
}

/* Folder rows (system/custom) — clean Linear style */
#folders-list > div,
.folder-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
}
#folders-list > div:hover { border-color: var(--border-2); }

/* "Système" label discret */
#folders-list .badge-system,
#folders-list small,
.folder-system {
  display: inline-block;
  font-size: 11px !important;
  color: var(--text-3) !important;
  background: var(--surface-hover);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  font-weight: 500;
  text-transform: none;
}

/* Boutons "Supprimer" — moins agressifs */
#folders-list button,
#filters-list button {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--surface) !important;
  color: var(--error) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  transition: var(--t);
}
#folders-list button:hover,
#filters-list button:hover {
  background: var(--error-bg) !important;
  border-color: #FECACA !important;
}

/* Signature toolbar — bouton groupés proprement */
.sig-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 6px !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-wrap: wrap !important;
}
.sig-toolbar .sig-btn {
  border: 1px solid transparent !important;
}
.sig-toolbar .sig-btn:hover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.sig-sep {
  width: 1px !important;
  height: 18px !important;
  background: var(--border) !important;
  margin: 0 4px !important;
}

/* Checkbox + label alignment (Auto-répondeur) */
.fg label[for] + input[type="checkbox"],
input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle;
  margin-right: 6px;
  accent-color: var(--text);
  cursor: pointer;
}

/* Date inputs — pas full width sur desktop */
input[type="date"],
input[type="datetime-local"] {
  max-width: 280px;
}

/* "Enregistrer" button visible */
form button[type="submit"],
button.btn-confirm {
  background: var(--text) !important;
  color: #fff !important;
  border: 1px solid var(--text) !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--r) !important;
  cursor: pointer;
  transition: var(--t);
}
form button[type="submit"]:hover {
  background: #262626 !important;
}

/* ════════════════════════════════════════════════════
   Tabs — fix focus persistant après tap (mobile)
   ════════════════════════════════════════════════════ */

/* Reset focus styles indésirables sur tabs */
.tab-btn:focus,
.tab-btn:focus-visible,
.tab-btn:active {
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Le seul state visible doit être .active (et hover desktop) */
.tab-btn {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  transform: none !important;
}

/* Pas de "stuck" state sur mobile après tap */
@media (max-width: 768px) {
  .tabs .tab-btn:focus,
  .tabs .tab-btn:focus-visible,
  .tabs .tab-btn:active {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  /* SEUL .active garde le style noir */
  .tabs .tab-btn.active,
  .tabs .tab-btn.active:focus,
  .tabs .tab-btn.active:active {
    background: var(--text) !important;
    color: #fff !important;
    border-color: var(--text) !important;
  }
  
  /* Hover désactivé sur touch (évite stuck hover) */
  @media (hover: none) {
    .tabs .tab-btn:hover {
      background: var(--surface) !important;
      color: var(--text-2) !important;
      border-color: var(--border) !important;
    }
    .tabs .tab-btn.active:hover {
      background: var(--text) !important;
      color: #fff !important;
    }
  }
}

/* ════════════════════════════════════════════════════
   Tabs mobile — fix tailles aberrantes (oval géant)
   ════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .tabs .tab-btn {
    /* Tailles fixes pour pill propre */
    height: 36px !important;
    line-height: 1 !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    
    /* Pill clean */
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    
    /* Flex pour centrer icon + text */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    
    /* Pas de transform jamais */
    transform: none !important;
    box-shadow: none !important;
    
    /* Anti-overflow */
    box-sizing: border-box !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  /* Icon dans tab */
  .tabs .tab-btn .ico {
    font-size: 14px !important;
    line-height: 1 !important;
  }
  
  /* Active state — même taille, juste couleur */
  .tabs .tab-btn.active {
    background: var(--text) !important;
    color: #fff !important;
    border-color: var(--text) !important;
    /* PAS de transform, scale, ou shadow */
    transform: none !important;
    box-shadow: none !important;
    height: 36px !important;
    padding: 0 16px !important;
  }
  
  /* Container des tabs */
  .tabs {
    align-items: center !important;
    padding: 12px 14px !important;
    height: auto !important;
    min-height: 60px !important;
  }
}

/* ════════════════════════════════════════════════════
   Auto-répondeur — checkbox toggle + date inputs fix
   ════════════════════════════════════════════════════ */

/* Checkbox row: aligner label + checkbox proprement */
.fg input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
  accent-color: var(--text);
  vertical-align: middle;
  margin: 0;
  flex-shrink: 0;
}

/* Le pattern: label avec checkbox + texte alignés */
.fg label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  padding: 8px 0 !important;
}

/* Fallback: si checkbox est seul (sans label parent), donner du contexte */
.fg > input[type="checkbox"]:only-child,
.fg > input[type="checkbox"]:first-child {
  margin-top: 6px;
}

/* Pour checkboxes orphelins après label séparé (cas Auto-répondeur actuel) */
.fg label + input[type="checkbox"] {
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Date inputs — propres et avec icone calendar */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  font: inherit !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 8px 12px !important;
  cursor: pointer;
  max-width: 100%;
  width: 100%;
  position: relative;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
  border-color: var(--iubi-blue) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none;
}

/* Calendar picker indicator (Chrome/Safari) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  transition: var(--t);
  filter: invert(0.3);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Empty date placeholder visible (au lieu de vide bizarre) */
input[type="date"]:not(:focus):invalid,
input[type="datetime-local"]:not(:focus):invalid {
  color: var(--text-3);
}

/* Sur mobile, les date inputs sont parfois cassés — forcer largeur raisonnable */
@media (max-width: 768px) {
  input[type="date"],
  input[type="datetime-local"] {
    max-width: 100%;
    min-height: 40px;
  }
}

/* ─── Custom checkbox stylé (option premium) ─── */
/* Si le HTML utilise un pattern différent, on supporte aussi */
.checkbox-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  transition: var(--t) !important;
  margin-bottom: 14px !important;
}
.checkbox-card:hover {
  border-color: var(--border-2) !important;
  background: var(--surface-hover) !important;
}
.checkbox-card input[type="checkbox"] {
  margin-top: 2px !important;
}
.checkbox-card-content {
  flex: 1;
}
.checkbox-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.checkbox-card-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════
   Inbox — Fix mobile click + reader overflow
   ════════════════════════════════════════════════════ */

/* Reader content: contain overflow (texte long, images larges) */
.reader-content {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Email body content (HTML rendu) — empêcher dépassement */
.reader-body,
.reader-content * {
  max-width: 100% !important;
  word-break: break-word;
  overflow-wrap: break-word;
}
.reader-body img,
.reader-content img {
  max-width: 100% !important;
  height: auto !important;
}
.reader-body table,
.reader-content table {
  max-width: 100% !important;
  display: block;
  overflow-x: auto;
}
.reader-body pre,
.reader-body code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Reader pane: hauteur contrôlée */
.reader-pane {
  height: calc(100vh - 52px);
  max-height: calc(100vh - 52px);
  overflow: hidden !important;
}
.reader-pane .reader-content {
  flex: 1;
  min-height: 0; /* CRUCIAL pour flex + overflow */
}

/* ─── Mobile: clic sur message ouvre reader ─── */
@media (max-width: 968px) {
  /* Layout: messages visible par défaut */
  .layout {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 52px) !important;
    overflow: hidden;
  }
  
  /* Sidebar: drawer caché par défaut */
  .sidebar {
    position: fixed !important;
    top: 52px; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    z-index: 50;
  }
  .sidebar.open { transform: translateX(0); }
  
  .sb-overlay {
    display: none;
    position: fixed;
    inset: 52px 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 45;
  }
  .sb-overlay.show { display: block; }
  
  /* Messages pane: visible (full width) */
  .messages-pane {
    border-right: none !important;
    width: 100%;
    height: calc(100vh - 52px);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  
  /* Reader pane: full screen overlay quand .open */
  .reader-pane {
    position: fixed !important;
    inset: 52px 0 0 0 !important;
    background: var(--bg) !important;
    z-index: 30;
    display: none !important;
    flex-direction: column;
    overflow: hidden;
  }
  .reader-pane.open {
    display: flex !important;
  }
  
  /* Bouton "← Retour" visible sur mobile */
  .mobile-back {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
  }
  
  .reader-content {
    margin: 8px !important;
    padding: 14px !important;
  }
  
  /* Compose en plein écran */
  .compose-bg { padding: 0 !important; }
  .compose {
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }
  
  /* Cacher éléments topbar non essentiels */
  .tb-nav { display: none !important; }
  
  /* Drawer button visible */
  .drawer-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Message item: pointer cursor + active feedback */
.msg-item {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.msg-item:active {
  background: var(--surface-hover) !important;
}

/* ════════════════════════════════════════════════════
   Inbox Reader — Fix toolbar overflow + header layout
   ════════════════════════════════════════════════════ */

/* Reader toolbar: scroll horizontal sur mobile au lieu d'overflow */
.reader-toolbar {
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky;
  top: 0;
  z-index: 5;
}
.reader-toolbar .r-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 6px 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
}
.reader-toolbar .r-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}

/* Reader content container — bordered card propre */
.reader-content,
#reader > div:not(.reader-toolbar) {
  margin: 14px !important;
  padding: 22px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}

/* Reader subject (titre du mail) */
.reader-subject,
#reader h1,
#reader h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  margin-bottom: 14px !important;
  line-height: 1.3 !important;
  word-break: break-word;
}

/* Header meta block (De / À / Date) */
.reader-meta,
#reader .meta-block,
#reader .from-row {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 6px 14px !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 0 18px 0 !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
}

/* "De :", "À", "Date :" labels */
.reader-meta strong,
.reader-meta b {
  font-weight: 500 !important;
  color: var(--text-3) !important;
  font-size: 12px !important;
}

/* Reader body (email content area) */
.reader-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Force max-width sur tout dans le reader */
#reader * {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Mobile: padding plus serré, toolbar compact */
@media (max-width: 768px) {
  .reader-content,
  #reader > div:not(.reader-toolbar) {
    margin: 8px !important;
    padding: 14px !important;
  }
  .reader-toolbar {
    padding: 8px 10px !important;
    gap: 4px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .reader-toolbar::-webkit-scrollbar { display: none; }
  .reader-toolbar .r-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .reader-subject {
    font-size: 16px !important;
  }
  .reader-meta {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    font-size: 12px !important;
  }
}

/* ════════════════════════════════════════════════════
   Inbox Reader — Override <style> inline (high specificity)
   ════════════════════════════════════════════════════ */

/* Container du reader — flex column avec scroll */
body #reader {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

/* Toolbar: sticky + scroll horizontal mobile */
body #reader .reader-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
}
body #reader .reader-toolbar::-webkit-scrollbar { display: none; }

body #reader .reader-toolbar .r-btn,
body #reader .reader-toolbar button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 6px 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  font: inherit !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: var(--t) !important;
}
body #reader .reader-toolbar .r-btn:hover,
body #reader .reader-toolbar button:hover {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}
body #reader .reader-toolbar .r-btn.danger:hover,
body #reader .reader-toolbar button.danger:hover {
  background: var(--error-bg) !important;
  color: var(--error) !important;
  border-color: #FECACA !important;
}

/* Contenu scrollable (sous toolbar) */
body #reader > *:not(.reader-toolbar) {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  background: var(--bg) !important;
}

/* Card pour le contenu email */
body #reader .reader-subject {
  display: block !important;
  margin: 14px 14px 0 !important;
  padding: 22px 22px 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

body #reader .reader-meta {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 6px 14px !important;
  margin: 0 14px !important;
  padding: 16px 22px !important;
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  align-items: center !important;
}

body #reader .reader-meta-row {
  display: contents !important;
}
body #reader .reader-meta-label {
  font-size: 12px !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
body #reader .reader-meta-val {
  font-size: 13px !important;
  color: var(--text) !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* Body email (HTML content) */
body #reader .reader-body,
body #reader #r-body {
  margin: 0 14px 14px !important;
  padding: 22px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Tout ce qui est DANS le body email — empêcher overflow */
body #reader .reader-body *,
body #reader #r-body * {
  max-width: 100% !important;
}
body #reader .reader-body img,
body #reader #r-body img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}
body #reader .reader-body table,
body #reader #r-body table {
  max-width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
}
body #reader .reader-body pre,
body #reader #r-body pre,
body #reader .reader-body code,
body #reader #r-body code {
  max-width: 100% !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-x: auto !important;
}

/* Mobile fix */
@media (max-width: 768px) {
  body #reader .reader-subject {
    margin: 8px 8px 0 !important;
    padding: 16px 16px 0 !important;
    font-size: 16px !important;
  }
  body #reader .reader-meta {
    margin: 0 8px !important;
    padding: 12px 16px !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  body #reader .reader-meta-row {
    display: flex !important;
    gap: 8px !important;
    align-items: baseline !important;
  }
  body #reader .reader-body,
  body #reader #r-body {
    margin: 0 8px 8px !important;
    padding: 16px !important;
  }
  body #reader .reader-toolbar {
    padding: 8px 10px !important;
    gap: 4px !important;
  }
  body #reader .reader-toolbar .r-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ════════════════════════════════════════════════════
   Reader meta — collapsed by default (Apple Mail style)
   ════════════════════════════════════════════════════ */

/* Header compact: avatar + nom + date sur 1 ligne */
body #reader .reader-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 22px !important;
  margin: 0 14px !important;
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: var(--t) !important;
}
body #reader .reader-meta:hover {
  background: var(--surface-hover) !important;
}

/* Cacher tous les .reader-meta-row par défaut */
body #reader .reader-meta-row {
  display: none !important;
}

/* Mais montrer SEULEMENT le premier (De :) */
body #reader .reader-meta-row:first-of-type {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Style du premier row (compact: nom seul) */
body #reader .reader-meta-row:first-of-type .reader-meta-label {
  display: none !important;  /* Cacher "De :" */
}
body #reader .reader-meta-row:first-of-type .reader-meta-val {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ajouter une icône chevron pour signaler "cliquable" */
body #reader .reader-meta::after {
  content: '▾';
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform var(--t);
  margin-left: auto;
}

/* État DEPLOYÉ — afficher tous les détails */
body #reader .reader-meta.expanded {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 6px 14px !important;
  align-items: center !important;
}
body #reader .reader-meta.expanded .reader-meta-row {
  display: contents !important;
}
body #reader .reader-meta.expanded .reader-meta-row:first-of-type {
  display: contents !important;
}
body #reader .reader-meta.expanded .reader-meta-row:first-of-type .reader-meta-label {
  display: block !important;
}
body #reader .reader-meta.expanded .reader-meta-row:first-of-type .reader-meta-val {
  font-weight: 400 !important;
  font-size: 13px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body #reader .reader-meta.expanded .reader-meta-label {
  font-size: 12px !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
}
body #reader .reader-meta.expanded .reader-meta-val {
  font-size: 13px !important;
  color: var(--text) !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}
body #reader .reader-meta.expanded::after {
  content: '▴';
  position: absolute;
  top: 14px; right: 22px;
}

/* Ajouter date compact à droite (mode collapsed seulement) */
body #reader .reader-meta-date-compact {
  font-size: 12px !important;
  color: var(--text-3) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
body #reader .reader-meta.expanded .reader-meta-date-compact {
  display: none !important;
}

/* ════════════════════════════════════════════════════
   Mobile: ouvrir reader-pane quand #reader est visible
   ════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  /* Si #reader (à l'intérieur) est affiché, montrer la pane */
  .reader-pane:has(#reader[style*="display: block"]),
  .reader-pane:has(#reader[style*="display:block"]),
  .reader-pane:has(#reader:not([style*="display: none"]):not([style*="display:none"])) {
    display: flex !important;
  }
  
  /* Fallback explicite via .open */
  .reader-pane.open {
    display: flex !important;
    position: fixed !important;
    inset: 52px 0 0 0 !important;
    background: var(--bg) !important;
    z-index: 30 !important;
    flex-direction: column !important;
  }
  
  /* Toujours afficher bouton Retour */
  .reader-pane.open .mobile-back {
    display: inline-flex !important;
  }
}

/* ════════════════════════════════════════════════════
   Email body — Mobile rendering fix (Apple Mail style)
   ════════════════════════════════════════════════════ */

/* Email content container: iframe-like behavior */
body #reader .reader-body,
body #reader #r-body {
  /* Empêcher le contenu HTML d'imposer sa largeur */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  
  /* Texte qui s'adapte à l'écran */
  font-size: 15px !important;
  line-height: 1.6 !important;
  
  /* Scroll horizontal SEULEMENT si vraiment nécessaire */
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* TOUT élément interne — force max-width 100% */
body #reader .reader-body *,
body #reader #r-body * {
  max-width: 100% !important;
  height: auto !important;
}

/* Tables (très courantes dans emails) */
body #reader .reader-body table,
body #reader #r-body table {
  max-width: 100% !important;
  width: 100% !important;
  table-layout: auto !important;
  word-break: break-word !important;
}
body #reader .reader-body table[width],
body #reader #r-body table[width] {
  width: 100% !important; /* Override inline width attribute */
}
body #reader .reader-body td,
body #reader #r-body td,
body #reader .reader-body th,
body #reader #r-body th {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Images — responsive forcées */
body #reader .reader-body img,
body #reader #r-body img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: inline-block;
}

/* Divs avec width fixe (très commun dans emails marketing) */
body #reader .reader-body div[width],
body #reader #r-body div[width],
body #reader .reader-body div[style*="width:"],
body #reader #r-body div[style*="width:"] {
  max-width: 100% !important;
}

/* Liens longs — wrap */
body #reader .reader-body a,
body #reader #r-body a {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* Code & pre */
body #reader .reader-body pre,
body #reader #r-body pre,
body #reader .reader-body code,
body #reader #r-body code {
  max-width: 100% !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

/* ─── Mobile spécifique: texte plus grand, padding compact ─── */
@media (max-width: 768px) {
  body #reader .reader-body,
  body #reader #r-body {
    font-size: 16px !important; /* +1px sur mobile pour lisibilité */
    line-height: 1.65 !important;
    padding: 18px !important;
  }
  
  /* Tables: scroll horizontal au lieu de tout casser */
  body #reader .reader-body table,
  body #reader #r-body table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Le subject reste lisible */
  body #reader .reader-subject {
    font-size: 17px !important;
    padding: 16px 18px 0 !important;
  }
  
  /* Meta compact */
  body #reader .reader-meta {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
}

/* Empêcher zoom auto Safari/Chrome quand on tap les inputs dans le reader */
@media (max-width: 768px) {
  body #reader input,
  body #reader textarea,
  body #reader select {
    font-size: 16px !important; /* iOS ne zoom pas si ≥ 16px */
  }
}

/* ════════════════════════════════════════════════════
   Email body — FORCE reasonable sizes (override inline)
   ════════════════════════════════════════════════════ */

/* Force font-sizes raisonnables, même contre inline styles */
@media (max-width: 768px) {
  
  /* Reset general — texte de base */
  body #reader .reader-body,
  body #reader #r-body,
  body #reader .reader-body *:not(h1):not(h2):not(h3),
  body #reader #r-body *:not(h1):not(h2):not(h3) {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  
  /* Headings — taille raisonnable mobile */
  body #reader .reader-body h1,
  body #reader #r-body h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin: 14px 0 10px !important;
  }
  body #reader .reader-body h2,
  body #reader #r-body h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 12px 0 8px !important;
  }
  body #reader .reader-body h3,
  body #reader #r-body h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 10px 0 6px !important;
  }
  
  /* Tables, td, th — taille text normale */
  body #reader .reader-body td,
  body #reader #r-body td,
  body #reader .reader-body th,
  body #reader #r-body th,
  body #reader .reader-body div,
  body #reader #r-body div,
  body #reader .reader-body p,
  body #reader #r-body p,
  body #reader .reader-body span,
  body #reader #r-body span {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  
  /* Padding interne réduit */
  body #reader .reader-body td,
  body #reader #r-body td {
    padding: 6px 8px !important;
  }
  
  /* Container du email — pas de marges aberrantes */
  body #reader .reader-body > div,
  body #reader #r-body > div,
  body #reader .reader-body > table,
  body #reader #r-body > table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* Background des emails (dark mode aussi) — neutraliser */
  body #reader .reader-body,
  body #reader #r-body {
    background: var(--surface) !important;
    color: var(--text) !important;
  }
}

/* Desktop: garder styles email mais limiter au max */
body #reader .reader-body h1,
body #reader #r-body h1 {
  font-size: 24px !important;
  max-width: 100%;
}
body #reader .reader-body h2,
body #reader #r-body h2 {
  font-size: 20px !important;
}
body #reader .reader-body td,
body #reader #r-body td,
body #reader .reader-body th,
body #reader #r-body th {
  padding: 8px !important;
}

/* ════════════════════════════════════════════════════
   Topbar — Gmail-inspired (clean, search-focused)
   ════════════════════════════════════════════════════ */

.topbar {
  background: var(--surface) !important;
  height: 56px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Drawer button */
.drawer-btn {
  width: 40px; height: 40px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-2);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--t);
  flex-shrink: 0;
}
.drawer-btn:hover { background: var(--surface-hover); color: var(--text); }

/* Brand */
.brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  padding: 0 4px;
}
.brand-logo {
  width: 32px; height: 32px;
  background: var(--iubi-blue);
  color: #fff;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.brand-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-2);
}
.brand-name strong {
  font-weight: 500;
  color: var(--text);
}

/* Search bar — Gmail rounded pill */
.search-bar {
  flex: 1;
  max-width: 720px;
  margin: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 0 14px;
  height: 44px;
  transition: var(--t);
}
.search-bar:hover {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.search-bar:focus-within {
  background: var(--surface);
  border-color: var(--iubi-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.search-icon {
  color: var(--text-3);
  flex-shrink: 0;
  margin-right: 10px;
}
.search-bar input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 14px !important;
  color: var(--text);
  padding: 0;
  height: 100%;
  min-width: 0;
}
.search-bar input::placeholder {
  color: var(--text-3);
}
.search-clear {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--t);
  flex-shrink: 0;
}
.search-clear:hover { background: var(--surface-hover); color: var(--text); }

/* User avatar button */
.user-avatar-btn {
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--t);
}
.user-avatar-btn:hover { background: var(--surface-hover); }

.user-avatar {
  width: 34px; height: 34px;
  background: var(--iubi-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

/* Menu dropdown */
.menu-pop {
  position: absolute !important;
  top: 60px !important;
  right: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
  min-width: 280px !important;
  max-width: 320px !important;
  z-index: 60 !important;
  display: none !important;
}
.menu-pop.show {
  display: block !important;
  animation: menuFadeIn 150ms ease-out;
}
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Account block dans menu */
.menu-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--r);
  margin-bottom: 4px;
}
.menu-account-avatar {
  width: 44px; height: 44px;
  background: var(--iubi-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}
.menu-account-info {
  flex: 1;
  min-width: 0;
}
.menu-account-email {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-account-name {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Menu items */
.menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  transition: var(--t) !important;
}
.menu-item:hover {
  background: var(--surface-hover) !important;
  text-decoration: none !important;
}
.menu-item svg {
  color: var(--text-2);
  flex-shrink: 0;
}
.menu-item-danger {
  color: var(--error) !important;
}
.menu-item-danger svg { color: var(--error); }
.menu-item-danger:hover {
  background: var(--error-bg) !important;
}

/* Divider */
.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* Other mailboxes list */
.menu-mailboxes-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0;
}
.menu-mailbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: var(--t);
}
.menu-mailbox-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.menu-mailbox-avatar {
  width: 28px; height: 28px;
  background: var(--text-3);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .topbar {
    height: 56px !important;
    padding: 0 8px !important;
    gap: 4px !important;
  }
  .brand-name { display: none; }  /* Cacher texte "iubi Mail" sur mobile */
  .brand-logo { width: 32px; height: 32px; }
  
  .search-bar {
    margin: 0 4px;
    height: 40px;
  }
  .search-bar input { font-size: 14px !important; }
  
  .user-avatar { width: 32px; height: 32px; font-size: 13px; }
  
  .menu-pop {
    right: 8px !important;
    min-width: 260px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ════════════════════════════════════════════════════
   Mobile layout — Fix après nouveau header
   ════════════════════════════════════════════════════ */

@media (max-width: 968px) {
  /* Drawer button visible sur mobile */
  .topbar .drawer-btn {
    display: inline-flex !important;
  }
  
  /* Logo iubi Mail (image + text) restent visibles */
  .topbar .brand {
    display: flex !important;
  }
  .topbar .brand-name {
    display: none !important;  /* Cacher "iubi Mail" texte */
  }
  
  /* Layout: 1 colonne sur mobile */
  .layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden;
    position: relative;
  }
  
  /* Sidebar: drawer caché par défaut */
  .sidebar {
    position: fixed !important;
    top: 56px !important; left: 0 !important; bottom: 0 !important;
    width: 280px !important;
    transform: translateX(-100%) !important;
    transition: transform 200ms ease-out !important;
    z-index: 50;
    border-right: 1px solid var(--border) !important;
    background: var(--surface) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  
  /* Overlay quand sidebar ouverte */
  .sb-overlay {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 45;
  }
  .sb-overlay.show { display: block; }
  
  /* Messages pane: visible (full width) */
  .messages-pane {
    border-right: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    background: var(--surface) !important;
  }
  
  /* Reader pane: hidden by default sur mobile */
  .reader-pane {
    display: none !important;
    position: fixed !important;
    inset: 56px 0 0 0 !important;
    background: var(--bg) !important;
    z-index: 40;
  }
  .reader-pane.open {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Mobile back button */
  .mobile-back {
    display: inline-flex !important;
  }
}

@media (max-width: 768px) {
  /* Mobile spécifique: hide email-pill, search reste */
  .topbar .email-pill {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════
   Header — Fix mobile spacing + Upgrade + Apps
   ════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Topbar: spacing correct */
  .topbar {
    padding: 0 6px !important;
    gap: 2px !important;
    height: 56px !important;
  }
  
  /* Drawer + brand: compact */
  .topbar .drawer-btn {
    width: 40px !important; height: 40px !important;
    margin-right: 0 !important;
  }
  .topbar .brand {
    padding: 0 4px !important;
    flex-shrink: 0;
  }
  .topbar .brand-logo {
    width: 30px !important; height: 30px !important;
  }
  .topbar .brand-name { display: none !important; }
  
  /* Search bar: flex et hauteur */
  .topbar .search-bar {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 4px !important;
    height: 38px !important;
    padding: 0 10px !important;
  }
  .search-bar .search-icon { margin-right: 6px !important; }
  .search-bar input { font-size: 14px !important; }
  .search-bar input::placeholder {
    font-size: 12px !important;
    text-overflow: ellipsis;
  }
  
  /* Buttons à droite: tight */
  .topbar .upgrade-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .topbar .apps-btn {
    width: 38px !important; height: 38px !important;
  }
  .topbar .user-avatar-btn {
    width: 40px !important; height: 40px !important;
  }
  .topbar .user-avatar {
    width: 30px !important; height: 30px !important;
    font-size: 12px !important;
  }
}

/* Upgrade button (Gmail style) */
.upgrade-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: linear-gradient(135deg, var(--iubi-blue), #06b6d4);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t);
  text-decoration: none;
  flex-shrink: 0;
}
.upgrade-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
  text-decoration: none;
  color: #fff;
}
.upgrade-btn svg { flex-shrink: 0; }

/* Apps button (9 dots like Google) */
.apps-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: var(--t);
  flex-shrink: 0;
}
.apps-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Apps menu (popup) */
.apps-pop {
  position: absolute;
  top: 60px;
  right: 60px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 320px;
  z-index: 60;
  display: none;
  animation: menuFadeIn 150ms ease-out;
}
.apps-pop.show { display: block; }

.apps-pop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--t);
  text-decoration: none;
  color: var(--text);
}
.app-tile:hover {
  background: var(--surface-hover);
  text-decoration: none;
  color: var(--text);
}

.app-tile-icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.app-tile-icon.mail { background: #2563eb; }
.app-tile-icon.cal { background: #06b6d4; }
.app-tile-icon.contacts { background: #f97316; }
.app-tile-icon.web { background: #7c3aed; }
.app-tile-icon.cloud { background: #10b981; }
.app-tile-icon.billing { background: #f59e0b; }
.app-tile-icon.settings { background: #6b7280; }
.app-tile-icon.support { background: #ec4899; }
.app-tile-icon.import { background: #14b8a6; }

.app-tile-label {
  font-size: 11px;
  text-align: center;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .apps-pop {
    right: 4px !important;
    width: 280px !important;
  }
}

/* ════════════════════════════════════════════════════
   Header — Fix mobile alignment + dropdown position
   ════════════════════════════════════════════════════ */

/* Topbar doit être position: relative pour les popups */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

/* Mobile: forcer alignement parfait */
@media (max-width: 768px) {
  .topbar {
    padding: 0 4px !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  
  /* Drawer compact */
  .topbar .drawer-btn {
    width: 36px !important; height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Brand: juste logo, pas de marge */
  .topbar .brand {
    padding: 0 2px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Search bar: prend tout l'espace dispo */
  .topbar .search-bar {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 4px !important;
    padding: 0 8px !important;
    height: 36px !important;
  }
  
  /* Upgrade button compact */
  .topbar .upgrade-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
  }
  
  /* Apps button + avatar: SANS marge entre eux */
  .topbar .apps-btn,
  .topbar .user-avatar-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  .topbar .user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
}

/* ─── Dropdown positions ─── */
/* Apps popup: position relative au topbar */
.apps-pop {
  position: fixed !important;
  top: 60px !important;
  right: 8px !important;
  z-index: 100 !important;
}

.menu-pop {
  position: fixed !important;
  top: 60px !important;
  right: 8px !important;
  z-index: 100 !important;
}

@media (max-width: 768px) {
  .apps-pop {
    top: 56px !important;
    right: 4px !important;
    left: 4px !important;
    width: auto !important;
    max-width: none !important;
    margin: 4px !important;
  }
  .apps-pop .apps-grid {
    grid-template-columns: repeat(4, 1fr) !important;  /* 4 colonnes sur mobile */
    gap: 2px !important;
  }
  
  .menu-pop {
    top: 56px !important;
    right: 4px !important;
    left: auto !important;
    min-width: 260px !important;
    max-width: calc(100vw - 8px) !important;
  }
}

/* Mobile très petit: Upgrade button cacher texte */
@media (max-width: 480px) {
  .topbar .upgrade-btn span {
    display: none !important;
  }
  .topbar .upgrade-btn {
    padding: 6px 8px !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
  }
  .topbar .upgrade-btn svg {
    margin: 0 !important;
  }
}

/* ════════════════════════════════════════════════════
   New app tile colors
   ════════════════════════════════════════════════════ */
.app-tile-icon.build { background: linear-gradient(135deg, #4338ca, #fb7185); }
.app-tile-icon.marketing { background: linear-gradient(135deg, #f97316, #fbbf24); }
.app-tile-icon.flow { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.app-tile-icon.security { background: linear-gradient(135deg, #dc2626, #f59e0b); }

/* 5 apps: layout en flexible grid */
@media (min-width: 768px) {
  .apps-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .apps-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ════════════════════════════════════════════════════
   DESKTOP — Layout 3 zones: sidebar + center + side strip
   (≥769px only — mobile non affecté)
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  
  /* Layout: sidebar(240) + center(1fr) + strip(56) */
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr 56px;
    height: calc(100vh - 56px);
    overflow: hidden;
  }
  
  /* Sidebar = colonne 1 */
  .sidebar {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    position: static;
    transform: none;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  
  /* Messages + Reader = colonne 2 (center) */
  .messages-pane,
  .reader-pane {
    grid-column: 2;
    height: 100%;
    overflow: hidden;
  }
  
  /* Center toggle: List visible par défaut, Reader caché */
  .layout:not(.show-reader) .messages-pane {
    display: flex;
    flex-direction: column;
  }
  .layout:not(.show-reader) .reader-pane {
    display: none;
  }
  
  /* Click email → Reader visible, List caché */
  .layout.show-reader .messages-pane {
    display: none;
  }
  .layout.show-reader .reader-pane {
    display: flex;
    flex-direction: column;
  }
  
  /* Side strip = colonne 3 */
  .side-strip {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    height: 100%;
  }
  
  .side-strip-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-2);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
  }
  .side-strip-btn:hover {
    background: var(--surface-hover, #f1f3f4);
    color: var(--iubi-blue, #2563eb);
  }
  
  /* Drawer button caché en desktop */
  .drawer-btn {
    display: none;
  }
  /* Overlay sidebar caché en desktop */
  .sb-overlay {
    display: none;
  }
}

/* Side strip caché sur mobile (<769px) */
@media (max-width: 768px) {
  .side-strip {
    display: none;
  }
}

/* ════════════════════════════════════════════════════
   DESKTOP — Reader prend toute la largeur du center
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* #reader = container, prend toute la place */
  .reader-pane #reader {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  
  /* reader-body = contenu, largeur pleine avec marge confortable */
  .reader-pane .reader-body {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px;
    box-sizing: border-box;
  }
  
  /* reader-toolbar reste en haut, pleine largeur */
  .reader-pane .reader-toolbar {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* reader-html (contenu email) prend la largeur dispo */
  .reader-pane .reader-html {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════
   DESKTOP — Force #reader à remplir reader-pane
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* reader-pane = flex column, étirer les enfants horizontalement */
  .layout.show-reader .reader-pane {
    align-items: stretch !important;
  }
  
  /* #reader prend toute la largeur de reader-pane */
  .layout.show-reader .reader-pane #reader {
    width: 100% !important;
    flex: 1 !important;
  }
  
  /* reader-empty aussi (au cas où) */
  .reader-pane #reader-empty {
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════
   DESKTOP — Fix reader-body centrage (flex column)
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* #reader flex column: centrer horizontalement les enfants */
  .layout.show-reader .reader-pane #reader {
    align-items: center !important;
  }
  
  /* reader-toolbar reste pleine largeur (pas centré) */
  .layout.show-reader .reader-pane #reader .reader-toolbar {
    width: 100% !important;
    align-self: stretch !important;
  }
  
  /* reader-body: largeur confortable, centré */
  .layout.show-reader .reader-pane #reader .reader-body {
    width: 100% !important;
    max-width: 1000px !important;
    align-self: center !important;
    margin: 0 auto !important;
    padding: 24px 40px !important;
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════════════
   DESKTOP — FIX grid columns (panel 3 ne doit PAS voler la place)
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Forcer side-strip à EXACTEMENT 56px, colonne 3 */
  .layout .side-strip {
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    grid-column: 3 / 4 !important;
    flex-shrink: 0 !important;
  }
  
  /* Messages + Reader: colonne 2 STRICTE (le grand espace) */
  .layout .messages-pane,
  .layout .reader-pane {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Sidebar: colonne 1 stricte */
  .layout .sidebar {
    grid-column: 1 / 2 !important;
  }
}

/* ════════════════════════════════════════════════════
   DESKTOP — Sidebar toggle (☰ ouvre/ferme comme Gmail)
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* ☰ VISIBLE en desktop (override le display:none) */
  .topbar .drawer-btn {
    display: inline-flex !important;
  }
  
  /* Layout normal: sidebar visible */
  .layout {
    grid-template-columns: 240px 1fr 56px !important;
    transition: grid-template-columns 200ms ease;
  }
  
  /* Layout collapsed: sidebar = 0 (cachée), center s'agrandit */
  .layout.sidebar-collapsed {
    grid-template-columns: 0 1fr 56px !important;
  }
  .layout.sidebar-collapsed .sidebar {
    overflow: hidden !important;
    border-right: none !important;
  }
}


/* ════════════════════════════════════════════════════
   DESKTOP — Sidebar collapsed (icônes via data-icon)
   ════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Collapsed: sidebar = 64px (aligné avec strip) */
  .layout.sidebar-collapsed {
    grid-template-columns: 64px 1fr 56px !important;
  }
  .layout.sidebar-collapsed .sidebar {
    overflow: hidden !important;
    border-right: 1px solid var(--border) !important;
    padding: 8px 0 !important;
    align-items: center !important;
  }
  
  /* Folder collapsed: cacher tout le texte, montrer data-icon */
  .layout.sidebar-collapsed .folder {
    font-size: 0 !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 2px auto !important;
    border-radius: 50% !important;
  }
  .layout.sidebar-collapsed .folder::before {
    content: attr(data-icon);
    font-size: 20px !important;
    line-height: 1 !important;
  }
  /* Cacher badge, titres, footer */
  .layout.sidebar-collapsed .folder-count,
  .layout.sidebar-collapsed .folder-title,
  .layout.sidebar-collapsed .sidebar-footer {
    display: none !important;
  }
  /* Compose button collapsed: cercle avec ✏️ */
  .layout.sidebar-collapsed .compose-btn {
    font-size: 0 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .layout.sidebar-collapsed .compose-btn::before {
    content: "✏️";
    font-size: 18px !important;
    line-height: 1 !important;
  }
  /* folder-section: centrer en collapsed */
  .layout.sidebar-collapsed .folder-section {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}