/*
 * Accent preference cascade.
 *
 * The base styles intentionally keep a red fallback so the app still looks
 * right before the current account is loaded. Once accent-theme.ts runs, the
 * variables below are updated locally for that account and every red halo in
 * the app follows the selected colour.
 */
:root {
    --accent-red: #ff343d;
    --accent-red-dim: #c91822;
    --accent-red-bright: #ff5c63;
    --accent-red-rgb: 255, 52, 61;
    --accent-red-soft: rgba(255, 52, 61, 0.14);
    --accent-red-glow-weak: rgba(255, 52, 61, 0.08);
    --accent-red-glow-medium: rgba(255, 52, 61, 0.18);
    --accent-red-glow: rgba(255, 52, 61, 0.32);
    --accent-red-glow-strong: rgba(255, 52, 61, 0.52);
}

.app-loader-mark stop:first-child {
    stop-color: var(--accent-red-bright);
}

.app-loader-mark stop:last-child {
    stop-color: var(--accent-red-dim);
}

.app-loading-bar,
.progress-bar {
    background: var(--accent-red);
    box-shadow: 0 0 16px var(--accent-red-glow);
}

/* Shared controls, empty states and the public chat. */
.brand-top-left,
.chat-title,
.suggestion-kicker,
.suggestion-trigger svg,
.public-chat-empty-icon,
.spam-warning-text,
.password-prompt-title,
.custom-modal-box h3 {
    color: var(--accent-red);
}

.suggestion-trigger,
.public-chat-empty,
.public-chat-empty-icon,
.suggestion-field textarea:focus,
.suggestion-language:focus,
.password-prompt-box,
.custom-modal-box {
    border-color: var(--accent-red-glow-medium);
}

.suggestion-trigger:hover,
.suggestion-trigger:focus-visible {
    border-color: var(--accent-red);
    background: var(--accent-red-soft);
    box-shadow: 0 0 22px var(--accent-red-glow-weak);
}

.suggestion-trigger svg {
    filter: drop-shadow(0 0 7px var(--accent-red-glow));
}

.suggestion-submit,
.password-prompt-btn-confirm,
.modal-btn-confirm {
    border-color: var(--accent-red);
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 8px 24px var(--accent-red-glow);
}

.suggestion-submit:hover:not(:disabled),
.password-prompt-btn-confirm:hover,
.modal-btn-confirm:hover {
    box-shadow: 0 12px 28px var(--accent-red-glow-strong);
    filter: brightness(1.08);
}

.public-chat-empty {
    background:
        radial-gradient(circle at 50% 0%, var(--accent-red-soft), transparent 65%),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 34px var(--accent-red-glow-weak);
}

.public-chat-empty-icon {
    background: var(--accent-red-soft);
    box-shadow: 0 0 20px var(--accent-red-glow-weak);
}

#chat-window::-webkit-scrollbar-thumb:hover,
.private-chat-messages::-webkit-scrollbar-thumb:hover,
.user-list-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-red);
}

#user-input:focus,
.private-chat-input input:focus,
.private-chat-input:focus-within,
#friend-search:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 0 18px var(--accent-red-glow-weak);
}

#send-btn,
#pv-send-btn {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 9px 22px var(--accent-red-glow);
}

#send-btn:hover,
#pv-send-btn:hover {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 0 24px var(--accent-red-glow-strong);
}

.message-bubble.me,
#chat-window .message-wrapper.me .message-bubble,
#private-chat-messages .message.own-message {
    border-color: var(--accent-red-glow-strong);
    background:
        linear-gradient(135deg, var(--accent-red-soft), rgba(16, 16, 20, 0.3)),
        linear-gradient(145deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 12px 28px var(--accent-red-glow);
}

