/* ============================================================
   LangSwitcher · 统一语言切换组件样式 (手风琴版)
   创建: 2026-06-18 Hermes (A 路线)
   替换 4 个 HTML 里各自的 LangSwitcher 实现

   3 块实现 (按用户方案):
     1. 滑块定位 (JS 算 left/width, CSS 只负责 transition)
     2. 弹性过渡 (cubic-bezier 1.56 overshoot, iOS 弹性)
     3. 国旗色彩 (inline SVG radialGradient, active 切高/低饱和)

   视觉:
     - 容器: Neumorphism 双层 boxShadow (近 + 远)
     - 滑块: 蓝底 (3b82f6) + 蓝阴影
     - 按钮: 未选灰字, 选中白字
   ============================================================ */

/* ===== 外层容器: 负责定位 + 让 X 按钮可绝对定位 ===== */
.lang-switcher-outer {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 2147483647;
    display: inline-flex;
    align-items: center;
    cursor: grab;              /* 2026-06-19 拖动反馈 — 学紫色音乐按钮 */
    touch-action: none;        /* iOS Safari 防拖动时 scroll 抢手势 */
    -webkit-touch-callout: none;
}
.lang-switcher-outer:active,
.lang-switcher-outer.dragging {
    cursor: grabbing;
}

/* ===== 容器: 默认收起成圆形入口(左下角悬浮) ===== */
.lang-switcher-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 9999px;        /* 整个面板是椭圆形 (圆角 = 半高) */
    padding: 4px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
    user-select: none;
    -webkit-user-select: none;
    /* 收起态: 50x50 圆形入口,溢出隐藏 */
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    transition:
        width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
    justify-content: center;
}

/* hover 时整个手风琴浮起: 但保持和 active 视觉一致 — 只是稍微浮起来一点, 别再叠额外颜色 */
.lang-switcher-wrap:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

/* 展开态: 容器撑开到适应所有按钮 */
.lang-switcher-wrap.expanded {
    width: auto;
    height: 50px;
    cursor: default;
}

/* ===== 滑块: 绝对定位, JS 算 left/width = 椭圆 pill 跟着"选中"那个按钮 ===== */
.lang-switcher-knob {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    background: #fce7f3;                              /* pink-100 — 跟 hover 同一个色 */
    border-radius: 9999px;                            /* 椭圆 */
    /* 去掉 1px inset 描边, 让选中态与 hover 视觉像素一致 */
    z-index: 0;
    pointer-events: none;
    /* 弹性过渡: cubic-bezier 1.56 超过 1, 代表"冲过终点再弹回" */
    transition:
        left 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.2s ease;
    opacity: 0;
}

.lang-switcher-knob.ready {
    opacity: 1;
}

/* ===== 按钮: 在滑块之上, 默认灰字, 选中白字 ===== */
.lang-switcher-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    min-height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #475569;  /* slate-600: 默认态用偏冷的深灰蓝, 比纯灰更耐看 */
    white-space: nowrap;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    /* 展开态按钮: 默认 display:none 完全移除 (收起时容器不会被撑开) */
    display: none;
    opacity: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    padding-left: 14px;
    padding-right: 14px;
    overflow: hidden;
    /* v3.4.2 简化: 只过渡颜色 + 背景色, 没那些花活 */
    transition:
        opacity 0.2s ease 0.1s,
        color 0.18s ease,
        background-color 0.18s ease;
}

.lang-switcher-btn:focus,
.lang-switcher-btn:focus-visible,
.lang-switcher-toggle:focus,
.lang-switcher-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

/* 展开态: 按钮显隐 + 淡入 */
.lang-switcher-wrap.expanded .lang-switcher-btn {
    display: inline-flex;
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
}

/* === 非选中 hover: 浅粉椭圆 pill, 跟"选中"那个样式完全统一 ===
   * hover 时: 文字色变深粉 + 底色变浅粉, 不再 transform, 不再叠阴影
   * 整个按钮自动继承 wrap 的 border-radius: 9999px, 自然就是椭圆 */
.lang-switcher-btn:hover:not(.active) {
    color: #831843;            /* pink-900, 在浅粉底上有强对比 */
    background: #fce7f3;        /* pink-100, 和 .lang-switcher-knob 同一个浅粉 */
}

/* (v3.4.2: hover 不再放大/旋转国旗, 不再字距, 保持静态统一) */


