/* Prevent default 16:9 on tiles; JS sets sizes explicitly */
.tile { aspect-ratio: auto !important; }
/* Hide mobile carousel dots artifacts on desktop */
@media (min-width: 641px) {
  .foot-dots { display: none !important; visibility: hidden !important; }
}
/* ===== Desktop + Base (loaded for all, mobiles override) ===== */
:root{
  --bg:#2f3136; --bg2:#202225; --bg3:#18191c; --panel:#2a2d31; --line:#3a3d43;
  --text:#e6e8eb; --muted:#aeb4bd; --accent:#5865f2; --danger:#ed4245; --success:#3ba55c; --warning:#f0b132;
  --tile-gap:10px; --sidebar-w:290px; --radius:14px; --shadow:0 8px 20px rgba(0,0,0,.35);
  --footer-h:clamp(270px, 25vh, 520px);
  --rail-w:320px;
  --m-stage-pad:10px; --m-tiles-pad:12px; --m-hpad: calc(var(--m-stage-pad) + var(--m-tiles-pad));
  --dots:#5865f2;
}
*{box-sizing:border-box;}
html,body{height:100%}
body{margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif; color:var(--text); background:var(--bg2)}
button,input,select,textarea{font:inherit}
[hidden]{display:none !important}

/* Auth */
#screen-auth{display:grid; place-items:center; min-height:100vh; padding:32px}
.auth-card{width:min(920px,100%); background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); display:grid; grid-template-columns:1.2fr 1fr}
.auth-hero{padding:28px; border-right:1px solid var(--line); border-top-left-radius: 10px; background:linear-gradient(140deg, rgba(88,101,242,.25), transparent 50%), radial-gradient(1000px 400px at 10% -10%, rgba(255,255,255,.06), transparent 60%); display:flex; flex-direction:column; justify-content:center}
.auth-hero h1{margin:0 0 8px; font-size:clamp(36px, 4.5vw, 64px); line-height:1.05; align-self: center}
.auth-hero p{margin:0; color:var(--muted); font-size:clamp(16px, 1.4vw, 22px); line-height:1.6}
.auth-form{padding:28px}
.field{margin-bottom:12px}
.label{display:block; color:var(--muted); margin:0 0 6px}
.input{width:100%;padding:10px 12px;border-radius:10px;background:var(--bg3);border:1px solid var(--line);color:var(--text)}
.row{display:flex; gap:10px}
.btn{display: flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;cursor:pointer}
.btn.primary{margin-top:10px; width:-webkit-fill-available; background:var(--accent); border-color:transparent}
.btn.send{display:none}
.hint{color:var(--muted); font-size:12px}

/* App layout (desktop base) */
#screen-app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:1fr var(--footer-h); min-height:100vh; height:100dvh; overflow:hidden}

