/* =====================================================================
   AgencyAI: EIN Fenster, EIN Aussehen, auf agencyg.de und docs.agencyg.de
   =====================================================================
   Beide Seiten laden diese Datei und dieselbe agencyai.js. Das Fenster ist
   damit nicht "nachgebaut wie auf der Hauptseite", sondern dasselbe.

   Die Datei bringt ihre Farben selbst mit, damit sie auf der Doku genauso
   aussieht, obwohl die Doku die Token der Hauptseite nicht kennt.

   ZWEI FALLEN, die mich hier je einen Anlauf gekostet haben:
   1. Regeln aus einer @media-Abfrage nie ohne ihre Abfrage uebernehmen. Sonst
      galt die Vollbild-Regel des Handys auch am Rechner.
   2. Beim Herausziehen mit Klammernzaehlung arbeiten, nicht mit einem Muster.
      Ein Muster hat Bloecke verpasst, und der Knopf stand danach unformatiert
      als weisser Balken in der Seite. */
.kai-launcher, .kai-fenster{
  --brand: #e2b649;
  --brand-ink: #17120a;
  --brand-text: #e2b649;
  --brand-line: rgba(226,182,73,.34);
  --surface-1: #111214;
  --surface-2: #1a1b1f;
  --surface-3: #22242a;
  --line-2: rgba(242,243,245,.10);
  --tx: #f2f3f5;
  --tx-2: #a9b0ba;
  --tx-3: #868e99;
  --focus: #f0cd6a;
  --r-1: 6px; --r-2: 10px; --r-3: 14px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 32px;
  --fs-1: .75rem; --fs-2: .875rem; --fs-3: 1rem;
  --fw-ui: 500; --fw-head: 600;
  --btn-h-lg: 48px;
}

