:root {
    /* Base dark */
    --dark-bg: #0f172a;                 /* slate-900 */
    --dark-bg-secondary: #1e293b;       /* slate-800 */
    --dark-bg-tertiary: #334155;        /* slate-700 */
    --dark-border: #334155;
    --dark-border-soft: #475569;

    /* Text */
    --dark-color: #94a3b8;              /* slate-400 */
    --dark-color-strong: #cbd5e1;       /* slate-300 */
    --dark-color-audio: #e2e8f0;        /* slate-200 */

    /* Brand / accents */
    --color-success: #34d399;           /* emerald-400 */
    --color-success-strong: #10b981;    /* emerald-500 */
    --color-info: #38bdf8;              /* sky-400 */

    /* Hover backgrounds */
    --hover-success-soft: rgba(6, 78, 59, 0.2);   /* emerald-900/20 */
    --hover-success-soft-strong: rgba(6, 78, 59, 0.3);
    --hover-blue-soft: rgba(30, 58, 138, 0.2);

    /* Special */
    --bg-secondary-transparent: rgba(30, 41, 59, 0.3);
    --bg-secondary-strong: rgba(30, 41, 59, 0.9);

    /* Scroll */
    --scrollbar: #475569;
    --scrollbar-hover: #64748b;
}

.dark {

    * {
        font-weight: 700;
    }

    .ui-widget-content {
        background: var(--dark-bg);
        color: var(--dark-color);
        border-color: var(--dark-border-soft);
    }

    .ui-dialog .ui-dialog-titlebar.ui-corner-all,
    #modal-header-title,
    div#modal-text {
        background-color: var(--dark-bg);
        border-bottom: 1px solid var(--dark-border);
    }

    .transcription-dialog .recording-audio-content .mejs__container,
    .chat-messages .recording-audio-content .mejs__container,
    tr.recording-audio-tr .mejs__container,
    .transcription-dialog div.recording-audio-content,
    .chat-messages div.recording-audio-content,
    .chat-messages div.audio-file-name,
    .chat-messages div.audio-file-transcription {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-color-audio);
    }

    .chat-list-item.active {
        background-color: var(--dark-bg-secondary);
        color: var(--color-success);
        border-color: var(--dark-border-soft);
    }

    li.chat-user-item:nth-child(odd),
    li.channel-item:nth-child(odd),
    li.broadcast-item:nth-child(odd) {
        border-color: var(--dark-border);
        background-color: var(--dark-bg);
    }

    li.chat-user-item:nth-child(even),
    li.channel-item:nth-child(even),
    li.broadcast-item:nth-child(even) {
        border-color: var(--dark-border);
        background-color: var(--bg-secondary-transparent);
    }

    li.chat-user-item:hover,
    li.channel-item:hover,
    li.broadcast-item:hover,
    li.tridentBot.chat-user-item:hover {
        background-color: var(--hover-success-soft);
    }

    li.tridentBot.chat-user-item.chatUser-2:hover {
        background-color: var(--hover-blue-soft);
    }

    .broadcast-item,
    span.chat-user-name,
    #chatName {
        color: var(--dark-color-strong);
    }

    .custom-select,
    .new-select {
        background-color: var(--dark-bg-secondary);
        color: var(--color-success);
        border-color: var(--color-success-strong);
    }

    .custom-options:hover,
    .custom-select:hover,
    .new-select:hover {
        background-color: var(--hover-success-soft-strong);
    }

    .custom-options,
    .custom-options:hover {
        background-color: var(--dark-bg-secondary);
    }

    .custom-options li:hover,
    .custom-options li.selected {
        background-color: var(--dark-bg-tertiary);
    }

    .chat-user-date,
    .custom-options,
    .custom-options * {
        border-color: var(--dark-border);
    }

    .chat-user-date span,
    .transcriptions-languages *,
    .custom-select-trigger *,
    .custom-options *,
    .weather-item > div *,
    .hourly-forecast-chart h3,
    .weather-hover-header h2 {
        color: var(--dark-color);
    }

    .chat-user-date span,
    div.chat-transcript-container,
    div.tridentBot-1 .chat-micro-languages {
        background: var(--dark-bg);
    }

    .weather-item {
        background-color: var(--bg-secondary-strong);
        border-bottom: 1px solid var(--dark-border);
    }

    .suggestion-msg .llm-content, .local.llm-msg .llm-text, .outgoing-transcription .transcription-text,
    .local .file-data,
    .local .file-data *,
    .local .localText {
        color: var(--color-success);
        border-color: var(--color-success);
    }

    .transcription-dialog .recording-audio-content .mejs__button > button,
    .chat-messages .recording-audio-content .mejs__button > button,
    td.recording-audio-container .mejs__button > button {
        background-color: var(--color-success);
    }

    .remote.llm-msg .llm-text, .incoming-transcription .transcription-text,
    .remote .remoteText {
        color: var(--color-info);
        border-color: var(--color-info);
    }

    div.chat-controls, div.chat-resend-panel,
    div.chat-user-input {
        border-color: var(--dark-border-soft); 
    }


    .chat-user-input span.lu-icon {
        background-color: var(--dark-color);
    }

    .action-lu-icon:hover {
        background-color: var( --dark-bg-tertiary);
    }
   
    .chat-modal div.chat-text *,
    #chatControls div.chat-text *,
    #chatArea div.chat-text:not(.chat-filter) *,
    .chat-modal div.chat-text, #chatControls div.chat-text, #chatArea div.chat-text:not(.chat-filter), #robot-spellcheck {
        color: var(--dark-color)
    }

    ul.chat-more-actions {
        background-color: var(--dark-bg-secondary);
        box-shadow: 1px 1px 2px 2px var(--dark-border-soft);
    }

    .history-filter.active {
        border-bottom-color: var(--color-success-strong);
        color: var(--color-success);
        background-color: var(--hover-success-soft);
    }

    .history-filter.active span {
        background-color: var(--dark-bg-tertiary);
        color: var(--color-success);
    }

    div.chat-text-actions-button > div > i {
        color: var(--color-info);
    }

    i.text-action {
        background-color: var(--color-info);
    }

    .presence-btn {
        color: var(--dark-color);
    }

    .presence-btn:hover {
        background-color: var(--dark-bg-tertiary);
        color: var(--dark-color-strong);
    }

    .presence-btn.active {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-color-strong);
        box-shadow: 0 1px 2px 0 var(--dark-border-soft);
    }

    div#scheduledMessageDialog form input {
        border-color: var(--dark-border-soft);
        background-color: var(--dark-bg-secondary);
    }

    .A *,
    .P * {
        color: var(--color-success);
    }

    .ui-widget-header {
        color: var(--dark-color);
    }

    .nav-tabs li a {
        color: var(--color-info);
        background-color: var(--dark-bg-secondary);
    }

    .nav-tabs li.active a {
        color: var(--dark-color);
        border-color: var(--dark-border-soft);
        background-color: var(--dark-bg-secondary);
    }

    .tab-pane {
        background-color: var(--dark-bg);
        border-color: var(--dark-border);
    }

    .thot-session-list,
    .thot-sessions-container,
    .llm-chat-text input.chat-text.chat-user-input,
    .template-message-preview,
    div#widgetDetailsContainer, div#imDetailsContainer,
    input#chatText-list-name-edit-boradcast,
    textarea {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border-soft);
    }

    form#imInitContainerForm input, form#imInitContainerForm select, form#imInitContainerForm textarea,
    form#sendEmailContainerForm input, form#sendEmailContainerForm textarea {
        background-color: var(--dark-bg-secondary);
        border-color: var(--color-success);
    }

    .suggestion-msg .llm-content, .local.llm-msg .llm-text, .outgoing-transcription .transcription-text {
        color: var(--color-success);
    }

    #imHistoryModal *
    #historyTableContainer *,
    .panel.panel-org * {
        color: var(--dark-color);
    }

    #audioControlsContainer {
        background-color: var(--dark-bg-secondary); 
        border: 2px solid var(--dark-border-soft);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.3);
    }

    .current-call-tagger-container.abstract-dialog {
        border-color: var(--dark-border);
    }

    .live-summary {
        background-color: var(--dark-bg); 
        border-color: var(--dark-border);
    }

    .lr-left *,
    .lr-attitude *,
    .lr-header * {
        color: var(--dark-color);
    }

    .lr-right,
    .lr-left,
    .lr-header {
        background-color: var(--dark-bg-secondary); 
        border-color: var(--dark-border-soft);
    }

    .lr-body,
    .lr-attitude {
        border-color: var(--dark-border-soft);
    }

    div#chatUserTab {
        border-color: var(--dark-border-soft);
    }

    .chat-response-message, .message .response-msg-info {
        background-color: var(--dark-bg-tertiary);
    }

    .remote .response-owner, .message .response-msg-info.remote .response-owner {
        color: var(--color-info);
    }

    .message .response-msg-info.remote {
        border-color: var(--color-info);
    }

    #chatList #chatUserTab[data-connectto*="tridentBot-2"].tridentBot .bot-state,
    .chatUser-2.tridentBot .bot-state {
        background-color: rgba(30, 58, 138, 0.2);
        border-color: #1e40af;
    }

    #chatList #chatUserTab[data-connectto*="tridentBot-2"].tridentBot .bot-state span.lu-icon,
    .chatUser-2.tridentBot .bot-state span.lu-icon {
        color: #60a5fa;;
    }

    .teams .user-name-text {
        color: var(--color-info);
    }

    #chatText[placeholder]:empty:before {
        color: #64748b;
    }

    span.more-text {
        background-color: var(--dark-bg-secondary);
        color: var(--dark-color);
    }
    .thot-sessions-container * {
        color: var(--dark-color);
    }
    .session-item:hover {
        background-color: var(--dark-bg-tertiary);
    }

    .chat-user-input .action-lu-icon:hover span.lu-icon {
        background-color: var(--dark-color-audio);
    }

    .shortcut-list {
        background-color: var(--dark-bg);
        box-shadow: 1px 1px 2px 2px var(--dark-border-soft);
    }
    .shortcut-list-ul li.shortcut-text,
    .shortcut-list .filter.dropdown-item > input {
        background-color: var(--dark-bg-secondary);
        border-color: var(--dark-border-soft);
    }

    .shortcut-list-ul li.section {
        background-color: var(--dark-bg-tertiary);
        color: var(--dark-color-audio);
    }

    .accept-panel {
        background-color: var(--dark-bg);
    }

    tr[class^="contact-"] * {
        color: var(--dark-color);
    }

    .wa-bubble-btn::after {
        background: var(--dark-bg-secondary); /* slate-800 */
        box-shadow:
            -1px 1px 0 0 rgb(71 85 105); /* slate-600 */
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .wa-bubble-btn:hover::after {
        background: var(--dark-bg-tertiary); /* slate-800 */
        box-shadow:
            -1px 1px 0 0 rgb(71 85 105); /* slate-600 */
    }
    
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}