/* ==========================================================
 * ADMIN MODERN THEME — Slack/WhatsApp polish overlay
 * ==========================================================
 *
 * Cosmetic-only overlay. Loaded LAST so it overrides existing styles
 * without rewriting any structural files.
 *
 * Scope: everything under .tk-admin (header, conversation list,
 * conversation view, message bubbles, editor, side panel, account menu).
 * The dashboard panel (.tk-area-dashboard) keeps its own scoped tokens
 * from smart-dashboard.css and is NOT touched here.
 *
 * Strategy:
 *  - Use high-specificity selectors instead of !important where possible
 *  - Preserve existing layout dimensions (the JS depends on them)
 *  - RTL-safe via logical properties (inset-inline, margin-inline, padding-inline)
 *  - Channel-specific colors (WhatsApp green, IG pink, Telegram blue) preserved
 */

/* ---- Tokens (scoped to admin) ---- */
.tk-admin,
.tk-admin-start {
    --tkm-primary-50:  #eef2ff;
    --tkm-primary-100: #e0e7ff;
    --tkm-primary-200: #c7d2fe;
    --tkm-primary-500: #6366f1;
    --tkm-primary-600: #4f46e5;
    --tkm-primary-700: #4338ca;

    --tkm-bg:        #f6f7fb;
    --tkm-bg-2:      #fafbfd;
    --tkm-surface:   #ffffff;
    --tkm-border:    #e6e8ef;
    --tkm-divider:   #f0f2f7;
    --tkm-text:      #0f172a;
    --tkm-text-2:    #475569;
    --tkm-text-3:    #94a3b8;

    --tkm-success:   #10b981;
    --tkm-success-bg:#ecfdf5;
    --tkm-warning:   #f59e0b;
    --tkm-warning-bg:#fffbeb;
    --tkm-danger:    #ef4444;
    --tkm-danger-bg: #fef2f2;
    --tkm-info:      #0ea5e9;

    --tkm-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
    --tkm-shadow-2: 0 4px 14px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
    --tkm-shadow-3: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);

    --tkm-r-sm: 8px;
    --tkm-r-md: 12px;
    --tkm-r-lg: 16px;
    --tkm-r-pill: 9999px;

    --tkm-ease: cubic-bezier(.4, 0, .2, 1);
    --tkm-fast: .15s var(--tkm-ease);
    --tkm-base: .25s var(--tkm-ease);

    --tkm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
                "Helvetica Neue", "Tajawal", system-ui, sans-serif;
}

.tk-admin {
    font-family: var(--tkm-font);
    color: var(--tkm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--tkm-bg);
}

/* ============================================================
 * HEADER (top nav)
 * ============================================================ */
.tk-admin > .tk-header {
    background: var(--tkm-surface);
    border-bottom: 1px solid var(--tkm-border);
    box-shadow: var(--tkm-shadow-1);
}

.tk-admin > .tk-header .tk-admin-nav > div > a {
    position: relative;
    color: var(--tkm-text-2);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--tkm-r-pill);
    padding: 6px 12px;
    transition: var(--tkm-fast);
}

.tk-admin > .tk-header .tk-admin-nav > div > a span {
    color: inherit;
}

.tk-admin > .tk-header .tk-admin-nav > div > a:hover {
    background: var(--tkm-divider);
    color: var(--tkm-primary-600);
}

.tk-admin > .tk-header .tk-admin-nav > div > a.tk-active {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
}

.tk-admin > .tk-header .tk-admin-nav > div > a.tk-active::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--tkm-primary-600);
}

.tk-rtl .tk-admin > .tk-header .tk-admin-nav > div > a.tk-active::after {
    transform: translateX(50%);
}

.tk-admin > .tk-header .tk-admin-nav > div > a > i {
    color: inherit !important;
    opacity: 0.85;
    font-size: 13px;
}

/* Bot Hub link — kill the burgundy override and the NEW badge that breaks RTL */
#tk-bot-hub:hover span,
#tk-bot-hub.tk-active span {
    color: inherit !important;
}
#tk-bot-hub span::after {
    background: var(--tkm-primary-600) !important;
    inset-inline-end: -22px;
    inset-block-start: -8px;
    right: auto !important;
}

/* Logo */
.tk-admin > .tk-header .tk-admin-nav > img {
    border-radius: 6px;
    margin-inline-end: 4px;
}

/* Sub-menu dropdown */
.tk-admin > .tk-header .tk-admin-nav .tk-nav-submenu {
    background: var(--tkm-surface);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-md);
    box-shadow: var(--tkm-shadow-2);
    padding: 6px;
    margin-top: 6px;
}

.tk-admin > .tk-header .tk-admin-nav .tk-nav-submenu a {
    border-radius: var(--tkm-r-sm);
    padding: 8px 12px;
    color: var(--tkm-text);
    transition: var(--tkm-fast);
}

.tk-admin > .tk-header .tk-admin-nav .tk-nav-submenu a:hover {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
}

/* Account / profile area */
.tk-admin > .tk-header .tk-admin-nav-right .tk-account > img,
.tk-admin > .tk-header .tk-admin-nav-right .tk-account .tk-profile > img {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--tkm-border);
    transition: var(--tkm-fast);
}

.tk-admin > .tk-header .tk-admin-nav-right .tk-account > img:hover,
.tk-admin > .tk-header .tk-admin-nav-right .tk-account .tk-profile > img:hover {
    box-shadow: 0 0 0 2px var(--tkm-primary-500);
    transform: scale(1.04);
}

.tk-admin > .tk-header .tk-admin-nav-right .tk-account .tk-menu {
    background: var(--tkm-surface);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-md);
    box-shadow: var(--tkm-shadow-2);
    padding: 6px;
}

.tk-admin > .tk-header .tk-admin-nav-right .tk-account .tk-menu li {
    border-radius: var(--tkm-r-sm);
    padding: 8px 12px;
    color: var(--tkm-text);
    font-size: 13px;
    transition: var(--tkm-fast);
}

