/* ═══════════════════════════════════════════════════════════════════════════
   MeyerMail – Modern Webmail CSS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colors */
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: #eef2ff;
  --primary-glow: rgba(99, 102, 241, 0.15);
  --accent: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Light theme */
  --bg-app: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-active: #eef2ff;
  --bg-input: #f1f5f9;
  --bg-card: #ffffff;
  --bg-modal: #ffffff;
  --bg-badge: #ef4444;

  --border: #e2e8f0;
  --border-light: #f1f5f9;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --sidebar-width: 260px;
  --header-height: 60px;

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Alias-Variablen ──────────────────────────────────────────────────────────
   --bg, --bg-secondary und --text wurden an vielen Stellen benutzt, waren aber NIE
   definiert. Eine Regel wie `background: var(--bg-secondary)` ist damit ungültig und
   fällt auf „transparent" zurück — genau deshalb schimmerten Chat-Schublade, Blöcke
   und Dialoge durch und die blauen Knöpfe strahlten hindurch.
   Die Aliase stehen auf demselben Element wie die Themes, deshalb greifen sie
   automatisch für jedes Theme. */
:root {
  --bg: var(--bg-app);
  --bg-secondary: var(--bg-panel);
  --text: var(--text-primary);
}

/* ═══════════════════ DARK THEME ═══════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app: #0f172a;
  --bg-sidebar: #1e293b;
  --bg-panel: #1e293b;
  --bg-hover: #334155;
  --bg-active: #312e81;
  --bg-input: #334155;
  --bg-card: #1e293b;
  --bg-modal: #1e293b;

  --border: #334155;
  --border-light: #1e293b;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.4);

  --primary-light: #312e81;
  --primary-glow: rgba(99, 102, 241, 0.25);
}

/* ═══════════════════ ULTRA DARK THEME ══════════════════════════════════════
   Maximaler Kontrast für LED/OLED: reinschwarzer Hintergrund, hellgraue Schrift,
   monochrome Linien (etwas dunkler als die Schrift). Bewusst (fast) einfarbig. */
[data-theme="ultradark"] {
  --primary: #c8c8c8;
  --primary-hover: #ffffff;
  --primary-light: #1a1a1a;
  --primary-glow: rgba(255,255,255,0.10);
  --accent: #d0d0d0;

  --bg-app: #000000;
  --bg-sidebar: #000000;
  --bg-panel: #000000;
  --bg-hover: #161616;
  --bg-active: #242424;
  --bg-input: #0d0d0d;
  --bg-card: #050505;
  --bg-modal: #050505;
  --bg-badge: #c8c8c8;

  --border: #8a8a8a;        /* einfarbige, gut sichtbare Linien */
  --border-light: #3a3a3a;

  --text-primary: #d6d6d6;  /* hellgraue Schrift, nicht reinweiß */
  --text-secondary: #ababab;
  --text-muted: #7a7a7a;
  --text-inverse: #000000;  /* Text auf hellen (Primary-)Flächen */

  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.8);
  --shadow-lg: 0 8px 20px rgba(0,0,0,0.9);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.95);
}
/* Primary-Buttons: helle Fläche, schwarzer Text → maximaler Kontrast */
[data-theme="ultradark"] .btn-primary,
[data-theme="ultradark"] .compose-send-btn { color: #000000; }
/* Aktive Navigation/Markierungen klar absetzen */
[data-theme="ultradark"] .nav-icon-btn.active { background: #242424; color: #ffffff; }

/* ═══════════════════ SPACE THEME ════════════════════════════════════ */
[data-theme="space"] {
  --primary: #00d4ff;
  --primary-hover: #00b8e6;
  --primary-light: #001a33;
  --primary-glow: rgba(0, 212, 255, 0.3);
  --accent: #bf5af2;
  --success: #00ff41;
  --warning: #ffd700;
  --danger: #ff1744;

  --bg-app: #000008;
  --bg-sidebar: #06060f;
  --bg-panel: #08081a;
  --bg-hover: #12122a;
  --bg-active: #001a33;
  --bg-input: #0e0e22;
  --bg-card: #08081a;
  --bg-modal: #0a0a1e;
  --bg-badge: #ff1744;

  --border: #1a1a3e;
  --border-light: #0e0e22;

  --text-primary: #d4d4ff;
  --text-secondary: #8888bb;
  --text-muted: #555588;
  --text-inverse: #000000;

  --shadow-sm: 0 1px 3px rgba(0, 212, 255, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 212, 255, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 212, 255, 0.08);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5);
}

/* Space starfield background */
[data-theme="space"] body {
  background-color: #000008;
  background-image:
    radial-gradient(1.2px 1.2px at 10% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 90% 80%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 55%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 65% 90%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 30%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 30, 60, 0.15) 0%, transparent 70%);
  background-size: 300px 300px, 250px 250px, 350px 200px, 200px 350px, 300px 250px,
    250px 300px, 350px 350px, 200px 200px, 300px 350px, 250px 200px,
    350px 300px, 200px 250px, 280px 280px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
}

/* Orbitron font for headers */
[data-theme="space"] .logo-text,
[data-theme="space"] .panel-header h2,
[data-theme="space"] .reader-subject,
[data-theme="space"] .calendar-nav h2,
[data-theme="space"] .modal-header h3,
[data-theme="space"] .login-logo .logo-text {
  font-family: 'Orbitron', 'Inter', sans-serif;
  letter-spacing: 0.05em;
}

/* Logo glow */
[data-theme="space"] .logo-text {
  background: linear-gradient(135deg, #00d4ff, #bf5af2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

/* Nav icon glow */
[data-theme="space"] .nav-icon-btn:hover {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}
[data-theme="space"] .nav-icon-btn.active {
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.25);
  border: 1px solid rgba(0, 212, 255, 0.15);
}

/* Button glow */
[data-theme="space"] .btn-primary {
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
}
[data-theme="space"] .btn-primary:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.55);
}

/* Danger – Imperial red */
[data-theme="space"] .btn-danger {
  background: #ff1744;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.35);
}
[data-theme="space"] .btn-danger:hover {
  box-shadow: 0 0 20px rgba(255, 23, 68, 0.55);
}

/* Scrollbar glow */
[data-theme="space"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.25);
}
[data-theme="space"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.45);
}

