/* =========================================================================
 * AddLinkModalPC — 添加链接弹窗
 *
 * 视觉规范对齐设计稿 popup/添加链接（ardot 10516:684，360×280）：
 *   16 内边距 + 24 标题 + 84 字段1 + 60 字段2 + 44 按钮区 + 16 内边距 + 12×3 间距 = 280
 * 内部受控接口与原 import-kit 版本兼容（use-add-link / use-dedao-live 不需要改）。
 * ========================================================================= */
/* ====== Overlay ====== */
.add-link-modal-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-default);
  /* 不使用 fade-in 动画，以便多个 modal 之间切换时遮罩视觉连续 */
}
/* ====== Panel ====== */
/* 设计稿：360 宽、16 内边距、12 圆角、0.5px #e6e6e6 描边、白底、区块间距 12 */
.add-link-modal-panel-pc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: var(--wb-spacing-400);
  gap: var(--wb-spacing-400);
  border: 0.5px solid var(--wb-color-border-primary);
  border-radius: var(--wb-radius-300);
  background: var(--wb-color-bg-secondary-default);
  box-shadow: var(--wb-shadow-popup-large);
  animation: add-link-modal-panel-in-pc 120ms ease-out;
}
@keyframes add-link-modal-panel-in-pc {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ====== Header ====== */
/* 关闭按钮绝对定位到右上角；返回按钮 + 标题为内联流式布局 */
.add-link-modal-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-spacing-200);
}
.add-link-modal-header-left-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-spacing-200);
  min-width: 0;
}
/* 返回 / 关闭：设计稿均为 16×16 图标按钮（无底色，hover 提亮） */
.add-link-modal-back-btn-pc,
.add-link-modal-close-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: var(--wb-radius-50);
  background: transparent;
  color: var(--wb-color-text-secondary);
  cursor: pointer;
  transition: color 150ms ease;
}
.add-link-modal-back-btn-pc:hover,
.add-link-modal-close-btn-pc:hover {
  color: var(--wb-color-text-primary);
}
/* 标题：设计稿 body lg bold（PingFang SC Semibold 16/24），rgba(0,0,0,0.9) */
.add-link-modal-title-pc {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 24px;
  color: var(--wb-color-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.add-link-modal-close-btn-pc {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.add-link-modal-close-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
/* ====== Body ====== */
/* 字段采用「标签在上、输入框在下」的纵向布局，
   不再使用左侧 48px 标签 + 右侧输入框的横向布局 */
.add-link-modal-body-pc {
  display: flex;
  gap: var(--wb-spacing-400);
  flex-direction: column;
}
.add-link-modal-field-pc {
  display: flex;
  flex-direction: column;
  gap: var(--wb-spacing-100);
}
/* 标签：设计稿 body sm bold（Semibold 12/20）+ rgba(0,0,0,0.3) */
.add-link-modal-label-pc {
  display: flex;
  align-items: center;
  gap: var(--wb-spacing-100);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--wb-color-text-disable);
  -webkit-user-select: none;
          user-select: none;
}
/* 「（可选）」与标签同字重同色（设计稿为整条标签文本） */
.add-link-modal-label-optional-pc {
  font-weight: inherit;
  color: inherit;
}
/* 输入框：设计稿 32 高、圆角 8、左右内边距 8、1px #e6e6e6 描边、透明底 */
.add-link-modal-input-pc {
  width: 100%;
  height: 32px;
  padding: 0 var(--wb-spacing-200);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  line-height: 22px;
  color: var(--wb-color-text-primary);
  border: 1px solid var(--wb-color-border-primary);
  border-radius: var(--wb-radius-200);
  background: transparent;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}
.add-link-modal-input-pc::-webkit-input-placeholder {
  color: var(--wb-color-text-disable);
}
.add-link-modal-input-pc::placeholder {
  color: var(--wb-color-text-disable);
}
.add-link-modal-input-pc.add-link-modal-input-error-pc {
  border-color: var(--error);
}
/* 错误文案：设计稿该行为 12/20，距输入框 4 */
.add-link-modal-error-pc {
  display: block;
  padding-top: var(--wb-spacing-100);
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--error);
}
/* ====== Footer ====== */
/* 设计稿 operation：padding-top 12、右对齐、按钮间距 12 */
.add-link-modal-footer-pc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wb-spacing-300);
  padding-top: var(--wb-spacing-300);
}
/* 次按钮：白底 + #e6e6e6 描边 + 全圆角胶囊
 * 主按钮：近黑底 + 圆角 16
 * 两者均 32 高、左右内边距 12、body md bold（Semibold 14/22） */
