/* ============================================================
   Bluewave – Global Component Styles
   ============================================================ */
@import url('./variables.css');

/* ============================================================
   TYPOGRAFIE-SYSTEM
   ============================================================ */
.text-xs   { font-size: 0.9rem; }
.text-sm   { font-size: 1.06rem; }
.text-base { font-size: 1.17rem; }
.text-lg   { font-size: 1.38rem; }
.text-xl   { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }

.text-muted { color: var(--muted); }

.label-section {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--muted);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1.09rem;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}

.bw-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bw-btn:active {
  transform: scale(0.97);
}

.bw-btn:disabled,
.bw-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.bw-btn-primary {
  background: var(--accent);
  color: #fff;
}

.bw-btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* Ghost */
.bw-btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1.5px solid var(--border);
}

.bw-btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--accent);
}

/* Danger */
.bw-btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid rgba(225, 29, 72, 0.3);
}

.bw-btn-danger:hover {
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.5);
}

/* Icon Button */
.bw-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.bw-btn-icon:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.bw-btn-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bw-btn-icon svg {
  width: 18px;
  height: 18px;
}

/* Full width */
.bw-btn-full {
  width: 100%;
}

/* ============================================================
   FORM-ELEMENTE
   ============================================================ */
.bw-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.bw-label {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.bw-input,
.bw-textarea,
.bw-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.17rem;
  transition: all 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}

.bw-input::placeholder,
.bw-textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.bw-input:focus,
.bw-textarea:focus,
.bw-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--surface-2);
}

.bw-input.error,
.bw-input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15) !important;
}

.bw-textarea {
  resize: vertical;
  min-height: 80px;
}

.bw-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Input-Wrapper mit Icon */
.bw-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bw-input-wrapper .bw-input {
  padding-left: 40px;
}

.bw-input-wrapper .bw-input-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.bw-input-hint {
  font-size: 0.975rem;
  color: var(--muted);
}

.bw-input-hint.error {
  color: var(--danger);
}

/* Passwort-Stärke: 4 Bars */
.bw-pw-strength {
  margin-top: 8px;
}

.bw-pw-strength-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.bw-pw-strength-bar {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  transition: background 0.3s ease;
}

.bw-pw-strength-bar.active-1 { background: #e11d48; }
.bw-pw-strength-bar.active-2 { background: #f59e0b; }
.bw-pw-strength-bar.active-3 { background: #eab308; }
.bw-pw-strength-bar.active-4 { background: #22c55e; }

.bw-pw-strength-label {
  font-size: 0.938rem;
  color: var(--muted);
  transition: color 0.3s ease;
}

/* ============================================================
   AVATAR-KOMPONENTE
   ============================================================ */
.bw-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--avatar-ring, #22C55E);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.28);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
}

.bw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bw-avatar-sm  { width: 28px;  height: 28px;  font-size: 0.812rem; }
.bw-avatar-md  { width: 36px;  height: 36px;  font-size: 1rem; }
.bw-avatar-lg  { width: 42px;  height: 42px;  font-size: 1.12rem; }
.bw-avatar-xl  { width: 60px;  height: 60px;  font-size: 1.5rem; }

/* Workspace-Avatar: abgerundet statt rund */
.bw-avatar-workspace {
  border-radius: var(--radius-md);
}

/* Avatar-Wrapper mit Status-Dot */
.bw-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.bw-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-2);
  background: var(--offline);
}

.bw-status-dot[data-status="online"] {
  background: var(--online);
  box-shadow: 0 0 0 2px var(--online-glow);
  animation: livePulse 2.5s ease-in-out infinite;
}

.bw-status-dot[data-status="away"] {
  background: var(--away);
}

.bw-status-dot[data-status="offline"] {
  background: var(--offline);
}

/* ============================================================
   BADGE / PILL
   ============================================================ */
.bw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}

.bw-badge-accent {
  background: var(--accent);
  color: #fff;
}

.bw-badge-muted {
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Status-Pill */
.bw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.975rem;
  font-weight: 600;
}

.bw-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.bw-pill-online {
  background: rgba(34, 197, 94, 0.12);
  color: var(--online);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.bw-pill-online::before {
  background: var(--online);
}

.bw-pill-away {
  background: rgba(245, 158, 11, 0.12);
  color: var(--away);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.bw-pill-away::before {
  background: var(--away);
}

.bw-pill-offline {
  background: rgba(75, 85, 99, 0.15);
  color: var(--muted);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.bw-pill-offline::before {
  background: var(--offline);
}

/* ============================================================
   TOAST-SYSTEM
   ============================================================ */
#bw-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 48px);
}

.bw-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  pointer-events: all;
  animation: slideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
  min-width: 240px;
}

.bw-toast.hiding {
  animation: slideUp 0.2s ease reverse forwards;
}

.bw-toast-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.bw-toast-content {
  flex: 1;
}

.bw-toast-title {
  font-size: 1.09rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}

.bw-toast-msg {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.4;
}

.bw-toast-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.18s ease;
  flex-shrink: 0;
  align-self: flex-start;
}

.bw-toast-close:hover {
  color: var(--fg);
}

.bw-toast-success { border-left: 3px solid var(--online); }
.bw-toast-success .bw-toast-icon { color: var(--online); }
.bw-toast-error   { border-left: 3px solid var(--danger); }
.bw-toast-error   .bw-toast-icon { color: var(--danger); }
.bw-toast-warning { border-left: 3px solid var(--away); }
.bw-toast-warning .bw-toast-icon { color: var(--away); }
.bw-toast-info    { border-left: 3px solid var(--accent); }
.bw-toast-info    .bw-toast-icon { color: var(--accent); }

/* ============================================================
   MODAL-SYSTEM
   ============================================================ */
.bw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.18s ease;
}

.bw-modal-overlay.hidden {
  display: none !important;
}

.bw-modal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: fadeInScale 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 480px;
  max-height: 90vh;
  width: 90%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.bw-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
}

.bw-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.bw-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   TYPING-INDICATOR
   ============================================================ */
.bw-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
}

.bw-typing-label {
  font-size: 0.975rem;
  color: var(--muted);
  margin-right: 4px;
}

.bw-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--muted);
}

.bw-typing-dot:nth-child(1) { animation: typingBounce 1.4s infinite; animation-delay: 0s; }
.bw-typing-dot:nth-child(2) { animation: typingBounce 1.4s infinite; animation-delay: 0.2s; }
.bw-typing-dot:nth-child(3) { animation: typingBounce 1.4s infinite; animation-delay: 0.4s; }

/* ============================================================
   AUTH-SEITEN
   ============================================================ */
.bw-auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.bw-auth-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(108, 99, 255, 0.15) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(159, 153, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 20%, rgba(108, 99, 255, 0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Floating Wave-Shapes im Hintergrund */
.bw-auth-wave-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.14;
}

.bw-auth-wave-shape-1 {
  bottom: -20px;
  left: -60px;
  width: 500px;
  animation: waveFloat 8s ease-in-out infinite;
}

.bw-auth-wave-shape-2 {
  top: -30px;
  right: -40px;
  width: 400px;
  animation: waveFloat 10s ease-in-out infinite reverse;
}

.bw-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  background: color-mix(in oklab, var(--surface-2) 78%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(108,99,255,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 40px;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card-Header mit Theme-Toggle */
.bw-auth-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.bw-auth-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bw-auth-heading {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}

.bw-auth-sub {
  font-size: 1.09rem;
  color: var(--muted);
  margin-bottom: 24px;
}

/* Dark/Light-Mode Toggle */
.bw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: 1.5px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.bw-theme-toggle:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* Divider */
.bw-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.bw-divider::before,
.bw-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Fehler-Box */
#auth-error,
.bw-auth-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(225, 29, 72, 0.1);
  border: 1px solid rgba(225, 29, 72, 0.3);
  color: #fca5a5;
  font-size: 1.09rem;
  margin-bottom: 16px;
  animation: slideUp 0.2s ease;
}

/* Gast-Info-Banner */
.bw-guest-info {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-3));
  border-left: 3px solid var(--accent);
  color: var(--fg);
  font-size: 1.06rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Passwort vergessen */
.bw-forgot-link {
  font-size: 1rem;
  color: var(--muted);
  transition: color 0.18s ease;
  align-self: flex-end;
}

.bw-forgot-link:hover {
  color: var(--accent);
}

/* ============================================================
   SPINNER
   ============================================================ */
.bw-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}

.bw-spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .bw-auth-card {
    padding: 28px 20px;
    border-radius: var(--radius-md);
  }

  .bw-modal {
    max-width: 100%;
    border-radius: var(--radius-md);
    width: 95%;
  }

  #bw-toast-container {
    bottom: 80px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .bw-auth-card {
    padding: 24px 16px;
  }
}

/* ── Theme Toggle Button ─────────────────────────────── */
.bw-theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--fg, #f5f5f5);
  padding: 0;
  flex-shrink: 0;
}

.bw-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}

.bw-theme-toggle svg {
  width: 18px;
  height: 18px;
  color: inherit;
  fill: currentColor;
}

.bw-theme-toggle #theme-icon-sun.hidden,
.bw-theme-toggle #theme-icon-moon.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   VERIFIED BADGE — Blauer Haken
   ═══════════════════════════════════════════════════════ */

/* Wrapper für Avatar + Haken */
.bw-verified-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* Der blaue Haken */
.bw-verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #1d9bf0;
  border-radius: 50%;
  border: 2px solid var(--bg, #0d0d0f);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.bw-verified-badge svg {
  width: 10px;
  height: 10px;
  fill: #fff;
}

/* Größen-Varianten */
.bw-verified-wrap.size-sm .bw-verified-badge  { width: 14px; height: 14px; bottom: -1px; right: -1px; }
.bw-verified-wrap.size-sm .bw-verified-badge svg { width: 8px; height: 8px; }
.bw-verified-wrap.size-lg .bw-verified-badge  { width: 22px; height: 22px; bottom: -3px; right: -3px; }
.bw-verified-wrap.size-lg .bw-verified-badge svg { width: 13px; height: 13px; }

/* Creator — lila */
.bw-verified-badge.type-creator  { background: #a855f7; }
/* Official — gold */
.bw-verified-badge.type-official { background: #f59e0b; }

/* Inline-Haken neben Nutzernamen */
.bw-verified-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #1d9bf0;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.bw-verified-inline svg { width: 9px; height: 9px; fill: #fff; }
.bw-verified-inline.type-creator  { background: #a855f7; }
.bw-verified-inline.type-official { background: #f59e0b; }

/* Profil-Badge (größer, mit Label) */
.bw-verified-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(29,155,240,.12);
  border: 1px solid rgba(29,155,240,.35);
  border-radius: 20px;
  font-size: 0.938rem;
  font-weight: 700;
  color: #1d9bf0;
}
.bw-verified-label.type-creator  { background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.35); color: #a855f7; }
.bw-verified-label.type-official { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.35);  color: #f59e0b; }
.bw-verified-label svg { width: 11px; height: 11px; }

/* Verifikations-Status-Card */
.verify-status-card {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid;
}
.verify-status-card.pending  { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
.verify-status-card.approved { background: rgba(29,155,240,.08); border-color: rgba(29,155,240,.3); }
.verify-status-card.rejected { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.3); }
.verify-status-card.none     { background: rgba(100,100,100,.06); border-color: rgba(100,100,100,.2); }

/* ── 1200px+ Desktop Optimierungen ────────────────────────────────────────── */
@media (min-width: 1200px) {
  .bw-page-container { max-width: 1200px; }
  .bw-profile-grid   { grid-template-columns: 340px 1fr; }
  .bw-hero-inner     { max-width: 1100px; }
  .stats-grid, .streams-grid { grid-template-columns: repeat(4, 1fr); }
  .bw-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .bw-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
  .bw-page-container { max-width: 1380px; }
  .bw-profile-grid   { grid-template-columns: 380px 1fr; }
}

/* ── Profile Tabs Fix ────────────────────────────────────────────────────── */
.bw-profile-tab { transition: color .15s, border-color .15s; }
.bw-profile-tab:hover { color: var(--fg) !important; }

/* ═══ WaveBlue Streaming Styles ═══ */
/* WaveBlue© Streams - Global Styles v76 */

/* ══════════════════════════════════════════════════════════════════════════════
   Z-INDEX SCHEMA (nicht ändern ohne Update hier!)
   1    background/cameras
   5    video-pips
   15   guest-pips
   18   ad-bar
   20   stream-header / stats-bar
   24   chat-overlay (immersiv)
   25   chat-overlay (panel)
   26   stream-stats-bar
   30   guest-cam-bar / social-ticker
   40   host-action-rail
   50   battle-widget / stream-overlay
   100  toast-container
   1000 modals / profile-card
   9999 cmd-palette / sound-panel / notif-panel
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #F6F9FF;
  --bg2: #FFFFFF;
  --bg3: #EEF5FF;
  --surface: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F8FBFF;
  --surface-3: #EEF5FF;
  --border: #DCE8F7;
  --accent: #6C63FF;
  --accent-hover: #5A52E0;
  --accent2: #9B5CFF;
  --accent-rgb: 108, 99, 255;
  --text: #0D1728;
  --text2: #5F6F86;
  --success: #1EBD72;
  --danger: #EF3B5D;
  --warning: #F59E0B;
  --live: #EF3B5D;
  --gift: #FFD166;
  --gold: #FFD166;
  --host-color: #6C63FF;
  --primary: #6C63FF;
  --guest-color: #9B5CFF;
  --media-bg: #050814;
  --media-surface: rgba(8, 13, 28, 0.84);
  --radius: 10px;
  --shadow: 0 14px 38px rgba(22,64,120,0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { touch-action: manipulation; -ms-touch-action: manipulation; }

button, a, input, label { touch-action: manipulation; }

html {
  width: 100%;
  overscroll-behavior: none;
}
/* Full-screen SPA/stream shells keep the viewport locked (they manage their own
   inner scroll). Document pages — wallet, downloads, profile, community — must
   scroll normally, so the lock is scoped to the shell body classes instead of
   being global (fixed: those pages were clipped/unscrollable on desktop). */
html:has(body.app-page),
html:has(body.stream-page),
html:has(body.login-page) {
  overflow: hidden;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Stream-Seiten: body komplett locked */
body.stream-page {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* --- Login Page --- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(26,109,255,0.15) 0%, var(--bg) 70%);
}

.login-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  justify-content: center;
}

.logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#tab-bar {
  display: flex;
  gap: 4px;
  background: var(--bg3);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.tab-btn.active {
  background: var(--accent);
  color: white;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text2);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: var(--accent);
}

.btn-primary, .btn-secondary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
}

.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }

.btn-secondary {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover { border-color: var(--accent); }
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

.error-msg {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin-bottom: 12px;
}

.hint {
  color: var(--text2);
  font-size: 0.82rem;
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}

/* --- Stream Layout --- */
.stream-layout {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* Header überlagert das Video – wie auf Mobile */
.stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
  border-bottom: none;
  z-index: 20;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Video-Area füllt den gesamten Bildschirm */
.video-area {
  position: absolute !important;
  inset: 0 !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}

.stream-header .logo-small {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}


.live-badge {
  background: var(--danger);
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.viewer-count {
  color: var(--text2);
  font-size: 0.85rem;
}

/* --- Video Grid --- */
.video-area {
  background: #080808;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  inset: 0;
}

/* Wrapper füllt alles */
.video-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.cameras-grid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  z-index: 1; /* Chat (24) liegt drüber — bewusst! Video unter Chat */
  isolation: isolate;
}

.cameras-grid.count-1 { grid-template-columns: 1fr; }
.cameras-grid.count-2 { grid-template-columns: 1fr 1fr; }
.cameras-grid.count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cameras-grid.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.camera-box {
  position: relative;
  background: var(--bg3);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

.camera-box.camera-request-highlight,
.cameras-grid.camera-request-highlight .camera-box:first-child {
  outline: 2px solid rgba(0,147,255,0.9);
  box-shadow: 0 0 0 4px rgba(0,147,255,0.18), 0 0 28px rgba(0,147,255,0.42);
  animation: camera-request-pulse 1.15s ease-in-out infinite;
}

@keyframes camera-request-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

.cameras-grid.count-3 .camera-box:first-child {
  grid-column: 1 / -1;
}

.camera-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.camera-label {
  display: none;
}

.camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text2);
  height: 100%;
}

.camera-placeholder svg { opacity: 0.3; }

/* --- Stream Offline Card (kein Kamerabild) --- */
.stream-offline-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12%;
  gap: 14px;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #0d0d20 0%, #0a0a18 100%);
}

.soc-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a6dff 0%, #0044cc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26,109,255,0.35);
  flex-shrink: 0;
}

.soc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soc-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  max-width: 80%;
}

.soc-meta {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  max-width: 70%;
  line-height: 1.5;
  white-space: pre-line;
}

/* --- Host Controls --- */
.host-controls {
  padding: 12px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.btn-cam {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-cam:hover { border-color: var(--accent); }
.btn-cam.active { background: var(--accent); border-color: var(--accent); color: white; }
.btn-cam.danger { border-color: var(--danger); }
.btn-cam.danger:hover { background: var(--danger); color: white; }
.btn-cam.btn-icon { padding: 8px 10px; gap: 0; }

/* --- Sidebar – nur Zuschauer --- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  overflow: hidden;
  min-width: 200px;
}

.sidebar-header {
  padding: 12px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* --- Gast PiP (verschiebbar) --- */
.guest-pips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 25; /* über cameras-grid (z-index:1) aber unter Chat (z-index:24)→ nein, 25 drüber */
}

.guest-pip {
  --pip-size: 120px;
  position: absolute;
  width: var(--pip-size);
  height: var(--pip-size);
  border-radius: 50%;
  overflow: visible;
  pointer-events: all;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.guest-pip--orbital {
  transition: left 0.28s ease, top 0.28s ease, transform 0.2s ease;
}

.guest-pip:active { cursor: grabbing; }

.guest-pip-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(108,99,255,0.6);
  background: var(--bg3);
  box-shadow:
    0 0 0 1px rgba(108,99,255,0.2),
    0 0 12px rgba(108,99,255,0.5),
    0 0 30px rgba(108,99,255,0.2),
    inset 0 0 20px rgba(0,0,0,0.4);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: box-shadow 0.3s ease;
}

/* Animierter Orbit-Ring um den Kreis */
.guest-pip::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(108,99,255,0.9);
  border-right-color: rgba(167,139,250,0.4);
  animation: pip-orbit 2.5s linear infinite;
  pointer-events: none;
}

/* Zweiter Ring entgegengesetzt */
.guest-pip::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-bottom-color: rgba(96,165,250,0.6);
  border-left-color: rgba(96,165,250,0.2);
  animation: pip-orbit 4s linear infinite reverse;
  pointer-events: none;
}

@keyframes pip-orbit {
  to { transform: rotate(360deg); }
}

/* Hover / Aktiv: Glow stärker */
.guest-pip:hover .guest-pip-inner {
  box-shadow:
    0 0 0 1px rgba(108,99,255,0.5),
    0 0 20px rgba(108,99,255,0.8),
    0 0 50px rgba(108,99,255,0.3),
    inset 0 0 20px rgba(0,0,0,0.4);
}

.guest-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 50%;
}

.guest-pips[data-layout="off"] .guest-pip {
  display: none !important;
}

.guest-pips[data-layout="stage"] .guest-pip,
.guest-pips[data-layout="stage"] .guest-pip-inner,
.guest-pips[data-layout="stage"] .guest-pip video {
  border-radius: 18px;
}

.guest-pips[data-layout="stage"] .guest-pip::before,
.guest-pips[data-layout="stage"] .guest-pip::after {
  display: none;
}

.guest-pips[data-layout="stage"] .guest-pip--stage-primary .guest-pip-inner {
  border-color: rgba(0,147,255,0.82);
  box-shadow: 0 18px 48px rgba(0,0,0,0.48), 0 0 34px rgba(0,147,255,0.30);
}

.guest-pips[data-layout="stage"] .guest-pip--stage-small,
.guest-pips[data-layout="stage"] .guest-pip--stage-small .guest-pip-inner,
.guest-pips[data-layout="stage"] .guest-pip--stage-small video {
  border-radius: 999px;
}

.guest-pips[data-layout="stage"] .guest-pip-label {
  bottom: 6px;
  background: rgba(0,0,0,0.46);
  color: #fff;
  border-color: rgba(255,255,255,0.16);
}

.guest-pips[data-layout="tiles"] .guest-pip,
.guest-pips[data-layout="tiles"] .guest-pip-inner,
.guest-pips[data-layout="tiles"] .guest-pip video {
  border-radius: 14px;
}

.guest-pips[data-layout="tiles"] .guest-pip::before,
.guest-pips[data-layout="tiles"] .guest-pip::after {
  display: none;
}

.guest-slot {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.guest-slot-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,211,238,0.18), transparent 48%),
    rgba(8,13,24,0.58);
}

.guest-slot-inner span {
  font-size: clamp(24px, 5vw, 42px);
  line-height: 1;
  color: #dff7ff;
  text-shadow: 0 0 18px rgba(34,211,238,0.55);
}

.guest-pip-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  color: #a78bfa;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(108,99,255,0.8);
  pointer-events: none;
  background: rgba(8,8,20,0.75);
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(108,99,255,0.3);
  letter-spacing: 0.04em;
}

.pip-flip-btn, .pip-close-btn, .pip-size-btn {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.88);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 5;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pip-flip-btn  { top: -10px; right: -10px; }
.pip-close-btn { top: -10px; left: -10px; background: rgba(220,40,40,0.85); }
.pip-size-btn  { right: -10px; bottom: -10px; background: rgba(20,118,255,0.88); }

.guest-pip:hover .pip-flip-btn,
.guest-pip:hover .pip-close-btn,
.guest-pip:hover .pip-size-btn,
.guest-pip:focus-within .pip-flip-btn,
.guest-pip:focus-within .pip-close-btn,
.guest-pip:focus-within .pip-size-btn,
.guest-pip.pip-open .pip-flip-btn,
.guest-pip.pip-open .pip-close-btn,
.guest-pip.pip-open .pip-size-btn {
  opacity: 0.94;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

/* Touch: controls only while the PIP was tapped open. */
@media (hover: none), (pointer: coarse) {
  .guest-pip:not(.pip-open) .pip-close-btn,
  .guest-pip:not(.pip-open) .pip-flip-btn,
  .guest-pip:not(.pip-open) .pip-size-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.88) !important;
  }
}

/* --- Voice Pip --- */
.voice-pip {
  position: absolute;
  width: 72px;
  cursor: grab;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 10;
}
.voice-pip:active { cursor: grabbing; }

.voice-pip-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.voice-pip-avatar span {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  line-height: 1;
  z-index: 1;
}

.voice-pip-wave {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 2px;
  z-index: 2;
}

.voice-pip-wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.85);
  animation: voice-wave 0.8s ease-in-out infinite;
}
.voice-pip-wave span:nth-child(1) { height: 6px; animation-delay: 0s; }
.voice-pip-wave span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.voice-pip-wave span:nth-child(3) { height: 6px; animation-delay: 0.3s; }

