* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: rgb(10, 34, 50); color: #ddd;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.logo { position: fixed; top: 12px; left: 14px; width: 72px; height: auto; opacity: 0.7; z-index: 20; display: none; }
body.in-call .logo { display: block; }
.lobby-logo { width: 300px; height: auto; margin-bottom: 12px; opacity: 0.85; }
h1 { margin: 20px 0 4px; font-size: 1.3em; color: #888; font-weight: 400; }
.sub { color: #555; font-size: 0.82em; margin-bottom: 16px; }

/* Lobby */
#lobby {
  text-align: center; width: 100%;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 18vh;
}
#join-form { display: flex; gap: 8px; justify-content: center; }
input {
  background: #1a1a1a; border: 1px solid #333; color: #ddd;
  padding: 8px 14px; border-radius: 8px; font-size: 0.95em; outline: none;
  width: 220px;
}
input:focus { border-color: #4a9eff; }
button {
  background: #2563eb; color: #fff; border: none;
  padding: 8px 20px; border-radius: 8px; font-size: 0.95em;
  cursor: pointer;
}
button:hover { background: #1d4ed8; }
button:disabled { background: #333; cursor: default; }

/* Call screen */
#call { width: 100%; display: flex; flex-direction: column; align-items: center; }
#top-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 16px; width: 100%; max-width: 560px;
  justify-content: center; flex-wrap: wrap;
}
#room-link {
  color: #4a9eff; font-size: 0.82em; text-decoration: none;
  background: #1a1a1a; padding: 6px 14px; border-radius: 8px;
  border: 1px solid #333; cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 427px;
}
#room-link:hover { border-color: #4a9eff; }
.copied-tip {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  background: #4ade80; color: #111; padding: 2px 10px; border-radius: 5px;
  font-size: 0.75em; pointer-events: none; animation: fadeOut 1.5s forwards;
}
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

.videos {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; width: 100%; max-width: 1050px; padding: 0 12px;
}
.vbox {
  position: relative; background: #1a1a1a; border-radius: 10px;
  overflow: hidden; flex: 1; min-width: 280px; max-width: 510px;
  aspect-ratio: 4/3;
}
.vbox video {
  width: 100%; height: 100%; object-fit: cover; display: block; background: #000;
}
.vbox-inner {
  position: relative;
  width: 100%; height: 100%;
}
.vlabel {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.65); padding: 3px 9px;
  border-radius: 5px; font-size: 0.78em;
}
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 1em; pointer-events: none;
}
#status {
  margin-top: 12px; font-size: 0.85em; color: #666;
}
.ok { color: #4ade80 !important; }
.warn { color: #fbbf24 !important; }
.err { color: #f87171 !important; }

.pip {
  position: absolute;
  top: 10px; left: 10px;
  width: 28%; max-width: 220px; min-width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  z-index: 9;
}
.pip video { width: 100%; height: 100%; object-fit: cover; }
.pip.vid-off video { filter: grayscale(1) brightness(0.4); }
.pip.vid-off::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top right,
    transparent calc(50% - 1.5px), #7f1d1d calc(50% - 1.5px),
    #7f1d1d calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.vbox.peer-vid-off video { filter: grayscale(1) brightness(0.4); }
.pip-label {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.65); padding: 3px 9px;
  border-radius: 5px; font-size: 0.78em; color: #ddd;
}

.mute-btn {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.65);
  padding: 0; display: none;
}
.mute-btn svg { display: block; margin: 0 auto; }

/* Fullscreen mode */
.vbox:fullscreen,
.vbox:-webkit-full-screen {
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vbox:fullscreen .vbox-inner,
.vbox:-webkit-full-screen .vbox-inner {
  width: min(100%, calc(100vh * 4 / 3));
  height: min(100vh, calc(100% * 3 / 4));
  overflow: hidden;
}
.vbox:fullscreen video#remoteV,
.vbox:-webkit-full-screen video#remoteV {
  object-fit: cover;
}
.vbox:fullscreen .pip,
.vbox:-webkit-full-screen .pip {
  width: 20%;
  max-width: 280px;
}
.vbox:fullscreen .mute-btn,
.vbox:fullscreen .vlabel,
.vbox:fullscreen .pip-label {
  transition: opacity 0.3s;
}
.vbox.fs-hide-controls .mute-btn,
.vbox.fs-hide-controls .vlabel,
.vbox.fs-hide-controls .pip-label {
  opacity: 0;
  pointer-events: none;
}

/* Debug panel */
#debug-toggle {
  margin-top: 12px; background: transparent; color: #444;
  border: 1px solid #333; padding: 4px 14px; border-radius: 6px;
  font-size: 0.75em; cursor: pointer;
}
#debug-toggle:hover { color: #888; border-color: #555; }
#debug-wrap { margin-top: 8px; max-width: 600px; width: 100%; }
#stats { font-size: 0.75em; color: #444; text-align: center; }
#debug {
  margin-top: 4px; font-size: 0.75em; color: #555;
  text-align: left; white-space: pre-wrap;
  max-height: 200px; overflow-y: auto;
}

.note {
  margin-top: 20px; max-width: 500px; text-align: center;
  font-size: 0.78em; color: #444; line-height: 1.5;
}

@media (max-width: 600px) {
  #join-form { flex-direction: column; align-items: center; }
  #join-form input { width: 100%; max-width: 280px; }
  #join-form button { width: 100%; max-width: 280px; }

  .pip { width: 30%; max-width: 140px; min-width: 90px; }
  #room-link { max-width: 267px; font-size: 0.75em; }
  body.in-call .logo { width: 36px; }
  #call { padding-top: 52px; }

  #top-bar { padding: 8px 10px; gap: 6px; }
  .mute-btn { width: 44px; height: 44px; }

  .videos { padding: 0 6px; gap: 8px; }
  .vbox { min-width: 240px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .vbox { aspect-ratio: 16/9; }
  .pip { width: 20%; min-width: 80px; }
  .lobby-logo { width: 180px; }
}