/* ==========================================================================
   Zuoekai UI - Advanced Dropdown (Next Gen)
   ========================================================================== */

/* 
 * 核心设计理念：可组合、多场景、高性能
 * 
 * 结构：
 * .zuoekai-dropdown
 *   ├── .zuoekai-dropdown__trigger (触发器)
 *   └── .zuoekai-dropdown__panel (弹出面板)
 *         ├── .zuoekai-dropdown__header (头部：搜索/标题)
 *         ├── .zuoekai-dropdown__body (内容：滚动区域)
 *         │     ├── .zuoekai-dropdown__group (分组)
 *         │     └── .zuoekai-dropdown__item (选项)
 *         └── .zuoekai-dropdown__footer (底部：操作)
 */

/* --- 容器 --- */
.zuoekai-dropdown {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.zuoekai-dropdown--full {
  display: flex;
  width: 100%;
}

/* --- 触发器 (Trigger) --- */
/* 触发器通常是 button 或 input，这里提供一个通用包装器样式 */
.zuoekai-dropdown__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.zuoekai-dropdown__trigger {
  padding: 8px 12px;
  min-width: 200px;
  background-color: var(--zuoekai-color-surface-page);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-md);
  color: var(--zuoekai-color-text);
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.zuoekai-dropdown__trigger:hover {
  background-color: var(--zuoekai-color-surface-hover);
  border-color: var(--zuoekai-color-border-strong);
}

.zuoekai-dropdown__trigger:focus,
.zuoekai-dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--zuoekai-color-brand-500);
  box-shadow: var(--zuoekai-focus-ring);
}

/* 旋转图标指示器 */
.zuoekai-dropdown__trigger-icon {
  transition: transform var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out);
  color: var(--zuoekai-color-text-tertiary);
}

.zuoekai-dropdown__icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--zuoekai-color-text-tertiary);
  transition: transform var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out);
}

.zuoekai-dropdown--open .zuoekai-dropdown__trigger-icon {
  transform: rotate(180deg);
  color: var(--zuoekai-color-text-secondary);
}

.zuoekai-dropdown--open .zuoekai-dropdown__icon {
  transform: rotate(180deg);
  color: var(--zuoekai-color-text-secondary);
}

/* --- 弹出面板 (Panel) --- */
.zuoekai-dropdown__panel,
.zuoekai-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px); /* 默认向下偏移 */
  left: 0;
  z-index: var(--zuoekai-z-dropdown, 1200);
  min-width: 240px;
  max-width: 360px;
  background-color: var(--zuoekai-color-surface-panel);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-lg);
  box-shadow: var(--zuoekai-shadow-lg);
  
  /* 动画初始状态 */
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  pointer-events: none;
  visibility: hidden;
  
  /* 过渡效果 */
  transition: 
    opacity var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    transform var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    visibility var(--zuoekai-motion-duration-fast);
    
  /* 布局 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 圆角裁剪 */
}

/* 激活状态 */
.zuoekai-dropdown--open .zuoekai-dropdown__panel,
.zuoekai-dropdown--open .zuoekai-dropdown__menu {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.zuoekai-dropdown__panel--floating-open,
.zuoekai-dropdown__menu--floating-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.zuoekai-dropdown__menu {
  right: 0;
  max-height: 320px;
  overflow-y: auto;
}

/* --- 面板头部 (Header) --- */
.zuoekai-dropdown__header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--zuoekai-color-border);
  background-color: var(--zuoekai-color-surface-panel);
  flex-shrink: 0;
}

.zuoekai-dropdown__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--zuoekai-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 搜索框容器 */
.zuoekai-dropdown__search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 8px 0;
}

.zuoekai-dropdown__search input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid transparent;
  background-color: var(--zuoekai-color-surface-page);
  border-radius: var(--zuoekai-radius-md);
  color: var(--zuoekai-color-text);
  transition: all 0.2s ease;
}

.zuoekai-dropdown__search input:focus {
  outline: none;
  background-color: var(--zuoekai-color-surface-panel);
  border-color: var(--zuoekai-color-brand-500);
  box-shadow: var(--zuoekai-focus-ring);
}

