/* MOBILE_DOUBAO_LAYOUT_20260921
 * 以电脑端功能为基础：不改发送/API/技能逻辑
 * 只做手机排版 + 隐藏不必要噪音
 */
@media (max-width: 768px) {
  body.is-mobile {
    --dd-bg: #ffffff;
    --dd-side: #f7f8fa;
    --dd-border: #e5e7eb;
    --dd-text: #222222;
    --dd-muted: #8e8e93;
    --dd-blue: #2563eb;
    --dd-ai: #f3f4f6;
    --bg: var(--dd-bg) !important;
    --panel: #fff !important;
    --panel2: var(--dd-side) !important;
    --border: var(--dd-border) !important;
    --text: var(--dd-text) !important;
    --muted: var(--dd-muted) !important;
    --accent: var(--dd-blue) !important;
    background: var(--dd-bg) !important;
    color: var(--dd-text) !important;
  }
  body.is-mobile.dark {
    --dd-bg: #111827;
    --dd-side: #1f2937;
    --dd-border: #374151;
    --dd-text: #f3f4f6;
    --dd-muted: #9ca3af;
    --dd-ai: #374151;
  }

  /* —— 隐藏不必要噪音（功能保留在桌面） —— */
  body.is-mobile .sync-banner,
  body.is-mobile #sync-banner,
  body.is-mobile #quota-badge,
  body.is-mobile .m-input-meta,
  body.is-mobile #m-input-meta,
  body.is-mobile #cost-tip,
  body.is-mobile .chat-tip,
  body.is-mobile .desktop-only-actions,
  body.is-mobile #chat-pipeline,
  body.is-mobile .msg-del,
  body.is-mobile .msg .m-ava,
  body.is-mobile #mode-mini,
  body.is-mobile #params-row,
  body.is-mobile #asset-lock-chip,
  body.is-mobile .composer-mode-wrap,
  body.is-mobile #auto-prefs-btn,
  body.is-mobile #skills-panel-btn,
  body.is-mobile #at-picker-btn,
  body.is-mobile .composer-tb-spacer,
  body.is-mobile #mobile-sb-toggle,
  body.is-mobile .m-status,
  body.is-mobile #grok-tools,
  body.is-mobile #grok-home-chips,
  body.is-mobile #grok-imagine,
  body.is-mobile #grok-attach-sheet,
  body.is-mobile #grok-attach-mask,
  body.is-mobile #grok-voice-page,
  body.is-mobile #grok-lang-row,
  body.is-mobile .grok-model-badge,
  body.is-mobile .grok-top-right,
  body.is-mobile #grok-newchat,
  body.is-mobile #grok-mic,
  body.is-mobile #grok-voice {
    display: none !important;
  }
  /* 排队条：有任务时才显眼，默认不占版面 */
  body.is-mobile #queue-bar:empty,
  body.is-mobile #queue-bar[style*="display: none"] { display: none !important; }

  body.is-mobile .main,
  body.is-mobile .chat-layout,
  body.is-mobile .chat-area,
  body.is-mobile .m-body-row,
  body.is-mobile .m-right-pane,
  body.is-mobile #chat-scroll {
    background: var(--dd-bg) !important;
    color: var(--dd-text) !important;
  }

  /* —— 顶栏：简洁 ☰ + 标题 —— */
  body.is-mobile .desk-head,
  body.is-mobile .chat-head.desk-head {
    display: flex !important;
    align-items: center;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    gap: 10px;
    background: var(--dd-bg) !important;
    border-bottom: 1px solid var(--dd-border) !important;
  }
  body.is-mobile #proj-toggle,
  body.is-mobile .proj-toggle {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dd-text) !important;
    font-size: 22px !important;
    padding: 4px !important;
  }
  body.is-mobile .desk-head #proj-title,
  body.is-mobile .desk-head .proj-title-btn {
    flex: 1;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    color: var(--dd-text) !important;
    padding: 0 !important;
  }
  body.is-mobile .desk-head > div:last-child .btn,
  body.is-mobile .desk-head .head-user,
  body.is-mobile .desk-head .head-credits,
  body.is-mobile .desk-head #skills-pref-btn,
  body.is-mobile .desk-head #prefs-btn,
  body.is-mobile .desk-head #idx-btn,
  body.is-mobile .desk-head [data-navgo] {
    display: none !important;
  }
  body.is-mobile #dd-newchat {
    border: none;
    background: transparent;
    color: var(--dd-blue);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 2px;
    white-space: nowrap;
  }

  /* —— 对话气泡排版 —— */
  body.is-mobile #chat-scroll {
    padding: 12px 12px 20px !important;
  }
  body.is-mobile .msg {
    margin-bottom: 14px !important;
    gap: 0 !important;
  }
  body.is-mobile .msg.user {
    justify-content: flex-end !important;
  }
  body.is-mobile .msg.user .m-col {
    max-width: 82% !important;
    margin-left: auto !important;
  }
  body.is-mobile .msg.user .m-body,
  body.is-mobile .msg.user .m-bubble {
    background: var(--dd-blue) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    border-radius: 12px 12px 2px 12px !important;
  }
  body.is-mobile .msg.ai .m-col {
    max-width: 92% !important;
  }
  body.is-mobile .msg.ai .m-body,
  body.is-mobile .msg.ai .md,
  body.is-mobile .msg.ai .m-bubble {
    background: var(--dd-ai) !important;
    color: var(--dd-text) !important;
    padding: 10px 12px !important;
    border-radius: 12px 12px 12px 2px !important;
  }
  /* 助手操作行：只留轻量文字，不抢版面 */
  body.is-mobile .msg-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.is-mobile .msg-actions .msg-act {
    background: none !important;
    border: none !important;
    color: var(--dd-muted) !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
  /* 跟进建议过多时压缩，避免刷屏感 */
  body.is-mobile .msg-followups {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  body.is-mobile .msg-followups .msg-fu {
    border: 1px solid var(--dd-border) !important;
    background: #fff !important;
    color: var(--dd-text) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  body.is-mobile.dark .msg-followups .msg-fu {
    background: #1f2937 !important;
  }

  body.is-mobile .empty-chat {
    min-height: 40vh;
    padding: 32px 20px !important;
    color: var(--dd-muted) !important;
  }
  body.is-mobile .empty-greeting {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--dd-text) !important;
  }

  /* —— 底栏输入：圆角输入 + 圆发送，保留 + 上传 —— */
  body.is-mobile #chat-inputbar,
  body.is-mobile .chat-inputbar {
    background: var(--dd-bg) !important;
    border-top: 1px solid var(--dd-border) !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.is-mobile .composer-shell,
  body.is-mobile #composer-shell {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  body.is-mobile #chat-input {
    flex: 1 !important;
    min-height: 36px !important;
    max-height: 90px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--dd-border) !important;
    border-radius: 20px !important;
    background: var(--dd-bg) !important;
    color: var(--dd-text) !important;
    font-size: 15px !important;
  }
  body.is-mobile .composer-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  body.is-mobile #add-asset,
  body.is-mobile .composer-plus {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--dd-border) !important;
    background: var(--dd-side) !important;
    color: var(--dd-text) !important;
  }
  body.is-mobile #chat-send,
  body.is-mobile .composer-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--dd-blue) !important;
    color: #fff !important;
  }

  /* 技能芯片保留（电脑端功能），做成横向轻量条 */
  body.is-mobile .skill-chips {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 0 0 8px !important;
    border: none !important;
    background: transparent !important;
  }
  body.is-mobile .skill-chip {
    flex: 0 0 auto;
    border-radius: 999px !important;
    border: 1px solid var(--dd-border) !important;
    background: #fff !important;
    color: var(--dd-text) !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  body.is-mobile.dark .skill-chip { background: #1f2937 !important; }

  /* —— 侧栏抽屉：盖住主界面，不推版 —— */
  body.is-mobile .sidebar,
  body.is-mobile .sidebar.jimeng-side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(80vw, 300px) !important;
    max-width: 300px !important;
    height: 100% !important;
    z-index: 200 !important;
    background: var(--dd-side) !important;
    border-right: 1px solid var(--dd-border) !important;
    transform: translateX(-105%) !important;
    transition: transform .28s ease !important;
    padding: 16px 12px !important;
  }
  body.is-mobile.sidebar-open .sidebar,
  body.is-mobile .sidebar.sidebar-open {
    transform: translateX(0) !important;
  }
  body.is-mobile .sidebar-mask {
    background: rgba(0,0,0,.4) !important;
    z-index: 190 !important;
  }
  body.is-mobile.sidebar-open .sidebar-mask {
    display: block !important;
  }

  body.is-mobile #dd-theme-btn {
    margin-top: 12px;
    padding: 10px 4px;
    font-size: 14px;
    color: var(--dd-text);
    cursor: pointer;
    border-top: 1px solid var(--dd-border);
  }
}