@keyframes voice-wave {
  0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

.voice-pip-label {
  font-size: 0.62rem;
  color: white;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: 8px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Chat Overlay --- */
.chat-overlay {
  position: absolute;
  bottom: 56px;
  left: 12px;
  width: 300px;
  max-height: 50vh;
  background: rgba(13, 13, 15, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-overlay-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.chat-header-title {
  font-size: 0.82rem;
  font-weight: 600;
  flex: 1;
}
.chat-header-viewers {
  font-size: 0.78rem;
  color: var(--text2);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.chat-header-viewers:hover {
  background: rgba(255,255,255,0.08);
}

.chat-tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-tab-content.hidden { display: none; }

.overlay-close {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1;
}
.overlay-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* Opacity toggle button */
.btn-opacity-toggle {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 1rem;
  border-radius: 6px;
  margin: 0;
  box-shadow: none;
  transition: background 0.15s;
  line-height: 1;
}
.btn-opacity-toggle:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: none;
  transform: none;
}

/* Touch Like Animation */
.touch-like-heart {
  position: fixed;
  pointer-events: none;
  font-size: 2rem;
  z-index: 50;
  animation: floatHeart 1s ease-out forwards;
}
@keyframes floatHeart {
  0% { opacity: 1; transform: scale(0.5) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-40px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-80px); }
}

/* --- Admin Overlay --- */
.admin-overlay {
  position: absolute;
  top: 56px;        /* unterhalb der Header-Leiste */
  right: 12px;
  width: 310px;
  max-height: calc(100% - 72px);  /* bis zur Unterkante der Video-Area */
  background: rgba(18, 18, 24, 0.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.admin-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* --- Chat --- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 85%;
  align-self: flex-start;
}

/* Eigene Nachrichten rechts (WhatsApp-Style) */
.chat-msg.self {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-msg.self .chat-bubble {
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.12);
  border-radius: 12px 12px 4px 12px;
}
/* Andere Nachrichten links */
.chat-msg:not(.self):not(.system) .chat-bubble {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px 12px 12px 4px;
}
.chat-bubble {
  padding: 6px 10px;
  transition: background 0.15s;
}

.chat-msg-header {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.chat-msg-name {
  font-size: 0.78rem;
  font-weight: 600;
}

/* Rollen-Badges */
.chat-role-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  flex-shrink: 0;
}
.chat-msg-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  max-width: 100%;
}
.chat-msg-badges .chat-role-badge,
.chat-role-badge--faction {
  font-size: 0.56rem;
  line-height: 1.1;
  padding: 1px 4px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.chat-role-badge--faction {
  min-width: 16px;
  justify-content: center;
}
.chat-role-badge.host     { background: rgba(167,139,250,0.2); color: var(--host-color); }
.chat-role-badge.admin,
.chat-role-badge.superadmin { background: rgba(245,158,11,0.2); color: #f59e0b; }
.chat-role-badge.moderator { background: rgba(14,165,233,0.2); color: #7C4DFF; }
.chat-role-badge.beta      { background: rgba(16,185,129,0.2); color: #10b981; }
.chat-role-badge.premium_moderator { background: rgba(168,85,247,0.2); color: #a855f7; }
.chat-role-badge.sub-supporter  { background: rgba(59,130,246,0.15); color: #60a5fa; }
.chat-role-badge.sub-premium    { background: rgba(139,92,246,0.18); color: #c084fc; }
.chat-role-badge.sub-vip        { background: rgba(245,158,11,0.18); color: #fbbf24; }

/* chat-msg-name Rollenfarben: im Premium-Chat-Block definiert */

.chat-msg-time {
  font-size: 0.65rem;
  color: var(--text2);
  opacity: 0.7;
}

.chat-msg-text {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}

.chat-msg.system {
  align-self: center;
  max-width: 100%;
  padding: 2px 0;
}

.chat-msg.system .chat-msg-text {
  font-size: 0.75rem;
  color: var(--text2);
  font-style: italic;
  text-align: center;
  background: rgba(255,255,255,0.04);
  border-radius: 20px;
  padding: 2px 10px;
}

.chat-msg.system-warn .chat-msg-text {
  color: var(--warning);
  background: rgba(245,158,11,0.1);
}

/* Peer-Liste im Chat */
.chat-peer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-peer-item:hover {
  background: var(--bg3);
}

.chat-peer-item:hover .peer-mention-hint {
  opacity: 1;
}

.peer-mention-hint {
  opacity: 0;
  font-size: 0.7rem;
  color: var(--accent);
  margin-left: auto;
  transition: opacity 0.15s;
}

.chat-input-area {
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.chat-input-area input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
}

.chat-input-area input:focus { border-color: var(--accent); }

.btn-send {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  color: white;
  cursor: pointer;
  font-size: 0.88rem;
  transition: opacity 0.2s;
}

.btn-send:hover { opacity: 0.85; }

/* --- Peer List --- */
.peer-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.peer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: 8px;
}

.peer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.peer-avatar.host { background: rgba(167,139,250,0.2); color: var(--host-color); }
.peer-avatar.guest { background: rgba(52,211,153,0.2); color: var(--guest-color); }

.peer-info { flex: 1; min-width: 0; }

.peer-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peer-role {
  font-size: 0.72rem;
  color: var(--text2);
}

.peer-actions {
  display: flex;
  gap: 4px;
}

.peer-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.2s;
}

.peer-action-btn:hover { border-color: var(--danger); color: var(--danger); }

/* --- Werbeflächen --- */
.ad-bar {
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  z-index: 18;
}

.ad-bar-top {
  flex-direction: row;
  align-items: center;
  padding: 4px 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ad-bar-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  width: calc(var(--ad-size, 56px) + 16px);
}

.ad-item {
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.15s;
}

.ad-item img {
  display: block;
  height: var(--ad-size, 56px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
}

.ad-bar-left .ad-item img {
  height: auto;
  width: var(--ad-size, 56px);
  max-width: none;
}

a.ad-item:hover { opacity: 0.85; transform: scale(1.03); cursor: pointer; }

/* --- Stream Overlay (BRB / Handover / Werbung) --- */
.stream-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.overlay-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.overlay-brb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text2);
}

.overlay-brb p { font-size: 0.95rem; }

.overlay-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Notifications --- */
.toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.88rem;
  animation: slide-in 0.3s ease;
  pointer-events: all;
  max-width: 280px;
}

.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.info { border-color: var(--accent); }

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* --- Gift Alert --- */
.gift-alert {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #1a1040 0%, #2d1b69 100%);
  border: 1px solid rgba(167, 139, 250, 0.5);
  border-radius: 16px;
  padding: 16px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(124,58,237,0.3);
  animation: gift-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.gift-alert-out {
  animation: gift-out 0.5s ease-in both;
}
.gift-alert-icon {
  font-size: 2.8rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(167,139,250,0.8));
  animation: gift-bounce 0.6s ease 0.3s both;
}
.gift-alert-text {
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.gift-alert-text strong {
  color: #c4b5fd;
}
.gift-alert-msg {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #94a3b8;
  font-style: italic;
}
@keyframes gift-in {
  from { transform: translateX(-50%) translateY(40px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}
@keyframes gift-out {
  from { transform: translateX(-50%) translateY(0);   opacity: 1; }
  to   { transform: translateX(-50%) translateY(-20px); opacity: 0; }
}
@keyframes gift-bounce {
  0%   { transform: scale(0) rotate(-20deg); }
  60%  { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* --- Gift Picker --- */
.btn-gift-picker {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-gift-picker:hover { background: var(--bg3, rgba(255,255,255,0.08)); }

.gift-picker {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 10px;
}
.gift-picker-title {
  font-size: 0.75rem;
  color: var(--text2);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gift-picker-grid {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(108,99,255,.4) transparent;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gift-picker-grid::-webkit-scrollbar { height: 4px; }
.gift-picker-grid::-webkit-scrollbar-thumb { background: rgba(108,99,255,.4); border-radius: 2px; }
.gift-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  background: var(--bg3, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  flex-shrink: 0;
  min-width: 64px;
  max-width: 80px;
  scroll-snap-align: start;
}
.gift-item:hover {
  background: rgba(124,58,237,0.15);
  border-color: rgba(167,139,250,0.5);
  transform: translateY(-2px);
}
.gift-item:active { transform: translateY(0); }
.gift-item-icon { font-size: 1.6rem; line-height: 1; }
.gift-item-name { font-size: 0.68rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gift-item-price { font-size: 0.7rem; color: #a78bfa; font-weight: 600; }

/* --- Guest Camera Button --- */
.guest-cam-bar {
  padding: 10px 12px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Like Button --- */
.btn-like {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.15s;
}
.btn-like.liked {
  transform: scale(1.25);
  color: #ef4444;
}

/* --- Follow Host Button --- */
.btn-follow-host {
  transition: all 0.2s;
}
.btn-follow-host.active {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border-color: #22c55e55;
  box-shadow: 0 0 8px rgba(34,197,94,0.5), 0 0 16px rgba(34,197,94,0.2);
}

/* ─── Chat Benachrichtigung ──────────────────────────────────────────────── */
/* filter:drop-shadow → text-shadow+box-shadow: GPU-composited, kein Repaint */
@keyframes chat-notify-pulse {
  0%,100% { text-shadow: 0 0 4px rgba(251,191,36,0.9), 0 0 10px rgba(234,179,8,0.5); color: #fbbf24; }
  50%     { text-shadow: 0 0 8px rgba(251,191,36,1.0), 0 0 18px rgba(234,179,8,0.7); color: #fde68a; }
}
.btn-nautical.chat-notify {
  animation: chat-notify-pulse 1s ease-in-out infinite;
}
/* Host Chat-Buttons (btn-cam Stil) */
.host-chat-notify {
  animation: chat-notify-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(251,191,36,0.8), 0 0 16px rgba(234,179,8,0.4) !important;
  color: #fbbf24 !important;
}
.chat-preview-bubble {
  position: absolute;
  bottom: 58px;
  left: 10px;
  right: 10px;
  max-width: 320px;
  background: rgba(15,15,22,0.93);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 0.82rem;
  color: var(--text);
  z-index: 60;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  animation: chat-preview-anim 3.8s ease forwards;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
@keyframes chat-preview-anim {
  0%   { opacity: 0; transform: translateY(10px); }
  10%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ─── Nautical Buttons (rahmenlos, Ship-Stil) ─────────────────────────────── */
.btn-nautical {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s, filter 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
}
.btn-nautical:active { transform: scale(0.88); }

/* Glow Animationen: text-shadow statt filter:drop-shadow → GPU-composited */
@keyframes nautical-blue-pulse {
  0%,100% { text-shadow: 0 0 4px rgba(96,165,250,0.9),  0 0 10px rgba(26,109,255,0.5); }
  50%     { text-shadow: 0 0 8px rgba(96,165,250,1.0),  0 0 18px rgba(26,109,255,0.7); }
}
@keyframes nautical-green-pulse {
  0%,100% { text-shadow: 0 0 4px rgba(74,222,128,0.9),  0 0 10px rgba(34,197,94,0.5); }
  50%     { text-shadow: 0 0 8px rgba(74,222,128,1.0),  0 0 18px rgba(34,197,94,0.7); }
}

/* Kamera, Mic, Voice, Screen aktiv → Blau-Glow */
.btn-nautical#btn-guest-cam.active,
.btn-nautical#btn-guest-screen.active,
.btn-nautical#btn-guest-mic.active,
.btn-nautical#btn-voice.active {
  color: #93c5fd;
  animation: nautical-blue-pulse 2s ease-in-out infinite;
  will-change: text-shadow;
}
/* Follow aktiv → Grün-Glow */
.btn-nautical.btn-follow-host.active {
  color: #6ee7b7;
  animation: nautical-green-pulse 2s ease-in-out infinite;
  will-change: text-shadow;
}

/* --- Admin Panel --- */
.admin-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.admin-section:last-child { border-bottom: none; }

.admin-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.admin-stat {
  background: var(--bg3);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-stat span { font-size: 0.7rem; color: var(--text2); }
.admin-stat strong { font-size: 1rem; }

.admin-peer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.admin-peer-item:last-child { border-bottom: none; }

.admin-ban-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
}
.admin-ban-item:last-child { border-bottom: none; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* --- Host Mobile/Desktop Toggle --- */
.host-mobile-only { display: none; }
@media (max-width: 768px) {
  .host-desktop-only { display: none !important; }
  /* Old header buttons - inline-flex */
  .stream-header .host-mobile-only,
  .host-mobile-only.btn-cam { display: inline-flex !important; }
  /* New mobile layout elements - keep their original display */
  #mob-hud,
  #mob-end-btn,
  #mob-right-rail,
  #mob-bottom-bar,
  #mob-chat-float,
  #mob-tool-grid { display: flex !important; }
}

/* --- iOS Safe Areas --- */
@supports (padding-top: env(safe-area-inset-top)) {
  .stream-layout {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* --- Tablet (768px) --- */
@media (max-width: 768px) {
  /* Linke Werbeleiste + Invite-Bar auf Mobile/Tablet ausblenden */
  .ad-bar-left { display: none !important; }
  .invite-bar { display: none !important; }

  .stream-header {
    padding: 8px 12px;
  }
  .stream-header .logo-small { font-size: 0.95rem; }
  .stream-header .logo-small svg { width: 22px; height: 22px; }

  .cameras-grid.count-3,
  .cameras-grid.count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .cameras-grid.count-3 .camera-box:first-child {
    grid-column: 1 / -1;
  }

  .chat-overlay {
    width: 70%;
    max-width: 280px;
    right: auto;
    left: 0;
    bottom: 48px;
    max-height: 45vh;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    border-left: none;
    border-bottom: none;
    border-radius: 0 12px 0 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .chat-overlay .chat-messages {
    background: transparent;
    padding: 8px 10px;
  }
  .chat-overlay .chat-msg-text {
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  }
  .chat-overlay .chat-msg-name {
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  }
  .chat-overlay .chat-overlay-header {
    background: transparent;
    border-bottom: none;
    padding: 6px 10px;
  }
  .chat-overlay .chat-input-area {
    background: rgba(0,0,0,0.5);
    border-top: none;
    border-radius: 8px;
    margin: 0 6px 4px;
  }
  .chat-input-area input {
    font-size: 16px; /* verhindert iOS-Zoom */
  }
  /* Mobil: alle Messages links, auch eigene */
  .chat-overlay .chat-msg.self {
    align-self: flex-start;
    align-items: flex-start;
  }
  .chat-overlay .chat-msg.self .chat-bubble {
    border-radius: 12px 12px 12px 4px;
  }
  .chat-overlay .chat-msg {
    max-width: 95%;
  }
  .admin-overlay {
    width: calc(100vw - 16px);
    right: 8px;
    left: 8px;
  }

  /* Bildschirm-Teilen Button – prominent am linken Rand */
  #btn-guest-screen {
    position: fixed;
    left: 12px;
    bottom: 70px;
    z-index: 50;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    background: var(--bg3) !important;
    border: 2px solid var(--border) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
  }
  #btn-guest-screen.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }

  .guest-pip { width: 90px; height: 90px; }
  .guest-pip-inner { width: 90px; height: 90px; }

  .lobby-body { padding: 20px 16px; }
  .lobby-body h2 { font-size: 1.2rem; }
}

/* --- Phone (max 520px) --- */
@media (max-width: 520px) {
  /* Header kompakt */
  .stream-header {
    padding: 6px 10px;
    gap: 6px;
  }
  .stream-header .logo-small { font-size: 0.85rem; gap: 5px; }
  .stream-header .logo-small svg { width: 20px; height: 20px; }
  .header-actions { gap: 6px; }
  .header-actions .btn-cam { padding: 6px 10px; font-size: 0.78rem; }
  .viewer-count { font-size: 0.75rem; }
  #username-display { font-size: 0.75rem !important; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Video: 2 Kameras → 2 Spalten beibehalten, bounded */
  .cameras-grid.count-2 { grid-template-columns: 1fr 1fr; }
  .cameras-grid.count-3,
  .cameras-grid.count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .cameras-grid.count-3 .camera-box:first-child {
    grid-column: 1 / -1;
  }

  /* Cam-Bar kompakt */
  .guest-cam-bar {
    padding: 6px 8px;
    gap: 5px;
  }
  .guest-cam-bar .btn-cam { padding: 6px 8px; font-size: 0.75rem; }
  .guest-cam-bar .btn-cam.btn-icon { padding: 6px 8px; }
  .guest-cam-bar .btn-cam.btn-icon svg { width: 16px; height: 16px; }
  .guest-cam-bar .btn-cam.btn-like { padding: 6px 8px; font-size: 0.75rem; }
  #cam-status { font-size: 0.7rem !important; display: none; }
  #btn-admin { font-size: 0.72rem; }

  /* Host-Controls kompakt */
  .cameras-grid { padding: 0; gap: 2px; }

  .host-controls {
    padding: 4px 8px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }
  .host-controls .btn-cam { padding: 5px 8px; font-size: 0.75rem; min-height: 32px; }
  .host-controls .btn-cam.btn-icon { padding: 5px 6px; min-width: 32px; min-height: 32px; }
  .host-controls .btn-cam svg { width: 15px; height: 15px; }
  .host-controls #cam-count { display: none; }
  .host-controls #btn-end-stream { padding: 5px 8px; font-size: 0.73rem; margin-left: 4px; }

  /* Chat Overlay → transparent, links */
  .chat-overlay {
    width: 100%;
    right: 0;
    left: 0;
    bottom: 44px;
    max-height: 50vh;
    border-radius: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .chat-overlay-header { padding: 8px 10px; }
  .chat-messages { font-size: 0.82rem; padding: 8px 10px; background: transparent; }
  .chat-input-area { padding: 6px 8px; gap: 4px; background: rgba(0,0,0,0.5); }
  .chat-input-area input { font-size: 16px; padding: 8px; }

  /* Admin Overlay → breiter */
  .admin-overlay {
    width: 100%;
    right: 0;
    left: 0;
    border-radius: 0;
  }

  /* PiP kleiner */
  .guest-pip { width: 72px; height: 72px; }
  .guest-pip-inner { width: 72px; height: 72px; border-width: 2px; }
  .guest-pip-label { font-size: 0.58rem; bottom: -14px; }

  .voice-pip { width: 56px; }
  .voice-pip-avatar { width: 48px; height: 48px; }
  .voice-pip-name { font-size: 0.55rem; }

  /* Invite Bar – auf Mobile verstecken (Share-Buttons im Admin-Panel) */
  .invite-bar { display: none !important; }

  /* Live Badge */
  .live-badge { padding: 2px 7px; font-size: 0.7rem; }

  /* Lobby */
  .lobby-card { padding: 10px 12px; gap: 10px; }
  .lobby-card-avatar { width: 38px; height: 38px; font-size: 1.1rem; }
  .lobby-card-host { font-size: 0.88rem; }
  .lobby-card .btn-cam { padding: 6px 10px; font-size: 0.78rem; }

  /* Login Page */
  .login-container { padding: 24px 18px; margin: 0 8px; }

  /* Code Screen */
  .code-screen-box { padding: 28px 20px; }

  /* Register Modal */
  .reg-modal-box { padding: 18px; }
  .reg-modal-field input { font-size: 16px; } /* iOS zoom fix */

  /* Profil Popup */
  .profile-popup { min-width: 160px; padding: 12px 14px; }
}

/* --- Sehr kleine Phones (max 380px, z.B. iPhone SE) --- */
@media (max-width: 380px) {
  .stream-header .logo-small span,
  .stream-header .logo-small { font-size: 0; }
  .stream-header .logo-small svg { width: 22px; height: 22px; }

  .header-actions .btn-cam { padding: 5px 8px; font-size: 0.72rem; }
  #username-display { display: none !important; }
  .viewer-count { font-size: 0.7rem; }

  .guest-cam-bar { gap: 3px; padding: 5px 6px; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
  .guest-cam-bar .btn-cam { padding: 5px 6px; }
  .guest-cam-bar .btn-cam.btn-like .like-count { display: none; }

  .host-controls { gap: 3px; padding: 6px 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .host-controls .btn-cam { padding: 5px 7px; font-size: 0.72rem; }
  .host-controls #btn-end-stream span { display: none; } /* Nur Icon auf sehr kleinen Screens */

  .guest-pip { width: 60px; height: 60px; }
  .guest-pip-inner { width: 60px; height: 60px; }
}

/* --- Landscape auf Phones (kurze Höhe) --- */
@media (max-height: 500px) and (orientation: landscape) {
  .stream-header { padding: 4px 10px; }
  .stream-header .logo-small svg { width: 18px; height: 18px; }

  .guest-cam-bar { padding: 4px 8px; }
  .guest-cam-bar .btn-cam { padding: 4px 8px; font-size: 0.72rem; }

  .host-controls { padding: 4px 8px; }
  .host-controls .btn-cam { padding: 4px 8px; }

  .chat-overlay { max-height: 50vh; bottom: 32px; }

  .cameras-grid.count-2 { grid-template-columns: 1fr 1fr; }
}

/* --- Segelboot Button Puls --- */
@keyframes ship-glow {
  0%   { color: #60a5fa; text-shadow: 0 0 5px #6C63FF, 0 0 2px #6C63FF; }
  33%  { color: #c084fc; text-shadow: 0 0 6px #a855f7, 0 0 2px #a855f7; }
  66%  { color: #34d399; text-shadow: 0 0 5px #10b981, 0 0 2px #10b981; }
  100% { color: #60a5fa; text-shadow: 0 0 5px #6C63FF, 0 0 2px #6C63FF; }
}
.btn-ship-pulse svg {
  animation: ship-glow 3s ease-in-out infinite;
}
.btn-ship-pulse:active svg {
  animation: none;
  transform: scale(0.88);
}

/* --- Stream Switcher Drawer --- */
.stream-switcher-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px 18px 0 0;
  padding: 8px 0 0;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
}
.stream-switcher-drawer.open {
  transform: translateY(0);
}
.stream-switcher-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 0 auto 10px;
  cursor: pointer;
}
.stream-switcher-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 10px;
  gap: 8px;
}
.stream-switcher-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}
.ssw-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ssw-tab.active {
  background: rgba(26,109,255,0.18);
  color: var(--accent);
}
.stream-switcher-list {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stream-switcher-list::-webkit-scrollbar { display: none; }

.stream-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  width: 64px;
  -webkit-tap-highlight-color: transparent;
}
.stream-bubble-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  position: relative;
  border: 2.5px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s;
}
.stream-bubble-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.stream-bubble-avatar .live-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2.5px solid #ef4444;
  animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.stream-bubble.active .stream-bubble-avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,109,255,0.35);
}
.stream-bubble.locked .stream-bubble-avatar {
  filter: grayscale(0.7) brightness(0.5);
}
.stream-bubble-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
}
.stream-bubble-name {
  font-size: 0.7rem;
  color: var(--text);
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stream-bubble-viewers {
  font-size: 0.65rem;
  color: var(--text2);
}
.stream-bubble:active .stream-bubble-avatar { transform: scale(0.93); }

/* --- Watch Status Rail --- */
.watch-status-rail {
  position: absolute;
  top: calc(62px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 29;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: auto;
}
.watch-status-rail::-webkit-scrollbar { display: none; }
.watch-status-rail:empty { display: none; }
body.battle-preview .watch-status-rail { display: none !important; }
.watch-status-item {
  width: 60px;
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.watch-status-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  border: 2.5px solid var(--status-ring, #6c63ff);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.42);
}
.watch-status-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.watch-status-live {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ff375f;
  border-radius: 4px;
  padding: 1px 4px;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.watch-status-plus {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7C4DFF;
  border: 2px solid #05060c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
}
.watch-status-title,
.watch-status-sub {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.watch-status-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
.watch-status-sub {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.56);
}
.watch-status-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.42);
  padding: 18px;
}
.watch-status-sheet {
  width: min(420px, 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(13,16,32,0.96);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 16px;
}
.watch-status-sheet h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.watch-status-sheet p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  line-height: 1.45;
}
.watch-status-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.watch-status-media-sheet {
  width: min(460px, 100%);
}
.watch-status-media-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.watch-status-media-head h3 {
  margin: 0;
}
.watch-status-media-head p {
  margin: 2px 0 0;
  color: #7C4DFF;
  font-size: 0.78rem;
  font-weight: 800;
}
.watch-status-media-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  border: 2px solid rgba(255,255,255,0.16);
  flex: 0 0 42px;
}
.watch-status-media-avatar img,
.watch-status-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.watch-status-media-player {
  width: 100%;
  max-height: min(58vh, 520px);
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 14px;
  background: #05060c;
  object-fit: cover;
  display: block;
}
.watch-status-media-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  text-align: center;
  padding: 18px;
}
.watch-status-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.watch-status-media-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}
.watch-status-media-thumb span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 1;
  border-radius: 999px;
  padding: 2px 5px;
  background: rgba(0,0,0,0.62);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
}

/* --- Stream Lobby --- */
.stream-lobby {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.lobby-body {
  padding: 32px 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.lobby-body h2 {
  font-size: 1.4rem;
  margin: 0 0 20px;
}
.lobby-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.watch-status-lobby-rail {
  position: static;
  padding: 0 0 18px;
  margin: -4px 0 6px;
}
.lobby-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color 0.2s;
}
.lobby-card:hover { border-color: var(--accent); }
.lobby-card-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: white;
  flex-shrink: 0;
}
.lobby-card-info { flex: 1; min-width: 0; }
.lobby-card-host { font-weight: 600; font-size: 1rem; }
.lobby-card-stats { font-size: 0.8rem; color: var(--text2); margin-top: 3px; }
.lobby-loading, .lobby-empty { color: var(--text2); padding: 20px 0; text-align: center; }

/* --- Invite Bar (Host) --- */
.invite-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(26, 109, 255, 0.08);
  border-top: 1px solid rgba(26, 109, 255, 0.2);
  flex-shrink: 0;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 100%;
}
.invite-bar-label {
  font-size: 0.78rem;
  color: var(--text2);
  white-space: nowrap;
}
.invite-bar-code {
  flex: 1;
  font-size: 0.78rem;
  color: #93c5fd;
  background: rgba(26,109,255,0.1);
  border-radius: 6px;
  padding: 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-family: monospace;
}
.invite-copy-btn { color: var(--accent) !important; }

/* --- Code-Eingabe Screen (Viewer) --- */
.code-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.code-screen-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow);
}
.code-screen-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 24px;
}
.code-screen-box h2 {
  font-size: 1.2rem;
  margin: 0 0 8px;
  color: var(--text);
}
.code-screen-box p {
  color: var(--text2);
  font-size: 0.9rem;
  margin: 0 0 16px;
}
.code-screen-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid var(--danger);
  color: #fca5a5;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.code-screen-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.code-screen-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}
.code-screen-input:focus { outline: none; border-color: var(--accent); }
.code-screen-hint {
  font-size: 0.78rem;
  color: var(--text2);
  margin: 0;
}

/* --- Registrierungs-Modal im Stream --- */
.reg-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.reg-modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow);
  animation: popup-in 0.2s ease;
}

.reg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.reg-modal-field {
  margin-bottom: 12px;
}

.reg-modal-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--text2);
  margin-bottom: 4px;
}

.reg-modal-field input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.reg-modal-field input:focus {
  border-color: var(--accent);
}

/* --- Social Buttons (v20) --- */
.peer-social-btns {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.btn-follow, .btn-like-social {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 3px 7px;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-follow:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(26, 109, 255, 0.1);
}

.btn-follow.active {
  background: rgba(26, 109, 255, 0.18);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-like-social:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.btn-like-social.active {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #ef4444;
}

/* --- Profil-Popup --- */
.profile-popup {
  z-index: 9000;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  min-width: 200px;
  box-shadow: var(--shadow);
  text-align: center;
  animation: popup-in 0.15s ease;
}

@keyframes popup-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile-popup-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

.profile-popup-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: var(--text);
}

.profile-popup-stats {
  font-size: 0.78rem;
  color: var(--text2);
  margin-bottom: 10px;
  line-height: 1.6;
}

.profile-popup-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.peer-name-clickable {
  cursor: pointer;
}

.peer-name-clickable:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Wallet Modal (v33) --- */
.wallet-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.wallet-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: popup-in 0.2s ease;
}

.wallet-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.wallet-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.wallet-balance-display {
  text-align: center;
  padding: 16px;
  background: var(--bg3);
  border-radius: 12px;
  margin-bottom: 18px;
}

.wallet-balance-amount {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wallet-balance-label {
  font-size: 0.78rem;
  color: var(--text2);
  margin-top: 2px;
}

.wallet-packages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.wallet-package {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.wallet-package:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.wallet-package.selected {
  border-color: var(--accent);
  background: rgba(26, 109, 255, 0.08);
}

.wallet-package-credits {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}

.wallet-package-price {
  font-size: 0.85rem;
  color: var(--accent2);
  font-weight: 600;
  margin-top: 4px;
}

.wallet-package-bonus {
  font-size: 0.7rem;
  color: var(--success);
  margin-top: 2px;
}

.wallet-buy-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #0070ba, #003087);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wallet-buy-btn:hover { opacity: 0.9; }
.wallet-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wallet-buy-btn svg { flex-shrink: 0; }

.wallet-tx-list {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.wallet-tx-list h4 {
  font-size: 0.8rem;
  color: var(--text2);
  margin: 0 0 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wallet-tx-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.wallet-tx-desc { color: var(--text2); }
.wallet-tx-amount { font-weight: 600; }
.wallet-tx-amount.positive { color: var(--success); }
.wallet-tx-amount.negative { color: var(--danger); }

.wallet-header-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  color: var(--accent2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color 0.15s;
}

.wallet-header-btn:hover { border-color: var(--accent); }

@media (max-width: 480px) {
  .wallet-modal { padding: 18px; max-width: 100%; }
  .wallet-packages { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wallet-package { padding: 10px 8px; }
  .wallet-package-credits { font-size: 1.1rem; }
}

/* --- Stream Rating Modal (Jugendschutz) --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
  animation: popup-in 0.2s ease;
}

.modal-box h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.rating-btn {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.rating-btn:hover {
  border-color: var(--accent);
  background: rgba(155, 92, 255, 0.08);
}

.rating-btn.selected {
  border-color: var(--accent);
  background: rgba(155, 92, 255, 0.15);
  color: var(--accent);
}

/* ─── Recording Button Styles ─── */
#btn-record {
  position: relative;
  transition: all 0.3s ease;
}

#btn-record.recording-active {
  background: var(--danger) !important;
  color: white !important;
  animation: pulse-recording 1s infinite;
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.2); }
}

.recording-item {
  padding: 8px;
  border: 1px solid var(--text2);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
}

.recording-item strong {
  color: var(--primary);
}

.recording-item span {
  color: var(--text2);
}

#recording-list-items {
  max-height: 200px;
  overflow-y: auto;
}

.btn-small {
  padding: 4px 8px;
  font-size: 0.75rem;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-small:hover {
  background: var(--primary);
  color: white;
}

/* ── Battle Widget ──────────────────────────────────────────────────────────── */
#battle-widget {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  background: rgba(8,8,14,0.45);
  border: 1px solid rgba(108,99,255,0.35);
  border-radius: 10px;
  padding: 6px 12px;
  min-width: 200px;
  max-width: 340px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
  display: none;
}
/* Battle-HUD sichtbar halten: Score + Top-Schenker sind Teil der Live UX. */
.battle-top5 { display: block; }
.battle-header { display: block; }
.battle-header {
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: 2px;
  color: var(--primary, #6c63ff);
  margin-bottom: 8px;
}
.battle-scores {
  display: flex;
  align-items: center;
  gap: 8px;
}
.battle-side {
  flex: 1;
  text-align: center;
}
.battle-name {
  font-size: .75rem;
  color: var(--text-muted, #888);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.battle-score-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text, #fff);
}
.battle-vs {
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary, #6c63ff);
  padding: 0 4px;
}
.battle-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.battle-bar {
  height: 100%;
  background: var(--primary, #6c63ff);
  border-radius: 2px;
  transition: width .4s ease;
}
.battle-bar-right {
  background: #ff6b6b;
}
.battle-bonus-area {
  text-align: center;
  margin-top: 8px;
}
.battle-bonus-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f9ca24, #f0932b);
  color: #000;
  font-weight: 700;
  font-size: .8rem;
  animation: pulse-badge-battle .5s ease infinite alternate;
}
.battle-bonus-chaos-reveal {
  background: linear-gradient(135deg, #6c63ff, #ff6b6b);
  color: #fff;
}
@keyframes pulse-badge-battle {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* ── Stream-Kategorie Badge ─────────────────────────────────────────────────── */
#stream-category-badge {
  display: none;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(108,99,255,.2);
  border: 1px solid var(--primary, #6c63ff);
  color: var(--primary, #6c63ff);
  font-size: .75rem;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Kategorie-Grid ─────────────────────────────────────────────────────────── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.cat-btn {
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--card, #1a1a1f);
  color: var(--text, #fff);
  cursor: pointer;
  font-size: .82rem;
  transition: all .2s;
}
.cat-btn:hover { background: var(--primary, #6c63ff); border-color: var(--primary, #6c63ff); }

/* ── Floating Hearts ────────────────────────────────────────────────────────── */
#heart-float-container {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 60px;
  height: 200px;
  pointer-events: none;
  z-index: 800;
  overflow: visible;
}
.floating-heart {
  position: absolute;
  bottom: 0;
  font-size: 1.4rem;
  animation: heart-float var(--dur, 2s) ease-out forwards;
}
@keyframes heart-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  50%  { opacity: .8; transform: translateY(-80px) scale(1.1) rotate(-10deg); }
  100% { opacity: 0; transform: translateY(-160px) scale(.7) rotate(10deg); }
}

/* ── Schatztruhen-Notification ──────────────────────────────────────────────── */
.chest-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f9ca24, #f0932b);
  color: #000;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 8px 32px rgba(240,147,43,.4);
}
.chest-notification--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chest-icon { font-size: 2rem; animation: chest-bounce .4s ease; }
@keyframes chest-bounce {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* ── Chest Confetti ─────────────────────────────────────────────────────────── */
.chest-confetti {
  position: fixed;
  z-index: 9900;
  pointer-events: none;
  font-size: 1.2rem;
  animation: confetti-burst 1.5s ease forwards;
}
@keyframes confetti-burst {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--conf-x), var(--conf-y)) scale(.5) rotate(360deg); }
}

/* ── Runen Aura ─────────────────────────────────────────────────────────────── */
.runen-aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8800;
  background: radial-gradient(ellipse at center, rgba(255,215,0,.15) 0%, transparent 70%);
  animation: runen-aura-in 2.5s ease forwards;
}
@keyframes runen-aura-in {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
.runen-spark {
  position: fixed;
  left: 50%; top: 50%;
  pointer-events: none;
  z-index: 8900;
  font-size: 1.5rem;
  animation: spark-burst 1.5s ease forwards;
}
@keyframes spark-burst {
  0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--spark-x), var(--spark-y)) scale(0); }
}

/* ── Funken Regen ───────────────────────────────────────────────────────────── */
.funken-rain-drop {
  position: fixed;
  top: -10%;
  pointer-events: none;
  z-index: 8700;
  font-size: 1.2rem;
  animation: funken-fall var(--dur, 1.2s) ease-in forwards;
}
@keyframes funken-fall {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(110vh); }
}

/* ── WaveBlue Surfer Animation ──────────────────────────────────────────────── */
.surfer-wrap {
  position: absolute;
  bottom: 25%;
  left: 0; right: 0;
  height: 120px;
  overflow: visible;
}
.surfer-wave {
  position: absolute;
  bottom: 0; left: -100%;
  width: 300%;
  height: 80px;
  background: linear-gradient(90deg, transparent, rgba(0,180,216,.4) 30%, rgba(0,119,182,.7) 60%, rgba(0,180,216,.4) 90%, transparent);
  animation: wave-ride 4s ease forwards;
  border-radius: 50%;
}
@keyframes wave-ride {
  0%   { left: -100%; transform: scaleY(.5); }
  30%  { transform: scaleY(1); }
  100% { left: 100%; transform: scaleY(.5); }
}
.surfer-figure {
  position: absolute;
  bottom: 30px;
  left: -80px;
  font-size: 3rem;
  animation: surfer-ride 4s ease forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
@keyframes surfer-ride {
  0%   { left: -80px; transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  100% { left: calc(100% + 80px); transform: rotate(-5deg); }
}
.surfer-logo {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  opacity: 0;
  animation: logo-appear 4s ease forwards;
}
@keyframes logo-appear {
  0%,30% { opacity: 0; }
  50%    { opacity: 1; }
  85%    { opacity: 1; }
  100%   { opacity: 0; }
}
.surfer-spray {
  position: absolute;
  bottom: 50px;
  left: 0;
}
.surfer-drop {
  position: absolute;
  font-size: .6rem;
  animation: spray-drop 1s ease-out infinite;
  opacity: .7;
}
@keyframes spray-drop {
  0%   { opacity: .7; transform: rotate(var(--drop-angle, 0)) translateY(0); }
  100% { opacity: 0; transform: rotate(var(--drop-angle, 0)) translateY(var(--drop-dist, 30px)); }
}

/* ── Host Battle Widget ─────────────────────────────────────────────────────── */
#host-battle-widget {
  background: rgba(13,13,15,.95);
  border: 1px solid var(--primary, #6c63ff);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(108,99,255,.25);
}

/* ── Host Action Rail: Mobile links, klappt ins Bild ────────────────────────── */
@media (max-width: 768px) {
  #host-action-rail {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 500 !important;
    pointer-events: all !important;
  }
  #host-rail-panel {
    max-height: 70vh;
    overflow-y: auto;
  }
  /* Toggle: kleiner runder Tab am linken Rand */
  #host-rail-toggle {
    width: 20px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 0 10px 10px 0 !important;
    background: rgba(108,99,255,0.5) !important;
    border-color: rgba(108,99,255,0.6) !important;
    color: #fff !important;
    font-size: 0.55rem !important;
    opacity: 0.85;
  }
  #galaxy-canvas { width: 80px !important; height: 80px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WaveBlue Responsive — v59 — Desktop Two-Column Layout (page-scoped)
   Nur neue Blöcke — bestehende Styles unangetastet
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Safe Areas (alle Seiten) ──────────────────────────────────────────────── */
.stream-header { padding-top: max(12px, env(safe-area-inset-top)); }
#chat-stub     { padding-bottom: env(safe-area-inset-bottom); }
.host-controls { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* ── Stats-Bar unter den Header schieben (kein Overlap mit Logo) ───────────── */
#stream-stats-bar { top: 52px !important; }

/* ── Scroll-Lock: nur watch-page, host bleibt locked ───────────────────────── */
@media (min-width: 769px) {
  body.watch-page { overflow: auto; }
}

/* ── watch.html Desktop: Two-Column (Video links + Chat-Sidebar rechts) ──────── */
@media (min-width: 769px) {
  /* Video-Bereich: rechts 320px frei lassen.
     Explizite Einzelwerte statt inset-Shorthand — Safari auf macOS
     ignoriert !important auf inset-Shorthand zuverlässiger so. */
  body.watch-page .video-area {
    top:    0 !important;
    left:   0 !important;
    bottom: 0 !important;
    right:  320px !important;
  }

  /* Chat als feste rechte Sidebar.
     position + Positionswerte alle !important damit Safari
     den float-Overlay-Modus nicht beibehält. */
  body.watch-page .chat-overlay {
    position: fixed !important;
    top:    0 !important;
    right:  0 !important;
    bottom: 0 !important;
    left:   auto !important;
    width: 320px;
    max-height: 100vh;
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    background: rgba(13,13,15,0.95);
    z-index: 25;
    overflow-y: auto !important;    /* Allow vertical scroll */
    overflow-x: hidden !important;  /* Prevent horizontal scroll */
  }

  /* Stream-Switcher: kleines Panel oben links statt Fullscreen-Drawer */
  body.watch-page .stream-switcher-drawer {
    top: 60px; left: 12px;
    right: auto; bottom: auto;
    width: 280px;
    border-radius: 12px;
    border-top: none;
    transform: translateX(-110%);
  }
  body.watch-page .stream-switcher-drawer.open {
    transform: translateX(0);
  }

  /* Buttons etwas größer für Maus */
  body.watch-page .btn-nautical { min-width: 44px; min-height: 44px; }
  body.watch-page .btn-gift-direct,
  body.watch-page .btn-follow-host { min-height: 44px; }
  /* PiP auf Desktop sichtbar */
  body.watch-page #btn-pip { display: inline-flex !important; }
}

/* ── host.html Mobile: Video fullscreen ────────────────────── */
@media (max-width: 768px) {
  body.host-page .stream-header {
    display: none !important;
  }
  body.host-page .host-controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    background: rgba(13,13,15,0.92) !important;
    backdrop-filter: blur(8px) !important;
  }
  body.host-page .video-wrapper {
    padding: 0 !important;
  }
}

/* ── host.html Desktop: Padding-Top zurück für Header Space ────────────────────── */
@media (min-width: 769px) {
  body.host-page .video-wrapper {
    padding-top: 40px !important;
  }
}

/* ── host.html Desktop: Admin-Overlay als feste Sidebar ────────────────────── */
@media (min-width: 769px) {
  body.host-page .admin-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 360px;
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,0.08);
  }

  body.host-page .host-controls {
    padding: 16px 24px;
    gap: 12px;
  }
  body.host-page .host-controls button { min-height: 44px; min-width: 44px; }
}

/* ── v59 Nachträge: alle gemeldeten Bugs ──────────────────────────────────── */

/* Fix: chat-stub auf Desktop watch-page verstecken (überdeckt sonst Chat-Sidebar) */
@media (min-width: 769px) {
  body.watch-page #chat-stub { display: none !important; }
}

/* Fix: admin-overlay Desktop unter den Header schieben */
@media (min-width: 769px) {
  body.host-page .admin-overlay {
    top: 52px;
  }
}

/* Fix: chat-overlay auf host.html Desktop */
@media (min-width: 769px) {
  body.host-page .chat-overlay {
    left: 170px;
    /* Fix Safari-Flexbox-Bug: height:auto auf position:absolute löst bei jedem
       neuen Chat-Item einen Reflow aus und lässt video-wrapper schrumpfen.
       Fixe Höhe verhindert das — chat-messages scrollt intern. */
    height: 33vh !important;
    overflow: hidden !important;
  }
  body.host-page .chat-messages {
    /* Sicherstellen dass Nachrichten intern scrollen, nicht den Container wachsen lassen */
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WaveBlue Premium — v59 Quality Pass
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Inter Font (bereits im HTML-Head geladen) ──────────────────────────────── */

body, button, input, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── App Fade-In ────────────────────────────────────────────────────────────── */
#app.app-visible {
  animation: app-fade-in 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes app-fade-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Toast: smooth slide-out ────────────────────────────────────────────────── */
.toast-out {
  animation: toast-slide-out 0.35s cubic-bezier(0.4,0,1,1) forwards !important;
}
@keyframes toast-slide-out {
  to { opacity: 0; transform: translateX(110%); }
}

/* ── Touch Targets: Mindestgröße 44×44px ────────────────────────────────────── */
.pip-flip-btn, .pip-close-btn, .pip-size-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.guest-pip {
  width: var(--pip-size, 120px);
  height: var(--pip-size, 120px);
}
.guest-pip-inner {
  width: 100%;
  height: 100%;
}
.guest-pip.pip-size-lg { --pip-size: 168px; }
.guest-pip.pip-size-xl { --pip-size: 220px; }
@media (max-width: 768px) {
  .guest-pip { --pip-size: 96px; }
  .guest-pip.pip-size-lg { --pip-size: 148px; }
  .guest-pip.pip-size-xl { --pip-size: min(58vw, 220px); }
}
.overlay-close {
  min-width: 36px;
  min-height: 36px;
  padding: 8px 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peer-action-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* btn-nautical touch targets: in Guest-Cam-Bar-Block definiert */

/* ── Focus-Visible: Keyboard-Navigation ─────────────────────────────────────── */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── object-fit: cover für Camera-Grid (Video fullscreen, kanten gekürzt) ─────────────── */
.camera-box video {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Mobile: Ensure videos are portrait on small screens */
@media (max-width: 768px) {
  .camera-box video {
    object-position: center center !important;
    transform: none !important;
  }
}

/* ── Skeleton Screen für Stream-Switcher ────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.skeleton-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  flex-shrink: 0;
}
.skeleton-line {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  margin-top: 6px;
}

/* ── host-action-rail: onmouseover durch CSS :hover ersetzen ────────────────── */
#host-rail-panel button:hover {
  background: rgba(108,99,255,0.2) !important;
}
#host-rail-panel button[data-danger]:hover {
  background: rgba(239,68,68,0.25) !important;
}

/* ── Camera-Request Tooltip ─────────────────────────────────────────────────── */
#btn-cam-request {
  position: relative;
}
#btn-cam-request.cam-request-pending,
.guest-cam-bar.cam-request-pending #btn-cam-request {
  border-color: rgba(0,147,255,0.85) !important;
  box-shadow: 0 0 0 4px rgba(0,147,255,0.16), 0 0 24px rgba(0,147,255,0.42) !important;
  animation: camera-request-pulse 1.15s ease-in-out infinite;
}
#btn-cam-request::after {
  content: 'Host muss genehmigen';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,13,15,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text2);
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  backdrop-filter: blur(8px);
}
#btn-cam-request:hover::after,
#btn-cam-request:focus::after {
  opacity: 1;
}

/* ── Empty State: Stream-Lobby ──────────────────────────────────────────────── */
.stream-lobby-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text2);
  text-align: center;
}
.stream-lobby-empty svg { opacity: 0.35; }
.stream-lobby-empty p  { font-size: 0.9rem; }
.stream-lobby-empty a  { color: var(--accent); font-size: 0.85rem; }

/* ── Landscape: Vollbild ohne Cam-Bar (Phones) ──────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  body.watch-page .guest-cam-bar { display: none; }
  body.watch-page .stream-header { display: none; }
  body.watch-page .chat-overlay  { max-height: 100vh; bottom: 0; top: 0; border-radius: 0; }
}

/* ── Chat Mobile: Lesbarkeit auf hellem Hintergrund ─────────────────────────── */
@media (max-width: 768px) {
  .chat-messages .chat-msg-text {
    text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
  }
  .chat-overlay.transparent .chat-messages .chat-msg-text {
    background: rgba(0,0,0,0.55);
    border-radius: 6px;
    padding: 2px 5px;
  }
}

/* ── Switcher Empty States: CSS-Klasse statt Inline ─────────────────────────── */
.switcher-empty {
  color: var(--text2);
  font-size: 0.85rem;
  padding: 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── Lobby Card: Live-Dot statt Emoji ───────────────────────────────────────── */
.lobby-card-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  animation: pulse-badge 2s infinite;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Peer-List Empty State ───────────────────────────────────────────────────── */
.peer-list-empty {
  color: var(--text2);
  font-size: 0.82rem;
  padding: 24px 16px;
  text-align: center;
  opacity: 0.7;
}

/* ── Chat: Slide-in für neue Nachrichten ────────────────────────────────────── */
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg {
  animation: chat-msg-in 0.18s ease forwards;
}

/* ── Share-Button ────────────────────────────────────────────────────────────── */
.btn-cam.btn-icon {
  aspect-ratio: unset;
}

/* ── Stream Health Dot: Glow-Puls wenn connected ─────────────────────────────── */
#stream-health-dot[style*="#22c55e"] {
  animation: health-pulse 2s ease infinite;
}
@keyframes health-pulse {
  0%, 100% { box-shadow: 0 0 4px #22c55e; }
  50%       { box-shadow: 0 0 10px #22c55e, 0 0 4px #22c55e; }
}

/* ── Lobby Card: Premium Look ────────────────────────────────────────────────── */
.lobby-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lobby-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ── Chat Scroll-to-Bottom Button ────────────────────────────────────────────── */
.chat-scroll-btn {
  position: sticky;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(26,109,255,0.5);
  white-space: nowrap;
  z-index: 5;
  animation: chat-msg-in 0.2s ease;
  font-family: inherit;
}
.chat-scroll-btn:hover {
  background: var(--accent-hover);
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,109,255,0.6);
}

/* ── Super-Chat Pinned Message ───────────────────────────────────────────────── */
.superchat-pin {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(108,99,255,0.25), rgba(26,109,255,0.2));
  border: 1px solid rgba(108,99,255,0.5);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  animation: superchat-in 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.superchat-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: superchat-shimmer 2s ease infinite;
}
@keyframes superchat-in {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes superchat-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.superchat-fade { opacity: 0; transition: opacity 0.5s ease; }

.superchat-icon { font-size: 1.6rem; flex-shrink: 0; }
.superchat-sender {
  font-size: 0.82rem;
  font-weight: 700;
  color: #c4b5fd;
}
.superchat-gift {
  font-size: 0.75rem;
  color: var(--text2);
  margin-top: 2px;
}

/* ── Gift Highlight im Chat ──────────────────────────────────────────────────── */
.chat-msg.gift-highlight {
  background: rgba(26,109,255,0.08);
  border-radius: 8px;
  padding: 4px 8px;
  border-left: 2px solid var(--accent);
}
.chat-msg.gift-premium {
  background: rgba(108,99,255,0.12);
  border-left: 2px solid #a78bfa;
}

/* ── Gift Combo Badge ────────────────────────────────────────────────────────── */
.gift-combo {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 10px;
  vertical-align: middle;
  animation: combo-pop 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes combo-pop {
  from { transform: scale(0.5); }
  to   { transform: scale(1); }
}

/* ── Follow-Engagement Toast ─────────────────────────────────────────────────── */
.toast-follow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 280px;
}

/* ── Gift-Picker Tabs ─────────────────────────────────────────────────────────── */
.gift-picker-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.gift-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.gift-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.gift-tab:hover  { color: var(--text); }

.gift-picker-balances {
  display: flex;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--accent2);
  float: right;
}

/* ── Premium Gift Item ────────────────────────────────────────────────────────── */
.gift-premium-item {
  background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(26,109,255,0.05)) !important;
  border-color: rgba(108,99,255,0.3) !important;
}
.gift-premium-item:hover {
  background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(26,109,255,0.1)) !important;
  border-color: rgba(108,99,255,0.6) !important;
}

/* ── Currency Gift Item (Funken/Runen) ────────────────────────────────────────── */
.gift-currency-item {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(168,85,247,0.06)) !important;
  border-color: rgba(245,158,11,0.25) !important;
}
.gift-currency-item:hover {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(168,85,247,0.12)) !important;
  border-color: rgba(245,158,11,0.5) !important;
}

/* ── Battle Top-5 Leaderboard ────────────────────────────────────────────────── */
.battle-top5 {
  margin-top: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.battle-top5-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.battle-top5-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.battle-top5-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}
.battle-top5-medal { font-size: 0.85rem; flex-shrink: 0; width: 20px; }
.battle-top5-name  { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-top5-score { color: #f59e0b; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; }
.battle-top5-hint  {
  font-size: 0.65rem;
  color: var(--text2);
  margin-top: 6px;
  line-height: 1.4;
  opacity: 0.7;
}

/* ── Gift-Picker Premium Badge ───────────────────────────────────────────────── */
.gift-premium-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.8;
}
.gift-item {
  position: relative;
}

/* ── Keyboard Shortcut Keys ──────────────────────────────────────────────────── */
kbd {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--text);
  margin-right: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

/* ── Socialism Gift: Battle-Exklusiv ─────────────────────────────────────────── */
.gift-tab-battle {
  color: #a78bfa !important;
  border-bottom-color: #a78bfa !important;
}
.gift-tab-battle.active {
  color: #a78bfa !important;
  border-bottom-color: #a78bfa !important;
}
.gift-socialism-item {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(108,99,255,0.08)) !important;
  border-color: rgba(239,68,68,0.4) !important;
  flex-direction: column;
  height: auto !important;
  padding: 10px !important;
  gap: 4px !important;
}
.gift-socialism-item:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(108,99,255,0.15)) !important;
  border-color: rgba(239,68,68,0.7) !important;
}
.gift-socialism-desc {
  font-size: 0.62rem;
  color: var(--text2);
  text-align: center;
  line-height: 1.3;
  white-space: normal;
}

