/* ═══════════════════════════════════════════════════════════
   RUSTCORE — Style v3.0  (Sombre Pur × Vert Vif)
   Typographie : Syne (titres) + DM Sans (corps)
   Thème : Sombre / Clair — WCAG AA compliant
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   VARIABLES — MODE SOMBRE
───────────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* Fonds */
    --bg-darker: #0b0c0b;
    --bg-dark: #141514;
    --bg-base: #0e0f0e;
    --bg-hover: #1a1b1a;
    --bg-elevated: #1e201e;

    /* Textes */
    --text-heading: #e8ebe8;
    --text-main: #c8d4c9;
    --text-muted: #8a968a;
    --text-subtle: #4a544a;

    /* Vert vif — accent principal */
    --accent: #2ecc71;
    --accent-light: #46f48c;
    --accent-glass: rgba(46, 204, 113, 0.12);
    --accent-glow: rgba(46, 204, 113, 0.08);

    /* Ambre secondaire */
    --accent2: #d4a030;
    --accent2-glass: rgba(212, 160, 48, 0.14);

    /* Statuts */
    --online: #2ecc71;
    --idle: #d9a830;
    --dnd: #e05252;
    --offline: #4a544a;

    /* Bordures */
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Ombres */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.70);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.60);
    --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.70);

    /* Verre */
    --glass-bg: rgba(11, 12, 11, 0.92);
    --glass-border: rgba(255, 255, 255, 0.09);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Typographie */
    --font-heading: 'Syne', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;

    /* Texte sur fond accent */
    --on-accent: #0e0f0e;

    /* Bulles de messages privés (iMessage/WhatsApp-like) — pas --accent, trop clair en grande surface */
    --bubble-sent-bg: #15803D;
    --bubble-sent-text: #FFFFFF;
    --bubble-received-bg: #262626;
    --bubble-received-text: #FAFAFA;
    --bubble-timestamp: #737373;
}

/* ─────────────────────────────────────────
   VARIABLES — MODE CLAIR
───────────────────────────────────────── */
[data-theme="light"] {
    /* Fonds */
    --bg-darker: #e8e8e8;
    --bg-dark: #efefef;
    --bg-base: #f6f7f6;
    --bg-hover: #e8e8e8;
    --bg-elevated: #ffffff;

    /* Textes */
    --text-heading: #0f120f;
    --text-main: #2a352b;
    --text-muted: #4a634a;
    --text-subtle: #8aaa8a;

    /* Vert ajusté pour fond clair */
    --accent: #16a34a;
    --accent-light: #22c55e;
    --accent-glass: rgba(22, 163, 74, 0.12);
    --accent-glow: rgba(22, 163, 74, 0.10);

    /* Ambre secondaire */
    --accent2: #9a6c08;
    --accent2-glass: rgba(154, 108, 8, 0.10);

    /* Statuts */
    --online: #16a34a;
    --idle: #b87d08;
    --dnd: #c03c32;
    --offline: #809080;

    /* Bordures */
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.13);

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Verre */
    --glass-bg: rgba(246, 247, 246, 0.95);
    --glass-border: rgba(0, 0, 0, 0.09);

    /* Texte sur fond accent */
    --on-accent: #ffffff;

    /* Bulles de messages privés */
    --bubble-sent-bg: #16A34A;
    --bubble-sent-text: #FFFFFF;
    --bubble-received-bg: #F5F5F5;
    --bubble-received-text: #0A0A0A;
    --bubble-timestamp: #737373;
}

/* ─────────────────────────────────────────
   DESIGN SYSTEM PREMIUM (v4)
   Scopé conteneur par conteneur : redéfinit localement
   des noms de variables déjà utilisés ailleurs (--accent,
   --border, --bg-elevated, --text-muted…) SANS toucher leur
   valeur globale — les vues non listées ici (nexus, admin…)
   gardent l'ancien système intact.
   Objectif : ~5% de surface verte (onglet actif, CTA,
   like activé) ; tout le reste en gris/blanc.
   Déployé : feed+nav (#hub-view/#mobile-nav), Loops (#loop-view,
   cf. plus bas, palette figée sans variante claire), messages
   (#home-chat-area/#mobile-dm-panel), profil (#profile-view),
   paramètres (#settings-view), découverte (#discover-view).
───────────────────────────────────────── */
#hub-view,
#mobile-nav,
#home-chat-area,
#mobile-dm-panel,
#profile-view,
#settings-view,
#discover-view,
#forum-view {
    --bg-primary: #0A0A0A;
    --bg-surface: #171717;
    --bg-elevated: #1F1F1F;
    --border: #262626;
    --text-primary: #FAFAFA;
    --text-secondary: #A3A3A3;
    --text-muted: #737373;
    --accent: #22C55E;
    --accent-hover: #16A34A;
    --like-active: #EF4444;
    --font-feed: 'Inter', var(--font-body, system-ui, sans-serif);
    font-family: var(--font-feed);
}

[data-theme="light"] #hub-view,
[data-theme="light"] #mobile-nav,
[data-theme="light"] #home-chat-area,
[data-theme="light"] #mobile-dm-panel,
[data-theme="light"] #profile-view,
[data-theme="light"] #settings-view,
[data-theme="light"] #discover-view,
[data-theme="light"] #forum-view {
    --bg-primary: #FFFFFF;
    --bg-surface: #F5F5F5;
    --bg-elevated: #FAFAFA;
    --border: #E5E5E5;
    --text-primary: #0A0A0A;
    --text-secondary: #525252;
    --text-muted: #737373;
    --accent: #16A34A;
    --accent-hover: #15803D;
    --like-active: #DC2626;
}

/* Inverser les logos blancs en mode clair */
[data-theme="light"] img[src*="logo.png"],
[data-theme="light"] img[src*="logopourtoi.png"] {
    filter: invert(1) hue-rotate(180deg);
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    height: -webkit-fill-available;
}

body {
    margin: 0;
    font-family: var(--font-body, 'DM Sans', 'Segoe UI', system-ui, sans-serif);
    background: var(--bg-base);
    color: var(--text-main);
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5;
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 100%;
    min-height: -webkit-fill-available;
    padding-top: env(safe-area-inset-top, 0px);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Syne', system-ui, sans-serif);
    color: var(--text-heading);
    font-weight: 700;
}

.login-brand-name,
.nx-server-name,
.ns-server-name-label,
.nexus-sidebar-header,
.invite-modal-title,
.card h2 {
    font-family: var(--font-heading, 'Syne', system-ui, sans-serif);
}

.screen {
    display: none;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    background: var(--bg-darker);
    position: fixed;
    inset: 0;
    z-index: 500;
    transition: background 0.3s ease;
}

.active {
    display: flex !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-subtle);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-elevated) transparent;
}

/* ─────────────────────────────────────────
   COMPOSANTS DE BASE
───────────────────────────────────────── */
.card {
    background: var(--bg-dark);
    padding: 28px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    width: 360px;
    text-align: center;
    transition: background 0.3s ease, border-color 0.3s ease;
    animation: cardIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.card h2 {
    margin-top: 0;
    color: var(--text-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    margin: 8px 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-darker);
    color: var(--text-heading);
    font-family: inherit;
    font-size: 0.93rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.3s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-dark);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    /* plus visible, pas subtle */
    opacity: 0.7;
}

select option {
    background: var(--bg-dark);
    color: var(--text-heading);
}

button {
    width: 100%;
    padding: 11px 18px;
    margin-top: 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--accent);
    color: var(--on-accent);
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px var(--accent-glass);
}

button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

button:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

.btn-cancel {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-main);
    margin-top: 8px;
    box-shadow: none;
}

.btn-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    transform: none;
    filter: none;
    box-shadow: none;
}

.badge {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
    margin-left: auto;
    display: inline-block;
    box-shadow: 0 0 0 2px var(--bg-dark);
    letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────
   LOGIN SCREEN
───────────────────────────────────────── */
#login-screen {
    background: var(--bg-darker);
}

.login-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 25% 40%, var(--accent-glass) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 75% 65%, var(--accent2-glass) 0%, transparent 55%);
}

.login-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.login-logo-wrap {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}

.login-logo-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
}


.login-brand-name {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.03em;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.login-about {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.auth-switch {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.auth-switch:hover {
    color: var(--text-main);
}

.auth-switch b {
    color: var(--accent-light);
}

/* ─────────────────────────────────────────
   VUE SALON #POST — colonne feed centrée
───────────────────────────────────────── */
.channel-post-inner {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 18px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Le feed = colonne bordée unique (cartes empilées sans gouttière) */
#channel-post-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ─────────────────────────────────────────
   COMPOSER SALON #POST — carte
───────────────────────────────────────── */
#channel-post-composer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

#channel-post-composer:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* ─────────────────────────────────────────
   LOADING SCREEN
───────────────────────────────────────── */
#loading-screen {
    color: var(--text-muted);
    background: var(--bg-darker);
}

.loading-icon {
    animation: loadingFloat 2s ease-in-out infinite;
    margin-bottom: 16px;
}

.loading-title {
    color: var(--text-heading);
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 6px;
}

.loading-bar-wrap {
    width: 180px;
    height: 3px;
    background: var(--bg-elevated);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 16px;
}

.loading-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    animation: loadingBar 1.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────
   THÈME TOGGLE (dans la nexus bar)
───────────────────────────────────────── */
.nexus-theme-btn {
    margin-top: auto;
}

[data-theme="dark"] .theme-icon-moon {
    display: none;
}

[data-theme="dark"] .theme-icon-sun {
    display: block;
}

[data-theme="light"] .theme-icon-sun {
    display: none;
}

[data-theme="light"] .theme-icon-moon {
    display: block;
}

/* ─────────────────────────────────────────
   APP LAYOUT
───────────────────────────────────────── */
#app-layout {
    display: none;
    height: 100vh;
    height: 100dvh;
    height: calc(100dvh - env(safe-area-inset-top, 0px));
    width: 100vw;
    position: relative;
    overflow: hidden;
    background: var(--bg-darker);
    transition: background 0.3s ease;
}

/* ─────────────────────────────────────────
   NEXUS BAR (colonne icônes gauche)
───────────────────────────────────────── */
#nexus-bar {
    width: 72px;
    background: var(--bg-darker);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 14px;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 50;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

#nexus-bar::-webkit-scrollbar {
    display: none;
}

.nexus-divider {
    width: 34px;
    height: 2px;
    background: var(--border-strong);
    border-radius: 99px;
    margin: 2px 0;
    flex-shrink: 0;
}

.nexus-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg-elevated);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-radius 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text-main);
    position: relative;
    flex-shrink: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}

.nexus-icon:hover {
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
    box-shadow: 0 4px 16px var(--accent-glow);
    transform: scale(1.04);
}

.nexus-icon.selected {
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.nexus-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nexus-add {
    color: var(--accent-light);
    background: var(--accent-glass);
    border: 1.5px dashed var(--accent-glass);
    font-size: 0.95em;
}

.nexus-add:hover {
    background: var(--accent);
    border-style: solid;
    border-color: transparent;
}

.has-unread::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
}

/* Icône Découvrir — item de nav plat (pas un slot Nexus) : couleur + barre gauche, pas de fond */
.nexus-icon-discover {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    background: transparent;
    color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease;
}

.nexus-icon-discover svg {
    width: 24px;
    height: 24px;
}

.nexus-icon-discover:hover {
    color: var(--text-heading);
    background: var(--bg-elevated);
}

.nexus-icon-discover.selected {
    color: var(--accent);
    background: transparent;
}

.nexus-icon-discover.selected::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 4px;
}

/* ─────────────────────────────────────────
   SIDEBAR (salons / amis)
───────────────────────────────────────── */
.sidebar {
    width: 240px;
    background: var(--bg-dark);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.sidebar-search-wrap {
    padding: 10px 10px 6px;
    flex-shrink: 0;
}

.sidebar-search-wrap input {
    margin: 0;
    background: var(--bg-base);
    border-radius: var(--radius-sm);
    font-size: 0.83rem;
    padding: 8px 12px;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    /* lisible — pas subtle */
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.15s;
}

.sidebar-section-header:hover {
    color: var(--text-main);
}

.sidebar-add-btn {
    display: flex;
    align-items: center;
    color: var(--text-subtle);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.sidebar-add-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

/* Nexus sidebar header */
.nexus-sidebar-header {
    padding: 0 14px;
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-heading);
    flex-shrink: 0;
}

/* Canaux */
.channel {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-main);
    /* lisible au repos */
    margin: 1px 2px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    gap: 6px;
    position: relative;
}

.channel:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.channel.selected {
    background: var(--accent-glass);
    color: var(--text-heading);
    font-weight: 600;
}

.channel.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.del-btn {
    color: var(--dnd);
    display: none;
    font-size: 0.75em;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(237, 66, 69, 0.12);
    cursor: pointer;
    transition: 0.15s;
    flex-shrink: 0;
}

.channel:hover .del-btn {
    display: block;
}

.del-btn:hover {
    background: rgba(237, 66, 69, 0.28);
}

/* Profile bar bas sidebar */
.profile-bar {
    background: var(--bg-darker);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    border-top: 1px solid var(--border-strong);
    /* plus visible */
    transition: background 0.15s;
    flex-shrink: 0;
}

.profile-bar-trigger {
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
}

.profile-bar-trigger:hover {
    background: var(--bg-hover);
}

.settings-mini-btn {
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.settings-mini-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-heading) !important;
}

.profile-bar-info {
    color: var(--text-heading);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88em;
    flex: 1;
    min-width: 0;
}

/* Tabs amis */
.tab {
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-main);
    /* lisible au repos */
    font-weight: 600;
    transition: 0.15s;
    font-size: 0.88em;
}

.tab:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.tab.selected {
    background: var(--accent-glass);
    color: var(--accent-light);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.tab-add {
    background: var(--online) !important;
    color: white !important;
}

.tab-add:hover {
    filter: brightness(1.1);
}

/* Friend cards */
.friend-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--border-strong);
    /* mieux visible */
    border-radius: 0;
    transition: background 0.15s, border-radius 0.15s;
}

.friend-card:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    border-top-color: transparent;
}

/* ─────────────────────────────────────────
   CHAT AREA
───────────────────────────────────────── */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    min-height: 0;
    /* Sans min-width:0, un item flex ne rétrécit pas sous la largeur de son contenu :
       un nom de salon long (nowrap) élargissait toute la zone de chat au-delà de l'écran
       (icône Membres hors champ, bulles coupées à droite sur mobile). */
    min-width: 0;
    height: 100%;
    transition: background 0.3s ease;
}

header {
    padding: 0 16px;
    min-height: 52px;
    border-bottom: 1px solid var(--border);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--bg-base);
    backdrop-filter: blur(8px);
    transition: background 0.3s ease;
    gap: 8px;
}

/* Badge E2E discret dans le header */
.e2e-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(59, 165, 92, 0.12);
    border: 1px solid rgba(59, 165, 92, 0.2);
    border-radius: 99px;
    font-size: 0.68rem;
    color: var(--online);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* # devant le nom du salon */
.chan-hash {
    font-size: 1.2rem;
    color: var(--text-subtle);
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
}

/* Bouton icône dans le header */
.header-icon-btn {
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.header-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

/* Messages */
.chat-box {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: auto;
    min-height: 0;
}

/* Spacer qui pousse les messages vers le bas quand ils sont peu nombreux
   (comme iMessage / Instagram). Disparaît quand le contenu déborde. */
.chat-box::before {
    content: '';
    flex: 1;
}

/* Indicateur de chargement des anciens messages (scroll infini vers le haut) */
.chat-history-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 12.5px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.chat-history-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent-glass);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: chat-history-spin 0.7s linear infinite;
}

@keyframes chat-history-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────
   ZONE DE SAISIE (Composer)
───────────────────────────────────────── */

.chat-msg-row:hover {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.chat-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 8px;
    margin: 0 -8px 15px -8px !important;
    transition: background 0.2s;
    min-width: 0;
}

.msg-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.msg-actions {
    position: absolute;
    right: 8px;
    top: -14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    display: flex;
    gap: 2px;
    padding: 3px 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.chat-msg-row:hover .msg-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.msg-actions button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: background 0.1s, color 0.1s;
    margin: 0;
}

.msg-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.input-area {
    padding: 10px 14px 14px;
    flex-shrink: 0;
    background: var(--bg-base);
    border-top: 1px solid var(--border);
    transition: background 0.3s ease;
}

.composer-shell {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 8px;
    min-height: 46px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.3s;
}

.composer-shell:focus-within {
    border-color: var(--accent-glass);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.chat-input {
    background: transparent !important;
    border: none !important;
    color: var(--text-heading) !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit;
    font-size: 0.9rem;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    /* Textarea auto-grow */
    resize: none;
    line-height: 1.45;
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Aligner verticalement au bas de la shell */
    align-self: flex-end;
    padding-bottom: 2px !important;
    display: block;
}

.chat-input::placeholder {
    color: var(--text-subtle);
}

.composer-right-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.composer-tool {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--radius-sm);
    background: transparent !important;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 0 !important;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.composer-tool:hover {
    color: var(--text-heading);
    background: var(--bg-hover) !important;
    filter: none;
    transform: none;
}

.composer-tool-left {
    font-size: 18px;
    color: var(--text-subtle);
}

/* Bouton « + » du composer + menu associé */
.composer-plus-btn {
    color: var(--text-subtle);
}
.composer-plus-btn:hover {
    color: var(--accent) !important;
}

.composer-plus-menu {
    position: fixed;
    z-index: 4000;
    min-width: 208px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: composerPlusIn 0.14s ease-out;
}

@keyframes composerPlusIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.composer-plus-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 0.95em;
    font-weight: 500;
    text-align: left;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.12s;
}
.composer-plus-item:hover {
    background: var(--bg-hover);
}
.composer-plus-item .cpi-icon {
    font-size: 1.15em;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   MENU DE RÔLES AUTO-ATTRIBUABLES
───────────────────────────────────────── */
.role-menu-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 14px 16px;
    max-width: 520px;
}
.role-menu-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}
.role-menu-card-title {
    font-weight: 700;
    color: var(--text-heading);
    font-size: 0.98em;
}
.role-menu-card-sub {
    font-size: 0.78em;
    color: var(--text-muted);
}
.role-menu-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.role-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--bg-darker);
    color: var(--text-main);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.role-menu-btn:hover {
    border-color: var(--rm-color, var(--accent));
}
.role-menu-btn.active {
    border-color: var(--rm-color, var(--accent));
    background: color-mix(in srgb, var(--rm-color, var(--accent)) 18%, transparent);
    color: var(--text-heading);
}
.role-menu-btn.active .rm-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-color, var(--accent)) 30%, transparent);
}
.role-menu-btn .rm-dot,
.rm-role-row .rm-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.role-menu-btn .rm-emoji {
    font-size: 1.05em;
    line-height: 1;
}

/* Lignes de la modale de création */
.rm-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-darker);
}
.rm-role-check {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.rm-role-check input {
    cursor: pointer;
    flex-shrink: 0;
}
.rm-role-name {
    color: var(--text-heading);
    font-size: 0.9em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-role-emoji {
    width: 62px;
    flex-shrink: 0;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--text-heading);
    font-size: 0.85em;
    outline: none;
    text-align: center;
}
.rm-role-label {
    width: 130px;
    flex-shrink: 0;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--text-heading);
    font-size: 0.85em;
    outline: none;
}
@media (max-width: 560px) {
    .rm-role-emoji { width: 48px; }
    .rm-role-label { width: 92px; }
}

/* ─────────────────────────────────────────
   GATE RÈGLEMENT D'ENTRÉE DE SERVEUR
───────────────────────────────────────── */
.rules-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}
.rules-gate-card {
    width: 100%;
    max-width: 560px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.rules-gate-title {
    font-size: 1.25em;
    font-weight: 800;
    color: var(--text-heading);
}
.rules-gate-sub {
    margin-top: 4px;
    font-size: 0.86em;
    color: var(--text-muted);
}
.rules-gate-body {
    margin: 18px 0;
    padding: 16px;
    overflow-y: auto;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 0.92em;
    line-height: 1.6;
    white-space: normal;
    flex: 1;
    min-height: 60px;
}
.rules-gate-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-heading);
    font-size: 0.92em;
    font-weight: 600;
    margin-bottom: 16px;
}
.rules-gate-check input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.rules-gate-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.rules-gate-leave {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 9px 18px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.9em;
}
.rules-gate-accept {
    background: var(--accent);
    border: none;
    color: #fff;
    padding: 9px 22px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 700;
}
.rules-gate-accept:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.composer-tool-gif {
    width: auto !important;
    min-width: 36px;
    padding: 0 7px !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 5px !important;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted) !important;
}

.composer-tool-gif:hover {
    border-color: var(--accent) !important;
    color: var(--accent-light) !important;
    background: var(--accent-glass) !important;
}

/* Bouton envoi animé */
.send-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 8px !important;
    box-shadow: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, color 0.15s, background 0.15s !important;
}

.send-btn.has-content {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 2px 10px var(--accent-glow);
}

.send-btn:hover {
    transform: scale(1.1) !important;
    filter: none !important;
}

.send-btn.has-content:hover {
    box-shadow: 0 4px 16px var(--accent-glow) !important;
    filter: brightness(1.1) !important;
}

.send-btn:active {
    transform: scale(0.95) !important;
}

/* Animation pulsation micro */
.recording-pulse {
    animation: pulseRed 1.5s infinite;
    color: var(--dnd) !important;
    background: rgba(237, 66, 69, 0.18) !important;
}

/* ─────────────────────────────────────────
   FICHIERS ET AUDIO
───────────────────────────────────────── */
.file-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    padding: 12px 15px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    width: 300px;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
}

.file-card:hover {
    border-color: var(--accent);
}

.file-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.file-card-icon {
    font-size: 1.8em;
    flex-shrink: 0;
}

.file-card-name {
    color: var(--text-heading);
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card-btn {
    background: var(--bg-hover);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 1em;
    flex-shrink: 0;
    width: auto;
    margin: 0;
}

.file-card-btn:hover {
    background: var(--accent);
    color: var(--on-accent);
    transform: none;
    filter: none;
}

.chat-inline-image {
    margin-top: 6px;
    max-width: min(320px, 65vw);
    max-height: 260px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    display: block;
    cursor: pointer;
    transition: border-color 0.2s;
}

.chat-inline-image:hover {
    border-color: var(--accent);
}

.media-container {
    position: relative;
    max-width: max-content;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
}

.media-hover-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    text-decoration: none;
    z-index: 10;
}

.media-container:hover .media-hover-btn {
    opacity: 1;
}

.media-hover-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Mini lecteur audio custom */
.chat-inline-audio {
    height: 40px;
    margin-top: 6px;
    outline: none;
    border-radius: 20px;
    width: 280px;
    max-width: 100%;
    accent-color: var(--accent);
}

/* ─────────────────────────────────────────
   MEMBRES (sidebar droite)
───────────────────────────────────────── */
#members-sidebar {
    width: 240px;
    background: var(--bg-dark);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

#home-chat-main {
    flex: 1;
    min-width: 0;
}

#group-members-sidebar {
    width: 240px;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
}

#group-members-panel-list {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}

#members-list {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}

.member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.member:hover {
    background: var(--bg-hover);
}

