:root {

  --bg-color: #0a0a12;

  --card-bg: rgba(20, 20, 35, 0.8);

  --neon-purple: #bd00ff;

  --neon-blue: #00f0ff;

  --neon-green: #00ff66;

  --neon-red: #ff0055;

  --text-color: #ffffff;

  --tiktok-cyan: #00f0ff;

  --tiktok-pink: #ff0050;

  --merch-purple-dark: #8a00e6;

}

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

  background-color: var(--bg-color);

  color: var(--text-color);

  min-height: 100vh;

  overflow-x: hidden;

  overflow-y: auto;

}

.grid-background {

  position: fixed;

  top: 0; left: 0; width: 100%; height: 100%;

  background-image: linear-gradient(rgba(189, 0, 255, 0.05) 1px, transparent 1px),

                    linear-gradient(90deg, rgba(189, 0, 255, 0.05) 1px, transparent 1px);

  background-size: 40px 40px;

  z-index: -1;

}

#app {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  padding: 15px;

  position: relative;

  z-index: 2;

}

.card {

  background: var(--card-bg);

  border: 2px solid var(--neon-purple);

  box-shadow: 0 0 20px rgba(189, 0, 255, 0.2);

  border-radius: 20px;

  padding: 30px;

  text-align: center;

  backdrop-filter: blur(10px);

}

/* מסך כניסה */
.login-card {
  max-width: 550px;
  width: 100%;
  padding: 60px 40px;
  border: 2px solid var(--neon-purple);
  box-shadow: 0 0 40px rgba(189, 0, 255, 0.4), 0 0 80px rgba(189, 0, 255, 0.15);
  animation: loginCardPulse 3s infinite alternate ease-in-out;
}

@keyframes loginCardPulse {
  0% { box-shadow: 0 0 30px rgba(189, 0, 255, 0.3), 0 0 60px rgba(189, 0, 255, 0.1); }
  100% { box-shadow: 0 0 50px rgba(189, 0, 255, 0.6), 0 0 100px rgba(189, 0, 255, 0.25); }
}

.login-title {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--neon-purple);
  text-shadow: 0 0 20px rgba(189, 0, 255, 0.9), 0 0 40px rgba(189, 0, 255, 0.5);
  margin-bottom: 40px;
  animation: titleGlow 2s infinite alternate ease-in-out;
}

@keyframes titleGlow {
  0% { text-shadow: 0 0 15px rgba(189, 0, 255, 0.7), 0 0 30px rgba(189, 0, 255, 0.3); }
  100% { text-shadow: 0 0 30px rgba(189, 0, 255, 1), 0 0 60px rgba(189, 0, 255, 0.6), 0 0 80px rgba(189, 0, 255, 0.3); }
}

.login-btn {
  width: 100%;
  padding: 18px 40px;
  font-size: 22px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  color: #fff;
  background: var(--neon-purple);
  border: none;
  box-shadow: 0 0 25px rgba(189, 0, 255, 0.7), 0 0 50px rgba(189, 0, 255, 0.3);
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.login-btn:hover {
  background: #d400ff;
  box-shadow: 0 0 40px rgba(189, 0, 255, 1), 0 0 80px rgba(189, 0, 255, 0.5);
  transform: translateY(-2px);
}

.login-btn:active {
  transform: translateY(1px);
}

#main-interface {

  width: 100%;

  max-width: 1800px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 15px;

  transition: all 0.3s ease;

}

.video-grid {

  display: flex !important;

  /* row-reverse: אלמנט ראשון בHTML = ימין, שני = שמאל — עובד ב-RTL וב-LTR */
  flex-direction: row-reverse !important;

  justify-content: center !important;

  align-items: center !important;

  width: 100% !important;

  max-width: 1800px !important;

  gap: 20px !important;

  margin: 10px auto !important;

  transition: all 0.3s ease;

  flex: 1;

  min-height: 0;

}

/* LocalVideo (אתה) — תמיד ימין (שני ב-HTML = ימין ב-row-reverse) */
.video-grid > .video-wrapper:not(#remote-video-wrapper) {
  /* ימין באופן טבעי מ-row-reverse */
}