/* ── Battle Taunt Animation ──────────────────────────────────────────────────── */
@keyframes taunt-in {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes taunt-out {
  to   { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}
@keyframes taunt-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Gift Swiper ──────────────────────────────────────────────────────────────── */
.gift-swiper-wrap {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}
.gift-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(108,99,255,0.25);
  border: 1px solid rgba(108,99,255,0.5);
  color: #fff;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, opacity 0.2s;
  padding: 0;
}
.gift-nav-btn:hover { background: rgba(108,99,255,0.5); }
.gift-nav-prev { left: -4px; }
.gift-nav-next { right: -4px; }
.gift-swiper-track {
  display: flex;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.gift-swiper-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 0;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
/* Dots */
.gift-swiper-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 2px;
}
.gift-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.gift-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* ── Chat Drag Handle ─────────────────────────────────────────────────────────── */
.chat-overlay-header::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  margin: -4px auto 8px;
  flex-shrink: 0;
}
/* Chat: kompakte Nachrichten */
.chat-msg {
  padding: 2px 4px;
}
.chat-bubble {
  padding: 4px 8px;
  border-radius: 8px;
}
/* Chat: sanfte Swipe-Transition */
.chat-overlay {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ── Gift Confirm Sheet ───────────────────────────────────────────────────────── */
.gift-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10050;
  backdrop-filter: blur(2px);
}
.gift-confirm-box {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 440px;
  background: var(--bg2);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(108,99,255,0.35);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  z-index: 10051;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.gift-confirm-box.visible {
  transform: translateX(-50%) translateY(0);
}
.gift-confirm-icon  { font-size: 3.5rem; line-height: 1; margin-bottom: 8px; }
.gift-confirm-name  { font-size: 1rem; font-weight: 700; color: var(--text); }
.gift-confirm-price { font-size: 0.85rem; color: #a78bfa; font-weight: 700; margin: 4px 0; }
.gift-confirm-balance {
  font-size: 0.72rem;
  color: var(--text2);
  margin-bottom: 16px;
}
.gift-confirm-actions {
  display: flex;
  gap: 10px;
}
.gift-confirm-cancel {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text2);
  padding: 12px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.gift-confirm-cancel:hover { background: rgba(255,255,255,0.1); }
.gift-confirm-send {
  flex: 2;
  background: linear-gradient(135deg, var(--accent), #6c63ff);
  border: none;
  border-radius: 12px;
  color: #fff;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(26,109,255,0.4);
}
.gift-confirm-send:hover  { opacity: 0.9; }
.gift-confirm-send:active { transform: scale(0.97); }

/* ── Quick-Buy Sheet ──────────────────────────────────────────────────────────── */
.gift-quickbuy-box   { padding-bottom: calc(24px + env(safe-area-inset-bottom,0px)); }
.gift-quickbuy-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  text-align: left;
}
.gift-quickbuy-icon  { font-size: 2.2rem; flex-shrink: 0; }
.gift-quickbuy-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.gift-quickbuy-sub   { font-size: 0.72rem; color: var(--text2); margin-top: 2px; }
.gift-quickbuy-pkgs  {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.gift-quickbuy-pkg {
  flex: 1;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.gift-quickbuy-pkg:hover {
  border-color: var(--accent);
  background: rgba(26,109,255,0.08);
}
.qpkg-credits { font-size: 1rem; font-weight: 700; color: var(--text); }
.qpkg-unit    { font-size: 0.7rem; color: var(--text2); font-weight: 400; }
.qpkg-price   { font-size: 0.72rem; color: var(--text2); }
.qpkg-check   {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--success);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.gift-quickbuy-or {
  color: var(--text2);
  font-size: 0.72rem;
  margin: 8px 0;
}
.gift-quickbuy-wallet {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.gift-quickbuy-wallet:hover { background: rgba(26,109,255,0.08); }

/* ── Fullscreen / PiP Buttons ────────────────────────────────────────────────── */
#btn-fullscreen svg, #btn-pip svg {
  transition: transform 0.15s;
}
#btn-fullscreen:hover svg { transform: scale(1.15); }

/* ── Reconnect Overlay ────────────────────────────────────────────────────────── */
.reconnect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  animation: app-fade-in 0.3s ease;
}
.reconnect-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  max-width: 320px;
  width: 90%;
}
.reconnect-icon { margin-bottom: 16px; color: var(--accent); }
.reconnect-spin { animation: spin 1.2s linear infinite; }
 }
.reconnect-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.reconnect-countdown {
  font-size: 0.85rem;
  color: var(--text2);
  margin-bottom: 20px;
}
.reconnect-countdown strong { color: var(--accent); font-size: 1.1rem; }
.reconnect-actions { display: flex; gap: 10px; }
.reconnect-now {
  flex: 2;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.reconnect-cancel {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text2);
  padding: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

/* ── Gepinnte Chat-Nachricht ──────────────────────────────────────────────────── */
.chat-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(26,109,255,0.12), rgba(108,99,255,0.08));
  border-bottom: 1px solid rgba(26,109,255,0.25);
  padding: 6px 10px;
  flex-shrink: 0;
  animation: chat-msg-in 0.2s ease;
}
.chat-pinned-icon { font-size: 0.75rem; flex-shrink: 0; }
.chat-pinned-body {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  overflow: hidden;
}
.chat-pinned-from {
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.chat-pinned-text {
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-pinned-close {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.chat-pinned-close:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════════
   WaveBlue Chat 2030 — Premium Redesign
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Container: Deep Glassmorphism — nur wenn NICHT immersiv ─────────────────── */
:not(body.chat-immersive-mode) .chat-overlay {
  background: linear-gradient(160deg,
    rgba(10,12,20,0.92) 0%,
    rgba(13,15,24,0.96) 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 8px 32px rgba(0,0,0,0.6),
    0 0 60px rgba(26,109,255,0.06) !important;
  position: relative;
  overflow: hidden;
}

/* Animierter Gradient-Rand */
:not(body.chat-immersive-mode) .chat-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(26,109,255,0.4),
    rgba(108,99,255,0.2),
    rgba(255,255,255,0.05),
    rgba(26,109,255,0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ── Header: Premium mit Live-Puls ───────────────────────────────────────────── */
.chat-overlay-header {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 10px 14px !important;
  position: relative;
  z-index: 1;
}

.chat-header-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9) !important;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Live-Puls vor dem Titel */
.chat-header-title::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: live-ping 1.8s ease infinite;
  flex-shrink: 0;
}
@keyframes live-ping {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}

/* ── Messages: Kompakt + Avatar + Slide-in ───────────────────────────────────── */
.chat-messages {
  padding: 10px 10px 6px !important;
  gap: 3px !important;
  position: relative;
  z-index: 1;
}

/* Scrollbar: ultra-slim */
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(26,109,255,0.3);
  border-radius: 2px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(26,109,255,0.6); }
.chat-messages { scrollbar-width: thin; scrollbar-color: rgba(26,109,255,0.3) transparent; }

/* Message-Basis: Avatar + Inhalt inline */
.chat-msg {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end;
  gap: 6px;
  max-width: 100% !important;
  padding: 0 !important;
  animation: msg-appear 0.2s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes msg-appear {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avatar-Kreis */
.chat-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  margin-bottom: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Self: Avatar rechts */
.chat-msg.self { flex-direction: row-reverse !important; align-self: flex-end; }

/* Bubble */
.chat-bubble {
  padding: 5px 10px !important;
  max-width: calc(100% - 36px);
  border-radius: 12px !important;
  position: relative;
  transition: filter 0.15s;
}
.chat-msg:hover .chat-bubble { filter: brightness(1.1); }

/* Andere: links */
.chat-msg:not(.self):not(.system) .chat-bubble {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 4px 12px 12px 12px !important;
}

/* Self: rechts mit Akzent */
.chat-msg.self .chat-bubble {
  background: linear-gradient(135deg,
    rgba(26,109,255,0.22) 0%,
    rgba(108,99,255,0.18) 100%) !important;
  border: 1px solid rgba(26,109,255,0.2) !important;
  border-radius: 12px 4px 12px 12px !important;
}

/* ── Message Header: Name + Zeit ────────────────────────────────────────────── */
.chat-msg-header {
  gap: 6px !important;
  margin-bottom: 1px !important;
}
.chat-msg-name {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}
.chat-msg-time {
  font-size: 0.62rem !important;
  opacity: 0;
  transition: opacity 0.2s;
}
.chat-msg:hover .chat-msg-time { opacity: 0.5; }

/* Role Gradient-Namen */
.chat-msg-name.host         { color: #a78bfa !important; text-shadow: 0 0 12px rgba(167,139,250,0.4); }
.chat-msg-name.admin,
.chat-msg-name.superadmin   { color: #fbbf24 !important; text-shadow: 0 0 12px rgba(251,191,36,0.35); }
.chat-msg-name.moderator    { color: #38bdf8 !important; }
.chat-msg-name.premium_moderator { color: #c084fc !important; }
.chat-msg-name.beta         { color: #34d399 !important; }
.chat-msg-name.guest        { color: #94a3b8 !important; }
.chat-msg-name.verified     { color: #1a6dff !important; }

/* ── Message Text ─────────────────────────────────────────────────────────────── */
.chat-msg-text {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: rgba(232,232,240,0.9) !important;
  word-break: break-word;
}

/* ── System-Nachrichten: zentriert, schlank ───────────────────────────────────── */
.chat-msg.system {
  align-self: center !important;
  flex-direction: column !important;
  align-items: center;
  max-width: 90% !important;
}
.chat-msg.system .chat-msg-text {
  font-size: 0.72rem !important;
  color: rgba(144,144,168,0.7) !important;
  font-style: italic;
  background: none !important;
  border: none !important;
  text-align: center;
  padding: 2px 0 !important;
}
.chat-msg.gift-highlight .chat-bubble,
.chat-msg.gift-premium .chat-bubble {
  border-radius: 10px !important;
  padding: 4px 10px !important;
}

/* ── Input Area: 2030 Premium ─────────────────────────────────────────────────── */
.chat-input-area {
  padding: 8px 10px 10px !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  position: relative;
  z-index: 1;
}

.chat-input-area input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
  color: rgba(232,232,240,0.95) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  flex: 1 !important;
}
.chat-input-area input:focus {
  border-color: rgba(26,109,255,0.5) !important;
  background: rgba(255,255,255,0.07) !important;
  box-shadow: 0 0 0 3px rgba(26,109,255,0.1), 0 0 20px rgba(26,109,255,0.08) !important;
  outline: none !important;
}
.chat-input-area input::placeholder { color: rgba(144,144,168,0.5) !important; }

/* Send-Button: Gradient */
.btn-send {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--accent), #6c63ff) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s !important;
  box-shadow: 0 2px 10px rgba(26,109,255,0.35) !important;
}
.btn-send:hover  { transform: scale(1.08); box-shadow: 0 4px 16px rgba(26,109,255,0.5) !important; }
.btn-send:active { transform: scale(0.95); }

/* Gift + Opacity Button */
.btn-gift-picker, .btn-opacity-toggle {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 50% !important;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem !important;
  transition: background 0.15s, transform 0.1s !important;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-gift-picker:hover, .btn-opacity-toggle:hover {
  background: rgba(255,255,255,0.1) !important;
  transform: scale(1.1);
}

/* ── Typing Indicator ─────────────────────────────────────────────────────────── */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 2px;
  font-size: 0.7rem;
  color: rgba(144,144,168,0.6);
  font-style: italic;
  min-height: 18px;
}
.typing-dots {
  display: flex;
  gap: 3px;
}
.typing-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(26,109,255,0.6);
  animation: typing-bounce 1s ease infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Desktop Sidebar: Anpassungen */
@media (min-width: 769px) {
  body.watch-page .chat-overlay {
    border-radius: 0 !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.4) !important;
  }
  body.watch-page .chat-overlay::before {
    border-radius: 0;
    background: linear-gradient(180deg,
      rgba(26,109,255,0.3),
      transparent 40%,
      transparent 60%,
      rgba(108,99,255,0.2));
  }
}

/* ── Animated Stats Counter ──────────────────────────────────────────────────── */
#stat-credits, #stat-likes, #stat-viewers {
  transition: transform 0.15s, color 0.3s;
  display: inline-block;
}
.stat-up   { animation: stat-pop-up   0.5s cubic-bezier(0.16,1,0.3,1); color: #22c55e !important; }
.stat-down { animation: stat-pop-down 0.5s cubic-bezier(0.16,1,0.3,1); color: #ef4444 !important; }
@keyframes stat-pop-up   { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
@keyframes stat-pop-down { 0%{transform:scale(1)} 40%{transform:scale(0.75)} 100%{transform:scale(1)} }

/* ── @Mention Highlight ──────────────────────────────────────────────────────── */
.chat-mention {
  background: rgba(26,109,255,0.2);
  color: #60a5fa;
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 700;
}
.chat-msg-mention .chat-bubble {
  background: linear-gradient(135deg, rgba(26,109,255,0.18), rgba(108,99,255,0.12)) !important;
  border-color: rgba(26,109,255,0.4) !important;
  box-shadow: 0 0 0 1px rgba(26,109,255,0.2), 0 0 12px rgba(26,109,255,0.15) !important;
  animation: mention-glow 0.5s ease !important;
}
@keyframes mention-glow {
  0%   { box-shadow: 0 0 0 4px rgba(26,109,255,0.5); }
  100% { box-shadow: 0 0 0 1px rgba(26,109,255,0.2); }
}

/* ── Message Reactions ───────────────────────────────────────────────────────── */
.reaction-trigger {
  position: absolute;
  top: -10px; right: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  animation: reaction-appear 0.15s ease forwards;
  z-index: 5;
}
@keyframes reaction-appear { to { opacity: 1; } }
.reaction-picker {
  position: absolute;
  top: -44px; left: 0;
  background: rgba(15,15,22,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  z-index: 100;
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity 0.15s, transform 0.15s;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.reaction-picker.visible { opacity: 1; transform: translateY(0) scale(1); }
.reaction-emoji-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; padding: 2px;
  transition: transform 0.1s;
  line-height: 1;
}
.reaction-emoji-btn:hover { transform: scale(1.4); }
.reaction-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  padding-left: 2px;
}
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  animation: reaction-pop 0.2s cubic-bezier(0.16,1,0.3,1);
}
.reaction-pill:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); }
.reaction-count { color: var(--text2); font-size: 0.68rem; }
@keyframes reaction-pop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }

/* ── Battle Video Glow ───────────────────────────────────────────────────────── */
.battle-glow-win::after,
.battle-glow-lose::after,
.battle-glow-tie::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}
.battle-glow-win::after  { box-shadow: inset 0 0 40px rgba(34,197,94,0.2),  0 0 0 2px rgba(34,197,94,0.4);  animation: battle-pulse 2s ease infinite; }
.battle-glow-lose::after { box-shadow: inset 0 0 40px rgba(239,68,68,0.2),  0 0 0 2px rgba(239,68,68,0.4);  animation: battle-pulse 2s ease infinite; }
.battle-glow-tie::after  { box-shadow: inset 0 0 40px rgba(251,191,36,0.15), 0 0 0 2px rgba(251,191,36,0.3); animation: battle-pulse 2.5s ease infinite; }
@keyframes battle-pulse  { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ── Cursor Sparkle ──────────────────────────────────────────────────────────── */
.cursor-sparkle {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,109,255,0.9), rgba(108,99,255,0.5));
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  animation: sparkle-fade 0.6s ease forwards;
}
@keyframes sparkle-fade {
  0%   { opacity: 0.8; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(2.5); }
}

/* ── Message Reply / Quote ───────────────────────────────────────────────────── */
.chat-ctx-menu {
  position: fixed;
  background: rgba(13,13,20,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 4px;
  z-index: 10100;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  min-width: 150px;
  animation: app-fade-in 0.15s ease;
}
.chat-ctx-menu button {
  display: block; width: 100%;
  background: none; border: none;
  color: var(--text); font-size: 0.82rem;
  padding: 8px 12px; text-align: left;
  cursor: pointer; border-radius: 6px;
  font-family: inherit;
  transition: background 0.1s;
}
.chat-ctx-menu button:hover { background: rgba(255,255,255,0.08); }

.chat-quote-badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(26,109,255,0.1);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 4px 8px;
  font-size: 0.75rem;
  margin-bottom: 4px;
  animation: chat-msg-in 0.2s ease;
}
.cqb-from { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.cqb-text { color: var(--text2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cqb-close { background: none; border: none; color: var(--text2); cursor: pointer; padding: 0 2px; font-size: 0.75rem; flex-shrink: 0; }

.chat-quote-inline {
  background: rgba(255,255,255,0.05);
  border-left: 2px solid rgba(26,109,255,0.5);
  border-radius: 0 4px 4px 0;
  padding: 3px 7px;
  font-size: 0.7rem;
  color: var(--text2);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-quote-inline strong { color: rgba(96,165,250,0.9); }

/* ── Emoji Shortcode Hint ────────────────────────────────────────────────────── */
.emoji-hint {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(13,13,20,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 4px;
  display: flex; gap: 4px;
  z-index: 200;
  backdrop-filter: blur(12px);
  animation: app-fade-in 0.15s ease;
}
.emoji-hint-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; padding: 4px 6px;
  border-radius: 6px; transition: background 0.1s;
}
.emoji-hint-btn:hover { background: rgba(255,255,255,0.1); }

/* ── VIP Chat Names ───────────────────────────────────────────────────────────── */
.chat-msg-name.vip {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.4));
  font-weight: 800 !important;
}

/* ── Floating Emoji Animation ────────────────────────────────────────────────── */
@keyframes emoji-float-up {
  0%   { opacity: 1;   transform: translateY(0)    scale(1);    }
  50%  { opacity: 0.9; transform: translateY(-60px) scale(1.2); }
  100% { opacity: 0;   transform: translateY(-120px) scale(0.8); }
}

/* ── Ambient Particles ───────────────────────────────────────────────────────── */
.ambient-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,109,255,0.6), rgba(108,99,255,0.3));
  pointer-events: none;
  z-index: 1;
  animation: particle-rise linear forwards;
}
@keyframes particle-rise {
  0%   { transform: translateY(0) translateX(0); opacity: var(--p-opacity, 0.3); }
  50%  { transform: translateY(-40vh) translateX(calc((var(--p-drift,1) - 0.5) * 40px)); }
  100% { transform: translateY(-80vh) translateX(calc((var(--p-drift,1) - 0.5) * 80px)); opacity: 0; }
}

/* ── Command Palette ─────────────────────────────────────────────────────────── */
.cmd-palette {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: max(80px, 15vh);
  background: rgba(0,0,0,0.6);
  z-index: 99990;
  backdrop-filter: blur(8px);
  animation: app-fade-in 0.15s ease;
}
.cmd-palette-input-wrap {
  width: 100%;
  max-width: 520px;
  background: rgba(15,16,26,0.98);
  border: 1px solid rgba(26,109,255,0.35);
  border-radius: 14px 14px 0 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.6);
}
.cmd-palette-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  caret-color: var(--accent);
}
.cmd-palette-input::placeholder { color: rgba(144,144,168,0.5); }
.cmd-palette-list {
  width: 100%;
  max-width: 520px;
  background: rgba(13,14,22,0.98);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cmd-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  padding: 11px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cmd-palette-item:hover { background: rgba(26,109,255,0.1); }
.cmd-palette-item:last-child { border-bottom: none; }
.cmd-icon  { font-size: 1rem; width: 24px; text-align: center; flex-shrink: 0; }
.cmd-text  { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); font-family: monospace; min-width: 100px; }
.cmd-desc  { font-size: 0.78rem; color: var(--text2); flex: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   WaveBlue 2045 — OVERKILL CSS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Danmaku Messages ─────────────────────────────────────────────────────────── */
.danmaku-msg {
  position: fixed;
  left: 100vw;           /* startet rechts außerhalb */
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  letter-spacing: 0.02em;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(26,109,255,0.4);
  animation-name: danmaku-fly;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-duration: var(--danmaku-duration, 8s);
  will-change: transform;
  padding: 2px 6px;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
}
@keyframes danmaku-fly {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-200vw - 100%)); }
}
/* Danmaku-Button aktiv */
#btn-danmaku.active {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 6px rgba(26,109,255,0.7));
}

