/* Chat-Widget: Live-Chat (Beat via Telegram) + Info-Bot «die Ingenieurin».
   Self-hosted (CSP script-src 'self'), Marken-Tokens aus style.css. */

.ddc-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad); color: #08090c; font-size: 1.5rem;
  display: grid; place-items: center;
  box-shadow: 0 12px 32px -8px rgba(34, 211, 238, 0.45);
  transition: transform 0.15s ease;
}
.ddc-fab:hover { transform: scale(1.06); }
.ddc-fab .ddc-fab-close { display: none; }
.ddc-open .ddc-fab .ddc-fab-open { display: none; }
.ddc-open .ddc-fab .ddc-fab-close { display: block; }

/* Wellen (Betreiber-Wunsch 2026-08-05): die Ingenieurin sendet ab und zu
   dezente Ringe aus — zwei Wellen kurz nacheinander, dann lange Ruhe.
   Trick: die Welle selbst dauert nur ~14% des 12s-Zyklus, der Rest ist
   Pause. Nur Ringe (::before/::after), der Knopf selbst pulsiert nicht.
   Bei geoeffnetem Panel und bei prefers-reduced-motion: keine Wellen. */
.ddc-fab::before,
.ddc-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(34, 211, 238, 0.55);
  opacity: 0; pointer-events: none;
  animation: ddc-wave 12s ease-out infinite;
}
.ddc-fab::after {
  border-color: rgba(129, 140, 248, 0.45);
  animation-delay: 0.9s;
}
@keyframes ddc-wave {
  0%   { transform: scale(1);    opacity: 0; }
  4%   { transform: scale(1.05); opacity: 0.8; }
  14%  { transform: scale(2.1);  opacity: 0; }
  100% { transform: scale(2.1);  opacity: 0; }
}
.ddc-open .ddc-fab::before,
.ddc-open .ddc-fab::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ddc-fab::before, .ddc-fab::after { animation: none !important; opacity: 0; }
}

.ddc-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 899;
  width: min(392px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
}
.ddc-open .ddc-panel { display: flex; }

/* Tabs */
.ddc-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ddc-tab {
  flex: 1; padding: 13px 8px; background: none; border: none; cursor: pointer;
  color: var(--text-3); font-family: inherit; font-size: 0.88rem; font-weight: 560;
  border-bottom: 2px solid transparent;
}
.ddc-tab.on { color: var(--text); border-bottom-color: var(--accent); }

/* Nachrichtenbereich */
.ddc-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ddc-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ddc-msg.me { align-self: flex-end; background: rgba(34, 211, 238, 0.14); border: 1px solid rgba(34, 211, 238, 0.3); color: var(--text); border-bottom-right-radius: 4px; }
.ddc-msg.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-bottom-left-radius: 4px; }
.ddc-note { align-self: center; text-align: center; color: var(--text-3); font-size: 0.8rem; max-width: 95%; }

/* Avatar der Ingenieurin */
.ddc-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; flex-shrink: 0; }
.ddc-avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent-2); background: var(--grad);
  transition: box-shadow 0.3s ease;
}
.ddc-avatar.talking { animation: ddc-talk 1.1s ease-in-out infinite; }
@keyframes ddc-talk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(34, 211, 238, 0); }
}
.ddc-avatar-name { font-size: 0.78rem; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
/* Transparenzhinweis am KI-Porträt (AI Act Art. 50) */
.ddc-avatar-ai { margin-top: 3px; font-size: 0.68rem; line-height: 1.3; color: var(--text-3); opacity: 0.85; text-align: center; }

/* Statuszeile Live-Chat */
.ddc-status { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.8rem; color: var(--text-3); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ddc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.ddc-dot.on { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.7); }

/* Eingabezeile */
.ddc-inputrow { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.ddc-input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); font-family: inherit; font-size: 0.92rem; resize: none;
}
.ddc-input:focus { outline: none; border-color: var(--accent); }
.ddc-send {
  flex-shrink: 0; padding: 0 16px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: var(--grad); color: #08090c; font-family: inherit; font-weight: 640; font-size: 0.92rem;
}
.ddc-send:disabled { opacity: 0.4; cursor: default; }

/* DSGVO-Hinweis + Fallback-Formular */
.ddc-consent, .ddc-fallback { padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 0.88rem; color: var(--text-2); }
.ddc-consent a, .ddc-fallback a { color: var(--accent); }
.ddc-btn {
  padding: 10px 16px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: var(--grad); color: #08090c; font-family: inherit; font-weight: 640; font-size: 0.9rem;
}
.ddc-btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }

/* Tipp-Indikator */
.ddc-typing { display: inline-block; }
.ddc-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--text-3); animation: ddc-blink 1.2s infinite; }
.ddc-typing span:nth-child(2) { animation-delay: 0.2s; }
.ddc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ddc-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

@media (max-width: 480px) {
  .ddc-panel { right: 16px; bottom: 86px; }
  .ddc-fab { right: 16px; bottom: 16px; }
}

/* Video-Avatar: Idle-Loop standard, Talking-Loop während Audio; img-Fallback */
.ddc-avatar { position: relative; overflow: hidden; display: block; }
.ddc-avatar video, .ddc-avatar .ddc-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ddc-avatar .ddc-av-talk { opacity: 0; transition: opacity 0.25s; }
.ddc-avatar.talking .ddc-av-talk { opacity: 1; }
.ddc-avatar .ddc-av-img { opacity: 0; }
.ddc-avatar.novid .ddc-av-img { opacity: 1; }

/* Voice-Modus: Mikrofon-Button */
.ddc-mic {
  flex: 0 0 auto; width: 46px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 1.1rem; line-height: 1;
}
.ddc-mic:hover { border-color: var(--accent); }
.ddc-mic:disabled { opacity: 0.4; cursor: default; }
.ddc-mic.rec { background: #ef4444; border-color: #ef4444; color: #fff; animation: ddc-recpulse 1s infinite; }
@keyframes ddc-recpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
/* Gesprächsmodus: grüner Puls = ich höre zu, gelb (steady) = ich verarbeite/spreche */
.ddc-mic.rec.listening { background: #22c55e; border-color: #22c55e; animation: ddc-listenpulse 1.4s infinite; }
.ddc-mic.rec.thinking { background: #f59e0b; border-color: #f59e0b; animation: none; }
@keyframes ddc-listenpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Seiten-Chips: die Ingenieurin verlinkt die Seite, auf die sie sich stuetzt */
.ddc-nav { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 92%; }
.ddc-nav-chip {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--accent); font-size: 0.82rem; font-weight: 560;
  text-decoration: none; cursor: pointer;
}
.ddc-nav-chip:hover { border-color: var(--accent); }