/* ──────────────────────────────────────────────────────────────────────
   DKE Voice Widget – Floating Voice Agent
   Brand-konform zu DKE Technik Landing Page (var(--primary), var(--accent))
   ────────────────────────────────────────────────────────────────────── */

.dke-vw{
  --vw-primary:#0057a8;
  --vw-primary-h:#0073d6;
  --vw-accent:#e8720c;
  --vw-bg:#ffffff;
  --vw-surface:#f6f8fb;
  --vw-text:#0d1f33;
  --vw-muted:#52677c;
  --vw-border:rgba(15,40,75,.10);
  --vw-success:#1e7e34;
  --vw-danger:#dc3545;
  --vw-shadow:0 20px 50px rgba(0,40,90,.18),0 6px 16px rgba(0,40,90,.10);

  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:9998;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  color:var(--vw-text);
}

@media(prefers-color-scheme:dark){
  .dke-vw{
    --vw-bg:#0f1c2c;
    --vw-surface:#152538;
    --vw-text:#dde9f5;
    --vw-muted:#7e9bb5;
    --vw-border:rgba(180,210,240,.10);
    --vw-shadow:0 20px 50px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.35);
  }
}
[data-theme="dark"] .dke-vw{
  --vw-bg:#0f1c2c;
  --vw-surface:#152538;
  --vw-text:#dde9f5;
  --vw-muted:#7e9bb5;
  --vw-border:rgba(180,210,240,.10);
  --vw-shadow:0 20px 50px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.35);
}

/* ── FAB (Floating Action Button) ─────────────────────────────────────── */
.dke-vw-fab{
  display:flex;align-items:center;gap:.7rem;
  background:linear-gradient(135deg,var(--vw-primary) 0%,var(--vw-primary-h) 100%);
  color:#fff;border:none;cursor:pointer;
  padding:14px 22px 14px 16px;border-radius:9999px;
  font-family:inherit;font-weight:700;font-size:15px;letter-spacing:-.01em;
  box-shadow:0 10px 28px rgba(0,87,168,.38),0 3px 8px rgba(0,87,168,.18),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;
  position:relative;
}
.dke-vw-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,87,168,.45),0 4px 12px rgba(0,87,168,.22)}
.dke-vw-fab:active{transform:translateY(0)}
.dke-vw-fab:focus-visible{outline:3px solid #ffe17a;outline-offset:3px}
.dke-vw-fab-icon{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;
  position:relative;
}
.dke-vw-fab-icon::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:rgba(255,255,255,.25);
  animation:dke-vw-ring 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes dke-vw-ring{
  0%{transform:scale(.85);opacity:.7}
  100%{transform:scale(1.45);opacity:0}
}
.dke-vw-fab[hidden]{display:none!important}

/* ── Panel ────────────────────────────────────────────────────────────── */
.dke-vw-panel{
  position:absolute;right:0;bottom:0;
  width:min(380px,calc(100vw - 32px));
  background:var(--vw-bg);
  border:1px solid var(--vw-border);
  border-radius:20px;
  box-shadow:var(--vw-shadow);
  overflow:hidden;
  transform-origin:bottom right;
  animation:dke-vw-pop .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes dke-vw-pop{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dke-vw-panel[hidden]{display:none!important}

/* ── Header ───────────────────────────────────────────────────────────── */
.dke-vw-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  background:linear-gradient(135deg,var(--vw-primary) 0%,var(--vw-primary-h) 100%);
  color:#fff;
}
.dke-vw-head-avatar{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.dke-vw-head-avatar::before{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:#ffe17a;top:6px;right:6px;
  box-shadow:0 0 8px rgba(255,225,122,.9);
  animation:dke-vw-spark 2.4s ease-in-out infinite;
}
@keyframes dke-vw-spark{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.dke-vw-head-text{flex:1;min-width:0}
.dke-vw-head-title{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.dke-vw-head-sub{font-size:11.5px;opacity:.82;margin-top:2px;display:flex;align-items:center;gap:6px}
.dke-vw-head-sub::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#7fffa9;
  box-shadow:0 0 0 3px rgba(127,255,169,.25);
}
.dke-vw-head-close{
  background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  transition:background .15s;
}
.dke-vw-head-close:hover{background:rgba(255,255,255,.22)}

/* ── Visualizer ───────────────────────────────────────────────────────── */
.dke-vw-stage{
  padding:36px 24px 22px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  background:var(--vw-bg);
}
.dke-vw-orb{
  width:130px;height:130px;border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 35% 30%,rgba(0,115,214,.18),transparent 60%),
             radial-gradient(circle at 65% 70%,rgba(0,87,168,.10),transparent 60%);
  display:grid;place-items:center;
  transition:transform .3s;
}
.dke-vw-orb-core{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--vw-primary),var(--vw-primary-h));
  box-shadow:0 8px 24px rgba(0,87,168,.35),inset 0 2px 0 rgba(255,255,255,.25);
  position:relative;z-index:2;
  display:grid;place-items:center;color:#fff;
  transition:transform .25s,box-shadow .25s;
}
.dke-vw-orb-core svg{transition:opacity .2s}
.dke-vw-orb-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(0,87,168,.18);
  pointer-events:none;
}
.dke-vw-orb-ring.r2{inset:-14px;border-color:rgba(0,87,168,.10)}
.dke-vw-orb-ring.r3{inset:-28px;border-color:rgba(0,87,168,.05)}