.tk-admin > .tk-header .tk-admin-nav-right .tk-account .tk-menu li:hover {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700) !important;
}

.tk-admin > .tk-header .tk-admin-nav-right .tk-account .tk-menu li.tk-online::before {
    background: var(--tkm-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}

/* Team chat badge polish */
.tk-team-chat-badge {
    background: var(--tkm-danger);
    color: #fff;
    font-weight: 700;
    border-radius: var(--tkm-r-pill);
}

/* ============================================================
 * BOARD (the main 3-column workspace)
 * ============================================================ */
.tk-admin .tk-board {
    background: var(--tkm-bg);
    gap: 0;
}

/* ---- Left column: conversation list ---- */
.tk-admin .tk-board > .tk-admin-list {
    background: var(--tkm-surface);
    border-inline-end: 1px solid var(--tkm-border);
}

.tk-admin .tk-board > .tk-admin-list > .tk-top {
    background: var(--tkm-surface);
    border-bottom: 1px solid var(--tkm-divider);
    /* Keep tight to avoid pushing the search/filter row down */
}

/* Inbox/Archive/Trash dropdown — DIRECT child only so we don't bleed
   into the nested filter selects inside .tk-filter-btn */
.tk-admin .tk-board > .tk-admin-list > .tk-top > .tk-select > p {
    background: var(--tkm-bg-2);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-md);
    padding: 7px 12px;
    font-weight: 600;
    color: var(--tkm-text);
    font-size: 13px;
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-admin-list > .tk-top > .tk-select > p:hover {
    border-color: var(--tkm-primary-500);
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
}

.tk-admin .tk-board > .tk-admin-list > .tk-top > .tk-select > ul {
    background: var(--tkm-surface);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-md);
    box-shadow: var(--tkm-shadow-2);
    padding: 6px;
    margin-top: 4px;
}

.tk-admin .tk-board > .tk-admin-list > .tk-top > .tk-select > ul li {
    border-radius: var(--tkm-r-sm);
    padding: 7px 12px;
    font-size: 13px;
    color: var(--tkm-text);
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-admin-list > .tk-top > .tk-select > ul li:hover,
.tk-admin .tk-board > .tk-admin-list > .tk-top > .tk-select > ul li.tk-active {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700) !important;
}

/* Filter dropdown — keep original sizing but give it a SOLID white card
   so it doesn't show the conversation list bleeding through */
.tk-admin .tk-board > .tk-admin-list .tk-filter-btn .tk-select > p {
    font-size: 13px;
}
.tk-admin .tk-board > .tk-admin-list .tk-filter-btn .tk-select > ul {
    background: #ffffff !important;
    border: 1px solid var(--tkm-border) !important;
    border-radius: var(--tkm-r-md) !important;
    box-shadow: var(--tkm-shadow-2) !important;
    padding: 6px !important;
    z-index: 50;
}
.tk-admin .tk-board > .tk-admin-list .tk-filter-btn .tk-select > ul li {
    background: #ffffff !important;
    color: var(--tkm-text) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: var(--tkm-r-sm) !important;
    border-bottom: none !important;
    transition: var(--tkm-fast);
}
.tk-admin .tk-board > .tk-admin-list .tk-filter-btn .tk-select > ul li:hover,
.tk-admin .tk-board > .tk-admin-list .tk-filter-btn .tk-select > ul li.tk-active {
    background: var(--tkm-primary-50) !important;
    color: var(--tkm-primary-700) !important;
}

/* Search box */
.tk-admin .tk-board > .tk-admin-list .tk-search-btn {
    border: none;
}

.tk-admin .tk-board > .tk-admin-list .tk-search-btn input {
    background: var(--tkm-bg-2);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-pill);
    padding: 9px 14px 9px 38px;
    font-size: 13px;
    color: var(--tkm-text);
    transition: var(--tkm-fast);
    width: 100%;
}

.tk-rtl .tk-admin .tk-board > .tk-admin-list .tk-search-btn input {
    padding: 9px 38px 9px 14px;
}

.tk-admin .tk-board > .tk-admin-list .tk-search-btn input:focus {
    outline: none;
    border-color: var(--tkm-primary-500);
    background: var(--tkm-surface);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .1);
}

.tk-admin .tk-board > .tk-admin-list .tk-search-btn i {
    color: var(--tkm-text-3);
    inset-inline-start: 14px;
}

/* Filter button */
.tk-admin .tk-board > .tk-admin-list .tk-filter-btn {
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-pill);
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-admin-list .tk-filter-btn:hover {
    border-color: var(--tkm-primary-500);
    background: var(--tkm-primary-50);
}

/* Conversation list scroll area — keep tight; the original .tk-scroll-area
   li has max-height:85px so we must NOT push padding/margins beyond that */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area {
    background: var(--tkm-surface);
    padding: 4px 6px;
}

.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tkm-r-md);
    /* Inherit the original 18px 20px 15px 20px padding — only override
       background/border so we don't break the 85px max-height */
    margin-bottom: 2px;
    transition: var(--tkm-fast);
    position: relative;
}

.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li:hover {
    background: var(--tkm-bg-2);
}

.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li.tk-active {
    background: var(--tkm-primary-50);
    border-color: var(--tkm-primary-200);
    box-shadow: var(--tkm-shadow-1);
}

/* Avatar in list — keep close to original 36-38px to fit max-height:85px */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li > img {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--tkm-border);
    object-fit: cover;
}

/* Name */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li .tk-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--tkm-text);
}

