/* Service-Chat, 22.09.2026.
   Eine Blase unten rechts und ein Fenster darueber. Farben und
   Rundungen kommen aus gestaltung.css; hier steht nur, was es dort
   noch nicht gibt.

   Hausregel wie ueberall: bewegt werden ausschliesslich transform und
   opacity, und wer Bewegung abgeschaltet hat, bekommt keine. */

.chatblase{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;
  width:3.4rem;height:3.4rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(135deg,#cf5cf5 0%,#c238f0 45%,#a521d9 100%);
  box-shadow:0 12px 34px -12px rgba(194,56,240,.9), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s ease;
}
.chatblase svg{width:1.5rem;height:1.5rem;fill:#fff;pointer-events:none}
.chatblase:hover{transform:scale(1.06)}
.chatblase:active{transform:scale(.95)}
.chatblase[hidden]{display:none}

/* Die Zahl der ungelesenen Antworten. Sitzt auf der Blase, nicht
   daneben - sonst wandert sie auf dem Handy aus dem Bild. */
.chatzahl{
  position:absolute;top:-2px;right:-2px;min-width:1.15rem;height:1.15rem;
  border-radius:999px;background:#ff4d6d;color:#fff;
  font:700 .7rem/1.15rem system-ui,sans-serif;text-align:center;
  padding:0 .25rem;box-shadow:0 0 0 2px rgba(0,0,0,.45);
}
.chatzahl[hidden]{display:none}

.chatfenster{
  position:fixed;right:1.2rem;bottom:5.2rem;z-index:61;
  width:min(22rem,calc(100vw - 2.4rem));height:min(28rem,calc(100vh - 8rem));
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  /* **Undurchsichtig, nicht Milchglas** (Probelauf 22.09.2026): mit
     Deckkraft .97 und Weichzeichner schimmerte auf dem Telefon die
     Seite durch das Fenster, und der Text lag auf Text. Lesbarkeit
     geht hier vor Glaseffekt. */
  background:#140b20;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  transform-origin:bottom right;
  transition:transform .18s ease,opacity .18s ease;
}
.chatfenster[hidden]{display:none}
.chatfenster.zu{opacity:0;transform:scale(.96)}

.chatkopf{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chatkopf h2{margin:0;font-size:var(--grad-4,.95rem);font-weight:700;letter-spacing:.02em;color:var(--text,#fff)}
.chatzu{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted,#9a9aa8);
  font-size:1.2rem;line-height:1;padding:.2rem .35rem;border-radius:8px;
}
.chatzu:hover{color:var(--text,#fff)}

.chathinweis{
  padding:.7rem 1rem;color:var(--muted,#9a9aa8);
  font-size:var(--grad-1,.78rem);line-height:var(--zeile-4,1.5);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chathinweis a{color:var(--accent-soft,#d97ff5)}

.chatlauf{flex:1;overflow-y:auto;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.chatleer{color:var(--muted,#9a9aa8);font-size:var(--grad-2,.85rem);text-align:center;margin:auto 0}

.chatzeile{max-width:85%;padding:.5rem .7rem;border-radius:14px;
  font-size:var(--grad-2,.85rem);line-height:var(--zeile-4,1.5);
  white-space:pre-wrap;word-break:break-word}
.chatzeile.ich{align-self:flex-end;background:rgba(194,56,240,.22);border:1px solid rgba(194,56,240,.35);color:var(--text,#fff)}
.chatzeile.sie{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:var(--text,#fff)}
.chatfuss{display:block;margin-top:.25rem;font-size:.68rem;color:var(--muted,#9a9aa8)}

/* Nur in der Verwaltung (adminchat.js): die Liste der Gespraeche als
   erste Ebene im selben Fenster. Ein Mitglied hat genau ein Gespraech
   und sieht diese Ebene nie. */
.chatwahl{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:.6rem .7rem;margin-bottom:.4rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);
  color:var(--text,#fff);font:inherit;
}
.chatwahl:hover{border-color:var(--accent-soft,#d97ff5)}
.chatwahl.offen{border-color:rgba(255,115,145,.5)}
.chatwahl b{display:block;font-size:var(--grad-2,.85rem)}
.chatwahl .chatwer{display:block;font-size:.68rem;color:var(--muted,#9a9aa8);margin-top:.1rem}
.chatwahl.offen .chatwer{color:#ff7391}
.chatwahl .chatvor{display:block;font-size:.75rem;color:var(--muted,#9a9aa8);margin-top:.25rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatzurueck{
  background:none;border:0;cursor:pointer;color:var(--muted,#9a9aa8);
  font-size:1.1rem;line-height:1;padding:.2rem .35rem;border-radius:8px;
}
.chatzurueck:hover{color:var(--text,#fff)}
.chatzurueck[hidden]{display:none}

.chatform{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid rgba(255,255,255,.08)}
.chatform textarea{
  flex:1;resize:none;height:2.6rem;max-height:7rem;padding:.55rem .7rem;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(255,255,255,.04);color:var(--text,#fff);
  font:inherit;font-size:var(--grad-2,.85rem);line-height:1.4;
}
.chatform textarea:focus{outline:2px solid var(--accent-soft,#d97ff5);outline-offset:2px}
.chatsenden{
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:0 .9rem;cursor:pointer;
  color:#fff;font:inherit;font-weight:700;font-size:var(--grad-2,.85rem);
  background:linear-gradient(135deg,#cf5cf5 0%,#c238f0 45%,#a521d9 100%);
}
/* `display:flex` an .chatform schlaegt das hidden-Attribut des
   Browsers - ohne diese Zeile stand das Antwortfeld schon in der
   Gespraechsliste (Probelauf 22.09.2026). Gilt fuer jede Regel hier,
   die ein Element mit display versieht. */
.chatform[hidden]{display:none}
.chatsenden:disabled{opacity:.45;cursor:default}
.chatstand{padding:0 .7rem .6rem;font-size:.7rem;color:var(--muted,#9a9aa8);min-height:1rem}
.chatstand.warn{color:#ff7391}

@media (prefers-reduced-motion:reduce){
  .chatblase,.chatfenster{transition:none}
  .chatblase:hover,.chatblase:active{transform:none}
}