: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; }
.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);
  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-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; }
}