/*
 * Cozy Table — Chat-Widget (Plan B des AI-Setters, NG-139/NG-150).
 * CSP-konform: kein Inline-Style-Attribut im HTML, alles hier. Nutzt dieselben Design-Tokens wie
 * marketing/landing/index.html (Terrakotta/Kupfer-Marke #b3552e, Serifen-Headline, warme Töne) —
 * eigenständig gehalten (kein :root-Import), damit das Widget auch ohne die Landingpage-Variablen
 * funktioniert (z.B. im lokalen Test-Harness).
 */

.ct-chat-launcher,
.ct-chat-panel,
.ct-chat-panel * {
  box-sizing: border-box;
}

.ct-chat-root {
  --ct-accent: #b3552e;
  --ct-accent-dark: #8a3f22;
  --ct-accent-darker: #6b2f19;
  --ct-ink: #241a15;
  --ct-ink-soft: #5a5048;
  --ct-bg: #fffdfb;
  --ct-bg-warm: #fbf5ee;
  --ct-line: #ece2d6;
  --ct-dark: #241712;
  --ct-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ct-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--ct-sans);
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

/* ---------- Launcher-Button ---------- */
.ct-chat-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #a8502b, var(--ct-accent-darker));
  color: #fff;
  box-shadow: 0 10px 26px rgba(179, 85, 46, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ct-chat-launcher:hover,
.ct-chat-launcher:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(179, 85, 46, 0.42);
}
.ct-chat-launcher svg { width: 26px; height: 26px; }
.ct-chat-launcher .ct-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #1f7a44;
  border: 2px solid #fff;
}

/* ---------- Panel ---------- */
.ct-chat-panel {
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: min(370px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 120px));
  background: var(--ct-bg);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(36, 26, 21, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ct-line);
}
.ct-chat-root.ct-open .ct-chat-panel { display: flex; }
.ct-chat-root.ct-open .ct-chat-launcher .ct-icon-open { display: none; }
.ct-chat-root:not(.ct-open) .ct-chat-launcher .ct-icon-close { display: none; }

.ct-chat-header {
  background: linear-gradient(135deg, var(--ct-dark), #34211a);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-chat-header .ct-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ct-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ct-serif);
  font-weight: 700;
  flex: none;
}
.ct-chat-header .ct-title { font-family: var(--ct-serif); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.ct-chat-header .ct-subtitle { font-size: 0.74rem; opacity: 0.78; margin-top: 2px; }
.ct-chat-header .ct-close-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-chat-header .ct-close-btn:hover { background: rgba(255, 255, 255, 0.22); }

.ct-chat-disclaimer {
  font-size: 0.72rem;
  color: var(--ct-ink-soft);
  background: var(--ct-bg-warm);
  padding: 8px 14px;
  border-bottom: 1px solid var(--ct-line);
  line-height: 1.4;
}
.ct-chat-disclaimer a { color: var(--ct-accent-dark); }

.ct-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ct-bg);
}

.ct-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.ct-msg-bot { align-self: flex-start; background: var(--ct-bg-warm); color: var(--ct-ink); border-bottom-left-radius: 4px; }
.ct-msg-user { align-self: flex-end; background: var(--ct-accent); color: #fff; border-bottom-right-radius: 4px; }
.ct-msg-error { align-self: flex-start; background: #fbe9e7; color: #7a2c1c; border-bottom-left-radius: 4px; }

.ct-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 13px; background: var(--ct-bg-warm); border-radius: 14px; border-bottom-left-radius: 4px; }
.ct-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--ct-ink-soft); opacity: 0.5; animation: ct-blink 1.2s infinite ease-in-out; }
.ct-typing span:nth-child(2) { animation-delay: 0.2s; }
.ct-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ct-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.ct-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--ct-line);
  background: var(--ct-bg);
}
.ct-chat-input {
  flex: 1;
  border: 1px solid var(--ct-line);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: var(--ct-sans);
  resize: none;
  max-height: 90px;
  min-height: 40px;
}
.ct-chat-input:focus { outline: 2px solid var(--ct-accent); outline-offset: 1px; }
.ct-chat-send {
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  flex: none;
  background: var(--ct-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.ct-chat-send:hover:not(:disabled) { background: var(--ct-accent-dark); }

/* Honeypot-Feld: fuer Menschen unsichtbar, fuer Screenreader ausgeblendet, aber NICHT display:none
   (manche Bots ignorieren display:none-Felder gezielt) — Muster wie kundenreaktion-Formular. */
.ct-chat-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 420px) {
  .ct-chat-root { right: 10px; bottom: 10px; }
  .ct-chat-panel { right: 10px; bottom: 82px; width: calc(100vw - 20px); max-height: calc(100vh - 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-chat-launcher, .ct-typing span { transition: none; animation: none; }
}