/* Fenniq Website-Assistent — Widget auf index.html und connect.html.
   Nutzt die Tokens aus colors_and_type.css; hier stehen nur Widget-eigene Werte. */

.fq-as-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px 0 16px;
  background: var(--fq-fox); color: #fff;
  border: 0; border-radius: var(--fq-radius-pill);
  font-family: var(--fq-font-display); font-weight: 500; font-size: 14px;
  box-shadow: var(--fq-shadow-2);
  transition: transform var(--fq-dur) var(--fq-ease), box-shadow var(--fq-dur) var(--fq-ease);
}
.fq-as-launcher:hover { transform: translateY(-2px); box-shadow: var(--fq-shadow-3); }
.fq-as-launcher[hidden] { display: none; }

/* Sprechblase als Erkennungszeichen: ein Punkt allein liest sich wie eine
   Statusanzeige, nicht wie ein Chat. */
.fq-as-icon { position: relative; display: block; width: 20px; height: 20px; flex: none; }
.fq-as-icon svg { width: 20px; height: 20px; display: block; }
.fq-as-dot {
  position: absolute; top: -1px; right: -1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fq-ember);
  box-shadow: 0 0 0 1.5px var(--fq-fox);
  animation: fq-as-pulse 1.8s var(--fq-ease) infinite;
}
@keyframes fq-as-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.fq-as-kurz { display: none; }

/* ---------- Hinweis über dem Launcher ---------- */
.fq-as-teaser {
  position: fixed; right: 20px; bottom: 80px; z-index: 79;
  display: flex; align-items: flex-start; gap: 4px;
  max-width: min(300px, calc(100vw - 40px));
  background: var(--fq-surface);
  border: 1px solid var(--fq-line);
  border-radius: var(--fq-radius-3) var(--fq-radius-3) var(--fq-radius-1) var(--fq-radius-3);
  box-shadow: var(--fq-shadow-2);
  padding: 4px 4px 4px 14px;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--fq-dur-slow) var(--fq-ease-out), transform var(--fq-dur-slow) var(--fq-ease-out);
}
.fq-as-teaser[hidden] { display: none; }
.fq-as-teaser.an { opacity: 1; transform: none; }
.fq-as-teaser-text {
  border: 0; background: transparent; padding: 8px 0;
  font-family: inherit; font-size: 13.5px; line-height: 1.45;
  color: var(--fq-ink-1); text-align: left;
}
.fq-as-teaser-weg {
  flex: none; width: 22px; height: 22px; margin-top: 6px;
  border: 0; background: transparent; border-radius: var(--fq-radius-2);
  color: var(--fq-ink-4); font-size: 15px; line-height: 1;
  transition: background var(--fq-dur), color var(--fq-dur);
}
.fq-as-teaser-weg:hover { background: var(--fq-paper); color: var(--fq-ink-2); }

/* ---------- Panel ---------- */
.fq-as-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 81;
  width: 400px; max-width: calc(100vw - 40px);
  height: 580px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--fq-surface);
  border: 1px solid var(--fq-line);
  border-radius: var(--fq-radius-3);
  box-shadow: var(--fq-shadow-3);
  overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(.99);
  transition: opacity var(--fq-dur) var(--fq-ease), transform var(--fq-dur) var(--fq-ease);
}
.fq-as-panel[hidden] { display: none; }
.fq-as-panel.open { opacity: 1; transform: none; }

.fq-as-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--fq-line);
  background: var(--fq-surface-2);
  flex: none;
}
/* Die Bildmarke ist 490x393, also breiter als hoch. Nur die Hoehe setzen,
   sonst wird sie ins Quadrat gequetscht (wie es die Fusszeile auch macht). */
.fq-as-head img { height: 20px; width: auto; flex: none; }
.fq-as-title {
  font-family: var(--fq-font-display); font-weight: 600; font-size: 14px;
  color: var(--fq-ink-1); line-height: 1.2;
}
.fq-as-sub { font-size: 11px; color: var(--fq-ink-3); line-height: 1.3; }
.fq-as-close {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--fq-line); background: transparent;
  border-radius: var(--fq-radius-2); color: var(--fq-ink-2);
  font-size: 18px; line-height: 1;
  transition: background var(--fq-dur), border-color var(--fq-dur);
}
.fq-as-close:hover { background: var(--fq-paper); border-color: var(--fq-line-strong); }

