:root {
  --bg: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eef0f3;
  --border: #d6dbe2;
  --text: #23272f;
  --muted: #656d79;
  --button: #262a33;
  --button-hover: #1e222b;
  --button-text: #ffffff;
  --accent: #dc32db;
  --accent-soft: #f6ddf6;
  --accent-soft-2: #f1e8f7;

  --ok: #1c7a42;
  --warn: #b58105;
  --bad: #a63247;
  --ok-soft: #e5f8ec;
  --warn-soft: #fdf3d4;
  --bad-soft: #fde9ec;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  color: var(--text);
  min-height: 100vh;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 24px;
  background: #ffffffcc; backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; letter-spacing: 0.2px; color: #222833; }
.brand-tag {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--button-text);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px;
}
.topbar-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.topbar-pill {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff;
  font-size: 0.78rem;
}
.topbar-pill.ok { background: var(--ok-soft); color: var(--ok); border-color: #bde8cc; }
.topbar-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #f3d98a; }
.topbar-pill.bad { background: var(--bad-soft); color: var(--bad); border-color: #f6c8d1; }
.topbar-link {
  color: var(--accent); font-weight: 700; text-decoration: none;
  background: transparent; border: 1px solid var(--accent);
  padding: 4px 10px; border-radius: 999px; font-size: 0.85rem; cursor: pointer;
}
.topbar-link:hover { background: rgba(79, 70, 229, 0.08); }

.page { max-width: 1320px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }

.setcard {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 38px rgba(34,39,47,0.05);
}

.grid { display: grid; gap: 18px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-5 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}

/* ===== SECTION BLOCKS ===== */
.section-block {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.section-block:first-of-type { border-top: 0; padding-top: 0; }
.section-head {
  display: flex; flex-direction: column; gap: 4px;
}
.section-eyebrow {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent, #4f46e5); font-weight: 800;
}
.section-head h2 {
  margin: 0; font-size: 1.4rem; line-height: 1.2;
  color: var(--text);
}
.section-copy {
  margin: 0; font-size: 0.9rem; color: var(--muted); max-width: 700px;
}
.testchat-row { display: grid; gap: 14px; }

/* ===== HERO (compact title row) ===== */
.hero-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-soft-2) 100%);
}
button.hero-portrait {
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
}
button.hero-portrait:hover { border-color: var(--accent); }
button.hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: none; }
button.hero-portrait img.visible { display: block; }
#heroPortraitPlaceholder {
  color: var(--muted); font-size: 1.4rem; line-height: 1; font-weight: 500;
  user-select: none;
}
.hero-portrait-edit {
  position: absolute; right: -1px; bottom: -1px;
  width: 16px; height: 16px;
  background: var(--accent); color: #fff;
  border-radius: 50%; border: 1.5px solid #fff;
  font-size: 9px; line-height: 13px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
button.hero-portrait img.visible ~ #heroPortraitPlaceholder { display: none; }

.hero-head {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto;
}
.hero-head > div:first-child {
  display: flex; flex-direction: column; min-width: 0;
}
.hero-name {
  font-size: 0.98rem; font-weight: 700; padding: 0; line-height: 1.15;
  border: none; background: transparent; outline: none; color: var(--text);
  width: 100%; max-width: 260px;
}
.hero-name::placeholder { color: var(--muted); font-weight: 600; }
.hero-role {
  display: block; font-size: 0.78rem; padding: 0; line-height: 1.2;
  color: var(--muted);
  border: none; background: transparent; outline: none; width: 100%; max-width: 260px;
}
.hero-profile-switch {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 3px 8px; border-radius: 10px;
  background: #ffffff; border: 1px solid var(--border);
}
.hero-profile-switch label { font-size: 0.7rem; color: var(--muted); }
.hero-profile-switch select {
  border: none; outline: none; font-weight: 600; background: transparent;
  min-width: 120px; font-size: 0.85rem;
}
.hero-profile-switch .ghost-btn { padding: 2px 8px; font-size: 0.75rem; }
/* Destructive variant for the "Profil löschen" button. Subtle in idle
   state (so it doesn't scream from the hero), but turns clearly red on
   hover so the user knows they're about to wipe a profile. */
.ghost-btn-danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.4);
}
.ghost-btn-danger:hover:not([disabled]) {
  background: rgba(185, 28, 28, 0.1);
  border-color: rgba(185, 28, 28, 0.7);
}
.ghost-btn-danger[disabled] { opacity: 0.4; cursor: not-allowed; }

.hero-info-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.hero-info-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Status strip below the title row (KPIs + ready pills) */
.status-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 14px;
  margin: -8px 4px 0; padding: 0 4px;
}
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 6px; min-width: 0;
}
.hero-stats .stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 3px 8px; background: #ffffff;
}
.hero-stats .stat-label {
  font-size: 0.6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.hero-stats .stat-value { font-weight: 700; font-size: 0.82rem; margin-top: 0; }

.ready-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.ready-pill {
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); background: #ffffff;
  font-size: 0.68rem; color: var(--muted); font-weight: 600;
  line-height: 1.4;
}
.ready-pill.ok { background: var(--ok-soft); color: var(--ok); border-color: #bde8cc; }
.ready-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #f0d98a; }
.ready-pill.bad { background: var(--bad-soft); color: var(--bad); border-color: #f6c8d1; }

/* ===== MINI CARDS ===== */
.mini-card { display: flex; flex-direction: column; gap: 12px; min-height: 290px; }
.mini-head { display: flex; flex-direction: column; gap: 2px; }
.mini-eyebrow { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; }
.mini-card h3 { margin: 0; font-size: 1.1rem; }
.mini-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px; border: 1px dashed var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mini-media video, .mini-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: none;
}
#greetingPreview video,
#greetingPreview img {
  object-fit: contain;
  background: #0f172a;
}
.mini-media video.visible, .mini-media img.visible { display: block; }
.mini-placeholder { color: var(--muted); font-size: 0.85rem; }
.mini-meta { color: var(--muted); font-size: 0.85rem; min-height: 1.2em; }
.mini-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.live-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.snippets-media { background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft-2) 100%); border-style: solid; }
.snippets-count { font-size: 2.4rem; font-weight: 900; color: var(--accent); }
.snippets-count-label { font-size: 0.8rem; color: var(--muted); margin-top: -4px; }

.voice-media { background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%); border-style: solid; }
.voice-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
  filter: blur(2px) saturate(105%) brightness(0.96);
  transform: scale(1.04);
}
.voice-media img.visible { display: block; }
.voice-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.0) 0%, rgba(0,0,0,0.10) 100%);
}
.voice-bars {
  position: relative; z-index: 2;
  display: flex; gap: 5px; align-items: center; justify-content: center;
  height: 56px; width: 70%; max-width: 220px;
  padding: 10px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
.voice-bars span {
  width: 5px; background: var(--accent); border-radius: 3px;
  animation: voiceBar 1.4s ease-in-out infinite;
  transform-origin: center;
}
.voice-bars span:nth-child(1) { height: 30%; animation-delay: 0.0s; }
.voice-bars span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.voice-bars span:nth-child(3) { height: 80%; animation-delay: 0.2s; }
.voice-bars span:nth-child(4) { height: 95%; animation-delay: 0.3s; }
.voice-bars span:nth-child(5) { height: 70%; animation-delay: 0.4s; }
.voice-bars span:nth-child(6) { height: 90%; animation-delay: 0.5s; }
.voice-bars span:nth-child(7) { height: 55%; animation-delay: 0.6s; }
.voice-bars span:nth-child(8) { height: 35%; animation-delay: 0.7s; }
@keyframes voiceBar { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1.05); } }
#voicePreviewPlayer { display: none; width: 100%; }

/* ===== BUTTONS ===== */
.primary-btn {
  background: var(--button); color: var(--button-text);
  border: none; border-radius: 999px; padding: 10px 16px;
  font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s;
}
.primary-btn:hover { background: var(--button-hover); }
.primary-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ghost-btn {
  background: #ffffff; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; font-weight: 600;
  text-decoration: none;
}
.ghost-btn:hover { background: var(--surface-2); }

/* ===== INSIGHT ===== */
.insight-card { display: flex; flex-direction: column; gap: 14px; }
.insight-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.insight-head h3 { margin: 0; font-size: 1.15rem; }
.insight-copy { color: var(--muted); margin: 4px 0 0 0; font-size: 0.9rem; }

