/* ==========================================================================
   Anna — Widget-Variante (zweite Design-Variante, /embed)
   Nur das Chat-Widget, kein Header, kein Footer.
   Design exakt nach Maria's Screenshot:
   - Orange Header mit Anna-Foto + Online-Dot + Chevron
   - Weisser Chat-Body mit grauer Bot-Bubble + Mini-Avatar
   - 4 Quick-Reply-Chips in 2x2 Grid
   - Eingabefeld unten mit oranger Send-Button
   - Footer: "Anna kann Fehler machen ..." + Datenschutz-Link
   ========================================================================== */

/* === Brand-Variablen (Subset aus style.css) ===*/
:root {
  --orange: #ff6a00;
  --orange-dark: #e25e00;
  --bc-blue: #009fdf;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --line: #e8e8e8;
  --bubble-bg: #f3f4f6;
  --bubble-text: #1a1a1a;
  --chip-bg: #ffffff;
  --chip-border: #e3e3e3;
  --chip-hover-bg: #fff7f0;
  --chip-hover-border: #ffb87a;
  --input-bg: #f7f8fa;
  --shadow-card: 0 24px 60px rgba(20, 30, 60, 0.10),
                 0 8px 24px rgba(20, 30, 60, 0.06);
  --radius-widget: 22px;
  --radius-bubble: 18px;
}

/* === Reset (minimal) === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* === Page-Frame ===
   Das Widget steht zentriert auf hellem Hintergrund — bewusst dezent,
   damit das Chat-Fenster die volle Aufmerksamkeit bekommt. Wird das
   Widget spaeter in einen iFrame eingebettet, ist der Hintergrund eh
   nicht sichtbar (iFrame-Background macht der Container). */
.embed-body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #f6f7f9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.embed-shell {
  width: 100%;
  max-width: 560px;
}

/* === Widget-Container ===*/
.widget {
  background: #ffffff;
  border-radius: var(--radius-widget);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 640px;
  max-height: 86vh;
}

/* === Header (orange) === */
.widget-header {
  background: var(--orange);
  color: #ffffff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.widget-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.widget-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}

.widget-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Bild selbst hat einen weissen Kreis-Rand drum herum — wir zoomen
     15% rein, damit der Rand ausserhalb des Containers liegt und Anna
     den gesamten orangen Kreis ausfuellt. */
  transform: scale(1.15);
}

.widget-header-text { min-width: 0; }

.widget-header-name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.1px;
}

.widget-header-role {
  font-size: 13.5px;
  font-weight: 400;
  opacity: 0.95;
  margin-top: 2px;
}

.widget-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  opacity: 0.95;
  margin-top: 4px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28d17c;
  box-shadow: 0 0 0 2px rgba(40, 209, 124, 0.25);
  display: inline-block;
}

.widget-collapse {
  background: transparent;
  border: 0;
  color: #ffffff;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.12s ease;
  opacity: 0.92;
}

.widget-collapse:hover { background: rgba(255, 255, 255, 0.18); opacity: 1; }
.widget-collapse:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* === Body (Chat-Bereich) === */
.widget-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
}

.chat-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* === Bot-Bubble (.mc) — graue Bubble mit Anna-Avatar links ===
   chat.js erzeugt jede Anna-Nachricht als <div class="mc">…</div>
   direkt im #chat-area. Wir machen daraus eine graue Bubble und
   haengen den Avatar als ::before-Element links davor (kein
   zusaetzliches Markup noetig). */
