/* 手机竖屏录制适配（≤1024px） */
@media (max-width: 1024px) {

  /* 解除全局锁滚动，允许内容溢出隐藏由具体容器控制 */
  html, body {
    overflow: auto;
    height: 100%;
  }

  /* 课程面板完全隐藏，录制时不需要 */
  #lesson-panel {
    display: none !important;
  }

  /* 画布占据上半屏 */
  #canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 50vh !important;
    z-index: 1 !important;
  }

  /* BJS 面板占据下半屏，自动展开，覆盖在画布下方 */
  #bjs-main-panel {
    position: fixed !important;
    top: 50vh !important;
    left: 0 !important;
    width: 100vw !important;
    height: 50vh !important;
    z-index: 2 !important;
    border-radius: 0 !important;
    background: rgba(20, 20, 40, 0.97) !important;
    resize: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* 展开状态强制显示所有子元素 */
  #bjs-main-panel.collapsed,
  #bjs-main-panel.expanded {
    display: flex !important;
    flex-direction: column !important;
  }
  #bjs-main-panel.collapsed #bjs-code-wrapper,
  #bjs-main-panel.collapsed #bjs-button-bar,
  #bjs-main-panel.collapsed #bjs-log-output,
  #bjs-main-panel.collapsed #bjs-suggestions {
    display: block !important;
  }

  /* 标题栏简化，不占太多空间 */
  #bjs-panel-header {
    height: 36px !important;
    padding: 0 10px !important;
    flex-shrink: 0 !important;
  }

  /* 代码输入区高度适配 */
  #bjs-code-wrapper {
    margin: 6px !important;
    min-height: 100px !important;
    flex: 1 1 auto !important;
  }
  #bjs-code-input {
    height: 100% !important;
    min-height: 80px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 8px !important;
    background: #0a0a1a !important;
    color: #9eff9e !important;
  }

  /* 按钮栏横排，适合触摸 */
  #bjs-button-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
  }
  #bjs-button-bar button {
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    width: auto !important;
  }
  #bjs-exec-btn {
    background: #2c8c2c !important;
  }

  /* 日志输出压缩 */
  #bjs-log-output {
    max-height: 60px !important;
    min-height: 30px !important;
    margin: 4px 6px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
  }

  /* 补全列表隐藏，录制时不需要 */
  #bjs-suggestions {
    display: none !important;
  }

  /* 顶部菜单栏高度减小，避免占用过多空间 */
  #global-topbar {
    height: 36px !important;
    padding: 0 8px !important;
    z-index: 3 !important;
  }
}