/* 手机端下拉菜单修复样式 */
/* 专门用于修复会员充值和算力显示间距问题 */
/* 修复登录注册模态框被下拉菜单遮挡的问题 */

/* 确保模态框显示在最上层 */
.modal {
    z-index: 1010 !important;
}

/* 登录要求对话框 */
.login-required-dialog {
    z-index: 1015 !important;
}

/* 算力确认对话框 */
.points-confirm-overlay {
    z-index: 1020 !important;
}

/* 手机端特殊处理：当模态框显示时，确保下拉菜单被隐藏 */
@media (max-width: 768px) {
    /* 当body有modal-active类时，降低用户下拉菜单的z-index */
    body.modal-active .mobile-user-dropdown {
        z-index: 999 !important;
        opacity: 0.3 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* 确保模态框内容可以正常交互 */
    body.modal-active .modal .modal-content {
        position: relative;
        z-index: 1011 !important;
        pointer-events: auto !important;
    }

    /* 确保模态框输入框可以正常聚焦 */
    body.modal-active .modal input,
    body.modal-active .modal textarea,
    body.modal-active .modal select,
    body.modal-active .modal button {
        position: relative;
        z-index: 1012 !important;
        pointer-events: auto !important;
    }

    /* 确保模态框遮罩层正确显示 */
    body.modal-active .modal {
        z-index: 1010 !important;
    }
}

/* 手机端用户下拉菜单 - 缩小宽度 */
@media (max-width: 768px) {
    .mobile-user-dropdown {
        width: 200px !important;
        max-width: 200px !important;
    }

    /* 下拉菜单项目 - 使用space-between布局 */
    .mobile-dropdown-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* 图标样式 */
    .mobile-dropdown-icon {
        font-size: 14px !important;
        margin-right: 8px !important;
        width: 16px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    /* 文字样式 */
    .mobile-dropdown-text {
        flex: 1 !important;
        margin-right: 4px !important;
        font-size: 13px !important;
    }

    /* 会员充值项目特殊样式 */
    .mobile-membership-recharge-item {
        justify-content: space-between !important;
        padding: 10px 12px !important;
    }

    /* 右侧算力显示区域 */
    .mobile-dropdown-item-right {
        margin-left: 4px !important;
        padding-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    /* 算力显示小标签 */
    .mobile-points-display-small {
        background: rgba(184, 160, 130, 0.15) !important;
        border-radius: 6px !important;
        padding: 2px 4px !important;
        font-size: 9px !important;
        color: #4a3728 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        display: block !important;
        visibility: visible !important;
        min-width: 50px !important;
        text-align: center !important;
    }

    /* 算力文字 */
    .mobile-points-text {
        font-size: 9px !important;
        color: #4a3728 !important;
        display: inline !important;
        visibility: visible !important;
    }
}

/* 小屏幕手机优化 */
@media (max-width: 480px) {
    .mobile-user-dropdown {
        width: 180px !important;
        max-width: 180px !important;
        right: 10px !important;
    }

    .mobile-dropdown-item {
        padding: 9px 10px !important;
        font-size: 12px !important;
    }

    .mobile-dropdown-icon {
        font-size: 13px !important;
        margin-right: 6px !important;
        width: 14px !important;
    }

    .mobile-dropdown-text {
        font-size: 12px !important;
        margin-right: 3px !important;
    }

    .mobile-points-display-small {
        padding: 1px 3px !important;
        font-size: 8px !important;
        min-width: 45px !important;
        border-radius: 4px !important;
    }

    .mobile-points-text {
        font-size: 8px !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 360px) {
    .mobile-user-dropdown {
        width: 160px !important;
        max-width: 160px !important;
        right: 8px !important;
    }

    .mobile-dropdown-item {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .mobile-dropdown-icon {
        font-size: 12px !important;
        margin-right: 5px !important;
        width: 12px !important;
    }

    .mobile-dropdown-text {
        font-size: 11px !important;
        margin-right: 2px !important;
    }

    .mobile-points-display-small {
        padding: 1px 2px !important;
        font-size: 7px !important;
        min-width: 40px !important;
        border-radius: 3px !important;
    }

    .mobile-points-text {
        font-size: 7px !important;
    }
}

/* 确保算力显示始终可见 */
.mobile-points-display-small,
.mobile-points-text {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* 防止文字换行 */
.mobile-dropdown-item {
    white-space: nowrap !important;
}

.mobile-dropdown-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 确保会员充值项目的布局 */
.mobile-membership-recharge-item .mobile-dropdown-text {
    max-width: calc(100% - 70px) !important;
}

/* 调试样式 - 可以临时启用来检查布局 */
/*
.mobile-dropdown-item {
    border: 1px solid red !important;
}

.mobile-dropdown-item-right {
    border: 1px solid blue !important;
}

.mobile-points-display-small {
    border: 1px solid green !important;
}
*/