/* FINAL theme (gradient blue + glass) */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",sans-serif; }
html,body { height:100%; }
body {
  background: linear-gradient(135deg,#0033ff,#00eaff,#0052ff);
  background-size:300% 300%; animation: gradientMove 12s linear infinite alternate;
  color:#fff; text-align:center; min-height:100vh;
}
@keyframes gradientMove { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
#app{ padding:14px; max-width:1100px; margin:0 auto; }

header { margin-bottom:12px; }
h1{ font-size:30px; font-weight:700; text-shadow:0 0 12px rgba(255,255,255,0.7) }
#statusTop{ margin-top:6px; opacity:0.95; font-size:14px; }

/* video layout */
.video-wrap{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:10px 0 18px; }
.video-card{
  background: rgba(255,255,255,0.06); border-radius:16px; padding:10px; width:360px;
  border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
.label{ font-size:13px; margin-bottom:6px; color:#dff; }
.video-box{ width:100%; height:260px; position:relative; overflow:hidden; border-radius:12px; background:#000; }
video{ width:100%; height:100%; object-fit:cover; display:block; }

/* stickers overlay */
.sticker{
  position:absolute;
  width:120px;
  max-width:30%;
  max-height:30%;
  bottom:12px;
  right:12px;
  border-radius:8px;
  pointer-events:none;
  box-shadow:0 6px 14px rgba(0,0,0,0.45);
}

/* controls */
.controls, .extras{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
button{
  padding:10px 18px; border-radius:12px; border:none; cursor:pointer; font-weight:600;
  /* improved contrast: darker text on lighter control */
  background:rgba(255,255,255,0.12);
  color:#012a6b; font-size:15px; transition:0.18s; box-shadow:0 6px 16px rgba(0,0,0,0.22);
}
button:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,0.35); }
button.primary{
  background:linear-gradient(90deg,#00f7ff,#0066ff);
  color:#002b66;
  box-shadow:0 10px 28px rgba(0,195,255,0.18);
}

/* small control group */
.center-controls{ display:flex; align-items:center; gap:8px; }
#timer{ font-weight:700; background:rgba(0,0,0,0.25); padding:6px 10px; border-radius:8px; color:#e6f7ff; }

/* chat */
.chat{ width:360px; background:rgba(255,255,255,0.04); padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); }
#chatBox{ height:180px; overflow:auto; padding:8px; background:rgba(0,0,0,0.18); border-radius:8px; text-align:left; }
.chat-controls{ display:flex; gap:8px; margin-top:8px; }
#chatInput{ flex:1; padding:10px; border-radius:10px; border:none; outline:none; }

/* tools */
.tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tools select, .tools input[type="text"] {
  padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02);
  color: #fff; outline:none; min-width:90px;
}
.tools label { display:block; font-size:12px; margin-bottom:4px; color:rgba(230,240,255,0.9); }

/* file label (keeps default behaviour) */
.file-label input{ display:inline-block; }

/* centered searching animation overlay */
#searchAnim{
  display:none;
  position:fixed;
  left:0; right:0; top:0; bottom:0;
  margin:auto;
  width:240px; height:80px;
  background:rgba(0,0,0,0.35);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
  font-size:18px;
  animation:pulse 1s infinite;
  color:#fff;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* subtle pulse animation for overlay */
@keyframes pulse{ 0%{opacity:.6; transform:scale(0.995)} 50%{opacity:1; transform:scale(1.02)} 100%{opacity:.95; transform:scale(1)} }

/* responsive */
@media (max-width:820px){
  .video-card{ width:95%; }
  .chat{ width:95%; }
  #searchAnim { width:85%; height:84px; left:7.5%; right:7.5%; }
}