.radar-list { display: flex; flex-direction: column; gap: 8px; }
.radar-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.radar-row strong { font-weight: 700; }
.radar-row .radar-rank {
  padding: 3px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
}
.radar-row .radar-rank.bad { background: var(--bad-soft); color: var(--bad); border-color: #f6c8d1; }
.radar-row .radar-rank.warn { background: var(--warn-soft); color: var(--warn); border-color: #f0d98a; }
.radar-row .radar-rank.ok { background: var(--ok-soft); color: var(--ok); border-color: #bde8cc; }
.radar-row .radar-meta { color: var(--muted); font-size: 0.8rem; }

.inbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inbox-list li {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.inbox-list .inbox-question { font-weight: 600; }
.inbox-list .inbox-meta { color: var(--muted); font-size: 0.8rem; }

/* ===== BEHAVIOR ===== */
.behavior-card { display: flex; flex-direction: column; gap: 14px; }
.behavior-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.behavior-mode {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  background: #ffffff;
}
.behavior-mode.active { border-color: var(--accent); background: var(--accent-soft-2); }
.behavior-mode strong, .behavior-mode span { font-weight: 700; }
.behavior-mode small { color: var(--muted); }
.behavior-foot { display: flex; gap: 10px; flex-wrap: wrap; }
.badge-soft {
  background: var(--accent-soft-2); color: var(--accent);
  border: 1px solid var(--accent-soft);
  padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 0.78rem;
}

.live-card { display: flex; flex-direction: column; gap: 14px; }
.live-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.live-stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); }
.live-stat-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.live-stat-value { font-weight: 800; font-size: 1.2rem; margin-top: 4px; }

/* ===== DEPLOYMENT ===== */
.deployment-card { display: flex; flex-direction: column; gap: 14px; }
.deployment-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) { .deployment-grid { grid-template-columns: 1fr; } }
.deployment-block {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
}
.deployment-label { font-weight: 700; font-size: 0.85rem; }
.deployment-code, .deployment-pre {
  background: #ffffff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; margin: 0;
  max-height: 180px; overflow: auto;
}
.deployment-qr { display: flex; align-items: center; justify-content: center; padding: 8px; background: #fff; border-radius: 8px; }
.deployment-qr img { max-width: 160px; }

/* ===== PERFORMANCE ===== */
.performance-card { display: flex; flex-direction: column; gap: 14px; }
.performance-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px) { .performance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .performance-grid { grid-template-columns: repeat(2, 1fr); } }
.performance-tile {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}
.performance-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.performance-value { font-weight: 900; font-size: 1.4rem; margin-top: 6px; color: var(--text); }
.performance-value-text { font-weight: 700; font-size: 0.95rem; margin-top: 6px; color: var(--text); }

.page-foot {
  display: flex; justify-content: space-between; color: var(--muted); font-size: 0.8rem;
  padding: 12px 0;
}

/* ===== POPUPS ===== */
.popup-backdrop {
  position: fixed; inset: 0; background: rgba(34,39,47,0.45);
  z-index: 90; backdrop-filter: blur(2px);
}
.popup {
  position: fixed; z-index: 100;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); overflow: auto;
  background: #ffffff; border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(34,39,47,0.18);
  padding: 18px;
}
.popup-wide { width: min(960px, calc(100vw - 32px)); }
.popup-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px;
}
.popup-head h2 { margin: 0; font-size: 1.25rem; }
.popup-body { display: flex; flex-direction: column; gap: 12px; }
.popup-copy { color: var(--muted); margin: 0; }
.popup-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.popup-actions-split { justify-content: space-between; flex-wrap: wrap; }
.primary-btn-next {
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.primary-btn-next:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.primary-btn-next .next-arrow {
  display: inline-block; transition: transform 160ms ease;
  font-size: 1.05em; line-height: 1;
}
.primary-btn-next:hover .next-arrow { transform: translateX(3px); }
.popup-status { color: var(--muted); font-size: 0.88rem; }
.popup-video { width: 100%; border-radius: 12px; background: #000; max-height: 360px; }

.voice-controls { display: grid; gap: 10px; }
.voice-controls { grid-template-columns: auto 1fr auto; align-items: center; }
.inline-check { display: flex; gap: 6px; align-items: center; font-size: 0.85rem; }

.popup textarea, .popup input[type="text"], .popup input[type="email"], .popup input:not([type]), .popup select {
  width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  font-size: 0.95rem; background: #fff;
}

/* ===== SNIPPETS ===== */
.snippet-form {
  display: grid; gap: 8px; padding: 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.snippet-form-row { display: grid; gap: 4px; }
.snippet-form-row label { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.snippet-form-row.inline-row { grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
.snippet-form-row.inline-row .primary-btn { justify-self: end; }
.snippet-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.snippet-table { width: 100%; border-collapse: collapse; }
.snippet-table th, .snippet-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.88rem; }
.snippet-table th { background: var(--surface); font-weight: 700; }
.snippet-table tr:last-child td { border-bottom: none; }
.snippet-conf { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.78rem; background: var(--surface-2); }
.snippet-conf.hoch { background: var(--ok-soft); color: var(--ok); }
.snippet-conf.mittel { background: var(--warn-soft); color: var(--warn); }
.snippet-conf.niedrig { background: var(--bad-soft); color: var(--bad); }
.snippet-actions { display: flex; gap: 6px; }

.radar-detail-list, .inbox-detail-list { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; list-style: none; }
.radar-detail-row {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  background: var(--surface);
}
.radar-detail-row .radar-detail-meta { color: var(--muted); font-size: 0.85rem; }
.inbox-detail-row {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  background: var(--surface);
}

/* ===== LIVE CHAT PLACEHOLDER ===== */
.livechat-card { padding: 16px 18px; }
.livechat-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: stretch;
}
@media (max-width: 720px) { .livechat-grid { grid-template-columns: 1fr; } }
.livechat-stage {
  position: relative;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.livechat-stage img { width: 100%; height: 100%; object-fit: contain; display: none; background: #0f172a; }
.livechat-stage img[src] { display: block; }
.livechat-talk-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
  background: #0f172a;
}
.livechat-talk-video--visible { opacity: 1; }
#livechatPortraitPlaceholder { color: var(--muted); font-size: 0.85rem; padding: 12px; text-align: center; }
.livechat-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; color: var(--text);
}
.livechat-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.livechat-messages {
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 10px; min-height: 130px; max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.livechat-msg {
  padding: 8px 10px; border-radius: 10px; font-size: 0.92rem;
  background: var(--surface); border: 1px solid var(--border);
  max-width: 95%;
}
.livechat-msg.user { align-self: flex-end; background: var(--accent-soft-2); border-color: var(--accent-soft); }
.livechat-msg--user-partial {
  font-style: italic; opacity: 0.7;
  border-style: dashed !important;
}
.livechat-msg.snippet { background: var(--ok-soft); border-color: #b8e7c8; }
.livechat-msg.out_of_scope { background: var(--warn-soft); border-color: #f5e0a3; }
.livechat-msg.llm_stub { background: var(--surface-2); }
.livechat-msg.system { background: transparent; border: none; color: var(--muted); font-size: 0.82rem; padding: 0 4px; }
.livechat-msg-source {
  display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); margin-bottom: 2px;
}
.livechat-input { display: flex; gap: 8px; align-items: center; }
.livechat-input input {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); font-size: 0.95rem; background: #fff;
}
.livechat-mic-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #fafafa, #ececec);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.livechat-mic-btn:hover { background: linear-gradient(180deg, #fff, #f1f1f1); }
.livechat-mic-btn.is-active {
  background: linear-gradient(180deg, #ff5b5b, #c4282d);
  color: #fff; border-color: #a72121;
  box-shadow: 0 0 0 4px rgba(255,90,90,0.18);
}
.livechat-mic-btn.is-active:hover { transform: scale(1.02); }
.livechat-mic-meter {
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--border); overflow: hidden; opacity: 0.7;
  margin-top: 4px;
}
.livechat-mic-meter > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #5fc77a, #ffba3b 65%, #ff5050);
  transition: width 60ms linear;
}
.livechat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.livechat-suggestion {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 4px 10px; font-size: 0.78rem;
  cursor: pointer; color: var(--text);
}
.livechat-suggestion:hover { background: var(--surface-2); }

/* ===== VOICE POPUP UPLOAD ===== */
.voice-upload-area {
  display: flex; align-items: center; justify-content: center;
  padding: 14px; border: 1.5px dashed var(--border); border-radius: 12px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 0.92rem;
}
.voice-upload-area:hover { border-color: var(--accent); color: var(--accent); }

.badge-soft {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; color: var(--text); font-weight: 700;
}

/* ===== IDLE POPUP (PersonaLive) ===== */
.idle-step {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
  transition: opacity 200ms ease, filter 200ms ease;
}
.idle-step-locked { opacity: 0.55; pointer-events: none; filter: saturate(0.8); }
.idle-step-locked .idle-step-num { background: var(--surface-2) !important; color: var(--muted) !important; }
.idle-step-head { display: flex; align-items: center; gap: 10px; }
.idle-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.82rem; flex-shrink: 0;
}
.idle-step-head h3 { margin: 0; flex: 1; font-size: 0.98rem; }
.idle-step-status {
  font-size: 0.72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; font-weight: 700;
}
.idle-step-status.done { color: var(--ok); }
.idle-step-body { display: flex; gap: 14px; align-items: stretch; }
.idle-step-body-vert { flex-direction: column; }
@media (max-width: 720px) { .idle-step-body { flex-direction: column; } }

/* Twin row: Quellbild+Crop links, Variant-Slider rechts */
.idle-twin-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start;
}
@media (max-width: 520px) { .idle-twin-row { grid-template-columns: 1fr; } }
.idle-twin-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.idle-twin-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 700;
  padding: 0 4px;
}
.idle-twin-controls {
  display: flex; align-items: center; gap: 12px;
}
.idle-twin-controls label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.7rem; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.idle-twin-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.idle-twin-controls .ghost-btn { align-self: flex-end; }

.idle-crop-stage {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 14px; overflow: hidden;
  background: #1a1d22; cursor: grab;
  user-select: none; touch-action: none;
  border: 1px solid var(--border);
}
.idle-crop-stage.dragging { cursor: grabbing; }
.idle-crop-stage.locked { cursor: default; }
/* No object-fit: the JS sets transform: translate(-50%, -50%) translate(tx, ty)
   scale(coverScale * zoom) on a natural-size image. That way pan/zoom can
   actually reveal pixels OUTSIDE the initial cover-fit window — with
   object-fit:cover the overflow is pre-clipped at render time and panning
   only exposes the parent background ("schwarze ränder"-Bug 2026-04-27). */
.idle-crop-stage img {
  position: absolute;
  top: 50%; left: 50%;
  width: auto; height: auto;
  max-width: none; max-height: none;
  /* transform-origin defaults to "50% 50%" (= center of natural-size box).
     Combined with the JS transform `translate(-50%, -50%) translate(tx, ty)
     scale(s)`, the math collapses to: place the image's center at the stage
     center, then pan by (tx, ty) px, then scale around that center. See
     applyIdleCropTransform() for the derivation. */
  pointer-events: none; user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.idle-crop-stage img:not([src]),
.idle-crop-stage img[src=""] { display: none; }
.idle-crop-placeholder {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); font-size: 0.9rem;
  text-align: center; padding: 12px; pointer-events: none;
}
.idle-crop-stage img[src]:not([src=""]) ~ .idle-crop-placeholder { display: none; }

