/* ============================================================
   移动端自适应 (mobile.css) — 注入于 </head> 前
   全部 !important，压过内联 <style> 与 sidebar.js 运行时注入样式
   生效断点：<=768px（手机/小平板）
   真实导航类名：.tc-store-sidebar-*（sidebar.js 运行时注入）
   ============================================================ */
@media (max-width: 768px) {

  /* ---- 1. 主布局：竖向，侧边栏变顶部横向滚动导航条 ---- */
  #tc-main-layout {
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* ---- 1b. 内层行容器（侧栏 + 内容区）→ 纵向堆叠 ----
     关键：不改这个，内容区会被 width:100% 的侧栏挤成 0 宽 */
  .tc-body-wrap {
    flex-direction: column !important;
    min-height: 0 !important;
  }
  /* :has() 兜底（万一 class 未注入） */
  #tc-main-layout div:has(> #tc-sidebar) {
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* ---- 2. 侧边栏容器 → 顶部横向滚动条 ---- */
  #tc-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 52px !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  #tc-sidebar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 7px 10px !important;
  }
  .tc-sidebar-footer, .tc-store-sidebar-footer { display: none !important; }

  /* ---- 3. 导航主体（真实类 .tc-store-sidebar-body）---- */
  .tc-store-sidebar-body {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 4px !important;
  }
  /* 分组：横向排列，标题/箭头隐藏，项成小药丸 */
  .tc-store-sidebar-group {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 2px !important;
  }
  .tc-store-sidebar-group-title { display: none !important; }
  .tc-store-sidebar-group-caret { display: none !important; }
  .tc-store-sidebar-group-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 0 !important;
  }
  /* 折叠组在移动端强制展开，否则菜单会消失 */
  .tc-store-sidebar-group.collapsed .tc-store-sidebar-group-items {
    display: flex !important;
  }

  /* ---- 4. 导航项 → 小药丸（真实类 .tc-store-sidebar-item / .tc-store-sidebar-single）---- */
  .tc-store-sidebar-item,
  .tc-store-sidebar-single {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    border-left: none !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }
  .tc-store-sidebar-item.active,
  .tc-store-sidebar-single.active {
    border-left: none !important;
    background: var(--accent) !important;
    color: #fff !important;
  }
  .tc-store-sidebar-item-label {
    flex: 0 0 auto !important;
    display: inline !important;
  }
  .tc-store-sidebar-group-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    margin-right: 4px !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* 兼容旧版 .tc-nav-item（sidebar.js V3 老样式，部分模块可能用） */
  #tc-sidebar .tc-nav-item,
  #tc-sidebar-nav .tc-nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    border-left: none !important;
    font-size: 12px !important;
  }
  #tc-sidebar .tc-nav-item span:not(.tc-nav-icon),
  #tc-sidebar-nav .tc-nav-item span:not(.tc-nav-icon) { display: inline !important; }

  /* ---- 5. 内容区满宽、可滚 ---- */
  #tc-content-area {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #tc-content { padding: 12px !important; }

  /* ---- 6. 顶栏：单行不换行，模块组横向滚动 ---- */
  #tc-topbar {
    padding: 0 10px !important;
    height: 52px !important;
    min-height: 52px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  .tc-topbar-left { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; gap: 8px !important; }
  .tc-topbar-right { gap: 8px !important; flex: 0 0 auto !important; }
  #tc-tenant-name, #tc-page-title,
  .tc-topbar-shop-label, .tc-topbar-xingyuan, .tc-topbar-divider { display: none !important; }
  .tc-topbar-logo { font-size: 13px !important; white-space: nowrap !important; flex: 0 0 auto !important; }
  .tc-topbar-logo .dot { display: none !important; }
  .tc-topbar-app-trigger { flex: 0 0 auto !important; }
  .tc-topbar-app-text { font-size: 12px !important; white-space: nowrap !important; }
  /* 模块组导航：单行横向滚动，禁止换行溢出 */
  .tc-topbar-nav-list {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    height: 52px !important;
    -webkit-overflow-scrolling: touch;
  }
  .tc-topbar-nav-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 0 4px !important;
    height: 52px !important;
  }
  .tc-topbar-nav-label { white-space: nowrap !important; }
  .tc-topbar-nav-icon { width: 14px !important; height: 14px !important; }
  /* 侧边栏内"完善店铺信息"提示卡在移动端隐藏，避免与导航条碰撞 */
  .tc-store-header { display: none !important; }
  .tc-store-sidebar-title { display: none !important; }

  /* ---- 7. 表单两列 → 单列 ---- */
  .form-row { grid-template-columns: 1fr !important; }

  /* ---- 8. 通用网格 → 单列（表格容器 / 侧栏 / 风格切换器色板 除外） ---- */
  [class*="grid"]:not(.table-container):not(.tc-store-sidebar-body):not(.ts-grid) {
    grid-template-columns: 1fr !important;
  }

  /* ---- 9. 表格：容器横向滚动，避免页面溢出 ---- */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-container > table,
  table { min-width: 680px; }
  .search-input { width: 100% !important; max-width: 240px !important; }

  /* ---- 10. 弹窗/抽屉：移动端全屏 ---- */
  .modal, .modal-content, .tc-modal, .tc-modal-body,
  .drawer, .drawer-content, .tc-drawer, .tc-drawer-body {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important;
    margin: 0 !important;
  }

  /* ---- 11. 登录遮罩 / 卡片自适应 ---- */
  .tc-login-overlay { padding: 0 !important; align-items: center !important; }
  .tc-login-card {
    width: auto !important;
    max-width: 420px !important;
    margin: 16px !important;
  }
  .tc-mode-tab { font-size: 12px !important; padding: 8px 4px !important; }

  /* ---- 12. 防溢出兜底 ---- */
  html, body { overflow-x: hidden !important; }
  *, *::before, *::after { max-width: 100% !important; }
  img, video, canvas, svg, iframe { max-width: 100% !important; height: auto !important; }
}