/* RemoteVideo (צופה) — תמיד שמאל (ראשון ב-HTML = שמאל ב-row-reverse) */
#remote-video-wrapper {
  /* שמאל באופן טבעי מ-row-reverse */
}

.video-wrapper {

  flex: 1 !important;

  width: 100% !important;

  max-width: 1100px !important;

  aspect-ratio: 16 / 9 !important;

  border-radius: 20px !important;

  box-shadow: 0 0 35px rgba(189, 0, 255, 0.45) !important;

  border: 2px solid rgba(189, 0, 255, 0.4) !important;

  position: relative !important;

  overflow: hidden !important;

  background: #000 !important;

  transition: all 0.3s ease;

}

.video-wrapper video {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

  border-radius: 18px !important;

}

.video-label {

  display: none !important;

}

.controls-area {

  display: flex;

  justify-content: center;

  gap: 25px;

  flex-direction: row-reverse; 

  margin-top: 5px;

  margin-bottom: 20px;

  transition: opacity 0.2s ease;

}

.neon-btn {

  padding: 18px 75px;

  font-size: 26px;

  font-weight: bold;

  border-radius: 12px;

  cursor: pointer;

  color: #fff;

  position: relative;

  overflow: hidden;

  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

  background: rgba(255, 255, 255, 0.07) !important;

  backdrop-filter: blur(20px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

  border: 2px solid rgba(255, 255, 255, 0.2);

}

.neon-btn.green { 
  border: 2px solid rgba(0, 255, 102, 0.75) !important;
  box-shadow:
    0 0 14px rgba(0, 255, 102, 0.55),
    0 0 35px rgba(0, 255, 102, 0.22),
    inset 0 0 14px rgba(0, 255, 102, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18);
  animation: greenBtnPulse 2.2s infinite alternate ease-in-out;
  position: relative;
  overflow: hidden;
}
.neon-btn.green::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,255,102,0.10) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes greenBtnPulse {
  0% {
    border-color: rgba(0,255,102,0.65) !important;
    box-shadow: 0 0 10px rgba(0,255,102,0.50), 0 0 28px rgba(0,255,102,0.18), inset 0 0 10px rgba(0,255,102,0.10);
  }
  100% {
    border-color: rgba(0,255,102,1) !important;
    box-shadow: 0 0 22px rgba(0,255,102,0.90), 0 0 55px rgba(0,255,102,0.32), inset 0 0 20px rgba(0,255,102,0.18);
  }
}

.neon-btn.green:hover { 
  background: linear-gradient(135deg, rgba(0,255,102,0.85), rgba(0,200,70,0.95)) !important;
  color: #000; 
  font-weight: 800;
  border-color: var(--neon-green) !important;
  box-shadow:
    0 0 40px rgba(0,255,102,1),
    0 0 80px rgba(0,255,102,0.45),
    inset 0 0 25px rgba(0,255,102,0.25) !important;
  text-shadow: none;
  transform: translateY(-3px) scale(1.02);
  animation-play-state: paused;
}

.neon-btn.red { 
  border: 2px solid rgba(255, 0, 85, 0.75) !important;
  box-shadow:
    0 0 14px rgba(255, 0, 85, 0.55),
    0 0 35px rgba(255, 0, 85, 0.22),
    inset 0 0 14px rgba(255, 0, 85, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18);
  animation: redBtnPulse 2.4s infinite alternate ease-in-out;
  position: relative;
  overflow: hidden;
}
.neon-btn.red::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,0,85,0.10) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes redBtnPulse {
  0% {
    border-color: rgba(255,0,85,0.65) !important;
    box-shadow: 0 0 10px rgba(255,0,85,0.50), 0 0 28px rgba(255,0,85,0.18), inset 0 0 10px rgba(255,0,85,0.10);
  }
  100% {
    border-color: rgba(255,0,85,1) !important;
    box-shadow: 0 0 22px rgba(255,0,85,0.90), 0 0 55px rgba(255,0,85,0.32), inset 0 0 20px rgba(255,0,85,0.18);
  }
}

