@media (prefers-color-scheme: dark) {
    :root {
        --bg-app:           #0b141a;
        --bg-sidebar:       #111b21;
        --bg-chat:          #0b141a;
        --bg-bubble-out:    #005c4b;
        --bg-bubble-in:     #202c33;
        --bg-input:         #202c33;
        --bg-header:        #202c33;
        --bg-hover:         #2a3942;
        --bg-selected:      #2a3942;
        --bg-internal-note: #2d2a1a;

        --text-primary:     #e9edef;
        --text-secondary:   #8696a0;
        --text-muted:       #667781;
        --text-bubble-out:  #e9edef;
        --text-bubble-in:   #e9edef;

        --border-light:     #222d34;
        --border-medium:    #2a3942;

        --color-primary-light: #1a3a52;
    }

    .reaction-pill { background: var(--bg-hover); border-color: var(--border-medium); }
    .date-separator span { background: rgba(0,0,0,.4); }
    #context-menu { background: var(--bg-sidebar); border: 1px solid var(--border-medium); }
    #emoji-picker { background: var(--bg-sidebar); border: 1px solid var(--border-medium); }
    #lightbox img { border: 1px solid var(--border-medium); }
    .attach-file { background: rgba(255,255,255,.06); }
    .reply-quote { background: rgba(255,255,255,.06); }
}

/* Manual dark mode toggle class */
.dark-mode {
    --bg-app:           #0b141a;
    --bg-sidebar:       #111b21;
    --bg-chat:          #0b141a;
    --bg-bubble-out:    #005c4b;
    --bg-bubble-in:     #202c33;
    --bg-input:         #202c33;
    --bg-header:        #202c33;
    --bg-hover:         #2a3942;
    --bg-selected:      #2a3942;
    --bg-internal-note: #2d2a1a;
    --text-primary:     #e9edef;
    --text-secondary:   #8696a0;
    --text-muted:       #667781;
    --text-bubble-out:  #e9edef;
    --text-bubble-in:   #e9edef;
    --border-light:     #222d34;
    --border-medium:    #2a3942;
    --color-primary-light: #1a3a52;
}