/* =========================================================
   Phoenix AI — Chatfenster auf der Webseite
   Gehoert zu chat.js. Das Markup baut das Skript selbst,
   hier steht nur, wie es aussieht.

   Farben kommen aus der Seite (--accent, --surface, ...).
   Die Ersatzwerte dahinter greifen, falls eine Seite die
   Variablen mal nicht setzt — dann sieht es trotzdem richtig aus.
   ========================================================= */

/* Phoenix-Fassung (26.08.): gleiche Bauteile, Farben aus der Phoenix-Palette
   (Nachthimmel, Petrol/Tuerkis, Feder-Gold nur als Hauch). */
.fsc{
  --fsc-grund:#0c1626;
  --fsc-grund-2:#101d31;
  --fsc-linie:#1c3247;
  --fsc-linie-stark:#2a4a63;
  --fsc-schrift:#e6eef2;
  --fsc-schrift-weich:#a8bcc7;
  --fsc-schrift-blass:#8fa6b4;
  --fsc-akzent:#2fd4c0;
  --fsc-akzent-hell:#7ce8db;
  --fsc-akzent-hauch:rgba(47,212,192,.12);
  --fsc-ease:cubic-bezier(.22,1,.36,1);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
}

/* ---------- Schwebender Knopf (nur auf Seiten ohne Kanal-Leiste) ---------- */
.fsc-blase{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 20px 0 16px;
  border:1px solid var(--fsc-linie-stark); border-radius:27px;
  background:var(--fsc-grund); color:var(--fsc-schrift);
  font:inherit; font-size:.95rem; font-weight:500; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
  transition:transform .3s var(--fsc-ease), border-color .3s var(--fsc-ease), opacity .25s;
}
.fsc-blase svg{width:22px; height:22px; fill:var(--fsc-akzent); flex:none}
.fsc-blase:hover,.fsc-blase:focus-visible{transform:translateY(-2px); border-color:var(--fsc-akzent)}
.fsc-blase[hidden]{display:none}

/* Kleiner Punkt, der einmal aufmerksam macht - nicht blinkend, nicht nervig */
.fsc-blase .fsc-neu-punkt{
  position:absolute; top:6px; right:8px; width:9px; height:9px; border-radius:50%;
  background:var(--fsc-akzent); box-shadow:0 0 0 3px var(--fsc-grund);
}

/* ---------------------------- Das Fenster ---------------------------- */
.fsc-fenster{
  position:fixed; right:18px; bottom:18px; z-index:61;
  display:flex; flex-direction:column;
  width:min(396px, calc(100vw - 36px));
  height:min(620px, calc(100dvh - 36px));
  background:var(--fsc-grund);
  border:1px solid var(--fsc-linie-stark); border-radius:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.6);
  overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .26s var(--fsc-ease), transform .26s var(--fsc-ease);
}
.fsc[data-offen="true"] .fsc-fenster{opacity:1; transform:none; pointer-events:auto}
.fsc[data-offen="true"] .fsc-blase{opacity:0; pointer-events:none}

/* ---------------------------- Kopfzeile ---------------------------- */
.fsc-kopf{
  display:flex; align-items:center; gap:12px;
  padding:14px 12px 14px 18px;
  border-bottom:1px solid var(--fsc-linie);
  background:var(--fsc-grund-2);
}
.fsc-kopf .fsc-zeichen{
  width:34px; height:34px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  background:var(--fsc-akzent-hauch); border:1px solid var(--fsc-linie-stark);
}
.fsc-kopf .fsc-zeichen svg{width:19px; height:19px; fill:var(--fsc-akzent)}
.fsc-titel{min-width:0; line-height:1.25}
.fsc-titel b{display:block; font-size:.97rem; font-weight:600; color:var(--fsc-schrift)}
.fsc-titel small{
  display:flex; align-items:center; gap:6px;
  font-size:.76rem; color:var(--fsc-schrift-blass); font-weight:400;
}
.fsc-titel small::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#2fd4c0; flex:none;
}
.fsc-werkzeuge{margin-left:auto; display:flex; gap:2px}
.fsc-werkzeuge button{
  width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:9px; background:transparent; cursor:pointer;
  color:var(--fsc-schrift-blass); font-size:1.15rem; line-height:1;
  transition:background .2s, color .2s;
}
.fsc-werkzeuge button:hover{background:rgba(255,255,255,.06); color:var(--fsc-schrift)}
.fsc-werkzeuge button svg{width:17px; height:17px; fill:currentColor}

/* ---------------------------- Gespraechslauf ---------------------------- */
.fsc-lauf{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 18px 6px; display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin; scrollbar-color:var(--fsc-linie-stark) transparent;
}
.fsc-lauf::-webkit-scrollbar{width:8px}
.fsc-lauf::-webkit-scrollbar-track{background:transparent}
.fsc-lauf::-webkit-scrollbar-thumb{background:var(--fsc-linie-stark); border-radius:4px}

.fsc-zeile{display:flex; max-width:100%}
.fsc-zeile.ich{justify-content:flex-end}

