/* ============================================================
   Washeej Professional Theme Overrides
   Comprehensive styling overhaul for inbox/chat UI + global fixes
   Covers: light + dark themes, all message types,
          dashboard header, doc-preview, automation pages
   Date: 2026-03-05
   ============================================================ */

/* ========================================
   0. DASHBOARD HEADER (always dark bg)
   The header uses hsl(var(--base-d-400)) — always dark.
   Text must always be white/light regardless of theme.
======================================== */
.dashboard .dashboard-header__left .title {
    color: #fff !important;
}

.dashboard .user-info__name {
    color: #fff !important;
}

.dashboard .dashboard-header .breadcrumb-item,
.dashboard .dashboard-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.75) !important;
}

.dashboard .dashboard-header .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dashboard .dashboard-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ========================================
   1. LAYOUT PANELS
======================================== */

/* Left conversation list panel */
.chatbox-area__left {
    background-color: hsl(var(--wj-surface));
    border-right: 1px solid hsl(var(--wj-border));
}

/* Chat header */
.chatbox-area__body .chat-box__header {
    background-color: hsl(var(--wj-surface));
    border-bottom: 1px solid hsl(var(--wj-border));
    box-shadow: var(--wj-shadow-sm);
}

.chatbox-area__body .chat-box__header .search-btn,
.chatbox-area__body .chat-box__header .template_button,
.chatbox-area__body .chat-box__header .clear_button,
.chatbox-area__body .chat-box__header .pause-bot-btn {
    color: hsl(var(--wj-text-secondary));
    transition: color 0.2s, background 0.2s;
}

.chatbox-area__body .chat-box__header .template_button:hover,
.chatbox-area__body .chat-box__header .clear_button:hover,
.chatbox-area__body .chat-box__header .pause-bot-btn:hover {
    color: hsl(var(--wj-text));
    background: hsl(var(--wj-surface-3));
    border-radius: 6px;
}

/* Right contact details panel */
.chatbox-area__body .body-right {
    background-color: hsl(var(--wj-surface));
    border-left: 1px solid hsl(var(--wj-border));
}

/* ========================================
   2. CONVERSATION LIST (Left Panel)
======================================== */
.chatbox-area__left .chatbox-wrapper__header {
    border-bottom: 1px solid hsl(var(--wj-border));
}

.chatbox-area__left .chatbox-wrapper__header .search-form .form--control {
    background-color: hsl(var(--wj-surface-2)) !important;
    color: hsl(var(--wj-text)) !important;
    border: 1px solid hsl(var(--wj-border)) !important;
}

.chatbox-area__left .chatbox-wrapper__header .search-form .form--control::placeholder {
    color: hsl(var(--wj-text-muted)) !important;
}

.chatbox-area__left .chatbox-wrapper__header .search-form__icon {
    color: hsl(var(--wj-text-muted));
}

.chatbox-area__left .chatbody .chat-list__item {
    border-bottom: 1px solid hsl(var(--wj-border-subtle));
    transition: background-color 0.15s;
}

.chatbox-area__left .chatbody .chat-list__item.active,
.chatbox-area__left .chatbody .chat-list__item:hover {
    background-color: hsl(var(--wj-surface-2));
}

.chatbox-area__left .chatbody .chat-list__content .name {
    color: hsl(var(--wj-text));
}

.chatbox-area__left .chatbody .chat-list__content .text {
    color: hsl(var(--wj-text-muted));
}

.chatbox-area__left .chatbody .chat-list__content .right .time {
    color: hsl(var(--wj-text-muted));
}

/* ========================================
   3. MESSAGE AREA
======================================== */

/* Chat footer / input area background */
.chatbox-area__body .chat-box__footer {
    background: hsl(var(--wj-surface-2));
    border-top: 1px solid hsl(var(--wj-border));
}

/* Input row */
.input-area {
    background: hsl(var(--wj-surface));
    border: 1px solid hsl(var(--wj-border));
}

.input-area .form--control {
    color: hsl(var(--wj-text)) !important;
}

.input-area .form--control::placeholder {
    color: hsl(var(--wj-text-muted)) !important;
}

/* Emoji icon */
.emoji-icon {
    color: hsl(var(--wj-text-secondary));
}

/* Send button */
.chating-btn {
    color: hsl(var(--base));
}

