/* ============================================================
   Mise en page réelle : .app-body place .main-content (section) et
   .friends-panel (aside) côte à côte. Quand l'aside se réduit (icône
   amis), .main-content reprend toute la largeur — simple effet de
   flex:1, sans code supplémentaire.
   ============================================================ */
.app-body {
    display: flex;
    align-items: stretch;
    /* [CORRECTION] var(--navbar-height) (style.css) au lieu de 3.6rem
       (57.6px) codé en dur ici — cette valeur ne correspondait déjà pas à
       celle utilisée par .salon-page (48px) pour le même espace. */
    min-height: calc(100vh - var(--navbar-height));
}

.main-content {
    flex: 1;
    min-width: 0;
    background: var(--paper);
    /* Coin supérieur droit arrondi — le point de jonction entre la navbar
       (au-dessus) et l'aside (à droite). overflow:hidden est nécessaire
       pour que ce coin découpe vraiment le contenu (fond des pages) plutôt
       que de laisser leurs coins carrés dépasser la courbe. */
    border-top: 0.1rem solid var(--border-color);
    border-right: 0.1rem solid var(--border-color);
    border-top-right-radius: var(--radius);
    overflow: hidden;
}

/* Panneau "Mes contacts" — vraie colonne latérale (aside), pas un popup
   flottant. Réduite (icône amis), sa largeur passe à 0 avec la même
   transition (durée/courbe) que la barre de recherche des salons ;
   .main-content reprend alors automatiquement toute la largeur. */
.friends-panel {
    width: 280px;
    flex-shrink: 0;
    background: var(--white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.5s ease-out;
}

.friends-panel.minimized {
    width: 0;
}

.friends-panel .header {
    flex-shrink: 0;
    padding: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

/* Menu ⋮ : ajouter un ami + statut de présence */
.friends-menu-wrapper {
    position: relative;
}
.btn-friends-menu {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
}

.btn-friends-menu:hover {
    color: var(--orange-dark);
}
.friends-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1010;
    min-width: 180px;
    padding: 4px 0;
}
.friends-menu-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
}
.friends-menu-dropdown .menu-item:hover {
    background: #f5f5f5;
}
.status-select-label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-select-label select {
    flex: 1;
}

.friends-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    cursor: pointer;
}

.friend-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.friend-info {
    cursor: pointer; /* clic → ouvrir le chat ; clic droit → menu (voir profil/supprimer) */
}

.friend-avatar-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.friend-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid transparent;
}

/* Badge "messages non lus" — un message reçu n'ouvre plus automatiquement
   la fenêtre de conversation (voir registerMessengerHandler, messenger.js),
   juste ce badge tant qu'on n'a pas ouvert/remis au premier plan la
   fenêtre du contact concerné (remis à 0 dans openConversation()). */
.unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--icon-logout);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--white);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-online { background: #2ecc71; }
.status-offline { background: #bbb; }

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

/* Menu contextuel (clic droit) d'un contact — réutilise le look de
   .user-dropdown mais positionné à l'endroit exact du clic (position:fixed,
   top/left fournis en inline par Vue) plutôt qu'ancré à un bouton. */
.friend-context-menu {
    position: fixed;
    right: auto;
}

/* Menu d'un participant de salon (voir openParticipantMenu, salon.js) —
   même principe que .friend-context-menu ci-dessus : position:fixed aux
   coordonnées exactes du clic (gauche ou droit), pour ne jamais être coupé
   par .main-content (overflow:hidden) ni par .participants-panel. */
.participant-dropdown {
    position: fixed;
    right: auto;
    transform: none;
}

/* Police plus petite pour ce menu (profil/ami/rôles/expulser/bannir), qui
   contient davantage d'options que les autres menus déroulants. */
.participant-dropdown li button {
    font-size: 0.8rem;
}

/* Rôles (sous-menu) : mêmes couleurs que .affiliation-admin/member/none sur
   la liste des participants elle-même (voir plus haut dans ce fichier).
   Sélecteur aussi précis que ".user-dropdown li button" (style.css) — sinon
   cette dernière règle (même chargée avant) l'emporte quand même, étant
   plus spécifique (deux sélecteurs d'élément contre une seule classe). */
.user-dropdown li button.role-option-admin,
.user-dropdown li button.role-option-member,
.user-dropdown li button.role-option-none {
    font-weight: 600;
    font-size: 0.75rem;
}

.user-dropdown li button.role-option-admin {
    color: #43a047;
}

.user-dropdown li button.role-option-member {
    color: #fb8c00;
}

.user-dropdown li button.role-option-none {
    color: #9e9e9e;
}


/* ============================================================
   Dock de conversations — fenêtres flottantes, grille CSS3
   ============================================================ */
.chat-dock {
    position: relative;
}

.chat-window {
    position: fixed;
    width: 328px;
    height: 582px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    z-index: 1001;
    overflow: hidden;
    transition: grid-template-columns 0.6s ease-out; /* élargissement du champ de saisie */

    display: grid;
    /* [AJUSTÉ] "quit" occupe les 2 dernières colonnes (72+40 = 112px) pour les
       boutons appel, vidéo, réduire et fermer. En bas : les 2 premières colonnes
       (40+46 = 86px) portent les outils (papier-peint, trombone, micro), le champ
       de saisie s'étend sur la colonne du milieu + 72px, le bouton envoyer garde 40px. */
    grid-template-columns: 40px 46px 1fr 72px 40px;
    /* [AJUSTÉ] dernière ligne à 60px : input de 48px + 6px de marge en haut et en bas. */
    grid-template-rows: 48px 1fr auto;
    grid-template-areas:
        "icon   pseudo  pseudo  quit    quit"
        "chatarea chatarea chatarea chatarea chatarea"
        "tools  tools   textmsg textmsg sendmsg";
}

/* En train d'écrire : la 2e colonne se réduit à 0 (les outils ne gardent que le
   bouton « + » de la 1re colonne) et le champ s'élargit vers la gauche. Les
   zones restent les mêmes : seule la largeur de colonne change, ce qui permet la
   transition (durée réglée dans .chat-window ; les « areas » ne s'animeraient pas). */
.cw-composing {
    grid-template-columns: 40px 0px 1fr 72px 40px;
}

.chat-window.minimized {
    height: 48px;
    grid-template-rows: 48px;
    grid-template-areas: "icon pseudo pseudo quit quit";
}

/* Effet de vague pendant le déplacement */
@keyframes wave-pulse {
    0%   { box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 0 rgba(243,107,33,0.5); }
    70%  { box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 16px rgba(243,107,33,0); }
    100% { box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 0 rgba(243,107,33,0); }
}
.chat-window.dragging {
    animation: wave-pulse 0.9s ease-out infinite;
    cursor: grabbing;
}
.chat-window.dragging .cw-pseudo {
    cursor: grabbing;
}

.cw-icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange);
}
.cw-icon img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.cw-pseudo {
    grid-area: pseudo;
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: move;
    user-select: none;
}

/* [AJUSTÉ] flex + gap pour aligner 3 boutons (appel + réduire + fermer) côte à côte */
.cw-quit {
    grid-area: quit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--orange);
}
.cw-quit button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--white);
    font-size: 1em;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.cw-quit button:last-child {
    margin-right: 6px;
}
.cw-quit button:hover {
    opacity: 1;
}

.cw-chatarea {
    grid-area: chatarea;
    overflow-y: auto;
    padding: 6px 8px;
    background: var(--paper);
}

/* Papier-peint des messages privés : un calque posé derrière la zone des messages
   ET la zone de saisie (lignes 2 et 3 de la fenêtre), motif sous un voile de la
   couleur du fond (même réglage que le mobile, --wall-veil-white de config.php).
   Les zones marquées cw-clear deviennent transparentes pour le laisser voir ;
   le champ d'écriture reste opaque. */
.cw-wall-layer {
    grid-row: 2 / 4;
    grid-column: 1 / -1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--paper) var(--wall-veil-white, 80%), transparent), color-mix(in srgb, var(--paper) var(--wall-veil-white, 80%), transparent)),
        var(--wall-image);
}

.cw-textmsg {
    grid-area: textmsg;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 6px;
    background: var(--white);
    border-top: 1px solid var(--line);
}
/* Champ : 1 ligne au repos, grandit avec le texte jusqu'à 6 lignes (js/chatdock.js,
   fitInputs), puis défile. */
.cw-textmsg .cw-input {
    display: block;
    width: 100%;
    min-height: 48px;
    max-height: 158px;
    padding: 13px 44px 13px 12px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    line-height: 22px;
    resize: none;
    overflow-y: hidden;
    transition: background-color 0.2s ease;
}
.cw-textmsg .cw-input:focus {
    outline: none;
    background: var(--white);
}

