/* ============================================================================
   THIKAA ADMIN — ICON DESIGN POLISH 2026
   Pure icon/affordance refinement. Does NOT change the app's theme colors.
   Loaded last (gated), so it wins over chat-action-icons.css etc.

   Goal: turn the clashing rainbow "tile" buttons and inconsistent glyphs into a
   calm, uniform, enterprise-grade icon system — muted at rest, meaningful on
   hover, consistent size / shape / alignment everywhere. Built 2026-05-29.
   ============================================================================ */

/* ---- 1. CHAT TOP-BAR ACTION BUTTONS (check / eye / download / restore / trash)
   Was: 5 different bright gradient squares. Now: one uniform ghost button set;
   icon shows its semantic color only on hover. ------------------------------ */
.tk-menu-mobile > ul { gap: 6px !important; }

.tk-menu-mobile > ul li a.tk-btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: transparent !important;        /* kill the gradient tile */
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
/* rest state — calm, uniform muted glyphs */
.tk-menu-mobile > ul li a.tk-btn-icon i,
.tk-menu-mobile > ul li a.tk-btn-icon i::before,
.tk-menu-mobile > ul li a.tk-btn-icon::after {
    color: #64748b !important;
    font-size: 16px !important;
}
/* hover — soft neutral surface, no jump */
.tk-menu-mobile > ul li a.tk-btn-icon:hover {
    background: #eef1f4 !important;
    border-color: #e2e7ec !important;
    transform: none !important;
    box-shadow: none !important;
}

