/* UserAccountMenuPC — 头像账户下拉菜单（mindx 独立实现，参考设计稿）
 *
 * 面板通过 portal 挂到 body，跳出 titlebar (z-index:110) 堆叠上下文，
 * 避免被关联管理面板 (z-index:1500) 等遮挡。
 */
.user-account-menu-pc {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.user-account-menu-trigger-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.user-account-menu-trigger-pc:hover {
  background: var(--fill-tertiary);
}
.user-account-menu-trigger-pc:focus-visible {
  outline: none;
  box-shadow: var(--shadow-1);
}
.user-account-menu-panel-pc {
  position: fixed;
  /* top / right 由 JS 按触发器 getBoundingClientRect 写入 */
  z-index: 2300;
  width: 240px;
  overflow: visible;
  padding: var(--space-2);
  border: calc(var(--border-width-thin) / 2) solid var(--wb-color-border-primary);
  border-radius: var(--wb-radius-300);
  background: var(--wb-color-bg-tertiary-default);
  box-shadow: var(--wb-shadow-popup-medium);
  color: var(--text-primary);
}
/* 用户信息行：头像 + 名称 + 版本副标题 */
.user-account-menu-identity-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  min-height: 48px;
}
.user-account-menu-identity-avatar-pc {
  flex-shrink: 0;
}
.user-account-menu-identity-copy-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}
.user-account-menu-identity-name-pc {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-account-menu-identity-sub-pc {
  overflow: hidden;
  color: var(--text-tertiary);
  /* stylelint-disable-next-line font-token */
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 菜单行通用样式（外观 / 退出登录共享） */
.user-account-menu-row-pc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}
/* 行内前导：图标 + 文案 */
.user-account-menu-row-lead-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.user-account-menu-row-icon-pc {
  flex-shrink: 0;
  color: var(--wb-color-text-primary);
}
/* 可点击行（退出登录）：hover / focus / active 反馈 */
.user-account-menu-action-pc {
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.user-account-menu-action-pc:hover,
.user-account-menu-action-pc:focus-visible,
.user-account-menu-action-pc:active {
  outline: none;
  background: var(--bg-primary-hover);
  color: var(--text-primary);
}
/* 分隔线：外观行与退出登录行上方 */
.user-account-menu-appearance-pc::before,
.user-account-menu-logout-pc::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-2));
  left: 0;
  right: 0;
  height: var(--border-width-thin);
  background: var(--divider);
  pointer-events: none;
}
.user-account-menu-appearance-pc,
.user-account-menu-logout-pc {
  margin-top: var(--space-4);
}
/* 外观行：不可点击（切换由分段控件承载） */
.user-account-menu-appearance-pc {
  color: var(--text-primary);
}
/* 分段切换：浅色 / 深色 */
.user-account-menu-segment-pc {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  padding: var(--wb-spacing-50);
  border-radius: var(--wb-radius-200);
  background: var(--wb-color-bg-primary-default);
}
.user-account-menu-segment-item-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 尺寸是设计稿定值，不套 spacing Token（间距 Token 只用于 padding/margin/gap） */
  min-width: 40px;
  height: 24px;
  padding: 0 var(--wb-spacing-200);
  border: none;
  border-radius: var(--wb-radius-150);
  background: transparent;
  color: var(--wb-color-text-secondary);
  font-family: var(--font-family-body);
  font-size: var(--fs-small);
  font-weight: 400;
  cursor: pointer;
  line-height: 20px;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.user-account-menu-segment-item-pc:hover:not(
    .user-account-menu-segment-item-active-pc
  ) {
  color: var(--wb-color-text-primary);
}
.user-account-menu-segment-item-pc:focus-visible {
  outline: none;
  box-shadow: var(--shadow-1);
}
.user-account-menu-segment-item-active-pc {
  background: var(--wb-button-bg-secondary-hover);
  color: var(--wb-color-text-primary);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-1);
}

/* UserAccountMenuMobile — 移动端头像账户菜单（底部半屏）
 *
 * 视觉范式与移动端「更多操作」半屏一致：
 *   遮罩 --overlay-default / sheet --bg-page / 顶部圆角 24
 *   标题区 padding 20 20 0，标题 17px·24px·Medium，关闭 20px（hitbox 24）
 *   内容区左右 padding 20，卡片白底 + 圆角 16，卡间 gap 8
 *
 * 遮罩通过 Portal 挂到实例弹层容器（默认 body），因此用 fixed 铺满视口；
 * 默认 z-index 与 PC 面板一致（2300），更高层级的调用方通过 overlayClassName 覆盖。
 */
.user-account-menu-mobile {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.user-account-menu-trigger-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
}
/* ===== 遮罩 ===== */
.user-account-menu-overlay-mobile {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--overlay-default);
  animation: user-account-menu-overlay-fade-in-mobile 200ms ease;
}
/* ===== 半屏面板 ===== */
.user-account-menu-sheet-mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* 半屏：固定占视口 40%，内容不足时留白（对齐设计稿），超出时内部滚动 */
  height: 40vh;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-page);
  border-radius: var(--radius-24px-val) var(--radius-24px-val) 0 0;
  box-shadow: var(--shadow-3);
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿 iOS 手势区 34px */
  padding-bottom: calc(34px * var(--font-scale));
  animation: user-account-menu-sheet-slide-up-mobile 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes user-account-menu-overlay-fade-in-mobile {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes user-account-menu-sheet-slide-up-mobile {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* ===== 标题区 ===== */
.user-account-menu-sheet-header-mobile {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) 0;
}
.user-account-menu-sheet-title-mobile {
  /* DESIGN_FALLBACK: 设计稿 17px/24px/Medium，字号 scale 无 17px Token */
  /* stylelint-disable-next-line font-token */
  font-size: calc(17px * var(--font-scale));
  font-weight: var(--fw-medium);
  font-family: var(--font-family-body);
  line-height: 24px;
  color: var(--text-primary);
}
.user-account-menu-sheet-close-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 图标 20px，hitbox 撑到 24px 满足移动端最小可点面积 */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
}
/* ===== 内容区 ===== */
.user-account-menu-sheet-body-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0 var(--space-5);
}
.user-account-menu-card-mobile {
  display: flex;
  flex-direction: column;
  background: var(--bg-default);
  border-radius: var(--radius-4xl);
  overflow: hidden;
}
/* 身份卡：头像 36 + gap 12 + 名称/副标题 */
.user-account-menu-identity-mobile {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(64px * var(--font-scale));
  box-sizing: border-box;
  padding: var(--space-4);
}
.user-account-menu-identity-avatar-mobile {
  flex-shrink: 0;
}
.user-account-menu-identity-copy-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
}
.user-account-menu-identity-name-mobile {
  overflow: hidden;
  color: var(--text-primary);
  /* stylelint-disable-next-line font-token */
  font-size: calc(17px * var(--font-scale));
  font-weight: var(--fw-medium);
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-account-menu-identity-sub-mobile {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 操作项：高 56，20px 图标 + gap 12 + 17px 文案 */
.user-account-menu-item-mobile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(56px * var(--font-scale));
  padding: 0 var(--space-4);
  box-sizing: border-box;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
  /* 移动端无 hover，用 :active 给按下反馈 */
}
.user-account-menu-item-mobile:active {
  background: var(--fill-tertiary);
}
.user-account-menu-item-icon-mobile {
  flex-shrink: 0;
  color: var(--icon-primary);
}
.user-account-menu-item-label-mobile {
  flex: 1;
  min-width: 0;
  /* stylelint-disable-next-line font-token */
  font-size: calc(17px * var(--font-scale));
  font-weight: var(--fw-medium);
  font-family: var(--font-family-body);
  line-height: 24px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SharePanel · PC styles
 * 全量使用设计系统 token，stylelint design-system/* 规则必须 0 错。
 */
.share-panel-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--overlay-default);
}
/* 垂直居中定位（空间成员管理等场景） */
.share-panel-universal-pc.share-panel-centered-pc {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}
.share-panel-universal-pc {
  --share-panel-ardot-border: var(--border-default);
  --share-panel-ardot-panel-radius: 24px;
  --share-panel-ardot-row-radius: 12px;
  --share-panel-ardot-control-radius: 8px;
  --share-panel-ardot-tab-radius: 6px;
  --share-panel-ardot-close-radius: 2px;
  --share-panel-ardot-badge-radius: 3px;
  --share-panel-ardot-select-radius: 4px;
  --share-panel-ardot-select-width: 64px;
  --share-panel-ardot-select-pad-left: 6px;
  --share-panel-ardot-select-pad-right: 22px;
  --share-panel-ardot-select-chevron-top: 7px;
  --share-panel-ardot-select-chevron-right: 9px;
  --share-panel-ardot-shadow: 0 24px 48px 2px rgba(0, 0, 0, 0.08), 0 5px 12px 4px rgba(0, 0, 0, 0.08);
  --share-panel-ardot-tab-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  --share-panel-ardot-spinner-track: var(--border-default);
  position: fixed;
  top: 72px;
  right: 56px;
  z-index: 1201;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 0;
  border: var(--border-width-thin) solid var(--share-panel-ardot-border);
  border-radius: var(--share-panel-ardot-panel-radius);
  background: var(--wb-color-bg-secondary-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow -- ArDot 分享面板为双层精确投影，现有 shadow token 无等价值 */
  box-shadow: var(--share-panel-ardot-shadow);
  color: var(--text-primary);
}
.share-panel-header-pc,
.share-panel-public-row-pc,
.share-panel-public-link-row-pc,
.share-panel-link-card-pc,
.share-panel-collaborator-pc {
  display: flex;
  align-items: center;
}
.share-panel-header-pc {
  height: 56px;
  box-sizing: border-box;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 0;
  padding: 0 var(--space-6);
  border-bottom: 0;
}
.share-panel-header-pc h2 {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 22px;
}
.share-panel-heading-row-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.share-panel-public-pill-pc {
  padding: var(--space-0-5) var(--space-2);
  border: var(--border-width-thin) solid var(--warning);
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 18px;
}
.share-panel-close-pc,
.share-panel-channel-pc,
.share-panel-tabs-pc button,
.share-panel-collaborator-entry-pc,
.share-panel-back-pc,
.share-panel-link-mode-pc,
.share-panel-qr-action-pc,
.share-panel-custom-domain-link-pc,
.share-panel-public-copy-btn-pc,
.share-panel-local-sync-action-pc,
.share-panel-invite-copy-btn-pc,
.share-panel-round-action-pc,
.share-panel-public-action-pc {
  border: 0;
  font: inherit;
  cursor: pointer;
}
.share-panel-close-pc {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--wb-radius-150);
  background: transparent;
  color: var(--text-primary);
}
.share-panel-close-pc:hover {
  background: var(--wb-color-bg-primary-hover);
}
.share-panel-universal-pc button:focus-visible,
.share-panel-universal-pc select:focus-visible,
.share-panel-universal-pc input:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 0;
}
/* —— Tabs —————————— */
.share-panel-tabs-pc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  height: 34px;
  margin: 0 var(--space-6) var(--space-4);
  padding: var(--space-0-5);
  border: 0;
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--wb-color-bg-primary-default);
  box-shadow: none;
}
.share-panel-tabs-pc button {
  min-width: 0;
  height: 30px;
  padding: 0 var(--space-4);
  border-radius: var(--share-panel-ardot-tab-radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 22px;
}
.share-panel-tabs-pc button.is-active {
  background: var(--wb-color-message-bg);
  color: var(--text-primary);
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow -- ArDot tab 选中态为 0 1px 4px / 5% 的精确投影 */
  box-shadow: var(--share-panel-ardot-tab-shadow);
}
.share-panel-tabs-pc button:hover:not(.is-active) {
  background: var(--fill-secondary);
}
.share-panel-section-pc {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.share-panel-content-pc {
  padding: 0 var(--space-6) var(--space-6);
  overflow: hidden;
}
.share-panel-public-stack-pc {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--share-panel-ardot-row-radius);
  background: var(--wb-color-bg-primary-default);
}
.share-panel-access-actions-pc {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.share-panel-access-leading-icon-pc {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--icon-primary);
  flex: 0 0 24px;
}
.share-panel-access-leading-icon-pc svg {
  width: 20px;
  height: 20px;
}
.share-panel-access-leading-icon-pc.is-icon-eye svg,
.share-panel-access-leading-icon-pc.is-icon-user svg {
  width: 24px;
  height: 24px;
}
.share-panel-section-detail-pc {
  gap: var(--space-3);
}
.share-panel-access-actions-pc {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.share-panel-action-card-pc {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  transition: border-color 140ms ease, background 140ms ease;
}
.share-panel-action-card-pc.is-active {
  border-color: var(--brand-tint);
  background: var(--bg-default);
}
.share-panel-action-icon-pc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg-val);
}
.share-panel-action-icon-invite-pc {
  background: var(--info-bg);
  color: var(--info-text);
}
.share-panel-action-icon-public-pc {
  background: var(--brand-subtle);
  color: var(--brand);
}
.share-panel-action-main-pc {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.share-panel-action-title-pc {
  color: var(--text-primary);
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 22px;
}
.share-panel-action-desc-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  line-height: 18px;
}
.share-panel-action-permission-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}
.share-panel-action-permission-select-pc {
  display: inline-flex;
  position: relative;
  width: var(--share-panel-ardot-select-width);
  height: 22px;
  flex: 0 0 var(--share-panel-ardot-select-width);
}
.share-panel-action-permission-select-pc::after {
  content: "";
  position: absolute;
  top: var(--share-panel-ardot-select-chevron-top, var(--space-2));
  right: var(--share-panel-ardot-select-chevron-right, var(--space-2));
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--icon-primary);
  border-bottom: 1.5px solid var(--icon-primary);
  pointer-events: none;
  transform: rotate(45deg);
}
.share-panel-action-permission-pc select {
  width: 100%;
  max-width: var(--share-panel-ardot-select-width);
  height: 22px;
  padding: 0 var(--share-panel-ardot-select-pad-right) 0 var(--share-panel-ardot-select-pad-left);
  border: 0;
  border-radius: var(--share-panel-ardot-select-radius);
  -webkit-appearance: none;
          appearance: none;
  background: var(--fill-secondary);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
}
.share-panel-action-buttons-pc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.share-panel-round-action-pc {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--fill-secondary);
  color: var(--icon-secondary);
  transition: background 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}
.share-panel-round-action-pc:hover:not(:disabled) {
  background: var(--brand-subtle);
  color: var(--brand);
  transform: translateY(-1px);
}
.share-panel-round-action-pc:disabled {
  cursor: not-allowed;
  color: var(--text-quaternary);
  background: var(--fill-primary);
}
.share-panel-public-action-pc {
  height: 40px;
  padding: 0 var(--space-4);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 650;
  white-space: nowrap;
}
.share-panel-public-action-pc:hover:not(:disabled) {
  border-color: var(--brand-tint);
  background: var(--fill-secondary);
  color: var(--brand);
}
.share-panel-public-action-pc.is-active {
  border-color: var(--brand-tint);
  background: var(--brand-subtle);
  color: var(--brand);
}
.share-panel-public-action-pc:disabled {
  cursor: not-allowed;
  background: var(--fill-primary);
  color: var(--text-quaternary);
}
/* —— 本地产物条件式提示 —————————— */
.share-panel-local-note-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--info);
  border-radius: var(--radius-2xl-val);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: var(--fs-caption);
}
.share-panel-invite-copy-btn-pc {
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-xl-val);
  font-weight: 600;
  background: var(--brand);
  color: var(--text-allwhite);
}
.share-panel-invite-copy-btn-pc:disabled,
.share-panel-custom-domain-link-pc:disabled,
.share-panel-public-copy-btn-pc:disabled {
  cursor: not-allowed;
  background: var(--fill-primary);
  color: var(--text-quaternary);
}
/* —— 接收者仅转发面板 —————————— */
.share-panel-recipient-only-pc {
  width: min(480px, calc(100vw - 32px));
}
.share-panel-recipient-only-pc .share-panel-header-pc {
  margin-bottom: 0;
}
.share-panel-recipient-artifact-pc {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-xl-val);
  background: var(--bg-default);
  margin: 0 var(--space-6) var(--space-6);
}
.share-panel-recipient-icon-pc {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg-val);
  background: var(--fill-secondary);
  color: var(--brand);
}
.share-panel-recipient-icon-pc.type-pdf {
  color: var(--warning-text);
}
.share-panel-recipient-icon-pc.type-web,
.share-panel-recipient-icon-pc.type-html {
  color: var(--success-emphasis);
}
.share-panel-recipient-main-pc {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.share-panel-recipient-title-row-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.share-panel-recipient-title-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-panel-recipient-badge-pc {
  flex: 0 0 auto;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--success-bg);
  color: var(--success-emphasis);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 18px;
}
.share-panel-recipient-desc-pc {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 19px;
}
/* ─── DocumentInfoCard（管理者视角文档信息卡） ─── */
.share-panel-doc-info-pc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-6) var(--space-4);
}
.share-panel-doc-info-icon-pc {
  display: grid;
  place-items: center;
  color: var(--text-primary);
}
.share-panel-doc-info-icon-pc.type-web,
.share-panel-doc-info-icon-pc.type-html {
  color: var(--text-primary);
}
.share-panel-doc-info-main-pc {
  display: grid;
  gap: var(--space-0-5);
  min-width: 0;
}
.share-panel-doc-info-title-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: calc(15px * var(--font-scale));
  font-weight: 650;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-panel-doc-info-breadcrumb-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  line-height: 18px;
}
.share-panel-doc-info-breadcrumb-icon-pc {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--icon-tertiary);
}
.share-panel-doc-info-breadcrumb-icon-pc svg {
  width: 100%;
  height: 100%;
}
.share-panel-doc-info-breadcrumb-path-pc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-panel-subtitle-pc {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 650;
}
.share-panel-collaborators-pc {
  display: grid;
  gap: var(--space-2);
  max-height: min(312px, 34vh);
  overflow-y: auto;
  padding-right: var(--space-1);
  overscroll-behavior: contain;
}
.share-panel-collaborator-entry-pc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-thin) solid var(--divider);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.share-panel-collaborator-entry-pc:hover {
  color: var(--brand);
}
.share-panel-avatar-stack-pc {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.share-panel-avatar-stack-item-pc {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border: var(--border-width-thin) solid var(--bg-default);
  border-radius: var(--radius-2xl-val);
  color: var(--text-allwhite);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.share-panel-avatar-stack-item-pc:first-child {
  margin-left: 0;
}
.share-panel-collaborator-entry-main-pc {
  display: grid;
  gap: var(--space-0-5);
  flex: 1;
  min-width: 0;
}
.share-panel-collaborator-entry-title-pc {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 650;
}
.share-panel-collaborator-entry-meta-pc,
.share-panel-detail-meta-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.share-panel-entry-chevron-pc {
  color: var(--text-tertiary);
  font-size: calc(18px * var(--font-scale));
}
.share-panel-detail-header-pc {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  margin: -4px -24px var(--space-1);
  padding: 0 var(--space-6) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--divider);
}
.share-panel-back-pc {
  justify-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.share-panel-back-pc:hover {
  background: var(--fill-secondary);
  color: var(--brand);
}
.share-panel-detail-title-pc {
  display: grid;
  justify-items: center;
  gap: var(--space-0-5);
  min-width: 0;
  text-align: center;
}
.share-panel-section-detail-pc .share-panel-subtitle-pc {
  font-size: var(--fs-16);
}
.share-panel-section-detail-pc .share-panel-collaborators-pc {
  max-height: min(520px, calc(100vh - 220px));
}
.share-panel-online-doc-pc {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
/* —— 访问权限（获得链接的人） —————————— */
.share-panel-online-doc-access-pc {
  display: grid;
  gap: 0;
  min-width: 0;
}
.share-panel-online-doc-access-row-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  min-height: 36px;
  width: 100%;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--wb-color-bg-primary-default);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}
.share-panel-online-doc-access-row-pc:disabled {
  cursor: not-allowed;
}
.share-panel-online-doc-access-row-pc:hover {
  background: var(--wb-color-bg-primary-hover);
}
.share-panel-online-doc-access-label-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-panel-online-doc-access-value-trigger-pc {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  max-width: 65%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.share-panel-online-doc-access-value-trigger-pc:disabled {
  cursor: not-allowed;
}
.share-panel-online-doc-access-value-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: calc(22px * var(--font-scale));
}
.share-panel-online-doc-access-value-pc .icon {
  color: var(--icon-primary);
}
.share-panel-online-doc-access-value-text-pc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.share-panel-online-doc-access-dropdown-pc {
  /* 同上：底座默认把宽度锁成触发器宽度，这里改为按内容自适应 */
  width: auto;
  min-width: 110px;
  max-width: 260px;
  padding: var(--space-1);
  border: 0.5px solid var(--popover-border-color);
  border-radius: var(--radius-lg-val);
  background: var(--bg-popover);
  box-shadow: var(--shadow-3);
}
.share-panel-online-doc-access-dropdown-pc [data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  white-space: nowrap;
  padding: var(--space-2);
  border-radius: var(--radius-md-val);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 18px;
  transition: background-color 120ms ease;
}
.share-panel-online-doc-access-dropdown-pc [data-slot="dropdown-menu-item"]:hover,
.share-panel-online-doc-access-dropdown-pc [data-slot="dropdown-menu-item"]:focus {
  background: var(--wb-color-bg-primary-hover);
  outline: none;
}
.share-panel-online-doc-access-dropdown-pc [data-slot="dropdown-menu-item"][data-selected] {
  color: var(--text-primary);
}
.share-panel-online-doc-access-dropdown-pc [data-slot="dropdown-menu-item"] .icon {
  color: var(--icon-primary);
}
/* —— 访问范围（组织内 / 公开）切换器 —————————— */
.share-panel-online-doc-access-scope-trigger-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 60%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 22px;
  text-align: left;
  cursor: pointer;
}
.share-panel-online-doc-access-scope-trigger-pc:disabled {
  cursor: not-allowed;
}
.share-panel-online-doc-access-scope-trigger-pc .share-panel-online-doc-access-label-pc {
  color: inherit;
}
.share-panel-online-doc-access-scope-trigger-pc .icon {
  color: var(--icon-secondary);
}
.share-panel-online-doc-access-scope-dropdown-pc {
  /* 底座 DropdownMenuContent 默认把宽度锁成触发器宽度
     （w-(--radix-dropdown-menu-trigger-width)），而触发器本身很窄
     （max-width:60% + 图标），会把长文案选项挤到折行，这里改为按内容自适应 */
  width: auto;
  min-width: 200px;
  max-width: 320px;
  padding: var(--space-1);
  border: 0.5px solid var(--popover-border-color);
  border-radius: var(--radius-lg-val);
  background: var(--bg-popover);
  box-shadow: var(--shadow-3);
}
.share-panel-online-doc-access-scope-dropdown-pc [data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md-val);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 18px;
  transition: background-color 120ms ease;
}
.share-panel-online-doc-access-scope-dropdown-pc [data-slot="dropdown-menu-item"] > span {
  white-space: nowrap;
}
.share-panel-online-doc-access-scope-dropdown-pc [data-slot="dropdown-menu-item"]:hover,
.share-panel-online-doc-access-scope-dropdown-pc [data-slot="dropdown-menu-item"]:focus {
  background: var(--fill-secondary);
  outline: none;
}
.share-panel-online-doc-access-scope-dropdown-pc [data-slot="dropdown-menu-item"][data-selected] {
  color: var(--text-primary);
}
.share-panel-online-doc-access-scope-dropdown-pc [data-slot="dropdown-menu-item"] .icon {
  color: var(--icon-primary);
}
/* —— 协作成员摘要行（一级视图入口） —————————— */
.share-panel-collaborators-summary-wrap-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.share-panel-collaborators-summary-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-3);
  /* stylelint-disable-next-line design-system/spacing-4px-multiple */
  padding: var(--space-1-5) var(--space-3);
  height: 36px;
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--wb-color-bg-primary-default);
  color: var(--text-primary);
  font-size: var(--fs-body);
  cursor: pointer;
}
.share-panel-collaborators-summary-pc:hover {
  background: var(--wb-color-bg-primary-hover);
}
.share-panel-collaborators-summary-pc:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 0;
}
.share-panel-collaborators-summary-avatars-pc {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.share-panel-collaborators-summary-avatar-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  border-radius: var(--radius-full);
  background: var(--bg-default);
}
.share-panel-collaborators-summary-avatar-pc:first-child {
  margin-left: 0;
}
.share-panel-collaborators-summary-meta-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 20px;
}
.share-panel-collaborators-summary-count-pc {
  font-weight: 500;
}
.share-panel-collaborators-summary-chevron-pc {
  color: var(--text-tertiary);
}
/* —— 协作成员二级页 —————————— */
.share-panel-collaborators-page-pc {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
/* —— 返回按钮：仅图标，方形 hover 态 —————————— */
.share-panel-back-btn-icon-only-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: -8px;
  border: 0;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
  transition: background 140ms ease;
  flex-shrink: 0;
}
.share-panel-back-btn-icon-only-pc:hover {
  background: var(--fill-secondary);
}
.share-panel-back-btn-icon-only-pc:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 0;
}
/* —— 协作成员标题：纯展示文字 —————————— */
.share-panel-collaborators-title-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 22px;
  color: var(--text-primary);
}
.share-panel-collaborators-page-meta-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
}
.share-panel-collaborators-page-pc .share-panel-online-doc-collab-list-pc {
  max-height: min(520px, calc(100vh - 240px));
}
.share-panel-online-doc-collab-pc,
.share-panel-online-doc-link-pc,
.share-panel-online-doc-public-pc {
  min-width: 0;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--share-panel-ardot-row-radius);
  box-sizing: border-box;
}
.share-panel-online-doc-collab-pc {
  display: grid;
  gap: 0;
  max-height: 280px;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.share-panel-online-doc-title-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 22px;
}
/* 协作成员标题旁的小 i 信息图标：纯展示（hover 触发 Tooltip），非可点击操作，
 * cursor 保持默认箭头，避免 help(?)/pointer 误导用户以为可点。 */
