/* quin.css — Quin auf techq.ch. 2026-08-11.
   Eigene Praefixe (.qn-) statt .kbc-, weil der Shop andere Tokens hat als das
   Kundencenter. Farben deshalb fest und nicht ueber Kundencenter-Variablen:
   techq.ch hat bewusst KEINEN Dunkelmodus (siehe Vault, Werbe-Mockup ist keine
   Vorlage) — ein Token, das hier nicht existiert, faellt sonst auf transparent
   zurueck und der Text verschwindet. */

.qn-wurzel {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-family: var(--tq-ui);
}

/* ── Begruessungsblase ─────────────────────────────────────── */
.qn-gruss {
  position: relative; max-width: 290px;
  padding: 14px 34px 14px 16px; border-radius: 16px 16px 4px 16px;
  background: #FFFFFF; border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 8px 12px rgba(15, 23, 42, .06), 0 20px 44px rgba(15, 23, 42, .14);
  display: flex; flex-direction: column; gap: 4px;
  animation: qn-auf .32s cubic-bezier(.22, 1, .36, 1);
}
.qn-gruss[hidden] { display: none; }
.qn-gruss b { font-weight: 500; font-size: 14.5px; line-height: 1.35; color: #0F1216; }
.qn-gruss span { font-weight: 400; font-size: 13px; line-height: 1.5; color: #55606E; }
.qn-gruss-zu {
  position: absolute; top: 6px; right: 8px;
  width: 26px; height: 26px; border: none; background: transparent;
  color: #8B95A1; font-size: 19px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.qn-gruss-zu:hover { background: rgba(15, 23, 42, .06); color: #0F1216; }

@keyframes qn-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Das Fenster waechst aus der Ecke, in der der Knopf sass. Nur `opacity` und
   `transform` — beides braucht kein neues Layout und laeuft auch auf dem
   Telefon fluessig. */
@keyframes qn-fenster-auf { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .qn-gruss, .qn-fenster { animation: none; }
}

/* ── Aufrufknopf ───────────────────────────────────────────────
   Der Name faehrt bei Hover aus — ueber `grid-template-columns: 0fr → 1fr`,
   nicht ueber `max-width`. Der Browser rechnet die Spur aus, ohne dass eine
   Breite in Pixeln animiert wird; das erspart bei jedem Frame ein neues
   Layout. Ohne Hover (Telefon) steht der Name immer da, sonst saehe man dort
   ewig nur ein Q. */
.qn-knopf {
  display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, .10); border-radius: 999px;
  background: #FFFFFF; color: #0F1216; cursor: pointer;
  /* `font-family` ausdruecklich: ein <button> erbt sie nicht. */
  font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1;
  box-shadow: 0 6px 10px rgba(15, 23, 42, .06), 0 16px 34px rgba(15, 23, 42, .12);
  transition: box-shadow .22s ease, border-color .22s ease, opacity .2s ease,
              transform .22s cubic-bezier(.22, 1, .36, 1),
              padding-right .28s cubic-bezier(.22, 1, .36, 1);
}
.qn-knopf:hover { box-shadow: 0 8px 14px rgba(15, 23, 42, .08), 0 22px 46px rgba(15, 23, 42, .18); transform: translateY(-1px); }
.qn-knopf:focus-visible { outline: 2px solid #1c4f9e; outline-offset: 3px; }
/* Auf techq.ch steht der Name IMMER da — anders als im Kundencenter, wo er
   bei Hover ausfaehrt. Der Unterschied ist Absicht: dort weiss man laengst,
   was das Q bedeutet, hier steht ein Besucher zum ersten Mal davor. Ein
   nacktes Q sagt ihm nichts, und auf etwas, das man nicht benennen kann,
   klickt niemand. */
.qn-knopf-text {
  display: grid; grid-template-columns: 1fr;
  opacity: 1; margin-left: 9px;
}
/* `min-width: 0` ist Pflicht: ohne das schrumpft ein Rasterelement nie unter
   seine Inhaltsbreite, und die Spur bliebe stehen. */
.qn-knopf-name { overflow: hidden; min-width: 0; white-space: nowrap; }
.qn-knopf { padding-right: 18px; }
@media (prefers-reduced-motion: reduce) {
  .qn-knopf, .qn-knopf-text { transition: none; }
}
/* Ist das Fenster offen, verschwindet der Knopf — er haette dann keine
   Aufgabe mehr und staende nur vor dem Eingabefeld. */
.qn-wurzel.qn-offen .qn-knopf {
  opacity: 0; transform: scale(.86) translateY(6px);
  pointer-events: none; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.qn-avatar { display: inline-flex; width: 32px; height: 32px; }
.qn-mark { width: 100%; height: 100%; }
.qn-mark-ring, .qn-mark-tail { stroke: #1c4f9e; }

/* ── Fenster ──────────────────────────────────────────────────
   Die [hidden]-Regel ist PFLICHT: display:flex schlaegt sonst das globale
   [hidden]{display:none} (gleiche Spezifitaet, spaetere Regel gewinnt) und das
   Fenster liesse sich nicht mehr schliessen. Genau so am 10.08. passiert. */
/* Absolut in der Ecke statt im Flussl: der Knopf verschwindet zwar beim
   Oeffnen, sein Kasten blieb aber stehen (`visibility: hidden` raeumt keinen
   Platz) — und mit der 10-px-Luecke der Wurzel schwebte das Fenster rund 62 px
   ueber dem Boden. Jetzt sitzt es in derselben Ecke wie vorher der Knopf und
   waechst von dort. */
.qn-fenster {
  position: absolute; right: 0; bottom: 0; transform-origin: bottom right;
  animation: qn-fenster-auf .26s cubic-bezier(.22, 1, .36, 1);
  display: flex; flex-direction: column; width: min(384px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  padding: 0; border: 1px solid rgba(15, 23, 42, .10); border-radius: 18px;
  /* Zweite Reihe hinter dem Wheel-/Touch-Horcher in quin.js. Diese Zeile
     allein genuegt NICHT — sie greift nur, wenn das Fenster selbst als
     Scroll-Behaelter etwas zu scrollen hat. */
  background: #FFFFFF; overflow: hidden; overscroll-behavior: contain;
  box-shadow: 0 10px 16px rgba(15, 23, 42, .07), 0 28px 60px rgba(15, 23, 42, .18);
}
.qn-fenster[hidden] { display: none; }

.qn-kopf {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 13px 14px; border-bottom: 1px solid rgba(15, 23, 42, .08); background: #FFFFFF;
}
.qn-ident { display: flex; flex-direction: column; gap: 1px; }
.qn-name { display: flex; align-items: center; gap: 7px; min-width: 0;
           font-weight: 500; font-size: 15px; line-height: 1.2; color: #0F1216; }
/* Beta-Zeichen: dieselbe Sprache wie der angeheftete Zustand oben —
   Markenblau auf 10 % Markenblau. Ein Zustand, keine Stoerung. */
.qn-beta-pille {
  flex: none; padding: 2px 6px 1px; border-radius: 6px;
  background: rgba(28, 79, 158, .10); color: #1c4f9e;
  font: 600 10.5px/1.35 var(--tq-ui);
  letter-spacing: .055em; text-transform: uppercase;
}
.qn-rolle { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; line-height: 1.3; color: #55606E; }
.qn-punkt { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
/* Zwei Knoepfe statt einem — `margin-left: auto` sitzt jetzt am ERSTEN, sonst
   schoebe jeder von ihnen den naechsten weg und sie stuenden auseinander. */
.qn-pin { margin-left: auto; }
.qn-pin, .qn-zu {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: transparent; color: #55606E; cursor: pointer; border-radius: 9px;
}
.qn-pin:hover, .qn-zu:hover { background: rgba(15, 23, 42, .06); color: #0F1216; }
.qn-pin svg, .qn-zu svg { width: 17px; height: 17px; }
/* Angeheftet ist ein ZUSTAND, kein Anstoss — auch ohne Hover sichtbar. */
.qn-pin-an { color: #1c4f9e; background: rgba(28, 79, 158, .10); }
.qn-pin-an:hover { color: #1c4f9e; background: rgba(28, 79, 158, .16); }
/* Die Faehigkeitszeile ist laenger als «techQ Assistent»: schrumpfen ja,
   umbrechen nein — eine zweite Zeile schoebe den Kopf auseinander. */
.qn-rolle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qn-ident { min-width: 0; }

/* `overscroll-behavior: contain` haelt das Scrollen IM Fenster. Ohne die Zeile
   reicht der Browser die Bewegung an die Seite dahinter weiter, sobald der
   Verlauf oben oder unten anschlaegt — der Besucher liest im Chat, und die
   Shop-Seite faehrt darunter weg. */
.qn-verlauf { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.qn-nachricht { display: flex; gap: 8px; align-items: flex-start; }
.qn-von-besucher { justify-content: flex-end; }
.qn-nachricht .qn-avatar { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; }
.qn-blase {
  max-width: 82%; padding: 9px 12px; border-radius: 14px;
  font-weight: 400; font-size: 14px; line-height: 1.55; color: #0F1216;
  background: #F4F6F8; border: 1px solid rgba(15, 23, 42, .06);
  overflow-wrap: anywhere;
}
.qn-von-besucher .qn-blase { background: #1c4f9e; border-color: #1c4f9e; color: #FFFFFF; }
.qn-blase p { margin: 0 0 7px; }
.qn-blase p:last-child { margin-bottom: 0; }

.qn-tippt { display: flex; gap: 4px; align-items: center; padding: 13px 12px; }
.qn-tippt-punkt { width: 6px; height: 6px; border-radius: 50%; background: #8B95A1; animation: qn-blink 1.3s infinite; }
.qn-tippt-punkt:nth-child(2) { animation-delay: .18s; }
.qn-tippt-punkt:nth-child(3) { animation-delay: .36s; }
@keyframes qn-blink { 0%, 60%, 100% { opacity: .32; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qn-tippt-punkt { animation: none; opacity: .6; } }

.qn-rest {
  flex-shrink: 0; padding: 7px 14px 0;
  font-weight: 400; font-size: 11.5px; line-height: 1.4; color: #55606E; background: #FFFFFF;
}
.qn-rest[hidden] { display: none; }
/* Der Weg raus, wenn die Fragen aufgebraucht sind. Kein Knopf, sondern ein
   Verweis im Satz: ein Knopf an dieser Stelle laese sich als «hier weiter
   fragen» lesen, und genau das geht ja nicht mehr. */
.qn-rest-anmelden { color: #1c4f9e; font-weight: 500; text-decoration: underline; }
.qn-rest-anmelden:hover { color: #17427f; }

.qn-eingabe {
  flex-shrink: 0; display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 14px; border-top: 1px solid rgba(15, 23, 42, .08); background: #FFFFFF;
}
.qn-feld {
  /* Ab 120 px scrollt das Feld selbst — auch von hier darf die Bewegung nicht
     an die Seite dahinter weitergereicht werden. */
  flex: 1; resize: none; max-height: 120px; overscroll-behavior: contain; padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .16); border-radius: 12px;
  /* `font-family` ausdruecklich: eine <textarea> erbt sie nicht. Vorher
     stand hier `font: 400 14px/1.4 inherit` — als Kurzform ungueltig, die
     ganze Zeile fiel weg, und das Feld stand auf Monospace 13,3 px. */
  font-family: inherit; font-weight: 400; font-size: 14px; line-height: 1.4; color: #0F1216; background: #FFFFFF;
  -webkit-appearance: none; appearance: none;
}
.qn-feld:focus { outline: none; border-color: #1c4f9e; }
.qn-senden {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border: none; border-radius: 12px; background: #1c4f9e; color: #FFFFFF; cursor: pointer;
}
.qn-senden:hover { background: #17427f; }
.qn-senden:disabled { opacity: .5; cursor: default; }
.qn-senden svg { width: 18px; height: 18px; }

/* Mobil: Fenster als Bottom-Sheet, Knopf bleibt greifbar (44 px Mindestmass) */
@media (max-width: 560px) {
  /* `left: 12px` zieht den Behaelter ueber die ganze Bildbreite. Er ist zwar
     nur so hoch wie sein Inhalt, faengt aber jeden Fingertipp darin ab — auch
     in der 10-px-Luecke zwischen Blase und Knopf und, wenn die Blase weg ist,
     im ganzen Streifen neben dem Knopf. Am 02.09.2026 gemessen. Deshalb
     faengt nur noch, was auch etwas tut. Am Schreibtisch aendert das nichts:
     dort umschliesst der Behaelter seinen Inhalt (`align-items: flex-end`). */
  .qn-wurzel { right: 12px; bottom: 12px; left: 12px; align-items: stretch; pointer-events: none; }
  .qn-gruss, .qn-knopf, .qn-fenster { pointer-events: auto; }
  /* Randlose Telefone: der Home-Indikator liegt sonst ueber dem Knopf. Wirkt
     erst, seit `viewport-fit=cover` in den Kopfzeilen steht (02.09.2026) —
     vorher lieferte `env()` ueberall 0. */
  @supports (padding: env(safe-area-inset-bottom)) {
    .qn-wurzel { bottom: calc(12px + env(safe-area-inset-bottom)); }
  }
  .qn-gruss { max-width: none; }
  /* Die Blase deckte bei 390 px rund 230 px am unteren Rand zu — auf jeder
     Seite und jeder Scrollposition, bis sie weggeklickt wurde. Etwas enger
     gesetzt; dass sie von selbst geht, macht quin.js (9 s). */
  .qn-gruss { padding: 12px 32px 12px 14px; }
  .qn-gruss b { font-size: 14px; }
  .qn-gruss span { font-size: 12.5px; line-height: 1.45; }
  /* Das Schliesskreuz war 26x26 — auf dem Telefon zu klein zum Treffen. */
  .qn-gruss-zu { width: 34px; height: 34px; top: 3px; right: 4px; }
  /* 14 px im Eingabefeld heisst auf iOS: beim Antippen zoomt die Seite hinein
     und der Nutzer muss von Hand zuruecksetzen. Ab 16 px passiert das nicht. */
  .qn-feld { font-size: 16px; }
  .qn-knopf { align-self: flex-end; }
  .qn-fenster {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    height: min(78vh, 640px); border-radius: 18px 18px 0 0;
  }
}