* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: system-ui, sans-serif;
  background: #14161a;
  color: #e8eaed;
}

/* lobby */
#lobby {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
#lobby h1 { font-size: 22px; font-weight: 600; }
#lobby input[type=text], #lobby input[type=password] {
  width: min(320px, 90vw);
  padding: 12px 14px; font-size: 16px;
  background: #23262d; color: inherit;
  border: 1px solid #3a3f4a; border-radius: 10px;
}
#lobby .opt { font-size: 14px; color: #aab; user-select: none; }
#lobby button {
  width: min(320px, 90vw);
  padding: 12px; font-size: 17px;
  background: #2f7d4f; color: #fff;
  border: 0; border-radius: 10px; cursor: pointer;
}
#lobby button:disabled { opacity: .5; }
.error { color: #ff7b72; font-size: 14px; max-width: min(400px, 90vw); text-align: center; }

/* call */
#call { height: 100%; display: flex; flex-direction: column; }
#grid {
  flex: 1; min-height: 0;
  display: grid; gap: 6px; padding: 6px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-content: center;
}
.tile {
  position: relative;
  background: #23262d;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
}
.tile.speaking { border-color: #4caf7d; }
.tile video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: #000;
}
.tile.cam-off video { visibility: hidden; }
.tile .avatar {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  font-size: 48px; color: #667;
}
.tile.cam-off .avatar { display: flex; }
.tile .label {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 13px;
  background: rgba(0,0,0,.55);
  padding: 2px 8px; border-radius: 6px;
}
.tile .mic-off { color: #ff7b72; margin-left: 4px; }
.tile.local video { transform: scaleX(-1); }

/* single remote peer: full-screen like Telegram/Zoom 1:1 calls */
#grid.single { display: block; padding: 0; }
#grid.single .tile { aspect-ratio: auto; height: 100%; border-radius: 0; }

/* own video: floating draggable pip */
#selfView {
  position: fixed;
  right: 12px; bottom: 86px;
  width: clamp(120px, 26vw, 220px);
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#selfView:active { cursor: grabbing; }
#selfView .label { font-size: 11px; left: 4px; bottom: 3px; }
/* alone in the room: own video takes the stage */
#selfView.solo {
  left: 6px; top: 6px; right: 6px; bottom: 76px;
  width: auto; aspect-ratio: auto;
  cursor: default; touch-action: auto;
  box-shadow: none;
}

/* control bar */
#bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
}
#bar button {
  width: 52px; height: 52px;
  font-size: 22px;
  background: #2b2f37; color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
}
#bar button.off { background: #b3382f; }
#bar button.danger { background: #7d2f2f; }
#status { font-size: 13px; color: #99a; margin-left: 8px; }