/* Visual polish — materials, depth, contrast. No layout changes. */

/* ─── Shell surfaces ─── */
.nav-rail,
.input-bar {
    background: var(--shell-bg);
    border-color: var(--shell-border);
}

.nav-rail {
    box-shadow: inset -1px 0 0 var(--shell-border);
}

#page-chat .nav-rail {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
}

#page-chat .sidebar {
    /* Aside fill lives on the capsule shelf — keep inner sidebar clear. */
    box-shadow: none;
}

#page-chat .chat-header {
    box-shadow: none;
}

.chat-main::before {
    background-image: radial-gradient(var(--chat-dot-grid) 1px, transparent 1px);
    opacity: 0.45;
}

/* ─── Sidebar contacts ─── */
.sidebar-head {
    border-bottom-color: var(--shell-border);
}

.contact-search-wrap {
    border-bottom-color: var(--shell-border);
}

#page-chat .contact-row:hover {
    background: transparent;
    border-color: transparent;
}

#page-chat .contact-row.is-active {
    color: var(--text);
}

#page-chat .contact-row.is-active .contact-name {
    color: var(--text);
    font-weight: 600;
}

.sidebar-foot {
    border-top-color: var(--shell-border);
}

/* ─── Message bubbles ─── */
.message-bubble--own {
    background: var(--bubble-own);
    border-color: color-mix(in srgb, var(--theme-tint, #fff) 5%, transparent);
    box-shadow: var(--shadow-bubble-own);
}

.message-bubble--other {
    background: var(--bubble-other);
    border-color: var(--bubble-other-border);
    box-shadow: var(--shadow-bubble-other);
}

.message-bubble--own .message-meta {
    color: color-mix(in srgb, var(--bubble-own-text) 68%, transparent);
}

.message-bubble--other .message-meta {
    color: color-mix(in srgb, var(--bubble-other-text) 68%, transparent);
    opacity: 1;
}

/* ─── Inputs (composer, search) ─── */
.contact-search-input,
.message-search-panel input {
    background: var(--input-fill);
    border-color: var(--input-border);
    box-shadow: var(--input-shadow);
}

.contact-search-input:hover,
.message-search-panel input:hover {
    background: var(--input-fill-hover);
    border-color: var(--input-border-hover);
}

.contact-search-input:focus,
.message-search-panel input:focus {
    background: var(--input-fill-focus);
    border-color: var(--accent);
    box-shadow: var(--input-shadow-focus);
}

/* ─── Buttons (unified ghost icon language) ─── */
.mini-icon-btn {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.mini-icon-btn:hover:not(:disabled) {
    background: var(--row-hover);
    border-color: transparent;
    color: var(--text);
}

/* ─── Overlays & modals ─── */
.overlay-backdrop {
    background: var(--backdrop);
}

.overlay-backdrop.is-modal {
    background: var(--backdrop-modal);
}

.overlay-surface {
    background: var(--overlay-bg);
    border-color: var(--overlay-border);
    box-shadow: var(--overlay-shadow);
}

.modal-panel,
.popover-menu {
    background: var(--overlay-bg);
    border-color: var(--overlay-border);
    box-shadow: var(--overlay-shadow);
}

.toggle-row,
.shortcut-list > div {
    background: var(--settings-row-bg);
    border-color: var(--border);
}

.toggle-row:hover {
    background: var(--row-hover);
    border-color: var(--border-strong);
}

.theme-picker button {
    background: var(--btn-secondary-bg);
}

.theme-picker button.is-active {
    background: var(--accent-10);
    box-shadow: inset 0 0 0 1px var(--accent-muted), var(--shadow-1);
}

/* ─── Status chip ─── */
#status {
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--text-tertiary);
}

.overlay-surface.overlay-surface--message-actions {
    background: color-mix(in srgb, var(--theme-section, #121212) 58%, transparent);
    border-color: color-mix(in srgb, var(--theme-tint, #ffffff) 10%, transparent);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 color-mix(in srgb, var(--theme-tint, #ffffff) 6%, transparent);
}