:root{--bg:#0f1115;--panel:#151922;--muted:#8b93a7;--text:#e9eefb;--accent:#5cc8ff;--ok:#38d39f;--warn:#ffcc66;--danger:#ff6b6b}
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:linear-gradient(180deg,var(--bg),#0b0d12);
      color:var(--text);
      font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
    }
    header{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      padding:14px 16px;
      background:#0c0f14;
      border-bottom:1px solid #202636;
      position:sticky;
      top:0;
      z-index:10
    }
    header h1{font-size:16px;margin:0;letter-spacing:.2px}
    .badge{font-size:12px;color:#111;background:var(--accent);padding:2px 8px;border-radius:999px;font-weight:600}
    .wrap{
      display:grid;
      gap:14px;
      padding:14px;
      min-height:calc(100% - 58px);
      grid-template-columns:2.2fr 1fr;
      grid-template-rows:auto 1fr;
      grid-template-areas:'yt media' 'yt chat';
      align-items:start
    }
    .panel{
      background:var(--panel);
      border:1px solid #202636;
      border-radius:14px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:220px
    }
    .panel h2{
      font-size:14px;
      margin:0;
      padding:10px 12px;
      background:#0f1420;
      border-bottom:1px solid #1e2433;
      display:flex;
      align-items:center;
      gap:8px
    }
    .panel .content{
      padding:12px;
      gap:12px;
      display:flex;
      flex-direction:column;
      flex:1
    }
    .row{display:flex;gap:8px;flex-wrap:wrap}
    input[type=text]{
      flex:1;
      min-width:160px;
      background:#0e1320;
      border:1px solid #243048;
      color:var(--text);
      padding:10px 12px;
      border-radius:10px;
      outline:none
    }
    input::placeholder{color:#6b7386}
    button{
      background:#1a2234;
      border:1px solid #2a3550;
      color:var(--text);
      padding:10px 14px;
      border-radius:10px;
      cursor:pointer;
      font-weight:600
    }
    button.primary{
      background:linear-gradient(180deg,#2b7cff,#1a68e0);
      border-color:#2b7cff
    }
    button.ghost{background:#0e1320}
    button:disabled{opacity:.55;cursor:not-allowed}

    .video-grid{
      display:flex;
      flex-direction:row
    }
    video{
      width:90%;
      aspect-ratio:16/9;
      background:#0b0f18;
      border:1px solid #1f2636;
      border-radius:10px
    }

    .chat{display:flex;flex-direction:column;gap:8px;height:100%}
    .msgs{
      background:#0e1320;
      border:1px solid #212a3d;
      border-radius:10px;
      flex:1;
      overflow:auto;
      padding:10px
    }
    .msg{
      margin:3px 0;
      display:flex;
      gap:6px;
      align-items:flex-end;
      width:100%
    }
    .msg .me{color:var(--ok)}
    .bubble{
      background:#141a28;
      border:1px solid #222c42;
      border-radius:12px 12px 12px 6px;
      padding:2px 8px;
      max-width:70%
    }
    .msg.me{justify-content:flex-end;}
    .msg.other{justify-content:flex-start;}
    .msg.other strong{color:#9db7ff;margin-right:6px;}
    .msg.me .bubble{
      background:#1a243a;
      border:1px solid #2b3b5d;
      border-radius:12px 12px 6px 12px;
    }
    .msg.me strong{color:var(--ok);margin-left:6px;}

    .yt-wrap{display:grid;grid-template-columns:1fr;gap:10px}
    #ytPanel{grid-area:yt}
    #mediaPanel{grid-area:media}
    .sidebar{grid-area:chat}
    #mediaPanel video{height:130px;object-fit:cover}
    .hint{color:var(--muted);font-size:12px}

    footer{
      padding:10px 14px;
      text-align:center;
      color:#7f86a1
    }
    .kbd{
      padding:0 6px;
      border:1px solid #3a4668;
      border-bottom-width:2px;
      border-radius:6px;
      background:#0e1320
    }

    .sidebar{
      grid-area:chat;
      display:flex;
      flex-direction:column;
      overflow:visible;
    }
    .chat{
      display:flex;
      flex-direction:column;
      gap:8px;
      height:100%;
      min-height:0
    }
    .msgs{
      background:#0e1320;
      border:1px solid #212a3d;
      border-radius:10px;
      flex:1;
      padding:10px;
      max-height:30vh;
      overflow-y:scroll;
    }
    .hint{color:var(--muted);font-size:12px}

    #roomId{
      min-width:0;
      width:120px
    }

    #emojiToggle{padding:10px 12px}
    #emojiPickerWrap{
      position:relative;
    }
    #emojiPicker{
      position:absolute;
      right:0;
      bottom:48px;
      width:320px;
      max-height:380px;
      z-index:20;
      display:none;
      border:1px solid #2a3550;
      border-radius:12px;
      overflow:hidden;
      background:#0e1320;
    }
    emoji-picker{
      --background:#0e1320;
      --border-color:#2a3550;
      --category-button-color:#e9eefb;
    }
    input, .bubble {
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,
                   "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",emoji,sans-serif;
    }

    /* Обгортка для відео (YT + локальний файл) */
    #videoWrapper{
      position:relative;
      width:100%;
      max-width:100%;
      aspect-ratio:16/9;
      background:#000;
      border:1px solid #1f2636;
      border-radius:10px;
      overflow:hidden;
      min-height:70vh; /* на десктопі високий плеєр */
    }
    #videoWrapper > #player,
    #videoWrapper > #fileVideo{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }
    #player{
      background:#000;
    }
    #fileVideo{
      background:#000;
      object-fit:contain;
      display:none; /* за замовчуванням схований */
    }

    @media (max-width: 980px){
      h1{display:none;}
      .msgs{max-height:35vh;}
      .wrap{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        grid-template-areas:'media' 'yt' 'chat';
        height:auto;
        min-height:100dvh;
      }
      /* на мобілці плеєр трохи нижчий */
      #videoWrapper{
        aspect-ratio:16/9;
        min-height:30dvh;
      }
      .video-grid{flex-direction:column;}
      #mediaPanel video{height:170px;}
      header{position:sticky;top:0;}
    }