.zuoekai-dropdown__search-input {
  width: 100%;
  padding: 6px 8px 6px 28px; /* 左侧留给图标 */
  font-size: 13px;
  border: 1px solid transparent;
  background-color: var(--zuoekai-color-surface-page);
  border-radius: var(--zuoekai-radius-md);
  color: var(--zuoekai-color-text);
  transition: all 0.2s ease;
}

.zuoekai-dropdown__search-input:focus {
  outline: none;
  background-color: var(--zuoekai-color-surface-panel);
  border-color: var(--zuoekai-color-brand-500);
  box-shadow: 0 0 0 2px var(--zuoekai-color-brand-100);
}

.zuoekai-dropdown__search-icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  color: var(--zuoekai-color-text-tertiary);
  pointer-events: none;
}

/* --- 面板内容体 (Body) --- */
.zuoekai-dropdown__body,
.zuoekai-dropdown__items {
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 320px;
  overscroll-behavior: contain;
}

.zuoekai-dropdown__empty {
  padding: 10px 12px;
  text-align: center;
  color: var(--zuoekai-color-text-secondary);
  font-size: 13px;
}

/* 自定义滚动条 */
.zuoekai-dropdown__body {
  scrollbar-width: thin;
  scrollbar-color: var(--zuoekai-scrollbar-thumb) var(--zuoekai-scrollbar-track);
}

.zuoekai-dropdown__body::-webkit-scrollbar {
  width: 4px;
}

.zuoekai-dropdown__body::-webkit-scrollbar-track {
  background: var(--zuoekai-scrollbar-track);
}

.zuoekai-dropdown__body::-webkit-scrollbar-thumb {
  background-color: var(--zuoekai-scrollbar-thumb);
  border-radius: 4px;
}

.zuoekai-dropdown__body::-webkit-scrollbar-thumb:hover {
  background-color: var(--zuoekai-scrollbar-thumb-hover);
}

.zuoekai-dropdown__menu {
  scrollbar-width: thin;
  scrollbar-color: var(--zuoekai-scrollbar-thumb) var(--zuoekai-scrollbar-track);
}

.zuoekai-dropdown__menu::-webkit-scrollbar {
  width: 4px;
}

.zuoekai-dropdown__menu::-webkit-scrollbar-track {
  background: var(--zuoekai-scrollbar-track);
}

.zuoekai-dropdown__menu::-webkit-scrollbar-thumb {
  background-color: var(--zuoekai-scrollbar-thumb);
  border-radius: 4px;
}

.zuoekai-dropdown__menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--zuoekai-scrollbar-thumb-hover);
}

/* --- 选项分组 (Group) --- */
.zuoekai-dropdown__group {
  margin-bottom: 4px;
}
.zuoekai-dropdown__group:last-child {
  margin-bottom: 0;
}

.zuoekai-dropdown__group-title {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--zuoekai-color-text-tertiary);
}

/* --- 选项 (Item) --- */
.zuoekai-dropdown__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0;
  font-size: 14px;
  color: var(--zuoekai-color-text);
  border-radius: var(--zuoekai-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  user-select: none;
}

/* 悬停状态 */
.zuoekai-dropdown__item:hover,
.zuoekai-dropdown__item--focused {
  background-color: var(--zuoekai-color-surface-hover);
  text-decoration: none;
}

/* 选中状态 */
.zuoekai-dropdown__item--selected {
  background-color: var(--zuoekai-color-brand-50);
  color: var(--zuoekai-color-brand-600);
}

.zuoekai-dropdown__item--selected:hover {
  background-color: var(--zuoekai-color-brand-100);
}

.zuoekai-dropdown__item-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #a5b4fc;
  flex: none;
}

/* 禁用状态 */
.zuoekai-dropdown__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: transparent !important;
}

/* 危险操作 */
.zuoekai-dropdown__item--danger {
  color: var(--zuoekai-color-error-600);
}
.zuoekai-dropdown__item--danger:hover {
  background-color: var(--zuoekai-color-error-50);
}

/* --- 选项内部结构 --- */
.zuoekai-dropdown__item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--zuoekai-color-text-tertiary);
  transition: color 0.2s;
}

