/**
 * 内置前台语言切换器（浮动挂件）
 *
 * 配色走 CSS 变量：深色主题跟随 <html data-bs-theme="dark">（webcms 模板与
 * 宿主 theme-boot.js 都会打这个属性），模板没打主题属性时退回系统配色偏好。
 * 拖动后的位置由 switcher.js 写内联 style（right/bottom），localStorage 记忆。
 */

.mci-lang-switcher {
    --ls-surface: #ffffff;
    --ls-border: rgba(0, 0, 0, .12);
    --ls-text: #212529;
    --ls-muted: #6c757d;
    --ls-hover: rgba(0, 0, 0, .05);
    --ls-active: rgba(13, 110, 253, .12);
    --ls-active-text: #0d6efd;
    --ls-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);

    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--ls-text);
    user-select: none;
}

[data-bs-theme="dark"] .mci-lang-switcher,
[data-wc-theme="dark"] .mci-lang-switcher,
[data-layout-mode="dark"] .mci-lang-switcher {
    --ls-surface: #1e2733;
    --ls-border: rgba(255, 255, 255, .14);
    --ls-text: #e9ecef;
    --ls-muted: #adb5bd;
    --ls-hover: rgba(255, 255, 255, .08);
    --ls-active: rgba(91, 140, 255, .2);
    --ls-active-text: #8fb2ff;
    --ls-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
    html:not([data-bs-theme="light"]):not([data-wc-theme="light"]):not([data-layout-mode="light"]) .mci-lang-switcher {
        --ls-surface: #1e2733;
        --ls-border: rgba(255, 255, 255, .14);
        --ls-text: #e9ecef;
        --ls-muted: #adb5bd;
        --ls-hover: rgba(255, 255, 255, .08);
        --ls-active: rgba(91, 140, 255, .2);
        --ls-active-text: #8fb2ff;
        --ls-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
    }
}

.mci-ls-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border: 1px solid var(--ls-border);
    border-radius: 2rem;
    background: var(--ls-surface);
    color: var(--ls-text);
    box-shadow: var(--ls-shadow);
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
    touch-action: none; /* 拖动要接管指针，别让浏览器抢去滚动 */
}

.mci-ls-btn:focus-visible {
    outline: 2px solid var(--ls-active-text);
    outline-offset: 2px;
}

.mci-ls-flag {
    width: 22px;
    height: auto;
    border-radius: 2px;
    flex: none;
}

.mci-ls-caret {
    color: var(--ls-muted);
    font-size: .75em;
    transition: transform .15s ease;
}

.mci-lang-switcher.is-open .mci-ls-caret {
    transform: rotate(180deg);
}

.mci-ls-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + .5rem);
    min-width: 10rem;
    /* 高度上限跟着视口走（70%），超出出滚动条；dvh 兜底移动浏览器地址栏伸缩 */
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 菜单滚到底别把页面带着滚 */
    max-width: calc(100vw - 1rem);  /* 任何情况下不顶出视口右边 */
    overflow-x: hidden;
    padding: .35rem;
    border: 1px solid var(--ls-border);
    border-radius: .6rem;
    background: var(--ls-surface);
    box-shadow: var(--ls-shadow);
    display: none;
}

/* 语言多到一定程度：内容本身够高时给一个 200px 的最小高度，
   避免用户缩放窗口时 70vh 算出的上限过小把菜单压成一条缝 */
.mci-ls-menu.is-multi {
    min-height: 200px;
}

/* 宽屏 + 语言 ≥6 自动两列、≥13 三列（服务端按数量打 is-cols-* 类）；
   窄屏由后面的媒体查询收回单列，不按列排 */
@media (min-width: 992px) {
    .mci-ls-menu.is-cols-2 {
        columns: 2;
        column-gap: .25rem;
        min-width: 19rem;
    }

    .mci-ls-menu.is-cols-3 {
        columns: 3;
        column-gap: .25rem;
        min-width: 27rem;
    }

    .mci-ls-menu.is-cols-2 .mci-ls-item,
    .mci-ls-menu.is-cols-3 .mci-ls-item {
        break-inside: avoid;        /* 条目不被列缝切成两半 */
    }
}

/* 贴住视口上半截时向下展开，避免菜单顶出屏幕 */
.mci-lang-switcher.is-flipped .mci-ls-menu {
    bottom: auto;
    top: calc(100% + .5rem);
}

.mci-lang-switcher.is-open .mci-ls-menu {
    display: block;
}

.mci-ls-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: .4rem;
    color: var(--ls-text);
    text-decoration: none;
    white-space: nowrap;
}

.mci-ls-item:hover,
.mci-ls-item:focus-visible {
    background: var(--ls-hover);
    color: var(--ls-text);
    text-decoration: none;
}

.mci-ls-item.is-active {
    background: var(--ls-active);
    color: var(--ls-active-text);
    font-weight: 600;
}

/* 拖动过程中：菜单收起、指针统一 */
.mci-lang-switcher.is-dragging {
    cursor: grabbing;
}

/* 窄屏收成圆形按钮：只留旗帜（没有旗帜的语言显示名称首字） */
@media (max-width: 991.98px) {
    .mci-lang-switcher {
        right: 1rem;
        bottom: 1rem;
    }

    .mci-ls-btn {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .mci-ls-current,
    .mci-ls-caret {
        display: none;
    }
}

/* ── 内嵌 bar 变体（模板 tLangBar() 输出，顶栏等位置）──────────────
   只给骨架：随文档流走、不固定、不可拖，菜单向下展开。
   融入站点（配色/尺寸/窄屏形态）由站点 CSS 覆盖 --ls-* 变量
   与下面这些选择器完成，插件不管长什么样。 */

.mci-lang-switcher--bar {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: auto;
    display: inline-block;
}

.mci-lang-switcher--bar .mci-ls-btn {
    box-shadow: none;
    border-radius: .5rem;
    touch-action: manipulation; /* 不拖动，把滚动手势还给浏览器 */
}

.mci-lang-switcher--bar .mci-ls-menu {
    top: calc(100% + .4rem);
    bottom: auto;
}

/* 顶栏里的 bar 不参与浮动挂件的窄屏圆形按钮规则 */
@media (max-width: 991.98px) {
    .mci-lang-switcher--bar {
        right: auto;
        bottom: auto;
    }

    .mci-lang-switcher--bar .mci-ls-btn {
        width: auto;
        height: auto;
        padding: .45rem .75rem;
        justify-content: flex-start;
        border-radius: .5rem;
    }

    .mci-lang-switcher--bar .mci-ls-current,
    .mci-lang-switcher--bar .mci-ls-caret {
        display: inline;
    }
}