.add-link-modal-cancel-pc,
.add-link-modal-confirm-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 68px;
  padding: 0 var(--wb-spacing-200);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  cursor: pointer;
  border-radius: var(--wb-radius-300);
  transition: background-color 150ms ease;
}
.add-link-modal-cancel-pc {
  border: 1px solid var(--wb-color-border-primary);
  background: var(--wb-color-bg-secondary-default);
  color: var(--wb-color-text-primary);
}
.add-link-modal-cancel-pc:hover:not(:disabled),
.add-link-modal-cancel-pc:active:not(:disabled) {
  background: var(--wb-color-bg-secondary-hover-active);
}
.add-link-modal-confirm-pc {
  border: none;
  background: var(--wb-button-bg-primary);
  color: var(--wb-color-text-primary-invert);
}
.add-link-modal-confirm-pc:hover:not(:disabled),
.add-link-modal-confirm-pc:active:not(:disabled) {
  background: var(--wb-button-bg-primary-hover);
}
.add-link-modal-confirm-pc:disabled {
  background: var(--wb-button-bg-primary-disable);
  cursor: not-allowed;
}

.paste-text-modal-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-default);
}
.paste-text-modal-panel-pc {
  width: 90vw;
  max-width: 640px;
  background: var(--bg-default);
  border-radius: var(--radius-xl-val);
  box-shadow: var(--shadow-3);
  padding: 24px;
  animation: paste-text-modal-panel-in-pc 120ms ease-out;
}
@keyframes paste-text-modal-panel-in-pc {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.paste-text-modal-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.paste-text-modal-header-left-pc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.paste-text-modal-back-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.paste-text-modal-back-btn-pc:hover {
  background: var(--feedback-hover);
  color: var(--icon-primary);
}
.paste-text-modal-title-pc {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  font-family: var(--font-family-heading);
}
.paste-text-modal-close-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.paste-text-modal-close-btn-pc:hover {
  background: var(--feedback-hover);
  color: var(--icon-primary);
}
.paste-text-modal-body-pc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.paste-text-modal-field-pc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paste-text-modal-label-pc {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.paste-text-modal-input-pc,
.paste-text-modal-textarea-pc {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md-val);
  transition: border-color 150ms ease;
  font-family: inherit;
}
.paste-text-modal-input-pc::-webkit-input-placeholder, .paste-text-modal-textarea-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.paste-text-modal-input-pc::placeholder,
.paste-text-modal-textarea-pc::placeholder {
  color: var(--text-quaternary);
}
.paste-text-modal-input-pc:focus,
.paste-text-modal-textarea-pc:focus {
  outline: none;
  border-color: var(--border-focus);
}
.paste-text-modal-input-pc {
  height: 36px;
}
.paste-text-modal-textarea-pc {
  min-height: 200px;
  resize: vertical;
}
.paste-text-modal-footer-pc {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.paste-text-modal-btn-pc {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-md-val);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.paste-text-modal-btn-secondary-pc {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.paste-text-modal-btn-secondary-pc:hover {
  background: var(--feedback-hover);
}
.paste-text-modal-btn-primary-pc {
  background: var(--brand);
  color: var(--text-allwhite);
  border: none;
}
.paste-text-modal-btn-primary-pc:hover:not(:disabled) {
  background: var(--brand-hover);
}
.paste-text-modal-btn-primary-pc:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ====== Overlay ====== */
.doc-picker-modal-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-default);
}
/* ====== Panel ====== */
.doc-picker-modal-panel-pc {
  width: 90vw;
  max-width: 720px;
  /*
   * 固定高度（设计稿 640）：内容区自身 flex 撑满 + 内部滚动，
   * 空态 / 加载态 / 列表态弹窗整体等高，切换时不跳动。
   */
  height: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-default);
  border-radius: var(--radius-24px-val);
  padding: var(--space-6);
  animation: doc-picker-modal-panel-in-pc 120ms ease-out;
}
@keyframes doc-picker-modal-panel-in-pc {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ====== Header（标题行 + 说明文案）====== */
.doc-picker-modal-header-pc {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}
.doc-picker-modal-header-main-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.doc-picker-modal-subtitle-pc {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--text-tertiary);
}
.doc-picker-modal-title-pc {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  font-family: var(--font-family-heading);
}
.doc-picker-modal-close-btn-pc {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-picker-modal-close-btn-pc:hover {
  background: var(--feedback-hover);
  color: var(--icon-primary);
}
/* ====== Toolbar（Tab + 搜索框 + 扩展插槽）====== */
.doc-picker-modal-toolbar-pc {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 32px;
}
/* Toolbar 左侧文案标签（如「最近文档」） */
.doc-picker-modal-toolbar-label-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
/* 分段控件容器：灰底 + 2px 内衬，激活项为白色胶囊 */
.doc-picker-modal-tabs-pc {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
  background: var(--fill-secondary);
  border-radius: var(--radius-lg-val);
}
.doc-picker-modal-tab-pc {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 20px;
  color: var(--text-secondary);
  border-radius: var(--radius-md-val);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.doc-picker-modal-tab-pc:hover {
  color: var(--text-primary);
}
/* 激活态：白色胶囊 + 一级阴影 + 文字加粗 */
.doc-picker-modal-tab-active-pc {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-default);
  box-shadow: var(--shadow-1);
}
/* 搜索框固定 200px 并靠右，Tab 与搜索分居工具栏两端 */
.doc-picker-modal-search-input-wrap-pc {
  flex: 0 0 auto;
  width: 200px;
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.doc-picker-modal-search-icon-pc {
  position: absolute;
  left: var(--space-3);
  color: var(--icon-tertiary);
  pointer-events: none;
}
.doc-picker-modal-search-input-pc {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3) 0 var(--space-8);
  font-size: var(--fs-body);
  line-height: 20px;
  color: var(--text-primary);
  background: var(--fill-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-lg-val);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.doc-picker-modal-search-input-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.doc-picker-modal-search-input-pc::placeholder {
  color: var(--text-quaternary);
}
.doc-picker-modal-search-input-pc:focus {
  background: var(--bg-default);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-2);
}
/*
 * 工具栏右侧扩展插槽（provider 特有筛选器等；未注入时组件不渲染此容器）。
 * `margin-left: auto` 保证「无搜索框」时插槽仍靠右；有搜索框时紧贴其后，
 * 不再二次抢占剩余空间（否则两个 auto 会把空白对半分）。
 */
.doc-picker-modal-toolbar-extra-pc {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.doc-picker-modal-search-input-wrap-pc + .doc-picker-modal-toolbar-extra-pc {
  margin-left: 0;
}
/* ====== Content（表头 + 列表共用的描边容器）====== */
.doc-picker-modal-content-pc {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg-val);
  overflow: hidden;
}
/* ====== Table ====== */
/*
 * grid-template-columns 由组件按 `columns` 动态生成（inline style）：
 * 列数与组合由 provider 决定（3 列 / 4 列不等），在样式里固定轨道串会让
 * 接入下一家时必然返工。详见 `toGridTemplate` 的 JSDoc。
 */
.doc-picker-modal-thead-pc,
.doc-picker-modal-row-pc {
  display: grid;
  align-items: center;
  gap: var(--space-3);
}
.doc-picker-modal-thead-pc {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 16px;
  color: var(--text-tertiary);
  -webkit-user-select: none;
          user-select: none;
}
/* 表头全选 checkbox 容器：与行内 checkbox 同轴对齐 */
.doc-picker-modal-th-check-pc {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*
 * 列表滚动容器：高度由内容区（.doc-picker-modal-content-pc）撑满，
 * 面板本身固定高度，因此空态 / 加载态 / 列表态天然等高，无需再写死 height。
 */
.doc-picker-modal-tbody-pc {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.doc-picker-modal-row-pc {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 var(--space-3);
  cursor: pointer;
  transition: background-color 150ms ease;
  border-bottom: 1px solid var(--divider);
}
.doc-picker-modal-row-pc:hover {
  background: var(--fill-secondary);
}
/*
 * 不支持导入的品类行（`fileCategory === "other"` 的 file 行）。
 *
 * 只做「降权 + 明确不可点」三件事，不改动布局（grid 轨道、行高与可导入行完全一致，
 * 否则列表会出现参差不齐的行高）：
 *   1. 文字降到四级色 —— 与 placeholder / 禁用按钮同一档，读者一眼能归类为「不可用」
 *   2. 图标降透明度 —— drive-* 是彩色品类图标，只靠文字降色区分度不够
 *   3. cursor: not-allowed + 去掉 hover 背景 —— hover 背景是「可点」的暗示，
 *      这一行 hover 时要弹的是「暂不支持导入该类型文件」提示，不该同时暗示可点击
 *
 * 全部走设计 Token（`--text-quaternary`），不写死色值：暗色主题下写死会瞎。
 */
.doc-picker-modal-row-disabled-pc {
  cursor: not-allowed;
}
.doc-picker-modal-row-disabled-pc .doc-picker-modal-td-name-pc,
.doc-picker-modal-row-disabled-pc .doc-picker-modal-td-name-text-pc,
.doc-picker-modal-row-disabled-pc .doc-picker-modal-td-from-pc,
.doc-picker-modal-row-disabled-pc .doc-picker-modal-td-time-pc {
  color: var(--text-quaternary);
}
.doc-picker-modal-row-disabled-pc .doc-picker-modal-icon-pc {
  opacity: 0.4;
}
.doc-picker-modal-row-disabled-pc:hover {
  background: transparent;
}
.doc-picker-modal-td-check-pc {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* checkbox 统一样式（表头全选 + 行内多选） */
.doc-picker-modal-checkbox-pc {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.doc-picker-modal-checkbox-pc:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.doc-picker-modal-td-name-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.doc-picker-modal-td-name-text-pc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
 * 品类图标容器（`drive-*` 图标由组件按 `fileCategory` / `kind` 分派）。
 *
 * 固定 20×20 并 `flex: 0 0 auto`：名称列是 `1fr` 弹性轨道，长标题挤压时必须保证
 * 图标不被压扁（此前的 img / fallback 两套容器合并为这一套，图标不再来自后端 URL，
 * 因此也不再需要 object-fit / 圆角）。
 */
.doc-picker-modal-icon-pc {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.doc-picker-modal-td-from-pc,
.doc-picker-modal-td-time-pc {
  font-size: var(--fs-small);
  line-height: 20px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ====== Empty / loading states ====== */
.doc-picker-modal-empty-pc,
.doc-picker-modal-loading-more-pc,
.doc-picker-modal-end-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
/* 空态 / 首屏加载态撑满列表区并垂直居中 */
.doc-picker-modal-empty-pc {
  flex: 1 1 auto;
}
/* 加载更多 / 到底提示：紧跟列表底部，不撑满剩余空间 */
.doc-picker-modal-loading-more-pc,
.doc-picker-modal-end-pc {
  flex: 0 0 auto;
  padding: var(--space-3) 0;
}
/* 触底加载哨兵：零高度不占位，仅供 IntersectionObserver 检测 */
.doc-picker-modal-sentinel-pc {
  height: 1px;
}
/* ====== Connector setup empty state（需要先配置连接器） ====== */
.doc-picker-modal-connector-empty-pc {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.doc-picker-modal-connector-empty-icon-pc {
  color: var(--icon-quaternary);
  margin-bottom: var(--space-4);
}
.doc-picker-modal-connector-empty-title-pc {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.doc-picker-modal-connector-empty-primary-pc {
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-body);
  color: var(--text-allwhite);
  background: var(--brand);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.doc-picker-modal-connector-empty-primary-pc:hover:not(:disabled) {
  background: var(--brand-hover);
}
.doc-picker-modal-connector-empty-primary-pc:active:not(:disabled) {
  background: var(--brand-pressed);
}
.doc-picker-modal-connector-empty-primary-pc:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.doc-picker-modal-connector-empty-link-pc {
  margin-top: var(--space-3);
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.doc-picker-modal-connector-empty-link-pc:hover:not(:disabled) {
  opacity: 0.7;
}
.doc-picker-modal-connector-empty-link-pc:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 「如点击没反应…」辅助提示：弱化的灰色说明文字 */
.doc-picker-modal-connector-empty-hint-pc {
  font-size: var(--fs-caption);
  line-height: 18px;
  color: var(--text-tertiary);
  margin-top: var(--space-3);
}
/* 弹窗底部提示（配置引导空态）：横向居中、与上方内容留间距 */
.doc-picker-modal-bottom-hint-pc {
  margin-top: 0;
  text-align: center;
}
/* ====== Footer ====== */
.doc-picker-modal-footer-pc {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
/* Footer 左侧信息区（同一行，空间不足时换行） */
.doc-picker-modal-footer-info-pc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
.doc-picker-modal-footer-actions-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.doc-picker-modal-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 32px;
  padding: 0 var(--space-4);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-md-val);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.doc-picker-modal-btn-pc:disabled {
  cursor: not-allowed;
}
/* 次要按钮：白底 + 描边（设计稿的「取消」） */
.doc-picker-modal-btn-secondary-pc {
  color: var(--text-primary);
  background: var(--bg-default);
  border-color: var(--border-default);
}
.doc-picker-modal-btn-secondary-pc:hover:not(:disabled) {
  background: var(--fill-tertiary);
  border-color: var(--border-strong);
}
.doc-picker-modal-btn-secondary-pc:disabled {
  opacity: 0.4;
}
.doc-picker-modal-btn-primary-pc {
  color: var(--text-allwhite);
  background: var(--brand);
}
.doc-picker-modal-btn-primary-pc:hover:not(:disabled) {
  background: var(--brand-hover);
}
.doc-picker-modal-btn-primary-pc:active:not(:disabled) {
  background: var(--brand-pressed);
}
.doc-picker-modal-btn-primary-pc:disabled {
  background: var(--fill-primary);
  color: var(--text-quaternary);
}

/* =========================================================================
 * FolderLimitErrorModalPC — 「上传文件夹」上限校验失败弹窗（AC-7）
 *
 * D35 后只有**一种**形态：原 `mode="preview"` 的目录树区、缩进行、底部目标位置
 * 说明与「取消 / 开始上传」按钮组已随 AC-8 废弃一并删除。
 *
 * 规范落点：
 * - 面板 `--bg-default` + `--radius-xl-val` + Level 3 阴影 `--shadow-3`，
 *   遮罩 `--overlay-default`（D12）
 * - 颜色一律走既有语义 token（`--error` / `--error-bg` / `--text-tertiary` …），
 *   无硬编码 hex（D18）
 * - 间距 4px 基数，transition 150ms ease
 * ========================================================================= */
/* ====== Overlay ====== */
.folder-limit-error-modal-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-default);
}
/* ====== Panel ====== */
.folder-limit-error-modal-panel-pc {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* 信息量小，固定窄面板 */
  width: 450px;
  padding: var(--space-6);
  color: var(--text-primary);
  background: var(--bg-default);
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-xl-val);
  box-shadow: var(--shadow-3);
  animation: folder-limit-error-modal-in-pc 120ms ease-out;
}
@keyframes folder-limit-error-modal-in-pc {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .folder-limit-error-modal-panel-pc {
    animation-duration: 0ms;
  }
}
/* ====== Body ====== */
.folder-limit-error-modal-head-pc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
/* ① 红色圆形浅底 + 错误图标（Icon 组件） */
.folder-limit-error-modal-error-badge-pc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--error);
  background: var(--error-bg);
  border-radius: var(--radius-full);
}
.folder-limit-error-modal-text-pc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* ② 标题 */
.folder-limit-error-modal-title-pc {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* ③ 具体原因 */
.folder-limit-error-modal-reason-pc {
  margin: var(--space-8) 0 0;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 20px;
  word-break: break-word;
}
/* ④ 灰色限制说明：比正文更小一号 */
.folder-limit-error-modal-limit-pc {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 16px;
}
/* =========================================================================
 * Footer：仅一个 Primary
 * ========================================================================= */
.folder-limit-error-modal-footer-pc {
  display: flex;
  gap: var(--space-8);
  justify-content: flex-end;
  margin-top: var(--space-5);
}
.folder-limit-error-modal-btn-pc {
  height: 32px;
  min-width: 66px;
  padding: 0 var(--space-3);
  font-size: var(--fs-body);
  cursor: pointer;
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease, color 150ms ease;
}
.folder-limit-error-modal-primary-pc {
  color: var(--text-allwhite);
  background: var(--button-primary-bg);
  border: none;
}
.folder-limit-error-modal-primary-pc:hover {
  background: var(--button-primary-bg-hover);
}
.folder-limit-error-modal-primary-pc:active {
  background: var(--button-primary-bg-hover);
}

/* ====== 遮罩层 ====== */
.auth-modal-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-default);
  padding: 16px;
  animation: auth-modal-overlay-in 150ms ease;
}
@keyframes auth-modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ====== 弹窗主容器 ====== */
.auth-modal-content-pc {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px 28px 24px;
  background: var(--bg-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  animation: auth-modal-content-in 180ms ease;
}
@keyframes auth-modal-content-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ====== 关闭按钮 ====== */
.auth-modal-close-btn-pc {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 20px;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease;
}
.auth-modal-close-btn-pc:hover {
  background: var(--fill-tertiary);
  color: var(--text-primary);
}
.auth-modal-close-btn-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* ====== App Logo 区 ====== */
.auth-modal-logos-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.auth-modal-app-logo-pc {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.auth-modal-logo-dots-pc {
  display: flex;
  align-items: center;
  gap: 4px;
}
.auth-modal-dot-pc {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-quaternary);
}
/* ====== 标题 ====== */
.auth-modal-title-pc {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  font-family: var(--font-family-heading);
  text-align: center;
}
/* ====== 账号信息卡片 ====== */
.auth-modal-account-card-pc {
  width: 100%;
  background: var(--bg-weak);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.auth-modal-account-heading-pc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-tertiary);
}
.auth-modal-account-row-pc {
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-modal-avatar-pc {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.auth-modal-nickname-pc {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-modal-check-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--text-allwhite);
  font-size: 12px;
  flex-shrink: 0;
}
/* ====== 授权 Action 列表 ====== */
.auth-modal-actions-pc {
  width: 100%;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}
.auth-modal-action-item-pc {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.auth-modal-action-bullet-pc {
  color: var(--text-tertiary);
  font-weight: 700;
  flex-shrink: 0;
}
/* ====== 同意按钮 ====== */
.auth-modal-confirm-btn-pc {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--text-allwhite);
  background: var(--brand);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 150ms ease;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.auth-modal-confirm-btn-pc:hover {
  background: var(--brand-hover);
}
.auth-modal-confirm-btn-pc:active {
  background: var(--brand-pressed);
}
.auth-modal-confirm-btn-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* ====== 协议勾选区 ====== */
.auth-modal-terms-pc {
  width: 100%;
  display: flex;
  justify-content: center;
}
.auth-modal-terms-label-pc {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.auth-modal-terms-checkbox-pc {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}
.auth-modal-terms-text-pc {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-tertiary);
}
.auth-modal-terms-link-pc {
  color: var(--text-link);
  text-decoration: none;
  font-weight: 500;
}
.auth-modal-terms-link-pc:hover {
  text-decoration: underline;
}
/* ====== 抖动动画 ====== */
.auth-modal-terms-shake-pc {
  animation: auth-modal-shake 400ms ease;
}
@keyframes auth-modal-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  50%,
  90% {
    transform: translateX(-4px);
  }
  30%,
  70% {
    transform: translateX(4px);
  }
}

/* =========================================================================
 * UploadStatusPanelPC — 右下角上传状态面板样式
 * ========================================================================= */
.upload-status-panel-pc {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-height: 332px;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--wb-color-bg-primary-default);
  border: 1px solid var(--border-default);
  border-radius: var(--wb-radius-400);
  box-shadow: var(--wb-shadow-dialog);
}
.upload-status-panel-header-pc {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--divider);
}
.upload-status-panel-heading-pc {
  display: flex;
  align-items: center;
  min-width: 0;
}
.upload-status-panel-title-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-status-panel-header-actions-pc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}
.upload-status-panel-header-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--icon-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease, color 150ms ease;
}
.upload-status-panel-header-btn-pc:hover {
  color: var(--icon-primary);
  background: var(--feedback-hover);
}
.upload-status-panel-collapsed-pc {
  max-height: 52px;
}
.upload-status-panel-list-pc {
  flex: 1;
  /* min-height: 0 让列表在底部批量重试区出现时可以被压缩。
     没有它，flex 项的 min-height: auto 会让列表坚持 280px，
     底部区被面板的 overflow: hidden 裁掉。 */
  min-height: 0;
  max-height: 280px;
  padding: 0;
  overflow-y: auto;
}
/* =========================================================================
 * 底部批量重试区（AC-12' 第 5 条 / AC-13 后半 / D42）
 *
 * 仅在「存在可重试的失败项」且调用方传了 onRetryAllFailed 时渲染，
 * 折叠态不渲染。类名与行内操作按钮完全分离（见 pc.tsx 的 6 号哨兵注释）。
 * ========================================================================= */
.upload-status-panel-footer-pc {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--divider);
}
.upload-status-panel-retry-all-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.upload-status-panel-retry-all-btn-pc:hover {
  color: var(--brand-hover);
  background: var(--feedback-hover);
  border-color: var(--border-strong);
}
.upload-status-panel-retry-all-btn-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
.upload-status-item-pc {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 16px;
  gap: 8px;
  transition: background-color 150ms ease;
  padding: var(--space-1) var(--space-4);
}
.upload-status-item-pc:hover {
  background: var(--wb-color-bg-primary-hover);
  border-radius: var(--wb-radius-200);
}
/* 上传成功项：整行可点击跳转到对应文档 */
.upload-status-item-clickable-pc {
  cursor: pointer;
}
.upload-status-item-clickable-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.upload-status-item-icon-pc2 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--icon-primary);
}
.upload-status-item-main-pc {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}
/*
 * 文件夹上传项的行主区（AC-12' 第 3 条）：文件名在上、灰色相对路径在下。
 *
 * 只在 `task.relativePath !== undefined` 时加这个修饰类，因此**单文件上传项
 * 的行布局完全不变**（D39 第 3 条）。
 *
 * align-items 用 stretch（column 的默认值）而不是 flex-start：后者会让两个
 * span 收缩到内容宽度，`text-overflow: ellipsis` 就失效了。
 */