.zuoekai-dropdown__item:hover .zuoekai-dropdown__item-icon,
.zuoekai-dropdown__item--selected .zuoekai-dropdown__item-icon {
  color: currentColor;
}

/* 头像容器 */
.zuoekai-dropdown__item-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--zuoekai-color-surface-page);
  border: 1px solid var(--zuoekai-color-border);
}

/* 内容区域 */
.zuoekai-dropdown__item-content {
  flex: 1;
  min-width: 0; /* 防止溢出 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.zuoekai-dropdown__item-content > .zuoekai-tag {
  flex-shrink: 0;
}

.zuoekai-dropdown__item-label {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.zuoekai-dropdown__item--selected .zuoekai-dropdown__item-label {
  font-weight: 500;
}

.zuoekai-dropdown__item-desc {
  font-size: 12px;
  color: var(--zuoekai-color-text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuoekai-dropdown__item:hover .zuoekai-dropdown__item-desc {
  color: var(--zuoekai-color-text-secondary);
}

/* 右侧附加 (Shortcut, Badge, Checkmark) */
.zuoekai-dropdown__item-addon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--zuoekai-color-text-tertiary);
  font-size: 12px;
}

.zuoekai-dropdown__shortcut {
  font-family: var(--zuoekai-font-family-mono);
  font-size: 11px;
  background-color: var(--zuoekai-color-surface-page);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
}

.zuoekai-dropdown__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--zuoekai-color-surface-page);
  font-size: 11px;
  font-weight: 600;
}

/* --- 面板底部 (Footer) --- */
.zuoekai-dropdown__footer {
  padding: 8px 12px;
  border-top: 1px solid var(--zuoekai-color-border);
  background-color: var(--zuoekai-color-surface-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 12px;
}

/* --- 特殊布局：Grid (网格) --- */
.zuoekai-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 4px;
  padding: 8px;
}

.zuoekai-dropdown__grid .zuoekai-dropdown__item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  gap: 8px;
}

.zuoekai-dropdown__grid .zuoekai-dropdown__item-icon {
  width: 24px;
  height: 24px;
}

.zuoekai-dropdown__grid .zuoekai-dropdown__item-content {
  align-items: center;
}

/* --- 分隔线 --- */
.zuoekai-dropdown__divider {
  height: 1px;
  background-color: var(--zuoekai-color-border);
  margin: 6px 0;
}

.zuoekai-dropdown__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background-image: var(--zuoekai-gradient-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: var(--zuoekai-shadow-sm);
}

.zuoekai-dropdown--sm .zuoekai-dropdown__trigger {
  padding: 6px 10px;
  min-width: 150px;
  font-size: 13px;
}

.zuoekai-dropdown--lg .zuoekai-dropdown__trigger {
  padding: 10px 16px;
  min-width: 250px;
  font-size: 16px;
}

.zuoekai-dropdown--full-width,
.zuoekai-dropdown--full {
  display: flex;
  width: 100%;
}

.zuoekai-dropdown--full-width .zuoekai-dropdown__trigger,
.zuoekai-dropdown--full .zuoekai-dropdown__trigger {
  width: 100%;
  min-width: 0;
}

.zuoekai-dropdown--full-width .zuoekai-dropdown__panel,
.zuoekai-dropdown--full-width .zuoekai-dropdown__menu,
.zuoekai-dropdown--full .zuoekai-dropdown__panel,
.zuoekai-dropdown--full .zuoekai-dropdown__menu {
  left: 0;
  right: 0;
  max-width: none;
}

.zuoekai-dropdown--dropup .zuoekai-dropdown__panel,
.zuoekai-dropdown--dropup .zuoekai-dropdown__menu {
  top: auto;
  bottom: calc(100% + 4px);
  transform: scale(0.95) translateY(4px);
}

.zuoekai-dropdown--dropup.zuoekai-dropdown--open .zuoekai-dropdown__panel,
.zuoekai-dropdown--dropup.zuoekai-dropdown--open .zuoekai-dropdown__menu {
  transform: scale(1) translateY(0);
}

