/* =========================================================
   Community-Fenster — Gruppenchat als Illustration
   Aufbau und Bewegungsablauf folgen dem Plattform-Fenster,
   die Signalfarbe ist die des Nachrichtenkanals.
   Alle Innenmasse in em, damit die Schriftgroesse des
   Widgets die gesamte Darstellung skaliert.
   ========================================================= */
.nvm-t2k-chat-fenster{display:block;width:100%;container-type:inline-size;container-name:t2kcf}
.nvm-t2k-chat-fenster *{box-sizing:border-box}

.nvm-t2k-chat-fenster .t2kcf__stage{position:relative;width:100%;padding:26px 30px 30px;animation:t2kcfFloat 7s ease-in-out infinite}
@keyframes t2kcfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.nvm-t2k-chat-fenster .t2kcf__win{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 60px -22px rgba(6,12,32,.75),inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* Lichtstreifen: rund 2 Sekunden Durchlauf, danach 10 Sekunden Ruhe */
.nvm-t2k-chat-fenster .t2kcf__win::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  animation:t2kcfSweep 12s ease-in-out infinite}
@keyframes t2kcfSweep{0%{left:-60%}17%{left:120%}100%{left:120%}}

/* ---------- Kopfzeile ---------- */
.nvm-t2k-chat-fenster .t2kcf__bar{display:flex;align-items:center;gap:.78em;padding:.95em 1.1em;
  border-bottom:1px solid rgba(255,255,255,.12);background:rgba(37,211,102,.07)}
.nvm-t2k-chat-fenster .t2kcf__ava{flex:none;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:1.18em;width:2.05em;height:2.05em;border-radius:50%;
  background:linear-gradient(180deg,#3EE07A 0%,#1FAF52 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(6,12,32,.35)}
.nvm-t2k-chat-fenster .t2kcf__ident{display:flex;flex-direction:column;gap:.18em;min-width:0}
.nvm-t2k-chat-fenster .t2kcf__ident b{font-size:1.02em;font-weight:700;letter-spacing:-.01em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nvm-t2k-chat-fenster .t2kcf__ident i{font-style:normal;font-size:.82em;font-weight:600;color:rgba(255,255,255,.55)}
.nvm-t2k-chat-fenster .t2kcf__live{margin-left:auto;flex:none;width:.6em;height:.6em;border-radius:50%;background:#3DDC97;
  animation:t2kcfPuls 3.4s ease-in-out infinite}
@keyframes t2kcfPuls{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}50%{box-shadow:0 0 0 .5em rgba(61,220,151,0)}}

/* ---------- Nachrichtenbereich ---------- */
.nvm-t2k-chat-fenster .t2kcf__body{display:flex;flex-direction:column;gap:.62em;padding:1.05em 1.1em .9em}
.nvm-t2k-chat-fenster .t2kcf__day{align-self:center;font-size:.76em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding:.3em .85em;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1)}

.nvm-t2k-chat-fenster .t2kcf__msg{position:relative;max-width:86%;align-self:flex-start;
  padding:.68em .85em;border-radius:.95em .95em .95em .25em;line-height:1.42;letter-spacing:-.005em;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  opacity:0;transform:translateY(6px);animation:t2kcfIn .5s ease forwards}
.nvm-t2k-chat-fenster .t2kcf__msg b{display:block;margin-bottom:.16em;font-size:.82em;font-weight:700;
  letter-spacing:.01em;color:rgba(122,235,164,.95)}
.nvm-t2k-chat-fenster .t2kcf__msg--out{align-self:flex-end;border-radius:.95em .95em .25em .95em;
  border-color:rgba(37,211,102,.42);
  background:linear-gradient(180deg,rgba(37,211,102,.22),rgba(37,211,102,.12))}
.nvm-t2k-chat-fenster .t2kcf__msg--out b{color:#fff}
.nvm-t2k-chat-fenster .t2kcf__msg--1{animation-delay:.15s}
.nvm-t2k-chat-fenster .t2kcf__msg--2{animation-delay:.75s}
.nvm-t2k-chat-fenster .t2kcf__msg--3{animation-delay:1.35s}
@keyframes t2kcfIn{to{opacity:1;transform:translateY(0)}}

/* zwei Haken an der Antwort */
.nvm-t2k-chat-fenster .t2kcf__ticks{display:block;margin-top:.3em;margin-left:auto;width:1.05em;height:.62em;
  background:#5FE39B;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 6.5 4.5 10 11 2M8.5 8.5 10 10l6.5-8'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 6.5 4.5 10 11 2M8.5 8.5 10 10l6.5-8'/></svg>") center/contain no-repeat}

/* ---------- Schreibt gerade ---------- */
.nvm-t2k-chat-fenster .t2kcf__typing{display:flex;align-items:center;gap:.5em;align-self:flex-start;
  font-size:.84em;font-weight:600;color:rgba(255,255,255,.5)}
.nvm-t2k-chat-fenster .t2kcf__dots{display:inline-flex;gap:.28em}
.nvm-t2k-chat-fenster .t2kcf__dots i{width:.38em;height:.38em;border-radius:50%;background:rgba(122,235,164,.9);
  animation:t2kcfDot 1.4s ease-in-out infinite}
.nvm-t2k-chat-fenster .t2kcf__dots i:nth-child(2){animation-delay:.2s}
.nvm-t2k-chat-fenster .t2kcf__dots i:nth-child(3){animation-delay:.4s}
@keyframes t2kcfDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-.22em)}}

