:root { --border:#e5e7eb; --sub:#6b7280; --fg:#111827; --primary:#111827; --active:#f5f6f7; --hover:#f0f2f4; }
* { box-sizing:border-box; }
html, body { height: 100%; width: 100%; margin: 0; padding: 0; position: relative; overflow: hidden; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--fg); background:#fafafa; font-size:18px; }
header { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; padding:10px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); background:#ffffff; position:fixed; top:0; left:0; right:0; z-index:10; height:56px; width:100%; overflow:visible; }
.header-left { display:flex; align-items:center; gap:8px; }
h1 { margin: 0; font-size:18px; display:flex; gap:6px; align-items:center; }
.toolbar { display:flex; align-items:center; gap:8px; }
button:not([class]) { background:var(--primary); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer; font-size:15px; }
button:not([class]):disabled { opacity:.6; cursor:default; }

/* Suchfeld linksbündig oberhalb der mittleren Spalte:
   Linke Spalte = 280px, Header-Padding = 16px -> margin-left 264px */
#conversations_search {
  margin-left: 264px !important;
  flex: 0 1 264px !important;
  max-width: 264px !important;
  min-width: 150px !important;
}

.container { display:grid; grid-template-columns: 420px 1fr; height: calc(100vh - 64px); width:100%; max-width:none; margin:0; min-height:0; }
.list { border-right:1px solid var(--border); overflow-y:auto; overflow-x:hidden; background:#fff; min-height:0; }
.item { padding:16px 18px; border-bottom:1px solid var(--border); cursor:pointer; overflow:hidden; }
.item:hover { background: var(--hover); }
.item.active { background: var(--active); border-left:3px solid var(--primary); padding-left:15px; }
.item .subject { font-size:18px; line-height:1.4; }
.item.unseen .subject { font-weight:700; }
.item .meta { color: var(--sub); font-size:14px; margin-top:4px; display:flex; justify-content:space-between; gap:12px; }
.item.answer-fade-out { opacity:0; transform:translateX(12px); transition:opacity 0.2s ease-out, transform 0.2s ease-out; }

/* WhatsApp-E-Mail-Body: Links und lange Wörter umbrechen + Formatierung wie Outlook */
#whatsapp_email_body {
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word; /* Fallback für ältere Browser */
}
#whatsapp_email_body p {
  margin: 0 0 1em 0; /* Absätze mit Leerzeile */
}
#whatsapp_email_body p:last-child {
  margin-bottom: 0; /* Letzter Absatz ohne Abstand */
}
#whatsapp_email_body ul,
#whatsapp_email_body ol {
  margin: 0 0 1em 0;
  padding-left: 24px;
}
#whatsapp_email_body li {
  margin-bottom: 0.5em;
}
#whatsapp_email_body strong,
#whatsapp_email_body b {
  font-weight: 600;
}
#whatsapp_email_body br {
  content: "";
  display: block;
  margin: 0.5em 0;
}

/* Topic-Markierung: DEAKTIVIERT in WhatsApp-Ansicht (kommt später zurück) */
/* #whatsapp_email_body .topic-range-whatsapp { cursor: pointer; } */

/* Topic-Analysis Loading: Radar-Scanner-Effekt - DEAKTIVIERT */
/* #topic_analysis_scanner {
  position: absolute;
  top: 0;
  left: -100%;
  width: 10%;
  height: 100%;
  background: linear-gradient(to right, transparent, #3b82f6, transparent);
  box-shadow: 0 0 8px #3b82f6;
  animation: radarScan 2s linear infinite alternate;
  pointer-events: none;
  z-index: 10;
}
@keyframes radarScan {
  from { left: -100%; }
  to { left: 100%; }
} */