@media (max-width: 640px) {
  .zuoekai-dropdown__menu,
  .zuoekai-dropdown__panel {
    position: fixed;
    left: 16px;
    right: 16px;
    min-width: 0;
    max-width: none;
    max-height: 50vh;
  }
}

/* --- 暗色模式适配 --- */
[data-zuoekai-mode="dark"] .zuoekai-dropdown__search-input {
  background-color: rgba(0, 0, 0, 0.2);
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown__search-input:focus {
  background-color: rgba(0, 0, 0, 0.3);
}


/* --- 功能扩展：多选 (Checkbox) --- */
/*
 * 通用多选项布局：
 * 统一将 dropdown 多选项保持为“左侧选择标识 + 右侧内容区”的横向结构，
 * 避免业务模板中不同 DOM 写法（纯文本 / 文本+色点 / 自定义包裹容器）出现错位。
 */
.zuoekai-dropdown__item--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px; /* 调整左侧间距适配 checkbox */
  text-align: left;
}

/*
 * 隐藏原生 checkbox：
 * 交互仍然依赖真实 input 的 checked 状态，
 * 但视觉层统一交给 .zuoekai-dropdown__checkbox 或专用卡片样式处理。
 */
.zuoekai-dropdown__item--checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * 为 checkbox 项中的真实内容容器分配剩余空间：
 * 这里只能命中实际承载文本/结构的节点，不能误命中隐藏 input，
 * 否则会出现月份项文字空白、文本区被挤压等问题。
 */
.zuoekai-dropdown__item--checkbox > .zuoekai-dropdown__item-label,
.zuoekai-dropdown__item--checkbox > .zuoekai-dropdown__item-content,
.zuoekai-dropdown__item--checkbox > span:not(.zuoekai-dropdown__checkbox):not(.zuoekai-dropdown__swatch):not(.zuoekai-dropdown__item-dot) {
  min-width: 0;
  flex: 1;
}

/* 自定义 Checkbox 容器 */
.zuoekai-dropdown__checkbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--zuoekai-color-border-strong);
  border-radius: 4px;
  margin-right: 8px; /* 与内容的间距 */
  background-color: var(--zuoekai-color-surface-page);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/*
 * checkbox 项内部由 gap 控制间距，
 * 因此这里去掉选择标识自身的 margin，避免双重间距导致视觉发散。
 */
.zuoekai-dropdown__item--checkbox .zuoekai-dropdown__checkbox {
  margin-right: 0;
}

.zuoekai-dropdown__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  min-width: 12px;
  flex: 0 0 12px;
  border-radius: 999px;
}

/*
 * Grid 下的 checkbox 项兼容规则：
 * 通用 .zuoekai-dropdown__grid .zuoekai-dropdown__item 默认是“垂直居中卡片”，
 * 但店铺/标记等多选项在 grid 场景下仍需要横向排列，因此这里单独覆盖。
 */
.zuoekai-dropdown__grid .zuoekai-dropdown__item--checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 10px;
  gap: 10px;
  min-width: 0;
}

/* Grid 中普通 checkbox 项的文本表现：允许自然换行并保持左对齐。 */
.zuoekai-dropdown__grid .zuoekai-dropdown__item--checkbox .zuoekai-dropdown__item-label {
  display: block;
  width: 100%;
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  color: inherit;
}

/*
 * 月份选择器专用卡片样式：
 * 月份不是普通“左框 + 文字”的多选项，因此单独抽成 __item--month。
 * 这类项使用卡片化表现，弱化 checkbox 痕迹，强化年份/月份层级与选中态。
 */
.zuoekai-dropdown__item--month {
  border: 1px solid var(--zuoekai-color-border);
  background: var(--zuoekai-color-surface-panel);
  box-shadow: none;
}

/* 月份卡片内部采用上下两行排版：上方年份、下方月份。 */
.zuoekai-dropdown__item--month .zuoekai-dropdown__item-content {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}

/* 年份为辅助信息，字号更小、颜色更弱。 */
.zuoekai-dropdown__item--month .zuoekai-dropdown__item-desc {
  margin-top: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--zuoekai-color-text-tertiary);
}