#chat-window .message-avatar,
.search-avatar {
    border-color: var(--accent-red-glow-medium);
    background: linear-gradient(145deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 7px 18px var(--accent-red-glow-medium);
}

#chat-window .message-avatar:hover,
#chat-window .message-avatar:focus-visible,
.search-avatar:hover {
    outline-color: var(--accent-red-glow-strong);
    box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 8px 22px var(--accent-red-glow);
}

.menu-item:hover,
.red-outline-button:hover {
    background: var(--accent-red);
    box-shadow: 0 8px 20px var(--accent-red-glow);
}

.chat-footer.spam-error #user-input,
.private-chat-input.spam-error {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak);
}

/* Private-chat navigation, placeholders and personal message actions. */
.top-control-btn:hover,
.settings-icon-btn:hover {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 32%),
        linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    border-color: var(--accent-red);
    box-shadow: 0 8px 24px var(--accent-red-glow), 0 0 22px var(--accent-red-glow-medium);
}

.top-control-btn:active,
.settings-icon-btn:active {
    box-shadow: 0 4px 14px var(--accent-red-glow);
}

.profile-circle:hover {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 0 20px var(--accent-red-glow);
}

#friend-search:focus,
.conversation-search-toggle:hover,
.conversation-search-toggle:focus-visible,
.conversation-search-toggle.is-text-mode {
    border-color: var(--accent-red);
    background: linear-gradient(145deg, var(--accent-red-soft), rgba(255, 255, 255, 0.035));
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 0 18px var(--accent-red-glow-medium);
}

.conversation-search-toggle.is-text-mode {
    background: linear-gradient(145deg, var(--accent-red), var(--accent-red-dim));
}

#search-results {
    border-color: var(--accent-red);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px var(--accent-red-glow-weak);
    scrollbar-color: var(--accent-red-glow-strong) rgba(255, 255, 255, 0.035);
}

.search-item:hover {
    color: var(--accent-red);
}

.chat-placeholder-card {
    background:
        radial-gradient(circle at 0% 50%, var(--accent-red-soft), transparent 34%),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), 0 0 28px var(--accent-red-glow-weak);
}

.chat-placeholder-icon,
.pvm-inline-empty-icon {
    color: var(--accent-red);
    filter: drop-shadow(0 0 9px var(--accent-red-glow));
}

.chat-header {
    background:
        radial-gradient(circle at 100% 50%, var(--accent-red-glow-weak), transparent 30%),
        linear-gradient(180deg, rgba(12, 12, 14, 0.99), rgba(8, 8, 10, 0.99));
}

.chat-header::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), var(--accent-red-glow), rgba(255, 255, 255, 0.03));
}

.chat-contact-avatar {
    border-color: var(--accent-red-glow-strong);
}

.chat-contact-avatar:hover,
.chat-contact-avatar:focus-visible {
    border-color: var(--accent-red);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.035), 0 0 0 4px var(--accent-red-glow-weak), 0 10px 24px var(--accent-red-glow);
}

.chat-header-status-dot,
.typing-spinner {
    background-color: var(--accent-red);
    border-top-color: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red-glow);
}

#private-chat-messages .message.own-message .msg-react-btn:hover,
.reaction-pill:hover,
.reaction-picker-item:hover,
.emoji-dropdown .emoji-item:hover {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    border-color: var(--accent-red);
    box-shadow: 0 6px 16px var(--accent-red-glow);
}

.emoji-dropdown,
.reaction-picker-popover {
    background:
        radial-gradient(circle at 80% 0%, var(--accent-red-soft), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        #121216;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.72), 0 0 26px var(--accent-red-glow-weak);
}

.emoji-dropdown-header::before {
    background: linear-gradient(90deg, var(--accent-red), transparent 60%);
}

.voice-composer-btn:hover,
.voice-composer-btn:focus-visible,
.voice-composer-btn.is-recording {
    border-color: var(--accent-red);
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 8px 22px var(--accent-red-glow);
}

.voice-preview,
.voice-preview-recording {
    border-color: var(--accent-red-glow-medium);
    background: linear-gradient(135deg, var(--accent-red-soft), rgba(66, 15, 21, 0.35));
}

.voice-preview-actions .voice-preview-send,
.voice-audio-toggle,
.voice-audio-player.is-playing .voice-audio-toggle {
    border-color: var(--accent-red-glow-strong);
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 4px 12px var(--accent-red-glow-medium);
}

.voice-recording-dot {
    background: var(--accent-red);
    box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 0 14px var(--accent-red-glow-strong);
}

.voice-audio-progress::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--accent-red) var(--voice-progress, 0%), rgba(255, 255, 255, .17) var(--voice-progress, 0%));
}