.neon-btn.red:hover { 
  background: linear-gradient(135deg, rgba(255,0,85,0.90), rgba(200,0,55,0.95)) !important;
  color: #fff;
  border-color: var(--neon-red) !important;
  box-shadow:
    0 0 40px rgba(255,0,85,1),
    0 0 80px rgba(255,0,85,0.45),
    inset 0 0 25px rgba(255,0,85,0.25) !important;
  transform: translateY(-3px) scale(1.02);
  animation-play-state: paused;
}

.neon-btn:active { transform: translateY(1px) scale(0.99); }

.social-container {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 25px; 

  margin-top: 5px;

  padding: 10px 0;

  padding-bottom: 20px;

  width: 100%;

  max-width: 1800px;

  margin-left: auto;

  margin-right: auto;

  direction: ltr;

  position: relative !important;

  z-index: 10 !important;

}

.social-btn {

  display: flex;

  align-items: center;

  justify-content: center; 

  gap: 15px; 

  flex: 1; 

  max-width: 420px; 

  height: 65px; 

  padding: 0 25px; 

  /* ── זכוכית חלב ניאון עמוק ── */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(200,180,255,0.07) 40%,
    rgba(0,240,255,0.05) 100%
  ) !important;

  backdrop-filter: blur(32px) saturate(220%) brightness(1.08) !important;

  -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(1.08) !important;

  /* ── קצוות מעוגלים ── */
  border-radius: 18px;

  /* ── גבול ניאון ── */
  border: 1.5px solid rgba(255,255,255,0.18) !important;

  /* shine פנימי */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    inset 0 0 30px rgba(189,0,255,0.06);

  color: #ffffff !important;

  text-decoration: none;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;

  direction: rtl;

}

/* ── shine layer על כל כפתור ── */
.social-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.09) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 6;
  animation: socialShineSlide 5s infinite linear;
}

@keyframes socialShineSlide {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* ── עטיפת ניאון תמידית מסביב לכל כפתור ── */
.social-btn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.3s;
}

.social-username {

  font-weight: bold;

  font-size: 23px; 

  white-space: nowrap;

  letter-spacing: 0.5px;

  z-index: 5;

  color: #ffffff !important;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); 

}

.social-btn .main-icon {

  font-size: 26px; 

  z-index: 5;

  color: #ffffff !important;

}

.logos-overflow {

  position: absolute;

  top: 0; left: 0; width: 100%; height: 100%;

  z-index: 1; pointer-events: none; opacity: 0.65;

  transition: opacity 0.3s ease;

  overflow: hidden;

}

.logos-overflow i, .logos-overflow img {

  position: absolute;
  font-size: 18px !important;

  animation: swarmChaos 2.8s infinite ease-in-out alternate;

  will-change: transform;

}

.social-btn:hover .logos-overflow { opacity: 0.9; }

.social-btn:hover .logos-overflow i,

.social-btn:hover .logos-overflow img { animation: none !important; }