/* Last message preview */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li .tk-message {
    color: var(--tkm-text-2);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Time */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li .tk-time {
    color: var(--tkm-text-3);
    font-size: 11px;
    font-weight: 500;
}

.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li[data-conversation-status="2"] .tk-time {
    color: var(--tkm-primary-600) !important;
    font-weight: 700;
}

/* Notification counter (unread badge) */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li > .tk-notification-counter,
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area .tk-notification-counter {
    background: var(--tkm-primary-600);
    color: #fff;
    font-weight: 700;
    border-radius: var(--tkm-r-pill);
    box-shadow: 0 2px 6px rgba(79, 70, 229, .35);
    padding: 1px 7px;
    font-size: 11px;
}

/* ============================================================
 * CENTER COLUMN: conversation view
 * ============================================================ */
.tk-admin .tk-board > .tk-conversation {
    background:
        radial-gradient(800px 600px at 50% 0%, rgba(99, 102, 241, .04) 0%, transparent 60%),
        var(--tkm-bg);
}

/* Top header bar above messages — keep original spacing, just paint */
.tk-admin .tk-board > .tk-conversation > .tk-top {
    background: var(--tkm-surface);
    border-bottom: 1px solid var(--tkm-border);
    box-shadow: var(--tkm-shadow-1);
}

.tk-admin .tk-board > .tk-conversation > .tk-top > a {
    border-radius: var(--tkm-r-pill);
    padding: 6px 12px;
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-conversation > .tk-top > a:hover {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-top-page-name {
    font-weight: 700;
    color: var(--tkm-text);
    font-size: 14px;
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-classification-badge {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
    border-radius: var(--tkm-r-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Bot toggle button in top bar */
.tk-admin .tk-board > .tk-conversation > .tk-top .tk-top-bot-toggle {
    background: var(--tkm-surface);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-pill);
    padding: 6px 14px;
    font-weight: 600;
    color: var(--tkm-text);
    font-size: 12px;
    transition: var(--tkm-fast);
    box-shadow: var(--tkm-shadow-1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-top-bot-toggle:hover {
    border-color: var(--tkm-primary-500);
    color: var(--tkm-primary-700);
    box-shadow: var(--tkm-shadow-2);
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-top-bot-toggle .tk-bot-dot {
    color: var(--tkm-success);
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-top-bot-toggle[data-bot-active="false"] .tk-bot-dot {
    color: var(--tkm-text-3);
}

/* Top action icons (mark read, archive, transcript, delete) */
.tk-admin .tk-board > .tk-conversation > .tk-top .tk-btn-icon {
    border-radius: var(--tkm-r-sm);
    transition: var(--tkm-fast);
    color: var(--tkm-text-2);
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-btn-icon:hover {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
    border-color: transparent;
}

.tk-admin .tk-board > .tk-conversation > .tk-top .tk-btn-icon.tk-btn-red:hover {
    background: var(--tkm-danger-bg);
    color: var(--tkm-danger);
}

/* ---- Message list — WhatsApp single bubble ---- */
/* The double-bubble issue: at mobile, both the outer wrapper AND the inner
   .tk-cnt get painted with the WhatsApp green/white. We collapse this so
   ONLY the inner .tk-cnt shows the bubble, and the outer wrapper is fully
   transparent + shrink-to-content with proper float alignment. */

/* === Outer wrapper: TRANSPARENT, shrink-to-content, aligned === */
html body .tk-conversation .tk-list > div:not(.tk-label-date):not(.tk-notify-message),
html body .tk-board .tk-list > div:not(.tk-label-date):not(.tk-notify-message) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 2px 10px !important;
    width: fit-content !important;
    max-width: 85% !important;
}
html body .tk-conversation .tk-list > div:not(.tk-right):not(.tk-label-date):not(.tk-notify-message),
html body .tk-board .tk-list > div:not(.tk-right):not(.tk-label-date):not(.tk-notify-message) {
    float: left !important;
    clear: both !important;
}
html body .tk-conversation .tk-list > div.tk-right,
html body .tk-board .tk-list > div.tk-right {
    float: right !important;
    clear: both !important;
}

/* === Inner .tk-cnt: the ONLY bubble === */
/* Customer (left) — white */
html body .tk-conversation .tk-list > div:not(.tk-right):not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt):not(.tk-label-date) > .tk-cnt,
html body .tk-board .tk-list > div:not(.tk-right):not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt):not(.tk-label-date) > .tk-cnt {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111b21 !important;
    border: none !important;
    border-radius: 7.5px 7.5px 7.5px 0 !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
    padding: 6px 9px 8px 9px !important;
    margin: 0 !important;
}

/* Agent (right) — green */
html body .tk-conversation .tk-list > div.tk-right:not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt) > .tk-cnt,
html body .tk-board .tk-list > div.tk-right:not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt) > .tk-cnt {
    background: #d9fdd3 !important;
    background-color: #d9fdd3 !important;
    background-image: none !important;
    color: #111b21 !important;
    border: none !important;
    border-radius: 7.5px 7.5px 0 7.5px !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
    padding: 6px 9px 8px 9px !important;
    margin: 0 !important;
}

/* === .tk-message: just text, transparent === */
html body .tk-conversation .tk-list .tk-message,
html body .tk-board .tk-list .tk-message {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111b21 !important;
    font-size: 14.2px !important;
    line-height: 1.45 !important;
}

/* Links — WhatsApp blue */
html body .tk-board .tk-list .tk-message a,
html body .tk-conversation .tk-list .tk-message a {
    color: #027eb5 !important;
}

/* === RTL: flip floats and tail corners === */
[dir="rtl"] html body .tk-conversation .tk-list > div:not(.tk-right):not(.tk-label-date):not(.tk-notify-message),
html body.tk-rtl .tk-conversation .tk-list > div:not(.tk-right):not(.tk-label-date):not(.tk-notify-message),
.tk-rtl html body .tk-board .tk-list > div:not(.tk-right):not(.tk-label-date):not(.tk-notify-message) {
    float: right !important;
}
[dir="rtl"] html body .tk-conversation .tk-list > div.tk-right,
html body.tk-rtl .tk-conversation .tk-list > div.tk-right,
.tk-rtl html body .tk-board .tk-list > div.tk-right {
    float: left !important;
}
[dir="rtl"] html body .tk-conversation .tk-list > div:not(.tk-right):not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt):not(.tk-label-date) > .tk-cnt,
html body.tk-rtl .tk-conversation .tk-list > div:not(.tk-right):not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt):not(.tk-label-date) > .tk-cnt {
    border-radius: 7.5px 7.5px 0 7.5px !important;
}
[dir="rtl"] html body .tk-conversation .tk-list > div.tk-right:not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt) > .tk-cnt,
html body.tk-rtl .tk-conversation .tk-list > div.tk-right:not(.tk-media-only):not(.tk-voice-only):not(.tk-emoji-only):not(.tk-rich-cnt):not(.sb-rich-cnt) > .tk-cnt {
    border-radius: 7.5px 7.5px 7.5px 0 !important;
}

/* === Media-only / emoji-only — NO bubble (image/sticker fills its own area) === */
html body .tk-conversation .tk-list > div.tk-media-only > .tk-cnt,
html body .tk-conversation .tk-list > div.tk-emoji-only > .tk-cnt,
html body .tk-board .tk-list > div.tk-media-only > .tk-cnt,
html body .tk-board .tk-list > div.tk-emoji-only > .tk-cnt {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body .tk-conversation .tk-list > div.tk-media-only,
html body .tk-conversation .tk-list > div.tk-voice-only,
html body .tk-conversation .tk-list > div.tk-emoji-only {
    width: fit-content !important;
}

/* === Voice-only — DOES get a bubble (white left, green right) === */
html body .tk-conversation .tk-list > div.tk-voice-only:not(.tk-right) > .tk-cnt,
html body .tk-board .tk-list > div.tk-voice-only:not(.tk-right) > .tk-cnt {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-radius: 7.5px 7.5px 7.5px 0 !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
    padding: 7px 9px !important;
    margin: 0 !important;
    min-width: 240px !important;
    display: block !important;
}
html body .tk-conversation .tk-list > div.tk-voice-only.tk-right > .tk-cnt,
html body .tk-board .tk-list > div.tk-voice-only.tk-right > .tk-cnt {
    background: #d9fdd3 !important;
    background-color: #d9fdd3 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 7.5px 7.5px 0 7.5px !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
    padding: 7px 9px !important;
    margin: 0 !important;
    min-width: 240px !important;
    display: block !important;
}
/* RTL: flip tail corners */
[dir="rtl"] html body .tk-conversation .tk-list > div.tk-voice-only:not(.tk-right) > .tk-cnt,
html body.tk-rtl .tk-conversation .tk-list > div.tk-voice-only:not(.tk-right) > .tk-cnt {
    border-radius: 7.5px 7.5px 0 7.5px !important;
}
[dir="rtl"] html body .tk-conversation .tk-list > div.tk-voice-only.tk-right > .tk-cnt,
html body.tk-rtl .tk-conversation .tk-list > div.tk-voice-only.tk-right > .tk-cnt {
    border-radius: 7.5px 7.5px 7.5px 0 !important;
}

/* === Thumb (avatar) layout: keep modern-chat-overhaul flex behavior === */
html body .tk-conversation .tk-list > div.tk-thumb-active,
html body .tk-board .tk-list > div.tk-thumb-active {
    display: flex !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    gap: 0 !important;
}
html body .tk-conversation .tk-list > div.tk-right.tk-thumb-active,
html body .tk-board .tk-list > div.tk-right.tk-thumb-active {
    flex-direction: row-reverse !important;
}

/* Timestamps inside / under messages */
.tk-admin .tk-board > .tk-conversation .tk-list .tk-time,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-msg-time {
    color: var(--tkm-text-3);
    font-size: 11px;
    font-weight: 500;
}

/* Message group date separators (e.g. "Today", "Yesterday") */
.tk-admin .tk-board > .tk-conversation .tk-list .tk-day,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-date-separator {
    text-align: center;
    color: var(--tkm-text-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 12px;
    position: relative;
}

.tk-admin .tk-board > .tk-conversation .tk-list .tk-day::before,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-day::after,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-date-separator::before,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-date-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--tkm-border);
}

.tk-admin .tk-board > .tk-conversation .tk-list .tk-day::before,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-date-separator::before {
    inset-inline-start: 0;
}
.tk-admin .tk-board > .tk-conversation .tk-list .tk-day::after,
.tk-admin .tk-board > .tk-conversation .tk-list .tk-date-separator::after {
    inset-inline-end: 0;
}

/* "Select a conversation" empty placeholder */
.tk-admin .tk-board > .tk-conversation .tk-no-conversation-message {
    background: transparent;
}

.tk-admin .tk-board > .tk-conversation .tk-no-conversation-message > div {
    background: var(--tkm-surface);
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-lg);
    padding: 36px 32px;
    box-shadow: var(--tkm-shadow-2);
    max-width: 420px;
    text-align: center;
}

.tk-admin .tk-board > .tk-conversation .tk-no-conversation-message label {
    font-size: 17px;
    font-weight: 700;
    color: var(--tkm-text);
    display: block;
    margin-bottom: 6px;
}

.tk-admin .tk-board > .tk-conversation .tk-no-conversation-message p {
    font-size: 13px;
    color: var(--tkm-text-2);
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
 * EDITOR (compose box at the bottom of conversation view)
 * ============================================================ */
.tk-admin .tk-board > .tk-conversation .tk-editor {
    background: var(--tkm-surface);
    border-top: 1px solid var(--tkm-border);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .03);
    /* Keep original padding so toolbar buttons don't overflow */
}

.tk-admin .tk-board > .tk-conversation .tk-editor textarea,
.tk-admin .tk-board > .tk-conversation .tk-editor [contenteditable="true"],
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-editor-input {
    background: #fff;
    border: 1px solid var(--tkm-border);
    border-radius: var(--tkm-r-md);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tkm-text);
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-conversation .tk-editor textarea:focus,
.tk-admin .tk-board > .tk-conversation .tk-editor [contenteditable="true"]:focus,
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-editor-input:focus {
    outline: none;
    border-color: var(--tkm-primary-500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}

/* Editor toolbar buttons (emoji, attach, etc.) */
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-btn-icon,
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-editor-btn {
    border-radius: var(--tkm-r-sm);
    color: var(--tkm-text-2);
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-conversation .tk-editor .tk-btn-icon:hover,
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-editor-btn:hover {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
}

/* Send button — already styled "send-button-nuclear.css" but add elegance */
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-btn-send,
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-send-btn {
    background: linear-gradient(135deg, var(--tkm-primary-600), var(--tkm-primary-700));
    color: #fff;
    border: none;
    border-radius: var(--tkm-r-pill);
    padding: 10px 22px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .3);
    transition: var(--tkm-fast);
}

.tk-admin .tk-board > .tk-conversation .tk-editor .tk-btn-send:hover,
.tk-admin .tk-board > .tk-conversation .tk-editor .tk-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(79, 70, 229, .42);
}

/* Send icon button (.tk-icon-send.tk-submit) — smaller on desktop with breathing room */
@media (min-width: 769px) {
    html body .tk-editor .tk-icon-send,
    html body .tk-editor .tk-icon-send.tk-submit,
    html body .tk-editor div.tk-icon-send.tk-submit,
    html body .tk-board .tk-conversation .tk-editor div.tk-icon-send.tk-submit,
    html body .tk-board .tk-conversation .tk-editor .tk-icon-send.tk-submit {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        margin-left: 10px !important;
        margin-right: 6px !important;
        box-shadow: 0 2px 5px rgba(0, 168, 132, 0.22) !important;
    }
    [dir="rtl"] html body .tk-editor .tk-icon-send,
    [dir="rtl"] html body .tk-editor .tk-icon-send.tk-submit,
    html body.tk-rtl .tk-editor .tk-icon-send,
    html body.tk-rtl .tk-editor .tk-icon-send.tk-submit {
        margin-left: 6px !important;
        margin-right: 10px !important;
    }
    html body .tk-editor .tk-icon-send::before,
    html body .tk-editor .tk-icon-send.tk-submit::before,
    html body .tk-board .tk-conversation .tk-editor .tk-icon-send.tk-submit::before {
        font-size: 15px !important;
    }
}

/* ============================================================
 * RIGHT COLUMN: user details panel
 * ============================================================ */
.tk-admin .tk-board > .tk-user-details {
    background: var(--tkm-surface);
    border-inline-start: 1px solid var(--tkm-border);
}

.tk-admin .tk-board > .tk-user-details > .tk-top {
    background: var(--tkm-surface);
    border-bottom: 1px solid var(--tkm-divider);
}

/* Avatar polish only — keep original layout to avoid stretching the panel */
.tk-admin .tk-board > .tk-user-details > .tk-top .tk-profile > img {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--tkm-border);
    object-fit: cover;
}

