/*
 * 评论用户设备信息插件样式
 * 模仿Zibll子比主题UI风格
 */

/* 设备信息徽章 - 模仿子比主题的badg样式 */
.comment-device-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.75em !important;
    padding: 0.15em 0.5em !important;
    border-radius: 4px !important;
    vertical-align: middle;
    cursor: help;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: -2px;
}

/* 悬停效果 */
.comment-device-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0.9;
}

/* 设备类型颜色主题 - 使用Zibll主题配色系统 */
.comment-device-badge.c-purple {
    --this-color: #d448f5;
    --this-bg: rgba(213, 72, 245, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

.comment-device-badge.c-blue {
    --this-color: #2997f7;
    --this-bg: rgba(41, 151, 247, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

.comment-device-badge.c-green {
    --this-color: #18a52a;
    --this-bg: rgba(18, 185, 40, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

.comment-device-badge.c-green-2 {
    --this-color: #6a933e;
    --this-bg: rgba(72, 135, 24, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

.comment-device-badge.c-cyan {
    --this-color: #09a4a1;
    --this-bg: rgba(8, 196, 193, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

.comment-device-badge.c-yellow {
    --this-color: #ff6f06;
    --this-bg: rgba(255, 111, 6, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

.comment-device-badge.c-gray {
    --this-color: #888;
    --this-bg: rgba(136, 136, 136, 0.15);
    color: var(--this-color) !important;
    background: var(--this-bg) !important;
}

/* 图标样式 */
.comment-device-badge .fa {
    font-size: 1.1em;
    vertical-align: -1px;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.comment-device-badge:hover .fa {
    transform: scale(1.1);
}

/* 深色模式适配 */
.dark-theme .comment-device-badge {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-theme .comment-device-badge:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
    .comment-device-badge {
        font-size: 0.7em !important;
        padding: 0.1em 0.4em !important;
        margin-left: 4px !important;
    }
    
    .comment-device-badge .fa {
        font-size: 1em;
        vertical-align: -0.5px;
    }
    
    .comt-meta {
        line-height: 1.6;
    }
}

/* 在小屏幕上隐藏文本，只显示图标 */
@media (max-width: 480px) {
    .comment-device-badge {
        padding: 0.1em 0.3em !important;
    }
    
    .comment-device-badge:not(:hover) {
        font-size: 0 !important;
        padding: 0.1em 0.2em !important;
    }
    
    .comment-device-badge:not(:hover) .fa {
        margin: 0 !important;
        font-size: 1.2em;
    }
}

/* 动画效果 */
@keyframes deviceBadgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-device-badge {
    animation: deviceBadgeFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 与Zibll主题元素对齐 */
#postcomments .comt-meta .comment-device-badge {
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px;
}

/* 确保与主题其他徽章保持一致 */
.comt-meta .badg + .comment-device-badge {
    margin-left: 6px;
}

.comment-device-badge + .badg {
    margin-left: 6px;
}