/* Visible white crop frame (wow effect).
   The `inset` is driven by a CSS variable that applyIdleCropTransform() sets
   from JS — at zoom < 100 % the inset shrinks toward 4 px so the white frame
   grows toward the stage edges, exposing the entire (cover-scaled) photo
   without scaling it down. The default 40 px keeps the original look at
   zoom = 100 %. Frame, corners and grid all read the same variable so they
   move together pixel-perfect. The canvas export uses the same value, so
   "what's inside the white rectangle = what becomes the avatar source"
   stays true at every slider position. */
.idle-crop-frame {
  position: absolute; inset: var(--crop-inset, 40px);
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: 6px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 255, 255, 0.28);
  pointer-events: none;
  transition: inset 90ms linear;
}
.idle-crop-corners {
  position: absolute; inset: var(--crop-inset, 40px);
  pointer-events: none; z-index: 2;
  transition: inset 90ms linear;
}
.idle-crop-corners .cc {
  position: absolute; width: 18px; height: 18px;
  border-color: #fff; border-style: solid; border-width: 0;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.55));
}
.idle-crop-corners .cc-tl { top: -3px; left: -3px; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 6px; }
.idle-crop-corners .cc-tr { top: -3px; right: -3px; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 6px; }
.idle-crop-corners .cc-bl { bottom: -3px; left: -3px; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 6px; }
.idle-crop-corners .cc-br { bottom: -3px; right: -3px; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 6px; }

.idle-crop-grid {
  position: absolute; inset: var(--crop-inset, 40px);
  border-radius: 6px;
  background:
    linear-gradient(to right, transparent calc(33.33% - 1px), rgba(255,255,255,0.4) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgba(255,255,255,0.4) 66.66%, transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent calc(33.33% - 1px), rgba(255,255,255,0.4) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgba(255,255,255,0.4) 66.66%, transparent calc(66.66% + 1px));
  pointer-events: none;
  transition: inset 90ms linear;
}
.idle-crop-stage:not(.has-image) .idle-crop-frame,
.idle-crop-stage:not(.has-image) .idle-crop-grid,
.idle-crop-stage:not(.has-image) .idle-crop-corners { display: none; }

.idle-crop-value {
  font-size: 0.85rem; color: var(--text); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.idle-crop-hint { color: var(--muted); font-size: 0.78rem; padding: 0 4px; }

/* Variant slider stage (right twin column) */
.idle-variant-stage {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 14px; overflow: hidden;
  background: #1a1d22; border: 1px solid var(--border);
}
.idle-variant-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.5;
}
.idle-variant-stage.has-variants .idle-variant-empty { display: none; }
.idle-variant-slider {
  position: absolute; inset: 0;
  display: flex; transform: translateX(0);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.idle-variant-slide {
  flex: 0 0 100%; position: relative;
  background: #000;
}
.idle-variant-slide video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.idle-variant-overlay {
  position: absolute; top: 12px; left: 12px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.65); color: #fff;
  font-weight: 800; font-size: 0.92rem; letter-spacing: 0.2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  display: none;
}
.idle-variant-stage.has-variants .idle-variant-overlay { display: inline-flex; align-items: center; gap: 6px; }
.idle-variant-overlay .selected-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}
.idle-variant-nav {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
}
.idle-variant-arrow {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; flex-shrink: 0;
}
.idle-variant-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.idle-variant-indicator {
  min-width: 36px; text-align: center; white-space: nowrap;
  font-size: 0.85rem; color: var(--muted); font-weight: 700;
  flex-shrink: 0;
}
.idle-variant-pick {
  white-space: nowrap; margin-left: auto;
  padding: 7px 12px; font-size: 0.85rem;
  min-width: 0;
}

/* Studio fix 2026-04-28: pink, prominent slider nav + apply button.
   Mirrors look-popup accent treatment so user sees the same visual
   language ("active = pink frame") in both popups. */
.idle-variant-nav-pink {
  margin-top: 10px;
  justify-content: center;
  gap: 12px;
}
.idle-variant-arrow-pink {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-size: 1.35rem; font-weight: 800; line-height: 1;
  cursor: pointer;
  box-shadow:
    0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.idle-variant-arrow-pink:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, black);
  transform: translateY(-1px);
}
.idle-variant-arrow-pink:active:not(:disabled) {
  transform: translateY(0);
}
.idle-variant-arrow-pink:disabled {
  background: color-mix(in srgb, var(--accent) 35%, var(--surface-2));
  color: rgba(255,255,255,0.7);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
.idle-variant-nav-pink .idle-variant-indicator {
  font-size: 0.95rem; color: var(--text); font-weight: 800;
  min-width: 60px;
}
.idle-variant-apply-pink {
  margin-top: 10px;
  width: 100%;
  background: var(--accent);
  color: #ffffff;
  padding: 12px 18px;
  font-size: 1rem; font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.idle-variant-apply-pink:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, black);
}
.idle-variant-apply-pink:disabled {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface-2));
  color: rgba(255,255,255,0.85);
  box-shadow: none;
}

/* Pink frame around the slider stage when the currently shown variant
   IS the active/selected one. Same look-feel as look-preview-item.active. */
.idle-variant-stage.is-active-variant {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.idle-controls { display: flex; flex-direction: column; gap: 12px; }
.idle-controls > label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.idle-controls > label > textarea,
.idle-controls > label > select,
.idle-controls > label > input[type="file"] {
  width: 100%; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 0.95rem; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.idle-driving small { color: var(--muted); font-size: 0.75rem; font-weight: 500; text-transform: none; letter-spacing: 0; }

.idle-progress { display: flex; flex-direction: column; gap: 6px; }
.idle-progress-bar {
  width: 100%; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden;
  border: 1px solid var(--border);
}
.idle-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, #b070ff 100%);
  transition: width 600ms ease;
}
.idle-progress-text { font-size: 0.82rem; color: var(--muted); }


/* ===== PROFILE POPUP (Foto + Stammdaten) ===== */
.profile-form { display: flex; flex-direction: column; gap: 14px; }
.profile-photo-row, .profile-logo-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
/* Big "as-uploaded" preview: portrait/landscape both shown un-cropped via
   object-fit: contain. The actual crop step happens later (idle popup only). */
.profile-photo-preview {
  width: 200px; height: 240px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto; position: relative;
}
.profile-photo-preview img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: none;
}
.profile-photo-preview img[src]:not([src=""]) { display: block; }
#profilePhotoEmpty {
  font-size: 0.8rem; color: var(--muted); padding: 8px; text-align: center;
}
.profile-photo-preview img[src]:not([src=""]) ~ #profilePhotoEmpty { display: none; }
.profile-photo-hint { color: var(--muted); font-size: 0.75rem; line-height: 1.4; margin-top: 4px; }
.profile-logo-preview {
  width: 84px; height: 84px; border-radius: 12px;
  background: #ffffff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
}
.profile-logo-preview img { max-width: 90%; max-height: 90%; object-fit: contain; display: none; }
#profileLogoEmpty { font-size: 0.75rem; color: var(--muted); }
.profile-photo-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profile-photo-btn { display: inline-block; cursor: pointer; }
.profile-photo-filename { font-size: 0.75rem; color: var(--muted); }

.profile-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.75rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.profile-grid label input {
  font-size: 0.95rem; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
.profile-grid-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } }

/* ===== INFO POPUP (read-only) ===== */
.info-card { display: flex; flex-direction: column; gap: 14px; }
.info-head { display: flex; align-items: center; gap: 14px; }
.info-head img {
  width: 64px; height: 64px; object-fit: contain;
  border-radius: 12px; background: #fff;
  border: 1px solid var(--border); padding: 6px;
}
.info-practice { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.info-person { font-size: 0.95rem; color: var(--text); }
.info-role { font-size: 0.85rem; color: var(--muted); }
.info-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.info-list > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.info-list dt { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.info-list dd { margin: 0; font-size: 0.92rem; color: var(--text); word-break: break-word; }

/* ===== LOOK POPUP ===== */
.popup-wide { max-width: 880px; }
.look-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.look-preview-item {
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease;
}
.look-preview-item.active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: transparent;
  box-shadow: none;
}
.look-preview-item.disabled {
  opacity: 0.55; cursor: not-allowed;
}
.look-preview-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 700;
  padding: 0 4px;
}
.look-preview-frame {
  display: block;
  position: relative; aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: #f4f5f8;
  transition: border-color 160ms ease, box-shadow 200ms ease;
}
.look-preview-item.active .look-preview-frame {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Show photo at original aspect ratio (no auto-crop). Crop only happens in
   the idle popup, on user action. Portrait or landscape both fit fully. */
.look-preview-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: none;
}
.look-preview-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-size: 0.85rem; padding: 12px;
}
/* Documented progress overlay inside the scenario output frame.
   Mirrors the V1 render panel: LED + stage + % + animated sweep + bar + detail.
   Always shows movement so the user can see whether the GPU is working. */
.look-render-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(17, 21, 28, 0.0) 0%,
    rgba(17, 21, 28, 0.55) 38%,
    rgba(17, 21, 28, 0.88) 100%
  );
  color: #f6f7fb;
  pointer-events: none;
  overflow: hidden;
}
.look-render-overlay::before {
  content: "";
  position: absolute;
  inset: -10% 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    color-mix(in srgb, var(--accent) 30%, transparent) 50%,
    rgba(255, 255, 255, 0.04) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: lookRenderSweep 2400ms linear infinite;
  pointer-events: none;
  z-index: 0;
}
.look-render-overlay > * { position: relative; z-index: 1; }

