/*
 * 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);

}

/* Préférence utilisateur : elle complète prefers-reduced-motion et reste
   disponible même lorsque le système n'est pas configuré en mode réduit. */
html.user-reduced-motion *,
html.user-reduced-motion *::before,
html.user-reduced-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
}

/* Barre de défilement de base Backend Social.
   Elle est centralisée ici plutôt que répétée dans chaque écran : toutes les
   zones scrollables desktop (y compris celles créées dynamiquement) héritent
   automatiquement du même rail sombre et du même thumb accentué. Les vues
   mobiles gardent leurs scrollbars masquées lorsqu'elles le demandent. */
@media (hover: hover) and (pointer: fine) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--accent-red-glow-strong) rgba(255, 255, 255, .035);
    }

    html,
    html * {
        scrollbar-width: thin !important;
        scrollbar-color: var(--accent-red-glow-strong) rgba(255, 255, 255, .035) !important;
    }

    html::-webkit-scrollbar,
    html *::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
    }

    html::-webkit-scrollbar-track,
    html *::-webkit-scrollbar-track {
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .035) !important;
    }

    html::-webkit-scrollbar-thumb,
    html *::-webkit-scrollbar-thumb {
        min-height: 34px;
        border: 2px solid transparent !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, var(--accent-red-bright), var(--accent-red-dim)) !important;
        background-clip: padding-box !important;
        box-shadow: 0 0 10px var(--accent-red-glow-medium) !important;
    }

    html::-webkit-scrollbar-thumb:hover,
    html *::-webkit-scrollbar-thumb:hover {
        border-width: 1px !important;
        background: var(--accent-red) !important;
        box-shadow: 0 0 14px var(--accent-red-glow-strong) !important;
    }

    html::-webkit-scrollbar-button,
    html *::-webkit-scrollbar-button {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    html::-webkit-scrollbar-corner,
    html *::-webkit-scrollbar-corner {
        background: transparent !important;
    }
}

.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);
}

/* Keep the private-chat halo on the composer shell only. The text field is
   transparent by design on desktop. Mobile keeps a visible focus ring on the
   actual editable field so the keyboard focus is obvious. */
@media (max-width: 700px) {
    .private-chat-input > [contenteditable="plaintext-only"]:focus,
    .private-chat-input #pv-user-input:focus,
    .private-chat-input #group-user-input:focus,
    .group-chat-input #group-user-input:focus {
        border-color: var(--accent-red) !important;
        box-shadow: 0 0 0 4px var(--accent-red-glow-weak), 0 0 18px var(--accent-red-glow-weak) !important;
    }
}

.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-recording-actions .voice-recording-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,
.interface-settings-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: rgba(var(--accent-red-rgb), .62);
    background:
        radial-gradient(circle at 78% 14%, rgba(var(--accent-red-rgb), .2), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(35, 27, 32, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 3px var(--accent-red-glow-weak), 0 10px 24px rgba(0, 0, 0, .28);
}

.gif-picker-button::after {
    background: color-mix(in srgb, var(--accent-red-bright) 78%, #ffffff 22%);
    box-shadow: 0 0 7px var(--accent-red-glow-medium);
}

.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);
}

.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;
}

/* Les avatars restent statiques : aucun halo animé ou effet lumineux n’est
   appliqué aux photos de profil. La préférence peut toujours gérer les GIFs
   eux-mêmes, mais elle ne modifie plus l’apparence du cercle. */

@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;
    }

}

/* Message readability: keep the accent expressive while giving the text and
   metadata a calmer, higher-contrast surface. This selector covers both the
   desktop private-chat list and the mobile conversation panel. */
#private-chat-messages .message {
    font-size: clamp(0.94rem, 0.86rem + 0.12vw, 1rem);
    line-height: 1.52;
    letter-spacing: 0.002em;
    text-rendering: optimizeLegibility;
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#private-chat-messages .message .pv-text {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

#private-chat-messages .message.own-message {
    /* Fallback first for older embedded webviews. */
    background: linear-gradient(145deg, #d93643, #941d2e);
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.13), transparent 34%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-red) 74%, #15151a),
            color-mix(in srgb, var(--accent-red-dim) 78%, #0e0f13));
    border-color: var(--accent-red-glow-strong);
    box-shadow: 0 12px 28px var(--accent-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#private-chat-messages .message:not(.own-message) {
    background:
        linear-gradient(145deg, rgba(39, 40, 47, 0.98), rgba(20, 21, 26, 0.98));
    border-color: rgba(255, 255, 255, 0.13);
}

#private-chat-messages .message-meta-row {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

#private-chat-messages .message.own-message .message-meta-row {
    border-top: 0;
}