/* ── Holographic Scanlines ───────────────────────────────────────────────────── */
.holo-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(var(--holo-color, 168,85,247), 0.03) 3px,
    rgba(var(--holo-color, 168,85,247), 0.03) 4px
  );
  animation: holo-flicker 0.1s steps(2) 10;
  border-radius: inherit;
}
@keyframes holo-flicker {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Chromatic Aberration beim Holographic */
.cameras-grid {
  transition: filter 0.15s, transform 0.15s;
}

/* ── Engagement Wave ─────────────────────────────────────────────────────────── */
#engagement-wave {
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* ── Mood Ambiance Transition ────────────────────────────────────────────────── */
#chat-overlay {
  transition: box-shadow 1.2s ease !important;
}

/* ── Spatial Audio Indicator ─────────────────────────────────────────────────── */
.voice-pip[data-spatial="left"]  .voice-pip-avatar { box-shadow: -4px 0 12px rgba(26,109,255,0.6); }
.voice-pip[data-spatial="right"] .voice-pip-avatar { box-shadow:  4px 0 12px rgba(26,109,255,0.6); }
.voice-pip[data-spatial="center"].voice-pip-avatar  { box-shadow: 0 0 12px rgba(26,109,255,0.4); }

/* ════════════════════════════════════════════════════════════════════════════
   WaveBlue UNIVERSE CSS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Galaxy Stream Switcher ───────────────────────────────────────────────────── */
