/* ---- NMAC Chat — all styles with forced white text ---- */

/* Chat sidebar items */
.nmac-chat-item {
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s;
}
.nmac-chat-item:hover { background: #2f2f2f; }
.nmac-chat-item.active { background: #2f2f2f; }

.nmac-delete-chat-btn {
    background: none; border: none; color: #888;
    cursor: pointer; padding: 2px 6px; font-size: 12px;
    transition: opacity 0.2s, color 0.2s;
}
.nmac-delete-chat-btn:hover { color: #ff4444 !important; }

/* Messages */
.nmac-msg { padding: 12px 24px; margin-bottom: 16px; }
.nmac-msg-user { display: flex; justify-content: flex-end; }

/* Force ALL text inside the chat messages area to be white */
#nmac-messages,
#nmac-messages * {
    color: #ffffff !important;
}

/* Override specific elements that need different colors */
.nmac-msg-assistant .nmac-msg-content a { color: #6ea8fe !important; }
.nmac-data-note,
div[style*="font-style:italic"] { color: #999 !important; }

/* Example question chips */
.nmac-example-chip {
    transition: all 0.2s;
}
.nmac-example-chip:hover {
    background: #444 !important;
    border-color: #666 !important;
    color: #fff !important;
}

/* Suggestion chips */
.nmac-suggestion-chip {
    background: #2f2f2f; border: 1px solid #444;
    border-radius: 16px; padding: 6px 14px;
    color: #ffffff !important; font-size: 12px; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.nmac-suggestion-chip:hover {
    background: #444; border-color: #666; color: #fff !important;
}

/* Thinking dots animation */
.nmac-thinking {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 24px; color: #aaa !important; font-size: 14px;
}
.nmac-thinking-dots { display: flex; gap: 4px; }
.nmac-thinking-dots span {
    width: 6px; height: 6px; background: #888;
    border-radius: 50%; animation: nmac-blink 1.4s infinite;
}
.nmac-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.nmac-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nmac-blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

/* Scrollbar */
#nmac-chat-list::-webkit-scrollbar,
#nmac-messages-container::-webkit-scrollbar { width: 6px; }
#nmac-chat-list::-webkit-scrollbar-track,
#nmac-messages-container::-webkit-scrollbar-track { background: transparent; }
#nmac-chat-list::-webkit-scrollbar-thumb,
#nmac-messages-container::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* Input focus override — Dash adds its own styles */
#nmac-chat-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
#nmac-chat-input::placeholder { color: #888; }

/* Hide Dash spinner inside chat area */
.nmac-chat-area .dash-spinner { display: none !important; }

/* ---- Mode dropdown dark theme (in heading bar) ---- */
.nmac-mode-dropdown {
    width: 130px;
}
.nmac-mode-dropdown .Select-control {
    background: #2f2f2f !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    cursor: pointer;
    height: 32px !important;
    min-height: 32px !important;
}
.nmac-mode-dropdown .Select-value-label,
.nmac-mode-dropdown .Select-placeholder,
.nmac-mode-dropdown .Select-input input,
.nmac-mode-dropdown .Select-value {
    color: #d1d1d1 !important;
    font-size: 12px !important;
    line-height: 30px !important;
}
.nmac-mode-dropdown .Select-arrow-zone .Select-arrow {
    border-top-color: #888 !important;
}
.nmac-mode-dropdown .Select-menu-outer {
    background: #2f2f2f !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    z-index: 9999 !important;
    margin-top: 4px !important;
}
.nmac-mode-dropdown .Select-option,
.nmac-mode-dropdown .VirtualizedSelectOption {
    background: #2f2f2f !important;
    color: #d1d1d1 !important;
    font-size: 12px !important;
}
.nmac-mode-dropdown .Select-option:hover,
.nmac-mode-dropdown .Select-option.is-focused,
.nmac-mode-dropdown .VirtualizedSelectOption:hover,
.nmac-mode-dropdown .VirtualizedSelectFocusedOption {
    background: #444 !important;
    color: #ffffff !important;
}
.nmac-mode-dropdown .Select-menu {
    max-height: 200px !important;
    overflow-y: auto !important;
}