.combobox {
  position: relative;
  display: block;
}

/* 增强后的原生 select：视觉隐藏但保留布局活性（1×1 仍非 :hidden），继续承担表单提交值与
   jQuery Validate 客户端校验（display:none 会被校验器当 :hidden 忽略）；可见形态由触发器承担。
   选择器带 .combobox 前缀：显式特异度压过 .form-select 基类，不依赖加载顺序 */
.combobox .combobox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.combobox__trigger {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: calc(32px * var(--ui-scale));
  padding: 0 calc(28px * var(--ui-scale)) 0 var(--gap-12);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--font-11);
  font-weight: 400;
  line-height: calc(32px * var(--ui-scale));
  letter-spacing: 0.022em;
  text-align: left;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 160ms ease;
}

/* 悬停描边：inset 阴影，与展开态描边同 token（--color-border，text-dim 过亮）；
   展开态排除，避免与展开描边叠加；禁用态排除（wrapper 级 :hover 穿透 pointer-events:none
   仍会命中，守卫必须挂在触发器自身的 :not(:disabled) 上） */
.combobox:not(.combobox--open):hover .combobox__trigger:not(:disabled),
.combobox:not(.combobox--open) .combobox__trigger:not(:disabled):hover {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border);
}

.combobox__trigger:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary-muted);
}

/* 禁用态（disabled 由 combobox.js 从原生 select 同步）：60% 不透明、文字 30% 白、
   chevron 20%——与页面级 devices-form--disabled 规格一致，作为全站禁用档。
   光标取 default 而非 not-allowed：对齐 devices 的观感（那里 pointer-events:none
   使光标穿透、悬停呈普通箭头），禁用触发器不应出现「禁止」光标图标 */
.combobox__trigger:disabled {
  cursor: default;
  opacity: 0.6;
}

.combobox__trigger:disabled .combobox__value {
  color: rgba(255, 255, 255, 0.3);
}

.combobox__trigger:disabled .combobox__icon {
  opacity: 0.2;
}

.combobox__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 覆写触发器的整高 line-height（垂直居中由触发器 flex align-items:center 承担）：
     行盒若撑满控件高度，文本选区（::selection）会按行盒绘制、盖满整个选择器——
     收回到字形高度后选中高亮只覆盖文本本身 */
  line-height: normal;
}

.combobox__icon {
  position: absolute;
  top: 50%;
  right: var(--gap-12);
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
  transform: translateY(-50%);
  pointer-events: none;
}

/* 标准 chevron/X 双路径图标（设计稿 注册.svg 收起态 / 注册5.svg 展开态），由 combobox.js 构建 */
.combobox__glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.combobox__glyph path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 收起态 chevron 半透明（设计稿 opacity 0.45），展开态切换为全不透明 X；
   两态交叉淡入淡出 + 旋转过渡（160ms 与触发器描边/列表滑入同族动效）：
   chevron 翻转 180° 隐喻「向下展开」并缩小退场，X 自 -90° 旋入 */
.combobox__glyph-chevron,
.combobox__glyph-x {
  transform-box: view-box;
  transform-origin: 8px 8px;
  transition: opacity 160ms ease, transform 160ms ease;
}

.combobox__glyph-chevron {
  opacity: 0.45;
}