/* Pendant l'écriture le champ commence plus à gauche (colonne 2 au lieu de 3) :
   les fenêtres qui s'ouvrent au-dessus se recalent sur le bord de la fenêtre. */
.cw-composing .cw-textmsg .m-wall-picker {
    left: -32px;
}
.cw-composing .cw-attach .emoji-picker-panel {
    left: -24px;
}

/* Outils à gauche de la zone de saisie : papier-peint, trombone, micro (rouge
   pendant l'enregistrement). */
.cw-tools {
    grid-area: tools;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 15px;
    background: var(--white);
    border-top: 1px solid var(--line);
}
.cw-tools-list {
    display: flex;
}
/* Outils ouverts pendant l'écriture : petite pastille au-dessus du bouton « + » */
.cw-tools-pop {
    position: absolute;
    left: 6px;
    bottom: calc(100% + 6px);
    z-index: 3;
    padding: 4px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
}
.cw-tools-plus,
.cw-tools-list > button {
    width: 28px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
}
.cw-tools-plus:hover,
.cw-tools-list > button:hover {
    color: var(--orange);
}
.cw-tools-list > button.recording {
    color: #d93025;
}

/* Smiley DANS le champ, à droite : la marge négative le fait recouvrir la fin du
   champ. Pas de position:absolute ici, pour que la fenêtre des émojis se cale sur
   toute la largeur de la fenêtre (elle déborde du champ vers la gauche et la droite). */
.cw-attach {
    flex-shrink: 0;
    margin-left: -42px;
    margin-bottom: 9px;
    display: flex;
}
.cw-attach .emoji-picker-btn {
    width: 30px;
    height: 30px;
}
/* Le conteneur du bouton ne doit pas être le repère de la fenêtre des émojis
   (sinon elle ne ferait que 160 px) : c'est la zone de saisie qui l'est. */
.cw-attach .emoji-picker-wrapper {
    position: static;
}
.cw-attach .emoji-picker-panel {
    left: -70px;
    right: -32px;
    width: auto;
}

.pending-file {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 24px;
    color: var(--muted);
}
.pending-file button {
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
}
.pending-file button:hover {
    color: var(--orange);
}
.pending-thumb {
    display: block;
    height: 56px;
    max-width: 96px;
    object-fit: contain;
    border-radius: 6px;
}
/* Sélecteur de papier-peint : aligné sur le bord gauche de la fenêtre (8 px de
   marge) ; calé à droite du champ il sortait de la fenêtre et était coupé. */
.cw-textmsg .m-wall-picker {
    left: -78px;
    right: auto;
}
.cw-textmsg .pending-file {
    position: absolute;
    left: 6px;
    bottom: calc(100% + 6px);
    z-index: 2;
}
.salon-chat-main .pending-file {
    align-self: flex-start;
    margin: 0 20px 8px;
}

.message-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
}
.message-audio {
    display: block;
    max-width: 100%;
    height: 36px;
    border-radius: 999px;
    overflow: hidden;
}
/* Lecteur des messages vocaux (js/voiceplayer.js) : pas de fond propre, il prend
   celui de la bulle ; bouton, barre et durée suivent la couleur du texte. */
.voice-player {
    width: 220px;
    max-width: 60vw;
    display: flex;
    align-items: center;
    gap: 8px;
}
.voice-play {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.voice-bar {
    flex: 1;
    min-width: 0;
    accent-color: currentColor;
    cursor: pointer;
}
.voice-time {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.message-gone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    opacity: 0.7;
}
.message-file {
    color: inherit;
    text-decoration: underline;
}

.cw-sendmsg {
    grid-area: sendmsg;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    background: var(--white);
    border-top: 1px solid var(--line);
}
.cw-sendmsg button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cw-sendmsg button:hover {
    color: var(--orange-dark);
}

/* Avec un papier-peint (après les règles des zones, pour l'emporter) : la zone des
   messages est transparente ; les bandes de la rangée 3 (smileys, champ, envoyer)
   laissent voir le motif à travers, comme les bandes du mobile
   (--wall-bar-white = $WALLPAPER_BAR_TRANSPARENCY de config.php). */
.cw-clear {
    background: transparent;
}

.cw-bar-wall {
    background: color-mix(in srgb, var(--white) var(--wall-bar-white, 45%), transparent);
}

/* Alignement des messages : les miens à droite, ceux de l'interlocuteur
   à gauche (avec son avatar, jamais le mien). Espacement resserré par
   défaut entre messages consécutifs d'un même expéditeur (regroupés en
   un même bloc visuel) — un espace plus large est ajouté en fin de
   groupe (.block-end), quand l'expéditeur change ou en fin de fil. */
.message-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 2px;
}
.message-row.block-end {
    margin-bottom: 10px;
}
.message-row.theirs {
    justify-content: flex-start;
}
.message-row.own {
    justify-content: flex-end;
}