.fsc-blase-text{
  max-width:88%; padding:11px 15px; border-radius:15px;
  font-size:.945rem; line-height:1.58; white-space:pre-wrap; overflow-wrap:anywhere;
}
.fsc-zeile.bot .fsc-blase-text{
  background:var(--fsc-grund-2); border:1px solid var(--fsc-linie);
  border-bottom-left-radius:5px; color:var(--fsc-schrift);
}
.fsc-zeile.ich .fsc-blase-text{
  background:var(--fsc-akzent); border-bottom-right-radius:5px;
  color:#04110f; font-weight:600;
}
.fsc-blase-text a{color:var(--fsc-akzent-hell); text-decoration:underline; text-underline-offset:2px}
.fsc-zeile.ich .fsc-blase-text a{color:inherit}
.fsc-blase-text strong{font-weight:600}
.fsc-blase-text ul{margin:8px 0 0; padding-left:18px}
.fsc-blase-text li{margin:3px 0}

/* Hinweiszeile in der Mitte (z. B. "an Claudia weitergeleitet") */
.fsc-notiz{
  align-self:center; max-width:90%; text-align:center;
  font-size:.79rem; color:var(--fsc-schrift-blass);
  padding:6px 12px; border:1px dashed var(--fsc-linie-stark); border-radius:10px;
}

/* Denkpunkte */
.fsc-punkte{display:flex; gap:5px; padding:14px 15px}
.fsc-punkte i{
  width:7px; height:7px; border-radius:50%; background:var(--fsc-schrift-blass);
  animation:fsc-huepf 1.25s infinite var(--fsc-ease);
}
.fsc-punkte i:nth-child(2){animation-delay:.16s}
.fsc-punkte i:nth-child(3){animation-delay:.32s}
@keyframes fsc-huepf{
  0%,60%,100%{opacity:.28; transform:translateY(0)}
  30%{opacity:1; transform:translateY(-4px)}
}

/* ---------------------------- Vorschlaege ---------------------------- */
.fsc-vorschlaege{
  display:flex; flex-wrap:wrap; gap:7px;
  padding:8px 18px 4px;
}
.fsc-vorschlaege:empty{display:none}
.fsc-vorschlaege button{
  border:1px solid var(--fsc-linie-stark); background:transparent;
  color:var(--fsc-schrift-weich); font:inherit; font-size:.845rem;
  padding:7px 13px; border-radius:16px; cursor:pointer; text-align:left;
  transition:border-color .2s, color .2s, background .2s;
}
.fsc-vorschlaege button:hover,.fsc-vorschlaege button:focus-visible{
  border-color:var(--fsc-akzent); color:var(--fsc-schrift); background:var(--fsc-akzent-hauch);
}

/* Startkarten - mit Thema darueber, wie man sie von guten Assistenten kennt */
.fsc-karten{display:flex; flex-direction:column; gap:8px}
.fsc-karte{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
  padding:11px 15px; border-radius:13px;
  border:1px solid var(--fsc-linie); background:var(--fsc-grund-2);
  transition:border-color .2s, transform .2s var(--fsc-ease);
}
.fsc-karte:hover,.fsc-karte:focus-visible{border-color:var(--fsc-akzent); transform:translateX(2px)}
.fsc-karte b{display:block; color:var(--fsc-akzent); font-size:.79rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px}
.fsc-karte span{display:block; color:var(--fsc-schrift-weich); font-size:.9rem; line-height:1.45}

/* ---------------------------- Eingabe ---------------------------- */
.fsc-eingabe{
  display:flex; align-items:flex-end; gap:8px;
  padding:12px 12px 10px 16px; border-top:1px solid var(--fsc-linie);
  background:var(--fsc-grund-2);
}
.fsc-eingabe textarea{
  flex:1; resize:none; border:0; outline:0; background:transparent;
  color:var(--fsc-schrift); font:inherit; font-size:.945rem; line-height:1.5;
  max-height:120px; padding:9px 0;
}
.fsc-eingabe textarea::placeholder{color:var(--fsc-schrift-blass)}
.fsc-senden{
  width:40px; height:40px; flex:none; border:0; border-radius:12px; cursor:pointer;
  background:var(--fsc-akzent); display:grid; place-items:center;
  transition:opacity .2s, transform .2s var(--fsc-ease);
}
.fsc-senden svg{width:19px; height:19px; fill:#04110f}
.fsc-senden:hover:not(:disabled){transform:translateY(-1px)}
.fsc-senden:disabled{opacity:.35; cursor:default}

.fsc-fuss{
  margin:0; padding:0 16px 12px; background:var(--fsc-grund-2);
  font-size:.735rem; line-height:1.5; color:var(--fsc-schrift-blass);
}
.fsc-fuss a{color:var(--fsc-schrift-weich)}

/* ---------------------------- Am Handy ---------------------------- */
@media (max-width:560px){
  .fsc-fenster{
    right:0; bottom:0; width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
  }
  .fsc-blase{right:12px; bottom:12px; height:50px}
  .fsc-blase .fsc-blase-wort{display:none}
  .fsc-blase{padding:0 15px}
}

@media (prefers-reduced-motion:reduce){
  .fsc-fenster,.fsc-blase,.fsc-karte,.fsc-senden{transition:none}
  .fsc-punkte i{animation:none; opacity:.5}
}

/* Wenn jemand ohne Skript unterwegs ist, taucht gar nichts auf - richtig so. */