@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Legacy tokens — now aliased to the new ix-* palette so all old views
     (Settings, Reports, KB, Contacts, etc.) automatically pick up the
     refreshed look without touching their individual CSS rules. */
  --accent: #ed0099;
  --accent-hover: #b8007a;
  --accent-light: rgba(237, 0, 153, 0.08);
  --accent-glow: rgba(237, 0, 153, 0.25);
  --bg: #fcfbf9;
  --sidebar-bg: #ffffff;
  --sidebar-text: #525252;
  --sidebar-active: #0a0a0a;
  --border: rgba(0, 0, 0, 0.06);
  --border-light: rgba(0, 0, 0, 0.06);
  --text: #0a0a0a;
  --text-secondary: #525252;
  --text-muted: #737373;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #ea8a0f;
  --radius: 12px;
  --radius-lg: 16px;

  /* ═══ New Intercom-inspired design tokens (Phase 1) ═══
     Used by the redesigned inbox/conversation/panel. Coexist with
     legacy tokens so migration can happen view-by-view. */
  --ix-ink:        #0a0a0a;
  --ix-ink-2:      #1f1f1f;
  --ix-ink-3:      #525252;
  --ix-ink-4:      #737373;
  --ix-ink-5:      #a3a3a3;
  --ix-white:      #ffffff;
  --ix-ivory:      #fcfbf9;             /* conversation background */
  --ix-nav-bg:     #ffffff;
  --ix-nav-hover:  #f4f4f5;
  --ix-nav-active: #eeedee;
  --ix-line:       rgba(0, 0, 0, 0.06);
  --ix-line-2:     rgba(0, 0, 0, 0.1);
  --ix-brand:      #ed0099;
  --ix-brand-ink:  #b8007a;
  --ix-brand-veil: rgba(237, 0, 153, 0.08);
  --ix-agent-bubble: #fcf5f9;
  --ix-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  letter-spacing: -0.003em;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Layout */
.app {
  display: grid;
  grid-template-columns: 200px 290px 1fr;
  height: 100dvh;
}

/* Collapsed nav — Intercom-style icon-only rail (default state) */
.app.nav-collapsed { grid-template-columns: 60px 300px 1fr; }
.app.nav-collapsed .settings-view,
.app.nav-collapsed .stats-view,
.app.nav-collapsed .kb-view,
.app.nav-collapsed .contacts-view,
.app.nav-collapsed .features-view,
.app.nav-collapsed .surveys-view,
.app.nav-collapsed .news-view,
.app.nav-collapsed .help-view,
.app.nav-collapsed .testing-view { grid-column: 2 / -1; }
.app.nav-collapsed .nav-title,
.app.nav-collapsed .nav-item span,
.app.nav-collapsed .avail-label,
.app.nav-collapsed .nav-footer-text,
.app.nav-collapsed .nav-agent-info { display: none; }
/* Eingeklappt: Gruppen-Labels werden zu schmalen Trennstrichen zwischen den Icons. */
.app.nav-collapsed .nav-group {
  height: 1px;
  padding: 0;
  margin: 9px auto;
  width: 22px;
  overflow: hidden;
  text-indent: -9999px;
  background: var(--ix-line);
}
.app.nav-collapsed .nav-section > .nav-group:first-child {
  margin-top: 2px;
}
.app.nav-collapsed .nav { background: var(--ix-nav-bg); border-right: 1px solid var(--ix-line); }
.app.nav-collapsed .nav-header {
  justify-content: center;
  padding: 14px 0 8px;
}
.app.nav-collapsed .nav-collapse-btn { display: none; }
.app.nav-collapsed .nav-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  display: grid; place-items: center;
}
.app.nav-collapsed .nav-section {
  padding: 4px 0;
  align-items: center;
  gap: 2px;
}
.app.nav-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: var(--ix-ink-3);
  background: transparent;
  position: relative;
  transition: all 0.12s var(--ix-ease);
}
.app.nav-collapsed .nav-item:hover {
  background: var(--ix-nav-hover);
  color: var(--ix-ink);
}
.app.nav-collapsed .nav-item.active {
  background: var(--ix-nav-active);
  color: var(--ix-ink);
}
.app.nav-collapsed .nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--ix-brand);
  border-radius: 0 2px 2px 0;
}
.app.nav-collapsed .nav-item svg {
  width: 17px; height: 17px;
  stroke-width: 1.75;
}
.app.nav-collapsed .nav-item .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
  min-width: 16px;
  height: 16px;
  font-size: 9.5px;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ix-brand);
  color: white;
  display: grid;
  place-items: center;
  border: 2px solid var(--ix-nav-bg);
}
.app.nav-collapsed .nav-footer { padding: 8px 0 10px; align-items: center; gap: 4px; }
.app.nav-collapsed .nav-footer-item {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  transition: background 0.12s var(--ix-ease);
}
.app.nav-collapsed .nav-footer-item:hover { background: var(--ix-nav-hover); }
.app.nav-collapsed .nav-footer-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  position: relative;
  color: var(--ix-ink-3);
}
.app.nav-collapsed .nav-footer-icon svg { width: 17px; height: 17px; }
.app.nav-collapsed .nav-footer-icon .status-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--ix-nav-bg);
}
.app.nav-collapsed .nav-footer-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  font-weight: 600;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ix-brand);
  color: white;
  display: grid;
  place-items: center;
  border: 2px solid var(--ix-nav-bg);
}
.app.nav-collapsed .nav-availability { padding: 0; }
.app.nav-collapsed .nav-agent {
  justify-content: center;
  padding: 4px 0 0;
  border-top: 1px solid var(--ix-line);
  width: 100%;
}
.app.nav-collapsed .nav-agent-avatar {
  width: 30px; height: 30px;
  font-size: 11px;
}

/* nav-expand-btn was removed: in collapsed mode the logo is now the expand
 * trigger (handleLogoClick → toggleNavCollapse), so no second button is
 * needed and the 32px logo fits cleanly into the 64px collapsed sidebar. */

/* ===== CMD+K SEARCH ===== */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: cmdk-fade 0.15s ease;
}

@keyframes cmdk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cmdk-dialog {
  width: 560px;
  max-width: 90vw;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: cmdk-slide 0.2s cubic-bezier(.25,.8,.25,1);
  position: relative;
  z-index: 1;
}

@keyframes cmdk-slide {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cmdk-input-wrap svg { color: var(--text-muted); flex-shrink: 0; }

.cmdk-input-wrap input {
  flex: 1;
  border: none;
  font-size: 16px;
  font-family: inherit;
  font-weight: 400;
  outline: none;
  background: none;
  color: var(--text);
}

.cmdk-input-wrap input::placeholder { color: var(--text-muted); }

.cmdk-input-wrap kbd {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 500;
  border: 1px solid rgba(0,0,0,0.06);
}

.cmdk-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.cmdk-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.cmdk-section {
  margin-bottom: 8px;
}

.cmdk-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 4px;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s;
}

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

.cmdk-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--text-secondary);
}

.cmdk-item-icon.conv { background: var(--accent-light); color: var(--accent); }
.cmdk-item-icon.contact { background: #e8faf0; color: #1a8a4a; }
.cmdk-item-icon.article { background: #f0e6ff; color: #6d28d9; }

.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== STATS / OVERVIEW (home view) ===== */
.stats-view {
  grid-column: 2 / -1;
  grid-row: 1;
  overflow-y: auto;
  padding: 44px 52px 64px;
  background: var(--bg);
  z-index: 1;
}
@media (max-width: 1400px) {
  .stats-view { padding: 36px 40px 56px; }
}

/* Header */
.overview-header { margin-bottom: 32px; }
.overview-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  min-height: 13px;
}
.overview-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
.overview-subtitle {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.5;
}

/* ===== STATS HERO: clean analytics redesign ===== */
.stats-hero-head { margin-bottom: 36px; }
.stats-hero-head h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
.stats-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .stats-hero { grid-template-columns: repeat(2, 1fr); }
}
.kpi-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 24px 26px 22px;
  cursor: default;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
}
.kpi-card[onclick] { cursor: pointer; }
.kpi-card[onclick]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 15, 35, 0.06);
}
.kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.kpi-value {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-unit {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.kpi-trend {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kpi-trend .trend-arrow { font-weight: 700; font-size: 12px; }
.kpi-trend.up .trend-arrow,
.kpi-trend.up { color: #10b981; }
.kpi-trend.down .trend-arrow,
.kpi-trend.down { color: #e84545; }
.kpi-trend.flat { color: var(--text-muted); }
.kpi-trend.inverse.up { color: #e84545; }
.kpi-trend.inverse.down { color: #10b981; }

/* Shared card style used across the stats view (chart card, secondary, heatmap, etc.) */
.stats-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 18px 22px 18px;
}
.stats-chart-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 26px 28px 20px;
}
.stats-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.stats-card-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.stats-card-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.volume-chart {
  width: 100%;
  min-height: 200px;
  display: block;
}
.volume-chart svg { width: 100%; height: 200px; display: block; }

.stats-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .stats-secondary { grid-template-columns: 1fr; }
}
.stats-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  margin-top: 14px;
}
.mini-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.mini-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stats-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 1100px) {
  .stats-two-col { grid-template-columns: 1fr; }
}

/* Uniform vertical spacing between top-level stat sections.
 * MUST use the direct-child combinator (>) so the rule only applies to
 * sections that are direct children of .stats-view, not to individual cards
 * *inside* a grid like .stats-two-col > .stats-card — otherwise those
 * nested cards would also get a 32px top margin and end up offset from
 * their neighbours inside the same grid row. (The old rule .stats-card +
 * .stats-card caused exactly that bug.) */
.stats-view > .stats-hero,
.stats-view > .stats-chart-card,
.stats-view > .stats-secondary,
.stats-view > .stats-card,
.stats-view > .stats-two-col {
  margin-bottom: 32px;
}
.stats-view > *:last-child { margin-bottom: 0; }

/* Status strip (top): 4 editorial columns separated by vertical dividers */
.status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 36px 0;
  margin-bottom: 32px;
}
.status-col {
  padding: 0 40px;
  border-right: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: background 0.18s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.status-col:last-child { border-right: none; }
.status-col:hover { background: rgba(0,0,0,0.015); }
.status-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.status-value {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
  margin-bottom: 10px;
}
.status-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Main two-column layout */
.overview-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 1200px) {
  .overview-main { grid-template-columns: 1fr; }
}

/* Panel primitive */
.panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 32px 36px;
}
.panel.panel-wide { margin-bottom: 24px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.panel-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.panel-divider {
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 28px 0;
}

/* Activity panel */
.panel-activity { display: flex; flex-direction: column; }
.activity-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .activity-metrics { grid-template-columns: repeat(2, 1fr); }
}
.metric-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.metric-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}

/* Split bar (bot vs. team, positive vs. negative feedback) */
.activity-split .split-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.split-bar {
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.split-fill {
  height: 100%;
  background: var(--text);
  transition: width 0.6s cubic-bezier(.25,.8,.25,1);
  width: 0%;
}
.split-fill.good { background: var(--success); }
.split-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Quality panel */
.panel-quality { display: flex; flex-direction: column; }
.csat-display { margin-top: 4px; }
.csat-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.csat-value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.csat-max {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
}
.csat-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.feedback-section { margin-top: 14px; }

/* Detail strip (below main) */
.detail-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 32px 0;
  margin-bottom: 32px;
}
.detail-cell {
  padding: 0 36px;
  border-right: 1px solid rgba(0,0,0,0.06);
}
.detail-cell:last-of-type { border-right: none; }
.detail-cell .detail-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.detail-cell .detail-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--text);
}
.detail-cell .detail-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* Top lists two-col */
.overview-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 1000px) {
  .overview-lists { grid-template-columns: 1fr; }
}
.top-list { margin-top: 6px; }
.top-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
}
.top-row:last-child { border-bottom: none; }
.top-row-rank {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.top-row-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-row-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.list-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 28px 0;
  text-align: center;
}

/* Team table */
.team-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.team-table th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 0 0 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.team-table td {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
  color: var(--text);
}
.team-table tr:last-child td { border-bottom: none; }
.team-table th:not(:first-child),
.team-table td:not(:first-child) { text-align: right; }

/* ===== NAV SIDEBAR ===== */
.nav {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* ── Eingeklappte Leiste beim Drueberfahren einblenden ───────────────────────
   Nur mit echter Maus: auf Tastbildschirmen gibt es kein "Drueberfahren", dort
   bleibt der Klick-Umschalter der Weg.

   Die Leiste wird dabei BREITER, ohne dass die Spalte breiter wird. Sie legt
   sich also ueber den Inhalt, statt ihn zur Seite zu schieben. Nichts
   verrutscht, kein Textumbruch im Posteingang, keine springende Liste.

   transition-delay statt eines Zeitgebers in JavaScript: wer nur schnell
   vorbeifaehrt, loest gar nichts aus, weil die Animation erst nach 260ms
   beginnt und beim Verlassen sofort zurueckspringt. */
@media (hover: hover) and (pointer: fine) {
  .app.nav-collapsed .nav {
    position: relative;
    z-index: 60;
    width: 60px;
    transition: width 0.16s ease 0.26s, box-shadow 0.16s ease 0.26s;
  }
  .app.nav-collapsed .nav:hover {
    width: 232px;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.10);
  }
  /* Die eingeklappte Ansicht macht aus jedem Eintrag eine feste 38x38-Kachel.
     Das muss hier vollstaendig zurueckgenommen werden, sonst quetschen sich
     die Beschriftungen in die Kachel und brechen um oder ueberlappen. */
  .app.nav-collapsed .nav:hover .nav-item {
    width: auto;
    height: auto;
    min-height: 38px;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 10px;
  }
  .app.nav-collapsed .nav:hover .nav-item span {
    display: inline;
    white-space: nowrap;
  }
  .app.nav-collapsed .nav:hover .nav-section { align-items: stretch; padding: 4px 8px; }

  .app.nav-collapsed .nav:hover .nav-footer { align-items: stretch; padding: 8px 8px 10px; }
  .app.nav-collapsed .nav:hover .nav-footer-item {
    display: flex;
    align-items: center;
    /* linksbuendig wie die Eintraege oben: sonst sitzen die Symbole im Fuss
       36px weiter rechts als die in der Navigation darueber. */
    justify-content: flex-start;
    width: auto;
    height: auto;
    min-height: 38px;
    padding: 4px 12px;
    gap: 10px;
    place-items: initial;
  }
  .app.nav-collapsed .nav:hover .nav-footer-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    white-space: nowrap;
  }
  .app.nav-collapsed .nav:hover .nav-agent-info {
    display: block;
    white-space: nowrap;
  }
  /* Gruppen-Trennstriche werden beim Einblenden wieder zu Ueberschriften. */
  .app.nav-collapsed .nav:hover .nav-group {
    height: auto;
    width: auto;
    margin: 12px 0 4px;
    padding: 0 12px;
    text-indent: 0;
    overflow: visible;
    background: none;
  }
}

.nav-header {
  display: flex;
  align-items: center;
  gap: 10px;
  /* left padding is 22px on purpose: the nav-section has padding 0 10px and
   * each .nav-item has padding-left 12px — so the nav-item icons land at
   * exactly 22px from the sidebar edge. Matching the logo here makes the
   * whole left-rail optically flush. */
  padding: 20px 16px 16px 22px;
}

.nav-collapse-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.nav-collapse-btn:hover { color: var(--text); background: var(--bg); }
.app.nav-collapsed .nav-collapse-btn { display: none; }
/* In collapsed mode the logo IS the expand trigger — click it to open the
 * sidebar. This avoids having both a logo AND a chevron button that would
 * together overflow the 64px collapsed width. */
.app.nav-collapsed .nav-logo { cursor: pointer; }
.app.nav-collapsed .nav-logo:hover { transform: scale(1.05); }
.nav-logo { transition: transform 0.15s ease; }

.nav-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 5px;
  box-shadow: 0 1px 3px rgba(240,4,156,0.15);
}
.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav-title {
  color: var(--sidebar-active);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex: 1;
}

/* Gruppen-Überschriften in der Seitenleiste: ordnen die Navigation in
   "Arbeit / Inhalte & Kunden / System", ohne eine zweite Menü-Ebene zu
   erzeugen. Reine visuelle Struktur, kein Klickziel. */
.nav-group {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 15px 12px 5px;
  user-select: none;
  pointer-events: none;
}
.nav-section > .nav-group:first-child { padding-top: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.nav-item svg { flex-shrink: 0; }

.nav-item:hover {
  color: var(--sidebar-active);
  background: var(--bg);
}

.nav-item.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 600;
}

.nav-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 6px;
}
.nav-item .badge.muted {
  background: var(--border);
  color: var(--text-muted);
  font-weight: 500;
}

/* Standard "visually hidden" — entfernt ein Element aus der visuellen Ausgabe,
   ohne es via display:none zu verstecken. Wichtig für file-inputs, die per
   Label geklickt werden: display:none bricht in manchen Browsern die
   label→input-Click-Delegation. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.nav-footer {
  padding: 10px 8px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Einheitlicher Stil für alle klickbaren Footer-Items (System, Availability, Team).
   Ein kleines Icon links mit einem farbigen Status-Overlay, dann zweizeiliger Text
   (Label + Sub-Label) rechts. Im collapsed-Mode wird der Text ausgeblendet. */