.share-panel-collab-info-icon-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-tertiary);
  cursor: default;
  transition: color 150ms ease;
}
.share-panel-collab-info-icon-pc:hover {
  color: var(--icon-secondary);
}
.share-panel-online-doc-collab-pc > .share-panel-online-doc-title-pc,
.share-panel-online-doc-access-pc > .share-panel-online-doc-title-pc {
  height: 36px;
  padding: var(--space-2) 0;
  box-sizing: border-box;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 20px;
}
.share-panel-online-doc-collab-list-pc {
  min-width: 0;
  max-height: 244px;
  overflow-y: auto;
  border-radius: var(--radius-2xl-val);
  box-sizing: border-box;
}
.share-panel-online-doc-link-pc.is-active,
.share-panel-online-doc-public-pc.is-active {
  border-color: var(--border-default);
}
.share-panel-online-doc-collab-list-pc .share-panel-collaborators-pc {
  gap: 0;
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}
.share-panel-collaborators-limit-tip-pc {
  padding: var(--space-2) 0 var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 18px;
  text-align: center;
}
.share-panel-online-doc-collab-list-pc .share-panel-collaborator-pc {
  min-height: 38px;
  padding: var(--share-panel-ardot-collab-pad-y, var(--space-1-5)) 0;
  border-bottom: 0;
}
.share-panel-online-doc-collab-list-pc .share-panel-collaborator-pc:last-child {
  border-bottom: 0;
}
.share-panel-online-doc-collab-list-pc .share-panel-avatar-pc {
  width: 28px;
  height: 28px;
  font-size: var(--fs-caption);
}
.share-panel-online-doc-collab-list-pc .share-panel-collaborator-name-pc {
  font-size: var(--fs-caption);
  line-height: 18px;
}
.share-panel-online-doc-collab-list-pc .share-panel-collaborator-desc-pc {
  display: none;
}
.share-panel-online-doc-collab-list-pc .share-panel-collaborator-pc select {
  height: 28px;
  padding: 0 var(--space-5) 0 var(--space-2);
  font-size: var(--fs-caption);
}
.share-panel-online-doc-collab-list-pc .share-panel-permission-text-pc,
.share-panel-online-doc-collab-list-pc .share-panel-permission-select-trigger-pc {
  width: auto;
  min-width: auto;
  height: 28px;
  font-size: var(--fs-caption);
  justify-content: space-between;
}
/* 纯文本权限：右侧 padding 比触发器多 4px（补偿触发器 span 的 margin-right），
   使文案左边缘与触发器文案视觉对齐 */
.share-panel-online-doc-collab-list-pc .share-panel-permission-text-pc {
  padding-right: var(--space-6);
}
.share-panel-online-doc-link-pc {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.share-panel-online-doc-link-main-pc {
  display: grid;
  gap: var(--space-0-5);
  min-width: 0;
}
.share-panel-online-doc-link-permission-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 20px;
}
/* link 内嵌套 permission-select 独立样式 */
.share-panel-online-doc-link-permission-pc .share-panel-action-permission-select-pc select {
  width: var(--share-panel-ardot-select-width);
  height: 22px;
  padding: 0 var(--share-panel-ardot-select-pad-right) 0 var(--share-panel-ardot-select-pad-left);
  border: 0;
  border-radius: var(--share-panel-ardot-select-radius);
  -webkit-appearance: none;
          appearance: none;
  background: var(--fill-secondary);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
}
.share-panel-online-doc-copy-strong-pc {
  width: 108px;
  height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--fill-secondary);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease,
    transform 120ms ease;
}
.share-panel-online-doc-copy-strong-pc:hover:not(:disabled) {
  background: var(--fill-primary);
  transform: none;
}
.share-panel-online-doc-copy-strong-pc:disabled {
  cursor: not-allowed;
  background: var(--fill-primary);
  color: var(--text-quaternary);
}
.share-panel-online-doc-public-pc {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.share-panel-online-doc-public-main-pc {
  display: grid;
  gap: var(--space-0-5);
  min-width: 0;
}
.share-panel-online-doc-desc-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
}
.share-panel-online-doc-public-actions-pc {
  display: inline-flex;
  align-items: center;
  min-width: -webkit-max-content;
  min-width: max-content;
}
.share-panel-online-doc-divider-pc {
  width: 1px;
  height: 28px;
  background: var(--divider);
}
.share-panel-online-doc-copy-pc {
  height: 32px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 650;
  cursor: pointer;
}
.share-panel-online-doc-copy-pc:hover {
  background: var(--fill-secondary);
  color: var(--brand);
}
.share-panel-online-doc-copy-pc:disabled {
  cursor: not-allowed;
  color: var(--text-quaternary);
}
.share-panel-collaborator-pc {
  min-width: 0;
  gap: var(--space-3);
  min-height: 48px;
}
.share-panel-avatar-pc {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-2xl-val);
  color: var(--text-allwhite);
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  flex: 0 0 auto;
}
.share-panel-collaborator-main-pc {
  min-width: 0;
  flex: 1;
}
.share-panel-collaborator-name-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 600;
}
.share-panel-collaborator-name-text-pc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.share-panel-badge-pc {
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-md-val);
  background: var(--fill-primary);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  flex-shrink: 0;
}
/* 当前用户 "我" 标记：灰色背景，与右侧权限文案同色 */
.share-panel-badge-pc[data-badge-me] {
  /* stylelint-disable-next-line design-system/spacing-4px-multiple */
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--fill-primary);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  border-radius: var(--radius-md-val);
}
.share-panel-badge-pc.share-panel-badge-link-pc {
  background: var(--info-bg);
  color: var(--info-text);
}
/* 所有者标记：绿色圆角标签，紧贴姓名右侧展示 */
.share-panel-badge-pc.share-panel-badge-owner-pc {
  background: var(--success-bg);
  color: var(--success-emphasis);
}
.share-panel-collaborator-desc-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.share-panel-collaborator-pc select,
.share-panel-link-card-pc select {
  width: 88px;
  min-width: 88px;
  text-align: left;
  text-align-last: left;
  height: 32px;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
}
.share-panel-permission-text-pc {
  display: inline-block;
  width: 88px;
  min-width: 88px;
  height: 32px;
  line-height: 32px;
  padding: 0 var(--space-5) 0 var(--space-2);
  box-sizing: border-box;
  text-align: left;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* 权限下拉触发器：文本 + 箭头图标 */
.share-panel-permission-select-trigger-pc {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 88px;
  min-width: 88px;
  height: 32px;
  line-height: 32px;
  padding: 0 var(--space-2) 0 var(--space-2);
  box-sizing: border-box;
  border: none;
  /* 重置 button 默认边框 */
  margin: 0;
  /* 重置 button 默认 margin */
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-family: inherit;
  /* 重置 button 默认字体 */
  cursor: pointer;
  border-radius: var(--radius-md-val);
  transition: background-color 150ms ease;
  /* 箭头固定在右内侧 */
}
.share-panel-permission-select-trigger-pc:hover {
  background: var(--fill-primary);
}
.share-panel-permission-select-trigger-pc > span {
  /* 文字左对齐 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: var(--space-1);
}
.share-panel-permission-select-trigger-pc .icon {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-quaternary);
  pointer-events: none;
}
/* 权限下拉弹出层 */
.share-panel-permission-dropdown-pc {
  min-width: 96px;
  width: auto;
  padding: var(--space-1);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  border: var(--border-width-thin) solid var(--border-default);
  box-shadow: var(--shadow-level-3);
}
.share-panel-permission-dropdown-pc [data-slot="dropdown-menu-item"] {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--text-primary);
  font-weight: 500;
  border-radius: var(--radius-md-val);
  transition: all 120ms ease;
}
.share-panel-permission-dropdown-pc [data-slot="dropdown-menu-item"]:hover,
.share-panel-permission-dropdown-pc [data-slot="dropdown-menu-item"]:focus {
  background: var(--fill-primary);
  color: var(--text-primary);
  outline: none;
}
.share-panel-permission-dropdown-pc [data-slot="dropdown-menu-item"][data-disabled] {
  color: var(--text-quaternary);
  pointer-events: none;
}
.share-panel-link-card-pc {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-3) 0 0;
  border-top: var(--border-width-thin) solid var(--divider);
}
.share-panel-link-share-card-pc {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.share-panel-link-share-head-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.share-panel-link-modes-pc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.share-panel-link-mode-pc {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  min-height: 64px;
  padding: var(--space-3);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  color: var(--text-secondary);
  text-align: left;
}
.share-panel-link-mode-pc:hover:not(:disabled) {
  border-color: var(--brand-tint);
  background: var(--brand-subtle);
}
.share-panel-link-mode-pc.is-active {
  border-color: var(--brand);
  background: var(--brand-subtle);
  color: var(--brand);
}
.share-panel-link-mode-pc[aria-current="true"] {
  cursor: default;
}
.share-panel-link-mode-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.share-panel-link-mode-title-pc {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.share-panel-link-mode-pc.is-active .share-panel-link-mode-title-pc {
  color: var(--brand);
}
.share-panel-link-mode-desc-pc {
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 17px;
  overflow-wrap: anywhere;
}
.share-panel-link-share-card-pc .share-panel-link-card-pc {
  padding-top: 0;
  border-top: 0;
}
.share-panel-link-single-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.share-panel-link-single-pc .share-panel-link-card-pc {
  padding-top: 0;
  border-top: 0;
}
.share-panel-link-title-row-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.share-panel-link-title-row-pc select {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 var(--space-8) 0 var(--space-3);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
}
.share-panel-invite-link-row-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.share-panel-invite-link-row-pc .share-panel-url-pc {
  padding-right: var(--space-3);
}
.share-panel-invite-copy-btn-pc {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg-val);
  white-space: nowrap;
}
.share-panel-permission-suffix-pc {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 650;
}
/* —— 公开卡片容器 —————————— */
.share-panel-public-stack-pc .share-panel-public-row-pc {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.share-panel-public-stack-pc.is-ready .share-panel-public-row-pc {
  padding-bottom: var(--space-2);
}
.share-panel-public-row-pc {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  height: 64px;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
.share-panel-public-row-pc {
  cursor: pointer;
}
.share-panel-public-main-pc {
  display: grid;
  gap: 0;
  min-width: 0;
}
.share-panel-public-title-pc {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 24px;
}
.share-panel-public-desc-pc {
  margin-top: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
}
/* —— 开关 —————————— */
.share-panel-switch-pc {
  position: relative;
  width: 26px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.share-panel-switch-pc input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.share-panel-switch-pc-track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--wb-button-bg-grey-hover);
  transition: background 140ms ease;
  pointer-events: none;
}
.share-panel-switch-pc-track::after {
  content: "";
  position: absolute;
  top: var(--space-0-5);
  left: var(--space-0-5);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--switch-thumb-bg);
  transition: transform 140ms ease;
  box-shadow: var(--shadow-1);
}
.share-panel-switch-pc input:checked ~ .share-panel-switch-pc-track {
  background: var(--switch-active-bg);
}
.share-panel-switch-pc input:checked ~ .share-panel-switch-pc-track::after {
  transform: translateX(10px);
}
.share-panel-switch-pc input:disabled ~ .share-panel-switch-pc-track {
  cursor: not-allowed;
  opacity: 0.5;
}
/* —— 公共 URL 与自定义域名入口 —————————— */
.share-panel-public-link-card-pc {
  display: block;
}
/* public-stack 内部 link-card 覆盖 */
.share-panel-public-stack-pc .share-panel-public-link-card-pc {
  height: 32px;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- ArDot 公开卡片外框为 108px，含 1px 边框时底部间距需为 10px */
  margin: 0 var(--space-4) 10px;
  padding: 0;
}
/* 「同步至在线版本」行：本地已修改但未同步时展示 */
.share-panel-public-sync-row-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md-val);
  background: var(--warning-bg);
}
.share-panel-public-sync-info-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--warning-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 20px;
}
.share-panel-public-sync-info-pc > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-panel-public-sync-btn-pc {
  flex: none;
  height: 28px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--text-allwhite);
  font-size: var(--fs-small);
  line-height: 28px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease;
}
.share-panel-public-sync-btn-pc:hover:not(:disabled) {
  background: var(--brand-hover);
}
.share-panel-public-sync-btn-pc:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.share-panel-vip-badge-pc {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm-val);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  line-height: 16px;
}
.share-panel-public-link-row-pc {
  position: relative;
  display: block;
  height: 32px;
  max-width: 100%;
}
.share-panel-url-pc {
  display: flex;
  align-items: center;
  height: 32px;
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--space-10) 0 var(--space-3);
  border: 0;
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 20px;
  white-space: nowrap;
}
.share-panel-url-pc > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-panel-url-pc.is-disabled {
  background: var(--fill-secondary);
  color: var(--text-quaternary);
}
.share-panel-public-copy-btn-pc {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: inline-grid;
  place-items: center;
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  border-radius: var(--share-panel-ardot-tab-radius);
  background: transparent;
  color: var(--text-tertiary);
  transform: translateY(-50%);
}
.share-panel-public-copy-btn-pc svg {
  width: 16px;
  height: 16px;
}
.share-panel-public-copy-btn-pc:hover:not(:disabled) {
  background: transparent;
  color: var(--text-primary);
}
.share-panel-domain-editor-pc {
  gap: 0;
  color: var(--text-primary);
}
.share-panel-domain-editor-pc input {
  min-width: 80px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}
