/* 第 29 章：全站玻璃下拉（glass select）
   - 原生 <select data-dropdown> 仍是状态真源：视觉隐藏，但仍可 focus / 程序化赋值 / selectOption / 派发 change
   - 自绘 trigger 顶替它的外观（沿用宿主页给 select 的 class / id 样式，避免布局位移）；
     选项面板 portal 到 <body>，用 position:fixed 绘制，绕开宿主容器的 overflow / transform 裁切
   - 菜单里的选项按钮与触发按钮同宽（仅当最长选项单行放不下时才让选项略宽一点）；
     面板边框再宽出自身 padding + border 一圈（18px），把选项按钮"框"在里面（见 dropdown.js place()）
   - 面板材质默认与主页「图库」菜单一致；若宿主页自带玻璃 token（--glass-*，AI / 云盘），
     自动复用该页材质（见 :root 的 var() 回退链），免得在浅色页面上玻璃糊成一片
   - 能力闸门：backdrop-filter 或 position:fixed 任一不支持 → dropdown.js 不接管，直接用系统原生选择器
   - 手动开关：?dropdown=native（持久化）/ ?dropdown=glass 撤销；长按 450ms 或 Alt+点击可单次直达系统选择器 */

:root {
  --gsel-probe: 1; /* 「样式已加载」哨兵，dropdown.js 用它决定是否接管 */
  --gsel-bg: var(--glass-bg, rgba(255, 255, 255, 0.1));
  --gsel-border: var(--glass-border, rgba(255, 255, 255, 0.2));
  --gsel-hi: var(--glass-soft, rgba(255, 255, 255, 0.22));
  --gsel-hi-on: var(--glass-bg-strong, rgba(255, 255, 255, 0.3));
  --gsel-shadow: var(--glass-shadow-strong, 0 15px 50px rgba(0, 0, 0, 0.3));
  --gsel-blur: var(--blur, blur(20px));
  --gsel-fs: 15px; /* 面板字号默认值；dropdown.js 按 trigger 字号覆写 */
}

html[data-theme="dark"] {
  --gsel-bg: var(--glass-bg, rgba(28, 28, 30, 0.6));
  --gsel-border: var(--glass-border, rgba(255, 255, 255, 0.16));
  --gsel-hi: var(--glass-soft, rgba(255, 255, 255, 0.12));
  --gsel-hi-on: var(--glass-bg-strong, rgba(255, 255, 255, 0.2));
  --gsel-shadow: var(--glass-shadow-strong, 0 16px 44px rgba(0, 0, 0, 0.5));
}

.gsel-probe { position: fixed; }

/* 被接管后隐藏的原生 select：留在渲染树里（showPicker / 无障碍 / 程序化赋值都不受影响），
   只是裁到 1×1 且不可点 */
.gsel-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  opacity: 0.001; pointer-events: none;
}

.gsel-trigger {
  font: inherit;
  color: inherit;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  text-align: left;
  background: var(--gsel-bg);
  -webkit-backdrop-filter: var(--gsel-blur);
  backdrop-filter: var(--gsel-blur);
  border: 1px solid var(--gsel-border);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  touch-action: manipulation;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.gsel-trigger[aria-expanded="true"] { background: var(--gsel-hi-on); }
.gsel-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.gsel-trigger .gsel-caret {
  width: 8px; height: 8px; flex: none; opacity: 0.75;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.gsel-trigger[aria-expanded="true"] .gsel-caret {
  transform: rotate(-135deg) translate(-3px, -1px);
}

.gsel-panel {
  position: fixed;
  /* 必须高于图库首屏的固定层（#footerTip 10000 / #homeButton 10001 / #loading-indicator 10010）：
     相册仍在加载缩略图时点开下拉，居中显示的加载卡片会正好压住面板中心，
     自检 elementFromPoint 命中的就不是面板 → 会被误判为"覆盖"而降级成系统原生控件。
     10100 仍低于各页灯箱（50000）与管理员遮罩（99999），灯箱 / 遮罩打开时面板本就已关闭。 */
  z-index: 10100;
  left: 0;
  top: 0;
  /* 面板宽度由 dropdown.js 写成内联 px（= 选项按钮宽 + 本元素左右 padding/border，所以边框会比
     选项按钮宽出一圈）。这里必须 border-box：cloud.css / ai.css 有 `* { box-sizing: border-box }`，
     home / gallery 没有 —— 不锁死的话，同一套宽度规则在不同页会差出一个 padding + border
     （实测 103 → 121），「最长选项排得下」的算法也会跟着偏。 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 内边距即上面说的「外框」：8px + 1px border = 每侧 9px，面板因此比里面的选项按钮宽 18px。
     保持第 29 版收窄后的 8px —— 外框本身也要占宽度，小一点长选项「System」「DeepSeek Flash」
     才能维持单行 */
  padding: 8px;
  border-radius: 24px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--gsel-bg);
  -webkit-backdrop-filter: var(--gsel-blur);
  backdrop-filter: var(--gsel-blur);
  border: 1px solid var(--gsel-border);
  box-shadow: var(--gsel-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease; /* 关闭时轻微淡出；展开由下面的动画负责 */
  /* 展开动画与主页「图库」菜单同款：从按钮方向 scaleY 展开 + 淡入 */
  transform-origin: top center;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
  touch-action: manipulation;
}

@keyframes gselSlideDownFadeIn {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* 向下放不下时（dropdown.js place() 翻转）改从下往上展开 */
.gsel-panel[data-dir="up"] { transform-origin: bottom center; }

.gsel-panel.open {
  opacity: 1;
  pointer-events: auto;
  animation-name: gselSlideDownFadeIn;
}

.gsel-opt {
  font: inherit;
  font-size: var(--gsel-fs);
  color: inherit;
  cursor: pointer;
  display: block;
  /* width:100% = 面板内容宽 = 选项按钮宽（面板宽度是它 + 外框 18px）。这里显式锁 border-box：
     按钮虽然 UA 默认就是 border-box，但显式写出后三引擎几何一致，宽度算法不必按浏览器分叉 */
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 1.15em;
  padding: 0.75em 0.8em;
  touch-action: manipulation;
}

/* 兜底：字号已缩到下限仍放不下的超长选项 → 允许折行，绝不溢出 / 裁切面板 */
.gsel-panel.gsel-tight .gsel-opt { white-space: normal; overflow-wrap: anywhere; }

.gsel-opt:hover, .gsel-opt.hi { background: var(--gsel-hi); }
.gsel-opt[aria-selected="true"] { background: var(--gsel-hi-on); font-weight: 600; }

/* Windows 高对比度 / iOS 强制配色：玻璃在强制色下可能整块不可见 → 交回系统色 */
@media (forced-colors: active) {
  .gsel-panel, .gsel-trigger {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .gsel-opt[aria-selected="true"], .gsel-opt.hi { background: Highlight; color: HighlightText; }
}

@media (prefers-reduced-motion: reduce) {
  .gsel-panel { transition: none; animation: none; }
}