.instagram .logos-overflow i { color: #fd5949; }

.instagram .logos-overflow i:nth-child(2n) { color: #d6249f; }

.instagram .logos-overflow i:nth-child(3n) { color: #fdf497; }

.tiktok .logos-overflow i { color: var(--tiktok-cyan); }

.tiktok .logos-overflow i:nth-child(2n) { color: var(--tiktok-pink); }

.tiktok .logos-overflow i:nth-child(3n) { color: #ffffff; }

.whatsapp .logos-overflow i { color: #25D366; }

.whatsapp .logos-overflow i:nth-child(2n) { color: #128C7E; }

.whatsapp .logos-overflow i:nth-child(3n) { color: #DCF8C6; }

/* שינוי לוגו המרצ'נדייז לשחור */

.merch-img-icon {

  width: 32px;

  height: 32px;

  object-fit: contain;

  z-index: 5;

  filter: brightness(0);

}

.merch-img-icon {

  width: 32px;

  height: 32px;

  object-fit: contain;

  z-index: 5;

  /* הוספת השורה הזו תהפוך את הלוגו השחור ללבן זוהר */

  filter: invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));

}

.merch-bg-video {

  position: absolute;

  top: 0; 

  left: 0;

  width: 100% !important; 

  height: 100% !important;

  object-fit: cover !important;

  z-index: 1;

  opacity: 0.4;

  transition: opacity 0.3s ease;

  border-radius: 18px;
  clip-path: inset(0 round 18px);

}

.social-btn.merch .social-username,

.social-btn.merch .merch-img-icon {

  position: relative;

  z-index: 5;

}

.social-btn.merch .logos-overflow {

  z-index: 2;

  opacity: 0.35;

}

/* אימוג'ים של המרצ'נדייז - צבע שחור */

.merch-warm-icon {

  filter: brightness(0);

}

.social-btn.instagram {
  animation: instagramSuperGlow 2.2s infinite alternate ease-in-out;
  border-color: rgba(214,36,159,0.85) !important;
}
.social-btn.tiktok {
  animation: tiktokSuperGlow 2.6s infinite alternate ease-in-out;
  border-color: rgba(0,240,255,0.85) !important;
}
.social-btn.whatsapp {
  animation: whatsappSuperGlow 2.4s infinite alternate ease-in-out;
  border-color: rgba(37,211,102,0.85) !important;
}
.social-btn.merch {
  animation: merchSuperGlow 2.3s infinite alternate ease-in-out;
  border-color: rgba(189,0,255,0.85) !important;
}

/* ── 3D mode ── */
.social-container.mode-3d { perspective: 1200px; }
.social-container.mode-3d .social-btn {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease !important;
}
.social-container.mode-3d .social-btn:hover {
  transform: rotateX(-6deg) rotateY(4deg) scale(1.05) translateZ(12px) !important;
  animation-play-state: paused;
}

.social-btn:hover .logos-overflow { opacity: 0.85; }

.social-btn.instagram:hover {

  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;

  border-color: transparent !important;

  box-shadow: 0 0 40px rgba(214, 36, 159, 0.95), 0 0 15px rgba(214, 36, 159, 0.5) !important;

}

.social-btn.whatsapp:hover {

  background: #25D366 !important;

  border-color: #25D366 !important;

  box-shadow: 0 0 40px rgba(37, 211, 102, 0.95), 0 0 15px rgba(37, 211, 102, 0.5) !important;

}

.social-btn.merch:hover {

  background: linear-gradient(135deg, var(--neon-purple) 0%, var(--merch-purple-dark) 100%) !important;

  border-color: transparent !important;

  box-shadow: 0 0 40px rgba(189, 0, 255, 0.95), 0 0 15px rgba(138, 0, 230, 0.6) !important;

}

.social-btn.merch:hover .merch-bg-video {

  opacity: 0.75;

}

.social-btn.tiktok:hover {

  background: rgba(10, 10, 18, 0.95) !important; 

  border-color: var(--tiktok-cyan) !important;

  animation: tiktokSmoothSuperGlow 0.6s infinite ease-in-out alternate;

}

.social-btn.tiktok:hover .main-icon {

  animation: tiktokIconGlitch 0.1s infinite;

  color: #fff !important;

  text-shadow: -2px -2px 0px var(--tiktok-cyan), 2px 2px 0px var(--tiktok-pink);

}

/* עדכון האנימציה לתנועה עננית, רנדומלית ואורגנית הכוללת סיבוב ושינויי כיוון מורכבים */
@keyframes swarmChaos {

  0% { 
    transform: translate(0, 0) rotate(0deg) scale(0.85); 
  }

  25% { 
    transform: translate(6px, -5px) rotate(3deg) scale(1.05); 
  }

  50% { 
    transform: translate(-5px, 7px) rotate(-2deg) scale(0.95); 
  }

  75% { 
    transform: translate(-8px, -4px) rotate(4deg) scale(1.1); 
  }

  100% { 
    transform: translate(6px, 5px) rotate(-3deg) scale(0.85); 
  }

}

@keyframes tiktokSmoothSuperGlow {

  0% { box-shadow: -6px -6px 30px rgba(0, 240, 255, 0.85), 6px 6px 30px rgba(255, 0, 80, 0.6); }

  100% { box-shadow: -3px -3px 25px rgba(0, 240, 255, 0.5), 7px 7px 40px rgba(255, 0, 80, 0.95); }

}

@keyframes merchSuperGlow {
  0% {
    border-color: rgba(189,0,255,0.75) !important;
    box-shadow:
      0 0 12px rgba(189,0,255,0.70),
      0 0 28px rgba(138,0,230,0.38),
      0 0 55px rgba(189,0,255,0.16),
      inset 0 0 14px rgba(189,0,255,0.10);
  }
  100% {
    border-color: rgba(189,0,255,1) !important;
    box-shadow:
      0 0 22px rgba(189,0,255,1),
      0 0 50px rgba(138,0,230,0.60),
      0 0 90px rgba(189,0,255,0.26),
      inset 0 0 22px rgba(189,0,255,0.16);
  }
}

@keyframes tiktokIconGlitch {

  0% { transform: translate(0); text-shadow: -2px -2px 0px var(--tiktok-cyan), 2px 2px 0px var(--tiktok-pink); }

  50% { transform: translate(-1px, 1px); text-shadow: -1px -3px 0px var(--tiktok-cyan), 3px 1px 0px var(--tiktok-pink); }

  100% { transform: translate(0); text-shadow: -2px -2px 0px var(--tiktok-cyan), 2px 2px 0px var(--tiktok-pink); }

}

@keyframes instagramSuperGlow {
  0% {
    border-color: rgba(214,36,159,0.75) !important;
    box-shadow:
      0 0 12px rgba(214,36,159,0.7),
      0 0 28px rgba(214,36,159,0.40),
      0 0 55px rgba(253,89,73,0.18),
      inset 0 0 14px rgba(214,36,159,0.12);
  }
  100% {
    border-color: rgba(214,36,159,1) !important;
    box-shadow:
      0 0 22px rgba(214,36,159,1),
      0 0 50px rgba(214,36,159,0.60),
      0 0 90px rgba(253,89,73,0.28),
      inset 0 0 22px rgba(214,36,159,0.18);
  }
}

@keyframes tiktokSuperGlow {
  0% {
    border-color: rgba(0,240,255,0.75) !important;
    box-shadow:
      0 0 12px rgba(0,240,255,0.7),
      0 0 28px rgba(255,0,80,0.30),
      0 0 55px rgba(0,240,255,0.16),
      inset 0 0 14px rgba(0,240,255,0.10);
  }
  100% {
    border-color: rgba(255,0,80,1) !important;
    box-shadow:
      0 0 22px rgba(255,0,80,1),
      0 0 50px rgba(0,240,255,0.55),
      0 0 90px rgba(255,0,80,0.28),
      inset 0 0 22px rgba(0,240,255,0.16);
  }
}

@keyframes whatsappSuperGlow {
  0% {
    border-color: rgba(37,211,102,0.75) !important;
    box-shadow:
      0 0 12px rgba(37,211,102,0.7),
      0 0 28px rgba(37,211,102,0.35),
      0 0 55px rgba(18,140,126,0.16),
      inset 0 0 14px rgba(37,211,102,0.10);
  }
  100% {
    border-color: rgba(37,211,102,1) !important;
    box-shadow:
      0 0 22px rgba(37,211,102,1),
      0 0 50px rgba(37,211,102,0.55),
      0 0 90px rgba(18,140,126,0.24),
      inset 0 0 22px rgba(37,211,102,0.16);
  }
}

@media (max-width: 768px) {

  body {
    overflow-y: auto !important;
    min-height: 100svh;
  }

  #app {
    min-height: 100svh;
    padding-bottom: 30px;
  }

  #main-interface {
    padding: 0 12px 30px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    min-height: auto !important;
  }

  .header-logo-wrapper {
    margin-top: 12px !important;
  }

  .video-grid {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .video-wrapper {
    width: 100% !important;
    height: 220px !important;
  }

  .social-container {
    flex-direction: column !important;
    gap: 12px !important;
    position: static !important;
    height: auto !important;
    padding: 0 0 20px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .social-btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
  }

  .social-username {
    font-size: 17px !important;
  }

  .neon-btn { padding: 12px 40px; font-size: 18px; }

}

#loading-overlay {

  position: absolute !important;

  top: 0; left: 0; width: 100%; height: 100%;

  background: rgba(6, 6, 12, 0.85) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  display: flex; flex-direction: column !important;

  justify-content: center !important; align-items: center !important;

  color: #ffffff !important; font-size: 18px !important; font-weight: bold !important;

  z-index: 100 !important; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;

}

.loading-hidden { display: none !important; }

.spinner {

  width: 55px !important; height: 55px !important;

  border: 4px solid rgba(0, 240, 255, 0.1) !important;

  border-top: 4px solid var(--neon-blue) !important;

  border-radius: 50% !important;

  animation: spinLoader 1s linear infinite !important;

  margin-bottom: 18px !important;

  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.2) !important;

}

@keyframes spinLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.m-mode-active .controls-area { display: none !important; }

.m-mode-active .video-grid { height: 100% !important; width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 10px !important; }

.video-wrapper.maximized-stream { flex: none !important; width: 100% !important; max-width: 100% !important; height: calc(100vh - 150px) !important; border: 3px solid var(--neon-purple) !important; box-shadow: 0 0 45px rgba(189, 0, 255, 0.7), inset 0 0 25px rgba(189, 0, 255, 0.4) !important; margin: 0 auto !important; border-radius: 20px !important; overflow: hidden !important; position: relative !important; }

.video-wrapper.maximized-stream video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 18px !important; }

/* לוגו קבוע בחלק העליון */
.header-logo-wrapper {
    position: fixed;
    top: 30px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
}

.header-logo {
    width: 320px; 
    max-width: 65vw;
    height: auto !important; 
    object-fit: contain !important;
    filter:
      drop-shadow(0 0 8px rgba(189,0,255,1))
      drop-shadow(0 0 20px rgba(189,0,255,0.85))
      drop-shadow(0 0 45px rgba(189,0,255,0.55))
      drop-shadow(0 0 80px rgba(189,0,255,0.3));
    animation: logoNeonPulse 2.8s ease-in-out infinite;
    transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

@keyframes logoNeonPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(189,0,255,1))
      drop-shadow(0 0 22px rgba(189,0,255,0.85))
      drop-shadow(0 0 50px rgba(189,0,255,0.5))
      drop-shadow(0 0 90px rgba(189,0,255,0.25));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(210,80,255,1))
      drop-shadow(0 0 35px rgba(189,0,255,1))
      drop-shadow(0 0 75px rgba(189,0,255,0.7))
      drop-shadow(0 0 130px rgba(189,0,255,0.4));
  }
}
/* ========== תוספות גרסה 13 ========== */