/* meaning revealed on hover only (keeps the affordance, drops the noise) */
.tk-menu-mobile > ul li a[data-value="archive"]:hover i        { color: #16a34a !important; }
.tk-menu-mobile > ul li a[data-value="archive"]:hover          { background: #e9f7ef !important; border-color:#cdeedd !important; }

.tk-menu-mobile > ul li a[data-value="read"]:hover::after,
.tk-menu-mobile > ul li a[data-value="unread"]:hover::after     { color: #4f46e5 !important; }
.tk-menu-mobile > ul li a[data-value="read"]:hover,
.tk-menu-mobile > ul li a[data-value="unread"]:hover            { background: #eef0fb !important; border-color:#dcdcf6 !important; }

.tk-menu-mobile > ul li a[data-value="transcript"]:hover i      { color: #475569 !important; }

.tk-menu-mobile > ul li a[data-value="inbox"]:hover::after      { color: #4f46e5 !important; }

.tk-menu-mobile > ul li a[data-value="delete"]:hover i,
.tk-menu-mobile > ul li a[data-value="empty-trash"]:hover i     { color: #dc2626 !important; }
.tk-menu-mobile > ul li a[data-value="delete"]:hover,
.tk-menu-mobile > ul li a[data-value="empty-trash"]:hover       { background: #fdeaea !important; border-color:#f6cfcf !important; }

/* normalise the read/unread/inbox ::after glyph sizing so it matches the rest */
.tk-menu-mobile > ul li a[data-value="read"]::after,
.tk-menu-mobile > ul li a[data-value="unread"]::after,
.tk-menu-mobile > ul li a[data-value="inbox"]::after {
    font-size: 16px !important;
    width: auto !important; height: auto !important;
    background: none !important; box-shadow: none !important; border: none !important;
}

/* ---- 1b. TOOLBAR LAYOUT FIX — stop the action icons from overlapping the
   "Bot" toggle. The action menu was position:absolute over the top-right corner,
   colliding with the inline bot button; the old opaque tiles just hid it.
   Pull it into normal flow (right-aligned) so everything sits in one clean row. */
.tk-conversation > .tk-top,
.tk-board > .tk-conversation > .tk-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.tk-conversation > .tk-top .tk-menu-mobile,
.tk-board > .tk-conversation > .tk-top .tk-menu-mobile {
    position: static !important;
    margin-inline-start: auto !important;   /* push the action cluster to the end */
    top: auto !important; right: auto !important; bottom: auto !important;
}

/* ---- 1c. "BOT" TOGGLE — render the unstyled <button> as a clean pill -------- */
.tk-top-bot-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 9999px !important;
    background: #fff !important;
    border: 1px solid #d6ddd8 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    box-shadow: 0 1px 2px rgba(15,31,23,.05) !important;
    cursor: pointer !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.tk-top-bot-toggle:hover { border-color: #9aa6b2 !important; box-shadow: 0 2px 6px rgba(15,31,23,.10) !important; }
.tk-top-bot-toggle .tk-bot-label { line-height: 1 !important; }

/* The robot glyph (fa-robot, \f544) was being clobbered by the legacy Support
   Board icon font → wrong/garbage icon. Force the real FA glyph so the robot
   ALWAYS renders, and colour it by state so on/off is obvious. */
.tk-top-bot-toggle .tk-bot-dot {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}
.tk-top-bot-toggle .tk-bot-dot::before { content: "\f544" !important; }   /* robot, both states */

/* active = bot running → green */
.tk-top-bot-toggle.active .tk-bot-dot,
.tk-top-bot-toggle[data-bot-active="true"] .tk-bot-dot { color: #16a34a !important; }
.tk-top-bot-toggle.active,
.tk-top-bot-toggle[data-bot-active="true"] { border-color: #b7e3c7 !important; background: #f3fbf6 !important; }

/* paused = bot off → grey, dimmed */
.tk-top-bot-toggle.paused .tk-bot-dot,
.tk-top-bot-toggle[data-bot-active="false"] .tk-bot-dot,
.tk-top-bot-toggle:not(.active):not([data-bot-active="true"]) .tk-bot-dot { color: #94a3b8 !important; }
.tk-top-bot-toggle.paused,
.tk-top-bot-toggle[data-bot-active="false"] { border-color: #d6ddd8 !important; background: #f5f6f7 !important; opacity: .85 !important; }

/* ---- 1d. REMOVE the redundant sidebar "Pause Bot" control. Bot on/off now
   lives in the top bar (#botToggleBtnTop). The sidebar #botToggleBtn duplicated
   it; hide the whole single-button wrapper so no empty gap is left. The top
   toggle keeps working (different id). ----------------------------------------- */
.tk-board #botToggleBtn,
#botToggleBtn,
.control-buttons { display: none !important; }

/* ---- 2. SEARCH + FILTER BUTTONS (right panel) — make them a matched pair ---- */
.tk-search-btn, .tk-filter-btn {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: background .15s ease, border-color .15s ease !important;
}
.tk-search-btn:hover, .tk-filter-btn:hover {
    background: #eef1f4 !important;
    border-color: #e2e7ec !important;
}
.tk-search-btn i, .tk-filter-btn i {
    color: #64748b !important;
    font-size: 16px !important;
    margin: 0 !important;
}
.tk-search-btn.tk-active i, .tk-filter-btn.tk-active i { color: #334155 !important; }

/* ---- 3. LEFT DETAIL-PANEL ROW ICONS — were pastel "rainbow" chips with the
   glyph INVISIBLE (the legacy SB font overrode FontAwesome → empty box). Fix:
   force the real FA glyph to render, and unify every chip to one calm neutral
   tone instead of a different pastel per row. -------------------------------- */
.tk-profile-list > ul > li > i.tk-icon,
.tk-profile-list > ul > li > .tk-icon,
.tk-profile-list > ul > li[data-id] > i.tk-icon {
    width: 26px !important; height: 26px !important; min-width: 26px !important;
    border-radius: 8px !important;
    background: #eef2f1 !important;                 /* single calm chip */
    color: #5b6b62 !important;                      /* muted glyph */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;                    /* solid FA weight so glyph shows */
    font-size: 12px !important;
}
/* The legacy .tk-icon rule was overriding the FA glyph CONTENT on some rows
   (→ tofu). Set the glyph explicitly per row so it ALWAYS renders. Unmapped
   rows fall back to a neutral info dot instead of an empty box. */
.tk-profile-list > ul > li > i.tk-icon::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f05a" !important;                    /* default: circle-info */
}
.tk-profile-list > ul > li[data-id="conversation-id"] > i.tk-icon::before { content: "\f292" !important; } /* hashtag */
.tk-profile-list > ul > li[data-id="id"] > i.tk-icon::before            { content: "\f2c1" !important; } /* id-badge */
.tk-profile-list > ul > li[data-id="email"] > i.tk-icon::before         { content: "\f0e0" !important; } /* envelope */
.tk-profile-list > ul > li[data-id="user_type"] > i.tk-icon::before     { content: "\f507" !important; } /* user-tag */
.tk-profile-list > ul > li[data-id="creation_time"] > i.tk-icon::before { content: "\f783" !important; } /* calendar-day */
.tk-profile-list > ul > li[data-id="last_activity"] > i.tk-icon::before { content: "\f017" !important; } /* clock */
.tk-profile-list > ul > li[data-id="first_name"] > i.tk-icon::before,
.tk-profile-list > ul > li[data-id="last_name"] > i.tk-icon::before     { content: "\f007" !important; } /* user */
.tk-profile-list > ul > li[data-id="phone"] > i.tk-icon::before         { content: "\f095" !important; } /* phone */
.tk-profile-list > ul > li[data-id="location"] > i.tk-icon::before,
.tk-profile-list > ul > li[data-id="city"] > i.tk-icon::before,
.tk-profile-list > ul > li[data-id="country"] > i.tk-icon::before       { content: "\f3c5" !important; } /* location-dot */

/* ---- 3b. QUICK-REPLY SUGGESTION CHIPS — plain grey boxes → refined chips ---- */
.tk-suggestions > span {
    background: #fff !important;
    border: 1px solid #d6ddd8 !important;
    border-radius: 12px !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15,31,23,.04) !important;
    transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
.tk-suggestions > span:hover {
    background: #f0faf4 !important;
    border-color: #2f9e64 !important;
    color: #0f5132 !important;
}

/* ---- 3c. COMPOSER ICON BUTTONS (emoji / mic / +) — drop the toy orange &
   purple gradient circles; match the calm ghost-icon language everywhere else.
   Uses the same high-specificity path as the rule that paints the gradient. -- */
.tk-editor .tk-bar-icons > div.tk-btn-emoji,
.tk-editor .tk-bar-icons > div.tk-btn-audio-clip,
.tk-editor .tk-bar-icons > div.tk-btn-attachment,
.tk-editor .tk-bar-icons > div.tk-btn-saved-replies,
.tk-editor .tk-bar-icons > div.tk-wa-plus-btn {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}
.tk-editor .tk-bar-icons > div.tk-btn-emoji:hover,
.tk-editor .tk-bar-icons > div.tk-btn-audio-clip:hover,
.tk-editor .tk-bar-icons > div.tk-btn-attachment:hover,
.tk-editor .tk-bar-icons > div.tk-btn-saved-replies:hover,
.tk-editor .tk-bar-icons > div.tk-wa-plus-btn:hover {
    background: #eef1f4 !important;
    background-image: none !important;
}
.tk-editor .tk-bar-icons > div.tk-btn-emoji i,
.tk-editor .tk-bar-icons > div.tk-btn-emoji::before,
.tk-editor .tk-bar-icons > div.tk-btn-audio-clip i,
.tk-editor .tk-bar-icons > div.tk-btn-audio-clip::before {
    color: #64748b !important;
}

/* ---- 4. GENERAL ICON-BUTTON AFFORDANCE — consistent rounded hover everywhere
   (e.g. note/attachment/menu icon buttons in the composer + headers) --------- */
.tk-admin .tk-icon-btn,
.tk-admin a.tk-btn-icon,
.tk-admin .tk-editor .tk-icon {
    border-radius: 10px !important;
    transition: background .15s ease !important;
}
.tk-admin .tk-icon-btn:hover,
.tk-admin .tk-editor .tk-icon:hover {
    background: #eef1f4 !important;
}

/* ---- 5. NAV ICONS — even spacing + matched optical size ------------------- */
.tk-admin > .tk-header > .tk-admin-nav > div > a:before {
    font-size: 14px !important;
    opacity: .95 !important;
    margin-inline-end: 7px !important;
}