/* T-1114 (01.09.2026): eigenes Theme fuer den n8n-Chatbot, passend zum
   Cyan-auf-Schwarz-Terminal-Look der neuen Webseite. Ueberschreibt nur die
   offiziellen CSS-Variablen aus @n8n/chat (n8n-chat.css), kein fremdes CDN,
   keine Wix-Reste. */

#n8n-chat {
  --chat--color--primary: #00ffff;
  --chat--color--primary-shade-50: #00e6e6;
  --chat--color--primary--shade-100: #00cccc;
  --chat--color--secondary: #00e6e6;
  --chat--color-secondary-shade-50: #00cccc;
  --chat--color-white: #ffffff;
  --chat--color-light: #0a0a0a;
  --chat--color-light-shade-50: rgba(0, 255, 255, 0.18);
  --chat--color-light-shade-100: rgba(0, 255, 255, 0.28);
  --chat--color-medium: rgba(255, 255, 255, 0.4);
  --chat--color-dark: #000000;
  --chat--color-disabled: #3a3a3a;
  --chat--color-typing: #00e6e6;

  --chat--spacing: 1rem;
  --chat--border-radius: 10px;
  --chat--font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --chat--window--width: 400px;
  --chat--window--height: 620px;
  --chat--window--z-index: 9999;
  --chat--window--border: 1px solid rgba(0, 255, 255, 0.35);
  --chat--window--border-radius: 16px;

  --chat--header--background: #000000;
  --chat--header--color: #ffffff;
  --chat--header--border-bottom: 1px solid rgba(0, 255, 255, 0.35);
  --chat--heading--font-size: 1.3em;

  --chat--message--bot--background: #0a0a0a;
  --chat--message--bot--color: #ffffff;
  --chat--message--bot--border: 1px solid rgba(0, 255, 255, 0.18);
  --chat--message--user--background: #00e6e6;
  --chat--message--user--color: #000000;
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 255, 255, 0.08);

  --chat--toggle--size: 64px;
  --chat--toggle--background: #00ffff;
  --chat--toggle--hover--background: #00e6e6;
  --chat--toggle--active--background: #00cccc;
  --chat--toggle--color: #000000;

  --chat--body--background: #050505;
  --chat--footer--background: #000000;
  --chat--footer--color: rgba(255, 255, 255, 0.6);

  --chat--input--background: #0a0a0a;
  --chat--input--text-color: #ffffff;
  --chat--textarea--height: 50px;

  --chat--button--background--primary: #00e6e6;
  --chat--button--color--primary: #000000;
  --chat--button--background--primary--hover: #00ffff;

  --chat--input--send--button--background: transparent;
  --chat--input--send--button--color: #00e6e6;
}

/* Eingabefeld: Cyan-Rahmen im Fokus statt der Standard-Bibliotheksfarbe */
#n8n-chat .chat-input textarea:focus {
  outline: 1px solid rgba(0, 255, 255, 0.5);
}

/* Leuchteffekt auf dem Umschalt-Knopf, wie die Cyan-Glows im Rest der Seite */
#n8n-chat .chat-window-toggle {
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.45);
}
#n8n-chat .chat-window-toggle:hover {
  box-shadow: 0 0 32px rgba(0, 255, 255, 0.65);
}

/* Eigenstaendige Verbesserung (T-1114): kurzer Aufmerksamkeits-Puls auf dem
   Umschalt-Knopf beim ersten Laden der Seite, damit neue Besucher den Chat
   ueberhaupt bemerken (die alte Wix-Version war ein stiller, statischer
   Button). Laeuft nur 3 Zyklen, danach wieder normal - stoert wiederkehrende
   Besucher nicht. Wird per JS (chat-init.js) an-/abgeschaltet. */
#n8n-chat .chat-window-toggle.bt-chat-attention {
  animation: bt-chat-pulse 1.8s ease-in-out 3;
}
@keyframes bt-chat-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(0, 255, 255, 0.45); transform: scale(1); }
  50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.85); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #n8n-chat .chat-window-toggle.bt-chat-attention { animation: none; }
}

/* T-2646 (25.09.2026): kurze Ladeanimation auf dem Platzhalter-Knopf,
   waehrend im Hintergrund das echte Chat-Bundle nachlaedt (siehe
   chat-init.js). Dreht nur das Symbol, der Knopf selbst bleibt an Ort und
   Stelle - kein Sprung, wenn der echte Knopf an seine Stelle tritt. */
#n8n-chat .chat-window-toggle.bt-chat-loading svg {
  animation: bt-chat-spin 0.8s linear infinite;
}
@keyframes bt-chat-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #n8n-chat .chat-window-toggle.bt-chat-loading svg { animation: none; opacity: 0.6; }
}

/* Mobil (T-1114-Kriterium "380px sauber"): die Bibliothek selbst hat keinen
   eigenen Breakpoint, das feste 400x620px-Fenster wuerde auf einem 380px
   Bildschirm seitlich abgeschnitten. Auf schmalen Screens fast Vollbild. */
@media (max-width: 480px) {
  #n8n-chat {
    --chat--window--width: calc(100vw - 1.5rem);
    --chat--window--height: calc(100dvh - 6rem);
    --chat--window--right: 0.75rem;
    --chat--window--bottom: 0.75rem;
  }
}

/* T-2646 (25.09.2026): Auf dem Handy lag der Chat-Knopf direkt auf dem
   Sticky-Termin-Knopf (#fn-leiste, funnel.css) - echte Ueberdeckung per
   Playwright gemessen (Chat-Knopf 766-833px von oben, Leiste 785-832px von
   oben, bei 844px Bildschirmhoehe). Ab derselben Schwelle, an der die Leiste
   erscheint (760px, siehe funnel.css), ruemt der Chat-Knopf so weit nach
   oben, dass er ueber der Leiste bleibt: Leiste ist rund 47px hoch plus 12px
   Bodenabstand, macht 59px reservierte Zone, plus 29px Sicherheitsabstand
   ergibt 88px. Steht spaeter nach dieser Regel (groessere Spezifitaet durch
   Reihenfolge), gewinnt sie auch im Ueberschneidungsbereich bis 480px. */
@media (max-width: 760px) {
  #n8n-chat {
    --chat--window--bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}