.mc {
  align-self: flex-start;
  position: relative;
  background: var(--bubble-bg);
  color: var(--bubble-text);
  padding: 12px 14px;
  border-radius: var(--radius-bubble);
  border-top-left-radius: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: calc(100% - 56px);
  margin-left: 46px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mc::before {
  content: '';
  position: absolute;
  left: -46px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-image: url('/Anna_Portrait.png?v=2');
  /* 115% statt "cover" — schneidet den weissen Rand vom Bild weg
     (siehe Kommentar bei .widget-avatar img). */
  background-size: 115% 115%;
  background-position: center;
  background-color: #ffe9d4;
}

.mc strong { font-weight: 700; }
.mc a { color: var(--bc-blue); text-decoration: underline; }

/* --- Struktur innerhalb von .mc (Listen, Absaetze, Headings, HR) --- */
.mc p {
  margin: 0 0 8px;
}
.mc p:last-child { margin-bottom: 0; }

.mc ul,
.mc ol {
  margin: 4px 0 6px !important;
  padding: 0 0 0 20px !important;
  list-style-position: outside;
}
.mc ul:last-child,
.mc ol:last-child { margin-bottom: 0 !important; }

.mc li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}
.mc li + li {
  margin-top: 2px !important;
}
.mc li > p {
  margin: 0 !important;
}
.mc li > ul,
.mc li > ol {
  margin: 2px 0 !important;
}

.mc ul li::marker {
  color: var(--orange);
}

.mc h3,
.mc h4,
.mc h5,
.mc h6 {
  margin: 10px 0 6px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.mc h3 { font-size: 15.5px; }
.mc h4 { font-size: 14.5px; }
.mc h5, .mc h6 { font-size: 14px; }
.mc h3:first-child,
.mc h4:first-child { margin-top: 0; }

.mc hr {
  border: 0;
  border-top: 1px solid #d9dce0;
  margin: 10px 0;
}

/* Fehler-Bubbles bekommen denselben Avatar, aber roten Akzent */
.mc.error {
  background: #fff0f0;
  color: #8a1f1f;
}

/* Greet-Msg im Widget bewusst grau (style.css setzt sie sonst auf
   orange-light, was im Widget zu viel Farbe ist). */
.mc.greet-msg {
  background: var(--bubble-bg);
  color: var(--bubble-text);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: calc(100% - 56px);
}

/* === User-Bubble (.mu) — orange Bubble rechts, ohne Avatar === */
.mu {
  align-self: flex-end;
  background: var(--orange);
  color: #ffffff;
  padding: 12px 14px;
  border-radius: var(--radius-bubble);
  border-top-right-radius: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 88%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mu a {
  color: #ffffff;
  text-decoration: underline;
}

/* Typing-Indicator (drei blinkende Punkte) — bekommt auch den
   Avatar links, sieht aus wie eine kleine Anna-Bubble. */
.tdots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}

.tdots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa0a8;
  animation: tdots 1.2s infinite ease-in-out;
}

.tdots span:nth-child(2) { animation-delay: 0.15s; }
.tdots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes tdots {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* === Consent-Bubble === */
.mc.consent-msg {
  align-self: flex-start;
  background: #fff7f0;
  border: 1px solid #ffd9b8;
  padding: 14px 14px 12px;
  border-radius: var(--radius-bubble);
  border-top-left-radius: 6px;
  max-width: 95%;
  font-size: 13.5px;
  line-height: 1.5;
}

.mc.consent-msg p { margin: 0 0 10px; }
.mc.consent-msg a { color: var(--bc-blue); text-decoration: underline; }

.consent-ok-btn {
  background: var(--orange);
  color: #ffffff;
  border: 0;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.consent-ok-btn:hover { background: var(--orange-dark); }

/* === Quick-Reply-Chips (2×2-Grid) === */
.widget-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.widget-chips[hidden] { display: none; }

.chip {
  background: var(--chip-bg);
  color: var(--ink);
  border: 1.5px solid var(--chip-border);
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease,
              transform 0.06s ease;
}

.chip:hover {
  border-color: var(--chip-hover-border);
  background: var(--chip-hover-bg);
}

.chip:active { transform: scale(0.98); }

.chip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.chip-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.chip-text { flex: 1; }

/* === File-Chip (wenn User Datei anhängt) === */
.file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff4e9;
  border: 1px solid #ffd0a0;
  color: #5a3a1c;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  max-width: 100%;
}

.file-chip[hidden] { display: none; }

.file-chip-ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}