#private-chat-messages .message .msg-time {
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.72);
}

#private-chat-messages .message.own-message .msg-time {
    color: rgba(255, 255, 255, 0.94);
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    background: rgba(9, 10, 14, 0.22);
}

#private-chat-messages .message:not(.own-message) .msg-time {
    color: rgba(255, 255, 255, 0.62);
}

#private-chat-messages .message > .msg-time {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 6px 0 0 auto;
    padding-top: 0;
    border-top: 0;
}

#private-chat-messages .message.own-message > .msg-time {
    padding-top: 3px;
    border-top: 0;
}

#private-chat-messages .message:not(.own-message) > .msg-time {
    padding: 0;
    border: 0;
    background: transparent;
}

#private-chat-messages .message-safe-link {
    color: #ffd3d6;
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#private-chat-messages .message.own-message .message-safe-link {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 600px) {
    #private-chat-messages .message {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    #private-chat-messages .message-meta-row {
        margin-top: 9px;
        padding-top: 6px;
    }
}

/* Own messages: a calmer red surface keeps the copy readable without losing
   the accent. Keep the glow restrained so it does not overpower the bubble. */
.message-bubble.me,
.message-wrapper.me .message-bubble,
#chat-window .message-wrapper.me .message-bubble,
#private-chat-messages .message.own-message,
.mobile-private-messages-container .message.own-message {
    background: linear-gradient(145deg, #9a303b, #5b1d28);
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.1), transparent 34%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--accent-red) 48%, #24171c),
            color-mix(in srgb, var(--accent-red-dim) 56%, #151116));
    border-color: rgba(255, 112, 120, 0.52);
    box-shadow: 0 9px 22px rgba(var(--accent-red-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#private-chat-messages .message.own-message .pv-text,
.message-wrapper.me .message-content,
.message-bubble.me {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: none;
}

#private-chat-messages .message.own-message .message-meta-row,
#private-chat-messages .message.own-message > .msg-time {
    border-top-color: rgba(255, 255, 255, 0.13);
}

/* Les photos choisies par les membres doivent rester lisibles : le halo rouge
   est réservé aux contrôles et aux avatars sans photo. Une photo conserve une
   ombre neutre, sans contour lumineux ni pulsation qui en mange les détails. */
#chat-window .message-avatar.has-image,
.mobile-private-messages-container .msg-avatar.has-image,
.search-message-avatar.has-image,
.search-avatar.has-image,
.conv-avatar.has-image,
.profile-circle.has-image,
.app-profile-avatar.has-image,
.mobile-profile-avatar-view.has-image {
    border-color: rgba(255, 255, 255, .13) !important;
    outline: 1px solid rgba(255, 255, 255, .13) !important;
    background: #17171b !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .34) !important;
    animation: none !important;
}

/* Desktop private send button: flat accent circle with the same paper-plane
   icon as groups; no gloss, no glow, no 1.1 zoom. */
html #pv-send-btn {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent-red, #ff3e3e);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease;
}
html #pv-send-btn svg {
    width: 19px;
    height: 19px;
    margin-left: -2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html #pv-send-btn:hover,
html #pv-send-btn:focus-visible {
    background: var(--accent-red, #ff3e3e);
    box-shadow: none;
    filter: brightness(1.12);
    transform: none;
    outline: none;
}
html #pv-send-btn:active { transform: scale(.94); }
/* Group composer: same send button as private messages. */
html #group-send-btn {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent-red, #ff3e3e);
    color: #fff;
    box-shadow: none;
}
html #group-send-btn svg { width: 19px; height: 19px; margin-left: -2px; }
html #group-send-btn:hover,
html #group-send-btn:focus-visible { box-shadow: none; filter: brightness(1.12); outline: none; }
html #group-send-btn:active { transform: scale(.94); }

/* Desktop groups: neutral "+" icon button, and an empty state that is a
   "create a group" shortcut instead of a dashed placeholder. */