.look-render-overlay[data-phase="idle"]::before { animation-play-state: paused; opacity: 0.0; }
.look-render-overlay[data-phase="ready"]::before { animation-play-state: paused; opacity: 0.0; }
.look-render-overlay[data-phase="error"]::before { animation-play-state: paused; opacity: 0.0; }

.look-render-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.look-render-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #aab2bd;
  box-shadow: 0 0 0 4px rgba(170, 178, 189, 0.18);
  flex: 0 0 auto;
}
.look-render-overlay[data-phase="queued"] .look-render-led {
  background: color-mix(in srgb, var(--accent) 90%, white);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: lookRenderLedPulse 1700ms ease-in-out infinite;
}
.look-render-overlay[data-phase="running"] .look-render-led {
  background: color-mix(in srgb, var(--accent) 95%, white);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: lookRenderLedPulse 1300ms ease-in-out infinite;
}
.look-render-overlay[data-phase="ready"] .look-render-led {
  background: #38b15a;
  box-shadow: 0 0 0 4px rgba(56, 177, 90, 0.18), 0 0 10px rgba(56, 177, 90, 0.28);
}
.look-render-overlay[data-phase="error"] .look-render-led {
  background: #d64b5f;
  box-shadow: 0 0 0 4px rgba(214, 75, 95, 0.18), 0 0 10px rgba(214, 75, 95, 0.24);
}
.look-render-percent {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #f7fbff;
  letter-spacing: 0.02em;
}
.look-render-message {
  font-size: 0.86rem; font-weight: 600; line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.look-render-detail {
  font-size: 0.76rem; line-height: 1.4;
  color: rgba(246, 247, 251, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.look-render-progress {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.look-render-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width 220ms ease;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 70%, white) 0%,
    color-mix(in srgb, var(--accent) 95%, white) 50%,
    #fff6ff 100%
  );
  position: relative;
  overflow: hidden;
}
.look-render-overlay[data-phase="running"] .look-render-progress-bar::after,
.look-render-overlay[data-phase="queued"] .look-render-progress-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  animation: lookRenderBarShimmer 1400ms linear infinite;
}
.look-render-overlay[data-phase="error"] .look-render-progress-bar {
  background: linear-gradient(90deg, #d64b5f 0%, #f37e90 100%);
}
@keyframes lookRenderSweep {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(140%); }
}
@keyframes lookRenderBarShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes lookRenderLedPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.look-preview-pick {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
}
.look-preview-item.active .look-preview-pick {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: #fff;
}
.look-preview-pick input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.look-preview-pick-text {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.85rem;
}
.look-preview-pick-text strong { font-weight: 700; color: var(--text); }
.look-preview-pick-text small { color: var(--muted); font-size: 0.75rem; }
.look-scenario-editor {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.look-scenario-editor h3 { margin: 0; font-size: 0.95rem; }
.look-scenario-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 640px) { .look-scenario-grid { grid-template-columns: 1fr; } }
.look-scenario-editor label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
}
.look-scenario-editor input,
.look-scenario-editor textarea {
  font-size: 0.92rem; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-weight: 500; text-transform: none; letter-spacing: 0; font-family: inherit;
  resize: vertical;
}

/* ===== VOICE POPUP ===== */
.voice-twin-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 520px) { .voice-twin-row { grid-template-columns: 1fr; } }
.voice-twin-col {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
  min-width: 0;
}
.voice-twin-label {
  font-size: 0.72rem; text-transform: uppercase; color: var(--muted);
  letter-spacing: 0.5px; font-weight: 700;
}
.voice-sample-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
}
.voice-upload-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px dashed var(--border); background: #fff;
  color: var(--muted); cursor: pointer; flex-shrink: 0;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.voice-upload-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft-2, #f5f0ff); }