.nav-footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--sidebar-text);
  position: relative;
}
.nav-footer-item:hover { background: var(--bg); }
.nav-footer-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-text);
  flex-shrink: 0;
}
.nav-footer-icon svg { display: block; }
.nav-footer-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.nav-footer-label {
  color: var(--sidebar-active);
  font-size: 12px;
  font-weight: 600;
}
.nav-footer-sub {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.nav-footer-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e84545;
  color: #ffffff;
  min-width: 16px;
  text-align: center;
}
.nav-footer-badge.warning { background: #f5a623; }

/* Status-Dot Overlay: kleiner farbiger Punkt unten-rechts am Icon */
.status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--sidebar-bg);
  transition: background 0.2s;
}
.status-dot.offline { background: var(--text-muted); }
.status-dot.warning { background: #f5a623; }
.status-dot.critical {
  background: #e84545;
  animation: statusDotPulse 1.6s ease-in-out infinite;
}
@keyframes statusDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 69, 69, 0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 69, 69, 0); }
}

/* Collapsed-Mode: nur Icons, kein Text */
.app.nav-collapsed .nav-footer { padding: 10px 6px; align-items: center; gap: 4px; }
.app.nav-collapsed .nav-footer-item {
  padding: 8px;
  justify-content: center;
  width: 44px;
}
.app.nav-collapsed .nav-footer-text,
.app.nav-collapsed .nav-footer-badge {
  display: none;
}

.nav-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.nav-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.nav-agent-info { min-width: 0; }