.upload-status-item-main-with-path-pc {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.upload-status-item-name-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 相对路径副行：常显、灰色、单行省略（长路径 hover 看 title 全称） */
.upload-status-item-path-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 右侧状态区（默认态）：状态 icon + 状态文案 */
.upload-status-item-status-pc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.upload-status-item-status-icon-pc {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.upload-status-item-status-text-pc {
  white-space: nowrap;
}
.upload-status-item-side-pc {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  margin-left: 8px;
}
.upload-status-item-spinner-pc {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand-light);
  border-radius: var(--radius-full);
  animation: upload-status-spin 1600ms linear infinite;
}
.upload-status-item-action-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  /* 抵消右侧内边距，让按钮文案与状态文案贴齐同一右边缘 */
  margin-right: -8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease, color 150ms ease;
}
.upload-status-item-action-btn-pc:hover {
  color: var(--brand-hover);
  background: var(--feedback-hover);
}
@keyframes upload-status-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .upload-status-item-spinner-pc {
    animation-duration: 0ms;
  }
}
/* =========================================================================
 * 存储空间已满（storage-full）：文案后 info icon + interactive tooltip
 * ========================================================================= */
/* info icon 按钮：紧贴文案右侧，中性色，hover 加深 */
.upload-status-storage-full-info-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--icon-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color 150ms ease;
}
.upload-status-storage-full-info-pc:hover {
  color: var(--icon-secondary);
}
/* Tooltip 容器：覆盖 Tooltip 组件默认 whiteSpace:nowrap，允许多行文本 + 内嵌链接 */
.upload-status-storage-full-tooltip-pc {
  max-width: 240px;
  white-space: normal;
}
/* Tooltip 文本包裹：文字 + "去查看" 链接内联展示 */
.upload-status-storage-full-tip-pc {
  display: inline;
  color: var(--text-primary-invert);
}
/* Tooltip 内的"去查看"链接样式：
 * 深底 tooltip 上的 CTA，前景色使用 --text-primary-invert（白），
 * 常态显下划线以强化"可点击链接"语义；hover 时轻微透明度加深。
 *
 * 为什么不用 --brand-tint / --brand-subtle：
 *   这两个 token 在多数主题下是极浅灰/蓝底色（例如默认主题 #e8e8e8），
 *   本意是"低强度背景色"，作前景放在深色 tooltip 上对比度不足，
 *   如图反馈：几乎看不见。改用 invert 主色 + 下划线才是深底链接的正解。
 */