.share-panel-domain-editor-pc input:disabled {
  color: var(--text-quaternary);
}
.share-panel-domain-prefix-pc,
.share-panel-domain-suffix-pc {
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
.share-panel-custom-domain-link-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: -webkit-max-content;
  width: max-content;
  min-height: 28px;
  margin-top: var(--space-0-5);
  padding: 0 var(--space-0-5);
  background: transparent;
  color: var(--info-text);
  font-size: var(--fs-body);
  font-weight: 650;
}
.share-panel-custom-domain-link-pc:hover:not(:disabled) {
  color: var(--brand);
}
.share-panel-custom-domain-link-pc:disabled {
  background: transparent;
}
.share-panel-settings-grid-pc > div {
  padding: var(--space-3);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-weak);
}
.share-panel-settings-grid-pc span {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
}
.share-panel-settings-grid-pc strong {
  color: var(--text-primary);
  font-size: var(--fs-caption);
}
.share-panel-settings-grid-pc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.share-panel-settings-grid-pc > div {
  display: grid;
  gap: var(--space-1);
}
/* —— 高级设置（可折叠） —————————— */
.share-panel-advanced-pc summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 600;
  list-style: none;
}
.share-panel-advanced-pc summary::-webkit-details-marker {
  display: none;
}
.share-panel-advanced-pc summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: var(--space-1);
  transition: transform 140ms ease;
}
.share-panel-advanced-pc[open] summary::before {
  transform: rotate(90deg);
}
.share-panel-advanced-pc[open] summary {
  margin-bottom: var(--space-2);
}
/* —— 底部转发区 —————————— */
.share-panel-forward-pc {
  display: grid;
  gap: 0;
  margin: 0;
  box-sizing: border-box;
  padding: var(--space-5) var(--space-6) var(--space-6) var(--space-6);
  border: 0;
  border-top: var(--border-width-thin) solid var(--divider);
  border-radius: 0 0 var(--share-panel-ardot-panel-radius) var(--share-panel-ardot-panel-radius);
}
.share-panel-forward-title-pc {
  /* DESIGN_FALLBACK: 原"分享到"标题文案已移除，保留类名以兼容历史节点 */
  display: none;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 20px;
}
.share-panel-forward-heading-pc {
  display: none;
  color: var(--text-primary);
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  line-height: 22px;
}
.share-panel-channels-pc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  justify-content: flex-start;
}
.share-panel-forward-row-pc + .share-panel-forward-row-pc {
  padding-top: var(--space-1);
}
.share-panel-channel-pc {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 16px;
  white-space: nowrap;
}
.share-panel-channel-pc:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
/* —— 复制链接胶囊按钮（图标 + 始终可见文字） —————————— */
.share-panel-channel-pill-pc {
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-width-thin) solid transparent;
  background: var(--wb-color-bg-primary-default);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  line-height: 18px;
  transition: border-color 120ms ease, background 120ms ease;
}
.share-panel-channel-pill-pc:hover:not(:disabled) {
  background: var(--wb-color-bg-primary-hover);
  border-color: var(--wb-color-border-focus);
}
.share-panel-channel-pill-label-pc {
  display: inline-block;
}
/* —— 圆形渠道按钮（30×30，文字通过 Tooltip hover 展示） —————————— */
.share-panel-channel-round-pc {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--wb-color-bg-primary-default);
  color: var(--text-primary);
  transition: background 120ms ease,
    transform 120ms ease;
}
.share-panel-channel-round-pc:hover:not(:disabled) {
  background: var(--wb-color-bg-primary-hover);
}
.share-panel-channel-icon-pc {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  transition: none;
}
.share-panel-channel-pill-pc .share-panel-channel-icon-pc {
  width: 18px;
  height: 18px;
  font-size: calc(18px * var(--font-scale));
}
.share-panel-channel-icon-pc.is-wechat {
  color: var(--text-primary);
}
.share-panel-channel-svg-pc {
  display: block;
  width: 18px;
  height: 18px;
}
.share-panel-channel-round-pc .share-panel-channel-svg-pc {
  width: 30px;
  height: 30px;
}
.share-panel-channel-icon-pc.is-moments {
  color: var(--text-primary);
}
.share-panel-channel-icon-pc.is-qrcode,
.share-panel-channel-icon-pc.is-copy,
.share-panel-channel-icon-pc.is-browser {
  font-size: calc(21px * var(--font-scale));
  color: var(--text-primary);
}
.share-panel-channel-hint-pc {
  color: var(--text-tertiary);
  font-size: calc(11px * var(--font-scale));
  line-height: 14px;
}
/* 渠道按钮 loading spinner（微信唤起 / 二维码生成中） */
.share-panel-channel-icon-pc.is-loading {
  background: transparent;
}
.share-panel-channel-spinner-pc {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--fill-secondary);
  border-top-color: var(--brand);
  border-radius: var(--radius-full);
  animation: share-channel-spin 700ms linear infinite;
}
@keyframes share-channel-spin {
  to {
    transform: rotate(360deg);
  }
}
.share-panel-forward-feedback-pc {
  color: var(--error-text);
  font-size: var(--fs-small);
  line-height: 18px;
}
.share-panel-qr-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--divider);
}
.share-panel-qr-pc.is-generated {
  grid-template-columns: 104px minmax(0, 1fr) auto;
}
.share-panel-qr-preview-pc {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  color: var(--brand);
  font-size: var(--fs-small);
  font-weight: 650;
}
.share-panel-qr-preview-pc.is-generated {
  border-color: var(--brand-tint);
}
.share-panel-qr-image-pc {
  display: block;
  width: 100%;
  height: 100%;
}
.share-panel-qr-main-pc {
  display: grid;
  gap: var(--space-0-5);
  min-width: 0;
}
.share-panel-qr-title-pc {
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: 650;
}
.share-panel-qr-desc-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 17px;
}
.share-panel-qr-actions-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.share-panel-qr-action-pc {
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 650;
}
.share-panel-qr-action-pc:hover:not(:disabled) {
  color: var(--brand);
  background: var(--brand-subtle);
}
.share-panel-qr-action-pc:disabled {
  cursor: not-allowed;
  color: var(--text-quaternary);
  background: var(--fill-primary);
}
/* —— 复制反馈：屏幕阅读器可感知 —————————— */
.share-panel-aria-live-pc {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
/* —— 二次确认 modal —————————— */
.share-panel-confirm-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  background: var(--overlay-default);
}
.share-panel-confirm-pc {
  width: min(420px, calc(100vw - 32px));
  padding: var(--space-6);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-default);
  box-shadow: var(--shadow-4);
  color: var(--text-primary);
}
.share-panel-confirm-pc h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-16);
  font-weight: 650;
}
.share-panel-confirm-pc p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 20px;
}
.share-panel-confirm-actions-pc {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.share-panel-confirm-actions-pc button {
  height: 32px;
  padding: 0 var(--space-4);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-xl-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.share-panel-confirm-actions-pc button.is-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--text-allwhite);
}
.share-panel-confirm-actions-pc button.is-secondary {
  border-color: var(--border-default);
  background: transparent;
  color: var(--text-tertiary);
  font-weight: 500;
}
@media (max-width: 860px) {
  .share-panel-universal-pc {
    right: auto;
    left: 50%;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    transform: translate(-50%, 0);
  }
  .share-panel-settings-grid-pc {
    grid-template-columns: 1fr;
  }
  .share-panel-action-card-pc {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .share-panel-action-icon-pc {
    width: 44px;
    height: 44px;
  }
  .share-panel-action-buttons-pc {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .share-panel-round-action-pc,
  .share-panel-public-action-pc {
    height: 40px;
  }
  .share-panel-round-action-pc {
    width: 40px;
  }
  .share-panel-link-card-pc {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .share-panel-public-link-row-pc {
    grid-template-columns: 1fr;
  }
  .share-panel-invite-link-row-pc {
    grid-template-columns: 1fr;
  }
  .share-panel-invite-copy-btn-pc {
    width: 100%;
  }
  .share-panel-forward-pc {
    bottom: -24px;
  }
  .share-panel-qr-pc {
    grid-template-columns: minmax(0, 1fr);
  }
  .share-panel-qr-pc.is-generated {
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .share-panel-qr-actions-pc {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
/* —— 微信/朋友圈分享弹窗 —————————— */
.wechat-share-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  background: var(--overlay-default);
}
.wechat-share-modal-pc {
  width: min(360px, calc(100vw - 32px));
  padding: var(--space-6);
  border-radius: var(--radius-2xl-val);
  background: var(--modal-panel-bg);
  box-shadow: var(--shadow-3);
  color: var(--text-primary);
}
.wechat-share-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.wechat-share-header-pc h3 {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 22px;
}
.wechat-share-close-pc {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-2xl-val);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
}
.wechat-share-close-pc:hover {
  background: var(--fill-secondary);
}
.wechat-share-doc-title-pc {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg-val);
  background: var(--fill-secondary);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wechat-share-qr-area-pc {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 200px;
  margin: 0 auto var(--space-4);
  padding: var(--space-3);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--fill-secondary);
}
.wechat-share-qr-loading-pc .wechat-share-spinner-pc {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fill-primary);
  border-top-color: var(--brand);
  border-radius: var(--radius-full);
  animation: wechat-share-spin 800ms linear infinite;
}
.wechat-share-qr-image-pc {
  display: block;
  width: 100%;
  height: 100%;
}
.wechat-share-qr-placeholder-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
}
.wechat-share-guide-pc {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 20px;
  text-align: center;
}
.wechat-share-state-pc {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.wechat-share-state-text-pc {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 20px;
}
.wechat-share-state-loading-pc .wechat-share-spinner-pc {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fill-primary);
  border-top-color: var(--brand);
  border-radius: var(--radius-full);
  animation: wechat-share-spin 800ms linear infinite;
}
@keyframes wechat-share-spin {
  to {
    transform: rotate(360deg);
  }
}
.wechat-share-state-launched-pc {
  color: var(--success-text);
}
.wechat-share-state-failed-pc {
  color: var(--error-text);
}
.wechat-share-btn-pc {
  height: 36px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-xl-val);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-body);
  cursor: pointer;
}
.wechat-share-btn-primary-pc {
  background: var(--brand);
  color: var(--text-allwhite);
}
.wechat-share-btn-primary-pc:hover {
  background: var(--brand-hover);
}
/* ============================================================
 * 添加协作成员 —— 入口按钮 + 二级页
 * ============================================================ */
/* 摘要行右侧并排的方形「+」入口按钮 */
.share-panel-collaborators-summary-add-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--wb-color-bg-primary-default);
  color: var(--icon-secondary);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.share-panel-collaborators-summary-add-pc:hover {
  border-color: var(--border-strong);
  background: var(--wb-color-bg-primary-hover);
  color: var(--icon-primary);
}
.share-panel-collaborators-summary-add-pc:focus-visible {
  outline: 2px solid var(--brand-tint);
  outline-offset: 0;
}
/* —— 二级页容器 —————————————————————————— */
.share-panel-add-collab-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  /* 父级 .share-panel-content-pc 左右 padding 24px，让 tablist 贯通线用负 margin 拉到父边缘 */
  --share-panel-add-collab-pad-x: var(--space-6);
}
/* 通讯录入口占位卡（设计稿：432×60，圆角 8，边框 rgba(0,0,0,0.1)，内 padding 12） */
.share-panel-add-collab-contacts-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box;
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--share-panel-ardot-row-radius);
  background: var(--bg-default);
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}
.share-panel-add-collab-contacts-pc:hover {
  border-color: var(--border-strong);
  background: var(--fill-quaternary);
}
.share-panel-add-collab-contacts-icon-pc {
  display: flex;
  padding: var(--space-2);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--button-grey-bg);
  border-radius: var(--radius-xl-val);
  color: var(--icon-primary);
}
.share-panel-add-collab-contacts-main-pc {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.share-panel-add-collab-contacts-title-pc {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 22px;
}
.share-panel-add-collab-contacts-desc-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
}
.share-panel-add-collab-contacts-arrow-pc {
  flex: 0 0 auto;
  color: var(--icon-tertiary);
}
/* —— Tab（下划线风格，复用 Tabs 组件 + 样式覆盖对齐设计稿：tab 间距 24、贯通浅色底线 + 激活态 24×3 圆角胶囊深色下划线） —— */
.share-panel-add-collab-tabs-pc[role="tablist"] {
  display: flex !important;
  align-items: center;
  /* tab 间距 24（覆盖 Tabs 默认 gap-1） */
  gap: var(--space-6) !important;
  width: auto;
  /* 父容器有左右 padding，用负 margin 让贯通线拉到父级 content 边缘 */
  margin-left: calc(-1 * var(--share-panel-add-collab-pad-x, 0px));
  margin-right: calc(-1 * var(--share-panel-add-collab-pad-x, 0px));
  /* 贯通整行的浅色底线（设计稿要求拉通两侧） */
  border-bottom: var(--border-width-thin) solid var(--divider) !important;
}
/* 首个 tab：左对齐到父级 content 边缘，与其它子元素（左 24 padding）保持一致 */
.share-panel-add-collab-tabs-pc [role="tab"]:first-child {
  margin-left: var(--share-panel-add-collab-pad-x, var(--space-6));
}
/* 去除 Tabs 默认 px-3 水平内边距，使胶囊宽度贴合文字；行高对齐设计稿 */
.share-panel-add-collab-tabs-pc [role="tab"] {
  padding: var(--space-3) 0 !important;
  line-height: 22px;
  /* 关闭组件默认的 2px border-bottom，用 ::after 绝对定位胶囊代替 */
  border-bottom: 0 !important;
  position: relative;
}
/* 非激活 tab：隐藏胶囊 */
.share-panel-add-collab-tabs-pc [role="tab"]:not([aria-selected="true"])::after {
  display: none;
}
.share-panel-add-collab-tabs-pc [role="tab"]:hover {
  color: var(--text-secondary);
  cursor: pointer;
}
/* 激活态：文字主色 + 加粗 + 24×3 圆角胶囊深色下划线（覆盖 Tabs 默认 border-brand） */
.share-panel-add-collab-tabs-pc [role="tab"][aria-selected="true"] {
  font-weight: 600;
}
.share-panel-add-collab-tabs-pc [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  /* 水平居中于 tab 文字下方（不受 px padding 影响） */
  left: 50%;
  transform: translateX(-50%);
  /* stylelint-disable-next-line font-token —— -1px 绝对对齐下方 1px border，不走 token */
  bottom: -1px;
  width: 24px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--text-primary);
}
/* —— 列表 / 表单区 ——————————————————————— */
.share-panel-add-collab-body-pc {
  min-width: 0;
  /* 预留顶部（通讯录卡 60 + Tab + 间距）与底部 footer（68）空间，避免内容溢出遮挡 footer */
  height: min(282px, calc(100vh - 420px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.share-panel-add-collab-empty-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
.share-panel-add-collab-loading-more-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0;
  color: var(--text-quaternary);
  font-size: var(--fs-small);
}
/* 触底 sentinel：不可见占位，仅供 IntersectionObserver 观察 */
.share-panel-add-collab-sentinel-pc {
  height: 1px;
  width: 100%;
}
/* —— 最近协作者列表（行高 36，checkbox 与内容 gap 12，头像与名称 gap 8） —— */
.share-panel-add-collab-recent-list-pc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 180px;
  /* 紧凑行间距（对齐设计稿"近似贴贴"的密度），用最小区间 token */
  gap: var(--space-0-5);
}
.share-panel-add-collab-recent-row-pc {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: var(--share-panel-ardot-select-radius);
  transition: background 150ms ease;
}
.share-panel-add-collab-recent-row-pc:hover {
  background: var(--fill-secondary);
}
.share-panel-add-collab-recent-row-pc[data-disabled] {
  cursor: not-allowed;
}
.share-panel-add-collab-recent-row-pc[data-disabled]:hover {
  background: transparent;
}
/* 自绘复选框（业务勾选行，放 app 侧不进 ui-components）：16×16，选中品牌色实心 */
.share-panel-add-collab-checkbox-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* 复选框 → 头像：12px */
  margin-right: var(--space-3);
  border: var(--border-width-thin) solid var(--border-strong);
  border-radius: var(--share-panel-ardot-select-radius);
  background: var(--bg-default);
  color: var(--text-allwhite);
  transition: background 150ms ease, border-color 150ms ease;
}
.share-panel-add-collab-checkbox-pc[data-checked] {
  border-color: var(--brand);
  background: var(--brand);
}
.share-panel-add-collab-checkbox-pc[data-disabled] {
  opacity: 0.5;
}
/* 名称 + 描述内联（名称 14/text-primary，描述 12/rgba0.5） */
.share-panel-add-collab-recent-main-pc {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  /* 头像 → 名字：8px */
  margin-left: var(--space-2);
}
.share-panel-add-collab-recent-name-pc {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 22px;
}
.share-panel-add-collab-recent-desc-pc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
  text-overflow: ellipsis;
}
/* 头像：去边框（AvatarPC 默认带 1px border，列表内不需要） */
.share-panel-add-collab-recent-avatar-pc .avatar-circle-pc {
  border: 0;
}
/* 名字与最近活跃时间之间的分隔点：•（仅副标题存在时渲染） */
.share-panel-add-collab-recent-desc-pc::before {
  content: "\2022";
  margin: 0 var(--space-2);
  color: var(--text-quaternary);
  font-size: var(--fs-small);
  font-weight: 500;
}
/* —— 手机号表单（整体圆角 8 边框，内嵌 +86 胶囊 + 输入，右侧删除） —— */
.share-panel-add-collab-phone-list-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.share-panel-add-collab-phone-row-pc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
/* 单行的输入 + 错误提示垂直容器 */
.share-panel-add-collab-phone-cell-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}
.share-panel-add-collab-phone-field-pc {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 36px;
  overflow: hidden;
  border: var(--border-width-thin) solid var(--border-strong);
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--bg-default);
  transition: border-color 150ms ease;
}
.share-panel-add-collab-phone-field-pc:focus-within {
  border-color: var(--border-focus);
}
/* 错误态：红色边框 */
.share-panel-add-collab-phone-field-pc[data-error] {
  border-color: var(--error);
}
.share-panel-add-collab-phone-field-pc[data-error]:focus-within {
  border-color: var(--error);
}
/* 取消 input focus 时外层 field 框变色高亮（设计稿要求无聚焦反馈） */
.share-panel-add-collab-phone-field-pc:focus-within:not([data-error]) {
  border-color: var(--border-default);
}
/* 关闭 input 自身的 UA focus outline / box-shadow（设计稿无聚焦视觉）
 * 用 !important 覆盖浏览器 UA 默认 focus outline 与项目通用层 button:focus-visible 样式 */
.share-panel-add-collab-phone-input-pc:focus,
.share-panel-add-collab-phone-input-pc:focus-visible,
.share-panel-add-collab-phone-input-pc:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: var(--border-default) !important;
}
/* 实时错误提示文案 */
.share-panel-add-collab-phone-error-pc {
  padding-left: var(--space-1);
  color: var(--error);
  font-size: var(--fs-small);
  line-height: 18px;
}
.share-panel-add-collab-phone-region-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 100%;
  border-right: var(--border-width-thin) solid var(--border-default);
  background: var(--bg-medium);
  color: var(--text-secondary);
  font-size: var(--fs-body);
}
.share-panel-add-collab-phone-input-pc {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-3);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
}
.share-panel-add-collab-phone-input-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.share-panel-add-collab-phone-input-pc::placeholder {
  color: var(--text-quaternary);
}
.share-panel-add-collab-phone-remove-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  /* 与输入框文字行高对齐，不撑满整行高度 */
  height: 28px;
  /* row 改为 flex-start（避免错误态文案撑高 cell 时按钮跑偏），
   * 这里 height=28 + margin-top=4 = field 36px 中心，让 24×28 的删除按钮
   * 视觉对齐 36px 输入框中线；间距全部走 4px 倍数对齐 stylelint 规则 */
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  border-radius: var(--share-panel-ardot-select-radius);
  transition: background 150ms ease,
    color 150ms ease;
}
.share-panel-add-collab-phone-remove-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-secondary);
}
.share-panel-add-collab-phone-add-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1-5);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: color 150ms ease;
}
.share-panel-add-collab-phone-add-pc:hover {
  background: var(--fill-secondary);
  color: var(--brand);
  border-radius: var(--wb-radius-150);
}
/* 达行数上限：置灰、禁用交互（hover 不变色），tooltip 由 wrap 承接 */
.share-panel-add-collab-phone-add-pc:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}
.share-panel-add-collab-phone-add-pc:disabled:hover {
  background: transparent;
  color: var(--text-quaternary);
}
/* disabled 按钮不触发 hover 事件，用 inline-flex 包裹层承接 tooltip 悬停 */
.share-panel-add-collab-phone-add-wrap-pc {
  display: inline-flex;
  align-self: flex-start;
}
/* 短信能力不可用提示行（footer 之上，额度用尽 / 系统不可用） */
.share-panel-add-collab-sms-blocked-pc {
  padding: var(--space-2) 0;
  color: var(--error);
  font-size: var(--fs-small);
  text-align: center;
}
/* —— sticky footer（高 68，顶部分割线，左权限右添加按钮） —— */
.share-panel-add-collab-footer-pc {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  box-sizing: border-box;
  border-top: var(--border-width-thin) solid var(--divider);
  /* 仅剩一个按钮（如手机号 Tab 隐藏权限下拉）时右对齐，与双按钮布局的右侧锚点一致 */
}
.share-panel-add-collab-footer-pc > button:only-child {
  margin-left: auto;
}
.share-panel-add-collab-perm-trigger-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  cursor: pointer;
  border-radius: var(--share-panel-ardot-select-radius);
  transition: background 150ms ease;
}
.share-panel-add-collab-perm-trigger-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}
.share-panel-add-collab-submit-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 83px;
  height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--share-panel-ardot-control-radius);
  background: var(--brand);
  color: var(--text-allwhite);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  transition: background 150ms ease,
    opacity 150ms ease;
}
.share-panel-add-collab-submit-pc:hover:not(:disabled) {
  background: var(--brand-hover);
}
.share-panel-add-collab-submit-pc:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 提交按钮 loading spinner：白描边圆环（对齐项目 share-channel-spin 等既有范式） */
.share-panel-add-collab-submit-spin-pc {
  width: 14px;
  height: 14px;
  border: 2px solid var(--fill-secondary);
  border-top-color: var(--text-allwhite);
  border-radius: var(--radius-full);
  animation: share-panel-add-collab-submit-spin 700ms linear infinite;
}
@keyframes share-panel-add-collab-submit-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .share-panel-add-collab-submit-spin-pc {
    animation: none;
  }
}
/* 添加协作成员页权限下拉：复用 share-panel-permission-dropdown-pc 视觉，
 * 仅补充 item 内「文字 + 选中对勾」的两端对齐（对齐设计参考图）。 */
