/* ============================================================
   Optio · 移动端布局层（v4.4.59）
   ------------------------------------------------------------
   只在 ≤960px / ≤560px 生效，桌面样式完全不受影响。
   四条目标：
     ① 任何视图都不横向溢出（手机上不出现左右拖动）
     ② 触控目标 ≥44px，图标按钮不再是 17px 的小点
     ③ 顶栏在手机上只留必要控件，标题与操作各占一行也不挤
     ④ 弹窗/浮层/表格在窄屏内自适应，不撑破页面

   维护提示：新增视图若在手机上溢出，先看这里的兜底规则是否被行内样式盖住；
   行内 width / min-width 用 !important 压制，是刻意的（视图是 JS 拼的字符串）。
   ============================================================ */

@media (max-width: 960px) {
  /* ---- 1) 兜底：整页禁止横向溢出 ---- */
  html, body { max-width: 100%; overflow-x: hidden; }
  .layout, .main { max-width: 100%; min-width: 0; }

  /* ---- 2) 让视图内容可收缩（固定列宽/行内 min-width 是溢出的主因）---- */
  #viewContainer, #viewContainer * { min-width: 0 !important; }
  #viewContainer > *, #viewContainer > * > * { max-width: 100%; }
  #viewContainer img, #viewContainer svg, #viewContainer canvas,
  #viewContainer video, #viewContainer iframe { max-width: 100%; }
  /* 装饰光斑（欢迎卡上的大圆）不再撑宽卡片 */
  .wb-orb, .glow1, .glow2 { max-width: 100% !important; }
  /* 长串 URL / 提示词 / ID 换行而不是撑破 */
  #viewContainer pre, #viewContainer code, .modal-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .card, .wb-panel, .wb-card, .wb-welcome, .wb-feed, .wb-feed-item { max-width: 100%; }

  /* ---- 3) 顶栏：换行 + 右侧控件可收缩 ----
     注意：workbench.css 把 .topbar 写成固定 height:68px + padding !important，
     手机上一换行第二行就会被下面内容盖住，所以这里必须把高度放开。 */
  .topbar { flex-wrap: wrap; gap: 8px 10px; height: auto !important; min-height: 64px; padding: 10px 12px !important; }
  .topbar > .flex { flex-wrap: wrap; gap: 8px; min-width: 0; }
  .topbar > .flex:first-child { flex: 1 1 auto; }
  .topbar > .flex:last-child { flex: 0 1 auto; justify-content: flex-end; }
  .page-sub { max-width: 100%; }

  /* ---- 4) 触控目标 ≥44px ---- */
  .menu-toggle, .wb-icon-btn, .modal-close { width: 44px; height: 44px; display: grid; place-items: center; }
  /* 汉堡图标是手写 svg（直接子元素）；用 > 以免命中 FA 注入的图标 svg */
  .menu-toggle > svg { width: 22px; height: 22px; }
  .nav-item { padding: 12px; font-size: 15px; }
  .btn, .wb-btn, .wb-btn-primary, .wb-btn-ghost, .wb-out-btn, .wb-brand-btn { min-height: 44px; }
  /* 密集工具条里的按钮：不做成一字一行，整块换行 */
  .wb-btn-primary, .wb-btn-ghost, .wb-btn, .wb-chip, .chip, .tab { white-space: nowrap; }
  .wb-chip, .chip { min-height: 32px; padding: 0 12px; }
  /* 小而关键的控件（账号解绑、删除套餐、查看方案）在手机上放大到可点 */
  .wb-acct .bind, .wb-pkg-del, .wb-plan-view { min-height: 36px; min-width: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* ---- 4b) 卡片头/工具条：手机上换行而不是把按钮挤成竖排字 ---- */
  .wb-card-hd { flex-wrap: wrap; gap: 10px; row-gap: 12px; }
  .wb-card-hd > * { flex-wrap: wrap; min-width: 0; }
  .wb-toolbar, .toolbar, .wb-actions, .card-hd, .wb-card-hd { row-gap: 12px; }
  /* 横向滚动的分段控件（标签页/筛选条）：控件内滚，不撑破页面 */
  .wb-tabs, .tabs, .seg, .segmented, .wb-seg { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wb-tabs > *, .tabs > *, .seg > *, .segmented > * { flex: 0 0 auto; }

  /* ---- 5) 弹窗：窄屏贴底、全宽、内部滚动 ---- */
  .modal-overlay { padding: 5vh 10px; align-items: flex-end; }
  .modal, .modal.modal-md, .modal.modal-xl { width: 100% !important; max-width: 100% !important; max-height: 90vh; overflow: auto; }
  .modal-header, .modal-footer { padding: 12px 16px; }
  .modal-body { padding: 16px; }

  /* ---- 5b) 套餐提醒条：窄屏内边距与字号收紧 ---- */
  .plan-banner { padding: 10px 12px; font-size: 13px; gap: 8px; }

  /* ---- 6) 浮层贴边 ---- */
  .notify-panel { left: 10px; right: 10px; width: auto; max-width: none; }
}

@media (max-width: 560px) {
  /* 顶栏：只留「汉堡 + 页面标题」与关键操作，其余收进抽屉/省略 */
  .wb-search { display: none !important; }
  #sysBadge { display: none !important; }
  .wb-brand-btn #brandName, .wb-brand-btn .fa-chevron-down { display: none; }
  .wb-brand-btn { padding: 0 10px; }
  .wb-out-btn { padding: 0 12px; }
  .page-title { font-size: 16px; }

  /* 正文与留白：手机阅读更松一点，避免 iOS 聚焦缩放 */
  body { font-size: 15.5px; }
  #viewContainer { padding: 12px 12px 72px; }

  /* 栅格一律单列；卡片内边距收紧 */
  .grid-2, .grid-3, .grid-4, .grid-6,
  .wb-kpis, .wb-brain-stats, .brain-stats { grid-template-columns: 1fr !important; }
  .card, .wb-panel, .wb-card, .wb-welcome { padding: 16px; border-radius: 14px; }
  .wb-welcome h1 { font-size: 22px; line-height: 1.32; }

  /* 表单控件全宽，别在手机上留半宽输入框 */
  #viewContainer input:not([type=checkbox]):not([type=radio]):not([type=color]),
  #viewContainer select, #viewContainer textarea { width: 100% !important; }

  /* ---- 7) 登录/注册页：卡片贴边、输入框加高、文字链接给足点击区 ---- */
  .auth-side { padding: 20px 14px; }
  .auth-card { padding: 24px 18px 20px; border-radius: 16px; }
  .auth-headline { font-size: 19px; }
  .form-input, .form-select, .form-textarea, .wb-input { min-height: 48px; font-size: 16px; }
  .btn-block, .auth-card .btn { min-height: 48px; }
  .auth-tip { margin-top: 14px; }
  .auth-tip a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
}