.voice-upload-icon.has-file {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft-2);
}
.voice-sample-row audio { flex: 1 1 0; min-width: 0; width: 0; height: 38px; }
.voice-sample-hint { font-size: 0.78rem; color: var(--muted); flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-model-row { display: flex; flex-direction: column; gap: 6px; min-height: 44px; justify-content: center; }
.voice-model-select { width: 100%; }
.voice-model-hint { font-size: 0.72rem; color: var(--muted); }
.voice-generate-row {
  display: flex; justify-content: center;
  padding: 6px 0;
}
.voice-generate-btn { padding: 12px 24px; font-size: 0.95rem; }
.voice-stale-warning {
  margin: 6px 0 2px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #5a3300;
  background: linear-gradient(180deg, #fff4d6, #ffe6a8);
  border: 1px solid #f0c46a;
  box-shadow: 0 0 0 3px rgba(240, 196, 106, 0.18);
}
.voice-stale-warning strong { color: #4a2300; }
.voice-stale-warning em { font-style: normal; font-weight: 600; color: #4a2300; }
.voice-stale-warning.hidden { display: none; }
.voice-generate-btn.attention {
  animation: voiceGeneratePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes voiceGeneratePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.voice-step {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.voice-step h3 { margin: 0; font-size: 0.95rem; }
.voice-preview-controls label { flex: 1; }
.voice-preview-controls input {
  width: 100%; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
}
.voice-variant-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  margin-top: 8px;
}
.voice-variant-preview-row textarea {
  width: 100%;
  min-width: 0;
  min-height: 88px;
  resize: vertical;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
}
.voice-variant-preview-row .voice-variant-listen-btn {
  align-self: stretch;
  padding: 8px 12px;
  font-size: 0.82rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.voice-variants {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.voice-empty {
  font-size: 0.85rem; color: var(--muted); padding: 10px;
  background: #fff; border: 1px dashed var(--border); border-radius: 10px;
}
.voice-variant-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: #fff;
}
.voice-variant-card.selected {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.voice-variant-card.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--accent-soft-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.voice-variant-status.AKTIV,
.voice-variant-card.active .voice-variant-status {
  background: var(--accent-soft);
  color: var(--accent);
}
.voice-variant-active-pill {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  cursor: default;
}
.voice-variant-active-pill:disabled { opacity: 1; }
.voice-variant-note {
  font-size: 0.72rem; color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}
.voice-variant-head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.voice-variant-status {
  font-size: 0.65rem; padding: 2px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
  background: #f1f3f6; color: var(--muted);
}
.voice-variant-status.ready {
  background: var(--accent-soft);
  color: var(--accent);
}
.voice-variant-status.failed,
.voice-variant-status.error { background: #fee2e2; color: #991b1b; }
.voice-variant-meta { font-size: 0.75rem; color: var(--muted); }
.voice-variant-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.voice-variant-card audio { width: 100%; }
@media (max-width: 760px) {
  .voice-variant-preview-row {
    grid-template-columns: 1fr;
  }
  .voice-variant-preview-row .voice-variant-listen-btn {
    min-height: 42px;
  }
}

/* Studio fix 2026-04-28: inline render-overlay for voice-variant cards.
   Reuses the look-render-overlay LED + progress + sweep visual language
   so the wait animation matches the look popup and the idle popup. The
   container is dark + relatively positioned (not absolute inset:0) so it
   slots into the card like a regular flex child where the audio element
   would otherwise sit. */
.voice-variant-render-overlay {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px 12px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 22%, #1a1d22) 0%,
    #1a1d22 70%);
  color: #f7fbff;
  min-height: 86px;
}
.voice-variant-render-overlay .look-render-top { color: #f7fbff; }
.voice-variant-render-overlay .look-render-message,
.voice-variant-render-overlay .look-render-detail { color: rgba(247,251,255,0.92); }
.voice-variant-card.is-waiting {
  /* Soft pink halo so the user sees that THIS card is the one waiting. */
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.voice-active {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--accent-soft-2);
}
.voice-active-head { font-size: 0.95rem; }
.voice-active-meta { font-size: 0.78rem; color: var(--muted); }

/* ===== LIVE PREVIEW POPUP ===== */
.live-preview-stage {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr);
  gap: 14px;
  min-height: 480px;
}
@media (max-width: 720px) {
  .live-preview-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 12px;
  }
  /* Avatar + Kontext zuerst, Chat-Spalte darunter — maximale Aufmerksamkeit fürs Gesicht. */
  .live-preview-visual-stack {
    order: -1;
  }
  #livePreviewMobileContextCard {
    display: block;
    flex: 1 1 auto;
    min-height: 120px;
  }
  .live-preview-avatar {
    max-height: min(58vh, 640px);
  }
  .live-preview-messages {
    min-height: 140px;
    max-height: 36vh;
  }
}
.live-preview-visual-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* Mobile-first: Infokarte nutzt die vertikale Fläche unter dem Portrait.
   Auf Desktop bleibt das zweispaltige Layout schlank — die Karte wäre dort doppelt. */
#livePreviewMobileContextCard {
  display: none;
}
.live-preview-context-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.live-preview-context-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.live-preview-context-head strong {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.live-preview-context-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  background: var(--accent-soft-2);
  color: var(--accent);
}
.live-preview-context-card[data-tone="warmup"] .live-preview-context-badge {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}
.live-preview-context-card[data-tone="busy"] .live-preview-context-badge {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.live-preview-context-card[data-tone="ready"] .live-preview-context-badge {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}
.live-preview-context-body {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text);
}
.live-preview-context-body .live-preview-context-muted {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--muted);
}
.live-preview-context-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.live-preview-context-list li { margin: 4px 0; }
.live-preview-avatar {
  position: relative; aspect-ratio: 9 / 16;
  background: #0f172a; border-radius: 16px; overflow: hidden;
  max-height: 60vh;
  transition: transform 0.18s ease-out;
}
/* Acknowledge-Nod: Avatar nickt beim Erhalt einer User-Frage 1x kurz an.
   Reine CSS-Animation, ~380ms. Der visuelle Effekt verkürzt die gefühlte
   "wartet jetzt" Phase um den entscheidenden ersten Eindruck. */
.live-preview-avatar.is-acking {
  animation: avatarNod 0.38s ease-out;
}
@keyframes avatarNod {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(4px) scale(1.012); }
  70%  { transform: translateY(-1px) scale(1.006); }
  100% { transform: translateY(0) scale(1); }
}
/* Listening pulse: ein dezenter blauer Ring um den Avatar wenn das Mic
   aktiv ist. Signalisiert dem User "ich höre dich gerade". */
.live-preview-avatar.is-listening::before {
  content: ""; position: absolute; inset: -2px; border-radius: 18px;
  border: 2px solid rgba(96, 165, 250, 0.85);
  pointer-events: none; z-index: 9;
  animation: listenPulse 1.6s ease-in-out infinite;
}
@keyframes listenPulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.0); }
  50%      { opacity: 1.0; box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.18); }
}
.live-preview-avatar video {
  width: 100%; height: 100%; object-fit: contain; display: none; background: #0f172a;
}
.live-preview-avatar video.live-preview-livekit {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; object-fit: contain; background: #0f172a;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}
.live-preview-avatar.livekit-active video.live-preview-livekit {
  opacity: 1;
  z-index: 60;
}
.live-preview-avatar.livekit-active > #livePreviewVideo,
.live-preview-avatar.livekit-active > .live-preview-talk,
.live-preview-avatar.livekit-active > .live-preview-filler {
  opacity: 0 !important;
  pointer-events: none;
}
.live-preview-avatar.livekit-active .live-preview-placeholder { display: none !important; }
.live-preview-avatar.livekit-active canvas.live-preview-hold {
  display: none !important;
  opacity: 0 !important;
}
.livekit-tag {
  border-color: rgba(28, 122, 66, 0.22);
  background: var(--ok-soft);
  color: var(--ok);
}
.livekit-tag.warn {
  border-color: rgba(181, 129, 5, 0.25);
  background: var(--warn-soft);
  color: var(--warn);
}
.livekit-tag.bad {
  border-color: rgba(166, 50, 71, 0.25);
  background: var(--bad-soft);
  color: var(--bad);
}
.livekit-status { color: var(--muted); }
/* Talking-head <video> elements: they live on top of the idle loop and
   only become visible once the LiveSession assigns them a Blob URL with
   actual lipsync frames. .visible is toggled by attachTalkVideo + the
   A/B swap logic in app-v3.js. */
.live-preview-avatar video.live-preview-talk {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; object-fit: contain; background: transparent;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.live-preview-avatar video.live-preview-talk.visible { opacity: 1; }
/* Pre-rendered filler clip — same surface contract as the talk videos so
   the unified hold-canvas crossfade applies to fillers too. Stays out of
   the layout (opacity:0) until the live session decides to play one. */
.live-preview-avatar video.live-preview-filler {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; object-fit: contain; background: transparent;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.live-preview-avatar video.live-preview-filler.is-playing {
  opacity: 1;
  z-index: 12;
}
/* Snapshot/hold canvas: sits above every video layer and shows the most
   recently visible avatar frame whenever we are in the middle of swapping
   the active <video>. Fades out only after the next clip is actually
   producing frames, so the user never sees a black frame, a poster flash
   or a hard cut between idle, filler and answer clips. */
.live-preview-avatar canvas.live-preview-hold {
  position: absolute; inset: 0; z-index: 10;
  width: 100%; height: 100%; object-fit: contain; background: transparent;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.live-preview-avatar canvas.live-preview-hold.is-visible { opacity: 1; }
.live-preview-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  color: #fff; padding: 16px;
}
.live-preview-placeholder span {
  background: rgba(0,0,0,0.5); padding: 6px 10px; border-radius: 8px;
  font-size: 0.85rem;
}
.live-preview-overlay {
  display: none;
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(15, 23, 42, 0.65); color: #fff;
  border-radius: 12px; padding: 8px 12px; backdrop-filter: blur(8px);
}
.live-preview-name { font-size: 1rem; font-weight: 700; }
.live-preview-role { font-size: 0.8rem; opacity: 0.85; }
.live-preview-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.live-preview-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.live-suggestion {
  border: 1px solid var(--border); background: #fff;
  border-radius: 999px; padding: 6px 10px; font-size: 0.78rem;
  cursor: pointer;
}
.live-suggestion:hover { background: var(--surface); }
.live-preview-messages {
  flex: 1; min-height: 200px; max-height: 340px; overflow-y: auto;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
}
.live-msg { display: flex; flex-direction: column; gap: 2px; }
.live-msg.patient { align-items: flex-end; }
.live-msg.avatar { align-items: flex-start; }
.live-msg-bubble {
  max-width: 88%; padding: 8px 12px; border-radius: 14px;
  font-size: 0.9rem; line-height: 1.4;
  background: #fff; border: 1px solid var(--border); color: var(--text);
}
.live-msg.patient .live-msg-bubble {
  background: var(--primary, #4f46e5); border-color: transparent; color: #fff;
}
.live-msg.avatar.snippet .live-msg-bubble { border-color: #16a34a; }
.live-msg.avatar.out_of_scope .live-msg-bubble { border-color: #f59e0b; }
.live-msg.avatar.error .live-msg-bubble { border-color: #ef4444; color: #991b1b; }
/* Typing-Bubble: erscheint instant beim Senden einer Frage, bevor das
   LLM überhaupt antwortet. Drei Punkte pulsieren animiert -- der User
   sieht sofort "OK, läuft" anstatt einer leeren Bubble. */
.live-msg.avatar.thinking .live-msg-bubble {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 52px; min-height: 18px; padding: 12px 16px;
}
.live-msg.avatar.thinking .live-msg-bubble::before,
.live-msg.avatar.thinking .live-msg-bubble::after,
.live-msg.avatar.thinking .live-msg-bubble > .typing-dot {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted, #64748b);
  animation: typingDot 1.2s ease-in-out infinite;
}
.live-msg.avatar.thinking .live-msg-bubble::before  { animation-delay: 0s; }
.live-msg.avatar.thinking .live-msg-bubble > .typing-dot { animation-delay: 0.2s; }
.live-msg.avatar.thinking .live-msg-bubble::after  { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); }
  30%           { opacity: 1.0;  transform: scale(1.05); }
}
.live-msg-tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 700;
}
.live-preview-input {
  display: flex; gap: 6px;
}
.live-preview-input input {
  flex: 1; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
}
/* Sprache + LLM-Status: dezente Leiste über dem Verlauf. Wird zentral
   über pickSessionLanguage() gefüttert; LLM-Tag erscheint erst, sobald
   das Backend ein llm_route-Event geschickt hat. */
.live-preview-langbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
  font-size: 0.78rem;
}
.live-preview-langlabel {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  color: var(--muted); font-weight: 600;
}
.live-preview-langlabel select {
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: 0.8rem; font-weight: 600;
}
.live-preview-llmtag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; background: rgba(79, 70, 229, 0.1);
  color: var(--primary, #4f46e5); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.3px;
}
.live-preview-llmtag.hidden { display: none; }
/* Offline-Banner: erscheint wenn die LLM-Klasse "dev_stub" ist UND der
   Operator die ENV-Vars nicht auf eine RunPod-URL gesetzt hat. Sagt dem
   User klar warum kein Lipsync-Video kommt -- "boah ist das kaputt"
   wäre ein viel schlimmerer Eindruck als "ah, nur lokal". */
.live-preview-banner {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 10px; background: rgba(245, 158, 11, 0.12);
  color: #92400e; border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.78rem; font-weight: 600;
}
.live-preview-banner.hidden { display: none; }
.live-preview-banner-text { flex: 1; line-height: 1.4; }
.live-preview-banner-detail { font-weight: 400; opacity: 0.75; font-size: 0.72rem; }
/* Warmup-Variante: blau statt orange weil das ein "läuft gleich"-Status ist
   und kein Fehler. */
.live-preview-banner-warmup {
  background: rgba(59, 130, 246, 0.12);
  color: #1e3a8a;
  border-color: rgba(59, 130, 246, 0.35);
}
.live-preview-banner-spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.35);
  border-top-color: rgba(59, 130, 246, 0.95);
  animation: warmupSpin 0.9s linear infinite;
}
@keyframes warmupSpin { to { transform: rotate(360deg); } }

/* ===== IDLE-LOOP DEGRADED BANNER ===== */
/* Studio fix 2026-04-28: when the RunPod PersonaLive render falls back
   to a still-image stub (CUDA OOM, missing weights, etc.) the variants
   look "fine" in the slider but they're not actually animated. Surface
   that loud and clear with a recover button so the operator never has
   to discover via lipsync feeling wrong that the idle stack is dead. */
.idle-degraded-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-top: 8px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.14);
  color: #7c2d12;
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-size: 0.82rem; font-weight: 600;
}
.idle-degraded-banner.hidden { display: none; }
.idle-degraded-icon { font-size: 1.2rem; line-height: 1; }
.idle-degraded-text { flex: 1; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; }
.idle-degraded-text strong { color: #7c2d12; }
.idle-degraded-text span { font-weight: 400; opacity: 0.85; font-size: 0.74rem; }
.idle-degraded-recover {
  flex-shrink: 0; padding: 8px 14px; font-size: 0.78rem;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
.idle-degraded-recover[disabled] { opacity: 0.6; cursor: progress; }

/* Mark every degraded slide in the idle slider with a corner badge so
   the user can identify which variants are stub fallbacks even after
   they've dismissed the banner. */
.idle-variant-slide.is-degraded::after {
  content: "Standbild-Fallback";
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(124, 45, 18, 0.85); color: #fff;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ===== GREETING POPUP ===== */
.greeting-twin-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start;
}
@media (max-width: 520px) { .greeting-twin-row { grid-template-columns: 1fr; } }
.greeting-twin-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.greeting-twin-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 700;
  padding: 0 4px;
}

.greeting-stage {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 14px; overflow: hidden;
  background: #1a1d22;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.greeting-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  background: #0f172a;
  -webkit-user-drag: none; user-select: none;
}
.greeting-stage img:not([src]),
.greeting-stage img[src=""] { display: none; }

.greeting-stage-video { background: #000; }
.greeting-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; background: #0f172a;
  border-radius: inherit;
}
.greeting-video:not([src]),
.greeting-video[src=""] { display: none; }

.greeting-stage-placeholder {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); font-size: 0.86rem; line-height: 1.4;
  text-align: center; padding: 14px; pointer-events: none;
}
/* Hide placeholder when an actual src is set */
.greeting-stage img[src]:not([src=""]) ~ .greeting-stage-placeholder,
.greeting-stage video[src]:not([src=""]) ~ .greeting-stage-placeholder {
  display: none;
}