.share-panel-add-collab-perm-dropdown-pc {
  min-width: 120px;
  /* 需盖在选人/分享弹层（modal 层级 1300）之上，与项目 z-index 体系对齐 */
  z-index: 1300;
}
.share-panel-add-collab-perm-dropdown-pc [data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.share-panel-add-collab-perm-dropdown-pc [data-slot="dropdown-menu-item"] > span {
  flex: 1 1 auto;
}
.share-panel-add-collab-perm-dropdown-pc [data-slot="dropdown-menu-item"] .icon {
  flex: 0 0 auto;
  color: var(--text-primary);
}

/* ====== 权限申请弹窗 ====== */
/* 遮罩 */
.apply-dialog-overlay-pc {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--overlay-default);
}
/* 弹窗面板 */
.apply-dialog-panel-pc {
  width: 480px;
  min-height: 360px;
  max-width: calc(100vw - 2rem);
  border-radius: var(--radius-24px-val);
  background-color: var(--bg-default);
  box-shadow: var(--shadow-level-3);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: left;
  /* DESIGN_FALLBACK: shadow-level-3 未定义，使用内联值兜底 */
  --shadow-level-3: 0 12px 36px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 头部 */
.apply-dialog-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.apply-dialog-title-pc {
  font-size: calc(18px * var(--font-scale));
  font-weight: 600;
  line-height: 28px;
  color: var(--text-primary);
  margin: 0;
}
.apply-dialog-close-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--icon-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}
.apply-dialog-close-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
.apply-dialog-close-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* 用户信息区 */
.apply-dialog-user-pc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* DESIGN_FALLBACK: 头像区域暂无 token 定义 */
.apply-dialog-avatar-pc {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand-light);
  flex-shrink: 0;
  overflow: hidden;
  font-size: calc(20px * var(--font-scale));
  font-weight: 600;
  line-height: 1;
  -webkit-user-select: none;
          user-select: none;
}
.apply-dialog-user-info-pc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.apply-dialog-user-text-pc {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--fs-body);
  line-height: 22px;
  color: var(--text-primary);
  margin: 0;
}
.apply-dialog-user-text-pc strong {
  font-weight: 600;
}
/* 「向 {owner}」：设计稿 body md bold */
.apply-dialog-user-owner-pc {
  font-weight: 600;
}
/* 「申请」：设计稿 body md regular */
.apply-dialog-user-action-pc {
  font-weight: 400;
}
/* 权限种类下拉触发器（设计稿 option：gap 2 + 文案 bold + chevron 16） */
.apply-dialog-permission-trigger-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5, 2px);
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
  transition: color 150ms ease;
}
.apply-dialog-permission-trigger-pc:hover {
  color: var(--brand-hover);
}
.apply-dialog-permission-trigger-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.apply-dialog-permission-label-pc {
  white-space: nowrap;
}
/* 固定申请角色时的只读文案（与下拉触发器同一视觉层级，只是不可交互） */
.apply-dialog-permission-static-pc {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}
.apply-dialog-permission-arrow-pc {
  flex-shrink: 0;
  color: var(--icon-secondary);
}
/* 权限种类下拉弹层 */
.apply-dialog-permission-menu-pc {
  z-index: 11001;
  /* 底座默认把宽度锁成触发器宽度（--radix-dropdown-menu-trigger-width），
     会把「查看权限 + 勾选」挤到折行，这里按内容自适应 */
  width: auto;
  min-width: 112px;
  padding: var(--space-1);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  box-shadow: var(--shadow-level-2);
  /* DESIGN_FALLBACK: shadow-level-2 未定义，使用内联值兜底 */
  --shadow-level-2: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.apply-dialog-permission-menu-pc [data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md-val);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 20px;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
.apply-dialog-permission-menu-pc [data-slot="dropdown-menu-item"]:hover,
.apply-dialog-permission-menu-pc [data-slot="dropdown-menu-item"]:focus {
  background: var(--fill-secondary);
  outline: none;
}
.apply-dialog-permission-menu-pc [data-slot="dropdown-menu-item"][data-selected] {
  font-weight: 500;
}
/* 徽标（集体信息） */
.apply-dialog-badge-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: var(--space-0-5, 2px) var(--space-2, 8px);
  border-radius: var(--radius-full);
  background: var(--fill-secondary);
  font-size: var(--fs-caption);
  line-height: 18px;
  color: var(--text-secondary);
  cursor: default;
}
.apply-dialog-record-icon-pc {
  flex-shrink: 0;
  color: var(--icon-secondary);
}
.apply-dialog-form-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* 申请理由 */
.apply-dialog-reason-pc {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.apply-dialog-label-pc {
  font-size: var(--fs-body);
  line-height: 22px;
  color: var(--text-secondary);
}
.apply-dialog-label-hint-pc {
  color: var(--text-quaternary);
}
/* 文本框 */
.apply-dialog-textarea-pc {
  width: 100%;
  height: 120px;
  padding: var(--space-3) var(--space-3);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-16);
  line-height: 24px;
  resize: none;
  outline: none;
  transition: border-color 150ms ease;
}
.apply-dialog-textarea-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.apply-dialog-textarea-pc::placeholder {
  color: var(--text-quaternary);
}
.apply-dialog-textarea-pc:focus {
  border-color: var(--border-focus);
}
.apply-dialog-textarea-pc:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 常用语区 */
.apply-dialog-quick-pc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  line-height: 20px;
}
.apply-dialog-quick-label-pc {
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.apply-dialog-quick-btn-pc {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  line-height: 20px;
  cursor: pointer;
  transition: color 150ms ease;
}
.apply-dialog-quick-btn-pc:hover {
  color: var(--brand);
  text-decoration: underline;
}
.apply-dialog-quick-btn-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* DESIGN_FALLBACK: 填入按钮暂无标准按钮变体 */
.apply-dialog-fill-btn-pc {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: var(--fs-caption);
  line-height: 20px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease;
}
.apply-dialog-fill-btn-pc:hover {
  color: var(--brand-hover);
}
.apply-dialog-fill-btn-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* 底部按钮 */
.apply-dialog-footer-pc {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-3);
}
.apply-dialog-btn-cancel-pc {
  min-width: 68px;
  height: 32px;
  padding: 0 var(--space-5);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.apply-dialog-btn-cancel-pc:hover {
  background: var(--fill-secondary);
  border-color: var(--border-strong);
}
.apply-dialog-btn-cancel-pc:active {
  background: var(--fill-tertiary);
}
.apply-dialog-btn-cancel-pc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.apply-dialog-btn-confirm-pc {
  min-width: 68px;
  height: 32px;
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-2xl-val);
  background: var(--brand);
  color: var(--text-allwhite);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.apply-dialog-btn-confirm-pc:hover {
  background: var(--brand-hover);
}
.apply-dialog-btn-confirm-pc:active {
  background: var(--brand-pressed);
}
.apply-dialog-btn-confirm-pc:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 覆盖 SDK 评论面板容器样式（通过 :root CSS 变量） */
:root {
  /* SDK aside 宽度走 --sc-comment-aside-width（插件默认 320px，与设计稿
   * wb/Spec「Sidebar/Comment」一致），mindx 不覆盖。
   * 旧变量 --sc-comment-panel-width(286px) 是无人消费的孤儿定义——SDK
   * 从未读取该名字，已删除以免误导（曾让审查误判 md 面板为 286px）。 */
  /* 左边框对齐设计稿（wb/Spec Sidebar/Comment）与 html 侧 FloatingCommentSidebar */
  --sc-comment-panel-border: var(--divider);
}
.sc-comment-aside {
  border-left: var(--border-width-thin) solid var(--divider) !important;
  transition: none !important;
  z-index: 90;
  /* 低于 titlebar(110) / 协作者 popover(130) / 分享面板(1200+) */
  /* SDK 用 JS 把 inline height 同步为正文内容总高度（editable.offsetHeight）。
   * 文档内容短于视口时，aside 只有内容高度，下方会留白、border-left 半截而断。
   * min-height: 100% 以包含块 .sc-editor-content（滚动容器，可视区高度确定）为基准兜底：
   *   - 内容短 → 撑满到滚动容器底部（连接页面底部）
   *   - 内容长 → inline height 大于 min-height，边框继续贯穿全文，不受影响 */
  min-height: 100%;
}
/* ========== 悬浮锚定评论卡片 ==========
 *
 * Layer 策略：所有卡片挂在一个覆盖整个内容区的 absolute layer 上，
 * 用 JS 推挤算法计算每张卡片的 top，避免段落尺寸不一导致的视觉重叠。
 *
 * 卡片宽度 320px，挂在文档正文（max-width 720px）右侧外部空白区。
 * 父容器 .doc-page-content-pc 需设为 position: relative（已在 pc.less 中设置）。
 *
 * 打开悬浮模式时，外层 .doc-page-inline-cards-open-pc 给 .doc-page-content-pc
 * padding-right，留出卡片空间，正文整体左移让位。
 */
.doc-comment-inline-layer-pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  /* 恒定 clip-path：上下各扩展 200vh，左右扩展 100vw — 不裁剪任何卡片 */
  -webkit-clip-path: inset(-200vh -100vw -200vh -100vw);
          clip-path: inset(-200vh -100vw -200vh -100vw);
  /* 常态 transition：仅为焦点对齐 translateY 做平滑过渡 */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
/* 入场 keyframes：从右侧滑入（translateX +24 → 0，opacity 0 → 1） */
@keyframes inline-cards-layer-enter {
  from {
    transform: translate(24px, 0);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
/* 退场动画：直接用 Web Animations API 在 layer DOM 上播放（见 doc-comment-inline-cards.tsx 的退场分支）
 * 不再用 @keyframes —— 因为 inline style 的 transform 优先级高于 @keyframes，
 * 用 WAAPI 才能既保留 translateY（焦点对齐）又驱动 translateX 位移动画 */
/* 单张卡片 — JS 动态算 top + left，紧贴 .note-pc 正文右边缘 + 16px 间距
 * 宽度 280px，锚定在正文右侧外部空白区，区别于右侧评论面板框架 */
.doc-comment-inline-card-pc {
  position: absolute;
  width: 280px;
  pointer-events: auto;
  z-index: 1;
  /* 首次未定位完成时透明，拿到定位后淡入 */
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* top/transform 过渡仅在 data-top-ready 后启用：
   * 新卡片首帧不播 top 动画（避免翻转位移），已有卡片立即可用 */
  /* 退出态：layer 已整体向右 translate + 淡出，卡片自身只需停止交互即可 */
  /* 默认（非激活态）：轻投影 + 轻边框，低调 */
  /* 修改请求卡片始终保持左侧橘色竖线和浅蓝底色。
   * WorkBuddy 等主题的 --brand-subtle 可能带 alpha，底层叠 bg-default 保证卡片不透出正文。 */
  /* Agent 全文修订（kind=agent_review_global）与局部审阅在视觉上保持一致，
   * 复用基类 .comment-thread-modify-standalone-pc 的 --bg-default 底色，
   * 不再用 warning 浅黄底做区分。 */
  /* 激活态（data-expanded=true）：
   * - z-index 提升到最高层，确保完全浮在相邻卡片之上
   * - 更深、更柔和的扩散投影（两层阴影：近景锐利 + 远景柔散）
   * - translateX(-8px) 向左位移，让用户清晰感知卡片被激活
   * - 轻微 scale(1.01) + translateY(-1px) 让卡片有"弹起"的微交互感
   */
  /* 向左位移 + 轻微弹动 改成 顶部加绿色border：片闪烁动画：从正文点击触发，缩放脉冲+光晕 */
  /* 悬浮卡片内：保持与侧边栏一致的多条评论缩进 + 头像竖线连接，
   * 仅对修改请求卡片收窄额外缩进（卡片本身已有 16px 基础 padding） */
  /* 悬浮卡片有 titlebar，修改请求首条不应向上出血覆盖 titlebar
   * margin-top: -12px 抵消 titlebar 的 margin-bottom，让底色紧贴分隔线 */
}
.doc-comment-inline-card-pc[data-ready="true"] {
  opacity: 1;
}
.doc-comment-inline-card-pc[data-ready="true"][data-top-ready="true"] {
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.doc-comment-inline-layer-pc[data-exiting="true"] .doc-comment-inline-card-pc {
  pointer-events: none;
}
.doc-comment-inline-card-pc > .comment-thread-pc {
  box-shadow: var(--shadow-1);
  margin-bottom: 0;
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease-out;
}
.doc-comment-inline-card-pc > .comment-thread-modify-standalone-pc {
  background: linear-gradient(var(--bg-default), var(--bg-default)), var(--bg-default);
  /* 原子组件左侧竖线样式覆盖 */
}
.doc-comment-inline-card-pc > .comment-thread-modify-standalone-pc:hover {
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow, design-system/no-hardcoded-colors -- 产品定制的双层阴影色值，现有 shadow token 无等价值 */
  box-shadow: rgba(0, 0, 0, 0.07) 4px 6px 14px, rgba(0, 0, 0, 0.04) 1px 2px 4px;
}
.doc-comment-inline-card-pc[data-expanded="true"] {
  z-index: 100;
  /* 修改请求卡片激活态：保持左侧橘色竖线和底色 */
  /* 激活态下右上角按钮组（已解决 + 更多菜单）始终显示，
     * 不强制依赖 hover —— 否则用户必须 hover 才能看到操作入口，体验差 */
}
.doc-comment-inline-card-pc[data-expanded="true"] > .comment-thread-pc {
  /* 向左位移 + 轻微弹动 改成 四边绿色border：
      * - 注释 transform: translate(-8px, -1px) scale(1.01);
      * - translateX(-8px) 向左位移，让用户清晰感知卡片被激活
      * - 轻微 scale(1.01) + translateY(-1px) 让卡片有"弹起"的微交互感
      */
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border-focus-alt);
  /* 覆盖默认态的 transition，去掉 border-color 以避免激活时灰色→绿色的缓冲动画 */
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.doc-comment-inline-card-pc[data-expanded="true"] > .comment-thread-modify-standalone-pc {
  background: linear-gradient(var(--bg-default), var(--bg-default)), var(--bg-default);
  /* 激活态四周边线与普通卡片统一*/
}
.doc-comment-inline-card-pc[data-expanded="true"] .comment-thread-hover-pill-pc {
  opacity: 1;
  pointer-events: auto;
}
.doc-comment-inline-card-pc .comment-thread-messages-pc[data-has-replies="true"] > .comment-message-modify-card-pc:not(:first-child) {
  padding-left: var(--space-4);
  /* 保留原有基础 padding，去掉额外 20px 缩进 */
}
.doc-comment-inline-card-pc .comment-message-modify-card-pc:first-child {
  margin-top: -12px;
  border-radius: 0;
}
/* 窄屏悬浮 opinion 卡片：JS 动态计算最大高度（含 padding/border），
 * 消息区独立滚动；titlebar 与输入区不收缩，滚动条贴到卡片右边缘。 */
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-card-pc > .comment-thread-pc:not(.comment-thread-modify-standalone-pc):not(
    .comment-thread-draft-pc
  ) {
  max-height: var(--thread-card-max-height, min(480px, 70vh));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-card-pc > .comment-thread-pc:not(.comment-thread-modify-standalone-pc):not(
    .comment-thread-draft-pc
  ) .comment-thread-titlebar-pc,
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-card-pc > .comment-thread-pc:not(.comment-thread-modify-standalone-pc):not(
    .comment-thread-draft-pc
  ) .comment-thread-reply-pc {
  flex-shrink: 0;
}
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-card-pc > .comment-thread-pc:not(.comment-thread-modify-standalone-pc):not(
    .comment-thread-draft-pc
  ) .comment-thread-messages-pc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-right: -16px;
  padding-right: var(--space-4);
}
/* 「查看全部评论」按钮 — 悬浮 hover 时显示在卡片右上角 pill 行 */
.doc-comment-inline-view-all-pc:hover {
  background: var(--brand) !important;
  color: var(--text-allwhite) !important;
}
/* ========== 关闭手柄（纵向贯穿 host 正文区的极窄感应条）==========
 *
 * 形态：纵向长条 —— width: 12px
 *       top / height 由 JS 根据 host(.doc-page-content-pc) 位置动态设置：
 *         top    = hostRect.top（titlebar 底边）
 *         height = 100vh - hostRect.top（从 titlebar 下方贯穿到视口底部）
 *       → 感应条不覆盖到 titlebar 上，避免遮挡标题栏操作
 * 位置：fixed 定位；left 由 JS 动态设置（= 正文右缘与评论卡片左缘之间 8px 缝隙中心减去 6px 一半宽度），
 *       整条锁定在缝隙中心位置。
 *
 * 视觉层次：
 *   默认（未进入热区）：完全透明，对正文/卡片布局零影响
 *   进入 12px 感应带：
 *     - 背景渐变（极淡）：linear-gradient(to left, rgba(0,0,0,0.02), transparent)
 *       —— 右侧（靠近评论卡片）更深，向左（正文方向）渐淡
 *     - 跟随鼠标 Y 的箭头淡入（由 JS 动态更新 transform: translateY）
 *
 * 交互：
 *   点击整条任意位置 → 收起评论
 *   键盘 Enter/Space（通过 role="button"）→ 收起评论
 *
 * 层级：z-index: 55 —— 高于 layer(50) 和非激活卡片(1)，低于 expanded 卡片(100) */
.doc-comment-inline-close-handle-pc {
  position: fixed;
  /* top / left / height 由 JS 动态设置（top = hostRect.top, height = 100vh - hostRect.top） */
  width: 12px;
  /* 默认完全透明 */
  background: transparent;
  cursor: pointer;
  z-index: 55;
  /* 箭头 absolute 定位在条内 */
  overflow: visible;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1), top 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease-in-out;
  /* 键盘 focus 环（仅 focus-visible） */
  /* 进入感应热区 或 hover 到条自身 → 显示淡渐变背景（右深左淡）+ 箭头 */
  /* 退场：layer 用 clip-path 卷起，感应条立即消失 */
}
.doc-comment-inline-close-handle-pc:focus-visible {
  outline: none;
  background: linear-gradient(to left, var(--fill-quaternary), transparent);
  /* stylelint-disable-line design-system/no-hardcoded-colors -- 渐变方向需两色过渡 */
}
.doc-comment-inline-close-handle-pc[data-visible="true"],
.doc-comment-inline-close-handle-pc:hover {
  background: linear-gradient(to left, var(--fill-quaternary), transparent);
  /* stylelint-disable-line design-system/no-hardcoded-colors -- 渐变方向需两色过渡 */
}
.doc-comment-inline-close-handle-pc[data-visible="true"] .doc-comment-inline-close-handle-arrow-pc,
.doc-comment-inline-close-handle-pc:hover .doc-comment-inline-close-handle-arrow-pc {
  opacity: 1;
}
.doc-comment-inline-close-handle-pc[data-exiting="true"] {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}
/* 跟随鼠标 Y 的箭头：absolute + transform translateY 动态更新
 * 水平：left: 100% 定位到感应条右边缘，transform translateX(-50%) 把按钮中心拉到右边缘线上
 *   （即"按钮中心垂直对齐感应条右边缘"）
 * 垂直位置由 inline style 的 translate() 控制（performance: transform 是合成层） */
.doc-comment-inline-close-handle-arrow-pc {
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  color: var(--icon-secondary);
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--shadow-1);
  /* transform 由 JSX inline style 驱动（translate(-50%, mouseY) translateY(-50%)）
   * 不设置 transform transition（跟随鼠标需即时响应），只过渡 opacity */
  transition: opacity 0.2s ease-in-out;
}
/* hover 到感应条自身时，箭头边框加深，给出"可点击"反馈 */
.doc-comment-inline-close-handle-pc:hover .doc-comment-inline-close-handle-arrow-pc {
  border-color: var(--border-strong);
  color: var(--icon-primary);
  box-shadow: var(--shadow-2);
}
/* ========== 「原文已删除的评论」分组分隔符 ==========
 *
 * 视觉：卡片列表纵向排布，普通（有锚点）评论卡片在上，anchorLost 卡片沉底。
 * 中间用一条"左横线 + 文案 + 右横线"分隔符区隔两组。
 *
 * 位置：absolute 定位，top 由 useCommentCardLayout.groupDividerTop 计算得出，
 *       该 top 值取"首张 anchorLost 卡片 top - 分隔符占位高度/2"，让分隔符
 *       视觉中心贴齐 gap 中点。
 *
 * 宽度：与卡片宽度一致 280px，左对齐同 anchorXOffset。
 *
 * 交互：pointer-events: none —— 分隔符只做视觉分组，不响应点击/hover。
 */
.doc-comment-inline-group-divider-pc {
  width: 280px;
  height: 20px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  z-index: 2;
}
/* 左右灰色横线：flex: 1 撑满剩余空间，1px 高，颜色用 --divider token */
.doc-comment-inline-group-divider-line-pc {
  flex: 1 1 auto;
  height: 1px;
  background: var(--divider);
}
/* 中心文案：三级灰文本，禁止换行，两侧无 padding（gap 已提供间距） */
.doc-comment-inline-group-divider-label-pc {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  font-family: var(--font-family-body);
  line-height: 1;
  white-space: nowrap;
}
/* ========== 已解决动效：点击"已解决"后卡片播完成动画再消失 ========== */
.doc-comment-inline-card-resolving-pc {
  animation: inline-card-resolve 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes inline-card-resolve {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.01);
    opacity: 1;
  }
  100% {
    transform: scale(0.97);
    opacity: 0;
  }
}
/* ========== Tab 切换栏：sticky 吸顶，独立于 layer（不受 transform 影响） ========== */
.doc-comment-inline-tabs-pc {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  /* 设计稿还原（wb/Spec Sidebar/Comment）：header 底部 1px 分割线 + 白底 */
  border-bottom: var(--border-width-thin) solid var(--border-default);
  box-sizing: border-box;
  overflow: visible;
  z-index: 100;
  background: var(--bg-default);
}
/* 第一行：关闭 + 标题 + 批量操作 (已废弃，保留空规则避免误改外部) */
.doc-comment-inline-header-pc {
  display: none;
}
/* 顶部栏 tab-row（设计稿还原）：左栏两行——行 1『评论』标题、行 2 视图筛选；
 * 右栏 × 关闭垂直居中于左栏整体；上下 padding 7px → 总高 56px。 */
.doc-comment-inline-tab-row-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px var(--space-4);
}
/* 左侧标题组（设计稿还原：纵向两行）
 * position: relative 作为筛选下拉菜单的定位锚点，
 * 让菜单左边缘对齐『评论』标题左侧，而不是对齐筛选按钮。 */