@keyframes slideInFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#cpn_v2_refresh_btn.is-loading svg {
  animation: spin 1s linear infinite;
  transform-origin: 50% 50%;
}
.detail { overflow:hidden; padding:20px 28px; background:#f9fafb; min-height:0; }
.detail.slide-in-left { animation: slideInFromLeft 0.3s ease-out; }
.detail.slide-in-right { animation: slideInFromRight 0.3s ease-out; }
.detail h2 { margin:0 0 10px; font-size:22px; }
.detail .meta { color: var(--sub); font-size:14px; margin-bottom:16px; }
.detail .content { background:#fff; border:1px solid var(--border); border-radius:10px; padding:20px; line-height:1.6; }
/* E-Mail-Formatierung: Fettdruck, Listen, Absätze */
.detail .content strong,
.detail .content b { font-weight:600; }
.detail .content p { margin:0 0 12px 0; }
.detail .content ol,
.detail .content ul { margin:0 0 12px 0; padding-left:24px; }
.detail .content li { margin-bottom:6px; }
.detail .content ol { list-style-type:decimal; }
.detail .content ul { list-style-type:disc; }
/* E-Mail-Inhalt: eingebettete Bilder responsiv anzeigen.
   width/height aus dem HTML (z.B. 38x34) nicht erzwingen, sondern
   natürliche Größe nutzen und nur bei Bedarf herunterskalieren. */
.detail .content img {
  display:block;
  max-width:100%;
  height:auto !important;
  width:auto !important;
}
.profile { margin-top:10px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; width:100%; box-sizing:border-box; }
.profile h3 { margin:0 0 12px; font-size:18px; }
.profile .grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.profile .kv { font-size:14px; }
.profile .kv span { color: var(--sub); display:inline-block; min-width:90px; }
.compose { position:fixed; top:64px; right:0; width:min(1248px, 100vw); height:calc(100vh - 64px); border-left:1px solid var(--border); padding:18px 18px; overflow:auto; background:transparent; transform:translateX(100%); transition:transform 0.25s ease-out; z-index:50; }
.compose.open { transform:translateX(0); }
.compose.quick-mode .compose-side {
  display:none;
}
.compose.quick-mode .compose-main {
  flex:1 1 0;
}
/* Inner Card des Compose-Panels im Tailwind-Stil (ohne Tailwind-Build) */
.compose-inner {
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,0.10);
  border:1px solid #e2e8f0;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.compose h3 { margin:0; font-size:18px; }
.compose .row { display:flex; gap:10px; margin-bottom:8px; align-items:center; }
.compose label { width:70px; color:var(--sub); font-size:13px; }
.compose input { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:15px; }
.compose .editor {
  min-height:260px;
  border-radius:14px;
  padding:16px 18px 16px 18px;
  background:#f9fafb;
  font-size:15px;
  border:1px solid #e5e7eb;
  max-height:100%;
  overflow-y:auto; /* Antwortfeld intern scrollbar machen */
}
/* Signatur-Abstand: verhindert Überlappung bei langem Text */
.compose .editor [data-role="signature"] {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
/* Absatzabstände in der Antwort: etwas mehr Luft zwischen Paragraphen
   als bei einer normalen Zeile, ohne doppelte Leerzeilen zu erzeugen. */
.compose .editor p {
  margin:0 0 1.2em;
}
.compose .editor p:last-child {
  margin-bottom:0;
}
.compose .actions { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
/* Zweispaltiges Layout im Compose-Panel: links Antwort, rechts Themen (gleiche Höhe, intern scrollbar) */
.compose-body {
  display:flex;
  gap:18px;
  align-items:stretch;
  margin-top:8px;
  max-height:480px; /* gemeinsamer oberer Bereich; darunter Antwortstil-Block */
  overflow:hidden;
}
.compose-main,
.compose-side,
.compose-style {
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0; /* wichtig für korrektes Scrollen der Inhalte */
}
/* Spaltenreihenfolge im Compose-Bereich: links Antwortstil, Mitte Editor (größte Spalte), rechts Themen (etwas breiter) */
.compose-style {
  flex:0 0 230px; /* feste, schmale Stil-Spalte */
  order:0;
}
.compose-main {
  flex:3 1 0; /* Editor bleibt klar dominant */
  order:1;
}
.compose-side {
  flex:2 1 0; /* Themen-Spalte bekommt mehr Platz */
  order:2;
}
/* Editor nutzt den verfügbaren Platz in der linken Spalte, Aktionen bleiben unten */
.compose-main .editor {
  flex:1;
  min-height:0;
}
/* Themen-Spalte füllt die volle Höhe des oberen Bereichs und scrollt intern */
.compose-side #compose_reply_prep_block {
  flex:1;
  min-height:0;
  overflow:auto;
}
/* Antwortstil-Panel: volle Spaltenbreite für die Slider im modernen Card-Look */
#compose_reply_prefs_block { width:100%; box-sizing:border-box; border-radius:14px; border:1px solid #e5e7eb; background:#f9fafb; padding:10px 14px 12px; }
#compose_reply_prefs_block input[type="range"] {
  width:100%;
  display:block;
  margin:0; /* leichter Innenabstand links/rechts durch Padding der Card */
}
#compose_reply_prefs_block label > span {
  display:block;
  white-space:nowrap; /* Verhindert zweizeilige Darstellung wie in zwei Spalten */
}
.muted { color:var(--sub); }
.sub { color:var(--sub); font-size:13px; }
/* Flowbite Button Styles */
.btn-primary { 
  color: #fff;
  background: #1C64F2;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:hover { background: #1a56db; }
.btn-primary:focus { outline: none; box-shadow: 0 0 0 4px rgba(28, 100, 242, 0.5); }

.btn-secondary { 
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover { background: #f9fafb; }
.btn-secondary:focus { outline: none; box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.5); }

.btn-success { 
  color: #fff;
  background: #057a55;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-success:hover { background: #046c4e; }
.btn-success:focus { outline: none; box-shadow: 0 0 0 4px rgba(5, 122, 85, 0.5); }

.btn-danger { 
  background: transparent;
  color: #dc2626;
  border: 0;
  padding: 6px 8px;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-danger:hover { color: #991b1b; }

/* WhatsApp-Container als Haupt-Ansicht (kein Modal mehr) */
.whatsapp-container {
  display: block;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 56px);
  /* dvh = dynamische Viewport-Höhe: auf iOS Safari schließt 100vh die untere
     Browser-Leiste NICHT ein, wodurch der Container (und die unten fixierte
     Compose-Aktionsleiste mit Senden-Button) hinter die Safari-Leiste rutscht.
     100dvh berücksichtigt die Leiste -> Senden-Button bleibt sichtbar.
     Fallback (100vh) steht in der Zeile darüber für ältere Browser. */
  height: calc(100dvh - 56px);
  overflow: hidden;
  z-index: 1;
}

/* Klassischer Container versteckbar */
.classic-container {
  display: none !important; /* initial versteckt - überschreibt .container grid */
}

.legacy-modal.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:100000000; }
.legacy-modal.modal .box,
#profile_modal .box,
#knowledge_modal .box,
#contacts_modal .box { background:#fff; border-radius:10px; padding:16px; width:320px; border:1px solid var(--border); }
.legacy-modal.modal .row,
#profile_modal .row,
#knowledge_modal .row,
#contacts_modal .row { display:flex; gap:8px; margin:10px 0; align-items:center; }
.legacy-modal.modal label,
#profile_modal label,
#knowledge_modal label,
#contacts_modal label { width:90px; color:var(--sub); font-size:12px; }
.sync-options-wrapper label { width: auto !important; display: flex !important; }

/* Flowbite/Tailwind Modals: keine optischen Overrides via ID-Selektoren,
   nur minimaler Display-Fallback (Tailwind übernimmt Optik). */
#email_settings_modal { display: none; z-index: 100000000 !important; }
#email_settings_modal:not(.hidden) { display: flex; }

#email_settings_modal_body input[type="radio"][name="sync_mode"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
#email_settings_modal_body input[type="radio"][name="sync_mode"] + label {
  display: block;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Abstand der Kacheln robust machen (falls Tailwind space-y-* nicht greift) */
#email_settings_modal_body ul.space-y-3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Optionaler „Radio-Indicator" ohne extra HTML */
#email_settings_modal_body input[type="radio"][name="sync_mode"] + label {
  position: relative;
  padding-left: 44px;
}
#email_settings_modal_body input[type="radio"][name="sync_mode"] + label::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #fff;
  box-sizing: border-box;
}
#email_settings_modal_body input[type="radio"][name="sync_mode"]:checked + label::before {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 4px #2563eb;
}
#email_settings_modal_body input[type="radio"][name="sync_mode"] + label:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
#email_settings_modal_body input[type="radio"][name="sync_mode"]:checked + label {
  border-color: #2563eb;
  background: #eff6ff;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Signatur Upload UX: Dateiname als echtes Feld darstellen */
#email_signature_file_name {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  line-height: 1.2;
}
#email_settings_modal_body .sig-choose-icon,
#email_settings_modal_body .sig-upload-icon,
#email_settings_modal_body .smtp-test-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