.member-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.member-name {
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.member-role-label,
.member-note {
    font-size: 0.75rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.member-note {
    color: var(--text-muted);
}

.member-section-title {
    font-size: 0.75em;
    font-weight: bold;
    color: var(--text-muted);
    padding: 10px 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ─────────────────────────────────────────
   AVATARS & STATUTS
───────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font-heading, 'Syne', system-ui, sans-serif);
    color: var(--on-accent);
    overflow: visible;
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    right: -1px;
    border: 2.5px solid var(--bg-dark);
    flex-shrink: 0;
}

.status-online {
    background: var(--online) !important;
}

.status-idle {
    background: var(--idle) !important;
}

.status-dnd {
    background: var(--dnd) !important;
}

.status-offline {
    background: var(--offline) !important;
}

/* ─────────────────────────────────────────
   QUICK PROFILE MENU
───────────────────────────────────────── */
.quick-menu {
    position: absolute;
    bottom: 72px;
    left: 80px;
    width: 250px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    animation: popUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
}

.quick-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 8px;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}

.quick-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.quick-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.88em;
    transition: 0.12s;
    font-weight: 500;
}

.quick-menu-item:hover {
    background: var(--accent);
    color: white;
}

.qdot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   VOCAL / VIDÉO
───────────────────────────────────────── */
/* ═══════════════════════════════════════════
   VOCAL — DISCORD-STYLE REDESIGN
═══════════════════════════════════════════ */

@keyframes voice-ring-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(59, 165, 92, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(59, 165, 92, 0);
    }

    100% {
        box-shadow: 0 0 0 0px rgba(59, 165, 92, 0);
    }
}

@keyframes voice-tile-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes voice-reconnect {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

#voice-chat-area {
    background: var(--bg-dark);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.voice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border);
    min-height: 48px;
    flex-shrink: 0;
}

.voice-count-pill {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.72em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.v-btn-hangup-sm {
    background: var(--dnd) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* ─── Voice Status Bar (Discord-style "Voix connectée") ─── */
#voice-status-bar {
    background: var(--bg-darker);
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.vsb-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    border-radius: 6px;
    padding: 4px 6px;
    transition: background 0.15s;
}

.vsb-left:hover {
    background: var(--bg-hover);
}

.vsb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--online);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(59, 165, 92, 0.7);
    animation: vsb-dot-pulse 2.5s ease infinite;
}

@keyframes vsb-dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(59, 165, 92, 0.5);
    }

    50% {
        box-shadow: 0 0 10px rgba(59, 165, 92, 0.9);
    }
}

.vsb-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vsb-title {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--online);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.vsb-channel {
    font-size: 0.7em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.vsb-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.vsb-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.vsb-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    filter: none;
    box-shadow: none;
}

.vsb-btn.muted {
    color: var(--dnd);
}

.vsb-btn-leave {
    color: var(--dnd);
}

.vsb-btn-leave:hover {
    background: rgba(237, 66, 69, 0.15);
    color: var(--dnd);
}

.voice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px;
    height: calc(100vh - 180px);
    justify-content: center;
    align-content: flex-start;
    overflow-y: auto;
}

.voice-user-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    flex: 1 1 300px;
    height: 250px;
    max-width: 400px;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Mode focus */
.voice-grid.has-focus .voice-user-card.focused {
    flex: 1 1 100%;
    max-width: 100%;
    height: 65vh;
    order: -1;
    z-index: 10;
}

.voice-grid.has-focus .voice-user-card:not(.focused) {
    flex: 0 0 150px;
    height: 120px;
    order: 1;
}

.voice-grid.has-focus .voice-user-card:not(.focused) .voice-volume-slider {
    display: none;
}

.voice-grid.has-focus .voice-user-card:not(.focused) .voice-user-avatar {
    width: 50px;
    height: 50px;
    font-size: 1.2em;
}

.voice-grid.has-focus .voice-user-card:not(.focused) .voice-card-overlay {
    padding: 4px;
}

.voice-user-card.focused {
    flex: 1 1 100%;
    min-height: 60vh;
    max-height: 75vh;
    aspect-ratio: auto;
    order: -1;
    z-index: 10;
}

.voice-user-card.speaking {
    border-color: var(--online);
    animation: voice-ring-pulse 1.2s ease-out infinite;
}

/* Indicateur visuel : participant muté (contour rouge) */
.voice-user-card.peer-muted {
    border-color: var(--dnd);
    box-shadow: 0 0 0 2px rgba(237, 66, 69, 0.25), var(--shadow-md);
}

/* Badge micro barré affiché sur la carte du muté */
.voice-mute-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(237, 66, 69, 0.88);
    color: white;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    animation: fadeIn 0.2s ease;
    flex-shrink: 0;
}

.voice-user-card.reconnecting {
    animation: voice-reconnect 1.4s ease-in-out infinite;
    border-color: var(--warning, #faa61a);
}

.voice-user-card.reconnecting::after {
    content: 'Reconnexion…';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--warning, #faa61a);
    font-size: 0.72em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 10;
    pointer-events: none;
}

.voice-user-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
    display: none;
    z-index: 1;
}

.voice-user-video.is-screen {
    object-fit: contain;
    background-color: #111;
}

.voice-user-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    font-weight: bold;
    color: var(--text-muted);
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.voice-user-avatar.speaking {
    box-shadow: 0 0 0 3px var(--online), 0 0 20px rgba(59, 165, 92, 0.4);
    transform: scale(1.05);
}

.voice-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
    padding: 10px 12px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    z-index: 3;
}

.voice-user-name {
    margin: 0;
    color: white;
    font-weight: 600;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-left: 6px;
}

.voice-volume-slider {
    width: 90px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--online);
    /* Rendre le thumb plus facile à attraper sur desktop */
    height: 4px;
    border-radius: 2px;
}

/* Conteneur flex pour le slider + label de pourcentage */
.voice-vol-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Label de pourcentage à côté du slider */
.voice-vol-label {
    font-size: 0.72em;
    color: var(--text-muted);
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.btn-focus {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 5px;
    opacity: 0.7;
    transition: 0.2s;
    margin-right: 5px;
    width: auto;
    min-width: 0;
}

.btn-focus:hover {
    opacity: 1;
    transform: scale(1.12);
    filter: none;
    box-shadow: none;
}

#voice-floating-bar {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    padding: 10px 20px;
    border-radius: 99px;
    display: flex;
    gap: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.v-btn {
    background: var(--bg-elevated);
    color: var(--text-heading);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.4em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.v-btn:hover:not(.disabled) {
    background: var(--online);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(59, 165, 92, 0.35);
    filter: none;
}

.v-btn.hangup {
    background: var(--dnd);
}

.v-btn.hangup:hover {
    background: #c03537;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(237, 66, 69, 0.35);
}

.v-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.v-btn.muted {
    background: var(--dnd);
    color: white;
}

.v-btn.active {
    background: var(--online);
    color: white;
}

.v-btn.active:hover {
    background: #2f9e57;
    box-shadow: 0 6px 16px rgba(59, 165, 92, 0.35);
}

.voice-channel-users {
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
    margin-top: -2px;
}

.voice-sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83em;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    padding: 2px 4px;
    border-radius: 5px;
}

.voice-sidebar-user:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}

/* ─────────────────────────────────────────
   PROFIL
───────────────────────────────────────── */
#profile-view {
    display: none;
    position: absolute;
    top: 0;
    left: 72px;
    right: 0;
    bottom: 0;
    flex-direction: column;
    background: var(--bg-base);
    overflow-y: auto;
    z-index: 100;
    animation: fadeIn 0.2s ease;
    transition: background 0.3s ease;
}

.profile-banner {
    width: 100%;
    height: 200px;
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

/* Bouton caméra de repositionnement rapide de la bannière (propriétaire uniquement). */
.banner-edit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 5;
}
.banner-edit-btn:hover { background: rgba(0, 0, 0, 0.8); }

.profile-content {
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    margin-top: -48px;
    padding-bottom: 50px;
}

.profile-avatar-large {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--bg-primary, var(--bg-base));
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    transition: border-color 0.3s;
    z-index: 10;
}

.profile-name-box {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-name-info {
    flex: 1;
    min-width: 0;
}

.profile-actions-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 4px;
}

/* Boutons d'action adaptatifs du profil (Partie 3.3/4.4 de la refonte) */
.profile-action-dropdown-wrap {
    position: relative;
    display: inline-flex;
}

.profile-action-btn {
    margin: 0;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, background 0.2s;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-heading);
}
.profile-action-btn:hover { opacity: 0.85; }

.profile-action-btn.pab-solid {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.profile-action-btn.pab-idle {
    color: var(--idle);
    border-color: var(--idle);
}

.profile-more-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.profile-more-btn:hover { background: var(--bg-hover); }

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 30;
}
.profile-dropdown-menu-right {
    left: auto;
    right: 0;
}

.profile-dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-heading);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.profile-dropdown-item:hover { background: var(--bg-hover); }
.profile-dropdown-item.pdi-danger { color: #ed4245; }

.profile-custom-note {
    font-weight: 600;
    color: var(--text-secondary, var(--accent-light));
    margin-top: 10px;
    font-size: 0.9em;
}

.profile-bio {
    margin-top: 12px;
    color: var(--text-main);
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-stats {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    font-size: 0.95em;
    flex-wrap: wrap;
}

.profile-stats strong {
    color: var(--text-heading);
}

.profile-stats span span {
    color: var(--text-muted);
}

.profile-display-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--font-feed, 'Inter', sans-serif);
    /* Longs pseudos insécables (ex. "Nom_tah_les_fou") : couper le mot au lieu de
       déborder, et clamper à 2 lignes max au-delà (cf. Partie 4.3 de la refonte profil). */
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-username {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: var(--font-feed, 'Inter', sans-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.profile-karma-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    width: fit-content;
    transition: color 0.15s;
}
.profile-karma-badge:hover { color: var(--accent); }

.profile-card-inner {
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 22px;
    margin-top: 22px;
    box-shadow: var(--shadow-sm);
    transition: background 0.3s, border-color 0.3s;
}

.close-profile-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
    border: none;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

.close-profile-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.1);
    filter: none;
    box-shadow: none;
}

.profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-top: 12px;
}

.profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

a.profile-meta-item:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Profil — layout desktop (Partie 4 de la refonte) : bannière plus haute, avatar plus
   grand chevauchant la bannière, zone infos à droite de l'avatar plutôt qu'en dessous.
   .profile-content passe en flex-wrap : avatar (largeur fixe) + name-box (flex:1) occupent
   déjà toute la largeur de la première "ligne", donc le reste (tabs, feed, formulaire
   d'édition…) retombe naturellement à la ligne suivante sans règle supplémentaire. */
@media (min-width: 769px) {
    .profile-banner {
        height: 320px;
    }

    .profile-content {
        max-width: 1000px;
        /* Annule le margin-top: -48px de la règle de base (mobile) : sur PC seul
           l'avatar doit chevaucher la bannière, pas tout le bloc nom/boutons. */
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 24px;
    }

    /* Seul l'avatar chevauche la bannière (via son propre margin négatif) : mettre
       ce décalage sur .profile-content avec align-items:flex-end tirait aussi le
       nom/pseudo/stats vers le haut, jusque sur la bannière, dès que ce bloc devenait
       plus haut que l'avatar. */
    .profile-avatar-large {
        width: 140px;
        height: 140px;
        font-size: 32px;
        flex-shrink: 0;
        margin-top: -70px;
    }

    .profile-name-box {
        flex: 1;
        min-width: 0;
        margin-top: 0;
    }

    .profile-display-name {
        font-size: 28px;
        max-width: 60%;
    }

    .profile-bio {
        font-size: 15px;
    }

    /* Sur PC le bouton fermer (.close-profile-btn) reste affiché et occupe le même
       coin (right:18px, largeur 38px) : décaler la caméra pour qu'elle ne soit plus
       cachée dessous. Inutile sur mobile où ce bouton fermer est masqué. */
    .banner-edit-btn {
        right: 62px;
    }

    /* Ces blocs sont assez étroits pour tenir sur la même ligne flex que l'avatar +
       name-box (qui ne remplit alors plus toute la largeur), au lieu de retomber
       dessous comme prévu : cause du chevauchement avec le nom/bouton "Éditer le
       profil" et de la liste abonnés/abonnements coincée à côté du header. On les
       force chacun sur leur propre ligne pleine largeur. */
    #profile-list-panel,
    .profile-card-inner,
    .profile-tabs,
    #profile-feed {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Nouvelles Tabs du Profil */
.profile-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    margin-top: 20px;
}

.profile-tab {
    padding: 10px 0;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.profile-tab:hover {
    color: var(--text-main);
}

.profile-tab.active {
    color: var(--text-heading);
}

.profile-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
}

.edit-form-group {
    margin-bottom: 14px;
}

.edit-form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.profile-bar-trigger {
    cursor: pointer;
}

/* accent-light utilisé dans le profil */
.accent-light {
    color: var(--accent-light);
}

/* ─────────────────────────────────────────
   MODALS
───────────────────────────────────────── */
#modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px;
}

.card-modal-wide {
    width: min(660px, calc(100vw - 30px));
    text-align: left !important;
}

.modal-post-body {
    /* wrapper sémantique uniquement — le scroll est géré par la modale parente */
}

.card-modal-wide h2 {
    text-align: left;
}

.modal-subtitle {
    margin: 0 0 8px 0;
    color: var(--text-muted);
    font-size: 0.88em;
}

/* ─────────────────────────────────────────
   TOASTS — variantes colorées avec barre de progression
───────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

@media (max-width: 768px) {
    #toast-container {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 10px);
        right: 10px;
        left: 10px;
    }
}

.toast {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--accent);
    color: var(--text-main);
    padding: 13px 40px 13px 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    min-width: 280px;
    pointer-events: all;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        toastOut 0.4s ease-out 4.6s forwards;
}

.toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* ── Variantes ── */
.toast.toast-success {
    border-left-color: #3ba55d;
}

.toast.toast-error {
    border-left-color: #ed4245;
}

.toast.toast-warning {
    border-left-color: #faa61a;
}

.toast.toast-info {
    border-left-color: #5865f2;
}

/* ── Icône (remplace l'avatar quand pas de photo) ── */
.toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    background: rgba(255, 255, 255, 0.07);
}

.toast.toast-success .toast-icon {
    background: rgba(59, 165, 92, 0.15);
    color: #3ba55d;
}

.toast.toast-error .toast-icon {
    background: rgba(237, 66, 69, 0.15);
    color: #ed4245;
}

.toast.toast-warning .toast-icon {
    background: rgba(250, 166, 26, 0.15);
    color: #faa61a;
}

.toast.toast-info .toast-icon {
    background: rgba(88, 101, 242, 0.15);
    color: #5865f2;
}

.toast-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: 0.8em;
}

.toast-content {
    flex: 1;
    overflow: hidden;
}

.toast-title {
    font-weight: 700;
    font-size: 0.88em;
    color: var(--text-heading);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-message {
    font-size: 0.79em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* ── Bouton fermer ── */
.toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    width: auto;
    min-width: 0;
    margin: 0;
    pointer-events: all;
}

.toast-close:hover {
    color: var(--text-main);
    background: var(--bg-hover);
    box-shadow: none;
    filter: none;
    transform: none;
}

/* ── Barre de progression ── */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    animation: toastProgress 5s linear forwards;
}

.toast.toast-success .toast-progress-bar {
    background: #3ba55d;
}

.toast.toast-error .toast-progress-bar {
    background: #ed4245;
}

.toast.toast-warning .toast-progress-bar {
    background: #faa61a;
}

.toast.toast-info .toast-progress-bar {
    background: #5865f2;
}

.toast:not(.toast-success):not(.toast-error):not(.toast-warning):not(.toast-info) .toast-progress-bar {
    background: var(--accent);
}

/* ─────────────────────────────────────────
   GROUP / FRIEND PICKERS
───────────────────────────────────────── */
.friend-picker-grid {
    margin-top: 10px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 2px;
}

.group-friend-item,
.group-member-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    cursor: pointer;
    transition: 0.15s;
}

.group-member-item {
    cursor: default;
    grid-template-columns: 36px minmax(0, 1fr);
}

.group-friend-item:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

.group-friend-item.selected {
    border-color: var(--accent);
    background: var(--accent-glass);
}

.group-friend-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.group-friend-meta span {
    color: var(--text-heading);
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.88rem;
}

.group-friend-meta small {
    color: var(--text-muted);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.72rem;
}

.group-friend-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 0.78em;
    border: 1px solid var(--border);
}

.group-friend-item.selected .group-friend-check {
    background: var(--accent);
    color: white;
    border-color: transparent;
}

.friend-chip-list {
    margin-top: 10px;
    min-height: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.friend-chip {
    background: var(--accent-glass);
    color: var(--accent-light);
    border: 1px solid var(--accent-glass);
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 0.82em;
    cursor: pointer;
    transition: 0.15s;
    font-weight: 500;
}

.friend-chip:hover {
    border-color: var(--dnd);
    color: var(--dnd);
    background: rgba(237, 66, 69, 0.1);
}

.picker-empty {
    color: var(--text-muted);
    font-size: 0.88em;
    padding: 8px 4px;
    text-align: left;
}

/* ─────────────────────────────────────────
   MP & AMIS SCROLL FIX
───────────────────────────────────────── */
#mp-list,
#friends-content {
    min-height: 0 !important;
}

/* ─────────────────────────────────────────
   HOME & NEXUS VIEWS
───────────────────────────────────────── */
#nexus-view {
    overflow: hidden;
    height: 100%;
    min-width: 0;
}

#home-view {
    overflow: hidden;
    height: 100%;
    min-width: 0;
}

/* ── Sidebar Nexus — header Discord-style ── */
.nexus-sidebar-header {
    padding: 0 !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-bottom: 1px solid var(--border);
    background: var(--bg-darker, var(--bg-dark));
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

/* Bouton nom du serveur cliquable (dropdown arrow) */
.nx-server-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.nx-server-dropdown-btn:hover {
    background: var(--bg-hover);
}

.nx-server-icon-sm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #1aab58);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: var(--font-heading, 'Syne', system-ui, sans-serif);
    font-size: 0.7em;
    flex-shrink: 0;
    overflow: hidden;
}

.nx-server-name {
    flex: 1;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.nx-chevron-down {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.nx-server-dropdown-btn:hover .nx-chevron-down {
    color: var(--text-heading);
}

/* Barre d'actions — icônes seulement avec label au hover */
.nx-server-actions-bar {
    display: flex;
    gap: 4px;
    padding: 0 10px 10px;
    flex-wrap: wrap;
}

/* Bouton icône avec tooltip natif (data-label) */
.nx-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0;
    box-shadow: none;
    padding: 0;
    flex-shrink: 0;
}

.nx-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    transform: none;
    filter: none;
}

/* Tooltip texte au hover via data-label.
   Ancré à gauche (pas centré) : ces boutons vivent tout en haut de la barre latérale
   gauche, donc un tooltip centré+nowrap déborde côté gauche de la fenêtre (hors-écran,
   invisible) dès que le bouton est proche du bord. Ancrer à gauche et grandir vers la
   droite reste toujours dans la fenêtre (il y a toujours de la place à droite de la
   barre latérale, jamais à gauche d'elle). */
.nx-icon-btn::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg-darkest, #111214);
    color: var(--text-heading);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 100;
    border: 1px solid var(--border);
}

.nx-icon-btn:hover::after {
    opacity: 1;
}

.nx-icon-btn-danger:hover {
    background: rgba(237, 66, 69, 0.15);
    color: var(--dnd, #ed4245);
}

/* Garde la compatibilité */
.nx-action-pill {
    display: none;
}

/* Garde la compatibilité avec l'ancienne structure */
.nexus-server-head {
    display: none;
}

.nexus-server-actions {
    display: none;
}

.nexus-action-btn {
    display: none;
}

/* ── Catégories ── */
.nexus-channel-category {
    margin-top: 6px;
    padding: 0 4px;
}

.nexus-category-header,
.category-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 6px 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.nexus-category-header:hover,
.category-header:hover {
    color: var(--text-heading);
}

/* Flèche animée (compatible les deux classes) */
.nexus-category-chevron {
    font-size: 0.7rem;
    display: inline-block;
    transition: transform 0.18s;
    margin-right: 2px;
}

.category-arrow {
    transition: transform 0.18s;
    flex-shrink: 0;
}

/* Repli */
.nexus-category-header.collapsed .nexus-category-chevron {
    transform: rotate(-90deg);
}

.category-collapsed .category-arrow {
    transform: rotate(-90deg);
}

.category-channels[style*="none"] {
    display: none;
}

/* ── Channels ── */
#channels-list .channel {
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin: 1px 2px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.93rem;
    color: var(--text-muted);
    transition: background 0.1s, color 0.1s;
    position: relative;
}

#channels-list .channel:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

#channels-list .channel:hover .del-btn {
    opacity: 1;
}

#channels-list .channel.selected {
    background: var(--bg-elevated);
    color: var(--text-heading);
}

#channels-list .channel.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.del-btn {
    opacity: 0;
    margin-left: auto;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.8em;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.del-btn:hover {
    background: rgba(224, 94, 82, 0.2);
}

/* Hint topic sous le salon */
.channel-topic-hint {
    padding: 1px 10px 4px 28px;
    font-size: 0.72rem;
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bouton "Ajouter un salon" en bas de la liste */
.nx-add-channel-btn {
    margin: 8px 6px 4px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: background 0.1s, color 0.1s;
}

.nx-add-channel-btn:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

/* ── Channel header — topic bar ── */
#main-chat>header {
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Le bloc titre absorbe l'espace restant et tronque le nom du salon (ellipsis),
   les icônes de droite (recherche, épingles, membres) restent toujours visibles. */
#main-chat>header>div:first-child {
    flex: 1 1 auto;
}

#current-channel-title {
    min-width: 0;
}

#channel-topic-bar {
    padding: 4px 16px 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
    background: var(--bg-dark);
}

/* ── Membres — groupes par rôle ── */
.member-section-title {
    padding: 14px 8px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--role-color, var(--text-muted));
    display: flex;
    align-items: center;
    gap: 4px;
}

.member-section-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role-color, var(--text-muted));
    opacity: 0.7;
    flex-shrink: 0;
}

/* Hover membre avec aura */
.member:hover .avatar-role-aura {
    box-shadow: 0 0 0 2px var(--role-color, transparent);
    transition: box-shadow 0.2s;
}

/* Nom coloré selon rôle */
.member-name-colored {
    color: var(--role-color, var(--text-main)) !important;
}

/* legacy .nexus-category-chevron */
.nexus-category-chevron {
    font-size: 0.8rem;
}

/* ══════════════════════════════════════════════════════
   Paramètres du serveur — plein écran style Discord
   ══════════════════════════════════════════════════════ */
.ns-overlay {
    position: fixed;
    inset: 0;
    z-index: 700;
    flex-direction: row;
    overflow: hidden;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--bg-main) !important;
    box-shadow: none !important;
    animation: fadeIn .18s ease;
}

/* display géré par JS (openModal/closeModal), ne pas mettre !important ici */

/* ── Sidebar ── */
.ns-sidebar {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    background: var(--bg-panel, #2f3136);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px 12px 16px;
    overflow-y: auto;
    flex-shrink: 0;
}

.ns-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.ns-server-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1em;
    color: var(--accent-light);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .08);
}

.ns-server-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.ns-server-name-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-heading);
    line-height: 1.3;
    word-break: break-word;
}

.ns-server-type-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 1px;
}

.ns-nav-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 10px 4px;
    margin-bottom: 2px;
}

.ns-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nexus-settings-tab {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background .1s, color .1s !important;
    letter-spacing: normal !important;
    z-index: 701;
}

.nexus-settings-tab:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: var(--text-main) !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.nexus-settings-tab.active {
    background: rgba(114, 137, 218, .2) !important;
    color: var(--accent-light, #c5ccf7) !important;
    font-weight: 700 !important;
}

.nexus-settings-tab svg {
    opacity: .65;
    flex-shrink: 0;
}

.nexus-settings-tab.active svg {
    opacity: 1;
}

.ns-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 8px;
}

.ns-close-sidebar-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    transition: background .1s, color .1s !important;
    display: flex !important;
    align-items: center !important;
}