/* הורדת כפתורי סושיאל למטה - יותר רווח מעל */
.social-container {
  margin-top: auto !important;
  padding-top: 18px !important;
  padding-bottom: 22px !important;
}

/* תיקון גובה main-interface */
#main-interface {
  height: 100vh;
  justify-content: space-between !important;
  padding-top: 0 !important;
  padding-bottom: 15px !important;
}

/* ======================== */
/* מסגרת ניאון - שידור סגור */
/* ======================== */
#broadcast-closed-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8888;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.92);
}
#broadcast-closed-screen.visible {
  display: flex;
}

.closed-neon-frame {
  position: relative;
  width: min(80vw, 700px);
  aspect-ratio: 16/9;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid var(--neon-purple);
  box-shadow:
    0 0 30px rgba(189,0,255,0.8),
    0 0 70px rgba(189,0,255,0.4),
    0 0 120px rgba(189,0,255,0.2),
    inset 0 0 40px rgba(189,0,255,0.15);
  animation: closedFramePulse 2.5s infinite alternate ease-in-out;
}

@keyframes closedFramePulse {
  0% {
    box-shadow: 0 0 25px rgba(189,0,255,0.7), 0 0 60px rgba(189,0,255,0.3), 0 0 100px rgba(189,0,255,0.15), inset 0 0 30px rgba(189,0,255,0.1);
  }
  100% {
    box-shadow: 0 0 50px rgba(189,0,255,1), 0 0 100px rgba(189,0,255,0.5), 0 0 160px rgba(189,0,255,0.3), inset 0 0 60px rgba(189,0,255,0.25);
  }
}