.file-chip-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip-remove {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.7;
}

.file-chip-remove:hover { opacity: 1; }

/* === Input-Bar === */
.widget-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 14px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.widget-input[hidden] { display: none; }

.chat-inp {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  outline: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.chat-inp::placeholder { color: #a0a3aa; }

.chat-inp:focus {
  border-color: var(--orange);
  background: #ffffff;
}

.attach {
  background: transparent;
  border: 0;
  color: #7a7d86;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.attach svg { width: 20px; height: 20px; }
.attach:hover { background: #f0f1f3; color: var(--orange); }
.attach:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.send {
  background: var(--orange);
  border: 0;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, transform 0.06s ease;
}

.send svg { width: 20px; height: 20px; }
.send:hover { background: var(--orange-dark); }
.send:active { transform: scale(0.95); }
.send:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* === Widget-Footer (KI-Hinweis + Datenschutz) === */
.widget-footer {
  background: #ffffff;
  padding: 10px 18px 14px;
  font-size: 11.5px;
  color: #8a8d93;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.widget-footer-link {
  color: #8a8d93;
  text-decoration: none;
}

.widget-footer-link:hover {
  color: var(--orange);
  text-decoration: underline;
}

/* === Consent-Status (versteckt; chat.js erwartet das Element) === */
.consent-status[hidden] { display: none; }

.consent-status {
  padding: 6px 18px 10px;
  font-size: 11.5px;
  color: #8a8d93;
  display: flex;
  gap: 8px;
  align-items: center;
}

.consent-status-link {
  background: transparent;
  border: 0;
  color: var(--bc-blue);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

/* === Tool-Widgets, Charts, Cal.com-Widgets ===
   chat.js fuegt verschiedene Spezial-UI-Elemente dynamisch ein
   (Cal.com-Slots, Charts, Vereinbarungs-CTAs, Erfolgs-Karten).
   Wir geben ihnen hier nur Basis-Styles, damit sie nicht "nackt"
   aussehen — die Hauptseite hat dafuer eigene aufwendige Styles,
   aber im Widget reicht ein einheitliches Aussehen. */

.chat-area img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 4px 0;
}

.chat-area .cta-link,
.chat-area a.cta-button,
.chat-area .anna-cta {
  display: inline-block;
  background: var(--orange);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  margin: 4px 0;
}

.chat-area .cta-link:hover,
.chat-area a.cta-button:hover,
.chat-area .anna-cta:hover {
  background: var(--orange-dark);
}

/* === Scrollbar (dezent) === */
.widget-body::-webkit-scrollbar { width: 8px; }
.widget-body::-webkit-scrollbar-track { background: transparent; }
.widget-body::-webkit-scrollbar-thumb {
  background: #d8dadf;
  border-radius: 999px;
}
.widget-body::-webkit-scrollbar-thumb:hover { background: #b8bbc0; }

/* === Responsive (Mobile) === */
@media (max-width: 600px) {
  .embed-body { padding: 0; align-items: stretch; }
  .embed-shell { max-width: none; }
  .widget {
    border-radius: 0;
    min-height: 100vh;
    max-height: 100vh;
    box-shadow: none;
  }
  .widget-chips {
    grid-template-columns: 1fr;
  }
  .widget-avatar { width: 48px; height: 48px; }
  .widget-header-name { font-size: 17px; }
  .widget-header-role { font-size: 12.5px; }
}

/* === Body-Klassen aus chat.js (consent-full/basic) — wir nutzen sie nicht,
   aber chat.js setzt sie automatisch. Hier nur damit kein Style-Bruch. === */
body.consent-full,
body.consent-basic { /* keine zusaetzlichen Styles im Widget */ }