.doc-comment-inline-title-group-pc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/* 行 2：视图筛选容器 */
.doc-comment-inline-title-filter-pc {
  display: flex;
  align-items: center;
}
.doc-comment-inline-title-pc {
  /* 设计稿 wb/font/Spec/body md bold（PingFang SC Semibold 14px/22px，黑 90%） */
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-family-body);
  line-height: 22px;
  white-space: nowrap;
}
/* 视图筛选下拉 pill —— 位于『评论』标题右侧
 * 注意：不设 position: relative，让下拉菜单相对更外层的
 * .doc-comment-inline-title-group-pc 定位，从而对齐『评论』标题左侧。 */
.doc-comment-inline-filter-wrapper-pc {
  display: inline-flex;
  align-items: center;
}
/* 视图筛选触发按钮（设计稿还原：wb/font/Spec/body sm——Regular 12px/20px 黑 50%，
 * 纯文字「未解决 N ˅」，无 pill 背景；与 html 侧 WebCommentFilterMenu 一致） */
.doc-comment-inline-filter-btn-pc {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: color 0.15s ease;
}
.doc-comment-inline-filter-btn-pc:hover {
  background: transparent;
  color: var(--text-secondary);
}
.doc-comment-inline-filter-btn-active-pc {
  color: var(--text-secondary);
}
.doc-comment-inline-filter-label-pc {
  white-space: nowrap;
}
/* 触发器当前视图计数（设计稿还原：「未解决 N ˅」） */
.doc-comment-inline-filter-trigger-count-pc {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.doc-comment-inline-filter-chevron-pc {
  color: var(--icon-tertiary);
  flex-shrink: 0;
}
/* 视图筛选下拉菜单 —— 相对 .doc-comment-inline-title-group-pc 定位，
 * 左边缘对齐『评论』标题左侧。 */
.doc-comment-inline-filter-menu-pc {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 4px;
  background: var(--bg-popover);
  border: 0.5px solid var(--popover-border-color);
  border-radius: var(--radius-lg-val);
  box-shadow: var(--shadow-3);
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 140px;
}
/* 右侧操作区：··· + × */
.doc-comment-inline-tab-actions-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
/* ··· 更多按钮 */
.doc-comment-inline-more-wrapper-pc {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.doc-comment-inline-more-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-lg-val);
  background: none;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.doc-comment-inline-more-btn-pc:hover {
  color: var(--icon-primary);
  background: var(--fill-secondary);
}
.doc-comment-inline-more-btn-active-pc {
  color: var(--icon-primary);
  background: var(--fill-secondary);
}
/* ··· 下拉菜单（含视图模式 + 批量操作两组） */
.doc-comment-inline-more-menu-pc {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  padding: var(--space-1);
  background: var(--bg-popover);
  border: 0.5px solid var(--popover-border-color);
  border-radius: var(--radius-lg-val);
  box-shadow: var(--shadow-3);
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
.doc-comment-inline-menu-item-pc {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: none;
  background: none;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  text-align: left;
  border-radius: var(--radius-md-val);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.doc-comment-inline-menu-item-pc:hover:not(:disabled) {
  background: var(--fill-secondary);
}
.doc-comment-inline-menu-item-pc:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}
/* 视图模式选中态 — 用浅灰底高亮，对齐 macOS 风格菜单 */
.doc-comment-inline-menu-item-active-pc {
  background: var(--fill-primary);
  font-weight: 600;
}
.doc-comment-inline-menu-item-active-pc:hover:not(:disabled) {
  background: var(--fill-primary);
}
/* 视图筛选下拉菜单项：label 占据左侧、count 靠右。
 * count 使用 tertiary 文本 + tabular-nums，视觉弱于主文案，仅作为辅助计数信息。 */
.doc-comment-inline-menu-item-label-pc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-comment-inline-menu-item-count-pc {
  flex-shrink: 0;
  margin-left: 12px;
  color: var(--text-quaternary);
  font-size: 11px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 分组标题（修改 / 评论） */
.doc-comment-inline-menu-group-label-pc {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  -webkit-user-select: none;
          user-select: none;
}
/* 关闭按钮（×）— 顶部栏右侧 */
.doc-comment-inline-close-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 设计稿还原：32×32 / radius 8（与 html 侧 close 按钮规格一致） */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-xl-val);
  background: none;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.doc-comment-inline-close-btn-pc:hover {
  color: var(--icon-primary);
  background: var(--fill-secondary);
}
/* 已解决卡片降灰样式 */
.doc-comment-inline-card-resolved-pc {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.doc-comment-inline-card-resolved-pc:hover {
  opacity: 0.8;
}
.doc-comment-inline-card-resolved-pc > .comment-thread-pc {
  box-shadow: none;
  border: 1px solid var(--border-default);
}
.doc-comment-inline-resolved-list-pc {
  position: sticky;
  top: 44px;
  margin-left: calc(50% - 152px);
  width: 304px;
  padding: var(--space-6) var(--space-3);
  box-sizing: border-box;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.doc-comment-inline-resolved-list-pc::-webkit-scrollbar {
  display: none;
}
.doc-comment-inline-resolved-list-pc .doc-comment-inline-card-pc {
  position: relative;
  width: 100%;
  opacity: 1;
  pointer-events: auto;
}
/* ============================================================
 * 窄屏模式（≤1024px 内容区）
 *
 * titlebar 按钮打开面板时 effectiveDocNarrow=false → 此段不生效 → SDK 默认侧栏。
 * 编辑器 padding 加 transition 平滑 data-doc-narrow 切换时的 reflow，消除闪动。
 *
 * 由 JS 驱动：DocPagePC 根据 useIsNarrowViewport / commentOpenNonce 设置。
 * ============================================================ */
.doc-page-content-pc[data-doc-narrow] .sc-comment-aside {
  border-left: none !important;
  background: transparent !important;
  pointer-events: none !important;
  /* block 聚焦模式：aside absolute 覆盖内容区承载悬浮卡片 */
}
.doc-page-content-pc[data-doc-narrow] .sc-comment-aside:has([data-block-focus]) {
  transition: none !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  /* FIXME: 临时方案，这里后续通过评论插件的panelMode来做悬浮 */
  /* 提升整个 aside stacking context 高于 SDK 协作者光标容器(z-index:100) */
  z-index: 110 !important;
}
.doc-page-content-pc[data-doc-narrow] .sc-comment-aside:has([data-block-focus]) .doc-comment-inline-card-pc[data-expanded="true"] > .comment-thread-pc {
  transform: none !important;
}
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-layer-pc {
  z-index: 1;
  pointer-events: none;
}
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-card-pc[data-expanded="true"] {
  z-index: 1;
}
.doc-page-content-pc[data-doc-narrow] .doc-comment-inline-tabs-pc {
  display: none;
}
/* ========== 空态 ========== */
/* sticky 于滚动容器顶部：文案在文档长内容滚动时不跟随消失，
 * 与 .doc-comment-inline-tabs-pc 的 sticky 策略一致。
 * top 值让文案位于 tabs 下方仍有充足呼吸空间。 */
.doc-comment-inline-empty-pc {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200px var(--space-6) 64px;
  pointer-events: auto;
}
.doc-comment-inline-empty-text-pc {
  font-size: var(--fs-caption);
  color: var(--text-quaternary);
  font-family: var(--font-family-body);
}
/* ========== 加载态 ========== */
.doc-comment-inline-loading-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 200px var(--space-6) 64px;
  pointer-events: auto;
}
.doc-comment-inline-loading-spinner-pc {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand);
  border-radius: var(--radius-full);
  animation: doc-comment-inline-loading-spin 0.8s linear infinite;
}
.doc-comment-inline-loading-text-pc {
  font-size: var(--fs-caption);
  color: var(--text-quaternary);
  font-family: var(--font-family-body);
}
@keyframes doc-comment-inline-loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========== 评论面板整体 ========== */
.doc-comment-panel-pc {
  position: absolute;
  top: var(--doc-titlebar-height, 64px);
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--bg-default);
  border-left: 1px solid var(--divider);
  box-shadow: var(--shadow-3);
  z-index: 900;
  display: flex;
  flex-direction: column;
  animation: comment-panel-slide-in-pc 0.2s ease-out;
}
@keyframes comment-panel-slide-in-pc {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.comment-panel-header-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) 0 var(--space-6);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.comment-panel-collapse-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-panel-collapse-btn-pc:hover {
  background: var(--fill-tertiary);
  color: var(--icon-primary);
}
.comment-panel-tabs-pc {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.comment-panel-tab-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}
.comment-panel-tab-pc:hover {
  color: var(--text-primary);
}
.comment-panel-tab-pc::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-sm-val);
  background: transparent;
  transition: background-color 0.15s ease;
}
.comment-panel-tab-active-pc {
  color: var(--text-primary);
  font-weight: 600;
}
.comment-panel-tab-active-pc::after {
  background: var(--brand);
}
.comment-panel-tab-badge-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-xl-val);
  background: var(--fill-primary);
  color: var(--text-tertiary);
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
  line-height: 1;
}
.comment-panel-filters-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-6);
  flex-shrink: 0;
}
.comment-panel-filter-tag-pc {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-xl-val);
  background: var(--fill-tertiary);
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-panel-filter-tag-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-secondary);
}
.comment-panel-filter-tag-active-pc {
  background: var(--brand);
  color: var(--text-allwhite);
}
.comment-panel-filter-tag-active-pc:hover {
  background: var(--brand-hover);
  color: var(--text-allwhite);
}
.comment-panel-batch-bar-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin: 0 var(--space-4);
  border-radius: var(--radius-lg-val);
  background: var(--bg-weak);
  flex-shrink: 0;
}
.comment-panel-batch-text-pc {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}
.comment-panel-batch-actions-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.comment-panel-batch-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  min-width: 66px;
  border: none;
  border-radius: var(--radius-md-val);
  background: var(--button-primary-bg);
  color: var(--text-allwhite);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.comment-panel-batch-btn-pc:hover {
  background: var(--button-primary-bg-hover);
  color: var(--text-allwhite);
}
.comment-panel-batch-btn-secondary-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  min-width: 66px;
  border: none;
  border-radius: var(--radius-md-val);
  background: var(--button-grey-bg);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.comment-panel-batch-btn-secondary-pc:hover {
  background: var(--button-grey-bg-hover);
  color: var(--text-primary);
}
.comment-panel-list-pc {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-6);
}
.comment-panel-empty-pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-5);
  color: var(--text-quaternary);
  font-size: var(--fs-caption);
  text-align: center;
}
.comment-thread-pc {
  position: relative;
  transition: background 0.15s ease, box-shadow 0.3s ease;
}
.comment-thread-unread-dot-pc {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--brand-light);
}
.comment-thread-titlebar-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 26px;
  margin: 0 -16px var(--space-3) -16px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-bottom: none;
  border-radius: var(--radius-xl-val) var(--radius-xl-val) 0 0;
}
/* 评论卡片（opinion）：标题左侧黄色竖线 */
.comment-thread-expanded-pc .comment-thread-titlebar-pc {
  /* stylelint-disable-next-line design-system/no-hardcoded-colors */
  border-left: 2px solid #f3ec91;
  margin-left: -8px;
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius */
  border-radius: 2px 0 0 2px;
  padding-left: var(--space-2);
  /* 原 12px - 3px 竖线宽度取整 */
}
.comment-thread-titlebar-label-pc {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-thread-titlebar-actions-pc {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  flex-shrink: 0;
}
.comment-thread-titlebar-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-md-val);
  background: none;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.comment-thread-titlebar-btn-pc:hover {
  color: var(--icon-primary);
  background: var(--fill-tertiary);
}
.comment-thread-titlebar-btn-pc:disabled {
  cursor: not-allowed;
  color: var(--icon-quaternary);
  background: none;
}
.comment-thread-titlebar-btn-pc:disabled:hover {
  color: var(--icon-quaternary);
  background: none;
}
.comment-thread-titlebar-delete-btn-pc:hover {
  color: var(--error-emphasis);
  background: var(--error-bg);
}
.comment-thread-expanded-pc {
  position: relative;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl-val);
  background: var(--bg-default);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-default);
  cursor: default;
  /* 默认 overflow: visible，让 titlebar 更多菜单的下拉浮层不会被卡片底边裁掉
   * archiving 折叠动画期间需要裁剪溢出，由下方 .comment-thread-archiving-pc
   * 单独 overflow: hidden 接管（高度从 2000 → 0 过渡时短暂裁剪是必需的） */
  max-height: 2000px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, max-height 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out, border-width 0.3s ease-in-out;
}
.comment-thread-expanded-pc:hover {
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow, design-system/no-hardcoded-colors -- 产品定制的双层阴影色值，现有 shadow token 无等价值 */
  box-shadow: rgba(0, 0, 0, 0.07) 4px 6px 14px, rgba(0, 0, 0, 0.04) 1px 2px 4px;
  background: var(--bg-default);
}
.comment-thread-archiving-pc {
  /* 折叠收起时裁剪溢出，配合 max-height 0 的高度过渡 */
  overflow: hidden;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}
.comment-thread-hover-pill-pc {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.comment-thread-expanded-pc:hover .comment-thread-hover-pill-pc {
  opacity: 1;
  pointer-events: auto;
}
.comment-thread-hover-pill-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--icon-quaternary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-thread-hover-pill-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--success-emphasis);
}
.comment-thread-hover-pill-danger-pc:hover {
  background: var(--error-bg);
  color: var(--error-emphasis);
}
/* 评论 thread 标题栏「更多操作」下拉菜单
 *
 * 底座 @mindx/ui-components 的 DropdownMenuContent 默认 className 含有
 *   w-(--radix-dropdown-menu-trigger-width)（强制等于触发器 28px 宽）
 *   overflow-x-hidden（横向溢出裁切）
 *   p-1 / 紧凑 px-1.5 py-1 等
 *   bg-popover（理论 = #FFFFFF，但 Tailwind 工具类在某些 z-index/层叠上下文下视觉变弱）
 * 评论面板自身 z-index: 900，dropdown 默认 z-50 在 Portal 内不一定够，
 * 必须显式提到 1000+ 并强制白底，避免与面板半透明叠加视觉错乱。
 * 用 data-slot 属性锚定，特异性 (0,2,0) 高于 Tailwind 工具类。 */
.comment-thread-more-menu-pc[data-slot="dropdown-menu-content"] {
  width: auto !important;
  min-width: 168px !important;
  padding: var(--space-2) !important;
  overflow-x: visible !important;
  background: var(--bg-popover) !important;
  z-index: 1100 !important;
  box-shadow: var(--shadow-3) !important;
  border: 1px solid var(--border-default);
}
.comment-thread-more-menu-item-pc[data-slot="dropdown-menu-item"] {
  gap: var(--space-2) !important;
  padding: var(--space-2) var(--space-2) !important;
  font-size: var(--fs-caption) !important;
  border-radius: var(--radius-md-val);
}
.comment-thread-messages-pc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* 侧边栏展开态卡片（opinion / draft / modify）：卡片本体限高、纵向 flex 布局。
 * 参考悬浮卡片（doc-comment-inline-cards.less）：
 *   - 卡片本体 max-height + display:flex column
 *   - 标题栏 / 回复区 flex-shrink:0，保持固定不参与滚动
 *   - 消息区 flex:1 1 auto + min-height:0 + overflow-y:auto，独立滚动
 *
 * 悬浮卡片场景由 doc-comment-inline-cards.less 中特异性更高的规则覆盖
 * （data-doc-narrow + inline-card 前缀 + :not 组合），此处不影响它。 */