.ns-close-sidebar-btn:hover {
    background: rgba(237, 66, 69, .15) !important;
    color: #ed4245 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* ── Zone de contenu ── */
.ns-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-main, #36393f);
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 48px 40px 80px;
}

.ns-content-inner {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ns-panel-title {
    margin-bottom: 20px;
}

.ns-panel-title h2 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    color: var(--text-heading);
}

.ns-panel-title p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.nexus-settings-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.nexus-settings-panel.active {
    display: flex;
}

/* ── Cards ── */
.settings-card {
    background: var(--bg-elevated, #2f3136);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-card h3 {
    margin: 0;
    color: var(--text-heading);
    font-size: 0.95rem;
}

.settings-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.settings-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: -4px;
}

.settings-field-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .7;
}

/* Icône du serveur : même pattern que l'avatar de profil (aperçu + upload + lien) */
.settings-icon-upload-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 8px;
}

.settings-icon-preview {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 16px;
    background: var(--accent-glass);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3em;
    color: var(--accent-light);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .08);
}

.settings-icon-upload-actions {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-icon-upload-actions .ns-cancel-btn {
    align-self: flex-start;
}

.settings-icon-upload-actions input[type="text"] {
    margin: 0;
    font-size: 0.85em;
}

/* Boutons d'action dans les settings */
.ns-save-btn {
    width: auto !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    align-self: flex-end;
    letter-spacing: normal !important;
    box-shadow: 0 2px 8px var(--accent-glass) !important;
}

.ns-save-btn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
}

.ns-cancel-btn {
    width: auto !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

.ns-cancel-btn:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: var(--text-main) !important;
    transform: none !important;
}

/* Recherche dans membres */
.ns-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input, #202225);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text-muted);
}

.ns-search-input {
    border: none !important;
    background: transparent !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: 1;
    color: var(--text-main) !important;
    font-size: 0.9rem !important;
}

.ns-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.settings-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-inline-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.settings-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-size: 0.9rem;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-list-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-elevated);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-list-item.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(90, 169, 255, 0.22);
}

.settings-item-main {
    min-width: 0;
    flex: 1;
}

.settings-item-title {
    color: var(--text-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

.settings-item-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
    line-height: 1.35;
}

.settings-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    margin-right: 6px;
    margin-top: 6px;
}

.settings-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.settings-tag {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.74rem;
    color: var(--text-muted);
    background: var(--bg-dark);
    border: 1px solid var(--border-strong);
}

.settings-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-item-actions button,
.settings-item-actions select {
    width: auto;
    margin: 0;
}

.settings-role-row {
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.settings-role-row:hover,
.settings-member-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.settings-role-header,
.settings-member-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-member-card {
    align-items: flex-start;
}

.settings-member-card .settings-item-actions {
    width: 320px;
    justify-content: flex-end;
}

.settings-member-card select {
    min-width: 190px;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.permission-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elevated);
    color: var(--text-main);
    font-size: 0.84rem;
}

@media (max-width: 960px) {

    /* Paramètres serveur plein écran — sidebar devient une barre en haut */
    .ns-overlay {
        flex-direction: column !important;
    }

    .ns-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 8px 12px !important;
        overflow-x: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        gap: 0 !important;
    }

    .ns-sidebar-header {
        display: none !important;
    }

    .ns-nav-label {
        display: none !important;
    }

    .ns-nav {
        flex-direction: row !important;
        gap: 2px !important;
        flex: 1 !important;
        overflow-x: auto;
    }

    .ns-nav-divider {
        display: none !important;
    }

    .ns-close-sidebar-btn {
        width: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap;
    }

    .ns-content {
        padding: 24px 16px 60px !important;
    }

    .settings-split,
    .permission-grid {
        grid-template-columns: 1fr;
    }

    .settings-member-card,
    .settings-role-row,
    .settings-role-header,
    .settings-member-head {
        flex-direction: column;
    }

    .settings-member-card .settings-item-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ─────────────────────────────────────────
   ROADMAP LIENS
───────────────────────────────────────── */
.chat-link {
    color: var(--accent-light);
    text-decoration: underline;
}

.chat-link:hover {
    color: var(--accent);
}

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes cardIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastProgress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

@keyframes loadingFloat {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes loadingBar {
    0% {
        width: 0%;
    }

    50% {
        width: 65%;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

@keyframes pulseRed {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(237, 66, 69, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(237, 66, 69, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(237, 66, 69, 0);
    }
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {

    #members-sidebar,
    #group-members-sidebar {
        display: none !important;
    }

    .sidebar {
        width: 220px;
    }
}

@media (max-width: 768px) {

    /* 📱 Disposition principale — colonne inversée, nav en bas */
    #app-layout {
        flex-direction: column-reverse !important;
    }

    /* ── Bottom Navigation Bar (iOS/Android style) ── */
    #nexus-bar {
        width: 100vw !important;
        height: 60px;
        min-height: 60px;
        flex-direction: row !important;
        padding: 4px 8px !important;
        border-right: none !important;
        border-top: 2px solid var(--border-strong);
        /* bien visible */
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        align-items: center;
        gap: 2px !important;
        background: var(--bg-darker);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #nexus-bar::-webkit-scrollbar {
        display: none;
    }

    /* Séparateurs plus fins sur mobile */
    .nexus-divider {
        width: 1px !important;
        height: 28px !important;
        margin: 0 6px !important;
        flex-shrink: 0;
    }

    /* Icônes plus compacts */
    .nexus-icon {
        width: 42px !important;
        height: 42px !important;
        margin: 0 2px !important;
        flex-shrink: 0;
        font-size: 1em;
    }

    /* Bouton Thème poussé à droite */
    .nexus-theme-btn {
        margin-top: 0 !important;
        margin-left: auto !important;
        flex-shrink: 0;
    }

    /* Sidebars masquées, on se concentre sur la vue principale */
    .sidebar {
        display: none !important;
    }

    /* Modales adaptées */
    .card {
        width: 92% !important;
        max-width: 400px;
        padding: 18px;
    }

    /* Paramètres en colonne sur mobile */
    #settings-view {
        flex-direction: column !important;
    }

    .settings-sidebar {
        width: 100% !important;
        height: auto;
        max-height: 25vh;
        padding: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-strong);
        display: flex;
        flex-direction: row !important;
        overflow-x: auto;
        gap: 6px;
    }

    .settings-sidebar .settings-tab {
        flex: 0 0 auto;
        margin-bottom: 0;
        white-space: nowrap;

    }

    .settings-content {
        padding: 20px !important;
        flex: 1;
    }

    .settings-close-btn {
        top: 15px !important;
        right: 15px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1.1em;
    }

    /* Profils (responsive de l'en-tête et flex wrap) — tailles mobile déjà posées en base
       (banner 200px / avatar 96px, cf. Partie 3.1 de la refonte profil) */
    .profile-stats {
        flex-wrap: wrap;
        gap: 12px !important;
    }

    #my-profile-actions,
    #other-user-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Composer et Zone de texte */
    header {
        padding: 0 12px;
        height: 55px;
    }

    .chat-box {
        /* 130px = ~74px input bar + 47px nav + 9px marge de confort */
        padding: 12px 10px 130px;
        overflow-x: hidden;
    }

    /* ── Bulles de messages (style Instagram/iMessage) ────────── */
    .chat-msg-row {
        margin: 0 0 6px 0 !important;
        padding: 2px 6px !important;
        align-items: flex-end !important;
        gap: 8px;
    }

    /* Message reçu : petit avatar visible en bas à gauche */
    .chat-msg-row:not(.msg-own) .avatar {
        display: block;
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0;
        margin-bottom: 2px;
    }

    /* Message envoyé : inversé, pas d'avatar */
    .chat-msg-row.msg-own {
        flex-direction: row-reverse;
    }

    .chat-msg-row.msg-own .avatar {
        display: none;
    }

    .chat-msg-row.msg-own .msg-actions {
        right: auto;
        left: 8px;
    }

    /* Bulle commune */
    .chat-msg-row .msg-body {
        flex: 0 1 auto !important;  /* Empêche l'étirement — taille au contenu */
        width: auto !important;
        overflow: visible;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 78%;
        border-radius: 18px 18px 18px 4px;
        padding: 8px 12px;
        background: var(--bg-elevated);
    }

    /* Bulle propre (envoyé) */
    .chat-msg-row.msg-own .msg-body {
        background: var(--accent);
        border-radius: 18px 18px 4px 18px;
        align-self: flex-end;
        max-width: 82%;
    }

    .chat-msg-row.msg-own .msg-body .msg-content-wrap,
    .chat-msg-row.msg-own .msg-body > .msg-header span {
        color: #fff !important;
    }

    /* Masquer nom + heure dans la bulle (info déjà dans l'avatar/contexte).
       Cible .msg-header explicitement (pas ":first-child" — en 1-1 le nom est
       maintenant omis du DOM pour les messages reçus, donc le premier enfant
       peut être le contenu du message lui-même : le masquer par position
       masquait le texte du message). */
    .chat-msg-row .msg-body > .msg-header {
        display: none !important;
    }

    /* Images et vidéos dans les bulles ne débordent pas */
    .chat-msg-row .msg-body img,
    .chat-msg-row .msg-body video {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }

    /* Liens de fichiers (UUID) : forcer le retour à la ligne */
    .chat-msg-row .msg-body a {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .msg-content-wrap {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* Shared post preview : ne pas déborder sur mobile */
    .shared-post-preview {
        max-width: 100% !important;
    }

    /* Input bar fixée au-dessus de la nav — indépendant du flex layout */
    .input-area {
        position: fixed !important;
        bottom: 47px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
        padding: 8px 10px !important;
        background: var(--bg-base) !important;
        border-top: 1px solid var(--border) !important;
    }

    .composer-shell {
        padding: 6px 8px;
        border-radius: 20px;
        overflow: hidden;
    }

    .composer-right-tools button {
        padding: 6px;
        font-size: 0.9em;
    }

    /* Masquer seulement le trombone et le micro au focus → plus de place pour la saisie */
    .composer-shell:focus-within .btn-voice-msg,
    .composer-shell:focus-within label.composer-tool-left {
        display: none !important;
    }

    #chat-input,
    #mp-chat-input,
    #hub-post-input {
        font-size: 16px;
        /* Évite le zoom auto iOS */
    }

    /* Hub (Découverte) */
    #hub-view header {
        padding: 0 10px !important;
        overflow-x: auto;
        white-space: nowrap;
    }

    #hub-scroll-area {
        padding: 15px 10px !important;
    }

    /* Boutons modaux */
    .btn-cancel,
    button {
        font-size: 0.9em;
        padding: 12px;
    }

    /* Masquer nexus-bar sur mobile (remplacée par #mobile-nav) */
    #nexus-bar {
        display: none !important;
    }

    /* Padding pour ne pas que le contenu soit sous la mobile-nav (nav = 62px) */
    #app-layout {
        padding-bottom: 62px;
    }
}

/* ─────────────────────────────────────────
   VOCAL — RESPONSIVE MOBILE
───────────────────────────────────────── */
@media (max-width: 768px) {
    .voice-grid {
        padding: 12px 8px;
        gap: 8px;
        height: calc(100dvh - 240px);
    }

    .voice-user-card {
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
        height: 160px;
        border-radius: var(--radius);
    }

    .voice-user-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.7em;
    }

    .voice-user-name {
        font-size: 0.78em;
    }

    .voice-volume-slider {
        display: none;
    }

    .voice-header {
        padding: 8px 12px;
        min-height: 44px;
    }

    #voice-floating-bar {
        bottom: 58px;
        /* above mobile nav */
        padding: 8px 14px;
        gap: 10px;
    }

    .v-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2em;
    }

    /* Status bar smaller on mobile */
    #voice-status-bar {
        padding: 6px 8px;
    }

    .vsb-title {
        font-size: 0.68em;
    }

    .vsb-channel {
        font-size: 0.65em;
    }

    /* Single participant fills full width */
    .voice-grid:has(.voice-user-card:only-child) .voice-user-card {
        flex: 1 1 100%;
        max-width: 100%;
        height: 280px;
    }
}

@media (max-width: 480px) {
    .voice-user-card {
        flex: 1 1 100%;
        max-width: 100%;
        height: 200px;
    }

    .voice-grid.has-focus .voice-user-card.focused {
        height: 55vh;
    }

    .voice-grid.has-focus .voice-user-card:not(.focused) {
        flex: 0 0 110px;
        height: 90px;
    }
}

/* Bouton channels nexus — masqué sur desktop */
#mob-channels-btn,
#mob-channels-btn-forum {
    display: none;
}

/* ─────────────────────────────────────────
   BARRE NAVIGATION MOBILE
───────────────────────────────────────── */
#mobile-nav {
    display: none;
    /* caché par défaut sur desktop */
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    #mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
        height: calc(39px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        /* plus compact — plus de place pour le contenu */
        background: var(--bg-darker);
        border-top: 2px solid var(--border-strong);
        align-items: stretch;
        justify-content: space-around;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
    }

    .mob-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 4px;
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.15s, background 0.15s;
        box-shadow: none;
        width: auto;
    }

    .mob-nav-btn:hover,
    .mob-nav-btn.active {
        color: var(--accent);
        background: var(--accent-glass);
        transform: none;
        filter: none;
        box-shadow: none;
    }

    .mob-nav-btn svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
}

/* ── Panneaux Mobiles (membres, channels) ── */
#mobile-members-panel,
#mobile-channels-panel,
#mobile-forum-notif-panel {
    position: fixed;
    inset: 0;
    bottom: 47px;
    z-index: 400;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mob-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mob-panel-title {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text-heading);
    flex: 1;
}

.mob-panel-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1em;
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ── Drawer Serveurs Mobile ── */
#servers-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

#servers-drawer.open {
    display: flex;
}

#servers-drawer-panel {
    width: min(280px, 80vw);
    height: 100%;
    background: var(--bg-darker);
    border-right: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 62px;
    /* espace pour la nav */
}

#servers-drawer.open #servers-drawer-panel {
    transform: translateX(0);
}

.mob-server-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
}

.mob-server-item:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.mob-server-item.selected {
    background: var(--accent-glass);
    color: var(--accent);
}

.mob-server-item .mob-server-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Bulles d'action Créer / Rejoindre / Découvrir — empilées, une par ligne */
.mob-server-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s;
}

.mob-server-action-btn:hover {
    background: var(--bg-hover);
}

.mob-server-action-btn .mob-server-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    flex-shrink: 0;
}

.mob-server-action-btn.mob-server-action-primary {
    background: var(--accent-glass);
    color: var(--accent);
    border-color: var(--accent-glow);
}

.mob-server-action-btn.mob-server-action-primary .mob-server-action-icon {
    background: transparent;
    border-color: var(--accent-glow);
    color: var(--accent);
}


@media (max-width: 480px) {
    #profiles-list-container {
        gap: 15px !important;
    }

    #profiles-screen h1 {
        font-size: 1.8em !important;
        margin-bottom: 20px !important;
    }

    .nexus-icon {
        width: 40px;
        height: 40px;
    }

    .login-brand-name {
        font-size: 1.2rem;
    }
}

body.pro-theme {
    /* Mode Pro / Enterprise : encore plus neutre */
    --bg-darker: #d8d4ce;
    --bg-dark: #e4e0da;
    --bg-base: #eeebe6;
    --bg-hover: #dedad4;
    --bg-elevated: #f5f3f0;
    --text-heading: #1e2720;
    --text-main: #354033;
    --text-muted: #637060;
    --text-subtle: #9aaa97;
    --border: rgba(45, 60, 45, 0.12);
    --border-strong: rgba(45, 60, 45, 0.20);
    /* On garde l'accent jade */
}

body.pro-theme .sidebar-section-header {
    color: var(--text-heading);
    font-weight: 700;
}


/* ─────────────────────────────────────────
   POST CARDS — Style Reddit/Twitter
───────────────────────────────────────── */
.post-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    transition: background 0.15s;
    cursor: default;
}

.post-card:hover {
    background: var(--bg-hover);
}

/* ── Feed (hub) uniquement : carte premium — surface/bordure/radius/gap 24px ── */
#hub-view .post-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 24px;
}
#hub-view .post-card:hover {
    background: var(--bg-surface);
}
@media (max-width: 768px) {
    #hub-view .post-card {
        border-radius: 12px !important;
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        margin-bottom: 24px !important;
    }
}

/* Vote bar gauche (style Reddit) */
.post-vote-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px 10px 10px;
    background: var(--bg-hover);
    flex-shrink: 0;
    min-width: 40px;
}

.post-vote-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-subtle);
    font-size: 1.1em;
    margin: 0;
    width: auto;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-vote-btn:hover {
    background: var(--accent-glass);
    color: var(--accent);
    transform: none;
    filter: none;
    box-shadow: none;
}

.post-vote-btn.up.active {
    color: var(--accent);
}

.post-vote-btn.down.active {
    color: var(--accent2);
}

.post-vote-count {
    font-size: 0.78em;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 0;
}

/* Corps du post */
.post-body {
    flex: 1;
    padding: 12px 16px 8px;
    min-width: 0;
}

#hub-view .post-body {
    padding: 16px 16px 12px;
}

/* En-tête auteur */
.post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.post-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
}

.post-author-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.post-author-name {
    font-weight: 700;
    font-size: 0.92em;
    color: var(--text-heading);
    cursor: pointer;
    transition: color 0.15s;
}

.post-author-name:hover {
    color: var(--accent);
}

.post-author-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: var(--text-muted);
}

.post-visibility-badge {
    background: var(--bg-hover);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72em;
    color: var(--text-muted);
}

/* ── Zone badges en haut du post ── */
.post-top-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    position: relative;
}

/* ── Badge serveur ── */
.post-server-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 5px;
    border-radius: 99px;
    font-size: 0.73em;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-glass);
    border: 1px solid var(--accent-glow);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    letter-spacing: 0.02em;
    user-select: none;
    white-space: nowrap;
}

.post-server-badge:hover {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.post-server-badge.multi {
    gap: 4px;
}

/* ── Dropdown liste serveurs ── */
.post-server-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: var(--bg-darker);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    min-width: 200px;
    overflow: hidden;
    animation: fadeIn 0.15s ease;
}

.post-server-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    font-size: 0.88em;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    gap: 12px;
}

.post-server-dd-item:hover {
    background: var(--accent-glass);
    color: var(--accent);
}

.post-server-dd-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

/* Contenu texte */
.post-content-text {
    color: var(--text-main);
    font-size: 0.97em;
    line-height: 1.6;
    margin-bottom: 12px;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Médias du post */
.post-media-grid {
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    max-height: 500px;
    background: var(--bg-darker);
}

.post-media-grid img,
.post-media-grid video {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}

.post-media-grid img:hover,
.post-media-grid video:hover {
    opacity: 0.95;
}

/* Barre d'actions du post — maintenant sous les médias */
.post-actions-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 8px;
    border-top: 1px solid var(--border);
}

.post-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.83em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0;
    width: auto;
}

.post-action-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.post-action-btn:hover {
    background: var(--accent-glass);
    color: var(--accent);
    transform: none;
    filter: none;
    box-shadow: none;
}

.post-action-btn.liked {
    color: var(--accent);
}

.post-action-btn.liked:hover {
    background: var(--accent-glass);
}

.post-action-btn:hover svg {
    transform: scale(1.1);
}

/* ── Feed (hub) : icônes d'action compactes, gris par défaut, vert/rouge activées ── */
#hub-view .post-action-btn {
    color: var(--text-secondary);
}
#hub-view .post-action-btn svg {
    width: 20px;
    height: 20px;
}
#hub-view .post-action-btn:hover {
    background: var(--bg-elevated);
    color: var(--accent);
}
#hub-view .post-action-btn.liked {
    color: var(--like-active);
}
#hub-view .post-action-btn.liked:hover {
    background: var(--bg-elevated);
    color: var(--like-active);
}

/* ── Amis qui ont liké (feed) ── */
.post-friend-likes {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.post-friend-likes .pfl-name { color: var(--text-heading); font-weight: 600; }
.post-friend-likes .pfl-others { color: var(--text-muted); }

#hub-view .post-friend-likes {
    color: var(--text-secondary);
    font-size: 14px;
}
#hub-view .post-friend-likes .pfl-name { color: var(--text-primary); }
#hub-view .post-friend-likes .pfl-others { color: var(--text-secondary); }

/* ── Section commentaires ── */
.post-comments-section {
    display: none;
    border-top: 1px solid var(--border);
    animation: fadeIn 0.2s ease;
    padding: 12px 16px;
    background: var(--bg-dark);
}

.post-comments-section.open {
    display: block;
}

/* Séparateur entre input et fil */
.comment-thread-scroll {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

/* Fil de commentaire */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
}

/* ── Commentaire (layout 2 colonnes : avatar | corps) ── */
.comment-item {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    align-items: flex-start;
}

.comment-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

/* Ligne verticale de thread qui relie l'avatar aux réponses */
.comment-thread-line {
    width: 2px;
    flex: 1;
    min-height: 12px;
    background: var(--border-strong);
    border-radius: 1px;
    margin-top: 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.comment-item:hover .comment-thread-line {
    opacity: 0.9;
    background: var(--accent);
}

.comment-body-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Réponses imbriquées */
.comment-replies {
    margin-top: 4px;
    margin-left: 0;
    border-left: none;
    padding-left: 0;
}

.comment-replies .comment-item {
    padding-top: 4px;
    padding-bottom: 2px;
}

.comment-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.comment-avatar:hover {
    opacity: 0.85;
}

.comment-content-wrap {
    flex: 1;
    min-width: 0;
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 7px 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-author {
    font-weight: 700;
    font-size: 0.83em;
    color: var(--text-heading);
    cursor: pointer;
    transition: color 0.15s;
}

.comment-author:hover {
    color: var(--accent);
}

.comment-time {
    font-size: 0.72em;
    color: var(--text-muted);
}

.comment-text {
    font-size: 0.88em;
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
}

.no-comments-msg {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85em;
    font-style: italic;
    padding: 10px 0;
}

/* Champ saisie commentaire */
.comment-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    padding: 4px 4px 4px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-top: 8px;
}

.comment-input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.comment-input-wrapper input,
.comment-input-wrapper textarea {
    flex: 1;
    background: transparent;
    border: none;
    padding: 6px 0;
    color: var(--text-main);
    outline: none;
    font-size: 0.9em;
    margin: 0;
    font-family: inherit;
    resize: none;
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.comment-input-wrapper button {
    width: auto;
    margin: 0;
    padding: 7px 18px;
    border-radius: 20px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 0.85em;
    border: none;
    cursor: pointer;
    transition: filter 0.2s;
}

.comment-input-wrapper button:hover {
    filter: brightness(1.12);
    transform: none;
    box-shadow: none;
}

/* Petit avatar dans la barre d'écriture */
.comment-input-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--accent);
}

/* Actions likes/réponse sous chaque commentaire */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.comment-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    margin: 0;
    width: auto;
}

.comment-like-btn:hover {
    background: var(--accent-glass);
    color: var(--accent);
    transform: none;
    box-shadow: none;
    filter: none;
}

.comment-like-btn.liked {
    color: var(--accent);
}

.comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    margin: 0;
    width: auto;
}

.comment-reply-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-heading);
    transform: none;
    box-shadow: none;
    filter: none;
}

.comment-reply-badge {
    font-size: 0.72em;
    color: var(--accent);
    margin-right: 2px;
    opacity: 0.8;
}

/* Scroll sur le fil de commentaires */
.comment-thread-scroll {
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.comment-thread-scroll::-webkit-scrollbar {
    width: 4px;
}

.comment-thread-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.comment-thread-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* Bouton toggle des réponses (style YouTube) */
.toggle-replies-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    margin-top: 4px;
    transition: opacity 0.15s;
}

