:root{
  --bg: #14171c;
  --bg-raised: #1b1f26;
  --bg-inset: #0e1114;
  --line: #2a2f38;
  --text: #eef0f3;
  --text-dim: #9aa2b1;
  --amber: #ffb020;
  --amber-dim: #7a5716;
  --teal: #3ddc97;
  --danger: #ff5c5c;
  --radius: 14px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }

/* The [hidden] attribute must always win over any component's own
   display:flex/grid rule below, otherwise elements marked hidden via
   JS (el.hidden = true) stay visible. */
[hidden]{ display: none !important; }

html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

button{ font-family: inherit; cursor:pointer; }
input{ font-family: inherit; }

.screen{ min-height:100vh; width:100%; }

/* ============ LOBBY ============ */
#lobby{
  display:flex; align-items:center; justify-content:center;
  padding: 40px 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,176,32,0.08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(61,220,151,0.06), transparent 40%),
    var(--bg);
}

.lobby-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  max-width: 980px;
  width:100%;
  align-items:center;
}

.brand-mark{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.brand-dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255,176,32,0.15);
}
.brand-word{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--text-dim);
}

.lobby-brand h1{
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-sub{
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 40ch;
  margin: 0 0 40px;
}

.freq-dial{ display:flex; align-items:center; gap:14px; }
.freq-bars{ display:flex; align-items:flex-end; gap:4px; height:28px; }
.freq-bars span{
  width:4px; border-radius:2px;
  background: var(--amber);
  opacity:0.85;
  animation: freq 1.4s ease-in-out infinite;
}
.freq-bars span:nth-child(1){ height:30%; animation-delay:0s; }
.freq-bars span:nth-child(2){ height:60%; animation-delay:0.1s; }
.freq-bars span:nth-child(3){ height:100%; animation-delay:0.2s; }
.freq-bars span:nth-child(4){ height:45%; animation-delay:0.3s; }
.freq-bars span:nth-child(5){ height:80%; animation-delay:0.4s; }
.freq-bars span:nth-child(6){ height:35%; animation-delay:0.5s; }
.freq-bars span:nth-child(7){ height:65%; animation-delay:0.6s; }
@keyframes freq{
  0%,100%{ transform: scaleY(0.5); }
  50%{ transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .freq-bars span{ animation:none; }
}
.freq-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

.lobby-panel{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.field-label{
  display:block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 500;
}

#name-input, #channel-name-input{
  width:100%;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 24px;
  outline: none;
  transition: border-color .15s;
}
#name-input:focus, #channel-name-input:focus{ border-color: var(--amber); }

.btn{
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 14.5px;
  font-weight: 600;
  transition: transform .1s ease, background .15s;
}
.btn:active{ transform: scale(0.98); }

.btn-primary{
  background: var(--amber);
  color: #201400;
  width:100%;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.btn-primary:hover{ background:#ffbf47; }
.btn-title{ font-weight:700; }
.btn-sub{ font-weight:500; font-size:12px; opacity:0.75; }

.btn-ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber); }

.btn-small{ padding: 10px 16px; font-size:13px; }

.divider{
  display:flex; align-items:center; gap:12px;
  color: var(--text-dim); font-size:12px;
  margin: 20px 0;
}
.divider::before, .divider::after{
  content:''; flex:1; height:1px; background: var(--line);
}

.join-row{ display:flex; gap:8px; }
#room-input{
  flex:1;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  outline:none;
}
#room-input:focus{ border-color: var(--amber); }

.lobby-error{
  margin: 16px 0 0;
  color: var(--danger);
  font-size: 13px;
}

.advanced-toggle{
  background:none; border:none;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 4px 0 0;
  text-align:left;
  width:100%;
}
.advanced-toggle:hover{ color: var(--amber); }

.advanced-options{
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 10px;
  display:flex; flex-direction:column; gap: 10px;
}

.checkbox-row{
  display:flex; align-items:center; gap:8px;
  font-size: 13.5px;
  color: var(--text);
  cursor:pointer;
}
.checkbox-row input{ accent-color: var(--amber); width:15px; height:15px; }

#create-password-input, #join-password-input{
  width:100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  outline:none;
}
#create-password-input:focus, #join-password-input:focus{ border-color: var(--amber); }

#join-password-input{ margin-top: 10px; }

.field-label-tight{ margin-bottom: 6px; }