/* Agent-Setup Modal: nur Display-Fallback, keine Optik-Overrides */
#agent_setup_modal { display: none; z-index: 100000000 !important; }
#agent_setup_modal:not(.hidden) { display: flex; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Agent-Setup Footer Buttons immer sichtbar */
#agent_setup_save, #agent_setup_cancel { display:inline-flex; align-items:center; justify-content:center; }

#email_settings_modal_body * {
  box-sizing: border-box;
}
#email_settings_modal_body .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
@media (max-width: 768px) {
  #email_settings_modal_body .grid {
    grid-template-columns: 1fr;
  }
}
#email_settings_modal_body input,
#email_settings_modal_body select,
#email_settings_modal_body textarea {
  display: block;
  width: 100%;
  max-width: 100%;
}
#email_settings_modal_body .p-4,
#email_settings_modal_body .p-6 {
  width: 100%;
  max-width: 100%;
}
.legacy-modal.modal input { flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:14px; }
.legacy-modal.modal select { flex:1; padding:12px 14px; border:2px solid var(--border); border-radius:8px; font-size:15px; font-weight:500; background:#fff; cursor:pointer; transition:all 0.2s; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.legacy-modal.modal select:hover { border-color:#111827; }
.legacy-modal.modal select:focus { outline:none; border-color:#059669; box-shadow:0 0 0 3px rgba(5,150,105,0.1); }
.legacy-modal.modal textarea { flex:1; padding:12px 14px; border:2px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; resize:vertical; transition:all 0.2s; }
.legacy-modal.modal textarea:hover { border-color:#111827; }
.legacy-modal.modal textarea:focus { outline:none; border-color:#059669; box-shadow:0 0 0 3px rgba(5,150,105,0.1); }
.sidebar { position:fixed; top:0; right:-320px; width:320px; height:100vh; background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,0.1); z-index:99999999 !important; transition:right 0.3s ease; overflow-y:auto; }
.sidebar.open { right:0 !important; }
.sidebar.left { right:auto !important; left:-320px; box-shadow:4px 0 20px rgba(0,0,0,0.1); transition:left 0.3s ease; }
.sidebar.left.open { left:0 !important; }

/* Filter-Panel (linke Sidebar, modernes Design: Chips + Account-Zeilen) */
.sidebar.left.fs-panel { left:-400px; width:380px; display:flex; flex-direction:column; overflow:hidden; box-shadow:8px 0 32px rgba(15,23,42,0.18); }
.fs-head { padding:20px 24px 12px; display:flex; align-items:flex-start; justify-content:space-between; }
.fs-title { font-size:22px; font-weight:700; color:#111827; }
.fs-sub { font-size:13px; color:#6b7280; margin-top:2px; }
.fs-reset { background:none; border:0; color:#059669; font-size:13px; font-weight:600; cursor:pointer; padding:4px 0; }
.fs-reset:hover { text-decoration:underline; }
.fs-body { flex:1; overflow-y:auto; padding:4px 24px 16px; }
.fs-group-label { font-size:12px; font-weight:600; letter-spacing:0.6px; color:#6b7280; text-transform:uppercase; margin:18px 0 8px; }
.fs-chips { display:flex; flex-wrap:wrap; gap:8px; }
.fs-chip { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:12px; border:1.5px solid #e5e7eb; background:#fff; font-size:14px; font-weight:500; color:#374151; cursor:pointer; transition:all 0.15s; }
.fs-chip:hover { border-color:#a7f3d0; background:#f6fefb; }
.fs-chip.sel { background:#ecfdf5; border-color:#059669; color:#065f46; }
.fs-accounts { border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
.fs-acc-row { width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border:0; background:#fff; cursor:pointer; font-size:14px; color:#111827; text-align:left; transition:background 0.15s; }
.fs-acc-row + .fs-acc-row, .fs-acc-row + #whatsapp_account_filter_container .fs-acc-row, #whatsapp_account_filter_container .fs-acc-row + .fs-acc-row { border-top:1px solid #f1f5f9; }
.fs-acc-row:hover { background:#f8fafc; }
.fs-acc-row.sel { background:#ecfdf5; }
.fs-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.fs-avatar-all { background:#f3f4f6; color:#6b7280; font-size:16px; }
.fs-acc-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-dot { width:20px; height:20px; border-radius:50%; border:2px solid #d1d5db; flex-shrink:0; transition:all 0.15s; }
.fs-acc-row.sel .fs-dot { border-color:#059669; background:#059669; box-shadow:inset 0 0 0 3px #fff; }
.fs-footer { padding:16px 24px 20px; border-top:1px solid #f1f5f9; background:#fff; }
.fs-apply { width:100%; padding:12px; border:0; border-radius:12px; background:#059669; color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:background 0.15s; }
.fs-apply:hover { background:#047857; }

.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:99999998 !important; display:none; transition:opacity 0.3s; }
.sidebar-overlay.open { display:block !important; }
.sidebar-header { padding:20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sidebar-header h3 { margin:0; font-size:18px; }
.sidebar-close { background:none; border:0; font-size:24px; cursor:pointer; color:var(--sub); padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; }
.sidebar-close:hover { background:var(--hover); color:var(--fg); }
.sidebar-menu { padding:0; margin:0; list-style:none; }
.sidebar-menu li { border-bottom:1px solid var(--border); }
.sidebar-menu li a { display:flex; align-items:center; gap:12px; padding:16px 20px; text-decoration:none; color:var(--fg); font-size:15px; transition:background 0.2s; }
.sidebar-menu li a:hover { background:var(--hover); }
.sidebar-menu li a .icon { font-size:20px; width:24px; }

/* Detail layout: scrollable content (70%) + scrollbares Profil (30%) im gleichen Panel (Desktop) */
.detail {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}
/* Minimal: #detail in 2 Spalten teilen (links bestehende Elemente, rechts leer) */
.detail.two-col {
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  align-items:stretch;
}
#detail_left_col {
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#detail_right_col {
  min-width:0;
  min-height:0;
  overflow:auto;
  background:#f9fafb;
  border-left:1px solid #e5e7eb;
  padding-left:12px;
}
#detail_right_col .sub {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:6px;
  min-height:120px;
}
.detail-columns {
  display:flex;
  gap:16px;
  min-height:0;
  height:100%;
}
.detail-left {
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.detail-right {
  flex:0 0 360px;
  min-width:320px;
  max-width:420px;
  min-height:0;
  overflow:auto;
  background:#f9fafb;
  border-left:1px solid #e5e7eb;
  padding-left:12px;
}
.detail-scroll {
  flex:0 0 70%;
  min-height:0;
  overflow:auto;
  background:#f9fafb;
  padding-right:4px;
}
.detail-splitter {
  flex:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:row-resize;
  user-select:none;
  background:#f3f4f6;
}
.detail-splitter::before {
  content:'';
  width:96px;
  height:4px;
  border-radius:999px;
  background:#d1d5db;
}
.detail-splitter:hover::before {
  background:#9ca3af;
}
.detail-left > .profile {
  flex:0 0 30%;
  min-height:0;
  overflow:auto;
  background:#f9fafb;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
  /* Header wraps on mobile */
  header { flex-wrap:wrap; gap:8px; padding:10px; }
  h1 { font-size:16px; flex:1; min-width:0; }
  .toolbar { flex-wrap:wrap; width:100%; justify-content:flex-end; gap:6px; }
  .toolbar button { padding:6px 10px; font-size:13px; }
  #status { order:-1; width:100%; margin:0 0 4px 0 !important; text-align:center; }
  /* Stack layout vertically on mobile */
  .container { 
    display:flex; 
    flex-direction:column; 
    height:auto; 
    min-height:calc(100vh - 100px); 
  }
  
  /* List takes full width, scroll horizontally disabled */
  .list { 
    border-right:none; 
    border-bottom:1px solid var(--border); 
    max-height:40vh; 
    width:100%; 
    overflow-x:hidden;
  }
  
  /* Detail takes full width (reset flex layout) */
  .detail { 
    width:100%; 
    min-height:300px;
    padding:12px;
    overflow-x:hidden;
    display:block;
  }
  .detail.two-col {
    display:block;
  }
  #detail_right_col {
    border-left:none;
    padding-left:0;
    margin-top:12px;
    overflow:visible;
  }
  .detail-columns {
    display:block;
    height:auto;
  }
  .detail-left {
    height:auto;
  }
  .detail-right {
    flex:none;
    min-width:0;
    max-width:none;
    border-left:none;
    padding-left:0;
    margin-top:12px;
    overflow:visible;
  }
  .detail-scroll {
    padding-right:0;
    overflow:visible;
  }
  .detail-left > .profile {
    flex:none;
    max-height:none;
    overflow:visible;
  }
  
  /* Compose section on mobile */
  .compose { 
    border-left:none; 
    border-top:1px solid var(--border); 
    width:100%;
    padding:12px;
    overflow-x:hidden;
  }
  /* Auf Mobile: oberer Bereich nicht künstlich begrenzen, Spalten weiter untereinander */
  .compose-body {
    max-height:none;
    overflow:visible;
  }
  /* In der Mobile-Ansicht Compose-Spalten untereinander stapeln */
  .compose-body {
    flex-direction:column;
  }
  
  /* Make modals responsive */
  .legacy-modal.modal .box { 
    width:90vw !important; 
    max-width:400px !important;
    max-height:85vh;
    overflow:auto;
  }
  
  /* Profile grid single column on mobile */
  .profile .grid { 
    grid-template-columns:1fr; 
  }
  
  /* Compose editor smaller on mobile */
  .compose .editor { 
    min-height:150px; 
    font-size:14px;
  }
  
  /* Actions wrap on mobile */
  .compose .actions { 
    flex-wrap:wrap; 
  }
  
  /* Detail content padding */
  .detail .content { 
    padding:12px; 
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  header { padding:8px; }
  h1 { font-size:14px; }
  .toolbar button { padding:5px 8px; font-size:12px; }
  .detail { padding:8px; }
  .compose { padding:8px; }
  .item { padding:8px 10px; }
  .profile { padding:10px; }
}

/* ============================================================
   Mobile-Optimierung der WhatsApp-Ansicht (Kontakte/Chat/Detail)
   Logik: static/emails-mobile-nav.js
   ============================================================ */
@media (max-width: 768px) {
  /* Header darf auf Mobile mehrzeilig werden: feste height:56px würde die
     umgebrochenen Zeilen unsichtbar überlaufen lassen und den Inhalt
     überlappen. height:auto -> korrekte Höhe + deckender Hintergrund. */
  header {
    height: auto;
    min-height: 56px;
    /* Platz reservieren für die fixierten schwarzen Buttons oben rechts
       (nur noch 2: Aktualisieren + Menü), damit die Tabs nicht darunter laufen. */
    padding-right: 84px;
  }

  /* Profil-Icon und Build-/Status-Text auf Mobile ausblenden -> spart Platz,
     Header passt in 2 Zeilen. Profil bleibt über das ☰-Menü erreichbar. */
  #user_badge { display: none !important; }
  #build_info { display: none !important; }

  /* Schwarze Aktions-Buttons (Aktualisieren / Menü) in die obere rechte Ecke
     pinnen. position:absolute (an den Header gebunden), NICHT fixed: auf iOS
     Safari kann der horizontal scrollbare Pager den Viewport verbreitern,
     wodurch fixed+right nach rechts aus dem Bild driftet (Buttons abgeschnitten).
     Der Header ist width:100% -> absolute Kinder bleiben zuverlässig im Bild. */
  #reload,
  #menu_btn {
    position: absolute !important;
    top: 8px;
    z-index: 20;
    margin: 0 !important;
  }
  #menu_btn { right: 8px; }
  #reload   { right: 46px; }

  /* View-Switcher kompakter, damit Kontakte/Organisationen/Inbox zusammen
     in EINE Zeile passen (Suchfeld + E-Mail rutschen in Zeile 2). */
  #view_contacts,
  #view_organizations,
  #view_inbox {
    font-size: 11px !important;
    padding: 4px 7px !important;
  }

  /* Suchfeld darf schrumpfen, damit "+ E-Mail" NEBEN die Suche in Zeile 2
     passt (statt in eine 3. Zeile umzubrechen) auch auf schmalen Handys. */
  #conversations_search {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
  }

  /* Logo im mobilen Header ausblenden - sonst überlappt es das Suchfeld */
  #iiq_logo,
  #iiq_logo_link {
    display: none !important;
  }

  /* Der Flex-Spacer wird nicht mehr gebraucht (Buttons sind aus dem Fluss). */
  #main_header > div[style*="flex:1"] {
    display: none;
  }

  /* Die 3 festen Spalten werden zu einem horizontalen "Pager":
     Liste -> Chat -> Detail, jeweils volle Breite, per Wischen wechselbar.
     Verhindert das horizontale Überlaufen/Verzerren auf schmalen Screens. */
  #contact_modal_container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  #conversations_sidebar,
  #contact_chat_panel,
  #contact_email_detail_panel {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
  }

  /* "Zurück zur Liste"-Button (per JS ein-/ausgeblendet) */
  #mobile_back_to_list {
    display: none;
    position: fixed;
    left: 12px;
    bottom: 16px;
    z-index: 50;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
  }
  #mobile_back_to_list.visible {
    display: inline-flex;
  }

  /* Compose auf Mobile: die untere Aktionsleiste (Senden-Button) wird bereits per
     JS (openComposeInWhatsAppPanel) sticky am unteren Rand fixiert. Damit der
     Button auf iPhones nicht unter dem Home-Indicator / der Safari-Leiste klebt,
     unten den Safe-Area-Abstand ergänzen. Die eigentliche Sichtbarkeit stellt der
     dvh-Fix an .whatsapp-container sicher. */
  #whatsapp_compose_panel .actions {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* Compose: Cc/Bcc-Toggle (Gmail-Stil) */
.compose-ccbcc-toggle {
  flex: 0 0 auto;
  align-self: center;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
}
.compose-ccbcc-toggle:hover {
  background: #eff6ff;
  text-decoration: underline;
}

/* Empty State im linken Panel */
.iiq-empty {
  text-align:center;
  padding:40px 24px;
}

.iiq-empty img,
.iiq-empty svg {
  width:48px;
  height:48px;
  margin-bottom:16px;
  display:inline-block;
}

.iiq-empty h3 {
  margin:0 0 8px;
  font-size:1.1rem;
  color:var(--fg);
  font-weight:600;
}

.iiq-empty p {
  margin:0 0 24px;
  font-size:.95rem;
  color:var(--sub);
  line-height:1.5;
}

.iiq-empty-cta {
  background:#059669;
  color:#fff;
  border:0;
  padding:12px 28px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  font-size:1rem;
  font-family:var(--r-font);
  transition:background .15s, transform .1s;
}

.iiq-empty-cta:hover { background:#047857; }
.iiq-empty-cta:active { transform:scale(.98); }

/* Minimal Login: moderner Aurora-Hintergrund */
.minimal-login {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  z-index:9999999;
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
}

#login_page .minimal-login-card,
#minimal_login .minimal-login-card {
  position:relative;
  z-index:1;
}

.minimal-login .particles-canvas {
  position:fixed;
  inset:0;
  z-index:0;
  background:#f9fafb;
  width:100%;
  height:100%;
  display:block;
}

@media (prefers-reduced-motion: reduce) {
  .minimal-login .particles-canvas { display:none; }
}

.minimal-login-aurora {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}

.minimal-login-blob {
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:.45;
  animation:loginAurora 18s ease-in-out infinite alternate;
}

.minimal-login-blob-1 {
  width:600px; height:600px;
  background:#059669;
  top:-180px; right:-120px;
}

.minimal-login-blob-2 {
  width:500px; height:500px;
  background:#4f46e5;
  bottom:-120px; left:-120px;
  animation-delay:-9s;
}

@media (prefers-reduced-motion: reduce) {
  .minimal-login-blob { animation:none; }
}

@keyframes loginAurora {
  from { transform:translate(0, 0) scale(1); }
  to { transform:translate(40px, -50px) scale(1.1); }
}

.minimal-login-card {
  position:relative;
  z-index:1;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:2.25rem;
  width:100%;
  max-width:420px;
  box-shadow:0 20px 50px rgba(15,23,42,.08);
}

/* Drafts-Badge: blinkender gelber Punkt fuer neue Auto-Drafts */
.drafts-pending-dot {
  display:none;
  position:absolute;
  top:5px;
  right:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f59e0b;
  box-shadow:0 0 0 2px #ffffff;
  animation:drafts-pending-pulse 1.2s ease-in-out infinite;
  will-change:opacity, transform;
}

@keyframes drafts-pending-pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:0.35; transform:scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .drafts-pending-dot { animation:none; }
}