/* ---------- Eingabezeile ---------- */
.nvm-t2k-chat-fenster .t2kcf__input{display:flex;align-items:center;gap:.62em;padding:.75em 1.1em 1em}
.nvm-t2k-chat-fenster .t2kcf__field{flex:1;min-width:0;padding:.62em .9em;border-radius:999px;
  font-size:.9em;font-weight:600;color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.nvm-t2k-chat-fenster .t2kcf__send{flex:none;width:2.1em;height:2.1em;border-radius:50%;
  background:linear-gradient(180deg,#3EE07A 0%,#1FAF52 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px rgba(37,211,102,.75);
  position:relative}
.nvm-t2k-chat-fenster .t2kcf__send::before{content:"";position:absolute;inset:0;margin:auto;width:1.02em;height:1.02em;
  background:#05291a;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.4 21 23 12 2.4 3l.01 7L17 12 2.41 14z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.4 21 23 12 2.4 3l.01 7L17 12 2.41 14z'/></svg>") center/contain no-repeat}

/* ---------- Schwebende Chips ---------- */
.nvm-t2k-chat-fenster .t2kcf__chip{position:absolute;display:inline-flex;align-items:center;gap:.5em;
  padding:.55em .9em;border-radius:999px;white-space:nowrap;line-height:1;
  font-size:.95em;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(20,32,68,.96),rgba(12,22,52,.96));
  box-shadow:0 12px 26px -12px rgba(6,12,32,.9),inset 0 1px 0 rgba(255,255,255,.18);
  animation:t2kcfChip 6.5s ease-in-out infinite}
.nvm-t2k-chat-fenster .t2kcf__chip em{font-style:normal;font-size:1.05em;line-height:1}
.nvm-t2k-chat-fenster .t2kcf__chip--1{top:6px;left:6px;animation-delay:0s}
.nvm-t2k-chat-fenster .t2kcf__chip--2{top:38%;right:2px;animation-delay:1.2s}
.nvm-t2k-chat-fenster .t2kcf__chip--3{bottom:8px;left:14px;animation-delay:2.4s;
  color:#05291a;border-color:rgba(255,255,255,.45);
  background:linear-gradient(180deg,#3EE07A 0%,#1FAF52 100%);
  box-shadow:0 12px 26px -12px rgba(37,211,102,.85),inset 0 1px 0 rgba(255,255,255,.5)}
@keyframes t2kcfChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Lichtpunkte ---------- */
.nvm-t2k-chat-fenster .t2kcf__spark{position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(122,235,164,.85);box-shadow:0 0 12px 3px rgba(37,211,102,.5);
  animation:t2kcfSpark 5.5s ease-in-out infinite}
.nvm-t2k-chat-fenster .t2kcf__spark--1{top:14%;right:16%;animation-delay:.4s}
.nvm-t2k-chat-fenster .t2kcf__spark--2{bottom:22%;right:9%;animation-delay:2.1s}
@keyframes t2kcfSpark{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}

/* ---------- Schmale Breiten ---------- */
@container t2kcf (max-width:420px){
  .nvm-t2k-chat-fenster .t2kcf__stage{padding:20px 14px 24px}
  .nvm-t2k-chat-fenster .t2kcf__msg{max-width:92%}
  .nvm-t2k-chat-fenster .t2kcf__chip--2{right:0}
}

@media(prefers-reduced-motion:reduce){
  .nvm-t2k-chat-fenster .t2kcf__stage,
  .nvm-t2k-chat-fenster .t2kcf__win::after,
  .nvm-t2k-chat-fenster .t2kcf__chip,
  .nvm-t2k-chat-fenster .t2kcf__spark,
  .nvm-t2k-chat-fenster .t2kcf__live,
  .nvm-t2k-chat-fenster .t2kcf__dots i{animation:none}
  .nvm-t2k-chat-fenster .t2kcf__msg{opacity:1;transform:none;animation:none}
}