/* 月份主体突出显示，作为主要识别信息。 */
.zuoekai-dropdown__item--month .zuoekai-dropdown__item-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* 月份卡片不展示普通 checkbox 方框，视觉反馈完全交给卡片选中态。 */
.zuoekai-dropdown__item--month .zuoekai-dropdown__checkbox {
  display: none;
}

/* 月份卡片在 grid 中恢复为真正的卡片布局，而不是普通列表横排项。 */
.zuoekai-dropdown__grid .zuoekai-dropdown__item--month {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 10px 8px;
  gap: 0;
  text-align: center;
}

/* 月份卡片 hover / focus：给出轻量浮起和品牌色预提示。 */
.zuoekai-dropdown__grid .zuoekai-dropdown__item--month:hover,
.zuoekai-dropdown__grid .zuoekai-dropdown__item--month.zuoekai-dropdown__item--focused {
  border-color: var(--zuoekai-color-brand-300);
  background: var(--zuoekai-color-brand-50);
  box-shadow: var(--zuoekai-shadow-sm);
}

/* 月份卡片选中态：通过边框、背景渐变和阴影强化“已选中”的可感知性。 */
.zuoekai-dropdown__grid .zuoekai-dropdown__item--month.zuoekai-dropdown__item--selected {
  border-color: var(--zuoekai-color-brand-500);
  background: linear-gradient(180deg, var(--zuoekai-color-brand-50) 0%, rgba(99, 102, 241, 0.12) 100%);
  color: var(--zuoekai-color-brand-700);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.16), 0 8px 18px rgba(99, 102, 241, 0.12);
}

/* 选中后同步提升年份文字的品牌感，避免只有月份一处变化。 */
.zuoekai-dropdown__grid .zuoekai-dropdown__item--month.zuoekai-dropdown__item--selected .zuoekai-dropdown__item-desc {
  color: var(--zuoekai-color-brand-500);
}

/* --- 持股成分配置器分支 (Share Picker) --- */
/* 用于店铺配置场景：触发器全宽、面板宽度跟随容器、内容区以旧版 chip 配置器风格展示。 */
.zuoekai-dropdown--share-picker {
  position: relative;
}

.zuoekai-dropdown--share-picker .zuoekai-dropdown__trigger {
  min-height: 2.5rem;
  padding: 0.625rem 0.875rem;
}

.zuoekai-dropdown--share-picker .zuoekai-dropdown__trigger:hover {
  border-color: #d1d5db;
}

