/* Calibrated accent palette: every preset keeps white labels legible on the
   message bubble and accent buttons, while the ring stays quiet and clean. */
#settingsView #settings-tab-appearance .color-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 13px !important;
    width: 100% !important;
    max-width: 900px !important;
}

#settingsView #settings-tab-appearance .color-dot {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

#settingsView #settings-tab-appearance .color-dot:hover {
    transform: translateY(-1px) scale(1.06) !important;
    filter: brightness(1.08) saturate(1.05) !important;
}

#settingsView #settings-tab-appearance .color-dot:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 3px !important;
}

#settingsView #settings-tab-appearance .color-dot.active {
    transform: scale(1.08) !important;
    border: 0 !important;
    box-shadow:
        0 0 0 2px var(--bg-sidebar),
        0 0 0 4px var(--accent-color),
        0 7px 16px color-mix(in srgb, var(--accent-color) 26%, transparent) !important;
}

#settingsView #settings-tab-appearance .color-dot.active::after {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
    #settingsView #settings-tab-appearance .color-dot {
        transition: none !important;
    }
}