.nav-agent-name {
  color: var(--sidebar-active);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-logout-link {
  background: none;
  border: none;
  color: var(--sidebar-text);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.nav-logout-link:hover { color: var(--accent); }

/* Legacy .avail-dot / .health-dot Klassen hängen noch am HTML, werden aber
   jetzt von .status-dot gesteuert. Diese Regeln neutralisieren die alten
   Dimensionen, damit das neue Icon-basierte Layout greift. */
.avail-dot, .health-dot, .team-presence-dot { flex-shrink: 0; }

/* ===== MEIN TAG (Home / Landing) =====
   Persönliches Start-Dashboard: Begrüßung + 4 KPIs + "Jetzt dran"-Liste +
   Team-Puls + heute-Zusammenfassung. Design bewusst ruhig, ohne Charts,
   fokussiert auf das, was der Agent für den Tag braucht. */
.my-day-view {
  grid-column: 2 / -1;
  grid-row: 1;
  overflow-y: auto;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.my-day-bg-gradient {
  position: absolute;
  inset: 0 0 auto 0;
  height: 380px;
  background: linear-gradient(180deg, rgba(240, 4, 156, 0.06) 0%, rgba(240, 4, 156, 0.02) 45%, rgba(240, 4, 156, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.my-day-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 68px 64px 80px;
}
@media (max-width: 900px) {
  .my-day-inner { padding: 36px 24px 56px; }
  .my-day-bg-gradient { height: 260px; }
}

/* Header: Datum + Begrüßung + Untertitel */
.my-day-header {
  margin-bottom: 44px;
  animation: myDayFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.my-day-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.my-day-greeting {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 8px;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a2540 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.my-day-sub {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
}
@media (max-width: 900px) {
  .my-day-greeting { font-size: 30px; }
  .my-day-sub { font-size: 14px; }
  .my-day-header { margin-bottom: 32px; }
}
@keyframes myDayFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* KPI-Kacheln */
.my-day-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
  animation: myDayFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
@media (max-width: 900px) {
  .my-day-kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 36px; }
}
.my-day-kpi {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  cursor: default;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 1px 2px rgba(15, 15, 25, 0.03);
}
a.my-day-kpi { cursor: pointer; }
a.my-day-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 15, 25, 0.08), 0 2px 4px rgba(15, 15, 25, 0.04);
  border-color: rgba(240, 4, 156, 0.2);
}
.my-day-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--text-secondary);
}
.kpi-mine .my-day-kpi-icon { background: rgba(240, 4, 156, 0.08); color: var(--accent); }
.kpi-new .my-day-kpi-icon { background: rgba(56, 139, 253, 0.08); color: #388bfd; }
.kpi-escalated .my-day-kpi-icon { background: rgba(232, 69, 69, 0.08); color: #e84545; }
.kpi-done .my-day-kpi-icon { background: rgba(48, 209, 88, 0.1); color: #30a04a; }
.my-day-kpi-main {
  flex: 1;
  min-width: 0;
}
.my-day-kpi-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.my-day-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}
.my-day-kpi-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Sektionen: Jetzt dran / Team jetzt / Heute im Team */
.my-day-section {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(15, 15, 25, 0.03);
  animation: myDayFadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.my-day-section + .my-day-section { margin-top: 20px; }
.my-day-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.my-day-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}
.my-day-section-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* "Jetzt dran" Liste */
.my-day-focus-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.my-day-list-skeleton {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.my-day-focus-item {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.my-day-focus-item:hover {
  background: var(--bg);
  border-color: var(--border-light);
}
.my-day-focus-bar {
  width: 4px;
  height: 36px;
  border-radius: 4px;
  background: var(--border);
}
.my-day-focus-bar.priority-urgent { background: #e84545; }
.my-day-focus-bar.priority-high { background: #f5a623; }
.my-day-focus-bar.priority-normal { background: #c8c8d0; }
.my-day-focus-bar.priority-low { background: #e6e6ec; }
.my-day-focus-main { min-width: 0; }
.my-day-focus-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.my-day-focus-title .focus-priority-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.focus-priority-tag.urgent { background: #e84545; color: #fff; }
.focus-priority-tag.high { background: #f5a623; color: #fff; }
.my-day-focus-title .focus-new-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.my-day-focus-preview {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.my-day-focus-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.my-day-focus-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 8px;
}
.my-day-focus-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(48, 209, 88, 0.12);
  color: #30a04a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.my-day-focus-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.my-day-focus-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* Split: Team + Heute */
.my-day-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
  animation: myDayFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.my-day-split .my-day-section { margin-top: 0; }
@media (max-width: 900px) {
  .my-day-split { grid-template-columns: 1fr; gap: 16px; }
}

/* Team-Puls: kleine Avatar-Liste */
.my-day-team-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my-day-team-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}
.my-day-team-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.my-day-team-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #30d158;
  border: 2px solid #fff;
}
.my-day-team-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.my-day-team-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: var(--bg);
  border-radius: 4px;
}
.my-day-team-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Heute-Grid: 4 kleine Zahlen */
.my-day-today-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.my-day-today-stat {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 16px;
}
.my-day-today-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.my-day-today-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Footer: Primär-Button "Alle Tickets öffnen" */
.my-day-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  animation: myDayFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.my-day-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 4px 14px rgba(240, 4, 156, 0.22);
}
.my-day-primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(240, 4, 156, 0.32);
}
.my-day-primary-btn svg { stroke: #fff; }

/* ===== BÜRO-STANDORTE (SETTINGS → ÖFFNUNGSZEITEN) ===== */
.office-locations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.office-location-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.office-location-item:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.office-location-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}
.office-location-item.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.office-location-code {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: auto;
  padding: 2px 6px;
  background: var(--bg);
  border-radius: 4px;
}
.office-location-item.selected .office-location-code {
  background: #fff;
  color: var(--accent);
}

/* Info-Box: nächster Feiertag (Büro geschlossen) */
#nextHolidayHint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  font-size: 12.5px;
  color: #7a5d00;
}
#nextHolidayHint:empty { display: none; }

/* ===== STATS-TOGGLE: "Nach Öffnungszeiten rechnen" ===== */
.stats-toggle-row {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.stats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-secondary);
  background: #fff;
  transition: all 0.15s;
}
.stats-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.stats-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}
.stats-toggle input[type="checkbox"]:checked ~ .stats-toggle-label {
  color: var(--accent);
  font-weight: 600;
}
.stats-toggle-label { font-weight: 500; }

/* ===== SURVEY QUESTION EDITOR ===== */
.survey-q-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.survey-q-card {
  padding: 16px 18px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.survey-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.survey-q-num {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.survey-q-card input[type="text"],
.survey-q-card textarea,
.survey-q-card select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}
.survey-q-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.survey-q-row label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.survey-q-row input[type="text"] { flex: 1; }
.survey-q-required {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.survey-q-required input[type="checkbox"] { accent-color: var(--pink, #ff009d); }
.survey-q-options-label {
  font-size: 11.5px;
  color: var(--text-muted);
}
.survey-q-remove {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.survey-q-remove:hover { background: #fef2f2; color: #e84545; border-color: #fecaca; }
.survey-q-showif {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}
.survey-q-showif select { background: #fff; }
.survey-q-showif-label {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: -4px;
}

/* ===== SURVEYS ===== */
.survey-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Untereinander statt nebeneinander: Titel und fuenf Knoepfe in einer Zeile
   konkurrieren um die Breite, und die Knoepfe gewinnen immer. Der Titel wurde
   dadurch auf wenige Zeichen pro Zeile gequetscht und die Adresse auf "ht…".
   Zwei Zeilen sind bei jeder Fensterbreite stabil. */
.survey-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
}
.survey-item-main { min-width: 0; }
.survey-item-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.survey-inactive {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.survey-item-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  align-items: center;
}
.survey-type-pill {
  background: color-mix(in srgb, var(--pink, #ff009d) 10%, var(--card, #fff));
  color: var(--pink, #ff009d);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.survey-item-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 0;
}
.survey-item-url code {
  background: var(--bg);
  padding: 4px 9px;
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  /* Nimmt den vorhandenen Platz, statt auf feste 340px zu bestehen: bei
     schmalem Fenster blieb davon frueher nur "ht…" uebrig. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-copy {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--text-muted);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.btn-copy:hover { border-color: var(--text-muted); color: var(--text); }
.btn-icon {
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.btn-icon:hover { background: var(--bg); border-color: var(--text-muted); }
/* Wrapping, not flex-shrink:0: with five buttons the row pushed the whole
   list off-screen on a phone instead of breaking into a second line. */
.survey-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.survey-item-actions .btn { font-size: 12px; padding: 6px 10px; }
.btn.btn-danger {
  color: #e84545;
  border-color: #fecaca;
  background: #fef2f2;
}
.btn.btn-danger:hover { background: #fee2e2; }

.survey-dist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 8px;
}
/* Key figures for a number question (sum, average, median, min, max).
   Wraps on narrow screens instead of forcing the modal to scroll sideways. */
.survey-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.survey-stats-row strong {
  color: var(--text);
  font-size: 14px;
  margin-right: 3px;
}
.dist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.dist-label {
  min-width: 60px;
  color: var(--text);
  font-weight: 500;
}
.dist-bar-wrap {
  flex: 1;
  height: 20px;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
}
.dist-bar {
  height: 100%;
  background: var(--pink, #ff009d);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.dist-count {
  min-width: 40px;
  text-align: right;
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.survey-recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.survey-recent-item {
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.survey-recent-text {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  line-height: 1.5;
}
.survey-recent-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ===== GDPR SEARCH RESULTS ===== */
.gdpr-results {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gdpr-result-card {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gdpr-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.gdpr-result-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.gdpr-result-email {
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: monospace;
}
.gdpr-result-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.gdpr-result-counts strong { color: var(--text); }
.gdpr-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.gdpr-result-none {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg);
  border-radius: 12px;
}

/* ===== INCIDENT DRAWER ===== */
.incident-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.incident-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 20, 0.35);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: auto;
}
.incident-drawer.open .incident-drawer-backdrop { opacity: 1; }
.incident-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: #ffffff;
  box-shadow: -8px 0 32px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}
.incident-drawer.open .incident-drawer-panel { transform: translateX(0); }
.incident-drawer-header {
  padding: 22px 24px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.incident-drawer-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
}
.incident-drawer-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.incident-drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.incident-drawer-close:hover { background: var(--bg); color: var(--text); }

.incident-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 24px;
}
.incident-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.incident-item {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.15s;
}
.incident-item:hover { background: var(--bg); }
.incident-sev {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5a623;
  margin-top: 5px;
  flex-shrink: 0;
}
.incident-sev.error, .incident-sev.critical { background: #e84545; }
.incident-sev.info { background: #3b82f6; }
.incident-body { flex: 1; min-width: 0; }
.incident-type-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 2px;
}
.incident-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.incident-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.incident-message {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toast notification for live incident alerts */
.incident-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-left: 4px solid #e84545;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.16);
  padding: 14px 18px 14px 16px;
  max-width: 380px;
  z-index: 1300;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: incidentToastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.incident-toast.warning { border-left-color: #f5a623; }
@keyframes incidentToastIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.incident-toast-icon {
  font-size: 18px;
  line-height: 1.2;
}
.incident-toast-body { flex: 1; min-width: 0; }
.incident-toast-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.incident-toast-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== CONVERSATION LIST ===== */
.conv-list {
  border-right: 1px solid var(--ix-line);
  background: var(--ix-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conv-list-header {
  padding: 14px 16px 10px;
  flex-shrink: 0;
}

.conv-list-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.conv-list-header h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
}

.conv-select-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.conv-select-toggle:hover {
  background: var(--bg);
  color: var(--text);
}
.conv-select-toggle.active {
  background: var(--accent);
  color: white;
}

.conv-search-wrap { position: relative; margin-bottom: 12px; }
.conv-search-wrap input { width: 100%; padding: 10px 14px 10px 36px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); font-size: 16px; font-family: inherit; outline: none; transition: all 0.2s; }
.conv-search-wrap input:focus { background: white; border-color: var(--border); box-shadow: 0 0 0 3px rgba(240,4,156,0.08); }
.conv-search-wrap input::placeholder { color: var(--text-muted); }
.conv-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

.tag-filter { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--accent-light); border-radius: 8px; margin-top: 8px; font-size: 12px; }
.tag-filter-label { color: var(--text-secondary); font-weight: 500; }
.tag-filter-value { color: var(--accent); font-weight: 600; }
.tag-filter-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.tag-filter-clear:hover { color: var(--text); }

.conv-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.conv-tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--accent-light); color: var(--accent); font-weight: 600; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 3px; }
.conv-tag:hover { background: rgba(240,4,156,0.15); }
.conv-tag .tag-remove { font-size: 10px; opacity: 0; transition: opacity 0.15s; }
.conv-tag:hover .tag-remove { opacity: 1; }

.tag-select {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px dashed rgba(0,0,0,0.1);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.tag-select:hover { border-color: var(--accent); color: var(--accent); }
.tag-select:focus { outline: none; border-color: var(--accent); }

/* Tag manager in settings */
.tag-manager-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.tag-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid rgba(0,0,0,0.06);
  transition: transform 0.15s;
}
.tag-color-dot:hover { transform: scale(1.2); }

.tag-manager-item input {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  transition: all 0.15s;
}
.tag-manager-item input:hover { background: var(--bg); }
.tag-manager-item input:focus { background: var(--bg); border-color: var(--accent); outline: none; }

.tag-manager-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s;
  opacity: 0.4;
}
.tag-manager-delete:hover { opacity: 1; color: var(--danger); }

/* Color picker popover */
.tag-color-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  position: absolute;
  z-index: 100;
}

.tag-color-option {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.tag-color-option:hover { transform: scale(1.2); border-color: rgba(0,0,0,0.2); }

/* Bulk actions */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--accent-light);
  border-radius: 10px;
  margin-top: 10px;
  animation: bulkBarSlide 0.2s ease;
}

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

.bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  flex: 1;
  white-space: nowrap;
}

.bulk-bar-actions {
  display: flex;
  gap: 4px;
  /* Auch die INNERE Aktionsreihe bricht um (Welle-2-Blocker P17): sonst
     laufen "Tag" und der Loeschen-Knopf bei 375px rechts aus dem Bild. */
  flex-wrap: wrap;
  row-gap: 8px;
}

.bulk-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: white;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.bulk-action-btn:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(240,4,156,0.25);
}
/* Danger-Variante: Löschen-Button. Ruhe-Zustand schon leicht rötlich,
   damit klar ist dass es eine destruktive Aktion ist. */
.bulk-action-btn.bulk-action-danger {
  color: #c52828;
}
.bulk-action-btn.bulk-action-danger:hover {
  background: #e84545;
  color: #fff;
  box-shadow: 0 2px 6px rgba(232,69,69,0.35);
}

.bulk-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.bulk-clear:hover { color: var(--text); background: rgba(255,255,255,0.5); }

/* Checkbox in conversation items — only visible in select mode */
.conv-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.15s;
  background: var(--card);
  display: none;
}
.conv-list.select-mode .conv-checkbox { display: block; }

.conv-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5 2 6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.status-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border-radius: 10px;
  padding: 3px;
}

.status-tab {
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.status-tab:hover { color: var(--text); }
.status-tab.active {
  background: white;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0px 1px rgba(0,0,0,0.08);
}

.conv-items {
  flex: 1;
  overflow-y: auto;
}

/* ═══ Intercom-style conv-item (Phase 2 migration) ═══ */
.conv-item {
  padding: 12px 14px;
  margin: 0 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s var(--ix-ease);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-bottom: none;
  position: relative;
}
.conv-item:first-child { margin-top: 6px; }
.conv-item:hover { background: rgba(0, 0, 0, 0.025); }
.conv-item.active {
  background: var(--ix-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.08);
  border-left: none;
}
.conv-item.unread .conv-item-name { font-weight: 700; color: var(--ix-ink); }

/* Ungelesen deutlich markieren, damit man sofort sieht, worauf sich der
   Posteingang-Zaehler bezieht: linker Pink-Balken + leichte Toenung + ein
   Punkt oben rechts. */
.conv-item.unread:not(.active) { background: color-mix(in srgb, var(--pink, #ff009d) 6%, transparent); }
.conv-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pink, #ff009d);
}
.conv-item.unread .conv-item-time::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--pink, #ff009d);
  vertical-align: middle;
}

/* Hide the old unread-dot (no longer rendered anyway) */
.conv-item .unread-dot { display: none; }

/* ═══ Intercom-style pastel avatars ═══ */
.ix-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  text-transform: uppercase;
  font-family: 'General Sans', -apple-system, sans-serif;
}
.ix-avatar.av-violet  { background: #dcd0f5; color: #4a1f9c; }
.ix-avatar.av-emerald { background: #c7e8cf; color: #17693a; }
.ix-avatar.av-amber   { background: #f4d8a8; color: #6e4410; }
.ix-avatar.av-sky     { background: #c9ddf3; color: #1d4e8a; }
.ix-avatar.av-rose    { background: #f3cbcf; color: #851b2e; }
.ix-avatar.av-teal    { background: #b8e0d6; color: #0b5d4c; }
.ix-avatar.av-indigo  { background: #cfd0f2; color: #2a309c; }
.ix-avatar.av-pink    { background: #f4c8dd; color: #881849; }
.ix-avatar.av-peach   { background: #f9d6b3; color: #7d3a0d; }
.ix-avatar.av-lemon   { background: #f2e4a1; color: #605010; }
.ix-avatar.av-ink     { background: #e5e5e5; color: #262626; }

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

.conv-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.conv-item-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ix-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.conv-item-assigned {
  font-size: 11px;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}

.conv-item-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.conv-item-preview {
  font-size: 12px;
  color: var(--ix-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  line-height: 1.45;
}

.conv-item-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.channel-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.channel-badge.escalated {
  background: #fff0f0;
  color: var(--danger);
  font-weight: 600;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
  gap: 12px;
}

.empty-state svg { opacity: 0.2; }
.empty-state p { font-size: 14px; line-height: 1.6; }

/* ===== CONVERSATION DETAIL ===== */
.conv-detail-wrapper {
  display: flex;
  overflow: hidden;
}

.conv-detail {
  display: flex;
  flex-direction: column;
  background: var(--ix-ivory);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.conv-detail-header {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ix-line);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.conv-detail-header .conv-name {
  font-weight: 700;
  font-size: 16px;
  flex: 1;
  letter-spacing: -0.02em;
  color: var(--ix-ink);
}

.conv-detail-header select {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  /* background-COLOR, nicht Shorthand: das Shorthand loeschte das Caret
     des Prioritaets-Dropdowns (Welle-2-Nachzieher zu P27). */
  background-color: white;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.conv-detail-header select:focus { border-color: var(--accent); outline: none; }

.priority-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* background-COLOR statt Shorthand: das Shorthand setzte background-image
   auf none und loeschte damit das Caret des Prioritaets-Dropdowns
   (Welle-2-Fund P27, Ursache von Steve bestaetigt). */
.priority-badge.low { background-color: var(--bg); color: var(--text-secondary); opacity: 0.75; }
.priority-badge.normal { background-color: var(--bg); color: var(--text-secondary); }
.priority-badge.high { background-color: #fff3e0; color: #e65100; }
.priority-badge.urgent { background-color: #fff0f0; color: var(--danger); }

/* ═══ Intercom-style messages (Phase 3 migration) ═══ */
.conv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 32px 44px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.msg {
  display: flex;
  gap: 12px;
  max-width: 640px;
  animation: msg-in 0.25s ease;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Contact on the LEFT (like an email thread / Intercom).
   Agent + Bot on the RIGHT (we are the ones viewing/replying). */
.msg.contact { align-self: flex-start; flex-direction: row; }
.msg.agent, .msg.bot { align-self: flex-end; flex-direction: row-reverse; }

.msg .msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  flex-shrink: 0;
  margin-top: 2px;
}
/* .msg-avatar already gets .ix-avatar + .av-* pastel class from renderMessages,
   which applies the right pastel palette. No per-sender override needed. */

.msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg.agent .msg-body, .msg.bot .msg-body { align-items: flex-end; }

.msg .msg-content {
  padding: 14px 18px 15px;
  border-radius: 18px;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  color: var(--ix-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.msg.contact .msg-content {
  background: var(--ix-white);
}

.msg.bot .msg-content {
  background: #fcf5f9;
}

.msg.agent .msg-content {
  background: #fcf5f9;
}

.msg.internal-note .msg-content {
  background: #fffbe6 !important;
  color: var(--text) !important;
  border: 1px dashed var(--warning) !important;
}

.msg .msg-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.msg-read-status {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  transition: color 0.25s ease;
}
.msg-read-status.sent { color: var(--text-muted); opacity: 0.55; }
.msg-read-status.read { color: #1e88e5; opacity: 1; }

.msg .ai-badge {
  background: #f0e6ff;
  color: #7c3aed;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--text-muted);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* System messages (status changes, tags, etc.) */
.msg-system {
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.msg-system span:first-child {
  background: rgba(0,0,0,0.04);
  padding: 4px 12px;
  border-radius: 10px;
  font-weight: 500;
}

.msg-system-time {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
}

.msg .note-badge {
  background: #fff3e0;
  color: #e65100;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ═══ Reply box — Intercom-style floating card ═══ */
.reply-box {
  border-top: none;
  padding: 0 24px 24px;
  flex-shrink: 0;
  background: transparent;
}

.reply-box textarea {
  width: 100%;
  border: 1px solid var(--ix-line-2);
  border-radius: 14px;
  padding: 14px 92px 14px 18px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 52px;
  max-height: 160px;
  line-height: 1.55;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  background: var(--ix-white);
  color: var(--ix-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}

.reply-box textarea::placeholder { color: var(--ix-ink-5); }

.reply-box textarea:focus {
  border-color: rgba(237, 0, 153, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(237, 0, 153, 0.1);
}

.reply-input-wrap { position: relative; }

/* Toolbar inside textarea (attach + send) */
.reply-input-toolbar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reply-toolbar-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.reply-toolbar-btn:hover { background: var(--bg); color: var(--text); }

.reply-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(240,4,156,0.25);
}
.reply-send-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
.reply-send-btn:active { transform: scale(0.95); }

/* Secondary actions row */
.reply-actions {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  align-items: center;
  padding: 0 4px;
}

.reply-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s;
  white-space: nowrap;
}
.reply-action-btn:hover { background: var(--bg); color: var(--text); }
.reply-action-btn:active { transform: scale(0.97); }
.reply-action-btn svg { opacity: 0.6; }
.reply-action-btn:hover svg { opacity: 1; }

/* Note mode toggle */
.reply-note-toggle.active {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}
.reply-note-toggle.active svg { opacity: 1; stroke: #92400e; }

/* Note mode — yellow textarea */
.reply-box.note-mode textarea {
  background: #fefce8;
  border-color: #f59e0b;
}
.reply-box.note-mode textarea:focus {
  background: #fef9c3;
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.reply-box.note-mode .reply-send-btn {
  background: #f59e0b;
  box-shadow: 0 2px 6px rgba(245,158,11,0.3);
}
.reply-box.note-mode .reply-send-btn:hover { background: #d97706; }

.reply-action-done {
  color: var(--success);
}
.reply-action-done:hover {
  background: rgba(34,197,94,0.08);
  color: #16a34a;
}

.reply-actions-spacer { flex: 1; }

/* ===== AGENT PRESENCE ===== */

/* Presence dots in conversation list */
.conv-presence {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.presence-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #94a3b8;
  position: relative;
  flex-shrink: 0;
}

.presence-dot.viewing {
  background: #3b82f6;
  box-shadow: 0 0 0 2px white, 0 0 0 3.5px rgba(59,130,246,0.3);
}

.presence-dot.typing {
  background: #8b5cf6;
  box-shadow: 0 0 0 2px white, 0 0 0 3.5px rgba(139,92,246,0.3);
  animation: presence-pulse 1.5s ease-in-out infinite;
}

@keyframes presence-pulse {
  0%, 100% { box-shadow: 0 0 0 2px white, 0 0 0 3.5px rgba(139,92,246,0.3); }
  50% { box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(139,92,246,0.15); }
}

/* Presence bar in conversation header */
.conv-presence-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06));
  border-bottom: 1px solid rgba(59,130,246,0.1);
  font-size: 12px;
  color: #475569;
}

.conv-presence-bar .presence-dot {
  width: 20px;
  height: 20px;
  font-size: 8px;
}

.presence-label {
  font-weight: 500;
  color: #64748b;
}

/* ===== ROLE-BASED UI ===== */

/* Role badge next to agent name in nav */
.role-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
}
.role-badge.admin {
  background: rgba(240,4,156,0.1);
  color: var(--accent);
}
.role-badge.viewer {
  background: rgba(148,163,184,0.15);
  color: #64748b;
}

/* Agent role: hide admin-only elements */
.app.role-agent .admin-only { display: none !important; }

/* Viewer role: hide admin-only + disable reply + hide action buttons */
.app.role-viewer .admin-only { display: none !important; }
.app.role-viewer .reply-box { display: none !important; }
.app.role-viewer .conv-detail-header select[id="statusSelect"],
.app.role-viewer .conv-detail-header select[id="assignSelect"],
.app.role-viewer .conv-detail-header select[id="detailPriority"],
.app.role-viewer .conv-detail-header .snooze-wrap { display: none !important; }

/* ===== PERMISSIONS TABLE ===== */
.perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.perm-table th {
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border);
  color: var(--text);
}
.perm-table th:first-child { text-align: left; }
.perm-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.perm-label { font-weight: 500; color: var(--text); }
.perm-cell { text-align: center; }
.perm-group-row td {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 20px 16px 6px;
  border-bottom: none;
  background: none;
}

/* Toggle switch */
.perm-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.perm-toggle input { opacity: 0; width: 0; height: 0; }
.perm-slider {
  position: absolute;
  inset: 0;
  background: #e2e8f0;
  border-radius: 20px;
  transition: all 0.2s;
}
.perm-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.perm-toggle input:checked + .perm-slider { background: var(--accent); }
.perm-toggle input:checked + .perm-slider::before { transform: translateX(16px); }

.mention-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 180px;
  overflow-y: auto;
  z-index: 100;
  margin-bottom: 4px;
}

.mention-dropdown.visible { display: block; }

.mention-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mention-item:hover,
.mention-item.active {
  background: var(--bg);
}

.mention-item .mention-name { font-weight: 500; color: var(--text); }
.mention-item .mention-email { color: var(--text-muted); font-size: 12px; }

.mention-tag {
  background: rgba(240,4,156,0.1);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 500;
}

/* .reply-actions styles moved to reply-box section above */

.btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  transition: all 0.2s ease;
  font-family: inherit;
}

.btn:hover { background: var(--bg); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(240,4,156,0.18), 0 1px 3px rgba(240,4,156,0.10);
}

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }

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

.btn-danger {
  background: white;
  color: var(--danger);
  border-color: var(--danger);
}

.btn-danger:hover { background: #fff0f0; }
.btn-danger:active { transform: scale(0.98); }
.btn-success:active { transform: scale(0.98); }

/* legacy spacer — replaced by .reply-actions-spacer */

/* Live Typing Preview (Kunde tippt …) */
.typing-preview {
  margin: 0 24px;
  padding: 8px 14px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 10px 10px 0 0;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 500;
  border-bottom: 1px solid rgba(240,4,156,0.15);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Snooze Button + Menu + Banner */
.snooze-wrap { position: relative; }
.snooze-btn {
  font-size: 16px;
  padding: 6px 10px;
  cursor: pointer;
}
.snooze-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  flex-direction: column;
  min-width: 180px;
  z-index: 100;
}
.snooze-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.snooze-menu button:hover { background: var(--bg); }
.snooze-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.snooze-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fef9c3;
  border-bottom: 1px solid #fde68a;
  color: #854d0e;
  font-size: 13px;
}
.snooze-banner button {
  margin-left: auto;
  background: #fff;
  border: 1px solid #fde68a;
  color: #854d0e;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.snooze-banner button:hover { background: #fef3c7; }

/* Uebernahme-Sperre unten im Antwortfeld: prominenter "Ich uebernehme"-Knopf.
   Solange aktiv, sind die normalen Antwort-Elemente ausgeblendet (.locked). */
.reply-box.locked .reply-suggestions,
.reply-box.locked .reply-attachments,
.reply-box.locked .reply-input-wrap,
.reply-box.locked .reply-actions {
  display: none !important;
}
.takeover-gate {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 6px 2px 2px;
}
.takeover-gate-text {
  text-align: center;
  font-size: 13px;
  color: var(--ix-ink-2, #555);
}
.takeover-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: #0a84ff;
  border: none;
  color: #fff;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(10,132,255,0.30);
  animation: takeoverPulse 1.9s ease-in-out infinite;
  transition: transform 0.15s ease, background 0.15s ease;
}
.takeover-gate-btn:hover { background: #0a74e0; transform: translateY(-1px); }
.takeover-gate-btn:active { transform: translateY(0); }
@keyframes takeoverPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(10,132,255,0.30); }
  50%      { box-shadow: 0 6px 24px rgba(10,132,255,0.55); }
}

/* Wartende Tickets (Kund:in hat gedrueckt und wartet) pulsieren in der Liste,
   solange sie nicht geoeffnet sind. */
.conv-item.waiting-human:not(.active) {
  animation: convWaitPulse 1.8s ease-in-out infinite;
}
@keyframes convWaitPulse {
  0%, 100% { background-color: rgba(10, 132, 255, 0.05); }
  50%      { background-color: rgba(10, 132, 255, 0.16); }
}
.conv-item.waiting-human .channel-badge.escalated {
  animation: convWaitBadge 1.8s ease-in-out infinite;
}
@keyframes convWaitBadge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.14); }
}
.channel-badge.snoozed {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde68a;
}

/* Saved Replies Editor */
.saved-reply-row {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
}
.saved-reply-row .sr-head {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.saved-reply-row .sr-title {
  flex: 2;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
}
.saved-reply-row .sr-shortcut-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  max-width: 140px;
}
.saved-reply-row .sr-content {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  margin-bottom: 8px;
}
.saved-reply-row .sr-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sr-shortcut {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 6px;
}
.empty-hint {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Senden-Split-Button (Senden | & Erledigt) */
.send-split { display: inline-flex; }
.send-split .send-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 2px 8px rgba(240,4,156,0.18), 0 1px 3px rgba(240,4,156,0.10);
}
.send-split .send-close {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(255,255,255,0.35);
  padding-left: 12px;
  padding-right: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(240,4,156,0.18), 0 1px 3px rgba(240,4,156,0.10);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1a1a1e;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  animation: toast-in 0.3s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
  letter-spacing: -0.1px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== CONTACT SIDEBAR ===== */
/* ═══ Contact sidebar — Intercom-style (Phase 4 migration) ═══ */
.contact-sidebar {
  width: 296px;
  border-left: 1px solid var(--ix-line);
  background: var(--ix-white);
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ix-line);
}
.sidebar-section:last-child { border-bottom: none; }

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #dcd0f5;
  color: #4a1f9c;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 auto 10px;
  box-shadow: none;
  font-family: 'General Sans', -apple-system, sans-serif;
}

.contact-main-name {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ix-ink);
}

.contact-main-email {
  text-align: center;
  font-size: 11.5px;
  color: var(--ix-ink-4);
  margin-top: 3px;
  word-break: break-all;
  font-weight: 500;
}

.sidebar-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ix-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.sidebar-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 9px;
  gap: 10px;
  color: var(--ix-ink);
}
.sidebar-row:last-child { margin-bottom: 0; }

/* AI Summary section */
.ai-summary-section .sidebar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-summary-refresh {
  background: transparent;
  border: 1px solid var(--border, #e5e5e5);
  color: var(--text-muted);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ai-summary-refresh:hover {
  background: var(--bg-hover, #f5f5f5);
  color: var(--text);
}
.ai-summary-body {
  font-size: 11.5px;
  line-height: 1.5;
}
.ai-summary-text {
  color: var(--text);
  background: linear-gradient(135deg, rgba(255, 0, 157, 0.04), rgba(255, 0, 157, 0.08));
  border-left: 3px solid #ff009d;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: pre-wrap;
  font-size: 11.5px;
}
.ai-summary-loading {
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}
.btn-ai-summary {
  width: 100%;
  background: linear-gradient(135deg, #ff009d, #c3007a);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.15s;
}
.btn-ai-summary:hover {
  opacity: 0.9;
}

/* Reply Suggestions (C2) */
.reply-suggestions {
  background: #fff;
  border: 1px solid #f0d4e6;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(255, 0, 157, 0.06);
}
.reply-suggestions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #ff009d;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reply-suggestions-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 6px;
  line-height: 1;
  border-radius: 4px;
}
.reply-suggestions-close:hover {
  background: var(--bg-hover, #f5f5f5);
  color: var(--text);
}
.reply-suggestion-card {
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255, 0, 157, 0.03), rgba(255, 0, 157, 0.06));
  border: 1px solid rgba(255, 0, 157, 0.15);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.reply-suggestion-card:hover {
  background: linear-gradient(135deg, rgba(255, 0, 157, 0.08), rgba(255, 0, 157, 0.14));
  border-color: rgba(255, 0, 157, 0.35);
  transform: translateY(-1px);
}
.reply-suggestion-card:last-child {
  margin-bottom: 0;
}
.reply-suggestion-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.reply-suggestions-loading,
.reply-suggestions-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 0;
  text-align: center;
}
.btn-suggest {
  font-size: 12px;
}
.btn-suggest:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Sentiment Badges (C4) */
.sentiment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 4px;
  cursor: help;
}
.sentiment-positive   { background: rgba(34, 197, 94, 0.12); }
.sentiment-neutral    { background: rgba(148, 163, 184, 0.12); }
.sentiment-negative   { background: rgba(249, 115, 22, 0.14); }
.sentiment-frustrated {
  background: rgba(239, 68, 68, 0.18);
  animation: sentiment-pulse 2s ease-in-out infinite;
}
@keyframes sentiment-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* Conversation-level sentiment badge (in header) */
.sentiment-badge-conv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: help;
  flex-shrink: 0;
}

/* Tag Suggestion Pill (C3) */
.tag-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: linear-gradient(135deg, rgba(255, 0, 157, 0.08), rgba(255, 0, 157, 0.14));
  border: 1px dashed rgba(255, 0, 157, 0.45);
  border-radius: 16px;
  font-size: 12px;
  color: #c3007a;
  margin-left: 4px;
  animation: tag-suggestion-fade-in 0.3s ease-out;
}
@keyframes tag-suggestion-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tag-suggestion-icon {
  font-size: 13px;
}
.tag-suggestion-label {
  color: var(--text-muted);
  font-size: 11px;
}
.tag-suggestion-name {
  font-weight: 600;
}
.tag-suggestion-accept,
.tag-suggestion-reject {
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform 0.1s;
}
.tag-suggestion-accept {
  background: #22c55e;
  color: #fff;
}
.tag-suggestion-reject {
  background: rgba(0,0,0,0.08);
  color: var(--text-muted);
}
.tag-suggestion-accept:hover,
.tag-suggestion-reject:hover {
  transform: scale(1.1);
}
.threshold-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.threshold-row input[type="range"] {
  flex: 1;
  accent-color: #ff009d;
}
.threshold-val {
  font-weight: 600;
  color: #ff009d;
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sidebar-key { color: var(--text-secondary); font-size: 11px; }
.sidebar-val { color: var(--text); font-weight: 500; font-size: 11px; }

.sidebar-convs { display: flex; flex-direction: column; gap: 6px; }

.sidebar-conv-item {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-conv-item:hover { background: #e8e8ed; }

.sidebar-conv-item .sci-preview {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.sidebar-conv-item .sci-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-conv-item .sci-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.sci-status.open { background: var(--accent-light); color: var(--accent); }
.sci-status.done { background: #e8faf0; color: #1a8a4a; }
.sci-status.in_progress { background: #fff3e0; color: #e65100; }

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

/* ===== Phase D: Visitor Profile + Pages + Stripe ===== */
.sidebar-pill {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.sidebar-sublabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 12px 0 6px 0;
}
.visitor-pages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.visitor-page-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 10.5px;
  gap: 6px;
}
.visitor-page-item .vpi-url {
  color: var(--text);
  font-family: 'SF Mono', Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.visitor-page-item .vpi-duration {
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.stripe-row {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.stripe-row-title {
  color: var(--text);
  font-weight: 600;
}
.stripe-row-title a { color: #635bff; text-decoration: none; }
.stripe-row-title a:hover { text-decoration: underline; }
.stripe-row-meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}
.stripe-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.stripe-badge.stripe-active { background: #e8faf0; color: #1a8a4a; }
.stripe-badge.stripe-inactive { background: var(--bg); color: var(--text-muted); }
.stripe-badge.stripe-warn { background: #fff3e0; color: #e65100; }

.status-banner {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.status-banner.status-ok { background: #e8faf0; color: #1a8a4a; }
.status-banner.status-warn { background: #fff3e0; color: #e65100; }
.status-banner.status-error { background: #ffe8e8; color: #c33; }

/* ===== Phase E: Proactive Messages list ===== */
.proactive-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 8px;
  gap: 12px;
}
.proactive-row-main { flex: 1; min-width: 0; }
.proactive-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.proactive-trigger {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.proactive-message-preview {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proactive-stats {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.proactive-row-actions { display: flex; gap: 4px; }
.btn-icon {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.btn-icon:hover { background: #fff; border-color: var(--border); }
.badge-inactive {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-left: 6px;
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}
.setting-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ===== Phase F: Analytics ===== */
.heatmap-container { padding: 8px; }
.heatmap-grid {
  display: grid;
  grid-template-columns: 32px repeat(24, 1fr);
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
}
.heatmap-corner { }
.heatmap-hour-label {
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}
.heatmap-day-label {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  min-height: 18px;
  cursor: default;
  transition: transform 0.1s;
}
.heatmap-cell:hover { transform: scale(1.2); z-index: 2; position: relative; }

/* .agent-perf-name is still used by JS in renderAgentPerf (team-table cells) */
.agent-perf-name { font-weight: 600; color: var(--text); }

/* ===== Processor table (Privacy settings) ===== */
.processor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}
.processor-table th {
  text-align: left;
  padding: 8px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.processor-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.processor-table input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
}
.processor-table input:focus { border-color: var(--accent); outline: none; }
.processor-table .btn-icon { width: 28px; height: 28px; font-size: 13px; }

.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.audit-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.audit-table tr:last-child td { border-bottom: none; }
.audit-ts { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.audit-ref { color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; }
.audit-table a { color: var(--accent); text-decoration: none; }
.audit-table a:hover { text-decoration: underline; }

.shortcuts-hint {
  font-size: 16px;
  color: var(--text-muted);
  cursor: help;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.shortcuts-hint:hover { opacity: 1; }

/* ===== Contacts view ===== */
.contacts-view {
  grid-column: 2 / -1;
  padding: 32px 40px;
  overflow-y: auto;
}
.contacts-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.contacts-header h2 { font-size: 22px; font-weight: 700; margin: 0; }
.contacts-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  flex: 1;
  max-width: 320px;
}
.contacts-search-wrap input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  flex: 1;
  font-family: inherit;
}
.contacts-meta { font-size: 13px; color: var(--text-muted); }
.contacts-table-wrap { overflow-x: auto; }
.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.contacts-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.contacts-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.contacts-row { cursor: pointer; transition: background 0.1s; }
.contacts-row:hover { background: var(--bg); }
.contact-row-name { font-weight: 600; color: var(--text); }

.bulk-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.bulk-assign-select,
.bulk-tag-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
}
.bulk-assign-select:focus,
.bulk-tag-select:focus { border-color: var(--accent); outline: none; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  width: min(520px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.modal-header .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  line-height: 1;
  transition: all 0.15s;
}

.modal-header .close-btn:hover { color: var(--text); }

.modal-body { padding: 24px 28px 28px; }

.setting-group { margin-bottom: 28px; }

.setting-group h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}

.setting-hint {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.setting-row label {
  font-size: 13px;
  font-weight: 500;
  width: 60px;
}

.setting-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  min-height: 120px;
  transition: border-color 0.2s;
}

.setting-textarea:focus { border-color: var(--accent); }

.setting-row select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  font-family: inherit;
}

/* Zeile mit laengerer Beschriftung. Die Standardbreite von 60px reicht nur fuer
   ein Wort ("Status", "Inaktivitaet"); alles darueber bricht um und wird an der
   festen Breite abgeschnitten. Statt die Grundregel zu aendern (die haengt an
   vielen bestehenden Zeilen) bekommt der laengere Fall eine eigene Klasse. */
.setting-row--wide label {
  width: 168px;
  flex-shrink: 0;
}

/* Textfelder in Einstellungszeilen waren bisher nirgends vorgesehen, deshalb
   standen sie in Browser-Standardbreite da (rund 170px) neben vollbreiten
   Auswahlfeldern.

   BEWUSST auf --wide begrenzt. Die erste Fassung galt fuer jede .setting-row
   und hat damit das DSGVO-Suchfeld (index.html, "Kontakt suchen") mitgenommen:
   dessen .branding-input setzt outline: none und faerbt stattdessen den Rahmen
   im Fokus. Die allgemeinere Regel war spezifischer und hat die Fokusfarbe
   ueberschrieben, wodurch das Feld gar keine sichtbare Rueckmeldung mehr hatte.
   Von Steve am 10.08.2026 gefunden. Regeln nie breiter fassen als die Stelle,
   fuer die sie gedacht sind. */
.setting-row--wide input[type="email"],
.setting-row--wide input[type="text"],
.setting-row--wide input[type="url"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: var(--text);
}

.setting-row--wide input[type="email"]:focus,
.setting-row--wide input[type="text"]:focus,
.setting-row--wide input[type="url"]:focus {
  border-color: var(--accent);
  outline: none;
}

/* Fehlerhinweis direkt unter einem Feld, statt eines Toasts. Ein Toast sagt
   "Gespeichert" und verschwindet; ein abgelehnter Wert braucht eine Meldung,
   die stehen bleibt, bis der Fehler behoben ist. */
.setting-card-error {
  font-size: 12px;
  line-height: 1.45;
  color: var(--danger, #d92d20);
  margin: -4px 0 12px;
}

/* Ein <select> zieht seine Mindestbreite aus der laengsten Option. Ohne
   min-width: 0 kann es die Flex-Zeile im Tablet-Bereich aufsprengen, wo die
   Einstellungs-Navigation noch seitlich steht. */
.setting-row select { min-width: 0; }

@media (max-width: 768px) {
  /* 44px Mindesthoehe fuer Fingerbedienung. Gilt absichtlich fuer ALLE
     Einstellungszeilen, nicht nur die neuen: mit den erzwungenen 16px
     Schriftgroesse kamen die Auswahlfelder auf rund 37px, und das war schon
     vorher so. */
  .setting-row select,
  .setting-row input[type="email"],
  .setting-row input[type="text"],
  .setting-row input[type="url"] {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 640px) {
  /* Auf schmalen Schirmen untereinander: 168px Beschriftung plus Eingabefeld
     passen bei 375px nicht nebeneinander. */
  .setting-row--wide {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .setting-row--wide label { width: auto; }
  .setting-row--wide select,
  .setting-row--wide input { width: 100%; }
}

/* Schedule editor */
.schedule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.schedule-row label {
  width: 55px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.schedule-row input[type="time"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}

.schedule-row input[type="time"]:disabled { opacity: 0.35; }
.schedule-row span { font-size: 12px; color: var(--text-muted); }

/* ===== KNOWLEDGE BASE ===== */
.kb-view {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
}

/* Artikel-Pane: die kb-view lebt innerhalb von "Wissen & KI" (#aiView, flex column)
   und füllt dort die Fläche unter dem Header. */
.ai-view .kb-view {
  grid-column: auto;
  flex: 1;
  min-height: 0;
  background: white;
}

/* Mobil: einspaltig. Liste ODER Editor, nie beides gequetscht nebeneinander. */
@media (max-width: 768px) {
  .kb-view { grid-template-columns: 1fr !important; }
  .kb-view .kb-empty-editor { display: none !important; }
  .kb-view.editor-open .kb-list { display: none !important; }
  .kb-view .kb-list { border-right: none; }
}

.kb-list {
  border-right: 1px solid var(--border-light);
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kb-list-header {
  padding: 16px 20px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.kb-list-header h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-right: auto;
}

.kb-items { flex: 1; overflow-y: auto; padding: 4px 0; }

/* Category groups */
.kb-category-group {
  margin-bottom: 2px;
}
.kb-category-group.dragging { opacity: 0.4; }
.kb-category-group.drag-over { box-shadow: 0 -2px 0 0 var(--accent); }

.kb-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
  position: sticky;
  top: 0;
  z-index: 1;
}

.kb-category-header:hover { background: #eef0f4; }

.kb-category-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.kb-category-header:hover .kb-category-drag-handle { opacity: 1; }
.kb-category-drag-handle:active { cursor: grabbing; }

.kb-category-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.kb-category-header.collapsed .kb-category-arrow {
  transform: rotate(-90deg);
}

.kb-category-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  flex: 1;
}

.kb-category-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--border-light);
  color: var(--text-secondary);
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.kb-category-items {
  /* Container for items within a category */
}

/* Article items - card style */
.kb-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px 12px 20px;
  margin: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid transparent;
}

.kb-item:hover { background: var(--bg); }
.kb-item.active { background: var(--accent-light); border-left-color: var(--accent); }
.kb-item.drag-over { border-top: 2px solid var(--accent); }
.kb-item.dragging { opacity: 0.4; }

.kb-item-drag-handle {
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: grab;
  padding: 2px 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.kb-item:hover .kb-item-drag-handle { opacity: 1; }

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

.kb-item-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-item-url {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.kb-item-preview {
  font-size: 13px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.kb-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

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

.kb-type-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  background: #f0e6ff;
  color: #7c3aed;
}

.kb-type-badge.source {
  background: #e6f4ff;
  color: #2563eb;
}

.kb-editor, .kb-empty-editor {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kb-editor-header {
  padding: 20px 24px 16px;
  background: white;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.kb-editor-header h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.kb-editor-body { padding: 24px; flex: 1; overflow-y: auto; }

.kb-field { margin-bottom: 20px; }

.kb-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.kb-field input, .kb-field select, .kb-field textarea {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  background: white;
}

.kb-field input:focus, .kb-field select:focus, .kb-field textarea:focus {
  border-color: var(--accent);
}

.kb-field textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}

/* KB Category row */
.kb-category-row {
  display: flex;
  gap: 8px;
}

.kb-category-row select {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: var(--card);
  transition: border-color 0.2s;
}

.kb-category-row select:focus { border-color: var(--accent); }

.kb-category-row input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.kb-category-row input:focus { border-color: var(--accent); }

.kb-category-row .btn {
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* Quill editor overrides */
.kb-field .ql-toolbar {
  border: 1px solid var(--border-light);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg);
  font-family: inherit;
}

.kb-field .ql-container {
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  min-height: 200px;
  background: var(--card);
}

.kb-field .ql-container:focus-within {
  border-color: var(--accent);
}

.kb-field .ql-editor {
  min-height: 200px;
  line-height: 1.7;
  padding: 16px;
}

.kb-field .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
}

.kb-field .ql-snow .ql-stroke { stroke: var(--text-secondary); }
.kb-field .ql-snow .ql-fill { fill: var(--text-secondary); }
.kb-field .ql-snow .ql-picker { color: var(--text-secondary); }
.kb-field .ql-snow button:hover .ql-stroke { stroke: var(--accent); }
.kb-field .ql-snow button:hover .ql-fill { fill: var(--accent); }
.kb-field .ql-snow button.ql-active .ql-stroke { stroke: var(--accent); }
.kb-field .ql-snow button.ql-active .ql-fill { fill: var(--accent); }

.kb-field .ql-editor img {
  max-width: 100%;
  border-radius: 10px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Marker/highlighter effect */
.ql-editor [style*="background-color"],
.help-detail-text [style*="background-color"],
.article-body [style*="background-color"] {
  padding: 2px 5px 1px 4px;
  margin: 0 -1px;
  border-radius: 3px 7px 4px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* KB Tabs */
.kb-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border-radius: 10px;
  padding: 3px;
}

.kb-tab {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  transition: all 0.2s;
}

.kb-tab:hover { color: var(--text); }
.kb-tab.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* KB Feedback list */
.kb-feedback-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.fb-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

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

.fb-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.fb-item-title {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}

.fb-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.fb-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fb-stat.positive { color: #1a8a4a; }
.fb-stat.negative { color: #c62828; }

.fb-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg);
  overflow: hidden;
  margin-bottom: 8px;
}

.fb-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(.25,.8,.25,1);
}

.fb-bar-fill.good { background: var(--success); }
.fb-bar-fill.bad { background: var(--danger); }

.fb-feedbacks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-text {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 8px;
  line-height: 1.4;
  border-left: 3px solid var(--danger);
}

.kb-editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* ===== MESSAGE ATTACHMENTS ===== */
.msg-attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.msg-att-img { display: block; border-radius: 8px; overflow: hidden; max-width: 240px; cursor: pointer; }
.msg-att-img img { width: 100%; height: auto; max-height: 200px; object-fit: cover; display: block; border-radius: 8px; transition: opacity 0.15s; }
.msg-att-img:hover img { opacity: 0.85; }
.msg-att-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--bg-secondary); border-radius: 8px;
  text-decoration: none; color: var(--text-primary); font-size: 13px;
  border: 1px solid var(--border); transition: background 0.15s;
}
.msg-att-file:hover { background: var(--border); }
.msg-att-icon { font-size: 16px; }
.msg-att-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-att-size { color: var(--text-secondary); font-size: 12px; }

/* ===== REPLY ATTACHMENTS ===== */
.reply-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px; }
.reply-attachments:empty { display: none; }
.reply-att-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: var(--bg-secondary); border-radius: 6px;
  font-size: 12px; color: var(--text-primary); border: 1px solid var(--border);
}
.reply-att-chip.uploading { opacity: 0.6; }
.reply-att-chip.error { border-color: var(--danger); color: var(--danger); }
.reply-att-chip button {
  background: none; border: none; cursor: pointer; font-size: 14px;
  color: var(--text-secondary); padding: 0 2px; line-height: 1;
}
.reply-att-chip button:hover { color: var(--danger); }

.btn-icon {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: 16px; line-height: 1;
  transition: background 0.15s;
}
.btn-icon:hover { background: var(--bg-secondary); }

/* ===== SETTINGS VIEW ===== */
.settings-view {
  grid-column: 2 / -1;
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ===== AI CONTROL CENTER ===== */
/* Full-width view shown when the user switches into AI → Wissen / Einstellungen.
   For the "Unterhaltungen" sub-pane, aiView stays hidden and the normal
   conv-list + conv-detail layout is reused (same as Inbox). */
.ai-view {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
.ai-view-header {
  padding: 36px 48px 0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  flex-shrink: 0;
}
.ai-view-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ai-view-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}
/* Unobtrusive stat strip next to the AI title — not a dashboard of cards,
   just a horizontal readout so the user can glance at today's Bot activity
   without clicking into stats. */
.ai-metrics {
  display: flex;
  gap: 28px;
  align-items: center;
}
.ai-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ai-metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Pending-badge neben Wissen-Sub-Tab (dezent, zeigt offene Snippet-Vorschläge). */
.ai-pane-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 8px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ai-view-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px 64px;
}
.ai-pane-content {
  max-width: 900px;
  margin: 0 auto;
}
/* Sub-tab bar shared between conv-list-header (when in AI/Unterhaltungen) and
   ai-view-header (when in AI/Wissen or AI/Einstellungen). Sync via JS. */
.ai-pane-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg);
  padding: 4px;
  border-radius: 10px;
  margin: 0 0 -1px;
  width: fit-content;
  border: 1px solid var(--border);
}
.ai-view-header .ai-pane-tabs {
  margin-bottom: 0;
  transform: translateY(1px);
}
.ai-pane-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.ai-pane-tab:hover:not(.active) {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}
/* Touch-Geraete: 44px Mindest-Touch-Target (Sub-Tabs sind sonst ~30px hoch) */
@media (pointer: coarse) {
  .ai-pane-tab { min-height: 44px; }
}
.ai-pane-tab.active {
  background: #ffffff;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* In the narrow conv-list-header, the sub-tabs need to shrink.
   Fünf Tabs passen nicht in eine Zeile, sie brechen in zwei Reihen um (3+2). */
.conv-list-header .ai-pane-tabs {
  width: 100%;
  margin: 10px 0 12px;
  box-sizing: border-box;
  flex-wrap: wrap;
  row-gap: 2px;
}
.conv-list-header .ai-pane-tab {
  flex: 1 1 30%;
  padding: 7px 6px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .ai-view-header { padding: 20px 20px 0; }
  .ai-view-body { padding: 20px; }
  .ai-view-header h1 { font-size: 22px; }
  .ai-view-title-row { gap: 16px; margin-bottom: 16px; }
  .ai-metrics { gap: 20px; width: 100%; justify-content: space-between; }
  .ai-metric-value { font-size: 16px; }
  /* Fünf Tabs passen auf schmalen Screens nicht nebeneinander:
     umbrechen lassen, damit auch "Einstellungen" erreichbar bleibt. */
  .ai-view-header .ai-pane-tabs { flex-wrap: wrap; row-gap: 2px; width: 100%; box-sizing: border-box; }
  .ai-view-header .ai-pane-tab { flex: 1 1 30%; text-align: center; padding: 8px 6px; white-space: nowrap; }
}

.settings-nav {
  width: 220px;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 28px 12px 28px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  overflow-y: auto;
}

.settings-nav h2 {
  font-size: 16px;
  font-weight: 700;
  padding: 0 10px 18px;
  color: var(--text);
  letter-spacing: -0.3px;
}

.settings-nav-group {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 14px 12px 5px;
  user-select: none;
}
.settings-nav-group:first-of-type { padding-top: 0; }

.settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.settings-nav-item:hover { background: var(--bg); color: var(--text); }
.settings-nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

/* Coming Soon Card */
.setting-card.coming-soon {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  border: 1px dashed var(--border);
}
.coming-soon-icon { font-size: 36px; margin-bottom: 12px; }
.coming-soon-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.coming-soon-text { font-size: 13px; color: var(--text-secondary); }

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px 60px;
  max-width: 720px;
}

.settings-section { display: none; }
.settings-section.active { display: block; }

/* ===== Branding: two-column form + sticky live preview ===== */
/* The settings pane is normally capped at 720px; widen it for branding so the
   preview fits beside the form. */
.settings-content--wide { max-width: 1180px; }

.branding-layout { display: flex; align-items: flex-start; gap: 28px; }
.branding-form-col { flex: 1 1 auto; min-width: 0; }
.branding-preview-col { flex: 0 0 460px; width: 460px; }

.branding-preview-sticky {
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.branding-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.bp-title { font-size: 13px; font-weight: 600; color: var(--text); margin-right: auto; }
.bp-seg {
  display: inline-flex;
  gap: 2px;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
}
.bp-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 6px;
  line-height: 1;
}
.bp-seg-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.bp-seg-btn.active { background: #fff; color: var(--text); box-shadow: var(--card-shadow); }
.bp-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
}
.bp-icon-btn:hover { color: var(--text); }
.bp-close {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

/* Stage = mock browser window (desktop) or phone (mobile). The widget iframe
   renders at NATIVE size; .bp-scale scales the whole scene, .bp-scale-box
   reserves the scaled footprint so nothing overlaps. */
/* flex:1 lets the stage fill the panel height so the page (and the scaled
   widget) can grow in the taller fullscreen modal. In the docked, content-sized
   panel this is a no-op. */
.branding-preview-stage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--bg); }
.bp-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bp-dot { width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
.bp-dot:nth-child(1) { background: #ff5f57; }
.bp-dot:nth-child(2) { background: #febc2e; }
.bp-dot:nth-child(3) { background: #28c840; }
.bp-addr {
  margin-left: 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 14px;
  border-radius: 6px;
}
.bp-page {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 20% 16%, rgba(0,0,0,0.04) 0 1.5px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, #f4f3f0 0%, #eae8e4 100%);
}
.bp-scale-box { position: relative; flex-shrink: 0; }  /* JS sets width/height to scaled dims */
.bp-scale { transform-origin: top left; }              /* JS sets transform: scale(k) */
.bp-scale iframe {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  background: #211a30;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Mobile device: drop the browser chrome, add a phone bezel. */
.bp-device-mobile .bp-chrome { display: none; }
.bp-device-mobile .bp-scale iframe {
  border-radius: 30px;
  box-shadow: 0 0 0 7px #17171a, 0 18px 50px rgba(0, 0, 0, 0.28);
}
.bp-hint { font-size: 12px; color: var(--text-muted); text-align: center; padding: 10px 16px 14px; }

.branding-preview-fab { display: none; }

/* Fullscreen (desktop icon button) AND mobile FAB open the SAME panel as a
   larger centered modal; layoutPreview() rescales against the bigger stage. */
.branding-preview-col.bp-open {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: auto;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.branding-preview-col.bp-open .branding-preview-sticky {
  position: static;
  /* Tall enough that the native 620px widget can reach ~1:1 (that is the point
     of "Vollbild": bigger than docked); not so wide that a single widget floats
     in a sea of empty page. */
  width: min(560px, calc(100vw - 32px));
  height: min(880px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 16px;
}
.branding-preview-col.bp-open .bp-icon-btn { display: none; }
/* Give the widget the full modal height in fullscreen. */
.branding-preview-col.bp-open .bp-hint { display: none; }
.branding-preview-col.bp-open .bp-close { display: inline-flex; align-items: center; justify-content: center; }

/* Under 900px: no room for the side column. Hide it; a FAB opens the overlay. */
@media (max-width: 900px) {
  .settings-content--wide { max-width: 720px; }
  .branding-layout { display: block; }
  .branding-preview-col { display: none; }

  .branding-preview-col.bp-open { display: flex; padding: 0; }
  .branding-preview-col.bp-open .branding-preview-sticky {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .branding-preview-col.bp-open .branding-preview-head {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }

  .branding-preview-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    z-index: 900;
    min-height: 44px;
    padding: 11px 18px;
    border: none;
    border-radius: 999px;
    background: var(--brand, #ff009d);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
}

.settings-page-header { margin-bottom: 28px; }
.settings-page-header h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.settings-page-header p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }

.setting-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.setting-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.setting-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.setting-card-help {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 14px;
  line-height: 1.5;
}
.setting-card-help code {
  font-family: 'SF Mono', Menlo, monospace;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.setting-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ===== TEAM MANAGEMENT ===== */
.team-list { margin-bottom: 12px; }
.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.team-row:last-child { border-bottom: none; }
/* min-width:0 ist noetig, damit das Namensfeld im Flex-Container schrumpfen
   darf statt den Text abzuschneiden. */
.team-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.team-info > div { min-width: 0; flex: 1; }
.team-name { font-weight: 600; font-size: 14px; }
.team-email { font-size: 12px; color: var(--text-secondary); }
.team-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary, #ccc); flex-shrink: 0;
}
.team-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.team-actions { display: flex; align-items: center; gap: 8px; }
.team-role-select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--bg-secondary);
  cursor: pointer;
}
.team-role-select:disabled { opacity: 0.5; cursor: default; }
.team-role-label {
  font-size: 12px; color: var(--text-secondary);
  padding: 4px 8px; background: var(--bg-secondary); border-radius: 6px;
}
.team-remove-btn {
  width: 24px; height: 24px; border-radius: 6px;
  border: none; background: none; color: var(--text-secondary);
  font-size: 18px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.15s;
}
.team-remove-btn:hover { background: #fef2f2; color: var(--danger); }
/* Name in der Team-Liste: sieht aus wie Text, ist fuer Admins aber ein Feld.
   Erst beim Hover/Fokus zeigt es sich als eingabefaehig, damit die Liste nicht
   wie ein Formular wirkt. */
.team-name-input {
  font-weight: 600; font-size: 14px; font-family: inherit;
  color: var(--text-primary); background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 2px 6px; margin-left: -6px; width: 100%; max-width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.team-name-input:hover { border-color: var(--border); }
.team-name-input:focus {
  outline: none; border-color: var(--primary, #ff009d); background: var(--bg-primary, #fff);
}
/* Persoenliche Rechte: bewusst zurueckhaltend, damit die Team-Liste eine Liste
   bleibt und nicht zum Formular wird. Sichtbar wird der Bereich nur, wenn man
   ihn oeffnet. */
.team-perm-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-secondary);
  font-size: 12px; font-family: inherit; cursor: pointer;
  min-height: 32px; white-space: nowrap; flex-shrink: 0;
}
.team-perm-btn:hover { background: var(--bg-primary, #fff); color: var(--text-primary); }
.team-perm-count {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 999px; background: #fce7f3; color: #9d174d;
  font-size: 11px; font-weight: 700;
}
.team-perm-panel {
  padding: 12px 14px 14px; margin: 0 0 8px;
  background: var(--bg-secondary); border-radius: 10px;
  border: 1px solid var(--border);
}
.team-perm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--text-secondary); margin-bottom: 10px;
}
.team-perm-reset {
  border: none; background: none; color: var(--primary, #ff009d);
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  padding: 0; white-space: nowrap;
}
.team-perm-reset:hover { text-decoration: underline; }
.team-perm-group {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-tertiary, #9ca3af); margin: 10px 0 4px;
}
.team-perm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 13px; cursor: pointer;
}
.team-perm-row input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.team-perm-flag {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  background: #fce7f3; color: #9d174d; font-size: 11px; font-weight: 600;
}
@media (max-width: 640px) {
  .team-perm-btn { min-height: 44px; }
  .team-perm-row { padding: 9px 0; }
  .team-perm-row input { width: 20px; height: 20px; }
}
.team-badge-invited {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  background: #fef3c7; color: #92400e;
}
.team-resend-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-secondary);
  font-size: 12px; font-family: inherit; cursor: pointer;
  min-height: 32px;
  /* Darf weder umbrechen noch zerquetscht werden: sonst schiebt er sich auf
     schmalen Schirmen ueber den Namen. */
  white-space: nowrap; flex-shrink: 0;
}
.team-resend-btn:hover:not(:disabled) { background: var(--bg-primary, #fff); color: var(--text-primary); }
.team-resend-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 640px) {
  /* Nebeneinander geht hier nicht mehr auf. Gestapelt: Person oben, Aktionen
     darunter rechts, statt drei Elemente um dieselben 300px streiten zu lassen. */
  .team-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .team-info { width: 100%; }
  .team-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .team-resend-btn { min-height: 44px; }
  .team-role-select { min-height: 44px; }
}
.team-invite-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.team-input {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; flex: 1; min-width: 120px;
}
.team-input:focus { outline: none; border-color: var(--primary); }
.empty-hint { color: var(--text-secondary); font-size: 13px; padding: 8px 0; }

/* ===== SNIPPET REVIEW ===== */
.snippet-list { display: flex; flex-direction: column; gap: 12px; }
.snippet-card {
  padding: 16px; background: var(--bg); border-radius: 10px;
  border: 1px solid var(--border);
}
.snippet-q { font-size: 14px; margin-bottom: 8px; line-height: 1.5; }
.snippet-a { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.snippet-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.snippet-actions { display: flex; gap: 8px; }
/* Übernommene Antworten: ganze Karte klickbar (öffnet das Bearbeiten-Modal) */
.learned-card { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.learned-card:hover { border-color: var(--accent); background: #fff; }
.learned-card .snippet-meta { margin-bottom: 0; }
.embed-status { font-size: 13px; color: var(--text-secondary); margin: 4px 0 10px; }
/* #15803d statt #16a34a: 5,02:1 Kontrast auf Weiss bei 13px (Lena M5) */
.embed-status-ok::before { content: '✓ '; color: #15803d; font-weight: 700; }
.embed-status-ok { color: #15803d; }
.embed-status-warn { color: #b45309; }
@media (max-width: 768px) {
  /* Touch-Ziel >= 44px fuer alle Karten-Buttons, nicht nur die Suchindex-ids
     (Lena C: id-Regel liefe beim naechsten Button wieder ins selbe Loch) */
  .setting-card .btn { min-height: 44px; }
}

/* ===== FEATURE REQUESTS ===== */
.features-view {
  grid-column: 2 / -1;
  padding: 28px 40px;
  overflow-y: auto;
}
.features-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.features-header h2 { font-size: 20px; font-weight: 700; flex: 1; }
.fr-table { width: 100%; border-collapse: collapse; }
.fr-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.fr-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top; }
.fr-table tr:hover { background: rgba(0,0,0,0.01); }
.fr-desc { font-size: 12px; color: var(--text-secondary); }
.fr-status {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-family: inherit; background: var(--bg);
}
.fr-votes { font-weight: 700; text-align: center; }
.fr-date { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.fr-title-cell { cursor: pointer; transition: color 0.15s; }
.fr-title-cell:hover { color: var(--accent); }
.fr-actions { text-align: right; width: 48px; }
.fr-actions .btn-icon {
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fr-actions .btn-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff;
}

/* ===== ASSIGNMENT ===== */
.assign-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-secondary);
  cursor: pointer;
}
.channel-badge.assigned {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ===== BRANDING SETTINGS ===== */
.branding-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.branding-row:last-child { margin-bottom: 0; }
.branding-row label {
  font-size: 13px;
  font-weight: 500;
  width: 100px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.branding-input {
  flex: 1;
  min-width: 0; /* allow shrink below intrinsic input width so the field can't
                   push past the card edge on narrow phones (matches .branding-form-col) */
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.branding-input:focus { border-color: var(--accent); }
/* On touch phones, bump inputs to 16px so iOS Safari doesn't auto-zoom on
   focus. Mobile-only, so the compact 13px desktop look is unchanged. */
@media (max-width: 900px) {
  .branding-input { font-size: 16px; }
}
/* ===== Bildausschnitt der Umfrage-Buehne =====
   Zwei Vorschauen nebeneinander, weil die Buehne auf dem Telefon fast
   quadratisch und auf dem Bildschirm ein breiter Streifen ist: derselbe Wert
   wirkt also unterschiedlich. Wer nur eine Vorschau sieht, stellt es am
   Schreibtisch schoen ein und auf dem Telefon ist der Kopf ab. */
.crop-box { flex: 1; min-width: 0; }
.crop-previews { display: flex; gap: 10px; align-items: flex-end; }
.crop-preview-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Beide Vorschauen zeigen bewusst den ENGSTEN Fall, nicht den bequemsten:
   eine Vorschau, die mehr zeigt als das Geraet, ist schlimmer als gar keine.
   Handy: 390 x 320 (38svh auf einem heute uebliches 390x844-Telefon), nicht
   375 x 253 - das stammte von einem iPhone 8 und zeigte das Bild fast
   ungeschnitten. Computer: 1920 x 340, weil die Buehne bei 340px gedeckelt
   ist und breite Monitore damit den duennsten Streifen sehen. */
.crop-preview-wrap:not(.crop-wide) { flex: 0 0 130px; }
.crop-preview-wrap.crop-wide { flex: 1 1 auto; }
.crop-preview {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: #06060a;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Ziehen nur mit Maus. Auf dem Finger waere `touch-action: none` eine
   Scroll-Sperre mitten in einem langen Formular; dort bedient man die
   Schieberegler darunter. */
@media (pointer: fine) {
  .crop-preview { cursor: grab; touch-action: none; }
  .crop-preview.dragging { cursor: grabbing; }
  /* Waehrend des Ziehens tritt der Verlauf zurueck, damit man das Bild sieht.
     Beim Loslassen steht wieder die Wahrheit da. */
  .crop-preview.dragging .crop-fade { opacity: 0.25; }
  /* Zeigt an, welche Achse ueberhaupt Spielraum hat. */
  .crop-preview.only-y { cursor: ns-resize; }
  .crop-preview.only-x { cursor: ew-resize; }
  .crop-preview.locked { cursor: default; }
}
/* Muss NACH dem (pointer: fine)-Block stehen, gleiche Spezifitaet, die
   Reihenfolge entscheidet. `pointer: fine` fragt nur das HAUPT-Zeigegeraet ab:
   ein Touch-Notebook, ein Surface, ein iPad mit Tastatur melden alle "fine"
   und haben trotzdem einen Bildschirm zum Anfassen. Dort fing die Sperre oben
   jeden Wischer zum Weiterscrollen ab. `touch-action` wirkt ohnehin nur auf
   Finger und Stift, nie auf die Maus - das Ziehen mit der Maus bleibt also
   unberuehrt. */
@media (any-pointer: coarse) {
  .crop-preview { touch-action: auto; }
}
.crop-fade { transition: opacity 0.15s; }
.crop-preview:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.crop-phone { aspect-ratio: 390 / 320; }
.crop-desktop { aspect-ratio: 1920 / 340; }
/* Derselbe Verlauf wie auf der echten Seite, damit sichtbar wird, wie viel vom
   unteren Bildrand ohnehin im Dunkeln verschwindet. */
.crop-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,10,0.12) 0%, rgba(6,6,10,0.55) 58%, #06060a 100%);
  pointer-events: none;
}
.crop-caption { font-size: 11px; color: var(--text-muted); }
.crop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Umbruch statt Quetschen: in der schmalen Spalte des Einstellungsbereichs
     stand die Wertangabe sonst dreizeilig neben dem Knopf. */
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}
.crop-value { font-size: 12px; color: var(--text-muted); }
.crop-reset { font-size: 12px; padding: 5px 10px; }
/* Fehler und Hinweis in derselben Zeilenfamilie wie das uebrige Kleingedruckte. */
.crop-error, .crop-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.crop-error { color: var(--danger, #c62828); }
.crop-note { color: var(--text-muted); }
/* Schieberegler: auf Fingergeraeten die Hauptbedienung, am Schreibtisch der
   genaue Weg neben dem Ziehen. Eine Achse ohne Spielraum wird ausgeblendet
   statt wirkungslos angeboten. */
.crop-sliders { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
/* Die Beschriftung des ganzen Blocks steht auf ALLEN Breiten oben statt in der
   100px-Spalte daneben: dort brach der erklaerende Satz auf acht Zeilen um und
   stand als graue Wand neben den Vorschauen. */
#sEditCropRow { flex-direction: column; align-items: stretch; gap: 6px; }
#sEditCropRow > label { width: auto; }
/* Die Regler-Zeilen sind <label>, und im Einstellungsformular gilt fuer jedes
   label eine feste Spaltenbreite von 100px sowie 13px halbfett. Ohne das
   Zuruecksetzen blieben von einem 544px breiten Regler ganze 48px uebrig. */
#sEditCropRow .crop-slider-row { width: auto; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.crop-slider-row { display: flex; align-items: center; gap: 10px; }
.crop-slider-row > span { flex: 0 0 84px; }
.crop-slider-row input[type="range"] { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); }
/* any-pointer statt pointer: ein Touch-Notebook mit Maus als Hauptgeraet
   bekaeme sonst bei 1200px Fensterbreite wieder den 29px-Knopf. */
@media (any-pointer: coarse) {
  .crop-reset { min-height: 44px; padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 900px) {
  /* Nebeneinander waere die Handy-Vorschau hier nur noch briefmarkengross. */
  .crop-previews { flex-direction: column; align-items: stretch; gap: 20px; }
  .crop-preview-wrap { gap: 4px; }
  .crop-preview-wrap:not(.crop-wide) { flex: 0 0 auto; }
  /* 11px ist auf dem Telefon zu klein, und die Beschriftung stand zwischen
     zwei Vorschauen, wo sie zur falschen gehoerte. */
  .crop-caption { font-size: 12px; }
  .crop-reset { min-height: 44px; padding: 10px 14px; }
  /* Eigene Zeile statt dreizeilig gequetscht neben dem Knopf. */
  .crop-value { flex: 1 0 100%; }
  .crop-footer { justify-content: flex-start; }
}
@media (max-width: 400px) {
  /* 84px Beschriftung neben einem 224px breiten Block lassen dem Regler 130px.
     Ueber dem Regler statt daneben wird die Bahn 224px lang, fuer zwei Zeilen
     Hoehe in einem ohnehin hohen Block. Die flex-Basis MUSS zurueckgesetzt
     werden: in Spaltenrichtung wuerde aus den 84px sonst die HOEHE der
     Beschriftung, also ein leerer Balken. */
  #sEditCropRow .crop-slider-row { flex-direction: column; align-items: stretch; gap: 0; }
  #sEditCropRow .crop-slider-row > span { flex: 0 0 auto; }
  /* Gilt fuer den Regler genauso: mit `flex: 1` waere die Basis in
     Spaltenrichtung 0, und aus den 44px Trefferflaeche wuerden die 16px des
     nackten Systemreglers. */
  #sEditCropRow .crop-slider-row input[type="range"] { flex: 0 0 44px; }
  #sEditCropRow .crop-sliders { gap: 10px; }
}
@media (min-width: 1100px) {
  /* Auf breiten Fenstern ist Platz genug: mit 96px liess sich nicht beurteilen,
     ob ein Kopf angeschnitten wird - und genau dafuer ist die Vorschau da. */
  .crop-preview-wrap:not(.crop-wide) { flex: 0 0 150px; }
}

/* Custom-CSS textarea + white-label lock (5a add-on) */
.branding-css {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}
.branding-input:disabled,
.branding-css:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--nav-hover, rgba(0,0,0,0.03));
}
.wl-locked-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-secondary, #525252);
  background: var(--nav-hover, rgba(0,0,0,0.04));
  border: 1px dashed var(--border, rgba(0,0,0,0.1));
  border-radius: 8px;
  padding: 8px 12px;
}
/* "ServiceTower-Branding entfernen"-Schalter */
.branding-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text);
}
.branding-toggle-row .perm-toggle { flex-shrink: 0; }
/* Ohne White-Label gesperrt: ausgegraut + nicht klickbar. */
#brandHideBadgeCard.wl-gated .branding-toggle-row { opacity: 0.5; }
.perm-toggle input:disabled + .perm-slider { cursor: not-allowed; }
.color-pick {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-pick input[type="color"] {
  width: 40px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  background: none;
}
.color-text {
  width: 90px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
}
.color-text:focus { border-color: var(--accent); }
.range-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.range-pick input[type="range"] {
  flex: 1;
  min-width: 120px;
  accent-color: var(--brand, #ff009d);
  cursor: pointer;
}
.range-value {
  min-width: 48px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.position-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.pos-btn {
  padding: 8px 20px;
  border: none;
  background: none;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.pos-btn + .pos-btn { border-left: 1px solid var(--border); }
.pos-btn.active { background: var(--accent-light); color: var(--accent); }
.pos-btn:hover:not(.active) { background: var(--bg); }

/* ===== SURVEYS VIEW ===== */
.surveys-view {
  grid-column: 2 / -1;
  padding: 28px 40px;
  overflow-y: auto;
}
.surveys-header { margin-bottom: 24px; }
.surveys-header h2 { font-size: 20px; font-weight: 700; }

.surveys-stats {
  display: flex; gap: 16px; margin-bottom: 28px;
}
.survey-stat-card {
  flex: 1; background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; text-align: center;
}
.survey-stat-value { font-size: 28px; font-weight: 700; color: var(--text); }
.survey-stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.dist-chart { max-width: 400px; }
.dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dist-emoji { font-size: 20px; width: 28px; text-align: center; }
.dist-bar-bg { flex: 1; height: 24px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.dist-bar { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.4s ease; min-width: 2px; }
.dist-count { font-size: 13px; color: var(--text-secondary); width: 30px; text-align: right; }

.survey-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border-light);
}
.survey-emoji { font-size: 22px; }
.survey-row-info { flex: 1; min-width: 0; }
.survey-row-name { font-size: 14px; font-weight: 500; }
.survey-row-feedback { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.survey-row-time { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

.csat-home-score { display: flex; align-items: baseline; gap: 4px; }
.csat-home-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.csat-home-label { font-size: 13px; color: var(--text-secondary); }

/* ===== NEWS / RELEASE NOTES ===== */
.news-view {
  grid-column: 2 / -1;
  padding: 28px 40px;
  overflow-y: auto;
}
.news-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 24px;
}
.news-header h2 { font-size: 20px; font-weight: 700; }
.news-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 4px; max-width: 540px; }
.news-header-actions { display: flex; gap: 10px; flex-shrink: 0; }

.news-list { display: flex; flex-direction: column; gap: 14px; }

.news-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  transition: all 0.15s;
}
.news-card:hover { border-color: rgba(240,4,156,0.2); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }

.news-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; font-size: 12px;
}
.news-cat-badge {
  padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 11px;
}
.news-status { font-weight: 500; font-size: 11px; }
.news-status-published { color: #10b981; }
.news-status-draft { color: var(--text-secondary); }
.news-date { color: var(--text-secondary); margin-left: auto; }

.news-card-actions { display: flex; gap: 4px; }
.news-edit-btn, .news-delete-btn {
  width: 28px; height: 28px; border: none; background: var(--bg);
  border-radius: 6px; cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.news-edit-btn:hover { background: var(--accent-light); color: var(--accent); }
.news-delete-btn:hover { background: #fee; color: #c00; }

.news-card-title {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin: 0 0 8px;
}
.news-card-content {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.news-card-content p { margin: 0; }
.news-card-content p + p { margin-top: 8px; }

/* News editor modal */
.news-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.news-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.news-modal-content {
  position: relative;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: 640px;
  max-width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: newsModalIn 0.2s ease;
}
@keyframes newsModalIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.news-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.news-modal-header h3 { font-size: 17px; font-weight: 600; }
.news-modal-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--text-secondary); width: 32px; height: 32px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.news-modal-close:hover { background: var(--bg); color: var(--text); }

.news-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.news-field-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.news-field-label + .news-field-label { margin-top: 16px; }

.news-category-tabs {
  display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap;
}
.news-cat-btn {
  padding: 8px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: white; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: all 0.15s;
}
.news-cat-btn:hover { border-color: var(--accent); }
.news-cat-btn.active {
  background: var(--accent); color: white; border-color: var(--accent);
}

.news-input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  outline: none; transition: border-color 0.15s; margin-bottom: 16px;
}
.news-input:focus { border-color: var(--accent); }

.news-editor { background: white; }
.news-editor .ql-toolbar {
  border: 1px solid var(--border); border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.news-editor .ql-container {
  border: 1px solid var(--border); border-radius: 0 0 10px 10px;
  font-family: inherit; font-size: 14px; min-height: 180px;
}

.news-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-top: 1px solid var(--border);
}
.news-publish-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
}
.news-publish-toggle input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.news-modal-actions { display: flex; gap: 8px; }

/* ===== WELCOME FLOW EDITOR ===== */
.welcome-flow-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.wf-empty { color: var(--text-secondary); font-size: 13px; padding: 16px; text-align: center; background: var(--bg); border-radius: 8px; }

.wf-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
}
.wf-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.wf-step-body { flex: 1; min-width: 0; }
.wf-step-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.wf-step-input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  resize: vertical; outline: none; background: white;
}
.wf-step-input:focus { border-color: var(--accent); }
.wf-step-delay { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.wf-step-delay input { width: 60px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 16px; }
.wf-step-info { font-size: 12px; color: var(--text-secondary); }

.wf-step-actions { display: flex; flex-direction: column; gap: 4px; }
.wf-btn {
  width: 26px; height: 26px; border: 1px solid var(--border);
  background: white; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-secondary); padding: 0;
}
.wf-btn:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.wf-btn-del:hover { background: #fee; border-color: #f88; color: #c00; }

.welcome-flow-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ===== HOME MODULES EDITOR ===== */
.modules-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-width: 480px;
}

/* Die Gruppe traegt den Rahmen; die Zeile darin ist rahmenlos, damit der
   Sichtbarkeits-Streifen (und ggf. die Link-Config) nahtlos darunter sitzen. */
.module-group {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.15s;
}
.module-group:hover { border-color: rgba(240,4,156,0.3); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
/* Kein overflow:hidden an der Gruppe: sonst kappt sie die Hilfe-Bubble.
   Stattdessen die Zeile oben runden, damit ihr Drag-Hintergrund die
   abgerundeten Gruppen-Ecken respektiert. */
.module-group > .module-row:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.module-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: grab;
  transition: background 0.15s;
  user-select: none;
}
.module-row.dragging { opacity: 0.5; cursor: grabbing; }
.module-row.drag-over { background: var(--accent-light); }
.module-row.module-hidden { opacity: 0.5; }

.module-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  display: flex;
  align-items: center;
}
.module-row:hover .module-drag-handle { color: var(--accent); }

.module-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 8px;
  flex-shrink: 0;
}
.module-info { flex: 1; min-width: 0; }
.module-label { font-size: 14px; font-weight: 600; color: var(--text); }
.module-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }

.module-toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.15s;
  flex-shrink: 0;
}
.module-toggle:hover { background: var(--accent-light); color: var(--accent); }
.module-row.module-hidden .module-toggle { color: var(--text-muted); }

/* Sichtbarkeitsregel pro Modul: Streifen unter der Zeile, innerhalb der Gruppe. */
.module-visibility {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 48px;
  border-top: 1px solid var(--border);
}
.mv-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.mv-select {
  flex: 1;
  min-width: 0;
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* 16px verhindert den iOS-Safari-Auto-Zoom, falls der Editor am Handy
     bedient wird; am Desktop wieder kompakt auf 13px. */
  font-size: 16px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
@media (min-width: 768px) { .mv-select { font-size: 13px; } }
.mv-select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

/* Custom link config */
.customlink-config {
  padding: 10px 16px 14px 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.cl-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.cl-input:focus { border-color: var(--accent); }
.cl-input::placeholder { color: var(--text-muted); }
.cl-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.cl-checkbox input { cursor: pointer; }

/* ===== PROFILE AVATAR ===== */
.profile-avatar-row {
  display: flex; align-items: center; gap: 18px; margin-top: 8px;
}
.profile-avatar-preview {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-preview.initial { background: var(--accent); }
.profile-avatar-preview.initial span {
  color: white; font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
}
.profile-avatar-actions { display: flex; gap: 8px; }

/* ===== CRAWLED WEBSITES ===== */
.websites-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.website-row {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: flex-start;
}
.website-info { flex: 1; min-width: 0; }
.website-url {
  font-size: 14px; font-weight: 600; color: var(--text);
  word-break: break-all; margin-bottom: 4px;
}
.website-meta {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.website-status { font-weight: 600; }
.website-error {
  margin-top: 6px; padding: 6px 10px;
  background: #fee; color: #c00;
  border-radius: 6px; font-size: 12px;
}
.website-excludes {
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
  padding: 4px 8px; background: var(--bg); border-radius: 6px; display: inline-block;
}
.website-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.website-actions .btn { padding: 6px 12px; font-size: 12px; }

/* Pages tabs */
.pages-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.pages-tab {
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pages-tab:hover { color: var(--text); }
.pages-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.pages-tab-count {
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  min-width: 20px;
  text-align: center;
}
.pages-tab.active .pages-tab-count {
  background: var(--accent-light);
  color: var(--accent);
}

/* Compact pages list (Gleap-style) */
.pages-list-compact {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.page-row {
  border-bottom: 1px solid var(--border);
}
.page-row:last-child { border-bottom: none; }

.page-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.page-row-head:hover { background: var(--bg); }

.page-row-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.page-row-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.page-row-count:not(:empty)[data-count]:not([data-count="0"]) {
  background: var(--accent-light);
  color: var(--accent);
}

.page-row-url {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

.page-row-exclude {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.page-row-exclude:hover { background: #fee; color: #dc2626; }

.page-row-body {
  padding: 4px 14px 16px 54px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.page-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.page-row-content {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.page-row-actions {
  margin-top: 8px;
  font-size: 11px;
}
.page-row-actions a {
  color: var(--accent);
  text-decoration: none;
}
.page-row-actions a:hover { text-decoration: underline; }

/* Mobile back button — hidden on desktop */
.mobile-back-btn {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  align-items: center;
  justify-content: center;
}
.mobile-back-btn:hover { background: var(--bg); }
@media (max-width: 768px) {
  .mobile-back-btn { display: inline-flex; }
}

/* ===== Responsive: Tablet (≤ 1100px) — collapse the contact sidebar inside conv detail ===== */
@media (max-width: 1100px) {
  .contact-sidebar { display: none; }
}

/* ===== Responsive: Tablet (≤ 900px) — collapse main nav to icons-only ===== */
@media (max-width: 900px) {
  .app { grid-template-columns: 64px 320px 1fr; }
  .nav-title,
  .nav-item span,
  .avail-label,
  .nav-agent-info { display: none; }
  .nav-header { justify-content: center; padding: 20px 0 16px; }
}

/* ===== Responsive: Mobile (≤ 720px) — single-column stack with view-aware hiding ===== */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
  }
  /* All child views have desktop-hardcoded `grid-column: 2 / -1` — override to
     span the full row. The nav is NOT a top bar here: it is handled entirely by
     the hamburger-overlay block below (≤768px). Earlier this block also styled
     `.nav` as a 56px horizontal row with !important, which squashed that
     fullscreen overlay to 56px and broke the mobile menu — those rules are gone. */
  .stats-view,
  .kb-view,
  .features-view,
  .surveys-view,
  .news-view,
  .contacts-view,
  .settings-view,
  .conv-list,
  .conv-detail-wrapper {
    grid-column: 1 / -1 !important;
  }
  .contacts-view { padding: 16px; }

  /* Conv list full-width */
  .conv-list { width: 100%; max-width: 100%; }
  .conv-detail-wrapper { width: 100%; }

  /* When a conversation is open on mobile, hide the list and show only the detail */
  .app.mobile-conv-open .conv-list { display: none; }
  .app.mobile-conv-open .conv-detail-wrapper { display: flex; }

  /* When no conversation is open, hide detail */
  .app:not(.mobile-conv-open) .conv-detail-wrapper { display: none; }

  /* Overview mobile: stack the strips */
  .stats-view { padding: 32px 20px 56px; }
  .status-strip { grid-template-columns: 1fr 1fr; padding: 0; }
  .status-col {
    border-right: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 24px 20px;
  }
  .status-col:nth-child(2) { border-right: none; }
  .status-col:nth-child(3), .status-col:nth-child(4) { border-bottom: none; }
  .status-col:nth-child(4) { border-right: none; }
  .overview-main { grid-template-columns: 1fr; }
  .detail-strip { grid-template-columns: 1fr 1fr; padding: 0; }
  .detail-cell {
    padding: 24px 20px;
    border-right: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .detail-cell:nth-child(2) { border-right: none; }
  .detail-cell:nth-child(3), .detail-cell:nth-child(4) { border-bottom: none; }
  .detail-cell:nth-child(4) { border-right: none; }
  .activity-metrics { grid-template-columns: 1fr 1fr; }
  .overview-lists { grid-template-columns: 1fr; }
  .heatmap-grid { font-size: 8px; }
  .heatmap-grid .heatmap-cell { min-height: 12px; }

  /* Settings: stack nav on top */
  .settings-view { flex-direction: column; }
  .settings-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex-direction: row;
    padding: 8px;
    gap: 4px;
  }
  .settings-nav-group { display: none; }
  .settings-nav-item {
    flex-shrink: 0;
    width: auto;
    padding: 8px 12px;
    font-size: 13px;
  }
  .settings-content { padding: 16px; }

  /* Conv detail header: stack the controls */
  .conv-detail-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Reply actions: wrap to multiple rows on mobile */
  .reply-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT (< 768px)
   Single column, nav as full-screen overlay, one view at a time.
   ═══════════════════════════════════════════════════════════════════════ */

.mobile-menu-btn {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  /* ─── Grid → single column ─── */
  .app,
  .app.nav-collapsed {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
  }

  /* ─── Mobile hamburger button ─── */
  .mobile-menu-btn {
    display: grid;
    place-items: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2500;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ix-white);
    border: 1px solid var(--ix-line-2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: var(--ix-ink);
    cursor: pointer;
  }
  .mobile-menu-btn svg { width: 18px; height: 18px; }

  /* ─── Nav: hidden by default on mobile.
       When NOT collapsed (user tapped hamburger), show as fullscreen overlay. ─── */
  .app.nav-collapsed .nav {
    display: none !important;
  }
  .app:not(.nav-collapsed) .nav {
    position: fixed;
    inset: 0;
    z-index: 2400;
    width: 100%;
    max-width: 300px;
    background: var(--ix-white);
    box-shadow: 8px 0 40px rgba(0,0,0,0.15);
    display: flex !important;
    overflow-y: auto;
    padding: 60px 16px 16px;
  }
  /* Backdrop behind expanded nav */
  .app:not(.nav-collapsed)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2399;
    background: rgba(0, 0, 0, 0.3);
  }
  /* When nav is expanded, show labels (undo collapsed styling) */
  .app:not(.nav-collapsed) .nav-title,
  .app:not(.nav-collapsed) .nav-item span,
  .app:not(.nav-collapsed) .nav-agent-info,
  .app:not(.nav-collapsed) .nav-footer-text { display: unset !important; }
  .app:not(.nav-collapsed) .nav-item {
    width: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 9px 12px !important;
    gap: 10px !important;
  }
  .app:not(.nav-collapsed) .nav-section { padding: 0 8px !important; }
  .app:not(.nav-collapsed) .nav-collapse-btn { display: none; }
  .app:not(.nav-collapsed) .nav-header {
    justify-content: flex-start !important;
    padding: 4px 8px 16px !important;
    gap: 10px !important;
  }
  .app:not(.nav-collapsed) .nav-footer {
    padding: 12px 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .app:not(.nav-collapsed) .nav-footer-item {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }
  .app:not(.nav-collapsed) .nav-agent { justify-content: flex-start !important; }

  /* ─── Conv list: full width when on inbox view ─── */
  .conv-list {
    border-right: none !important;
    width: 100% !important;
  }

  /* ─── Conv detail wrapper: hidden on mobile unless a conversation is
       actively open. When no conversation is selected, the user sees
       the conv-list full-width instead of the "Wähle eine Unterhaltung"
       empty state. ─── */
  .conv-detail-wrapper {
    display: none !important;
  }
  /* #emptyDetail teilt sich die Klasse .conv-detail-wrapper mit dem echten
     Detail-Panel #convDetail, ist aber nur der "Wähle eine Unterhaltung"-
     Platzhalter. Auf dem Handy wird der Leerzustand nie gebraucht (ohne Auswahl
     zeigen wir die Liste). Vorher erzwang die Klassen-Regel display:flex fuer
     BEIDE, wodurch der Platzhalter als undurchsichtiges Vollbild-Overlay ueber
     der echten Unterhaltung lag und alle Taps schluckte. Deshalb: Platzhalter
     hart ausblenden und nur #convDetail zum Overlay machen. */
  #emptyDetail {
    display: none !important;
  }
  .app.mobile-conv-open #convDetail {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--ix-ivory);
  }
  /* ─── Contact sidebar: hide on mobile ─── */
  .contact-sidebar {
    display: none !important;
  }

  /* ─── Full-width views (stats, settings, KB, etc.) ─── */
  .stats-view,
  .settings-view,
  .ai-view,
  .kb-view,
  .contacts-view,
  .features-view,
  .surveys-view,
  .news-view {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* ─── Stats view: tighter padding on mobile ─── */
  .stats-view {
    padding: 24px 16px 40px !important;
  }
  .overview-header { margin-bottom: 20px !important; }
  .overview-header h1 { font-size: 22px !important; }
  .overview-main { grid-template-columns: 1fr !important; }
  .overview-lists { grid-template-columns: 1fr !important; }

  /* ─── Reply box: tighter on mobile ─── */
  .reply-box {
    padding: 0 12px 12px !important;
  }
  .reply-box textarea {
    padding: 12px 80px 12px 14px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* ─── Messages: less padding ─── */
  .conv-messages {
    padding: 20px 14px 12px !important;
  }
  .msg { max-width: 85% !important; }

  /* ─── Settings view: single column nav ─── */
  .settings-view {
    flex-direction: column !important;
  }
  .settings-nav {
    width: 100% !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .settings-content {
    flex: 1 !important;
    overflow-y: auto !important;
  }

  /* ─── Conv detail header: add padding for hamburger button ─── */
  .conv-detail-header {
    padding-left: 60px !important;
  }

  /* ─── Mein-Tag mobile header padding ─── */
  .stats-view {
    padding-top: 60px !important;
  }

  /* ─── Prevent iOS Safari auto-zoom on input focus ─── */
  .conv-search-wrap input {
    font-size: 16px;
  }
}

/* =========================
   Testrunde
   ========================= */
.testing-view {
  /* wie die uebrigen Vollbild-Ansichten: Spalte 2 bis Ende, damit sie auch
     bei aufgeklappter Leiste passt und kein Zuklappen erzwungen werden muss. */
  grid-column: 2 / -1;
  overflow-y: auto;
  background: var(--ix-bg);
  padding: 40px 28px 80px;
}
.testing-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.testing-hero {
  padding: 32px;
  border: 1px solid var(--ix-line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 0, 157, 0.06), transparent 60%);
}
.testing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ix-accent, #ff009d);
  background: rgba(255, 0, 157, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.testing-hero h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ix-text);
}
.testing-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ix-text-mute);
  margin: 0;
  max-width: 720px;
}
.testing-role-hint {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: rgba(255, 153, 0, 0.08);
  border-left: 3px solid #e89400;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ix-text);
  line-height: 1.5;
  max-width: 720px;
}

.testing-start-cta {
  margin-top: 20px;
  padding: 18px 22px;
  background: white;
  border: 1px solid var(--ix-line);
  border-radius: 12px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.testing-start-cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 680px;
}
.testing-start-cta-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ix-text);
}
.testing-start-cta-text span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ix-text-mute);
}
.testing-start-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Legende direkt über der Checkliste */
.testing-legend {
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--ix-bg);
  border: 1px solid var(--ix-line);
  border-radius: 10px;
}
.testing-legend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ix-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.testing-legend-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 16px;
  margin-bottom: 12px;
}
.testing-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ix-text);
}
.testing-legend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  flex-shrink: 0;
}
.testing-legend-pill.ok { background: #2e7d32; }
.testing-legend-pill.problem { background: #d32f2f; }
.testing-legend-pill.skipped { background: #666; }
.testing-legend-footer {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ix-text-mute);
  padding-top: 10px;
  border-top: 1px dashed var(--ix-line);
}
.testing-legend-footer strong { color: var(--ix-text); font-weight: 600; }
.testing-legend-sep { margin: 0 6px; opacity: 0.5; }

/* Chevron auffälliger */
.testing-section-chevron {
  opacity: 0.8 !important;
}

/* Feedback-Formular Intro-Block */
.testing-feedback-intro {
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--ix-bg);
  border-left: 3px solid var(--ix-accent, #ff009d);
  border-radius: 4px;
}
.testing-feedback-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ix-text);
}
.testing-feedback-intro p + p {
  margin-top: 8px;
}
.testing-feedback-intro strong {
  color: var(--ix-text);
  font-weight: 700;
}

.testing-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.testing-section-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.testing-section-lead {
  color: var(--ix-text-mute);
  font-size: 14px;
  margin: 0 0 20px;
}

.testing-guide {
  background: var(--ix-card);
  border: 1px solid var(--ix-line);
  border-radius: 12px;
  padding: 24px;
}
.testing-guide h2 { font-size: 18px; margin: 0 0 16px; }
.testing-steps {
  padding-left: 20px;
  margin: 0 0 20px;
  color: var(--ix-text);
  font-size: 14px;
  line-height: 1.65;
}
.testing-steps li { margin-bottom: 8px; }
.testing-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.testing-tip {
  background: var(--ix-bg);
  border: 1px solid var(--ix-line);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ix-text-mute);
}
.testing-tip strong { color: var(--ix-text); }

.testing-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
.testing-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--ix-line);
  border-radius: 999px;
  overflow: hidden;
}
.testing-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ix-accent, #ff009d);
  transition: width 0.3s ease;
}
.testing-progress-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ix-text-mute);
  min-width: 60px;
  text-align: right;
}

.testing-checklist-section,
.testing-feedback-section,
.testing-admin-panel {
  background: var(--ix-card);
  border: 1px solid var(--ix-line);
  border-radius: 12px;
  padding: 24px;
}

.testing-checklist { display: flex; flex-direction: column; gap: 14px; }
.testing-section {
  border: 1px solid var(--ix-line);
  border-radius: 10px;
  background: var(--ix-bg);
  overflow: hidden;
}
.testing-section-head {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.testing-section-head:hover { background: var(--ix-hover, rgba(0,0,0,0.03)); }
.testing-section-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ix-text);
}
.testing-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ix-accent, #ff009d);
  color: white;
  font-size: 12px;
  font-weight: 700;
}
.testing-section-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--ix-text-mute);
}
.testing-section-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  opacity: 0.5;
}
.testing-section.open .testing-section-chevron { transform: rotate(180deg); }
.testing-section-body { display: none; padding: 4px 16px 16px; }
.testing-section.open .testing-section-body { display: block; }
.testing-section-goal {
  font-size: 13px;
  color: var(--ix-text-mute);
  background: rgba(255, 0, 157, 0.05);
  border-left: 3px solid var(--ix-accent, #ff009d);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.testing-items { display: flex; flex-direction: column; gap: 4px; }
.testing-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}
.testing-item + .testing-item {
  border-top: 1px solid var(--ix-line);
  border-radius: 0;
}
.testing-item:hover { background: var(--ix-hover, rgba(0,0,0,0.03)); }
.testing-item-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--ix-text-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.testing-item-text {
  font-size: 14px;
  color: var(--ix-text);
  line-height: 1.45;
}
.testing-item.state-ok .testing-item-text { color: var(--ix-text-mute); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.2); }
.testing-item.state-problem .testing-item-text { color: #d32f2f; font-weight: 500; }

/* Segmented Control mit sichtbaren Labels — kein Rätselraten mehr */
.testing-state-btns {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ix-card);
}
.testing-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-right: 1px solid var(--ix-line);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ix-text-mute);
  white-space: nowrap;
  transition: all 0.12s;
}
.testing-state-btn:last-child { border-right: 0; }
.testing-state-btn:hover { background: var(--ix-hover, rgba(0,0,0,0.04)); color: var(--ix-text); }
.testing-state-btn .testing-state-icon {
  font-weight: 700;
  font-size: 14px;
  width: 14px;
  text-align: center;
}
.testing-state-btn .testing-state-label { font-weight: 500; }
.testing-state-btn.active-ok { background: #2e7d32; color: white; }
.testing-state-btn.active-ok:hover { background: #1b5e20; color: white; }
.testing-state-btn.active-problem { background: #d32f2f; color: white; }
.testing-state-btn.active-problem:hover { background: #b71c1c; color: white; }
.testing-state-btn.active-skipped { background: #666; color: white; }
.testing-state-btn.active-skipped:hover { background: #444; color: white; }

.testing-section-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--ix-line);
}
.testing-section-note label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ix-text-mute);
  margin-bottom: 6px;
}
.testing-section-note-opt {
  font-weight: 400;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.testing-section-note textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--ix-line);
  border-radius: 6px;
  background: var(--ix-card);
  font: inherit;
  font-size: 13px;
  color: var(--ix-text);
  resize: vertical;
}
.testing-section-note textarea:focus {
  outline: none;
  border-color: var(--ix-accent, #ff009d);
}

/* Feedback-Formular */
.testing-feedback-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eee;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.testing-feedback-status.submitted {
  background: #e8f5e9;
  color: #2e7d32;
}

.testing-feedback-form { display: flex; flex-direction: column; gap: 24px; }
.tf-field { display: flex; flex-direction: column; gap: 6px; }
.tf-field > label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ix-text);
}
.tf-field .tf-help {
  font-size: 13px;
  color: var(--ix-text-mute);
  margin: 0 0 4px;
  line-height: 1.45;
}
.tf-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  background: var(--ix-bg);
  font: inherit;
  font-size: 14px;
  color: var(--ix-text);
  resize: vertical;
  line-height: 1.5;
}
.tf-field textarea:focus {
  outline: none;
  border-color: var(--ix-accent, #ff009d);
  background: var(--ix-card);
}
.tf-triple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.tf-triple .tf-sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ix-text-mute);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tf-ratings,
.tf-speed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.tf-ratings label,
.tf-speed label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  background: var(--ix-bg);
}
.tf-ratings select,
.tf-speed select {
  padding: 4px 8px;
  border: 1px solid var(--ix-line);
  border-radius: 6px;
  background: var(--ix-card);
  font: inherit;
  font-size: 13px;
  min-width: 80px;
}
.tf-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.tf-trust label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.12s;
}
.tf-trust label:hover { border-color: var(--ix-accent, #ff009d); }
.tf-trust input { margin: 0; }

.tf-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ix-line);
  flex-wrap: wrap;
}
.tf-submit-help {
  font-size: 13px;
  color: var(--ix-text-mute);
}
.tf-submit-help.submitted { color: #2e7d32; font-weight: 600; }

/* Admin-Übersicht */
.testing-submissions-list { display: flex; flex-direction: column; gap: 10px; }
.testing-submission-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--ix-line);
  border-radius: 10px;
  background: var(--ix-bg);
  transition: all 0.12s;
}
.testing-submission-row:hover {
  border-color: var(--ix-accent, #ff009d);
}
.testing-submission-name { font-weight: 700; font-size: 15px; }
.testing-submission-email { font-size: 12px; color: var(--ix-text-mute); margin-top: 2px; }
.testing-submission-progress {
  font-size: 13px;
  color: var(--ix-text-mute);
  font-variant-numeric: tabular-nums;
}
.testing-submission-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.testing-submission-status.draft { background: #f5f5f5; color: #777; }
.testing-submission-status.submitted { background: #e8f5e9; color: #2e7d32; }
.testing-submission-status.in_progress { background: #fff8e1; color: #b26500; }

/* Modal für Admin-Detail-Ansicht — nutzt vorhandene News-Modal-Styles als Basis */
.testing-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.testing-detail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.testing-detail-modal-content {
  position: relative;
  background: var(--ix-card);
  border-radius: 14px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.testing-detail-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--ix-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.testing-detail-modal-header h3 { margin: 0; font-size: 18px; }
.testing-detail-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.testing-detail-modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--ix-text-mute);
  border-radius: 50%;
}
.testing-detail-modal-close:hover { background: var(--ix-hover, rgba(0,0,0,0.06)); }

.td-section { margin-bottom: 22px; }
.td-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ix-text-mute);
  margin: 0 0 8px;
}
.td-section pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--ix-bg);
  border: 1px solid var(--ix-line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ix-text);
  margin: 0;
}
.td-ratings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.td-rating-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--ix-bg);
  border-radius: 8px;
  font-size: 13px;
}
.td-rating-value { font-weight: 700; }
.td-checklist { display: flex; flex-direction: column; gap: 6px; }
.td-checklist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--ix-bg);
  border-radius: 6px;
  font-size: 13px;
}
.td-check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.td-check-dot.ok { background: #2e7d32; }
.td-check-dot.problem { background: #d32f2f; }
.td-check-dot.skipped { background: #888; }
.td-check-dot.open { background: transparent; border: 1px dashed #aaa; }

@media (max-width: 768px) {
  .testing-view { padding: 20px 14px 60px; }
  .testing-hero { padding: 22px; }
  .testing-hero h1 { font-size: 22px; }
  .testing-section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .testing-progress { width: 100%; }
  .tf-submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .testing-submission-row { grid-template-columns: 1fr auto; }
  .testing-submission-progress { grid-column: 1; }
  .testing-submission-status { grid-column: 2; }
}

/* ============================================================
   Email-Channel-Transparency
   Channel-Badge, Delivery-Status, Hover-Tooltip, Quote-Collapse,
   Original-Email-Modal.
   ============================================================ */

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  line-height: 1.4;
}
.channel-badge.channel-email { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.channel-badge.channel-whatsapp { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.channel-badge.channel-telegram { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.channel-badge.channel-instagram { background: #fce7f3; color: #be185d; border-color: #fbcfe8; }
.channel-badge.channel-facebook { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }

.msg-delivery-status {
  display: inline-flex;
  align-items: center;
  cursor: help;
  margin-left: 2px;
}
.msg-delivery-status.failed { color: #dc2626; }
.msg-delivery-status.failed:hover { color: #b91c1c; }

.delivery-tooltip {
  position: fixed;
  z-index: 5000;
  width: 280px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.05);
  padding: 10px 0;
  font-size: 12.5px;
  color: #1f2937;
  pointer-events: none;
}
.delivery-tooltip .dt-header {
  padding: 0 14px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #f3f4f6;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
}
.delivery-tooltip .dt-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 14px;
  gap: 10px;
}
.delivery-tooltip .dt-row + .dt-row { border-top: 1px solid #f9fafb; }
.delivery-tooltip .dt-label { color: #111827; line-height: 1.4; }
.delivery-tooltip .dt-rcpt {
  color: #9ca3af;
  font-size: 11.5px;
  margin-top: 2px;
  word-break: break-all;
}
.delivery-tooltip .dt-time {
  color: #9ca3af;
  font-size: 11.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.delivery-tooltip .dt-loading,
.delivery-tooltip .dt-empty {
  padding: 8px 14px;
  color: #9ca3af;
  font-style: italic;
}

.msg-quote-block {
  margin-top: 10px;
  font-size: 12.5px;
  color: #6b7280;
}
.msg-quote-block summary {
  cursor: pointer;
  color: #6b7280;
  list-style: none;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  width: fit-content;
  user-select: none;
  font-size: 11.5px;
}
.msg-quote-block summary::-webkit-details-marker { display: none; }
.msg-quote-block summary:hover { background: #f3f4f6; }
.msg-quote-block summary::before {
  content: '▸ ';
  margin-right: 4px;
  display: inline-block;
}
.msg-quote-block[open] summary::before { content: '▾ '; }
.msg-quote-block pre {
  margin: 8px 0 0;
  padding: 10px 14px;
  background: #fafafa;
  border-left: 3px solid #e5e7eb;
  border-radius: 0 6px 6px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12.5px;
  color: #6b7280;
  white-space: pre-wrap;
  line-height: 1.5;
  max-height: 260px;
  overflow-y: auto;
}

.msg-original-link {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #9ca3af;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.msg-original-link:hover {
  background: #f9fafb;
  color: #4b5563;
  border-color: #d1d5db;
}

/* Original-Email modal */
.oe-headers {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.oe-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  font-size: 13px;
  padding: 4px 0;
  line-height: 1.5;
}
.oe-row + .oe-row { border-top: 1px solid #f3f4f6; }
.oe-key {
  color: #9ca3af;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-top: 2px;
}
.oe-val {
  color: #1f2937;
  word-break: break-word;
}
.oe-headers-toggle {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: #e5e7eb;
  text-underline-offset: 3px;
  margin-bottom: 8px;
}
.oe-headers-toggle:hover { color: #1f2937; text-decoration-color: #9ca3af; }
.oe-headers-full {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #1f2937;
  color: #d1d5db;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}
.oe-body-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 14px;
}
.oe-body-frame {
  width: 100%;
  border: 0;
  min-height: 360px;
  height: 60vh;
  background: #ffffff;
}
.oe-body-text {
  margin: 0;
  padding: 16px 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #1f2937;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Sprint 4: settings toggles + email preview */
.setting-row-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
  font-size: 13px;
  color: var(--ix-ink);
  cursor: pointer;
}
.setting-row-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }

.setting-card-warn {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 12.5px;
  line-height: 1.55;
}

.email-preview {
  margin-top: 14px;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  padding: 12px 14px;
}
.email-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.email-preview-body {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.55;
}


/* ============================================================
   Kontexthilfe: einheitliches ?-Icon mit Erklär-Bubble.
   Ein Muster für das ganze Dashboard, touch-tauglich (Klick
   toggelt), tastaturbedienbar (Fokus zeigt), zentrale Text-
   quelle in app.js (HELP_TEXTS). Ersetzt lose title=-Tooltips.
   ============================================================ */
.help-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.4px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin-left: 6px;
  position: relative;
  vertical-align: middle;
  flex: none;
  cursor: help;
  font-family: inherit;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.help-hint:hover,
.help-hint:focus-visible,
.help-hint.is-open {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
  outline: none;
}
.help-hint .help-bubble {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 250px;
  background: #1f2430;
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  padding: 9px 11px;
  border-radius: 9px;
  box-shadow: 0 8px 24px -8px rgba(17, 20, 28, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.13s ease, transform 0.13s ease;
  z-index: 60;
}
.help-hint .help-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2430;
}
.help-hint:hover .help-bubble,
.help-hint:focus-visible .help-bubble,
.help-hint.is-open .help-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Nahe am linken Rand: Bubble nicht mittig, sondern linksbündig ausrichten,
   damit sie nicht aus dem Viewport ragt. */
.help-hint.hint-align-left .help-bubble {
  left: 0;
  transform: translateX(-4px) translateY(4px);
}
.help-hint.hint-align-left .help-bubble::after { left: 12px; }
.help-hint.hint-align-left:hover .help-bubble,
.help-hint.hint-align-left:focus-visible .help-bubble,
.help-hint.hint-align-left.is-open .help-bubble {
  transform: translateX(-4px) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .help-hint .help-bubble { transition: opacity 0.13s ease; }
}

/* ============================================================
   Hilfe-Center (interne Produkt-Hilfe + "Frag das Tool")
   ============================================================ */
.help-view {
  grid-column: 2 / -1;
  overflow-y: auto;
  background: var(--bg);
  padding: 40px 28px 80px;
}
.help-inner {
  max-width: 720px;
  margin: 0 auto;
}
.help-header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  margin: 0 0 6px;
}
.help-header p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 22px;
}

/* Frage-Box ("Frag das Tool") */
.help-ask-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 16px;
  margin-bottom: 26px;
}
.help-ask-row {
  display: flex;
  gap: 10px;
}
.help-ask-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color 0.12s ease;
}
.help-ask-row input:focus { border-color: var(--accent); }
.help-answer {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.help-answer-loading {
  color: var(--text-muted);
  font-size: 13.5px;
}
.help-answer-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.help-answer-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 100px;
  padding: 2px 8px;
  margin-right: 8px;
  vertical-align: 1px;
}
.help-answer-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.help-source-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.help-source-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* Artikel-Suche */
.help-search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 22px;
  color: var(--text-muted);
}
.help-search-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}

/* Kategorien + Artikel-Liste */
.help-cat { margin-bottom: 22px; }
.help-cat-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0 2px 8px;
}
.help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s ease;
}
.help-item:hover {
  border-color: var(--accent);
  box-shadow: var(--card-shadow-hover);
}
.help-item-arrow {
  color: var(--text-muted);
  font-size: 16px;
}

/* Artikel-Leser */
.help-back {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
}
#helpArticle h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
  margin: 0 0 14px;
}
.help-article-body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 22px 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}
.help-article-body p { margin: 0 0 12px; }
.help-article-body p:last-child { margin-bottom: 0; }
.help-article-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.help-article-body li { margin-bottom: 6px; }
.help-article-body kbd {
  display: inline-block;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg);
  padding: 1px 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

/* Mobil: Frage-Zeile bricht um */
@media (max-width: 560px) {
  .help-view { padding: 24px 16px 60px; }
  .help-ask-row { flex-direction: column; }
}

/* ── Fehler ehrlich machen (Audit A1/A2) ── */
/* Verbindungs-Band: volle Breite oben und RESERVIERT Platz (body.conn-lost
   schiebt den Inhalt), statt Ticket-Kopfzeile, Hamburger und Zurueck-Pfeil
   zu ueberdecken (Welle-2-Blocker, Steves Fix: im Offline-Fall war das
   Ticket am Handy eine Sackgasse). */
:root { --conn-banner-h: 0px; }
body.conn-lost { --conn-banner-h: 38px; }
.conn-banner {
  position: fixed; top: 0; left: 0; right: 0;
  height: 38px; display: flex; align-items: center; justify-content: center;
  z-index: 12000; background: #92400e; color: #fef3c7;
  padding: 0 18px;
  font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.conn-lost .app { padding-top: var(--conn-banner-h); }
@media (max-width: 768px) {
  /* Die fixe Ticket-Shell haengt nicht am .app-Padding: eigene Reserve.
     !important noetig, weil der Inline-Block in index.html inset:0
     !important setzt und die top-Regel sonst verliert (Steves Nachzieher
     aus Welle 2); die ID-Spezifitaet hier gewinnt dann. */
  body.conn-lost .app.mobile-conv-open #convDetail {
    top: var(--conn-banner-h) !important;
    height: calc(var(--vvh, 100dvh) - var(--conn-banner-h)) !important;
    max-height: calc(var(--vvh, 100dvh) - var(--conn-banner-h)) !important;
  }
  body.conn-lost .mobile-menu-btn { top: calc(var(--conn-banner-h) + 12px + env(safe-area-inset-top, 0px)) !important; }
}
.conv-list-error {
  margin: 16px 12px; padding: 24px 16px; text-align: center;
  background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 12px; color: #b91c1c; font-size: 13px;
}
.conv-list-error p { margin: 0 0 12px; }
.conv-list-error .btn-retry {
  padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: #dc2626; color: #fff; font-weight: 600; font-size: 13px;
}
.composer-error {
  margin: 0 0 8px; padding: 8px 12px; border-radius: 8px;
  background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.45);
  color: #b91c1c; font-size: 12.5px; line-height: 1.5;
}

/* ── Prioritaets-Dropdown im Ticket-Kopf (Audit A13) ── */
.priority-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  /* Kleines Caret, damit das Menue als Menue erkennbar ist (Lena). */
  padding-right: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%23777777'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
}

/* ── Kundeninfo-Drawer unter 1100px (Audit A10) ── */
.sidebar-toggle-btn { display: none; }
.drawer-head { display: none; }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 10990;
  background: rgba(15, 12, 24, 0.45);
}
/* Beim Vergroessern des Fensters darf kein verwaistes Backdrop die App
   abdecken (Steve K1b); die Drawer-Klasse ist ab 1101px wirkungslos. */
@media (min-width: 1101px) { .drawer-backdrop { display: none !important; } }
@media (max-width: 1100px) {
  .sidebar-toggle-btn { display: inline-flex; }
  .app.contact-drawer-open .contact-sidebar {
    display: block !important;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw);
    z-index: 11000;
    background: var(--ix-white, #fff);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .app.contact-drawer-open .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    padding: 10px 12px 10px 22px;
    background: var(--ix-white, #fff);
    border-bottom: 1px solid var(--ix-line);
    font-weight: 600; font-size: 14px;
  }
}

/* ── Mobil-A-Block (Audit A14 bis A20) ── */

/* A19: Bulk-Leiste darf umbrechen, der X-Knopf bleibt im Bild. */
.bulk-bar { flex-wrap: wrap; row-gap: 8px; }

/* A18: Editor-X war ein ungestylter Reset-Button mit ~10x16px Treffer. */
.close-btn {
  border: none; background: transparent; cursor: pointer;
  width: 40px; height: 40px; border-radius: 8px;
  font-size: 22px; line-height: 1; color: var(--ix-ink, #1a1a1e);
  display: inline-flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: rgba(0, 0, 0, 0.06); }

/* A20: "..."-Knopf nur mobil sichtbar. */
.conv-header-more { display: none; }

/* Langer Kontaktname darf den fixen Kopf nicht seitlich sprengen (Steve). */
.conv-detail-header .conv-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 768px) {
  /* A17: 16px-Minimum gegen iOS-Dauerzoom fuer ALLE Eingabeelemente
     (CTO-Entscheid Welle 2, Steve: der iOS-Select-Picker ist eine
     Input-View, die Select-Ausnahme war eine Wette; Echtgeraet-Test
     bestaetigt spaeter nur noch). */
  .app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .app textarea,
  .app select { font-size: 16px !important; }
  .schedule-row { flex-wrap: wrap; }

  /* A14: KI-Vorschlaege duerfen den Composer nicht aus dem Bild druecken.
     Bezug ist die SICHTBARE Hoehe (--vvh): dvh ignoriert die iOS-Tastatur. */
  .reply-suggestions {
    max-height: calc(var(--vvh, 100dvh) * 0.34);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* A15: fixe Ticket-Shell folgt der sichtbaren Viewport-Hoehe (Tastatur).
     top/height gewinnen per Spezifitaet; iOS schiebt den Layout-Viewport
     beim Fokussieren weg, --vvt holt die Shell zurueck ins Bild. */
  .app.mobile-conv-open #convDetail {
    height: var(--vvh, 100dvh);
    max-height: var(--vvh, 100dvh);
    transform: translateY(var(--vvt, 0px));
  }

  /* Kopf-Name mit sinnvoller Mindestbreite (Steve, Welle 2): sonst
     schrumpft der Name im kompakten Kopf auf ein einzelnes Zeichen;
     der Kopf darf dafuer zweizeilig werden (weiter deutlich unter den
     alten ~165px). */
  .conv-detail-header .conv-name { min-width: 110px; }

  /* A18 + Touch-Ziele (Steve P5). */
  .close-btn { width: 44px; height: 44px; }
  .conv-detail-header .btn-icon,
  .mobile-back-btn { width: 44px; height: 44px; min-width: 44px; }
  .bulk-action-btn { width: 44px; height: 44px; }

  /* Safe-Areas: viewport-fit=cover ist jetzt aktiv, also brauchen Composer
     und Menue-Knopf echte Polster (Steve P6). */
  .reply-box { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-menu-btn { top: calc(12px + env(safe-area-inset-top, 0px)) !important; }

  /* A20: Kopf kompakt: Zurueck + Name + Status + Kundeninfo + "Mehr".
     Verstecken ueber :not(.more-open) mit !important, damit auch
     JS-Inline-Styles (Tag-Vorschlag) im zugeklappten Zustand verlieren;
     aufgeklappt regieren Basis-CSS und Inline-Styles wieder (Steve K2/K2b,
     kein display:revert, das faellt auf User-Agent-Werte zurueck). */
  .conv-header-more { display: inline-flex; align-items: center; min-height: 44px; }
  .conv-detail-header:not(.more-open) .conv-tags,
  .conv-detail-header:not(.more-open) .tag-suggestion,
  .conv-detail-header:not(.more-open) .tag-select,
  .conv-detail-header:not(.more-open) .assign-select,
  .conv-detail-header:not(.more-open) .snooze-wrap,
  .conv-detail-header:not(.more-open) .priority-select,
  .conv-detail-header:not(.more-open) #mergeBtn,
  .conv-detail-header:not(.more-open) .conv-detail-delete-btn { display: none !important; }
}

/* Tag-Entfernen-X ist hover-only und damit auf Touch unsichtbar (Steve). */
@media (hover: none) {
  .conv-tag .tag-remove { opacity: 1; }
}

/* Toasts muessen ueber Drawer (11000) und Backdrop (10990) liegen, sonst
   verschwinden Rueckmeldungen aus dem Drawer hinter dem Schleier (Steve). */
.toast { z-index: 12500; }
.toast.toast-error {
  background: #b91c1c; color: #fff; font-weight: 600;
}

/* "Mehr"-Knopf (A20): beschriftet, kein Icon-only. */
.conv-header-more {
  border: 1px solid var(--ix-line); background: transparent;
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ix-ink, #1a1a1e);
}

/* Bandtext: schmale Viewports bekommen die Kurzfassung (Lena, Welle 2),
   sonst wuerde der lange Satz im 38px-Band abgeschnitten. */
.conn-banner-short { display: none; }
@media (max-width: 600px) {
  .conn-banner-long { display: none; }
  .conn-banner-short { display: inline; }
}