/* ===== TIKTOK Index.PHP ===== */
#twitch-live-container {
  position: fixed;
  top: 60px;
  right: 10px;
  width: 340px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.stream-wrapper{
width:340px;
height:200px;
overflow:hidden;
}

/* CONTENEDOR COMPLETO DEL STREAM */
#twitch-live-container > div{

width:340px;

background:rgba(0,0,0,0.75);
border:1px solid rgba(255,255,255,0.08);
border-radius:10px;
backdrop-filter:blur(4px);

box-shadow:
0 0 20px rgba(0,0,0,0.8),
0 0 10px rgba(0,0,0,0.6);

overflow:hidden;

}

.stream-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stream-wrapper iframe::-webkit-scrollbar {
  display: none;
}

.stream-title{
width:100%;
background:linear-gradient(90deg,#111,#1c1c1c);
color:#fff;
font-size:14px;
font-weight:bold;
padding:6px 10px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
position:relative;
z-index:10;

border-bottom:1px solid rgba(255,255,255,0.08);
}

.title-text-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-dot {
  height: 10px;
  width: 10px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,100%{opacity:1;}
  50%{opacity:0;}
}

.close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  border-radius: 3px;
}

.close-btn svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.close-btn:hover {
  background: rgba(255,0,0,0.2);
}

.close-btn:hover svg {
  fill:#ff4d4d;
}

/* BOTÓN TikTok */

#reopen-streams-btn{
position:fixed;
top:8px;
right:10px;
background-color:#000;
color:#fff;
border:2px solid #FE2C55;
padding:8px 12px;
border-radius:30px;
box-shadow:0 4px 12px rgba(0,0,0,0.6);
cursor:pointer;
font-weight:bold;
font-size:13px;
z-index:1100;
display:flex;
align-items:center;
max-width:90vw;
flex-wrap:nowrap;
white-space:nowrap;
}

#reopen-streams-btn:hover{
border-color:#25F4EE;
background-color:#111;
color:#25F4EE;
}

#reopen-streams-btn svg{
width:18px;
height:18px;
margin-right:6px;
fill:white;
overflow:visible;
animation:tiktokBounce 1.8s infinite ease-in-out;
transform-origin:center;
transition:fill .3s ease,animation-duration .3s ease;
}

#reopen-streams-btn:hover svg{
fill:#25F4EE;
animation-duration:.8s;
}

@keyframes tiktokBounce{
0%,100%{transform:scale(1) rotate(0deg);}
50%{transform:scale(1.2) rotate(-5deg);}
}

/* 📱 MOVILES */

@media (max-width:480px){

#reopen-streams-btn{
font-size:10px;
padding:4px 8px;
top:10px;
right:5px;
}

#reopen-streams-btn svg{
width:14px;
height:14px;
margin-right:3px;
}

}

#tiktok-live-hint{
position:fixed;
top:51px;
right:12px;

font-size:12px;
font-weight:bold;
color:#fff;

background:rgba(0,0,0,0.75);
padding:5px 10px;
border-radius:20px;

border:1px solid rgba(255,255,255,0.15);

box-shadow:0 0 10px rgba(0,0,0,0.7);

animation:liveHintPulse 2s infinite;

z-index:1090;
}

@keyframes liveHintPulse{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.05);opacity:.8;}
}

/* OCULTAR SOLO EN MÓVILES */
@media (max-width:480px){
#tiktok-live-hint{
display:none !important;
}
}