/* Zvonya — single CSS, lightweight but pretty, responsive & touch-friendly */

:root{
  --bg:#0f1320;           /* deep night */
  --panel:#151a2b;
  --panel-2:#1a2035;
  --text:#e7eaf6;
  --muted:#a8b0c6;
  --accent:#6aa9ff;
  --accent-2:#9dd56d;
  --danger:#ff6b6b;
  --border:#232a44;
  --shadow:0 12px 30px rgba(0,0,0,0.35);
  --radius:16px;
  --radius-sm:10px;
  --space:14px;
  --space-lg:20px;
  --space-xl:28px;
  --max:1100px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Color Emoji", "Apple Color Emoji";
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); background:linear-gradient(160deg,#0b0f1a,#0f1320 45%, #121732);
  color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.ok{ color:var(--accent-2); }
.err{ color:var(--danger); }
.small{ font-size:12px; }
.mt-xl { margin-top: var(--space-xl); }

.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(10,14,25,0.75);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--space-lg);
}
.brand{
  font-weight:800; letter-spacing:0.5px; font-size:20px;
  color:white;
}
.topbar-controls { display: flex; align-items: center; gap: var(--space); }
.login-status { padding-right: var(--space); text-align: right; }
.lang-switcher { display: flex; gap: 6px; border-left: 1px solid var(--border); padding-left: var(--space); }
.lang-switcher .btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.nav{ display:flex; gap:8px; }

.container{
  max-width:var(--max); margin:24px auto; padding:0 var(--space-lg);
}

.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-xl);
}

#auth-panel > div {
  max-width: 400px;
  margin: 0 auto;
}

h2,h3,h4{ margin:0 0 10px 0; }
h2{ font-size:28px; }
h3{ font-size:20px; }
h4{ font-size:16px; color:#cbd5ff; }

.grid{
  display:grid; grid-template-columns: 300px 1fr; gap:var(--space-lg);
}
.grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg);
}
@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .grid-2{ grid-template-columns:1fr; }
}

.row{ display:flex; gap:10px; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.gap{ gap:8px; }
.wrap { flex-wrap: wrap; }


input, select{
  width:100%; padding:12px 13px; margin:6px 0 12px 0;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:#101528; color:var(--text);
  outline:none; transition:border .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{
  border-color:#33406e; box-shadow:0 0 0 3px rgba(98,142,255,.25);
}
select.small { padding: 8px 10px; margin: 0; }

.btn{
  border:1px solid #2a3358; background:#1b2341; color:#dfe6ff;
  padding:10px 14px; border-radius:999px; cursor:pointer;
  transition:transform .08s ease, background .2s ease, border .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  user-select:none; -webkit-tap-highlight-color:transparent;
  white-space: nowrap;
}
.btn:hover{ transform:translateY(-1px); background:#222b52; }
.btn:active{ transform:translateY(0); }
.btn.primary{ background:linear-gradient(135deg,#3e7bff,#6aa9ff); border-color:#3e7bff; color:white; }
.btn.primary:hover{ background:linear-gradient(135deg,#376fee,#619cff); }
.btn.danger{ background:linear-gradient(135deg,#ff4d61,#ff6b6b); border-color:#ff4d61; color:white; }
.btn.ghost{ background:transparent; border-color:#3a4572; }
.btn.small{ padding:6px 10px; font-size:12px; }

.switch-form-link {
    background: none; border: none; padding: 0;
    color: var(--accent); cursor: pointer;
    font-size: inherit; font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.switch-form-link:hover { border-color: var(--accent); }

label{ display:block; font-size:12px; color:#bac5ff; margin-top:2px; }

.list{ list-style:none; padding:0; margin:0; }
.item{
  padding:10px 8px; border:1px dashed #273057; border-radius:12px; margin-bottom:8px; background:rgba(23,30,55,0.6);
}
.member-info { display: flex; align-items: center; gap: 8px; }

.dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:#6b7280; vertical-align:middle;
}
.dot.on{ background:#65d46e; box-shadow:0 0 0 4px rgba(101,212,110,0.18); }
.dot.off{ background:#8a93b2; }

.ui-icon {
    font-size: 16px;
    width: 1.2em; /* Reserve space for the icon */
    text-align: center;
}
.speaker-icon { color: var(--accent-2); }
.muted-icon { color: var(--danger); }

.status{
  padding:6px 10px; border:1px solid #2b3560; border-radius:999px;
  background:#111832; color:#cbd5ff; font-size:12px;
}

.footer{
  max-width:var(--max); 
  margin: 40px auto;
  padding: 0 var(--space-lg) var(--space-lg);
  text-align:center; 
  font-size:12px;
  color:var(--muted);
}

.msg{ min-height:18px; font-size:13px; margin-top:6px; }

.switch-form {
  margin-top: var(--space-lg);
  font-size: 14px;
  text-align: center;
}

.room-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; /* Align to top */
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.room-title {
    flex-grow: 1;
    min-width: 250px;
}
.room-id-container { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap;
    gap: 8px; 
    margin-top: 4px; 
}
.copy-buttons { display: flex; gap: 8px; }
.room-controls {
    display: flex;
    gap: 12px; /* Increased gap */
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center; /* Center items vertically */
}
#speaker-controls label {
    margin-top: 0;
    margin-bottom: 4px;
}
#remotes { display: none; }

audio{ width:0; height:0; opacity:0; }
button, input, select { touch-action: manipulation; }
@media (hover:none){ .btn:hover{ transform:none; } }

/* ---- NEW: overlay for autoplay permission ---- */
#autoplay-gate{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 22, 0.7);
  z-index: 1000;
}
#autoplay-gate .inner{
  max-width: 460px;
  text-align: center;
}
#autoplay-gate:not(.hidden){
  display:flex;
}