/* ═══════════════════════════════════════════════════════════
   RUSTCORE — Style v2.2  (Ardoise × Jade — Haut contraste)
   Typographie : Inter + JetBrains Mono
   Thème : Sombre / Clair — WCAG AA compliant
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   VARIABLES — MODE SOMBRE
───────────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* Fonds — échelonnement net pour distinguer les couches */
    --bg-darker: #0b0e12;
    --bg-dark: #111419;
    --bg-base: #151920;
    --bg-hover: #1d2330;
    --bg-elevated: #202836;

    /* Textes — contraste élevé, ratio ≥7:1 sur bg-base */
    --text-heading: #edf2ee;
    /* quasi-blanc légèrement vert : 13:1 */
    --text-main: #c8d4c9;
    /* gris-vert clair : 8.5:1           */
    --text-muted: #8ca48e;
    /* muted lisible : 4.6:1             */
    --text-subtle: #4d5e50;
    /* placeholders discrets             */

    /* Jade — plus lumineux pour bien ressortir sur fond sombre */
    --accent: #35b58e;
    --accent-light: #4ecfa6;
    --accent-glass: rgba(53, 181, 142, 0.14);
    --accent-glow: rgba(53, 181, 142, 0.30);

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

    /* Statuts */
    --online: #4cc882;
    --idle: #d9a830;
    --dnd: #e05e52;
    --offline: #5a6e5c;

    /* Bordures — clairement visibles sans être agressives */
    --border: rgba(200, 212, 201, 0.14);
    --border-strong: rgba(200, 212, 201, 0.26);

    /* 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, 14, 18, 0.90);
    --glass-border: rgba(200, 212, 201, 0.15);

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

/* ─────────────────────────────────────────
   VARIABLES — MODE CLAIR
───────────────────────────────────────── */
[data-theme="light"] {
    /* Fonds laiteux chauds — différenciation nette entre couches */
    --bg-darker: #dedad4;
    --bg-dark: #eae6e0;
    --bg-base: #f4f2ee;
    --bg-hover: #e8e4de;
    --bg-elevated: #ffffff;

    /* Textes — ratio ≥ 8:1 sur bg-base */
    --text-heading: #111a12;
    /* quasi-noir verdâtre : 14:1 */
    --text-main: #2a352b;
    /* très sombre lisible : 9.5:1 */
    --text-muted: #526054;
    /* secondaire notable : 5.5:1  */
    --text-subtle: #8fa48f;
    /* placeholders clairs         */

    /* Jade ajusté pour fond clair — ratio 4.7:1 */
    --accent: #177a5c;
    --accent-light: #1e9c74;
    --accent-glass: rgba(23, 122, 92, 0.10);
    --accent-glow: rgba(23, 122, 92, 0.22);

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

    /* Statuts */
    --online: #1e9e5c;
    --idle: #b87d08;
    --dnd: #c03c32;
    --offline: #809080;

    /* Bordures — bien marquées pour structurer l'UI */
    --border: rgba(30, 50, 32, 0.13);
    --border-strong: rgba(30, 50, 32, 0.24);

    /* Ombres douces mais perceptibles */
    --shadow-sm: 0 1px 3px rgba(10, 20, 12, 0.08);
    --shadow-md: 0 3px 12px rgba(10, 20, 12, 0.12);
    --shadow-lg: 0 8px 32px rgba(10, 20, 12, 0.15);

    /* Verre */
    --glass-bg: rgba(244, 242, 238, 0.94);
    --glass-border: rgba(30, 50, 32, 0.13);
}

/* 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: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--text-main);
    overflow: hidden;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    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);
}

.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: #fff;
    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(--dnd);
    color: white;
    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;
    gap: 10px;
    margin-bottom: 18px;
}

.login-brand-name {
    font-size: 1.4rem;
    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);
}

/* ─────────────────────────────────────────
   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: white;
    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: white;
    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%;
}

/* ─────────────────────────────────────────
   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;
    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;
}

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

.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: var(--accent) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: 0 2px 10px var(--accent-glow);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;
}

.send-btn:hover {
    transform: scale(1.1) !important;
    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: white;
    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: 700;
    color: white;
    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: 80px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--online);
}

.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: 250px;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

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

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid 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: 40px;
    color: white;
    font-weight: bold;
    transition: border-color 0.3s;
    z-index: 10;
}

.profile-name-box {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-display-name {
    font-size: 2em;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0;
    letter-spacing: -0.02em;
}

.profile-username {
    font-size: 1em;
    color: var(--text-muted);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.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;
    width: 38px;
    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-date {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-top: 12px;
}

/* 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: center;
    padding: 20px;
}

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

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

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

/* ── 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), #2f6fdb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    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 */
.nx-icon-btn::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    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;
}

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

/* 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) */
    .profile-banner {
        height: 120px !important;
    }

    .profile-avatar-large {
        width: 80px !important;
        height: 80px !important;
        margin-top: -40px !important;
        border-width: 4px !important;
    }

    .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 > div:first-child span {
        color: #fff !important;
    }

    /* Masquer nom + heure dans la bulle (info déjà dans l'avatar/contexte) */
    .chat-msg-row .msg-body > div:first-child {
        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 {
    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 {
    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 .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);
}


@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: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: default;
}

.post-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

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

/* 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: #fff;
    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);
}

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

/* ── 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;
    overflow-y: hidden;
    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: white;
    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 — 5 ONGLETS INSTAGRAM-STYLE
───────────────────────────────────────── */
@media (max-width: 768px) {
    #mobile-nav {
        height: 47px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: var(--bg-darker) !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-muted);
        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;
    }

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

    .mob-nav-btn.active .mob-icon-filled {
        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: white !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: white !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;
    }

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