.comment-thread-expanded-pc {
  max-height: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.comment-thread-expanded-pc .comment-thread-titlebar-pc,
.comment-thread-expanded-pc .comment-thread-reply-pc {
  flex-shrink: 0;
}
.comment-thread-expanded-pc .comment-thread-messages-pc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 让滚动条贴到卡片右内边缘，避免占用文字宽度 */
  margin-right: calc(var(--space-4) * -1);
  padding-right: var(--space-4);
}
.comment-message-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}
/* 头部行：头像 + 用户名/时间（水平）+ hover 操作按钮（绝对定位靠右） */
.comment-message-head-row-pc {
  display: flex;
  align-items: center;
  /* 与审阅卡片 .comment-thread-modify-header-pc 对齐 */
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  position: relative;
}
.comment-message-avatar-col-pc {
  /* 头像靠左对齐，去掉固定 28px 容器与居中，参照审阅卡片头部紧贴左侧 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  /* 高于竖线，遮住竖线在头像处的穿透 */
  z-index: 1;
}
/* 用户名 + 时间：水平布局，时间在右侧 */
.comment-message-meta-pc {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.comment-thread-messages-pc[data-has-replies="true"] > .comment-message-modify-card-pc:not(:first-child) {
  padding-left: 36px;
}
/* 多条评论：头像间竖线已移除 */
.comment-message-modify-card-pc .comment-message-content-col-pc {
  gap: var(--space-2);
}
.comment-message-actions-pc {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.comment-message-pc:hover .comment-message-actions-pc,
.comment-message-modify-card-pc:hover .comment-message-actions-pc {
  opacity: 1;
  pointer-events: auto;
}
.comment-message-action-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--icon-quaternary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-message-action-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
.comment-message-action-danger-pc:hover {
  background: var(--error-bg);
  color: var(--error-emphasis);
}
.comment-message-edit-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.comment-message-edit-input-pc {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-caption);
  line-height: 1.6;
  outline: none;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-message-edit-input-pc:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-2);
}
/* 编辑态 MentionInput 外层容器（与 textarea 视觉规格对齐） */
.comment-message-edit-mention-pc {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  outline: none;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-message-edit-mention-pc:focus,
.comment-message-edit-mention-pc:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-2);
}
.comment-message-edit-actions-pc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}
.comment-message-edit-cancel-pc {
  padding: var(--space-1) var(--space-3);
  border: none;
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-message-edit-cancel-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}
.comment-message-edit-save-pc {
  padding: var(--space-1) var(--space-3);
  border: none;
  border-radius: var(--radius-lg-val);
  background: var(--brand);
  color: var(--text-allwhite);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-message-edit-save-pc:hover:not(:disabled) {
  background: var(--brand-hover);
}
.comment-message-edit-save-pc:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.comment-thread-avatar-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--text-allwhite);
  flex-shrink: 0;
  overflow: hidden;
  /* 头像图片：填满容器，圆形裁剪由父级 border-radius 完成 */
}
.comment-thread-avatar-pc > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comment-thread-avatar-md-pc {
  width: 24px;
  height: 24px;
  font-size: var(--fs-small);
}
.comment-thread-avatar-sm-pc {
  width: 20px;
  height: 20px;
  font-size: calc(10px * var(--font-scale));
}
.comment-thread-avatar-agent-pc {
  background: var(--brand-light);
}
.comment-thread-avatar-default-pc {
  background: var(--fill-primary);
  color: var(--icon-tertiary);
}
.comment-message-author-pc {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.comment-message-agent-badge-pc {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
  height: 16px;
  border-radius: var(--radius-sm-val);
  background: var(--brand-subtle);
  font-size: calc(10px * var(--font-scale));
  font-weight: 600;
  color: var(--brand-light);
  line-height: 1;
}
.comment-message-time-pc {
  font-size: calc(11px * var(--font-scale));
  color: var(--text-quaternary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  line-height: 1.4;
}
.comment-message-text-pc {
  max-height: 300px;
  overflow-y: auto;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* 单条评论（无回复）：内容不缩进，左侧与头像对齐
 * 多条评论：内容左缩进 40px（28 头像 + 12 间距），与用户名/时间对齐
 *
 * 注意：气泡模式（.comment-message-bubble-pc）走独立布局，不受此规则影响 */
.comment-thread-messages-pc[data-has-replies="true"] .comment-message-pc:not(.comment-message-bubble-pc) .comment-message-text-pc,
.comment-thread-messages-pc[data-has-replies="true"] .comment-message-pc:not(.comment-message-bubble-pc) .comment-message-edit-pc {
  padding-left: var(--space-10);
}
/* ========== 多条评论展开态：气泡布局 ========== */
/* 气泡消息容器：根据自己/他人决定整体对齐方向 */
.comment-message-bubble-pc {
  gap: var(--space-1);
}
.comment-message-bubble-other-pc {
  align-items: flex-start;
}
.comment-message-bubble-own-pc {
  align-items: flex-end;
}
/* 气泡头部：头像 + 名字 / 自己时为 ...菜单 + 时间 + 名字 + 头像 */
.comment-message-bubble-head-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-width: 0;
  /* 气泡模式下重置 author 的 flex:1，避免撑满后破坏对齐 */
  /* 气泡模式下重置 time 的 margin-left:auto + 默认隐藏（hover head 时显示） */
  /* 更多按钮：默认隐藏，hover head 时显示 */
}
.comment-message-bubble-head-pc .comment-message-author-pc {
  flex: 0 0 auto;
  max-width: 140px;
}
.comment-message-bubble-head-pc .comment-message-time-pc {
  margin-left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.comment-message-bubble-head-pc .comment-message-bubble-more-btn-pc {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* hover 到 bubble-head 时显示更多按钮和时间 */
.comment-message-bubble-pc:hover .comment-message-bubble-head-pc .comment-message-bubble-more-btn-pc,
.comment-message-bubble-pc:hover .comment-message-bubble-head-pc .comment-message-time-pc {
  opacity: 1;
  pointer-events: auto;
}
/* 气泡内容文本：圆角背景块，自己/他人不同色 */
.comment-message-bubble-text-pc {
  display: inline-block;
  max-width: 85%;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg-val);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
  white-space: pre-wrap;
}
.comment-message-bubble-other-pc .comment-message-bubble-text-pc {
  background: var(--bg-medium);
  align-self: flex-start;
  /* 左侧与头像内容文字基本对齐：头像 20px + gap 8px = 28px 缩进 */
  margin-left: 28px;
}
.comment-message-bubble-own-pc .comment-message-bubble-text-pc {
  background: var(--success-bg);
  align-self: flex-end;
  /* 右侧与头像基本对齐：头像 20px + gap 8px = 28px 缩进 */
  margin-right: 28px;
}
/* 自己消息的 ...菜单按钮 */
.comment-message-bubble-more-btn-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-md-val);
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.comment-message-bubble-more-btn-pc:hover {
  color: var(--icon-primary);
  background: var(--fill-tertiary);
}
.comment-message-body-pc {
  min-width: 0;
}
.comment-message-modify-card-pc {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  margin: 0 -16px;
  border-radius: 0;
  background: linear-gradient(var(--bg-default), var(--bg-default)), var(--bg-default);
  border-left: 3px solid var(--brand-light);
  position: relative;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-2);
}
.comment-message-modify-card-pc:first-child {
  margin-top: -16px;
  padding-top: var(--space-4);
  border-radius: var(--radius-xl-val) var(--radius-xl-val) 0 0;
}
.comment-message-modify-card-clickable-pc {
  cursor: pointer;
}
.comment-message-modify-card-clickable-pc:hover {
  background: linear-gradient(var(--brand-tint), var(--brand-tint)), var(--bg-default);
  box-shadow: var(--shadow-2);
}
.comment-message-modify-content-pc {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-primary);
  font-weight: 450;
}
.comment-message-modify-actions-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-1) -16px 0;
  padding: var(--space-2) var(--space-4) 0;
}
.comment-message-modify-link-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}
.comment-message-modify-link-pc:hover {
  color: var(--text-primary);
}
.comment-message-modify-stale-pc {
  font-size: var(--fs-small);
  color: var(--text-quaternary);
}
.comment-message-target-deleted-pc {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-1);
  color: var(--text-quaternary);
  font-size: var(--fs-small);
  font-weight: 400;
}
.comment-message-modify-btns-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.comment-message-modify-diff-toggle-pc {
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-0-5);
  transition: background-color 150ms ease;
  color: var(--text-primary);
}
.comment-message-modify-diff-toggle-pc:hover {
  background-color: var(--fill-secondary);
}
.comment-message-modify-diff-toggle-pc:active {
  background-color: var(--fill-primary);
}
.comment-message-modify-diff-icon-pc {
  width: 18px;
  height: 18px;
  display: block;
}
/**
 * 当 actions 同行存在 toggle 按钮时，accept/reject 按钮组自然靠右。
 */
.comment-message-modify-actions-pc:has(.comment-message-modify-diff-toggle-pc) .comment-message-modify-btns-pc {
  margin-left: auto;
}
/* 接受按钮：纯黑底 + 白字（图2风格） */
.comment-message-modify-accept-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  border: none;
  border-radius: var(--radius-lg-val);
  background: var(--button-primary-bg);
  color: var(--text-allwhite);
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-message-modify-accept-pc:hover {
  background: var(--button-primary-bg-hover);
}
/* 拒绝按钮：浅灰底 + 黑色字（图2风格） */
.comment-message-modify-reject-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  border: none;
  border-radius: var(--radius-lg-val);
  background: var(--button-grey-bg);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-message-modify-reject-pc:hover {
  background: var(--button-grey-bg-hover);
}
.comment-message-waiting-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg-val);
  background: var(--bg-weak);
  color: var(--text-quaternary);
  font-size: var(--fs-small);
}
.comment-message-result-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 500;
}
.comment-message-result-accepted-pc {
  color: var(--success-default);
}
.comment-message-result-rejected-pc {
  color: var(--error-default);
}
.comment-thread-modify-standalone-pc {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: linear-gradient(var(--bg-default), var(--bg-default)), var(--bg-default);
  border-radius: var(--radius-lg-val);
  cursor: default;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  /* modify-standalone 的 padding-top=12px（非默认的16px），
     需同步修正 titlebar 的负 margin 防止标题栏溢出上边框 */
}
.comment-thread-modify-standalone-pc:hover {
  background: linear-gradient(var(--bg-default), var(--bg-default)), var(--bg-default);
}
.comment-thread-modify-standalone-pc .comment-thread-titlebar-pc {
  margin: 0 -16px var(--space-2) -8px;
  /* 审阅卡片：标题左侧绿色竖线 */
  /* stylelint-disable-next-line design-system/no-hardcoded-colors */
  border-left: 2px solid #b4e7a2ff;
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius */
  border-radius: 2px 0 0 2px;
  padding-left: var(--space-2);
  /* 原 12px - 3px 竖线宽度取整 */
}
.comment-thread-modify-clickable-pc {
  cursor: pointer;
}
.comment-thread-modify-header-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.comment-thread-modify-meta-pc {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.comment-thread-modify-summary-pc {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--text-secondary);
}
.comment-thread-draft-pc {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.comment-thread-draft-header-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.comment-thread-draft-avatar-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comment-thread-draft-author-pc {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-thread-draft-close-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.comment-thread-draft-close-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}
/**
 * 划词草稿引用预览。
 *
 * 视觉对齐编辑器内划词锚点的同色系：左侧 2px 高亮竖线 + 浅黄背景，
 * 让用户能直观看到"评论将落在哪段文字"，与编辑器选区高亮形成呼应。
 * 文本最多两行，溢出截断 + title 兜底完整文本。
 */
.comment-thread-draft-quote-pc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--sc-inline-discussion-underline);
  background: var(--sc-inline-discussion-bg);
  border-radius: 0 var(--radius-sm-val) var(--radius-sm-val) 0;
  word-break: break-word;
}
.comment-thread-draft-input-row-pc {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  /* 为内部 absolute 定位的 send 按钮留出空间 */
}
.comment-thread-draft-input-row-pc .sc-mention-input {
  background: var(--bg-input-active);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
}
.comment-thread-draft-input-row-pc .sc-mention-input .sc-root-editable {
  background-color: var(--bg-input-active);
}
.comment-thread-draft-input-row-pc .comment-thread-reply-mention-pc {
  padding-right: 28px;
}
.comment-thread-draft-input-pc {
  background: var(--bg-default);
  box-shadow: var(--shadow-2);
  height: 36px;
}
.comment-thread-reply-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}
.comment-thread-reply-pc .sc-mention-input {
  background: var(--bg-input-active);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
}
.comment-thread-reply-pc .sc-mention-input .sc-root-editable {
  background-color: var(--bg-input-active);
}
/* 输入框 + 发送按钮（按钮嵌入输入框内右下角，胶囊样式） */
.comment-thread-reply-input-row-pc {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  /* 为内部 absolute 定位的 send 按钮留出空间 */
}
.comment-thread-reply-input-row-pc .comment-thread-reply-mention-pc {
  padding-right: 28px;
}
.comment-thread-reply-input-pc {
  flex: 1;
  height: 40px;
  padding: 0 44px 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-thread-reply-input-pc:focus {
  border-color: var(--border-strong);
}
.comment-thread-reply-input-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.comment-thread-reply-input-pc::placeholder {
  color: var(--text-quaternary);
}
.comment-thread-reply-send-pc {
  position: absolute;
  right: var(--space-2);
  /* stylelint-disable-next-line font-token, design-system/spacing-4px-multiple */
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-full);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors */
  background: #ccc;
  color: var(--text-allwhite);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.comment-thread-reply-send-pc.active {
  background: var(--text-primary);
}
/* 「按评论修订」按钮行（相对定位，供弹框悬浮锚定） */
.comment-thread-reply-actions-pc {
  display: flex;
  align-items: center;
  position: relative;
}
/* 「按评论修订」按钮 — 占满整行宽度 */
.comment-thread-revise-btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2xl-val);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors */
  background: var(--button-grey-bg);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-thread-revise-btn-pc:hover {
  background: var(--button-grey-bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
/* 「即将打开 WorkBuddy」悬浮确认弹框
 * 默认锚定在「按评论修订」按钮下方，不遮挡上方评论；
 * 仅当视口下方剩余空间不足时，运行时会通过 data-placement="top" 翻转到按钮上方。
 * 对应 Issue #1037。
 */
.comment-thread-revise-confirm-pc {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg-val);
  background: var(--bg-default);
  box-shadow: var(--shadow-3);
  z-index: 10;
}
.comment-thread-revise-confirm-pc[data-placement="top"] {
  top: auto;
  bottom: calc(100% + 4px);
}
/* 弹框右上角关闭按钮 — 与头像标题行垂直居中 */
.comment-thread-revise-confirm-close-pc {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--icon-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.comment-thread-revise-confirm-close-pc:hover {
  background: var(--fill-secondary);
  color: var(--icon-primary);
}
/* 弹框主体区域（头像 + 标题）— 靠左对齐 */
.comment-thread-revise-confirm-body-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
}
/* WorkBuddy 机器人头像 — 黑白风格 */
.comment-thread-revise-confirm-icon-pc {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
/* 弹框标题（灰色，图2风格） */
.comment-thread-revise-confirm-title-pc {
  font-size: var(--fs-caption);
  font-weight: 450;
  color: var(--text-tertiary);
}
/* 弹框提示文案：内部输入框（instruction）文案过长时允许换行到下一行，
   避免固定 nowrap + overflow:hidden 把长文案静默裁切掉 */
.comment-thread-revise-confirm-prompt-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.6;
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl-val);
  padding: var(--space-2);
  width: 100%;
  flex-wrap: wrap;
}
/* 提示文案中的「评论」徽章 — 绿色背景，字体颜色与周围一致 */
.comment-thread-revise-confirm-badge-pc {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm-val);
  background: var(--success-bg);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
}
/* 绿色右箭头（图2尾缀） */
.comment-thread-revise-confirm-chevron-pc {
  flex-shrink: 0;
  color: var(--success-emphasis);
  margin-left: auto;
  cursor: pointer;
}
/* 可编辑指令输入框（紧贴评论 badge 后） */
.comment-thread-revise-confirm-instruction-pc {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 0;
}
.comment-thread-revise-confirm-instruction-pc::-webkit-input-placeholder {
  color: var(--text-quaternary);
}
.comment-thread-revise-confirm-instruction-pc::placeholder {
  color: var(--text-quaternary);
}
.comment-thread-conflict-pc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg-val);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.comment-thread-conflict-actions-pc {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.comment-thread-conflict-btn-pc {
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-lg-val);
  background: transparent;
  color: var(--warning-text);
  font-size: calc(11px * var(--font-scale));
  cursor: pointer;
  transition: all 0.15s ease;
}
.comment-thread-conflict-btn-pc:hover {
  background: var(--warning-default);
  color: var(--text-allwhite);
}
.comment-thread-collapsed-hint-pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-1) 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}
.comment-thread-collapsed-hint-pc:hover {
  color: var(--text-primary);
}
.comment-thread-collapsed-hint-pc:hover .comment-thread-collapsed-hint-line-pc {
  background: var(--border-strong);
}
.comment-thread-collapsed-hint-line-pc {
  flex: 1;
  height: 1px;
  background: var(--divider);
  transition: background 0.15s ease;
}
.comment-thread-collapsed-hint-text-pc {
  flex-shrink: 0;
  white-space: nowrap;
}
.comment-thread-archive-ghost-pc {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  padding: var(--space-4);
  border-radius: var(--radius-xl-val);
  background: var(--bg-default);
  box-shadow: var(--shadow-4);
  border: 1px solid var(--border-default);
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
  transform-origin: center center;
  overflow: hidden;
}
.comment-panel-tab-pulse-pc {
  animation: comment-tab-pulse-pc 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes comment-tab-pulse-pc {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
/* 旧样式兼容 */
.comment-thread-content-pc {
  display: none;
}
.comment-thread-footer-pc {
  display: none;
}
.comment-thread-type-tag-pc {
  display: none;
}
.comment-thread-type-modify-pc {
  display: none;
}
.comment-thread-type-opinion-pc {
  display: none;
}
.comment-thread-location-pc {
  display: none;
}
.comment-thread-status-dot-pc {
  display: none;
}
.comment-thread-actions-pc {
  display: none;
}
.comment-thread-accept-btn-pc {
  display: none;
}
.comment-thread-reject-btn-pc {
  display: none;
}
.comment-thread-resolve-btn-pc {
  display: none;
}
/* ========== MentionInput 样式 ========== */
/* 外层容器：布局 / 尺寸 / 背景 / 边框 */
.comment-thread-reply-mention-pc {
  flex: 1;
  min-height: 36px;
  border: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl-val);
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.comment-thread-reply-mention-pc:focus,
.comment-thread-reply-mention-pc:focus-within {
  box-shadow: none;
  border: 1px solid var(--border-default);
}
/* 内层 contenteditable：字体 / 颜色 / 行高 / placeholder */
.comment-mention-content-pc {
  min-height: 36px;
  color: var(--text-primary);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.comment-mention-content-pc:empty::before {
  content: attr(data-placeholder);
  color: var(--text-quaternary);
  pointer-events: none;
}
/* mention tag（@人 后的高亮标签） */
.comment-mention-tag-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: 0 var(--space-1);
  border-radius: var(--radius-md-val);
  font-size: var(--fs-small);
  line-height: 1.6;
  cursor: default;
  vertical-align: bottom;
}

.floating-comment-sidebar {
  display: none;
}
.floating-comment-sidebar.open {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 320px;
  height: 100%;
  background: var(--bg-default);
  overflow: hidden;
  pointer-events: auto;
  border-radius: 0;
  box-shadow: none;
  border-top: none;
  border-bottom: none;
  border-right: none;
  border-left: var(--border-width-thin) solid var(--divider);
}
.floating-comment-sidebar.narrow {
  width: 320px;
}
.floating-comment-sidebar-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  background: var(--bg-default);
  border-bottom: var(--border-width-thin) solid var(--border-default);
}
.floating-comment-sidebar-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.floating-comment-sidebar-header-filter {
  display: flex;
  align-items: center;
}
.floating-comment-sidebar-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.floating-comment-sidebar-title {
  font-size: var(--fs-body);
  line-height: 22px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-family-body);
  white-space: nowrap;
}
.floating-comment-sidebar-hide,
.floating-comment-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-xl-val);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 150ms ease,
    color 150ms ease;
  padding: 0;
  flex-shrink: 0;
}
.floating-comment-sidebar-hide:hover,
.floating-comment-sidebar-close:hover {
  color: var(--text-primary);
  background: var(--fill-primary);
}
.floating-comment-sidebar-hide {
  color: var(--icon-primary);
}
.floating-comment-sidebar-hide:hover {
  color: var(--icon-primary);
}
.floating-comment-sidebar-hide.active {
  color: var(--icon-primary);
  background: transparent;
}
.floating-comment-sidebar-hide.active:hover {
  background: var(--fill-primary);
}
.floating-comment-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  padding-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.floating-comment-sidebar-list .sc-mention-input {
  background: var(--bg-input-active);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
}
.floating-comment-sidebar-list .sc-mention-input .sc-root-editable {
  background-color: var(--bg-input-active);
}
.floating-comment-sidebar-list::-webkit-scrollbar {
  width: 6px;
}
.floating-comment-sidebar-list::-webkit-scrollbar-track {
  background: transparent;
}
.floating-comment-sidebar-list::-webkit-scrollbar-thumb {
  background: var(--fill-primary);
  border-radius: var(--radius-sm-val);
}
.floating-comment-sidebar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-quaternary);
  font-size: var(--fs-caption);
}