html .desktop-create-group {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #26262d;
    border-radius: 9px;
    background: transparent;
    color: #9a96a1;
    box-shadow: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
html .desktop-create-group svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
html .desktop-create-group:hover,
html .desktop-create-group:focus-visible {
    border-color: transparent;
    background: var(--accent-red, #ff3347);
    color: #fff;
    box-shadow: none;
    transform: none;
    outline: none;
}
html .desktop-groups-section .desktop-groups-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 0;
    margin: 2px 0 4px;
    padding: 10px;
    border: 1px dashed #2a2a31;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
html .desktop-groups-section .desktop-groups-empty::before { display: none; }
html .desktop-groups-section .desktop-groups-empty:hover,
html .desktop-groups-section .desktop-groups-empty:focus-visible {
    border-color: #3a3a44;
    background: #16161b;
    outline: none;
}
.desktop-groups-empty-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #1d1d23;
    color: #c9c6ce;
}
.desktop-groups-empty-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.desktop-groups-empty-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.desktop-groups-empty-text strong { color: #ecebef; font-size: .86rem; font-weight: 650; }
.desktop-groups-empty-text small { color: #7d7983; font-size: .74rem; line-height: 1.35; }

/* Contact column (wide screens): one card holding banner, identity, details
   and the profile button, instead of three separate boxes. */
@media (min-width: 1180px) {
    html .contact-panel:not(.is-hidden) { padding: 16px; gap: 0; }
    html .contact-panel-card {
        display: flex;
        flex-direction: column;
        border: 1px solid #1f1f25;
        border-radius: 18px;
        background: #121216;
    }
    html .contact-panel-banner {
        height: 96px;
        background:
            linear-gradient(180deg, transparent 40%, rgba(18, 18, 22, .55)),
            radial-gradient(circle at 20% 0%, rgba(var(--accent-red-rgb, 255, 52, 61), .32), transparent 65%),
            #1a1519;
        background-position: center;
        background-size: cover;
    }
    html .contact-panel-banner.has-image { background-color: #121216; }
    html .contact-panel-identity { padding: 0 18px 16px; }
    html .contact-panel-avatar {
        width: 76px;
        height: 76px;
        margin-top: -38px;
        border: 4px solid #121216;
        background: #2a2a31;
        color: #f4f4f6;
        font-size: 1.7rem;
        font-weight: 700;
    }
    html .contact-panel-name { margin: 10px 0 8px; font-size: 1.2rem; font-weight: 700; }
    html .contact-panel-info {
        border: 0;
        border-top: 1px solid #1c1c22;
        border-radius: 0;
        background: transparent;
    }
    html .contact-panel-row { padding: 12px 18px; }
    html .contact-panel-row dt { color: #6f6b76; font-size: .7rem; letter-spacing: .05em; }
    html .contact-panel-row-joined { padding-top: 10px; padding-bottom: 10px; }
    html .contact-panel-btn {
        width: auto;
        align-self: stretch;
        box-sizing: border-box;
        margin: 4px 14px 14px;
        min-height: 40px;
        border: 1px solid #2a2a31;
        border-radius: 11px;
        background: transparent;
        color: #ecebef;
        font-size: .86rem;
        font-weight: 650;
    }
    html .contact-panel-btn:hover { border-color: #3a3a44; background: #18181d; }
}

/* Desktop group windows (create, details): same neutral surface as the
   suggestion window instead of the old purple theme; the accent colour is
   kept for the main action only. */
html .desktop-group-modal { background: rgba(3, 3, 6, .74); backdrop-filter: blur(9px); }
html .desktop-group-modal-box {
    width: min(440px, 100%);
    padding: 24px;
    border: 1px solid #25252c;
    border-radius: 20px;
    background: #121216;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
html .desktop-group-modal-header h3 { color: #f4f4f6; font-size: 1.25rem; letter-spacing: -.02em; }
html .desktop-group-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #aaaab3;
}
html .desktop-group-modal-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
html .desktop-group-modal-desc { margin: 6px 0 18px; color: #8c8893; font-size: .86rem; }
html .desktop-group-modal-input {
    height: 44px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid #24242b;
    border-radius: 12px;
    background: #0d0d11;
    color: #f4f4f6;
}
html .desktop-group-modal-input::placeholder { color: #6f6b76; }
html .desktop-group-modal-input:focus { border-color: #3a3a44; box-shadow: none; }
html .desktop-group-selected-chip {
    border: 1px solid #2a2a31;
    background: #1b1b21;
    color: #ecebef;
}
html .desktop-group-selected-chip button:hover { color: #fff; }
html .desktop-group-search-result { border: 0; color: #ecebef; }
html .desktop-group-search-result:hover { border: 0; background: #1b1b21; }
html .desktop-group-search-avatar { border: 0; background: #2a2a31; color: #ecebef; }
html .desktop-group-modal-status:empty { min-height: 0; margin-top: 4px; }
html .desktop-group-modal-actions { gap: 10px; margin-top: 18px; }
html .desktop-group-modal-actions button { height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 650; }
html .desktop-group-primary {
    border: 0;
    background: var(--accent-red, #ff3347);
    box-shadow: none;
    transition: filter .15s ease;
}
html .desktop-group-primary:hover:not(:disabled) { filter: brightness(1.1); }
html .desktop-group-primary:disabled { opacity: .4; cursor: not-allowed; }
html .desktop-group-secondary { border: 1px solid #2a2a31; background: transparent; color: #dedee4; }
html .desktop-group-secondary:hover { background: #16161b; }
html .desktop-group-details-name { color: #f4f4f6; }

/* Desktop emoji panel: flat surface, readable header, emojis without tiles;
   hover is a soft highlight instead of a red block. */
html .emoji-dropdown {
    border: 1px solid #25252c;
    border-radius: 18px;
    background: #121216;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
html .emoji-dropdown-scroll { padding: 10px 10px 12px; }
html .emoji-dropdown-header {
    min-height: 0;
    margin: 0 0 8px;
    padding: 4px 4px 10px;
    border-bottom: 1px solid #1f1f25;
}
html .emoji-dropdown-header::before { display: none; }
html .emoji-dropdown-header span {
    color: #ecebef;
    font-size: .92rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}
html .emoji-dropdown-header small { color: #6f6b76; font-size: .76rem; }
html .emoji-dropdown .emoji-item {
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 1.45rem;
    transition: background .12s ease, transform .12s ease;
}
html .emoji-dropdown .emoji-item:hover {
    border: 0;
    background: #1f1f26;
    box-shadow: none;
    transform: scale(1.12);
}
html .emoji-dropdown .emoji-item:active { transform: scale(.92); }
/* Blocks of 8×8 emojis: off-screen blocks are not painted at all. The
   intrinsic size (8 rows of 40px + 7 gaps of 6px) keeps the scrollbar exact. */
.emoji-grid-block {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 40px;
    gap: 6px;
    margin-bottom: 6px;
    content-visibility: auto;
    contain-intrinsic-size: auto 362px;
}
html .emoji-dropdown .emoji-grid-block .emoji-item {
    width: 100%;
    height: 40px;
    padding: 0;
    color: inherit;
    content-visibility: visible;
    contain-intrinsic-size: none;
}
html .emoji-dropdown .emoji-item:focus-visible { outline: 2px solid #3a3a44; outline-offset: 0; }
html .emoji-dropdown-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); background-clip: padding-box; }

/* Conversation list: the photo fills the circle, no light ring around it. */
.user-item .profile-circle.has-image {
    border-color: transparent !important;
    outline: none !important;
}

html.avatar-animation-enabled #chat-window .message-avatar.has-image,
html.avatar-animation-enabled .mobile-private-messages-container .msg-avatar.has-image,
html.avatar-animation-enabled .search-message-avatar.has-image,
html.avatar-animation-enabled .search-avatar.has-image,
html.avatar-animation-enabled .conv-avatar.has-image,
html.avatar-animation-enabled .profile-circle.has-image,
html.avatar-animation-enabled .app-profile-avatar.has-image,
html.avatar-animation-enabled .mobile-profile-avatar-view.has-image,
html.avatar-animation-disabled #chat-window .message-avatar.has-image,
html.avatar-animation-disabled .mobile-private-messages-container .msg-avatar.has-image,
html.avatar-animation-disabled .search-message-avatar.has-image,
html.avatar-animation-disabled .search-avatar.has-image,
html.avatar-animation-disabled .conv-avatar.has-image,
html.avatar-animation-disabled .profile-circle.has-image,
html.avatar-animation-disabled .app-profile-avatar.has-image,
html.avatar-animation-disabled .mobile-profile-avatar-view.has-image {
    animation: none !important;
}

/* La carte profil applique un contour plus épais à ses images : on neutralise
   aussi cette variante pour que l'avatar reste naturel dans le grand aperçu. */
.app-profile-avatar.has-image {
    outline-width: 1px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .38) !important;
}

/* Les cercles de profil et le bouton Paramètres ne doivent plus produire de
   halo rouge, ni au repos ni pendant une interaction. */
html .profile-circle,
html .large-profile-circle,
html #chat-window .message-avatar,
html .message-avatar,
html .msg-avatar,
html .search-message-avatar,
html .search-avatar,
html .conv-avatar,
html .chat-contact-avatar,
html .panel-header-avatar,
html .group-message-avatar,
html .desktop-group-message-avatar,
html .app-profile-avatar,
html .settings-hero-avatar,
html .mobile-avatar-trigger,
html .mobile-profile-avatar-view {
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html .profile-circle:hover,
html .profile-circle:focus-visible,
html .large-profile-circle:hover,
html .large-profile-circle:focus-visible,
html #chat-window .message-avatar:hover,
html #chat-window .message-avatar:focus-visible,
html .message-avatar:hover,
html .message-avatar:focus-visible,
html .msg-avatar:hover,
html .msg-avatar:focus-visible,
html .search-message-avatar:hover,
html .search-message-avatar:focus-visible,
html .search-avatar:hover,
html .search-avatar:focus-visible,
html .conv-avatar:hover,
html .conv-avatar:focus-visible,
html .chat-contact-avatar:hover,
html .chat-contact-avatar:focus-visible,
html .panel-header-avatar:hover,
html .panel-header-avatar:focus-visible,
html .group-message-avatar:hover,
html .group-message-avatar:focus-visible,
html .desktop-group-message-avatar:hover,
html .desktop-group-message-avatar:focus-visible,
html .app-profile-avatar:hover,
html .app-profile-avatar:focus-visible,
html .settings-hero-avatar:hover,
html .settings-hero-avatar:focus-visible,
html .mobile-avatar-trigger:hover,
html .mobile-avatar-trigger:focus-visible,
html .mobile-profile-avatar-view:hover,
html .mobile-profile-avatar-view:focus-visible {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html .settings-icon-btn:hover,
html .settings-icon-btn:focus-visible,
html .settings-icon-btn:active {
    box-shadow: none !important;
}

html .settings-icon-btn:hover svg,
html .settings-icon-btn:focus-visible svg {
    filter: none !important;
}

/* Sur Android, :active peut rester brièvement accroché après un tap. Le
   bouton Paramètres du header mobile et les icônes « glow » ne doivent donc
   jamais réintroduire le halo rouge via une règle plus spécifique. */
html .mobile-top-bar #profile-trigger,
html .mobile-top-bar #profile-trigger:hover,
html .mobile-top-bar #profile-trigger:focus,
html .mobile-top-bar #profile-trigger:focus-visible,
html .mobile-top-bar #profile-trigger:active {
    animation: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, .12) !important;
    transition: transform .16s ease, border-color .16s ease !important;
}

html .mobile-top-bar #profile-trigger::before {
    animation: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html.icon-style-glow .settings-row-icon.icon-glyph,
html.icon-style-glow .settings-logout-btn .settings-row-icon.icon-glyph,
html.icon-style-glow .tab-item .icon-glyph,
html.icon-style-glow .tab-item.active .icon-glyph,
html.icon-style-glow #back-btn-text.icon-glyph,
html.icon-style-glow .password-toggle-btn .icon-glyph,
html.icon-style-glow .empty-icon.icon-glyph {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Desktop: the composer shell owns the accent halo. Keeping a second focus
   ring on the transparent text field creates a halo inside the halo. */
@media (min-width: 701px) {
    html .private-chat-input input:focus,
    html .private-chat-input > [contenteditable="plaintext-only"]:focus,
    html .group-chat-input #group-user-input:focus {
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

/* Android/Chromium adds a blue overlay when a tappable element is pressed.
   Every public and authenticated page loads this stylesheet, so keep the
   suppression here instead of fixing individual buttons one by one. */
@media (hover: none), (pointer: coarse) {
    html,
    body,
    body * {
        -webkit-tap-highlight-color: transparent !important;
    }

    :where(a, button, select, summary, label, [role="button"], [role="option"], [role="tab"], [tabindex]):not([tabindex="-1"]) {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* Interface mobile : les pastilles d'action du haut ont été retirées du
   salon pour laisser la conversation respirer. Les modales restent montées
   dans le DOM et peuvent toujours être ouvertes depuis leurs autres points
   d'entrée. */
html #interface-view .mobile-chat-toolbar {
    display: none !important;
}

/* Le bouton GIF garde son vrai rôle de commande, sans les deux décorations
   flottantes qui ressemblaient à des notifications non lues. */
html .gif-picker-button::before,
html .gif-picker-button::after {
    display: none !important;
    content: none !important;
}

/* Présence : le point vert reste réservé à la fiche profil, où il accompagne
   le nom sans polluer chaque avatar du flux de messages. */
html .app-profile-avatar {
    position: relative;
    overflow: visible !important;
}

html .app-profile-avatar > img {
    border-radius: inherit;
}

html .app-profile-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 3;
    display: none;
    width: 13px;
    height: 13px;
    border: 3px solid #151518;
    border-radius: 50%;
    background: #39dc82;
    box-shadow: 0 0 0 1px rgba(11, 20, 15, .58), 0 2px 9px rgba(57, 220, 130, .42);
    pointer-events: none;
}

html .app-profile-avatar.is-online::after {
    display: block;
}

/* Même si l'ancien espace communauté est réactivé ultérieurement, ses
   avatars ne réintroduisent pas de pastilles dans les vues de discussion. */
html .community-member-avatar.is-online::after,
html .community-empty-member-avatar.is-online::after {
    display: none !important;
}

/* Barre basse : avec deux onglets, un rail plus fin et des cellules moins
   imposantes donnent un vrai contrôle de navigation au lieu d'un second
   panneau rouge. */
html .mobile-tab-bar {
    left: 16px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 32px);
    height: 58px;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 19px;
    background:
        linear-gradient(145deg, rgba(28, 28, 34, .92), rgba(10, 10, 14, .97));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .07);
}

html .mobile-tab-bar .tab-item {
    min-height: 48px;
    padding: 3px 10px;
    border-radius: 14px;
    gap: 2px;
    font-weight: 750;
    color: rgba(255, 255, 255, .64);
}

html .mobile-tab-bar .tab-item.active {
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 72, 82, .96), rgba(194, 22, 39, .94));
    box-shadow: 0 7px 16px rgba(255, 52, 61, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}

html .mobile-tab-bar .tab-icon {
    font-size: 1.05rem;
    line-height: 1;
}

html .mobile-tab-bar .tab-label {
    font-size: .68rem;
    letter-spacing: .01em;
    line-height: 1.05;
}

/* Photos de profil cliquables (elles ouvrent la carte de profil) : curseur
   « main » et léger agrandissement au survol pour montrer qu'on peut cliquer. */
html :is(.msg-avatar, .message-avatar, .is-profile-trigger, #profile-trigger, .chat-contact-avatar, .contact-panel-avatar) {
    cursor: pointer;
    transition: transform .16s cubic-bezier(.2, .9, .3, 1.3);
}
html :is(.msg-avatar, .message-avatar, .is-profile-trigger, #profile-trigger, .chat-contact-avatar, .contact-panel-avatar) :is(img, span) {
    cursor: pointer;
}
@media (hover: hover) {
    html :is(.msg-avatar, .message-avatar, .is-profile-trigger, #profile-trigger, .chat-contact-avatar, .contact-panel-avatar):hover {
        transform: scale(1.08);
    }
}
@media (prefers-reduced-motion: reduce) {
    html :is(.msg-avatar, .message-avatar, .is-profile-trigger, #profile-trigger, .chat-contact-avatar, .contact-panel-avatar) { transition: none; }
    html :is(.msg-avatar, .message-avatar, .is-profile-trigger, #profile-trigger, .chat-contact-avatar, .contact-panel-avatar):hover { transform: none; }
}

/* Traduction d'un message (API Translator du navigateur). */
.message-translation {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.message-translation-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92em;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.message-translation.is-loading .message-translation-text {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.message-translation.is-collapsed .message-translation-text {
    display: none;
}
.message-translation-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}
.message-translation-toggle {
    border: 0;
    padding: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.message-translation-toggle:hover {
    text-decoration: underline;
}