/* Bars (im Speaking-State sichtbar) */
.dke-vw-bars{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:3;
}
.dke-vw-bars span{
  display:block;width:4px;border-radius:2px;
  background:#fff;height:18px;
  box-shadow:0 0 8px rgba(255,255,255,.6);
}

/* State: idle */
.dke-vw[data-state="idle"] .dke-vw-orb-core{transform:scale(1)}

/* State: connecting */
.dke-vw[data-state="connecting"] .dke-vw-orb-ring{animation:dke-vw-spin 1.4s linear infinite;border-top-color:var(--vw-primary)}
@keyframes dke-vw-spin{to{transform:rotate(360deg)}}

/* State: listening (warten auf User-Input) */
.dke-vw[data-state="listening"] .dke-vw-orb-core{
  animation:dke-vw-breathe 2.4s ease-in-out infinite;
}
.dke-vw[data-state="listening"] .dke-vw-orb-ring.r2{animation:dke-vw-pulse 2.4s ease-out infinite}
.dke-vw[data-state="listening"] .dke-vw-orb-ring.r3{animation:dke-vw-pulse 2.4s ease-out .6s infinite}
@keyframes dke-vw-breathe{0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(0,87,168,.35)}50%{transform:scale(1.06);box-shadow:0 10px 32px rgba(0,87,168,.5)}}
@keyframes dke-vw-pulse{0%{opacity:.5;transform:scale(.92)}100%{opacity:0;transform:scale(1.4)}}