/* Toolbar buttons (image, document, etc.) */
.chat-send-area .btn-group .btn-item {
    background-color: hsl(var(--wj-surface));
    color: hsl(var(--base));
    border: 1px solid hsl(var(--wj-border));
    transition: background 0.2s, border-color 0.2s;
}

.chat-send-area .btn-group .btn-item:hover {
    background-color: hsl(var(--wj-surface-2));
    border-color: hsl(var(--base) / 0.3);
}

/* Chat media dropdown */
.chat-media__list,
.chat-url__list,
.chat-list__wrapper {
    background-color: hsl(var(--wj-surface));
    border: 1px solid hsl(var(--wj-border));
    box-shadow: var(--wj-shadow-lg);
}

.chat-media__list .media-item,
.chat-url__list .url-item {
    color: hsl(var(--wj-text));
    transition: background 0.15s;
}

.chat-media__list .media-item:hover,
.chat-url__list .url-item:hover {
    background-color: hsl(var(--wj-surface-2));
}

.chat-media__list .media-item .icon,
.chat-url__list .url-item .icon {
    color: hsl(var(--base));
}

.chat-media__list .media-item .title,
.chat-url__list .url-item .title {
    color: hsl(var(--wj-text));
}

/* ========================================
   4. MESSAGE BUBBLES
======================================== */

/* Sent messages (right side) - accent/brand colored */
.single-message.message--right .message-content {
    background-color: hsl(var(--base) / 0.12);
    border: 1px solid hsl(var(--base) / 0.18);
}

.single-message.message--right .message-content .message-text {
    color: hsl(var(--wj-text));
}

.single-message.message--right .message-content .message-text a {
    color: hsl(var(--base));
}

/* Received messages (left side) */
.single-message.message--left .message-content {
    background-color: hsl(var(--wj-surface));
    border: 1px solid hsl(var(--wj-border));
}

.single-message.message--left .message-content .message-text {
    color: hsl(var(--wj-text));
}

/* Message text */
.message-text {
    color: hsl(var(--wj-text));
    font-size: 14px;
    line-height: 1.5;
}

/* Message time */
.message-time {
    color: hsl(var(--wj-text-muted));
    font-size: 11px;
}

/* Date separator */
.date-separator__text {
    background-color: hsl(var(--wj-surface));
    color: hsl(var(--wj-text-secondary));
    border: 1px solid hsl(var(--wj-border));
    box-shadow: var(--wj-shadow-sm);
}

/* Message sender badge (below sent messages) */
.message-sender-badge {
    color: hsl(var(--wj-text-muted));
}

/* Revoked message */
.wa-revoked {
    color: hsl(var(--wj-text-muted));
    font-style: italic;
}

/* ========================================
   5. INTERACTIVE MESSAGES (Buttons, Lists, CTA)
======================================== */
.wa-interactive {
    background: hsl(var(--wj-surface));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 10px;
    overflow: hidden;
}

.wa-interactive__header {
    padding: 10px 12px 0;
}

.wa-interactive__header-text {
    color: hsl(var(--wj-text));
    font-weight: 600;
    font-size: 14px;
}