.galaxy-field {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 10px;
}
.galaxy-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.galaxy-stars {
  position: absolute;
  inset: 0;
}
.galaxy-star {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: star-appear 0.5s cubic-bezier(0.16,1,0.3,1) both;
  transition: transform 0.2s, box-shadow 0.2s;
}
@keyframes star-appear {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.galaxy-star-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--star-color, #6c63ff) 0%, transparent 70%);
  opacity: 0.35;
  animation: star-pulse 2s ease-in-out infinite alternate;
}
@keyframes star-pulse {
  from { opacity: 0.2; transform: scale(0.9); }
  to   { opacity: 0.5; transform: scale(1.2); }
}
.galaxy-star:hover { transform: translate(-50%,-50%) scale(1.15); z-index: 10; }
.galaxy-star:hover .galaxy-star-glow { opacity: 0.7; }
.galaxy-star-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.galaxy-star-init {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--star-color, #6c63ff);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
}
.galaxy-star-label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,12,20,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.65rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  backdrop-filter: blur(8px);
}
.galaxy-star:hover .galaxy-star-label { opacity: 1; }
.gslab-name { color: #fff; font-weight: 700; display: block; }
.gslab-viewers { color: var(--text2); font-size: 0.62rem; }
.galaxy-star--current .galaxy-star-init,
.galaxy-star--current .galaxy-star-img { border: 2px solid var(--accent); }
.galaxy-star-live-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: live-ping 1.5s ease infinite;
}

/* ── Collective Heartbeat Ring ───────────────────────────────────────────────── */
#btn-heartbeat svg { transition: transform 0.1s, filter 0.1s; }
#btn-heartbeat:active svg { transform: scale(1.4); filter: drop-shadow(0 0 8px rgba(236,72,153,0.8)); }

.heartbeat-ring {
  position: absolute;
  width: 60px; height: 60px;
  margin-left: -30px; margin-top: -30px;
  border-radius: 50%;
  border: 2px solid rgba(236,72,153,0.7);
  pointer-events: none;
  z-index: 20;
  animation: heartbeat-expand 0.8s ease-out forwards;
}
@keyframes heartbeat-expand {
  0%   { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(6);   opacity: 0; }
}

/* ── Dimensional Shift ───────────────────────────────────────────────────────── */
/* handled via JS filter — no extra CSS needed */