.toggle-replies-btn:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.toggle-arrow {
    font-size: 0.75em;
    transition: transform 0.15s;
}

/* ── Input inline de réponse (apparait directement sous le commentaire) ── */
.inline-reply-container {
    overflow: hidden;
}

.inline-reply-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    animation: commentSlideIn 0.22s ease;
}

.inline-reply-avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: var(--accent);
    background-size: cover;
    flex-shrink: 0;
}

.inline-reply-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inline-reply-label {
    font-size: 0.75em;
    color: var(--accent);
    font-weight: 600;
}

.inline-reply-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 4px 6px 4px 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-reply-input-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.inline-reply-input-row input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-main);
    font-size: 0.86em;
    padding: 3px 0;
    margin: 0;
}

.inline-reply-send {
    padding: 4px 12px !important;
    border-radius: 16px !important;
    background: var(--accent) !important;
    color: white !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer;
    white-space: nowrap;
    width: auto !important;
    margin: 0 !important;
}

.inline-reply-send:hover {
    filter: brightness(1.12);
    transform: none !important;
    box-shadow: none !important;
}

.inline-reply-cancel {
    padding: 4px 8px !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 0.82em !important;
    border: none !important;
    cursor: pointer;
    width: auto !important;
    margin: 0 !important;
    transition: color 0.15s;
}

.inline-reply-cancel:hover {
    color: var(--text-heading) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Animation entrée nouveau commentaire */
@keyframes commentSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-new-anim {
    animation: commentSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mini composer Hub ("Quoi de neuf") */
#hub-mini-composer {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.98em;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 10px;
    gap: 12px;
}

#hub-mini-composer:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* Layout interne post (vote barre + corps) */
.post-card-inner {
    display: flex;
    align-items: stretch;
}

/* ─────────────────────────────────────────
   REMASTER MOBILE: RESPONSIVE INSTAGRAM-LIKE
───────────────────────────────────────── */
@media (max-width: 768px) {

    /* Posts edge-to-edge sans bordures arrondies ou marges latérales */
    .post-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 8px !important;
    }

    .post-card-inner {
        flex-direction: column !important;
        padding: 12px 10px 0 10px !important;
    }

    /* Média en pleine largeur d'écran */
    .post-media-grid {
        margin: 10px -10px !important;
        /* annule le padding du post-card-inner */
        border-radius: 0 !important;
        width: calc(100% + 20px) !important;
        max-width: none !important;
    }

    .post-media-grid img,
    .post-media-grid video {
        border-radius: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 75vh !important;
        object-fit: contain !important;
        background: black;
    }

    /* Hitbox plus larges pour le mobile */
    .post-action-btn,
    .post-vote-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px !important;
        font-size: 1rem !important;
    }

    .post-action-btn svg,
    .post-vote-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Retirer padding des zones de défilement pour laisser le post toucher les bords */
    #hub-scroll-area {
        padding: 0 !important;
        background: var(--bg-darker) !important;
    }

    #hub-scroll-area>div {
        max-width: 100% !important;
        padding-bottom: 58px !important;
        /* Laisse de l'espace pour la tab bar */
    }

    /* On cache le mini-composer sur mobile, ou on le stylise */
    #hub-mini-composer {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin: 0 !important;
    }

    /* Barre de navigation améliorée */
    #mobile-nav {
        height: 45px !important;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--bg-dark) !important;
        border-top: 1px solid var(--border) !important;
        align-items: center !important;
    }

    .mob-nav-btn {
        padding: 0 !important;
    }

    .mob-nav-btn svg {
        width: 21px !important;
        height: 21px !important;
    }

    .mob-nav-btn.active svg {
        stroke-width: 2.5 !important;
    }
}

/* ─────────────────────────────────────────
   MOBILE NAV — 6 ONGLETS INSTAGRAM-STYLE
───────────────────────────────────────── */
@media (max-width: 768px) {
    #mobile-nav {
        height: 47px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: var(--bg-primary) !important;
        border-top: 1px solid var(--border) !important;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3) !important;
        align-items: center !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Onglets normaux */
    .mob-nav-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 4px !important;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: color 0.15s, background 0.15s;
        box-shadow: none;
        margin: 0;
        width: auto;
        min-height: 33px;
        position: relative;
    }

    .mob-nav-btn:hover,
    .mob-nav-btn.active {
        color: var(--accent);
        background: transparent;
        transform: none;
        filter: none;
        box-shadow: none;
    }

    /* Icône outline → filled quand active */
    .mob-nav-btn .mob-icon-outline {
        display: block;
    }

    .mob-nav-btn .mob-icon-filled {
        display: none !important;
    }

    /* Icône active : on garde l'outline visible (coloré en accent), pas de swap
       vers un 'filled' qui n'existe plus → sinon l'icône disparaît. */
    .mob-nav-btn.active .mob-icon-outline {
        display: block !important;
    }

    /* Bouton Créer central — box carrée arrondie accent */
    .mob-nav-create {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 33px !important;
        background: var(--accent) !important;
        border-radius: 10px !important;
        color: var(--on-accent) !important;
        margin: 0 4px !important;
        box-shadow: 0 2px 10px var(--accent-glow) !important;
        transition: transform 0.15s, box-shadow 0.15s, filter 0.15s !important;
    }

    .mob-nav-create:hover,
    .mob-nav-create:active {
        filter: brightness(1.1) !important;
        transform: scale(0.95) !important;
        background: var(--accent) !important;
        color: var(--on-accent) !important;
        box-shadow: 0 4px 18px var(--accent-glow) !important;
    }

    /* Avatar profil dans le nav */
    #mob-profile-avatar {
        transition: border-color 0.2s;
    }

    #mob-btn-profile.active #mob-profile-avatar {
        border-color: var(--accent) !important;
    }

    /* Padding app pour 47px de nav */
    #app-layout {
        padding-bottom: 47px !important;
    }

    /* Les vues principales doivent s'arrêter à 47px du bas (nav fixe),
       sinon height:100% = 100vh et l'input-bar se retrouve sous la nav */
    #nexus-view,
    #home-view {
        height: calc(100dvh - 47px - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 47px - env(safe-area-inset-bottom)) !important;
    }
}

/* ─────────────────────────────────────────
   MOBILE FEED — INSTAGRAM STYLE
   Masquer la barre de vote Reddit sur mobile
───────────────────────────────────────── */
@media (max-width: 768px) {

    /* Cache la barre de vote Reddit sur mobile */
    .post-vote-bar {
        display: none !important;
    }

    /* Le corps du post occupe toute la largeur */
    .post-card-inner {
        display: block !important;
        padding: 0 !important;
    }

    .post-body {
        padding: 12px 14px 8px !important;
    }

    #hub-view .post-body {
        padding: 16px 16px 12px !important;
    }

    /* Header auteur plus grand sur mobile */
    .post-author-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .post-author-name {
        font-size: 0.95em !important;
    }

    /* Actions Instagram : like, comment, share bien espacés */
    .post-actions-bar {
        padding: 8px 0 12px !important;
        gap: 0 !important;
    }

    .post-action-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 8px !important;
        min-height: 48px !important;
        font-size: 0.9em !important;
        border-radius: 0 !important;
    }

    /* Bouton partage bien visible */
    .post-share-btn {
        color: var(--text-muted) !important;
    }

    .post-share-btn:hover,
    .post-share-btn:active {
        color: var(--accent) !important;
        background: transparent !important;
    }

    /* Médias en pleine largeur */
    .post-media-grid img,
    .post-media-grid video {
        max-height: 70vh !important;
        object-fit: contain !important;
    }

    /* Mini composer collé en haut du feed */
    #hub-mini-composer {
        position: sticky;
        top: 0;
        z-index: 10;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Post card — ombre légère entre les posts */
    .post-card {
        margin-bottom: 6px !important;
        box-shadow: none !important;
    }

    /* Commentaires — meilleure lisibilité sur mobile */
    .post-comments-section {
        padding: 10px 14px !important;
    }

    .comment-input-wrapper input,
    .comment-input-wrapper textarea {
        font-size: 16px !important;
    }
}

/* ─────────────────────────────────────────
   SHARE SHEET — SLIDE UP (Instagram-style)
───────────────────────────────────────── */
#share-sheet {
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

#share-sheet.open {
    transform: translateY(0);
}

/* Item dans la share sheet */
.share-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.share-sheet-item:hover,
.share-sheet-item:active {
    background: var(--bg-hover);
}

.share-sheet-item .ss-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.share-sheet-item .ss-group-avatar {
    border-radius: 12px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 1.2em;
}

.share-sheet-item .ss-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-sheet-item .ss-meta {
    font-size: 0.77em;
    color: var(--text-muted);
}

/* Checkmark de sélection */
.share-sheet-item .ss-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    color: white;
    font-size: 0.8em;
}

.share-sheet-item.selected .ss-check {
    background: var(--accent);
    border-color: var(--accent);
}

.share-sheet-item .ss-check::after {
    content: '';
    display: none;
}

.share-sheet-item.selected .ss-check::after {
    content: '✓';
    display: block;
    font-weight: 700;
    font-size: 0.85em;
}

/* Section label dans la share sheet */
.share-sheet-section {
    padding: 6px 12px 4px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Sélecteur de salon — sous-liste dans le share sheet */
.ss-channel-list {
    padding: 4px 0 4px 48px;
}
.ss-channel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--text-heading);
    transition: background 0.15s;
}
.ss-channel-item:hover { background: var(--bg-hover); }
.ss-channel-item.selected { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ss-channel-item .ss-check { margin-left: auto; opacity: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.ss-channel-item.selected .ss-check { opacity: 1; }

/* ─────────────────────────────────────────
   SHARED POST — APERÇU DANS LE CHAT
───────────────────────────────────────── */
.shared-post-preview {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: 4px 10px 10px 4px;
    margin-top: 6px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    max-width: 360px;
    overflow: hidden;
}

.shared-post-preview:hover {
    background: var(--bg-hover);
    border-left-color: var(--accent-light, var(--accent));
}

.shared-post-preview-thumb {
    width: 100%;
    background: #000;
    overflow: hidden;
    color: var(--text-muted);
}

.shared-post-preview-thumb img,
.shared-post-preview-thumb video {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}

.shared-post-preview-thumb svg {
    opacity: 0.25;
}

.shared-post-preview-thumb.shared-post-preview-thumb-placeholder {
    max-height: none;
    padding: 14px 0;
}

.shared-post-preview-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 10px;
}

.shared-post-preview-label {
    font-size: 0.68em;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.shared-post-preview-author {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--text-heading);
}

.shared-post-preview-text {
    font-size: 0.8em;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* ─────────────────────────────────────────
   FICHIER PARTAGÉ (chat) — carte compacte
   Remplace l'ancien lien plein-vert sans info.
───────────────────────────────────────── */
.msg-file-card-wrap { margin-top: 6px; }
.msg-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 280px;
    max-height: 72px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bubble-received-bg, rgba(255,255,255,0.08));
    cursor: default;
}
.msg-file-card.msg-file-card-own {
    background: var(--bubble-sent-bg, var(--accent));
}
.msg-file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bubble-received-text, #fff);
}
.msg-file-card.msg-file-card-own .msg-file-icon {
    color: var(--bubble-sent-text, #fff);
}
.msg-file-icon svg { width: 24px; height: 24px; }
.msg-file-info { flex: 1; min-width: 0; }
.msg-file-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bubble-received-text, var(--text-main));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-file-card.msg-file-card-own .msg-file-name {
    color: var(--bubble-sent-text, #fff);
}
.msg-file-meta {
    font-size: 12px;
    opacity: 0.7;
    color: var(--bubble-received-text, var(--text-muted));
    margin-top: 2px;
    white-space: nowrap;
}
.msg-file-card.msg-file-card-own .msg-file-meta {
    color: var(--bubble-sent-text, #fff);
}
.msg-file-download {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bubble-received-text, #fff);
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: background 0.15s;
}
.msg-file-card.msg-file-card-own .msg-file-download {
    color: var(--bubble-sent-text, #fff);
}
.msg-file-download:hover { background: rgba(255,255,255,0.28); }

/* ─────────────────────────────────────────
   RÉPONSE À UNE STORY / PUBLICATION PARTAGÉE
   Bloc contextuel (citation) — atténué + bordure verte pour le distinguer
   du message principal.
───────────────────────────────────────── */
.msg-story-reply-block {
    border-left: 2px solid var(--accent);
    padding-left: 8px;
    opacity: 0.7;
}

/* ─────────────────────────────────────────
   AMÉLIORATIONS GÉNÉRALES MOBILE
───────────────────────────────────────── */
@media (max-width: 768px) {

    /* Hub header avec tabs scrollable horizontalement */
    #hub-view header {
        gap: 8px !important;
        padding: 0 14px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        min-height: 52px !important;
    }

    #hub-view header::-webkit-scrollbar {
        display: none !important;
    }

    /* Spacer caché sur mobile → Notifications visible dans le scroll */
    #friends-tab-spacer {
        display: none !important;
    }

    /* Label "Amis" en titre séparé sur mobile, pas dans la barre de tabs */
    #home-friends-hub header > span:first-child {
        display: none !important;
    }

    /* Notif : plus de margin-right, même style que les autres tabs */
    #tab-notifications {
        margin-right: 4px !important;
    }

    /* Friends hub — fondu à droite pour indiquer le scroll */
    #home-friends-hub {
        position: relative;
    }
    #home-friends-hub::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 48px;
        width: 32px;
        background: linear-gradient(to right, transparent, var(--bg-darker));
        pointer-events: none;
        z-index: 2;
    }

    /* Friends hub header — tabs scrollable, ne déborde pas */
    #home-friends-hub header {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 6px 10px !important;
        scrollbar-width: none !important;
        min-height: 44px !important;
        align-items: center !important;
    }

    #home-friends-hub header::-webkit-scrollbar {
        display: none !important;
    }

    /* Tabs sans retour à la ligne */
    #home-friends-hub header .tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.82em !important;
        padding: 5px 10px !important;
    }

    #home-friends-hub header > span {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Friend cards — layout 2 lignes sur mobile */
    .friend-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    /* Top row : avatar + infos */
    .friend-card > div:first-child {
        width: 100% !important;
        flex: unset !important;
    }

    /* Bottom row : boutons pleine largeur */
    .friend-card > div:last-child {
        display: flex !important;
        flex-shrink: 0 !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .friend-card > div:last-child button {
        flex: 1 !important;
        padding: 8px 10px !important;
        font-size: 0.85em !important;
        white-space: nowrap !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    #friends-content {
        padding: 0 !important;
    }

    /* Profile — layout responsive */
    .profile-header-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .profile-actions-col {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    #my-profile-actions,
    #other-user-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #my-profile-actions button,
    #other-user-actions button {
        padding: 6px 12px !important;
        font-size: 0.85em !important;
    }

    /* Bouton channels nexus — visible uniquement sur mobile */
    #mob-channels-btn,
    #mob-channels-btn-forum {
        display: flex !important;
    }

    /* Profile view : plein écran sur mobile, fixed pour passer au-dessus de tout */
    #profile-view {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
        z-index: 350 !important;
    }

    /* Le profil est un onglet plein écran sur mobile (pas une superposition) :
       la croix de fermeture n'a nulle part où "revenir" et laissait un écran vide. */
    .close-profile-btn {
        display: none !important;
    }

    /* Modale plus grande sur petit écran */
    .card {
        width: 95% !important;
        max-width: 420px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }

    /* Overlay dark pour les drawers */
    #servers-drawer-panel {
        padding-bottom: 72px !important;
    }

    /* Barre de recherche dans la sheet */
    #share-sheet-search {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   NEXUS POWER — v3.0  (Slate × Jade)
   Three-Column Layout · Glassmorphism · Role Colors
   Context Menu · Voice Avatars · Quick Switcher
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   THREE-COLUMN LAYOUT OPTIMISÉ
   Col-1: 68px  |  Col-2: 240px  |  Col-3: flex-1
───────────────────────────────────────── */
#nexus-bar {
    width: 68px;
    min-width: 68px;
    flex-shrink: 0;
}

.sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
}

/* Indicateur de sélection actif — barre verte à gauche de l'icône Nexus */
.nexus-icon.active-nexus {
    border-radius: 16px;
    position: relative;
}

.nexus-icon.active-nexus::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 36px;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
    transition: height 0.2s ease;
}

/* Badge de notification "bulle" sur les icônes Nexus */
.nexus-icon-wrap {
    position: relative;
    display: inline-flex;
}

.nexus-notif-bubble {
    position: absolute;
    bottom: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    background: var(--dnd);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 99px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-darker);
    pointer-events: none;
    line-height: 1;
}

/* ─────────────────────────────────────────
   GLASSMORPHISM — Modales & Menus
   backdrop-filter: blur(12px) sur tout overlay
───────────────────────────────────────── */
.glass-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--glass-border) !important;
}

/* Appliquer le glass sur toutes les cartes modales */
#modal-overlay .card,
#modal-overlay .card-modal-wide {
    margin: auto; /* centre verticalement quand il y a de l'espace, sinon scroll */
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--glass-border);
}

/* Quick-profile menu en verre */
#quick-profile-menu.quick-menu {
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}

/* ─────────────────────────────────────────
   CHANNEL TREE — Arborescence avec flèches de repli
───────────────────────────────────────── */

/* Catégorie repliable */
.category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.category-header:hover {
    color: var(--text-heading);
}

/* Flèche de repli */
.category-arrow {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
    flex-shrink: 0;
    color: var(--text-subtle);
}

.category-arrow svg {
    width: 10px;
    height: 10px;
}

.category-collapsed .category-arrow {
    transform: rotate(-90deg);
}

/* Masquer les channels d'une catégorie repliée */
.category-collapsed+.category-channels {
    display: none;
}

/* Ajout bouton "+" à droite du header de catégorie */
.category-header-add {
    margin-left: auto;
    opacity: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: opacity 0.15s, background 0.15s;
    color: var(--text-muted);
}

.category-header:hover .category-header-add {
    opacity: 1;
}

.category-header-add:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

/* ─────────────────────────────────────────
   VOICE CHANNEL — Mini-avatars des présents
───────────────────────────────────────── */
.voice-channel-users {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px 8px 4px 28px;
}

.voice-channel-mini-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-dark);
    object-fit: cover;
    background: var(--bg-elevated);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    transition: transform 0.15s, border-color 0.15s;
}

.voice-channel-mini-avatar:hover {
    transform: scale(1.25);
    border-color: var(--accent);
    z-index: 1;
}

.voice-channel-mini-avatar.speaking {
    border-color: var(--online);
    box-shadow: 0 0 0 2px rgba(76, 200, 130, 0.4);
}

/* Compteur "+N" si trop d'avatars */
.voice-channel-overflow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   ROLE COLORS — CSS Variable par rôle
   Usage HTML : <span class="role-tag" style="--role-color: #5aa9ff">Mod</span>
───────────────────────────────────────── */
.role-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--role-color, var(--text-muted));
    background: color-mix(in srgb, var(--role-color, var(--accent)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-color, var(--accent)) 28%, transparent);
    white-space: nowrap;
}

.role-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--role-color, var(--accent));
    flex-shrink: 0;
}

/* Pseudo coloré par le rôle le plus haut dans la liste membres */
.member-name-colored {
    color: var(--role-color, var(--text-main));
}

/* Aura autour de l'avatar selon la couleur du rôle */
.avatar-role-aura {
    box-shadow: 0 0 0 2px var(--role-color, transparent);
}

/* ─────────────────────────────────────────
   CONTEXT MENU — Menu clic droit personnalisé
───────────────────────────────────────── */
#nx-context-menu {
    position: fixed;
    z-index: 9000;
    min-width: 192px;
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    padding: 5px;
    animation: ctxMenuIn 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    pointer-events: all;
}

@keyframes ctxMenuIn {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    user-select: none;
}

.ctx-item:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
}

.ctx-item.ctx-danger {
    color: var(--dnd);
}

.ctx-item.ctx-danger:hover {
    background: rgba(224, 94, 82, 0.14);
    color: var(--dnd);
}

.ctx-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.75;
}

.ctx-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.ctx-label {
    padding: 6px 10px 2px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

/* Rangée de réactions rapides en en-tête du menu clic-droit d'un message */
.ctx-react-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
}

.ctx-react-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.15rem;
    line-height: 1;
    padding: 6px 0;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}

.ctx-react-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.15);
}

.ctx-react-btn.ctx-react-more {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-subtle);
}

/* ─────────────────────────────────────────
   DRAG & DROP — Channels / Categories
───────────────────────────────────────── */
.channel.dragging,
.category-header.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.channel[draggable="true"],
.category-header[draggable="true"] {
    cursor: grab;
}

.channel.drag-over {
    background: var(--accent-glass);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-sm);
}

.category-drop-zone.drag-over {
    background: var(--accent-glass);
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    min-height: 28px;
}

/* ─────────────────────────────────────────
   QUICK SWITCHER — Ctrl+K
───────────────────────────────────────── */
#quick-switcher-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    animation: fadeIn 0.12s ease both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#quick-switcher-panel {
    width: 540px;
    max-width: calc(100vw - 32px);
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 32px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: qs-panel-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes qs-panel-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#quick-switcher-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

#quick-switcher-input-wrap svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}

#quick-switcher-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-heading);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    padding: 0;
    margin: 0;
}

#quick-switcher-input::placeholder {
    color: var(--text-muted);
}

#quick-switcher-results {
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}

.qs-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.1s;
}

.qs-result-item:hover,
.qs-result-item.qs-selected {
    background: var(--bg-hover);
}

.qs-result-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2em;
    overflow: hidden;
}

.qs-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.qs-result-name {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-result-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.qs-section-label {
    padding: 8px 12px 3px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

#quick-switcher-footer {
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.12);
}

.qs-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.qs-kbd {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────
   NEXUS DASHBOARD VIEW — Vue d'ensemble
───────────────────────────────────────── */
#nexus-dashboard {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    background: var(--bg-base);
    padding: 32px;
    gap: 24px;
}

#nexus-dashboard.visible {
    display: flex;
}

.nx-dash-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.nx-dash-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--accent-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    flex-shrink: 0;
    overflow: hidden;
}

.nx-dash-hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.nx-dash-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.02em;
}

.nx-dash-hero-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.nx-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .nx-dash-grid {
        grid-template-columns: 1fr;
    }
}

.nx-dash-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
}

.nx-dash-card h3 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Activité récente */
.nx-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.nx-activity-item:last-child {
    border-bottom: none;
}

.nx-activity-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-dark);
    flex-shrink: 0;
    overflow: hidden;
}

.nx-activity-text {
    flex: 1;
    color: var(--text-main);
    line-height: 1.4;
}

.nx-activity-text strong {
    color: var(--text-heading);
}

.nx-activity-time {
    font-size: 0.75rem;
    color: var(--text-subtle);
    white-space: nowrap;
}