/* Profile detail list rows — compact single-line layout
   [icon] LABEL .................. value
   Forces flex inline so the label and value sit on ONE line instead of
   stacking vertically. Targets both .tk-profile-list and the conversation
   variant. */
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    max-height: none !important;
    border-bottom: 1px solid var(--tkm-divider) !important;
    background: #fff !important;
    transition: background var(--tkm-fast);
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
}

.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li:hover,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li:hover {
    background: var(--tkm-bg-2) !important;
}

/* Icon — compact 22px square chip, NOT absolute positioned */
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > .tk-icon,
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > i.tk-icon,
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > img,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > .tk-icon,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > i.tk-icon,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > img {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Label name (the small uppercase tag) */
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > span,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > span {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--tkm-text-3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0 !important;
    margin: 0 !important;
    top: auto !important;
    position: static !important;
    white-space: nowrap !important;
}

/* The actual value */
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > label,
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > a,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > label,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--tkm-text) !important;
    text-align: end !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* RTL: keep value on the left edge as it does in the existing redesign */
.tk-rtl .tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > label,
.tk-rtl .tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > label,
[dir="rtl"] .tk-admin .tk-board > .tk-user-details .tk-profile-list > ul > li > label,
[dir="rtl"] .tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li > label {
    text-align: left !important;
}