.voice-audio-progress::-moz-range-progress,
.voice-audio-progress::-webkit-slider-thumb,
.voice-audio-progress::-moz-range-thumb {
    background: var(--accent-red);
}

.voice-audio-progress::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--accent-red-glow-medium);
}

/* Profile and confirmation surfaces. */
#profile-modal .modal-content {
    border-color: var(--accent-red-glow-medium);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 32px var(--accent-red-glow-weak);
}

#profile-modal .close-modal:hover,
.pvm-refresh-page-btn:hover,
.pvm-refresh-page-btn:focus-visible {
    border-color: var(--accent-red);
    background: var(--accent-red-soft);
    color: var(--accent-red);
}

.large-profile-circle {
    border-color: var(--accent-red-glow-medium);
    box-shadow: 0 0 0 6px var(--accent-red-glow-weak), 0 0 24px var(--accent-red-glow-weak);
}

.modal-btn.red-btn,
.notif-btn-accept,
.modern-btn-primary {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 10px 24px var(--accent-red-glow);
}

.custom-modal-box input[type="password"]:focus,
.modern-popup-input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak);
}

/* Notification center and its animated halo. */
.notification-trigger:not(.mobile-notification-trigger):hover,
.mobile-notification-trigger:hover {
    border-color: var(--accent-red-glow-strong);
    background: var(--accent-red-soft);
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 0 18px var(--accent-red-glow-medium);
}

.notification-badge,
.notification-center-tab-badge {
    background: var(--accent-red);
    box-shadow: 0 0 14px var(--accent-red-glow-strong);
}

.notifications-popover {
    background:
        radial-gradient(circle at 100% 0, var(--accent-red-soft), transparent 42%),
        rgba(18, 18, 22, 0.98);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 30px var(--accent-red-glow-weak);
}

.notification-center-tab.is-active,
.notification-center-item.is-unread {
    border-color: var(--accent-red-glow-medium);
    background: linear-gradient(110deg, var(--accent-red-soft), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 0 16px var(--accent-red-glow-weak);
}

button.notification-center-item:hover,
.notification-center-item-icon {
    border-color: var(--accent-red-glow-medium);
    background: var(--accent-red-soft);
}

.notification-center-item-icon {
    color: var(--accent-red);
}

@keyframes notification-trigger-flash {
    0%, 30%, 71%, 100% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 transparent;
    }
    10%, 51% {
        box-shadow: 0 0 0 5px var(--accent-red-glow-medium), 0 0 22px var(--accent-red-glow-strong);
    }
}

/* Popups and overlays are shared by desktop and mobile. */
.modern-popup-card {
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--accent-red-glow-weak), 0 0 30px var(--accent-red-glow-weak);
}

.modern-popup-card::before {
    background: linear-gradient(90deg, transparent, var(--accent-red-glow-strong), transparent);
}

.modern-popup-icon,
.modern-btn-primary,
.notif-btn-accept {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
}

.modern-popup-icon,
.modern-popup-icon--logout {
    box-shadow: 0 14px 34px var(--accent-red-glow);
}

.modern-popup-icon--logout {
    border-color: var(--accent-red-glow-medium);
    background: var(--accent-red-soft);
}

.modern-btn-pop:focus-visible,
.modern-popup-input:focus-visible {
    outline-color: var(--accent-red-glow-strong);
}

/* Search/focus halos used by settings and mobile settings. */
.settings-select:focus,
.mobile-plain-input:focus,
.mobile-message-editor:focus {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 0 18px var(--accent-red-glow-weak);
}