/* ===== MOBILE_HIDE_USER_REF + SWIPE_GALLERY_20260921 ===== */
/* A) Hide user reference/upload previews in chat transcript only (API refs unchanged) */
body.is-mobile .msg.user .msg-media-tile,
body.is-mobile .msg.user .msg-media,
body.is-mobile .msg.user .msg-attach-tags,
body.is-mobile .msg.user .mm-ops,
body.is-mobile .msg.user .mm-name {
  display: none !important;
}
/* AI video cards: hide echoed first/last/ref frame thumbs (generation refs, not results) */
body.is-mobile .msg.ai .vid-ref-frames,
body.is-mobile .msg.ai .frame-thumb {
  display: none !important;
}

/* B) Generated images/assets/videos: one horizontal swipe row */
body.is-mobile .msg.ai .m-body .dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .img-grid.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .jm-asset-grid.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .sb-out-grid.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .img-grid.jm-asset-grid.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .img-grid.jm-asset-grid.jm-cols-4.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .img-grid.jm-asset-grid.jm-cols-3.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .img-grid.jm-asset-grid.jm-cols-mixed.dd-swipe-gallery,
body.is-mobile .msg.ai .m-body .img-grid.jm-asset-grid.jm-single.dd-swipe-gallery,
body.is-mobile .m-body .img-grid.jm-asset-grid.dd-swipe-gallery,
body.is-mobile .m-body .img-grid.jm-asset-grid.jm-cols-4.dd-swipe-gallery,
body.is-mobile .m-body .img-grid.jm-asset-grid.jm-cols-3.dd-swipe-gallery {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 2px 2px 8px !important;
  margin: 4px 0 0 !important;
  scrollbar-width: thin;
}

