/* ============================================================================
 * control-layout.css —— 设备控制页：左右拆成两个盒子
 * ----------------------------------------------------------------------------
 * 现状（改之前）：ui-tune.css 给 .ctrl-body / .ctrl-screen-area 封了
 *   max-height: calc(100vh - 150px)，并且「投屏区 / 屏幕控制列 / ADB列」被
 *   .home-tab-left > .ctrl-body 这两层 flex 容器捆在一根布局线上：
 *     · 投屏（想固定显示的那块）高度被压；
 *     · 屏幕控制列、ADB 列想独立上下滚，又被同一根线牵着。
 *
 * 改法（只动 CSS，不动 DOM、不动任何 React 节点）：
 *   ① 用 display:contents 把两层的"包装"去掉，让
 *      投屏区 / 屏幕控制列 / 右列 成为同一层的三个盒子；
 *   ② 投屏盒子解绑高度上限 → 按 1920x1080 比例自然展开、固定显示；
 *   ③ 右侧两个功能区盒子各自成为独立滚动盒子（高度=视口剩余，内容多长都能滚）；
 *   ④ 页面本身不滚动 → 右边滚动时左边显示完全不动。
 *
 * 撤销：删掉 index.html 里那一行 <link .../control-layout.css> 即可。
 * ==========================================================================*/

/* ① 拆掉两层包装：三个区域变成同级 */
.home-tab-left,
.home-tab-left > .ctrl-body {
  display: contents !important;
}

/* 三个盒子一行排开：投屏（弹性） / 屏幕控制列 / 右列 */
.home-tab-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) minmax(0, 478px) !important;
  align-items: start !important;
  gap: 12px !important;
  height: calc(100vh - 160px) !important;
  min-height: 0 !important;
}

/* ② 左盒子（投屏）：解绑高度上限，按比例自然展开，顶部对齐、固定显示 */
.ctrl-body,
.ctrl-screen-area {
  max-height: none !important;
}
.ctrl-screen-area {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* ③ 右盒子（屏幕控制列 / ADB控制·注入中心·应用列表列）：各自独立滚动，不设上限
 *    选择器要带上 .home-tab-left 前缀，否则会被界面里那条
 *    「.home-tab-left .ctrl-sidebar-panel { overflow: visible !important }」按特异性压掉 */
.home-tab-left .ctrl-sidebar-panel,
.home-tab-right {
  align-self: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  scrollbar-width: thin;
}

/* ④ 页面本身不滚动：右边滚的时候左边的显示不跟着动 */
.control-page {
  overflow: hidden !important;
}

/* ⑤ 右盒子里的每一块（ADB面板 / 注入中心 / 应用列表 / 中列的卡片）都完整展开，
 *    不许被 flex 收缩压扁 —— 内容超出就交给盒子的滚动条 */
.home-tab-right > * {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
}
/* 注意：这里**不要**给 .trojan-main-area 写 max-height —— 抽拉盒子是靠
 * max-height:0 折叠它的，覆盖掉就会出现"内容透明了但还占着几百像素高度"、
 * 把下面的盒子顶到屏幕外。只保证它不被 flex 压扁就够了。 */
.home-tab-right .trojan-main-area {
  flex: 0 0 auto !important;
}
.home-tab-left .ctrl-sidebar-panel .sidebar-two-col,
.home-tab-left .ctrl-sidebar-panel .sidebar-col {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ⑤ 窄屏兜底：放不下三列时让右侧两个盒子掉到下一行，仍然各自可滚 */
@media (max-width: 1180px) {
  .home-tab-split {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
  }
  .home-tab-left .ctrl-sidebar-panel,
  .home-tab-right {
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
  }
}