/* --- Grundregeln, gelten in jeder Breite ---------------------------------- */
.kai-launcher{
  position: fixed; inset-block-end: var(--sp-6); inset-inline-end: var(--sp-6);
  z-index: 150;
  display: inline-flex; align-items: center; gap: var(--sp-2, .5rem);
  block-size: 48px; padding-inline: 18px;
  background: var(--brand); color: var(--brand-ink);
  border: 1px solid transparent; border-radius: 999px;
  font: var(--fw-head, 600) var(--fs-3) / 1 "Inter", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgb(0 0 0 / .55);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.kai-launcher:hover{ background: color-mix(in oklab, var(--brand) 88%, #fff); transform: translateY(-1px); }
.kai-launcher:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }
.kai-launcher-glyph{ display: inline-flex; }
.kai-launcher.ist-offen .kai-launcher-text{ display: none; }
.kai-launcher.ist-offen{ padding-inline: 14px; }
.kai-fenster{
  position: fixed; inset-block-end: calc(var(--sp-6) + 60px); inset-inline-end: var(--sp-6);
  z-index: 149;
  inline-size: min(390px, calc(100vw - 2 * var(--sp-6)));
  block-size: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--surface-1, var(--surface-2));
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .6);
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.kai-fenster.ist-offen{ opacity: 1; }
.kai-kopf{
  display: flex; align-items: center; gap: var(--sp-3, .75rem);
  padding: var(--sp-4) var(--sp-4);
  border-block-end: 1px solid var(--line-2);
  background: var(--surface-2);
}
.kai-punkt{
  inline-size: 8px; block-size: 8px; border-radius: 999px;
  background: #22c55e; flex: 0 0 auto;
}
.kai-kopf-text{ display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; flex: 1 1 auto; }
.kai-kopf-text strong{ font-size: var(--fs-3); color: var(--tx); font-weight: var(--fw-head, 600); }
.kai-kopf-text span{ font-size: var(--fs-1); color: var(--tx-3); }
/* Kennzeichnung nach Artikel 50 der KI-Verordnung.
   Sie sitzt zwischen Kopf und Verlauf, ist damit sofort da, wenn das Fenster
   aufgeht, und scrollt nicht mit den Nachrichten weg. Farbe ist --tx-2 und
   nicht --tx-3: der Satz ist eine Pflichtangabe und kein Kleingedrucktes. */
.kai-ki-hinweis{
  margin: 0; flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: var(--sp-2, .5rem);
  padding: 10px var(--sp-4);
  background: var(--surface-3, var(--surface-2));
  border-block-end: 1px solid var(--line-2);
  font-size: var(--fs-1); line-height: 1.45; color: var(--tx-2);
}
.kai-ki-marke{
  flex: 0 0 auto; margin-block-start: 1px;
  padding: 2px 6px; border-radius: var(--r-1);
  background: var(--brand); color: var(--brand-ink);
  font-size: .6875rem; font-weight: var(--fw-head, 600); letter-spacing: .04em;
}
.kai-icon{
  flex: 0 0 auto; inline-size: 30px; block-size: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--tx-3); cursor: pointer; transition: color .15s ease, background .15s ease;
}
.kai-icon:hover{ color: var(--tx); background: var(--surface-3, var(--surface-2)); }
.kai-icon:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.kai-liste{
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3, .75rem);
  scrollbar-width: thin;
}
.kai-blase{
  max-inline-size: 88%; padding: 10px 13px; border-radius: var(--r-2);
  font-size: var(--fs-2); line-height: 1.55; word-wrap: break-word;
}
.kai-du{
  align-self: flex-end;
  background: var(--brand); color: var(--brand-ink);
  border-end-end-radius: var(--r-1);
  font-weight: var(--fw-ui, 500);
}
.kai-ai{
  align-self: flex-start;
  background: var(--surface-2); color: var(--tx);
  border: 1px solid var(--line-2); border-end-start-radius: var(--r-1);
}
.kai-ai p{ margin: 0 0 .55em; }
.kai-ai p:last-child{ margin-bottom: 0; }
.kai-ai ul{ margin: .3em 0 .55em; padding-inline-start: 1.15em; }
.kai-ai li{ margin-block: .15em; }
.kai-ai a{ color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
.kai-ai code{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .92em; background: var(--surface-3, var(--surface-2));
  border: 1px solid var(--line-2); border-radius: 5px; padding: .08em .34em;
}
.kai-ai pre{
  margin: .4em 0; padding: 10px 12px; overflow-x: auto;
  background: var(--surface-3, var(--surface-2));
  border: 1px solid var(--line-2); border-radius: var(--r-1);
}
.kai-ai pre code{ border: 0; padding: 0; background: none; }
.kai-punkte{ display: inline-flex; gap: 4px; padding: 3px 0; }
.kai-punkte i{
  inline-size: 6px; block-size: 6px; border-radius: 999px;
  background: var(--tx-3); animation: kai-wippen 1.1s infinite ease-in-out;
}
.kai-punkte i:nth-child(2){ animation-delay: .16s; }
.kai-punkte i:nth-child(3){ animation-delay: .32s; }
.kai-vorschlaege{ display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block-start: var(--sp-1); }
.kai-vorschlag{
  padding: 7px 12px; font-size: var(--fs-1); color: var(--tx-2);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 999px; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.kai-vorschlag:hover{ color: var(--tx); border-color: var(--brand-line, var(--brand)); }
.kai-vorschlag:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.kai-eingabe{
  display: flex; align-items: flex-end; gap: var(--sp-1);
  padding: var(--sp-3, .75rem) var(--sp-4);
  border-block-start: 1px solid var(--line-2); background: var(--surface-2);
}
.kai-feld{
  flex: 1 1 auto; resize: none; min-block-size: 40px; max-block-size: 104px;
  padding: 10px 12px; color: var(--tx);
  background: var(--surface-1, var(--surface-2));
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  font: var(--fs-2) / 1.45 "Inter", ui-sans-serif, system-ui, sans-serif;
}
.kai-feld::placeholder{ color: var(--tx-3); }
.kai-feld:focus-visible{ outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand-line, var(--brand)); }
.kai-senden{
  flex: 0 0 auto; inline-size: 40px; block-size: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--brand-ink);
  border: 1px solid transparent; border-radius: var(--r-2); cursor: pointer;
  transition: background .15s ease;
}
.kai-senden:hover:not(:disabled){ background: color-mix(in oklab, var(--brand) 88%, #fff); }
.kai-senden:disabled{ opacity: .5; cursor: default; }
.kai-senden:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.kai-fuss{
  margin: 0; padding: 0 var(--sp-4) var(--sp-3, .75rem);
  font-size: var(--fs-1); color: var(--tx-3); background: var(--surface-2);
}
.kai-liste, .kai-feld{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--tx-3) 55%, transparent) transparent;
}
.kai-liste::-webkit-scrollbar,
.kai-feld::-webkit-scrollbar{ inline-size: 8px; block-size: 8px; }
.kai-liste::-webkit-scrollbar-track,
.kai-feld::-webkit-scrollbar-track{ background: transparent; }
.kai-liste::-webkit-scrollbar-thumb,
.kai-feld::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--tx-3) 45%, transparent);
  border-radius: 999px;
  
  border: 2px solid transparent;
  background-clip: content-box;
}
.kai-liste:hover::-webkit-scrollbar-thumb,
.kai-feld:hover::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--tx-3) 75%, transparent);
  background-clip: content-box;
}
.kai-liste::-webkit-scrollbar-button,
.kai-feld::-webkit-scrollbar-button{ display: none; block-size: 0; }
.kai-liste::-webkit-scrollbar-corner,
.kai-feld::-webkit-scrollbar-corner{ background: transparent; }
.kai-feld{ padding-inline-end: 14px; }
.kai-fuss{ font-variant-numeric: tabular-nums; transition: color .2s ease; }
.kai-fuss.ist-leer{ color: var(--brand-text); font-weight: var(--fw-ui, 500); }
.kai-feld:disabled{
  opacity: .55; cursor: not-allowed;
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}
.kai-launcher{
  transition: transform .18s ease, background .18s ease,
              box-shadow .18s ease, inset-block-end .25s ease;
}
.kai-fenster{
}
html.kai-da #cmp-apk-note{
  
  bottom: 92px !important;
  transition: opacity .2s ease, transform .2s ease;
}
html.kai-offen #cmp-apk-note{
  opacity: 0 !important;
  transform: translateY(8px);
  pointer-events: none !important;
  visibility: hidden !important;
}
html.suche-offen .ag-cursor-ring,
html.suche-offen .ag-cursor-dot,
html.suche-offen > body > canvas[aria-hidden="true"],
html.kai-offen .ag-cursor-ring,
html.kai-offen .ag-cursor-dot,
html.kai-offen > body > canvas[aria-hidden="true"]{
  display: none !important;
}
html.suche-offen, html.kai-offen{ cursor: auto !important; }
html.suche-offen *, html.kai-offen *{ cursor: revert !important; }
html.suche-offen input, html.suche-offen textarea,
html.kai-offen input, html.kai-offen textarea{ cursor: text !important; }
html.suche-offen a, html.suche-offen button,
html.kai-offen a, html.kai-offen button{ cursor: pointer !important; }
html.light-mode .glass-panel,
html.light-mode .dev-terminal,
html.light-mode .kai-fenster{
  background: rgba(255, 255, 255, .86);
  border-color: rgba(0, 0, 0, .08);
}

/* --- Nur in bestimmten Breiten -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .kai-fenster, .kai-launcher{ transition: none; }
}
@media (prefers-reduced-motion: reduce){ .kai-punkte i{ animation: none; opacity: .55 } }
@media (max-width: 640px){
  .kai-launcher{ inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); }
  .kai-fenster{
    inset: 0; inline-size: 100%; block-size: 100%;
    border: 0; border-radius: 0;
    /* Am Handy deckt das Fenster den ganzen Bildschirm. Das Sale-Band steht
       im Fluss ganz oben und traegt z-index 2147483500, lag also ueber dem
       Kopf des Fensters und schnitt die KI-Kennzeichnung an. Gemessen am
       16.08.2026: nur die zweite Zeile des Hinweises war zu sehen. Deshalb
       liegt das Vollbild-Fenster jetzt darueber. */
    z-index: 2147483600;
  }
  .kai-launcher.ist-offen{ display: none; }
}
@media (max-width: 640px){
  
  .kai-fenster{ inset-block-end: 0 !important; }
}
@media (max-width: 640px){
  
  html.kai-da #cmp-apk-note{ bottom: 76px !important; }
}
@media (prefers-reduced-motion: reduce){
  html.kai-da #cmp-apk-note{ transition: none; }
}