/* Calendar events – neon border glow */
[data-theme="space"] .calendar-event.color-0 { background: #001a33; color: #00d4ff; border: 1px solid rgba(0, 212, 255, 0.4); box-shadow: 0 0 6px rgba(0, 212, 255, 0.2); }
[data-theme="space"] .calendar-event.color-1 { background: #001a00; color: #00ff41; border: 1px solid rgba(0, 255, 65, 0.4); box-shadow: 0 0 6px rgba(0, 255, 65, 0.2); }
[data-theme="space"] .calendar-event.color-2 { background: #1a1a00; color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.4); box-shadow: 0 0 6px rgba(255, 215, 0, 0.2); }
[data-theme="space"] .calendar-event.color-3 { background: #1a0020; color: #bf5af2; border: 1px solid rgba(191, 90, 242, 0.4); box-shadow: 0 0 6px rgba(191, 90, 242, 0.2); }
[data-theme="space"] .calendar-event.color-4 { background: #0d001a; color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.4); box-shadow: 0 0 6px rgba(167, 139, 250, 0.2); }
[data-theme="space"] .calendar-event.color-5 { background: #001a1a; color: #00ffd5; border: 1px solid rgba(0, 255, 213, 0.4); box-shadow: 0 0 6px rgba(0, 255, 213, 0.2); }

/* Mailbox active glow */
[data-theme="space"] .mailbox-item.active {
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
}

/* Message active glow */
[data-theme="space"] .message-item.active {
  border-left-color: #00d4ff;
  box-shadow: inset 3px 0 10px rgba(0, 212, 255, 0.12);
}

/* Contact card glow */
[data-theme="space"] .contact-card:hover {
  border-color: #00d4ff;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
}

/* Calendar today */
[data-theme="space"] .calendar-day.today {
  box-shadow: inset 0 0 15px rgba(0, 212, 255, 0.08);
}

/* Calendar sidebar */
[data-theme="space"] .calendar-sidebar {
  border-right-color: rgba(0, 212, 255, 0.1);
}

[data-theme="space"] .cal-mini-day.today {
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

[data-theme="space"] .view-mode-btn.active {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

[data-theme="space"] .cal-time-event {
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.15);
}

/* Input focus glow */
[data-theme="space"] .form-group input:focus,
[data-theme="space"] .form-group textarea:focus,
[data-theme="space"] .search-box:focus-within,
[data-theme="space"] .mail-search-box:focus-within {
  border-color: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
}

/* Modal glow */
[data-theme="space"] .modal {
  border: 1px solid rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), var(--shadow-xl);
}

/* Toast glow */
[data-theme="space"] .toast.success { box-shadow: 0 0 12px rgba(0, 255, 65, 0.3); }
[data-theme="space"] .toast.error { box-shadow: 0 0 12px rgba(255, 23, 68, 0.3); }
[data-theme="space"] .toast.info { box-shadow: 0 0 12px rgba(0, 212, 255, 0.3); }

/* Resize handle glow */
[data-theme="space"] .resize-handle:hover,
[data-theme="space"] .resize-handle.active {
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

/* Sidebar border glow */
[data-theme="space"] .sidebar {
  border-right-color: rgba(0, 212, 255, 0.08);
}

/* Login card glow */
[data-theme="space"] .login-card {
  border: 1px solid rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.1);
}

[data-theme="space"] .login-error {
  background: #1a0000;
  border-color: #ff1744;
  color: #ff6e7a;
}

/* ═══════════════════ WINTER THEME ═══════════════════════════════════════ */
[data-theme="winter"] {
  --primary: #845ec2;
  --primary-hover: #6b44a8;
  --primary-light: #ede5f7;
  --primary-glow: rgba(132, 94, 194, 0.2);
  --accent: #00c9a7;
  --success: #00c9a7;
  --warning: #ffc75f;
  --danger: #c34a6e;

  --bg-app: #e8eff5;
  --bg-sidebar: #f4f8fc;
  --bg-panel: #ffffff;
  --bg-hover: #dfe9f2;
  --bg-active: #ede5f7;
  --bg-input: #edf2f8;
  --bg-card: #ffffff;
  --bg-modal: #ffffff;
  --bg-badge: #c34a6e;

  --border: #c9d9e8;
  --border-light: #dfe9f2;

  --text-primary: #1e2d3d;
  --text-secondary: #4d6880;
  --text-muted: #8aa3b8;
  --text-inverse: #ffffff;

  --shadow-sm: 0 1px 3px rgba(132, 94, 194, 0.06);
  --shadow-md: 0 4px 8px rgba(132, 94, 194, 0.08);
  --shadow-lg: 0 10px 20px rgba(132, 94, 194, 0.1);
  --shadow-xl: 0 20px 30px rgba(132, 94, 194, 0.12);
}

[data-theme="winter"] .btn-primary {
  box-shadow: 0 2px 8px rgba(132, 94, 194, 0.3);
}
[data-theme="winter"] .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(132, 94, 194, 0.4);
}
[data-theme="winter"] .logo-text {
  background: linear-gradient(135deg, #845ec2, #00c9a7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="winter"] .mailbox-item.active {
  border-left-color: #845ec2;
}
[data-theme="winter"] .message-item.active {
  border-left-color: #845ec2;
}
[data-theme="winter"] .calendar-event.color-0 { background: #ede5f7; color: #6b44a8; border-left: 3px solid #845ec2; }
[data-theme="winter"] .calendar-event.color-1 { background: #c4fcef; color: #2a7a65; border-left: 3px solid #00c9a7; }
[data-theme="winter"] .calendar-event.color-2 { background: #fff3d6; color: #9a7a1e; border-left: 3px solid #ffc75f; }
[data-theme="winter"] .calendar-event.color-3 { background: #fce4ec; color: #982b4e; border-left: 3px solid #c34a6e; }
[data-theme="winter"] .calendar-event.color-4 { background: #e3f2fd; color: #3068a8; border-left: 3px solid #4d8076; }
[data-theme="winter"] .calendar-event.color-5 { background: #e0f7fa; color: #00695c; border-left: 3px solid #00c9a7; }
[data-theme="winter"] .form-group input:focus,
[data-theme="winter"] .form-group textarea:focus,
[data-theme="winter"] .search-box:focus-within,
[data-theme="winter"] .mail-search-box:focus-within {
  border-color: #845ec2;
  box-shadow: 0 0 0 3px rgba(132, 94, 194, 0.15);
}

/* ═══════════════════ FORREST THEME ══════════════════════════════════════ */
[data-theme="forrest"] {
  --primary: #F4900E;
  --primary-hover: #ED5005;
  --primary-light: #1a2a1a;
  --primary-glow: rgba(244, 144, 14, 0.25);
  --accent: #F7631C;
  --success: #5a9a3a;
  --warning: #F4900E;
  --danger: #ED5005;

  --bg-app: #2A312A;
  --bg-sidebar: #232923;
  --bg-panel: #28382B;
  --bg-hover: #354a37;
  --bg-active: #3a5a30;
  --bg-input: #2f3f2f;
  --bg-card: #28382B;
  --bg-modal: #28382B;
  --bg-badge: #ED5005;

  --border: #3d5240;
  --border-light: #2f3f2f;

  --text-primary: #e8e4d8;
  --text-secondary: #b0a890;
  --text-muted: #7a7560;
  --text-inverse: #1a1f1a;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="forrest"] body {
  background-color: #2A312A;
}
[data-theme="forrest"] .btn-primary {
  background: linear-gradient(135deg, #F4900E, #F7631C);
  box-shadow: 0 2px 10px rgba(244, 144, 14, 0.3);
}
[data-theme="forrest"] .btn-primary:hover {
  background: linear-gradient(135deg, #F7631C, #ED5005);
  box-shadow: 0 4px 16px rgba(244, 144, 14, 0.45);
}
[data-theme="forrest"] .logo-text {
  background: linear-gradient(135deg, #F4900E, #5a9a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="forrest"] .sidebar {
  border-right-color: #3d5240;
}
[data-theme="forrest"] .mailbox-item.active {
  background: var(--bg-active);
  border-left-color: #F4900E;
}
[data-theme="forrest"] .message-item.active {
  border-left-color: #F4900E;
  background: var(--bg-active);
}
[data-theme="forrest"] ::-webkit-scrollbar-thumb {
  background: rgba(244, 144, 14, 0.25);
}
[data-theme="forrest"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 144, 14, 0.4);
}
[data-theme="forrest"] .calendar-event.color-0 { background: #1a2a1a; color: #F4900E; border-left: 3px solid #F4900E; }
[data-theme="forrest"] .calendar-event.color-1 { background: #1a2a1a; color: #5a9a3a; border-left: 3px solid #5a9a3a; }
[data-theme="forrest"] .calendar-event.color-2 { background: #2a2a1a; color: #F7631C; border-left: 3px solid #F7631C; }
[data-theme="forrest"] .calendar-event.color-3 { background: #2a1a1a; color: #ED5005; border-left: 3px solid #ED5005; }
[data-theme="forrest"] .calendar-event.color-4 { background: #1a2a20; color: #b0a890; border-left: 3px solid #b0a890; }
[data-theme="forrest"] .calendar-event.color-5 { background: #1a2a1a; color: #8abf6a; border-left: 3px solid #8abf6a; }
[data-theme="forrest"] .form-group input:focus,
[data-theme="forrest"] .form-group textarea:focus,
[data-theme="forrest"] .search-box:focus-within,
[data-theme="forrest"] .mail-search-box:focus-within {
  border-color: #F4900E;
  box-shadow: 0 0 8px rgba(244, 144, 14, 0.2);
}
[data-theme="forrest"] .modal {
  border: 1px solid #3d5240;
}
[data-theme="forrest"] .login-card {
  border: 1px solid #3d5240;
}
[data-theme="forrest"] .login-error {
  background: #3a1a1a;
  border-color: #ED5005;
  color: #ff8a65;
}
[data-theme="forrest"] .login-info {
  background: #1a2a1a;
  border-color: #5a9a3a;
  color: #8abf6a;
}
[data-theme="forrest"] .toast.success { border-left: 3px solid #5a9a3a; }
[data-theme="forrest"] .toast.error { border-left: 3px solid #ED5005; }
[data-theme="forrest"] .toast.info { border-left: 3px solid #F4900E; }

/* ═══════════════════ ICEBERG THEME ══════════════════════════════════════ */
[data-theme="iceberg"] {
  --primary: #000080;
  --primary-hover: #00006b;
  --primary-light: #dce8f0;
  --primary-glow: rgba(0, 0, 128, 0.15);
  --accent: #ADD8E6;
  --success: #4a9e7e;
  --warning: #d4a843;
  --danger: #c44e52;

  --bg-app: #FFFAFA;
  --bg-sidebar: #f0f5f8;
  --bg-panel: #FFFAFA;
  --bg-hover: #dce8f0;
  --bg-active: #c9dbe8;
  --bg-input: #f0f5f8;
  --bg-card: #FFFAFA;
  --bg-modal: #FFFAFA;
  --bg-badge: #c44e52;

  --border: #ADD8E6;
  --border-light: #dce8f0;

  --text-primary: #1a2a3a;
  --text-secondary: #6D8196;
  --text-muted: #99aab8;
  --text-inverse: #FFFAFA;

  --shadow-sm: 0 1px 3px rgba(0, 0, 128, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 128, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 128, 0.1);
  --shadow-xl: 0 20px 30px rgba(0, 0, 128, 0.12);
}

[data-theme="iceberg"] .logo-text {
  background: linear-gradient(135deg, #000080, #ADD8E6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="iceberg"] .btn-primary {
  background: linear-gradient(135deg, #000080, #1a1a99);
  box-shadow: 0 2px 8px rgba(0, 0, 128, 0.25);
}
[data-theme="iceberg"] .btn-primary:hover {
  background: linear-gradient(135deg, #00006b, #000080);
  box-shadow: 0 4px 14px rgba(0, 0, 128, 0.35);
}
[data-theme="iceberg"] .mailbox-item.active {
  border-left-color: #000080;
  background: #c9dbe8;
}
[data-theme="iceberg"] .message-item.active {
  border-left-color: #000080;
  background: #c9dbe8;
}
[data-theme="iceberg"] .calendar-event.color-0 { background: #dce8f0; color: #000080; border-left: 3px solid #000080; }
[data-theme="iceberg"] .calendar-event.color-1 { background: #d5ede4; color: #2a7a5a; border-left: 3px solid #4a9e7e; }
[data-theme="iceberg"] .calendar-event.color-2 { background: #f5edd5; color: #8a7020; border-left: 3px solid #d4a843; }
[data-theme="iceberg"] .calendar-event.color-3 { background: #f5dce0; color: #a03040; border-left: 3px solid #c44e52; }
[data-theme="iceberg"] .calendar-event.color-4 { background: #d5e5f5; color: #3a5a8a; border-left: 3px solid #6D8196; }
[data-theme="iceberg"] .calendar-event.color-5 { background: #d0eef5; color: #2a6a80; border-left: 3px solid #ADD8E6; }
[data-theme="iceberg"] .form-group input:focus,
[data-theme="iceberg"] .form-group textarea:focus,
[data-theme="iceberg"] .search-box:focus-within,
[data-theme="iceberg"] .mail-search-box:focus-within {
  border-color: #000080;
  box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.12);
}
[data-theme="iceberg"] .sidebar {
  border-right: 1px solid #ADD8E6;
}

/* ═══════════════════ DESERT THEME ══════════════════════════════════════ */
[data-theme="desert"] {
  --primary: #DB9A39;
  --primary-hover: #B37E2E;
  --primary-light: #fdf3e3;
  --primary-glow: rgba(219, 154, 57, 0.2);
  --accent: #FFB343;
  --success: #7a9a3a;
  --warning: #FFB343;
  --danger: #c44e3a;

  --bg-app: #faf5ee;
  --bg-sidebar: #f5ede0;
  --bg-panel: #faf8f4;
  --bg-hover: #f0e5d0;
  --bg-active: #f0dbb8;
  --bg-input: #f5ede0;
  --bg-card: #faf8f4;
  --bg-modal: #faf8f4;
  --bg-badge: #c44e3a;

  --border: #e0d0b8;
  --border-light: #efe5d5;

  --text-primary: #614419;
  --text-secondary: #8a6a3a;
  --text-muted: #b09a78;
  --text-inverse: #faf5ee;

  --shadow-sm: 0 1px 3px rgba(97, 68, 25, 0.08);
  --shadow-md: 0 4px 8px rgba(97, 68, 25, 0.1);
  --shadow-lg: 0 10px 20px rgba(97, 68, 25, 0.12);
  --shadow-xl: 0 20px 30px rgba(97, 68, 25, 0.14);
}

[data-theme="desert"] body {
  background-color: #faf5ee;
}
[data-theme="desert"] .logo-text {
  background: linear-gradient(135deg, #B37E2E, #FFB343);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="desert"] .btn-primary {
  background: linear-gradient(135deg, #DB9A39, #B37E2E);
  box-shadow: 0 2px 8px rgba(219, 154, 57, 0.3);
}
[data-theme="desert"] .btn-primary:hover {
  background: linear-gradient(135deg, #B37E2E, #8a6020);
  box-shadow: 0 4px 14px rgba(219, 154, 57, 0.4);
}
[data-theme="desert"] .mailbox-item.active {
  border-left-color: #DB9A39;
  background: #f0dbb8;
}
[data-theme="desert"] .message-item.active {
  border-left-color: #DB9A39;
  background: #f0dbb8;
}
[data-theme="desert"] .sidebar {
  border-right: 1px solid #e0d0b8;
}
[data-theme="desert"] .calendar-event.color-0 { background: #fdf3e3; color: #8a6020; border-left: 3px solid #DB9A39; }
[data-theme="desert"] .calendar-event.color-1 { background: #eef3dd; color: #5a7a20; border-left: 3px solid #7a9a3a; }
[data-theme="desert"] .calendar-event.color-2 { background: #fff0d0; color: #8a6a10; border-left: 3px solid #FFB343; }
[data-theme="desert"] .calendar-event.color-3 { background: #f5ddd8; color: #9a3020; border-left: 3px solid #c44e3a; }
[data-theme="desert"] .calendar-event.color-4 { background: #f0e5d0; color: #614419; border-left: 3px solid #B37E2E; }
[data-theme="desert"] .calendar-event.color-5 { background: #e5e0d0; color: #6a5a3a; border-left: 3px solid #8a7a5a; }
[data-theme="desert"] .form-group input:focus,
[data-theme="desert"] .form-group textarea:focus,
[data-theme="desert"] .search-box:focus-within,
[data-theme="desert"] .mail-search-box:focus-within {
  border-color: #DB9A39;
  box-shadow: 0 0 0 3px rgba(219, 154, 57, 0.15);
}

/* ═══════════════════ MINNESOTA WINTER THEME ════════════════════════════ */
[data-theme="minnesota"] {
  --primary: #8E0A1E;
  --primary-hover: #6d0818;
  --primary-light: #f5e0e3;
  --primary-glow: rgba(142, 10, 30, 0.15);
  --accent: #2E6F40;
  --success: #2E6F40;
  --warning: #d4a843;
  --danger: #8E0A1E;

  --bg-app: #FFFFFF;
  --bg-sidebar: #f5f8f6;
  --bg-panel: #FFFFFF;
  --bg-hover: #e8f0eb;
  --bg-active: #f5e0e3;
  --bg-input: #f0f5f2;
  --bg-card: #FFFFFF;
  --bg-modal: #FFFFFF;
  --bg-badge: #8E0A1E;

  --border: #d0dcd5;
  --border-light: #e8f0eb;

  --text-primary: #1a2a20;
  --text-secondary: #4a6a52;
  --text-muted: #8aaa95;
  --text-inverse: #FFFFFF;

  --shadow-sm: 0 1px 3px rgba(46, 111, 64, 0.06);
  --shadow-md: 0 4px 8px rgba(46, 111, 64, 0.08);
  --shadow-lg: 0 10px 20px rgba(46, 111, 64, 0.1);
  --shadow-xl: 0 20px 30px rgba(46, 111, 64, 0.12);
}

[data-theme="minnesota"] .logo-text {
  background: linear-gradient(135deg, #8E0A1E, #2E6F40);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="minnesota"] .btn-primary {
  background: linear-gradient(135deg, #8E0A1E, #6d0818);
  box-shadow: 0 2px 8px rgba(142, 10, 30, 0.25);
}
[data-theme="minnesota"] .btn-primary:hover {
  background: linear-gradient(135deg, #6d0818, #500610);
  box-shadow: 0 4px 14px rgba(142, 10, 30, 0.35);
}
[data-theme="minnesota"] .mailbox-item.active {
  border-left-color: #8E0A1E;
  background: #f5e0e3;
}
[data-theme="minnesota"] .message-item.active {
  border-left-color: #8E0A1E;
  background: #f5e0e3;
}
[data-theme="minnesota"] .sidebar {
  border-right: 1px solid #d0dcd5;
}
[data-theme="minnesota"] .calendar-event.color-0 { background: #f5e0e3; color: #6d0818; border-left: 3px solid #8E0A1E; }
[data-theme="minnesota"] .calendar-event.color-1 { background: #ddf0e5; color: #1a5030; border-left: 3px solid #2E6F40; }
[data-theme="minnesota"] .calendar-event.color-2 { background: #e0f0f8; color: #3a6a8a; border-left: 3px solid #ADD8E6; }
[data-theme="minnesota"] .calendar-event.color-3 { background: #f5edd5; color: #8a7020; border-left: 3px solid #d4a843; }
[data-theme="minnesota"] .calendar-event.color-4 { background: #f0e0e5; color: #8a3a4a; border-left: 3px solid #b05060; }
[data-theme="minnesota"] .calendar-event.color-5 { background: #e0f0ea; color: #2a5a3a; border-left: 3px solid #4a8a5a; }
[data-theme="minnesota"] .form-group input:focus,
[data-theme="minnesota"] .form-group textarea:focus,
[data-theme="minnesota"] .search-box:focus-within,
[data-theme="minnesota"] .mail-search-box:focus-within {
  border-color: #2E6F40;
  box-shadow: 0 0 0 3px rgba(46, 111, 64, 0.15);
}
/* Accent elements in green */
[data-theme="minnesota"] .message-item.unread::before {
  background: #2E6F40;
}
[data-theme="minnesota"] .nav-icon-btn.active {
  color: #2E6F40;
  background: #e0f0ea;
}

/* ═══════════════════ PINK THEME ═════════════════════════════════════════ */
[data-theme="pink"] {
  --primary: #A24C61;
  --primary-hover: #8a3e52;
  --primary-light: #f8e8ee;
  --primary-glow: rgba(162, 76, 97, 0.2);
  --accent: #E2A9C0;
  --success: #7a9a3a;
  --warning: #E1C905;
  --danger: #710C21;

  --bg-app: #fdf5f7;
  --bg-sidebar: #f5e0e7;
  --bg-panel: #fdf7f9;
  --bg-hover: #f0d5de;
  --bg-active: #e8c0ce;
  --bg-input: #f8eaef;
  --bg-card: #fdf7f9;
  --bg-modal: #fdf7f9;
  --bg-badge: #710C21;

  --border: #e8c5d0;
  --border-light: #f0d5de;

  --text-primary: #411528;
  --text-secondary: #6a2e42;
  --text-muted: #a07080;
  --text-inverse: #fdf5f7;

  --shadow-sm: 0 1px 3px rgba(65, 21, 40, 0.08);
  --shadow-md: 0 4px 8px rgba(65, 21, 40, 0.1);
  --shadow-lg: 0 10px 20px rgba(65, 21, 40, 0.12);
  --shadow-xl: 0 20px 40px rgba(65, 21, 40, 0.15);
}
[data-theme="pink"] body {
  background-color: #fdf5f7;
}
[data-theme="pink"] .form-group input:focus,
[data-theme="pink"] .form-group textarea:focus,
[data-theme="pink"] .search-box:focus-within,
[data-theme="pink"] .mail-search-box:focus-within {
  border-color: #A24C61;
  box-shadow: 0 0 0 3px rgba(162, 76, 97, 0.15);
}
[data-theme="pink"] .modal {
  border: 1px solid #e8c5d0;
}
[data-theme="pink"] .sidebar {
  border-right: 1px solid #e8c5d0;
}
[data-theme="pink"] .message-item.unread::before {
  background: #A24C61;
}
[data-theme="pink"] .nav-icon-btn.active {
  color: #A24C61;
  background: #f8e8ee;
}
[data-theme="pink"] .mailbox-unseen-badge {
  background: #710C21;
}
[data-theme="pink"] .calendar-day.today {
  box-shadow: inset 0 0 0 2px #A24C61;
}
[data-theme="pink"] .calendar-day.today .calendar-day-number {
  background: #A24C61;
}
[data-theme="pink"] .calendar-weekday.today {
  color: #A24C61;
  background: #f8e8ee;
}

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

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Resizing state ──────────────────────────────────────────────────────── */
body.is-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}
body.is-resizing * {
  transition: none !important;
  cursor: col-resize !important;
}

/* ── App Layout ──────────────────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Login Screen ────────────────────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-app);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  justify-content: center;
  margin-top: 8px;
}

.login-remember {
  margin: 8px 0 12px;
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.remember-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 12px;
}

.login-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 12px;
}

[data-theme="dark"] .login-info {
  background: #1e3a5f;
  border-color: #1e40af;
  color: #93c5fd;
}

[data-theme="space"] .login-info {
  background: #001a33;
  border-color: rgba(0, 212, 255, 0.3);
  color: #00d4ff;
}

[data-theme="dark"] .login-error {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
  transition: width var(--transition);
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-mini-picker {
  margin-top: 12px;
  margin-bottom: 4px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Das Programm-Symbol darf NIE wegschrumpfen: Bei größerer Schriftskalierung wird der
   „MEYER | Mail"-Schriftzug breiter und quetschte das Symbol auf 0 px („sehr sehr
   klein"). Jetzt bleibt das Symbol fix bei 32 px — stattdessen schrumpft notfalls
   der Schriftzug proportional. */
.logo > svg { flex: 0 0 auto; width: 32px; height: 32px; }
.logo > img { flex: 0 1 auto; min-width: 0; height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.logo .assistant-star { flex: 0 0 auto; }

.logo-text {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.compose-btn {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
  padding: 10px 16px;
}

/* Icon nav bar at bottom — wrap so 5+ icons never overflow into the neighbouring area */
.sidebar-nav-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}
.sidebar-footer { flex-wrap: wrap; }

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.nav-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-icon-btn.active {
  background: var(--bg-active);
  color: var(--primary);
}

.nav-icon-btn .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--bg-badge);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  line-height: 1.2;
}

/* Settings grid */
.modal.settings-modal {
  max-width: 820px;
  width: 92%;
}
/* Search box in the settings root */
.settings-search-wrap { position: relative; margin: 0 0 14px; }
.settings-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.settings-search-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-primary);
  font-size: 14px; font-family: inherit;
}
.settings-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow, rgba(99, 102, 241, 0.15)); }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .modal.settings-modal { max-width: 620px; }
  .settings-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
}

.settings-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 10px;
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  color: var(--text-primary);
}

.settings-item:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

.settings-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-active);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}

.settings-item-danger .settings-item-icon {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}

.settings-item-info {
  text-align: center;
}

.settings-item-title {
  font-weight: 600;
  font-size: 14px;
}

.settings-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-item-group {
  position: relative;
}

.settings-item-group .settings-item-arrow {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0.4;
}

.settings-submenu-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
}

.settings-submenu-back:hover {
  opacity: 0.8;
}

/* Mailbox List */
.mailbox-list {
  flex: 1;
  overflow: hidden;            /* inner .mailbox-tree-scroll scrolls instead */
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#mailboxItems {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.mailbox-tree-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 4px;
}

.mailbox-list-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 14px 6px;
}

.mailbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
  font-size: 13px;
}

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

.mailbox-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

.mailbox-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.mailbox-item.active svg {
  opacity: 1;
}

.mailbox-unseen-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  padding: 0 5px;
  flex-shrink: 0;
}

.mailbox-item.active .mailbox-unseen-badge {
  background: var(--primary-hover);
}

.mailbox-unseen-badge:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

/* Ultra Dark: --primary is light grey, so the count needs dark text (was white-on-white) */
[data-theme="ultradark"] .mailbox-unseen-badge,
[data-theme="ultradark"] .mailbox-item.active .mailbox-unseen-badge {
  color: #000;
}

.unseen-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.unseen-filter-bar button {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* Mailbox tree toggle */
.mailbox-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition);
  opacity: 0.5;
}
.mailbox-toggle:hover {
  opacity: 1;
}
.mailbox-toggle.expanded {
  transform: rotate(90deg);
}
.mailbox-toggle-spacer {
  display: inline-block;
  width: 16px;
  flex-shrink: 0;
}

/* Sidebar collapse button */
.sidebar-collapse-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

@media (min-width: 1025px) {
  /* Collapse-Pfeil (links unten im Menü) auf Wunsch entfernt. */
  .sidebar-collapse-btn { display: none; }
}

.sidebar.collapsed {
  width: 56px;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-header { padding: 12px 8px; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .compose-btn span,
.sidebar.collapsed .sidebar-mini-picker,
.sidebar.collapsed .mailbox-list,
.sidebar.collapsed .sidebar-cal-list,
.sidebar.collapsed .sidebar-notes-list,
.sidebar.collapsed .sidebar-addressbook-list { display: none !important; }
.sidebar.collapsed .compose-btn {
  padding: 10px;
  margin-top: 8px;
}
.sidebar.collapsed .compose-btn svg { margin: 0; }
.sidebar.collapsed .sidebar-nav-icons {
  flex-direction: column;
  gap: 2px;
}
.sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}
.sidebar.collapsed .sidebar-footer {
  flex-direction: column;
  padding: 8px 4px;
}

.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: auto;
}

.sidebar-cal-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
}
/* Notizbuch-/Adressbuch-Liste wie die Kalenderliste: selbst scrollen statt die
   Seitenleiste zu sprengen — sonst schiebt eine lange Liste die zweite Zeile
   des Programm-Menüs (unten links) aus dem Bild. */
.sidebar-notes-list,
.sidebar-addressbook-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
}

/* ── Resize Handle ───────────────────────────────────────────────────────── */
.resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  right: -3px;
  bottom: 0;
}
.resize-handle:hover,
.resize-handle.active {
  background: var(--primary);
}

/* ── Main Content ────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
}

.view.active {
  display: flex;
}

/* Soft slide-in when switching views by swipe (mobile). */
@keyframes viewSlideInRight { from { transform: translateX(64px); opacity: 0.25; } to { transform: none; opacity: 1; } }
@keyframes viewSlideInLeft  { from { transform: translateX(-64px); opacity: 0.25; } to { transform: none; opacity: 1; } }
.view.view-slide-in-right { animation: viewSlideInRight 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.view.view-slide-in-left  { animation: viewSlideInLeft 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ── Panel Header ────────────────────────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
  min-height: var(--header-height);
  gap: 12px;
  flex-wrap: wrap;
}

.panel-header h2 {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

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

.btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-text {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.btn-danger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--danger);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.btn-danger:hover {
  background: #dc2626;
}

/* ── Search Box ──────────────────────────────────────────────────────────── */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}

.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.search-box svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-box input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  width: 300px;
  font-family: inherit;
}

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

/* Mail search box (inline in panel header) */
.mail-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  flex: 1;
  max-width: 360px;
  min-width: 120px;
}
.mail-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  max-width: 450px;
}
.mail-search-box svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.mail-search-box input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  width: 100%;
  font-family: inherit;
}
.mail-search-box input::placeholder {
  color: var(--text-muted);
}
.search-scope-select {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 2px 2px 4px;
  flex-shrink: 1;
  min-width: 0;
  outline: none;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.mail-search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 100 1 285px;
  /* Mindestbreite = Detailsuche-Knopf (~44px) + Suchbox-Minimum (120px) + Bereichs-
     Dropdown (~110px, nowrap/shrink:0) — sonst läuft der Inhalt rechts über. */
  min-width: 285px;
  max-width: 500px;
}
/* Detailsuche-Knopf lebt IN der Such-Wrap: Desktop rechts (zwischen Auswahl und
   Aktualisieren), mobil per order links neben dem Suchfeld. */
.mail-search-wrap #detailSearchBtn { order: 3; margin-left: 8px; flex-shrink: 0; }
/* Suchbox darf schrumpfen — sonst RAGT die Lupe rechts aus dem Wrap hinaus und der
   Abstand zum Aktualisieren-Knopf (margin am Folge-Element, bezieht sich auf die
   Wrap-Kante) kam beim Nutzer nur teilweise an. */
.mail-search-wrap .mail-search-box { order: 1; min-width: 0; }
.mail-search-wrap .search-scope-standalone { order: 2; }
@media (max-width: 900px) {
  .mail-search-wrap #detailSearchBtn { order: 0; margin-left: 0; margin-right: 14px; }
}
.ds-open-btn { flex-shrink: 0; }
/* Früher setzte rechts an der Suchbox das Bereichs-Auswahlfeld an; beide bildeten
   zusammen ein Element, darum war die Box rechts eckig und ohne Rahmen. Das
   Auswahlfeld ist längst ins Suchfenster gewandert — übrig blieb eine Box, die
   rechts offen endete und dadurch abgeschnitten aussah. Jetzt wieder rundum
   geschlossen. */
.mail-search-wrap .mail-search-box {
  border-radius: var(--radius-md);
  border-right: 1px solid var(--border);
}
.search-scope-standalone {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 8px;
  outline: none;
  flex-shrink: 0;
  white-space: nowrap;
  height: 100%;
}
.search-scope-standalone:focus {
  border-color: var(--primary);
}
/* Aktualisieren-Knopf: der .panel-header hat bereits gap:12px zwischen den
   Elementen — hier nur ein kleiner Zusatz (Gesamt ~16px), damit man die Lupe
   und Aktualisieren nicht verwechselt, OHNE dem Suchfeld Platz zu nehmen. */
.mail-search-wrap + .btn-icon {
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── Detailsuche ────────────────────────────────────────────────────────────── */
/* Ordnername oben raus — er steckt jetzt in den Labels der Suchbereich-Auswahl. */
#messageListPanel .panel-header #currentMailbox { display: none; }
body.search-window-mode #app,
body.search-window-mode #mobileBottomNav,
body.search-window-mode #mobileFab { display: none !important; }
.detail-search { position: fixed; inset: 0; overflow: auto; background: var(--bg-primary); z-index: 500; padding: 26px 18px; }
.ds-card { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ds-card h2 { font-size: 20px; margin-bottom: 4px; }
.ds-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 14px; }
.ds-input:focus { outline: none; border-color: var(--primary); }
.ds-select { padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 13px; font-family: inherit; align-self: flex-start; }
.ds-check { font-size: 13px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ds-sub { margin-left: 24px; color: var(--text-secondary); }
.ds-status { font-size: 12.5px; color: var(--text-muted); min-height: 18px; }
.ds-results { display: flex; flex-direction: column; gap: 6px; padding-bottom: 30px; }
.ds-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all var(--transition); }
.ds-row:hover { border-color: var(--primary); background: var(--bg-hover); }
.ds-row-subj { font-weight: 600; font-size: 14px; }
.ds-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.ds-row-reason { font-size: 12px; color: var(--primary); margin-top: 3px; }
.ds-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ds-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px;
  border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: dsSpin 0.8s linear infinite; }
@keyframes dsSpin { to { transform: rotate(360deg); } }
.ds-conf { display: inline-block; min-width: 40px; text-align: center; margin-right: 8px; padding: 1px 7px;
  border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--bg-secondary); border: 1px solid var(--border); }
.ds-conf.hi { background: rgba(22,163,74,0.14); color: #16a34a; border-color: rgba(22,163,74,0.4); }
.ds-conf.mid { background: rgba(217,119,6,0.12); color: #d97706; border-color: rgba(217,119,6,0.4); }
.ds-conf.lo { background: rgba(148,163,184,0.15); color: var(--text-muted); }
/* Fortschritts-Widget für Mehrfachaktionen (Löschen/Verschieben/…) — unten RECHTS,
   mit Balken (x von n). Über den Toasts angesiedelt, damit beide sichtbar bleiben. */
.bulk-progress { position: fixed; right: 24px; bottom: 92px; z-index: 10011;
  background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25); min-width: 240px; max-width: 340px; }
.bulk-progress-row { display: flex; align-items: center; gap: 6px; }
.bulk-progress-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bulk-progress-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s ease; }
@media (max-width: 1024px) { .bulk-progress { right: 12px; bottom: calc(var(--mnav-h, 52px) + 70px); } }
@media (max-width: 1024px) { body:not(.msearch-bottom) .bulk-progress { bottom: calc(var(--mnav-h, 52px) + 16px); } }
/* Ordnerbaum im "Verschieben nach"-Dialog */
.folder-tree { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); padding: 4px; }
.folder-tree-item { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-tree-item:hover { background: var(--bg-hover); }
.folder-tree-item.selected { background: rgba(99,102,241,0.16); outline: 1px solid var(--primary); }
.folder-tree-item .ft-ic { flex-shrink: 0; opacity: 0.75; }
.conversation-panel-header.muted { color: var(--text-muted); font-weight: 400; }
.dial-link .dial-hint { font-size: 11px; color: var(--primary); margin-left: 4px; opacity: 0.85; }
.dial-link { cursor: pointer; }
#dsPrompt:disabled, .ds-check input:disabled + * { opacity: 0.55; }
#dsRunBtn { align-self: flex-start; padding: 9px 22px; }
@media (max-width: 900px) {
  .mail-search-wrap {
    flex-basis: 100%;
    max-width: none;
    order: 10;
  }
  .mail-search-wrap + .btn-icon { margin-left: 0; }
}
@media (max-width: 600px) {
  .search-scope-standalone { display: none; }
}
/* Mobile: keep the burger + "Aktualisieren" buttons fully visible. The title has
   white-space:nowrap, so a longer mailbox name would otherwise push the fixed-width
   refresh button off the right edge (it looked "angeschnitten"). Let the title
   shrink/ellipsize instead and pin the buttons against shrinking. */
@media (max-width: 1024px) {
  .message-list-panel .panel-header h2 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .message-list-panel .panel-header > .mobile-menu-btn,
  .message-list-panel .panel-header > .btn-icon {
    flex-shrink: 0;
  }
}
.search-scope-select option {
  background: var(--bg-sidebar);
  color: var(--text-primary);
}
.search-clear-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.search-clear-btn:hover {
  color: var(--text-primary);
}

/* ═══════════════════ MAIL VIEW ═══════════════════════════════════════════ */
.mail-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.message-list-panel {
  width: min(420px, 45vw);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  transition: width var(--transition);
}

.message-list-panel .panel-header {
  padding: 14px 18px;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  /* Keep the rubber-band inside the list — no browser-chrome pull-down / back-nav. */
  overscroll-behavior-y: contain;
}

/* ── Pull-to-refresh + overscroll bounce (touch) ─────────────────────────────
   During the gesture the list is translated; the panel clips the overflow and
   the header stays painted on top so the upward bounce never covers it. */
.message-list-panel { position: relative; }
.message-list-panel .panel-header { position: relative; z-index: 3; }
.message-list-panel.pulling { overflow: hidden; }
#pullRefreshSpinner {
  position: absolute;
  left: 50%;
  top: var(--header-height, 60px);
  width: 34px; height: 34px;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-panel);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: var(--primary);
  opacity: 0;
  transform: translateX(-50%) translateY(-48px);
  pointer-events: none;
  z-index: 2;
}
#pullRefreshSpinner.ready { color: var(--primary-hover); }
#pullRefreshSpinner.spinning svg { animation: pullRefreshSpin 0.7s linear infinite; transform-origin: 50% 50%; }
@keyframes pullRefreshSpin { to { transform: rotate(360deg); } }

.message-reader-panel {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-app);
}

/* Gesprächsverlauf: split the reader into mail (≈70%) + conversation history (≈30%) */
/* Gesprächsverlauf als Abschnitt UNTER der Mail (im normalen Scroll-Bereich) — kein
   fester unterer 30%-Bereich, der Platz wegnimmt. */
.conversation-panel {
  margin: 18px 0 8px;
  border-top: 2px solid var(--border);
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.conversation-panel-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin: 2px 0 8px;
  position: sticky; top: 0; background: var(--bg-panel); padding-bottom: 4px;
}
.conv-item {
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--bg-input);
  cursor: pointer; transition: border-color var(--transition);
}
.conv-item:hover { border-color: var(--primary); }
.conv-item.current { border-color: var(--primary); background: var(--primary-light, #eef2ff); cursor: default; }
.conv-item-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv-item-from { font-size: 12.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-from em { font-weight: 400; font-style: italic; color: var(--text-muted); }
.conv-item-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.conv-item-gist { font-size: 12px; color: var(--text-secondary); margin-top: 4px; white-space: pre-line; line-height: 1.35; }
.conv-gist-loading { opacity: 0.5; }

/* Visual indicators for messages with notes / linked appointments — sit left of the flag */
.message-note-slot {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  margin-right: 4px;
  opacity: 0.85;
}
.message-note-slot:empty { display: none; }

/* Search term highlight in result list */
mark.search-hl {
  background: #fde047;
  color: #1f2937;
  border-radius: 2px;
  padding: 0 1px;
}

/* Message Item */
.message-item {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

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

.message-delete-btn {
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.15s;
}

.message-item:hover .message-delete-btn {
  visibility: visible;
}

.message-delete-btn:hover {
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.message-item.active {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: 15px;
}

.message-item.unread {
  background: var(--bg-panel);
}

.message-item.unread .message-subject {
  font-weight: 600;
  color: var(--text-primary);
}

.message-item.unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 50%;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: white;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.message-from-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

.message-from {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 50%;
}

.message-from-email {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.message-date {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.message-attachment-icon {
  opacity: 0.85;
  flex-shrink: 0;
  stroke-width: 2.5;
}

/* Conversation indicator in the list + inline thread expander */
.message-thread-btn {
  background: none;
  border: none;
  padding: 3px 4px;
  margin: 0;
  cursor: pointer;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
}
.message-thread-btn:hover { background: var(--bg-hover); }
.message-thread-btn.open { color: var(--primary); background: var(--primary-glow, rgba(99, 102, 241, 0.16)); }

.message-thread-expand {
  margin: 2px 0 6px 46px;          /* indented ("leicht versetzt") under the parent mail */
  border-left: 2px solid var(--primary);
  background: var(--bg-input);
  border-radius: 0 8px 8px 0;
  padding: 4px 0;
  animation: summarySlideIn 0.2s ease;
}
.message-thread-expand .thread-loading,
.message-thread-expand .thread-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 12px;
}
.thread-mail {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
}
.thread-mail:first-child { border-top: none; }
.thread-mail:hover { background: var(--bg-hover); }
.thread-mail-from { font-weight: 600; color: var(--text-primary); flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-mail-sub { color: var(--text-secondary); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-mail-date { color: var(--text-muted); flex-shrink: 0; font-size: 11px; }
@media (max-width: 600px) {
  .message-thread-expand { margin-left: 16px; }
  .thread-mail-sub { display: none; }
}

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

/* Optional "An: …" recipient line under the sender in the mail list. */
.message-recipient {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1px 0;
}

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

/* Message Reader */
.message-reader-panel .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--text-muted);
}

.reader-content {
  padding: 32px;
  /* Fill the reader panel so wide screens aren't left empty on the right. */
  max-width: none;
}

.reader-subject {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reader-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;          /* bei schmaler Breite das Datum unter die Infos umbrechen */
}

.reader-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
}

.reader-meta-info {
  flex: 1 1 220px;        /* sinnvolle Mindestbreite: lieber das Datum umbrechen als die Infos quetschen */
  min-width: 0;            /* allow long addresses to wrap instead of being clipped */
}

.reader-from-email {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.reader-from-email a { overflow-wrap: anywhere; word-break: break-word; }

.reader-from-name {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.reader-to {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.reader-date {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  margin-left: auto;       /* rechtsbündig wenn Platz; rutscht sonst in die nächste Zeile */
}

/* Zoom-Leiste – nur für den Mailtext */
.mail-zoom-bar { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin: 2px 0 8px; }
.mail-zoom-btn { border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.5; }
.mail-zoom-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
#mailZoomLabel { font-size: 12px; color: var(--text-muted); min-width: 42px; text-align: center; cursor: pointer; user-select: none; }

.reader-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn-text-primary {
  color: var(--primary);
  font-weight: 600;
}

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

.reader-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

.reader-body iframe {
  width: 100%;
  border: none;
  min-height: 500px;
  background: white;
  border-radius: var(--radius-sm);
}

.reader-attachments {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.reader-attachments h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 0 8px 8px 0;
  color: var(--text-secondary);
}

a.attachment-download {
  text-decoration: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

a.attachment-download:hover {
  background: var(--primary);
  color: var(--text-inverse);
}

a.attachment-download:hover .attachment-size {
  color: var(--text-inverse);
  opacity: 0.8;
}

a.attachment-download:hover svg {
  stroke: var(--text-inverse);
}

.attachment-dl-icon {
  margin-left: 4px;
  opacity: 0.5;
}

a.attachment-download:hover .attachment-dl-icon {
  opacity: 1;
}

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

/* Inline Image Previews */
.reader-inline-images {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inline-image-container {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-input);
}

.inline-image-preview {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.inline-image-preview:hover {
  opacity: 0.9;
}

.inline-image-name {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

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

.pagination button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.pagination button:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination span {
  font-size: 12px;
  color: var(--text-muted);
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ═══════════════════ CALENDAR VIEW ════════════════════════════════════════ */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav h2 {
  /* FESTE Breite: der Titel wechselt je Ansicht die Länge („Juli 2026" vs.
     „Arbeitswoche | 13. – 19.07.2026") – ohne feste Breite springen die ←/→-Pfeile. */
  width: 300px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Calendar Search Bar ── */
.cal-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  flex: 1;
  max-width: 300px;
  min-width: 120px;
}
.cal-search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  max-width: 400px;
}
.cal-search-bar svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.cal-search-bar input[type="text"] {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}
.cal-search-bar input[type="text"]::placeholder {
  color: var(--text-muted);
}
.cal-search-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 8px;
  border-left: 1px solid var(--border);
  user-select: none;
}
.cal-search-toggle input[type="checkbox"] {
  accent-color: var(--primary);
  cursor: pointer;
}
.cal-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.cal-search-clear:hover {
  color: var(--text-primary);
}
.cal-search-results {
  padding: 16px 24px;
}
.cal-search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.cal-search-result-item:hover {
  background: var(--bg-hover);
}
.cal-search-result-date {
  flex-shrink: 0;
  text-align: center;
  min-width: 48px;
}
.cal-search-result-date .day {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}
.cal-search-result-date .month {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.cal-search-result-date .weekday {
  font-size: 10px;
  color: var(--text-muted);
}
.cal-search-result-info {
  flex: 1;
  min-width: 0;
}
.cal-search-result-info .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.cal-search-result-info .time {
  font-size: 12px;
  color: var(--text-muted);
}
.cal-search-result-info .detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.cal-search-result-badge {
  width: 4px;
  border-radius: 2px;
  align-self: stretch;
  flex-shrink: 0;
}

/* ── View Mode Buttons ── */
.calendar-view-modes {
  display: flex;
  gap: 2px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 2px;
  margin-left: 12px;
}

.view-mode-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.view-mode-btn:hover {
  color: var(--text-primary);
}

.view-mode-btn.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Ansichtswahl: am Rechner Knopfleiste, am Handy ein Auswahlfeld (Platzmangel). */
.calendar-view-select {
  display: none;
  margin-left: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
}
@media (max-width: 900px) {
  .calendar-view-modes { display: none; }
  .calendar-view-select { display: block; }
  /* Weiße Ränder links/rechts fraßen auf dem Handy die Sichtfläche. Links jetzt nur noch 2 px,
     damit die Uhrzeit-Zahlen dicht am Bildschirmrand stehen. MIT #calendarView gescoped, sonst
     überschreibt die (später im Quelltext stehende) Basis-Regel `.calendar-grid` (24px) diese hier. */
  #calendarView .calendar-grid { padding: 8px 4px 12px 2px; }
  #calendarView .cal-time-grid { padding: 0 4px 12px 2px; }
  #calendarView .cal-week-header { padding: 0 4px; }
  .calendar-sidebar { display: none; }
  /* Linker Rand mobil: schmale Stunden-Achse (Variable steuert auch die JS-Overlays/Grids). Die
     Zahl steht rechtsbündig – eine schmalere Spalte + kleineres padding-right rückt sie näher an
     den linken Rand (vorher blieb im 34px-Feld links von der Zahl zu viel Leerraum). */
  #calendarView { --cal-time-w: 26px; }
  #calendarView .cal-time-label { font-size: 10px; padding-right: 3px; }
  #calendarView .panel-header { padding: 14px 12px 14px 14px; }
  .calendar-nav h2 {
    width: auto; min-width: 0; flex: 1; font-size: 15px;
    /* Lieber kürzen als umbrechen: Ein langer Wochentitel („KW 33 | 10. – 16.08.2026")
       schob die ganze Navigationszeile unter den Menüknopf, ein kurzer („August 2026")
       nicht — beim Umschalten sprang der Datumsbereich deshalb hin und her. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Die Navigationszeile bekommt IMMER die volle Breite — vorher passte sie bei einem
     kurzen Titel („August 2026") noch neben den Menüknopf, bei einem langen
     („KW 33 …") nicht mehr. Dadurch sprang der Datumsbereich beim Umschalten der
     Ansicht hin und her. Jetzt sitzt er unabhängig von der Titellänge an derselben
     Stelle. */
  #calendarView .panel-header { flex-wrap: wrap; }
  #calendarView .calendar-nav {
    flex-wrap: wrap; row-gap: 4px;
    flex: 1 0 100%; min-width: 0; order: 2;
  }
  #calendarView .calendar-nav .btn-text { flex-basis: 100%; text-align: center; padding: 4px; }
}
/* Konferenz: Aktionsknöpfe am Handy in einer wischbaren Zeile — sonst sind
   die hinteren (Aufzeichnen, Games, Löschen …) nicht erreichbar. */
@media (max-width: 760px) {
  .conf-actions {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
    margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px;
  }
  .conf-actions > * { flex: 0 0 auto; }
  /* Chat + Seitenspalte (Teilnehmer/Dateien/Umfragen) untereinander statt nebeneinander.
     WICHTIG: Der Chat trägt im Element selbst ein min-height:0 — eine normale CSS-Regel
     verliert dagegen. Ohne !important fiel der Chat am Handy auf 0 Pixel zusammen, sein
     Inhalt quoll heraus und lag über der Teilnehmerliste (Schrift auf Schrift). */
  .conf-body { display: block !important; overflow: auto !important; }
  .conf-body > .conf-chat {
    display: flex !important; min-height: 62vh !important;
    border-right: none !important; background: var(--bg-panel);
  }
  .conf-body > .conf-side {
    width: auto !important; border-right: none !important; border-top: 1px solid var(--border);
    background: var(--bg-panel);
  }
}

/* ── Calendar Layout (sidebar + main) ── */
.calendar-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.calendar-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.calendar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Mini Date Picker ── */
.cal-mini-picker {
  user-select: none;
}

.cal-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cal-mini-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.btn-xs {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
}

.cal-mini-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cal-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-mini-day {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
  margin: 0 auto;
}

.cal-mini-day:hover {
  background: var(--bg-hover);
}

.cal-mini-day.other {
  color: var(--text-muted);
  opacity: 0.4;
}

.cal-mini-day.today {
  background: var(--primary);
  color: white;
  font-weight: 600;
}

.cal-mini-day.selected {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.cal-mini-day.today.selected {
  background: var(--primary);
  color: white;
}

/* ── Calendar List ── */
.cal-list-section {
  flex: 1;
}

.cal-list-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background var(--transition);
}

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

.cal-list-item input[type="checkbox"] {
  accent-color: var(--primary);
}

.cal-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-list-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Local (server-less) address books / calendars */
.local-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-light, #eef2ff);
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
}
.cal-list-del {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
}
.cal-list-item:hover .cal-list-del { opacity: 1; }
.cal-list-del:hover { color: var(--danger, #ef4444); background: var(--bg-hover); }
.local-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.local-add-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light, #eef2ff); }

.calendar-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 24px 24px;
}

/* ── Day/Week View (hourly grid) ── */
.cal-time-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 24px 24px;
}

.cal-week-header {
  display: grid;
  gap: 1px;
  padding: 0 24px;
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 2;
}

.cal-week-header-day {
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.cal-week-header-day.today {
  color: var(--primary);
  font-weight: 700;
}

.cal-week-header-day .day-num {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.cal-time-row {
  display: flex;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  flex-shrink: 0;
}

.cal-time-label {
  width: var(--cal-time-w, 56px);
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  padding-right: 10px;
  padding-top: 2px;
  position: relative;
  top: -4px;
}

.cal-time-slots {
  flex: 1;
  display: grid;
  gap: 1px;
  position: relative;
}

.cal-time-slot {
  min-height: 48px;
  border-left: 1px solid var(--border);
  padding: 2px 4px;
  position: relative;
  cursor: pointer;
}

.cal-time-slot:hover {
  background: var(--bg-hover);
}

.cal-time-event {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-bottom: 1px;
}

.cal-select-range {
  background: var(--primary);
  opacity: 0.25;
  border-radius: 4px;
  border: 1px solid var(--primary);
}

.cal-selection-overlay,
.cal-week-click-col {
  cursor: crosshair;
}

.cal-abs-event {
  display: flex;
  align-items: flex-start;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
  cursor: grab;
}

.cal-day-header {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

/* ── Agenda View ── */
.cal-agenda {
  padding: 16px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
}

.cal-agenda-day {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}

.cal-agenda-day.past {
  opacity: 0.5;
}

.cal-agenda-day.today {
  opacity: 1;
}

.cal-agenda-date {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 16px;
  border-right: 2px solid var(--border);
}

.cal-agenda-day.today .cal-agenda-date {
  border-right-color: var(--primary);
}

.cal-agenda-date-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.cal-agenda-date-num.today {
  color: var(--primary);
}

.cal-agenda-date-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

.cal-agenda-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cal-agenda-event {
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.cal-agenda-event:hover {
  background: var(--bg-hover);
}

.cal-agenda-event-time {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
}

.cal-agenda-event-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.cal-agenda-event-loc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.cal-agenda-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 4px;
}

.calendar-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px;
}
.calendar-weekday.today {
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-sm);
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  flex: 1;
  background: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Mobil/Tablet: Monат auf EINE Seite einpassen — die Zeilen teilen sich die
   verfügbare Höhe (1fr), statt mit fixer Mindesthöhe unten abgeschnitten zu
   werden. Reicht die Höhe nicht (Handy quer, Fold zu), greift die Mindest-
   zeilenhöhe und das Raster scrollt nach unten wie die Wochenansicht.
   Deckt Hoch-/Querformat, quadratische (Fold-) und 4:3-Tablet-Formate ab. */
@media (max-width: 1024px) {
  #calendarView .calendar-grid { min-height: 0; }
  .calendar-days {
    grid-auto-rows: minmax(54px, 1fr);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendar-day { min-height: 0; padding: 3px 4px; }
  .calendar-day-number { font-size: 11px; margin-bottom: 1px; }
  .calendar-event { font-size: 9px; padding: 1px 3px; border-radius: 3px; margin-bottom: 1px; }
}

.calendar-day {
  background: var(--bg-panel);
  padding: 6px 8px;
  min-height: 90px;
  cursor: pointer;
  transition: background var(--transition);
  overflow: hidden;
}

.calendar-day:hover {
  background: var(--bg-hover);
}

.calendar-day.other-month {
  opacity: 0.35;
}

.calendar-day.today {
  background: var(--primary-light);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.calendar-day-number {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.calendar-day.today .calendar-day-number {
  background: var(--primary);
  color: white;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
}

.calendar-event {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
  font-weight: 500;
}

/* Extra space (≈ one event height) between all-day and timed events in month view */
.calendar-event.cal-after-allday { margin-top: 18px; }

/* Keep signature logos from being distorted (e.g. pasted from eMClient) */
.sig-editor img, .email-signature img { max-width: 100%; height: auto; }

/* Inbox date-group separators */
.msg-group-sep { padding: 6px 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--bg-hover); position: sticky; top: 0; z-index: 2; }

/* Sidebar IMAP storage indicator */
.sidebar-quota { flex-shrink: 0; padding: 8px 16px 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.sidebar-quota-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.sidebar-quota-bar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.sidebar-quota-bar > div { height: 100%; border-radius: 3px; transition: width .3s; }

/* Isolated (RBI) streamed-session overlay */
.rbi-overlay { position: fixed; inset: 0; z-index: 100050; background: #1a1a1a; display: flex; flex-direction: column; }
.rbi-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg-panel); border-bottom: 1px solid var(--border); color: var(--text-primary); }
.rbi-bar-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbi-bar-close { background: var(--danger, #ef4444); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.rbi-frame { flex: 1; width: 100%; border: 0; background: #000; }

/* Optional: detail-view action buttons as icons only (text collapsed via font-size:0;
   the SVGs keep their explicit width/height). */
body.reader-icons-only .reader-actions button { font-size: 0; gap: 0; padding: 8px 10px; }
body.reader-icons-only .reader-actions button svg { width: 16px; height: 16px; font-size: 0; }

/* Icons-only for the multi-select (bulk) toolbar buttons — independent setting.
   The "N ausgewählt" count and the move-target dropdown keep their text. */
body.bulk-icons-only .bulk-toolbar button { font-size: 0; gap: 0; padding: 8px 10px; }
body.bulk-icons-only .bulk-toolbar button svg { width: 16px; height: 16px; font-size: 0; }
body.bulk-icons-only .bulk-toolbar .bulk-select-all-link { font-size: 13px; } /* keep this one labelled */

/* "Auswahl bearbeiten…" single big button (alternative to the inline toolbar). */
.bulk-edit-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600;
  border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary, #2563eb); color: #fff;
}
.bulk-edit-btn:hover { filter: brightness(1.05); }

/* When the multi-select bar is shown at the TOP, hide the list header (title +
   search) so the bar takes its place — saves vertical space. */
.message-list-panel.bulk-top-active .panel-header { display: none; }
/* The top bar sits where the header was: separator at the bottom (like the header),
   and its height is matched to the header in JS so the swap is seamless. */
#bulkToolbarTop { border-top: none; border-bottom: 1px solid var(--border); }

/* "Link öffnen" choices — full-width stacked buttons with title + description. */
.link-choice-list { display: flex; flex-direction: column; gap: 8px; }
.link-choice {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-input); color: var(--text-primary);
  cursor: pointer; text-align: left; transition: background var(--transition), border-color var(--transition);
}
.link-choice:hover { border-color: var(--primary); background: var(--bg-hover, rgba(127,127,127,0.10)); }
.link-choice .lc-title { font-weight: 600; font-size: 14px; }
.link-choice .lc-desc { font-size: 12px; color: var(--text-muted); }
.link-choice.link-choice-primary {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.12);
  background: color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);
}

/* "Auswahl bearbeiten" popup — itemized action rows with tinted icon circles. */
.bulk-count-badge {
  flex-shrink: 0; min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: 12px; background: var(--primary, #6366f1); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.bulk-actions-list { display: flex; flex-direction: column; gap: 6px; }
.bulk-action-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 1px solid var(--border-light, var(--border));
  border-radius: 12px; background: var(--bg-input); cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-primary); text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.bulk-action-row:hover { background: var(--bg-hover, rgba(127,127,127,0.10)); border-color: var(--primary); }
.bulk-action-row .bar-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, 0.14);
  background: color-mix(in srgb, var(--primary, #6366f1) 14%, transparent);
  color: var(--primary, #6366f1);
}
.bulk-action-row .bar-label { flex: 1; min-width: 0; }
.bulk-action-row.danger { color: var(--danger, #ef4444); }
.bulk-action-row.danger .bar-ic { background: rgba(239, 68, 68, 0.14); color: var(--danger, #ef4444); }
.bulk-move-row .bulk-move-target {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card, var(--bg-app)); color: var(--text-primary); font-size: 13px; font-family: inherit;
}

/* Detached compose window (?cw=…): show only the compose UI, filling the window. */
body.compose-window-mode #app,
body.compose-window-mode #appLoader,
body.compose-window-mode #loginScreen { display: none !important; }
body.compose-window-mode { background: var(--bg-app); }
/* No dim/blur in a dedicated window — the compose fills it; the bottom nav is
   body-level (outside #app) so it must be hidden explicitly. */
body.compose-window-mode .modal-overlay.active { background: var(--bg-app); }
body.compose-window-mode .modal-overlay { backdrop-filter: none !important; background: var(--bg-app) !important; }
body.compose-window-mode #mobileBottomNav { display: none !important; }
body.compose-window-mode #modalDialog.compose-modal {
  position: fixed !important; left: 0 !important; top: 0 !important;
  width: 100vw !important; height: 100vh !important;
  max-width: none !important; max-height: none !important;
  border-radius: 0 !important; margin: 0 !important; transform: none !important;
}
/* Make the inner content fill the window (and follow it on resize): the body must
   grow to the modal height so the compose-split + editor expand with the window. */
body.compose-window-mode #modalDialog.compose-modal .modal-body { flex: 1 1 auto !important; min-height: 0 !important; }
/* Only the "close" button (last) is useful in a dedicated window — hide dim/minimize. */
body.compose-window-mode .compose-hero .compose-close-btn:not(:last-child) { display: none; }

/* Detached single-mail window (?om=…, context menu "In neuem Fenster öffnen"):
   show ONLY the opened message — hide ALL app chrome (sidebar/nav, list, bottom nav,
   mobile overlay/FAB, the in-reader hamburger), reader fills the window. */
body.mail-window-mode .sidebar,
body.mail-window-mode #messageListPanel,
body.mail-window-mode #mobileBottomNav,
body.mail-window-mode #mobileSidebarOverlay,
body.mail-window-mode #mobileFab,
body.mail-window-mode #messageReader .mobile-menu-btn,
body.mail-window-mode #messageReader .mobile-back-btn { display: none !important; }

/* Gesprächsverlauf-Fenster: die volle App-Struktur bleibt (Sidebar = reduzierte Ordnerliste,
   Mitte = Konversations-Mailliste, rechts = normaler Reader) — nur App-Chrome, das hier nicht
   passt, wird ausgeblendet. Der mobile Zurück-Pfeil im Reader BLEIBT (schmal → mobile-open). */
body.thread-window-mode #mobileBottomNav,
body.thread-window-mode #mobileFab,
body.thread-window-mode #mobileSidebarOverlay,
body.thread-window-mode .sidebar-mini-picker,
body.thread-window-mode #sidebarActionBtn,
body.thread-window-mode #sidebarTourBtn,
body.thread-window-mode #sidebarFindSlotBtn,
body.thread-window-mode #sidebarPrintBtn,
body.thread-window-mode #sidebarQuota,
body.thread-window-mode .sidebar-nav,
body.thread-window-mode .compose-btn,
body.thread-window-mode .message-checkbox,
body.thread-window-mode #messageListPanel .panel-header .mail-search-wrap,
body.thread-window-mode #messageListPanel .panel-header .header-actions { display: none !important; }
body.thread-window-mode .sidebar { padding-top: 8px; }
/* Eigenes Mail-Fenster: kein „Zurück"-Bereich, Mail nutzt die volle Fläche. */
body.mail-window-mode #messageReader .reader-content { padding-top: 18px; }
body.mail-window-mode .main-content { flex: 1 1 100% !important; }
body.mail-window-mode #mailView .mail-layout { height: 100vh !important; }
body.mail-window-mode #messageReader {
  display: flex !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
}

/* Eigenes Konferenz-Fenster („Beitreten", ?cwm=1): NUR die Konferenz zeigen —
   Sidebar, Konferenzliste und Mobile-Chrome ausblenden, Detail füllt das Fenster. */
body.conf-window-mode .sidebar,
body.conf-window-mode #confListPanel,
body.conf-window-mode #mobileBottomNav,
body.conf-window-mode #mobileSidebarOverlay,
body.conf-window-mode #mobileFab { display: none !important; }
body.conf-window-mode .main-content { flex: 1 1 100% !important; }
body.conf-window-mode #konferenzView .notes-layout { height: 100vh !important; }
body.conf-window-mode #conferenceMain { max-width: none !important; width: 100%; }

/* Minimized compose dock (bottom-right chip) */
.compose-dock {
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index: 200;
  opacity: 0.6; /* 40% transparent; full on hover */
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
  cursor: pointer;
}
.compose-dock-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.compose-dock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.compose-dock-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.compose-dock:hover { opacity: 1; }

.calendar-event:active {
  cursor: grabbing;
}

.calendar-day.cal-drag-over {
  background: var(--primary-light) !important;
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

.calendar-event.color-0 { background: #dbeafe; color: #1e40af; }
.calendar-event.color-1 { background: #dcfce7; color: #166534; }
.calendar-event.color-2 { background: #fef3c7; color: #92400e; }
.calendar-event.color-3 { background: #fce7f3; color: #9d174d; }
.calendar-event.color-4 { background: #e0e7ff; color: #3730a3; }
.calendar-event.color-5 { background: #ccfbf1; color: #115e59; }

[data-theme="dark"] .calendar-event.color-0 { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .calendar-event.color-1 { background: #14532d; color: #86efac; }
[data-theme="dark"] .calendar-event.color-2 { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .calendar-event.color-3 { background: #831843; color: #f9a8d4; }
[data-theme="dark"] .calendar-event.color-4 { background: #312e81; color: #a5b4fc; }
[data-theme="dark"] .calendar-event.color-5 { background: #134e4a; color: #5eead4; }

/* ═══════════════════ CONTACTS VIEW ═══════════════════════════════════════ */
.contacts-grid {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: grid;
  /* Fit as many cards as the width allows (2+ on wider/mobile-landscape, 1 on
     narrow phones). min(100%,…) keeps a single card from overflowing tiny screens. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  align-content: start;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition);
  cursor: pointer;
}

.contact-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}

.contact-name {
  font-size: 15px;
  font-weight: 600;
}

.contact-org {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.contact-title-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.contact-detail svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.contact-detail a {
  color: var(--primary);
  text-decoration: none;
}

.contact-detail a:hover {
  text-decoration: underline;
}

/* Let cards + their content shrink/wrap so long e-mails/URLs don't force the
   card wider than the screen (overflow on mobile). Grid/flex items default to
   min-width:auto, which is what pushes the card past the viewport edge. */
.contact-card { min-width: 0; }
.contact-card-header { min-width: 0; }
.contact-card-header > div { min-width: 0; }
.contact-detail { min-width: 0; }
.contact-detail > span,
.contact-detail a { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.contact-name, .contact-org, .contact-title-line { overflow-wrap: anywhere; }

/* ═══════════════════ MODAL ═══════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  /* Über dem mobilen Vollbild-Reader (z-index 200) — sonst öffnet z.B. "Weiterleiten"
     auf dem Handy UNTER der geöffneten Mail und wirkt kaputt. Kontextmenüs (300) bleiben darüber. */
  z-index: 250;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

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

/* While the compose window is dimmed: no dark tint / no blur → background stays
   fully visible and sharp behind the transparent window. */
.modal-overlay.compose-dim-bg {
  background: transparent;
  backdrop-filter: none;
  /* Die transparente Phase darf NIE Klicks abfangen: sonst wird sie zur unsichtbaren
     Vollbild-Falle (Rechtsklick-Menü der Mail-Liste „stirbt" bis zum Neustart). Der
     Dialog darin bleibt bedienbar. */
  pointer-events: none;
}
.modal-overlay.compose-dim-bg #modalDialog,
.modal-overlay.compose-dim-bg .modal {
  pointer-events: auto;
}

.modal {
  background: var(--bg-modal);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.contact-edit-modal {
  max-width: 860px;
  width: 92vw;
}
/* Two-column contact form on wide screens; single column on phones so the modal
   (and its buttons) don't overflow the screen. */
.contact-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-width: 700px; }
@media (max-width: 760px) {
  .contact-edit-grid { grid-template-columns: 1fr; min-width: 0; gap: 14px; }
  .modal.contact-edit-modal .form-actions { flex-wrap: wrap; }
  .modal.contact-edit-modal .form-actions .btn-primary,
  .modal.contact-edit-modal .form-actions .btn-text { flex: 1 1 auto; }
}

.modal.compose-modal {
  max-width: 960px;
  width: 90vw;
  border-radius: 24px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  position: relative;
  min-width: 420px;
  min-height: 400px;
}

/* On phones / large-font, modals must always fit the screen. The compose modal's
   fixed min-width/min-height would otherwise push it off the viewport. */
@media (max-width: 760px) {
  .modal { width: 96vw; max-height: 92vh; }
  .modal.compose-modal { min-width: 0; width: 96vw; min-height: 0; max-height: 92vh; border-radius: 16px; }
}

.modal.compose-modal .modal-header {
  display: none;
}

/* Compose modal edge-resize handles */
.modal-resize-handle {
  position: absolute;
  z-index: 40; /* above the compose content so the edges are always grabbable */
}
/* Wider handles that straddle the edge (a few px inside + outside) so the visible
   border itself is grabbable, not just a thin strip outside the modal. */
.modal-resize-n  { top: -6px; left: 10px; right: 10px; height: 14px; cursor: n-resize; }
.modal-resize-s  { bottom: -6px; left: 10px; right: 10px; height: 14px; cursor: s-resize; }
.modal-resize-e  { right: -6px; top: 10px; bottom: 10px; width: 14px; cursor: e-resize; }
.modal-resize-w  { left: -6px; top: 10px; bottom: 10px; width: 14px; cursor: w-resize; }
.modal-resize-ne { top: -6px; right: -6px; width: 18px; height: 18px; cursor: ne-resize; }
.modal-resize-nw { top: -6px; left: -6px; width: 18px; height: 18px; cursor: nw-resize; }
.modal-resize-se { bottom: -6px; right: -6px; width: 18px; height: 18px; cursor: se-resize; }
.modal-resize-sw { bottom: -6px; left: -6px; width: 18px; height: 18px; cursor: sw-resize; }

.modal.compose-modal .modal-body {
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Fill the dialog so the editor follows when the modal is resized via the corner
     handle (or fills a dedicated window). basis:auto avoids collapsing at auto height. */
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Compose Split Layout (form left, AI right) ── */
.compose-split {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.compose-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}

.compose-right {
  width: 260px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-light);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-input);
}

/* Live KI-correction panel */
.correction-boxes { display: flex; flex-direction: column; gap: 8px; }
.correction-empty { font-size: 13px; color: var(--text-muted); padding: 8px 4px; }
.correction-box {
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.correction-box-head { display: flex; align-items: center; gap: 8px; }
.correction-orig { font-weight: 600; color: #92400e; text-decoration: underline wavy #f59e0b; font-size: 13px; word-break: break-word; }
.correction-reason { margin-left: auto; font-size: 11px; color: #b45309; white-space: nowrap; }
.correction-detail { margin-top: 8px; }
.correction-row { display: flex; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.correction-label { width: 64px; flex-shrink: 0; font-weight: 600; color: #92400e; }
.correction-now { color: #b91c1c; text-decoration: line-through; word-break: break-word; }
.correction-new { color: #15803d; font-weight: 600; word-break: break-word; }
.correction-actions { display: flex; gap: 6px; margin-top: 6px; }
/* Fehler-Markierung im Editor: rote Wellenlinie (wie übliche Rechtschreibprüfung),
   keine gelbe Hinterlegung mehr. */
::highlight(lc-issue) { text-decoration: underline wavy #dc2626; text-decoration-skip-ink: none; }
/* automatisch korrigiertes Wort → grüne Wellenlinie (per Hover rückgängig). */
::highlight(lc-fixed) { text-decoration: underline wavy #16a34a; text-decoration-skip-ink: none; }

/* Small effect when a word is auto-corrected (yellow → green): a soft green pulse
   over the word + a ✓ that floats up. Pure overlay (no editor DOM mutation). */
.lc-fix-flash {
  position: fixed; z-index: 100030; pointer-events: none; border-radius: 4px;
  animation: lcFixPulse 0.7s ease-out forwards;
}
@keyframes lcFixPulse {
  0%   { background: rgba(34, 197, 94, 0.60); transform: scale(1.28); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  55%  { background: rgba(34, 197, 94, 0.30); }
  100% { background: rgba(34, 197, 94, 0);   transform: scale(1);    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}
.lc-fix-check {
  position: fixed; z-index: 100031; pointer-events: none;
  color: #16a34a; font-size: 13px; font-weight: 900; line-height: 1;
  animation: lcFixCheck 0.85s ease-out forwards;
}
@keyframes lcFixCheck {
  0%   { opacity: 0; transform: translateY(4px) scale(0.5); }
  30%  { opacity: 1; transform: translateY(-2px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}

/* Hover popover for a marked word (suggestion / revert) */
.lc-hover-pop {
  position: fixed;
  z-index: 100040;
  background: var(--bg-modal, #fff);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  padding: 8px 10px;
  font-size: 13px;
  max-width: 280px;
  display: none;
}
.lc-pop-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lc-pop-old { text-decoration: line-through; color: var(--text-muted); }
.lc-pop-arr { color: var(--text-muted); }
.lc-pop-new { font-weight: 700; color: var(--primary); }
.lc-pop-reason { font-size: 11px; color: var(--text-muted); margin: 2px 0; }
.lc-pop-btn {
  margin-top: 6px; width: 100%;
  background: var(--primary); color: #fff; border: none; border-radius: 6px;
  padding: 6px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.lc-pop-btn.revert { background: #16a34a; }
.lc-pop-btn.ignore { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); font-weight: 500; margin-top: 4px; }
.lc-pop-btn.ignore:hover { color: var(--text-primary); border-color: var(--primary); }
.lc-pop-btn:active { transform: scale(0.97); }
/* On phones the right column would crowd the compose editor — stack it below. */
@media (max-width: 760px) {
  .compose-split { flex-direction: column; }
  .compose-right { width: auto; border-left: none; border-top: 1px solid var(--border-light); max-height: 30vh; }
}

/* New mail without AI panel - full width */
.compose-split.compose-new-mail .compose-left {
  flex: 1;
  max-width: 100%;
}

.compose-right .compose-ai-suggestions {
  display: block !important;
  padding: 0;
}

.compose-right .ai-suggestions-bubbles {
  gap: 10px;
}

.compose-right .ai-bubble {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
}

/* Draft button */
.compose-draft-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

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

/* Signature settings */
.signature-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sig-account-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sig-account-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.sig-textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Courier New', monospace;
  padding: 12px 14px;
  border-radius: 10px;
  outline: none;
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.sig-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.sig-html-preview {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-panel);
  font-size: 9pt;
  line-height: 1.5;
}

.sig-html-preview img {
  max-width: 200px;
  height: auto;
}

.compose-sig-preview {
  display: none;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  background: var(--bg-panel);
  font-size: 9pt;
  line-height: 1.5;
}

.compose-sig-preview img {
  max-width: 200px;
  height: auto;
}

/* ── Compose Form – Friendly Design ──────────────────────────────────────── */

/* Hero header with gradient */
.compose-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 26px;
  background: linear-gradient(135deg, var(--primary-light), var(--bg-modal));
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  border-radius: 24px 24px 0 0;
}
/* Send button in the top bar — only on phones, where the on-screen keyboard
   would otherwise cover the Send button at the bottom of the compose form. */
.compose-hero-send { display: none; }
@media (max-width: 760px) {
  .compose-hero-send {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    background: var(--primary); color: #fff; border: none; border-radius: 8px;
    padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: inherit;
  }
  .compose-hero-send:active { transform: scale(0.95); }
}

.compose-hero-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--primary-glow);
}

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

.compose-hero-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.compose-hero-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compose-close-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}
.compose-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Field group */
.compose-form {
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.compose-field-group {
  padding: 14px 26px 6px;
}

.compose-field-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.compose-extra-row {
  animation: fadeSlideIn 0.2s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; max-height: 0; margin-bottom: 0; }
  to { opacity: 1; max-height: 60px; margin-bottom: 8px; }
}

.compose-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 64px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.compose-field-label svg {
  opacity: 0.55;
}
.compose-field-label:hover {
  color: var(--primary);
}
.compose-field-label:hover svg {
  opacity: 1;
}

.contact-picker-item {
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.contact-picker-item:hover {
  background: var(--bg-hover);
}

.compose-input {
  flex: 1;
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  padding: 9px 14px;
  border-radius: 10px;
  outline: none;
  transition: all var(--transition);
  min-width: 0;
}

.compose-input:focus, .compose-chips-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: var(--bg-panel);
}
.compose-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  cursor: text;
}
.compose-chip-input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  flex: 1;
  min-width: 80px;
  padding: 2px 0;
}
.email-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: white;
  padding: 2px 6px 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  /* Size to the address; don't let the input squeeze the bubble (it used to shrink
     and ellipsis-cut the recipient). Wraps to a new line instead when the row is full. */
  flex-shrink: 0;
  max-width: 100%;
}
.email-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.email-chip-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.email-chip-remove:hover {
  color: white;
}
/* Grüne Datei-Chips für den Konferenz-Datei-Pool (gleiche Form wie .email-chip). */
.file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #16a34a; color: #fff;
  padding: 2px 6px 2px 10px; border-radius: 12px; font-size: 12px;
  white-space: nowrap; max-width: 100%;
}
/* Info-Symbol mit Tooltip hinter Konferenz-Optionen. */
.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px;
  border-radius: 50%; font-size: 10px; font-weight: 700; font-style: normal;
  color: var(--text-muted); border: 1px solid var(--border); cursor: help;
}
.info-tip:hover { color: var(--primary); border-color: var(--primary); }
/* Options-Zeile (Checkbox + Label) im Konferenz-Dialog. */
.conf-optline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; }
/* Moderne „Aktivieren"-Buttons (Datei-Pool, Umfrage) — Umriss, füllt sich beim Hover/aktiv. */
.conf-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; border: 1.5px dashed var(--border); border-radius: 10px;
  background: transparent; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.conf-add-btn:hover { border-color: var(--primary); background: var(--primary-glow, rgba(99,102,241,.09)); color: var(--primary); }
.conf-add-btn.active { border-style: solid; border-color: var(--primary); background: var(--primary); color: #fff; }

/* „Jetzt"-Knopf neben der Beginn-Auswahl */
.conf-now-btn {
  padding: 0 14px; border: 1.5px solid var(--primary); border-radius: 10px;
  background: transparent; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.conf-now-btn:hover { background: var(--primary); color: #fff; }

/* Veranstaltungsart als drei Symbol-Kacheln */
.conf-type-tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border: 1.5px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--text-secondary); cursor: pointer; transition: all .15s;
}
.conf-type-tile .ctt-ico { font-size: 22px; line-height: 1; }
.conf-type-tile .ctt-lbl { font-size: 12px; font-weight: 600; }
.conf-type-tile:hover { border-color: var(--primary); color: var(--primary); }
.conf-type-tile.active { border-color: var(--primary); background: var(--primary-glow, rgba(99,102,241,.10)); color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }

/* Blaue Aktions-Buttons (Datei-Pool-Icon + Umfrage) */
.conf-blue-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border: none; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(99,102,241,.35); transition: filter .15s, box-shadow .15s;
}
.conf-blue-btn:hover { filter: brightness(1.08); }
.conf-blue-btn.active { box-shadow: 0 0 0 3px var(--primary-glow, rgba(99,102,241,.30)), 0 2px 8px rgba(99,102,241,.35); }
.conf-icon-only { width: 46px; padding: 11px 0; font-size: 17px; flex: 0 0 auto; }
.conf-icon-only.active::after {
  content: '✓'; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: #16a34a; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.conf-btn-sm { padding: 8px 12px; font-size: 13px; }
/* Einrichtungsassistent: Dienste als anklickbare Symbol-Kacheln */
.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .setup-grid { grid-template-columns: repeat(2, 1fr); } }
.setup-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 8px; border: 2px solid var(--border); border-radius: 12px;
  background: transparent; cursor: pointer; transition: all .15s; opacity: .5;
}
.setup-tile .st-ico { font-size: 28px; line-height: 1; }
.setup-tile .st-nm { font-weight: 700; font-size: 13px; color: var(--text); }
.setup-tile .st-ds { font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.3; }
.setup-tile .st-chk { position: absolute; top: 5px; right: 7px; color: var(--primary); font-weight: 800; }
.setup-tile:hover { opacity: .85; border-color: var(--primary); }
.setup-tile.on { opacity: 1; border-color: var(--primary); background: var(--primary-glow, rgba(99,102,241,.09)); }
.setup-need { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.setup-need .sn-h { font-size: 13px; margin-bottom: 2px; }
.setup-need .sn-b { font-size: 12px; color: var(--text-muted); }

/* Live-Reaktionen: dezent rechts einblenden, dann sanft ausblenden */
@keyframes reactIn { from { opacity:0; transform: translateX(24px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes reactOut { to { opacity:0; transform: translateX(18px); } }

/* Zurück-Knopf in der Konferenz (nur am Handy sichtbar) */
.conf-back-btn { display: none; align-items: center; gap: 5px; background: transparent; border: none;
  color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; padding: 2px 0 6px; }

/* Games-Menü (Spiele-Auswahl in der Konferenz) — mit Vorschaubild */
.conf-game-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px;
  background: transparent; border: none; border-radius: 10px; cursor: pointer; color: var(--text);
  text-align: left;
}
.conf-game-item:hover { background: var(--bg-hover); }
.conf-game-item .cg-shot {
  width: 96px; height: 60px; flex: 0 0 auto; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); background: #0b1220;
}
.conf-game-item .cg-fallback {
  width: 96px; height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 26px; border-radius: 8px; border: 1px solid var(--border); background: #0b1220;
}
.conf-red-btn { background: var(--danger, #ef4444); box-shadow: 0 2px 8px rgba(239,68,68,.35); }
.conf-red-btn.active { box-shadow: 0 0 0 3px rgba(239,68,68,.30), 0 2px 8px rgba(239,68,68,.35); }

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

/* From select */
.compose-from-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* CC/BCC toggle button */
.compose-cc-toggle {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  letter-spacing: 0.02em;
  margin-left: 6px;
}

.compose-cc-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* Body area */
.compose-body-area {
  padding: 0 26px;
}

.compose-body-area textarea {
  width: 100%;
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  padding: 14px 16px;
  border-radius: 12px;
  outline: none;
  resize: vertical;
  min-height: 180px;
  line-height: 1.7;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.compose-body-area textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: var(--bg-panel);
}

.compose-body-area textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Compose Attachments */
.compose-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 0;
  margin: 0 26px;
}

.compose-att-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-size: 12px;
  color: var(--text-secondary);
}

.compose-att-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.compose-att-item .att-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-att-item .att-size {
  color: var(--text-muted);
  font-size: 11px;
}

.compose-att-item .att-remove {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  font-family: inherit;
}

.compose-att-item .att-remove:hover {
  color: var(--danger);
}

/* AI Suggestion Bubbles */
.compose-ai-suggestions {
  padding: 10px 26px 6px;
}

.ai-suggestions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ai-suggestions-header svg {
  color: var(--accent);
}

.ai-suggestions-bubbles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* AI bubble styles are in the COMPOSE TOOLBAR / AI SUGGESTION BUBBLES section below */

[data-theme="space"] .ai-suggestions-header svg {
  color: #bf5af2;
}

/* AI hint */
.compose-ai-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 26px 2px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Action bar – sticky bottom */
.compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px 18px;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg-modal);
  border-top: 1px solid var(--border-light);
  border-radius: 0 0 24px 24px;
}

.compose-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compose-discard {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.compose-discard:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

.compose-send-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  box-shadow: 0 4px 14px var(--primary-glow);
  white-space: nowrap;
}

.compose-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--primary-glow);
}
.send-schedule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.send-schedule-item:hover {
  background: var(--bg-hover);
}

.compose-send-btn:active {
  transform: translateY(0);
}

/* AI Button */
.btn-ai {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.btn-ai:hover {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.btn-ai:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.btn-ai.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

.ai-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  letter-spacing: 0.03em;
}

.btn-ai:hover .ai-badge {
  background: rgba(255,255,255,0.25);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* AI Prompt Popover */
.ai-prompt-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  z-index: 150;
  animation: popoverIn 0.15s ease;
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-prompt-popover-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 16px 6px;
}

.ai-prompt-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
}

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

.ai-prompt-option svg {
  color: var(--accent);
  flex-shrink: 0;
}

.ai-prompt-option:hover svg {
  color: var(--primary);
}

.ai-prompt-custom {
  color: var(--text-secondary);
}

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

.ai-prompt-custom-input {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-prompt-custom-input textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
  resize: none;
  line-height: 1.5;
}

.ai-prompt-custom-input textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.ai-prompt-custom-input textarea::placeholder {
  color: var(--text-muted);
}

.ai-prompt-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}

.ai-prompt-submit:hover {
  box-shadow: 0 3px 10px var(--primary-glow);
}

/* Reader AI popover - position above the button */
.reader-ai-popover {
  bottom: calc(100% + 8px);
  left: auto;
  right: 0;
}

/* Space popover */
[data-theme="space"] .ai-prompt-popover {
  border-color: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.08), var(--shadow-lg);
}

[data-theme="space"] .ai-prompt-option:hover {
  background: rgba(0, 212, 255, 0.06);
}

[data-theme="space"] .ai-prompt-option svg {
  color: #bf5af2;
}

[data-theme="space"] .ai-prompt-submit {
  background: linear-gradient(135deg, #00d4ff, #bf5af2);
}

/* Dark theme hero */
[data-theme="dark"] .compose-hero {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), var(--bg-modal));
}

/* Space compose */
[data-theme="space"] .compose-hero {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), var(--bg-modal));
}

[data-theme="space"] .compose-hero-icon {
  background: linear-gradient(135deg, #00d4ff, #bf5af2);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
}

[data-theme="space"] .compose-send-btn {
  background: linear-gradient(135deg, #00d4ff, #bf5af2);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
}

[data-theme="space"] .compose-send-btn:hover {
  box-shadow: 0 6px 24px rgba(0, 212, 255, 0.5);
}

[data-theme="space"] .compose-input:focus,
[data-theme="space"] .compose-body-area textarea:focus {
  border-color: #00d4ff;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

[data-theme="space"] .compose-cc-toggle:hover {
  border-color: #00d4ff;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.06);
}

[data-theme="space"] .compose-close-btn:hover {
  color: #00d4ff;
}

/* Space AI button glow */
[data-theme="space"] .btn-ai {
  border-color: #bf5af2;
  color: #bf5af2;
}
[data-theme="space"] .btn-ai:hover {
  background: #bf5af2;
  color: white;
  box-shadow: 0 0 16px rgba(191, 90, 242, 0.4);
}
[data-theme="space"] .ai-badge {
  background: #bf5af2;
  box-shadow: 0 0 6px rgba(191, 90, 242, 0.4);
}

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

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Maximize button only visible on fullscreen-mail-modal */
.modal-maximize-btn {
  display: none;
}
.fullscreen-mail-modal .modal-maximize-btn {
  display: flex;
}

.modal-body {
  padding: 24px;
}

/* Form styles */
.form-group {
  margin-bottom: 16px;
}

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

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: all var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-actions {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
}

/* ── Attendee Chips ── */
.attendee-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.attendee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 8px 4px 10px;
  font-size: 12px;
}

.attendee-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.attendee-chip button:hover {
  color: var(--danger);
}

.attendee-status {
  font-size: 12px;
  flex-shrink: 0;
}

.attendee-status-accepted { color: #22c55e; }
.attendee-status-declined { color: #ef4444; }
.attendee-status-tentative { color: #f59e0b; }
.attendee-status-needs-action { color: var(--text-muted); }

.attendee-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.attendee-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}

.attendee-option:hover, .attendee-option.active {
  background: var(--bg-hover);
}

/* ═══════════════════ STATES ═════════════════════════════════════════════ */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--text-muted);
}

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

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ═══════════════════ TOAST ══════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* Über ALLEM, auch über dem Vollbild-Call (z 9500) und den Konferenz-Menüs (10006) —
     Toasts sind flüchtige Meldungen („Protokoll erstellt", Fehler) und waren im Call unsichtbar. */
  z-index: 10010;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 360px;
}

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

.toast.error {
  background: var(--danger);
  color: white;
}

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

/* ═══════════════════ THEME TOGGLE ═══════════════════════════════════════ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--primary);
  border-color: var(--primary);
}

/* ═══════════════════ FULLSCREEN MAIL POPUP ══════════════════════════════ */
.modal.fullscreen-mail-modal {
  width: 90vw;
  max-width: 1100px;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  min-width: 400px;
  min-height: 300px;
}

.modal.fullscreen-mail-modal.modal-maximized {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0;
  resize: none;
}

.modal.fullscreen-mail-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.fullscreen-mail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.fullscreen-mail-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.fullscreen-mail-subject {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  line-height: 1.3;
}

.fullscreen-mail-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fullscreen-mail-meta-info {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.fullscreen-mail-recipients {
  color: var(--text-muted);
  font-size: 12px;
}

.fullscreen-mail-date {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.fullscreen-mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.fullscreen-mail-actions .btn-text {
  font-size: 12px;
  padding: 4px 10px;
}

.message-source-view {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-sidebar);
  padding: 16px;
  border-radius: var(--radius-sm);
  overflow: auto;
  flex: 1;
  max-height: calc(90vh - 80px);
  margin: 0;
}

.fullscreen-mail-body {
  flex: 1;
  min-height: 300px;
}

.fullscreen-mail-body iframe {
  width: 100%;
  border: none;
  background: #fff;
  border-radius: var(--radius-sm);
}

.fullscreen-mail-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ═══════════════════ AI SUMMARY BOX ═════════════════════════════════════ */
.ai-summary-box {
  position: relative;
  margin: 12px 0;
  padding: 12px 32px 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  animation: summarySlideIn 0.3s ease;
}

@keyframes summarySlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.ai-summary-close {
  position: absolute;
  top: 8px;
  right: 8px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.ai-summary-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.ai-summary-content {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  /* Lange, ununterbrochene Tokens (z. B. Tracking-URLs aus Stepstone-Mails)
     müssen umbrechen, sonst läuft der Text aus der Box. */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.ai-summary-col { min-width: 0; }
.ai-summary-content a { overflow-wrap: anywhere; word-break: break-all; }

/* Two-block summary when the mail is part of a conversation: left = this mail,
   right = the whole conversation. */
.ai-summary-body.two-cols {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.ai-summary-body.two-cols .ai-summary-col {
  flex: 1 1 0;
  min-width: 0;
}
.ai-summary-body.two-cols .ai-summary-col:first-child {
  border-right: 1px solid var(--border);
  padding-right: 14px;
}
.ai-summary-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 5px;
}
@media (max-width: 720px) {
  .ai-summary-body.two-cols { flex-direction: column; gap: 12px; }
  .ai-summary-body.two-cols .ai-summary-col:first-child {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }
}

.ai-summary-content p {
  margin: 0 0 8px;
}

.ai-summary-content p:last-child {
  margin-bottom: 0;
}

.ai-summary-content ul {
  margin: 2px 0;
  padding-left: 18px;
}

.ai-summary-content li {
  margin-bottom: 3px;   /* ~quarter line between points */
}
.ai-summary-content li:last-child { margin-bottom: 0; }

.ai-summary-content strong {
  color: var(--text-primary);
}

.ai-summary-loading {
  border-left-color: var(--text-muted);
}

.ai-summary-loading .ai-summary-header {
  color: var(--text-secondary);
  margin-bottom: 0;
}

.ai-summary-loading .spinner {
  animation: spin 1s linear infinite;
}

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

/* Summarize popover hints */
.summarize-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.ai-prompt-option.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-prompt-option.disabled:hover {
  background: transparent;
}

.ai-prompt-option > div {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════ APPOINTMENT PREVIEW ════════════════════════════════ */
.appointment-preview {
  display: flex;
  gap: 20px;
  min-width: 500px;
}

.apt-mini-calendar {
  flex-shrink: 0;
  width: 220px;
}

.apt-mini-header {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.apt-mini-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.apt-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.apt-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 50%;
  color: var(--text-primary);
}

.apt-day.other {
  color: var(--text-muted);
  opacity: 0.4;
}

.apt-day.today {
  font-weight: 700;
  border: 1px solid var(--primary);
}

.apt-day.highlight {
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: 700;
  box-shadow: 0 0 8px var(--primary-glow, rgba(99, 102, 241, 0.4));
}

.appointment-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.appointment-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.appointment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

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

.appointment-conf {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.conf-high { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.conf-medium { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.conf-low { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.appointment-card-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

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

.appointment-detail svg {
  flex-shrink: 0;
}

.appointment-desc {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 22px;
}

.appointment-card-actions {
  display: flex;
  justify-content: flex-end;
}

/* Sent mail appointment prompt */
.sent-apt-prompt {
  max-width: 420px;
}

.sent-apt-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.sent-apt-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.sent-apt-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.sent-apt-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ═══════════════════ THEME PICKER ═══════════════════════════════════════ */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0;
}

.theme-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
}

.theme-picker-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-picker-item.active {
  border-color: var(--primary);
  background: var(--bg-active);
  box-shadow: 0 0 0 1px var(--primary);
}

.theme-picker-preview {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}

.theme-picker-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25%;
  border-right: 1px solid rgba(0,0,0,0.1);
}

.theme-picker-accent {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 8px;
  border-radius: 4px;
}

.theme-picker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ═══════════════════ SCROLLBAR ══════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ═══════════════════ ANIMATIONS ═════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ═══════════════════ BULK SELECTION ════════════════════════════════════ */
.message-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
  margin-right: -6px;
  align-self: center; /* vertically center in the (taller) message row */
}

.message-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.message-checkbox .checkmark {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 4px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-checkbox:hover .checkmark {
  border-color: var(--primary);
}

.message-checkbox input:checked ~ .checkmark {
  background: var(--primary);
  border-color: var(--primary);
}

.message-checkbox input:checked ~ .checkmark::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}

.message-item.selected {
  background: var(--primary-light);
}

/* Keyboard cursor (Shift+Arrow range selection) */
.message-item.kbd-cursor {
  box-shadow: inset 2px 0 0 0 var(--primary);
}

/* Mobile swipe-to-action: a fixed colored strip at the screen edge shows the action */
#swipeIndicator {
  position: fixed;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  width: 70px;
  color: #fff;
  pointer-events: none;
}
#swipeIndicator.del { background: var(--danger, #ef4444); }
#swipeIndicator.read { background: var(--primary); }
.message-item { will-change: transform; }

/* Mobile Suchleiste: OBEN in der Kopfzeile ist der Standard (im normalen Fluss).
   Optional unten angedockt (Einstellungen → Darstellung → „Mobile Suchleiste
   unten" → body.msearch-bottom): volle Breite direkt auf der Bottom-Nav. */
@media (max-width: 1024px) {
  body.msearch-bottom #mailView.active #messageListPanel .panel-header .mail-search-wrap,
  body.msearch-bottom #calendarView.active .panel-header .cal-search-bar,
  body.msearch-bottom #contactsView.active .panel-header .search-box,
  body.msearch-bottom #notesView.active .panel-header .search-box,
  body.msearch-bottom #konferenzView.active #confListPanel .panel-header .search-box {
    position: fixed;
    left: 0;
    right: 0;
    /* --mnav-h wird per JS aus der ECHTEN Bottom-Nav-Höhe gesetzt (updateMnavHeight) —
       feste 52px stimmten je nach Gerät/Schrift nicht und ließen die Leiste schweben. */
    bottom: var(--mnav-h, 52px);
    margin: 0;
    z-index: 120;
    background: var(--bg-panel);
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    border-radius: 0;
    max-width: none;
    box-shadow: none;
  }
  /* Kontakte/Notizen/Konferenzen docken die .search-box DIREKT an (nur ein <input>), Mail dagegen
     die .mail-search-wrap mit 36px-Button → jene Leisten waren ~16px niedriger. Auf Mail-Höhe
     angleichen (border-box: min-height = Außenhöhe der Leiste). */
  body.msearch-bottom #contactsView.active .panel-header .search-box,
  body.msearch-bottom #notesView.active .panel-header .search-box,
  body.msearch-bottom #konferenzView.active #confListPanel .panel-header .search-box {
    min-height: 52px;
  }
  #mailView.active #messageListPanel .panel-header #searchScope { display: none; }
  /* Unten-Dock: Platz unter den Listen (Nav + ~56px Suchleiste). */
  body.msearch-bottom #mailView.active .message-list { padding-bottom: calc(var(--mnav-h, 52px) + 60px); }
  body.msearch-bottom #notesView.active .notes-list { padding-bottom: calc(var(--mnav-h, 52px) + 60px); }
  body.msearch-bottom #contactsView.active .contacts-grid { padding-bottom: calc(var(--mnav-h, 52px) + 60px); }
  body.msearch-bottom #konferenzView.active .notes-list { padding-bottom: calc(var(--mnav-h, 52px) + 60px); }
  body.msearch-bottom #calendarView.active { padding-bottom: calc(var(--mnav-h, 52px) + 56px); }
  /* Oben-Standard: nur die Bottom-Nav freihalten. */
  body:not(.msearch-bottom) #mailView.active .message-list { padding-bottom: calc(var(--mnav-h, 52px) + 12px); }
  body:not(.msearch-bottom) #notesView.active .notes-list { padding-bottom: calc(var(--mnav-h, 52px) + 12px); }
  body:not(.msearch-bottom) #contactsView.active .contacts-grid { padding-bottom: calc(var(--mnav-h, 52px) + 12px); }
  body:not(.msearch-bottom) #konferenzView.active .notes-list { padding-bottom: calc(var(--mnav-h, 52px) + 12px); }
  body:not(.msearch-bottom) #calendarView.active { padding-bottom: calc(var(--mnav-h, 52px) + 8px); }
}

.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-input);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.bulk-toolbar .bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  min-width: 80px;
}

.bulk-toolbar .bulk-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.bulk-toolbar .bulk-select:focus {
  border-color: var(--primary);
}

.bulk-toolbar .bulk-select-all-link {
  border: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  background: none;
  font-family: inherit;
}

.bulk-toolbar .bulk-select-all-link:hover {
  color: var(--primary-hover);
}

/* ═══════════════════ CONTEXT MENU ═════════════════════════════════════ */
.context-menu {
  position: fixed;
  z-index: 300;
  min-width: 200px;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  animation: fadeIn 0.12s ease;
  max-height: 85vh;      /* tall menus stay fully reachable */
  overflow-y: auto;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

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

.context-menu-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.context-menu-item:hover svg {
  color: var(--text-primary);
}

.context-menu-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.context-menu-item.danger {
  color: var(--danger);
}

.context-menu-item.danger svg {
  color: var(--danger);
}

/* Space context menu glow */
[data-theme="space"] .context-menu {
  border-color: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1), var(--shadow-lg);
}

[data-theme="space"] .context-menu-item:hover {
  background: rgba(0, 212, 255, 0.08);
}

/* ═══════════════════ ACCOUNT SECTIONS ═══════════════════════════════════ */
.account-section {
  margin-bottom: 4px;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 4px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
  border-radius: var(--radius-sm);
}

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

.account-header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition);
  opacity: 0.5;
  color: var(--text-muted);
}

.account-header-toggle.expanded {
  transform: rotate(90deg);
}

.account-header-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
}

.account-header-email {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Different color for extra accounts */
.account-section:nth-child(2) .account-header-icon {
  background: linear-gradient(135deg, #10b981, #06b6d4);
}

.account-section:nth-child(3) .account-header-icon {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

/* ═══════════════════ DRAG & DROP ════════════════════════════════════════ */
.message-item[draggable="true"] {
  cursor: grab;
}

.message-item[draggable="true"]:active {
  cursor: grabbing;
}

.message-item.dragging {
  opacity: 0.25;
}

/* Lightweight drag ghost – doesn't cover target folders */
.drag-ghost {
  position: fixed;
  top: -100px;
  left: -100px;
  padding: 6px 14px;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  pointer-events: none;
  z-index: 9999;
  box-shadow: var(--shadow-md);
}

.mailbox-item.drag-over {
  background: var(--primary-light) !important;
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  color: var(--primary) !important;
  font-weight: 600;
}

[data-theme="space"] .mailbox-item.drag-over {
  outline-color: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
}

/* Drag & Drop Confirmation Dialog */
.dd-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.dd-confirm-dialog {
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-xl);
  text-align: center;
  max-width: 380px;
  width: 90%;
  animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dd-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.dd-confirm-text {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.dd-confirm-text strong {
  color: var(--primary);
}

.dd-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

[data-theme="space"] .dd-confirm-dialog {
  border-color: rgba(0, 212, 255, 0.15);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), var(--shadow-xl);
}

[data-theme="space"] .dd-confirm-icon {
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

/* Space nav icon glow */
[data-theme="space"] .nav-icon-btn:hover {
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
}

[data-theme="space"] .nav-icon-btn.active {
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.12);
}

/* ═══════════════════ COMPOSE TOOLBAR ═══════════════════════════════════ */
.compose-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-input);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  flex-wrap: wrap;
}

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s;
}

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

.tb-btn:active {
  background: var(--primary-light);
  color: var(--primary);
}

.tb-sep {
  width: 1px;
  height: 18px;
  background: var(--border-light);
  margin: 0 4px;
  flex-shrink: 0;
}

.tb-select {
  padding: 3px 6px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.tb-select:focus {
  border-color: var(--primary);
}

.tb-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.tb-option:hover {
  color: var(--text-primary);
}

.tb-option input[type="checkbox"] {
  width: 13px;
  height: 13px;
  accent-color: var(--primary);
}

/* ═══════════════════ COMPOSE EDITOR (contenteditable) ═════════════════ */
.compose-editor {
  flex: 1;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  overflow-y: auto;
  min-height: 180px;
  outline: none;
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-panel);
}

.compose-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}

.compose-editor.drag-over {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.06);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.compose-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.compose-editor .email-signature {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 9pt;
  color: var(--text-secondary);
}

.compose-editor .email-signature img {
  max-width: 200px;
  height: auto;
}

/* ═══════════════════ AI SUGGESTION BUBBLES ════════════════════════════ */
.ai-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  background: transparent;
}

.ai-bubble:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.ai-bubble svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.ai-bubble-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ai-bubble-label {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
/* Hinweis, dass die Mail in einer Fremdsprache ist (über den Antwort-Varianten). */
.ai-lang-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
/* „🌐 <Sprache>"-Button je Vorschlag → übernimmt die übersetzte Fassung. */
.ai-bubble-lang {
  font-weight: 600;
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--primary);
  background: var(--primary-light, rgba(37,99,235,.12));
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.ai-bubble-lang:hover { background: var(--primary); color: #fff; }

.ai-bubble-text {
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Positive = green */
.ai-bubble-positive {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
  color: #059669;
}
.ai-bubble-positive:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.5);
}
.ai-bubble-positive .ai-bubble-label { color: #059669; }
.ai-bubble-positive svg { color: #10b981; }

/* Negative = red */
.ai-bubble-negative {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
  color: #dc2626;
}
.ai-bubble-negative:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
}
.ai-bubble-negative .ai-bubble-label { color: #dc2626; }
.ai-bubble-negative svg { color: #ef4444; }

/* Neutral = blue */
.ai-bubble-neutral {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.06);
  color: #2563eb;
}
.ai-bubble-neutral:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.5);
}
.ai-bubble-neutral .ai-bubble-label { color: #2563eb; }
.ai-bubble-neutral svg { color: #3b82f6; }

/* Loading bubble */
.ai-bubble-loading {
  border-color: var(--border-light);
  color: var(--text-muted);
  cursor: default;
  justify-content: center;
}
.ai-bubble-loading:hover {
  transform: none;
  box-shadow: none;
}

@keyframes bubbleFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .ai-bubble-positive {
  color: #6ee7b7;
}
[data-theme="dark"] .ai-bubble-positive .ai-bubble-label { color: #6ee7b7; }
[data-theme="dark"] .ai-bubble-negative {
  color: #fca5a5;
}
[data-theme="dark"] .ai-bubble-negative .ai-bubble-label { color: #fca5a5; }
[data-theme="dark"] .ai-bubble-neutral {
  color: #93c5fd;
}
[data-theme="dark"] .ai-bubble-neutral .ai-bubble-label { color: #93c5fd; }

/* Space theme */
[data-theme="space"] .ai-bubble-positive {
  border-color: rgba(0, 255, 100, 0.25);
  background: rgba(0, 255, 100, 0.05);
  color: #4ade80;
}
[data-theme="space"] .ai-bubble-negative {
  border-color: rgba(255, 50, 50, 0.25);
  background: rgba(255, 50, 50, 0.05);
  color: #f87171;
}
[data-theme="space"] .ai-bubble-neutral {
  border-color: rgba(0, 212, 255, 0.25);
  background: rgba(0, 212, 255, 0.05);
  color: #67e8f9;
}

/* ═══════════════════ AI SETTINGS ══════════════════════════════════════ */
.ai-settings {
  max-width: 520px;
}

.ai-provider-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-provider-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg-input);
}

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

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

.ai-provider-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-provider-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border-radius: 8px;
  flex-shrink: 0;
}

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

.ai-provider-name {
  font-weight: 600;
  font-size: 14px;
  display: block;
  color: var(--text-primary);
}

.ai-provider-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.ai-provider-check {
  color: var(--primary);
  flex-shrink: 0;
  width: 20px;
}

.ai-provider-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-opt-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ai-opt-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
}

.ai-opt-select:focus {
  border-color: var(--primary);
}

.ai-opt-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
}

.ai-opt-input:focus {
  border-color: var(--primary);
}

/* ═══════════════════ SIGNATURE EDITOR ═════════════════════════════════ */
.signature-settings {
  max-width: 560px;
}

.sig-account-block {
  margin-bottom: 16px;
}

.sig-account-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.sig-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border: 1px solid var(--border-light);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bg-input);
}

.sig-editor {
  border: 1px solid var(--border-light);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 12px 14px;
  min-height: 160px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-panel);
  outline: none;
  overflow-y: auto;
}

.sig-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}

.sig-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.sig-editor img {
  max-width: 200px;
  height: auto;
}

/* ═══════════════════ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mail-search-box {
    max-width: none;
  }

  .search-scope-select {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }

  .sidebar.mobile-sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }

  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 299;
  }

  .mobile-sidebar-overlay.active {
    display: block;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-sidebar);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Double-arrow-left button to collapse the mobile sidebar */
  .sidebar-header { position: relative; }
  .mobile-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    z-index: 5;
  }
  .mobile-sidebar-close:hover { background: var(--bg-hover); }

  .resize-handle {
    display: none;
  }

  .message-list-panel {
    /* !important so a leftover inline width (desktop resize handle) can't shrink
       the list on mobile and leave the reader panel blank beside it. */
    width: 100% !important;
    border-right: none;
    min-height: 0;
  }

  .message-reader-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--bg-panel);
    overflow-y: auto;
  }

  .message-reader-panel.mobile-open {
    display: block;
  }

  .mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-sidebar);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
  }

  .mobile-back-btn:hover {
    background: var(--bg-hover);
  }

  .contacts-grid {
    padding: 12px;
    gap: 12px;
  }
  .contact-card { padding: 16px; }
}

/* Contact road-distance badge */
.contact-detail.contact-distance {
  color: var(--primary);
  font-weight: 600;
}

/* In-app attachment viewer (PWA-safe: never navigates away, always dismissible) */
.attachment-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.88);
  padding-top: env(safe-area-inset-top, 0);
}
.attachment-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.attachment-viewer-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-viewer-bar .btn-text { color: #fff; }
.attachment-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  background: #525659;
}

/* Hide mobile-only elements on desktop */
@media (min-width: 1025px) {
  .mobile-back-btn,
  .mobile-menu-btn,
  .mobile-sidebar-close,
  .mobile-sidebar-overlay,
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Mobile bottom navigation (view switcher) — fixed under the list and over an
   opened mail, so views can be switched quickly. */
.mobile-bottom-nav { display: none; }
#mobileFab { display: none; }
/* Never show the "+" FAB over an open dialog (compose/reply/settings) or in a
   detached compose window. */
body.compose-window-mode #mobileFab,
body:has(.modal-overlay.active) #mobileFab { display: none !important; }
.mail-addr-link { color: var(--primary); cursor: pointer; text-decoration: none; word-break: break-all; }
.mail-addr-link:hover { text-decoration: underline; }
@media (max-width: 1024px) {
  #mobileFab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px;
    /* ÜBER der unten angedockten Suchleiste (~56px), die auf der Bottom-Nav (--mnav-h)
       sitzt — mit festen 66px hing der Plus-Knopf IN der Suchleiste und war (v. a. im
       Kalender) nicht erreichbar. */
    bottom: calc(var(--mnav-h, 52px) + 56px + 14px + env(safe-area-inset-bottom, 0px));
  }
  body:not(.msearch-bottom) #mobileFab {
    bottom: calc(var(--mnav-h, 52px) + 14px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
    z-index: 249; padding: 0;
  }
  #mobileFab:active { transform: scale(0.93); }
  .mobile-bottom-nav {
    display: flex;
    /* 7 Programme → 2-zeilig: oben 4, darunter zentriert 3 (je 25% Breite → 4 pro Zeile). */
    flex-wrap: wrap; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 250;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mnav-btn {
    flex: 0 0 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 4px 6px; border: none; background: none; cursor: pointer; position: relative;
    color: var(--text-muted); font-family: inherit;
  }
  .mnav-btn .mnav-label { font-size: 11px; line-height: 1; }
  .mnav-btn.active { color: var(--primary); }
  .mnav-badge {
    position: absolute; top: 2px; left: calc(50% + 4px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--danger, #ef4444); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  /* Reserve space so content isn't hidden behind the bottom nav (~52px). */
  .message-list { padding-bottom: 56px; }
  .message-reader-panel.mobile-open { padding-bottom: 56px; }
  #calendarView, #contactsView { padding-bottom: 56px; }
}

/* ═══════════════════ NEWSLETTER / BLOCKED / FRAUD ═══════════════════════ */

/* Newsletter: yellow left border */
.message-item.message-newsletter {
  border-left: 3px solid var(--warning);
  padding-left: 15px;
}

.message-item.message-newsletter::after {
  content: 'Newsletter';
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 10px;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* Blocked: greyed out with strikethrough */
.message-item.message-blocked {
  opacity: 0.5;
}

.message-item.message-blocked .message-subject {
  text-decoration: line-through;
}

.message-item.message-blocked::after {
  content: 'Blockiert';
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 10px;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* Fraud warning banner */
.fraud-warning-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.fraud-warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 8px;
}

.fraud-warning-header svg {
  stroke: var(--danger);
  flex-shrink: 0;
}

.fraud-warning-header strong {
  font-size: 14px;
}

.fraud-reasons {
  margin: 0;
  padding-left: 28px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fraud-reasons li {
  margin-bottom: 4px;
}

/* Phishing banner shown on opening a mail with suspicious links (instant heuristic) */
.mail-phish-banner {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 5px solid var(--danger, #ef4444);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.mail-phish-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--danger, #ef4444);
}
.mail-phish-bang {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  color: #fff;
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mail-phish-head strong { font-size: 14px; }
.mail-phish-reasons {
  margin: 8px 0 0 38px;
  padding: 0;
  list-style: disc;
  font-size: 13px;
  color: var(--text-primary);
}
.mail-phish-reasons li { margin: 2px 0; }
.mail-phish-advice {
  margin: 8px 0 0 38px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-secondary);
}

/* Event editor "Ort" row: narrower location field + inline meeting toggle chips */
.event-location-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.event-location-row #eventLocation {
  flex: 1 1 auto;
  min-width: 0;
}
.meeting-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 8px 11px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.meeting-chip input { display: none; }
.meeting-chip svg { flex-shrink: 0; }
.meeting-chip.active {
  border-color: var(--primary);
  background: var(--primary-glow, rgba(99, 102, 241, 0.14));
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 520px) {
  .event-location-row { flex-wrap: wrap; }
  .event-location-row #eventLocation { flex: 1 0 100%; }
}

/* Blue on/off toggle switch for the Darstellung settings cards (familiar slider) */
.setting-switch {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--border, #cbd5e1);
  transition: background 0.15s ease;
}
.setting-switch.on { background: var(--primary, #3b82f6); }
.setting-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.setting-switch.on .setting-switch-knob { transform: translateX(18px); }

/* PWA "Neue Version" update banner — stack vertically and sit above the bottom
   nav on narrow phones so the text + "Jetzt aktualisieren" button always fit. */
@media (max-width: 520px) {
  #pwaUpdateBanner {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-width: none !important;
    bottom: 70px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    text-align: center;
  }
  #pwaUpdateBanner button { width: 100%; }
}

/* Blacklist settings */
.blacklist-settings h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.blacklist-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blacklist-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.blacklist-entry span {
  color: var(--text-primary);
}

.btn-text-danger {
  color: var(--danger) !important;
}

.btn-text-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Dark/Space theme adjustments */
[data-theme="dark"] .fraud-warning-banner,
[data-theme="space"] .fraud-warning-banner {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="space"] .fraud-warning-banner {
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.1);
}

[data-theme="space"] .message-item.message-newsletter::after {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Calendar Color Picker Menu
   ═══════════════════════════════════════════════════════════════════════════ */

.cal-color-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-card);
  border: 1px solid var(--border-color, rgba(0,0,0,0.12));
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 190px;
}

.cal-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.cal-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.cal-color-swatch:hover {
  transform: scale(1.2);
}

.cal-color-swatch.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary);
}

.cal-color-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.cal-color-custom label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.cal-color-input {
  width: 32px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  background: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICS Invitation Banner
   ═══════════════════════════════════════════════════════════════════════════ */

.ics-invitation-banner {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.ics-invitation-banner.ics-cancel {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  border-left-color: var(--danger);
}

.ics-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}

.ics-cancel .ics-banner-header {
  color: var(--danger);
}

.ics-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.ics-banner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* "Microsoft Teams-Besprechung" badge on a Teams invitation */
.ics-teams-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-bottom: 8px;
  background: rgba(91, 95, 199, 0.14);
  color: #5b5fc7;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

/* "Sitzung starten" link/button shown on a Teams calendar event */
.teams-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  background: #5b5fc7;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.teams-join-btn:hover { background: #4b4fb0; }

/* Event description: wrap long text AND long links so nothing overflows */
.event-desc {
  font-size: 13px;
  margin-top: 8px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wrap-link { overflow-wrap: anywhere; word-break: break-all; }

.ics-banner-info div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ics-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ics-banner-actions select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color, rgba(0,0,0,0.12));
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
}

.ics-accepted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

/* Appointment type badge */
.appointment-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.appointment-type-badge.type-business {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.appointment-type-badge.type-private {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

/* Dark/Space theme adjustments for new elements */
[data-theme="dark"] .ics-invitation-banner,
[data-theme="space"] .ics-invitation-banner {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .ics-invitation-banner.ics-cancel,
[data-theme="space"] .ics-invitation-banner.ics-cancel {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="space"] .ics-invitation-banner {
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .cal-color-menu,
[data-theme="space"] .cal-color-menu {
  border-color: rgba(255,255,255,0.1);
}

[data-theme="space"] .cal-color-menu {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

/* ═══════════════════ CONTACT DYNAMIC FIELDS ═════════════════════════════ */

.sidebar-addressbook-list {
  padding: 0 12px;
}

.contact-field-group label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-field-group label svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.contact-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.contact-field-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input, var(--bg-secondary));
  color: var(--text-primary);
  font-size: 14px;
}

.contact-field-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.contact-remove-field-btn {
  padding: 4px 8px !important;
  min-width: 0 !important;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.6;
}

.contact-remove-field-btn:hover {
  opacity: 1;
  color: var(--danger, #ef4444);
}

.contact-add-field-btn {
  font-size: 13px;
  color: var(--primary);
  padding: 4px 0 !important;
}

.contact-add-field-btn:hover {
  text-decoration: underline;
}

.btn-contact-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--danger, #ef4444);
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger, #ef4444);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-contact-delete:hover {
  background: var(--danger, #ef4444);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-contact-delete svg {
  flex-shrink: 0;
}

.contact-search-bubbles {
  position: fixed;
  width: 210px;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 10002;
  max-height: 400px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

.contact-bubbles-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.contact-bubble-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.contact-bubble-item:last-child {
  border-bottom: none;
}

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

.contact-bubble-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-bubble-detail {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .contact-search-bubbles {
    display: none;
  }
}

/* Merge modal: wider to fit two cards side by side */
.merge-modal {
  max-width: 900px !important;
  width: 95% !important;
}

.merge-side-by-side {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.merge-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 4px;
}

.merge-card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-secondary);
  overflow: hidden;
}

.merge-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-tertiary, var(--bg-secondary));
}

.merge-card-name {
  font-weight: 600;
  font-size: 14px;
}

.merge-card-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.merge-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.merge-card-field {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius);
  font-size: 13px;
  align-items: baseline;
}

.merge-card-field.merge-field-highlight {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid var(--primary);
}

.merge-card-label {
  width: 80px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.merge-card-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.merge-actions .btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 700px) {
  .merge-side-by-side {
    flex-direction: column;
  }
  .merge-arrow-col {
    transform: rotate(90deg);
    padding: 8px 0;
  }
}

.ai-contact-type-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}

.ai-contact-type-badge.business {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
}

.ai-contact-type-badge.private {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Flags, Favorites, Virtual Mailbox
   ═══════════════════════════════════════════════════════════════════════════ */

/* Flag button in message list */
.message-flag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 4px;
  vertical-align: middle;
  opacity: 0;
  transition: all 0.15s;
  margin-right: 2px;
}

.message-item:hover .message-flag-btn {
  opacity: 1;
}

.message-flag-btn.flagged {
  opacity: 1;
  color: #f59e0b;
}

.message-flag-btn:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.message-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 4px;
  vertical-align: middle;
  opacity: 0;
  transition: all 0.15s;
  margin-left: 4px;
}

.message-item:hover .message-delete-btn {
  opacity: 1;
}

.message-delete-btn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* Flagged message item highlight */
.message-item.flagged {
  border-left: 3px solid #f59e0b;
}

.message-item.flagged:not(.active) {
  padding-left: 15px;
}

/* Mailbox label in virtual folder views */
.message-mailbox-label {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  white-space: nowrap;
}

/* Reader flag button styling */
.reader-flag-btn {
  color: var(--text-secondary);
}

.reader-flag-btn svg[fill="currentColor"] {
  color: #f59e0b;
}

/* Favorites section */
.favorites-section {
  padding: 4px 8px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  /* Fixed header above the scrolling tree (see .mailbox-tree-scroll) */
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}
.favorite-acct { color: var(--text-muted); font-weight: 400; font-size: 0.92em; }
.favorite-item.fav-drop-target { box-shadow: inset 0 2px 0 var(--primary); }
.favorite-item.dragging { opacity: 0.5; }

.favorites-section.drag-over {
  background: rgba(99, 102, 241, 0.08);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.favorites-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 6px 6px 2px;
}

.favorite-item {
  position: relative;
}

.favorite-remove-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.15s;
}

.favorite-item:hover .favorite-remove-btn {
  display: block;
}

.favorite-remove-btn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* Virtual mailbox item */
.virtual-mailbox-item {
  padding: 7px 14px;
}

.virtual-mailbox-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.virtual-mailbox-item.active svg {
  opacity: 1;
  color: #f59e0b;
}

/* Sidebar separator */
.sidebar-separator {
  height: 1px;
  background: var(--border-light);
  margin: 6px 12px;
}

/* Favorites empty hint */
.favorites-empty-hint {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 14px;
  font-style: italic;
}

/* Sent mail prefix */
.message-sent-prefix {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Autocomplete Dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

.autocomplete-dropdown {
  position: fixed;
  z-index: 10000;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.autocomplete-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--bg-hover);
}

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   Signature Picker Popover
   ═══════════════════════════════════════════════════════════════════════════ */

.sig-picker-popover {
  position: fixed;
  z-index: 10000;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  max-width: 320px;
  padding: 4px;
}

.sig-picker-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 6px 12px 4px;
}

.sig-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

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

.sig-picker-name {
  font-size: 13px;
  color: var(--text-primary);
}

.sig-picker-badge {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Signature Settings Enhancements
   ═══════════════════════════════════════════════════════════════════════════ */

.sig-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}

.named-sig-name-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}

.named-sig-name-input:focus {
  border-color: var(--primary);
}

.named-sig-delete {
  flex-shrink: 0;
  padding: 4px;
}

/* ═══════════════════ INDEX STATUS + DEEP SEARCH ═══════════════════════════ */

.index-settings-modal .toggle-switch {
  display: inline-block;
}

.index-status {
  font-size: 13px;
}

.search-snippet {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-top: 4px;
  line-height: 1.5;
  word-break: break-word;
}

.search-attachment-badge,
.search-body-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  margin-right: 4px;
}

.search-attachment-badge {
  background: var(--primary-light);
  color: var(--primary);
}

.search-body-badge {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.deep-search-result {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}

.deep-search-result:hover {
  background: var(--bg-hover);
}

.flagged-count {
  margin-left: auto;
  font-size: 11px;
  min-width: 18px;
  text-align: center;
}

/* Admin table */
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-users-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}
.admin-users-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.admin-users-table tr:hover td {
  background: var(--bg-hover);
}

/* Toggle switch */
.admin-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.admin-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.admin-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: var(--transition);
}
.admin-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: var(--transition);
}
.admin-toggle input:checked + .admin-toggle-slider {
  background: var(--primary);
  border-color: var(--primary);
}
.admin-toggle input:checked + .admin-toggle-slider::before {
  transform: translateX(16px);
  background: white;
}

/* Admin panel wide modal */
.modal.admin-modal {
  max-width: 960px;
  width: 95vw;
}

/* ── Offline / PWA ────────────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 92vw;
  background: var(--warning, #f59e0b);
  color: #1f2937;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.offline-banner svg { flex-shrink: 0; }
/* While offline, dim network-only features so it's clear they're unavailable. */
body.offline .ai-feature,
body.offline [data-online-only] {
  opacity: 0.45;
  pointer-events: none;
}

/* ═══════════════════ NOTIZEN ═══════════════════════════════════════════════ */
.notes-layout { display: flex; flex: 1; overflow: hidden; }
.notes-list-panel {
  width: min(360px, 42vw); flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--bg-panel);
}
.notes-list-panel .panel-header { padding: 14px 18px; }
.notes-list-panel .search-box input { width: 100%; }
.notes-list { flex: 1; overflow-y: auto; }
.note-list-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer;
  transition: background var(--transition);
}
.note-list-item:hover { background: var(--bg-hover); }
.note-list-item.active { background: var(--primary-light); border-left: 3px solid var(--primary); padding-left: 13px; }
.note-pin-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; flex-shrink: 0; }
.note-pin-btn.on { color: var(--warning, #f59e0b); }
.note-list-body { min-width: 0; flex: 1; }
.note-list-title { font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-list-snippet { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.note-share-badge { display: inline-block; font-size: 10px; color: var(--primary); background: var(--primary-light); border-radius: 4px; padding: 1px 6px; margin-top: 4px; }

.note-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-app); }
.note-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
.note-editor-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-panel); flex-wrap: wrap; }
.note-title-input { flex: 1; min-width: 140px; border: none; background: transparent; color: var(--text-primary); font-size: 18px; font-weight: 600; outline: none; font-family: inherit; }
.note-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-ai-btn { font-size: 12px; }
.note-ro-badge { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.note-back-btn { display: none; }
.note-editor-wrap { flex: 1; overflow-y: auto; position: relative; }
.note-editor { padding: 18px 22px 18px 32px; min-height: 100%; outline: none; font-size: 15px; line-height: 1.6; color: var(--text-primary); }
.note-block { position: relative; padding: 2px 0; min-height: 1.6em; }
/* Nach einem (Offline-/Parallel-)Merge kurz BERNSTEIN hinterlegt — zeigt, welche Blöcke der
   Abgleich automatisch zusammengeführt/verändert hat. Bewusst Bernstein (nicht das Diktat-Blau
   .dict-seg), damit die beiden Markierungen nie verwechselt werden. Klasse wird per JS entfernt. */
/* Markierung „hier hat gerade jemand anderes geschrieben" — dezenter, damit sie beim
   Arbeiten nicht stört: schmaler Streifen am Rand statt flächigem Aufleuchten. */
.note-block.note-merged { border-radius: 4px; animation: noteMergeFlash 2.6s ease-in-out; }
@keyframes noteMergeFlash {
  0% { box-shadow: inset 2px 0 0 0 rgba(245,158,11,0); }
  15% { background: rgba(245,158,11,0.10); box-shadow: inset 2px 0 0 0 rgba(245,158,11,0.85); }
  70% { background: rgba(245,158,11,0.06); box-shadow: inset 2px 0 0 0 rgba(245,158,11,0.55); }
  100% { background: transparent; box-shadow: inset 2px 0 0 0 rgba(245,158,11,0); }
}
@media (prefers-reduced-motion: reduce) { .note-block.note-merged { animation: none; box-shadow: inset 2px 0 0 0 rgba(245,158,11,0.7); } }
.note-block.shared { background: rgba(99, 102, 241, 0.06); border-left: 2px solid var(--primary); padding-left: 8px; margin-left: -10px; border-radius: 3px; }
.note-block.granted { background: rgba(22, 163, 74, 0.08); border-left: 2px solid #16a34a; padding-left: 8px; margin-left: -10px; border-radius: 3px; }

/* ── Interner Chat ───────────────────────────────────────────────────────── */
#chatConversation { display: flex; flex-direction: column; height: 100%; }
.chat-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.chat-list-item:hover { background: rgba(127, 127, 127, 0.08); }
.chat-list-item.active { background: var(--primary-glow, rgba(99, 102, 241, 0.12)); }
.chat-list-item.chat-invite { cursor: default; background: rgba(245, 158, 11, 0.08); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex: 0 0 auto; }
.chat-li-main { flex: 1; min-width: 0; }
.chat-li-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-li-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread { background: var(--primary); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; flex: 0 0 auto; }
.chat-conv-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble { max-width: 74%; padding: 7px 11px; border-radius: 14px; font-size: 13px; line-height: 1.42; }
.chat-row.mine .chat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-row.other .chat-bubble { background: var(--bg-input); border-bottom-left-radius: 4px; }
.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.chat-bubble-name { font-size: 11px; font-weight: 600; color: var(--primary); margin-bottom: 2px; }
.chat-bubble-time { font-size: 10px; opacity: 0.7; margin-left: 8px; float: right; margin-top: 4px; }
.chat-sys-row { text-align: center; margin: 6px 0; }
.chat-sys-row span { font-size: 11px; color: var(--text-muted); background: var(--bg-input); padding: 2px 10px; border-radius: 10px; }
.chat-file-chip { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.chat-input-row { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); flex: 0 0 auto; }
.chat-input { flex: 1; min-height: 22px; max-height: 120px; overflow-y: auto; padding: 9px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-input); font-size: 14px; outline: none; }
.chat-input:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.chat-icon-btn, .chat-send-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.chat-icon-btn:hover { background: rgba(127, 127, 127, 0.12); }
.chat-send-btn { background: var(--primary); color: #fff; }
.chat-icon-btn.recording { color: #dc2626; }
.chat-icon-btn.dictating { color: var(--primary); background: var(--primary-glow, rgba(99, 102, 241, 0.15)); }
.note-block-gutter { position: absolute; left: -28px; top: 0; }
.note-block-share { background: none; border: none; cursor: pointer; font-size: 13px; opacity: 0; transition: opacity var(--transition); padding: 2px; }
.note-block:hover + .note-block-gutter .note-block-share,
.note-block-gutter:hover .note-block-share { opacity: 0.85; }
::highlight(note-issue) { text-decoration: underline wavy #dc2626; text-decoration-skip-ink: none; }
::highlight(note-fixed) { text-decoration: underline wavy #16a34a; text-decoration-skip-ink: none; }

/* Bild-Lightbox (Klick auf ein Bild in einer Mail) */
.img-lightbox {
  position: fixed; inset: 0; z-index: 100050;
  background: rgba(0, 0, 0, 0.88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 20px;
}
.img-lightbox img { max-width: 96vw; max-height: 94vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.img-lightbox-close {
  position: fixed; top: 14px; right: 18px;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* Freigaben-Übersicht + Hervorhebung */
.note-share-sec { font-weight: 600; margin: 12px 0 6px; }
.note-share-region-row { font-size: 13px; color: var(--text-secondary); padding: 5px 8px; margin: 2px 0; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; }
.note-share-region-row:hover { border-color: var(--primary); background: var(--bg-hover); }
.note-block.note-flash { animation: noteFlash 1.6s ease; border-radius: 4px; }
@keyframes noteFlash { 0%,100% { background: transparent; } 25% { background: rgba(99,102,241,0.28); } }
/* Block, auf dem der Owner sich die Bearbeitung entzogen hat (nur lesen) */
.note-block.owner-locked { background: rgba(148,163,184,0.10); border-left: 2px solid var(--text-muted); padding-left: 8px; margin-left: -10px; border-radius: 3px; opacity: 0.92; }
.note-region-card { border: 1px solid var(--border-light); border-radius: 8px; padding: 6px; margin-bottom: 8px; }
.note-region-users { font-size: 11px; color: var(--text-muted); padding: 0 8px 2px; }
.note-region-lock { font-size: 12px; }
.note-title-input.renaming { background: var(--bg-hover); outline: 2px solid var(--primary); border-radius: 6px; }
/* Mehrfachauswahl in der Notizliste */
.note-list-item.multi-selected { background: rgba(99,102,241,0.14); outline: 2px solid var(--primary); outline-offset: -2px; }
.note-sel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.note-sel-bar .note-sel-count { font-size: 12px; font-weight: 600; margin-right: 4px; }
.note-sel-bar .btn-text { font-size: 12px; padding: 3px 6px; }
.notes-sort-select { font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; }
.notes-sort-select:hover { border-color: var(--primary); }
/* Sortierung in eigener Zeile → das Suchfeld darüber bekommt die volle Breite */
.notes-sort-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.note-dates { font-size: 11.5px; color: var(--text-muted); padding: 2px 18px 6px; }
/* Drag & Drop: Notiz über einem Notizbuch */
.notebook-item.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--bg-hover); border-radius: 8px; }
.note-list-item[draggable="true"] { cursor: grab; }
.note-list-item[draggable="true"]:active { cursor: grabbing; }
.notes-sort-row label { font-size: 12px; color: var(--text-muted); }
.notes-header-actions { flex: 1; }
.notes-header-actions .search-box { flex: 1; max-width: none; }
.notes-header-actions .search-box input { width: 100%; }
.notes-offline-banner { padding: 6px 10px; font-size: 12px; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a; }
[data-theme="dark"] .notes-offline-banner { background: #3a2f12; color: #fcd34d; border-bottom-color: #4a3c18; }

/* Notiz-Formatierungsleiste */
.note-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px 14px; border-bottom: 1px solid var(--border); background: var(--bg-panel); }
.note-tb-select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 12px; font-family: inherit; cursor: pointer; }
.note-tb-btn { min-width: 30px; height: 28px; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-size: 13px; cursor: pointer; font-family: inherit; }
.note-tb-btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.note-tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.note-auto-btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.note-color-menu { padding: 8px; }
.note-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.note-color-sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0; }
.note-color-sw:hover { transform: scale(1.12); }

/* Notizbücher (Sidebar) */
.notebook-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.notebook-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.notebook-item.active { background: var(--primary-light); color: var(--primary); font-weight: 500; }
.notebook-ic { width: 18px; text-align: center; flex-shrink: 0; }
.notebook-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notebook-count { font-size: 11px; color: var(--text-muted); background: var(--bg-input); border-radius: 9px; padding: 1px 7px; }
.note-nb-select { max-width: 150px; }

/* "kann weg" + Papierkorb */
.note-list-item.disposable { opacity: 0.6; }
.note-disposable-badge { display: inline-block; font-size: 10px; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 1px 6px; margin-top: 4px; }
.note-list-item.trashed { cursor: default; }
.note-list-item.trashed:hover { background: var(--bg-panel); }
.note-trash-actions { display: flex; gap: 4px; align-self: center; flex-shrink: 0; }
.note-trash-actions .btn-text { padding: 4px 8px; }

/* Wochentag-Hinweis neben „Start"/„Ende" im Termin-Editor (aktualisiert live). */
.dt-weekday { color: var(--primary); font-weight: 600; }

/* Presence + remote cursors */
.note-presence { display: flex; gap: 4px; align-items: center; }
.note-presence-dot { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* „N× geöffnet"-Badge: erscheint, sobald die Notiz in mehr als einer Sitzung offen ist
   (auch eigenes Zweitgerät) — Bernstein wie der Merge-Flash, denn es erklärt genau den. */
.note-open-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(245, 158, 11, .16);
  color: #b45309; border: 1px solid rgba(245, 158, 11, .45); border-radius: 999px; font-size: 11px;
  font-weight: 700; padding: 2px 9px; cursor: pointer; white-space: nowrap; }
.note-open-badge:hover { background: rgba(245, 158, 11, .28); }
.note-cursors { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.note-remote-caret { position: absolute; width: 2px; }
.note-remote-name { position: absolute; top: -15px; left: 0; font-size: 10px; font-weight: 600; color: #fff; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }

/* Share dialog */
.note-share-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.note-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border-light); }
.note-share-name { font-size: 13px; color: var(--text-primary); }
.note-share-row select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-family: inherit; }

/* Mobile: list ↔ editor as separate screens */
@media (max-width: 1024px) {
  .notes-list-panel { width: 100%; }
  .note-main { display: none; }
  #notesView.note-open .notes-list-panel { display: none; }
  #notesView.note-open .note-main { display: flex; }
  /* Konferenz nutzt dasselbe Layout: Antippen einer Konferenz öffnet die Detailansicht
     (vorher blieb sie am Handy unsichtbar, weil nur #notesView umgeschaltet wurde). */
  #konferenzView.note-open .notes-list-panel { display: none; }
  #konferenzView.note-open .note-main { display: flex; }
  .conf-back-btn { display: inline-flex !important; }
  .note-back-btn { display: inline-flex; }
}

/* Konferenzen: Kopfzeile umbrechen, damit kein Knopf mehr abgeschnitten wird */
#konferenzView .notes-header-actions { flex-wrap: wrap; }
#konferenzView .notes-header-actions .search-box { flex: 1 1 100%; }
#konferenzView .notes-header-actions .btn-primary { flex: 1 1 0; justify-content: center; white-space: nowrap; }

/* Konferenzliste: Mehrfachauswahl */
#conferenceList .note-list-item { display: flex; align-items: flex-start; gap: 10px; }
#conferenceList .conf-item-body { flex: 1; min-width: 0; }
#conferenceList .conf-pick { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto; cursor: pointer; accent-color: var(--primary); }
#conferenceList .note-list-item.conf-done .conf-item-body { opacity: .55; }
#conferenceList .note-list-item.conf-done .note-list-item-title { text-decoration: line-through; text-decoration-color: var(--text-muted); }

/* Chat im Vollbild-Konferenzfenster */
#confOvChat .conf-chat { flex: 1; min-height: 0; }

/* ── Konferenz am Handy ──────────────────────────────────────────────────────
   Im Vollbild lagen Chat und Notizen als schmale Spalte NEBEN dem Video und haben es
   auf einem schmalen Display praktisch zugedeckt. Am Handy stehen sie deshalb UNTER
   dem Video: das Video behält die obere Hälfte, der Chat bekommt die untere. */
@media (max-width: 820px) {
  .cm-ov-row { flex-direction: column !important; }
  #confOvStage { flex: 1 1 auto !important; min-height: 42vh; }
  #confOvChat, #confOvNotes {
    width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important;
    height: 46vh; border-left: none !important; border-top: 1px solid #22304d;
  }
  /* Steuerleiste: viele Knöpfe auf wenig Platz → kompakter und umbrechend */
  .cm-bar { padding: 8px 8px !important; gap: 6px !important; }
  .cm-btn { height: 32px !important; padding: 0 10px !important; font-size: 12px !important; }
  .cm-status { display: none !important; }
  #confOvTitle { font-size: 13px; }
}

/* ══ Konferenz-Detailansicht: alles in ruhigen Blöcken statt in einer Seitenspalte ══ */
.conf-detail { display:flex; flex-direction:column; height:100%; min-height:0; }
.conf-head { padding:16px 20px 12px; border-bottom:1px solid var(--border); }
.conf-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.conf-blocks { flex:1; min-height:0; overflow:auto; padding:18px 20px 40px;
  display:flex; flex-direction:column; align-items:center; gap:14px; }
.conf-block { width:100%; max-width:720px; background:var(--bg-panel);
  border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  /* Ohne min-width:0 zwingt ein langer, ungebrochener Inhalt (der Beitrittslink) die
     Karte über ihre max-width hinaus — Flex-Elemente werden nie kleiner als ihr Inhalt. */
  min-width:0; }
.conf-block .cb-h { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; margin-bottom:10px; }
.conf-block .cb-h .cb-n { background:var(--bg-hover); border-radius:999px; padding:1px 8px; font-size:12px; color:var(--text-muted); }
.conf-block .cb-h .cb-act { margin-left:auto; }
.conf-block .cb-leer { font-size:13px; color:var(--text-muted); }
.conf-block.cb-blink { animation:cbBlink 1.6s ease-out; }
@keyframes cbBlink { 0%,100% { border-color:var(--border); } 30% { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); } }

/* Einladecode: eigene, zentrierte Karte – nicht über die volle Breite */
.conf-block.code-block { max-width:380px; text-align:center; padding:16px; }
.code-block .cb-code { font-size:30px; font-weight:800; letter-spacing:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.code-block .cb-code-lbl { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-top:2px; }
.code-block .cb-link { display:block; margin-top:9px; font-size:12px; color:var(--primary);
  word-break:break-all; overflow-wrap:anywhere; }
.code-block .cb-copy { display:flex; gap:4px; justify-content:center; margin-top:8px; }
.conf-block.rsvp-block { display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:380px; }

/* Teilnehmer: jeder in seiner eigenen Karte, mit Status */
.conf-people { display:flex; flex-direction:column; gap:7px; }
.conf-part-card { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-app); }
.pc-av { flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.pc-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.pc-main b { font-size:13px; font-weight:600; }
.pc-sub { font-size:11px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-live { flex:0 0 auto; font-size:11px; font-weight:700; color:#16a34a; }
.pc-status { flex:0 0 auto; font-size:11px; font-weight:600; border-radius:999px; padding:3px 9px; }
.pc-status.ja { background:rgba(22,163,74,.13); color:#16a34a; }
.pc-status.nein { background:rgba(220,38,38,.13); color:#dc2626; }
.pc-status.evtl { background:rgba(217,119,6,.13); color:#d97706; }
.pc-status.offen { background:var(--bg-hover); color:var(--text-muted); }
.conf-hit { display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--border);
  border-radius:10px; margin-bottom:5px; cursor:pointer; }
.conf-hit:hover { border-color:var(--primary); background:var(--bg-hover); }

/* Telefon-Einwahl: Nummer und PIN gut ablesbar */
.dialin-card > div { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
.dialin-card b { font-family:ui-monospace,monospace; font-size:15px; }
.dialin-card b.pin { letter-spacing:3px; font-size:17px; }

/* Aufklappmenüs „Funktionen" / „Bearbeiten" */
.conf-drop { width:290px; background:var(--bg-panel); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-lg, 0 10px 40px rgba(0,0,0,.3)); padding:6px; }
.conf-drop .cd-item { display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; border-radius:9px; padding:9px 10px; cursor:pointer; color:var(--text-primary); }
.conf-drop .cd-item:hover { background:var(--bg-hover); }
.conf-drop .cd-item.danger:hover { background:rgba(220,38,38,.12); }
.conf-drop .cd-item.danger b { color:#dc2626; }
.conf-drop .cd-ic { flex:0 0 auto; font-size:16px; line-height:1.3; }
.conf-drop .cd-tx { flex:1; min-width:0; display:flex; flex-direction:column; }
.conf-drop .cd-tx b { font-size:13px; font-weight:600; }
.conf-drop .cd-tx span { font-size:11px; color:var(--text-muted); line-height:1.4; }
.conf-drop .cd-more { color:var(--text-muted); align-self:center; }
.conf-drop .cd-sep { height:1px; background:var(--border); margin:5px 8px; }

/* Chat: fährt als Schublade von rechts ein – nur wenn man ihn braucht */
#confChatDrawer { position:absolute; top:0; right:0; bottom:0; width:380px; max-width:92vw;
  background:var(--bg-panel); border-left:1px solid var(--border); opacity:1;
  display:none; flex-direction:column; z-index:60; box-shadow:-8px 0 30px rgba(0,0,0,.12); }
#confChatDrawer.open { display:flex; }
#confChatDrawer .cc-head { display:flex; align-items:center; gap:8px; padding:10px 10px 10px 14px;
  border-bottom:1px solid var(--border); }
#conferenceMain { position:relative; }
.conf-dot { display:none; align-items:center; justify-content:center; margin-left:5px;
  background:#ef4444; color:#fff; border-radius:999px; min-width:16px; height:16px; padding:0 4px; font-size:10px; font-weight:700; }

@media (max-width: 820px) {
  .conf-blocks { padding:14px 12px 40px; }
  #confChatDrawer { width:100%; max-width:100%; }
  /* Die Code-Karte bleibt bewusst eine kompakte Karte (380px) – auch am Handy, wo sie
     dann praktisch die Breite ausfüllt. Sie soll nie „über die volle Breite" wirken. */
}

/* Konferenzliste: Datumsgruppen mit Luft dazwischen (wie bei den E-Mails) */
.conf-group + .conf-group { margin-top: 14px; }
.conf-group-h { display:flex; align-items:center; gap:7px; padding:8px 14px 5px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }
.conf-group-h span { background:var(--bg-hover); border-radius:999px; padding:0 6px; font-size:10px; font-weight:600; letter-spacing:0; }

/* Beitreten-Vorschau: kompakt, ruhig, alles auf einen Blick */
.join-prev { display:flex; flex-direction:column; gap:10px; }
.jp-when { text-align:center; padding:2px 0 4px; }
.jp-status { font-size:15px; font-weight:700; }
.jp-date { font-size:12px; color:var(--text-muted); margin-top:2px; }
.jp-gate { font-size:13px; border-radius:9px; padding:8px 11px; }
.jp-gate.ok { background:rgba(22,163,74,.10); border:1px solid #16a34a; }
.jp-gate.wait { background:rgba(217,119,6,.10); border:1px solid #d97706; }
.jp-desc { font-size:13px; line-height:1.5; background:var(--bg-hover); border-radius:9px; padding:9px 11px; white-space:pre-wrap; }
.jp-sec { border:1px solid var(--border); border-radius:9px; padding:8px 11px; }
.jp-sec-h { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; margin-bottom:5px; }
.jp-sec-h span { background:var(--bg-hover); border-radius:999px; padding:0 6px; font-size:11px; color:var(--text-muted); }
.jp-row { display:flex; gap:10px; font-size:13px; padding:2px 0; }
.jp-k { flex:0 0 92px; color:var(--text-muted); }
.jp-v { flex:1; min-width:0; }
.jp-v.muted { color:var(--text-muted); }
.jp-doc { display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:3px 0;
  color:var(--primary); text-decoration:none; }
.jp-doc span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jp-tech { display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:rgba(37,99,235,.07); border:1px solid var(--primary); border-radius:10px; padding:10px 12px; color:var(--text-primary); }
.jp-tech:hover { background:rgba(37,99,235,.13); }
.jp-tech > span:first-child { font-size:18px; }
.jp-tech > span:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.jp-tech b { font-size:13px; }
.jp-tech i { font-style:normal; font-size:11px; color:var(--text-muted); }
.jp-tech > span:last-child { color:var(--text-muted); font-size:18px; }
.jp-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }

/* ══ Umfrage-Baukasten: moderne Karten statt roher Eingabefelder ══════════════ */
.survey-modal { max-width: 580px; padding: 24px; border-radius: 18px; max-height: 88vh; overflow: auto; }
.sv-top { margin-bottom: 16px; }
.sv-top h3 { margin: 0 0 4px; font-size: 19px; }
.sv-top p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Eine Karte je Frage */
.sv-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  margin-bottom: 12px; background: var(--bg-panel); transition: border-color .15s; }
.sv-card:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.sv-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sv-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--primary);
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sv-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sv-del { background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  border-radius: 6px; padding: 2px 6px; font-size: 13px; }
.sv-del:hover { background: rgba(220,38,38,.12); color: #dc2626; }

/* Die Frage selbst: groß, ruhig, ohne Kasten-Optik */
.sv-q { width: 100%; border: none; border-bottom: 2px solid var(--border); background: transparent;
  color: var(--text-primary); font-size: 16px; font-weight: 600; padding: 6px 2px 8px; outline: none; }
.sv-q:focus { border-bottom-color: var(--primary); }
.sv-q::placeholder { color: var(--text-muted); font-weight: 500; }

/* Fragetyp als Kacheln statt Auswahlliste */
.sv-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.sv-type { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-app); color: var(--text-muted);
  font-size: 11px; font-weight: 600; cursor: pointer; transition: all .12s; }
.sv-type:hover { border-color: var(--primary); color: var(--text-primary); }
.sv-type.on { border-color: var(--primary); background: rgba(37,99,235,.10); color: var(--primary); }
.sv-type .sv-ic { font-size: 16px; line-height: 1; }

/* Antwortmöglichkeiten: je eine Zeile, nicht mehr ein Textblock */
.sv-opts { display: flex; flex-direction: column; gap: 6px; }
.sv-opt { display: flex; align-items: center; gap: 8px; }
.sv-bullet { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border);
  color: var(--text-muted); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sv-opt-in { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-app);
  color: var(--text-primary); font-size: 13px; padding: 8px 11px; outline: none; }
.sv-opt-in:focus { border-color: var(--primary); }
.sv-opt-x { flex: 0 0 auto; background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.sv-opt-x:hover:not(:disabled) { background: rgba(220,38,38,.12); color: #dc2626; }
.sv-opt-x:disabled { opacity: .25; cursor: default; }
.sv-addopt { align-self: flex-start; margin-top: 2px; background: transparent; border: 1px dashed var(--border);
  border-radius: 9px; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; }
.sv-addopt:hover { border-color: var(--primary); color: var(--primary); }

/* Vorschau bei Ja/Nein, Bewertung, Freitext */
.sv-preview { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--bg-app); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; }
.sv-chip { background: var(--bg-hover); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; }
.sv-stars { color: #f59e0b; font-size: 17px; letter-spacing: 2px; }
.sv-note { font-size: 12px; color: var(--text-muted); }

.sv-addq { width: 100%; background: transparent; border: 1px dashed var(--border); border-radius: 12px;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 11px; cursor: pointer; }
.sv-addq:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,.05); }
.sv-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

@media (max-width: 560px) {
  .sv-types { grid-template-columns: repeat(2, 1fr); }
}

/* Teilnehmer wieder aus der Liste nehmen */
.pc-x { flex:0 0 auto; background:transparent; border:none; color:var(--text-muted); cursor:pointer;
  border-radius:6px; padding:3px 7px; font-size:12px; opacity:0; transition:opacity .12s; }
.conf-part-card:hover .pc-x { opacity:1; }
.pc-x:hover { background:rgba(220,38,38,.12); color:#dc2626; }

/* ── Dateien mit Vorschaubild ────────────────────────────────────────────────── */
.conf-files { display:grid; grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); gap:10px; }
.cf-card { display:flex; flex-direction:column; gap:5px; text-decoration:none; color:var(--text-primary);
  border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--bg-app); transition:border-color .12s; }
.cf-card:hover { border-color:var(--primary); }
.cf-thumb { position:relative; display:flex; align-items:center; justify-content:center;
  height:88px; border-radius:7px; overflow:hidden; background:var(--bg-hover); }
.cf-thumb img { width:100%; height:100%; object-fit:cover; }
.cf-ic { font-size:32px; }
.cf-pin { position:absolute; right:4px; top:4px; font-size:11px; background:rgba(0,0,0,.55);
  border-radius:999px; padding:1px 5px; }
.cf-name { font-size:12px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cf-size { font-size:11px; color:var(--text-muted); }

/* ── Transkript: Zeit vorne, Übersetzung darunter ───────────────────────────── */
.tr-line { display:flex; gap:9px; padding:4px 0; align-items:flex-start; }
.tr-time { flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:var(--text-muted); padding-top:2px; white-space:nowrap; }
.tr-body { flex:1; min-width:0; line-height:1.5; }
.tr-lang { display:inline-block; margin-left:6px; font-size:10px; font-weight:700; letter-spacing:.5px;
  border:1px solid var(--primary); color:var(--primary); border-radius:5px; padding:0 4px; vertical-align:1px; }
.tr-orig { font-size:11px; color:var(--text-muted); font-style:italic; margin-top:2px; padding-left:2px;
  border-left:2px solid var(--border); padding-left:7px; }

/* Umfrage: „Ich stimme selbst mit ab" */
.sv-selbst { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:11px 12px;
  border:1px solid var(--border); border-radius:11px; cursor:pointer; }
.sv-selbst:hover { border-color:var(--primary); }
.sv-selbst input { margin-top:2px; width:16px; height:16px; accent-color:var(--primary); }
.sv-selbst span { display:flex; flex-direction:column; }
.sv-selbst b { font-size:13px; }
.sv-selbst i { font-style:normal; font-size:11px; color:var(--text-muted); }

/* Große Dateiansicht (Klick auf die Vorschau) */
.file-lightbox { position:fixed; inset:0; z-index:10008; background:rgba(8,12,22,.92);
  display:flex; flex-direction:column; }
.file-lightbox .fl-bar { display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:rgba(15,23,40,.9); border-bottom:1px solid #22304d; color:#fff; }
.file-lightbox .fl-name { flex:1; min-width:0; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-lightbox .fl-dl { background:#2563eb; color:#fff; text-decoration:none; border-radius:999px;
  padding:7px 15px; font-size:13px; font-weight:600; }
.file-lightbox .fl-dl:hover { background:#1d4ed8; }
.file-lightbox .fl-x { background:#22304d; color:#fff; border:none; border-radius:999px;
  width:32px; height:32px; font-size:14px; cursor:pointer; }
.file-lightbox .fl-x:hover { background:#dc2626; }
.file-lightbox .fl-body { flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px; overflow:auto; }
.file-lightbox .fl-body img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;
  box-shadow:0 10px 50px rgba(0,0,0,.5); }
.file-lightbox .fl-body iframe { width:100%; height:100%; border:none; border-radius:8px; background:#fff; }
.file-lightbox .fl-hint { color:#93a4c3; font-size:12px; margin-top:12px; text-align:center; }
.cf-card { cursor:pointer; }

/* Aufgeräumtes Transkript: eigenes, klar deckendes Fenster (vorher schimmerte es durch,
   weil es auf nicht existierende Variablen zurückgriff). */
.trc-ov { position:fixed; inset:0; z-index:10009; background:rgba(8,12,22,.72);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.trc-box { background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--border);
  max-width:700px; width:100%; max-height:84vh; display:flex; flex-direction:column;
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:hidden; }
.trc-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg-panel); }
.trc-head h3 { margin:0; font-size:17px; }
.trc-x { background:var(--bg-hover); border:none; color:var(--text-primary); border-radius:999px;
  width:30px; height:30px; cursor:pointer; font-size:13px; }
.trc-x:hover { background:#dc2626; color:#fff; }
.trc-body { padding:18px; overflow:auto; white-space:pre-wrap; font-size:14px; line-height:1.65;
  background:var(--bg-panel); }
.trc-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px;
  border-top:1px solid var(--border); background:var(--bg-panel); }

/* Statusmeldungen im Chat: linksbündig, ruhig, mit Uhrzeit — nicht mehr zentriert */
.chat-sys { display:flex; gap:8px; align-items:baseline; margin:5px 0; padding:3px 0 3px 9px;
  border-left:2px solid var(--border); color:var(--text-muted); font-size:12px; line-height:1.45; }
.chat-sys .cs-t { flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; opacity:.7; }
.chat-sys .cs-b { flex:1; min-width:0; }

/* ── Termine im Zeitraster zeitlich dehnen (Griffe oben/unten) ──────────────── */
.cal-abs-event { position: absolute; }
.cal-rz { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 3;
  pointer-events: auto; touch-action: none; }
.cal-rz-top { top: -1px; }
.cal-rz-bot { bottom: -1px; }
/* Ein schmaler Greifbalken, der beim Überfahren des Termins erscheint */
.cal-rz::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s; }
.cal-rz-top::after { top: 2px; }
.cal-rz-bot::after { bottom: 2px; }
.cal-time-event:hover .cal-rz::after { opacity: .9; }
.cal-time-event.cal-rz-active { z-index: 20 !important; box-shadow: 0 4px 18px rgba(0,0,0,.35); cursor: ns-resize; }
.cal-time-event.cal-rz-active .cal-rz::after { opacity: 1; }
/* Schwebendes Zeit-Etikett während des Dehnens */
.cal-rz-label { position: fixed; z-index: 10010; transform: translateX(-50%);
  background: var(--primary, #6366f1); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); }

/* Arbeitstage-Auswahl in den Kalender-Einstellungen */
.wd-chip { display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none;
  border:1px solid var(--border); border-radius:8px; padding:6px 11px; font-size:13px; font-weight:600;
  background:var(--bg-panel); transition:all .12s; }
.wd-chip input { position:absolute; opacity:0; width:0; height:0; }
.wd-chip:has(input:checked) { border-color:var(--primary); background:rgba(37,99,235,.12); color:var(--primary); }
.wd-chip:hover { border-color:var(--primary); }
.wd-preset { border:1px solid var(--border); border-radius:8px; padding:5px 10px !important; }
.wd-preset:hover { border-color:var(--primary); color:var(--primary); }

/* Handakte: Tabelle aller Kontakt-Notizen */
.handakte-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.handakte-tbl th { text-align:left; padding:8px 14px; border-bottom:1px solid var(--border);
  color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; position:sticky; top:0; background:var(--bg-panel); }
.handakte-tbl td { padding:9px 14px; border-bottom:1px solid var(--border); line-height:1.5; }
.handakte-tbl tr:hover td { background:var(--bg-hover); }

/* Kontakte: Karten-/Navi-Symbole an der Entfernung */
.ct-km-link, .ct-map-btn, .ct-nav-btn { display:inline-flex; align-items:center; gap:4px;
  color:var(--primary); text-decoration:none; border-radius:6px; padding:2px 4px; }
.ct-km-link:hover, .ct-map-btn:hover, .ct-nav-btn:hover { background:var(--bg-hover); }
.contact-distance { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Kontakte: Mehrfachauswahl für die Tour */
.contact-card { position: relative; }
.contact-card .ct-pick { position: absolute; top: 8px; right: 8px; z-index: 3; cursor: pointer;
  opacity: 0; transition: opacity .12s; }
.contact-card:hover .ct-pick, .contact-card.selected .ct-pick { opacity: 1; }
.contact-card .ct-pick input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.contact-card.selected { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Tour-Fenster: Liste der Stopps */
.tour-stop { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.tour-stop.tour-origin { background: var(--bg-hover); }
.tour-stop .ts-num { flex: 0 0 auto; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: #0891b2; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tour-stop.tour-origin .ts-num { background: var(--text-muted); }
.tour-stop .ts-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tour-stop .ts-main b { font-size: 14px; }
.tour-stop .ts-main span { font-size: 12px; color: var(--text-muted); }

/* Digitaler Assistent: Knopf unter dem Logo + Chat-Panel */
.assistant-launch { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:10px 0 4px;
  padding:9px 12px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(100deg,#6366f1,#8b5cf6); color:#fff; font-size:13px; font-weight:600; }
.assistant-launch:hover { filter:brightness(1.08); }
.assistant-launch .al-ico { font-size:15px; }
.assistant-panel { position:fixed; top:70px; left:16px; width:370px; max-width:calc(100vw - 32px); resize:both;
  height:min(560px,70vh); background:var(--bg-panel); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); z-index:10007; display:none; flex-direction:column; overflow:hidden; }
.assistant-panel.open { display:flex; }
.asst-head { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); cursor:move; user-select:none;
  background:linear-gradient(100deg,#6366f1,#8b5cf6); color:#fff; }
.asst-title { font-weight:700; font-size:14px; flex:1; }
.asst-x { background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:999px; width:26px; height:26px; cursor:pointer; }
.asst-clear { background:transparent; border:none; color:#fff; opacity:.8; font-size:14px; width:26px; height:26px; margin-right:4px; cursor:pointer; border-radius:999px; }
.asst-clear:hover { opacity:1; background:rgba(255,255,255,.2); }
.asst-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; background:var(--bg-app); }
.asst-msg { max-width:88%; padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.5; white-space:pre-wrap; }
.asst-bot { background:var(--bg-panel); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.asst-user { background:#6366f1; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.asst-action { align-self:flex-start; width:88%; background:var(--bg-panel); border:1px solid var(--primary);
  border-radius:12px; padding:11px 13px; }
.asst-action .aa-title { font-weight:700; font-size:13px; margin-bottom:5px; }
.asst-action .aa-detail { font-size:12.5px; color:var(--text); line-height:1.5; margin-bottom:9px; }
.asst-action .aa-btns { display:flex; align-items:center; gap:8px; }
/* Knöpfe unten ausgerichtet: bei einer Zeile so hoch wie das Feld, bei mehrzeiligem Text bleiben
   sie vernünftig unten statt riesig zu werden. */
.asst-input-row { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border); background:var(--bg-panel); align-items:flex-end; }
.asst-input-row input { flex:1; border-radius:999px; padding:10px 16px; }
/* Mehrzeiliges Eingabefeld (contenteditable) – wächst mit, bis max-height, dann scrollen. */
.asst-textarea { flex:1; min-width:0; border:1px solid var(--border); border-radius:14px; padding:12px 14px;
  background:var(--bg-app); color:var(--text); font-size:14px; line-height:1.5; min-height:48px; max-height:170px;
  overflow-y:auto; outline:none; white-space:pre-wrap; word-break:break-word; }
.asst-textarea:focus { border-color:var(--primary); }
.asst-textarea:empty::before { content:attr(data-placeholder); color:var(--text-muted); pointer-events:none; }
/* Mikrofon- und Senden-Knopf: gleiche Höhe wie das Feld (48px), größeres Mikrofon-Symbol. */
.asst-input-row .dict-icon-btn { flex:0 0 auto; width:48px; height:48px; border-radius:14px; }
.asst-input-row .dict-icon-btn svg { width:22px; height:22px; }
.asst-input-row .conf-blue-btn { flex:0 0 auto; height:48px; padding:0 20px; border-radius:14px; font-size:14px; font-weight:600; }
@media (max-width:820px){ .assistant-panel { left:8px; right:8px; width:auto; top:60px; } }

/* Diktier-Mikrofon: dezent im Ruhezustand, rot & pulsierend bei Aufnahme */
.dictate-btn { color: var(--text-secondary); }
.dictate-btn:hover { color: var(--primary); }
.dictate-btn.dictating { color: #fff; background: #dc2626 !important; border-radius: 6px;
  animation: dictPulse 1.3s ease-in-out infinite; }
.dictate-btn.dict-busy { opacity: .6; }
@keyframes dictPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); } }
/* Variante als rundes Icon (Assistent-Eingabe) */
.dict-icon-btn { background: transparent; border: none; cursor: pointer; color: var(--text-muted);
  width: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.dict-icon-btn:hover { color: var(--primary); background: var(--bg-hover); }
.dict-icon-btn.dictating { color: #fff; background: #dc2626; animation: dictPulse 1.3s ease-in-out infinite; }
/* Frisch diktierter, noch NICHT finalisierter Text: sichtbar markiert (geht noch durch den Filter),
   bleibt aber editierbar. Beim Finalisieren pulsiert er, bis die genaue Fassung eingesetzt ist. */
.dict-seg { background: rgba(99,102,241,0.14); border-radius: 3px;
  box-shadow: inset 0 -2px 0 0 rgba(99,102,241,0.55); }
.dict-seg.dict-finalizing { animation: dictShimmer 1.1s ease-in-out infinite; }
@keyframes dictShimmer { 0%,100% { background: rgba(99,102,241,0.12); } 50% { background: rgba(99,102,241,0.36); } }
/* Einfüge-Marker: die „Linie", an der der nächste diktierte Text erscheint. */
.dict-caret { display: inline-block; width: 1.4em; height: 1em; vertical-align: text-bottom; margin: 0 1px;
  border-bottom: 2px solid #6366f1; animation: dictCaretBlink 1s steps(1) infinite; user-select: none; }
@keyframes dictCaretBlink { 0%,100% { border-bottom-color: #6366f1; } 50% { border-bottom-color: transparent; } }

/* Assistent: dezentes Stern-Symbol rechts neben dem Logo */
.logo { display:flex; align-items:center; gap:8px; }
.assistant-star { margin-left:auto; width:36px; height:36px; flex:0 0 auto; border:none; cursor:pointer;
  border-radius:10px; background:transparent; color:#8b5cf6; font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:all .12s; }
.assistant-star:hover { background:rgba(139,92,246,.14); color:#6366f1; transform:scale(1.08); }
.assistant-star.active { background:linear-gradient(100deg,#6366f1,#8b5cf6); color:#fff; }

/* Übersetzen: Sprachauswahl */
.xlate-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.xlate-lang { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-panel);
  color:var(--text); font-size:13px; font-weight:600; cursor:pointer; text-align:left; transition:all .12s; }
.xlate-lang:hover { border-color:var(--primary); background:rgba(37,99,235,.08); color:var(--primary); }
.xlate-more-toggle { width:100%; margin-top:12px; background:transparent; border:1px dashed var(--border);
  border-radius:10px; color:var(--text-muted); font-size:13px; font-weight:600; padding:9px; cursor:pointer; }
.xlate-more-toggle:hover { border-color:var(--primary); color:var(--primary); }
.xlate-more-toggle.open { color:var(--primary); border-style:solid; }
@media (max-width:520px){ .xlate-grid { grid-template-columns:1fr; } }

/* ── Kompakte Desktop-Stufe (1025–1500 px CSS-Breite) ─────────────────────────
   Der Mobil-Umbruch liegt jetzt bei 1024 px (vorher 1280): Ein Full-HD-Monitor mit
   150 % Browser-Zoom hat effektiv 1280 px und rutschte damit fälschlich in die
   Mobil-Ansicht — Full HD ist aber kein Handy. In diesem Zwischenbereich werden
   Menü und Mail-Liste schmaler, damit rechts genug Lesetext bleibt. */
@media (min-width: 1025px) and (max-width: 1500px) {
  :root { --sidebar-width: 204px; }
  /* max-width statt width: gewinnt auch gegen per Resizer GESPEICHERTE Inline-Breiten
     (width aus element.style), ohne das Schmaler-Ziehen zu verbieten. */
  .sidebar { max-width: 224px; }
  .message-list-panel { width: min(330px, 30vw); max-width: 340px; }
  /* Schmale Listenspalte: Suchleiste muss ins Panel passen — Bereichs-Auswahl
     („Posteingang durchsuchen") ausblenden (wie mobil) und Wrap begrenzen,
     sonst ragt die Leiste über den Panel-Rand und die Lupe wird abgeschnitten. */
  #messageListPanel .search-scope-standalone { display: none; }
  #messageListPanel .mail-search-wrap { max-width: 100%; min-width: 0; }
  #messageListPanel .mail-search-box { min-width: 0; flex: 1; }
}

/* ── To-Do-Liste in den Notizen ─────────────────────────────────────────────── */
.notebook-item.todo-sub { padding-left: 34px; font-size: 12.5px; }   /* eingerückte Status-Unterordner */
.notebook-item.todo-root .notebook-name { font-weight: 600; }
.todo-check { display: flex; align-items: center; margin-right: 2px; cursor: pointer; flex-shrink: 0; }
.todo-check input { display: none; }
.todo-check .todo-checkmark { width: 19px; height: 19px; border: 2px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: transparent;
  background: var(--bg-input); transition: all .15s; }
.todo-check .todo-checkmark::after { content: '✓'; }
.todo-check input:checked + .todo-checkmark { background: var(--success, #16a34a); border-color: var(--success, #16a34a); color: #fff; }
.todo-check:hover .todo-checkmark { border-color: var(--primary); }
.note-list-item.todo-done .note-list-title { text-decoration: line-through; opacity: .6; }
.note-list-item.todo-done .note-list-snippet { opacity: .5; }
.todo-editor-check.on { color: var(--success, #16a34a); font-weight: 700; }

/* ── Neues Such-Popover (Runde 22.07.) ───────────────────────────────────────── */
.mail-search-wrap { position: relative; }
#searchPopover {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 600;
  min-width: 340px; width: max(100%, 460px); max-width: 560px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
  font-size: 13px; color: var(--text-primary); overflow: hidden;
}
#searchPopover[hidden] { display: none; }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); }
.sp-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sp-title .sp-tico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.sp-ai { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); }
.sp-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border); transition: .15s; flex-shrink: 0; }
.sp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .15s; }
.sp-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.sp-toggle-input:checked + .sp-switch { background: var(--primary); }
.sp-toggle-input:checked + .sp-switch::after { transform: translateX(14px); }
.sp-sec { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sp-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sp-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sp-quick > div { min-width: 0; }
.sp-qbtn { position: relative; display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 17px 7px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-input); text-align: left; cursor: pointer; min-width: 0; }
.sp-qbtn:hover { border-color: var(--primary); }
.sp-qico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.sp-qcopy { min-width: 0; }
.sp-qcopy strong, .sp-qcopy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-qcopy strong { font-size: 10.5px; }
.sp-qcopy small { margin-top: 1px; color: var(--text-muted); font-size: 9px; }
.sp-qchev { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.sp-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 200px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-panel); box-shadow: 0 10px 26px rgba(0,0,0,.24); }
.sp-menu.right { left: auto; right: 0; }
.sp-menu[hidden] { display: none; }
.sp-opt { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 11.5px; color: var(--text-primary); cursor: pointer; }
.sp-opt:hover { background: var(--bg-hover, rgba(128,128,128,.12)); }
.sp-opt.on { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: 700; }
.sp-opt .sp-ck { width: 13px; color: var(--primary); flex: none; }
.sp-menu input[type=text] { width: 100%; height: 32px; padding: 0 8px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-size: 11px; }
.sp-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sp-tcard { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-input); cursor: pointer; }
.sp-tcard strong { display: block; font-size: 11px; }
.sp-tcard small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 9px; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--bg-secondary, transparent); }
.sp-check { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.sp-check input { width: 14px; height: 14px; accent-color: var(--primary); }
.sp-actions { display: flex; align-items: center; gap: 7px; }
.sp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 11px; font-weight: 700; cursor: pointer; }
.sp-btn:hover { border-color: var(--primary); }
.sp-btn.primary { border-color: var(--primary); color: #fff; background: var(--primary); }
.sp-badge { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--border); color: var(--text-muted); font-size: 9px; }
.sp-badge.on { background: var(--primary); color: #fff; }
.sp-detail[hidden] { display: none; }
.sp-scroll { max-height: min(60vh, 480px); overflow-y: auto; }
.sp-fsec { margin: 10px 14px; border: 1px solid var(--border); border-radius: 10px; }
.sp-fsec-h { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; }
.sp-fsec-h small { color: var(--text-muted); font-size: 9px; font-weight: 600; }
.sp-fbody { padding: 10px 11px; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.sp-field label { display: block; margin-bottom: 3px; font-size: 9px; font-weight: 700; color: var(--text-muted); }
.sp-field input, .sp-field select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-input); color: var(--text-primary); font-size: 11px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); color: var(--text-primary); font-size: 10px; font-weight: 600; cursor: pointer; }
.sp-chip.on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.sp-attopts.off { opacity: .45; pointer-events: none; }
.sp-back { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); cursor: pointer; color: var(--text-primary); }
.sp-hint { margin: 10px 14px 0; padding: 8px 11px; border-radius: 9px; font-size: 11px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); color: var(--text-primary); }
.sp-hint[hidden] { display: none; }
.ai-conf-badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; vertical-align: middle; }
.mobile-search-btn { display: none; }
.sp-msearch { display: none; }
@media (max-width: 768px) {
  /* Eigenes Such-Fenster: Vollbild mit eigener Suchzeile (das Inline-Feld im
     Panel-Kopf ist auf dem Handy zu schmal und wird durch den Lupen-Knopf ersetzt). */
  .mail-search-wrap .mail-search-box { display: none; }
  .mobile-search-btn { display: inline-flex; }
  #searchPopover { position: fixed; inset: 0; width: auto; min-width: 0; max-width: none; max-height: none;
    border: 0; border-radius: 0; overflow-y: auto; z-index: 1500;
    padding-top: env(safe-area-inset-top, 0); padding-bottom: calc(env(safe-area-inset-bottom, 0) + 10px); }
  .sp-msearch { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-panel); z-index: 5; }
  .sp-msearch svg { flex: none; color: var(--text-muted); }
  .sp-msearch input { flex: 1; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font-size: 16px; }
  .sp-msearch input:focus { outline: none; border-color: var(--primary); }
  .sp-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font-size: 15px; cursor: pointer; }
  .sp-quick, .sp-toggles, .sp-grid, .sp-grid.three { grid-template-columns: 1fr; }
}


/* Detail-Knopf neben dem Suchfeld + KI-Suchbegriffe/Suchläufe im Fenster */
.search-detail-btn { flex: none; }
@media (max-width: 768px) { .search-detail-btn { display: none; } }
.sp-term { display: inline-flex; align-items: center; gap: 5px; padding-right: 5px; }
.sp-term-x { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; font-size: 10px; padding: 1px 3px; border-radius: 4px; line-height: 1; }
.sp-term-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
.sp-run { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 11px; }
.sp-run-n { flex: none; font-weight: 700; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sp-run.hit .sp-run-n { color: var(--primary); }
.sp-run-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-run-i { flex: none; margin-left: auto; color: var(--text-muted); font-size: 10px; }
.sp-run.hit .sp-run-i { color: var(--primary); font-weight: 700; }

/* Termin-Erinnerung: Portal-Pop-up (oben rechts, mobil volle Breite) */
.reminder-popup {
  position: fixed; top: 16px; right: 16px; z-index: 4000;
  display: flex; align-items: center; gap: 12px;
  min-width: 300px; max-width: 420px; padding: 14px 16px;
  background: var(--bg-panel); color: var(--text-primary);
  border: 1px solid var(--primary); border-left: 5px solid var(--primary);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: reminderIn .25s ease;
}
.reminder-popup ~ .reminder-popup { top: 96px; }
.reminder-popup ~ .reminder-popup ~ .reminder-popup { top: 176px; }
@keyframes reminderIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.reminder-popup-ico { font-size: 22px; flex: none; }
.reminder-popup-txt { min-width: 0; flex: 1; }
.reminder-popup-title { font-weight: 700; font-size: 14px; }
.reminder-popup-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.reminder-popup-ok { flex: none; padding: 8px 16px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
@media (max-width: 768px) {
  .reminder-popup { left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0) + 10px); max-width: none; }
  .reminder-popup ~ .reminder-popup { top: calc(env(safe-area-inset-top, 0) + 92px); }
}

/* Anlagen: Gesamtgröße als letzte Zeile der Anlagenliste */
.compose-att-total { display: flex; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 2px;
  padding: 5px 9px; border-radius: var(--radius-sm); background: var(--bg-input);
  border: 1px dashed var(--border); font-size: 11.5px; color: var(--text-secondary); }
.compose-att-total .att-total-ico { font-weight: 700; color: var(--primary); }
.compose-att-total .att-total-hint { color: var(--text-muted); font-size: 11px; }
.compose-att-total.gelb { border-color: var(--warning, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent); }
.compose-att-total.gelb .att-total-hint { color: var(--warning, #f59e0b); }
.compose-att-total.rot { border-color: var(--danger, #ef4444); background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent); }
.compose-att-total.rot b, .compose-att-total.rot .att-total-hint { color: var(--danger, #ef4444); }

/* „Erneut verbinden"-Knopf im Offline-/Mailserver-Hinweis */
.offline-banner { cursor: pointer; }
.offline-banner .offline-retry {
  margin-left: 10px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.offline-banner .offline-retry:hover { background: rgba(255,255,255,.18); }
.offline-banner.mailserver { background: var(--warning, #f59e0b); color: #1f2937; }

/* Anmeldungen: gleiche Kartenoptik wie die Teilnehmerliste, nur nach Zustand gruppiert.
   Vorher waren das nackte Textzeilen neben den Teilnehmerkarten mit Avatar. */
.conf-reg-gruppe { border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.crg-kopf { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.conf-reg-gruppe .conf-part-card { margin-bottom:4px; }
.conf-reg-gruppe .conf-part-card:last-child { margin-bottom:0; }
/* „Nicht bestätigt" muss ins Auge fallen: Die Anmeldung wartet auf den Gast,
   nicht auf den Organisator. */
.pc-status.offen { background:#fef3c7; color:#92400e; }
body.dark .pc-status.offen { background:rgba(245,158,11,.18); color:#fcd34d; }

/* Kalender, für den nur Leserecht besteht — dort lassen sich keine Termine anlegen.
   Ohne Kennzeichnung war unklar, warum das Eintragen scheitert. */
.cal-readonly {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
  vertical-align: 1px;
}

/* Kopfleiste der Mailliste: nicht umbrechen. Bei schmaler Spalte (mittlere
   Fensterbreiten, erst recht mit Schriftvergrößerung) reichte die starre
   Mindestbreite des Suchfelds nicht mehr neben den Knopf — die Leiste brach um und
   der Aktualisieren-Knopf rutschte unter das Feld. Das Feld darf jetzt schrumpfen. */
@media (min-width: 1025px) {
  .message-list-panel .panel-header { flex-wrap: nowrap; }
  .message-list-panel .mail-search-wrap {
    min-width: 0;          /* Grundlage dafür, dass ein Flex-Element schrumpfen darf */
    flex: 1 1 180px;
  }
  .message-list-panel .mail-search-wrap .search-box,
  .message-list-panel .mail-search-wrap #mailSearch { min-width: 0; }
}

/* Lesebereich zu schmal: Dann wird die Mail in einem eigenen Fenster geöffnet — die
   Vorschauspalte blendet sich aus, statt schmal und leer Platz zu belegen. Die Liste
   bekommt den frei werdenden Raum. */
body.reader-zu-schmal #messageReader,
body.reader-zu-schmal .reader-pane { display: none !important; }
body.reader-zu-schmal .message-list-panel { flex: 1 1 auto; max-width: none; }

/* Termin an den Rand ziehen → nach kurzem Verweilen wird geblättert. Die Zone wird
   markiert, damit erkennbar ist, dass gleich gewechselt wird. */
.kal-rand-links::before,
.kal-rand-rechts::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 5;
  animation: kalRandPuls .65s ease-in-out infinite alternate;
}
.kal-rand-links::before { left: 0; background: linear-gradient(to right, var(--primary), transparent); }
.kal-rand-rechts::after { right: 0; background: linear-gradient(to left, var(--primary), transparent); }
@keyframes kalRandPuls { from { opacity: .18; } to { opacity: .42; } }
/* Bezugspunkt für die Randmarkierung. */
#calendarGrid { position: relative; }

/* Kalender wurde selbsttätig gewechselt: kurz aufleuchten, damit der Wechsel auffällt,
   ohne zu stören. Wer weniger Bewegung eingestellt hat, bekommt nur den Farbwechsel. */
@keyframes kalGewechselt {
  0%   { background-color: var(--bg-input); box-shadow: 0 0 0 0 rgba(99,102,241,.45); }
  25%  { background-color: rgba(99,102,241,.16); box-shadow: 0 0 0 4px rgba(99,102,241,.20); }
  100% { background-color: var(--bg-input); box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
select.kal-gewechselt {
  animation: kalGewechselt 1.3s ease-out;
  border-color: var(--primary);
}
/* Begründung unter der Auswahl */
.kal-grund {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.kal-grund b { color: var(--text); font-weight: 600; }
.kal-grund svg { color: var(--primary); }
@keyframes kalGrundEin {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.kal-grund-neu { animation: kalGrundEin .28s ease-out; }
@media (prefers-reduced-motion: reduce) {
  select.kal-gewechselt { animation-duration: .01s; }
  .kal-grund-neu { animation: none; }
}

/* Vorschau beim Antippen im Kalender: zeigt schon während der Berührung, wo der
   neue Termin entstünde — vorher tippte man ins Blaue und sah die getroffene
   Uhrzeit erst im Dialog. */
.cal-tipp-vorschau {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 4;
  pointer-events: none;
  border: 2px dashed var(--primary);
  border-radius: 7px;
  background: rgba(99, 102, 241, .16);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: calTippAuf .12s ease-out;
}
@keyframes calTippAuf { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* Monatsansicht und Tageskopf: die Zelle selbst hervorheben */
.cal-tipp-zelle {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: rgba(99, 102, 241, .12) !important;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .cal-tipp-vorschau { animation: none; } }