/* voiceOne Mobile V2 — Brand-aligned with Desktop App */
:root {
  /* Brand — monochrome primary (von styles.css) */
  --primary: #2e2e2e;
  --primary-strong: #1e1e1e;
  --primary-gradient: linear-gradient(135deg, #3e3e3e 0%, #1e1e1e 100%);

  /* Accent — hellblau (aus Desktop-Toggles #98b8cc) */
  --accent: #98b8cc;
  --accent-strong: #6F99B2;
  --accent-soft: rgba(152, 184, 204, .15);

  /* States */
  --success: #5CB85C;
  --warning: #F0AD4E;
  --danger: #D9534F;

  /* Surfaces */
  --bg: #f8f9fa;
  --bg-elev: rgba(255, 255, 255, 0.95);
  --bg-subtle: #f1f3f5;
  --sidebar-tint: linear-gradient(180deg, #e8ecf1 0%, #dfe5ed 100%);
  --glass: rgba(255, 255, 255, 0.15);

  /* Typography */
  --ink: #1a1f24;
  --ink-dim: #57636C;
  --ink-muted: #8b95a1;

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --border-subtle: rgba(0, 0, 0, 0.05);

  /* Layout */
  --nav-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Radii */
  --radius-sheet: 24px;
  --radius-card: 16px;
  --radius-btn: 12px;

  /* Shadows (aus Desktop --card-shadow) */
  --shadow-card: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --shadow-card-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.22);
  --shadow-fab: 0 10px 30px rgba(46, 46, 46, .35);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, .06);

  /* Card surfaces (genutzt von .list-card, .call-card, etc.) */
  --card-bg: rgba(255, 255, 255, 0.95);
  --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* Fonts (matches Desktop 'Segoe UI') */
  --font-app: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --bg-elev: rgba(30, 34, 40, 0.95);
    --bg-subtle: #1c1f24;
    --sidebar-tint: linear-gradient(180deg, #1e2228 0%, #14161a 100%);
    --glass: rgba(255, 255, 255, 0.05);
    --ink: #f2f4f6;
    --ink-dim: #c4cad0;
    --ink-muted: #8b95a1;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, .4);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, .3);
    --card-bg: rgba(34, 36, 40, 0.85);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-app);
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
button { font-family: inherit; }

/* Boot Splash */
.boot-splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 1000;
  transition: opacity .25s ease;
}
.boot-splash.hide { opacity: 0; pointer-events: none; }
.boot-splash-logo img { height: 48px; }
.boot-splash-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* View Root */
.view-root {
  flex: 1;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
  padding-top: var(--safe-top);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative; /* pull-to-refresh indicator anchor */
  overscroll-behavior-y: contain;
}
.view-root[hidden] { display: none; }

/* === Bottom Nav === */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--sidebar-tint);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr 100px 1fr 1fr;
  align-items: center;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.bottom-nav[hidden] { display: none; }

.nav-item {
  height: 100%;
  min-width: 44px;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease;
}
.nav-item i { font-size: 20px; }
.nav-item.active { color: var(--primary); }
.nav-item.active span { font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .nav-item { color: var(--ink-dim); }
  .nav-item.active { color: var(--ink); }
}

.nav-fab {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background: var(--primary-gradient);
  color: white;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-fab);
  transform: translateY(-16px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-fab:active { transform: translateY(-14px) scale(.96); }
.nav-fab-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  pointer-events: none;
}
.nav-fab-ring[data-state="online"] {
  border: 2px solid var(--success);
  box-shadow: 0 0 0 3px rgba(92, 184, 92, .15);
}
.nav-fab-ring[data-state="ringing"] {
  border: 2px solid var(--warning);
  animation: pulse-ring 1.2s ease-out infinite;
}
.nav-fab-ring[data-state="in-call"] {
  border: 2px solid var(--danger);
  animation: pulse-ring 1.6s ease-out infinite;
}
.nav-fab-ring[data-state="offline"] { border: 2px solid var(--ink-muted); opacity: .6; }
.nav-fab-ring[data-state="connecting"] {
  border: 2px solid var(--accent);
  animation: pulse-ring 1.2s ease-out infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: .8; }
  100% { box-shadow: 0 0 0 10px transparent; opacity: 0; }
}

/* === Toast === */
.toast-host {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-elev);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: var(--shadow-card);
  animation: toast-in .3s ease;
  pointer-events: auto;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--success); color: var(--success); }
@keyframes toast-in {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* === Sheet === */
.sheet-host {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.sheet-host.active { pointer-events: auto; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s ease;
}
.sheet-host.active .sheet-backdrop { opacity: 1; }
.sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  max-height: 95vh;
  background: var(--bg-elev);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2,.9,.2,1);
  padding-bottom: var(--safe-bottom);
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}
.sheet-host.active .sheet { transform: translateY(0); }
.sheet-handle {
  display: block;
  width: 40px;
  height: 5px;
  background: var(--border-strong);
  border-radius: 3px;
  margin: 8px auto 4px;
}

/* === LOGIN === */
.login-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 48px) 24px calc(var(--safe-bottom) + 24px);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 10% 0%, rgba(152, 184, 204, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(46, 46, 46, 0.06) 0%, transparent 40%);
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.login-brand img {
  height: 44px;
  width: auto;
  margin-bottom: 14px;
}
.login-brand-sub {
  font-size: 14px; color: var(--ink-muted); margin: 0;
  letter-spacing: 0.01em;
}
.login-card {
  background: var(--bg-elev);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-subtle);
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(46, 46, 46, .12);
}
.btn-primary {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--primary-gradient);
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(46, 46, 46, 0.25);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost {
  width: 100%;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: color .15s ease;
}
.btn-ghost:hover { color: var(--primary); }
.btn-ghost strong { color: var(--primary); font-weight: 600; }
.login-error {
  background: rgba(217, 83, 79, .08);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid rgba(217, 83, 79, .2);
}
.login-meta {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: var(--ink-muted);
}
.login-meta a { color: var(--ink-dim); text-decoration: none; }
.login-meta a strong { color: var(--primary); font-weight: 600; }
.login-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.login-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.login-info {
  background: rgba(46, 139, 87, .08);
  color: #1e7a4c;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
  border: 1px solid rgba(46, 139, 87, .2);
}
.login-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 4px 0 14px;
  cursor: pointer;
}
.login-accept input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.login-accept a {
  color: var(--primary);
  text-decoration: underline;
}