/* Responsive: masquer la sidebar des channels sur mobile en vue dashboard */
@media (max-width: 768px) {
    #nexus-dashboard {
        padding: 16px;
    }

    .nx-dash-hero {
        flex-direction: column;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════
   @MENTIONS — highlight dans les messages
   ══════════════════════════════════════════════════════════ */
.mention {
    display: inline;
    padding: 0 3px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

/* @everyone / @here → jaune/orange */
.mention-everyone {
    background: rgba(250, 168, 26, 0.2);
    color: #faa81a;
}

.mention-everyone:hover {
    background: rgba(250, 168, 26, 0.35);
    color: #ffc84d;
}

/* @username générique → bleu accent */
.mention-user {
    background: rgba(90, 169, 255, 0.15);
    color: var(--accent, #5aa9ff);
}

.mention-user:hover {
    background: rgba(90, 169, 255, 0.28);
}

/* @soi-même → surbrillance jaune pâle */
.mention-self {
    background: rgba(250, 168, 26, 0.25);
    color: #faa81a;
    box-shadow: inset 0 0 0 1px rgba(250, 168, 26, 0.4);
}

.mention-self:hover {
    background: rgba(250, 168, 26, 0.4);
}

/* ══════════════════════════════════════════════════════════
   AUTOCOMPLETE @MENTION
   ══════════════════════════════════════════════════════════ */
.mention-autocomplete-popup {
    position: fixed;
    background: var(--bg-card, #1e2030);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 9000;
    max-height: 280px;
    overflow-y: auto;
}

.mention-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.mention-ac-item:hover,
.mention-ac-active {
    background: var(--bg-hover, rgba(255, 255, 255, 0.07));
}

.mention-ac-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--role-color, #5aa9ff), #2f6fdb);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--role-color, transparent);
}

.mention-ac-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(250, 168, 26, 0.2);
    color: #faa81a;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mention-ac-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mention-ac-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

/* ══════════════════════════════════════════════════════════
   MODALE INVITATION DISCORD-STYLE
   ══════════════════════════════════════════════════════════ */
.invite-modal-card {
    background: var(--bg-card, #1e2030);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    gap: 16px;
}

.invite-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.invite-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-heading);
}

.invite-modal-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.invite-link-box {
    display: flex;
    align-items: center;
    background: var(--bg-input, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    overflow: hidden;
}

.invite-link-text {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--text-main);
    word-break: break-all;
    font-family: monospace;
}

.invite-copy-btn {
    padding: 10px 16px;
    background: var(--accent, #5aa9ff);
    color: white;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    border-radius: 0 6px 6px 0;
    margin: 0;
    box-shadow: none;
    transform: none;
}

.invite-copy-btn:hover {
    background: #4090e0;
    transform: none;
    box-shadow: none;
    filter: none;
}

.invite-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.invite-code-raw {
    background: var(--bg-input, rgba(0, 0, 0, 0.25));
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--accent);
    font-size: 0.82rem;
}

.invite-modal-footer {
    display: flex;
    justify-content: flex-end;
}

.modal-close-x {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    margin: 0;
    box-shadow: none;
    transform: none;
}

.modal-close-x:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    transform: none;
    box-shadow: none;
    filter: none;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0;
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    transform: none;
    box-shadow: none;
    filter: none;
}

/* @role mention — couleur dynamique injectée inline */
.mention-role {
    padding: 0 3px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    transition: background 0.12s;
}

.mention-role:hover {
    filter: brightness(1.2);
}

/* ══════════════════════════════════════════════════════════════
   DRAG & DROP — visuels
   ══════════════════════════════════════════════════════════════ */

/* Element en cours de déplacement */
.channel.dragging,
.category-header.dragging {
    opacity: 0.35;
    background: var(--bg-hover) !important;
    border: 1px dashed var(--accent) !important;
    border-radius: 6px;
}

/* Zone de dépôt survolée */
.category-channels.drag-over {
    background: rgba(90, 169, 255, 0.06);
    border-radius: 6px;
    outline: 1px dashed rgba(90, 169, 255, 0.3);
    outline-offset: 2px;
}

/* Ligne d'insertion (positionnée en fixed via JS) */
.drag-insert-line {
    position: fixed;
    height: 2px;
    background: var(--accent, #5aa9ff);
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 6px var(--accent, #5aa9ff);
    transition: top 0.05s;
}

.drag-insert-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #5aa9ff);
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — boutons bas + création catégorie rapide
   ══════════════════════════════════════════════════════════════ */
.nx-sidebar-bottom-btns {
    padding: 4px 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

/* Champ rapide création catégorie */
.nx-cat-quick-input {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-input, rgba(0, 0, 0, 0.25));
    border-radius: 6px;
    border: 1px solid var(--accent);
}

.nx-cat-quick-inp {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 0.88rem;
    padding: 2px 4px;
}

.nx-cat-quick-ok,
.nx-cat-quick-cancel {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 5px;
    border-radius: 4px;
    margin: 0;
    box-shadow: none;
    transform: none;
    line-height: 1;
}

.nx-cat-quick-ok {
    color: var(--online, #29d690);
}

.nx-cat-quick-ok:hover {
    background: rgba(41, 214, 144, 0.15);
    transform: none;
    box-shadow: none;
    filter: none;
}

.nx-cat-quick-cancel {
    color: var(--dnd, #e05e52);
}

.nx-cat-quick-cancel:hover {
    background: rgba(224, 94, 82, 0.15);
    transform: none;
    box-shadow: none;
    filter: none;
}

/* ══════════════════════════════════════════════════════════════
   VOICE TEXT PANEL
   ══════════════════════════════════════════════════════════════ */
.voice-chat-area-layout {
    flex-direction: column;
}

.voice-main-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

#voice-grid {
    flex: 1;
    min-width: 0;
}

/* Panneau texte à droite de la grille vocale */
.voice-text-panel {
    width: 280px;
    min-width: 220px;
    max-width: 320px;
    background: var(--bg-darker, var(--bg-dark));
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    animation: slideInRight 0.18s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.voice-text-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.voice-text-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.voice-text-panel-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin: 0;
    box-shadow: none;
}

.voice-text-panel-close:hover {
    background: var(--bg-hover);
    color: var(--text-heading);
    transform: none;
    box-shadow: none;
    filter: none;
}

.voice-text-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Message dans le panneau vocal */
.voice-text-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.vtm-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-hover);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
}

.vtm-body {
    flex: 1;
    min-width: 0;
}

.vtm-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-heading);
    cursor: pointer;
    margin-right: 5px;
}

.vtm-name:hover {
    text-decoration: underline;
}

.vtm-time {
    font-size: 0.7rem;
    color: var(--text-subtle);
}

.vtm-content {
    font-size: 0.88rem;
    color: var(--text-main);
    margin-top: 1px;
    word-break: break-word;
    line-height: 1.4;
}

/* Barre de saisie du panel vocal */
.voice-text-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.voice-text-input {
    flex: 1;
    background: var(--bg-input, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.88rem;
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.15s;
}

.voice-text-input:focus {
    border-color: var(--accent);
}

.voice-text-send {
    background: var(--accent, #5aa9ff);
    border: none;
    border-radius: 6px;
    color: white;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    transition: background 0.15s;
}

.voice-text-send:hover {
    background: #4090e0;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Bouton chat vocal actif */
.v-btn.v-btn-active {
    background: rgba(90, 169, 255, 0.2);
    color: var(--accent, #5aa9ff);
}

/* Responsive : panneau vocal en bas sur mobile */
@media (max-width: 600px) {
    .voice-main-area {
        flex-direction: column;
    }

    .voice-text-panel {
        width: 100%;
        max-width: 100%;
        height: 200px;
        min-width: 0;
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

/* ── Message actions : edit / delete ─────────────────────────────────────── */
/* position:relative nécessaire pour le positionnement absolu de .msg-actions */
.chat-msg-row {
    position: relative;
}

.msg-act-btn {
    background: none;
    border: none;
    color: var(--text-muted, #72767d);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}

.msg-act-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--text-main, #dcddde);
}

.msg-act-edit:hover {
    color: #7289da;
}

.msg-act-del:hover {
    color: #f04747;
}

/* Zone d'édition inline */
.msg-edit-area {
    margin-top: 6px;
}

.msg-edit-input {
    width: 100%;
    background: var(--bg-base, #36393f);
    border: 1.5px solid #7289da;
    border-radius: 6px;
    color: var(--text-main, #dcddde);
    font-size: 0.95em;
    padding: 8px 10px;
    resize: none;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}

.msg-edit-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.msg-edit-save,
.msg-edit-cancel {
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.82em;
    cursor: pointer;
    transition: filter .12s;
}

.msg-edit-save {
    background: #7289da;
    color: #fff;
}

.msg-edit-cancel {
    background: rgba(255, 255, 255, .1);
    color: var(--text-main, #dcddde);
}

.msg-edit-save:hover,
.msg-edit-cancel:hover {
    filter: brightness(1.15);
}

/* Badge "(modifié)" */
.msg-edited-badge {
    font-size: 0.7em;
    color: var(--text-muted, #72767d);
    margin-left: 4px;
}

/* Bouton supprimer un post */
.post-delete-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted, #72767d);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s, color .12s, background .12s;
    display: flex;
    align-items: center;
}

.post-header:hover .post-delete-btn,
.post-card:hover .post-delete-btn {
    opacity: 1;
}

.post-delete-btn:hover {
    color: #f04747;
    background: rgba(240, 71, 71, .1);
}

/* Suggestions de hashtags dans la modale de création */
.post-tag-suggest {
    background: var(--accent-glass);
    border: 1px solid var(--accent-glow);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    width: auto;
    margin: 0;
    transition: background 0.15s, color 0.15s;
}
.post-tag-suggest:hover {
    background: var(--accent);
    color: #fff;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* ══════════════════════════════════════════════════════
   SHARE SHEET — Multi-sélection
   ══════════════════════════════════════════════════════ */
#share-sheet {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(100%);
}
#share-sheet.open {
    transform: translateY(0);
}

.share-sheet-section {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    padding: 10px 8px 4px;
}

.share-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.12s;
}
.share-sheet-item:hover {
    background: var(--bg-hover);
}
.share-sheet-item.selected {
    background: var(--accent-glass);
}

/* Avatar générique */
.ss-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-glass);
    color: var(--accent-light);
    font-weight: 700;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.06);
}
.ss-group-avatar {
    background: var(--bg-hover);
    font-size: 1.1em;
}
.ss-nexus-avatar {
    border-radius: 12px;
    background: var(--accent-glass);
}

.ss-name {
    font-size: 0.92em;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-meta {
    font-size: 0.75em;
    color: var(--text-muted);
}

/* Checkmark */
.ss-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.share-sheet-item.selected .ss-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.ss-channel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--text-heading);
    transition: background 0.15s;
}
.ss-channel-item:hover { background: var(--bg-hover); }
.ss-channel-item.selected { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ss-channel-item .ss-check { margin-left: auto; opacity: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.ss-channel-item.selected .ss-check { opacity: 1; }

/* ══════════════════════════════════════════════════════
   FEED — Hashtags cliquables
   ══════════════════════════════════════════════════════ */
.hashtag {
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 2px;
    transition: background 0.15s, color 0.15s;
}
.hashtag:hover {
    background: var(--accent-glass);
    color: var(--accent-light);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════
   FEED — Barre de filtre (search + nexus pills)
   ══════════════════════════════════════════════════════ */
#hub-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
}

.hub-filter-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 8px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hub-filter-search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.hub-filter-search-wrap svg {
    flex-shrink: 0;
    color: var(--text-subtle);
}
#hub-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 0.9em;
    padding: 0;
    width: 100%;
}
#hub-search-input::placeholder {
    color: var(--text-subtle);
}
#hub-search-clear {
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    width: auto;
    cursor: pointer;
    color: var(--text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
#hub-search-clear:hover {
    color: var(--text-main);
    background: var(--bg-hover);
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Nexus pills */
.hub-nexus-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hub-nexus-pill {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    width: auto;
    margin: 0;
}
.hub-nexus-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: none;
    box-shadow: none;
    filter: none;
}
.hub-nexus-pill.active {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Contrainte images dans le salon #post (équivalent de .hub-feed-col overflow:hidden) */
#channel-post-feed .post-media-block {
    max-height: 500px;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   POST CARD — Médias pleine largeur (style Instagram)
   ══════════════════════════════════════════════════════ */
.post-media-block {
    width: 100%;
    overflow: hidden;
    background: var(--bg-darker);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
/* Feed (hub) : média inset dans la carte, coins arrondis (au lieu du plein-bord) */
#hub-view .post-media-block {
    width: auto;
    margin: 0 16px 12px;
    border-radius: 12px;
    border-top: none;
    border-bottom: none;
}
.post-media-img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}
#hub-view .post-media-img {
    max-height: 500px;
}
.post-media-img:hover {
    opacity: 0.92;
}
.post-media-img + .post-media-img,
.cv-wrap + .cv-wrap {
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════
   Lecteur vidéo custom — style Discord/Instagram
   ══════════════════════════════════════════════════════ */
.cv-wrap {
    position: relative;
    background: #000;
    width: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.cv-wrap video {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
}

/* Overlay play (visible quand en pause) */
.cv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    transition: opacity 0.2s;
    pointer-events: none;
}
.cv-overlay.hidden {
    opacity: 0;
}
.cv-big-play {
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.3);
    padding-left: 3px; /* centrer visuellement le triangle */
}

/* Barre de contrôles */
.cv-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s;
}
.cv-wrap:hover .cv-controls {
    opacity: 1;
}
.cv-btn {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    width: auto;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cv-btn:hover {
    background: rgba(255,255,255,0.15);
    transform: none;
    filter: none;
    box-shadow: none;
}

/* Barre de progression */
.cv-progress {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: height 0.15s;
}
.cv-wrap:hover .cv-progress {
    height: 5px;
}
.cv-progress-fill {
    height: 100%;
    background: var(--accent, #5aa9ff);
    border-radius: 4px;
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none;
}

.cv-time {
    font-size: 0.72em;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ── Réactions aux messages ─────────────────────────────────── */
.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
}

/* Espace mort : un message sans réaction / sans texte (image ou partage seul)
   ne doit pas réserver de hauteur. Collapse propre des conteneurs vides. */
.msg-reactions:empty { display: none !important; }
.msg-content-wrap:empty { display: none !important; }

.reaction-pill {
    /* Override global button { width: 100% } */
    width: auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding: 2px 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    font-size: 0.85em;
    cursor: pointer;
    color: var(--text-main, #dcddde);
    transition: background .12s, border-color .12s, transform .08s;
    line-height: 1.5;
    box-shadow: none;
    font-weight: normal;
    letter-spacing: normal;
}

.reaction-pill:hover {
    background: rgba(255, 255, 255, .13) !important;
    border-color: rgba(255, 255, 255, .3) !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.reaction-pill.by-me {
    background: rgba(114, 137, 218, .25) !important;
    border-color: #7289da !important;
    color: #c5ccf7 !important;
}

.reaction-pill span {
    font-size: 0.85em;
    font-weight: 700;
    min-width: 0;
}

/* Picker de réactions (favoris + accès complet) */
.quick-reaction-picker {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    background: var(--bg-elevated, #202225);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .55);
    z-index: 9999;
    animation: fadeInUp .1s ease;
    min-width: 0;
}

.qr-label {
    font-size: 0.68em;
    color: var(--text-muted, #72767d);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 0 2px;
}

.qr-favorites-row {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    align-items: center;
}

.qr-divider {
    height: 1px;
    background: rgba(255, 255, 255, .08);
    margin: 1px 0;
}

.qr-btn {
    width: auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding: 5px 6px !important;
    background: none;
    border: none;
    font-size: 1.4em;
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
    transition: transform .12s, background .1s;
    box-shadow: none;
    flex: 0 0 auto;
    color: inherit;
}

.qr-btn:hover {
    transform: scale(1.3) !important;
    background: rgba(255, 255, 255, .1) !important;
    filter: none !important;
}

.qr-btn-more {
    font-size: 1em !important;
    font-weight: 700;
    color: var(--text-muted, #72767d) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}

.qr-btn-more:hover {
    color: #fff !important;
    border-color: #7289da !important;
    background: rgba(114, 137, 218, .2) !important;
    transform: scale(1.1) !important;
}

/* ── Expanded reaction picker ──────────────────────────────── */
.reaction-picker-expanded {
    background: var(--bg-elevated, #202225);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    width: 320px;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeInUp .12s ease;
}

.rpe-search-wrap {
    padding: 10px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.rpe-search {
    width: 100%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--text-main, #dcddde);
    font-size: 0.88em;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}

.rpe-search:focus {
    border-color: #7289da;
    background: rgba(114, 137, 218, .1);
}

.rpe-body {
    overflow-y: auto;
    padding: 8px 8px 10px;
    flex: 1;
}

.rpe-body::-webkit-scrollbar { width: 4px; }
.rpe-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 2px; }

.rpe-category {
    margin-bottom: 8px;
}

.rpe-cat-label {
    font-size: 0.68em;
    color: var(--text-muted, #72767d);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 3px;
    padding: 0 2px;
}

.rpe-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

.rpe-btn {
    width: auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    padding: 5px 6px !important;
    background: none;
    border: none;
    font-size: 1.3em;
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
    transition: transform .1s, background .1s;
    box-shadow: none;
    flex: 0 0 auto;
    color: inherit;
}

.rpe-btn:hover {
    transform: scale(1.3) !important;
    background: rgba(255, 255, 255, .1) !important;
    filter: none !important;
}

/* ── Répondre à un message ──────────────────────────────────── */
/* Bannière reply dans le composer */
.reply-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0 12px 4px;
    background: rgba(114, 137, 218, .15);
    border-left: 3px solid #7289da;
    border-radius: 4px;
    font-size: 0.82em;
    color: var(--text-main, #dcddde);
    animation: fadeInDown .15s ease;
}

.reply-banner strong {
    color: #c5ccf7;
}

.reply-banner-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted, #72767d);
    cursor: pointer;
    font-size: 1em;
    padding: 0 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .12s, background .12s;
}

.reply-banner-close:hover {
    color: #f04747;
    background: rgba(240, 71, 71, .1);
}

/* Citation (reply preview) dans le message */
.msg-reply-preview {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, .05);
    border-left: 2px solid #7289da;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.82em;
    max-width: 100%;
    overflow: hidden;
    transition: background .12s;
}

.msg-reply-preview:hover {
    background: rgba(255, 255, 255, .09);
}

.reply-preview-author {
    color: #7289da;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.reply-preview-text {
    color: var(--text-muted, #72767d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Highlight temporaire du message cible lors du scroll */
.msg-highlight {
    animation: msgHighlight 2s ease;
}

@keyframes msgHighlight {
    0% {
        background: rgba(250, 210, 100, .18);
    }

    70% {
        background: rgba(250, 210, 100, .12);
    }

    100% {
        background: transparent;
    }
}

/* Bouton répondre */
.msg-act-reply {
    color: var(--text-muted, #72767d);
}

.msg-act-reply:hover {
    color: #7289da;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ══════════════════════════════════════════════════════
   Carousel multi-médias des posts
   ══════════════════════════════════════════════════════ */
.pc-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000;
}
.pc-track {
    display: flex;
    transition: transform 0.32s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.pc-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}
.pc-slide img.post-media-img,
.pc-slide .cv-wrap {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}
.pc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
    opacity: 1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.pc-arrow:hover {
    background: rgba(255,255,255,0.32);
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);
    transform: translateY(-50%) scale(1.1);
}
.pc-arrow:active { transform: translateY(-50%) scale(0.93); }
.pc-prev { left: 10px; }
.pc-next { right: 10px; }
.pc-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 5;
}
.pc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 1.5px solid rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    transition: background 0.18s, transform 0.2s, width 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.pc-dot.active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
    transform: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.pc-counter {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.72em;
    padding: 2px 8px;
    border-radius: 20px;
    z-index: 5;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   Barre d'appel MP — style Discord
   ══════════════════════════════════════════════════════ */
#mp-call-bar {
    flex-shrink: 0;
    flex-direction: column;
    background: #1a3a2a;
    border-bottom: 1px solid #2a5a3a;
    overflow: hidden;
    animation: mpCallSlideIn 0.25s cubic-bezier(.4,0,.2,1);
}
@keyframes mpCallSlideIn {
    from { max-height: 0; opacity: 0; }
    to   { max-height: 120px; opacity: 1; }
}

@keyframes mpCallSplitSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── État sonnerie ─── */
.mp-call-ringing {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}
.mp-call-ring-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    animation: mpRingPulse 1.2s ease-in-out infinite;
}
@keyframes mpRingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88,226,148,0.5); }
    50%       { box-shadow: 0 0 0 10px rgba(88,226,148,0); }
}
.mp-call-ring-info { flex: 1; min-width: 0; }
.mp-call-ring-name {
    font-weight: 700;
    color: var(--text-heading);
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-call-ring-subtitle {
    font-size: 0.78em;
    color: #5de294;
    margin-top: 2px;
}
.mp-call-accept-btn, .mp-call-reject-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, filter 0.15s;
}
.mp-call-accept-btn { background: #3ba55d; color: white; }
.mp-call-reject-btn { background: #ed4245; color: white; }
.mp-call-accept-btn:hover, .mp-call-reject-btn:hover { transform: scale(1.1); }

/* ─── État actif ─── */
.mp-call-active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}
.mp-call-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mp-call-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5de294;
    animation: mpLivePulse 2s ease-in-out infinite;
}
@keyframes mpLivePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
.mp-call-type-label {
    font-size: 0.78em;
    font-weight: 600;
    color: #5de294;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mp-call-timer-val {
    font-size: 0.78em;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    min-width: 36px;
}

/* ─── Avatars participants ─── */
.mp-call-avatars {
    display: flex;
    align-items: center;
    gap: -6px;
    flex: 1;
    padding-left: 4px;
}
.mp-call-avatar-wrap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #1a3a2a;
    overflow: hidden;
    margin-left: -6px;
    flex-shrink: 0;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 700;
    color: white;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.15s;
}
.mp-call-avatar-wrap:first-child { margin-left: 0; }
.mp-call-avatar-wrap:hover { transform: scale(1.15); z-index: 2; }
.mp-call-avatar-speaking {
    box-shadow: 0 0 0 2px #5de294;
}

/* ─── Contrôles ─── */
.mp-call-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mp-ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #dce0e8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.mp-ctrl-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
    display: block;
}
.mp-ctrl-btn:hover { background: rgba(255,255,255,0.18); }
.mp-ctrl-btn.muted { background: #ed4245; color: #fff; }
.mp-ctrl-btn.active { background: #4a9cf6; color: #fff; }
.mp-ctrl-hangup {
    background: #ed4245 !important;
    color: #fff !important;
    border-radius: 8px;
}
.mp-ctrl-hangup:hover { background: #c03537 !important; }

/* ─── Zone d'appel MP/Groupe style Nexus ─── */
#mp-call-area.mp-call-expanded {
    flex: 1;
    max-height: none;
}

#mp-call-area {
    flex: 0 0 42vh;
    min-height: 200px;
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 2px solid var(--border-strong, rgba(255,255,255,0.1));
    animation: mpCallSplitSlideIn 0.22s ease;
    background: var(--bg-base);
}

#mp-call-active-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: #0f1f17;
}

.mp-call-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #0d1e14;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-height: 44px;
}

#mp-voice-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Neutralise le height fixe de .voice-grid (calc(100vh - 180px)) */
    height: auto;
}

#mp-voice-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    background: #0a1810;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    min-height: 56px;
}

/* ─── Boutons d'appel dans le header MP / Groupe ─── */
.mp-header-call-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-heading, #dcddde);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    flex-shrink: 0;
    opacity: 0.72;
    /* Neutralise les styles globaux button{} */
    padding: 0;
    margin: 0;
    box-shadow: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    transform: none !important;
}
/* Petits écrans : en-tête de groupe = 6 boutons ; on les compacte pour laisser
   de la place au nom du groupe (tronqué en ellipsis). */
@media (max-width: 400px) {
    #mp-channel-title .mp-header-call-btn {
        width: 32px;
        height: 32px;
    }
}