/* Tighten the surrounding ul margin (admin.css adds 15px top) */
.tk-admin .tk-board > .tk-user-details .tk-profile-list > ul,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul {
    margin-top: 4px !important;
    padding: 0 !important;
}

/* ============================================================
 * ASSIGNEE / LAST REPLY — visual emphasis
 * Highlights "Assigned to" and "Last reply by" rows so they stand
 * out from the metadata fields and feel like actionable affordances.
 * ============================================================ */
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="assigned-agent"],
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="last-reply-agent"] {
    background: linear-gradient(180deg, var(--tkm-primary-50), #ffffff) !important;
    border-bottom: 1px solid var(--tkm-primary-100) !important;
    padding: 8px 12px !important;
}

.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="assigned-agent"]:hover,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="last-reply-agent"]:hover {
    background: var(--tkm-primary-50) !important;
}

/* Colored icon chips for these two rows */
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="assigned-agent"] > .tk-icon,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="assigned-agent"] > i.tk-icon {
    background: var(--tkm-primary-600) !important;
    color: #fff !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .25) !important;
}

.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="last-reply-agent"] > .tk-icon,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="last-reply-agent"] > i.tk-icon {
    background: var(--tkm-success) !important;
    color: #fff !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, .25) !important;
}

/* Stronger label color and weight for these two rows */
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="assigned-agent"] > span,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="last-reply-agent"] > span {
    color: var(--tkm-primary-700) !important;
    font-weight: 700 !important;
}