.closed-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.closed-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(189,0,255,0.08) 0%, rgba(0,0,0,0.5) 100%);
}

.closed-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  text-align: center;
}

.closed-logo-wrap { margin-bottom: 16px; }
.closed-logo {
  width: min(280px, 55%);
  filter: drop-shadow(0 0 15px rgba(189,0,255,0.9)) drop-shadow(0 0 30px rgba(189,0,255,0.5));
}

.closed-text {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 15px rgba(189,0,255,0.9), 0 0 30px rgba(189,0,255,0.5);
  margin-bottom: 8px;
}

.closed-subtext {
  font-size: clamp(12px, 1.5vw, 15px);
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}

.closed-socials {
  display: flex;
  gap: 18px;
}

.closed-social-link {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #fff;
  border: 1px solid rgba(189,0,255,0.4);
  background: rgba(189,0,255,0.1);
  text-decoration: none;
  transition: all 0.3s;
}
.closed-social-link:hover {
  background: var(--neon-purple);
  border-color: var(--neon-purple);
  box-shadow: 0 0 15px rgba(189,0,255,0.7);
  transform: translateY(-2px);
}

/* ===== תיקון אנימציות הסושיאל ===== */
/* הסרת ה-animation מה-CSS הישן על logos-overflow i כי ה-JS יטפל בזה */
.logos-overflow i, .logos-overflow img {
  animation: none; /* ה-JS מגדיר כל אחד בנפרד */
  will-change: transform;
}

