/* Final light/dark pass for settings option surfaces. Keep AI and
   Notifications on the same geometry instead of letting legacy rules flatten
   one section differently from the other. */
#settingsView #settings-tab-ai .ai-settings-card,
#settingsView #settings-tab-ai .ai-settings-panel,
#settingsView #settings-tab-notifications > .settings-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#settingsView #settings-tab-ai .ai-settings-panel,
#settingsView #settings-tab-notifications .notification-settings-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

#settingsView #settings-tab-ai .ai-settings-row,
#settingsView #settings-tab-notifications .notification-setting-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 72px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: none !important;
}

#settingsView #settings-tab-ai .ai-settings-row::before,
#settingsView #settings-tab-ai .ai-settings-row::after,
#settingsView #settings-tab-notifications .notification-setting-row::before,
#settingsView #settings-tab-notifications .notification-setting-row::after {
    display: none !important;
}

#settingsView #settings-tab-ai .ai-highlight-color-row[hidden] {
    display: none !important;
}

#settingsView #settings-tab-ai .ai-settings-row:first-child,
#settingsView #settings-tab-notifications .notification-setting-row:first-child,
#settingsView #settings-tab-ai .ai-settings-row:last-child,
#settingsView #settings-tab-notifications .notification-setting-row:last-child {
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.light-mode #settingsView #settings-tab-ai .ai-settings-row,
body.light-mode #settingsView #settings-tab-notifications .notification-setting-row {
    border-color: rgba(15, 23, 42, 0.10) !important;
    background: rgba(15, 23, 42, 0.035) !important;
}

body.light-mode #settingsView #settings-tab-ai .ai-settings-row:first-child,
body.light-mode #settingsView #settings-tab-notifications .notification-setting-row:first-child,
body.light-mode #settingsView #settings-tab-ai .ai-settings-row:last-child,
body.light-mode #settingsView #settings-tab-notifications .notification-setting-row:last-child {
    border-top-color: rgba(15, 23, 42, 0.10) !important;
    border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

/* Theme switches must also reset logo filters after a fast light/dark toggle. */
html[data-theme="dark"] .logo-icon-img,
html[data-theme="dark"] .toggle-logo-icon {
    --logo-filter-base: none !important;
}

html[data-theme="dark"] .logicum-mark,
html[data-theme="dark"] .welcome-center-logo img,
html[data-theme="dark"] .empty-chat-logo img {
    filter: none !important;
}

html[data-theme="light"] .logo-icon-img,
html[data-theme="light"] .toggle-logo-icon {
    --logo-filter-base: invert(1) brightness(0.72) !important;
}

html[data-theme="light"] .logicum-mark,
html[data-theme="light"] .welcome-center-logo img,
html[data-theme="light"] .empty-chat-logo img {
    filter: invert(1) brightness(0.72) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12)) !important;
}

@media (max-width: 700px) {
    #settingsView #settings-tab-ai .ai-settings-row,
    #settingsView #settings-tab-notifications .notification-setting-row {
        min-height: 68px !important;
        padding: 14px !important;
    }
}