.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="assigned-agent"] > label,
.tk-admin .tk-board > .tk-user-details .tk-profile-list-conversation > ul > li[data-id="last-reply-agent"] > label {
    color: var(--tkm-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ============================================================
 * AGENT PICKER (.tk-inline-agents) — mirror the .tk-inline-departments
 * design from panel-redesign.css exactly so the two cards look like
 * siblings in the right panel.
 * ============================================================ */

/* Container — block layout */
.tk-board .tk-user-details .tk-inline.tk-inline-agents {
    display: block !important;
    padding: 0 !important;
    border-top: 1px solid #f3f4f6 !important;
    background: #fff !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Header label */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > h3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6b7280 !important;
    padding: 12px 16px 8px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    border-top: none !important;
    border-bottom: none !important;
    background: #fff !important;
}

/* Headset icon bubble (indigo, to differentiate from green dept) */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > h3::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    content: '\f590' !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e0e7ff !important;
    color: #4f46e5 !important;
    flex-shrink: 0 !important;
}

/* Select wrapper */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select {
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    padding: 0 16px 14px !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* Trigger (the <p>) — compact white pill */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > p {
    height: auto !important;
    line-height: 1 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 8px 32px 8px 12px !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    min-height: 0 !important;
}

/* Hover — blue glow ring (same as departments) */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > p:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
    color: #1e293b !important;
    background: #fff !important;
}

/* Chevron arrow */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > p::after {
    content: "\f078" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 9px !important;
    line-height: 1 !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > p:hover::after {
    color: #3b82f6 !important;
}

/* Dropdown panel — floating popover */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > ul {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important;
    padding: 4px !important;
    z-index: 100 !important;
    margin-top: 4px !important;
    top: calc(100% + 4px) !important;
    width: calc(100% - 32px) !important;
    left: 16px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    list-style: none !important;
}

/* Dropdown items */
.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > ul > li {
    padding: 8px 12px !important;
    border-radius: 7px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    border-bottom: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.1s ease !important;
    color: #334155 !important;
    background: transparent !important;
    list-style: none !important;
}

.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > ul > li:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > ul > li.tk-active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-weight: 600 !important;
}

/* RTL: mirror what panel-redesign.css does for departments */
[dir="rtl"] .tk-board .tk-user-details .tk-inline.tk-inline-agents {
    direction: rtl !important;
    text-align: right !important;
}
[dir="rtl"] .tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > p::after {
    right: auto !important;
    left: 12px !important;
}
[dir="rtl"] .tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > p {
    padding: 8px 12px 8px 32px !important;
}
[dir="rtl"] .tk-board .tk-user-details .tk-inline.tk-inline-agents > .tk-select > ul {
    left: auto !important;
    right: 16px !important;
}

/* ============================================================
 * SCROLLBARS
 * ============================================================ */
.tk-admin *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.tk-admin *::-webkit-scrollbar-track {
    background: transparent;
}

.tk-admin *::-webkit-scrollbar-thumb {
    background: #d8dbe6;
    border-radius: var(--tkm-r-pill);
    border: 2px solid var(--tkm-surface);
}

.tk-admin *::-webkit-scrollbar-thumb:hover {
    background: #b4b8c5;
}

/* Firefox */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area,
.tk-admin .tk-board > .tk-conversation .tk-list,
.tk-admin .tk-board > .tk-user-details .tk-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #d8dbe6 transparent;
}

/* ============================================================
 * COMMON BUTTONS
 * ============================================================ */
.tk-admin .tk-btn {
    border-radius: var(--tkm-r-pill) !important;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 18px;
    transition: var(--tkm-fast);
    box-shadow: 0 4px 12px rgba(79, 70, 229, .22);
}

.tk-admin .tk-btn:hover,
.tk-admin a.tk-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .32);
}

.tk-admin .tk-btn-icon {
    border-radius: var(--tkm-r-sm);
    transition: var(--tkm-fast);
}

.tk-admin .tk-btn-icon:hover {
    background: var(--tkm-primary-50);
    color: var(--tkm-primary-700);
}

/* ============================================================
 * INFO / TOAST PANELS
 * ============================================================ */
.tk-admin .tk-info,
.tk-admin .tk-info-bottom {
    border-radius: var(--tkm-r-md);
    box-shadow: var(--tkm-shadow-2);
    border: 1px solid var(--tkm-border);
}

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .tk-admin *,
    .tk-admin *::before,
    .tk-admin *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
 * RESPONSIVE — make sure tokens propagate at smaller widths
 * ============================================================ */
@media (max-width: 900px) {
    .tk-admin > .tk-header .tk-admin-nav > div > a {
        padding: 7px 10px;
        font-size: 13px;
    }

    .tk-admin .tk-board > .tk-conversation .tk-list {
        padding: 14px 14px 10px;
    }

    .tk-admin .tk-board > .tk-conversation .tk-editor {
        padding: 10px 12px;
    }
}

/* ============================================================
 * Topic note (system message) — centered pill bubble
 * JS creates: <div class="tk-notify-message sb-rich-cnt"><div class="tk-cnt"><div class="tk-message">…
 * No CSS file paints it (class mismatch: JS uses sb-rich-cnt, CSS uses tk-rich-cnt).
 * ============================================================ */
html body .tk-conversation .tk-list > div.tk-notify-message,
html body .tk-board .tk-list > div.tk-notify-message {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: fit-content !important;
    max-width: 85% !important;
    margin: 12px auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
}
html body .tk-conversation .tk-list > div.tk-notify-message > .tk-cnt,
html body .tk-board .tk-list > div.tk-notify-message > .tk-cnt {
    display: inline-block !important;
    background: #fff3c4 !important;
    background-color: #fff3c4 !important;
    color: #6b5b1f !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
    padding: 7px 14px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    text-align: center !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}