.mp-header-call-btn:hover {
    background: rgba(255,255,255,0.09);
    color: var(--text-heading, #dcddde);
    opacity: 1;
    box-shadow: none;
    filter: none;
}
.mp-header-call-btn.in-call {
    color: var(--online, #3ba55d);
    opacity: 1;
}
.mp-header-call-btn.in-call:hover {
    background: rgba(59, 165, 93, 0.15);
}


/* ── Page Découvrir ──────────────────────────────────────────────────────── */
/* Règles de base ; le détail des sections (recherche, suggestions, serveurs,
   tendances, posts) est défini plus bas, section "PAGE DÉCOUVRIR — DÉTAIL". */
#discover-view {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    min-width: 0;
}

/* ─────────────────────────────────────────
   PAGE DÉCOUVRIR — DÉTAIL
   Mobile d'abord (valeurs de la spec), puis
   surcharges desktop via (min-width: 768px).
───────────────────────────────────────── */
.disc-scroll {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-primary);
}

.disc-container {
    padding: 0 16px 80px;
}

.disc-main { min-width: 0; }

/* — Header + recherche — */
.disc-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-primary);
    padding-top: 4px;
}

.disc-title {
    margin: 0;
    padding: 16px 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.disc-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.disc-search-bar:hover { background: var(--bg-elevated); }
.disc-search-bar svg { flex-shrink: 0; color: var(--text-secondary); }
.disc-search-placeholder { font-size: 14px; color: var(--text-secondary); }

/* Mobile : titre + loupe sur une seule ligne, texte du placeholder masqué. */
@media (max-width: 768px) {
    .disc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .disc-search-bar {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        margin-bottom: 0;
        justify-content: center;
    }

    .disc-search-placeholder { display: none; }
}

/* — Sections génériques — */
.disc-section { margin-top: 32px; }

.disc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.disc-section-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.disc-see-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.disc-see-all:hover { text-decoration: underline; }

/* — Suggestions pour toi — */
.disc-suggestions-wrap { position: relative; }

.disc-suggestions-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.disc-suggestions-scroll::-webkit-scrollbar { display: none; }

.disc-suggestion-card {
    flex: 0 0 140px;
    width: 140px;
    height: 200px;
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    scroll-snap-align: start;
}

.disc-suggestion-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }

.disc-suggestion-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.disc-suggestion-handle {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.disc-suggestion-context { font-size: 11px; color: var(--text-muted); margin-top: auto; }

.disc-add-btn {
    width: 100%;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
}

.disc-add-btn:hover { filter: brightness(1.08); }

.disc-add-btn-pending,
.disc-add-btn-friend {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: default;
}

.disc-add-btn-cancel {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
}

.disc-add-btn-cancel:hover { background: var(--border); }

.disc-carousel-arrow { display: none; }

/* — Serveurs populaires — */
.disc-servers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.disc-server-card {
    position: relative;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-surface);
    cursor: pointer;
}

.disc-server-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.disc-server-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }

.disc-server-join-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    width: auto;
    backdrop-filter: blur(4px);
}

.disc-server-join-btn:hover { background: rgba(255, 255, 255, 0.32); }

.disc-server-info { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; color: #fff; }

.disc-server-name {
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.disc-server-members { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: 0.9; margin-top: 2px; }

/* — Tendances — */
.disc-trending-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.disc-trend-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    background: var(--bg-surface);
    border: none;
    border-radius: 20px;
    padding: 8px 14px;
    cursor: pointer;
    width: auto;
    transition: background 0.15s;
}

.disc-trend-pill:hover { background: var(--bg-elevated); }
.disc-trend-tag { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.disc-trend-count { font-size: 11px; color: var(--text-muted); }

/* — Posts populaires — */
.disc-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--bg-primary);
}

.disc-post-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-surface);
}

.disc-post-cell img,
.disc-post-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }

.disc-post-type-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* — Skeletons — */
.disc-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-surface);
    border-radius: 12px;
}

.disc-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: disc-shimmer 1.5s infinite;
}

@keyframes disc-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.disc-skeleton-suggestion { flex: 0 0 140px; width: 140px; height: 200px; }
.disc-skeleton-sidebar-user { height: 56px; margin-bottom: 8px; border-radius: 8px; }
.disc-skeleton-server { height: 160px; }
.disc-skeleton-pill { display: inline-block; width: 90px; height: 32px; border-radius: 20px; }
.disc-skeleton-post { aspect-ratio: 1 / 1; border-radius: 0; }

/* — Écran de recherche — */
.disc-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

.disc-search-panel { display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 0; }

.disc-search-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.disc-search-back {
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px;
    margin: 0;
    width: auto;
    display: flex;
}

.disc-search-input-wrap { flex: 1; min-width: 0; }

.disc-search-input-wrap input {
    width: 100%;
    margin: 0;
    background: var(--bg-surface);
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
}

.disc-search-cancel {
    background: transparent;
    border: none;
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 4px;
    margin: 0;
    width: auto;
    flex-shrink: 0;
}

.disc-search-filters {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.disc-search-filters::-webkit-scrollbar { display: none; }

.disc-filter-pill {
    flex-shrink: 0;
    margin: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}

.disc-filter-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.disc-search-results { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }

.disc-search-group { margin-bottom: 24px; }

.disc-search-group h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.disc-search-recent-list,
.disc-search-people-list,
.disc-search-servers-list,
.disc-search-hashtags-list {
    display: flex;
    flex-direction: column;
}

.disc-search-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.disc-search-recent-item:last-child { border-bottom: none; }

.disc-search-recent-item button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin: 0;
    width: auto;
    display: flex;
}

.disc-search-recent-item button:hover { color: var(--text-primary); }

.disc-search-person-row,
.disc-search-server-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-radius: 10px;
}

.disc-search-person-row.disc-search-exact { background: var(--bg-surface); }

.disc-search-person-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.disc-search-server-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.disc-search-person-info,
.disc-search-server-info { flex: 1; min-width: 0; }

.disc-search-person-name,
.disc-search-server-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.disc-search-person-handle,
.disc-search-server-members { font-size: 12px; color: var(--text-muted); }

.disc-search-person-context { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.disc-search-person-row .disc-add-btn { width: auto; padding: 7px 14px; font-size: 12px; flex-shrink: 0; }

.disc-server-join-inline-btn {
    flex-shrink: 0;
    margin: 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}

.disc-search-hashtag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.disc-search-hashtag-row:last-child { border-bottom: none; }
.disc-search-hashtag-count { font-size: 12px; color: var(--text-muted); }

.disc-search-empty { text-align: center; color: var(--text-muted); padding: 40px 12px; font-size: 14px; }

/* — Aperçu plein écran d'un post (lightbox légère) — */
.disc-post-lightbox {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.disc-post-lightbox-inner { position: relative; max-width: 520px; width: 100%; }
.disc-post-lightbox-inner img,
.disc-post-lightbox-inner video { width: 100%; border-radius: 12px; display: block; max-height: 80vh; }

.disc-post-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.3em;
    cursor: pointer;
    padding: 6px;
    margin: 0;
    width: auto;
}

/* ── Desktop (≥768px) ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .disc-container {
        display: flex;
        align-items: flex-start;
        gap: 32px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px 40px;
    }

    /* Plus de sidebar droite (suggestions en double, retirée sur PC) — le contenu
       principal prend toute la largeur du conteneur au lieu de laisser un vide. */
    .disc-main { flex: 1 1 auto; max-width: 100%; }

    .disc-suggestion-card,
    .disc-skeleton-suggestion { flex: 0 0 160px; width: 160px; height: 220px; }

    .disc-carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        margin: 0;
        border-radius: 50%;
        background: var(--bg-primary);
        border: 1px solid var(--border);
        color: var(--text-primary);
        cursor: pointer;
        z-index: 2;
        opacity: 0.95;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
        transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    }

    .disc-carousel-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.08); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); }
    .disc-carousel-arrow[disabled] { opacity: 0; pointer-events: none; }
    .disc-carousel-arrow.left { left: 6px; }
    .disc-carousel-arrow.right { right: 6px; }

    .disc-servers-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

    .disc-posts-grid { grid-template-columns: repeat(5, 1fr); }

    .disc-search-overlay {
        /* Le conteneur reste flex-direction:column (règle de base, pour le mobile) :
           sur cet axe, align-items gère l'horizontal et justify-content le vertical. */
        align-items: center;
        justify-content: flex-start;
        background: rgba(0, 0, 0, 0.5);
        padding-top: 6vh;
    }

    .disc-search-panel {
        max-width: 800px;
        width: 100%;
        max-height: 88vh;
        border-radius: 16px;
        overflow: hidden;
        background: var(--bg-primary);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
}

/* ─── Zone d'appel MP/Groupe — Mobile ─── */
@media (max-width: 768px) {
    #mp-call-area {
        flex: 0 0 48vh;
        min-height: 220px;
        max-height: 65vh;
    }
    .mp-call-header {
        padding: 8px 12px;
        min-height: 40px;
    }
    #mp-voice-controls {
        gap: 8px;
        padding: 8px 12px;
        min-height: 52px;
    }
    /* Override .voice-grid height fixe dans le contexte mobile aussi */
    #mp-voice-grid {
        height: auto;
    }
    #mp-voice-grid .voice-user-card {
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
        height: 140px;
    }
    #mp-voice-grid .voice-volume-slider {
        display: none;
    }
}

/* ═══════════════════════════════════════
   FORUM — Liste des fils (v4)
═══════════════════════════════════════ */
.forum-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.forum-sort-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.forum-sort-pills::-webkit-scrollbar { display: none; }

.forum-sort-pill {
    flex-shrink: 0;
    margin: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.forum-sort-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.forum-new-thread-btn {
    display: none;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    width: auto;
    margin: 0;
}
.forum-new-thread-btn:hover { background: var(--accent-hover); }

.forum-header-add-btn {
    display: none;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.forum-header-add-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.forum-fab {
    display: none;
    position: fixed;
    right: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 490;
    padding: 0;
    margin: 0;
}
.forum-fab:active { transform: scale(0.94); }

@media (max-width: 768px) {
    .forum-header-add-btn { display: flex; }
    .forum-fab { display: flex; bottom: calc(39px + env(safe-area-inset-bottom) + 16px); }
}
@media (min-width: 769px) {
    .forum-new-thread-btn { display: inline-block; }
}

.forum-thread-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Cartes de fils ── */
.forum-thread-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.forum-thread-card:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.forum-thread-card-top { flex: 1; min-width: 0; margin-bottom: 10px; }
/* En flux normal (pas position:absolute) : avec 5 badges possibles désormais
   (type/statut/épinglé/fermé/signalements), un ancrage absolu top-right avec une réserve
   fixe de 76px débordait ou chevauchait le titre dès que ça wrappait sur 2 lignes,
   surtout sur mobile. Le badges passent donc en rangée normale au-dessus du titre. */
.forum-thread-card-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.forum-unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.forum-thread-card-title { font-weight: 600; color: var(--text-primary); font-size: 16px; line-height: 1.4; margin-bottom: 5px; word-break: break-word; }
.forum-thread-card-preview {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.forum-thread-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: 9px;
    margin-top: 4px;
}
.forum-card-author { font-weight: 600; font-size: 0.82em; color: var(--text-primary); }
.forum-card-dot    { color: var(--text-muted); font-size: 0.8em; }
.forum-card-time   { font-size: 0.78em; color: var(--text-muted); }
.forum-card-replies {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-muted);
}

@media (min-width: 769px) {
    /* Grille responsive : 2-3 colonnes selon la largeur dispo, au lieu d'une liste
       mono-colonne — l'écran desktop est plus large, autant en profiter. */
    .forum-thread-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        align-items: start;
        gap: 14px;
        padding: 20px 24px;
    }
    .forum-thread-card { padding: 18px 20px; }
    .forum-loading, .forum-empty { grid-column: 1 / -1; }
}

/* ── Fil ouvert : badges/replies/actions (partagé, non retouché visuellement) ── */
.forum-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.03em;
}
.forum-badge-pin  { background: rgba(255,200,50,0.15); color: #f5c518; }
.forum-badge-lock { background: rgba(237,66,69,0.12);  color: var(--dnd); }
.forum-loading, .forum-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 0.9em;
    text-align: center;
}
.forum-thread-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-strong);
    flex-shrink: 0;
    background: var(--bg-dark);
}
.forum-op-content {
    color: var(--text-main);
    font-size: 0.92em;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}
.forum-replies-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
}
.forum-reply {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    transition: background 0.1s;
}
.forum-reply:hover { background: var(--bg-hover); }
.forum-reply-content {
    color: var(--text-main);
    font-size: 0.9em;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}
.forum-reply-form {
    padding: 16px 20px;
    border-top: 1px solid var(--border-strong);
    background: var(--bg-dark);
    flex-shrink: 0;
}
.forum-action-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: 7px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 600;
    transition: 0.15s;
}
.forum-action-btn:hover { background: var(--bg-darker); color: var(--text-heading); }
.forum-subscribed-btn { background: var(--accent-glass); border-color: var(--accent); color: var(--accent); }
.forum-subscribed-btn:hover { background: var(--accent-glass); color: var(--accent); }

/* ── Autocomplétion @mention (forums) ── */
.forum-mention-dropdown {
    position: fixed;
    display: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    z-index: 9999;
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
}
.forum-mention-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.forum-mention-option:hover { background: var(--bg-hover); }

/* ── Signalement aux modos ── */
.forum-report-link {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    opacity: 0.5;
    padding: 2px 4px;
    border-radius: 4px;
    transition: opacity 0.15s;
}
.forum-report-link:hover { opacity: 1; }
.forum-report-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.72em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(237, 66, 69, 0.12);
    color: var(--dnd);
}

/* ── Centre de notifications forums (cloche) ── */
.forum-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 20px;
    background: var(--dnd);
    color: #fff;
    font-size: 0.62em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.forum-notif-panel {
    position: fixed;
    display: none;
    width: 340px;
    max-width: 92vw;
    max-height: 60vh;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    z-index: 9999;
    flex-direction: column;
    overflow: hidden;
}
.forum-notif-panel-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.85em;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.forum-notif-panel-list { overflow-y: auto; flex: 1; padding: 6px; }
.forum-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.forum-notif-item:hover { background: var(--bg-hover); }
.forum-notif-item.unread { background: var(--accent-glass); }
.forum-notif-item-icon { font-size: 1.1em; flex-shrink: 0; }
.forum-notif-item-content { flex: 1; min-width: 0; }
.forum-notif-item-text { font-size: 0.85em; color: var(--text-primary); line-height: 1.4; }
.forum-notif-item-time { font-size: 0.72em; color: var(--text-muted); margin-top: 2px; }
.forum-notif-empty { padding: 30px 16px; text-align: center; color: var(--text-muted); font-size: 0.85em; }

/* ── Sondage attaché à un fil ── */
.forum-poll-block {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.forum-poll-question { font-weight: 700; color: var(--text-heading); font-size: 0.95em; margin-bottom: 10px; }
.forum-poll-option { margin-bottom: 8px; }
.forum-poll-option:last-of-type { margin-bottom: 0; }
.forum-poll-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    overflow: hidden;
    gap: 10px;
}
.forum-poll-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    /* Dégradé subtil : plus la barre est large, plus elle sature vers --accent (le stop à
       140% ne devient visible qu'aux forts pourcentages, sans dépendre de color-mix()). */
    background: linear-gradient(90deg, var(--accent-glass), var(--accent-glass) 70%, var(--accent) 140%);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}
.forum-poll-option-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 0.87em;
    font-weight: 600;
    min-width: 0;
}
.forum-poll-check { flex-shrink: 0; color: var(--accent); }
.forum-poll-option-pct {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-heading);
}
.forum-poll-option-count { color: var(--text-muted); font-weight: 400; }
.forum-poll-option.selected .forum-poll-bar { border-color: var(--accent); }
.forum-poll-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.78em;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.forum-poll-countdown { color: var(--text-muted); }

/* ── Sondage "classement" : éditeur glisser-déposer ── */
.forum-rank-list { display: flex; flex-direction: column; gap: 6px; touch-action: none; }
.forum-rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 8px;
    user-select: none;
}
.forum-rank-row.dragging { opacity: 0.6; border-color: var(--accent); }
.forum-rank-position {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-glass);
    color: var(--accent);
    font-size: 0.72em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.forum-rank-handle { flex-shrink: 0; color: var(--text-muted); cursor: grab; touch-action: none; font-size: 1.1em; }
.forum-rank-handle:active { cursor: grabbing; }
.forum-rank-label { flex: 1; min-width: 0; color: var(--text-primary); font-size: 0.87em; font-weight: 600; }
.forum-rank-arrows { display: flex; gap: 2px; flex-shrink: 0; }
.forum-rank-arrows button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.forum-rank-arrows button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.forum-rank-arrows button:disabled { opacity: 0.3; cursor: default; }
.forum-action-danger { border-color: rgba(237,66,69,0.4); color: var(--dnd); }
.forum-action-danger:hover { background: rgba(237,66,69,0.1); }
.forum-del-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    opacity: 0;
    padding: 2px 4px;
    border-radius: 4px;
    transition: opacity 0.15s;
    margin-left: auto;
}
.forum-reply:hover .forum-del-btn { opacity: 0.6; }
.forum-del-btn:hover { opacity: 1 !important; }
.forum-locked-notice {
    margin: 12px 20px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(237,66,69,0.08);
    border-left: 3px solid var(--dnd);
    color: var(--dnd);
    font-size: 0.85em;
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Refonte forum : types de fil, tags, statut, votes ── */
.forum-badge-type-discussion { background: rgba(153,170,181,0.15); color: #99aab5; }
.forum-badge-type-question   { background: rgba(88,101,242,0.15); color: #5865f2; }
.forum-badge-type-annonce    { background: rgba(250,166,26,0.15); color: #faa61a; }
.forum-badge-type-evenement  { background: rgba(167,139,250,0.15); color: #a78bfa; }
.forum-badge-type-sondage    { background: var(--accent-glass); color: var(--accent); }
.forum-badge-status-solved   { background: var(--accent-glass); color: var(--accent); }
.forum-badge-status-closed   { background: rgba(153,170,181,0.15); color: var(--text-muted); }

.forum-tag-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.forum-tag-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72em;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.forum-type-pill {
    flex-shrink: 0;
    margin: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.forum-type-pill:hover { border-color: var(--accent); color: var(--text-heading); }
.forum-type-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.forum-poll-mode-pill {
    flex-shrink: 0;
    margin: 0;
    padding: 6px 13px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.forum-poll-mode-pill:hover { border-color: var(--accent); color: var(--text-heading); }
.forum-poll-mode-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.forum-vote-widget { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.forum-vote-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.15s;
    padding: 0;
    margin: 0;
}
.forum-vote-btn:hover { background: var(--bg-hover); color: var(--text-heading); }
.forum-vote-btn.active-up { background: var(--accent-glass); border-color: var(--accent); color: var(--accent); }
.forum-vote-btn.active-down { background: rgba(237,66,69,0.12); border-color: var(--dnd); color: var(--dnd); }
.forum-vote-score { font-size: 0.85em; font-weight: 700; color: var(--text-heading); min-width: 16px; text-align: center; }

.forum-reply-accepted { background: var(--accent-glass); border-left: 3px solid var(--accent); }

/* ── Palmarès "Top contributeurs" (sidebar membres) ── */
#forum-leaderboard {
    border-bottom: 1px solid var(--border);
    padding: 12px 10px;
    flex-shrink: 0;
}
.forum-leaderboard-header {
    font-size: 0.72em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0 6px 8px;
}
.forum-leaderboard-empty { font-size: 0.8em; color: var(--text-muted); padding: 4px 6px; }
.forum-leaderboard-list { display: flex; flex-direction: column; gap: 2px; }
.forum-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}
.forum-leaderboard-row:hover { background: var(--bg-hover); }
.forum-leaderboard-rank { font-size: 0.78em; font-weight: 700; color: var(--text-muted); width: 14px; flex-shrink: 0; text-align: center; }
.forum-leaderboard-name { flex: 1; min-width: 0; font-size: 0.85em; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-leaderboard-gained { font-size: 0.8em; font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* ═══════════════════════════════════════
   GIF PICKER — redesign Instagram-style
═══════════════════════════════════════ */
#gif-picker {
    width: 360px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow: hidden;
}

.gif-picker-header {
    padding: 10px 10px 0;
    flex-shrink: 0;
}

.gif-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0 8px 0 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gif-search-wrap:focus-within {
    border-color: var(--accent-glass);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.gif-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.gif-search-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-heading) !important;
    font-size: 0.88em !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

.gif-search-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    border-radius: 6px !important;
    border: none !important;
    background: var(--accent) !important;
    color: white;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    transition: opacity 0.15s;
    box-shadow: none !important;
}

.gif-search-btn:hover {
    opacity: 0.85;
    filter: none;
    transform: none;
}

.gif-tabs {
    display: flex;
    margin: 8px 10px 0;
    background: var(--bg-base);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.gif-tab {
    flex: 1;
    padding: 6px 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--text-muted) !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin: 0 !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.gif-tab.active {
    background: var(--bg-elevated) !important;
    color: var(--text-heading) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}

.gif-tab:hover:not(.active) {
    color: var(--text-heading) !important;
    background: var(--bg-hover) !important;
    filter: none;
    transform: none;
}

.gif-grid {
    columns: 2;
    column-gap: 6px;
    padding: 8px 10px 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
}

.gif-item {
    break-inside: avoid;
    margin-bottom: 6px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--bg-base);
    display: block;
    transition: transform 0.15s;
}

.gif-item:hover {
    transform: scale(1.02);
}

.gif-item img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.gif-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 5px;
    border-radius: 10px;
}

.gif-item:hover .gif-item-overlay {
    background: rgba(0,0,0,0.2);
}

.gif-fav-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0,0,0,0.5) !important;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.15s, transform 0.15s, color 0.15s;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.gif-item:hover .gif-fav-btn {
    opacity: 1;
    transform: scale(1);
}

.gif-fav-btn.active {
    color: #ff3b5c !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.gif-fav-btn:hover {
    background: rgba(0,0,0,0.72) !important;
    color: #ff3b5c !important;
    transform: scale(1.18) !important;
    filter: none;
}

.gif-picker-status {
    font-size: 0.6em;
    color: var(--text-subtle);
    text-align: center;
    padding: 4px 0 7px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    flex-shrink: 0;
}

.gif-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
    font-size: 0.88em;
}

/* ═══════════════════════════════════════
   STORIES — Layout, bulles, sidebar, viewer
═══════════════════════════════════════ */

/* ── Hub layout: feed + sidebar droite ── */
#hub-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    justify-content: center;
}

.hub-layout-wrapper {
    width: 100%;
    max-width: 980px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 40px;
}

.hub-feed-col {
    flex: 1;
    min-width: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ── Sidebar stories (PC) ── */
.hub-stories-sidebar {
    width: 272px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 0;
}

.stories-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 4px 10px;
}

.stories-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Story bubble (sidebar PC) ── */
.story-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.story-sidebar-item:hover {
    background: var(--bg-hover);
}

.story-sidebar-item .story-ring-wrap {
    position: relative;
    flex-shrink: 0;
}

.story-sidebar-item .avatar {
    width: 44px;
    height: 44px;
    border: none;
}

.story-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #1aab58);
    z-index: 0;
}

.story-ring.seen {
    background: var(--border-strong);
}

.story-ring-wrap .avatar {
    position: relative;
    z-index: 1;
    border: 2.5px solid var(--bg-elevated);
}

.story-sidebar-name {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-sidebar-meta {
    font-size: 0.75em;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Add-story button in sidebar */
.story-add-sidebar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
}

.story-add-sidebar:hover {
    background: var(--bg-hover);
}

.story-add-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ── Stories row (Mobile) ── */
.stories-row {
    display: none; /* caché sur PC, affiché sur mobile via media query */
    gap: 12px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: none;
}

.stories-row::-webkit-scrollbar { display: none; }

.story-mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex-shrink: 0;
}

.story-mobile-item .story-ring-wrap {
    position: relative;
}