/* Studio fix 2026-04-27: pod-offline call-to-action inside greeting popup. */
.greeting-pod-offline {
  margin: 12px 0; padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 200, 70, 0.12), rgba(255, 200, 70, 0.04));
  border: 1px solid rgba(255, 200, 70, 0.35);
  display: flex; flex-direction: column; gap: 10px;
}
.greeting-pod-offline.hidden { display: none; }
.greeting-pod-offline-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.95rem;
}
.greeting-pod-offline-led {
  width: 10px; height: 10px; border-radius: 50%;
  background: #f5b042;
  box-shadow: 0 0 0 4px rgba(245, 176, 66, 0.18), 0 0 12px rgba(245, 176, 66, 0.45);
  animation: greetingPodPulse 1500ms ease-in-out infinite;
}
.greeting-pod-offline[data-phase="waking"] .greeting-pod-offline-led { background: #6ec1ff; box-shadow: 0 0 0 4px rgba(110, 193, 255, 0.18), 0 0 12px rgba(110, 193, 255, 0.45); }
.greeting-pod-offline[data-phase="ready"] .greeting-pod-offline-led { background: #38b15a; box-shadow: 0 0 0 4px rgba(56, 177, 90, 0.18), 0 0 12px rgba(56, 177, 90, 0.45); animation: none; }
.greeting-pod-offline[data-phase="failed"] .greeting-pod-offline-led { background: #d64b5f; box-shadow: 0 0 0 4px rgba(214, 75, 95, 0.18), 0 0 12px rgba(214, 75, 95, 0.45); animation: none; }
.greeting-pod-offline-status { color: var(--muted); font-weight: 500; }
.greeting-pod-offline-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.greeting-pod-offline-actions small { color: var(--muted); }
@keyframes greetingPodPulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.18); opacity: 1; }
}

.greeting-stage-hint {
  font-size: 0.72rem; color: var(--muted);
  padding: 0 4px;
}

/* Studio fix 2026-04-27: Loading-Backdrop = unscharfes Quellbild statt
   schwarzem Hintergrund. Eine generische Klasse fuer alle drei Popups
   (Look-Scenario, Idle-Variants, Greeting-Video). Sichtbar geschaltet
   in JS via .visible — sonst display:none. Sanfte 16 px Blur + leichte
   Abdunkelung (User-Wunsch: "soft"). */
.render-backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: none;
  filter: blur(16px) brightness(0.62) saturate(1.05);
  transform: scale(1.08); /* Blur-Rand ueberhaengen lassen, sonst hellt Edge auf */
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.render-backdrop.visible { display: block; }

/* Hebt content + overlay ueber den Backdrop, sodass die Animation darueber liegt. */
.greeting-stage-video > .greeting-video,
.greeting-stage-video > .greeting-stage-placeholder { z-index: 2; }
.greeting-stage-video > .greeting-render-overlay   { z-index: 5; }
.look-preview-frame > img,
.look-preview-frame > .look-preview-placeholder    { z-index: 2; position: relative; }
.look-preview-frame > .look-render-overlay         { z-index: 5; }
.idle-variant-stage > .idle-variant-empty,
.idle-variant-stage > .idle-variant-slider,
.idle-variant-stage > .idle-variant-overlay        { z-index: 2; }
.idle-variant-stage > .look-render-overlay         { z-index: 5; }

/* ===== Animated render overlay (v1-style sweep) ===== */
.greeting-render-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: grid; align-content: end;
  gap: 10px; padding: 16px;
  background: linear-gradient(180deg,
    rgba(20, 8, 28, 0.10) 0%,
    rgba(20, 8, 28, 0.55) 60%,
    rgba(20, 8, 28, 0.78) 100%);
  color: #fdf6ff;
  border-radius: inherit;
  overflow: hidden;
}
.greeting-render-overlay::before {
  content: "";
  position: absolute; inset: -10% 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    color-mix(in srgb, var(--accent) 55%, transparent) 50%,
    rgba(255, 255, 255, 0.04) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: greetingRenderSweep 2400ms linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.greeting-render-overlay > * { position: relative; z-index: 1; }

.greeting-render-overlay-top {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.01em;
}
.greeting-render-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
  animation: greetingRenderLed 1100ms ease-in-out infinite;
  flex-shrink: 0;
}
.greeting-render-percent {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.greeting-render-message {
  font-size: 0.95rem; font-weight: 700; line-height: 1.35;
  max-width: 36ch;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.greeting-render-detail {
  font-size: 0.78rem; line-height: 1.45;
  color: rgba(253, 246, 255, 0.85);
  max-width: 44ch;
}
.greeting-render-progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.10);
}
.greeting-render-progress-bar {
  width: 0%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 65%, white) 55%,
    #ffffff 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width 320ms ease;
}

@keyframes greetingRenderSweep {
  0%   { transform: translateX(-140%); }
  100% { transform: translateX(140%); }
}
@keyframes greetingRenderLed {
  0%, 100% { transform: scale(1);   opacity: 0.95; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}

/* ===== TTS row (single line input + run button) ===== */
.greeting-tts-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.greeting-tts-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 700;
}
.greeting-tts-inputline {
  display: flex; gap: 8px; align-items: stretch;
}
.greeting-tts-inputline input[type="text"] {
  flex: 1; min-width: 0;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 0.95rem; font-weight: 500;
}
.greeting-tts-inputline input[type="text"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.greeting-tts-run {
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--accent); color: #fff;
}
.greeting-tts-run:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.greeting-tts-run-icon {
  display: inline-block; transform: translateY(-1px);
  font-size: 0.85em;
}
.greeting-tts-options {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--muted);
}
.greeting-tts-option {
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
}
.greeting-tts-option select {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 0.85rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.greeting-tts-force { font-weight: 600; }

/* Brief glow when a section is scrolled into view (e.g. after greeting → test chat) */
.section-flash {
  animation: sectionFlashPulse 1500ms ease-out 1;
  border-radius: 18px;
}
@keyframes sectionFlashPulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
  30%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
}

.hidden { display: none !important; }

/* ============================================================
 *  Trimmer Row "Complete" State
 *  When all four mini-cards (Look / Idle / Voice / Greeting)
 *  are filled the row is wrapped in a green frame, individual
 *  cards get a subtle ready highlight, and the
 *  "Live Avatar starten" CTA appears + pulses below. The whole
 *  row also pointer-event-locks so the user cannot accidentally
 *  re-open one of the popups until they explicitly press
 *  "Bearbeiten".
 * ============================================================ */

.mini-card.is-ready {
  border-color: #bde8cc;
  box-shadow: 0 0 0 1px #bde8cc inset, 0 14px 38px rgba(28,122,66,0.08);
}
.mini-card.is-ready::after {
  content: "✓";
  position: absolute;
  top: 10px; right: 12px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--ok); color: #fff;
  font-size: 0.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(28,122,66,0.35);
  pointer-events: none;
  z-index: 3;
}
.mini-card { position: relative; }

/* Pastel-mint success frame. Local --ok-soft keeps the rest of the app's
   ready-state colour (deep forest --ok) intact; only the trimmer row and
   its CTA bar get the softer mint to feel celebratory instead of stern. */
