/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.message-bubble {
    max-width: 70%;
    word-wrap: break-word;
}

.video-circle {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
}

.recording-pulse {
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.call-pulse {
    animation: pulse-green 1.5s infinite;
}

.call-screen {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
/* Mini Call Widget */
.mini-call-widget {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#messages-area {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Disable red/green toast notifications */
#toast {
    display: none !important;
}

/* Dark theme helpers for injected chat items */
.dark #chat-list .text-slate-800 {
    color: #e2e8f0 !important;
}

.dark #chat-list .text-slate-500,
.dark #chat-list .text-slate-400 {
    color: #94a3b8 !important;
}

.dark #chat-list .border-slate-100 {
    border-color: #1f2937 !important;
}

.dark #chat-list .hover\:bg-slate-50:hover {
    background-color: #0f172a !important;
}

.dark #chat-list .bg-blue-50 {
    background-color: rgba(37, 99, 235, 0.15) !important;
}

.dark #chat-list .border-l-blue-600 {
    border-left-color: #60a5fa !important;
}

.dark #message-context-menu {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
}

    .dark #message-context-menu button {
        color: #e2e8f0 !important;
    }

        .dark #message-context-menu button:hover {
            background-color: #1e293b !important;
        }

.dark .message-bubble.bg-white {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

/* Mobile-only adjustments */
@media (max-width: 767px) {
    #main-screen {
        max-width: 100% !important;
        border-left: none !important;
        border-right: none !important;
    }

    #chat-panel,
    #active-chat-container {
        width: 100% !important;
    }

    #messages-area {
        padding: 12px !important;
    }

    .message-bubble {
        max-width: 85% !important;
    }
}

/* Dark theme fixes */
.dark #main-screen {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
}

.dark #sidebar-panel {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
}

    .dark #sidebar-panel .bg-white {
        background-color: #0f172a !important;
    }

.dark #chat-list .border-slate-100,
.dark #chat-list .border-slate-200 {
    border-color: #1f2937 !important;
}

.dark #chat-list .hover\:bg-slate-50:hover {
    background-color: #0b1220 !important;
}

.dark #chat-list .bg-blue-50 {
    background-color: rgba(37, 99, 235, 0.2) !important;
}

.dark #chat-list .border-l-blue-600 {
    border-left-color: #60a5fa !important;
}

.dark #chat-panel {
    background-color: #0f172a !important;
}

.dark #chat-search-bar,
.dark #active-chat-container .bg-white {
    background-color: #0f172a !important;
}

.dark #active-chat-container .border-slate-200,
.dark #active-chat-container .border-slate-800,
.dark #active-chat-container .border-slate-100 {
    border-color: #1f2937 !important;
}

.dark #message-form .bg-slate-100 {
    background-color: #1e293b !important;
    border-color: #1f2937 !important;
}

.dark #message-input {
    color: #e2e8f0 !important;
}

.dark #message-context-menu {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
}

.dark .message-bubble.bg-white {
    background-color: #0f172a !important;
    border-color: #1f2937 !important;
    color: #e2e8f0 !important;
}

.dark #settings-modal .bg-white {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

.dark #settings-modal .border-slate-200 {
    border-color: #1f2937 !important;
}