@media screen and (max-width: 768px) {
    .yf-language-switch {
        top: 10px !important;
        right: 10px !important;
    }
}

@media screen and (min-width: 768px) {
    /* 桌面设备样式 */
}

.yf-language-switch {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99999;
    display: none; /* 初始隐藏，JS 初始化完成后加 .yf-ready 显示 */
    font-size:12px;
}

/* 显隐由 class 控制而非 JS 写行内 style：
   行内样式优先级过高，模板想把语言栏改成 inline-flex 嵌进导航栏时
   得用 !important 才能压过它 */
.yf-language-switch.yf-ready {
    display: block;
}

/* 只有可拖动的浮动实例才显示移动光标，嵌入导航栏的实例保持默认 */
.yf-language-switch.yf-draggable {
    cursor: move;
}

.yf-dropdown {
    position: relative;
}

.yf-btn {
    background: #007bff;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.yf-dropdown-menu {
    position: absolute;
    top: 100%;
    /*right: 0;*/
    display: none;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    max-height: 300px;
}

.yf-dropdown-menu.show {
    display: block;
}

.yf-dropdown-item {
    padding: 8px 5px;
    display: block;
    align-items: center;
    text-decoration: none;
    color: black;
    transition: background 0.3s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.yf-dropdown-item:hover {
    background: #f0f0f0;
}

/* 当前语言高亮 */
.yf-dropdown-item.yf-current {
    background: #f0f0f0;
    font-weight: 600;
}

/* 用 .yf-btn 而非 #language-btn：同页多实例时第二个实例的按钮
   ID 是 language-btn-1，按 ID 写会漏掉。#language-btn 保留兼容老页面 */
.yf-dropdown-item img, .yf-btn img, #language-btn img {
    margin-right: 8px;
    display: inline-block;
}

/* 触摸设备（含大屏平板）：切换器固定在右上角且不可拖动，
   菜单必须右对齐并限宽，否则语言名较长时会向右溢出视口，超出部分点不到。
   条件与 app.js 中 supportsHover 的判断保持一致。
   放在文件末尾，否则同特异性下会被上面的基础规则覆盖 */
@media screen and (max-width: 768px), (hover: none) {
    .yf-dropdown-menu {
        right: 0;
        left: auto;
        max-width: calc(100vw - 20px);
    }

    /* 触摸目标偏小容易点空，加大点击区域 */
    .yf-dropdown-item {
        padding: 10px 12px;
    }
}