@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .message-bubble-sent {
        @apply bg-blue-100 text-gray-800 rounded-lg rounded-tr-none p-3 max-w-[80%] shadow-sm;
    }

    .message-bubble-received {
        @apply bg-gray-100 text-gray-800 rounded-lg rounded-tl-none p-3 max-w-[80%] shadow-sm;
    }

    .contact-active {
        @apply bg-blue-50 border-l-4 border-primary;
    }

    .status-online {
        @apply bg-green-500;
    }

    .status-offline {
        @apply bg-gray-300;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-primary to-secondary text-white font-medium py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300;
    }

    .btn-secondary {
        @apply bg-white text-primary border border-primary font-medium py-2 px-4 rounded-lg hover:bg-gray-50 transition-all duration-300;
    }

    .btn-icon {
        @apply flex items-center justify-center w-10 h-10 rounded-full text-gray-600 hover:bg-gray-100 transition-colors duration-200;
    }
}

/* 全局样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* 动画效果 */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* 消息状态样式 */
.message-status.sent i {
    color: #9ca3af;
}

.message-status.read i {
    color: #3b82f6;
}

/* 模态框动画 */
#add-contact-modal, #settings-modal, #change-password-modal {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

    #add-contact-modal:not(.hidden),
    #settings-modal:not(.hidden),
    #change-password-modal:not(.hidden) {
        opacity: 1;
        pointer-events: auto;
    }

    #add-contact-modal > div:last-child,
    #settings-modal > div:last-child,
    #change-password-modal > div:last-child {
        transform: translate(-50%, -60%);
        transition: transform 0.3s ease;
    }

    #add-contact-modal:not(.hidden) > div:last-child,
    #settings-modal:not(.hidden) > div:last-child,
    #change-password-modal:not(.hidden) > div:last-child {
        transform: translate(-50%, -50%);
    }

/* 响应式调整 */
@media (max-width: 768px) {
    .message-bubble-sent, .message-bubble-received {
        max-width: 75%;
    }

    #chat-header h2 {
        font-size: 1rem;
    }

    .btn-icon {
        width: 8h;
        height: 8h;
    }
}