#max-participants-select{
  width:100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13.5px;
  outline:none;
}
#max-participants-select:focus{ border-color: var(--amber); }

/* ============ CALL SCREEN ============ */
#call-screen{
  display:flex; flex-direction:column;
  height:100vh;
  background: var(--bg-inset);
}

.call-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.channel-tag{ display:flex; align-items:center; gap:10px; }
.live-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(61,220,151,0.18);
  flex-shrink:0;
}
.channel-code{
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.channel-name{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-name:not(:empty)::after{
  content: '·';
  color: var(--text-dim);
  margin-left: 10px;
  font-weight: 400;
}
.icon-text-btn{
  background:none; border:none; color: var(--text-dim);
  font-size: 12.5px; text-decoration: underline;
  text-underline-offset:2px;
}
.icon-text-btn:hover{ color: var(--amber); }

.participant-pill{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
}

.recording-banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: rgba(255,92,92,0.12);
  border-bottom: 1px solid rgba(255,92,92,0.3);
  color: #ffb3b3;
  font-size: 12.5px;
  padding: 8px;
}
.rec-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--danger);
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.3; }
}
@media (prefers-reduced-motion: reduce){
  .rec-dot{ animation:none; }
}

.stage{ flex:1; overflow:auto; padding: 18px; display:flex; }

.video-grid{
  display:grid;
  gap: 12px;
  width:100%;
  align-content:center;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.video-tile{
  position:relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 16/10;
}
.video-tile video{
  width:100%; height:100%; object-fit:cover;
  display:block;
  background: #000;
}
.video-tile.mirrored video{ transform: scaleX(-1); }

.tile-label{
  position:absolute; left:10px; bottom:10px;
  background: rgba(14,17,20,0.72);
  backdrop-filter: blur(4px);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  display:flex; align-items:center; gap:6px;
}
.tile-mic-off{ color: var(--danger); }

.tile-avatar{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight:600;
  color: var(--bg-inset);
  background: linear-gradient(135deg, var(--amber), #ffd27a);
}

/* Chat panel */
.chat-panel{
  position:fixed; right:0; top:0; bottom:0;
  width: 320px;
  background: var(--bg);
  border-left: 1px solid var(--line);
  display:flex; flex-direction:column;
  z-index: 20;
}
.chat-header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-weight:600; font-size:14px;
}
.chat-messages{ flex:1; overflow-y:auto; padding: 14px 18px; display:flex; flex-direction:column; gap:12px; }
.chat-msg{ font-size: 13.5px; line-height:1.5; }
.chat-msg .chat-name{ font-weight:600; color: var(--amber); margin-right:6px; }
.chat-msg .chat-time{ color: var(--text-dim); font-size:11px; margin-left:6px; }
.chat-form{ display:flex; gap:8px; padding: 14px; border-top: 1px solid var(--line); }
#chat-input{
  flex:1; background: var(--bg-inset); border:1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; color:var(--text); outline:none;
}
#chat-input:focus{ border-color: var(--amber); }

/* Control bar */
.control-bar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.control-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 11px;
  min-width: 64px;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.control-btn .control-icon{ font-size: 18px; }
.control-btn.active{ color: var(--text); border-color: var(--line); }
.control-btn:hover{ border-color: var(--amber); }
.control-btn.is-off{ background: rgba(255,92,92,0.1); color: var(--danger); border-color: rgba(255,92,92,0.3); }
.control-btn.is-recording{ background: var(--danger); color:#2a0000; border-color: var(--danger); }
.control-btn-danger{ background: var(--danger); color:#2a0000; border-color: var(--danger); }
.control-btn-danger:hover{ background:#ff7373; border-color:#ff7373; }

.call-topbar{
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

@media (max-width: 860px){
  .lobby-grid{ grid-template-columns: 1fr; gap: 36px; }
  .chat-panel{ width: 100%; }
}

/* Narrow phones: 6 control buttons at full size don't fit ~360-400px
   viewports, so shrink padding/size and let the row scroll horizontally
   as a fallback if it still overflows on very small/zoomed screens. */
@media (max-width: 480px){
  .control-bar{ gap: 6px; padding-left: 8px; padding-right: 8px; justify-content: flex-start; }
  .control-btn{ min-width: 52px; padding: 8px 8px; font-size: 9.5px; border-radius: 10px; }
  .control-btn .control-icon{ font-size: 16px; }
}