/**
 * 灵休 · 液态玻璃 —— 浮层：弹窗/底部面板、下拉菜单、Toast、加载遮罩
 *
 * 弹窗、Toast 的标记是由 common.js / responsive.js 生成的，没法加 .lg-glass，
 * 所以这里用选择器把同一套玻璃配方（与 material.css 保持一致）套上去。
 * 要点：
 *   - 遮罩 .modal-overlay 只负责变暗，不能有 opacity / filter，否则它会成为“背景根”，
 *     里面的玻璃面板就看不到页面、模糊失效。显隐用 background + visibility 过渡。
 *   - 下拉菜单的父级（顶栏）不能带 backdrop-filter，否则菜单自己的模糊不生效；
 *     所以移动端顶栏的玻璃做在 ::before 伪元素上（见 shell.css）。
 *   - 旧页面自带的 .modal 包装结构已全部改成 .modal-overlay.show，新页面只允许用这一种。
 */

/* ============================================================
   弹窗 / 底部面板
   ============================================================ */
body.lg .modal-overlay {
    z-index: var(--lg-z-modal);
    background: transparent;
    opacity: 1;
    transition: visibility var(--lg-dur-2);
}

/* 遮罩做成伪元素：显隐与拖动关闭时的渐隐只改它的 opacity，不影响面板的背景模糊 */
body.lg .modal-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--lg-scrim);
    opacity: 0;
    transition: opacity var(--lg-dur-2) var(--lg-ease);
    pointer-events: none;
}

body.lg .modal-overlay.show::before {
    opacity: var(--lg-scrim-k, 1);
}

body.lg .modal-content {
    position: relative;
}

body.lg .modal-content {
    background: var(--lg-glass-solid);
    border: 1px solid var(--lg-rim);
    border-radius: var(--lg-r-xl);
    box-shadow: var(--lg-edge), var(--lg-shadow-2);
    color: var(--lg-text);
}

/* 面板里全是文字和表单，玻璃上再垫一层较实的底色保证可读 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.lg .modal-content {
        background: var(--lg-glass);
        background-color: var(--lg-surface-hi);
        -webkit-backdrop-filter: var(--lg-blur);
        backdrop-filter: var(--lg-blur);
    }
}

@media (max-width: 991.98px) {
    /* iOS 26 风格：底部面板悬浮，四周留边，不贴底 */
    body.lg .modal-content {
        width: calc(100% - 20px);
        max-width: 560px;
        margin: 0 auto calc(10px + var(--safe-bottom));
        padding: 22px 20px 20px;
        max-height: 86vh;
        transform: translateY(calc(100% + 24px));
        transition: transform var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .modal-overlay.show .modal-content {
        transform: translateY(0);
    }
}

@media (min-width: 992px) {
    body.lg .modal-content {
        padding: 28px;
        transform: scale(0.94);
        transition: transform var(--lg-dur-3) var(--lg-spring);
    }

    body.lg .modal-overlay.show .modal-content {
        transform: scale(1);
    }
}

body.lg .modal-handle {
    width: 38px;
    height: 5px;
    margin: -8px auto 16px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-fill-2);
}

body.lg .modal-body {
    padding: 0;
}

body.lg .modal-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--lg-text);
}

body.lg .modal-close {
    background: var(--lg-fill);
    color: var(--lg-text-2);
    box-shadow: var(--lg-edge-soft);
    transition: transform var(--lg-dur-1) var(--lg-spring);
}

body.lg .modal-close:active {
    transform: scale(0.9);
}

/* ============================================================
   下拉菜单
   ============================================================ */
body.lg .dropdown-menu {
    min-width: 200px;
    padding: 6px;
    background: var(--lg-glass-solid);
    border: 1px solid var(--lg-rim);
    border-radius: var(--lg-r-lg);
    box-shadow: var(--lg-edge-soft), var(--lg-shadow-2);
    transform-origin: top right;
    transform: translateY(-6px) scale(0.96);
    transition:
        opacity var(--lg-dur-2) var(--lg-ease),
        transform var(--lg-dur-3) var(--lg-spring),
        visibility var(--lg-dur-2);
    z-index: var(--lg-z-dropdown);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.lg .dropdown-menu {
        background: var(--lg-glass);
        background-color: var(--lg-surface-hi);
        -webkit-backdrop-filter: var(--lg-blur);
        backdrop-filter: var(--lg-blur);
    }
}

body.lg .dropdown.open .dropdown-menu {
    transform: translateY(0) scale(1);
}

body.lg .dropdown-item {
    border-radius: var(--lg-r-md);
    color: var(--lg-text);
}

body.lg .dropdown-item:hover,
body.lg .dropdown-item:active {
    background: var(--lg-fill);
}

body.lg .dropdown-item i {
    color: var(--lg-text-3);
}

body.lg .dropdown-divider {
    background: var(--lg-hairline);
    margin: 6px 4px;
}

/* ============================================================
   Toast（responsive.js 在学生端不再写内联样式，外观全在这里）
   ============================================================ */
body.lg .toast-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

body.lg .toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 420px;
    padding: 13px 20px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim);
    background: var(--lg-glass-solid);
    box-shadow: var(--lg-edge), var(--lg-shadow-2);
    color: var(--lg-text);
    font-size: var(--lg-fs-call);
    font-weight: 600;
    pointer-events: auto;
    animation: lg-toast-in var(--lg-dur-3) var(--lg-spring);
    transition: opacity var(--lg-dur-2), transform var(--lg-dur-2) var(--lg-ease);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.lg .toast {
        background: var(--lg-glass);
        -webkit-backdrop-filter: var(--lg-blur);
        backdrop-filter: var(--lg-blur);
    }
}

body.lg .toast.is-leaving {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
}

body.lg .toast i {
    font-size: 18px;
}

body.lg .toast-success i { color: var(--lg-brand); }
body.lg .toast-error i { color: var(--lg-danger); }
body.lg .toast-warning i { color: var(--lg-warn); }
body.lg .toast-info i { color: var(--lg-info); }

@keyframes lg-toast-in {
    from { opacity: 0; transform: translateY(16px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 991.98px) {
    body.lg .toast {
        align-self: center;
    }
}

/* ============================================================
   加载遮罩
   ============================================================ */
body.lg .loading-overlay {
    background: var(--lg-scrim);
}

body.lg .page-loading-overlay {
    background: var(--lg-glass-solid);
}

body.lg .loading-spinner {
    border-color: var(--lg-fill-2);
    border-top-color: var(--lg-brand);
}