.accent-color-input-wrap:focus-within,
.mobile-accent-color-input-wrap:focus-within {
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 0 20px var(--accent-red-glow-medium);
}

/* Mobile shell mirrors the desktop accents, including the quieter background
   halos that sit behind the header, tabs and empty states. */
#loader-overlay {
    background:
        radial-gradient(circle at center, var(--accent-red-soft), transparent 38%),
        #050507;
}

.loader-logo-container {
    box-shadow: var(--shadow-soft, 0 18px 55px rgba(0, 0, 0, 0.34)), 0 0 44px var(--accent-red-glow-medium);
}

.mobile-top-bar,
.mobile-chat-panel-header {
    background:
        radial-gradient(circle at 88% -80%, var(--accent-red-glow), transparent 58%),
        rgba(8, 8, 11, 0.84);
}

.mobile-top-bar::after {
    background: linear-gradient(90deg, transparent, var(--accent-red-glow), transparent);
}

.mobile-avatar-trigger,
.message-avatar,
.mobile-profile-avatar-view {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 10px 22px var(--accent-red-glow-medium);
}

.mobile-top-bar #profile-trigger:active {
    border-color: var(--accent-red-glow-strong);
    box-shadow: 0 10px 24px var(--accent-red-glow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-wrapper {
    background:
        radial-gradient(circle at 70% 10%, var(--accent-red-glow), transparent 34%),
        radial-gradient(circle at 15% 82%, var(--accent-red-glow-weak), transparent 30%);
}

.app-logo {
    color: var(--accent-red);
    text-shadow: 0 0 34px var(--accent-red-glow-medium);
}

.input-field-wrapper input:focus,
#user-input:focus,
#friend-search:focus,
#pv-user-input:focus,
.mobile-plain-input:focus,
.mobile-native-select:focus {
    border-color: var(--accent-red-glow-strong);
    box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 0 18px var(--accent-red-glow-weak);
}

.mobile-primary-btn,
.mobile-nested-action-btn,
.mobile-send-btn,
#send-btn,
#pv-send-btn {
    background:
        radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.24), transparent 30%),
        linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 10px 24px var(--accent-red-glow);
}

.mobile-send-btn:active,
.mobile-primary-btn:active {
    box-shadow: 0 8px 24px var(--accent-red-glow-medium);
}

.message-wrapper.me .message-bubble,
.mobile-private-messages-container .message.own-message {
    background:
        radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.2), transparent 28%),
        linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    border-color: var(--accent-red-glow-strong);
    box-shadow: 0 12px 30px var(--accent-red-glow);
}

.mobile-tab-bar {
    background:
        radial-gradient(circle at 50% -110%, var(--accent-red-glow-medium), transparent 66%),
        rgba(18, 17, 22, 0.92);
}