.story-mobile-item .avatar {
    width: 58px;
    height: 58px;
    position: relative;
    z-index: 1;
    border: 2.5px solid var(--bg-elevated);
}

.story-mobile-item .story-ring {
    inset: -3px;
}

.story-mobile-name {
    font-size: 0.7em;
    color: var(--text-muted);
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Add button mobile */
.story-add-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex-shrink: 0;
}

.story-add-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--bg-base);
    border: 2px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s, border-color 0.15s;
}

.story-add-mobile:hover .story-add-circle {
    background: var(--accent-glass);
    border-color: var(--accent);
}

/* ── Story Viewer (style Instagram) ── */
#story-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    overflow: hidden;
}

/* Fond flou derrière la carte */
.sv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Carte story centrée 9:16 */
.sv-card {
    position: relative;
    z-index: 1;
    height: min(780px, calc(100dvh - 40px));
    aspect-ratio: 9 / 16;
    max-width: calc(100vw - 120px);
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 28px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
    flex-shrink: 0;
}

/* Flèches navigation utilisateur (gauche / droite) */
.sv-user-arrow {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 14px;
    transition: background 0.15s, opacity 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
    box-shadow: none;
}
.sv-user-arrow:hover {
    background: rgba(255,255,255,0.25);
    filter: none;
    transform: none;
}
.sv-user-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

/* Barres de progression */
.sv-progress-bars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 10px 10px 0;
    z-index: 4;
}

.sv-prog-bar {
    flex: 1;
    height: 2.5px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}

.sv-prog-fill {
    height: 100%;
    background: white;
    width: 0%;
    transition: none;
}

.sv-prog-fill.done { width: 100%; }
.sv-prog-fill.playing {
    animation: svProgAnim var(--sv-duration, 6s) linear forwards;
}

@keyframes svProgAnim {
    from { width: 0%; }
    to   { width: 100%; }
}

/* Header (au-dessus des zones de tap) */
.sv-header {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
    pointer-events: none;
}
.sv-header > *, .sv-header button {
    pointer-events: auto;
}

.sv-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sv-avatar {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255,255,255,0.65);
}

.sv-username {
    font-size: 0.9em;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

.sv-time {
    font-size: 0.7em;
    color: rgba(255,255,255,0.72);
}

.sv-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    border-radius: 50% !important;
    color: white;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sv-btn:hover {
    background: rgba(0,0,0,0.65) !important;
    filter: none;
    transform: none;
}

/* Media remplit la carte */
.sv-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.sv-media img, .sv-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* ── Calques texte/émoji sur story vidéo (partie 5) — lecture seule, positionnés en JS
   sur le rectangle réel de la vidéo (cf. _svRenderVideoOverlays / _containRect) ── */
.sv-video-overlays {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.sv-overlay-item {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sv-overlay-item.sv-overlay-emoji { text-shadow: none; }
.sv-overlay-item.sv-overlay-bg {
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 12px;
    border-radius: 8px;
}

/* Caption — au-dessus de la barre de réponse */
.sv-caption {
    position: absolute;
    bottom: 120px;
    left: 12px;
    right: 12px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 0.92em;
    padding: 8px 14px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    pointer-events: none;
    z-index: 3;
}

/* Zones de tap (gauche / droite) — sous le header, au-dessus de la reply bar */
.sv-nav-prev, .sv-nav-next {
    position: absolute;
    top: 80px;
    bottom: 110px;
    width: 40%;
    z-index: 2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sv-nav-prev { left: 0; }
.sv-nav-next { right: 0; }

/* Bande centrale (20% restants entre les deux zones ci-dessus) : tap = lecture/pause. */
.sv-center-tap {
    position: absolute;
    top: 80px;
    bottom: 110px;
    left: 40%;
    right: 40%;
    z-index: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.sv-playpause-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.sv-playpause-icon.visible { opacity: 1; }

/* Mute/unmute discret, haut droit de la story vidéo. */
.sv-mute-btn {
    position: absolute;
    top: 64px;
    right: 12px;
    z-index: 5;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* ── Barre réaction / réponse story ── */
.sv-reply-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 8px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.sv-reply-bar > * { pointer-events: auto; }

.sv-emoji-row {
    display: flex;
    gap: 6px;
}

.sv-reaction-btn {
    font-size: 1.25em;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.sv-reaction-btn:hover, .sv-reaction-btn:active {
    background: rgba(255,255,255,0.28);
    transform: scale(1.18);
    filter: none;
}

.sv-reply-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sv-reply-input {
    flex: 1;
    background: rgba(255,255,255,0.12) !important;
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    border-radius: 22px !important;
    color: white !important;
    font-size: 0.87em;
    padding: 8px 16px !important;
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    height: auto !important;
    margin: 0 !important;
    -webkit-tap-highlight-color: transparent;
}
.sv-reply-input::placeholder { color: rgba(255,255,255,0.45); }
.sv-reply-input:focus {
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.2) !important;
    box-shadow: none;
}

.sv-reply-send {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    border: none !important;
    color: white;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sv-reply-send:hover {
    background: rgba(255,255,255,0.32) !important;
    filter: none;
    transform: none;
}

/* Mobile : carte plein écran, flèches masquées (tap gauche/droite suffit) */
@media (max-width: 768px) {
    .sv-card {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        max-width: 100vw;
        border-radius: 0;
        box-shadow: none;
    }
    .sv-user-arrow {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   ÉDITEUR DE STORY — plein écran mobile, modale 400×700 desktop.
   Toujours fond noir (contexte créatif), quel que soit le thème.
   ═══════════════════════════════════════════════════════════ */
.mediaeditor {
    position: fixed;
    inset: 0;
    /* Au-dessus des vues plein écran existantes (Loop = 9000, sa sheet commentaires = 9200) :
       si l'une d'elles n'a pas été correctement refermée avant d'ouvrir l'éditeur, elle ne
       doit pas transparaître par-dessus. Reste sous les toasts (9999-10000). */
    z-index: 9300;
    display: none;
    background: #000;
    /* Toujours fond noir + texte clair, même en thème clair (contexte créatif, partie 14).
       Hérité par défaut par tout ce qui ne fixe pas sa propre couleur (ex. MusicPicker,
       module partagé qui ne force pas de couleur explicite sur ses libellés). */
    color: #fff;
}

.mediaeditor-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .mediaeditor {
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(4px);
    }
    .mediaeditor-frame {
        width: 400px;
        height: 700px;
        max-height: 92vh;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    }
}

/* ── Barre d'outils haute (icônes) ── */
.mediaeditor-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 16px 22px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

.mediaeditor-tools {
    display: flex;
    align-items: center;
    gap: 20px;
}

.me-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, transform 0.1s;
    box-shadow: none;
}
.me-icon-btn:active { transform: scale(0.86); }
.me-icon-btn.me-icon-on { color: var(--accent); background: rgba(255, 255, 255, 0.14); }
.me-icon-btn-danger { color: #ff453a; }
.me-icon-btn.me-icon-disabled { color: rgba(255, 255, 255, 0.35); }

/* ── Barre contextuelle (taille + suppression du calque sélectionné) ── */
#editor-context-row {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 20px;
    padding: 4px 6px;
}
#editor-context-row .me-icon-btn { width: 28px; height: 28px; }

/* ── Ligne de saisie texte ── */
#editor-text-row {
    position: absolute;
    left: 12px; right: 12px; bottom: 90px;
    z-index: 6;
    display: none;
    flex-direction: column;
    gap: 10px;
    background: rgba(22, 22, 22, 0.92);
    border-radius: 14px;
    padding: 12px;
    backdrop-filter: blur(6px);
}
#editor-text-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-size: 0.95em;
    outline: none;
    font-family: 'Inter', sans-serif;
}
.editor-text-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.editor-text-colors .etc-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    padding: 0;
    box-shadow: none;
}
.editor-text-colors .etc-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--accent);
}
.editor-text-bg-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    cursor: pointer;
}
.editor-text-ok {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

/* ── Zone média ── */
#editor-canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
#editor-canvas {
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    display: block;
    cursor: crosshair;
    transition: filter 0.3s;
}

#editor-video {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Boîte recalée en JS pour matcher exactement video.getBoundingClientRect() (partie 5) :
   position absolue simple, chaque calque est ensuite positionné en % dedans. */
#editor-video-overlays {
    position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    z-index: 4;
    pointer-events: none;
}

.me-video-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: grab;
    white-space: nowrap;
    user-select: none;
    touch-action: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.me-video-overlay.selected {
    outline: 1.5px dashed rgba(255, 255, 255, 0.9);
    outline-offset: 8px;
}
.me-video-overlay.dragging { cursor: grabbing; }
.me-video-overlay.me-overlay-emoji { text-shadow: none; }
.me-video-overlay.me-overlay-bg {
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 12px;
    border-radius: 8px;
}

.me-mute-btn {
    position: absolute;
    top: 64px;
    right: 16px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

/* ── Recadrage vidéo ── */
#editor-trim-panel input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

/* ── Panels bas (émojis / musique / filtres) ── */
.mediaeditor-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 8;
    background: #161616;
    border-radius: 16px 16px 0 0;
    padding: 12px 14px 16px;
    max-height: 50%;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#editor-emoji-panel {
    display: flex;
    flex-flow: row wrap;
    gap: 2px;
    max-height: 50%;
}
#editor-emoji-panel button {
    font-size: 1.6em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    line-height: 1;
    transition: transform 0.12s, background 0.12s;
}
#editor-emoji-panel button:active { transform: scale(1.25); background: rgba(255, 255, 255, 0.1); }

#editor-music-panel { max-height: 60%; }
#editor-music-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 0.9em;
    outline: none;
}
#editor-music-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
}
#editor-music-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.mediaeditor-sheet-row {
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    align-items: flex-start;
    padding-top: 16px;
}
.me-filter-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.me-filter-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.me-filter-item.active .me-filter-thumb {
    border-color: var(--accent);
}
.me-filter-name {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

/* ── Confirmation d'abandon — autonome, pas de dépendance au système modal générique
   (#modal-overlay, z-index 1000) : celui-ci passerait sous l'éditeur (z-index 9300) et
   deviendrait invisible/inaccessible. Rester dans la pile locale de .mediaeditor évite
   tout risque d'effet de bord ailleurs dans l'app. ── */
.mediaeditor-confirm {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    box-sizing: border-box;
}
.mediaeditor-confirm-box {
    background: #1c1c1c;
    border-radius: 16px;
    padding: 22px;
    width: 100%;
    max-width: 320px;
    text-align: center;
}
.mediaeditor-confirm-box p {
    margin: 0 0 6px;
    color: #fff;
    font-weight: 700;
    font-size: 1em;
}
.mediaeditor-confirm-box .mediaeditor-confirm-sub {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-size: 0.85em;
}
.mediaeditor-confirm-actions {
    display: flex;
    gap: 10px;
}
.mediaeditor-confirm-actions button {
    flex: 1;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    box-shadow: none;
}
.mediaeditor-confirm-cancel {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.mediaeditor-confirm-danger {
    background: #ff453a;
    color: #fff;
}

/* ── Barre d'actions basse ── */
.mediaeditor-bottombar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.me-btn-cancel {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.95em;
    cursor: pointer;
    padding: 10px 8px;
    margin: 0;
    box-shadow: none;
}
.me-btn-next {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95em;
    margin: 0;
    box-shadow: none;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .hub-stories-sidebar { display: none; }
    .hub-layout-wrapper { max-width: 640px; }
    .hub-feed-col { max-width: 100%; }
    /* Sur mobile, on publie via le bouton du header → mini-composer masqué */
    #hub-mini-composer { display: none; }
    .stories-row { display: flex; }
}

@media (max-width: 768px) {
    #hub-scroll-area { padding: 12px 14px; }
    .hub-layout-wrapper { padding-bottom: 80px; }
}

/* ═══════════════════════════════════════════════════════
   LOOP — Feed vertical snap-scroll (TikTok / Shorts)
═══════════════════════════════════════════════════════ */

#loop-view {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: #000;
    display: flex;
    flex-direction: column;
    /* Chrome toujours sombre (lecteur plein écran sur vidéo) — indépendant du thème clair/sombre du site. */
    --text-primary: #FAFAFA;
    --accent: #22C55E;
    --like-active: #EF4444;
}

#loop-container {
    flex: 1;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 100%;
    overscroll-behavior: contain;
}
#loop-container::-webkit-scrollbar { display: none; }

#loop-sentinel { height: 4px; }

/* ── Chaque item ────────────────────────────────────── */
.loop-item {
    position: relative;
    width: 100%;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.loop-empty {
    flex-direction: column;
    color: var(--text-muted, #888);
    font-size: 1rem;
    text-align: center;
    padding: 24px;
}

/* ── Fond flouté ────────────────────────────────────── */
.loop-bg {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(22px) brightness(0.3);
    z-index: 0;
    transform: scale(1.1);
}
.loop-bg-dark { background: #000; filter: none; }

/* ── Média unique ───────────────────────────────────── */
.loop-media-single {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loop-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.loop-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Carousel horizontal ────────────────────────────── */
.loop-carousel {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.loop-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.loop-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    user-select: none;
}

.loop-carousel-dots {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 4;
}

.loop-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transition: background 0.2s, transform 0.2s;
}
.loop-dot.active { background: white; transform: scale(1.3); }

.loop-carousel-counter {
    position: absolute;
    top: 10px;
    right: 14px;
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(0,0,0,0.45);
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 4;
}

/* ── Gradients ──────────────────────────────────────── */
.loop-gradient-top {
    position: absolute;
    inset: 0;
    bottom: 90%;                /* 10% du haut — flèche retour + bouton son */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.loop-gradient-bottom {
    position: absolute;
    inset: 0;
    top: 80%;                   /* 20% du bas — lisibilité username/description */
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ── Bouton retour ──────────────────────────────────── */
#loop-back-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 9100;
    background: rgba(0,0,0,0.45);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(6px);
}

/* ── Overlay bas (username + légende) ───────────────── */
.loop-overlay-bottom {
    position: absolute;
    left: 0;
    right: 72px;
    bottom: 0;
    padding: 14px 16px 16px;
    z-index: 3;
    pointer-events: none;
}
.loop-overlay-bottom > * { pointer-events: auto; }

.loop-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.loop-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
}

.loop-avatar-ph {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.8);
    background: var(--accent, #5865f2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
}

.loop-username {
    color: var(--text-primary, white);
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.loop-caption {
    color: var(--text-primary, white);
    opacity: 0.9;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.loop-caption-more {
    display: inline-block;
    margin-left: 4px;
    font-weight: 700;
    opacity: 0.75;
}

/* Déplié : plus de clamp, mais borné + scrollable pour ne jamais déborder du
   loop-item (overflow:hidden) ni chevaucher les boutons d'action à droite. */
.loop-caption.loop-caption-expanded {
    display: block;
    -webkit-line-clamp: unset;
    max-height: 35vh;
    overflow-y: auto;
    padding-right: 4px;
}
.loop-caption.loop-caption-expanded .loop-caption-more { display: none; }

/* ── Chip musique Loop ──────────────────────────────── */
.loop-music-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 6px 10px;
    margin-top: 8px;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    max-width: 100%;
}

/* ── Actions droite ─────────────────────────────────── */
.loop-actions {
    position: absolute;
    right: 16px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 3;
}

.loop-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7));
}

.loop-action-icon { width: 28px; height: 28px; }

.loop-action-label {
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}


/* ── Amis qui ont liké (Loop) ──────────────────────── */
.lp-friend-likes {
    position: absolute;
    bottom: 130px;
    left: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    border-radius: 99px;
    padding: 6px 10px 6px 8px;
    touch-action: pan-y;
    will-change: transform;
    cursor: grab;
}
.lp-fl-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    object-fit: cover;
    margin-left: -6px;
    background: var(--bg-darker);
    flex-shrink: 0;
    cursor: pointer;
}
.lp-fl-av:first-of-type { margin-left: 0; }
.lp-fl-av-ph {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    background: var(--accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    flex-shrink: 0;
    cursor: pointer;
}
.lp-fl-av-ph:first-of-type { margin-left: 0; }

/* ── Fond commentaires ──────────────────────────────── */
#loop-comments-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9150;
    display: none;
}

/* ── Sheet commentaires ─────────────────────────────── */
#loop-comments-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 62vh;
    background: var(--bg-2, #1e1f22);
    border-radius: 20px 20px 0 0;
    z-index: 9200;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
}

.lp-cmt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border-strong, rgba(255,255,255,0.08));
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-heading, #fff);
    flex-shrink: 0;
}

.lp-cmt-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #999);
    display: flex; align-items: center;
    -webkit-tap-highlight-color: transparent; padding: 4px;
}

#loop-comments-list { flex: 1; overflow-y: auto; padding: 10px 14px 8px; }

.lp-cmt-item { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }

.lp-cmt-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.lp-cmt-av-ph {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent, #5865f2);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: white; flex-shrink: 0;
}

.lp-cmt-body { flex: 1; min-width: 0; }