/* הוספת וריאציות אנימציה חסרות */
@keyframes swarmChaos2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-8px, 6px) rotate(-4deg) scale(0.9); }
  66% { transform: translate(5px, -8px) rotate(2deg) scale(1.1); }
  100% { transform: translate(7px, 4px) rotate(-2deg) scale(0.95); }
}
@keyframes swarmChaos3 {
  0% { transform: translate(3px, -3px) rotate(1deg) scale(0.9); }
  40% { transform: translate(-6px, -7px) rotate(-3deg) scale(1.05); }
  70% { transform: translate(8px, 3px) rotate(5deg) scale(0.85); }
  100% { transform: translate(-4px, 6px) rotate(-1deg) scale(1.1); }
}
@keyframes swarmChaos4 {
  0% { transform: translate(-4px, 4px) rotate(2deg) scale(1.05); }
  30% { transform: translate(7px, -5px) rotate(-5deg) scale(0.9); }
  60% { transform: translate(-3px, -6px) rotate(3deg) scale(1.1); }
  100% { transform: translate(5px, 2px) rotate(-2deg) scale(0.92); }
}
/* ================================================
   INTRO — ניאון burst + זכוכית
   ================================================ */
/* ====== INTRO OVERLAY — עיגול + גלי ניאון ====== */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#intro-overlay.hidden { display: none !important; pointer-events: none !important; }

/* canvas לפיצוץ חלקיקים */
#intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* בסט הגלים — מאחורי הלוגו */
#intro-neon-burst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* גלי ניאון מתרחבים */
#intro-neon-burst::before,
#intro-neon-burst::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(189,0,255,0.7);
  animation: introWaveExpand 2s ease-out infinite;
}
#intro-neon-burst::before {
  width: 160px; height: 160px;
  animation-delay: 0s;
}
#intro-neon-burst::after {
  width: 160px; height: 160px;
  animation-delay: 0.5s;
}

/* גלים נוספים דרך pseudo על ה-overlay */
.intro-wave {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(189,0,255,0.5);
  width: 160px; height: 160px;
  animation: introWaveExpand 2s ease-out infinite;
  pointer-events: none;
}
.intro-wave:nth-child(1) { animation-delay: 0s; }
.intro-wave:nth-child(2) { animation-delay: 0.4s; }
.intro-wave:nth-child(3) { animation-delay: 0.8s; }
.intro-wave:nth-child(4) { animation-delay: 1.2s; }