body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .img-cell,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .jm-thumb,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .aw-thumb,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .sb-out-cell,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .dd-swipe-item,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > [data-vidcard],
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .work-card {
  flex: 0 0 auto !important;
  width: min(72vw, 280px) !important;
  max-width: 78vw !important;
  min-width: min(58vw, 200px) !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .img-cell img,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery > .jm-thumb img,
body.is-mobile .msg.ai .m-body .dd-swipe-gallery img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(52vh, 360px) !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 10px !important;
  background: #111 !important;
}

body.is-mobile .msg.ai .m-body .dd-swipe-gallery video {
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(48vh, 320px) !important;
  border-radius: 10px !important;
  background: #000 !important;
}

/* Asset bundle section heads stay; grids become swipe rows */
body.is-mobile .msg.ai .jm-asset-sec-head {
  margin: 8px 0 4px !important;
  font-size: 12px !important;
}
body.is-mobile .msg.ai .jm-asset-bundle.dd-swipe-flat .jm-asset-sec {
  display: none !important;
}
body.is-mobile .msg.ai .dd-swipe-flat.dd-swipe-gallery {
  margin-top: 6px !important;
}

/* Widen AI media bubbles so swipe has room */
body.is-mobile .msg.ai:has(.dd-swipe-gallery) .m-col,
body.is-mobile .msg.ai:has(.work-card) .m-col,
body.is-mobile .msg.ai.jm-bundle-msg .m-col {
  max-width: 96% !important;
}
body.is-mobile .msg.ai:has(.dd-swipe-gallery) .m-body,
body.is-mobile .msg.ai:has(.dd-swipe-gallery) .m-body .work-card {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  max-width: 100% !important;
}