/* Platform-specific background colors for conversation list */

/* WhatsApp conversations - Light Green */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="wa"]:not(.tk-active) {
    background-color: rgba(212, 255, 219, 0.3) !important;
    background: linear-gradient(90deg, rgba(212, 255, 219, 0.4) 0%, rgba(245, 245, 245, 0.2) 100%);
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="wa"]:hover {
    background-color: rgba(212, 255, 219, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="wa"].tk-active {
    background: linear-gradient(90deg, #25D366 0%, rgba(212, 255, 219, 0.9) 5%, rgba(212, 255, 219, 0.8) 100%) !important;
    border-left: 4px solid #25D366 !important;
    box-shadow: inset 0 0 20px rgba(37, 211, 102, 0.2), 0 2px 8px rgba(37, 211, 102, 0.3) !important;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* Facebook conversations - Light Blue */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="fb"]:not(.tk-active) {
    background-color: rgba(219, 236, 255, 0.3) !important;
    background: linear-gradient(90deg, rgba(219, 236, 255, 0.4) 0%, rgba(245, 245, 245, 0.2) 100%);
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="fb"]:hover {
    background-color: rgba(219, 236, 255, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="fb"].tk-active {
    background: linear-gradient(90deg, #1877F2 0%, rgba(219, 236, 255, 0.9) 5%, rgba(219, 236, 255, 0.8) 100%) !important;
    border-left: 4px solid #1877F2 !important;
    box-shadow: inset 0 0 20px rgba(24, 119, 242, 0.2), 0 2px 8px rgba(24, 119, 242, 0.3) !important;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* Instagram conversations - Light Pink */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="inst"]:not(.tk-active),
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="ig"]:not(.tk-active) {
    background-color: rgba(255, 220, 237, 0.3) !important;
    background: linear-gradient(90deg, rgba(255, 220, 237, 0.4) 0%, rgba(245, 245, 245, 0.2) 100%);
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="inst"]:hover,
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="ig"]:hover {
    background-color: rgba(255, 220, 237, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="inst"].tk-active,
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="ig"].tk-active {
    background: linear-gradient(90deg, #E4405F 0%, rgba(255, 220, 237, 0.9) 5%, rgba(255, 220, 237, 0.8) 100%) !important;
    border-left: 4px solid #E4405F !important;
    box-shadow: inset 0 0 20px rgba(228, 64, 95, 0.2), 0 2px 8px rgba(228, 64, 95, 0.3) !important;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* Email conversations - Light Yellow */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="em"]:not(.tk-active) {
    background-color: rgba(255, 251, 219, 0.3) !important;
    background: linear-gradient(90deg, rgba(255, 251, 219, 0.4) 0%, rgba(245, 245, 245, 0.2) 100%);
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="em"]:hover {
    background-color: rgba(255, 251, 219, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="em"].tk-active {
    background: linear-gradient(90deg, #FFA500 0%, rgba(255, 251, 219, 0.9) 5%, rgba(255, 251, 219, 0.8) 100%) !important;
    border-left: 4px solid #FFA500 !important;
    box-shadow: inset 0 0 20px rgba(255, 165, 0, 0.2), 0 2px 8px rgba(255, 165, 0, 0.3) !important;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* Text message conversations - Light Purple */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="tm"]:not(.tk-active) {
    background-color: rgba(237, 219, 255, 0.3) !important;
    background: linear-gradient(90deg, rgba(237, 219, 255, 0.4) 0%, rgba(245, 245, 245, 0.2) 100%);
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="tm"]:hover {
    background-color: rgba(237, 219, 255, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="tm"].tk-active {
    background: linear-gradient(90deg, #8B4FFF 0%, rgba(237, 219, 255, 0.9) 5%, rgba(237, 219, 255, 0.8) 100%) !important;
    border-left: 4px solid #8B4FFF !important;
    box-shadow: inset 0 0 20px rgba(139, 79, 255, 0.2), 0 2px 8px rgba(139, 79, 255, 0.3) !important;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* General active conversation styles - make selection very clear */
.tk-board>.tk-admin-list .tk-scroll-area li.tk-active {
    position: relative;
    z-index: 1;
    font-weight: 600;
}

.tk-board>.tk-admin-list .tk-scroll-area li.tk-active .tk-name {
    font-weight: 700 !important;
    color: #000 !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li.tk-active .tk-time {
    font-weight: 600 !important;
    color: #333 !important;
}

/* Add pulsing animation for active conversations */
@keyframes pulse-border {
    0% {
        border-left-width: 4px;
    }
    50% {
        border-left-width: 6px;
    }
    100% {
        border-left-width: 4px;
    }
}

.tk-board>.tk-admin-list .tk-scroll-area li.tk-active {
    animation: pulse-border 2s ease-in-out infinite;
}

/* Add subtle icon indicators for each platform */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source].tk-active::before {
    width: 4px;
    opacity: 1;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="wa"]::before {
    background: #25D366;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="fb"]::before {
    background: #1877F2;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="inst"]::before,
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="ig"]::before {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="em"]::before {
    background: #FFA500;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-source="tm"]::before {
    background: #8B4FFF;
}

/* Unread conversations (status=2) should maintain slightly stronger colors */
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-status="2"][data-conversation-source="wa"]:not(.tk-active) {
    background-color: rgba(212, 255, 219, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-status="2"][data-conversation-source="fb"]:not(.tk-active) {
    background-color: rgba(219, 236, 255, 0.5) !important;
}

.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-status="2"][data-conversation-source="inst"]:not(.tk-active),
.tk-board>.tk-admin-list .tk-scroll-area li[data-conversation-status="2"][data-conversation-source="ig"]:not(.tk-active) {
    background-color: rgba(255, 220, 237, 0.5) !important;
}