/* 移动端适配：在 style.css / workspace.css 之后加载。
   思路：
   - 一级图标栏收成 54px 的窄条，常驻（导航不能藏）
   - 二级面板变成覆盖式抽屉（原来在小屏是被强制隐藏的，那样没法换模型）
   - 内容区全宽，创作卡满宽，抽屉/预览全屏
   - 表格一律横向滚动，不做小屏折叠（信息不丢） */

@media (max-width: 900px) {
  body { font-size: 13.5px; }

  /* 一级图标栏 */
  .rail { width: 54px; flex-basis: 54px; padding: 10px 0 8px; }
  .rail-item span.rail-tip { display: none; }
  .rail-btn { width: 34px; height: 34px; }

  /* 二级面板：覆盖式抽屉 */
  .panel-side {
    position: fixed; left: 54px; top: 0; bottom: 0; z-index: 45;
    width: min(320px, 80vw); flex-basis: auto;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(-104%); transition: transform .2s var(--ease);
  }
  body:not(.panel-closed) .panel-side { transform: none; }
  body.panel-closed .panel-side { overflow: hidden; }

  .main { margin-left: 0; }
  .quickrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { padding: 0 12px; gap: 8px; overflow-x: auto; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn { padding: 5px 9px; font-size: 12px; }

  .view { padding: 12px 12px 14px; }

  /* 工作区 */
  .ws-top { flex-wrap: wrap; gap: 8px; }
  .ws-top .ws-model { order: 3; }
  .composer-wrap { padding-bottom: 8px; }
  .comp-card { max-width: 100%; border-radius: 16px; padding: 12px 12px 10px; }
  .comp-card > textarea { min-height: 54px; }
  .ws-intro { padding: 8px 8px 20px; }
  .ws-mark { width: 68px; height: 68px; margin: 4px auto 14px; border-radius: 20px; }
  .ws-mark img { width: 42px; height: 42px; }
  .ws-intro-desc { font-size: 12.5px; line-height: 1.9; -webkit-line-clamp: 4; }

  /* 对话 */
  .messages { gap: 12px; }
  .msg { max-width: 94%; }
  .msg .body { font-size: 13.5px; }
  .msg-acts { opacity: 1; }

  /* 画布 */
  .cv-tools {
    left: 8px; right: 8px; top: 8px; overflow-x: auto; padding: 3px;
    -webkit-overflow-scrolling: touch;
  }
  .cv-tools button { padding: 6px 8px; }
  .cv-tools button span { display: none; }
  .cv-tools button { min-width: 34px; justify-content: center; }
  .cv-zoom { right: 8px; bottom: 8px; }
  .cv-tips { display: none; }
  .cv-node { max-width: 78vw; }
  .cv-empty { padding: 16px; }

  /* 抽屉 / 预览 / 弹窗全屏 */
  .drawer-panel { width: 100%; }
  .lightbox-box { width: 100vw; max-height: 100vh; border-radius: 0; }
  .lightbox-body img, .lightbox-body video { max-height: calc(100vh - 200px); }
  .lightbox-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .modal-box { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .pay-tiers { grid-template-columns: repeat(2, 1fr); }
  .ac-avatar-row { flex-direction: column; align-items: center; }
  .ac-field { flex-direction: column; align-items: stretch; gap: 6px; }
  .ac-field span { flex: none; }

  /* 表格：横向滚动，不折叠 */
  .panel { padding: 12px; overflow-x: auto; }
  table.data { min-width: 560px; }
}

/* 手机竖屏：进一步收紧 */
@media (max-width: 560px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .quickrow { grid-template-columns: repeat(2, 1fr); }

  /* 工作台首页（重构后）：小屏收尾 */
  .hx-hero { padding: 20px 18px; }
  .hx-title { font-size: 22px; }
  .hx-sect { margin: 20px 0 10px; }
  .quickrow { grid-template-columns: minmax(0, 1fr); }   /* 工具入口一行一个，图标+标题不挤 */
  .hx-preview { display: none; }                          /* 小屏不占地方 */

  .hero { padding: 22px 18px; }
  .hero-plus { width: 38px; height: 38px; margin-bottom: 10px; font-size: 20px; border-radius: 12px; }
  /* 主入口卡片在手机上也要是最醒目的那块，别和区块标题一个量级 */
  .hero-title { font-size: 21px; }
  .hero-sub { font-size: 12.5px; }
  .hero-kicker { font-size: 10.5px; }
  .hero-go { height: 44px; font-size: 13.5px; }
  .qbtn { padding: 12px; }
  .qbtn .qi { width: 28px; height: 28px; }
  .ws-tasklist { padding: 7px 12px; font-size: 12px; }
  .comp-bottom { flex-wrap: wrap; }
  .comp-bottom .params { order: 2; width: 100%; }
  .go-btn { margin-left: auto; }
  .p-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .p-tabs .p-tab { flex: 0 0 auto; }
}

/* 顶栏瘦身：手机上只留标题 + 余额 + 头像（退出/同步都在头像菜单里） */
@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap; }
  .topbar-right #syncBtn,
  .topbar-right #adminLink,
  .topbar-right #who { display: none; }
  /* 余额只缩短，不能消失；头像无论如何都保留 */
  .topbar-right #balance { font-size: 11.5px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .view-title { font-size: 16px; }
  .notice { font-size: 12px; padding: 9px 12px; margin: 8px 12px 0; }
}

/* 触摸设备：hover 才出现的操作一直显示（手机上没法 hover） */
@media (hover: none) {
  .cv-node-acts, .msg-acts, .ci-acts, .p-model .pin, .dr-acts { opacity: 1; }
  .p-model .pin { position: static; margin-left: auto; align-self: flex-start; }
}
