/* ===== 移动端布局（≤900px）：单列堆叠，中间球体优先 =====
   问题根因：桌面为固定三栏 340px | 1fr | 380px，手机 390px 宽时中栏被挤成 0。
   策略：同一份站点，按视口切换版式（不做 UA 嗅探，平板/横屏/桌面模式都不会误判）。 */
@media (max-width: 900px) {
  html, body { height: auto; min-height: 100%; }
  body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  body.has-nav #view-cockpit { height: auto; }
  body.has-nav #cockpit { height: auto; }

  #cockpit {
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 8px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto var(--wm-h);
    grid-template-areas:
      "top"
      "mid"
      "left"
      "right"
      "bot"
      "wm";
  }

  /* 中间球体：手机首屏最大区域 */
  #slot-mid {
    grid-area: mid;
    height: min(100vw, 460px);
    min-height: 300px;
  }
  #slot-mid > * { height: 100%; }
  #slot-mid canvas { width: 100% !important; height: 100% !important; display: block; }
  /* 窄屏时相机视野不变、水平方向会切掉球体两侧：整体缩放到 72% 让它完整入画 */
  #slot-mid canvas { transform: scale(.82); transform-origin: 50% 50%; }

  #slot-top   { grid-area: top;   min-height: 72px; }
  #slot-left  { grid-area: left;  height: 300px; }
  #slot-right { grid-area: right; height: 320px; }
  #slot-bot   { grid-area: bot;   height: 260px; overflow-y: auto; }

  /* 顶部导航：允许横向滚动，隐藏长免责条（水印仍在页面底部常驻） */
  #appnav { overflow-x: auto; overflow-y: hidden; white-space: nowrap; gap: 2px; }
  #appnav .nav-disclaimer { display: none; }
  #appnav .nav-btn { flex: 0 0 auto; padding: 6px 10px; }

  /* 面板字体略调，避免数字挤成两行 */
  .panel-hd { font-size: 12px; }
  :root { --gap: 8px; }


  /* 水印常驻：手机上改为底部固定，保证免责声明始终可见 */
  body { padding-bottom: 28px; }
  #slot-wm {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 9500;
    background: rgba(7, 11, 18, .94);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
  }

  /* ===== 模块级：解决文字溢出 / 竖排 ===== */
  /* 左：资产与因子 —— 列表内部滚动，名字允许折行 */
  #slot-left { height: 340px; }
  .mod-m3-root { height: 100%; }
  .mod-m3-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .mod-m3-name { white-space: normal !important; overflow-wrap: anywhere; }
  .mod-m3-row { min-height: 26px; }

  /* 右：跨市场联动 —— 长文本换行、区域内部滚动 */
  #slot-right { height: auto !important; }
  .mod-m4-root { height: auto !important; }
  .mod-m4-body { flex: none !important; height: auto !important; max-height: none !important;
                 overflow: visible !important; }
  .mod-m4-txt { white-space: normal !important; overflow: visible !important;
                line-height: 1.45 !important; height: auto !important; word-break: break-word; }
  /* 联动链路：允许换行、隐藏对不齐的装饰连线 */
  .mod-m4-chain { flex-wrap: wrap !important; row-gap: 4px; column-gap: 2px; }
  .mod-m4-svg { display: none !important; }
  /* 箭头并入后一个节点，避免行末只剩一个箭头 */
  .mod-m4-arrow { display: none !important; }
  .mod-m4-chip2 + .mod-m4-arrow + .mod-m4-chip2::before { content: "→"; opacity: .55; margin-right: 4px; }
  /* 每个 chip 保持完整不拆字，整体按行换行 */
  .mod-m4-chip2 { white-space: nowrap !important; flex: 0 0 auto !important; max-width: 100%;
                  line-height: 1.35 !important; height: auto !important; padding-top: 2px; padding-bottom: 2px; }
  .mod-m4-path { min-height: 22px; height: auto !important; padding-bottom: 4px; }
  .mod-m4-conf, .mod-m4-cval { height: auto !important; min-height: 21px; line-height: 1.5 !important; overflow: visible !important; }
  .mod-m4-path + .mod-m4-path { border-top: 1px dashed rgba(120,140,170,.16); }
  /* 信号队列：整行高度自适应，第一列文字可折行 */
  .mod-m4-sig { align-items: flex-start !important; height: auto !important; min-height: 26px !important;
                padding: 4px 0; flex-wrap: wrap !important; row-gap: 2px; }
  /* 第一列（信号文字）占满一行，置信度/时间自动换到第二行右侧 */
  .mod-m4-sig .mod-m4-txt { flex: 1 1 calc(100% - 26px) !important; }
  .mod-m4-sig .mod-m4-confdot { margin-left: auto; }
  .mod-m4-sig .mod-m4-dir { margin-top: 1px; }
  .mod-m4-sig .mod-m4-confdot, .mod-m4-sig .mod-m4-ts { margin-top: 1px; flex: 0 0 auto; }

  /* 底：资产板块多空热力 + 趋势曲线 —— 竖向堆叠，热力改 2 列 */
  #slot-bot { height: auto !important; overflow: visible !important; }
  .mod-m5-root { flex-direction: column !important; height: auto !important; }
  .mod-m5-heat { width: 100% !important; flex: none !important; }
  .mod-m5-chartzone { width: 100% !important; flex: none !important; min-height: 160px; }
  .mod-m5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mod-m5-cell { min-height: 72px; }
  .mod-m5-head { flex-wrap: wrap !important; row-gap: 2px; align-items: flex-start; }
  .mod-m5-title { white-space: normal !important; overflow-wrap: anywhere; }
  .mod-m5-clabel { white-space: normal !important; overflow-wrap: anywhere; }
  .mod-m5-canvasbox { width: 100% !important; }
}

/* 横屏手机：球体不要吃掉整屏 */
@media (max-width: 900px) and (orientation: landscape) {
  #slot-mid { height: 70vh; min-height: 240px; max-height: none; }
  #slot-left { height: 260px; }
  #slot-right { height: 280px; }
  #slot-bot { height: 200px; }
}