.lang-switcher-btn.active {
    color: #831843;            /* pink-900, 在浅粉底 (knob) 上可读 */
    background: transparent;
    box-shadow: none;
}

/* === 当前语言 hover: === 跟"未选中 hover"完全同一套浅粉椭圆, 不再叠额外效果 ===
   关键: 选中态本来就有 knob (浅粉椭圆) 在身下, hover 时再叠效果就会"花".
   所以现在 .active:hover 跟 .active 是同一组规则, 视觉跟非选中 hover 一致. */
.lang-switcher-btn.active:hover {
    color: #831843;
    background: transparent;     /* knob 已经在身下, 不需要自加底色 */
}

/* 在 .active 状态下, 关掉 iOS 的 tap 高亮留下的方块, 让呼吸环看起来更干净 */
.lang-switcher-btn.active {
    -webkit-tap-highlight-color: rgba(252, 231, 243, 0.6);
}

/* ===== 国旗: 18x18 圆形, radialGradient ===== */
.lang-switcher-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lang-switcher-btn.active .lang-switcher-flag {
    box-shadow: none;
    filter: saturate(1.1);
}

.lang-switcher-btn.active .lang-switcher-label {
    color: #831843;
}

/* ===== 文字 label: 展开时显隐 ===== */
.lang-switcher-label {
    /* 展开时才显示 */
    display: inline;
    transition: letter-spacing 0.2s ease;
}

/* ===== 收起态入口: 显示当前语言圆形按钮 ===== */
.lang-switcher-toggle {
    position: relative;
    z-index: 2;
    display: flex;            /* flex 而非 inline-flex, 撑满父容器 */
    align-items: center;
    justify-content: center;
    width: 100%;              /* 占满 wrap 减去 padding 的内部空间 */
    height: 100%;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    padding: 0;               /* 去掉浏览器默认 button padding */
    margin: 0;
    box-sizing: border-box !important;  /* 覆盖 UA 默认 content-box,精确居中 */
    -webkit-appearance: none;  /* 去掉 iOS button 默认样式 */
    appearance: none;
}

.lang-switcher-toggle .lang-switcher-flag {
    display: block;
    width: 26px;
    height: 26px;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    margin: 0 auto;
}

/* 展开时隐藏入口 */
.lang-switcher-wrap.expanded .lang-switcher-toggle {
    display: none;
}

/* ===== 隐藏模式 (compact: 只显示国旗, 不显示文字) — 保持兼容 ===== */
.lang-switcher-wrap.compact .lang-switcher-btn {
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
}

/* ===== Dark mode 适配 ===== */
@media (prefers-color-scheme: dark) {
    .lang-switcher-wrap {
        background: #1f2937;
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.3),
            0 1px 3px rgba(0, 0, 0, 0.2);
    }
    .lang-switcher-btn {
        color: #9ca3af;
    }
    .lang-switcher-btn:hover:not(.active) {
        color: #fbcfe8;        /* pink-200, 浅粉在深底上仍然优雅 */
    }
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .lang-switcher-outer {
        bottom: 20px;
        left: 20px;
    }
    .lang-switcher-wrap {
        width: 46px;
        height: 46px;
    }
    .lang-switcher-wrap.expanded {
        height: 46px;
    }
    /* 移动端 .lang-switcher-toggle 继承桌面端 width:100% height:100% */
    /* 不写死 38px,让 wrap padding 4px 自动算内部尺寸 (46-8=38) */
    .lang-switcher-btn {
        padding: 5px 10px;
        min-height: 30px;
        font-size: 12px;
    }
    .lang-switcher-wrap.compact .lang-switcher-btn {
        min-width: 30px;
        min-height: 30px;
    }
    .lang-switcher-flag {
        width: 16px;
        height: 16px;
    }
    .lang-switcher-toggle .lang-switcher-flag {
        width: 20px;
        height: 20px;
    }
    /* 移动端 X 按钮更小 */
    .fab-close-btn {
        width: 16px;
        height: 16px;
        top: -3px;
        right: -3px;
    }
    .fab-close-btn svg {
        width: 8px;
        height: 8px;
    }
}

/* ===== 减少动画模式 ===== */
@media (prefers-reduced-motion: reduce) {
    .lang-switcher-wrap,
    .lang-switcher-knob,
    .lang-switcher-btn {
        transition-duration: 0.1s !important;
    }
}