@keyframes introWaveExpand {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(4.5); opacity: 0;   }
}

/* פאנל — רק עיגול, ללא קוביה */
#intro-glass-panel {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  transform: scale(0.5);
  transition: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#intro-glass-panel.active {
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.18,2.0,0.4,0.9);
  opacity: 1;
  transform: scale(1);
}

/* ברק — מבוטל (אין קוביה) */
#intro-glass-shine { display: none; }

/* ── לוגו עיגול ── */
#intro-glass-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(189,0,255,0.9);
  box-shadow:
    0 0 20px rgba(189,0,255,1),
    0 0 50px rgba(189,0,255,0.7),
    0 0 100px rgba(189,0,255,0.35);
  opacity: 0;
  transform: scale(0.3);
  transition: none;
  position: relative;
  z-index: 3;
}
#intro-glass-panel.active #intro-glass-avatar {
  transition: opacity 0.4s ease 0.15s, transform 0.55s cubic-bezier(0.18,2.2,0.4,0.85) 0.15s;
  opacity: 1;
  transform: scale(1);
}

/* ── ניאון עדין על כפתורי סושיאל ── */
/* duplicate social animations removed – handled above */

@keyframes socialSoftNeon {
  0%   { box-shadow: 0 0 8px  rgba(189,0,255,0.15), 0 2px 12px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 0 18px rgba(189,0,255,0.35), 0 2px 12px rgba(0,0,0,0.4); }
}
.m-mode-active .social-container {
  display: none !important;
}
.m-mode-active .header-logo {
  width: 160px !important;
}
.m-mode-active .header-logo-wrapper {
  top: 8px !important;
}


/* ================================================
   YouTube Player + GPT Overlay
   ================================================ */

/* נגן YouTube */
#yt-player-wrap {
  background: #000;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

#yt-player-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: 0 0 40px rgba(189,0,255,0.3);
}

/* GPT Overlay */
#gpt-overlay {
  z-index: 88888;
}

#gpt-messages::-webkit-scrollbar { width: 4px; }
#gpt-messages::-webkit-scrollbar-track { background: transparent; }
#gpt-messages::-webkit-scrollbar-thumb { background: rgba(189,0,255,0.3); border-radius: 2px; }

#gpt-input::-webkit-scrollbar { width: 3px; }
#gpt-input::-webkit-scrollbar-thumb { background: rgba(189,0,255,0.2); }

/* Toast מעבר מצב */
#mode-toast {
  font-family: 'Segoe UI', sans-serif;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* אנימציה על כפתור voice */
#gpt-voice-btn:hover { filter: brightness(1.3); }
#gpt-send-btn:hover  { transform: scale(1.05); }

/* --- עיצוב חלב זכוכית ניאון לצ'אט GPT --- */
#gpt-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(5, 5, 18, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    justify-content: center;
    align-items: center;
}
#gpt-panel {
    background: rgba(18, 10, 35, 0.82) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1.5px solid rgba(189, 0, 255, 0.55) !important;
    border-radius: 28px !important;
    box-shadow:
        0 0 0 1px rgba(189, 0, 255, 0.15),
        0 0 40px rgba(189, 0, 255, 0.35),
        0 0 80px rgba(189, 0, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    width: min(640px, 92vw) !important;
    max-height: 82vh !important;
    position: relative;
    overflow: hidden !important;
}
/* שכבת ניאון עליונה בתוך הפאנל */
#gpt-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(189,0,255,0.8), rgba(147,0,255,0.6), transparent);
    z-index: 1;
}
#gpt-response {
    margin-top: 15px;
    font-size: 15px;
    color: #fff;
    min-height: 50px;
}
/* ===== אדמין — YouTube מוסתר לגמרי ===== */
.video-grid[data-admin="true"] #yt-player-wrap,
.video-grid[data-admin="true"] #yt-iframe {
  display: none !important;
  visibility: hidden !important;
}