.upload-status-storage-full-cta-pc {
  margin-left: var(--space-1);
  padding: 0;
  color: var(--text-primary-invert);
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 150ms ease;
}
.upload-status-storage-full-cta-pc:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* =========================================================================
 * UploadStatusPanelMobile — 贴底全宽抽屉样式
 *
 * 与 PC 版差异要点:
 *   1. 全宽贴底,替代 PC 的 420px 右下浮层,消除窄屏被裁
 *   2. 无 hover:操作按钮始终可见,依赖 :active 提供触控反馈
 *   3. item 双行布局(文件名 / 状态),避免窄屏挤压
 *   4. safe-area-inset-bottom 避开 iPhone home indicator
 *   5. 触控目标 >=40px(header 按钮 40x40, item min-height 60)
 * ========================================================================= */
.upload-status-panel-mobile {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
  color: var(--text-primary);
  background: var(--bg-default);
  border-top: 1px solid var(--border-default);
  border-radius: var(--radius-xl-val) var(--radius-xl-val) 0 0;
  box-shadow: var(--shadow-3);
}
.upload-status-panel-header-mobile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--divider);
}
.upload-status-panel-heading-mobile {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}
.upload-status-panel-title-mobile {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-status-panel-header-actions-mobile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
}
.upload-status-panel-header-btn-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--icon-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.upload-status-panel-header-btn-mobile:active {
  background: var(--feedback-hover);
}
.upload-status-panel-collapsed-mobile {
  max-height: none;
}
.upload-status-panel-list-mobile {
  flex: 1;
  padding: var(--space-1) 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* =========================================================================
 * 上传项
 * ========================================================================= */
.upload-status-item-mobile {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.upload-status-item-clickable-mobile {
  cursor: pointer;
}
.upload-status-item-clickable-mobile:active,
.upload-status-item-mobile:active {
  background: var(--bg-weak);
}
.upload-status-item-clickable-mobile:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.upload-status-item-icon-mobile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--icon-primary);
}
/* item 主区:双行(name / status) */
.upload-status-item-main-mobile {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-0-5);
}
.upload-status-item-name-mobile {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-status-item-status-mobile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 16px;
}
.upload-status-item-status-icon-mobile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.upload-status-item-status-text-mobile {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* failed 项状态文字用错误色,更清晰 */
.upload-status-item-failed-mobile .upload-status-item-status-text-mobile {
  color: var(--error);
}
.upload-status-item-spinner-mobile {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand-light);
  border-radius: var(--radius-full);
  animation: upload-status-spin-mobile 1600ms linear infinite;
}
@keyframes upload-status-spin-mobile {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .upload-status-item-spinner-mobile {
    animation-duration: 0ms;
  }
}
/* =========================================================================
 * 操作按钮
 *   - 默认:低强度(取消 / 查看)
 *   - primary 修饰:高优先级(重试 / 去查看)
 * ========================================================================= */
.upload-status-item-action-btn-mobile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 48px;
  padding: 0 var(--space-3);
  margin-left: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  background: var(--fill-secondary);
  border: none;
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.upload-status-item-action-btn-mobile:active {
  background: var(--fill-primary);
}
.upload-status-item-action-btn-primary-mobile {
  color: var(--brand);
  background: var(--brand-subtle);
}
.upload-status-item-action-btn-primary-mobile:active {
  background: var(--brand-tint);
}