/* ---------- Verlauf ---------- */
.fq-as-log {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.fq-as-intro { font-size: 14px; line-height: 1.55; color: var(--fq-ink-2); margin: 0; }

.fq-as-msg { font-size: 14px; line-height: 1.55; max-width: 88%; }
.fq-as-msg p { margin: 0 0 8px; font-size: inherit; line-height: inherit; color: inherit; }
.fq-as-msg p:last-child { margin-bottom: 0; }
.fq-as-msg ul { margin: 0 0 8px; padding-left: 18px; }
.fq-as-msg li { margin-bottom: 4px; }
.fq-as-msg a { color: var(--fq-ink-1); text-decoration: underline; text-underline-offset: 2px; }

.fq-as-msg.user {
  align-self: flex-end; background: var(--fq-fox); color: #fff;
  padding: 10px 14px; border-radius: var(--fq-radius-3) var(--fq-radius-3) var(--fq-radius-1) var(--fq-radius-3);
}
.fq-as-msg.bot { align-self: flex-start; color: var(--fq-ink-1); }
.fq-as-msg.fehler {
  align-self: flex-start; color: var(--fq-err);
  background: var(--fq-err-soft); padding: 10px 14px; border-radius: var(--fq-radius-2);
}

/* Cursor, solange getippt wird */
.fq-as-msg.tippt::after {
  content: ''; display: inline-block; width: 7px; height: 15px;
  background: var(--fq-ember); margin-left: 2px; vertical-align: -2px;
  animation: fq-as-blink 1s steps(2) infinite;
}
@keyframes fq-as-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* ---------- Startfragen ---------- */
.fq-as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fq-as-chip {
  border: 1px solid var(--fq-line-strong); background: var(--fq-surface);
  color: var(--fq-ink-2); border-radius: var(--fq-radius-pill);
  padding: 7px 13px; font-size: 12.5px; font-family: inherit;
  text-align: left; line-height: 1.3;
  transition: background var(--fq-dur), border-color var(--fq-dur), color var(--fq-dur);
}
.fq-as-chip:hover { background: var(--fq-fox); border-color: var(--fq-fox); color: #fff; }

/* ---------- Eingabe ---------- */
.fq-as-foot { border-top: 1px solid var(--fq-line); padding: 12px 14px 10px; flex: none; background: var(--fq-surface); }
.fq-as-form { display: flex; align-items: flex-end; gap: 8px; }
.fq-as-input {
  flex: 1; resize: none; border: 1px solid var(--fq-line-strong);
  border-radius: var(--fq-radius-2); padding: 10px 12px;
  font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--fq-ink-1);
  background: var(--fq-surface); max-height: 110px; min-height: 40px;
  transition: border-color var(--fq-dur);
}
.fq-as-input:focus { outline: none; border-color: var(--fq-fox); }
.fq-as-send {
  flex: none; width: 40px; height: 40px;
  border: 0; border-radius: var(--fq-radius-2);
  background: var(--fq-fox); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity var(--fq-dur);
}
.fq-as-send:disabled { opacity: .35; cursor: default; }
.fq-as-hinweis { margin: 8px 2px 0; font-size: 10.5px; line-height: 1.4; color: var(--fq-ink-4); }
.fq-as-hinweis a { color: var(--fq-ink-3); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Mobil: als Vollbild-Sheet ---------- */
@media (max-width: 560px) {
  .fq-as-launcher { right: 14px; bottom: 14px; height: 44px; font-size: 13px; padding: 0 18px 0 14px; }
  /* Die lange Beschriftung würde auf schmalen Geräten die halbe Breite belegen. */
  .fq-as-lang { display: none; }
  .fq-as-kurz { display: inline; }
  .fq-as-teaser { right: 14px; bottom: 68px; max-width: calc(100vw - 28px); }
  .fq-as-panel {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; max-width: none; height: 100%; max-height: none;
    border: 0; border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fq-as-launcher, .fq-as-panel, .fq-as-teaser { transition: none; }
  .fq-as-dot, .fq-as-msg.tippt::after { animation: none; }
  .fq-as-log { scroll-behavior: auto; }
}