/* Settings controls share the language selector's compact custom-dropdown UI. */
#settingsView .settings-select-switcher,
#settingsView .notification-sound-switcher {
    position: relative !important;
    width: 250px !important;
    min-width: 250px !important;
}

#settingsView .settings-select-current-btn,
#settingsView .notification-sound-current-btn,
#settingsView .ai-settings-row-btn {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    transform: none !important;
    transition: background-color 120ms ease, border-color 120ms ease !important;
}

#settingsView .settings-select-current-btn:hover,
#settingsView .settings-select-current-btn:focus-visible,
#settingsView .notification-sound-current-btn:hover,
#settingsView .notification-sound-current-btn:focus-visible,
#settingsView .ai-settings-row-btn:hover,
#settingsView .ai-settings-row-btn:focus-visible {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.11) !important;
    outline: none !important;
}

#settingsView #aiPersonalityChangeBtn,
#settingsView #ttsVoiceConfigureBtn {
    position: relative !important;
    justify-content: space-between !important;
}

#settingsView #aiPersonalityChangeBtn::after,
#settingsView #ttsVoiceConfigureBtn::after {
    content: "▾";
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    margin-left: auto;
}

#settingsView .settings-select-chevron,
#settingsView .notification-sound-chevron {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    transition: transform 120ms ease !important;
}

#settingsView .settings-select-switcher.open .settings-select-chevron,
#settingsView .notification-sound-switcher.open .notification-sound-chevron {
    transform: rotate(180deg) !important;
}

#settingsView .settings-select-menu,
#settingsView .notification-sound-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    background: var(--bg-hover) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 50 !important;
}

#settingsView .settings-select-switcher.open .settings-select-menu,
#settingsView .notification-sound-switcher.open .notification-sound-menu {
    display: flex !important;
}

#settingsView .settings-select-option,
#settingsView .notification-sound-option {
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transform: none !important;
}

#settingsView .settings-select-option:hover,
#settingsView .settings-select-option.active,
#settingsView .notification-sound-option:hover,
#settingsView .notification-sound-option.active {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
}

#settingsView .notification-sound-option {
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
}

#settingsView .settings-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Personality and voice keep their existing dialogs, but use the same trigger. */
#settingsView #aiPersonalityChangeBtn::after,
#settingsView #ttsVoiceConfigureBtn::after {
    content: "▾";
    color: var(--text-secondary);
    font-size: 11px;
    margin-left: auto;
}

body.light-mode #settingsView .settings-select-current-btn,
body.light-mode #settingsView .notification-sound-current-btn,
body.light-mode #settingsView .ai-settings-row-btn {
    border-color: rgba(0, 0, 0, 0.10) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode #settingsView .settings-select-menu,
body.light-mode #settingsView .notification-sound-menu {
    border-color: rgba(0, 0, 0, 0.10) !important;
    background: #eef1f6 !important;
}

@media (max-width: 640px) {
    #settingsView .settings-select-switcher,
    #settingsView .notification-sound-switcher,
    #settingsView .settings-select-current-btn,
    #settingsView .notification-sound-current-btn,
    #settingsView .ai-settings-row-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* The AI panel has no trailing content after its last row, so it needs no
   extra bottom separators. Keep the row dividers above it intact. */
#settingsView #settings-tab-ai .ai-settings-card,
#settingsView #settings-tab-ai .ai-settings-panel,
#settingsView #settings-tab-ai .ai-settings-row:last-child {
    border-bottom: 0 !important;
}

#settingsView #settings-tab-ai .ai-settings-card::before,
#settingsView #settings-tab-ai .ai-settings-card::after,
#settingsView #settings-tab-ai .ai-settings-panel::before,
#settingsView #settings-tab-ai .ai-settings-panel::after {
    display: none !important;
}