/* State: thinking */
.dke-vw[data-state="thinking"] .dke-vw-orb-core{background:linear-gradient(135deg,#7848d6,var(--vw-primary));animation:dke-vw-thinking 1.6s ease-in-out infinite}
@keyframes dke-vw-thinking{0%,100%{transform:scale(.95) rotate(0)}50%{transform:scale(1.05) rotate(180deg)}}

/* State: speaking */
.dke-vw[data-state="speaking"] .dke-vw-orb-core{background:linear-gradient(135deg,var(--vw-accent),#f4a050)}
.dke-vw[data-state="speaking"] .dke-vw-bars{opacity:1}
.dke-vw[data-state="speaking"] .dke-vw-bars span{animation:dke-vw-bar .6s ease-in-out infinite}
.dke-vw[data-state="speaking"] .dke-vw-bars span:nth-child(1){animation-delay:0s}
.dke-vw[data-state="speaking"] .dke-vw-bars span:nth-child(2){animation-delay:.15s}
.dke-vw[data-state="speaking"] .dke-vw-bars span:nth-child(3){animation-delay:.05s}
.dke-vw[data-state="speaking"] .dke-vw-bars span:nth-child(4){animation-delay:.25s}
.dke-vw[data-state="speaking"] .dke-vw-bars span:nth-child(5){animation-delay:.1s}
.dke-vw[data-state="speaking"] .dke-vw-orb-core svg{opacity:0}
@keyframes dke-vw-bar{0%,100%{height:8px;opacity:.6}50%{height:28px;opacity:1}}

/* State: error */
.dke-vw[data-state="error"] .dke-vw-orb-core{background:linear-gradient(135deg,var(--vw-danger),#c82333)}

/* Status text */
.dke-vw-status{
  font-size:13px;font-weight:600;color:var(--vw-text);letter-spacing:.02em;
  text-align:center;min-height:18px;
}
.dke-vw-status small{display:block;font-size:11.5px;color:var(--vw-muted);font-weight:500;margin-top:2px}

/* Transcript */
.dke-vw-transcript{
  background:var(--vw-surface);border:1px solid var(--vw-border);border-radius:12px;
  padding:12px 14px;margin:8px 18px 0;
  font-size:13px;color:var(--vw-text);line-height:1.5;
  max-height:120px;overflow-y:auto;
  min-height:48px;
}
.dke-vw-transcript:empty::before{
  content:"Sagen Sie z. B. „Ich möchte einen Termin für eine Wallbox-Beratung."";
  color:var(--vw-muted);font-style:italic;
}
.dke-vw-transcript .t-user{color:var(--vw-primary);font-weight:600}
.dke-vw-transcript .t-agent{margin-top:6px}

/* ── Footer Controls ──────────────────────────────────────────────────── */
.dke-vw-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px 16px;border-top:1px solid var(--vw-border);
  background:var(--vw-bg);margin-top:14px;
}
.dke-vw-ctrl{
  background:var(--vw-surface);border:1px solid var(--vw-border);
  color:var(--vw-text);cursor:pointer;
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  transition:all .15s;
}
.dke-vw-ctrl:hover{background:#e9eef5;border-color:var(--vw-primary)}
.dke-vw-ctrl[data-active="true"]{background:var(--vw-accent);color:#fff;border-color:var(--vw-accent)}
.dke-vw-ctrl.danger{background:var(--vw-danger);color:#fff;border-color:var(--vw-danger)}
.dke-vw-ctrl.danger:hover{background:#c82333}
.dke-vw-ctrl-main{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--vw-primary),var(--vw-primary-h));color:#fff;
  border:none;cursor:pointer;
  height:44px;border-radius:12px;
  font-family:inherit;font-weight:700;font-size:14px;
  transition:transform .15s,box-shadow .15s;
}
.dke-vw-ctrl-main:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,87,168,.3)}
.dke-vw-ctrl-main.danger{background:linear-gradient(135deg,var(--vw-danger),#c82333)}

.dke-vw-foot-note{
  padding:0 18px 14px;
  font-size:10.5px;color:var(--vw-muted);text-align:center;line-height:1.4;
}
.dke-vw-foot-note a{color:var(--vw-primary)}

/* Mobile */
@media(max-width:480px){
  .dke-vw{right:12px;bottom:12px;left:12px}
  .dke-vw-panel{width:auto;right:0;left:0;border-radius:18px}
  .dke-vw-fab{width:100%;justify-content:center}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .dke-vw *,.dke-vw *::before,.dke-vw *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ── Nachtrag 06.08.2026: Klassen aus neuerem voice-widget.js ─────────────
   Das JS wurde nach dieser CSS erweitert (Consent-Checkbox, Call/Mute-
   Buttons, getrennte Status-Zeilen). Ergaenzt nur, was noch fehlte. */

/* KRITISCH: .dke-vw-ctrl setzt display:grid und wuerde das hidden-Attribut
   des Mute-Buttons ueberschreiben - er waere dauerhaft sichtbar. */
.dke-vw-ctrl[hidden],
.dke-vw-ctrl-main[hidden]{display:none!important}

/* Status: zwei getrennte Zeilen statt frueher <small> allein */
.dke-vw-status-main{display:block}
.dke-vw-status-sub{display:block;font-size:11.5px;color:var(--vw-muted);font-weight:500;margin-top:2px}

/* Label im Anrufen-Button */
.dke-vw-call-label{white-space:nowrap}

/* Einwilligungs-Checkbox (EU AI Act / DSGVO) */
.dke-vw-consent{
  accent-color:var(--vw-primary);
  width:16px;height:16px;cursor:pointer;
}
/* .dke-vw-foot-note zentriert - fuer die Checkbox-Zeile linksbuendig */
.dke-vw-consent-label{text-align:left}
.dke-vw-consent-label span{flex:1}