html body .tk-conversation .tk-list > div.tk-notify-message > .tk-cnt > .tk-message,
html body .tk-board .tk-list > div.tk-notify-message > .tk-cnt > .tk-message {
    background: transparent !important;
    background-color: transparent !important;
    color: #6b5b1f !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}
html body .tk-conversation .tk-list > div.tk-notify-message > .tk-cnt > .tk-message a,
html body .tk-board .tk-list > div.tk-notify-message > .tk-cnt > .tk-message a {
    color: #8b6914 !important;
    text-decoration: underline !important;
}

/* ============================================================
 * Voice message play button — modern rounded square (no plain circle)
 * JS structure: <div class="tk-player-btn tk-vp-btn"><svg class="tk-vp-play">…
 * Replaces the basic green circle with a soft rounded-square gradient button.
 * ============================================================ */
html body .tk-voice-player > .tk-player-btn,
html body .tk-voice-player > .tk-vp-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #00a884 0%, #008f6f 100%) !important;
    background-color: #00a884 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 168, 132, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    position: relative !important;
}
html body .tk-voice-player > .tk-player-btn:hover,
html body .tk-voice-player > .tk-vp-btn:hover {
    background: linear-gradient(135deg, #00bf94 0%, #00a07a 100%) !important;
    background-color: #00bf94 !important;
    box-shadow: 0 4px 10px rgba(0, 168, 132, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}
html body .tk-voice-player > .tk-player-btn:active,
html body .tk-voice-player > .tk-vp-btn:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 1px 3px rgba(0, 168, 132, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
html body .tk-voice-player > .tk-vp-btn svg,
html body .tk-vp-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
    pointer-events: none !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) !important;
}
html body .tk-vp-btn .tk-vp-play {
    margin-left: 2px !important;
}
/* Right (sent / agent) bubble — slightly darker green button */
html body .tk-list > div.tk-right .tk-voice-player > .tk-player-btn,
html body .tk-list > div.tk-right .tk-voice-player > .tk-vp-btn {
    background: linear-gradient(135deg, #128c7e 0%, #0a6f63 100%) !important;
    background-color: #128c7e !important;
    box-shadow: 0 2px 6px rgba(18, 140, 126, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
html body .tk-list > div.tk-right .tk-voice-player > .tk-player-btn:hover,
html body .tk-list > div.tk-right .tk-voice-player > .tk-vp-btn:hover {
    background: linear-gradient(135deg, #15a08f 0%, #0c8273 100%) !important;
    background-color: #15a08f !important;
    box-shadow: 0 4px 10px rgba(18, 140, 126, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
/* Voice waveform bars — slightly thicker + nicer hover */
html body .tk-voice-waveform span {
    min-width: 2px !important;
    border-radius: 2px !important;
    background: #b1bbc4 !important;
    transition: background 0.15s, height 0.35s ease !important;
}
html body .tk-list > div.tk-right .tk-voice-waveform span {
    background: #6fa88f !important;
}
html body .tk-voice-player.tk-playing .tk-voice-waveform span {
    background: #00a884 !important;
}
html body .tk-list > div.tk-right .tk-voice-player.tk-playing .tk-voice-waveform span {
    background: #128c7e !important;
}
@media (max-width: 768px) {
    html body .tk-voice-player > .tk-player-btn,
    html body .tk-voice-player > .tk-vp-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 11px !important;
    }
    html body .tk-voice-player > .tk-vp-btn svg,
    html body .tk-vp-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ============================================================
 * WhatsApp-style attach menu (+ button + popover)
 * Injected by /js/wa-attach-menu.js
 * ============================================================ */
/* Hide the originals consolidated into the menu */
html body .tk-editor .tk-bar-icons.tk-wa-menu-active > .tk-wa-hidden,
html body .tk-editor .tk-bar-icons > .tk-wa-hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* The + button itself — match other editor icons exactly. Higher specificity to beat whatsapp-mobile-editor's .tk-board .tk-conversation .tk-editor .tk-bar-icons > div selector */
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #54656f !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease !important;
    position: relative !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn::before,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn::before {
    content: none !important;
    display: none !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.7 !important;
    pointer-events: none !important;
    transition: transform 0.18s ease !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg line,
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg path,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg line,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg path {
    stroke-width: 1.7 !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn:hover,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn:hover {
    background: rgba(0, 168, 132, 0.10) !important;
    color: #00a884 !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn:active,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn:active {
    transform: scale(0.94) !important;
    background: rgba(0, 168, 132, 0.16) !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn.tk-wa-active,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn.tk-wa-active {
    background: #00a884 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.32) !important;
}
html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn.tk-wa-active svg,
html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn.tk-wa-active svg {
    transform: rotate(45deg) !important;
}

/* The popover container */
html body .tk-editor {
    position: relative !important;
}
html body .tk-editor > .tk-wa-attach-menu {
    position: absolute !important;
    bottom: 70px !important;
    left: 14px !important;
    right: auto !important;
    z-index: 9999 !important;
    min-width: 220px !important;
    max-width: 280px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 8px 0 !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(0.96) !important;
    transform-origin: bottom left !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important;
}
html body .tk-editor > .tk-wa-attach-menu.tk-wa-open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-arrow {
    position: absolute !important;
    bottom: -6px !important;
    left: 18px !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.02) !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 11px 16px !important;
    cursor: pointer !important;
    color: #111b21 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: background 0.12s ease !important;
    user-select: none !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:first-child {
    border-radius: 14px 14px 0 0 !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:last-child {
    border-radius: 0 0 14px 14px !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:only-child {
    border-radius: 14px !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:hover {
    background: #f0f2f5 !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:active {
    background: #e4e7eb !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f2f5 !important;
    color: #00a884 !important;
    flex-shrink: 0 !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-icon svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:nth-child(1) .tk-wa-menu-icon { background: #e8f5ee !important; color: #00a884 !important; }
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:nth-child(2) .tk-wa-menu-icon { background: #fdebec !important; color: #e74c5d !important; }
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:nth-child(3) .tk-wa-menu-icon { background: #ebf3fe !important; color: #1e88e5 !important; }
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:nth-child(4) .tk-wa-menu-icon { background: #fff4e5 !important; color: #f57c00 !important; }
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item:nth-child(5) .tk-wa-menu-icon { background: #f3e8fd !important; color: #8e44ad !important; }
html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-label {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* RTL: open from the right */
[dir="rtl"] html body .tk-editor > .tk-wa-attach-menu,
html body.tk-rtl .tk-editor > .tk-wa-attach-menu {
    left: auto !important;
    right: 14px !important;
    transform-origin: bottom right !important;
}
[dir="rtl"] html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-arrow,
html body.tk-rtl .tk-editor > .tk-wa-attach-menu .tk-wa-menu-arrow {
    left: auto !important;
    right: 18px !important;
}

/* Mobile: match the other icons exactly (36x36, 18px svg) */
@media (max-width: 768px) {
    html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn,
    html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    html body .tk-board .tk-conversation .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg,
    html body .tk-editor .tk-bar-icons > .tk-wa-plus-btn svg {
        width: 18px !important;
        height: 18px !important;
        stroke-width: 1.7 !important;
    }
    html body .tk-editor > .tk-wa-attach-menu {
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        bottom: 76px !important;
        border-radius: 16px !important;
    }
    [dir="rtl"] html body .tk-editor > .tk-wa-attach-menu,
    html body.tk-rtl .tk-editor > .tk-wa-attach-menu {
        left: 10px !important;
        right: 10px !important;
    }
    html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-item {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
    html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
    html body .tk-editor > .tk-wa-attach-menu .tk-wa-menu-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ============================================================
 * ADMIN POLISH LAYER (April 17, 2026)
 * ============================================================ */

/* ── Assignment section header (injected by admin-polish.js) ─ */
.tk-board .tk-user-details .tk-assignment-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 16px 4px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #6b7280 !important;
    background: #fff !important;
    border-top: 1px solid #f3f4f6 !important;
}
.tk-board .tk-user-details .tk-assignment-header > i {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
}

/* Unify dept + agent blocks under the Assignment header: no divider between,
   no top border since the header owns it */
.tk-board .tk-user-details .tk-assignment-header + .tk-inline-departments,
.tk-board .tk-user-details .tk-assignment-header + .tk-inline-agents,
.tk-board .tk-user-details .tk-inline-departments + .tk-inline-agents,
.tk-board .tk-user-details .tk-inline-agents + .tk-inline-departments {
    border-top: none !important;
}
/* Shrink the h3 labels into inline field captions */
.tk-board .tk-user-details .tk-inline.tk-inline-departments > h3,
.tk-board .tk-user-details .tk-inline.tk-inline-agents > h3 {
    padding: 8px 16px 4px !important;
    font-size: 10.5px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    border-top: none !important;
}
.tk-board .tk-user-details .tk-inline.tk-inline-departments > h3::before,
.tk-board .tk-user-details .tk-inline.tk-inline-agents > h3::before {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 8px !important;
    border-radius: 4px !important;
}

/* ── "Assign to me" button ─────────────────────────────────── */
.tk-board .tk-user-details .tk-inline.tk-inline-agents .tk-assign-me-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 16px 14px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4f46e5 !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}
.tk-board .tk-user-details .tk-inline.tk-inline-agents .tk-assign-me-btn:hover {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(79,70,229,0.25) !important;
}
.tk-board .tk-user-details .tk-inline.tk-inline-agents .tk-assign-me-btn > i {
    font-size: 10px !important;
}
[dir="rtl"] .tk-board .tk-user-details .tk-inline.tk-inline-agents .tk-assign-me-btn {
    direction: rtl !important;
}

/* ── Conversation list: always-visible status dot ──────────── */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li[data-conversation-id]::after {
    content: "" !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    pointer-events: none !important;
    box-shadow: 0 0 0 2px #fff !important;
}
/* Open (status 2 = in-progress) → green; status 1 = amber; 0/3 → grey */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li[data-conversation-status="2"]::after {
    background: #22c55e !important;
}
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li[data-conversation-status="1"]::after {
    background: #f59e0b !important;
}
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li.tk-active::after {
    box-shadow: 0 0 0 2px #eef2ff !important;
}
[dir="rtl"] .tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li[data-conversation-id]::after {
    right: auto !important;
    left: 14px !important;
}

/* Preview ellipsis on the inline "message" used inside the row */
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li .tk-ws-queue-preview,
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li .tk-message {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ── Attach "+" button: add hover affordance ──────────────── */
html body .tk-editor .tk-wa-plus-btn {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}
html body .tk-editor .tk-wa-plus-btn:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}
html body .tk-editor .tk-wa-plus-btn.tk-wa-active {
    background: #4f46e5 !important;
    color: #fff !important;
    transform: rotate(45deg) !important;
}
/* Native tooltip fallback rendering for data-tk-tooltip */
html body .tk-editor .tk-wa-plus-btn[data-tk-tooltip]:hover::before {
    content: attr(data-tk-tooltip) !important;
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #0f172a !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
html body .tk-editor .tk-wa-plus-btn.tk-wa-active[data-tk-tooltip]:hover::before {
    display: none !important;
}

/* ── Busy warning as floating pill above the editor ──────── */
.tk-board .tk-editor .tk-labels.tk-labels-has-warning {
    position: relative !important;
}
.tk-board .tk-editor .tk-labels .tk-status-warning {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    animation: tk-busy-in 0.22s ease-out !important;
}
@keyframes tk-busy-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Classification badge: stronger border for legibility ─ */
.tk-admin .tk-board > .tk-conversation > .tk-top .tk-classify-tag,
.tk-admin .tk-board > .tk-admin-list .tk-scroll-area ul li .tk-classify-tag {
    border-width: 1px !important;
    border-style: solid !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
}

/* ── Strip redundant emoji from section header <h3> text ── */
.tk-board .tk-user-details .tk-panel-notes > h3,
.tk-board .tk-user-details .tk-panel-tags > h3,
.tk-board .tk-user-details .tk-panel-attachments > h3 {
    font-variant-emoji: text !important;
}

/* ── Standardize profile-list icon palette to 3 semantic colors ──
   core (identity/contact) = indigo, metadata (time/type/lang) = slate,
   location = teal. Overrides the 9-color rainbow in panel-redesign.css. */
.tk-profile-list-conversation > ul > li[data-id="conversation-id"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="id"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="email"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="first_name"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="last_name"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="phone"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="last-reply-agent"] > .tk-icon {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.tk-profile-list-conversation > ul > li[data-id="user_type"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="creation_time"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="last_activity"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="browser_language"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="language"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="token"] > .tk-icon {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.tk-profile-list-conversation > ul > li[data-id="country"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="location"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="city"] > .tk-icon,
.tk-profile-list-conversation > ul > li[data-id="timezone"] > .tk-icon {
    background: #ccfbf1 !important;
    color: #0d9488 !important;
}