.web-comment-filter-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.web-comment-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  line-height: 20px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: color 0.15s ease;
}
.web-comment-filter-btn:hover {
  background: transparent;
  color: var(--text-secondary);
}
.web-comment-filter-btn-active {
  color: var(--text-secondary);
}
.web-comment-filter-label {
  white-space: nowrap;
}
.web-comment-filter-trigger-count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.web-comment-filter-chevron {
  color: var(--icon-tertiary);
  flex-shrink: 0;
}
.web-comment-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-popover);
  border: 0.5px solid var(--popover-border-color);
  border-radius: var(--radius-lg-val);
  box-shadow: var(--shadow-3);
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 140px;
}
.web-comment-filter-item {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: none;
  background: none;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  text-align: left;
  border-radius: var(--radius-md-val);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.web-comment-filter-item:hover:not(:disabled) {
  background: var(--fill-secondary);
}
.web-comment-filter-item:disabled {
  color: var(--text-quaternary);
  cursor: not-allowed;
}
/* 选中态 — 用浅灰底高亮，对齐 macOS 风格菜单 */
.web-comment-filter-item.active {
  background: var(--fill-primary);
  font-weight: 600;
}
.web-comment-filter-item.active:hover:not(:disabled) {
  background: var(--fill-primary);
}
.web-comment-filter-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.web-comment-filter-item-count {
  flex-shrink: 0;
  margin-left: var(--space-3);
  color: var(--text-quaternary);
  font-size: calc(11px * var(--font-scale));
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===================== 移动端评论链路 ===================== */
/* 颜色取自 ardot「移动端评论链路」页：
 *  - 本人气泡：#00C29A @12%（薄荷绿）
 *  - 他人气泡：rgb(51,77,102) @6%（slate）
 *  - 时间文字：#000 @56%
 *  - 引用原文底：rgb(51,77,102) @6%
 */
:root {
  /* 移动端评论面板基准视口高度，由 JS 在挂载时写入当前 window.innerHeight 的 1%，
     避免安卓键盘弹起时 vh/svh 被重算导致面板高度闪动。未写入前回退到 1vh。 */
  --mobile-comment-vh: 1vh;
}
/* 评论面板打开期间，把下层正文编辑器内容置为不可选中。
   这是 JS 阻止 touchstart / selectstart 之外的第二道防线：部分 Android WebView
   里 contenteditable 编辑器仍会穿透长按选中文本，从编辑器内容层禁选更可靠。
   只命中 .sc-block-children（正文 block 容器），不命中 .sc-editor-content 全域，
   避免评论面板（挂载在 EditorRoot 内）及其子元素被误伤，从而保证消息列表滚动、
   回复输入等正常。 */
body.mobile-comment-sheet-open .smart-doc-editor-mobile .sc-editor-content .sc-block-children,
body.mobile-comment-sheet-open .smart-doc-editor-mobile .sc-editor-content .sc-block-children * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
/* ---------- 通用浮层遮罩 ---------- */
.mobile-comment-sheet-overlay,
.mobile-comment-compose-overlay {
  position: fixed;
  /* top / height 由 JS 用 visualViewport 实测值 inline 覆盖，精确覆盖「当前可视区」
     （键盘弹起后缩到键盘上沿）；left / right 固定铺满宽度。不用 inset:0 简写，
     避免与 inline 的 top/height/bottom 混淆。 */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 禁止遮罩层及面板内非消息元素被长按选中；
     消息气泡的自定义长按菜单由 PointerEvent 实现，不依赖默认文本选择。 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* 由 JS 识别点触/下滑来关闭，阻止浏览器默认滚动行为 */
  touch-action: none;
}
.mobile-comment-sheet-overlay {
  background-color: var(--overlay-light);
  transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  opacity: 1;
}
.mobile-comment-sheet-overlay.mobile-comment-sheet-overlay-hidden {
  opacity: 0;
  pointer-events: none;
}
/* compose 遮罩压暗文档 */
.mobile-comment-compose-overlay {
  background-color: var(--overlay-light);
}
/* ---------- 底部 sheet ---------- */
.mobile-comment-sheet {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  /* 禁止面板内文字被长按选中：原生选择会把编辑器正文滚动到选区位置（跳顶）。
     输入区（contenteditable）在下方单独恢复 user-select: text 以便编辑。 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  flex-direction: column;
  /* 兜底：强制面板内所有子元素都不可被长按选中，避免个别子元素（如链接）
     继承或覆盖浏览器默认 user-select 后，长按穿透到下层正文。 */
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 仅顶部圆角，无对应 token */
  border-radius: 32px 32px 0 0;
  /* 第三条纯色 box-shadow 是向下白色兜底：某些输入法环境下 visualViewport.height
     未把候选/表单辅助条算进键盘高度，遮罩底边（sheet bottom:0 贴遮罩底）落到辅助条
     下方，sheet 底边与真实键盘之间空出一段遮罩暗背景、透出压暗的正文。元素自身的
     box-shadow 不受自身 overflow:hidden 裁剪，故用一条 0 200px 0 的实色阴影从 sheet
     底边向下补白填掉间隙；多延伸出去的部分被更上层原生键盘/辅助条盖住，在 vv 定位
     正常的环境下不可见，无副作用。sheet 高度恒 > 200px，能覆盖紧贴底边的间隙。 */
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow, design-system/no-hardcoded-colors -- sheet 浮层需要大范围模糊阴影 + 向下补白兜底，现有 shadow token 无等价值 */
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.16), 0 200px 0 var(--bg-weak);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  /* 默认 collapsed 高度；进入/离开走整体位移动画，展开/收起走高度动画 */
  height: calc(var(--mobile-comment-vh) * 56);
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  /* entering / leaving：整体从视口底部向下滑入/滑出，高度由 JS 固定 */
  /* 使用 JS 写入的固定像素基准，避免键盘弹起/地址栏显隐时 vh 重算导致高度变化 */
}
.mobile-comment-sheet * {
  -webkit-user-select: inherit;
  user-select: inherit;
  -webkit-touch-callout: inherit;
}
.mobile-comment-sheet.mobile-comment-sheet-entering,
.mobile-comment-sheet.mobile-comment-sheet-leaving {
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.6, 1);
}
.mobile-comment-sheet.mobile-comment-sheet-collapsed {
  height: calc(var(--mobile-comment-vh) * 56);
}
.mobile-comment-sheet.mobile-comment-sheet-expanded {
  height: calc(var(--mobile-comment-vh) * 92);
}
.mobile-comment-sheet-handle-zone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}
.mobile-comment-sheet-handle {
  width: 36px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}
.mobile-comment-sheet-header {
  flex-shrink: 0;
}
/* ---------- 正文 block 评论数量角标 ---------- */
/* fixed 定位 overlay（fallback），完全脱离 block 文本流，不撑开/挤压正文 */
.mobile-comment-block-badges-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* 低于浮动工具栏遮罩（z-index: 40），菜单弹出时点击被遮罩承接 */
  z-index: 35;
}
/* 气泡主体 */
.mobile-comment-block-badge {
  position: absolute;
  min-width: 18px;
  height: 14px;
  padding: 0 var(--space-1);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- 角标需固定 2px 小圆角以保持跨主题一致 */
  border-radius: 2px;
  background: var(--fill-secondary);
  color: var(--text-secondary);
  font-size: calc(8px * var(--font-scale));
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  /* 底部小三角 */
}
.mobile-comment-block-badge::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--fill-secondary);
}
.mobile-comment-sheet-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 允许浏览器处理垂直滚动，JS 处理水平滑动手势 */
  touch-action: pan-y;
  /* 列表空白处长按不选中文本；输入区在下方单独恢复 user-select: text */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.mobile-comment-sheet-footer {
  flex-shrink: 0;
  /* 底部安全距离走 --mobile-comment-safe-bottom，默认回退到
     env(safe-area-inset-bottom)：iOS 全面屏 H5 留出小白条高度，Android env 为 0。
     iOS 微信小程序 WebView 容器已避让小白条、env 仍报非 0 会导致底部空出一大块，
     由 use-comment-viewport 在该环境把变量覆盖为 0（见其注释）。 */
  padding: 12px 16px calc(12px + var(--mobile-comment-safe-bottom, env(safe-area-inset-bottom)));
  border-top: 1px solid var(--divider);
  background: var(--bg-default);
  /* 键盘弹起时底部安全区已被键盘遮住，收紧到与顶部对称的 12px；
     用 JS 检测的 keyboardHeight 状态比 :focus-within 更可靠
     （部分设备/小程序聚焦时不一定伴随键盘，或键盘收起后 focus 仍保留）。 */
}
.mobile-comment-sheet-footer.is-keyboard-visible {
  padding: var(--space-3) var(--space-4) var(--space-3);
}
/* ---------- 导航头：‹ 上一条  评论 N/M  下一条 › ---------- */
.mobile-comment-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-3);
}
.mobile-comment-nav-title {
  font-size: calc(17px * var(--font-scale));
  font-weight: 500;
  color: var(--text-primary);
}
.mobile-comment-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  background: none;
  padding: var(--space-1) 0;
  font-size: calc(15px * var(--font-scale));
  color: var(--text-tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-comment-nav-btn .mobile-comment-nav-arrow {
  flex-shrink: 0;
  margin-top: var(--space-0-5);
  /* 向下微调以居中对齐文本 */
}
.mobile-comment-nav-btn:disabled {
  color: var(--text-quaternary);
  cursor: default;
}
/* ---------- 会话流 ---------- */
.mobile-comment-list {
  padding: 0 var(--space-4) var(--space-4);
}
/* 引用原文（被评论段落）— 固定在 sheet 头部，不随消息流滚动 */
.mobile-comment-sheet-anchor {
  padding: 0 var(--space-4) 0;
  background: var(--bg-default);
}
.mobile-comment-anchor {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 60px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-weak);
  color: var(--text-tertiary);
  font-size: calc(15px * var(--font-scale));
  line-height: 1.6;
  word-break: break-all;
}
.mobile-comment-list-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-body);
}
.mobile-comment-list-body {
  display: flex;
  padding-top: var(--space-3);
  flex-direction: column;
  gap: var(--space-4);
}
/* ---------- 气泡 ---------- */
.mobile-comment-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  /* 增加消息之间的间距 */
}
.mobile-comment-bubble.is-own {
  justify-content: flex-end;
}
.mobile-comment-bubble-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: calc(100% - 32px);
  /* Leaves space for avatar and gap */
}
.mobile-comment-bubble.is-own .mobile-comment-bubble-main {
  align-items: flex-end;
  /* 防止 main 被窄 meta 行压缩，导致 body 的 80% max-width 不够宽 */
  min-width: 65%;
}
.mobile-comment-bubble:not(.is-own) .mobile-comment-bubble-main {
  align-items: flex-start;
  min-width: 65%;
}
.mobile-comment-bubble-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  min-height: 18px;
  /* 撑开和头像上半部分的高度 */
}
.mobile-comment-bubble-avatar {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: -8px;
  /* 向上微调，让头像视觉上与文字齐平 */
  margin-right: var(--space-1);
}
.mobile-comment-bubble.is-own .mobile-comment-bubble-avatar {
  margin-right: 0;
  margin-left: var(--space-1);
}
.mobile-comment-bubble-author {
  font-size: var(--fs-body);
  line-height: 18px;
  color: var(--text-primary);
}
.mobile-comment-bubble-time {
  font-size: var(--fs-caption);
  line-height: 18px;
  color: var(--text-tertiary);
}
/* 本人 meta 行的「···」更多操作 */
.mobile-comment-bubble-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-comment-bubble-more span {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--icon-tertiary);
}
.mobile-comment-bubble-body {
  position: relative;
  max-width: 80%;
}
.mobile-comment-bubble-text {
  padding: var(--space-3);
  border-radius: var(--radius-2xl-val);
  font-size: calc(17px * var(--font-scale));
  line-height: 24px;
  word-break: break-word;
  white-space: pre-wrap;
  color: var(--text-primary);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  /* smart-doc-ui 的 .sc-mention-tag 默认 user-select: text，会覆盖气泡的
     user-select: none，导致长按气泡时 @人元素被系统选中。这里在评论气泡内
     强制恢复 none —— 气泡不需要选中 @，长按是用来唤自定义菜单的。 */
}
.mobile-comment-bubble-text .sc-mention-tag,
.mobile-comment-bubble-text .sc-mention-tag * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.mobile-comment-bubble:not(.is-own) .mobile-comment-bubble-text {
  background: var(--bg-weak);
  margin-left: -8px;
}
.mobile-comment-bubble.is-own .mobile-comment-bubble-text {
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- 薄荷绿气泡背景，暂无对应语义 token */
  background: #d8f5ec;
  margin-right: -8px;
}
/* 长按浮层菜单：复制/编辑/删除
 * 用 Portal 挂到 body + fixed 定位，避免被 sheet、头像、编辑器浮层等堆叠上下文遮挡 */
.mobile-comment-menu-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.mobile-comment-menu {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  position: fixed;
  right: 0;
  /* 默认右对齐，JS 会按需覆盖为 left 或 right */
  z-index: 10001;
  display: flex;
  padding: var(--space-1);
  border-radius: var(--radius-2xl-val);
  background: var(--bg-default);
  box-shadow: var(--shadow-2);
  white-space: nowrap;
  /* 指向文本气泡的三角箭头 */
  /* 默认右对齐 → 箭头在右侧 */
  /* 左对齐 → 箭头在左侧 */
}
.mobile-comment-menu button {
  border: none;
  background: none;
  padding: var(--space-2) var(--space-4);
  font-size: calc(15px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
}
.mobile-comment-menu button + button {
  border-left: 1px solid var(--divider);
}
.mobile-comment-menu button.is-danger {
  color: var(--error-default);
}
.mobile-comment-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--bg-default);
}
.mobile-comment-menu[data-arrow-side="right"]::after {
  right: var(--menu-arrow-offset, var(--space-3));
}
.mobile-comment-menu[data-arrow-side="left"]::after {
  left: var(--menu-arrow-offset, var(--space-3));
}
/* ---------- 评论内链接 ---------- */
.mobile-comment-link {
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- 链接蓝色，暂无对应语义 token */
  color: #2b6def;
  text-decoration: underline;
  word-break: break-all;
}
/* ---------- 输入栏（compose / reply 共用） ---------- */
.mobile-comment-input {
  position: relative;
}
/* 输入区（contenteditable）需要保留文本选择，以便用户编辑、复制、粘贴 */
.mobile-comment-input-field,
.mobile-comment-editor-field {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.mobile-comment-input-field {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-3xl-val);
  /* iOS 在 focus font-size < 16px 的输入框时会自动缩放页面，且键盘收起后不会恢复，
     因此移动端评论输入统一使用 16px，compose 覆盖为 17px。 */
  font-size: var(--fs-16);
  color: var(--text-primary);
  background: var(--bg-weak);
  border: none;
  padding-left: var(--space-2);
  box-sizing: border-box;
}
.mobile-comment-input-field:focus-within {
  outline: none;
  box-shadow: none;
}
.mobile-comment-input-field .sc-mention-input__content {
  min-height: 48px;
  max-height: 120px;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-3);
  line-height: 1.5;
  font-size: var(--fs-16);
  overflow-y: auto;
  white-space: pre-wrap;
  outline: none;
}
.mobile-comment-input-field .sc-mention-input__content:empty::before {
  color: var(--text-tertiary);
}
.mobile-comment-input-send {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-full);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- 未激活状态按钮背景，暂无对应 token */
  background: rgba(0, 0, 0, 0.2);
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- 白色图标，var(--text-allwhite) 在 dark 模式下非纯白 */
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.mobile-comment-input-send.is-active {
  background: var(--brand);
}
.mobile-comment-input-send:disabled {
  cursor: default;
}
/* 新建评论：发送按钮使用独立圆形图标（无背景，图标自带圆底） */
.mobile-comment-input-send-compose {
  right: 0;
  bottom: var(--space-1);
  width: 40px;
  height: 40px;
  background: transparent;
  /* stylelint-disable-next-line design-system/no-hardcoded-colors -- 设计稿指定未激活图标色，暂无对应 token */
  color: #dfe4e9;
  transition: color 0.15s ease;
}
.mobile-comment-input-send-compose.is-active {
  background: transparent;
  color: var(--brand);
}
/* 新建评论：展开为大输入区（对齐设计稿，去掉语音入口） */
.mobile-comment-input-compose .mobile-comment-input-field {
  border-radius: 0;
  background: transparent;
}
.mobile-comment-input-compose .mobile-comment-input-field .sc-mention-input__content {
  min-height: 96px;
  max-height: 40vh;
  padding: var(--space-1) 56px var(--space-1) 0;
  font-size: calc(17px * var(--font-scale));
  line-height: 1.6;
}
/* ---------- 新建评论：底部停靠输入栏 ---------- */
.mobile-comment-compose-bar {
  position: absolute;
  left: 0;
  right: 0;
  padding: 16px 16px calc(8px + var(--mobile-comment-safe-bottom, env(safe-area-inset-bottom)));
  background: var(--bg-default);
  /* stylelint-disable-next-line design-system/no-hardcoded-border-radius -- sheet 仅顶部圆角，无对应 token */
  border-radius: 32px 32px 0 0;
  /* stylelint-disable-next-line design-system/no-hardcoded-box-shadow, design-system/no-hardcoded-colors -- sheet 浮层需要大范围模糊阴影，现有 shadow token 无等价值 */
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.16);
  /* 向下延伸的白色兜底层：某些输入法环境下 visualViewport.height 未把候选/表单
     辅助条算进键盘高度，遮罩底边会落到辅助条下方，导致输入栏与真实键盘之间空出
     一段「透明遮罩」透出正文。这里从输入栏底边向下补一段与输入栏同色的白，露出
     的间隙被填白、与输入栏连成一片；多延伸出去的部分会被更上层的原生键盘/辅助条
     盖住，在 visualViewport 定位正常的环境下完全不可见，无副作用。
     pointer-events:none 保证点击仍能穿透到遮罩触发关闭。 */
  /* 键盘弹起时底部安全区已被键盘遮住，收紧 padding 避免输入框与键盘之间出现过大间距 */
}
.mobile-comment-compose-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 200px;
  background: var(--bg-weak);
  pointer-events: none;
}
.mobile-comment-compose-bar.is-keyboard-visible {
  padding: var(--space-4) var(--space-4) var(--space-2);
}
/* ---------- 编辑评论：底部 sheet 编辑页 ---------- */
.mobile-comment-editor-bar {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--divider);
}
.mobile-comment-editor-cancel {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: var(--fs-16);
  color: var(--text-primary);
  cursor: pointer;
}
.mobile-comment-editor-title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-primary);
}
.mobile-comment-editor-send {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: var(--fs-16);
  color: var(--text-quaternary);
  cursor: pointer;
}
.mobile-comment-editor-send.is-active {
  color: var(--brand);
}
.mobile-comment-editor-wrapper {
  min-height: 100%;
}
.mobile-comment-editor-field {
  min-height: 100%;
  padding: var(--space-4);
  font-size: calc(17px * var(--font-scale));
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.mobile-comment-editor-field:focus-within {
  outline: none;
  box-shadow: none;
}
.mobile-comment-editor-field .sc-mention-input__content {
  min-height: 100%;
  padding: 0;
  font-size: calc(17px * var(--font-scale));
  line-height: 1.6;
}
.mobile-comment-editor-field .sc-mention-input__content:empty::before {
  content: none;
}
.comment-thread-pc .comment-thread-draft-input-row-pc .sc-mention-input {
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  background-color: var(--bg-input-active);
}
.comment-thread-pc .comment-thread-draft-input-row-pc .sc-mention-input .sc-root-editable {
  background-color: var(--bg-input-active);
}

/* 资料库侧栏折叠/展开内联按钮：32×32 热区，icon 16px，圆角 8（设计稿收折）。 */
.knowledge-sidebar-inline-toggle-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--wb-radius-200);
  background: transparent;
  color: var(--wb-color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.knowledge-sidebar-inline-toggle-pc:hover {
  background: var(--bg-primary-active);
  color: var(--icon-primary);
}
.knowledge-sidebar-inline-toggle-pc:active {
  background: var(--bg-primary-active);
  color: var(--icon-primary);
}
.knowledge-sidebar-inline-toggle-pc:focus-visible {
  outline: 2px solid var(--bg-primary-active);
  outline-offset: 2px;
}
.knowledge-sidebar-inline-toggle-pc svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* LandingTopbarPC — 64px 品牌顶栏，右侧复用用户账户入口。 */
.landing-topbar-pc {
  flex-shrink: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 0 var(--space-4, 16px) 0 var(--space-6, 24px);
}
.landing-topbar-brand-btn-pc {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-4, 16px);
  margin-left: calc(-1 * var(--space-4, 16px));
  background: transparent;
  border: none;
  cursor: pointer;
}
/* DESIGN_FALLBACK: 完整品牌 SVG 的固有尺寸，保持设计稿比例。 */
.landing-topbar-brand-logo-pc {
  width: 81.6009px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}