@media (max-width: 480px) {
  #tc-content { padding: 10px !important; }
  .tc-login-card { margin: 10px !important; }
  #tc-topbar { padding: 0 8px !important; }
}

/* ═══ 互动模块手机适配补丁（2026-09-22 新增）═══
   以下规则针对「叨叨AI / 小龙 / 西瓜同学 / 菜心」融入的互动 UI，
   补足 mobile.css 通配符未覆盖 / 误伤之处。 */
@media (max-width: 768px) {

  /* 1. AI 动效工坊：沙箱预览 iframe 被全局 `iframe{height:auto!important}` 压扁，手机端给可用高度 */
  .ms-iframe { height: 300px !important; }
  .ms-preview { min-height: 300px !important; }

  /* 2. 风格切换器色板：豁免通配符 [class*=grid] 的 1 列强制，手机保持 2 列更紧凑 */
  .ts-grid { grid-template-columns: 1fr 1fr !important; }

  /* 3. 风格切换器弹层：右上角小弹窗在手机上易溢出，改为底部抽屉 */
  .ts-panel.ts-popover {
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.45) !important;
    animation: ts-sheet-in .28s cubic-bezier(.34,1.56,.64,1) !important;
  }
  @keyframes ts-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* 4. 互动演示最小点按区域：避免手机误触（磁吸/开关/抽屉/点赞等） */
  .ml-mini-demo button,
  .ml-mini-demo [role="button"],
  .motion-showcase .ms-demo button,
  .motion-showcase .ms-demo [role="button"],
  .ms-tpl { min-height: 42px; }

  /* 5. 知识库 / 组件馆 / 微交互实验室 的卡片在手机端已是单列堆叠（通配符生效），
        这里仅放宽卡片内边距，避免拥挤 */
  .kb-card, .ml-card, .ms-card, .dc-card { padding: 14px !important; }
}