/* A compact two-row room toolbar for touch-sized viewports. */
body:has(#world) .top .inviteBtn svg{display:none}
@media (max-width:700px){
  body.roomMobileViewport:has(#world) .top:has(.roomZoomBtn){
    display:grid;
    grid-template-columns:44px 44px minmax(0,1fr) repeat(4,44px);
    grid-template-rows:50px 44px;
    column-gap:clamp(2px,.8vw,5px);
    row-gap:6px;
    height:auto;
    min-height:0;
    padding:calc(7px + env(safe-area-inset-top,0px)) 10px 8px;
    align-content:center;
    align-items:center;
  }
  body.roomMobileViewport:has(#world) .top .roomToolbar{
    display:contents;
    margin:0;
  }
  body.roomMobileViewport:has(#world) .top .roomTitle{
    grid-column:1/4;
    grid-row:1;
    min-width:0;
    max-width:100%;
    flex:none;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:clamp(12px,3.8vw,17px);
  }
  body.roomMobileViewport:has(#world) .top .roomCode{
    grid-column:4/8;
    grid-row:1;
    display:flex;
    box-sizing:border-box;
    width:max-content;
    max-width:100%;
    justify-self:end;
    min-width:0;
    height:50px;
    margin:0;
    padding:0 0 0 6px;
    gap:4px;
    background:#ffedac;
    border:3px solid var(--room-ink);
  }
  body.roomMobileViewport:has(#world) .top .roomCodeLabel{
    display:inline;
    flex:0 0 auto;
    white-space:nowrap;
    font-size:12px;
  }
  body.roomMobileViewport:has(#world) .top #roomCodeText{
    flex:0 1 auto;
    box-sizing:border-box;
    min-width:0;
    height:44px;
    padding:0 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--room-ink);
    background:transparent;
    border:0;
    box-shadow:none;
    font-size:clamp(10px,3vw,12px);
    letter-spacing:0;
  }
  body.roomMobileViewport:has(#world) .top .copyCodeBtn{
    flex:0 0 44px;
    box-sizing:border-box;
    width:44px;
    height:44px;
    padding:10px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.roomMobileViewport:has(#world) .top .copyCodeBtn svg{width:19px;height:19px}
  body.roomMobileViewport:has(#world) .top :is(.roomLeaveBtn,.roomGearBtn,.furnitureToolBtn,.roomZoomBtn,.inviteBtn){
    box-sizing:border-box;
    width:44px;
    height:44px;
    min-width:44px;
    flex:none;
    padding:4px!important;
    font-size:23px;
    justify-self:center;
  }
  body.roomMobileViewport:has(#world) .top .roomLeaveBtn{
    grid-column:7;
    grid-row:2;
    justify-self:end;
  }
  body.roomMobileViewport:has(#world) .top .furnitureToolBtn{
    grid-column:4;
    grid-row:2;
  }
  body.roomMobileViewport:has(#world) .top .roomZoomOutBtn{
    grid-column:6;
    grid-row:2;
  }
  body.roomMobileViewport:has(#world) .top .roomZoomInBtn{
    grid-column:5;
    grid-row:2;
  }
  body.roomMobileViewport:has(#world) .top .inviteBtn{
    grid-column:2;
    grid-row:2;
    display:grid;
    place-items:center;
    justify-self:start;
    width:clamp(64px,calc(22vw - 6px),90px);
    min-width:64px;
    padding:3px 4px!important;
    font-size:clamp(11px,2.6vw,12px);
    line-height:1.1;
  }
  body.roomMobileViewport:has(#world) .top:has(.roomGearBtn[hidden]) .inviteBtn{
    grid-column:1;
  }
  body.roomMobileViewport:has(#world) .top .inviteLabel{display:inline;white-space:nowrap}
  body.roomMobileViewport:has(#world) .top .roomGearBtn{
    grid-column:1;
    grid-row:2;
  }
  body.roomMobileViewport:has(#world) .roomFloorViewport{
    top:var(--lc-zoom-top-height,120px);
  }
  /* The layout editor keeps the title and zoom on one row; its guidance
     creates a second row only while an editing action is visible. */
  body.roomMobileViewport.lc-layout-active:has(#world) .top:has(.roomZoomBtn){
    grid-template-rows:44px;
    grid-auto-rows:auto;
  }
  body.roomMobileViewport.lc-layout-active:has(#world) .top .roomTitle{
    grid-column:1/6;
  }
  body.roomMobileViewport.lc-layout-active:has(#world) .top .roomZoomOutBtn{
    grid-column:6;
    grid-row:1;
  }
  body.roomMobileViewport.lc-layout-active:has(#world) .top .roomZoomInBtn{
    grid-column:7;
    grid-row:1;
  }
  body.roomMobileViewport.lc-layout-active:has(#world) .top > :is(.lc-furniture-floating,.lc-furniture-picker,.lc-air-bar):not([hidden]){
    grid-column:1/-1;
    grid-row:2;
    min-width:0;
    margin:0;
    padding:0;
    flex:none;
    order:initial;
  }
  body.roomMobileViewport.lc-layout-active:has(#world) .top > .lc-air-bar:not([hidden]){
    flex-wrap:wrap;
    gap:6px;
  }
  body.roomMobileViewport.lc-layout-active:has(#world) .top > .lc-air-bar .lc-air-description{
    flex:1 1 100%;
  }
}