/* 弈·司南 · Combo Select 样式
 * 模拟原生 .input 外观 · 添加下拉面板和"新增"条目
 */

.combo-select{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 8px 0 12px;
  background:var(--bg-surface);color:var(--fg-primary);
  border:1px solid var(--border-subtle);border-radius:8px;
  font-family:inherit;font-size:13px;
  min-width:120px;transition:all .15s
}
.combo-select.input-look{background:var(--bg-canvas)}
.combo-select:hover{border-color:var(--border-strong)}
.combo-select.open{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,82,217,.08)}

.combo-input{
  flex:1;min-width:0;padding:0;margin:0;border:0;outline:none;
  background:transparent;color:inherit;font:inherit;
  height:100%
}
.combo-input::placeholder{color:var(--fg-quaternary)}

.combo-caret{
  flex-shrink:0;width:20px;height:20px;padding:0;margin:0;
  background:transparent;border:0;cursor:pointer;
  color:var(--fg-tertiary);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s
}
.combo-select.open .combo-caret{transform:rotate(180deg);color:var(--brand)}
.combo-caret:hover{color:var(--brand)}

.combo-clear{
  flex-shrink:0;width:18px;height:18px;padding:0;margin-right:-2px;
  background:var(--bg-sunken);border:0;border-radius:50%;
  color:var(--fg-tertiary);font-size:14px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s
}
.combo-select:hover .combo-clear,
.combo-select.open .combo-clear{opacity:1}
.combo-clear:hover{background:var(--data-neg);color:#fff}

/* 面板 */
.combo-panel{
  position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:100;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:8px;
  box-shadow:0 12px 28px rgba(24,24,27,.12),0 0 0 1px rgba(0,0,0,.02);
  max-height:240px;overflow-y:auto;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:all .15s
}
.combo-select.open .combo-panel{opacity:1;transform:translateY(0);pointer-events:auto}

.combo-opt{
  padding:8px 14px;font-size:13px;color:var(--fg-primary);cursor:pointer;
  display:flex;align-items:center;gap:8px;letter-spacing:.02em
}
.combo-opt:hover,.combo-opt.active{background:var(--bg-sunken);color:var(--brand)}
.combo-opt mark{
  background:color-mix(in srgb,var(--brand) 22%,transparent);
  color:var(--brand);font-weight:600;padding:0 2px;border-radius:2px
}

.combo-empty{
  padding:16px 14px;text-align:center;
  font-size:12px;color:var(--fg-tertiary);letter-spacing:.04em;
  font-family:"JetBrains Mono",monospace
}

/* 新增条目 · 高亮为 Brand */
.combo-add{
  padding:9px 14px;font-size:13px;
  color:var(--brand);cursor:pointer;
  display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--brand) 6%,transparent);
  border-top:1px dashed var(--border-subtle);
  letter-spacing:.02em
}
.combo-add:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.combo-add b{font-weight:600}
.combo-add svg{color:var(--brand);flex-shrink:0}

/* 深色 */
[data-theme="dark"] .combo-select{background:var(--bg-raised)}
[data-theme="dark"] .combo-select.input-look{background:var(--bg-surface)}
[data-theme="dark"] .combo-panel{background:var(--bg-raised);box-shadow:0 12px 28px rgba(0,0,0,.45)}