/* NGỒI CHUNG — màn hình phòng trên điện thoại (v0.5 UI).
   Loaded last so it overrides older rules. Desktop layout is unchanged.
   Goal: screen first, compact header, nothing hidden behind the bottom bar. */

/* Shared: icon + label buttons in the room header */
.room-heading-actions .btn-ico{margin-right:6px}

/* 3D toggle lives inside the world scene */
.world-scene{position:relative}
.world-scene .world-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 6px}
.world-scene .world-head span{font-size:13px;font-weight:800;color:#dcd6ff}
.world3d-toggle{font-size:12px;padding:6px 11px;border-radius:999px;background:#2a2f4d;border:1px solid #b9a8ff3d;color:#e9e3ff;font-weight:700}
.world3d-toggle[aria-pressed="true"]{background:#5b47c6;border-color:#c9bcff80}
/* Canvas only takes space while 3D is on: no more big empty box. */
.world-scene:not(.webgl-active) .world-canvas{display:none}
.world-scene:not(.webgl-active){min-height:0!important}

@media (max-width:850px){
  /* The site header (Cài ứng dụng / Tạo phòng) is noise inside a room. */
  body.in-room .topbar{display:none}
  body.in-room .room-view{padding:0 0 calc(104px + env(safe-area-inset-bottom))}

  /* Compact sticky room bar: name + who's here + invite/leave icons */
  body.in-room .room-heading{
    position:sticky;top:0;z-index:30;
    flex-direction:row;align-items:center;gap:10px;
    margin:0;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    background:#0d1120ee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid #ffffff12
  }
  body.in-room .room-heading>div:first-child{flex:1;min-width:0}
  body.in-room #roomTypeLabel,
  body.in-room .room-description,
  body.in-room #presencePrivacy,
  body.in-room .room-presence .presence-dot{display:none}
  body.in-room .room-heading h1{
    font-size:16px;line-height:1.25;margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  body.in-room .room-presence{flex-wrap:nowrap;gap:8px;margin-top:3px;overflow:hidden}
  body.in-room .room-presence>span{
    padding:0!important;border:0!important;background:none!important;
    font-size:11.5px;color:#9fb0cc;white-space:nowrap
  }
  body.in-room .presence-avatars{padding-left:2px}
  body.in-room .room-heading-actions{width:auto;flex-shrink:0;gap:6px}
  body.in-room .room-heading-actions button{
    flex:none;width:40px;height:40px;padding:0;border-radius:12px;font-size:17px;
    display:grid;place-items:center
  }
  body.in-room .room-heading-actions .btn-ico{margin:0}
  body.in-room .room-heading-actions .btn-label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
  }

  /* Screen first, edge to edge */
  body.in-room .room-layout{gap:12px}
  body.in-room .theater{
    min-height:0;padding:0 0 72px;border-radius:0;border-left:0;border-right:0;
    justify-content:flex-start
  }
  body.in-room .theater-glow,
  body.in-room .stage-head,
  body.in-room .stage-floor{display:none}
  body.in-room .stage{
    width:100%;border:0;border-radius:0;transform:none;box-shadow:none
  }
  body.in-room .screen{border-radius:0}
  body.in-room .join-playback{margin:12px auto 0;width:calc(100% - 24px);max-width:none}

  /* Compact world strip; full canvas only when 3D is switched on */
  body.in-room .world-scene{margin:12px 12px 0;width:auto;align-self:stretch;padding:9px 8px}
  body.in-room .world-scene.webgl-active .world-canvas{height:150px}

  /* Seats sit flat and clear of the toolbar */
  body.in-room .theater-seats{
    margin-top:14px;width:calc(100% - 24px);transform:none;gap:6px
  }
  body.in-room .toolbar{bottom:10px;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none}
  body.in-room .toolbar::-webkit-scrollbar{display:none}

  /* Chat & tabs card below */
  body.in-room .sidebar{margin:0 8px;min-height:0;border-radius:18px}
  body.in-room .chat-list{min-height:200px;max-height:52vh}
}

/* In-app browser (Zalo, Messenger...) warning: iOS WebViews force fullscreen video */
.inapp-banner{position:sticky;top:0;z-index:60;display:flex;gap:10px;align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:linear-gradient(120deg,#5a3f12,#3a2412);border-bottom:1px solid #ffcf7a66;color:#fff4dc;font-size:12.5px;line-height:1.45}
.inapp-banner.hidden{display:none}
.inapp-text{flex:1;min-width:0;display:grid;gap:3px}
.inapp-text strong{font-size:14px;color:#ffe2a8}
.inapp-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.inapp-actions button{padding:8px 10px;font-size:12px;border-radius:10px;white-space:nowrap}
body.in-app.in-room .room-heading{top:var(--inapp-h,0px)}

/* Pressing ▶ on the player syncs automatically: hide the separate sync buttons */
#joinPlaybackBtn,#syncBtn{display:none!important}