/* === HOME === */
.home-header {
  padding: 20px 20px 12px;
}
.home-greeting {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.home-title {
  font-size: 26px;
  font-weight: 700;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.home-section {
  padding: 16px 20px 4px;
}
.home-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* KPI Row */
.kpi-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 20px 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.kpi-row::-webkit-scrollbar { display: none; }
.kpi-card {
  flex: 0 0 auto;
  min-width: 150px;
  background: var(--bg-elev);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
}
.kpi-label {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.kpi-value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kpi-delta {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* Action Cards */
.action-card {
  background: var(--bg-elev);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  margin: 0 20px 10px;
  border-radius: var(--radius-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .1s ease, box-shadow .15s ease;
}
.action-card:active { transform: scale(.99); }
.action-card-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.action-card-icon.primary {
  background: var(--primary-gradient);
  color: white;
}
.action-card-body { flex: 1; min-width: 0; }
.action-card-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--ink); }
.action-card-sub { font-size: 13px; color: var(--ink-muted); margin: 2px 0 0; }
.action-card-cta {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 18px;
  cursor: pointer;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 32px;
  color: var(--ink-muted);
}
.empty-state i {
  font-size: 36px;
  opacity: .4;
  margin-bottom: 12px;
  color: var(--primary);
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.empty-state-sub { font-size: 13px; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--border-subtle) 0%, var(--border) 50%, var(--border-subtle) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Generic View === */
.view-plain {
  padding: 20px;
}
.view-plain-header {
  padding: 4px 0 20px;
}
.view-plain-kicker {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.view-plain h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* === More (Menü) === */
.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.more-tile {
  background: var(--bg-elev);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 18px 14px;
  box-shadow: var(--shadow-card);
  text-align: left;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
  transition: transform .1s ease, box-shadow .15s ease;
}
.more-tile:active { transform: scale(.97); }
.more-tile i {
  font-size: 20px;
  color: var(--primary);
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.more-tile-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.more-tile-sub { font-size: 11px; color: var(--ink-muted); line-height: 1.4; }
.more-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 22px 0 6px;
}
.more-footer {
  padding: 32px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
}
.more-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.more-footer-brand img { height: 22px; opacity: .5; }
.more-footer-version { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.more-footer button {
  margin-top: 12px;
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.more-footer button:active { background: rgba(217, 83, 79, .08); }

/* === Bottom-Sheet (shared) === */
.sheet-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 26, 0);
  transition: background .25s ease;
  pointer-events: none;
}
.sheet-backdrop.show { background: rgba(15, 20, 26, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #fafbfc 0%, #f1f3f5 100%);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -12px 40px rgba(15, 20, 26, .18);
  padding: 8px 20px calc(20px + var(--safe-bottom)) 20px;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.9,.25,1.05);
  pointer-events: auto;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sheet.show { transform: translateY(0); }
.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #c9ced5;
  margin: 6px auto 10px auto;
}

/* === Dialer === */
.sheet-dialer { gap: 16px; }

.dialer-status {
  align-self: center;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--bg-subtle);
  color: var(--ink-dim);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  min-width: 60%;
  max-width: 90%;
  line-height: 1.3;
}
.dialer-status-title { font-size: 13px; font-weight: 600; }
.dialer-status-sub { font-size: 11px; font-weight: 500; opacity: .85; margin-top: 2px; }
.dialer-status[data-state="online"] { color: #2a7d2a; background: rgba(92, 184, 92, .15); }
.dialer-status[data-state="connecting"] { color: var(--accent-strong); background: var(--accent-soft); }
.dialer-status[data-state="healing"] { color: var(--accent-strong); background: var(--accent-soft); }
.dialer-status[data-state="offline"] { color: var(--danger); background: rgba(217, 83, 79, .1); }
.dialer-status[data-state="in-call"] { color: var(--danger); background: rgba(217, 83, 79, .1); }

.dialer-status-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dialer-status-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: dialer-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes dialer-spin {
  to { transform: rotate(360deg); }
}

.dialer-diag {
  align-self: stretch;
  margin: 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.dialer-diag-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dialer-diag-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.dialer-diag-btn {
  background: var(--primary-gradient, linear-gradient(135deg, #2e2e2e, #1a1a1a));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dialer-diag-btn:disabled { opacity: .6; cursor: default; }
@media (prefers-color-scheme: dark) {
  .dialer-diag { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
  .dialer-diag-line { color: var(--ink); }
}

.dialer-agent-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0 0 4px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
.dialer-agent-selector .dialer-agent-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.dialer-agent-selector .fa-chevron-down { font-size: 10px; opacity: .6; }
.dialer-agent-selector .fa-user-headset { color: var(--accent-strong); }
@media (prefers-color-scheme: dark) {
  .dialer-agent-selector { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
}

.dialer-agent-picker {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  z-index: 2200;
  width: min(92vw, 420px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: 16px;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
.dialer-agent-picker * { pointer-events: auto; }
.dialer-agent-picker.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.dialer-agent-picker-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.dialer-agent-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dialer-agent-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.dialer-agent-picker-row[data-active="1"] {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}
.dialer-agent-picker-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialer-agent-picker-state {
  font-size: 11px;
  color: var(--ink-muted, #666);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  white-space: nowrap;
}
.dialer-agent-picker-state[data-state="registered"] { color: #0a6b2c; background: rgba(42,157,78,.12); }
.dialer-agent-picker-state[data-state="failed"],
.dialer-agent-picker-state[data-state="unregistered"] { color: #a1253b; background: rgba(220,47,72,.12); }
.dialer-agent-picker-state[data-state="init"],
.dialer-agent-picker-state[data-state="registering"],
.dialer-agent-picker-state[data-state="loading"] { color: #8a6a00; background: rgba(240,180,0,.14); }
.dialer-agent-picker-loading {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--v2-text-muted, #8a97a8);
}
@media (prefers-color-scheme: dark) {
  .dialer-agent-picker { background: #1a1d22; border-color: rgba(255,255,255,.12); }
  .dialer-agent-picker-row { border-color: rgba(255,255,255,.1); }
}

.dialer-display-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  min-height: 48px;
  padding: 0 4px;
}
.dialer-display {
  flex: 1;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialer-clear {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.dialer-clear:active { background: var(--bg-subtle); }

.dialer-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 8px 0;
}
.dialer-key {
  aspect-ratio: 1.4 / 1;
  max-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: background .08s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  font-family: inherit;
  color: var(--ink);
}
.dialer-key:active { background: var(--bg-subtle); transform: scale(.97); }
.dialer-key-digit {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dialer-key-letters {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.dialer-callrow {
  display: flex;
  justify-content: center;
  padding: 4px 0 0 0;
}
.dialer-call {
  min-width: 220px;
  height: 56px;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(92, 184, 92, .35);
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dialer-call:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(92, 184, 92, .3); }
.dialer-call:disabled {
  background: var(--ink-muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .5;
}
.dialer-call[data-loading="1"] i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Keep sheet fully visible on short phones */
@media (max-height: 680px) {
  .dialer-key { max-height: 60px; }
  .dialer-key-digit { font-size: 22px; }
  .dialer-display { font-size: 28px; }
  .sheet-dialer { gap: 10px; }
  .dialer-call { height: 48px; }
}

/* ========================================
   M3 — Lists (Contacts & Calls) + Search
   ======================================== */

.view-plain {
  padding: 20px 0 24px;
}
.view-header {
  padding: 0 20px 12px;
}
.view-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.view-title {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0 0;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.view-sub {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Search bar */
.search-wrap {
  position: relative;
  margin: 6px 20px 14px;
}
.search-input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 40px;
  border: 1px solid rgba(46,46,46,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  box-shadow: var(--card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(152,184,204,.25), var(--card-shadow);
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 14px;
  pointer-events: none;
}
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
.search-clear:hover { background: rgba(0,0,0,.04); color: var(--ink); }

/* Generic list host */
.list-host {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Contact/Call list-card (shared baseline) */
.list-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,.6);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.list-card:active { transform: scale(.99); box-shadow: 0 4px 14px rgba(31,38,135,.12); }
.list-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.list-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(46,46,46,.2);
}
.list-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.list-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-card-sub {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Quick-Call pill (primary CTA on each list row) */
.quick-call-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: none;
  background: var(--success);
  color: #fff;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(92,184,92,.3);
  transition: transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.quick-call-btn:active { transform: scale(.94); box-shadow: 0 2px 6px rgba(92,184,92,.25); }
.quick-call-btn.disabled {
  background: rgba(87,99,108,.18);
  color: var(--ink-muted);
  box-shadow: none;
  pointer-events: none;
  cursor: not-allowed;
}
.quick-call-btn i { font-size: 14px; }

/* Quick-Play pill (playback trigger for call recordings) */
.quick-play-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(46,46,46,.14);
  background: var(--surface, #fff);
  color: var(--ink, #111);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.quick-play-btn:active { transform: scale(.94); }
.quick-play-btn i { font-size: 13px; }
.quick-play-btn.playing {
  background: var(--brand, #2e2e2e);
  color: #fff;
  border-color: transparent;
}
.quick-play-btn.playing i::before { content: "\f04c"; /* fa-pause */ }

/* Inline audio player that appears below the actions when play is tapped */
.call-card-player {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(46,46,46,.08);
}
.call-card-player audio {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  outline: none;
}
.call-card-player audio::-webkit-media-controls-panel {
  background: rgba(46,46,46,.04);
}

/* Skeleton rows for list loading */
.list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0;
}
.list-skeleton > div {
  height: 72px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ========================================
   M3 — Call cards (Gespräche view)
   ======================================== */

.call-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.call-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.call-card-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-card-time {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.call-dir-badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.call-dir-badge.dir-in  { background: rgba(92,184,92,.15);  color: #2f8a2f; }
.call-dir-badge.dir-out { background: rgba(152,184,204,.25); color: #4a7090; }
.call-dir-badge.dir-emp { background: rgba(46,46,46,.08);  color: var(--primary); }

.call-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-muted);
}
.call-meta-dot { opacity: .5; }
.call-meta-phone { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.call-meta-flag {
  background: rgba(46,46,46,.05);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}
.call-meta-flag.warn {
  background: rgba(240,173,78,.16);
  color: #a06820;
}

.call-card-summary { font-size: 14px; line-height: 1.45; }
.call-summary-text {
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.call-summary-text.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.call-summary-text.muted { color: var(--ink-muted); font-style: italic; }
.call-summary-toggle {
  margin-top: 4px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 0;
  cursor: pointer;
}

.call-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.load-more-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.load-more-btn {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid rgba(46,46,46,.15);
  background: rgba(255,255,255,.8);
  color: var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.load-more-btn:hover { background: #fff; }
.load-more-btn:disabled { opacity: .5; cursor: wait; }

/* Home section head — row with title + "Alle" link */
.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 10px;
}
.home-section-head .home-section-title { margin: 0; padding: 0; }
.home-section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.home-section-link:active { background: rgba(152,184,204,.15); }

/* Inline quick-call variant (smaller, no label) for home-stream action-card */
.action-card-cta.quick-call-inline {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(92,184,92,.3);
  transition: transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.action-card-cta.quick-call-inline:active { transform: scale(.93); }

/* Dark-mode adjustments for new surfaces */
@media (prefers-color-scheme: dark) {
  .list-card, .call-card {
    background: rgba(34,36,40,.85);
    border-color: rgba(255,255,255,.05);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
  }
  .list-card-title, .call-card-title { color: #e7e9ee; }
  .list-card-sub, .call-card-time, .call-card-meta { color: rgba(230,232,238,.55); }
  .call-summary-text { color: rgba(230,232,238,.85); }
  .search-input {
    background: rgba(34,36,40,.8);
    color: #e7e9ee;
    border-color: rgba(255,255,255,.08);
  }
  .search-input::placeholder { color: rgba(230,232,238,.4); }
  .call-meta-flag { background: rgba(255,255,255,.06); color: rgba(230,232,238,.75); }
  .load-more-btn {
    background: rgba(34,36,40,.8);
    color: #e7e9ee;
    border-color: rgba(255,255,255,.08);
  }
}

/* =======================================================================
   MOBILE V2 — Call overlays (native replacement for asp-* desktop UI)
   Hide original desktop-sized AgentSoftphone overlays; we render our own.
   ======================================================================= */
.asp-ring-overlay,
.asp-incall-bar,
.asp-dtmf-popover {
  display: none !important;
}

/* Live-Assist panel: show on mobile but restyle as a full-width bottom sheet
   so the transcript/tips are readable on small screens. Desktop sidebar
   styling (380px right-corner card) would be clipped off the viewport. */
.asp-coaching-panel {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: 58vh !important;
  z-index: 9700 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
  background: #15181d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.asp-coaching-panel .asp-coaching-header {
  padding: 14px 18px !important;
  font-size: 15px !important;
}
.asp-coaching-panel .asp-coaching-close {
  font-size: 24px !important;
  padding: 4px 10px !important;
  min-width: 40px;
  min-height: 40px;
}
.asp-coaching-panel .asp-coaching-feed {
  max-height: calc(58vh - 56px) !important;
  padding: 14px 18px !important;
}
.asp-coaching-panel .asp-coaching-tip,
.asp-coaching-panel .asp-coaching-transcript {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* --- Active call fullscreen ---------------------------------------- */
.mv2-call-screen {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: linear-gradient(160deg, #0f1216 0%, #1e2530 50%, #2e2e2e 100%);
  color: #f2f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
  opacity: 0;
  transform: translateY(8%);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.mv2-call-screen.is-open { opacity: 1; transform: translateY(0); }
.mv2-call-screen.is-minimized {
  pointer-events: none;
  opacity: 0;
  transform: translateY(4%);
}
.mv2-call-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.mv2-call-minimize {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  color: #f2f4f6;
  font-size: 18px;
  cursor: pointer;
  display: grid; place-items: center;
}
.mv2-call-minimize:active { background: rgba(255,255,255,.14); }
.mv2-call-state {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
}
.mv2-call-spacer { width: 44px; }

.mv2-call-avatar {
  margin-top: 36px;
  width: 160px; height: 160px;
  position: relative;
  display: grid; place-items: center;
}
.mv2-call-avatar-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152,184,204,.25) 0%, rgba(152,184,204,0) 70%);
  animation: mv2-pulse-ring 2.4s ease-in-out infinite;
}
.mv2-call-avatar-inner {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3e3e3e, #1e1e1e);
  display: grid; place-items: center;
  font-size: 42px;
  color: rgba(255,255,255,.85);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border: 2px solid rgba(255,255,255,.08);
}
@keyframes mv2-pulse-ring {
  0%,100% { transform: scale(1); opacity: .55; }
  50%     { transform: scale(1.18); opacity: .9; }
}

.mv2-call-caller {
  margin-top: 22px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
  max-width: 90%;
  word-break: break-word;
}
.mv2-call-timer {
  margin-top: 6px;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.65);
  letter-spacing: .03em;
}

.mv2-call-primary {
  margin-top: auto;
  width: 100%;
  max-width: 440px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 14px;
  padding: 24px 0 10px;
}
.mv2-call-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  padding: 0;
  min-height: 78px;
}
.mv2-call-btn-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: grid; place-items: center;
  font-size: 20px;
  transition: background .15s ease, transform .1s ease;
}
.mv2-call-btn:active .mv2-call-btn-icon { transform: scale(.94); }
.mv2-call-btn.is-on .mv2-call-btn-icon {
  background: #f2f4f6;
  color: #1e1e1e;
}
.mv2-call-btn-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
}

.mv2-call-hangup {
  margin: 18px 0 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: none;
  background: #D9534F;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(217,83,79,.4);
  display: grid; place-items: center;
  transition: transform .1s ease;
}
.mv2-call-hangup:active { transform: scale(.94); }

/* PiP floating bubble */
.mv2-call-pip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 16px;
  z-index: 9400;
  padding: 10px 14px 10px 16px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #3e3e3e, #1e1e1e);
  color: #fff;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  animation: mv2-pip-in .2s ease-out;
}
@keyframes mv2-pip-in {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.mv2-call-pip-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #5CB85C;
  box-shadow: 0 0 0 0 rgba(92,184,92,.7);
  animation: mv2-pip-pulse 1.4s infinite;
}
@keyframes mv2-pip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(92,184,92,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(92,184,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,184,92,0); }
}

/* --- DTMF sheet ----------------------------------------------------- */
.mv2-dtmf-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9600;
  background: linear-gradient(180deg, #24282e 0%, #191c20 100%);
  color: #f2f4f6;
  border-radius: 28px 28px 0 0;
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  box-shadow: 0 -20px 60px rgba(0,0,0,.5);
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.mv2-dtmf-sheet.is-open { transform: translateY(0); }
.mv2-dtmf-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px 12px;
}
.mv2-dtmf-display {
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  letter-spacing: .08em;
  color: #f2f4f6;
  min-height: 24px;
}
.mv2-dtmf-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  color: #f2f4f6;
  font-size: 15px;
  cursor: pointer;
  display: grid; place-items: center;
}
.mv2-dtmf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mv2-dtmf-key {
  aspect-ratio: 1.5 / 1;
  max-height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.04);
  color: #f2f4f6;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: background .1s ease, transform .08s ease;
}
.mv2-dtmf-key:active { background: rgba(255,255,255,.16); transform: scale(.96); }
.mv2-dtmf-digit { font-size: 24px; font-weight: 500; line-height: 1; }
.mv2-dtmf-sub {
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
}

/* --- Incoming call --------------------------------------------------- */
.mv2-ring-screen {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: linear-gradient(160deg, #0f1f13 0%, #1b3f26 55%, #0a2615 100%);
  color: #f2f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 40px) 24px calc(env(safe-area-inset-bottom, 0px) + 44px);
  opacity: 0;
  transform: translateY(8%);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.mv2-ring-screen.is-open { opacity: 1; transform: translateY(0); }
.mv2-ring-screen.is-transfer {
  background: linear-gradient(160deg, #101f30 0%, #1d3b5a 55%, #0a1a2a 100%);
}
.mv2-ring-top { text-align: center; }
.mv2-ring-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.mv2-ring-caller {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 600;
  max-width: 90vw;
  word-break: break-word;
}
.mv2-ring-avatar {
  margin-top: 40px;
  width: 180px; height: 180px;
  position: relative;
  display: grid; place-items: center;
}
.mv2-ring-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,184,92,.35) 0%, rgba(92,184,92,0) 70%);
  animation: mv2-ring-pulse 1.6s ease-in-out infinite;
}
.mv2-ring-screen.is-transfer .mv2-ring-pulse {
  background: radial-gradient(circle, rgba(152,184,204,.35) 0%, rgba(152,184,204,0) 70%);
}
@keyframes mv2-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%      { transform: scale(1.35); opacity: 1; }
}
.mv2-ring-inner {
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  font-size: 48px;
  color: #fff;
  border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.mv2-ring-transfer-summary {
  width: 100%;
  max-width: 460px;
  margin: 20px auto 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  max-height: 180px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.85);
}
.mv2-ring-transfer-summary .asp-transfer-text { color: #fff; margin-bottom: 10px; }
.mv2-ring-transfer-summary .asp-transfer-transcript { color: rgba(255,255,255,.7); font-size: 12px; }
.mv2-ring-transfer-summary .asp-turn { margin: 4px 0; }

.mv2-ring-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 440px;
  padding-top: 40px;
}
.mv2-ring-btn {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .1s ease, box-shadow .2s ease;
}
.mv2-ring-btn:active { transform: scale(.92); }
.mv2-ring-decline {
  background: #D9534F;
  box-shadow: 0 14px 40px rgba(217,83,79,.4);
}
.mv2-ring-decline i { transform: rotate(135deg); }
.mv2-ring-accept {
  background: #5CB85C;
  box-shadow: 0 14px 40px rgba(92,184,92,.4);
  animation: mv2-ring-accept-bounce 1.6s ease-in-out infinite;
}
@keyframes mv2-ring-accept-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* =======================================================================
   Skeleton loaders
   ======================================================================= */
.skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.08) 50%,
    rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: mv2-shimmer 1.4s ease-in-out infinite;
}
@keyframes mv2-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
.skeleton-row { display: flex; gap: 12px; padding: 4px 20px 10px; overflow: hidden; }
.skeleton-kpi {
  flex: 0 0 150px;
  height: 84px;
  border-radius: var(--radius-card);
  background: linear-gradient(90deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.08) 50%,
    rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: mv2-shimmer 1.4s ease-in-out infinite;
}
.skeleton-card {
  display: flex; align-items: center; gap: 14px;
  margin: 0 20px 10px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.skeleton-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
  animation: mv2-shimmer 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.1) 50%,
    rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: mv2-shimmer 1.4s ease-in-out infinite;
}
.w-40 { width: 40%; } .w-45 { width: 45%; }
.w-60 { width: 60%; } .w-70 { width: 70%; }
.skeleton-pill {
  width: 56px; height: 24px;
  border-radius: 12px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.1) 50%,
    rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: mv2-shimmer 1.4s ease-in-out infinite;
}

/* =======================================================================
   Pull-to-refresh indicator
   ======================================================================= */
.ptr-indicator {
  position: absolute;
  top: 8px; left: 50%;
  margin-left: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  color: var(--ink-dim);
  display: grid; place-items: center;
  font-size: 15px;
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
  z-index: 20;
  transition: opacity .15s ease;
}
.ptr-indicator.armed { color: var(--accent-strong); }
.ptr-indicator.spinning { opacity: 1 !important; transform: translateY(8px) !important; }

/* KPI row — give a gentle end-spacer so last card doesn't touch edge */
.kpi-row::after {
  content: '';
  flex: 0 0 4px;
}

/* Dark-mode call overlays — backgrounds already dark but let's tighten
   skeleton/PTR for dark bg and fix list card glass */
@media (prefers-color-scheme: dark) {
  .skeleton, .skeleton-kpi, .skeleton-avatar, .skeleton-line, .skeleton-pill {
    background: linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.1) 50%,
      rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
    animation: mv2-shimmer 1.4s ease-in-out infinite;
  }
  .skeleton-card { background: rgba(34,36,40,.85); border-color: rgba(255,255,255,.06); }
  .ptr-indicator {
    background: rgba(34,36,40,.95);
    border-color: rgba(255,255,255,.08);
    color: rgba(230,232,238,.75);
  }
}

/* Tighten for smaller phones */
@media (max-height: 720px) {
  .mv2-call-avatar { width: 130px; height: 130px; margin-top: 20px; }
  .mv2-call-avatar-inner { width: 100px; height: 100px; font-size: 34px; }
  .mv2-call-caller { font-size: 24px; margin-top: 16px; }
  .mv2-call-btn { min-height: 70px; }
  .mv2-call-btn-icon { width: 52px; height: 52px; font-size: 18px; }
  .mv2-call-primary { gap: 14px 12px; padding-top: 18px; }
  .mv2-call-hangup { width: 64px; height: 64px; font-size: 22px; margin-top: 10px; }
  .mv2-ring-avatar { width: 150px; height: 150px; margin-top: 24px; }
  .mv2-ring-inner { width: 110px; height: 110px; font-size: 40px; }
  .mv2-ring-btn { width: 72px; height: 72px; font-size: 24px; }
}

/* ============================================================ */
/* =========== M5 · Subpage shell + list patterns ============ */
/* ============================================================ */

.subpage {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: calc(var(--nav-height) + 40px);
}
.subpage-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: max(env(safe-area-inset-top), 12px) 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid rgba(31, 38, 135, .06);
}
.subpage-back,
.subpage-action {
  width: 40px; height: 40px;
  border: 1px solid rgba(31, 38, 135, .08);
  background: var(--card);
  border-radius: 50%;
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 2px 8px rgba(31, 38, 135, .04);
}
.subpage-back:active,
.subpage-action:active { transform: scale(.92); }
.subpage-title-wrap {
  overflow: hidden;
}
.subpage-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.subpage-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subpage-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.subpage-body {
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Section labels */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 16px 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* List cards wrapper */
.list-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8ecf1, #dfe5ed);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.list-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(31, 38, 135, .08);
  cursor: pointer;
}
.list-card-body { flex: 1; min-width: 0; }
.list-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.list-card-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-card-action {
  width: 40px; height: 40px;
  border: none;
  background: rgba(0, 0, 0, .04);
  border-radius: 50%;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.list-card-action:active { transform: scale(.92); background: rgba(0, 0, 0, .08); }

/* Status pills, used in multiple views */
.agent-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.agent-status.on  { background: rgba(39, 174, 96, .15); color: #1e8449; }
.agent-status.off { background: rgba(0, 0, 0, .08);    color: #666; }

.role-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.role-pill.role-owner { background: rgba(212, 175, 55, .2); color: #8a6d1a; }
.role-pill.role-admin { background: rgba(152, 184, 204, .25); color: #3e5a72; }
.role-pill.role-user  { background: rgba(0, 0, 0, .06); color: #555; }

.you-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3e3e3e, #1e1e1e);
  color: #fff;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.avatar-me { background: linear-gradient(135deg, #3e3e3e, #1e1e1e) !important; color: #fff !important; }

.priority-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
}
.priority-pill.prio-high   { background: rgba(231, 76, 60, .15);  color: #c0392b; }
.priority-pill.prio-normal { background: rgba(152, 184, 204, .2); color: #3e5a72; }
.priority-pill.prio-low    { background: rgba(0, 0, 0, .06);      color: #666; }

/* Forms */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 16px 0 6px;
}
.form-label:first-child { margin-top: 0; }
.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(31, 38, 135, .12);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--primary);
  background: var(--card);
  transition: border-color .12s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.btn-block { width: 100%; margin-top: 24px; }
.btn-secondary {
  padding: 12px 18px;
  background: var(--card);
  color: var(--primary);
  border: 1.5px solid rgba(31, 38, 135, .15);
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Sheet header/body tweaks */
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(31, 38, 135, .06);
}
.sheet-title { font-size: 17px; font-weight: 700; color: var(--primary); }
.sheet-close {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .06); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sheet-body { padding: 20px; }

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 48px; height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background .2s ease;
  flex-shrink: 0;
}
.toggle-switch.on { background: var(--accent); }
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.toggle-switch.on .toggle-knob { transform: translateX(20px); }

/* Card block (used for profile, plan, email status) */
.card-block {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(31, 38, 135, .08);
}
.card-block-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-block-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #3e3e3e, #1e1e1e);
  color: #fff;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.card-block-title { flex: 1; min-width: 0; }
.card-block-h { font-weight: 700; color: var(--primary); font-size: 15px; }
.card-block-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Desktop callout */
.desktop-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(152, 184, 204, .1), rgba(152, 184, 204, .04));
  border: 1px solid rgba(152, 184, 204, .25);
  border-radius: 14px;
  padding: 14px;
  margin-top: 20px;
  text-decoration: none;
}
.desktop-callout-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.desktop-callout-text { flex: 1; min-width: 0; }
.desktop-callout-title { font-weight: 600; font-size: 14px; color: var(--primary); }
.desktop-callout-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.desktop-callout-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 8px 12px;
  background: var(--card);
  border-radius: 10px;
  white-space: nowrap;
}
.desktop-callout-cta:active { transform: scale(.95); }

.subtle-note { font-size: 12px; color: var(--text-muted); padding: 12px; text-align: center; }

.error-state i { color: var(--danger); }

/* ---------- Invoices ---------- */
.inv-kpi-row {
  padding: 0;
  margin-top: 4px;
  scroll-snap-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.inv-kpi-row {
  padding-left: 20px;
  padding-right: 20px;
}
.inv-kpi-row .kpi-card {
  min-width: 0;
  flex: none;
  padding: 12px 12px 10px;
  overflow: hidden;
}
.inv-kpi-row .kpi-icon {
  font-size: 11px;
  margin-bottom: 2px;
}
.inv-kpi-row .kpi-value {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.inv-kpi-row .kpi-label {
  font-size: 9px;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.invoice-avatar.paid    { background: rgba(39, 174, 96, .15); color: #1e8449; }
.invoice-avatar.overdue { background: rgba(231, 76, 60, .15); color: #c0392b; }
.invoice-avatar.open    { background: rgba(152, 184, 204, .2); color: #3e5a72; }
.inv-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.inv-status.paid    { background: rgba(39, 174, 96, .15); color: #1e8449; }
.inv-status.overdue { background: rgba(231, 76, 60, .15); color: #c0392b; }
.inv-status.open    { background: rgba(0, 0, 0, .06); color: #555; }
.invoice-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  margin-left: 8px;
}

/* ---------- Calendar ---------- */
.event-time {
  width: 50px;
  text-align: center;
  flex-shrink: 0;
  padding: 8px 0;
  background: linear-gradient(135deg, rgba(152, 184, 204, .2), rgba(152, 184, 204, .08));
  border-radius: 10px;
}
.event-time-h { font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1; }
.event-time-m { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ---------- Tasks ---------- */
.task-checkbox {
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.task-checkbox:active { transform: scale(.85); }
.task-card.done .list-card-title { text-decoration: line-through; opacity: .5; }
.task-card.done .task-checkbox { color: var(--success); }
.task-card.overdue .list-card-body .overdue-label { color: var(--danger); font-weight: 600; }

/* ---------- Deals ---------- */
.deal-stage-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.stage-pill.stage-lead        { background: rgba(0, 0, 0, .06);       color: #555; }
.stage-pill.stage-contacted   { background: rgba(152, 184, 204, .2);  color: #3e5a72; }
.stage-pill.stage-qualified   { background: rgba(41, 128, 185, .15);  color: #21618c; }
.stage-pill.stage-proposal    { background: rgba(155, 89, 182, .15);  color: #7d3c98; }
.stage-pill.stage-negotiation { background: rgba(230, 126, 34, .15);  color: #b9770e; }
.stage-pill.stage-won         { background: rgba(39, 174, 96, .15);   color: #1e8449; }
.stage-pill.stage-lost        { background: rgba(231, 76, 60, .15);   color: #c0392b; }
.stage-count { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Settings / Profile ---------- */
.profile-block {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.profile-avatar-lg {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3e3e3e, #1e1e1e);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-weight: 700; font-size: 17px; color: var(--primary); }
.profile-email { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-company { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-role { margin-top: 8px; }

.setting-row { display: flex; align-items: center; gap: 12px; }
.setting-avatar { background: rgba(152, 184, 204, .2); color: #3e5a72; font-size: 14px; }
.setting-chevron { color: var(--text-muted); opacity: .5; font-size: 12px; flex-shrink: 0; }
.setting-row.no-action { cursor: default; }
.setting-row.no-action:active { transform: none; }

.danger-row { border: 1px solid rgba(231, 76, 60, .2); }
.danger-avatar { background: rgba(231, 76, 60, .12); color: #c0392b; }
.danger-text { color: #c0392b; }

/* ---------- Plan / Billing ---------- */
.plan-block {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(135deg, #3e3e3e, #1e1e1e);
  color: #fff;
}
.plan-badge {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .5px;
}
.plan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  opacity: .85;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8fd19e;
  animation: status-pulse 2s ease-in-out infinite;
}
.status-dot.status-trialing { background: #f9ca24; }
.status-dot.status-past_due,
.status-dot.status-canceled,
.status-dot.status-incomplete { background: #eb4d4b; animation: none; }
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.2); }
}
.plan-renews { font-size: 12px; opacity: .7; margin-top: 12px; }

/* ---------- E-Mail-AI logs ---------- */
.log-reply { background: rgba(39, 174, 96, .15); color: #1e8449; }
.log-skip  { background: rgba(230, 126, 34, .15); color: #b9770e; }

/* ---------- Workflows ---------- */
.wf-active { background: linear-gradient(135deg, rgba(39, 174, 96, .2), rgba(39, 174, 96, .05)); color: #1e8449; }
.wf-toggle { color: var(--primary); background: rgba(0, 0, 0, .06); }

/* ---------- Event avatar alignment fix ---------- */
.event-card { align-items: center; }

/* ---------- Dark mode tweaks for subpages ---------- */
@media (prefers-color-scheme: dark) {
  .subpage-header { background: #15161a; border-color: rgba(255, 255, 255, .06); }
  .subpage-back,
  .subpage-action { background: #1d1e22; border-color: rgba(255, 255, 255, .06); color: #e5e5e7; }
  .list-card,
  .card-block { background: #1d1e22; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
  .form-input {
    background: #1d1e22; border-color: rgba(255, 255, 255, .1); color: #f2f2f4;
  }
  .desktop-callout { background: linear-gradient(135deg, rgba(152, 184, 204, .06), rgba(152, 184, 204, .02)); }
  .desktop-callout-cta { background: #1d1e22; color: #f2f2f4; }
  .list-avatar { background: linear-gradient(135deg, #2a2d32, #1f2226); color: #e5e5e7; }
  .quick-play-btn {
    background: #23262b;
    border-color: rgba(255, 255, 255, .08);
    color: var(--ink, #f2f4f6);
  }
  .quick-play-btn.playing {
    background: var(--success, #5cb85c);
    border-color: transparent;
    color: #fff;
  }
  .call-card-player { border-top-color: rgba(255, 255, 255, .06); }
  .call-card-player audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, .04);
  }
  .view-title { color: var(--ink); }
  .view-kicker { color: var(--ink-dim); }
  .view-sub { color: var(--ink-dim); }
  .list-card-title { color: var(--ink); }
  .list-card-sub { color: var(--ink-dim); }
  .subpage-title { color: var(--ink); }
  .subpage-kicker { color: var(--ink-dim); }
  .card-block-h { color: var(--ink); }
  .card-block-sub { color: var(--ink-dim); }
  .card-block-icon { background: linear-gradient(135deg, #2a2d32, #1f2226); color: #e5e5e7; }
  .sheet-title { color: var(--ink); }
  .desktop-callout-title { color: var(--ink); }
  .event-time-h { color: var(--ink); }
  .profile-name { color: var(--ink); }
}

/* ─────────────── Contact Detail Sheet ─────────────── */
.sheet-contact {
  max-height: 92vh;
  overflow-y: auto;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-detail-header {
  text-align: center;
  padding-top: 4px;
}
.contact-detail-avatar {
  width: 76px;
  height: 76px;
  margin: 6px auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a00, #ff9a3d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.contact-detail-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
  word-break: break-word;
}
.contact-detail-company {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 14px;
}
.contact-detail-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.contact-detail-actions:has(.contact-action:only-child) {
  grid-template-columns: 1fr;
}
.contact-detail-actions:has(.contact-action:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}
.contact-action {
  appearance: none;
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  min-height: 72px;
  transition: transform .1s ease, background .15s ease;
}
.contact-action i { font-size: 18px; color: var(--accent, #ff7a00); }
.contact-action:active { transform: scale(0.96); background: #e8eaee; }
.contact-action-primary {
  background: #ff7a00;
  color: #fff;
}
.contact-action-primary i { color: #fff; }
.contact-action-primary:active { background: #e76c00; }

.contact-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f8f9fb;
  border-radius: 14px;
  overflow: hidden;
}
.contact-field-row {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--primary);
  cursor: pointer;
  min-height: 60px;
}
.contact-field-row:last-child { border-bottom: 0; }
.contact-field-row:active:not(.is-readonly) { background: rgba(0, 0, 0, .04); }
.contact-field-row.is-readonly { cursor: default; }
.contact-field-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: rgba(255, 122, 0, .1);
  color: var(--accent, #ff7a00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.contact-field-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-field-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  word-break: break-word;
}
.contact-field-action {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}
.contact-field-action:active { background: rgba(0, 0, 0, .06); color: var(--primary); }
.contact-detail-close {
  padding-top: 4px;
}
.contact-close-btn {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 14px;
  padding: 14px;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.contact-close-btn:active { background: rgba(0, 0, 0, .04); }

/* Dark-Mode overrides for contact detail sheet */
@media (prefers-color-scheme: dark) {
  .sheet {
    background: linear-gradient(180deg, #1a1d22 0%, #14161a 100%);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .55);
  }
  .sheet-handle { background: #3a3f46; }
  .contact-detail-name { color: var(--ink); }
  .contact-detail-company { color: var(--ink-dim); }
  .contact-action {
    background: #23262b;
    color: var(--ink);
  }
  .contact-action:active { background: #2b2f35; }
  .contact-detail-fields { background: #1a1d22; }
  .contact-field-row {
    color: var(--ink);
    border-bottom-color: rgba(255, 255, 255, .05);
  }
  .contact-field-row:active:not(.is-readonly) { background: rgba(255, 255, 255, .04); }
  .contact-field-icon {
    background: rgba(255, 122, 0, .18);
  }
  .contact-field-label { color: var(--ink-dim); }
  .contact-field-value { color: var(--ink); }
  .contact-field-action { color: var(--ink-dim); }
  .contact-field-action:active {
    background: rgba(255, 255, 255, .07);
    color: var(--ink);
  }
  .contact-close-btn {
    border-color: rgba(255, 255, 255, .1);
    color: var(--ink);
  }
  .contact-close-btn:active { background: rgba(255, 255, 255, .05); }
}


/* === Mehr-Page Padding-Fix (M3-Kaskade entfernte horizontales Padding von .view-plain) === */
.view-plain-header,
.more-grid,
.more-group-label,
.more-footer {
  padding-left: 20px;
  padding-right: 20px;
}

/* === Mehr-Page Dark-Mode Icon-Kontrast === */
@media (prefers-color-scheme: dark) {
  .more-tile i {
    color: var(--ink);
    background: rgba(255, 122, 0, .18);
  }
}

/* ============================================
   Agent Detail Sheet — redesigned 2026-04-21
   ============================================ */

.sheet-agent {
  padding: 0;
}

.agent-detail-hero {
  text-align: center;
  padding: 28px 24px 20px;
  background: linear-gradient(180deg, rgba(255, 122, 0, 0.06) 0%, rgba(255, 122, 0, 0) 100%);
  border-bottom: 1px solid var(--line);
}

.agent-detail-avatar {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 34px;
  color: #fff;
  background: linear-gradient(135deg, #b7b9bc 0%, #8c8f93 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.agent-detail-avatar.active {
  background: linear-gradient(135deg, #ff7a00 0%, #ff9a3c 100%);
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.35);
}

.agent-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.agent-detail-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-dim);
}

.agent-detail-type-dot {
  color: var(--line);
  font-weight: 700;
}

.agent-detail-action {
  padding: 16px 20px 4px;
}

.agent-call-btn {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7a00 0%, #ff9333 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 122, 0, 0.28);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.agent-call-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(255, 122, 0, 0.22);
}

.agent-call-btn i {
  font-size: 17px;
}

.agent-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 20px 4px;
}

.agent-stat {
  background: #f6f7f9;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.agent-stat-icon {
  color: var(--accent);
  font-size: 15px;
  margin-bottom: 2px;
}

.agent-stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-dim);
}

.agent-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  word-break: break-word;
  line-height: 1.2;
}

.agent-detail-fields {
  padding: 16px 20px 8px;
}

/* (sheet-section styles moved below — see Shared Sheet-Field Row block) */

/* Dark Mode — Agent Detail */
@media (prefers-color-scheme: dark) {
  .agent-detail-hero {
    background: linear-gradient(180deg, rgba(255, 122, 0, 0.08) 0%, rgba(255, 122, 0, 0) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .agent-detail-avatar {
    background: linear-gradient(135deg, #3a3f46 0%, #2a2e33 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }

  .agent-detail-avatar.active {
    background: linear-gradient(135deg, #ff7a00 0%, #ff9a3c 100%);
    box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4);
  }

  .agent-detail-name {
    color: var(--ink);
  }

  .agent-detail-type-dot {
    color: rgba(255, 255, 255, 0.15);
  }

  .agent-stat {
    background: #1d1e22;
  }

  .agent-stat-value {
    color: var(--ink);
  }

  /* .sheet-section-body dark — moved to shared block below */
}

/* ─────────── Deals — Stage colors (missing) ─────────── */
.stage-pill.stage-neu        { background: rgba(0, 0, 0, .06);      color: #555; }
.stage-pill.stage-active     { background: rgba(230, 126, 34, .15); color: #b9770e; }

/* ─────────── Deals — Card & Sheet ─────────── */
.deal-avatar {
  background: linear-gradient(135deg, rgba(255, 122, 0, .18), rgba(255, 122, 0, .08));
  color: var(--accent);
  font-size: 18px;
}

.sheet-deal .contact-detail-avatar.deal-detail-avatar {
  background: linear-gradient(135deg, var(--accent), #ff9a3c);
  color: #fff;
  font-size: 32px;
}

.deal-detail-stage {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.deal-detail-stage .stage-pill {
  font-size: 12px;
  padding: 5px 12px;
}

/* Wenn Titel lang ist: 2-zeilig zulassen */
.sheet-deal .contact-detail-name {
  text-align: center;
  line-height: 1.3;
  max-width: 90%;
}

@media (prefers-color-scheme: dark) {
  .deal-avatar {
    background: linear-gradient(135deg, rgba(255, 122, 0, .22), rgba(255, 122, 0, .1));
    color: #ffb066;
  }
  .stage-pill.stage-neu        { background: rgba(255, 255, 255, .06); color: var(--ink-dim); }
  .stage-pill.stage-contacted  { background: rgba(152, 184, 204, .14); color: #a8c4d9; }
  .stage-pill.stage-qualified  { background: rgba(41, 128, 185, .18);  color: #6fb4e4; }
  .stage-pill.stage-proposal   { background: rgba(155, 89, 182, .18);  color: #c99ee0; }
  .stage-pill.stage-negotiation,
  .stage-pill.stage-active     { background: rgba(230, 126, 34, .18);  color: #ffb066; }
  .stage-pill.stage-won        { background: rgba(39, 174, 96, .2);    color: #6edc9e; }
  .stage-pill.stage-lost       { background: rgba(231, 76, 60, .2);    color: #f08878; }
}


/* === Task Detail Sheet (2026-04-21) === */
.task-detail-sheet .detail-hero-avatar.task-hero {
  background: linear-gradient(135deg, rgba(255, 122, 0, .18), rgba(255, 122, 0, .06));
  color: var(--accent);
}
.task-detail-sheet .detail-hero-avatar.task-hero.done {
  background: linear-gradient(135deg, rgba(39, 174, 96, .22), rgba(39, 174, 96, .08));
  color: #27ae60;
}
.detail-secondary-row {
  display: flex;
  gap: 8px;
  padding: 0 20px 12px;
}
.detail-secondary-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.detail-secondary-btn:hover { background: rgba(0, 0, 0, .04); }
.detail-secondary-btn.danger { color: var(--danger); }
.detail-secondary-btn.danger:hover { background: rgba(231, 76, 60, .08); }
.detail-notes {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Additional priority pill — mittel matches prio-normal visually; add semantic alias */
.priority-pill.prio-hoch    { background: rgba(231, 76, 60, .15);  color: #c0392b; }
.priority-pill.prio-mittel  { background: rgba(152, 184, 204, .2); color: #3e5a72; }
.priority-pill.prio-niedrig { background: rgba(0, 0, 0, .06);      color: #666; }

@media (prefers-color-scheme: dark) {
  .task-detail-sheet .detail-hero-avatar.task-hero {
    background: linear-gradient(135deg, rgba(255, 122, 0, .22), rgba(255, 122, 0, .1));
    color: #ffb066;
  }
  .task-detail-sheet .detail-hero-avatar.task-hero.done {
    background: linear-gradient(135deg, rgba(39, 174, 96, .22), rgba(39, 174, 96, .1));
    color: #6edc9e;
  }
  .detail-secondary-btn {
    background: #1d1e22;
    border-color: rgba(255, 255, 255, .08);
    color: var(--ink);
  }
  .detail-secondary-btn:hover { background: rgba(255, 255, 255, .05); }
  .detail-secondary-btn.danger { color: #f08878; }
  .detail-secondary-btn.danger:hover { background: rgba(231, 76, 60, .15); }
  .priority-pill.prio-high,
  .priority-pill.prio-hoch    { background: rgba(231, 76, 60, .2);   color: #f08878; }
  .priority-pill.prio-normal,
  .priority-pill.prio-mittel  { background: rgba(152, 184, 204, .18); color: #a8c4d9; }
  .priority-pill.prio-low,
  .priority-pill.prio-niedrig { background: rgba(255, 255, 255, .06); color: var(--ink-dim); }
}

/* ---------- Invoice Detail Sheet ---------- */
.inv-kpi-row .kpi-value.kpi-money { font-size: 14px; letter-spacing: -0.02em; }
.inv-kpi-row .kpi-card .kpi-value { line-height: 1.15; }

.invoice-avatar.draft     { background: rgba(128, 128, 128, .15); color: #6c7a89; }
.invoice-avatar.cancelled { background: rgba(180, 180, 180, .2);  color: #8b9398; text-decoration: line-through; }
.inv-status.draft     { background: rgba(128, 128, 128, .15); color: #6c7a89; }
.inv-status.cancelled { background: rgba(180, 180, 180, .2);  color: #8b9398; }

.invoice-hero-avatar.paid    { background: linear-gradient(135deg, rgba(39,174,96,.25), rgba(39,174,96,.12)); color: #1e8449; box-shadow: 0 8px 20px rgba(39,174,96,.25); }
.invoice-hero-avatar.overdue { background: linear-gradient(135deg, rgba(231,76,60,.28), rgba(231,76,60,.14)); color: #c0392b; box-shadow: 0 8px 20px rgba(231,76,60,.25); }
.invoice-hero-avatar.open    { background: linear-gradient(135deg, rgba(255,149,0,.22), rgba(255,149,0,.08)); color: #e67e22; box-shadow: 0 8px 20px rgba(255,149,0,.2); }
.invoice-hero-avatar.draft   { background: linear-gradient(135deg, rgba(128,128,128,.2), rgba(128,128,128,.08)); color: #6c7a89; }
.invoice-hero-avatar.cancelled { background: linear-gradient(135deg, rgba(180,180,180,.2), rgba(180,180,180,.08)); color: #8b9398; }

/* ─────────── Shared Sheet-Field Row (agents/deals/tasks/invoices) ─────────── */
.sheet-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 58px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--primary);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
button.sheet-field-row { cursor: pointer; }
button.sheet-field-row:active { background: rgba(0, 0, 0, .04); }

.sheet-field-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 122, 0, .10);
  color: var(--accent, #ff7a00);
  font-size: 14px;
}

.sheet-field-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sheet-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-dim, #8a8f98);
  line-height: 1.15;
}

.sheet-field-value {
  font-size: 15px;
  font-weight: 550;
  color: var(--primary, #1a1c1e);
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.sheet-field-copy {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--ink-dim, #8a8f98);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, color 120ms ease;
}
.sheet-field-copy:active {
  background: rgba(0, 0, 0, .06);
  color: var(--primary, #1a1c1e);
  transform: scale(.94);
}

.sheet-field-value.emphasis {
  font-size: 17px;
  font-weight: 750;
  color: var(--accent, #ff7a00);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sheet-field-row.is-emphasis {
  background: linear-gradient(90deg, rgba(255, 122, 0, .055), rgba(255, 122, 0, 0));
}
.sheet-field-row.is-emphasis .sheet-field-icon {
  background: linear-gradient(135deg, rgba(255, 122, 0, .22), rgba(255, 122, 0, .10));
  color: var(--accent, #ff7a00);
}

.sheet-field-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-dim, #8a8f98);
}

.sheet-field-value.positive { color: #1e8449; font-weight: 650; }
.sheet-field-value.negative { color: #c0392b; font-weight: 650; }
.sheet-field-value.muted    { color: var(--ink-dim, #8a8f98); }

/* Dark-Mode für Shared-Sheet-Fields */
@media (prefers-color-scheme: dark) {
  button.sheet-field-row:active { background: rgba(255, 255, 255, .04); }
  .sheet-field-icon {
    background: rgba(255, 122, 0, .14);
    color: #ffa352;
  }
  .sheet-field-label { color: rgba(255, 255, 255, .55); }
  .sheet-field-value { color: rgba(255, 255, 255, .92); }
  .sheet-field-value.mono { color: rgba(255, 255, 255, .55); }
  .sheet-field-value.emphasis { color: #ffa352; }
  .sheet-field-copy { color: rgba(255, 255, 255, .45); }
  .sheet-field-copy:active {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .9);
  }
  .sheet-field-row.is-emphasis {
    background: linear-gradient(90deg, rgba(255, 122, 0, .10), rgba(255, 122, 0, 0));
  }
  .sheet-field-row.is-emphasis .sheet-field-icon {
    background: linear-gradient(135deg, rgba(255, 122, 0, .28), rgba(255, 122, 0, .14));
    color: #ffa352;
  }
  .sheet-field-value.positive { color: #6ee7a3; }
  .sheet-field-value.negative { color: #ff8a8a; }
}

/* ─────────── Section Title — feineres Design ─────────── */
.sheet-section { margin-bottom: 16px; }
.sheet-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim, #8a8f98);
  padding: 0 6px 8px;
}
.sheet-section-body {
  border-radius: 16px;
  overflow: hidden;
  background: #f6f7f9;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.sheet-section-body .sheet-field-row + .sheet-field-row {
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.sheet-section-body .sheet-field-row { border-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .sheet-section-body {
    background: #1d1e22;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03);
  }
  .sheet-section-body .sheet-field-row + .sheet-field-row {
    border-top-color: rgba(255, 255, 255, .05);
  }
}

.inv-secondary-row {
  display: flex;
  gap: 8px;
  padding: 0 20px 4px;
  flex-wrap: wrap;
}
.inv-secondary-row .contact-action {
  flex: 1 1 0;
  min-width: 90px;
}
.contact-action-ghost {
  background: rgba(39, 174, 96, .12);
  color: #1e8449;
  border-color: rgba(39,174,96,.25);
}
.contact-action-ghost:active { transform: scale(.97); }

/* Dark-Mode overrides */
@media (prefers-color-scheme: dark) {
  .invoice-avatar.paid    { background: rgba(67, 210, 131, .2); color: #6ee7a3; }
  .invoice-avatar.overdue { background: rgba(255, 107, 107, .2); color: #ff8a8a; }
  .invoice-avatar.open    { background: rgba(162, 191, 211, .15); color: #8ba9c1; }
  .invoice-avatar.draft   { background: rgba(170, 170, 170, .15); color: #a6b0b5; }
  .invoice-avatar.cancelled { background: rgba(170, 170, 170, .2); color: #8b9398; }
  .inv-status.draft     { background: rgba(170, 170, 170, .15); color: #a6b0b5; }
  .inv-status.cancelled { background: rgba(170, 170, 170, .2);  color: #8b9398; }
  .invoice-hero-avatar.paid    { color: #6ee7a3; }
  .invoice-hero-avatar.overdue { color: #ff8a8a; }
  .invoice-hero-avatar.open    { color: #ffb057; }
  .contact-action-ghost {
    background: rgba(67, 210, 131, .18);
    color: #6ee7a3;
    border-color: rgba(67,210,131,.3);
  }
}

/* Recent calls on home — use call-card layout (shared with Gespräche), keep margins flush with home-section padding */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recent-list .action-card { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.recent-list .call-card { margin: 0; }
.recent-list .skeleton { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }

/* === More Profile Card (tap target for profile/logout sheet) === */
.more-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 6px 0 18px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .1s ease, background .15s ease;
}
.more-profile-card:active { transform: scale(.98); }
.more-profile-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a00, #ff9a3d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.more-profile-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.more-profile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.more-profile-email {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.more-profile-chev {
  color: var(--ink-muted);
  font-size: 13px;
  flex: 0 0 auto;
}

/* Profile sheet logout button — destructive action, full-width, red */
.profile-signout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  margin-top: 4px;
  border: 1px solid rgba(217, 83, 79, .25);
  border-radius: 14px;
  background: rgba(217, 83, 79, .06);
  color: var(--danger);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.profile-signout-btn:active {
  background: rgba(217, 83, 79, .14);
  transform: scale(.98);
}
.profile-signout-btn i { font-size: 15px; }
@media (prefers-color-scheme: dark) {
  .profile-signout-btn {
    background: rgba(217, 83, 79, .10);
    border-color: rgba(217, 83, 79, .35);
  }
  .profile-signout-btn:active { background: rgba(217, 83, 79, .20); }
}

/* ===== PWA Install Prompt =================================================
   Banner sitzt oberhalb der Bottom-Nav, Sheet nutzt die bestehende
   sheet-contact Basis + Install-spezifische Inhalte.
   ========================================================================= */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.install-banner.show { transform: translateY(0); opacity: 1; }
.install-banner-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-banner-icon img { width: 100%; height: 100%; object-fit: cover; }
.install-banner-body { flex: 1 1 auto; min-width: 0; }
.install-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
}
.install-banner-sub {
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-top: 2px;
  line-height: 1.3;
}
.install-banner-cta {
  flex: 0 0 auto;
  background: #ff6b2c;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
.install-banner-cta:active {
  background: #e85a1e;
  transform: scale(.97);
}
.install-banner-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.55);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-banner-close:active { background: rgba(0,0,0,.12); }

/* Beim angezeigten Banner Nav-Floating-Aura nicht doppelt: nichts zu tun,
   Banner sitzt ueber der Nav durch margin. body-Klasse bleibt als Hook. */

@media (prefers-color-scheme: dark) {
  .install-banner {
    background: #1f1f1f;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
  }
  .install-banner-title { color: #f3f3f3; }
  .install-banner-sub { color: rgba(255,255,255,.65); }
  .install-banner-icon { background: #2a2a2a; }
  .install-banner-close {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
  }
  .install-banner-close:active { background: rgba(255,255,255,.14); }
}

/* Install-Sheet (iOS-Anleitung) */
.install-sheet .install-sheet-body {
  padding: 8px 22px 28px;
}
.install-sheet .install-sheet-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  margin: 4px auto 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.install-sheet .install-sheet-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.install-sheet h2 {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.25;
}
.install-sheet .install-sheet-lead {
  text-align: center;
  font-size: 14px;
  color: rgba(0,0,0,.65);
  margin: 0 0 18px;
  line-height: 1.4;
}
.install-sheet .install-sheet-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.install-sheet .install-sheet-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.04);
  border-radius: 12px;
  font-size: 14px;
  color: #1a1a1a;
}
.install-sheet .install-step-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ff6b2c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-sheet .install-step-text { flex: 1 1 auto; line-height: 1.35; }
.install-sheet .install-step-icon {
  margin: 0 4px;
  color: #0a84ff;
  font-size: 15px;
}
.install-sheet .install-sheet-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.install-sheet .install-sheet-actions .primary-button {
  min-width: 160px;
}
@media (prefers-color-scheme: dark) {
  .install-sheet .install-sheet-lead { color: rgba(255,255,255,.65); }
  .install-sheet .install-sheet-steps li {
    background: rgba(255,255,255,.06);
    color: #f3f3f3;
  }
}

/* --- Push notification banner (home screen) ----------------------------- */
.push-banner-slot { margin: 0 0 16px; }
.push-banner {
  background: linear-gradient(135deg, #fff7e6 0%, #ffeecc 100%);
  border: 1px solid #f0c674;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(240, 198, 116, 0.15);
}
.push-banner-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.push-banner-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f0a030;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.push-banner-text { flex: 1 1 auto; min-width: 0; }
.push-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: #2c1810;
  margin-bottom: 3px;
}
.push-banner-sub {
  font-size: 13px;
  line-height: 1.4;
  color: #5a4020;
}
.push-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.push-banner-btn {
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  transition: transform 0.1s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.push-banner-btn:active { transform: scale(0.97); }
.push-banner-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.push-banner-btn-primary {
  background: #f0a030;
  color: #fff;
  flex: 1 1 auto;
}
.push-banner-btn-primary:hover:not(:disabled) { background: #e09020; }
.push-banner-btn-ghost {
  background: transparent;
  color: #5a4020;
  padding: 10px 12px;
  flex: 0 0 auto;
}
.push-banner-btn-ghost:hover:not(:disabled) { background: rgba(240, 166, 48, 0.12); }
.push-banner-status {
  font-size: 13px;
  color: #5a4020;
  padding: 6px 2px 0;
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  .push-banner {
    background: linear-gradient(135deg, #3a2a10 0%, #2a1c08 100%);
    border-color: #7a5a20;
  }
  .push-banner-title { color: #ffefd6; }
  .push-banner-sub { color: #d0b890; }
  .push-banner-btn-ghost { color: #d0b890; }
}

/* Push-Banner: Denied-Variante (Benachrichtigungen wurden blockiert) */
.push-banner.push-banner-denied {
  background: linear-gradient(135deg, #fde4e4 0%, #f7cbcb 100%);
  border-color: #d98080;
  box-shadow: 0 2px 8px rgba(217, 128, 128, 0.18);
}
.push-banner.push-banner-denied .push-banner-icon { background: #c85050; }
.push-banner.push-banner-denied .push-banner-title { color: #5a1818; }
.push-banner.push-banner-denied .push-banner-sub { color: #6a2a2a; }
.push-banner.push-banner-denied .push-banner-btn-primary { background: #c85050; }
.push-banner.push-banner-denied .push-banner-btn-primary:hover:not(:disabled) { background: #b84040; }
.push-banner.push-banner-denied .push-banner-btn-ghost { color: #6a2a2a; }
.push-banner.push-banner-denied .push-banner-btn-ghost:hover:not(:disabled) { background: rgba(200, 80, 80, 0.12); }
.push-banner.push-banner-denied .push-banner-status { color: #6a2a2a; }
@media (prefers-color-scheme: dark) {
  .push-banner.push-banner-denied {
    background: linear-gradient(135deg, #3a1414 0%, #2a0c0c 100%);
    border-color: #7a3030;
  }
  .push-banner.push-banner-denied .push-banner-title { color: #ffd0d0; }
  .push-banner.push-banner-denied .push-banner-sub { color: #d89090; }
  .push-banner.push-banner-denied .push-banner-btn-ghost { color: #d89090; }
  .push-banner.push-banner-denied .push-banner-status { color: #d89090; }
}

/* Softphone Diagnose (permanent sichtbar auf Home bis alles grün ist) */
.softphone-diag-slot { margin: 0 0 14px; }
.softphone-diag {
  background: #ffffff;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diag-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #4b5563);
}
.diag-head i { opacity: 0.75; }
.diag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.diag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
}
.diag-chip i { font-size: 10px; }
.diag-chip-ok { background: #e5f6ec; color: #1e6c3a; }
.diag-chip-warn { background: #fff3d6; color: #7a5a10; }
.diag-chip-bad { background: #fde4e4; color: #7a1010; }
@media (prefers-color-scheme: dark) {
  .softphone-diag {
    background: #1a1d23;
    border-color: #2a2e35;
  }
  .diag-head { color: #9ca3af; }
  .diag-chip-ok { background: rgba(30, 108, 58, 0.18); color: #8fd0a6; }
  .diag-chip-warn { background: rgba(122, 90, 16, 0.22); color: #e6c878; }
  .diag-chip-bad { background: rgba(122, 16, 16, 0.22); color: #e89090; }
}

/* ===== Softphone Debug-Event-Panel (v83_debug) ===== */
.softphone-debug-slot { margin: 0 0 14px; }
.softphone-debug-panel { background: #fafafa; border: 1px solid rgba(0,0,0,0.06); }
.diag-evt-clear {
  margin-left: auto;
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 4px 8px;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
}
.diag-evt-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.diag-evt-row {
  display: flex;
  gap: 8px;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 11px;
  align-items: center;
  padding: 3px 6px;
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
}
.diag-evt-ts { color: #888; min-width: 56px; }
.diag-evt-tag { color: #0a58ca; font-weight: 600; min-width: 150px; }
.diag-evt-extra { color: #555; opacity: 0.8; }
.diag-evt-empty { color: #888; font-size: 12px; margin-top: 8px; font-style: italic; }
@media (prefers-color-scheme: dark) {
  .softphone-debug-panel { background: #181b20; border-color: rgba(255,255,255,0.08); }
  .diag-evt-clear { border-color: rgba(255,255,255,0.15); color: #bbb; }
  .diag-evt-row { background: rgba(255,255,255,0.04); }
  .diag-evt-ts { color: #888; }
  .diag-evt-tag { color: #7eb8ff; }
  .diag-evt-extra { color: #aaa; }
}

/* Softphone on/off toggle card on home */
.softphone-toggle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  background: var(--card-bg, #ffffff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.softphone-toggle-card.sp-disabled { opacity: 0.78; }
.sp-toggle-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  flex-shrink: 0;
  font-size: 16px;
}
.softphone-toggle-card.sp-disabled .sp-toggle-icon {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}
.sp-toggle-text { flex: 1; min-width: 0; }
.sp-toggle-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg, #111827);
  line-height: 1.2;
}
.sp-toggle-sub {
  font-size: 12px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-toggle-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
.sp-dot-ok { background: #10b981; }
.sp-dot-warn { background: #f59e0b; }
.sp-dot-off { background: #9ca3af; }

@media (prefers-color-scheme: dark) {
  .softphone-toggle-card {
    background: #1e2127;
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
  }
  .sp-toggle-title { color: #e5e7eb; }
  .sp-toggle-sub { color: #9ca3af; }
}

/* ========================================
   Call-Card Actions (Mobile) — v95_callactions
   ======================================== */

.quick-more-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(46,46,46,.14);
  background: var(--surface, #fff);
  color: var(--ink, #111);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, background .15s ease;
}
.quick-more-btn:active { transform: scale(.94); background: rgba(46,46,46,.06); }
.quick-more-btn i { font-size: 15px; }

.call-card-processed {
  opacity: .72;
}
.call-card-processed .call-card-title::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #28a745;
  margin-right: 6px;
  font-size: 12px;
}

/* Actions Bottom-Sheet */
.call-actions-sheet { padding-bottom: calc(24px + var(--safe-bottom)); }
.call-actions-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 12px;
}
.call-actions-sheet .sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
}
.call-actions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 0;
}
.call-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 8px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .1s ease;
}
.call-actions-row:active { background: rgba(46,46,46,.06); transform: scale(.98); }
.call-actions-row.danger { color: #d9534f; }
.call-actions-row.danger:active { background: rgba(217,83,79,.08); }
.call-actions-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(46,46,46,.06);
  color: var(--ink);
  font-size: 16px;
}
.call-actions-icon.ic-task   { background: rgba(40,167,69,.14);  color: #1c8f3a; }
.call-actions-icon.ic-ticket { background: rgba(240,173,78,.16); color: #a06820; }
.call-actions-icon.ic-mail   { background: rgba(92,127,184,.15); color: #3a5e90; }
.call-actions-icon.ic-check  { background: rgba(40,167,69,.14);  color: #1c8f3a; }
.call-actions-icon.ic-danger { background: rgba(217,83,79,.12);  color: #d9534f; }
.call-actions-label { flex: 1; min-width: 0; }
.call-actions-chevron { font-size: 12px; color: var(--ink-muted); opacity: .55; }

/* Confirm Sheet */
.confirm-sheet { padding-bottom: calc(20px + var(--safe-bottom)); }
.confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  padding: 12px 4px 6px;
  text-align: center;
}
.confirm-message {
  font-size: 14px;
  color: var(--ink-muted);
  padding: 0 4px 16px;
  text-align: center;
  line-height: 1.4;
}
.confirm-actions {
  display: flex;
  gap: 10px;
  padding: 8px 0 0;
}
.confirm-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, background .15s ease;
}
.confirm-btn:active { transform: scale(.97); }
.confirm-cancel {
  background: rgba(46,46,46,.08);
  color: var(--ink);
}
.confirm-ok {
  background: #d9534f;
  color: #fff;
}

/* Form Sheet */
.form-sheet {
  padding-bottom: calc(16px + var(--safe-bottom));
  max-height: 92vh;
}
.form-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(46,46,46,.06);
}
.form-sheet .sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.form-sheet .sheet-close {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 16px;
}
.form-sheet .sheet-close:active { background: rgba(46,46,46,.06); }
.form-sheet-body {
  overflow-y: auto;
  padding: 14px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.form-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(46,46,46,.14);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent, #3a7bd5);
  box-shadow: 0 0 0 3px rgba(58,123,213,.12);
}
.form-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.4;
}
.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  padding: 6px 0;
  cursor: pointer;
}
.form-checkbox { width: 18px; height: 18px; accent-color: var(--accent, #3a7bd5); }
.form-footer {
  display: flex;
  gap: 10px;
  padding: 14px 0 4px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(250,251,252,0) 0%, rgba(250,251,252,1) 18%, rgba(241,243,245,1) 100%);
}
.form-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, background .15s ease;
}
.form-btn:active { transform: scale(.97); }
.form-cancel {
  background: rgba(46,46,46,.08);
  color: var(--ink);
}
.form-submit {
  background: var(--brand, #2e2e2e);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .quick-more-btn {
    background: #1e2127;
    border-color: rgba(255,255,255,.08);
    color: #e7e9ee;
  }
  .quick-more-btn:active { background: rgba(255,255,255,.06); }
  .call-actions-row { color: #e7e9ee; }
  .call-actions-row:active { background: rgba(255,255,255,.06); }
  .call-actions-icon { background: rgba(255,255,255,.06); color: #e7e9ee; }
  .call-actions-chevron { color: rgba(230,232,238,.45); }
  .confirm-title { color: #e7e9ee; }
  .confirm-message { color: rgba(230,232,238,.55); }
  .confirm-cancel { background: rgba(255,255,255,.08); color: #e7e9ee; }
  .form-sheet .sheet-title { color: #e7e9ee; }
  .form-label { color: #e7e9ee; }
  .form-input {
    background: #1e2127;
    border-color: rgba(255,255,255,.1);
    color: #e7e9ee;
  }
  .form-checkbox-label { color: #e7e9ee; }
  .form-cancel { background: rgba(255,255,255,.08); color: #e7e9ee; }
  .form-footer {
    background: linear-gradient(180deg, rgba(30,33,39,0) 0%, rgba(30,33,39,1) 18%, rgba(30,33,39,1) 100%);
  }
}

/* === Kalender Detail-Sheet (v103_calendar_detail) === */
.list-card-chevron {
  display: flex;
  align-items: center;
  color: var(--text-muted, #9aa0a6);
  font-size: 13px;
  margin-left: 8px;
  flex-shrink: 0;
}
.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: rgba(31, 38, 135, .04);
  border-radius: 12px;
}
.detail-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--primary, #1f2687);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.detail-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-row-main {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #11151a);
  word-break: break-word;
}
.detail-row-sub {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.detail-row-link {
  font-size: 13px;
  color: var(--primary, #1f2687);
  font-weight: 600;
  text-decoration: none;
  margin-top: 2px;
}
.detail-row-link:active { opacity: .7; }
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.btn-danger {
  width: 100%;
  padding: 12px 18px;
  background: rgba(217, 83, 79, .08);
  color: var(--danger, #d9534f);
  border: 1.5px solid rgba(217, 83, 79, .25);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-danger:active { transform: scale(.98); background: rgba(217, 83, 79, .14); }