/* 表情选择框层级修复 - 统一解决OwO表情选择框被遮挡的问题 */

/* OwO表情选择框主体 */
.OwO .OwO-body {
    z-index: 9999 !important;
    position: absolute !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
}

/* OwO表情选择框容器 */
.OwO {
    position: relative !important;
    z-index: 9998 !important;
}

/* OwO按钮样式优化 */
.OwO .OwO-logo {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    transition: all 0.2s ease !important;
}

.OwO .OwO-logo:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

/* 确保表情选择框不被评论框遮挡 */
.chat_post {
    position: relative;
    z-index: 1;
}

.cbox-ats {
    position: relative;
    z-index: 2;
}

.ats-func {
    position: relative;
    z-index: 9998;
}

/* 针对特定容器的z-index优化 */
.chats {
    position: relative;
    z-index: 0;
}

.cbox-post {
    position: relative;
    z-index: 2;
}

/* 确保表情选择框在所有可能的遮挡元素之上 */
.OwO-body {
    z-index: 9999 !important;
}

/* 修复可能的遮挡问题 */
.panel, .shadow-box {
    position: relative;
    z-index: auto;
}

/* 当OwO打开时，确保有足够的层级 */
.OwO.OwO-open {
    z-index: 9999 !important;
}

.OwO.OwO-open .OwO-body {
    z-index: 10000 !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .OwO .OwO-body {
        width: 300px !important;
        max-width: calc(100vw - 40px) !important;
    }
}