/* Sidebar */
.sidebar{grid-row:1; display:flex; flex-direction:column; background:var(--bg2); min-width:var(--sidebar-w)}
.list{margin:10px; padding:10px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); flex:1; min-height:0}
.list h3{margin:6px 6px 10px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.user{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer}
.user:hover{background:rgba(255,255,255,.04)}
.user .avatar{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:700; color:#111}
.user .name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Stage */
.stage{position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; padding:var(--m-stage-pad)}
.topbar{display:none}
.topbar .tag{background:#3c414b; padding:4px 8px; border-radius:999px; font-size:12px; color:#cfd3da}
.topbar .spacer{flex:1}
.icon-btn{display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); background:#1f2329; border-radius:10px; cursor:pointer; user-select:none}
.icon-btn:active{transform:translateY(1px)}

/* Fullscreen stage overlay */
body.no-scroll{overflow:hidden}
.stage-full{position:fixed; inset:0; z-index:70; background:#000; padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); display:flex; flex-direction:column}
.stage-full .topbar{position:sticky; top:0; z-index:2; background:linear-gradient(#0009,#0000); border-radius:12px}
.stage-full .tiles{flex:1; min-height:0}

/* Tiles */
.tiles{flex:1; min-height:0; padding:var(--m-tiles-pad); display:flex; align-items:center; justify-content:center; background:#2f3136; border-radius:12px; overflow:hidden; clip-path:inset(0 round 12px); position:relative}
.tiles.spotlight{display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w); gap:var(--tile-gap)}
.tiles.spotlight.single{grid-template-columns:1fr;align-content: center;}

.tiles-main{position:relative;min-height:0;height:100%;display:grid;grid-template-columns:repeat(1,1fr);gap:var(--tile-gap);align-content:center;place-items:center;overflow:hidden;}
.tiles.spotlight .tiles-main{grid-column:1}
.tiles-rail{display:none}
.tiles.spotlight .tiles-rail{display:flex; grid-column:2; flex-direction:column; gap:var(--tile-gap); min-width:0; max-width:var(--rail-w); min-height:0; overflow:auto}

.tile{position:relative; background:var(--panel); aspect-ratio:auto; width:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.tile.portrait{aspect-ratio:9/16}
.tile .name{position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.55); padding:4px 8px; border-radius:8px; font-size:12px; z-index:2}
.tile .controls{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:10px; opacity:0; transition:.2s; z-index:2}
.tile:hover .controls{opacity:1}
.tile video, .tile .media{position:absolute; inset:0; width:100% !important; height:100% !important; max-width:100%; max-height:100%; object-fit:contain}
.tile .placeholder{position:absolute; inset:0; display:grid; place-items:center}
.tile .avatar-ph{width:38%; aspect-ratio:1; border-radius:50%; background:var(--panel); border:1px dashed var(--line); display:grid; place-items:center; font-weight:700; color:#aeb4bd}
.ctrl{padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); cursor:pointer}
.tile.speaking{outline:2px solid var(--success); box-shadow:0 0 0 2px rgba(59,165,92,.3) inset}

/* Per-tile fullscreen button */
.tile .fs-btn{
  position:absolute; right:8px; top:8px; z-index:3;
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); background:#1f2329; color:#fff; border-radius:10px;
  cursor:pointer; opacity:.0; transition:opacity .2s ease;
}
.tile.has-video:hover .fs-btn{ opacity:1; }
.tile:not(.has-video) .fs-btn{ display:none; }

/* Volume */
.vol{position:absolute; right:10px; bottom:10px; z-index:2; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.45); border-radius:8px; padding:4px 6px; backdrop-filter:blur(6px)}
.vol input[type=range]{width:90px}
.tile.me .vol{display:none}

/* Footer (desktop base) */
.footer{grid-column:1 / 3; grid-row:2; display:grid; grid-template-columns:var(--sidebar-w) 1fr; align-items:stretch; gap:0; background:var(--bg2)}
.footer-left{padding:12px;min-width: 100%;}
.me-card{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:14px; display:flex; flex-direction:column; gap:14px}
.me-row{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center}
.me-bigavatar{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#111}
.me-info .name{font-weight:600}
.me-info .sub{color:var(--muted); font-size:12px}
.me-controls{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.me-ctrl{height:56px; border-radius:16px; border:1px solid var(--line); background:#1f2329; display:grid; place-items:center; font-size:20px; cursor:pointer; opacity:.95}
.me-ctrl.active{background:#5865f2; border-color:transparent; color:#fff}
.leave-btn{display:grid; place-items:center; height:60px; border-radius:18px; border:1px solid transparent; background:var(--danger); color:#fff; font-weight:600; cursor:pointer}
.me-ping{display:flex; align-items:center; justify-content:left; gap:8px; color:#cfd3da; font-size:12px}
.me-ping .dot{width:10px; height:10px; border-radius:50%}
.dot.ok{background:var(--success)} .dot.warn{background:var(--warning)} .dot.bad{background:var(--danger)} .dot.off{background:#555}

.footer-right{padding:12px;display:flex;min-height:0;min-width: 100%;}
.chatbox{display:grid; grid-template-rows:1fr auto; gap:8px; width:100%; margin:0; min-height:0; max-height: 234px;}
.chat-log{min-height:0; max-height:256px; overflow:auto; padding:8px; border:1px solid var(--line); background:var(--bg3); border-radius:12px}
.chat-row{display:flex; flex-direction:row; margin-bottom:8px}
.bubble{padding:0 5px}
.chat-nick{font-weight:600}

/* Desktop ≥641px: flatten footer carousel */
@media (min-width:641px){ .foot-swipe, .foot-pane, .foot-dots{display:contents} }
@supports not (display:contents){
  @media (min-width:641px){
    .foot-swipe{display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100%}
    .foot-pane{padding:0}
    .footer-left{grid-column:1}
    .footer-right{grid-column:2; display:flex; min-height:0}
    .chatbox{margin:0}
    .chat-log{min-height:0; max-height:256px}
  }
}

/* Per-tile overlay */
.tile-ov{position:fixed; inset:0; z-index:1000; display:none; background:#000}
.tile-ov.open{display:flex; flex-direction:column}
.tile-ov .ov-top{display:flex; align-items:center; gap:10px; padding:10px; background:linear-gradient(#000a,#0000); position:sticky; top:0; z-index:2}
.tile-ov .ov-top .tag{background:#3c414b; color:#cfd3da; padding:4px 8px; border-radius:999px; font-size:12px}
.tile-ov .ov-close{margin-left:auto; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid #444; background:#1f2329; color:#fff; cursor:pointer}
.tile-ov .ov-body{flex:1; min-height:0; display:grid; place-items:center; padding:10px}
.tile-ov .ov-media{width:100%; height:100%; display:grid; place-items:center}
.tile-ov .ov-media video{height:100% !important; width:auto !important; max-width:100%; object-fit:contain; max-height: 80vh; position:static}

/* Modal */
.modal{position:fixed; inset:0; z-index:1200; display:none}
.modal.open{display:grid; grid-template-rows:1fr; place-items:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px)}
.modal-panel{position:relative; z-index:1; width:min(680px, 92vw); max-height:90vh; background:var(--bg2); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.modal-head{padding:12px 14px; border-bottom:1px solid var(--line); background:var(--bg3)}
.modal-body{padding:12px; overflow:auto; display:grid; gap:12px}
.modal-foot{padding:12px; border-top:1px solid var(--line); background:var(--bg3); display:flex; gap:10px; align-items:center}
.modal-foot .spacer{flex:1}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
.card h4{margin:0 0 8px}
.cam-preview{margin-top:8px; aspect-ratio:auto; border:1px solid var(--line); border-radius:10px; background:var(--bg3); display:grid; place-items:center; overflow:hidden}
.cam-preview video{width:100% !important; height:100% !important; object-fit:contain}

/* Desktop: normalize scale inside tiles */
@media (min-width:641px){
  .tiles{font-size:clamp(14px,1.1vw,18px)}
  .tiles-main{place-items:stretch; align-content:start}
  .tile{width:100%; height:auto; aspect-ratio:auto}
  .tile .name{font-size:.9em}
  .ctrl{font-size:1em}
  .vol{font-size:.9em}
  
  /* Скрываем панель "ПОДКЛЮЧЕНЫ" на десктопе - список уже в сайдбаре */
  .foot-pane.pane-connected{
    display:none;
  }
}

/* Spotlight helpers */
.tiles.spotlight .tiles-main{grid-column:1}
.tiles.spotlight .tiles-rail{grid-column:2}
.tiles:not(.spotlight) .tiles-main{grid-template-columns:repeat(1,1fr)}


  .tile{
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
  }
  /* наша плитка ничем не отличается: такая же 16:9 */
  .tile.me{
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
  }