.lp-cmt-name {
    font-size: 0.8rem; font-weight: 700;
    color: var(--text-muted, #aaa);
    display: block; margin-bottom: 2px;
}

.lp-cmt-text { font-size: 0.88rem; color: var(--text-normal, #ddd); line-height: 1.4; word-break: break-word; }

/* ── Indication visuelle qu'un commentaire est une réponse à un autre ── */
.lp-cmt-item-reply { margin-left: 30px; }
.lp-cmt-reply-hint {
    font-size: 0.74rem;
    color: var(--text-muted, #888);
    margin-bottom: 2px;
}

.lp-cmt-input-row {
    display: flex; gap: 8px;
    padding: 10px 12px 20px;
    border-top: 1px solid var(--border-strong, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.lp-cmt-input-row input {
    flex: 1;
    background: var(--bg-3, #2b2d31) !important;
    border: 1px solid var(--border-strong, rgba(255,255,255,0.12)) !important;
    border-radius: 22px !important;
    padding: 8px 16px !important;
    color: var(--text-normal, #ddd) !important;
    font-size: 0.9rem; outline: none;
}

.lp-cmt-send-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent, #5865f2);
    border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: white; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── Desktop : centré format portrait ───────────────── */
@media (min-width: 768px) {
    #loop-view { align-items: center; background: rgba(0,0,0,0.92); }
    #loop-container { width: 400px; max-width: 100%; box-shadow: 0 0 60px rgba(0,0,0,0.8); }
    #loop-back-btn  { left: calc(50% - 200px + 16px); }
    .loop-actions   { right: calc(50% - 200px + 16px); }
}

/* ── Messages épinglés ───────────────────────────────────────────────────────── */
.pinned-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(88, 101, 242, 0.12);
    border-bottom: 1px solid rgba(88, 101, 242, 0.25);
    font-size: 0.85em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.pinned-banner-icon { font-size: 1em; }
.pinned-banner-text { flex: 1; font-weight: 600; color: var(--text-heading); }
.pinned-banner-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 3px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 700;
    transition: background 0.15s;
}
.pinned-banner-btn:hover { background: var(--accent-glass); }

.pinned-panel {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 420px;
    max-height: calc(100vh - 90px);
    background: var(--bg-darker);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.95) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.pinned-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    color: var(--text-heading);
    font-size: 1.1em;
    background: var(--bg-dark);
}
.pinned-panel-header button {
    background: var(--bg-hover);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1em;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.pinned-panel-header button:hover { color: var(--text-heading); background: var(--border-strong); }
.pinned-panel-body {
    overflow-y: auto;
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pinned-item {
    position: relative;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pinned-item:hover { background: var(--bg-hover); border-color: var(--border); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pinned-item-author { font-size: 0.9em; font-weight: 700; color: var(--text-heading); display: flex; align-items: center; gap: 8px; }
.pinned-item-content { font-size: 0.95em; color: var(--text-main); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.pinned-item-unpin {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1em;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: 0.2s;
}
.pinned-item-unpin:hover { color: white; background: var(--dnd); }

/* Indicateur visuel sur le bouton pin d'un message déjà épinglé */
.msg-act-pin { transition: color 0.15s, opacity 0.15s; }

@media (max-width: 768px) {
    /* Bottom sheet calé AU-DESSUS de la barre de nav (#mobile-nav = fixed, bottom:0,
       hauteur 39px + safe-area) pour ne plus masquer le bas de la liste des épingles. */
    .pinned-panel {
        left: 0;
        right: 0;
        width: auto;
        border-radius: 20px 20px 0 0;
        top: auto;
        bottom: calc(39px + env(safe-area-inset-bottom, 0px));
        max-height: 68vh;
        margin: 0;
        border: none;
        z-index: 450;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   REFONTE INTERFACE CHAT — Style Discord (DESKTOP UNIQUEMENT)
   Scope strict via min-width:769px — le mobile (bulles) reste scopé en
   max-width:768px (convention déjà utilisée partout ailleurs dans ce
   fichier) : les deux plages ne se chevauchent jamais, plus de confusion
   ni de bug possible à la frontière des deux designs.
   ═══════════════════════════════════════════════════════════════════════ */

/* Statut sous le nom du header MP : masqué par défaut (mobile), affiché en desktop */
.mp-header-status { display: none; }

@media (min-width: 769px) {

    /* Container de la conversation : gouttière gauche pour l'avatar (16px),
       marge droite pour ne jamais recouvrir le texte avec la barre d'actions (48px) */
    .chat-box {
        padding: 16px 48px 16px 16px;
    }

    /* Pas de fond de bulle : juste du texte sur --bg-primary. Padding vertical
       resserré (2px 0) — l'espacement entre messages est piloté par les
       marges (cf. bloc groupement plus bas), pas par ce padding. */
    .chat-msg-row {
        margin: 0 !important;
        padding: 2px 0;
        border-radius: 4px;
        gap: 8px;
    }

    /* Survol discret sur toute la ligne (Discord-like), pas de halo vert */
    .chat-msg-row:hover {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 4px;
    }

    /* Nom auteur : bold, teinté par la couleur de profil de l'expéditeur (--msg-sender-color,
       posée inline par buildMessageHTML) — pas de rôle serveur pour l'instant, donc le
       pseudo "de base" reflète directement le choix de couleur du profil. Repli sur
       --text-heading si l'expéditeur n'a pas encore de couleur connue (comptes legacy).
       Ciblage explicite de .msg-header — pas ":first-child", qui peut désormais être
       le contenu du message quand le nom est omis en 1-1. */
    .chat-msg-row .msg-body > .msg-header span:first-child {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--msg-sender-color, var(--text-heading)) !important;
    }

    /* Timestamp : petit et discret, à côté du nom */
    .chat-msg-row .msg-body > .msg-header span:nth-child(2) {
        font-size: 0.68rem !important;
        color: var(--text-subtle) !important;
        font-weight: 400 !important;
    }

    /* Propres messages : nom en accent pour se distinguer */
    .chat-msg-row.msg-own .msg-body > .msg-header span:first-child {
        color: var(--accent) !important;
    }

    /* Texte du message — line-height resserré façon Discord (1.5 laissait un
       espacement plus généreux que la référence, perçu comme "trop d'espace"
       même une fois la marge entre lignes groupées supprimée). */
    .msg-content-wrap {
        font-size: 0.945rem !important;
        line-height: 1.375 !important;
    }

    /* Statut sous le nom dans le header de conversation (1-1 uniquement, si dispo) */
    .mp-header-identity span:first-child { font-size: 16px !important; font-weight: 600 !important; }
    .mp-header-status {
        display: block;
        font-size: 12px;
        line-height: 1.2;
        color: var(--text-muted);
    }
    .mp-header-status.status-online  { color: var(--online); }
    .mp-header-status.status-idle    { color: var(--idle); }
    .mp-header-status.status-dnd     { color: var(--dnd); }
    .mp-header-status.status-offline { color: var(--text-muted); }

    /* Barre d'actions au survol : ancrée en haut à droite du message (jamais
       centrée), fond élevé + bordure pour se détacher du fond plat */
    .msg-actions {
        top: -16px;
        right: 8px;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: 8px;
    }
    .msg-act-btn {
        width: 20px;
        height: 20px;
        padding: 6px;
        font-size: 15px;
    }
    .msg-act-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Menu "plus d'options" (⋯) : copier / modifier / supprimer */
    .msg-more-menu {
        display: flex;
        flex-direction: column;
        min-width: 160px;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 4px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    .msg-more-item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        color: var(--text-main);
        font-size: 0.88rem;
        padding: 8px 10px;
        border-radius: 6px;
        cursor: pointer;
        text-align: left;
        width: 100%;
    }
    .msg-more-item:hover { background: var(--bg-hover); }
    .msg-more-item-danger { color: var(--dnd); }
    .msg-more-item-danger:hover { background: rgba(237, 66, 69, 0.12); }

    /* Zone de saisie alignée avec les messages (16px + 40px avatar = 56px) */
    .input-area {
        padding-left: 56px;
        padding-right: 16px;
    }
    .composer-shell {
        background: var(--bg-elevated);
        border-radius: 8px;
        padding: 12px 16px;
    }
}

/* ─────────────────────────────────────────
   LISTE DM SIDEBAR DESKTOP — Discord-like
───────────────────────────────────────── */

#mp-list .channel {
    min-height: 50px;
    padding: 7px 10px;
    align-items: center;
}

#mp-list .channel .avatar {
    width: 36px !important;
    height: 36px !important;
}

/* ─────────────────────────────────────────
   MOBILE — Chat en bulles (style iMessage)
   Design mobile unique du chat. Le groupement (bloc plus bas) gère
   l'avatar/en-tête des messages consécutifs d'un même auteur.
   Scope max-width:768px ; le desktop (Discord, sans bulles) démarre à
   min-width:769px plus bas — jamais de chevauchement entre les deux.
───────────────────────────────────────── */

@media (max-width: 768px) {

    /* Espacement inter-messages piloté par les marges de ligne (pas le gap flex) */
    .chat-box {
        padding: 8px 0 130px !important;
        gap: 0 !important;
    }

    /* Ligne = porteuse de bulle, alignée sur le bas (avatar collé au bas de la bulle) */
    .chat-msg-row {
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 7px !important;
        padding: 1px 10px !important;
        margin: 0 !important;
    }

    /* Reçu : petit avatar rond en bas à gauche */
    .chat-msg-row:not(.msg-own) .avatar {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 50% !important;
        margin: 0 !important;
        align-self: flex-end !important;
    }

    /* Envoyé : bulle à droite, sans avatar ni gouttière */
    .chat-msg-row.msg-own {
        flex-direction: row-reverse !important;
    }
    .chat-msg-row.msg-own .msg-avatar-wrap {
        display: none !important;
    }
    .chat-msg-row.msg-own .msg-actions {
        right: auto !important;
        left: 8px !important;
    }

    /* Corps du message = bulle */
    .chat-msg-row .msg-body {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 75% !important;
        /* Couleur de personnalité de l'expéditeur (--msg-sender-color, posée inline par
           buildMessageHTML) — chaque bulle est teintée par qui l'a envoyée, "reçue" ou non. */
        background: var(--msg-sender-color, var(--bubble-received-bg)) !important;
        border-radius: 18px 18px 18px 18px !important;
        padding: 8px 14px !important;
        overflow: visible !important;
    }
    .chat-msg-row.msg-own .msg-body {
        background: var(--msg-sender-color, var(--bubble-sent-bg)) !important;
        border-radius: 18px 18px 18px 18px !important;
    }
    /* Padding adaptatif selon la longueur du message (cf. classes posées par buildMessageHTML) */
    .chat-msg-row.msg-short .msg-body { padding: 8px 14px !important; }
    .chat-msg-row.msg-long .msg-body  { padding: 10px 14px !important; }

    /* Texte toujours blanc sur les bulles teintées par la couleur perso de l'expéditeur */
    .chat-msg-row:not(.msg-own) .msg-body .msg-content-wrap,
    .chat-msg-row:not(.msg-own) .msg-body .msg-header span:first-child {
        color: #fff !important;
    }
    .chat-msg-row.msg-own .msg-body .msg-content-wrap,
    .chat-msg-row.msg-own .msg-body .msg-header span {
        color: #fff !important;
    }

    /* En-tête : nom compact ; l'heure inline est masquée dans la bulle */
    .chat-msg-row .msg-header span:first-child {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
    }
    .chat-msg-row .msg-header span:nth-child(2) {
        display: none !important;
    }

    /* Texte du message */
    .msg-content-wrap {
        font-size: 0.92rem !important;
        line-height: 1.4 !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Média (image/GIF/vidéo/post partagé) : le média EST la bulle.
       On retire le fond coloré et le padding pour ne pas avoir une énorme
       bulle avec du vide autour — juste le média arrondi à sa taille naturelle. */
    .chat-msg-row .msg-body:has(.chat-inline-image),
    .chat-msg-row .msg-body:has(.shared-post-preview),
    .chat-msg-row .msg-body:has(.msg-file-card),
    .chat-msg-row .msg-body:has(.msg-emoji-jumbo) {
        background: transparent !important;
        padding: 0 !important;
    }
    .chat-msg-row .msg-body .chat-inline-image {
        display: block !important;
        vertical-align: bottom !important;        /* tue l'espace fantôme sous l'image */
        max-width: min(250px, 64vw) !important;   /* borne haute (largeur) */
        max-height: 240px !important;             /* borne haute (hauteur) */
        width: auto !important;                   /* taille naturelle, ratio conservé */
        height: auto !important;
        margin: 0 !important;
        border: none !important;                  /* retire le contour 1px (« la bordure ») */
        border-radius: 16px !important;
    }
    /* Conteneur média : ÉPOUSE l'image en largeur ET hauteur (fit-content).
       line-height/font-size 0 → supprime l'espace fantôme vertical qui rendait
       le conteneur plus haut que l'image. Bord net, collé au texte (« 2 cheveux »). */
    .chat-msg-row .msg-body .media-container {
        width: fit-content !important;
        height: fit-content !important;
        max-width: min(250px, 64vw) !important;
        margin-top: 2px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 16px !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }
    /* Message 100% emoji → gros emoji (déjà sans bulle via :has ci-dessus) */
    .msg-emoji-jumbo {
        font-size: 2.6em !important;
        line-height: 1.15 !important;
        display: inline-block;
    }
}

/* ─────────────────────────────────────────
   GROUPEMENT DE MESSAGES — Style Discord
   Messages consécutifs du même auteur (<7 min)
   → header masqué, avatar invisible, hover-time
───────────────────────────────────────── */

/* Séparateur de jour */
.day-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 16px;
    color: var(--text-secondary, var(--text-muted));
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
/* Desktop : légèrement plus petit et plus marqué, marge resserrée (24px
   générique jugée trop grande sur PC) — placé APRÈS la règle générique
   ci-dessus pour gagner la cascade. */
@media (min-width: 769px) {
    .day-separator {
        margin: 12px 16px;
        font-size: 11px;
        font-weight: 600;
    }
}
.day-separator::before,
.day-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border, var(--border-strong, rgba(255,255,255,0.08)));
}

/* Wrapper avatar : conserve 40px de largeur pour l'alignement horizontal */
.msg-avatar-wrap {
    position: relative;
    width: 40px;
    min-width: 40px;
    flex-shrink: 0;
}

/* Timestamp discret (reçu) visible au survol / tap prolongé */
.msg-hover-time {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: none;
    font-size: 11px;
    color: var(--bubble-timestamp, var(--text-muted));
    opacity: 0.8;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
}

/* Timestamp discret (envoyé) — à droite de la bulle */
.chat-msg-row:not(.msg-own) .msg-hover-time-own { display: none !important; }
.msg-hover-time-own {
    display: none;
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 11px;
    color: var(--bubble-timestamp, var(--text-muted));
    opacity: 0.8;
    white-space: nowrap;
    pointer-events: none;
}

/* Espacement entre groupes (16px) vs dans un groupe (4px) */
.chat-msg-row:not(.msg-grouped) {
    margin-top: 16px !important;
}
/* Grouped : annule le padding vertical du row + le margin-bottom + le margin-top du contenu
   → gap réel entre deux lignes groupées : margin-top (4px) seulement */
.chat-msg-row.msg-grouped {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.chat-msg-row.msg-grouped .msg-content-wrap {
    margin-top: 0 !important;
}

.chat-msg-row.msg-grouped .msg-body .msg-header {
    display: none !important;
}

/* Desktop : espacement Discord — très serré dans un groupe (2px), respiration
   nette entre deux groupes différents (17px). Placé APRÈS le bloc générique
   ci-dessus pour gagner la cascade (même poids !important, priorité au dernier). */
@media (min-width: 769px) {
    .chat-msg-row:not(.msg-grouped) {
        margin-top: 17px !important;
    }
    /* Discord n'ajoute quasiment AUCUNE marge entre deux lignes groupées — l'espacement
       perçu vient uniquement du line-height du texte, pas d'une marge en plus. */
    .chat-msg-row.msg-grouped {
        margin-top: 0 !important;
    }
}

/* Hover-time visible au survol (souris) ou tap prolongé (.msg-time-active, posé en JS) */
.chat-msg-row:hover .msg-hover-time,
.chat-msg-row.msg-time-active .msg-hover-time {
    display: block;
}
.chat-msg-row.msg-own:hover .msg-hover-time-own,
.chat-msg-row.msg-own.msg-time-active .msg-hover-time-own {
    display: block;
}

/* Mobile (bulles, style iMessage) : avatar visible UNIQUEMENT sur le dernier
   message d'une série consécutive (isolé ou "last") — sur "first"/"middle",
   l'espace est conservé (alignement) mais l'avatar est invisible.
   Desktop (Discord) inverse cette règle plus bas : avatar sur le PREMIER. */
.chat-msg-row.msg-pos-first .msg-avatar-wrap,
.chat-msg-row.msg-pos-middle .msg-avatar-wrap {
    align-self: stretch;
}
.chat-msg-row.msg-pos-first:not(.msg-own) .avatar,
.chat-msg-row.msg-pos-middle:not(.msg-own) .avatar {
    visibility: hidden !important;
}

/* Desktop (Discord) : avatar + nom sur le PREMIER message de la série (pas le
   dernier comme sur mobile/iMessage) — cohérent avec le header, déjà affiché
   sur le premier message via la règle .msg-grouped ci-dessus. S'applique aussi
   aux messages "own" (jamais cachés par une règle mobile sur desktop). Doit
   égaler la spécificité des règles mobile ci-dessus (4 classes) pour gagner. */
@media (min-width: 769px) {
    .chat-msg-row.msg-pos-first:not(.msg-own) .avatar,
    .chat-msg-row.msg-pos-first.msg-own .avatar {
        visibility: visible !important;
    }
    .chat-msg-row.msg-pos-middle.msg-own .avatar,
    .chat-msg-row.msg-pos-last:not(.msg-own) .avatar,
    .chat-msg-row.msg-pos-last.msg-own .avatar {
        visibility: hidden !important;
    }

    /* Vrai bug de mise en page (pas juste un réglage d'espacement) : l'avatar
       fait 40px de haut même quand il est invisible (`visibility:hidden`
       conserve sa boîte en layout) — sans ceci, `.msg-avatar-wrap` force
       la ligne entière à faire 40px de haut sur les messages groupés
       (middle/last), même avec margin-top:2px et padding:0. Résultat perçu :
       "l'espace entre les messages est abusé" alors que marge/padding sont
       pourtant bien à 0 — le vrai coupable est la hauteur, pas l'espacement.
       On force le wrapper à 0 pour ces positions : la ligne se limite alors
       à la hauteur réelle du texte. */
    .chat-msg-row.msg-pos-middle .msg-avatar-wrap,
    .chat-msg-row.msg-pos-last .msg-avatar-wrap {
        height: 0 !important;
        min-height: 0 !important;
        align-self: auto !important;
    }
}

/* S'assurer que le header est visible sur les messages normaux (desktop + mobile) */
.chat-msg-row:not(.msg-grouped) .msg-body .msg-header {
    display: flex !important;
    gap: 10px;
    align-items: baseline;
}

/* Coins de bulle adaptatifs selon la position dans la série (cf. buildMessagesHTML) —
   MOBILE UNIQUEMENT : le desktop (Discord) n'a pas de fond de bulle, donc pas de coins. */
@media (max-width: 768px) {
    .chat-msg-row:not(.msg-own).msg-pos-first .msg-body  { border-radius: 18px 18px 18px 6px !important; }
    .chat-msg-row:not(.msg-own).msg-pos-middle .msg-body { border-radius: 6px 18px 18px 6px !important; }
    .chat-msg-row:not(.msg-own).msg-pos-last .msg-body   { border-radius: 6px 18px 18px 18px !important; }
    .chat-msg-row.msg-own.msg-pos-first .msg-body  { border-radius: 18px 18px 6px 18px !important; }
    .chat-msg-row.msg-own.msg-pos-middle .msg-body { border-radius: 18px 6px 6px 18px !important; }
    .chat-msg-row.msg-own.msg-pos-last .msg-body   { border-radius: 18px 6px 18px 18px !important; }
}

/* Mobile : adapter la largeur du wrapper et confirmer le groupement */
@media (max-width: 768px) {
    .msg-avatar-wrap {
        width: 36px !important;
        min-width: 36px !important;
    }
    .chat-msg-row.msg-pos-first .msg-avatar-wrap,
    .chat-msg-row.msg-pos-middle .msg-avatar-wrap {
        align-self: stretch;
    }
    /* Spécificité 0,4,0 pour battre .chat-msg-row .msg-body > .msg-header (0,3,0) */
    .chat-msg-row.msg-grouped .msg-body .msg-header {
        display: none !important;
    }
    .chat-msg-row:not(.msg-grouped) .msg-body .msg-header {
        display: flex !important;
    }
    .chat-msg-row:not(.msg-grouped) {
        margin-top: 16px !important;
    }
    .chat-msg-row.msg-grouped {
        margin-top: 4px !important;
    }
    /* Séparateur de jour, un peu plus compact sur mobile mais toujours 24px verticaux */
    .day-separator {
        margin: 24px 14px !important;
        font-size: 12px !important;
    }
}

/* ─────────────────────────────────────────
   MOBILE bulles — enforcement de cascade
   Placé APRÈS le bloc groupement pour gagner les surcharges qui, sinon,
   réafficheraient l'en-tête des messages envoyés / élargiraient la gouttière.
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Gouttière avatar resserrée pour coller aux petites bulles */
    .msg-avatar-wrap {
        width: 28px !important;
        min-width: 28px !important;
    }
    .chat-msg-row.msg-own .msg-avatar-wrap {
        display: none !important;
    }
    /* Message envoyé : pas de nom au-dessus de sa propre bulle */
    .chat-msg-row.msg-own .msg-body .msg-header {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Discussions — raffinement visuel (détails & micro-interactions) — ajouté 2026-07-10
   N'altère PAS la structure : uniquement animation d'entrée + réactions au survol.
   Ne rejoue pas sur mise à jour de réaction/édition (la ligne n'est pas recréée).
   Respecte prefers-reduced-motion (accessibilité).
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes msgRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Apparition douce de chaque message (arrivée live + chargement d'un salon). Court → snappy. */
.chat-msg-row {
    animation: msgRowIn 0.22s ease-out both;
}

/* Avatar : léger relief au survol de la ligne (scopé au chat pour ne pas toucher les autres avatars) */
.chat-msg-row .avatar {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.chat-msg-row:hover .avatar {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

/* Barre d'actions : entrée plus fluide + boutons qui réagissent (survol/clic) */
.msg-actions .msg-act-btn,
.msg-actions button {
    transition: background .12s, color .12s, transform .16s cubic-bezier(.2,.8,.3,1);
}
.msg-act-btn:hover,
.msg-actions button:hover {
    transform: translateY(-1px) scale(1.08);
}
.msg-act-btn:active,
.msg-actions button:active {
    transform: scale(0.9);
}

/* Réactions : petit relief au survol + retour tactile au clic */
.reaction-pill:hover {
    transform: translateY(-1px) !important;
}
.reaction-pill:active {
    transform: scale(0.94) !important;
}

/* Réponse citée : survol plus vivant */
.msg-reply-preview {
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.msg-reply-preview:hover {
    transform: translateX(2px);
}

/* Accessibilité : aucune animation si l'utilisateur la refuse au niveau système */
@media (prefers-reduced-motion: reduce) {
    .chat-msg-row { animation: none; }
    .chat-msg-row:hover .avatar,
    .msg-act-btn:hover, .msg-actions button:hover,
    .msg-act-btn:active, .msg-actions button:active,
    .reaction-pill:hover, .reaction-pill:active,
    .msg-reply-preview:hover { transform: none; }
}

/* ── Modale de choix d'épinglage (message + sondage) — FIX 2026-07-11 ──────────
   Les classes .modal-settings-* étaient utilisées par showPinChoiceModal() sans
   AUCUNE règle CSS → la modale se rendait hors écran (pas de position:fixed), d'où
   « clic sur 📌 = rien ne s'ouvre ». On fournit le socle overlay + carte. Le reste
   (padding, boutons) reste géré par les styles inline des deux modales. */
.modal-settings-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 9999;
    animation: pin-modal-fade 0.15s ease;
}
@keyframes pin-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-settings-content {
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    animation: pin-modal-pop 0.18s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pin-modal-pop {
    from { transform: translateY(8px) scale(0.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* ── Menu d'actions message sur mobile (appui long) — 2026-07-11 ───────────────
   Bottom sheet ouvert par openMsgActionSheet(). Débloque épingler/répondre/réagir/
   copier au doigt, là où la barre .msg-actions (hover souris) est inatteignable. */
.msg-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.18s ease;
}
.msg-sheet-overlay.open { background: rgba(0, 0, 0, 0.5); }
.msg-sheet {
    width: 100%;
    max-width: 520px;
    background: var(--bg-elevated);
    border-radius: 18px 18px 0 0;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(.2, .9, .3, 1);
}
.msg-sheet-overlay.open .msg-sheet { transform: translateY(0); }
.msg-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: var(--border-strong);
    margin: 6px auto 12px;
}
.msg-sheet-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    margin: 2px 0;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-heading);
    font-size: 1.05em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.msg-sheet-btn:active { background: var(--bg-hover); }
.msg-sheet-ic { font-size: 1.2em; width: 24px; text-align: center; }
.msg-sheet-cancel {
    justify-content: center;
    margin-top: 8px;
    color: var(--text-muted);
    font-weight: 700;
    border-top: 1px solid var(--border-strong);
    border-radius: 0;
}
/* Supprime le callout natif iOS sur les messages : l'appui long les remplace */
@media (max-width: 768px) {
    .chat-msg-row { -webkit-touch-callout: none; }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION MOBILE — indicateur glissant, FAB créer, transitions
   ═══════════════════════════════════════════════════════════ */

/* Animations d'entrée de vue — transition progressive au swipe / à la navigation */
@keyframes mobViewInRight { from { transform: translateX(26px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes mobViewInLeft  { from { transform: translateX(-26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.mob-view-in-right { animation: mobViewInRight 0.26s cubic-bezier(.22,.61,.36,1); }
.mob-view-in-left  { animation: mobViewInLeft  0.26s cubic-bezier(.22,.61,.36,1); }

@media (max-width: 768px) {
    /* Barre = référentiel de l'indicateur (déjà position:fixed) */
    #mob-nav-indicator {
        position: absolute;
        top: 0;
        left: calc(var(--mob-idx, 1) * (100% / 6) + (100% / 12) - 2px);   /* 6 onglets de 1/6 → centré sous l'actif */
        width: 4px;
        height: 2px;
        background: var(--accent);
        border-radius: 2px;
        transition: left 0.28s cubic-bezier(.22,.61,.36,1);
        pointer-events: none;
        z-index: 3;
    }
    /* Pendant le glissement : pas de transition → suit le doigt en direct */
    #mob-nav-indicator.dragging { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   HEADER DU FIL — logo/onglets/publier + auto-masquage (mobile)
   ═══════════════════════════════════════════════════════════ */
/* Desktop : logo & bouton publier masqués (on publie via le mini-composer) */
.hub-logo { display: none; }
.hub-publish-btn { display: none; }
.hub-tabs { display: flex; align-items: center; gap: 14px; }

@media (max-width: 768px) {
    /* Barre minimaliste : logo à gauche · onglets centrés · publier à droite */
    #hub-header {
        min-height: 0 !important;
        height: 50px;
        overflow: hidden;
        padding: 0 12px !important;
        gap: 0 !important;
        justify-content: space-between !important;
        transition: height 0.28s ease, border-color 0.28s ease;
        will-change: height;
    }
    /* Auto-masquage : collapse de hauteur (le contenu remonte, pas de trou) */
    #hub-header.hub-hidden {
        height: 0 !important;
        border-bottom-color: transparent;
    }
    .hub-logo {
        display: block;
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        object-fit: cover;
    }
    .hub-tabs {
        flex: 1;
        justify-content: center;
        gap: 12px;
    }
    .hub-publish-btn {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border);
        cursor: pointer;
        padding: 0;
    }
    .hub-publish-btn:active { transform: scale(0.92); }
}

/* ── Icônes rondes du header feed (recherche, retour) ── */
.hub-header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hub-header-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
    filter: none;
}

/* ── Barre de recherche plein écran (remplace l'entête normale) ── */
#hub-search-bar .hub-filter-search-wrap {
    background: var(--bg-elevated);
    border-color: var(--border);
}
#hub-search-bar .hub-filter-search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-hover, var(--accent));
}

/* ── Découverte recherche (vide) : recherches récentes + tendances ── */
#hub-search-discovery {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}
.hub-search-section + .hub-search-section {
    margin-top: 32px;
}
.hub-search-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}
.hub-search-recent-list {
    display: flex;
    flex-direction: column;
}
.hub-search-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 4px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.hub-search-recent-item:last-child { border-bottom: none; }
.hub-search-recent-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hub-search-recent-item button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    margin: 0;
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.hub-search-recent-item button:hover { color: var(--text-primary); }
.hub-search-trending-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hub-search-empty-msg {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODE « STELLION MESSAGE » (app lite) — activé par html.lite-mode
   Ne garde que la messagerie (messages + groupes + amis) + un menu profil.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Plus de barre serveurs (desktop) ni entrées feed/loops/découverte */
html.lite-mode #nexus-bar { display: none !important; }
/* Barre du bas toujours présente (même sur grand écran) mais réduite à Messages + Profil */
html.lite-mode #mobile-nav { display: flex !important; }
html.lite-mode #mob-nav-indicator,
html.lite-mode #mob-btn-servers,
html.lite-mode #mob-btn-home,
html.lite-mode #mob-btn-discover,
html.lite-mode #mob-btn-loops { display: none !important; }
/* Les deux boutons restants se partagent la largeur proprement */
html.lite-mode #mobile-nav .mob-nav-btn { flex: 1 1 50% !important; }
/* Filet de sécurité : masquer feed/loops/stories/serveur s'ils sont invoqués */
html.lite-mode #hub-view,
html.lite-mode #loop-view,
html.lite-mode #nexus-view,
html.lite-mode #discover-view,
html.lite-mode #servers-drawer { display: none !important; }
/* Entête du panneau messages : logo + nom de l'app en lite */
html.lite-mode .stellion-msg-brand { display: flex !important; }
.stellion-msg-brand { display: none; align-items: center; gap: 8px; }
.stellion-msg-brand img { width: 26px; height: 26px; object-fit: contain; }