.trimmer-row.complete {
  --ok-soft: #86d2a7;
  --ok-soft-deep: #5fbf8a;
  position: relative;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(225,245,233,0.78) 0%, rgba(232,248,238,0.30) 100%);
  outline: 2px solid var(--ok-soft);
  outline-offset: -2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok-soft) 24%, transparent),
              0 24px 60px rgba(134,210,167,0.22);
  animation: trimmerRowComplete 1100ms ease-out 1;
}
.trimmer-row.complete.locked .mini-card {
  pointer-events: none;
  filter: saturate(0.96);
}
.trimmer-row.complete.locked .mini-card .primary-btn,
.trimmer-row.complete.locked .mini-card .ghost-btn {
  opacity: 0.55;
}
@keyframes trimmerRowComplete {
  0%   { transform: scale(0.985); box-shadow: 0 0 0 0   color-mix(in srgb, #86d2a7 0%,  transparent); }
  50%  { transform: scale(1.005); box-shadow: 0 0 0 14px color-mix(in srgb, #86d2a7 32%, transparent); }
  100% { transform: scale(1.000); box-shadow: 0 0 0 6px  color-mix(in srgb, #86d2a7 24%, transparent),
                                              0 24px 60px rgba(134,210,167,0.22); }
}

.trimmer-complete-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-top: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #86d2a7 0%, #5fbf8a 100%);
  color: #ffffff;
  box-shadow: 0 14px 36px rgba(134,210,167,0.32);
  animation: trimmerCompleteBarIn 560ms cubic-bezier(.2,.9,.3,1.2) 1;
}
.trimmer-complete-bar[hidden] { display: none; }
.trimmer-complete-meta {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}
.trimmer-complete-meta strong { display: block; font-size: 1rem; }
.trimmer-complete-meta small {
  display: block; opacity: 0.92; font-size: 0.82rem; margin-top: 2px;
}
.trimmer-complete-icon {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.trimmer-complete-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.trimmer-complete-actions .ghost-btn {
  background: rgba(255,255,255,0.18); color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.trimmer-complete-actions .ghost-btn:hover {
  background: rgba(255,255,255,0.28);
}

.live-cta-btn {
  background: #ffffff; color: #2f8a5a;
  border: none; border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800; font-size: 0.95rem; cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  animation: liveCtaPulse 1.6s ease-in-out infinite;
  transition: transform 120ms ease;
}
.live-cta-btn:hover { transform: translateY(-1px) scale(1.02); }
.live-cta-btn:active { transform: translateY(0) scale(0.99); }
@keyframes liveCtaPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.18),
                          0 0 0 0   rgba(255,255,255,0.55); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,0.22),
                          0 0 0 14px rgba(255,255,255,0); }
}
@keyframes trimmerCompleteBarIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

@media (max-width: 720px) {
  .trimmer-complete-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .trimmer-complete-actions { justify-content: center; }
}

/* Confetti overlay – fixed, full-viewport, non-interactive. */
.confetti-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 200;
  display: none;
}
.confetti-canvas.firing { display: block; }


/* ============================== LOWER THIRDS / PHASE PILL ============================== */

/* Phase pill: tiny badge at the top of the avatar showing pipeline state.
   Always visible while the live session is connected. The icon area changes
   per state (dot for ready, animated spinner for thinking, audio-wave for
   speaking, ear for listening) so the user perceives a "responsive system"
   even when the LLM is still warming up. */
.lt-phase-pill {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 14;
  pointer-events: none;
  transition: background 200ms ease;
}

/* Workflow focus: hide LiveAvatar decorative overlays while tuning the core
   idle-loop -> generated-answer transition. */
.live-preview-avatar .lt-phase-pill,
.live-preview-avatar .lt-caption,
.live-preview-avatar .lt-card,
.live-preview-avatar .lt-action-bar,
.live-preview-avatar .lt-availability-pill,
.live-preview-avatar .lt-snippet-rotator,
.live-preview-avatar .filler-toast {
  display: none !important;
}
.lt-phase-pill .lt-phase-icon {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.lt-phase-pill[data-icon="spinner"] .lt-phase-icon {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: lt-spin 0.85s linear infinite;
}
.lt-phase-pill[data-icon="wave"] .lt-phase-icon {
  width: 14px; height: 12px;
  background: transparent;
  border-radius: 0;
  position: relative;
  display: inline-block;
}
.lt-phase-pill[data-icon="wave"] .lt-phase-icon::before,
.lt-phase-pill[data-icon="wave"] .lt-phase-icon::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 2px; background: currentColor;
  animation: lt-wave 1.05s ease-in-out infinite;
  border-radius: 2px;
}
.lt-phase-pill[data-icon="wave"] .lt-phase-icon::before { left: 0; animation-delay: 0s; }
.lt-phase-pill[data-icon="wave"] .lt-phase-icon::after { right: 0; animation-delay: 0.4s; }
.lt-phase-pill[data-icon="ear"] .lt-phase-icon {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: lt-pulse 1.1s ease-out infinite;
}
@keyframes lt-spin { to { transform: rotate(360deg); } }
@keyframes lt-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
@keyframes lt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.lt-phase-pill.phase-ready    { color: #6ee2a3; }
.lt-phase-pill.phase-thinking { color: #ffd479; }
.lt-phase-pill.phase-speaking { color: #69b8ff; }
.lt-phase-pill.phase-listening{ color: #ff8fb6; }
.lt-phase-pill.phase-cancel   { color: #f3a86b; }
.lt-phase-pill.phase-error    { color: #ff7b7b; }
.lt-phase-pill.phase-offline  { color: #b7c0cf; }


/* Live caption: token-stream from the LLM rendered as subtitle below the
   avatar's face. Lets the user read the answer in <500ms while TTS is
   still synthesising — single biggest perceived latency win. */
.lt-caption {
  position: absolute; left: 16px; right: 16px; bottom: 84px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff; font-size: 0.95rem; line-height: 1.4;
  padding: 10px 14px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 13;
  max-height: 28%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.lt-caption.is-visible { opacity: 1; transform: translateY(0); }


/* Lower-third info card: contextual bar at the bottom of the avatar that
   shows termin slots, costs, hours, location, etc. Always tap-to-act. */
.lt-card {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(255, 255, 255, 0.97);
  color: #1b1f29;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms ease, transform 250ms ease;
  z-index: 15;
  pointer-events: none;
  max-height: 60%;
  overflow: hidden;
}
.lt-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lt-card-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.lt-card-icon { color: var(--accent); font-size: 0.95rem; }
.lt-card-title { font-weight: 800; font-size: 0.95rem; }
.lt-card-sub { font-size: 0.78rem; color: var(--muted); margin-left: auto; text-align: right; }
.lt-card-body { font-size: 0.85rem; }
.lt-slots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.lt-slot-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: background 150ms ease, transform 80ms ease;
}
.lt-slot-btn:hover { background: var(--accent-soft); transform: translateY(-1px); }
.lt-slot-btn.is-default { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lt-slot-day { font-size: 0.72rem; color: var(--muted); }
.lt-slot-time { font-weight: 800; font-size: 1rem; margin-top: 2px; }
.lt-card-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.lt-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--button); color: var(--button-text);
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.82rem;
  transition: background 150ms ease;
}
.lt-card-cta:hover { background: var(--button-hover); }
.lt-cta-wa { background: #25d366; color: #fff; }
.lt-cta-wa:hover { background: #1ea954; }
.lt-cta-emerg { background: #c0303a; }
.lt-cta-emerg:hover { background: #99272f; }
.lt-kv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.lt-kv {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--surface); border-radius: 10px;
  font-size: 0.78rem;
}
.lt-kv span { color: var(--muted); }
.lt-kv strong { color: var(--text); font-weight: 800; font-size: 0.9rem; }
.lt-hours {
  margin: 0; font-family: inherit; font-size: 0.82rem;
  white-space: pre-wrap; color: var(--text);
}
.lt-rating { display: flex; gap: 8px; align-items: baseline; font-size: 0.85rem; }
.lt-stars { color: #d8a900; font-weight: 800; }
.lt-rating-count { color: var(--muted); font-size: 0.78rem; }


/* Persistent action bar (phone / WhatsApp / booking). Always visible at the
   bottom of the avatar -- the only thing layered ABOVE the lower-third card,
   so the patient can convert at any moment. */
.lt-action-bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  z-index: 12;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lt-action-bar:empty { display: none; }
.lt-card.is-visible ~ .lt-action-bar { opacity: 0; }
.lt-action {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.95);
  color: #1b1f29;
  border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.82rem;
  border: none; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 120ms ease, background 150ms ease;
}
.lt-action:hover { transform: translateY(-1px); }
.lt-action-phone { background: #1f8e5a; color: #fff; }
.lt-action-wa { background: #25d366; color: #fff; }
.lt-action-book { background: var(--accent); color: #fff; }


/* Persistent availability pill (top-right of the live-preview avatar stage).
   Always visible from session-start when the practice has any free slots
   loaded. Pulses gently so the eye sees something "alive" even when the
   avatar is between renders -- pure perceived-latency win plus a scarcity
   nudge ("noch 3 Termine frei") right where conversion thinking happens.

   Spatially independent from .lt-card (bottom) and .lt-phase-pill (top-left),
   so it never competes for screen real estate with the lower-thirds card
   stack. */
.lt-availability-pill {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(8, 14, 20, 0.78);
  border: 1px solid rgba(110, 226, 163, 0.35);
  border-radius: 14px;
  color: var(--text);
  font-size: 11px; line-height: 1.25;
  letter-spacing: 0.02em;
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(6px);
  z-index: 8;
  max-width: 60%;
}
.lt-availability-pill.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.lt-availability-pill.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}
.lt-availability-pill.is-clickable:hover {
  border-color: rgba(110, 226, 163, 0.7);
  background: rgba(8, 14, 20, 0.92);
}
.lt-availability-pill .lt-avail-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #6ee2a3;
  box-shadow: 0 0 0 0 rgba(110, 226, 163, 0.55);
  animation: lt-avail-pulse 2.2s ease-in-out infinite;
  flex: 0 0 auto;
}
.lt-availability-pill .lt-avail-text {
  display: inline-flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.lt-availability-pill .lt-avail-line1 {
  font-weight: 700;
  color: #6ee2a3;
  white-space: nowrap;
}
.lt-availability-pill .lt-avail-line2 {
  font-size: 10px;
  color: var(--muted, #b7c0cf);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes lt-avail-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(110, 226, 163, 0.0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(110, 226, 163, 0.22);
    transform: scale(1.06);
  }
}


/* Filler-pool toast inside the live-preview avatar. Pops in for ~4 s
   every time a filler completes generation in the background; a slim
   progress bar shows overall completion (X/10). Bottom-left so it
   doesn't conflict with the availability pill (top-right), phase pill
   (top-left), snippet rotator (top-center) or caption (bottom). */
.filler-toast {
  position: absolute; bottom: 16px; left: 16px;
  display: inline-flex; flex-direction: column; gap: 6px;
  min-width: 200px; max-width: 320px;
  padding: 8px 12px;
  background: rgba(232, 246, 235, 0.92);
  border: 1px solid rgba(133, 185, 145, 0.42);
  border-radius: 12px;
  color: #24352a;
  font-size: 13px;
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  backdrop-filter: blur(6px);
  z-index: 7;
}
.filler-toast.is-visible {
  opacity: 1; transform: translateY(0);
}
.filler-toast.hidden { display: none; }
.filler-toast-line {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.filler-toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(133, 185, 145, 0.24);
  color: #4f7f5c;
  font-size: 11px; font-weight: 700;
}
.filler-toast-icon::before { content: "+"; }
.filler-toast-text {
  flex: 1 1 auto;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filler-toast-count {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: #62776a;
}
.filler-toast-bar {
  height: 3px;
  background: rgba(133, 185, 145, 0.18);
  border-radius: 3px;
  overflow: hidden;
}
.filler-toast-bar-fill {
  height: 100%; width: 0%;
  background: #7faf8a;
  transition: width 0.3s ease;
}
.filler-toast.is-complete {
  border-color: rgba(96, 145, 108, 0.55);
}


/* Filler-audio pool section in the Greeting popup.
   Shows the 10 pre-rendered filler phrases as a textual list with
   per-row status (pending/generating/done/error). Auto-polls the portal
   while the popup is open. Spans full popup width below the twin row. */
.filler-section {
  margin-top: 18px;
  padding: 14px 16px 12px;
  background: rgba(237, 248, 239, 0.86);
  border: 1px solid rgba(133, 185, 145, 0.26);
  border-radius: 12px;
}
.filler-section.hidden { display: none; }
.filler-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.filler-section-title {
  font-size: 15px; font-weight: 700;
  color: #24352a;
  display: inline-flex; align-items: center; gap: 10px;
}
.filler-progress-pill {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(133, 185, 145, 0.20);
  color: #4f7f5c;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
}
.filler-section-actions { display: inline-flex; gap: 8px; }
.filler-section-regen {
  padding: 4px 12px; font-size: 11px;
}
.filler-section-bar {
  height: 4px;
  background: rgba(133, 185, 145, 0.16);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.filler-section-bar-fill {
  height: 100%;
  width: 0%;
  background: #7faf8a;
  transition: width 0.3s ease;
}
.filler-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 16px;
  row-gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}
.filler-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  color: #405046;
  background: rgba(255, 255, 255, 0.56);
}
.filler-list-row[data-status="generating"] {
  color: #5d7043;
  background: rgba(213, 229, 185, 0.55);
}
.filler-list-row[data-status="done"]  { color: #315f3c; }
.filler-list-row[data-status="error"] { color: #8b4b4b; background: rgba(232, 206, 206, 0.62); }
.filler-list-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filler-list-dots {
  color: rgba(64, 80, 70, 0.22);
  letter-spacing: 0.2em;
}
.filler-list-play {
  border: 1px solid rgba(133, 185, 145, 0.42);
  background: rgba(246, 252, 247, 0.90);
  color: #315f3c;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.filler-list-play:hover { background: #ffffff; }
.filler-list-delete {
  border: 1px solid rgba(185, 133, 133, 0.42);
  background: rgba(255, 247, 247, 0.92);
  color: #8b4b4b;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.filler-list-delete:hover { background: #ffffff; }
.filler-list-delete:disabled { opacity: 0.55; cursor: default; }
.filler-list-mark {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  text-transform: uppercase;
}
.filler-subsection-title {
  margin: 12px 0 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(133, 185, 145, 0.22);
  font-size: 12px;
  font-weight: 800;
  color: #315f3c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filler-subsection-hint {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #62776a;
  text-transform: none;
  letter-spacing: normal;
}
.filler-list-idle-audio .filler-list-row {
  background: rgba(248, 250, 252, 0.78);
}
.filler-section-footnote {
  margin-top: 8px;
  font-size: 11px;
  color: #62776a;
}
@media (max-width: 720px) {
  .filler-list { grid-template-columns: 1fr; max-height: 320px; }
}


/* Dead-time snippet rotator (cycling tile in the upper-center area).
   Cycles through name / phone / hours / FAQ snippets ONLY during
   thinking / preparing / listening — pauses when the avatar speaks so it
   never competes with audio. Spatially independent: top-center area,
   below the phase pill (top-left) and availability pill (top-right),
   well above the caption (bottom) and lower-third card (bottom). */
.lt-snippet-rotator {
  position: absolute; top: 12px; left: 50%;
  transform: translate(-50%, -6px);
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 64%;
  padding: 8px 14px;
  background: rgba(232, 246, 235, 0.92);
  border: 1px solid rgba(133, 185, 145, 0.35);
  border-radius: 14px;
  color: #24352a;
  font-size: 14px; line-height: 1.3;
  letter-spacing: 0.02em;
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
  backdrop-filter: blur(6px);
  z-index: 7;
}
.lt-snippet-rotator.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.lt-snippet-rotator.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}
.lt-snippet-rotator.is-clickable:hover {
  background: rgba(246, 252, 247, 0.98);
  border-color: rgba(96, 145, 108, 0.45);
}
.lt-snippet-rotator .lt-snip-icon {
  flex: 0 0 auto;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(133, 185, 145, 0.18);
}
.lt-snippet-rotator .lt-snip-text {
  display: inline-flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.lt-snippet-rotator .lt-snip-title {
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 360px;
}
.lt-snippet-rotator .lt-snip-sub {
  font-size: 12px;
  color: #62776a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 360px;
}
/* Per-kind accent: a 2 px coloured stripe on the icon disc so the user
   parses snippet category at a glance without reading. */
.lt-snippet-rotator[data-kind] .lt-snip-icon { background: rgba(133, 185, 145, 0.20); color: #4f7f5c; }
/* Hide the rotator whenever a transient lt-card takes over the bottom
   slot — JS already pauses the timer, but this ensures the visual is
   actually gone instead of bleeding through the fade. */
.lt-card.is-visible ~ .lt-snippet-rotator { opacity: 0; }


/* Phase-keyed glow ring around the live-preview avatar stage. Mirrors the
   .lt-phase-pill state into a softer visual cue at the avatar edges so the
   user sees "system is in this phase" peripherally even when not reading
   the pill text. Uses ::after so it stacks safely over the existing
   `.is-listening::before` ring (which is class-driven, not attribute-driven). */
.live-preview-avatar::after {
  content: ""; position: absolute; inset: -1px; border-radius: 17px;
  pointer-events: none; z-index: 7;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.5s ease;
}
.live-preview-avatar[data-phase="thinking"]::after {
  box-shadow: inset 0 0 0 2px rgba(255, 212, 121, 0.30),
              0 0 24px 2px rgba(255, 212, 121, 0.18);
  animation: lt-phase-ring-thinking 2.4s ease-in-out infinite;
}
.live-preview-avatar[data-phase="speaking"]::after {
  box-shadow: inset 0 0 0 2px rgba(105, 184, 255, 0.32),
              0 0 22px 1px rgba(105, 184, 255, 0.18);
}
/* Note: phase="listening" is intentionally NOT styled here. The existing
   `.live-preview-avatar.is-listening::before` (blue pulsing ring tied to the
   mic) already owns this state -- doubling it via ::after would produce
   a clashing two-ring effect. */
.live-preview-avatar[data-phase="error"]::after {
  box-shadow: inset 0 0 0 2px rgba(255, 123, 123, 0.45),
              0 0 18px 1px rgba(255, 123, 123, 0.22);
}
.live-preview-avatar[data-phase="cancel"]::after,
.live-preview-avatar[data-phase="cancelling"]::after,
.live-preview-avatar[data-phase="cancelled"]::after {
  box-shadow: inset 0 0 0 2px rgba(243, 168, 107, 0.32),
              0 0 18px 1px rgba(243, 168, 107, 0.16);
}
@keyframes lt-phase-ring-thinking {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(255, 212, 121, 0.22),
                0 0 18px 1px rgba(255, 212, 121, 0.12);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(255, 212, 121, 0.42),
                0 0 30px 4px rgba(255, 212, 121, 0.26);
  }
}


/* Mic button next to the input -- co-located with the send button so the
   user has both options at the same place. */
.live-mic-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  border-radius: 999px;
  padding: 0;
}
.live-mic-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.live-preview-input { display: flex; gap: 6px; align-items: center; }
.live-preview-input input { flex: 1; }


/* ============================== PROFILE: FAQ / PRACTICE / SLOTS EDITOR ============================== */

.profile-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 0 8px;
}
.profile-section-head h3 {
  margin: 0; font-size: 1rem; letter-spacing: 0.1px;
}
.profile-section-head .ghost-btn { padding: 6px 10px; }

.faq-list {
  display: flex; flex-direction: column; gap: 8px;
}
.faq-item {
  display: grid; grid-template-columns: 1fr 1.5fr auto;
  gap: 8px; align-items: start;
  padding: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
}
.faq-item textarea, .faq-item input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}
.faq-item textarea { resize: vertical; min-height: 50px; }
.faq-remove-btn {
  align-self: stretch;
  padding: 8px 10px;
  background: transparent; color: var(--bad);
  border: 1px solid var(--bad-soft); border-radius: 8px;
  cursor: pointer; font: inherit;
}
.faq-remove-btn:hover { background: var(--bad-soft); }

.practice-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.practice-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--muted);
}
.practice-grid input {
  padding: 8px 10px;
  font: inherit;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}

.slots-list {
  display: flex; flex-direction: column; gap: 6px;
}
.slot-row {
  display: grid; grid-template-columns: 1fr 100px 1fr 80px auto;
  gap: 6px; align-items: center;
  padding: 6px 8px;
  background: var(--surface); border-radius: 8px;
}
.slot-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font: inherit; }
.slot-row .faq-remove-btn { padding: 6px 8px; }