/* ─────────────────────────────────────────
   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 — actions ne débordent plus sur la bio */
    .profile-name-box {
        flex-direction: column !important;
    }

    .profile-name-box > div:last-child {
        margin-top: 12px !important;
        align-items: flex-start !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .profile-name-box > div:last-child > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .profile-name-box > div:last-child > div button {
        padding: 6px 12px !important;
        font-size: 0.85em !important;
    }

    /* Bouton channels nexus — visible uniquement sur mobile */
    #mob-channels-btn {
        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;
    }

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

/* ─────────────────────────────────────────
   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: var(--bg-hover);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    width: auto;
    margin: 0;
}
.hub-nexus-pill:hover,
.hub-nexus-pill.active {
    background: var(--accent-glass);
    border-color: var(--accent-glow);
    color: var(--accent-light);
    transform: none;
    box-shadow: none;
    filter: none;
}

/* ══════════════════════════════════════════════════════
   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);
}
.post-media-img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}
.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;
    gap: 4px;
    margin-top: 4px;
}

.msg-reactions {
    align-items: flex-start;
}

.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;
}
.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 ──────────────────────────────────────────────────────── */
#discover-view {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-base);
    min-width: 0;
}

.dc-header {
    flex-shrink: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px 0;
}

.dc-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.dc-title {
    margin: 0;
    font-size: 1.15em;
    font-weight: 800;
    color: var(--text-heading);
}

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

.dc-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dc-search-wrap svg {
    position: absolute;
    left: 9px;
    color: var(--text-muted);
    pointer-events: none;
}

.dc-search-input {
    margin: 0 !important;
    padding: 7px 10px 7px 30px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-heading) !important;
    font-size: 0.85em !important;
    outline: none !important;
    box-shadow: none !important;
    width: 200px !important;
    transition: border-color 0.2s, width 0.2s !important;
}

.dc-search-input:focus {
    border-color: var(--accent) !important;
    width: 260px !important;
}

.dc-join-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--accent-glass);
    color: var(--accent);
    border: 1px solid var(--accent-glow);
    cursor: pointer;
    font-size: 0.83em;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.dc-join-btn:hover { background: var(--accent); color: #fff; }

/* Catégories en chips horizontaux */
.dc-cats {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
    flex-wrap: nowrap;
}

.dc-cats::-webkit-scrollbar { display: none; }

.dc-cat {
    padding: 7px 14px;
    border-radius: 8px 8px 0 0;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    user-select: none;
}

.dc-cat:hover { color: var(--text-main); background: var(--bg-hover); }

.dc-cat.active {
    color: var(--text-heading);
    border-bottom-color: var(--accent);
}

/* Grille de cartes */
.dc-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    align-content: start;
    background: var(--bg-base);
}

.dc-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}

.dc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    border-color: var(--accent);
}

.dc-card-banner {
    height: 64px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 12px;
}

.dc-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 3px solid var(--bg-elevated);
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    transform: translateY(23px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

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

.dc-card-body {
    padding: 26px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

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

.dc-card-desc {
    font-size: 0.78em;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}

.dc-card-stats {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.73em;
}

.dc-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

.dc-stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dc-stat-dot.online  { background: #3ba55d; }
.dc-stat-dot.members { background: var(--text-muted); }

/* Skeleton & états */
.dc-skeleton {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    height: 160px;
    animation: dc-pulse 1.5s ease-in-out infinite;
}

@keyframes dc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.dc-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--text-muted);
    gap: 10px;
    text-align: center;
    line-height: 1.6;
}

/* Mobile */
@media (max-width: 768px) {
    .dc-header { padding: 12px 14px 0; }
    .dc-header-top { margin-bottom: 10px; }
    .dc-title { font-size: 1em; }
    .dc-search-input { width: 130px !important; }
    .dc-search-input:focus { width: 170px !important; }
    .dc-grid { padding: 10px 12px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .dc-card-banner { height: 52px; }
    .dc-card-icon { width: 38px; height: 38px; transform: translateY(19px); }
    .dc-card-body { padding: 22px 10px 10px; }
}

/* ─── 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;
    }
}

/* ═══════════════════════════════════════
   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: 16px;
}

/* ── 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: conic-gradient(#f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
    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(--accent-glass);
    border: 2px dashed var(--accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    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 8px;
    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(--accent);
    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;
}

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

/* ── 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;
    }
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .hub-stories-sidebar { display: none; }
    .hub-layout-wrapper { max-width: 640px; }
    .hub-feed-col { max-width: 100%; }
    #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;
}

#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: #0a0a0a;
    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: #111; 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: cover;
    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: 55%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.loop-gradient-bottom {
    position: absolute;
    inset: 0;
    top: 38%;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 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 36px;
    z-index: 3;
    pointer-events: none;
}
.loop-overlay-bottom > * { pointer-events: auto; }

.loop-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.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: white;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.loop-caption {
    color: rgba(255,255,255,0.92);
    font-size: 0.88rem;
    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;
}

/* ── 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: 10px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    z-index: 3;
}

.loop-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 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: 30px; height: 30px; }

.loop-action-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ── Son ────────────────────────────────────────────── */
.loop-sound-btn {
    position: absolute;
    top: 64px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(4px);
}

/* ── 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; }

.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-sound-btn { right: calc(50% - 200px + 14px); }
    .loop-actions   { right: calc(50% - 200px + 10px); }
}