/* ============================================================
   official.css 补充 - 移动端响应式(仅影响 <768px 的布局)
   - /workbench 左栏抽屉化 + 遮罩 + 底部 ActionSheet
   - 桌面端(>=768px)所有规则自动失效,保证零回归
   ============================================================ */

/* ---------- 左栏:桌面常驻 -> 移动端抽屉 ---------- */
@media (max-width: 767.98px) {
  #wbSidebar {
    position: fixed;
    top: 64px;                 /* header 高度 */
    bottom: 0;
    left: 0;
    z-index: 60;
    width: 16rem;              /* 260px 抽屉宽度 */
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  }

  #wbSidebar.wb-open {
    transform: translateX(0);
  }

  /* 遮罩:抽屉打开时显示,点击关闭
     必须覆盖 blade 上的 hidden 类(display:none),否则遮罩不渲染、无法点击关闭 */
  #wbMask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(2, 6, 23, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  #wbMask.wb-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- 聊天主区 ---------- */
  #wbLayout {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);   /* 移动端地址栏/键盘弹起适配 */
  }

  #aiChatBox {
    padding: 0.75rem;
  }

  /* 移动端隐藏消息头像,给正文让位(需 !important 覆盖 JS 内联 display:flex) */
  #aiChatBox .wb-avatar {
    display: none !important;
  }

  /* 消息行防溢出:内容列不超出气泡,气泡不超出视口 */
  #aiChatBox .wb-col {
    max-width: 100%;
  }

  /* 用户消息:移动端与桌面一致 —— 全宽容器 + row-reverse 右对齐。
     不使用 fit-content/margin-left:auto(窄视口下会被内容撑宽推出屏幕)。 */
  #aiChatBox .wb-msg-user {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
  }

  #aiChatBox .wb-msg-user .wb-col {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 85% !important;
    /* 头像隐藏后 col 是唯一子项,用 margin-left:auto 在行内右对齐
       (仅作用于内容列本身,不会把消息行推出屏幕) */
    margin-left: auto !important;
  }

  /* markdown 表格/代码块:超出容器时横向滚动,而不是撑破页面 */
  #aiChatBox .md-render table,
  #aiChatBox .md-render pre {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* markdown 内长内容兜底强制换行(URL/连续字符) */
  #aiChatBox .md-render :is(p, li, td, th, h1, h2, h3, h4, blockquote) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 模式按钮:内容自适应宽度(按钮少时紧凑靠左、紧贴 ⋯ 按钮;
     按钮多时收缩产生横向滚动) */
  #modeBar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 覆盖 blade 的 justify-end:内容超宽时 flex-end 会向左溢出,
       而滚动只对右侧溢出有效,导致部分按钮永远滚不到 */
    justify-content: flex-start;
    /* 宽度随内容(flex-basis auto),可收缩(flex-shrink 1)产生滚动 */
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 2px;
  }
  #modeBar::-webkit-scrollbar {
    display: none;
  }

  /* 仅当内容确实溢出时显示右侧渐隐提示(避免按钮未溢出时出现假渐变) */
  #modeBar.wb-scrollable {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    padding-right: 12px;
  }

  /* modeBar 内按钮禁止压缩,宽度由内容决定,保证溢出滚动而非挤压 */
  #modeBar .wb-pill {
    flex-shrink: 0;
  }

  /* 移动端隐藏标题与圆点:为右侧视角按钮腾出空间 */
  .wb-topbar-title,
  .wb-topbar-dot {
    display: none !important;
  }

  /* 快捷按钮横向滚动:可拖动查看全部;右侧渐隐提示可滑动 */
  #quickBar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    scrollbar-width: none;
    /* 右侧渐隐遮罩:提示还有更多按钮可滑动查看 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    padding-right: 12px;
  }
  #quickBar::-webkit-scrollbar {
    display: none;
  }

  /* 快捷按钮禁止压缩:宽度由内容决定,保证溢出产生滚动(可拖)而非挤压 */
  #quickBar button {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---------- 触控目标放大 ----------
     桌面端 30px 的小控件在手机上偏小,这里统一放大到 34-36px */
  .wb-pill,
  #quickBar button {
    min-height: 34px;
    padding: 8px 14px;
  }

  #aiChatBox .wb-rating-btn {
    min-width: 28px;
    min-height: 28px;
  }

  #aiChatBox .wb-regen-btn {
    min-height: 28px;
    padding: 4px 10px;
  }

  /* 侧栏列表项:标题 + 副标题双行,保证 >=44px 触控高度 */
  #wbSidebar .menu-item {
    min-height: 44px;
  }

  /* iOS 聚焦时字号 <16px 会触发页面自动缩放,移动端输入框保持 16px */
  #aiInput {
    font-size: 16px;
  }

  /* 输入区:底部安全区留白 + 紧凑内边距 */
  #wbInputArea {
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  /* 移动端网格重排:输入框(左) + 发送按钮(右)同行,上下居中;
     快捷栏整行移到下方 */
  .wb-input-area {
    grid-template-areas:
      "input send"
      "quick quick";
    align-items: center;
  }

  #aiInput {
    min-height: 44px;
  }

  /* 触控目标 >= 44px */
  #wbInputArea textarea {
    min-height: 44px;
  }
  #wbSendBtn {
    min-height: 44px;
  }
  /* 触控目标 >= 44px(移动端标准) */
  #wbMenuBtn,
  #wbActionsBtn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- 桌面端兜底:确保移动端专属状态不残留 ---------- */
@media (min-width: 768px) {
  #wbSidebar {
    transform: none !important;
  }
  #wbMask {
    display: none !important;
  }

  /* 桌面端:视角按钮不换行,避免顶部栏高度跳动;超出时横向滚动 */
  #modeBar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 8px;
  }
  #modeBar::-webkit-scrollbar {
    display: none;
  }
}