/* =====================================================
   Twitch-Status – die Anzeige neben dem Menü.
   Live: pulsierender Punkt, Twitch-Lila. Offline: ruhig und zurückhaltend.
   ===================================================== */

.tw-badge {
  --tw: #9146ff;                      /* Twitch-Lila */
  --tw-live: #9146ff;                 /* live ebenfalls in den Twitch-Farben */
  --tw-live-hover: #772ce8;           /* das dunklere Lila von Twitch */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(145,70,255,.35);
  background: rgba(145,70,255,.08);
  color: var(--tw);
  transition: background .15s, border-color .15s, color .15s;
}
.tw-badge:hover { background: rgba(145,70,255,.16); border-color: rgba(145,70,255,.6); }
.tw-ico { display: inline-flex; width: 15px; height: 15px; }
.tw-ico svg { width: 100%; height: 100%; display: block; }

/* Der Punkt – nur wenn live */
.tw-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tw-live); flex-shrink: 0; }

/* ── Live ──────────────────────────────────────────── */
.tw-badge.is-live {
  background: var(--tw-live); border-color: var(--tw-live); color: #fff;
}
.tw-badge.is-live:hover {
  background: var(--tw-live-hover); border-color: var(--tw-live-hover);
}
.tw-badge.is-live .tw-dot { display: block; background: #fff; animation: tw-pulse 1.6s ease-out infinite; }
/* Ohne Puls-Punkt (z.B. wenn schon ein Live-Player darüber steht). */
.tw-badge.tw-nopulse .tw-dot { display: none; }

/* Der Puls: ein Ring waechst aus dem Punkt heraus und verblasst. box-shadow statt
   eines zweiten Elements – laeuft auf der GPU und braucht kein Extra-Markup. */
@keyframes tw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.85); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Auf dunklem Grund (z.B. MpLinks) darf der Offline-Zustand nicht verschwinden */
.tw-badge.on-dark {
  border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
}
.tw-badge.on-dark:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.tw-badge.on-dark.is-live { background: var(--tw-live); border-color: var(--tw-live); }

/* Wer keine Bewegung will, bekommt keine – der Punkt bleibt trotzdem sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .tw-badge, .tw-badge .tw-dot { transition: none !important; animation: none !important; }
  .tw-badge.is-live:hover { transform: none !important; }
}

@media (max-width: 760px) {
  /* Neben dem Burger wird es eng: nur Punkt + Icon, der Text entfaellt. */
  .ws-head .tw-badge .tw-txt { display: none; }
  .ws-head .tw-badge { padding: 7px 9px; }
}

/* ── Einstellungen (Reiter „Twitch") ────────────────── */
.tw-help { margin-top: 4px; font-size: 13px; }
.tw-help summary { cursor: pointer; color: #0369a1; font-weight: 600; }
.tw-help ol { margin: 10px 0 0; padding-left: 20px; color: #666; line-height: 1.7; }
.tw-help code { background: #f2f2f2; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.tw-hint { font-size: 11.5px; color: #aaa; margin-top: 3px; }
.tw-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #555; }
.tw-check input { width: auto; }
.tw-msg { font-size: 13px; color: #999; }
.tw-msg.is-ok { color: #15672c; font-weight: 600; }
.tw-msg.is-err { color: #c62828; font-weight: 600; }
.tw-preview { padding: 8px 0; }