/* ============================================================================
   自定义底图选择器（js/basemap-picker.js 的样式）
   按钮挂载于右下角 #camera-controls 列顶部，规格与 .ctrl-btn 完全一致，
   全程使用主题变量，深浅色自动跟随。
   ============================================================================ */

/* 挂载在右下角 #camera-controls 按钮列顶部（JS 注入为第一个子元素），
   借用父容器的 flex 列布局与 12px gap，与指南针等按钮纵向对齐、间距一致。
   菜单为绝对定位（脱离文档流），不影响列内间距。 */
#basemapPicker {
    position: relative;
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ---------- 按钮：与 .ctrl-btn 同规格 ---------- */
#basemapBtn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    padding: 0;
    touch-action: manipulation;
}

#basemapBtn svg {
    width: 24px;
    height: 24px;
    display: block;
}

#basemapBtn:hover {
    color: var(--text-primary);
}

#basemapBtn:active {
    transform: scale(0.92);
}

/* 菜单展开时按钮点亮 */
#basemapBtn.active {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-soft);
}

/* ---------- 菜单：纵向单列、可滚动、毛玻璃 ----------
   菜单位于整个按钮列的左侧，向左伸出 12px 间距。
   垂直位置：以「触发按钮的横向中心线」为基准居中 ——
     按钮高 48px，#basemapBtn 是 #basemapPicker 的子元素，
     其中心距 pickerRoot 顶部 24px；菜单 top:24px + translateY(-50%)
     即让菜单自身的垂直中点落在按钮中心线上。
   菜单高于可用空间时内部滚动（见 max-height）。 */
.basemap-menu {
    position: absolute;
    /* 24px = 按钮高 48 的一半；配合 translateY(-50%) 实现垂直居中对齐按钮 */
    top: 24px;
    right: calc(100% + 12px);
    width: 96px;
    /* 可用高度：菜单以按钮中心线居中，向上/向下各需一半高度。
       实测按钮中心恒距视口底部 360px，故"中心到视口顶" = 100vh - 360px。
       要留 16px 顶边距：max-height/2 <= 100vh - 376
                        => max-height <= 2*(100vh - 376px)
       矮屏（横屏）下这一项生效，避免菜单顶部越出屏幕（菜单变短并内部滚动）。
       max() 兜底：100vh 很小时不让结果为负（负的 max-height 非法）。 */
    max-height: min(440px, 60vh, max(140px, calc(2 * (100vh - 376px))));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-radius: 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* 展开动画：从按钮一侧轻微缩放浮现。
       注意 transform 里必须同时保留 translateY(-50%) 的居中偏移，
       否则动画会把居中定位覆盖掉。 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(8px) scale(0.94);
    transform-origin: right center;
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.22s;
    pointer-events: none;
}

.basemap-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    transition:
        opacity 0.22s ease-out,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

/* 菜单展开期间，把宿主按钮列抬到最上层（--z-menu 为全局最高层级），
   避免菜单被头部悬浮栏 / 可展开面板（--z-floating）遮挡 */
#camera-controls.basemap-open {
    z-index: var(--z-menu);
}

/* 细滚动条，与玻璃风格融合 */
.basemap-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

.basemap-menu::-webkit-scrollbar {
    width: 4px;
}

.basemap-menu::-webkit-scrollbar-track {
    background: transparent;
}

.basemap-menu::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 2px;
}

/* ---------- 菜单项：方形图源预览 + 下方名称 ---------- */
.basemap-item {
    background: transparent;
    border: none;
    padding: 7px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 12px;
    font-family: inherit;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.basemap-item:hover {
    background: var(--glass-bg-strong);
}

.basemap-item:active {
    transform: scale(0.96);
}

.basemap-item-icon {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* 当前选中的图源：accent 色描边环 */
.basemap-item.selected .basemap-item-icon {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.basemap-item-name {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-secondary);
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basemap-item.selected .basemap-item-name {
    color: var(--accent-text);
    font-weight: 500;
}

/* 加载中：图标轻微呼吸，提示正在换图 */
.basemap-item.loading .basemap-item-icon {
    animation: basemap-loading 1s ease-in-out infinite;
}

@keyframes basemap-loading {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ---------- 移动端（<=600px） ---------- */
@media (max-width: 600px) {
    /* 菜单现在以按钮中心线居中展开，可用高度受"按钮中心到屏幕上下边缘"约束。
       移动端底部托盘会占掉下方空间，故高度再收一档，保证居中后不越界。 */
    .basemap-menu {
        max-height: min(380px, 52vh);
    }
}

/* 图标的长按保存/选中保护由 base.css 的全局 img 规则统一处理：
   pointer-events: none 让点击穿透到菜单项按钮，长按保存无从触发 */