.message-row .message-avatar,
.message-avatar-spacer {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.message-row .message-avatar {
    border-radius: 50%;
    object-fit: cover;
}

/* Ligne de l'heure : sous le message, à droite, DANS la bulle (heure + coches « envoyé /
   lu » pour mes messages privés). Partagée par le salon, la fenêtre privée du bureau et
   le mobile. */
.msg-meta {
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    font-size: 0.7rem;
    line-height: 1;
    color: color-mix(in srgb, currentcolor 60%, transparent); /* discret ; les coches vertes restent vives */
    white-space: nowrap;
}

/* Coches : grises = envoyé, vertes = lu. */
.msg-ticks {
    font-size: 0.95rem;
}

.msg-ticks-read {
    color: #2ecc71;
}

.message-bubble {
    max-width: 70%;
    padding: 6px 10px;
    border-radius: 12px;
    word-break: break-word;
}
.message-row.theirs .message-bubble {
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink);
}
.message-row.theirs.block-end .message-bubble {
    border-bottom-left-radius: 2px;
}
.message-row.own .message-bubble {
    background: var(--orange);
    color: var(--white);
}
.message-row.own.block-end .message-bubble {
    border-bottom-right-radius: 2px;
}

/* Messages groupés (même expéditeur qui se suit) : coins de jonction à 8 px, côté de
   l'avatar / de l'expéditeur (gauche pour l'interlocuteur, droite pour moi). Le coin bas
   du dernier message du groupe reste à 2 px (règles block-end plus haut). */
.message-row.theirs .cw-bubble-inner {
    border-top-left-radius: 8px;
}
.message-row.theirs .cw-bubble-next {
    border-bottom-left-radius: 8px;
}
.message-row.own .cw-bubble-inner {
    border-top-right-radius: 8px;
}
.message-row.own .cw-bubble-next {
    border-bottom-right-radius: 8px;
}

/* Colonne d'un message : bulle + icônes d'action, puis réactions et infobulle
   (mêmes classes m-quote, m-reactions, m-quick, m-reply-bar que le mobile). */
.cw-msg-col {
    min-width: 0;
    max-width: 82%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cw-msg-col-own {
    align-items: flex-end;
}
.cw-msg-line {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
}
.message-row.own .cw-msg-line {
    flex-direction: row-reverse;
}
.cw-msg-col .message-bubble {
    max-width: none;
    min-width: 0;
}
.cw-msg-actions {
    flex-shrink: 0;
    display: flex;
}
.cw-msg-action {
    width: 22px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cw-msg-action:hover {
    color: var(--orange);
}
.cw-quote-image {
    width: auto;
    height: auto;
    max-width: 100%;
    margin-top: 4px;
    align-self: flex-start;
    border-radius: 6px;
    opacity: var(--quote-image-opacity, 0.25);
}
/* Barre « Répondre à… » et fichier en attente : posés PAR-DESSUS le bas de la conversation
   (au-dessus de la zone de saisie) ; on ajoute autant de marge en bas de la conversation
   pour que le dernier message ne soit pas recouvert. */
.chat-window.cw-replying .cw-chatarea {
    padding-bottom: 46px;
}
.chat-window.cw-pending .cw-chatarea {
    padding-bottom: 88px;
}

.cw-textmsg .cw-reply-bar {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: calc(100% + 6px);
    z-index: 2;
    margin: 0;
}
.cw-reply-cancel {
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--white);
    cursor: pointer;
}

/* Au lieu du texte "✓✓ Lu" : petit avatar de l'interlocuteur, affiché à
   côté de MON message une fois qu'il/elle l'a lu. */
.read-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-end;
}

/* En-tête de session — date/heure affichée une seule fois à l'ouverture
   de la conversation, avec une ligne 1rem dessous. */
