.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--theme-toggle-border, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--theme-toggle-hover-bg, rgba(37, 99, 235, 0.08));
}

.admin-body .theme-toggle:hover {
    border-color: var(--admin-primary, #2563eb);
    color: var(--admin-primary, #2563eb);
}

body:not(.admin-body):not(.portal-body) .theme-toggle:hover {
    border-color: var(--tm-primary, #f97316);
    color: var(--tm-primary, #f97316);
}

.theme-toggle i {
    font-size: 1.1rem;
    line-height: 1;
}

:root,
[data-theme="dark"] {
    --surface-card: #141414;
    --surface-border: rgba(255, 255, 255, 0.08);
    --surface-text: #f1f5f9;
    --surface-muted: #94a3b8;
    --surface-input-bg: rgba(255, 255, 255, 0.05);
    --surface-bot-bubble: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] {
    --surface-card: #ffffff;
    --surface-border: rgba(15, 23, 42, 0.1);
    --surface-text: #1e293b;
    --surface-muted: #64748b;
    --surface-input-bg: #f8fafc;
    --surface-bot-bubble: #f1f5f9;
}

[data-theme="dark"] .theme-icon-light,
[data-theme="light"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-dark,
[data-theme="light"] .theme-icon-light {
    display: inline;
}