/* ChatNBH Custom Theme — Dark with Gold Accents
 *
 * Color palette:
 *   Background:  #2d2d2d (charcoal)
 *   Sidebar:     #252525 (darker charcoal)
 *   Surface:     #333333 (cards, inputs)
 *   User bubble: #3a3a3a
 *   Text:        #e0e0e0 (off-white)
 *   Accent:      #d4a843 (gold/amber)
 *   Muted:       #888888
 */

/* ======================================================================
   1. GLOBAL DARK THEME BASE
   ====================================================================== */

body,
html {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Main chat area — avoid overriding login page or dialogs */
#root > .MuiBox-root {
    background-color: #2d2d2d !important;
}

/* ======================================================================
   2. SIDEBAR
   ====================================================================== */

/* Sidebar container */
[class*="sideBar"],
nav,
aside {
    background-color: #252525 !important;
}

/* Sidebar thread list items */
[class*="threadList"] a,
[class*="thread-"] {
    color: #e0e0e0 !important;
}

[class*="threadList"] a:hover,
[class*="thread-"]:hover {
    background-color: #333333 !important;
}

/* Logo text styling (injected by custom.js) */
.chatnbh-logo {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 16px;
    letter-spacing: -0.02em;
}

.chatnbh-logo .chat-part {
    color: #ffffff;
}

.chatnbh-logo .nbh-part {
    color: #d4a843;
}

/* New Chat button */
[class*="newChat"],
button[id*="new-chat"] {
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

[class*="newChat"]:hover,
button[id*="new-chat"]:hover {
    background-color: #333333 !important;
}

/* ======================================================================
   3. MESSAGE BUBBLES
   ====================================================================== */

/* User messages — right-aligned gray bubble */
[class*="userMessage"],
.cl-message[data-author="user"],
div[data-testid="user-message"] {
    background-color: #3a3a3a !important;
    border-radius: 12px !important;
    color: #e0e0e0 !important;
}

/* Bot/assistant messages — no bubble, transparent */
[class*="assistantMessage"],
.cl-message[data-author="assistant"],
div[data-testid="assistant-message"] {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

/* Message text */
.cl-message p,
.cl-message span,
.cl-message li,
.cl-message h1,
.cl-message h2,
.cl-message h3 {
    color: #e0e0e0 !important;
}

/* ======================================================================
   4. INPUT AREA
   ====================================================================== */

/* Textarea */
textarea,
[class*="composer"] textarea,
[class*="inputArea"] textarea {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
    border-color: #555555 !important;
}

textarea::placeholder {
    color: #888888 !important;
}

/* Submit button — gold circle */
button[type="submit"],
[class*="submit"],
button[class*="send"] {
    background-color: #d4a843 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    border: 2px solid #d4a843 !important;
}

button[type="submit"]:hover,
[class*="submit"]:hover,
button[class*="send"]:hover {
    background-color: #c49a3a !important;
    border-color: #c49a3a !important;
}

/* Attachment/paperclip button */
[class*="attach"],
button[aria-label*="attach"],
button[aria-label*="upload"] {
    color: #888888 !important;
}

[class*="attach"]:hover {
    color: #e0e0e0 !important;
}

/* ======================================================================
   5. OUTPUT TYPE DROPDOWN (ChatSettings Select)
   ====================================================================== */

/* Select widget in composer area */
[class*="chatSettings"] select,
[class*="settings"] select,
.MuiSelect-root,
.MuiSelect-select {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
    border-color: #555555 !important;
}

/* Dropdown menu */
.MuiMenu-paper,
.MuiPopover-paper,
[class*="menuPaper"] {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.MuiMenuItem-root {
    color: #e0e0e0 !important;
}

.MuiMenuItem-root:hover {
    background-color: #444444 !important;
}

.MuiMenuItem-root.Mui-selected {
    background-color: rgba(212, 168, 67, 0.15) !important;
    color: #d4a843 !important;
}

/* ======================================================================
   6. SCROLLBAR
   ====================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #2d2d2d;
}

::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

/* ======================================================================
   7. LINKS AND ACCENTS
   ====================================================================== */

a {
    color: #d4a843 !important;
}

a:hover {
    color: #e6be5a !important;
}

/* Primary buttons and accents */
.MuiButton-containedPrimary,
[class*="primary"] {
    background-color: #d4a843 !important;
    color: #ffffff !important;
}

/* ======================================================================
   8. MISC OVERRIDES
   ====================================================================== */

/* Dividers */
hr,
.MuiDivider-root {
    border-color: #444444 !important;
}

/* Tooltips */
.MuiTooltip-tooltip {
    background-color: #444444 !important;
    color: #e0e0e0 !important;
}

/* Dialog/modal backgrounds */
.MuiDialog-paper {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

/* Input labels */
.MuiInputLabel-root,
.MuiFormLabel-root {
    color: #888888 !important;
}

/* Chip/tag elements */
.MuiChip-root {
    background-color: #444444 !important;
    color: #e0e0e0 !important;
}

/* Icons */
.MuiSvgIcon-root {
    color: #888888 !important;
}

/* User menu area at bottom of sidebar */
[class*="userButton"],
[class*="profile"] {
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

/* Login page — only target the outermost container */
[class*="loginPage"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Source citations / expandable sections */
details,
summary {
    color: #888888 !important;
}

details[open] {
    color: #e0e0e0 !important;
}