/* Shared touch layout. Hidden panes remain mounted to keep the call connected. */
.navigation-toggle,.room-mobile-tab { display: none; }
.classroom,.room-workspace,.room-call,.room-side,.room-videos,.grow { min-width: 0; }
.room-tabs { position: sticky; top: 0; z-index: 5; background: var(--surface,#fff); }
.room-tabs button { min-height: 44px; }
.room-call { display: flex; flex-direction: column; gap: 12px; }
.room-videos { display: grid; gap: 10px; }
.room-side { max-height: calc(100dvh - 80px); overflow-y: auto; scrollbar-width: thin; }
.room-call-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5cbb7b; }
.room-chat-count { padding: 2px 5px; border-radius: 12px; background: var(--theme-picker-active,#294d3b); color: var(--theme-picker-active-text,#fff); font-size: 11px; }
.room-lesson-head,.title-row,.present-controls,.board-toolbar { flex-wrap: wrap; }
.present-controls select { flex: 1 1 120px; min-width: 0; }
.board-stage { width: 100%; min-width: 0; }
.board { display: block; }
.board-toolbar input[type=color] { min-width: 44px; min-height: 44px; }
.board-toolbar select { width: auto; }
.board-expanded { position: fixed; inset: 0; z-index: 50; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background: var(--page,#f6f7f2); display: flex; flex-direction: column; gap: 10px; }
.board-expanded .board-toolbar { flex: 0 0 auto; margin: 0; }
.board-expanded .board-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.board-expanded .aside-note { display: none; }
body:has(.board-expanded),body:has(.media-viewer[open]) { overflow: hidden; }
lesson-visual { display: block; min-width: 0; }
lesson-visual>[data-visual-open] { margin-top: 10px; }
.exercise audio,.exercise video { max-width: 100%; }
.exercise,.prose,.room-lesson-head h2,.title-row h1,.grow { overflow-wrap: anywhere; }
.media-viewer[open] { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border: 0; border-radius: 0; background: var(--page,#f6f7f2); display: flex; flex-direction: column; overflow: hidden; }
.viewer-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.viewer-controls { display: flex; align-items: center; gap: 8px; }
.viewer-controls output { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.viewer-toolbar button { min-height: 44px; min-width: 44px; }
.viewer-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.viewer-canvas { margin: 0 auto; }
.viewer-canvas>img,.viewer-canvas>svg { display: block; width: 100%; max-width: none; height: auto; }
.viewer-hint { flex-shrink: 0; margin: 0; padding: 10px 16px; font-size: 12px; color: var(--muted); }
.check-columns .room-side { max-height: none; overflow: visible; display: block; }
.check-columns .room-call { margin-bottom: 16px; }
@media (min-width:700px) and (max-width:1100px) {
  .room-layout { grid-template-columns: minmax(0,1fr) 210px; gap: 16px; }
  .room-side { position: sticky; top: 64px; }
  .room-view .exercise { padding: 18px; }
  .room-view .call-controls { grid-template-columns: 1fr; }
}
@media (max-width:850px) {
  .sidebar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 16px 20px; }
  .navigation-toggle { display: inline-flex; gap: 8px; align-items: center; }
  .sidebar .brand { margin: 0; }
  .sidebar .nav { display: none; grid-column: 1/-1; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; gap: 6px; width: 100%; }
  .sidebar.menu-open .nav { display: grid; }
  .sidebar .nav a { white-space: normal; min-width: 0; min-height: 48px; }
  .sidebar-foot { display: none; }
  .topline { gap: 10px; flex-wrap: wrap; }
  .topline-right { flex-wrap: wrap; }
  input:not([type=radio]):not([type=checkbox]):not([type=color]),select,textarea { font-size: 16px; }
  .btn,.icon-btn,.theme-choice,.bank-word,.order-move,.order-remove { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .block-head { flex-wrap: wrap; gap: 10px; }
  .block-head>strong { min-width: 0; overflow-wrap: anywhere; }
  .block-head>div { display: flex; flex-wrap: wrap; }
  dialog:not(.media-viewer) { max-width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .title-row { align-items: flex-start; gap: 16px; }
  .title-row>div { min-width: 0; }
  .title-row .actions { flex-wrap: wrap; }
  .list-row { flex-wrap: wrap; }
  .list-row>.grow { flex: 1 1 140px; }
  .form-actions,.dialog-actions { flex-wrap: wrap; }
  .dialog-actions .btn { flex: 1 1 120px; }
  .order-word { flex-wrap: wrap; }
  .order-word button { min-width: 36px; min-height: 40px; }
  .editor-top-actions { flex-wrap: wrap; gap: 8px; }
  .editor-top-actions .small { flex: 1 1 120px; }
}
@media (max-width:699px) {
  .main { padding: 18px 16px; }
  .room-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
  .room-side { display: block; position: static; max-height: none; overflow: visible; }
  .room-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; padding: 4px; margin-bottom: 16px; }
  .room-tabs button { display: block; padding: 8px 3px; font-size: 12px; line-height: 1.3; min-width: 0; }
  .room-videos { position: relative; display: block; }
  .room-videos>.video-wrap { aspect-ratio: 16/10; }
  .room-videos>.local { position: absolute; right: 10px; bottom: 34px; width: 28%; aspect-ratio: 4/3; box-shadow: 0 2px 12px #0005; }
  .room-videos>.local .video-label { font-size: 10px; padding: 2px 5px; }
  .room-videos>.local .video-placeholder { font-size: 10px; }
  .room-call .call-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .room-call #call-start { grid-column: 1/-1; }
  .room-side .chat-log { max-height: 55dvh; min-height: 200px; }
  .room-side .chat-form { position: sticky; bottom: env(safe-area-inset-bottom); padding-top: 10px; background: var(--surface,#fff); }
  .room-view .exercise { padding: 16px; }
  .room-tools { gap: 8px; }
  .room-tools select { width: 100%; }
  .board-toolbar { gap: 6px; }
  .board-toolbar .btn { font-size: 12px; }
  .viewer-toolbar { padding: 10px; gap: 8px; }
  .viewer-toolbar>strong { flex: 1; font-size: 14px; }
  .viewer-controls { order: 3; width: 100%; justify-content: center; }
  .matching-row { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .title-row h1 { font-size: 28px; }
}
@media (pointer:coarse) {
  .btn,.icon-btn,.bank-word,.theme-choice { min-height: 44px; }
  .option { min-height: 48px; }
  .order-word button { min-width: 36px; min-height: 40px; }
}