.zuoekai-dropdown--share-picker .zuoekai-dropdown__trigger:focus,
.zuoekai-dropdown--share-picker .zuoekai-dropdown__trigger:focus-visible {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.zuoekai-dropdown--share-picker .zuoekai-dropdown__panel {
  min-width: 100%;
  max-width: none;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.zuoekai-dropdown--share-picker .zuoekai-dropdown__body {
  padding: 8px;
  max-height: calc(3 * (2.5rem + 0.5rem) + 1rem);
}

.zuoekai-dropdown--share-picker .zuoekai-dropdown__footer {
  gap: 12px;
}

.zuoekai-dropdown__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zuoekai-dropdown__chip--share {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  gap: 0.375rem;
  padding: 0.6rem 1rem;
  justify-content: space-between;
  flex-wrap: nowrap;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  background: #ffffff;
  border: 1px solid #d1d5db;
  text-align: left;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: none;
  transform: none;
}

.zuoekai-dropdown__chip--share .zuoekai-dropdown__chip-header {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
}

.zuoekai-dropdown__chip--share .zuoekai-dropdown__chip-title {
  flex: 1;
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuoekai-dropdown__chip--share .zuoekai-dropdown__chip-content {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.zuoekai-dropdown__chip--share:hover {
  filter: brightness(0.98);
  border-color: #d1d5db;
  box-shadow: none;
  transform: none;
}

.zuoekai-dropdown__chip--share.zuoekai-dropdown__chip--selected {
  color: #ffffff;
  background-image: var(--zuoekai-gradient-primary);
  border-color: transparent;
  box-shadow: var(--zuoekai-primary-shadow);
}

.zuoekai-dropdown__share-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #a5b4fc;
  flex: none;
}

.zuoekai-dropdown__chip--share.zuoekai-dropdown__chip--selected .zuoekai-dropdown__share-dot {
  background: #ffffff;
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown__chip--share {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown__chip--share.zuoekai-dropdown__chip--selected {
  background-image: var(--zuoekai-gradient-primary);
  color: #ffffff;
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown--share-picker .zuoekai-dropdown__trigger {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown--share-picker .zuoekai-dropdown__trigger:hover {
  background: #374151;
}

label.zuoekai-dropdown__checkbox {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 12px;
  border-radius: var(--zuoekai-radius-md);
  cursor: pointer;
}

label.zuoekai-dropdown__checkbox:hover {
  background-color: var(--zuoekai-color-surface-hover);
}

label.zuoekai-dropdown__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  border-radius: 4px;
  border: 1px solid var(--zuoekai-color-border-strong);
  accent-color: var(--zuoekai-color-brand-600);
}

label.zuoekai-dropdown__checkbox input[type="checkbox"]:focus {
  outline: none;
  box-shadow: var(--zuoekai-focus-ring);
}

/* 选中状态 */
.zuoekai-dropdown__item--selected .zuoekai-dropdown__checkbox,
.zuoekai-dropdown__checkbox--checked {
  background-color: var(--zuoekai-color-brand-600);
  border-color: var(--zuoekai-color-brand-600);
}

/* 勾选图标 (纯CSS实现) */
.zuoekai-dropdown__checkbox::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  top: 2px;
}

.zuoekai-dropdown__item--selected .zuoekai-dropdown__checkbox::after,
.zuoekai-dropdown__checkbox--checked::after {
  transform: rotate(45deg) scale(1);
}

/* --- 功能扩展：Chip/豆腐块模式 (Rich Selection) --- */
/* 通常配合 .zuoekai-dropdown__grid 使用 */

.zuoekai-dropdown__chip {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background-color: var(--zuoekai-color-surface-page);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  height: 100%; /* 在 Grid 中撑满高度 */
  text-align: left; /* 默认左对齐，不同于普通 Grid item 的居中 */
  gap: 8px;
}

/* 悬停效果 */
.zuoekai-dropdown__chip:hover {
  border-color: var(--zuoekai-color-brand-300);
  box-shadow: var(--zuoekai-shadow-sm);
  transform: translateY(-1px);
}

/* 选中效果 */
.zuoekai-dropdown__chip--selected {
  background-color: var(--zuoekai-color-brand-50);
  border-color: var(--zuoekai-color-brand-500);
  box-shadow: 0 0 0 1px var(--zuoekai-color-brand-500); /* 模拟加粗边框 */
}

/* Chip 头部 (图标 + 标题) */
.zuoekai-dropdown__chip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.zuoekai-dropdown__chip-icon {
  width: 20px;
  height: 20px;
  color: var(--zuoekai-color-text-tertiary);
}

.zuoekai-dropdown__chip--selected .zuoekai-dropdown__chip-icon {
  color: var(--zuoekai-color-brand-600);
}

.zuoekai-dropdown__chip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--zuoekai-color-text);
  flex: 1;
}

/* Chip 内容 (数值/描述) */
.zuoekai-dropdown__chip-content {
  font-size: 12px;
  color: var(--zuoekai-color-text-secondary);
  line-height: 1.4;
}

/* Chip 状态指示点 */
.zuoekai-dropdown__chip-status {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--zuoekai-color-border-strong);
}

.zuoekai-dropdown__chip-status--active {
  background-color: var(--zuoekai-color-success-600);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

/* --- 暗色模式适配扩展 --- */
[data-zuoekai-mode="dark"] .zuoekai-dropdown__checkbox {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown__chip {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown__chip:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--zuoekai-color-brand-400);
}

[data-zuoekai-mode="dark"] .zuoekai-dropdown__chip--selected {
  background-color: rgba(99, 102, 241, 0.15); /* Brand-500 alpha */
  border-color: var(--zuoekai-color-brand-400);
  box-shadow: 0 0 0 1px var(--zuoekai-color-brand-400);
}