.tab-item.active {
    background:
        radial-gradient(circle at 35% 12%, rgba(255, 255, 255, 0.2), transparent 35%),
        linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 8px 20px var(--accent-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mobile-chat-body {
    background:
        radial-gradient(circle at 84% 2%, var(--accent-red-glow-medium), transparent 32%),
        var(--bg-main, #050507);
}

.mobile-conversations-body {
    background:
        radial-gradient(circle at 14% 0%, var(--accent-red-glow-weak), transparent 28%),
        var(--bg-main, #050507);
}

.mobile-conversations-body .user-item.active,
.user-item.active {
    background:
        radial-gradient(circle at 0% 50%, var(--accent-red-glow-medium), transparent 43%),
        linear-gradient(145deg, var(--accent-red-soft), rgba(255, 255, 255, 0.025));
    border-color: var(--accent-red-glow-medium);
    box-shadow: 0 14px 32px var(--accent-red-glow-weak), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mobile-empty-state {
    background:
        radial-gradient(circle at 50% 0%, var(--accent-red-soft), transparent 48%),
        rgba(255, 255, 255, 0.02);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18), 0 0 28px var(--accent-red-glow-weak);
}

.mobile-empty-state .empty-icon {
    border-color: var(--accent-red-glow-medium);
    box-shadow: 0 0 20px var(--accent-red-glow-weak);
}

.mobile-empty-state .empty-icon svg,
.voice-message-icon {
    stroke: var(--accent-red);
    color: var(--accent-red);
}

.danger-border {
    background: linear-gradient(145deg, var(--accent-red-soft), var(--accent-red-glow-weak));
    border-color: var(--accent-red-glow-medium);
}

.mobile-emoji-grid {
    background:
        radial-gradient(circle at 82% 0%, var(--accent-red-soft), transparent 34%),
        linear-gradient(180deg, rgba(24, 24, 29, 0.98), rgba(10, 10, 13, 0.98));
}

.mobile-emoji-scroll > span:active {
    background: var(--accent-red-soft);
}

.mobile-private-messages-container .msg-avatar {
    border-color: var(--accent-red-glow-medium);
    box-shadow: 0 8px 18px var(--accent-red-glow-weak);
}

.voice-composer-btn.is-recording,
.voice-composer-btn:focus-visible {
    border-color: var(--accent-red);
    background: linear-gradient(145deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 0 0 5px var(--accent-red-glow-weak), 0 8px 22px var(--accent-red-glow);
}

@keyframes mobile-voice-pulse {
    50% { box-shadow: 0 0 0 9px var(--accent-red-glow-weak); }
}

/* Secondary surfaces (GIF picker, profile/news cards and custom selects) use
   the same accent instead of retaining a hard-coded red halo. */
.gif-picker-header strong,
.app-profile-eyebrow,
.app-news-badge {
    color: var(--accent-red);
}

.gif-picker-header input:focus,
.gif-picker-button:focus-visible,
.gif-picker-button.is-active {
    border-color: var(--accent-red);
    background: linear-gradient(145deg, var(--accent-red-soft), rgba(45, 25, 31, .98));
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 10px 24px var(--accent-red-glow-medium);
}

.gif-picker-button::after {
    background: var(--accent-red-bright);
    box-shadow: 0 0 8px var(--accent-red-glow-strong);
}

.gif-picker-button,
.app-profile-avatar {
    border-color: var(--accent-red-glow-medium);
}

.app-profile-card,
.app-news-card {
    background:
        radial-gradient(circle at 84% 0%, var(--accent-red-glow), transparent 42%),
        #151518;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .55), 0 0 34px var(--accent-red-glow-weak);
}

.app-profile-card::before {
    background: var(--accent-red-glow);
}

.app-profile-avatar {
    outline-color: var(--accent-red-glow-strong);
    background: linear-gradient(145deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 16px 38px var(--accent-red-glow), 0 0 0 7px var(--accent-red-glow-weak);
}

.app-profile-eyebrow,
.app-profile-joined,
.app-profile-message,
.app-profile-share,
.app-news-badge {
    border-color: var(--accent-red-glow-medium);
    background: var(--accent-red-soft);
}

.app-profile-joined::before,
.app-profile-message,
.app-profile-share,
.app-news-acknowledge {
    color: var(--accent-red);
}

.app-profile-message,
.app-news-acknowledge {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dim));
    box-shadow: 0 12px 25px var(--accent-red-glow);
}

.app-select-trigger:hover,
.app-select-trigger[aria-expanded='true'],
.app-select-trigger:focus-visible,
.app-select-option:hover,
.app-select-option:focus-visible,
.app-select-option.is-selected {
    border-color: var(--accent-red-glow-strong);
    background: var(--accent-red-soft);
    box-shadow: 0 0 0 3px var(--accent-red-glow-weak), inset 2px 0 0 var(--accent-red-glow-strong);
}

.app-select-menu {
    background:
        radial-gradient(circle at 88% 0%, var(--accent-red-soft), transparent 38%),
        rgba(18, 18, 21, .985);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .62), 0 0 24px var(--accent-red-glow-weak);
    scrollbar-color: var(--accent-red-glow-strong) transparent;
}

.accent-theme-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 15px;
}

.accent-theme-heading h3 {
    margin-bottom: 0;
}

.setting-beta-badge {
    display: inline-flex;
    align-items: center;
    margin-left: .5rem;
    padding: .22rem .48rem;
    border: 1px solid var(--accent-red-glow-medium);
    border-radius: 999px;
    color: var(--accent-red);
    background: var(--accent-red-soft);
    font-size: .58em;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    vertical-align: middle;
}

html.avatar-animation-enabled .profile-circle,
html.avatar-animation-enabled .large-profile-circle,
html.avatar-animation-enabled .message-avatar,
html.avatar-animation-enabled .msg-avatar,
html.avatar-animation-enabled .search-message-avatar,
html.avatar-animation-enabled .chat-contact-avatar,
html.avatar-animation-enabled .panel-header-avatar,
html.avatar-animation-enabled .group-message-avatar,
html.avatar-animation-enabled .desktop-group-message-avatar,
html.avatar-animation-enabled .app-profile-avatar,
html.avatar-animation-enabled .settings-hero-avatar,
html.avatar-animation-enabled .mobile-avatar-trigger,
html.avatar-animation-enabled .mobile-profile-avatar-view {
    animation: profile-avatar-halo-pulse 3.6s ease-in-out infinite;
}

html.avatar-animation-disabled .profile-circle,
html.avatar-animation-disabled .large-profile-circle,
html.avatar-animation-disabled .message-avatar,
html.avatar-animation-disabled .msg-avatar,
html.avatar-animation-disabled .search-message-avatar,
html.avatar-animation-disabled .chat-contact-avatar,
html.avatar-animation-disabled .panel-header-avatar,
html.avatar-animation-disabled .group-message-avatar,
html.avatar-animation-disabled .desktop-group-message-avatar,
html.avatar-animation-disabled .app-profile-avatar,
html.avatar-animation-disabled .settings-hero-avatar,
html.avatar-animation-disabled .mobile-avatar-trigger,
html.avatar-animation-disabled .mobile-profile-avatar-view {
    animation: none !important;
}

/* En mode statique, une interaction reste un signal explicite : l’avatar
   s’anime au survol/focus, au survol du message et dans une carte profil ouverte. */
html.avatar-animation-disabled .profile-circle:hover,
html.avatar-animation-disabled .profile-circle:focus-visible,
html.avatar-animation-disabled .large-profile-circle:hover,
html.avatar-animation-disabled .large-profile-circle:focus-visible,
html.avatar-animation-disabled .message-avatar:hover,
html.avatar-animation-disabled .message-avatar:focus-visible,
html.avatar-animation-disabled .msg-avatar:hover,
html.avatar-animation-disabled .msg-avatar:focus-visible,
html.avatar-animation-disabled .search-message-avatar:hover,
html.avatar-animation-disabled .search-message-avatar:focus-visible,
html.avatar-animation-disabled .chat-contact-avatar:hover,
html.avatar-animation-disabled .chat-contact-avatar:focus-visible,
html.avatar-animation-disabled .panel-header-avatar:hover,
html.avatar-animation-disabled .panel-header-avatar:focus-visible,
html.avatar-animation-disabled .message-wrapper:hover .message-avatar,
html.avatar-animation-disabled .message-wrapper:focus-within .message-avatar,
html.avatar-animation-disabled .message-wrapper:hover .msg-avatar,
html.avatar-animation-disabled .message-wrapper:focus-within .msg-avatar,
html.avatar-animation-disabled .app-profile-card .app-profile-avatar,
html.avatar-animation-disabled .settings-hero-avatar:hover,
html.avatar-animation-disabled .settings-hero-avatar:focus-visible,
html.avatar-animation-disabled .mobile-avatar-trigger:hover,
html.avatar-animation-disabled .mobile-avatar-trigger:focus-visible,
html.avatar-animation-disabled .mobile-profile-avatar-view:hover,
html.avatar-animation-disabled .mobile-profile-avatar-view:focus-visible {
    animation: profile-avatar-halo-pulse 3.6s ease-in-out infinite !important;
}

@keyframes profile-avatar-halo-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-red-glow-weak), 0 0 10px var(--accent-red-glow-weak);
    }
    50% {
        box-shadow: 0 0 0 5px var(--accent-red-glow-weak), 0 0 26px var(--accent-red-glow);
    }
}