/* 异常页全屏层为 10000；账户面板 portal 脱离顶栏，需在该层之上。 */
.landing-topbar-account-menu-panel-pc {
  z-index: 10001;
}
.landing-topbar-divider-pc {
  width: 1px;
  height: 20px;
  background: var(--border-default);
}
.landing-topbar-home-btn-pc {
  height: 28px;
  padding: 0 var(--space-2, 8px);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm-val);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.landing-topbar-home-btn-pc:hover {
  background: var(--fill-secondary);
  color: var(--text-primary);
}
.landing-topbar-right-pc {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
/* 移动端：顶栏左右内边距收窄到 space-4 */
@media (max-width: 640px) {
  .landing-topbar-pc {
    padding: 0 var(--space-4, 16px);
  }
}

/* ============================================================
 * NotificationPagePC — 与当前通知页面布局对齐
 *
 * 结构：顶栏（标题+全部标为已读）→ 日期分组列表 → 单行 grid 卡片
 * ============================================================ */
/* ====== 页面容器 ====== */
.notif-page-pc {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.notif-page-embedded-pc {
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.notif-panel-pc {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
}
/* ====== 顶栏：无分割线 ====== */
.notif-topbar-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 56px;
  padding: 0 var(--space-6);
  border-bottom: none;
}
.notif-title-pc {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 24px;
  color: var(--text-primary);
}
.notif-topbar-right-pc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.notif-mark-all-btn-pc {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  opacity: 0.76;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 16px;
  cursor: pointer;
  transition: color 150ms ease,
    opacity 150ms ease;
}
.notif-mark-all-btn-pc:hover {
  color: var(--text-primary);
  opacity: 1;
}
.notif-mark-all-btn-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
/* ====== 分段控件（还原设计稿 tool bar 8335:779「type=文字」）======
 *
 * 结构：灰底药丸容器（notif-seg-pc）内嵌 N 个 tab 项（notif-seg-item-pc）。
 * 选中项白底 + shadow 浮起、文字加粗；未选中项透明底、常规字重。
 * 严格对齐设计稿：容器 padding 2px、tab 间距 0、tab 高 28px、
 * tab 文字左右内边距 12px、选中白底 + shadow-1、未选中文字 text-secondary。
 */
/* DESIGN_FALLBACK: 药丸式分段控件，设计系统暂无 segmented control token，
 * 以 bg-medium 灰底承托、选中项 bg-default 白底 + shadow-1 浮起还原设计稿 #F2F2F2/#FFF。 */
.notif-seg-pc {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  /* 设计稿 tab 之间无间距（药丸内相邻，选中项白底铺满） */
  gap: 0;
  flex-shrink: 0;
  margin: var(--space-4) var(--space-9);
  /* 设计稿胶囊内边距 2px */
  padding: var(--space-0-5);
  border-radius: var(--radius-lg);
  background: var(--bg-medium);
}
/* 分段控件外层包裹：与列表内容一致最大宽 1024px 居中，
 * 让分段控件的左边缘随内容区居中而对齐（药丸本身仍靠左）。 */
.notif-seg-wrap-pc {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--space-9);
  /* 药丸放进居中盒后，原左右 margin 由包裹层承接，避免双重缩进 */
}
.notif-seg-wrap-pc .notif-seg-pc {
  margin-left: 0;
  margin-right: 0;
}
.notif-seg-item-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 设计稿 tab 项高 28px */
  height: 28px;
  /* 设计稿文字左右内边距 12px */
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.notif-seg-item-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
.notif-seg-item-label-pc {
  /* 设计稿未选中文字：14px Regular，text-secondary（黑 0.7） */
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 22px;
  white-space: nowrap;
  transition: color 150ms ease;
}
.notif-seg-item-pc:hover .notif-seg-item-label-pc {
  color: var(--text-primary);
}
.notif-seg-item-active-pc {
  /* 设计稿选中态：白底 + DROP_SHADOW 0 1px 4px rgba(0,0,0,0.05) ≈ shadow-1 */
  background: var(--bg-default);
  box-shadow: var(--shadow-1);
}
.notif-seg-item-active-pc .notif-seg-item-label-pc {
  /* 设计稿选中文字：14px Semibold，text-primary（黑 0.9） */
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
.notif-seg-item-active-pc:hover .notif-seg-item-label-pc {
  color: var(--text-primary);
}
/* ====== 通知列表 ======
 *
 * 交互目标：滚动条贴页面最右侧，而列表内容最大宽 1024px 居中。
 *   → 滚动发生在全宽的 .notif-list-pc 上（scrollbar 自然出现在最右边）；
 *   → 限宽 + 居中加在滚动容器的直接子节点上（内容块 margin:auto），
 *     不加在滚动容器自身，否则 scrollbar 会跟着内容缩进到中间。
 */
.notif-list-pc {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-1) var(--space-4);
  /* 内容居中限宽：覆盖分组 section、空态、哨兵、加载/无更多提示 */
}
.notif-list-pc > * {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.notif-empty-pc {
  box-sizing: border-box;
  flex: 1;
  gap: var(--space-3);
  padding: calc(var(--space-15) * 2) var(--space-9);
  text-align: center;
}
.notif-empty-icon-pc {
  display: flex;
  flex: 0 0 var(--space-16);
  width: var(--space-16);
  height: var(--space-16);
  margin: 0;
}
.notif-empty-icon-pc > svg {
  width: 100%;
  height: 100%;
  color: var(--border-strong);
}
.notif-empty-title-pc {
  margin: 0;
  color: var(--text-disable);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: calc(var(--fs-16) * 1.5);
}
/* DESIGN_FALLBACK: 按设计稿 Ardot 54:148 精确还原分组间距、单流行 */
/* 分组列表 */
.notif-section-pc {
  display: flex;
  flex-direction: column;
  max-width: 1016px;
}
.notif-section-title-pc {
  color: var(--text-tertiary);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 30px;
  padding: 0 var(--space-11);
}
/* 单行列表容器 */
.notif-row-list-pc {
  display: flex;
  flex-direction: column;
}
/* DESIGN_FALLBACK: 单条消息 grid 3列：32px 头像 | 内容 | 76px 操作区（对齐设计稿 465:1） */
/* 单行通知：预留横向新消息底色区域，不再复用 hover 高亮。 */
.notif-row-pc {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  /* 设计稿「左」区与右侧按钮间距 12px；行上下 padding 8px */
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-lg);
  transition: background-color 150ms ease;
}
.notif-row-pc:hover {
  /* 设计稿行 hover 灰底 #EBEBEB（755:121）：fill-primary（黑0.08）叠白底 = #EBEBEB */
  background: var(--bg-primary-hover);
}
/* 未读新消息标记：6px 绿色圆点，展示在头像左侧 */
.notif-row-new-pc::before {
  --notif-unread-dot-size: 6px;
  --notif-unread-dot-left: 25px;
  --notif-unread-dot-top: 24px;
  content: "";
  position: absolute;
  top: var(--notif-unread-dot-top);
  left: var(--notif-unread-dot-left);
  width: var(--notif-unread-dot-size);
  height: var(--notif-unread-dot-size);
  border-radius: var(--radius-full);
  background: var(--success);
  transform: translateY(-50%);
}
.notif-row-clickable-pc {
  cursor: pointer;
}
/* ====== 32px 圆形字母头像（wb 主题色：brand-subtle 底 + brand-light 字，对齐设计稿 465:1 avatar 32px） ====== */
.notif-avatar-dot-pc {
  --customer-avatar-text: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);
  background: var(--info);
  color: var(--customer-avatar-text);
  border: 0.5px solid var(--border-primary);
  /* 设计稿头像字母 16px Medium */
  font-size: calc(16px * var(--font-scale));
  font-weight: var(--fw-medium);
  line-height: 1;
  -webkit-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 0 0 32px;
}
/* 系统公告头像：固定展示资料库品牌图标（library.svg）。
 *
 * 父容器 .notif-avatar-dot-pc 已是 24px 圆形 overflow:hidden 居中布局。
 * 这里给 16x16（4px 内边距），让图标不贴圆形边缘——library.svg 路径接近 24x24
 * viewBox 边缘，若铺满 100% 描边会与圆形 outline 视觉粘连。
 *
 * 注意：library.svg 内 stroke="currentColor"，<img> 引用时 currentColor 无法
 * 继承父级 color，会回退到默认黑色描边——在 .brand-subtle (#E0E8FA) 浅蓝底上
 * 对比度足够，可接受。
 */
.notif-system-avatar-img-pc {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
/* ====== type=6 权限申请：多行块布局（还原设计稿 8434:104 / 452:1563）====== */
/* 多行行：avatar 顶部对齐首行文字（设计稿 avatar y=8 贴行顶） */
.notif-row-apply-pc {
  align-items: flex-start;
  /* 多行块内容里，右侧操作区（查看 / 状态标签 / 待处理分裂按钮）
   * 始终相对整行垂直居中，不随内容顶对齐被顶到上方。 */
}
.notif-row-apply-pc .notif-avatar-dot-pc {
  /* 头像与首行 22px 文字视觉居中：(22 - 32) / 2 会溢出，改为贴首行顶部微调 */
  margin-top: 0;
}
.notif-row-apply-pc .notif-row-actions-pc,
.notif-row-apply-pc .notif-row-pending-actions-pc {
  align-self: center;
}
/* 内容块：垂直排列，行距 2px（设计稿 Frame 3465348 itemSpacing:2） */
.notif-apply-pc {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}
/* 标题行：actor + 申请 + 权限胶囊（22px 行高，横向 4px 间距） */
.notif-apply-title-pc {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 22px;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 22px;
}
/* 已处理终态的静态权限文字（对齐设计稿 option「查看权限」14px Semibold） */
.notif-apply-perm-static-pc {
  flex-shrink: 0;
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
/* 申请留言引用行：2px 灰竖线 + 12px 灰文字 */
.notif-apply-reason-pc {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
}
/* DESIGN_FALLBACK: 设计稿引用竖线 2px 宽、黑 0.3，非标准 border token，按设计稿实现 */
.notif-apply-reason-bar-pc {
  flex-shrink: 0;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--fill-primary);
}
.notif-apply-reason-text-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 文件药丸：灰底圆角标签（设计稿 file #F2F2F2 cornerRadius 100 padding 6px 8px） */
.notif-apply-file-pc {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1);
  max-width: 100%;
  /* stylelint-disable-next-line design-system/spacing-4px-multiple -- 设计稿药丸内边距 6px 非 4px 基数 */
  padding: var(--space-0-5) var(--space-2);
  border: none;
  border-radius: var(--radius-xl-val);
  background: var(--bg-primary-default);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.notif-apply-file-pc:hover {
  background: var(--bg-primary-default);
}
.notif-apply-file-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
.notif-apply-file-icon-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--icon-secondary);
}
.notif-apply-file-icon-pc > svg {
  width: 16px;
  height: 16px;
}
.notif-mobile-action-pc {
  display: none;
}
.notif-apply-file-name-pc {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ====== 行内容区（单行内联句子） ====== */
.notif-row-content-pc {
  min-width: 0;
  overflow: visible;
}
.notif-row-sentence-pc {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  overflow: visible;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 22px;
  white-space: nowrap;
  min-height: 32px;
}
.notif-actor-pc {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-primary);
  font-weight: 600;
}
.notif-action-text-pc {
  /* 超长动作文案（如「审批通过了你的可编辑权限」）允许收缩并省略展示 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 400;
}
/* 资源节点：icon + 标题，使用 18×18 icon 容器 */
.notif-resource-node-pc {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--space-0-5);
  height: 22px;
  color: inherit;
  font-size: var(--fs-body);
  line-height: 22px;
  vertical-align: bottom;
  cursor: pointer;
}
/* DESIGN_FALLBACK: 设计稿指定资源 icon 18×18 */
.notif-resource-icon-slot-pc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: 0;
}
.notif-resource-icon-default-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--icon-primary);
}
.notif-resource-icon-default-pc > svg {
  width: 18px;
  height: 18px;
}
.notif-resource-title-pc {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 资源标题 hover tooltip：显示完整未截断的文档名。
 *
 * `.notif-resource-title-pc` 是单行 ellipsis 截断的资源标题（超出容器宽度时
 * 会显示 "..."）。hover 时通过 Tooltip 显示完整标题；对长标题（例如
 * "【已废弃】WorkBuddy ..." / "WorkBuddy 资料库价值..."）允许多行阅读。
 *
 * 依赖 Tooltip 组件的 interactive 语义（whiteSpace: normal + pointerEvents: auto）；
 * 这里给一个合理的 max-width 与行高，让长文档名在 tooltip 中自动换行。
 */
.notif-resource-title-tooltip-pc {
  max-width: 320px;
  line-height: 20px;
  word-break: break-word;
}
/* ====== 内联权限选择器（pending 行句子中的胶囊） ====== */
.notif-inline-perm-wrap-pc {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
/* 权限触发器（还原设计稿 option 452:1631：纯文字 14px Semibold 黑0.9 + 16px 灰箭头，
 * 无胶囊底色/边框/内边距，文字与箭头间距 2px） */
.notif-inline-perm-trigger-pc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  cursor: pointer;
  transition: color 150ms ease;
}
.notif-inline-perm-trigger-pc:hover {
  color: var(--text-primary);
}
.notif-inline-perm-trigger-pc > svg,
.notif-inline-perm-trigger-pc > span > svg {
  width: 16px;
  height: 16px;
  /* 设计稿箭头黑 0.5 */
  color: var(--icon-secondary);
}
.notif-inline-perm-trigger-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.notif-inline-perm-dropdown-pc {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 12;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 设计稿 list item 间距 2px */
  gap: var(--space-0-5);
  min-width: 120px;
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--border-default);
  /* 设计稿 menu 容器圆角 12px */
  border-radius: var(--radius-xl);
  background: var(--bg-default);
  box-shadow: var(--shadow-3);
}
/* ====== 行右侧操作区（固定 76px，对齐设计稿 8335:1259 outline 按钮） ====== */
.notif-row-actions-pc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: var(--space-1);
  min-width: 76px;
  max-width: 120px;
}
/* 待处理：分裂式 同意 + ▾下拉 */
.notif-row-pending-actions-pc {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 76px;
  max-width: 120px;
}
/* 分裂式同意主按钮 */
.notif-action-approve-main-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  /* 默认 flex item 的 min-width 是 auto（按内容撑开），长译文（如「同意」的葡语
     Aprovar 等更长档位文案）会撑破 76~120px 的固定宽度容器；这里允许收缩，
     文字截断交给内部 .notif-action-approve-main-text-pc（见下） */
  min-width: 0;
  box-sizing: border-box;
  height: 32px;
  padding: 0 var(--space-1);
  border: var(--border-width-thin) solid var(--border-default);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.notif-action-approve-main-pc:hover {
  background: var(--fill-secondary);
  border-color: var(--border-strong);
}
.notif-action-approve-main-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
/* 同意按钮文案：button 本身是 flex 容器，文字节点会被当成 flex item 参与布局，
   justify-content:center 只会把溢出内容居中裁切（两端都看不到省略号）；
   这里用独立的块级 span 承载文字，保证溢出时能在末尾正常显示省略号 */
.notif-action-approve-main-text-pc {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 下拉箭头按钮 */
.notif-action-approve-dropdown-wrap-pc {
  position: relative;
}
.notif-action-approve-arrow-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 32px;
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-default);
  color: var(--icon-tertiary);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.notif-action-approve-arrow-pc:hover {
  background: var(--fill-secondary);
  border-color: var(--border-strong);
  color: var(--icon-secondary);
}
.notif-action-approve-arrow-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
/* 拒绝下拉菜单 */
/* 下拉菜单容器（还原设计稿 menu 8439:82：白底 + #E5E5E5 描边 + 8px 内边距 + 柔和投影） */
.notif-action-approve-dropdown-pc {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 设计稿 list item 间距 2px */
  gap: var(--space-0-5);
  min-width: 120px;
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--border-default);
  /* 设计稿 menu 容器圆角 12px */
  border-radius: var(--radius-xl);
  background: var(--bg-default);
  box-shadow: var(--shadow-3);
}
/* 通用下拉菜单项（还原设计稿 item/dropdown/1st：32px 高、8px 圆角、
 * 5px 8px 内边距、14px Regular 黑0.9、hover 灰底 #F2F2F2） */
.notif-action-dropdown-item-pc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 设计稿 item 高 32px */
  height: 32px;
  /* 设计稿 item 内边距 5px 8px */
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  /* 设计稿 item 文字 = text-primary（黑 0.9） */
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 100ms ease, color 100ms ease;
  /* 申请人已有的档位：淡化 + 禁止点击（放在 active 规则之后，保证同时命中
   * active 与 disabled 时以 disabled 的文字色为准） */
}
.notif-action-dropdown-item-pc:hover {
  /* 设计稿 item hover 灰底 #F2F2F2 */
  background: var(--bg-medium);
  color: var(--text-primary);
}
.notif-action-dropdown-item-pc.notif-action-dropdown-active-pc {
  color: var(--text-primary);
  font-weight: 600;
}
.notif-action-dropdown-item-pc.notif-action-dropdown-active-pc::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-2);
  color: var(--success);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
}
.notif-action-dropdown-item-pc.notif-action-dropdown-disabled-pc {
  color: var(--text-quaternary);
  cursor: not-allowed;
}
.notif-action-dropdown-item-pc.notif-action-dropdown-disabled-pc:hover {
  /* 禁用项 hover 不变底色，避免看起来可点 */
  background: transparent;
  color: var(--text-quaternary);
}
/* 已处理状态标签（76×32 固定尺寸，还原设计稿 8335:1259 outline disable 态：
 * 白底 + 淡灰描边 + 14px Medium 文字黑0.3） */
.notif-status-badge-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 76px;
  height: 32px;
  padding: 0;
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-default);
  /* 设计稿 disable 文字黑 0.3（非整体 opacity 压淡，避免边框一起变淡） */
  color: var(--text-quaternary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 22px;
  white-space: nowrap;
}
/* 已同意 / 已拒绝 / 已通过 均为设计稿 disable 态：统一淡灰描边 + 文字黑0.3 */
.notif-status-approved-pc,
.notif-status-rejected-pc {
  border-color: var(--border-default);
  color: var(--text-quaternary);
}
/* 评论回复 / @提及：查看按钮（76×32 固定尺寸，对齐设计稿 outline 按钮 14px Medium） */
.notif-action-view-pc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 76px;
  height: 32px;
  padding: 0;
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.notif-action-view-pc:hover {
  background: var(--fill-secondary);
  border-color: var(--border-strong);
}
.notif-action-view-pc:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
/* ====== 分页哨兵 / 加载状态 ====== */
.notif-load-more-pc {
  height: 1px;
  pointer-events: none;
}
.notif-loading-pc {
  height: 100%;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-quaternary);
}
.notif-list-pc > .workspace-content-skeleton-pc {
  flex: 1;
  min-height: 100%;
  background: transparent;
}
.notif-no-more-pc {
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-quaternary);
}
/* ====== 右键菜单 ====== */
.notif-context-menu-pc {
  position: fixed;
  z-index: 200;
  min-width: 120px;
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-2);
}
.notif-context-menu-item-pc {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--error);
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.notif-context-menu-item-pc:hover {
  background: var(--error-bg);
}