/* RESET */
* { box-sizing: border-box; margin:0; padding:0; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;              /* Prevent accidental scroll */
  background: #000;
  touch-action: manipulation;    /* Disable double tap zoom + pan zoom */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Safe area support (iPhone notch + Android cutout) */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Fix main video layout */
#mainVideoWrap {
  height: calc(70vh + env(safe-area-inset-top));
  max-height: 70vh;
  position: relative;
  overflow: hidden;

}

/* Bottom row fixed */
#remoteRow {
  height: calc(30vh - env(safe-area-inset-bottom));
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  box-sizing: border-box;
}

/* Sticky controls bar */
#controlsBar {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 25px;
  background: rgba(0,0,0,0.25);
  padding: 14px 0 calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
  z-index: 999;
}

/* Avoid keyboard breaking UI */
@media (max-height: 500px) {
  #controlsBar {
    position: absolute;
    bottom: 0;
  }
}

/* Landscape mode adjustments */
@media screen and (orientation: landscape) {
  #mainVideoWrap {
    height: 100vh;
    max-height: 100vh;
    
  }
  #remoteRow {
    height: 22vh;
  }
  #controlsBar {
    bottom: 0;
  }
}

/* APP */
#app-container { height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* MAIN VIDEO */
#mainVideoWrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: linear-gradient(180deg,#0b1220,#071026);
  overflow:hidden;
  transition: transform .36s ease, box-shadow .36s ease;
}
#mainVideoWrap.promoting { transform: scale(.98); box-shadow: 0 14px 40px rgba(0,0,0,.6); }

#localVideo { width:100%; height:100%; object-fit:cover; display:block; background:#111; }

/* Centered placeholder image */
#selfImage {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:70%; max-width:420px; max-height:70vh;
  border-radius:12px; object-fit:cover; z-index:5; transition: opacity .28s ease, transform .28s ease;
}

/* Local name badge */
#localNameTag {
  position:absolute; left:12px; bottom:92px; background:rgba(0,0,0,.5); padding:8px 10px; border-radius:12px; color:#fff; z-index:20;
}

/* REMOTE ROW */
#remoteRow {
  height:110px; padding:10px; display:flex; gap:10px; overflow-x:auto; background:#000; flex-shrink:0;
}
.remote-tile {
  width:90px; height:90px; border-radius:12px; overflow:hidden; position:relative; background:#222; flex-shrink:0;
  transform: translateY(0); transition: transform .26s ease, box-shadow .26s ease;
}
.remote-tile:hover { transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.6); cursor:pointer; }

/* occupant video or img */
.remote-tile .media { width:100%; height:100%; object-fit:cover; display:block; }

/* footer */
.remote-tile .tile-footer { position:absolute; bottom:0; left:0; right:0; padding:4px 6px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; text-align:center; }

/* overlays for status icons */
.remote-tile .overlay {
  position:absolute; inset:6px; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.overlay .badge {
  background: rgba(0,0,0,.6); color:#fff; padding:6px 8px; border-radius:999px; display:flex; gap:8px; align-items:center; font-size:12px;
}

/* when remote disabled video */
.remote-tile.video-off .media { filter: grayscale(.5) brightness(.55); }
.remote-tile.video-off .overlay { display:flex; }
.remote-tile.video-off .badge i { color:#ffd600; }

/* muted overlay (if remote muted) */
.remote-tile.muted .badge i { color:#9fb4c8; }

/* left overlay */
.remote-tile.left .overlay .badge { background: rgba(255,255,255,0.06); color:#ddd; }

/* CONTROLS BAR */
#controlsBar { height:80px; background:rgba(0,0,0,.45); display:flex; justify-content:center; align-items:center; gap:20px; padding-bottom:env(safe-area-inset-bottom); backdrop-filter: blur(6px); }
.control-btn { width:56px; height:56px; border-radius:50%; background: rgba(255,255,255,.08); border:none; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; transition: transform .12s ease, background .12s ease; }
.control-btn:hover { transform:scale(1.06); background: rgba(255,255,255,.12); }
.control-btn.end { background:#ff4040; }
.control-btn.end:hover { background:#ff1f1f; transform: scale(1.08); }

/* promoted main area animation */
.animate-swap { transition: transform .38s cubic-bezier(.22,.9,.28,1), box-shadow .38s ease; }

/* helper for primary video label */
#mainVideoLabel { position:absolute; left:12px; top:12px; padding:6px 10px; background:rgba(0,0,0,.45); border-radius:999px; color:#fff; font-weight:600; }


/* MAIN BADGE */
.main-name-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 50;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-name-badge i {
  font-size: 15px;
}
#mainNameBadge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}

#mainNameBadge.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}


#mainNameBadge.show {
  opacity: 1;
}

#mainNameBadge.hidden {
  opacity: 0;
}

/* show badge */
.main-name-badge.show {
  opacity: 1;
  transform: translateY(0);
}

/* main speaking glow */
.main-speaking {
  box-shadow: 0 0 22px rgba(0,255,134,0.65);

  border-radius: 14px;
  transition: box-shadow .25s ease;
}

/* hidden badge */
.main-name-badge.hidden {
  opacity: 0 !important;
  transform: translateY(6px) !important;
}


/* responsive tweaks */
@media (min-width:720px) {
  #remoteRow { height:200px; padding:14px; }
  .remote-tile { width:160px; height:120px; }
}