.combobox__glyph-x {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.combobox--open .combobox__glyph-chevron {
  opacity: 0;
  transform: rotate(180deg) scale(0.6);
}

.combobox--open .combobox__glyph-x {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* 展开态描边：inset 阴影标准（不占盒模型），原认证区（auth.css）规则统一至基类全站生效；
   :focus-visible 变体并列重申压过上方收起态焦点环（展开时焦点指示由选项高亮承担） */
.combobox--open .combobox__trigger,
.combobox--open .combobox__trigger:focus-visible {
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 向上展开：接缝移至顶缘，顶角压平、底角恢复圆角（镜像向下展开的几何） */
.combobox--open-up.combobox--open .combobox__trigger {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* 展开面板：外框走 inset 阴影（无实边框，选项文字不受 1px 推移）；
   顶缘不画线——接缝由触发器底缘描边承担，保持单线（设计稿 注册5.svg y=32.5 分隔线） */
.combobox__list {
  position: fixed;
  z-index: 1000;
  list-style: none;
  background-color: var(--color-surface-alt);
  box-shadow:
    inset calc(1px * var(--ui-scale)) 0 0 var(--color-border),
    inset calc(-1px * var(--ui-scale)) 0 0 var(--color-border),
    inset 0 calc(-1px * var(--ui-scale)) 0 var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow-y: auto;
  max-height: calc(196px * var(--ui-scale));
  opacity: 0;
  transform: translateY(calc(-4px * var(--ui-scale)));
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  /* 隐藏浏览器原生滚动条（设计稿列表无滚动条）：滚轮/键盘导航仍可滚动；
     机制与 users-filter 相同，统一至基类 */
  scrollbar-width: none;
}

.combobox__list::-webkit-scrollbar {
  display: none;
}

.combobox--open-up .combobox__list {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transform: translateY(calc(4px * var(--ui-scale)));
}

.combobox--open .combobox__list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.combobox__option {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(28px * var(--ui-scale));
  padding: 0 var(--gap-12);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--font-11);
  letter-spacing: 0.022em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.combobox__option:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(1px * var(--ui-scale));
  background: var(--color-border);
}

.combobox__option.is-active {
  background-color: var(--color-surface-hover);
  color: var(--color-text-hover);
}

/* 选中态与 is-active 悬停态特异度相同，声明在后胜出：选中项保持选中底色不被悬停覆盖（注册5.svg） */
.combobox__option[aria-selected="true"] {
  color: var(--color-text);
  font-weight: 600;
  background-color: rgba(31, 31, 31, 0.55);
}

/* ---------- 紧凑档（购买设置2.svg 联系卡名称下拉 146×20） ----------
   form-select--sm 增强后的可见形态：20px 触发器 + 8.5px 文字 + 10px 图标 */
.combobox--sm .combobox__trigger {
  height: calc(20px * var(--ui-scale));
  padding: 0 calc(22px * var(--ui-scale)) 0 calc(8px * var(--ui-scale));
  border-radius: calc(4px * var(--ui-scale));
  font-size: calc(8.5px * var(--ui-scale));
  line-height: calc(20px * var(--ui-scale));
}

.combobox--sm .combobox__icon {
  right: calc(8px * var(--ui-scale));
  width: calc(10px * var(--ui-scale));
  height: calc(10px * var(--ui-scale));
}

/* 紧凑档展开面板随触发器等比缩小（购买设置2.svg 联系卡下拉）：行高 18、8.5px 字、左右内距 8、圆角 4 */
.combobox--sm .combobox__list {
  max-height: calc(122px * var(--ui-scale));
  border-radius: 0 0 calc(4px * var(--ui-scale)) calc(4px * var(--ui-scale));
}

.combobox--sm .combobox__option {
  height: calc(18px * var(--ui-scale));
  padding: 0 calc(8px * var(--ui-scale));
  font-size: calc(8.5px * var(--ui-scale));
}

/* 紧凑档展开态融合：基类 .combobox--open 的压平底角特异性与 .combobox--sm 触发器同档且声明在前，
   会被 4px 圆角盖回——此处显式重申（特异性更高） */
.combobox--sm.combobox--open .combobox__trigger,
.combobox--sm.combobox--open .combobox__trigger:focus-visible {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.combobox--sm.combobox--open-up.combobox--open .combobox__trigger {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(4px * var(--ui-scale));
  border-bottom-right-radius: calc(4px * var(--ui-scale));
}

.combobox--sm.combobox--open-up .combobox__list {
  border-radius: calc(4px * var(--ui-scale)) calc(4px * var(--ui-scale)) 0 0;
}

/* ---------- 多选下拉档（通用组件；batches-multi 同构交互的标准化形态） ----------
   触发器与选项复用单选标准件（combobox__trigger / combobox__option）；差异仅两点：
   点击选项原地切换选中且面板保持展开；面板 fixed 定位（页面 JS 按 trigger rect 定位，
   可逃逸 overflow-y:auto 弹窗的滚动上下文——absolute 面板会把展开项计入弹窗滚动区） */
.combobox--multi__panel {
  position: fixed;
  z-index: 1000;
  max-height: calc(196px * var(--ui-scale));
  overflow-y: auto;
  background-color: var(--color-surface-alt);
  box-shadow:
    inset calc(1px * var(--ui-scale)) 0 0 var(--color-border),
    inset calc(-1px * var(--ui-scale)) 0 0 var(--color-border),
    inset 0 calc(-1px * var(--ui-scale)) 0 var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  /* 隐藏原生滚动条（设计稿列表无滚动条）：滚轮仍可滚动 */
  scrollbar-width: none;
}

.combobox--multi__panel::-webkit-scrollbar {
  display: none;
}

.combobox--multi__panel[hidden] {
  display: none;
}

/* 向上展开：接缝移至顶缘（镜像向下展开的几何） */
.combobox--open-up .combobox--multi__panel {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.combobox--multi__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.combobox--multi__option {
  cursor: pointer;
}

.combobox--multi__option:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-hover);
}