:root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#111827; --muted:#94a3b8; --text:#e5e7eb; --primary:#3b82f6; --danger:#ef4444; --success:#10b981;
  --header-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;overflow:hidden}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0e1628;border-bottom:1px solid #1f2937;height:var(--header-h)}
.app-header .title{display:flex;align-items:center;gap:8px}
.app-header .title i.ph{font-size:16px;color:var(--primary)}
.app-header .status{display:flex;align-items:center;gap:12px}
.header-chat{display:none;width:36px;height:36px;border-radius:50%;border:1px solid #334155;background:#0f172a;color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.header-chat i.ph{font-size:18px}
.header-share{display:flex;width:36px;height:36px;border-radius:50%;border:1px solid #334155;background:#0f172a;color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.header-share i.ph{font-size:18px}
.pill{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #334155;color:var(--muted)}
.pill.connected{color:#10b981;border-color:#10b981}
.timer{font-variant-numeric:tabular-nums;color:var(--muted)}

.layout{display:grid;grid-template-columns:1fr 340px;height:calc(100svh - var(--header-h));transition:grid-template-columns 0.3s ease}
.layout.chat-hidden{grid-template-columns:1fr 0}
.video-area{position:relative;background:#0a0f1c;display:block;overflow:hidden}
video{background:#000;border-radius:12px;max-width:100%;max-height:100%}
#remotes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-content:center;justify-items:center;padding:16px}
#remotes .tile{position:relative;width:100%;aspect-ratio:16/9}
#remotes .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#remotes .tile .name-label{position:absolute;left:8px;bottom:8px;display:inline-block;font-size:13px;font-weight:600;color:#e5e7eb;padding:6px 8px;border-radius:8px;background:rgba(17,24,39,.7);backdrop-filter:blur(8px);border:1px solid #1f2937;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
#remotes .tile .avatar-tile{position:absolute;inset:0;display:none;place-items:center;background:#0b1220;border:1px solid #1f2937;border-radius:12px}
#remotes .tile .avatar-tile .avatar-text{font-size:48px;font-weight:700;color:#cbd5e1}
#remotes .tile .vol{position:absolute;left:8px;right:8px;bottom:42px;opacity:0;transition:opacity .2s ease;background:rgba(17,24,39,.7);backdrop-filter:blur(8px);border:1px solid #1f2937;padding:6px 8px;border-radius:10px}
#remotes .tile:hover .vol{opacity:1}
#remotes .tile .vol input[type=range]{width:100%}
#remotes .tile{cursor:pointer}
#remotes.focused{display:block}
#remotes.focused .tile{display:none}
#remotes.focused .tile.focused{display:block;position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:1}
#remotes.focused .tile.focused video{border-radius:0;box-shadow:none}

.local-tile{position:absolute;top:18px;right:18px;width:220px;height:124px;z-index:2}
.local-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:3px solid #0d1322;box-shadow:0 8px 24px rgba(0,0,0,.5);border-radius:12px}
.local-tile .name-label{position:absolute;left:8px;bottom:8px;display:inline-block;font-size:12px;font-weight:600;color:#e5e7eb;padding:4px 8px;border-radius:8px;background:rgba(17,24,39,.7);backdrop-filter:blur(8px);border:1px solid #1f2937;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.local-tile .avatar-tile{position:absolute;inset:0;display:none;place-items:center;background:#0b1220;border:1px solid #1f2937;border-radius:12px}
.local-tile .avatar-tile .avatar-text{font-size:28px;font-weight:700;color:#cbd5e1}

.controls{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:rgba(17,24,39,.7);backdrop-filter:blur(8px);padding:10px 12px;border-radius:28px;border:1px solid #1f2937;z-index:3}
.controls button{width:42px;height:42px;border-radius:50%;border:1px solid #334155;background:#0f172a;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.controls button i.ph{font-size:18px}
.controls button:hover{border-color:#475569}
.controls .danger{background:var(--danger);border-color:#b91c1c}

.sidepanel{background:var(--panel);border-left:1px solid #1f2937;display:flex;flex-direction:column;min-height:0}
.profile{display:flex;gap:10px;align-items:center;padding:14px 14px;border-bottom:1px solid #1f2937}
.avatar{width:40px;height:40px;border-radius:50%;background:#1f2937;display:grid;place-items:center}
.avatar i.ph{font-size:20px;color:var(--muted)}
.info .name{font-weight:600}
.info .role{color:var(--muted);font-size:12px}

.tabs{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid #1f2937}
.tab{flex:0 0 auto;padding:8px 12px;border-radius:8px;background:#111827;border:1px solid #1f2937;color:var(--muted);cursor:pointer}
.tab.active{color:var(--text);border-color:var(--primary)}

.tabcontent{display:none;flex:1;min-height:0}
.tabcontent.active{display:flex;flex-direction:column;overflow:hidden}
.messages{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg{max-width:80%;padding:8px 10px;border-radius:10px;background:#0f172a;border:1px solid #1f2937;word-break:break-word;overflow-wrap:anywhere}
.msg.me{margin-left:auto;background:#1d4ed8;border-color:#1d4ed8}
.msg .meta{font-size:11px;color:#cbd5e1;margin-bottom:4px;opacity:.8}

.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid #1f2937;background:#0f172a}
.chat-form input, .chat-form textarea{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:var(--text)}
.chat-form textarea{height:auto;max-height:160px;overflow-y:auto;resize:none}
.chat-form button{padding:10px 14px;border-radius:10px;border:1px solid #334155;background:var(--primary);color:white;cursor:pointer;display:flex;align-items:center;gap:6px}
.chat-form button i.ph{font-size:16px}

.join-overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.9);z-index:20}
.join-form{width:360px;background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.join-form h2{margin:0 0 4px}
.join-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.join-form input{padding:10px;border-radius:8px;border:1px solid #334155;background:#0b1220;color:var(--text)}
.join-form button{padding:10px;border-radius:10px;border:1px solid #334155;background:var(--primary);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.join-form button i.ph{font-size:16px}

.join-loading{display:none;align-items:center;gap:12px;color:var(--text);background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:20px}
.join-overlay.loading .join-loading{display:flex}
.join-overlay.loading .join-form{display:none}
.spinner{width:20px;height:20px;border:3px solid #334155;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hidden{display:none}

@media (max-width: 640px){
  .local-tile{width:160px;height:90px}
}

button:focus-visible, .tab:focus-visible, input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

@media (max-width: 768px){
  .layout{grid-template-columns:1fr}
  .video-area{height:calc(100svh - var(--header-h))}
  .sidepanel{position:fixed;top:var(--header-h);right:0;left:0;bottom:0;width:100vw;transform:translateX(100%);transition:transform .25s ease;z-index:4}
  .layout:not(.chat-hidden) .sidepanel{transform:translateX(0)}
  .header-chat{display:flex}
  .controls{bottom:calc(12px + env(safe-area-inset-bottom))}
  .controls button{width:48px;height:48px}
  #remotes{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:12px}
  .local-tile{width:144px;height:81px;top:12px;right:12px}
  .join-form{width:min(92vw,360px)}
}