.wa-interactive__header-media {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.wa-interactive__body {
    padding: 8px 12px;
}

.wa-interactive__body p {
    color: hsl(var(--wj-text));
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.wa-interactive__footer {
    padding: 0 12px 8px;
}

.wa-interactive__footer span {
    color: hsl(var(--wj-text-muted));
    font-size: 12px;
}

.wa-interactive__actions {
    border-top: 1px solid hsl(var(--wj-border));
    display: flex;
    flex-direction: column;
}

.wa-interactive__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    color: hsl(var(--base));
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid hsl(var(--wj-border));
    transition: background 0.15s;
    cursor: default;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.wa-interactive__btn:first-child {
    border-top: 0;
}

.wa-interactive__btn:hover {
    background: hsl(var(--base) / 0.06);
}

.wa-interactive__btn--link {
    color: hsl(var(--base));
    text-decoration: none;
}

.wa-interactive__btn--link:hover {
    color: hsl(var(--base));
    text-decoration: none;
}

.wa-interactive__btn i {
    color: hsl(var(--base)) !important;
    fill: none !important;
}

/* ========================================
   6. TEMPLATE MESSAGES
======================================== */
.template-message-display {
    background: hsl(var(--wj-surface));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 10px;
    overflow: hidden;
}

.template-header-text {
    padding: 10px 12px 4px;
    color: hsl(var(--wj-text));
}

.template-body-text {
    padding: 4px 12px;
}

.template-body-text p {
    color: hsl(var(--wj-text));
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.template-footer-text {
    padding: 0 12px 8px;
}

.template-footer-text small {
    color: hsl(var(--wj-text-muted));
}

.template-buttons {
    border-top: 1px solid hsl(var(--wj-border));
}

.template-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    color: hsl(var(--base));
    font-size: 14px;
    font-weight: 500;
    border-top: 1px solid hsl(var(--wj-border));
}

.template-button:first-child {
    border-top: 0;
}

.template-button i {
    color: hsl(var(--base)) !important;
    fill: none !important;
}

/* ========================================
   7. AUDIO PLAYER
======================================== */
.wa-audio-player {
    background: hsl(var(--wj-surface-2));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 10px;
    padding: 8px 12px;
}

.wa-audio__play-btn {
    color: hsl(var(--wj-text));
    background: none;
    border: none;
}

.wa-audio__current-time,
.wa-audio__duration {
    color: hsl(var(--wj-text-muted));
    font-size: 11px;
}

.wa-audio__speed-btn {
    color: hsl(var(--wj-text-secondary));
    background: hsl(var(--wj-surface-3));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 6px;
}

.wa-audio__download-btn {
    color: hsl(var(--wj-text-secondary));
}

.wa-audio__bar {
    background: hsl(var(--wj-text-muted));
}

.wa-audio__progress-overlay .wa-audio__bar {
    background: hsl(var(--base));
}

/* ========================================
   8. VIDEO PLAYER
======================================== */
.wa-video-player {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.wa-video__download {
    color: hsl(var(--wj-text-inverse));
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   9. DOCUMENT PREVIEW
======================================== */
.doc-preview__link {
    background: hsl(var(--wj-surface-2));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.doc-preview__link:hover {
    border-color: hsl(var(--base) / 0.3);
}

.doc-preview__filename {
    color: hsl(var(--wj-text));
    font-weight: 600;
}

.doc-preview__type-name {
    color: hsl(var(--wj-text-muted));
}

/* ========================================
   10. CONTACT CARD (vCard)
======================================== */
.wa-contact-card {
    background: hsl(var(--wj-surface-2));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 10px;
}

.wa-contact-card__name {
    color: hsl(var(--wj-text));
}

.wa-contact-card__org,
.wa-contact-card__phone {
    color: hsl(var(--wj-text-muted));
}

.wa-contact-card__action {
    color: hsl(var(--base));
}

/* ========================================
   11. LOCATION MESSAGE
======================================== */
.wa-location {
    border: 1px solid hsl(var(--wj-border));
    border-radius: 10px;
    overflow: hidden;
}

.wa-location__name {
    color: hsl(var(--wj-text));
}

.wa-location__address {
    color: hsl(var(--wj-text-muted));
}

/* ========================================
   12. REACTIONS
======================================== */
.wa-reactions__badge {
    background: hsl(var(--wj-surface));
    border: 1px solid hsl(var(--wj-border));
    border-radius: 12px;
}

/* ========================================
   13. RIGHT PANEL (Contact Details)
======================================== */
.chatbox-area__body .body-right__top-btn button {
    color: hsl(var(--wj-text-secondary));
}

.chatbox-area__body .body-right .profile-details__top .profile-name {
    color: hsl(var(--wj-text));
}

.chatbox-area__body .body-right .profile-details__top .text {
    color: hsl(var(--wj-text-secondary));
}

.chatbox-area__body .body-right .profile-details__top .text .link {
    color: hsl(var(--wj-text-secondary));
}

.chatbox-area__body .body-right .profile-details__top .text .link:hover {
    color: hsl(var(--base));
}

.chatbox-area__body .body-right .profile-details__tab .details-content__text {
    color: hsl(var(--wj-text-secondary));
}

.chatbox-area__body .body-right .profile-details__tab .details-content__text .title {
    color: hsl(var(--wj-text));
}

.chatbox-area__body .body-right .profile-details__tab .details-content__tag .tag-title {
    color: hsl(var(--wj-text));
}

.chatbox-area__body .body-right .profile-details__tab .details-content__status .status-title {
    color: hsl(var(--wj-text));
}

/* Assignment section */
.chatbox-area__body .body-right .profile-details__tab .details-content__status .select2+.select2-container .select2-selection {
    background-color: hsl(var(--wj-input-bg)) !important;
    border: 1px solid hsl(var(--wj-input-border)) !important;
}

.chatbox-area__body .body-right .profile-details__tab .details-content__status .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: hsl(var(--wj-input-text)) !important;
}

/* Notes */
.note-wrapper__form .form--label {
    color: hsl(var(--wj-text-secondary));
}

.note-wrapper__form .form--control {
    background-color: hsl(var(--wj-input-bg)) !important;
    border: 1px solid hsl(var(--wj-input-border)) !important;
    color: hsl(var(--wj-input-text)) !important;
}

.note-wrapper__form .form--control::placeholder {
    color: hsl(var(--wj-input-placeholder)) !important;
}

.note-wrapper .output {
    background: hsl(var(--wj-surface-2));
    border: 1px solid hsl(var(--wj-border-subtle));
}

.note-wrapper .output .text {
    color: hsl(var(--wj-text));
}

.note-wrapper .output .icon {
    color: hsl(var(--wj-text-muted));
}

.note-wrapper .output .date {
    color: hsl(var(--wj-text-muted));
}

/* ========================================
   14. TABS (Chat filters + Details tabs)
======================================== */
.chatbox-area__left .chatbox-wrapper__tab .custom--tab .nav-item .nav-link {
    color: hsl(var(--wj-text-secondary));
}

.chatbox-area__left .chatbox-wrapper__tab .custom--tab .nav-item .nav-link.active {
    color: #fff;
}

/* ========================================
   15. GOVERNANCE BANNERS
======================================== */
.gov-banner {
    border-bottom: 1px solid hsl(var(--wj-border));
}

/* Bot paused banner */
.bot-paused-banner {
    background: hsl(var(--wj-warning-bg)) !important;
    border-bottom: 1px solid hsl(var(--wj-warning-text) / 0.2) !important;
}

.bot-paused-banner .fw-bold {
    color: hsl(var(--wj-warning-text)) !important;
}

/* Governance lock overlay */
.governance-lock-overlay__content {
    color: hsl(var(--wj-text));
}

.governance-lock-overlay__icon {
    color: hsl(var(--wj-text-muted));
}

.governance-lock-overlay__desc {
    color: hsl(var(--wj-text-secondary));
}

/* ========================================
   16. BLOCKED CONTACT BANNER
======================================== */
.blocked-message {
    background: hsl(var(--wj-danger-bg));
    color: hsl(var(--wj-danger-text));
    border: 1px solid hsl(var(--wj-danger-text) / 0.2);
    border-radius: 8px;
}

/* ========================================
   17. START NEW CONVERSATION BUTTON
======================================== */
#startNewConversation {
    color: #fff !important;
}

/* ========================================
   18. SKELETON LOADERS
======================================== */
.skeleton {
    background: hsl(var(--wj-surface-3));
}

.conversation-loader {
    color: hsl(var(--wj-text-muted));
}

/* ========================================
   19. EMPTY STATES
======================================== */
.empty-message,
.error-message {
    color: hsl(var(--wj-text-muted));
}

.empty-conversation {
    background: hsl(var(--wj-surface-2));
}

/* ========================================
   20. CHAT BOX CONTENT (name & mobile in header)
======================================== */
.chatbox-area__body .chat-box__content .name {
    color: hsl(var(--wj-text));
}

.chatbox-area__body .chat-box__content .text {
    color: hsl(var(--wj-text-secondary));
}

/* ========================================
   21. MESSAGE SENDER SOURCE LABEL
======================================== */
.single-message .message-sender-label {
    font-size: 11px;
}

/* ========================================
   22. AI ASSIST BUTTONS
======================================== */
.ai-translate-button span,
.ai-response-button span {
    color: hsl(var(--base));
}

/* ========================================
   23. LIST MESSAGE MODAL PREVIEW
======================================== */
.message-preview-list {
    background: hsl(var(--wj-surface));
}

.message-preview-list__body {
    color: hsl(var(--wj-text));
}

/* ========================================
   24. MEDIA LIBRARY MODAL
======================================== */
.media-library-content {
    background: hsl(var(--wj-surface));
}

/* ========================================
   25a. DOCUMENT PREVIEW — Ensure proper contrast
======================================== */
.doc-preview__badge {
    color: #fff !important;
}

.doc-preview__filename {
    color: hsl(var(--wj-text)) !important;
}

.doc-preview__type-name {
    color: hsl(var(--wj-text-muted)) !important;
}

.doc-preview__link {
    background: hsl(var(--wj-surface)) !important;
    border-color: hsl(var(--wj-border)) !important;
}

.doc-preview__link:hover {
    border-color: hsl(var(--wj-border-strong)) !important;
}

/* Sent messages override — keep doc readable */
.message--right .doc-preview__link {
    background: hsl(var(--wj-surface)) !important;
}

.message--right .doc-preview__filename {
    color: hsl(var(--wj-text)) !important;
}

/* ========================================
   25b. AUTOMATION V2 BUTTONS — Preserve outline colors
======================================== */
.av2-btn--outline-primary {
    color: #3b82f6 !important;
}

.av2-btn--outline-success {
    color: #22c55e !important;
}

.av2-btn--outline-warning {
    color: #f59e0b !important;
}

.av2-btn--outline-danger {
    color: #ef4444 !important;
}

.av2-btn--outline-info {
    color: #0ea5e9 !important;
}

.av2-btn--outline:hover {
    color: #fff !important;
}

.av2-btn--primary,
.av2-btn--success,
.av2-btn--warning {
    color: #fff !important;
}

.av2-btn--secondary {
    color: #475569 !important;
}

[data-theme="dark"] .av2-btn--secondary {
    background: hsl(var(--wj-surface-3)) !important;
    color: hsl(var(--wj-text-secondary)) !important;
}

[data-theme="dark"] .av2-btn--outline-primary {
    color: #60a5fa !important;
}

[data-theme="dark"] .av2-btn--outline-success {
    color: #4ade80 !important;
}

[data-theme="dark"] .av2-btn--outline-warning {
    color: #fbbf24 !important;
}

[data-theme="dark"] .av2-btn--outline-danger {
    color: #f87171 !important;
}

[data-theme="dark"] .av2-btn--outline-info {
    color: #38bdf8 !important;
}

/* ========================================
   25c. FLOW BUILDER BUTTONS — Ensure btn-text inherits
======================================== */
.flow-builder-btn .btn-text {
    color: inherit !important;
}

.flow-builder-btn--primary .btn-text,
.flow-builder-btn--primary i {
    color: #fff !important;
}

.flow-builder-btn--success .btn-text,
.flow-builder-btn--success i {
    color: #fff !important;
}

.flow-builder-btn--secondary .btn-text {
    color: #94a3b8 !important;
}

.flow-builder-btn--secondary:hover .btn-text {
    color: #e2e8f0 !important;
}

/* ========================================
   25. GLOBAL BUTTON TEXT FIX
   Fix gray text on primary/base action buttons
======================================== */
.btn--primary,
.btn--base,
.btn--success,
.btn--danger,
.btn--warning,
.btn--info {
    color: #fff !important;
}

.btn--primary i,
.btn--base i,
.btn--success i,
.btn--danger i,
.btn--warning i,
.btn--info i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Outline buttons - text should be the button color, not gray */
.btn-outline--base,
.btn--outline--base,
.btn--outline-base {
    color: hsl(var(--base)) !important;
}

.btn-outline--base:hover,
.btn--outline--base:hover,
.btn--outline-base:hover {
    color: #fff !important;
}

/* Secondary/light buttons */
.btn-outline-secondary,
.btn--outline--secondary {
    color: hsl(var(--wj-text-secondary)) !important;
    border-color: hsl(var(--wj-border-strong)) !important;
}

.btn-outline-secondary:hover,
.btn--outline--secondary:hover {
    color: #fff !important;
}

/* ========================================
   26. AUTOMATION V2 EDITOR BUTTON FIX
   Ensure publish/save buttons have visible text
======================================== */
.flow-builder-container .btn--primary,
.flow-builder-container .btn-sm.btn--primary,
#btnPublish,
#confirmPublish {
    color: #fff !important;
}

#btnPublish i,
#confirmPublish i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ========================================
   DARK MODE SPECIFIC OVERRIDES
   Only for cases where tokens alone aren't enough
======================================== */
[data-theme="dark"] .chatbox-area__body .chat-box__footer {
    background: hsl(var(--wj-surface));
}

[data-theme="dark"] .input-area {
    background: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
}

/* Dark mode sent bubble */
[data-theme="dark"] .single-message.message--right .message-content {
    background-color: hsl(var(--base) / 0.18);
    border-color: hsl(var(--base) / 0.25);
}

/* Dark mode received bubble */
[data-theme="dark"] .single-message.message--left .message-content {
    background-color: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
}

/* Dark mode interactive messages */
[data-theme="dark"] .wa-interactive {
    background: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
}

[data-theme="dark"] .wa-interactive__actions {
    border-top-color: hsl(var(--wj-border));
}

[data-theme="dark"] .wa-interactive__btn {
    border-top-color: hsl(var(--wj-border));
}

/* Dark mode template messages */
[data-theme="dark"] .template-message-display {
    background: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
}

/* Dark mode audio player */
[data-theme="dark"] .wa-audio-player {
    background: hsl(var(--wj-surface-3));
    border-color: hsl(var(--wj-border));
}

/* Dark mode chat media dropdown */
[data-theme="dark"] .chat-media__list,
[data-theme="dark"] .chat-url__list,
[data-theme="dark"] .chat-list__wrapper {
    background-color: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
}

[data-theme="dark"] .chat-media__list .media-item:hover,
[data-theme="dark"] .chat-url__list .url-item:hover {
    background-color: hsl(var(--wj-surface-3));
}

/* Dark mode toolbar buttons */
[data-theme="dark"] .chat-send-area .btn-group .btn-item {
    background-color: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
    color: hsl(var(--base));
}

[data-theme="dark"] .chat-send-area .btn-group .btn-item:hover {
    background-color: hsl(var(--wj-surface-3));
}

/* Dark mode date separator */
[data-theme="dark"] .date-separator__text {
    background-color: hsl(var(--wj-surface-2));
    border-color: hsl(var(--wj-border));
    color: hsl(var(--wj-text-secondary));
}

/* Dark mode bot paused banner */
[data-theme="dark"] .bot-paused-banner {
    background: hsl(var(--wj-warning-bg)) !important;
    border-bottom-color: hsl(var(--wj-border)) !important;
}

[data-theme="dark"] .bot-paused-banner .fw-bold {
    color: hsl(var(--wj-warning-text)) !important;
}

/* Dark mode document preview */
[data-theme="dark"] .doc-preview__link {
    background: hsl(var(--wj-surface-3));
    border-color: hsl(var(--wj-border));
}

/* Dark mode contact card */
[data-theme="dark"] .wa-contact-card {
    background: hsl(var(--wj-surface-3));
    border-color: hsl(var(--wj-border));
}

/* Dark mode location */
[data-theme="dark"] .wa-location {
    border-color: hsl(var(--wj-border));
}

/* Dark mode notes */
[data-theme="dark"] .note-wrapper .output {
    background: hsl(var(--wj-surface-3));
    border-color: hsl(var(--wj-border));
}

/* Dark button icon fix — don't override icons inside inbox toolbar buttons */
[data-theme="dark"] .chat-send-area .btn-group .btn-item i,
[data-theme="dark"] .chat-send-area .btn-group .btn-item i::before {
    color: hsl(var(--base)) !important;
    fill: none !important;
    -webkit-text-fill-color: hsl(var(--base)) !important;
}

/* Dark mode: ensure primary/base buttons stay white text */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn--base,
[data-theme="dark"] .btn--success,
[data-theme="dark"] .btn--danger,
[data-theme="dark"] .btn--warning,
[data-theme="dark"] .btn--info {
    color: #fff !important;
}

[data-theme="dark"] .btn--primary i,
[data-theme="dark"] .btn--base i,
[data-theme="dark"] .btn--success i,
[data-theme="dark"] .btn--danger i {
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Dark mode outline buttons */
[data-theme="dark"] .btn-outline--base,
[data-theme="dark"] .btn--outline--base {
    color: hsl(var(--base)) !important;
    border-color: hsl(var(--base) / 0.5) !important;
}

[data-theme="dark"] .btn-outline--base:hover,
[data-theme="dark"] .btn--outline--base:hover {
    color: #fff !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: hsl(var(--wj-text-secondary)) !important;
    border-color: hsl(var(--wj-border-strong)) !important;
}

/* Ensure dark mode doesn't break colored action buttons in the inbox */
[data-theme="dark"] .chatbox-area .btn--base,
[data-theme="dark"] .chatbox-area .btn--primary {
    color: #fff !important;
}

[data-theme="dark"] .chatbox-area .btn--base i,
[data-theme="dark"] .chatbox-area .btn--primary i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}