/* ============================================================
   Modern Conversation List Styling
   Slate color palette, clean layout, no opacity dimming
   ============================================================ */

/* ── 1. Base list item ── */
.tk-board > .tk-admin-list .tk-scroll-area li {
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

/* ── 2. Avatar ── */
.tk-board > .tk-admin-list .tk-scroll-area li .tk-profile {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding-left: 0 !important;
    line-height: normal !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li .tk-profile img {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    left: auto !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* ── 3. Name (seen/read = subdued) ── */
.tk-board > .tk-admin-list .tk-scroll-area li .tk-profile .tk-name {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── 4. Time ── */
.tk-board > .tk-admin-list .tk-scroll-area li .tk-profile .tk-time {
    position: relative !important;
    right: auto !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

/* ── 5. Message preview (seen/read = faded) ── */
.tk-board > .tk-admin-list .tk-scroll-area li p {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    margin: 3px 0 0 46px !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
}

/* ── 6. Hover state ── */
.tk-board > .tk-admin-list .tk-scroll-area li:hover {
    background-color: #f8fafc !important;
    opacity: 1 !important;
}

/* ── 7. Active state ── */
.tk-board > .tk-admin-list .tk-scroll-area li.tk-active {
    background-color: #f1f5f9 !important;
    opacity: 1 !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li.tk-active .tk-profile .tk-name {
    color: #0f172a !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li.tk-active p {
    color: #475569 !important;
}

/* ── 8. Unread (status=2) — bold + blue tint ── */
.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"] {
    background-color: #eff6ff !important;
    border-bottom: 1px solid #dbeafe !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"] .tk-profile .tk-name {
    font-weight: 700 !important;
    color: #1e3a5f !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"] p {
    color: #1e40af !important;
    font-weight: 500 !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"] .tk-profile .tk-time {
    color: #2563eb !important;
    font-weight: 600 !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"]:not(.tk-active) {
    box-shadow: none !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li[data-conversation-status="2"]:hover {
    background-color: #dbeafe !important;
}

/* ── 9. Channel dot ── */
.tk-channel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    background-color: #cbd5e1;
}

/* WhatsApp Cloud */
.tk-channel-dot[data-channel="wa"],
.tk-channel-dot[data-channel="whatsapp"] {
    background-color: #25D366;
}

/* WhatsApp Direct */
.tk-channel-dot[data-channel="wd"] {
    background-color: #128C7E;
}

/* Facebook */
.tk-channel-dot[data-channel="fb"],
.tk-channel-dot[data-channel="facebook"] {
    background-color: #1877F2;
}

/* Messenger */
.tk-channel-dot[data-channel="messenger"] {
    background-color: #0084FF;
}

/* Telegram */
.tk-channel-dot[data-channel="tg"],
.tk-channel-dot[data-channel="telegram"] {
    background-color: #0088cc;
}

/* Instagram */
.tk-channel-dot[data-channel="inst"],
.tk-channel-dot[data-channel="ig"],
.tk-channel-dot[data-channel="instagram"] {
    background-color: #E4405F;
}

/* Email */
.tk-channel-dot[data-channel="em"],
.tk-channel-dot[data-channel="email"] {
    background-color: #FFA500;
}

/* SMS */
.tk-channel-dot[data-channel="tm"],
.tk-channel-dot[data-channel="sms"] {
    background-color: #8B4FFF;
}

/* TikTok */
.tk-channel-dot[data-channel="tt"],
.tk-channel-dot[data-channel="tiktok"] {
    background-color: #010101;
}

/* ── 10. Tags ── */
.tk-board > .tk-admin-list .tk-scroll-area li .tk-tags-area {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    max-width: 80px !important;
    overflow: hidden !important;
}

.tk-board > .tk-admin-list .tk-scroll-area li .tk-tags-area i {
    font-size: 11px !important;
}

/* ── 11. Notification counter ── */
.tk-board > .tk-admin-list .tk-scroll-area li > .tk-notification-counter {
    bottom: 10px !important;
    right: 12px !important;
}

/* ── 12. RTL overrides ── */
.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile img {
    margin-right: 0 !important;
    margin-left: 10px !important;
    left: auto !important;
    right: auto !important;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile .tk-name {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile .tk-time {
    margin-left: 0 !important;
    margin-right: 8px !important;
    left: auto !important;
    right: auto !important;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li p {
    margin: 3px 46px 0 0 !important;
}

.tk-rtl .tk-channel-dot {
    margin-right: 0;
    margin-left: 6px;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li .tk-tags-area {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

.tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li > .tk-notification-counter {
    right: auto !important;
    left: 12px !important;
}

/* ── 13. Mobile responsive (< 428px) ── */
@media (max-width: 428px) {
    .tk-board > .tk-admin-list .tk-scroll-area li {
        padding: 8px 10px !important;
    }

    .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .tk-board > .tk-admin-list .tk-scroll-area li p {
        margin-left: 42px !important;
    }

    .tk-rtl .tk-board > .tk-admin-list .tk-scroll-area li p {
        margin-left: 0 !important;
        margin-right: 42px !important;
    }

    .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile .tk-name {
        font-size: 12.5px !important;
    }

    .tk-board > .tk-admin-list .tk-scroll-area li .tk-profile .tk-time {
        font-size: 10px !important;
    }
}