/* ── Achievement Toast ───────────────────────────────────────────────────────── */
.achievement-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(108,99,255,0.12));
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 0.82rem;
  color: var(--text);
  z-index: 9900;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(251,191,36,0.2);
  animation: achievement-in 0.5s cubic-bezier(0.16,1,0.3,1);
  white-space: nowrap;
}
.achievement-toast strong { color: #fbbf24; }
.ach-glow { color: #fbbf24; margin-right: 6px; animation: star-pulse 1s ease infinite alternate; }
.ach-out  { animation: toast-slide-out 0.5s ease forwards; }
@keyframes achievement-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}

/* ════════════════════════════════════════════════════════════════════════════
   WaveBlue CONSUMER CSS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Profile Hover Card ──────────────────────────────────────────────────────── */
.profile-hover-card {
  position: fixed;
  width: 200px;
  background: rgba(12,14,24,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 10200;
  backdrop-filter: blur(20px);
  overflow: hidden;
  animation: app-fade-in 0.2s ease;
}
.profile-hover-card.stream-profile-sheet {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(420px, 34vw);
  border-radius: 18px 0 0 18px;
  border-right: none;
  overflow-y: auto;
}
.profile-hover-card.stream-profile-sheet.loading {
  min-height: 220px;
}
.phc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.phc-clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 0 10px;
}
.phc-clip {
  aspect-ratio: 9 / 13;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  position: relative;
}
.phc-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phc-clip span {
  position: absolute;
  left: 5px;
  bottom: 4px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
@media (max-width: 720px) {
  .profile-hover-card.stream-profile-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: 68vh;
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
  }
}
.profile-hover-card.loading {
  display: flex; align-items: center; justify-content: center;
  height: 80px;
}
.phc-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(26,109,255,0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.phc-banner {
  height: 48px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 12px;
}
.phc-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(12,14,24,0.98);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 1.1rem;
  position: relative;
  bottom: -24px;
  overflow: hidden;
  flex-shrink: 0;
}
.phc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phc-vip-badge {
  position: absolute;
  top: 6px; right: 10px;
  font-size: 1.1rem;
}
.phc-body { padding: 28px 12px 12px; }
.phc-name     { font-size: 0.92rem; font-weight: 800; color: var(--text); }
.phc-username { font-size: 0.72rem; color: var(--text2); margin-bottom: 6px; }
.phc-bio      { font-size: 0.75rem; color: var(--text2); margin-bottom: 8px; line-height: 1.4; }
.phc-stats {
  display: flex; gap: 12px; margin-bottom: 10px;
  font-size: 0.72rem; color: var(--text2);
}
.phc-stats strong { color: var(--text); font-weight: 700; }
.phc-gifts { color: #a78bfa; }
.phc-actions { display: flex; gap: 6px; }
.phc-follow {
  flex: 2;
  background: var(--accent); color: #fff;
  border: none; border-radius: 8px;
  padding: 6px 8px; font-size: 0.75rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.phc-follow.following { background: rgba(255,255,255,0.08); color: var(--text2); }
.phc-gift, .phc-mention {
  flex: 1;
  background: rgba(255,255,255,0.06); color: var(--text2);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  padding: 6px 4px; font-size: 0.72rem;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
  text-align: center;
}
.phc-gift:hover, .phc-mention:hover { background: rgba(255,255,255,0.12); }

/* ── Profile Hover Card: Gaming Section (v66) ─────────────────────────────── */
.phc-gaming {
  margin: 8px 0 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.phc-gaming-header {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.phc-ingame {
  font-size: 0.72rem;
  color: #4ade80;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phc-ingame strong { color: #86efac; }
.phc-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}
.phc-platform-badge {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
  cursor: default;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phc-rank-badge {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(200,155,60,0.3);
  background: rgba(200,155,60,0.1);
  color: #c89b3c;
  white-space: nowrap;
}
.phc-top-games {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.phc-game-item {
  font-size: 0.69rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.phc-game-item em {
  margin-left: auto;
  color: var(--accent);
  font-style: normal;
  font-size: 0.66rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GAMING IDENTITY MATRIX — 2099 Style (v67) | v68 CPU-Optimierung: filter:drop-shadow→text-shadow, bg-attachment:fixed→scroll, backdrop-filter reduziert
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.gsm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,3,12,0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  z-index: 15000;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.gsm-panel {
  position: relative;
  width: 100%; max-width: 660px;
  max-height: 92vh;
  background: rgba(4,8,20,0.99);
  border: 1px solid rgba(0,180,255,0.18);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,180,255,0.06),
              0 0 40px rgba(0,150,255,0.08),
              0 32px 80px rgba(0,0,0,0.9);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Scanlines ────────────────────────────────────────────────────────────── */
.gsm-scanlines {
  pointer-events: none;
  position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  border-radius: inherit;
}

/* ── Corner brackets ──────────────────────────────────────────────────────── */
.gsm-corner {
  position: absolute; width: 18px; height: 18px;
  z-index: 2; pointer-events: none;
}
.gsm-tl { top: 8px;  left: 8px;  border-top: 2px solid rgba(0,200,255,0.5); border-left:  2px solid rgba(0,200,255,0.5); border-radius: 3px 0 0 0; }
.gsm-tr { top: 8px;  right: 8px; border-top: 2px solid rgba(0,200,255,0.5); border-right: 2px solid rgba(0,200,255,0.5); border-radius: 0 3px 0 0; }
.gsm-bl { bottom: 8px; left: 8px;  border-bottom: 2px solid rgba(0,200,255,0.3); border-left:  2px solid rgba(0,200,255,0.3); border-radius: 0 0 0 3px; }
.gsm-br { bottom: 8px; right: 8px; border-bottom: 2px solid rgba(0,200,255,0.3); border-right: 2px solid rgba(0,200,255,0.3); border-radius: 0 0 3px 0; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.gsm-header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(0,180,255,0.12);
  background: linear-gradient(180deg, rgba(0,30,60,0.6) 0%, transparent 100%);
  flex-shrink: 0;
}
.gsm-header-left { display: flex; align-items: center; gap: 12px; }
.gsm-logo {
  font-size: 1.6rem;
  background: linear-gradient(135deg, #00cfff, #6c63ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,200,255,0.5));
}
.gsm-title {
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(90deg, #00cfff 0%, #a78bfa 60%, #60a5fa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(0,180,255,0.4));
}
.gsm-subtitle {
  font-size: 0.62rem; color: rgba(100,160,220,0.7);
  letter-spacing: 0.06em; margin-top: 1px; font-family: monospace;
}
.gsm-close {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(150,200,255,0.7);
  cursor: pointer; font-size: 0.9rem;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; z-index: 3;
}
.gsm-close:hover { background: rgba(255,80,80,0.15); border-color: rgba(255,80,80,0.3); color: #f87171; }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.gsm-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 24px; gap: 20px; z-index: 3; position: relative;
}
.gsm-pulse-ring {
  width: 48px; height: 48px;
  border: 2px solid rgba(0,200,255,0.15);
  border-top-color: #00cfff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 16px rgba(0,200,255,0.2);
}
.gsm-loading-text {
  font-size: 0.65rem; letter-spacing: 0.2em;
  color: rgba(0,200,255,0.6); font-family: monospace;
  animation: gsm-blink 1.2s ease-in-out infinite;
}
@keyframes gsm-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Body ─────────────────────────────────────────────────────────────────── */
.gsm-body {
  overflow-y: auto; flex: 1;
  padding: 16px 20px 20px;
  position: relative; z-index: 3;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,180,255,0.2) transparent;
}
.gsm-body::-webkit-scrollbar { width: 4px; }
.gsm-body::-webkit-scrollbar-thumb { background: rgba(0,180,255,0.2); border-radius: 2px; }

/* ── Platform Grid ────────────────────────────────────────────────────────── */
.gsm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) { .gsm-grid { grid-template-columns: 1fr; } }

/* ── Platform Card ────────────────────────────────────────────────────────── */
.gsm-card {
  background: rgba(8,14,30,0.8);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gsm-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gsm-color, #1a6dff);
  opacity: 0.6;
}
.gsm-card.is-linked {
  border-color: rgba(var(--gsm-rgb, 26,109,255), 0.25);
  box-shadow: 0 0 16px rgba(var(--gsm-rgb, 26,109,255), 0.06);
}
.gsm-card.is-linked::before { opacity: 1; }

/* Card header row */
.gsm-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.gsm-card-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.gsm-card-meta { flex: 1; min-width: 0; }
.gsm-card-name {
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gsm-color, #60a5fa);
}
.gsm-card-user {
  font-size: 0.66rem; color: rgba(150,200,255,0.6);
  font-family: monospace; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Status pill */
.gsm-status {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-family: monospace;
  padding: 2px 7px; border-radius: 20px;
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.gsm-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
}
.gsm-status.linked {
  background: rgba(74,222,128,0.12); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.25);
}
.gsm-status.linked .gsm-status-dot {
  background: #4ade80;
  box-shadow: 0 0 5px #4ade80;
  animation: gsm-pulse-dot 2s ease-in-out infinite;
}
.gsm-status.offline {
  background: rgba(100,120,160,0.08); color: rgba(100,140,200,0.5);
  border: 1px solid rgba(100,120,160,0.12);
}
.gsm-status.offline .gsm-status-dot { background: rgba(100,140,200,0.3); }
@keyframes gsm-pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Input field */
.gsm-input {
  width: 100%; box-sizing: border-box;
  background: rgba(0,20,50,0.6);
  border: 1px solid rgba(0,160,255,0.15);
  border-radius: 8px;
  color: #a0d4ff;
  font-size: 0.74rem; font-family: 'Courier New', monospace;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-top: 4px;
}
.gsm-input::placeholder { color: rgba(60,120,200,0.4); }
.gsm-input:focus {
  border-color: rgba(0,200,255,0.5);
  box-shadow: 0 0 0 2px rgba(0,200,255,0.08), inset 0 0 12px rgba(0,180,255,0.04);
}

/* Hint text */
.gsm-hint {
  font-size: 0.62rem; color: rgba(80,130,200,0.55);
  font-family: monospace; margin-top: 5px; line-height: 1.4;
}

/* Action buttons row */
.gsm-actions { display: flex; gap: 5px; margin-top: 10px; }
.gsm-btn {
  border: 1px solid transparent;
  border-radius: 7px; cursor: pointer;
  font-family: monospace; font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.05em;
  padding: 6px 10px; transition: all 0.15s;
  display: flex; align-items: center; gap: 4px;
}
.gsm-btn:disabled { opacity: 0.4; cursor: default; }
.gsm-btn-link {
  background: rgba(26,109,255,0.2); color: #60a5fa;
  border-color: rgba(26,109,255,0.35); flex: 1;
  justify-content: center;
}
.gsm-btn-link:hover { background: rgba(26,109,255,0.35); }
.gsm-btn-save {
  background: rgba(34,197,94,0.15); color: #4ade80;
  border-color: rgba(34,197,94,0.3); flex: 1;
  justify-content: center;
}
.gsm-btn-save:hover { background: rgba(34,197,94,0.3); }
.gsm-btn-sync {
  background: rgba(0,180,255,0.1); color: rgba(0,200,255,0.8);
  border-color: rgba(0,180,255,0.2);
  padding: 6px 8px;
}
.gsm-btn-sync:hover { background: rgba(0,180,255,0.2); }
.gsm-btn-sync.spinning svg,
.gsm-btn-sync.spinning { animation: spin 0.8s linear infinite; }
.gsm-btn-unlink {
  background: rgba(239,68,68,0.08); color: rgba(248,113,113,0.8);
  border-color: rgba(239,68,68,0.18); padding: 6px 8px;
}
.gsm-btn-unlink:hover { background: rgba(239,68,68,0.2); }
.gsm-btn-cancel {
  background: rgba(255,255,255,0.04); color: rgba(150,170,210,0.7);
  border-color: rgba(255,255,255,0.08); padding: 6px 8px;
}

/* Footer */
.gsm-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(0,180,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,10,25,0.6);
  position: relative; z-index: 3; flex-shrink: 0;
}
.gsm-footer-info {
  font-size: 0.62rem; color: rgba(60,120,200,0.5);
  font-family: monospace; letter-spacing: 0.05em;
}
.gsm-sync-all {
  background: linear-gradient(135deg, rgba(0,150,255,0.2), rgba(108,99,255,0.2));
  border: 1px solid rgba(0,180,255,0.25);
  border-radius: 8px; color: #60cfff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  font-family: monospace; cursor: pointer; padding: 7px 16px;
  transition: all 0.2s;
  text-transform: uppercase;
}
.gsm-sync-all:hover {
  background: linear-gradient(135deg, rgba(0,150,255,0.35), rgba(108,99,255,0.35));
  box-shadow: 0 0 16px rgba(0,180,255,0.15);
}

/* ── Compact Gaming panel (embedded in app.html settings modal) ───────────── */
.gsm-inline { display: flex; flex-direction: column; gap: 8px; }
.gsm-inline .gsm-card { border-radius: 10px; padding: 12px; }
.gsm-inline .gsm-grid { grid-template-columns: 1fr; gap: 8px; }

/* Legacy aliases (keep backwards compat) */
.gaming-modal-backdrop { display: none; }
.gm-btn { display: none; }

/* ── Viewer Journey Modal ────────────────────────────────────────────────────── */
.viewer-journey-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10100;
}
.vjm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}
.vjm-card {
  position: relative;
  background: linear-gradient(160deg, rgba(12,14,24,0.98), rgba(16,18,30,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  animation: app-fade-in 0.3s cubic-bezier(0.16,1,0.3,1);
}
.vjm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.vjm-title  { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.vjm-close  { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 1rem; padding: 0; }
.vjm-tier   {
  text-align: center; font-size: 1.1rem; font-weight: 700;
  padding: 10px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(108,99,255,0.08));
  border: 1px solid rgba(251,191,36,0.2); border-radius: 12px;
}
.vjm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.vjm-stat  {
  text-align: center;
  background: rgba(255,255,255,0.03);
  border-radius: 10px; padding: 10px 4px;
  border: 1px solid rgba(255,255,255,0.05);
}
.vjm-val  { font-size: 1.2rem; font-weight: 800; color: var(--accent); line-height: 1; }
.vjm-unit { font-size: 0.6rem; color: var(--text2); font-weight: 400; }
.vjm-lab  { font-size: 0.62rem; color: var(--text2); margin-top: 3px; }
.vjm-achievements { display: flex; flex-wrap: wrap; gap: 6px; }
.vjm-ach  {
  font-size: 0.72rem;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 8px; padding: 3px 8px;
  color: #fbbf24;
}

/* ── Social Activity Ticker ──────────────────────────────────────────────────── */
.social-ticker {
  position: absolute;
  bottom: 56px; left: 12px;
  background: rgba(13,13,20,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.74rem;
  color: var(--text2);
  pointer-events: none;
  z-index: 22;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-ticker strong { color: var(--text); }
.ticker-in  { animation: ticker-slide-in 0.4s ease; }
.ticker-out { animation: toast-slide-out 0.5s ease forwards; }
@keyframes ticker-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Stream Moments ──────────────────────────────────────────────────────────── */
.moment-flash {
  position: absolute; inset: 0;
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  animation: moment-capture 0.6s ease forwards;
}
@keyframes moment-capture {
  0%   { opacity: 1; transform: scale(1); }
  30%  { opacity: 0.6; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════════
   WaveBlue ADDICTION ENGINE CSS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Loyalty Streak Card ─────────────────────────────────────────────────────── */
.streak-card {
  position: fixed;
  top: 80px; right: 16px;
  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(251,191,36,0.1));
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  z-index: 9850;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(239,68,68,0.2);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  min-width: 140px;
}
.streak-card.visible { transform: translateX(0); }
.streak-card.out     { transform: translateX(120%); }
.streak-fire  { font-size: 2rem; line-height: 1; }
.streak-count { font-size: 2.5rem; font-weight: 900; color: #fbbf24; line-height: 1; }
.streak-label { font-size: 0.75rem; font-weight: 700; color: var(--text); }
.streak-sub   { font-size: 0.65rem; color: var(--text2); margin-top: 4px; }

/* ── Hype Train Bar ──────────────────────────────────────────────────────────── */
.hype-bar {
  position: absolute;
  top: 56px; left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,13,20,0.85);
  border: 1px solid rgba(255,100,0,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  backdrop-filter: blur(10px);
}
.hype-bar-label { font-size: 0.72rem; font-weight: 700; color: #fb923c; }
.hype-bar-track {
  width: 100px; height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.hype-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #fbbf24, #f97316);
  background-size: 200% 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  animation: hype-shimmer 1.5s linear infinite;
}
@keyframes hype-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Hype Train Banner ───────────────────────────────────────────────────────── */
.hype-train-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.5);
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px #f97316, 0 2px 8px rgba(0,0,0,0.9);
  z-index: 9900;
  pointer-events: none;
  animation: hype-train-appear 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes hype-train-appear {
  to { transform: translate(-50%,-50%) scale(1); }
}
.hype-train-banner.out {
  animation: toast-slide-out 0.5s ease forwards;
}

/* ── Watch Party Cursors ─────────────────────────────────────────────────────── */
.party-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  transform: translate(-50%, -50%);
  transition: left 0.1s linear, top 0.1s linear;
}
.party-cursor-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--party-color, #1a6dff);
  box-shadow: 0 0 8px var(--party-color, #1a6dff);
}
.party-cursor-name {
  position: absolute;
  top: 14px; left: 8px;
  background: var(--party-color, #1a6dff);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Live Gift Leaderboard ───────────────────────────────────────────────────── */
.live-leaderboard {
  position: absolute;
  top: 58px; right: 8px;
  width: 160px;
  background: rgba(10,12,20,0.88);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 8px;
  z-index: 22;
  backdrop-filter: blur(12px);
  display: none;
}
.llb-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 6px;
  text-align: center;
  letter-spacing: 0.05em;
}
.llb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.llb-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; }
.llb-medal { font-size: 0.75rem; flex-shrink: 0; width: 16px; }
.llb-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.llb-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.llb-pts  { color: #a78bfa; font-weight: 700; flex-shrink: 0; font-size: 0.65rem; }

/* ════════════════════════════════════════════════════════════════════════════
   WaveBlue 2055 — IMMERSIVE CHAT + OVERKILL BAR
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Chat: watch-page = Immersiv, kein Panel ─────────────────────────────────── */
/* ── Immersiver Chat (mobile + alle nicht-Desktop) ───────────────────────────── */
/* ── Chat 2099: Immersiv, unteres Drittel, kein Panel ────────────────────── */
body.chat-immersive-mode .chat-overlay {
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  max-height: 33vh !important;     /* Exakt 1/3 des Screens */
  width: auto !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 24 !important;
  pointer-events: none !important;
  transition: none !important;
  padding-bottom: 110px !important;  /* Platz für Cam-Bar + 1cm höher (~38px) */
}
body.chat-immersive-mode .chat-overlay::before { display: none !important; }
body.chat-immersive-mode .chat-overlay-header  { display: none !important; }
/* Input-Area im immersiven Modus: nur auf Mobile via chat-stub */
@media (max-width: 768px) {
  body.chat-immersive-mode .chat-input-area { display: none !important; }
}
body.chat-immersive-mode .chat-tab-content     { pointer-events: none !important; min-height: 0 !important; }

/* Nachrichten: füllen bottom-to-top auf, transparent mit Fade */
body.chat-immersive-mode .chat-messages {
  flex: 1 !important;
  min-height: 0 !important;
  background: transparent !important;
  padding: 4px 10px 6px !important;
  gap: 3px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 20%, black 60%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 20%, black 60%);
  scrollbar-width: none !important;
  pointer-events: none !important;
}
body.chat-immersive-mode .chat-messages::-webkit-scrollbar { display: none !important; }
body.chat-immersive-mode .chat-messages .chat-msg { pointer-events: auto !important; }

/* Nachrichten: kompakt, inline, maximale Lesbarkeit */
body.chat-immersive-mode .chat-msg {
  background: none !important;
  max-width: 80% !important;
  padding: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
}
body.chat-immersive-mode .chat-avatar {
  width: 16px !important; height: 16px !important; font-size: 0.45rem !important; flex-shrink: 0 !important;
}
body.chat-immersive-mode .chat-bubble {
  background: rgba(0,0,0,0.55) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 3px 9px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body.chat-immersive-mode .chat-msg.self .chat-bubble {
  background: rgba(26,109,255,0.45) !important;
  border-radius: 10px !important;
}
body.chat-immersive-mode .chat-msg-text {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.8) !important;
}
body.chat-immersive-mode .chat-msg-name { font-size: 0.62rem !important; }
body.chat-immersive-mode .chat-msg-header { margin-bottom: 0 !important; }



/* ── Teleport 2099: Blau-Lila Partikel ───────────────────────────────────────── */
.teleport-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: teleport-scatter 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes teleport-scatter {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 0.9; transform: translateY(-50px) scale(0.8) translateX(var(--dx, 10px)); }
  100% { opacity: 0; transform: translateY(-110px) scale(0.2) translateX(var(--dx, 20px)); }
}
.teleport-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  background: linear-gradient(135deg, rgba(26,109,255,0.4), rgba(108,99,255,0.35));
  border-radius: 10px;
  padding: 4px 10px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(108,99,255,0.3);
  box-shadow: 0 0 20px rgba(26,109,255,0.3);
  animation: teleport-ghost-fly 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes teleport-ghost-fly {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  60%  { opacity: 0.7; transform: translateY(-70px) scale(0.88); filter: blur(1px); }
  100% { opacity: 0; transform: translateY(-140px) scale(0.7); filter: blur(4px); }
}

/* ── Stream Mobile Sichtbarkeit ──────────────────────────────────────────────── */
/* Video-Wrapper nimmt IMMER ganzen Platz — Chat überlagert transparent */
body.watch-page .video-wrapper {
  flex: 1 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Cameras-Grid füllt immer vollen Wrapper */
body.watch-page .cameras-grid {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* Desktop: Account for fixed chat overlay on right side */
@media (min-width: 769px) {
  body.watch-page .cameras-grid {
    right: 320px !important;  /* Chat overlay width */
  }
}

/* Kein unsichtbares Element blockiert Klicks über dem Stream */
body.chat-immersive-mode .video-wrapper { pointer-events: auto !important; }

/* ── Orb Icons: Monochrom Filled statt Outline ───────────────────────────────── */
.orb svg { transition: transform 0.15s; }
.orb:hover svg { transform: scale(1.15); }
.orb-heart svg { fill: currentColor; }

/* Orb ohne Label-Clutter auf sehr kleinen Screens */
@media (max-width: 360px) {
  .orb-label { display: none; }
  .orb { width: 48px !important; height: 48px !important; }
  .cam-bar-core { gap: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FRESH ICONS + WATCH LOOK 2099
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Orb Icon Wrapper: Glow-Aura ─────────────────────────────────────────────── */
.orb-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px currentColor);
  transition: filter 0.2s;
}
.orb:hover .orb-icon-wrap { filter: drop-shadow(0 0 8px currentColor) brightness(1.2); }

/* Gift: Gold Glow */
.orb-gift { color: #fbbf24; }
.orb-gift:hover { background: rgba(251,191,36,0.15) !important; border-color: rgba(251,191,36,0.5) !important; box-shadow: 0 8px 28px rgba(251,191,36,0.3), 0 0 0 1px rgba(251,191,36,0.2) !important; }

/* Chat: Blau mit animierten Dots */
.orb-chat { color: #1a6dff; }
.chat-dot-1, .chat-dot-2, .chat-dot-3 { animation: dot-bounce 1.4s ease infinite; }
.chat-dot-2 { animation-delay: 0.2s; }
.chat-dot-3 { animation-delay: 0.4s; }
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.9; }
  30%            { transform: translateY(-3px); opacity: 1; }
}

/* Heart: Pink mit Heartbeat */
.orb-heart { color: #f43f5e; }
.orb-heart:active .orb-icon-wrap { animation: heart-pump 0.4s ease; }
@keyframes heart-pump {
  0%  { transform: scale(1); }
  30% { transform: scale(1.4); filter: drop-shadow(0 0 12px #f43f5e); }
  60% { transform: scale(0.9); }
  100%{ transform: scale(1); }
}

/* Danmaku: Lila mit Slide-Animation */
.orb-danmaku { color: #818cf8; }
.orb-danmaku.active { color: #a78bfa !important; background: rgba(108,99,255,0.2) !important; border-color: rgba(108,99,255,0.6) !important; }

/* Mehr Button: Dreht sich */
.orb-more { color: rgba(255,255,255,0.6); }
#btn-cam-more.open #cam-more-icon { transform: rotate(45deg); }

/* ── orb-sm (Expand-Panel Buttons): farbig ───────────────────────────────────── */
.orb-sm {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.75) !important;
}
#btn-cam-request { background: rgba(26,109,255,0.18) !important; border-color: rgba(26,109,255,0.45) !important; color: #60a5fa !important; }
#btn-tts         { background: rgba(167,139,250,0.15) !important; border-color: rgba(167,139,250,0.4) !important; color: #a78bfa !important; }
#btn-guest-cam   { background: rgba(34,197,94,0.15)  !important; border-color: rgba(34,197,94,0.4)  !important; color: #4ade80 !important; }
#btn-guest-screen{ background: rgba(56,189,248,0.15) !important; border-color: rgba(56,189,248,0.4) !important; color: #38bdf8 !important; }
#btn-guest-mic   { background: rgba(251,146,60,0.15) !important; border-color: rgba(251,146,60,0.4) !important; color: #fb923c !important; }
#btn-guest-mic.active { background: rgba(239,68,68,0.2) !important; border-color: rgba(239,68,68,0.5) !important; color: #f87171 !important; }
#btn-follow-host { background: rgba(244,63,94,0.15)  !important; border-color: rgba(244,63,94,0.4)  !important; color: #fb7185 !important; }
#btn-admin       { background: rgba(234,179,8,0.15)  !important; border-color: rgba(234,179,8,0.4)  !important; color: #facc15 !important; }
#btn-vela-toggle { background: rgba(108,99,255,0.15) !important; border-color: rgba(108,99,255,0.4) !important; color: #a78bfa !important; }
#btn-voice-expand{ background: rgba(52,211,153,0.15) !important; border-color: rgba(52,211,153,0.4) !important; color: #34d399 !important; }

/* ── Watch Offline-Card: Premium ─────────────────────────────────────────────── */
.stream-offline-card {
  background: linear-gradient(160deg, rgba(16,18,30,0.95) 0%, rgba(10,14,22,0.98) 100%) !important;
  border: 1px solid rgba(26,109,255,0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 60px rgba(26,109,255,0.06), inset 0 0 40px rgba(108,99,255,0.04) !important;
  max-width: 340px !important;
  margin: auto !important;
  padding: 32px 24px !important;
}
.soc-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(26,109,255,0.4) !important;
  box-shadow: 0 0 24px rgba(26,109,255,0.25) !important;
  font-size: 2rem !important;
}
.soc-name {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-top: 14px !important;
  letter-spacing: -0.01em !important;
}
.soc-meta {
  font-size: 0.8rem !important;
  color: rgba(144,144,168,0.7) !important;
  margin-top: 6px !important;
}

/* ── Watch Header: cleaner ───────────────────────────────────────────────────── */
body.watch-page .stream-header {
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%) !important;
  backdrop-filter: none !important;
  padding: max(10px, env(safe-area-inset-top)) 12px 16px !important;
}

/* Desktop: Header respects chat overlay width */
@media (min-width: 769px) {
  body.watch-page .stream-header {
    right: 320px !important;  /* Account for chat overlay */
  }
}

/* ── Camera-Bar: Floating Dock Finish ────────────────────────────────────────── */
.cam-bar-core {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
.orb {
  border-radius: 18px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Farbige Orb-Backgrounds passend zu Icon-Farbe */
.orb-gift    { background: rgba(251,191,36,0.15)  !important; border-color: rgba(251,191,36,0.35)  !important; }
.orb-chat    { background: rgba(26,109,255,0.15)  !important; border-color: rgba(26,109,255,0.35)  !important; }
.orb-heart   { background: rgba(244,63,94,0.15)   !important; border-color: rgba(244,63,94,0.35)   !important; }
.orb-danmaku { background: rgba(129,140,248,0.15) !important; border-color: rgba(129,140,248,0.35) !important; }
.orb-explore { background: rgba(108,99,255,0.15)  !important; border-color: rgba(108,99,255,0.35)  !important; }
.orb-more    { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; }

/* ── Ambient Glow under Dock ─────────────────────────────────────────────────── */
.cam-bar-core::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 40px;
  background: radial-gradient(ellipse, rgba(26,109,255,0.12) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}

/* ── Fullscreen Floating Button (Desktop rechts-unten) ───────────────────────── */
.fs-float-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 35;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s, transform 0.1s;
  backdrop-filter: blur(8px);
}
/* Sichtbar wenn Video-Area gehovert */
.video-area:hover .fs-float-btn,
.video-area:focus-within .fs-float-btn { opacity: 1; }
.fs-float-btn:hover {
  background: rgba(26,109,255,0.3);
  border-color: rgba(26,109,255,0.5);
  color: #fff;
  transform: scale(1.08);
}

/* Auf Mobile: in der Orb-Bar oder gar nicht */
@media (max-width: 768px) { .fs-float-btn { display: none; } }

/* Desktop Sidebar: Offset damit Fullscreen nicht hinter Chat-Panel */
@media (min-width: 769px) {
  body.watch-page .fs-float-btn { right: calc(320px + 14px); } /* 320px Chat + 14px padding */
}

/* ══════════════════════════════════════════════════════════════════════════════
   WATCH RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Header auf kleinen Screens ──────────────────────────────────────────────── */
.stream-header {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.header-actions {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  gap: 6px !important;
}
/* Viewer-Count auf sehr kleinen Screens verstecken */
@media (max-width: 360px) {
  #viewer-count { display: none !important; }
  #username-display { display: none !important; }
}
/* Logo-Text auf kleinen Screens verstecken */
@media (max-width: 420px) {
  .logo-small span:not(svg) { display: none !important; }
}

/* ── Chat immer sichtbar im unteren Drittel ──────────────────────────────────── */
body.chat-immersive-mode #chat-overlay {
  display: flex !important;  /* IMMER sichtbar */
}

/* ── Cam-Bar auf schmalem Screen ─────────────────────────────────────────────── */
@media (max-width: 400px) {
  .cam-bar-core { gap: 8px !important; padding: 10px 10px 12px !important; }
  .orb           { width: 48px !important; height: 48px !important; }
  .orb-label     { display: none !important; }
}

/* ── Video sichtbar — keine Überlappung durch Fixed-Elemente ─────────────────── */
body.watch-page .video-area {
  /* Sicherstellen dass kein fixed-Child das Video verdeckt */
  isolation: isolate;
}

/* ── Stats-Card: Mobile kompakter ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .stats-glass-card {
    padding: 4px 9px !important;
    gap: 6px !important;
  }
  .stats-item { font-size: 0.72rem !important; }
  .stats-sep  { display: none !important; }
}

/* ── Offline-Card: Mobile zentriert ohne Überlauf ────────────────────────────── */
@media (max-width: 480px) {
  .stream-offline-card {
    padding: 24px 16px !important;
    margin: 12px !important;
    max-width: calc(100% - 24px) !important;
  }
  .soc-avatar { width: 64px !important; height: 64px !important; }
  .soc-name { font-size: 1rem !important; }
}

/* ── Chat Bubble auf Mobile kleiner ──────────────────────────────────────────── */
@media (max-width: 480px) {
  body.chat-immersive-mode .chat-msg-text { font-size: 0.74rem !important; }
  body.chat-immersive-mode .chat-bubble   { padding: 2px 7px !important; }
}

/* ── Reconnect Overlay: unauffälliger ────────────────────────────────────────── */
.reconnect-overlay {
  background: rgba(0,0,0,0.5) !important; /* weniger dunkel */
}
.reconnect-box {
  padding: 24px 20px !important;
}

/* Immersiver Chat-Header: nur Viewer-Count, ultra-minimal */
body.chat-immersive-mode .chat-overlay-header {
  display: flex !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 4px 10px 2px !important;
  pointer-events: all !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
body.chat-immersive-mode .chat-header-title {
  font-size: 0.6rem !important;
  opacity: 0.3 !important;
  flex: 0 !important;
}
.chat-viewer-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 2px 7px;
  cursor: pointer;
}
.chat-viewer-pill:hover { color: rgba(255,255,255,0.6); }

/* Input-Area auf Desktop im Immersiv-Modus: Premium Stil */
@media (min-width: 769px) {
  body.chat-immersive-mode .chat-input-area {
    background: rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 8px 10px !important;
    pointer-events: all !important;
  }
  body.chat-immersive-mode #chat-input {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
  }
  body.chat-immersive-mode #chat-input:focus {
    background: rgba(255,255,255,0.11) !important;
    border-color: rgba(26,109,255,0.5) !important;
    box-shadow: 0 0 0 3px rgba(26,109,255,0.08) !important;
  }
}

/* ── Stream Resume Bar ────────────────────────────────────────────────────────── */
.resume-bar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10400;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10,12,22,0.95);
  border: 1px solid rgba(26,109,255,0.35);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(26,109,255,0.1);
  animation: app-fade-in 0.3s ease;
  white-space: nowrap;
}
.resume-content { display: flex; align-items: center; gap: 8px; }
.resume-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: live-ping 1.5s ease infinite; }
.resume-text { font-size: 0.82rem; color: rgba(255,255,255,0.8); }
.resume-text strong { color: #fff; }
.resume-actions { display: flex; gap: 6px; }
.resume-btn-yes {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.resume-btn-yes:hover { opacity: 0.85; }
.resume-btn-no {
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.4);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: color 0.15s;
}
.resume-btn-no:hover { color: rgba(255,255,255,0.7); }

/* ── Chat Stub 2099 (Mobile Input) ──────────────────────────────────────────── */
.chat-stub-2099 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  /* Komplett transparent — Wave scheint durch */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  padding: 0;
  height: 66px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.chat-stub-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 9px 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  min-height: 44px; /* iOS Touch Target */
}
.chat-stub-inner:focus-within {
  background: rgba(255,255,255,0.12);
  border-color: rgba(26,109,255,0.45);
  box-shadow: 0 0 0 3px rgba(26,109,255,0.1);
}
.chat-stub-icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
}
/* iOS: font-size ≥ 16px verhindert Auto-Zoom */
.chat-stub-2099 input,
#chat-stub-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255,255,255,0.92);
  font-size: 16px; /* KRITISCH: <16px → iOS zoomt ein */
  font-family: 'Inter', -apple-system, sans-serif;
  caret-color: #1a6dff;
  min-width: 0;
  -webkit-appearance: none;
}
#chat-stub-input::placeholder {
  color: rgba(255,255,255,0.25);
  font-size: 15px;
}
.chat-stub-gift {
  width: 42px;
  height: 42px;
  background: rgba(108,99,255,0.18);
  border: 1px solid rgba(108,99,255,0.3);
  border-radius: 50%;
  color: #a78bfa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.chat-stub-gift:active {
  background: rgba(108,99,255,0.35);
  transform: scale(0.93);
}
/* Desktop: immer versteckt */
@media (min-width: 769px) {
  .chat-stub-2099 { display: none !important; }
}

/* ── Engagement Wave: auch auf Mobile ──────────────────────────────────────────── */

/* ── Chat-Stub über Wave: z-index sichern ── */
/* Desktop: nie zeigen */
@media (min-width: 769px) {
  #chat-stub { display: none !important; }
}
/* Wave auf Mobile: kräftiger, volle Opazität */
@media (max-width: 768px) {
  #engagement-wave {
    height: 60px !important;
    opacity: 1 !important;
    filter: brightness(1.4) saturate(1.6) !important;
  }
}

/* ── Wave Input: transparent direkt auf der Sinuswelle ───────────────────────── */
.wave-input {
  position: absolute;
  bottom: 10px;
  left: 50px;       /* Platz für linke Orb-Bar */
  right: 56px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 11px 18px;  /* Größere Touch-Area */
  color: rgba(255,255,255,0.92);
  font-size: 16px !important;
  font-family: 'Inter', -apple-system, sans-serif;
  outline: none;
  caret-color: #60a5fa;
  z-index: 9001;   /* Über alles */
  min-height: 44px;  /* iOS Touch Target */
  -webkit-appearance: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.wave-input:focus {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  box-shadow: none;
}
.wave-input::placeholder { color: rgba(255,255,255,0.3); }

.wave-gift-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  background: rgba(108,99,255,0.15);
  border: 1px solid rgba(108,99,255,0.25);
  border-radius: 50%;
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.wave-gift-btn:active { background: rgba(108,99,255,0.35); transform: scale(0.9); }

/* Chat-Stub Wave-Container */

/* ── Cam-Bar Mobile: vertikal links ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .guest-cam-bar {
    /* Rechts hochkant */
    bottom: auto !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important;
    padding: 8px 4px !important;
    background: rgba(0,0,0,0) !important;
  }

  .cam-bar-core {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 10px !important;
    background: none !important;
  }
  .cam-bar-core::before { display: none !important; }

  /* Expand Panel: nach LINKS öffnen (rechts ist Bildschirmrand) */
  .cam-bar-expand {
    position: absolute !important;
    right: calc(100% + 8px) !important;
    left: auto !important;
    top: 0 !important;
    flex-direction: column !important;
    width: auto !important;
    padding: 10px 8px !important;
    border-top: none !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-left: none !important;
    border-radius: 12px !important;
    background: rgba(8,8,14,0.9) !important;
    backdrop-filter: blur(16px) !important;
    transform: translateX(10px) !important;
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease !important;
    gap: 8px !important;
    display: none;
  }
  .cam-bar-expand.expanded {
    display: flex !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  .orb-label { display: none !important; }
  .orb       { width: 46px !important; height: 46px !important; }
  .orb-sm    { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
}

/* ── Cam-Bar Mobile: immer sichtbar, z-index über allem ─────────────────────── */
@media (max-width: 768px) {
  .guest-cam-bar { z-index: 200 !important; }

  /* Mobile: Voice und Kamera direkt in der Hauptbar anzeigen */
  #btn-voice { display: flex !important; }
  #btn-cam-request { display: flex !important; }

  /* Expand Panel auf Mobile nach unten statt nach links */
  .cam-bar-expand {
    position: fixed !important;
    bottom: 75px !important;
    right: auto !important;
    left: 8px !important;
    top: auto !important;
    flex-direction: row !important;
    width: calc(100% - 16px) !important;
    overflow-x: auto !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
}

/* ── Danmaku Mobile ───────────────────────────────────────────────────────────── */
@keyframes danmaku-scroll-mobile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-200vw - 100% + 52px)); }
}
.danmaku-mobile {
  animation-name: danmaku-scroll-mobile !important;
  font-size: 0.72rem !important;
  padding: 2px 6px !important;
  background: rgba(0,0,0,0.3) !important;  /* leicht sichtbar auf hellem Video */
  border-radius: 6px !important;
  backdrop-filter: blur(4px) !important;
}

/* Danmaku-Orb Button: animierter Glow wenn aktiv */
#btn-danmaku.active .orb-icon-wrap {
  animation: danmaku-active-glow 1.5s ease infinite alternate;
}
@keyframes danmaku-active-glow {
  from { filter: drop-shadow(0 0 4px #818cf8); }
  to   { filter: drop-shadow(0 0 10px #a78bfa) brightness(1.3); }
}

/* ── Like Pulse: Ringe + aufsteigendes ECG-Herz ─────────────────────────────── */
.like-pulse-ring {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(244,63,94,0.6);
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%);
  animation: like-ring-expand 0.9s ease-out forwards;
}
@keyframes like-ring-expand {
  0%   { transform:translate(-50%,-50%) scale(0.3); opacity:0.9; }
  100% { transform:translate(-50%,-50%) scale(3);   opacity:0; }
}
.like-pulse-float {
  position: absolute;
  pointer-events: none;
  z-index: 21;
  transform: translateX(-50%);
  animation: like-pulse-rise 1.4s ease-out forwards;
}
@keyframes like-pulse-rise {
  0%   { opacity:1;   transform:translateX(-50%) translateY(0); }
  60%  { opacity:0.8; transform:translateX(-50%) translateY(-60px); }
  100% { opacity:0;   transform:translateX(-50%) translateY(-110px) scale(0.6); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE FINAL PASS — alle Mobile-Fixes
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1+4+5: Wave-Input: Orb-Bar ist rechts → right-Offset */
@media (max-width: 768px) {
  .wave-input {
    left: 10px !important;
    right: calc(50px + 10px) !important;  /* Platz für rechte Orb-Bar */
  }
  .wave-gift-btn {
    right: calc(50px + 10px) !important;  /* links vom Orb-Bar-Rand */
  }
}

/* 2: Chat-Stub auf sehr kleinen Screens kompakter */
@media (max-width: 420px) {
  .chat-stub-2099 { height: 56px !important; }
}

/* 3+9: Chat-Overlay bottom: Abstand zur Cam-Bar + Chat-Stub */
@media (max-width: 768px) {
  body.chat-immersive-mode .chat-overlay {
    padding-bottom: 80px !important;  /* Wave(66) + Luft */
  }
}

/* 5: Chat-Overlay Breite: Platz für rechte Orb-Bar lassen */
@media (max-width: 768px) {
  body.chat-immersive-mode .chat-messages {
    padding-right: 52px !important;  /* Orb-Bar rechts */
  }
  body.chat-immersive-mode .chat-msg {
    max-width: calc(100% - 56px) !important;
  }
}

/* 6+11: Orb-Labels ab 420px verstecken statt erst 360px */
@media (max-width: 420px) {
  .orb-label { display: none !important; }
  .orb       { width: 46px !important; height: 46px !important; }
}

/* 7: Header font-size kleiner auf sehr schmalen Screens */
@media (max-width: 400px) {
  .header-actions .btn-cam { font-size: 0.7rem !important; padding: 5px 8px !important; }
  .wallet-header-btn        { font-size: 0.7rem !important; }
}

/* 8: Placeholder font-size = 16px (kein iOS-Zoom) */
#chat-stub-input::placeholder { font-size: 16px !important; }

/* 10: Kein doppelter Gift-Button — wave-gift-btn und chat-stub-gift nicht beide zeigen */
@media (max-width: 768px) {
  .wave-gift-btn { display: none !important; }  /* Stub-Gift-Button übernimmt */
}

/* Danmaku-Lane-Bereich: rechte Orb-Bar berücksichtigen */
@media (max-width: 768px) {
  .danmaku-msg { max-width: calc(100vw - 55px) !important; }
}

/* Stats-Card: nicht hinter linke Elemente rutschen */
@media (max-width: 420px) {
  #stream-stats-bar { top: 8px !important; left: 8px !important; }
  .stats-glass-card { padding: 3px 8px !important; gap: 5px !important; }
  .stats-item svg   { display: none !important; }
}

/* Offline-Card: auf sehr kleinen Screens besser zentriert */
@media (max-width: 420px) {
  .stream-offline-card {
    margin: 8px !important;
    padding: 20px 14px !important;
  }
  .soc-name { font-size: 0.95rem !important; }
}

/* Chat-Stub: Wave-Input-Pill immer 44px Mindesthöhe */
.wave-input { min-height: 44px !important; box-sizing: border-box !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   VIDEO-FIRST LAYOUT — Stream ist immer 100%, alles andere liegt drüber
   Diese Regeln gewinnen über alle älteren Definitionen
   ══════════════════════════════════════════════════════════════════════════════ */

/* Stream-Container: immer Vollbild */
body.watch-page .stream-layout {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
}

/* Video-Area: füllt Vollbild, KEIN Flex der verschieben kann */
body.watch-page .video-area {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;      /* kein flex — nichts verdrängt das Video */
  overflow: hidden !important;
  background: #000 !important;
}

/* Video-Wrapper: füllt ebenfalls Vollbild absolut */
body.watch-page .video-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Cameras-Grid: Vollbild-Füllung */
body.watch-page .cameras-grid {
  position: absolute !important;
  inset: 0 !important;
}

/* Alles was ÜBER dem Video liegt: position:absolute, kein Einfluss auf Video */
body.watch-page .stream-header,
body.watch-page #stream-stats-bar,
body.watch-page .chat-overlay,
body.watch-page .guest-cam-bar,
body.watch-page .admin-overlay,
body.watch-page #engagement-wave,
body.watch-page .social-ticker,
body.watch-page .live-leaderboard,
body.watch-page .fs-float-btn {
  position: absolute !important;
}

/* Chat-Stub (fixed, außerhalb video-area): bleibt fixed */
#chat-stub { position: fixed !important; }

/* Desktop Sidebar: Chat rechts bleibt panel */
@media (min-width: 769px) {
  body.watch-page .video-area { display: block !important; }
  body.watch-page .video-wrapper { position: absolute !important; inset: 0 !important; }
}

/* Mobile: Video immer Vollbild hinter allem */
@media (max-width: 768px) {
  body.watch-page .video-area,
  body.watch-page .video-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;  /* Dynamic viewport für iOS */
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT + ICONLEISTE FINAL FIX
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Nachrichten: volle Breite, kein künstliches Einquetschen ─────────────────── */
@media (max-width: 768px) {
  body.chat-immersive-mode .chat-messages {
    padding-right: 8px !important;   /* kein 52px mehr — Orb-Bar ist transparent drüber */
    padding-left: 8px !important;
    padding-bottom: 0 !important;
    /* Nachrichten nur im oberen 2/3 — unteres Drittel für Wave/Input frei */
    max-height: 22vh !important;     /* 33vh Overlay × 2/3 = ~22vh */
    justify-content: flex-end !important;
  }

  body.chat-immersive-mode .chat-msg {
    max-width: 92% !important;       /* fast volle Breite */
  }

  body.chat-immersive-mode .chat-bubble {
    max-width: 100% !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  body.chat-immersive-mode .chat-msg-text {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Chat-Overlay: unteres Drittel explizit frei halten */
  body.chat-immersive-mode .chat-overlay {
    padding-bottom: calc(33vh * 0.33 + 66px) !important;  /* 1/3 + Wave-Höhe */
  }
}

/* ── Orb-Leiste: etwas größer + besser sichtbar ────────────────────────────── */
@media (max-width: 768px) {
  .orb {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background: rgba(10,12,22,0.82) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 0 8px rgba(255,255,255,0.03) !important;
  }
  .orb-sm {
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
  }
  .cam-bar-core {
    gap: 12px !important;
    padding: 10px 6px !important;
  }
  /* Orb-Icon etwas größer */
  .orb-icon-wrap svg { width: 26px !important; height: 26px !important; }
}

/* ══ HOST: Chat-Overlay Safari-Fix (ganz am Ende = höchste Kaskaden-Priorität) ══
   Problem: position:absolute + height:auto triggert in Safari auf macOS bei jedem
   appendChild() einen Flexbox-Reflow → video-wrapper schrumpft mit jeder Nachricht.
   Fix: position:fixed entfernt das Element komplett aus dem Flex-Kontext.
   Gilt NUR für Desktop (min-width:769px) und NUR für host-page.
   Mobile (≤768px) unberührt — greift nicht in diesen Block.               ══ */
@media (min-width: 769px) {
  body.host-page #chat-overlay {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 170px !important;
    right: auto !important;
    width: 300px !important;
    height: 33vh !important;
    max-height: 33vh !important;
    overflow: hidden !important;
  }
  body.host-page #chat-overlay .chat-messages {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SAFARI + FIREFOX MOBILE FIX — basierend auf Screenshot-Analyse
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Safari Viewport-Höhe: kein schwarzer Bereich unten ──────────────────── */
body.watch-page,
body.watch-page .stream-layout {
  height: 100vh !important;
  height: 100dvh !important;           /* Modern browsers */
  height: -webkit-fill-available !important;  /* Safari */
  min-height: -webkit-fill-available !important;
}

/* ── 2. Video-Area: rein absolut, kein Flex-Problem mehr ─────────────────────── */
body.watch-page .video-area {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* Video-Wrapper: absolut gefüllt — flex:1 brauchen wir nicht mehr */
body.watch-page .video-wrapper {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Cameras-Grid: auch absolut voll */
body.watch-page .cameras-grid {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
}

/* ── 3. Cam-Bar Mobile: rechte Seite, UNTEN (nicht Mitte) ─────────────────────── */
@media (max-width: 768px) {
  .guest-cam-bar {
    position: fixed !important;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 200 !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    padding: 8px 4px !important;
  }

  .cam-bar-core {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    background: none !important;
    align-items: center !important;
  }

  .cam-bar-core::before { display: none !important; }

  /* Expand-Panel nach links öffnen, ebenfalls unten verankert */
  .cam-bar-expand {
    position: fixed !important;
    right: calc(54px + 16px) !important;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: auto !important;
    transform: translateX(10px) !important;
    flex-direction: column !important;
    background: rgba(8,8,14,0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    padding: 10px 8px !important;
    gap: 8px !important;
    z-index: 201 !important;
    display: none;
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease !important;
  }
  .cam-bar-expand.expanded {
    display: flex !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  /* Orbs: Haupt-Orbs etwas kleiner, kompakter */
  .orb    { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
  .orb-sm { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
  .orb-label { display: none !important; }

  /* Expand-Panel: viel schmaler, nur Icons, enger */
  .cam-bar-expand {
    padding: 8px 6px !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* Cam-Bar-Core: leichter Glasmorphismus-Hintergrund */
  .cam-bar-core {
    background: rgba(8,8,14,0.55) !important;
    border-radius: 18px !important;
    padding: 10px 8px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    gap: 10px !important;
  }
}

/* ── 3a. Stats-Bar + cam-status auf Mobile komplett ausblenden ────────────────── */
@media (max-width: 768px) {
  #stream-stats-bar { display: none !important; }
  .cam-status-text, #cam-status { display: none !important; }
  /* guest-cam-bar: kein Hintergrund, kein Rand — nur die Orbs */
  body.watch-page .guest-cam-bar {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* ── 3b. Header Mobile: unwichtige Buttons ausblenden, leave immer sichtbar ─── */
@media (max-width: 520px) {
  body.watch-page #btn-notifications,
  body.watch-page #btn-gaming,
  body.watch-page #btn-pip,
  body.watch-page #btn-clip { display: none !important; }

  body.watch-page .hdr-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  body.watch-page .hdr-leave { display: flex !important; }
}
@media (max-width: 380px) {
  /* Noch enger: Lautstärke + Teilen auch weg */
  body.watch-page .hdr-btn[title="Teilen"],
  body.watch-page .hdr-btn[title="Lautstärke"] { display: none !important; }
}

/* ── 3c. Bottom Stream-Bar: persistente Tab-Leiste auf Mobile ──────────────── */
.stream-bar {
  display: none; /* Desktop: versteckt */
}
@media (max-width: 768px) {
  .stream-bar {
    display: block;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 150 !important;
    background: rgba(8, 8, 14, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.32,0.72,0,1);
    max-height: calc(52px + env(safe-area-inset-bottom, 0px));
  }
  .stream-bar.open {
    max-height: calc(240px + env(safe-area-inset-bottom, 0px));
  }

  /* Tab-Zeile */
  .stream-bar-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .stream-bar.open .stream-bar-tabs {
    padding-bottom: 4px;
  }
  .sbar-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .sbar-tab.active {
    background: rgba(26,109,255,0.18);
    color: #60a5fa;
  }
  /* Neu-Tab: grüner Akzent */
  .sbar-tab[data-tab="new"].active {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
  }
  .sbar-tab[data-tab="new"]::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: #22c55e;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
  }

  /* Stream-Bubbles Liste */
  .stream-bar-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  .stream-bar-list::-webkit-scrollbar { display: none; }
  .stream-bar.open .stream-bar-list {
    max-height: 180px;
  }

  /* Chat-Stub über Stream-Bar */
  #chat-stub {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Toast über Stream-Bar */
  .toast-container {
    bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 4. Toast "Verbunden" weniger aufdringlich ────────────────────────────────── */
.toast.success {
  background: rgba(34,197,94,0.12) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.78rem !important;
  padding: 7px 14px !important;
}
.toast-container {
  bottom: 80px !important;  /* über der Cam-Bar */
  right: 12px !important;
  max-width: 220px !important;
}

/* ── 5. Chat-Stub: Safari safe-area ────────────────────────────────────────────── */
.chat-stub-2099 {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ── 6. Stream-Header: hinter Safari-Notch nicht abschneiden ─────────────────── */
body.watch-page .stream-header {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER 2099 + STATS-LEISTE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Header: kompakter, besser verteilt ──────────────────────────────────────── */
body.watch-page .stream-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%) !important;
  backdrop-filter: none !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-height: 52px !important;
}
.logo-text {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}
@media (max-width: 380px) { .logo-text { display: none; } }

/* Header-Actions: alle Buttons gleich groß, engerer Abstand */
body.watch-page .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

/* Viewer-Count kompakt */
body.watch-page #viewer-count {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.55) !important;
  white-space: nowrap !important;
  margin-right: 4px !important;
}

/* Einheitliche Header-Buttons */
.hdr-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.hdr-btn:hover  { background: rgba(255,255,255,0.14); color: #fff; }
.hdr-btn:active { transform: scale(0.93); background: rgba(255,255,255,0.22) !important; }

/* Wallet: blauer Akzent */
.hdr-wallet {
  background: rgba(26,109,255,0.15) !important;
  border-color: rgba(26,109,255,0.3) !important;
  color: #60a5fa !important;
  gap: 4px;
  padding: 0 8px;
  width: auto !important;
  font-size: 0.72rem;
  font-weight: 700;
}
.wallet-credits-count { font-size: 0.72rem; font-weight: 700; }

/* Verlassen: dezent rot */
.hdr-leave {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.2) !important;
  color: rgba(239,68,68,0.7) !important;
}
.hdr-leave:hover { background: rgba(239,68,68,0.25) !important; color: #ef4444 !important; }

/* Badge */
.hdr-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: #fff;
  border-radius: 50%;
  width: 14px; height: 14px;
  font-size: 0.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Stats-Leiste: direkt UNTER dem Header ────────────────────────────────────── */
.stats-bar-row {
  position: absolute !important;
  top: 52px !important;             /* direkt unter Header */
  left: 0 !important;
  right: 0 !important;
  z-index: 26 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%) !important;
}
/* Stats-Glass-Card bleibt wie definiert */
.stats-bar-row .stats-glass-card {
  background: rgba(0,0,0,0.5) !important;
}

/* Mobile: stats kompakter */
@media (max-width: 480px) {
  .stats-bar-row { padding: 3px 10px !important; top: 48px !important; }
  .stats-glass-card { padding: 3px 8px !important; gap: 5px !important; }
  .stats-item { font-size: 0.75rem !important; }
  .stats-item svg { width: 10px !important; height: 10px !important; }
  .stats-sep { font-size: 0.65rem !important; }
}

/* ══════════════════════════════════════════════════════════════════
   WaveBlue© Mobile Fixes v65 — watch.html + host.html
   ══════════════════════════════════════════════════════════════════ */

/* Fix: .host-mobile-only auf DIV-Containern */
@media (max-width: 768px) {
  .host-mobile-only { display: flex !important; }
}

/* Fix: Chat-Overlay Breite auf kleinen Screens */
@media (max-width: 480px) {
  #chat-overlay {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 70px !important;
  }
}

/* Fix: Chat-Overlay in Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  #chat-overlay {
    bottom: 0 !important;
    max-height: 80vh !important;
  }
}

/* Fix: Rating-Grid 5 Spalten → 3 auf kleinen Phones */
@media (max-width: 380px) {
  .rating-buttons,
  [id*="rating"] .btn-group {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Fix: host-controls Gap + Padding auf Mobile */
@media (max-width: 480px) {
  .host-controls { gap: 4px !important; padding: 8px 6px !important; }
  .btn-cam { padding: 7px 10px !important; font-size: 0.82rem !important; }
  .host-controls .btn-cam svg { width: 14px !important; height: 14px !important; }
}

/* Fix: Video-Wrapper Padding bei Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .video-wrapper { padding-top: 0 !important; }
  #stream-stats-bar { padding: 4px 8px !important; }
}

/* Fix: Guest-Login Modal auf 360px */
@media (max-width: 380px) {
  .reg-modal-box { max-width: calc(100vw - 20px) !important; margin: 10px !important; }
}

/* Fix: Zu viele Header-Buttons auf 360px → weniger wichtige verstecken */
@media (max-width: 360px) {
  #btn-pip,
  #btn-clip { display: none !important; }
  .hdr-right { gap: 4px !important; }
}

/* Fix: Stats-Bar auf sehr kleinen Screens */
@media (max-width: 360px) {
  .stats-glass-card { padding: 2px 6px !important; gap: 4px !important; }
  .stats-item { font-size: 0.7rem !important; }
}

/* Fix: host-controls Rating-Buttons (FSK-Auswahl) */
@media (max-width: 380px) {
  #content-rating-buttons,
  .rating-btn-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
}

/* Fix: Guest-Cam-Bar Scrolling-Bug auf Mobile */
@media (max-width: 768px) {
  .guest-cam-bar { position: fixed !important; }
}

/* Fix: Wave-Input Mindest-Höhe auf Mobile */
@media (max-width: 360px) {
  .chat-stub-bar { height: 48px !important; }
  .chat-stub-input { font-size: 0.82rem !important; }
}

/* Fix: Host Stats-Bar überschneidet Header auf Mobile */
@media (max-width: 768px) {
  #host-stats-bar, #stream-stats-bar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET LAYOUT — iPad Portrait / Android Tablet (769px – 1024px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* ── WATCH PAGE ── */
  body.watch-page .stream-header {
    padding: max(10px, env(safe-area-inset-top)) 16px 10px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Header: alle Buttons zeigen aber kompakter */
  body.watch-page .hdr-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* Header Actions: ensure proper wrapping on iPad */
  body.watch-page .header-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  /* Stats-Bar: sichtbar aber kleiner */
  body.watch-page #stream-stats-bar {
    display: block !important;
    top: 52px !important;
    left: 12px !important;
  }

  /* Chat-Overlay: etwas breiter als Mobile, weiter unten auf iPad */
  body.chat-immersive-mode .chat-overlay {
    width: 55% !important;
    max-width: 360px !important;
    left: 0 !important;
    bottom: 120px !important;
    max-height: 35vh !important;
    right: auto !important;
    background: transparent !important;
    border: none !important;
    padding-bottom: 0 !important;
  }

  /* Orb-Leiste: zwischen Mobile und Desktop */
  body.watch-page .guest-cam-bar {
    position: fixed !important;
    right: 12px !important;
    bottom: 80px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 200 !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
  body.watch-page .cam-bar-core {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 8px !important;
    background: rgba(8,8,14,0.55) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    align-items: center !important;
  }
  body.watch-page .orb { width: 50px !important; height: 50px !important; }
  body.watch-page .orb-sm { width: 42px !important; height: 42px !important; }
  body.watch-page .orb-label { display: none !important; }

  /* Chat-Stub */
  #chat-stub {
    bottom: 0 !important;
  }
  .wave-input { left: 16px !important; right: 16px !important; }

  /* Stream-Bar: ausblenden (Tablet hat genug Platz für andere Navigation) */
  .stream-bar { display: none !important; }

  /* Engagement Wave */
  #engagement-wave { opacity: 1 !important; filter: brightness(1.3) !important; }

  /* ── HOST PAGE ── */
  body.host-page .stream-header {
    padding: max(10px, env(safe-area-inset-top)) 16px 10px !important;
  }

  /* Host Action Rail: wie Desktop, aber leicht kleiner */
  #host-action-rail {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 500 !important;
  }
  #host-rail-panel { max-height: 75vh; overflow-y: auto; }

  /* Host Controls: etwas größere Touch-Targets */
  .host-controls .btn-cam {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* HUD kompakter */
  #host-hud-overlay { font-size: 0.75rem !important; }

  /* Chat-Overlay Host: full-width unten auf iPad */
  body.host-page .chat-overlay {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 45% !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Host Controls: iPad Layout — kompaktere Version mit Wrapping */
  body.host-page .host-controls {
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 10px 8px !important;
    width: auto !important;
    max-width: 104px !important;
  }

  /* Host Controls Buttons: kleinere Größe auf iPad */
  body.host-page .host-controls .btn-cam {
    padding: 7px 7px !important;
    font-size: 0.66rem !important;
    min-height: 40px !important;
    min-width: 40px !important;
    border-radius: 7px !important;
    flex-basis: calc(50% - 3px) !important;
  }

  body.host-page .host-controls .btn-cam.btn-icon {
    padding: 7px !important;
  }

  body.host-page .host-controls .btn-cam svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Stop Button: Icon-only, rechts */
  body.host-page #btn-end-stream {
    display: flex !important;
    padding: 7px 7px !important;
    margin-left: 0 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: calc(50% - 3px) !important;
  }

  body.host-page #btn-end-stream svg {
    width: 16px !important;
    height: 16px !important;
  }

  body.host-page #btn-end-stream span {
    display: none !important;
  }

  /* Battle Button: nebeneinander mit Stop */
  body.host-page #btn-battle-hud {
    display: flex !important;
    padding: 7px 7px !important;
    font-size: 0.66rem !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: calc(50% - 3px) !important;
    gap: 2px !important;
  }

  /* Mic-Eingabe Container: auf einen Button reduzieren */
  body.host-page .host-controls > div[style*="display:flex;align-items:stretch"] {
    display: flex !important;
    flex-basis: auto !important;
    width: auto !important;
  }

  /* Hide most desktop buttons on iPad */
  body.host-page .host-desktop-only {
    display: none !important;
  }

  /* Show essential buttons on iPad */
  body.host-page #btn-add-cam,
  body.host-page #btn-screen,
  body.host-page #btn-flip-cam,
  body.host-page #btn-mic,
  body.host-page #btn-filter {
    display: flex !important;
    flex-basis: calc(50% - 3px) !important;
  }

  /* Hide Cam-Count Label */
  body.host-page .host-controls #cam-count {
    display: none !important;
  }

  /* Battle-Split: volle 50/50 wie Desktop */
  #battle-opponent-frame {
    top: 52px !important;
    right: 0 !important;
    width: 50% !important;
    bottom: 0 !important;
  }

  /* Modals: nicht zu breit */
  .reg-modal-box { max-width: 520px !important; }
  .modal-box { max-width: 520px !important; }

  /* Galaxy Minimap: etwas kleiner */
  #galaxy-canvas { width: 90px !important; height: 90px !important; }
}

/* iPad Landscape (1025px – 1366px): fast Desktop, kleine Anpassungen */
@media (min-width: 1025px) and (max-width: 1366px) {
  body.watch-page .guest-cam-bar {
    right: 16px !important;
  }
  .chat-overlay { width: 320px !important; }
}

/* ── Host-Vorschau: gespiegelt (Spiegel-Effekt für Selfie-View) ─────────────── */
/* Nur auf host-page — WebRTC-Stream selbst ist NICHT gespiegelt, nur lokale Anzeige */
body.host-page .camera-box video {
  transform: scaleX(-1);
}
/* Gast-PiP ebenfalls gespiegelt */
#pip-local-cam .guest-pip-inner video {
  transform: scaleX(-1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   WaveBlue© — Avatar 2099 + Zivilisations-System (v68)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Civ-Selector (im Avatar-Creator Modal) ─────────────────────────────────── */
.civ-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--civ-color, rgba(255,255,255,.2));
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0,0,0,.3);
  font-size: .78rem;
}
.civ-badge .civ-emoji  { font-size: 1rem; }
.civ-badge .civ-name   { font-weight: 700; color: var(--civ-color, #fff); }
.civ-badge .civ-rank   { font-size: .65rem; color: rgba(255,255,255,.5); margin-left: 4px; }

/* ── Chat-Avatar Civ-Ring ───────────────────────────────────────────────────── */
.chat-avatar-civ {
  border: 2px solid var(--civ-ring-color, transparent) !important;
  box-shadow: 0 0 6px var(--civ-ring-color, transparent);
}
.chat-avatar-civ.civ-champion {
  border-width: 4px !important;
  box-shadow: 0 0 12px var(--civ-ring-color, transparent);
}

/* ── Battle Civ-Header ──────────────────────────────────────────────────────── */
.battle-civ-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .8rem; font-weight: 700; gap: 8px;
  animation: civ-header-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes civ-header-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.battle-civ-header .civ-side-a { color: var(--civ-a-color, #4A90D9); }
.battle-civ-header .civ-side-b { color: var(--civ-b-color, #CC2200); }
.battle-civ-header .vs-sep      { color: rgba(255,255,255,.4); font-size: .72rem; }

/* ── Sport-Battle Themes ────────────────────────────────────────────────────── */
.battle-theme-football #battle-widget,
.battle-theme-football #host-battle-widget {
  background: linear-gradient(160deg, #0a3d0a 0%, #1a6b1a 50%, #0a3d0a 100%);
  border-color: #22c55e;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0px, rgba(0,0,0,.05) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.05) 0px, rgba(0,0,0,.05) 1px, transparent 1px, transparent 40px);
}
.battle-theme-motorsport #battle-widget,
.battle-theme-motorsport #host-battle-widget {
  background: linear-gradient(160deg, #1a0a00 0%, #3d1a00 50%, #1a0a00 100%);
  border-color: #FF6B00;
}
.battle-theme-motorsport .battle-header {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

/* ── Civ-Leaderboard Modal ──────────────────────────────────────────────────── */
.civ-lb-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9800;
}
.civ-lb-box {
  background: rgba(8,8,20,.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  width: min(580px, 94vw);
  max-height: 82vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.civ-lb-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.civ-lb-title   { font-size: .95rem; font-weight: 800; color: #fff; letter-spacing: .06em; flex: 1; }
.civ-lb-period  { display: flex; gap: 5px; }
.civ-lb-period button {
  padding: 3px 10px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.55);
  font-size: .7rem; cursor: pointer; transition: all .15s;
}
.civ-lb-period button.active { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.civ-lb-close {
  background: none; border: none;
  color: rgba(255,255,255,.4); font-size: 1.3rem; cursor: pointer; padding: 0 2px;
}
.civ-lb-list    { overflow-y: auto; flex: 1; }
.civ-lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.civ-lb-row:hover { background: rgba(255,255,255,.03); }
.civ-lb-rank   { font-size: .78rem; color: rgba(255,255,255,.4); width: 22px; text-align: center; font-weight: 700; }
.civ-lb-rank.gold   { color: #FFD700; }
.civ-lb-rank.silver { color: #C0C0C0; }
.civ-lb-rank.bronze { color: #CD7F32; }
.civ-lb-emoji  { font-size: 1.3rem; }
.civ-lb-info   { flex: 1; }
.civ-lb-name   { font-size: .85rem; font-weight: 700; }
.civ-lb-wins   { font-size: .65rem; color: rgba(255,255,255,.45); }
.civ-lb-bar-wrap { width: 90px; height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; }
.civ-lb-bar    { height: 100%; border-radius: 3px; background: var(--civ-color, #6C63FF); }
.civ-lb-pts    { font-size: .68rem; color: rgba(255,255,255,.45); width: 55px; text-align: right; }
.civ-lb-feed   { padding: 10px 20px; border-top: 1px solid rgba(255,255,255,.07); max-height: 100px; overflow-y: auto; }
.civ-lb-feed-title { font-size: .65rem; color: rgba(255,255,255,.35); margin-bottom: 4px; letter-spacing: .06em; }
.civ-lb-feed-item  { font-size: .7rem; color: rgba(255,255,255,.5); padding: 2px 0; }

/* ── Plattform-Widget (Fallback watch.html) — 3D Ring v69 ────────────────── */
.av-podium-wrapper { position:relative; display:flex; flex-direction:column; align-items:center; width:130px; user-select:none; }
.av-podium-platform {
  width:105px; height:105px; border-radius:50%; margin-top:-52px;
  border: 2.5px solid var(--civ-color,#6C63FF);
  background: radial-gradient(circle, rgba(108,99,255,0.3) 0%, transparent 65%);
  box-shadow: 0 0 12px var(--civ-color,#6C63FF), 0 0 28px rgba(108,99,255,.4), inset 0 0 22px rgba(108,99,255,.3);
  transform: perspective(200px) rotateX(72deg);
  position:relative; z-index:0;
  animation: av-ring-pulse 2.8s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOST MOBILE CHAT — Transparenter Chat + Wave-Input + Sinuswelle (v68)
   Nur auf Mobile (max-width: 768px), nur body.host-page
   ══════════════════════════════════════════════════════════════════════════════ */

/* Desktop: Host-Stub versteckt */
.host-chat-stub { display: none; }

@media (max-width: 768px) {

  /* Chat-Overlay: transparent, immersiv wie watch.html */
  body.host-page .chat-overlay {
    position: fixed !important;
    bottom: 70px !important;   /* Platz für host-chat-stub */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 33vh !important;
    height: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none !important;
    z-index: 24 !important;
  }

  /* Chat-Header auf Mobile host ausblenden */
  body.host-page .chat-overlay .chat-overlay-header { display: none !important; }

  /* Chat-Input-Area auf Mobile host ausblenden — Stub übernimmt */
  body.host-page .chat-overlay .chat-input-area { display: none !important; }
  body.host-page .chat-overlay .gift-picker { display: none !important; }

  /* Nachrichten: transparent, lesbar */
  body.host-page .chat-overlay .chat-messages {
    background: transparent !important;
    padding: 8px 10px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    pointer-events: none !important;
    font-size: 0.82rem !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%) !important;
  }

  /* Chat-Overlay immer sichtbar auf Mobile host (nicht auf display:none) */
  body.host-page .chat-overlay { display: flex !important; }

  /* ── Host Chat-Stub ───────────────────────────────────────────── */
  .host-chat-stub {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 66px;
    padding: 0 10px 0 10px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 9000;
    background: transparent;
    gap: 8px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Sinuswelle als Deko-Hintergrund */
  .host-wave-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.7;
  }

  /* Wave-Input: gleicher Stil wie watch.html */
  .host-wave-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    padding: 11px 16px;
    color: rgba(255,255,255,0.92);
    font-size: 16px !important;
    font-family: 'Inter', -apple-system, sans-serif;
    outline: none;
    caret-color: #60a5fa;
    min-height: 44px;
    -webkit-appearance: none;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 1;
  }

  .host-wave-input:focus {
    background: rgba(255,255,255,0.1);
    border-color: rgba(96,165,250,0.5);
    box-shadow: 0 0 0 3px rgba(26,109,255,0.1);
  }

  .host-wave-input::placeholder { color: rgba(255,255,255,0.3); }

  /* focused-State: Sinus-Welle leuchtet auf */
  .host-chat-stub.focused .host-wave-deco { opacity: 1; }
  .host-chat-stub.focused .host-wave-deco path:first-child {
    stroke: rgba(26,109,255,0.35);
  }

  /* Senden-Button */
  .host-stub-send {
    width: 44px;
    height: 44px;
    background: rgba(26,109,255,0.2);
    border: 1px solid rgba(26,109,255,0.35);
    border-radius: 50%;
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .host-stub-send:active {
    background: rgba(26,109,255,0.4);
    transform: scale(0.92);
  }

}
/* ── Ende Host Mobile Chat ── */

/* ── v76: host.html Mobile Layout Fix ───────────────────────────────────────
   Problem: host-chat-stub (fixed, bottom:0, z:9000) überdeckt host-controls
   Lösung:  Controls fixed ganz unten → Stub darüber → Chat-Overlay noch höher
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.host-page .host-controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8980 !important;
    background: var(--bg2) !important;
    border-top: 1px solid var(--border) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 6px !important;
  }

  /* Stub über Controls */
  body.host-page .host-chat-stub {
    bottom: 52px !important;          /* Höhe host-controls ≈ 52px */
    padding-bottom: 0 !important;
    z-index: 8990 !important;
  }

  /* Chat-Overlay über Stub + Controls */
  body.host-page .chat-overlay {
    bottom: 120px !important;         /* 52px controls + 68px stub */
    max-height: 38vh !important;
  }

  /* Video-Area: Platz nach unten für die fixed Bars lassen */
  body.host-page .video-area {
    padding-bottom: 120px !important;
  }

  /* End-Stream Button auf Mobile im Controls-Bar anzeigen */
  body.host-page #btn-end-stream {
    display: inline-flex !important;
    background: var(--danger) !important;
    color: white !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    padding: 5px 10px !important;
  }

  /* Stop-Button im Header auf Mobile verbergen (doppelt) */
  body.host-page .host-mobile-only.btn-cam[onclick="endStream()"] {
    display: none !important;
  }
}

/* ── v77: host.html Responsive — Rail-Breite, Rating-Modal, Touch-Targets ───── */

/* Rating Modal: .rating-buttons (host.html FSK-Auswahl) — 5 → 3 Spalten */
@media (max-width: 480px) {
  .rating-buttons {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  /* Host-Rail: nicht breiter als Bildschirm minus Toggle-Tab */
  #host-rail-panel {
    width: min(160px, calc(100vw - 56px)) !important;
    max-width: min(160px, calc(100vw - 56px)) !important;
  }

  /* Battle-Shortcut im Stats-Bar: Touch-Target mind. 44px */
  #stream-stats-bar .host-mobile-only button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
}

/* ═══ WAVEBLUE MOBILE FIXES (04.04.2026) ═══════════════════════════════ */
@media (max-width: 768px) {
  .admin-overlay {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 130px) !important;
    z-index: 9500 !important;
    overflow-y: auto !important;
  }
  #btn-chat-desktop { display: none !important; }
  #chat-mode-select {
    bottom: 70px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  #mobile-chat-mode-btn { display: flex !important; }
}
@media (min-width: 769px) { #mobile-chat-mode-btn { display: none !important; } }

@keyframes fadeInScale {
  from { opacity:0; transform:translate(-50%,-50%) scale(0.85); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTL LANGUAGE SUPPORT (Arabic, Persian, Hebrew, Urdu)
   ═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}

[dir="rtl"] .wb-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .wb-nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .wb-user-menu {
  flex-direction: row-reverse;
}

[dir="rtl"] .dc-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .dc-tabs {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .chat-input-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .gift-picker-tabs {
  direction: rtl;
}

[dir="rtl"] .stream-card {
  text-align: right;
}

[dir="rtl"] .modal-content {
  text-align: right;
}

[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea {
  text-align: right;
}

[dir="rtl"] .dc-section-hdr {
  flex-direction: row-reverse;
}

/* RTL Font Stack for Arabic, Persian, Hebrew, Urdu */
[lang="ar"],
[lang="fa"],
[lang="ur"],
[lang="he"] {
  font-family: 'Noto Sans Arabic', 'Segoe UI', -apple-system, system-ui, sans-serif;
}

/* RTL Number Formatting */
[dir="rtl"] .viewer-count,
[dir="rtl"] .follower-count,
[dir="rtl"] .credit-amount {
  unicode-bidi: isolate;
}

/* Hide floating orbit button on mobile/tablet (orbit toggle available in header) */
@media (max-width: 1024px) {
  #btn-orbit-float {
    display: none !important;
  }
}

/* ============================================================
   WaveBlue Chat Overlay Mode
   ============================================================ */
.chat-overlay.overlay-mode {
  position: fixed !important;
  bottom: 80px !important;
  right: 0 !important;
  left: 0 !important;
  width: 360px !important;
  max-width: 360px !important;
  top: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
  padding: 0 !important;
}
.chat-overlay.overlay-mode .chat-messages {
  overflow: hidden !important;
  mask-image: linear-gradient(transparent 0%, black 25%) !important;
  -webkit-mask-image: linear-gradient(transparent 0%, black 25%) !important;
  max-height: 40vh !important;
  background: transparent !important;
  border: none !important;
  padding-bottom: 8px;
}
.chat-overlay.overlay-mode .chat-overlay-header {
  display: none !important;
}
.chat-overlay.overlay-mode .chat-input-area {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.6) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px 8px 0 0;
  padding: 8px;
}
.chat-overlay.overlay-mode .chat-msg {
  pointer-events: auto;
}
@keyframes wave-msg-out {
  from {
    opacity: 1;
    max-height: 80px;
    margin-bottom: 6px;
  }
  to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
  }
}
.chat-msg--expiring {
  animation: wave-msg-out 0.5s ease forwards !important;
}

/* ============================================================
   WaveBlue Watch Desktop App-Parity
   Desktop-Watch nutzt wie App/Host ein Video-first Layout:
   Stream vollflaechig, Chat/Stats/Actions als Overlay.
   ============================================================ */
@media (min-width: 769px) {
  body.watch-page {
    overflow: hidden !important;
    background: #000 !important;
  }

  body.watch-page .stream-layout,
  body.watch-page .video-area,
  body.watch-page .video-wrapper,
  body.watch-page .cameras-grid {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.watch-page .video-area,
  body.watch-page .cameras-grid,
  body.watch-page .stream-header {
    right: 0 !important;
  }

  body.watch-page .cameras-grid {
    z-index: 1 !important;
    background: #000 !important;
  }

  body.watch-page .camera-box,
  body.watch-page .camera-box video {
    border-radius: 0 !important;
  }

  body.watch-page .stream-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    padding: 14px 18px 32px !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0.38) 58%, transparent) !important;
    border: 0 !important;
    z-index: 90 !important;
    pointer-events: none !important;
  }

  body.watch-page .stream-header .logo-small,
  body.watch-page .stream-header .header-actions {
    pointer-events: auto !important;
  }

  body.watch-page .stream-header .logo-small {
    background: rgba(0,0,0,0.26) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    padding: 6px 9px !important;
    backdrop-filter: blur(14px) !important;
  }

  body.watch-page .hdr-btn,
  body.watch-page .viewer-count,
  body.watch-page .hdr-wallet {
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,0.34) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(14px) !important;
  }

  body.watch-page #stream-stats-bar {
    position: fixed !important;
    top: 72px !important;
    left: 18px !important;
    right: auto !important;
    z-index: 92 !important;
    display: block !important;
    transform: none !important;
  }

  body.watch-page .stats-glass-card {
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,0.34) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    backdrop-filter: blur(14px) !important;
  }

  body.watch-page .watch-status-rail {
    position: fixed !important;
    top: 50px !important;
    left: 126px !important;
    right: 110px !important;
    height: 54px !important;
    padding: 0 !important;
    gap: 5px !important;
    align-items: flex-start !important;
    z-index: 91 !important;
    background: transparent !important;
    border: 0 !important;
    mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%) !important;
  }

  body.watch-page .watch-status-item {
    width: 40px !important;
    flex-basis: 40px !important;
    gap: 1px !important;
  }

  body.watch-page .watch-status-avatar {
    width: 36px !important;
    height: 36px !important;
    border-width: 2px !important;
  }

  body.watch-page .watch-status-title {
    max-width: 40px !important;
    font-size: 0.54rem !important;
    line-height: 1.05 !important;
  }

  body.watch-page .watch-status-sub {
    display: none !important;
  }

  body.watch-page #chat-overlay {
    position: fixed !important;
    left: 18px !important;
    right: auto !important;
    top: auto !important;
    bottom: 86px !important;
    width: min(420px, 34vw) !important;
    max-width: 420px !important;
    min-width: 300px !important;
    max-height: 38vh !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 80 !important;
  }

  body.watch-page #chat-overlay .chat-overlay-header,
  body.watch-page #chat-overlay .chat-input-area,
  body.watch-page #chat-overlay .gift-picker {
    display: none !important;
  }

  body.watch-page #chat-overlay .chat-messages {
    padding: 0 0 8px !important;
    max-height: 38vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 24%, black 68%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 24%, black 68%) !important;
    scrollbar-width: none !important;
  }

  body.watch-page #chat-overlay .chat-messages::-webkit-scrollbar {
    display: none !important;
  }

  body.watch-page #chat-stub {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    width: min(560px, calc(100vw - 220px)) !important;
    z-index: 95 !important;
    display: flex !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  body.watch-page #chat-stub .wave-input,
  body.watch-page .wave-input {
    width: 100% !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,0.48) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #fff !important;
    box-shadow: 0 10px 34px rgba(0,0,0,0.32) !important;
    backdrop-filter: blur(16px) !important;
  }

  body.watch-page .guest-cam-bar {
    position: fixed !important;
    top: 50% !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 62px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 96 !important;
  }

  body.watch-page .cam-bar-core {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    max-height: 72vh !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
  }

  body.watch-page .cam-bar-core::-webkit-scrollbar {
    display: none !important;
  }

  body.watch-page .cam-bar-core::before {
    display: none !important;
  }

  body.watch-page .orb {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,0.42) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.34) !important;
    backdrop-filter: blur(16px) !important;
  }

  body.watch-page .orb-label {
    display: none !important;
  }

  body.watch-page .cam-bar-expand {
    position: fixed !important;
    top: 50% !important;
    right: 88px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) translateX(8px) !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,0.58) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 97 !important;
  }

  body.watch-page .cam-bar-expand.expanded {
    transform: translateY(-50%) translateX(0) !important;
  }

  body.watch-page #guest-pips {
    position: fixed !important;
    inset: 0 !important;
    z-index: 70 !important;
    pointer-events: none !important;
  }

  body.watch-page .guest-pip {
    pointer-events: auto !important;
  }

  body.watch-page .fs-float-btn {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 96 !important;
    opacity: 1 !important;
  }

  body.watch-page #viewer-reconnect-overlay,
  body.watch-page #no-stream-msg {
    position: fixed !important;
    inset: 0 !important;
  }
}

/* v84: Mobile live watch uses the bottom stub as the only composer. */
@media (max-width: 768px) {
  body.watch-page.chat-immersive-mode #chat-overlay .chat-input-area,
  body.watch-page.chat-immersive-mode #chat-overlay .gift-picker {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.watch-page.chat-immersive-mode #chat-stub {
    display: flex !important;
  }
}

/* v85: Mobile host has exactly one composer row. */
@media (max-width: 768px) {
  body.host-page .host-chat-stub,
  body.host-page.host-mobile-app-mode .host-controls {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.host-page:not(.host-mobile-chat-open) #chat-overlay,
  body.host-page:not(.host-mobile-chat-open) #chat-overlay .chat-input-area,
  body.host-page:not(.host-mobile-chat-open) #chat-overlay .gift-picker {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.host-page.host-mobile-chat-open #mob-bottom-bar,
  body.host-page.host-mobile-chat-open .mob-bottom-bar {
    display: none !important;
  }

  body.host-page.host-mobile-chat-open #chat-overlay {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
    z-index: 9400 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.host-page.host-mobile-chat-open #chat-overlay .chat-overlay-header,
  body.host-page.host-mobile-chat-open #chat-overlay .chat-messages,
  body.host-page.host-mobile-chat-open #chat-overlay #tab-viewers {
    display: none !important;
  }

  body.host-page.host-mobile-chat-open #chat-overlay #tab-chat {
    display: block !important;
  }

  body.host-page.host-mobile-chat-open #chat-overlay .chat-input-area {
    display: flex !important;
    visibility: visible !important;
    pointer-events: all !important;
  }
}

/* v86: Mobile watch composer matches native apps: chat + gift + like + send. */
@media (max-width: 768px) {
  body.watch-page #chat-stub.watch-chat-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 0 10px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.watch-page #chat-stub.watch-chat-actions .wave-input {
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
  }

  body.watch-page #chat-stub.watch-chat-actions .wave-gift-btn,
  body.watch-page #chat-stub.watch-chat-actions .wave-like-btn,
  body.watch-page #chat-stub.watch-chat-actions .wave-send-btn {
    position: static !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    bottom: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.15s, transform 0.1s !important;
  }

  body.watch-page #chat-stub.watch-chat-actions .wave-like-btn {
    background: rgba(236,72,153,0.28) !important;
    border: 1px solid rgba(236,72,153,0.38) !important;
    color: #fff !important;
  }

  body.watch-page #chat-stub.watch-chat-actions .wave-send-btn {
    background: rgba(96,165,250,0.86) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #05070d !important;
  }

  body.watch-page #chat-stub.watch-chat-actions .wave-gift-btn:active,
  body.watch-page #chat-stub.watch-chat-actions .wave-like-btn:active,
  body.watch-page #chat-stub.watch-chat-actions .wave-send-btn:active {
    transform: scale(0.92) !important;
  }

  body.watch-page .guest-cam-bar .orb-gift {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.watch-page #chat-stub.watch-chat-actions {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.watch-page #chat-stub.watch-chat-actions .wave-gift-btn,
  body.watch-page #chat-stub.watch-chat-actions .wave-like-btn,
  body.watch-page #chat-stub.watch-chat-actions .wave-send-btn {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ============================================================
   WaveBlue Chat Reference Layout
   Compact black chat surface from the mobile community reference:
   avatar rail, cyan names, tiny grey timestamps, pill reactions.
   ============================================================ */
.chat-gift-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(17,24,39,0.78);
  color: #eaf6ff;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.chat-gift-level-badge--1 { border-color: rgba(96,165,250,0.22); color: #bfe2ff; }
.chat-gift-level-badge--2 { border-color: rgba(34,211,238,0.28); color: #c7fbff; }
.chat-gift-level-badge--3 { border-color: rgba(251,146,60,0.35); color: #ffe1bd; }
.chat-gift-level-badge--4 { border-color: rgba(125,211,252,0.42); color: #e0f7ff; }
.chat-gift-level-badge--5 { border-color: rgba(250,204,21,0.46); color: #fff1a8; }
.chat-gift-level-icon { font-size: 0.68rem; line-height: 1; }

body.watch-page #chat-messages,
body.host-page #chat-messages,
body.chat-immersive-mode #chat-messages {
  background: transparent !important;
  padding: 9px 10px 8px !important;
  gap: 5px !important;
}

body.watch-page #chat-overlay,
body.host-page #chat-overlay {
  background: rgba(0,0,0,0.72) !important;
}

body.watch-page .chat-msg,
body.host-page .chat-msg,
body.chat-immersive-mode .chat-msg {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: end;
  gap: 7px !important;
  width: 100%;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.watch-page .chat-msg.self,
body.host-page .chat-msg.self,
body.chat-immersive-mode .chat-msg.self {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  align-self: stretch !important;
}

body.watch-page .chat-avatar,
body.host-page .chat-avatar,
body.chat-immersive-mode .chat-avatar {
  width: 28px !important;
  height: 28px !important;
  margin: 0 0 2px !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 0 1px rgba(10,132,255,0.18), 0 3px 10px rgba(0,0,0,0.45) !important;
  font-size: 0.62rem !important;
}

body.watch-page .chat-bubble,
body.host-page .chat-bubble,
body.chat-immersive-mode .chat-bubble,
body.watch-page .chat-msg:not(.self):not(.system) .chat-bubble,
body.host-page .chat-msg:not(.self):not(.system) .chat-bubble,
body.chat-immersive-mode .chat-msg:not(.self):not(.system) .chat-bubble,
body.watch-page .chat-msg.self .chat-bubble,
body.host-page .chat-msg.self .chat-bubble,
body.chat-immersive-mode .chat-msg.self .chat-bubble {
  max-width: min(360px, calc(100vw - 72px)) !important;
  padding: 2px 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.watch-page .chat-msg-header,
body.host-page .chat-msg-header,
body.chat-immersive-mode .chat-msg-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-height: 17px;
  margin: 0 0 1px !important;
}

body.watch-page .chat-msg-badges,
body.host-page .chat-msg-badges,
body.chat-immersive-mode .chat-msg-badges {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  max-width: 100%;
  vertical-align: middle;
}

body.watch-page .chat-role-badge,
body.host-page .chat-role-badge,
body.chat-immersive-mode .chat-role-badge {
  height: 17px;
  display: inline-flex;
  align-items: center;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,0.72);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(235,245,255,0.92);
  font-size: 0.56rem !important;
  font-weight: 900;
  text-transform: none !important;
  line-height: 1 !important;
}

body.watch-page .chat-msg-name,
body.host-page .chat-msg-name,
body.chat-immersive-mode .chat-msg-name {
  color: #44d9ff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}

body.watch-page .chat-msg-time,
body.host-page .chat-msg-time,
body.chat-immersive-mode .chat-msg-time {
  color: rgba(210,220,235,0.46) !important;
  opacity: 1 !important;
  font-size: 0.58rem !important;
  font-weight: 600;
  line-height: 1 !important;
}

body.watch-page .chat-msg-text,
body.host-page .chat-msg-text,
body.chat-immersive-mode .chat-msg-text {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.82rem !important;
  font-weight: 520;
  line-height: 1.36 !important;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}

body.watch-page #chat-overlay,
body.watch-page #chat-overlay .chat-tab-content,
body.watch-page #chat-overlay .chat-messages {
  text-align: left !important;
  justify-items: start !important;
}

body.watch-page #chat-overlay .chat-messages {
  align-items: flex-start !important;
}

body.watch-page #chat-overlay .chat-msg,
body.watch-page #chat-overlay .chat-msg.self,
body.watch-page #chat-overlay .chat-msg.system {
  align-self: flex-start !important;
  justify-self: start !important;
  justify-items: start !important;
  text-align: left !important;
  width: auto !important;
  max-width: min(360px, calc(100vw - 92px)) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.watch-page #chat-overlay .chat-bubble,
body.watch-page #chat-overlay .chat-msg.self .chat-bubble,
body.watch-page #chat-overlay .chat-msg.system .chat-msg-text {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.watch-page .chat-follow-btn,
body.host-page .chat-follow-btn,
body.chat-immersive-mode .chat-follow-btn {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  background: rgba(10,132,255,0.76) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

body.watch-page .reaction-trigger,
body.host-page .reaction-trigger,
body.chat-immersive-mode .reaction-trigger,
body.watch-page .reaction-picker,
body.host-page .reaction-picker,
body.chat-immersive-mode .reaction-picker {
  background: rgba(10,14,24,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}

body.watch-page .reaction-emoji-btn,
body.host-page .reaction-emoji-btn,
body.chat-immersive-mode .reaction-emoji-btn {
  border-radius: 999px !important;
}

.guests-beam-panel {
  position: fixed;
  inset: 0;
  z-index: 2200;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.46);
}

.guests-beam-card {
  width: min(460px, calc(100vw - 20px));
  max-height: min(78vh, 720px);
  margin: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(8,13,24,0.96);
  box-shadow: 0 24px 80px rgba(0,0,0,0.52);
}

.guests-beam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.guests-beam-header strong {
  display: block;
  color: #fff;
  font-size: 1rem;
}

.guests-beam-header span {
  display: block;
  color: rgba(235,245,255,0.56);
  font-size: 0.76rem;
  margin-top: 2px;
}

.guests-beam-header button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

.guests-beam-content {
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guests-beam-section-title {
  color: rgba(235,245,255,0.52);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guests-beam-row,
.guests-beam-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.07);
}

.guests-beam-row-main {
  min-width: 0;
  flex: 1;
}

.guests-beam-row-main strong {
  display: block;
  color: #fff;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guests-beam-row-main span {
  display: block;
  color: rgba(235,245,255,0.56);
  font-size: 0.72rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guests-beam-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.guests-beam-actions button,
.guests-beam-layouts button {
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 7px 9px;
  cursor: pointer;
}

.guests-beam-actions button.ok {
  background: rgba(34,197,94,0.22);
  border-color: rgba(34,197,94,0.45);
  color: #bbf7d0;
}

.guests-beam-actions button.danger {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.42);
  color: #fecaca;
}

.guests-beam-layouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.guests-beam-layouts button.active {
  background: rgba(33,212,253,0.24);
  border-color: rgba(125,246,255,0.55);
  color: #dffbff;
}

.guests-beam-empty {
  padding: 12px;
  border-radius: 13px;
  background: rgba(255,255,255,0.055);
  color: rgba(235,245,255,0.58);
  font-size: 0.78rem;
}

.guests-beam-toggle {
  justify-content: space-between;
}

.guests-beam-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 850;
}

@media (min-width: 760px) {
  .guests-beam-panel {
    align-items: center;
  }
}

/* Mobile WebApp feed/watch: portrait streams must stay portrait and uncropped. */
body.watch-page.watch-feed-portrait .stream-layout {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: #000 !important;
}

body.watch-page.watch-feed-portrait main.video-area,
body.watch-page.watch-feed-portrait .video-area {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(100vw, 56.25dvh) !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  aspect-ratio: 9 / 16 !important;
}

body.watch-page.watch-feed-portrait .video-wrapper,
body.watch-page.watch-feed-portrait .cameras-grid {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

body.watch-page.watch-feed-portrait .camera-box,
body.watch-page.watch-feed-portrait .camera-box video,
body.watch-page.watch-feed-portrait video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  transform: none !important;
}

body.watch-page.watch-feed-portrait .camera-box video,
body.watch-page.watch-feed-portrait video {
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}