@media (min-width: 701px) {
    #user-input.empty-send-attempt,
    #pv-user-input.empty-send-attempt {
        animation: accent-empty-input-shake .36s cubic-bezier(.36, .07, .19, .97) both;
        border-color: var(--accent-red) !important;
        box-shadow: 0 0 0 3px var(--accent-red-glow-weak), 0 0 22px var(--accent-red-glow) !important;
    }
}

@keyframes accent-empty-input-shake {
    0%, 100% { transform: translateX(0); }
    18%, 82% { transform: translateX(-7px); }
    36%, 64% { transform: translateX(6px); }
    50% { transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    #user-input.empty-send-attempt,
    #pv-user-input.empty-send-attempt {
        animation: none;
    }

    html.avatar-animation-enabled .profile-circle,
    html.avatar-animation-enabled .large-profile-circle,
    html.avatar-animation-enabled .message-avatar,
    html.avatar-animation-enabled .msg-avatar,
    html.avatar-animation-enabled .search-message-avatar,
    html.avatar-animation-enabled .chat-contact-avatar,
    html.avatar-animation-enabled .panel-header-avatar,
    html.avatar-animation-enabled .group-message-avatar,
    html.avatar-animation-enabled .desktop-group-message-avatar,
    html.avatar-animation-enabled .app-profile-avatar,
    html.avatar-animation-enabled .settings-hero-avatar,
    html.avatar-animation-enabled .mobile-avatar-trigger,
    html.avatar-animation-enabled .mobile-profile-avatar-view {
        animation: none;
    }

    html.avatar-animation-disabled .profile-circle:hover,
    html.avatar-animation-disabled .profile-circle:focus-visible,
    html.avatar-animation-disabled .large-profile-circle:hover,
    html.avatar-animation-disabled .large-profile-circle:focus-visible,
    html.avatar-animation-disabled .message-avatar:hover,
    html.avatar-animation-disabled .message-avatar:focus-visible,
    html.avatar-animation-disabled .msg-avatar:hover,
    html.avatar-animation-disabled .msg-avatar:focus-visible,
    html.avatar-animation-disabled .search-message-avatar:hover,
    html.avatar-animation-disabled .search-message-avatar:focus-visible,
    html.avatar-animation-disabled .chat-contact-avatar:hover,
    html.avatar-animation-disabled .chat-contact-avatar:focus-visible,
    html.avatar-animation-disabled .panel-header-avatar:hover,
    html.avatar-animation-disabled .panel-header-avatar:focus-visible,
    html.avatar-animation-disabled .message-wrapper:hover .message-avatar,
    html.avatar-animation-disabled .message-wrapper:focus-within .message-avatar,
    html.avatar-animation-disabled .message-wrapper:hover .msg-avatar,
    html.avatar-animation-disabled .message-wrapper:focus-within .msg-avatar,
    html.avatar-animation-disabled .app-profile-card .app-profile-avatar,
    html.avatar-animation-disabled .settings-hero-avatar:hover,
    html.avatar-animation-disabled .settings-hero-avatar:focus-visible,
    html.avatar-animation-disabled .mobile-avatar-trigger:hover,
    html.avatar-animation-disabled .mobile-avatar-trigger:focus-visible,
    html.avatar-animation-disabled .mobile-profile-avatar-view:hover,
    html.avatar-animation-disabled .mobile-profile-avatar-view:focus-visible {
        animation: none !important;
    }
}