/* Hall on phones (≤700 px), loaded after every other hall stylesheet: a solid top bar, voice and view controls on one
   row under it, the room in the middle, and one dock at the bottom — a timer row with a caption line, joined to the
   music row. hall-layout.js keeps --hall-top / --hall-music / --hall-dock equal to the real heights. */
@media (max-width:700px){
  /* Top bar: solid enough that the room line stays readable over the bright windows. */
  .in-room>header{min-height:0!important;height:auto!important;padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important;gap:8px!important;align-items:center!important;
    background:linear-gradient(180deg,rgba(26,20,14,.97),rgba(26,20,14,.9))!important;border-bottom:1px solid rgba(216,176,120,.22)!important;box-shadow:0 8px 22px rgba(0,0,0,.28)}
  .in-room>header>div:first-child{flex:1 1 auto;min-width:0;max-width:none!important}
  .in-room>header small{display:none}
  .in-room>header h1{font-size:16px!important;line-height:1.25;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .in-room #roomMeta{display:block;margin-top:2px;font-size:10.5px;line-height:1.3;color:#dcc6a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
  .in-room>header>.actions{flex:none;max-width:none!important;gap:4px!important;flex-wrap:nowrap!important}
  .in-room>header>.actions>button{min-height:30px!important;padding:5px 8px!important;font-size:11px!important}

  /* Voice on the left and the view controls on the right, one row under the bar. */
  .in-room .room-voice,.in-room .scene-camera-controls{top:calc(var(--hall-top,58px) + 8px)!important;padding:3px!important;gap:3px!important;border-radius:999px!important}
  .in-room .room-voice{left:12px!important;right:auto!important;flex-wrap:nowrap!important;max-width:calc(100% - 210px)}
  .in-room .room-voice #voiceState{display:none}
  .in-room .room-voice:has(#mic:not([hidden])) #voiceState{display:inline;font-size:10px;padding:0 2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .in-room .room-voice button{min-height:30px!important;font-size:11px!important;padding:4px 11px!important;white-space:nowrap}
  .in-room .scene-camera-controls{right:12px!important}
  .in-room .scene-camera-controls button{min-width:30px!important;min-height:30px!important;padding:3px 6px!important;border-radius:999px}

  /* The dock: music row at the bottom, the timer row sitting on it as one card. */
  .in-room .music{bottom:calc(10px + env(safe-area-inset-bottom))!important;width:calc(100% - 20px)!important;padding:6px 8px!important;gap:5px!important;border-radius:0 0 18px 18px!important;border-top-color:rgba(216,176,120,.12)!important}
  .in-room .controls{bottom:calc(10px + env(safe-area-inset-bottom) + var(--hall-music,48px) - 1px)!important;width:calc(100% - 20px)!important;padding:8px 10px 5px!important;
    gap:6px!important;row-gap:3px!important;flex-wrap:wrap!important;align-items:center!important;border-radius:18px 18px 0 0!important;border-bottom-color:transparent!important;box-shadow:0 -8px 24px rgba(0,0,0,.22)!important}
  /* Timer row: time, start, reset … rules, focus together; the coins and the focus note go on a caption line below. */
  .in-room .controls .own-timer,.in-room #togetherFocus{display:contents!important}
  .in-room #ownTime{order:1;font-size:21px;line-height:1;margin-right:2px}
  .in-room #timerToggle{order:2}.in-room #timerReset{order:3}
  .in-room #studyRulesButton{order:4;margin-left:auto;font-size:0!important;padding:4px 10px!important}
  .in-room #studyRulesButton::before{content:"规则";font-size:11px}
  .in-room #togetherFocus>button{order:5}
  .in-room .controls::after{content:"";order:8;flex-basis:100%;height:0}
  .in-room #hallStudyStatus,.in-room #togetherFocus>span{order:9;font-size:10px;line-height:1.4;color:#cdb898;white-space:nowrap}
  .in-room #togetherFocus>span{order:10;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0}
  .in-room .controls button{min-height:30px!important;font-size:11px!important;padding:4px 10px!important}
  .in-room .controls>*:not(.own-timer):not(#togetherFocus):not(#studyRulesButton){order:7}

  .in-room #private{bottom:calc(var(--hall-dock,120px) + 22px)!important}
  .in-room #status{bottom:calc(var(--hall-dock,120px) + 16px)!important}
}