.session-header {
    text-align: center;
    font-size: 0.75em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.session-divider {
    height: 1rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.5rem;
}


/* ============================================================
   Fiche profil — popup au clic sur un avatar
   ============================================================ */
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.profile-modal {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 260px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.profile-modal .btn-close-popup {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1em;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 3px solid transparent;
}

/* Couleur selon genre/orientation déclarés (voir avatarBorderClass() dans
   avatars.js) — bleu/rose, inversés pour un homme gay ou une femme
   lesbienne. Générique : s'applique à n'importe quel avatar de l'app
   (participants, contacts, messages…), chacun gardant sa propre taille via
   sa classe de base (qui doit prévoir un border transparent de 3px). */
.avatar-border-blue {
    border-color: var(--avatar-border-blue) !important;
}

.avatar-border-pink {
    border-color: #e0679c !important;
}

/* Homme gay / femme lesbienne : moitié bleu / moitié rose, plutôt qu'une
   inversion complète. Fonctionne car l'avatar est une <img> (contenu
   remplacé qui recouvre entièrement sa content-box) — le dégradé n'est donc
   visible que dans l'anneau transparent de la bordure (border-box), et suit
   le border-radius circulaire de l'avatar.
   conic-gradient(from top, sens horaire) : 0deg-180deg = moitié droite,
   180deg-360deg = moitié gauche. */
.avatar-border-half-blue-pink {
    /* Homme gay : bleu à gauche, rose à droite. */
    border-color: transparent !important;
    background: conic-gradient(#e0679c 0deg 180deg, var(--avatar-border-blue) 180deg 360deg) border-box !important;
}

.avatar-border-half-pink-blue {
    /* Femme lesbienne : rose à gauche, bleu à droite. */
    border-color: transparent !important;
    background: conic-gradient(var(--avatar-border-blue) 0deg 180deg, #e0679c 180deg 360deg) border-box !important;
}

/* Bisexuel(le) : split haut/bas plutôt que gauche/droite (pour se
   distinguer visuellement des cas gay/lesbienne ci-dessus). "from -90deg"
   décale le point de départ du dégradé au point gauche du cercle, pour que
   0deg-180deg couvre la moitié HAUTE (et non plus la moitié droite). */
.avatar-border-half-pink-top-blue-bottom {
    /* Femme bisexuelle : rose en haut, bleu en bas. */
    border-color: transparent !important;
    background: conic-gradient(from -90deg, #e0679c 0deg 180deg, var(--avatar-border-blue) 180deg 360deg) border-box !important;
}

.avatar-border-half-blue-top-pink-bottom {
    /* Homme bisexuel : bleu en haut, rose en bas. */
    border-color: transparent !important;
    background: conic-gradient(from -90deg, var(--avatar-border-blue) 0deg 180deg, #e0679c 180deg 360deg) border-box !important;
}

.avatar-border-half-blue-grey {
    /* Orientation "autre" (homme ou femme) : même sens que gay (bleu à
       gauche), mais gris à droite au lieu de rose. */
    border-color: transparent !important;
    background: conic-gradient(#9e9e9e 0deg 180deg, var(--avatar-border-blue) 180deg 360deg) border-box !important;
}


/* ============================================================
   Appels audio/vidéo — bannière d'erreur, bannière entrante, fenêtre active
   ============================================================ */
.call-error-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b91c1c;
    font-size: 0.88rem;
    z-index: 1250;
}
.call-error-toast .btn-close-popup {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.9em;
    line-height: 1;
    flex-shrink: 0;
}

.incoming-call-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1200;
}
.incoming-call-banner .call-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.incoming-call-info {
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
    margin-right: 8px;
}
.btn-call-accept, .btn-call-decline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85em;
}
.btn-call-accept { background: #2ecc71; color: #fff; }
.btn-call-decline { background: #e74c3c; color: #fff; }

.active-call-window {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #1c1c1c;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    width: 360px;
    z-index: 1200;
    overflow: hidden;
}
.active-call-window.dragging {
    cursor: grabbing;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.active-call-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    cursor: move;
    user-select: none;
}
.active-call-header .call-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.call-status {
    margin-left: auto;
    font-size: 0.75em;
    color: #bbb;
}
.call-video-area {
    position: relative;
    background: #000;
    height: 220px;
}
.remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.local-video {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 90px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-call-hangup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: none;
    background: #e74c3c;
    color: #fff;
    cursor: pointer;
    font-size: 0.9em;
}