/* ==========================================================================
   Zuoekai UI - Popover (气泡弹窗)
   ========================================================================== */

/* 容器基础样式 */
.zuoekai-popover {
  position: absolute;
  z-index: var(--zuoekai-z-popover, 1600);
  display: none; /* 默认隐藏 */
  
  /* 初始状态用于动画 */
  opacity: 0;
  transform: scale(0.95);
  transition: 
    opacity var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    transform var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out);
    
  /* 确保点击事件可用 */
  pointer-events: none; 
}

/* 显示状态 */
.zuoekai-popover--visible {
  display: block;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* 内容区域 */
.zuoekai-popover__content {
  background: var(--zuoekai-color-surface-float);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-lg);
  box-shadow: var(--zuoekai-shadow-lg);
  padding: 12px;
  min-width: 120px;
  max-width: 320px;
  
  /* 磨砂玻璃效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  color: var(--zuoekai-color-text);
  font-size: 14px;
}

/* 箭头 - 纯CSS实现 */
.zuoekai-popover__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--zuoekai-color-surface-float);
  border: 1px solid var(--zuoekai-color-border);
  transform: rotate(45deg);
  z-index: -1; /* 位于内容下方 */
}

/* 箭头位置修饰符 - 假设 Popover 在上方 */
.zuoekai-popover--top .zuoekai-popover__arrow {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  border-top: 0;
  border-left: 0;
}

/* 箭头位置修饰符 - 假设 Popover 在下方 */
.zuoekai-popover--bottom .zuoekai-popover__arrow {
  top: -6px;
  left: 50%;
  margin-left: -6px;
  border-bottom: 0;
  border-right: 0;
}

/* 预设的主题选择器样式 (作为 Popover 内容的示例) */
.zuoekai-theme-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.zuoekai-theme-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}

.zuoekai-theme-option:hover {
  transform: scale(1.1);
}

.zuoekai-theme-option--active {
  border-color: var(--zuoekai-color-text);
  box-shadow: 0 0 0 2px var(--zuoekai-color-surface), 0 0 0 4px var(--zuoekai-color-primary);
}

/* --- Popover 内部布局组件 --- */

/* 分区标题 */
.zuoekai-popover__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--zuoekai-color-text-secondary);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 分区容器 */
.zuoekai-popover__section {
  margin-bottom: 16px;
}

.zuoekai-popover__section:last-child {
  margin-bottom: 0;
}

/* 行布局 (Label + Control) */
.zuoekai-popover__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* --- 组件：分段控制器 (Segment Control) --- */
.zuoekai-segment-control {
  display: flex;
  background: var(--zuoekai-color-border); /* 这里的 border 颜色较浅，作为轨道背景 */
  padding: 2px;
  border-radius: var(--zuoekai-radius-md);
  position: relative;
  user-select: none;
}

.zuoekai-segment-item {
  flex: 1;
  text-align: center;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--zuoekai-color-text-secondary);
  cursor: pointer;
  border-radius: var(--zuoekai-radius-sm);
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.zuoekai-segment-item:hover {
  color: var(--zuoekai-color-text);
}

.zuoekai-segment-item--active {
  color: var(--zuoekai-color-text);
  font-weight: 500;
  background: var(--zuoekai-color-surface-panel);
  box-shadow: var(--zuoekai-shadow-sm);
}

/* --- 组件：开关 (Toggle Switch) --- */
.zuoekai-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--zuoekai-color-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.zuoekai-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.zuoekai-toggle--active {
  background: var(--zuoekai-color-brand-500);
}

.zuoekai-toggle--active::after {
  transform: translateX(16px);
}

/* --- 组件：菜单列表 (Menu List) --- */
.zuoekai-menu-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  margin: -4px -4px; /* 抵消 content 的 padding，如果需要全宽 */
  /* 或者，如果作为 content 的一部分，可以正常 margin */
  margin: 0;
}

/* 修正：如果直接在 content 中使用 menu-list，我们希望它贴边或者有合适的间距 */
/* 这里假设它是 content 的直接子元素，或者在 section 中 */

.zuoekai-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--zuoekai-radius-md);
  transition: background 0.2s ease;
  color: var(--zuoekai-color-text);
  font-size: 14px;
  text-decoration: none; /* 假如是 a 标签 */
}

.zuoekai-menu-item:hover {
  background: var(--zuoekai-color-surface-hover);
}

.zuoekai-menu-item--active {
  background: var(--zuoekai-color-surface-panel);
  color: var(--zuoekai-color-brand-600);
  font-weight: 500;
}

.zuoekai-menu-item__icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: var(--zuoekai-color-text-tertiary);
  transition: color 0.2s ease;
}

.zuoekai-menu-item:hover .zuoekai-menu-item__icon,
.zuoekai-menu-item--active .zuoekai-menu-item__icon {
  color: inherit;
}

.zuoekai-menu-item__label {
  flex: 1;
}

.zuoekai-menu-item__shortcut {
  font-size: 12px;
  color: var(--zuoekai-color-text-tertiary);
  margin-left: 12px;
}

/* --- 组件：分割线 --- */
.zuoekai-popover-divider {
  height: 1px;
  background: var(--zuoekai-color-border);
  margin: 4px 0;
}

/* ==========================================================================
   响应式适配 - 小屏幕设备
   在 640px 以下，气泡弹窗内容区放宽至接近满屏宽度，
   防止内容溢出或被截断。
   ========================================================================== */
@media (max-width: 640px) {
  /* 小屏幕下内容区最大宽度放宽，确保不溢出视口 */
  .zuoekai-popover__content {
    max-width: calc(100vw - 32px);
    min-width: 0;
  }

  /* 主题选择器在小屏幕下改为 2 列，增大触摸区域 */
  .zuoekai-theme-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* 主题色块在小屏幕下稍微放大，方便触摸 */
  .zuoekai-theme-option {
    width: 32px;
    height: 32px;
  }
}