/* ════════════════════════════════════════════════════════════════════════════
   EDUCATED 6 — DISCUSSIONS INTERNES (page « Discussions internes » et bulle)
   Fichier : wwwroot/css/chat-v6.css — chargé en navigation V6 (Pages/_Host.cshtml)
   Composants : NavigationV6/Chat/*.razor — préfixe ed6c-
   Maquette : XafDiscussions (page) et XafBulle (bulle en bas à droite)
   ════════════════════════════════════════════════════════════════════════════ */

.ed6c {
    --c-ink-0: #14122B;
    --c-ink-1: #2B2846;
    --c-ink-2: #4A4766;
    --c-ink-3: #6E6A8A;
    --c-line: #E9E7F3;
    --c-line-2: #EFEEF6;
    --c-soft: #F3F2F9;
    --c-page: #F5F4FA;
    --c-brand: #5351FB;
    --c-brand-dk: #342484;
    --c-brand-50: #EEEEFF;
    --c-ok: #1E9E63;
    --c-bad: #B4233B;
    font-family: "Geist", "Public Sans", system-ui, sans-serif;
    font-size: 13px;
    color: var(--c-ink-0);
    font-variant-numeric: tabular-nums;
}

    .ed6c *, .ed6c *::before, .ed6c *::after { box-sizing: border-box; }
    .ed6c button { font: inherit; color: inherit; }
    /* Cartes (écran lié, fichier) : toujours sur fond blanc, y compris dans une bulle bleue */
    .ed6c .ed6c-card, .ed6c .ed6c-file { color: var(--c-ink-0); }

/* ── Éléments communs ───────────────────────────────────────────────────── */

.ed6c-muted { color: var(--c-ink-3); font-size: 12px; }

.ed6c-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border: 1px solid #E1DEEE; border-radius: 8px;
    background: #FFFFFF; color: var(--c-ink-1);
    font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap;
    transition: background 120ms, border-color 120ms;
}

    /* « .ed6c » devant : l'emporte sur « .ed6c button { color: inherit } » */
    .ed6c .ed6c-btn { color: var(--c-ink-1); }
    .ed6c .ed6c-btn:hover { background: var(--c-soft); }
    .ed6c .ed6c-btn.on { background: var(--c-brand-50); border-color: #CBCAFE; color: var(--c-brand-dk); }
    .ed6c .ed6c-btn:disabled { opacity: .5; cursor: default; }
    .ed6c .ed6c-btn-primary { background: var(--c-brand); border-color: var(--c-brand); color: #FFFFFF; }
    .ed6c .ed6c-btn-primary:hover:not(:disabled) { background: var(--c-brand-dk); border-color: var(--c-brand-dk); color: #FFFFFF; }
    .ed6c .ed6c-btn-danger { color: var(--c-bad); }
    .ed6c .ed6c-btn-danger:hover { background: #FCEBEE; }
    .ed6c .ed6c-btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }

.ed6c-field {
    width: 100%; height: 32px; padding: 0 10px;
    border: 1px solid #E1DEEE; border-radius: 8px; background: #FFFFFF;
    font: inherit; color: var(--c-ink-0); outline: none;
}

    .ed6c-field:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(83, 81, 251, .14); }
    .ed6c-field-sm { width: 170px; height: 30px; }

.ed6c-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--c-brand); color: #FFFFFF;
    font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

.ed6c-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 28px 16px; color: var(--c-ink-3); text-align: center; }
    .ed6c-empty b { color: var(--c-ink-1); font-weight: 600; }
    .ed6c-empty-big { height: 100%; }

.ed6c-error { margin: 8px 12px; padding: 8px 10px; border-radius: 8px; background: #FCEBEE; color: #9A1C31; font-size: 12px; }
.ed6c-unavailable { display: flex; flex-direction: column; gap: 4px; padding: 24px; color: var(--c-ink-2); }
    .ed6c-unavailable b { color: var(--c-ink-0); }

/* Avatars : 6 teintes dérivées de la charte */
.ed6c-av {
    position: relative; flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    background: #EEEEFF; color: #342484;
}

    .ed6c-av.t1 { background: #FFEDE5; color: #A8380F; }
    .ed6c-av.t2 { background: #E6F6EC; color: #15703A; }
    .ed6c-av.t3 { background: #FFF3DC; color: #8A3F06; }
    .ed6c-av.t4 { background: #E8F1FE; color: #1D4F91; }
    .ed6c-av.t5 { background: #F4E8FD; color: #6B2FA3; }
    .ed6c-av-group { border-radius: 10px; }
    .ed6c-av-lg { width: 64px; height: 64px; font-size: 20px; }

.ed6c-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #C9C6D9; box-shadow: 0 0 0 2px #FFFFFF;
}

    .ed6c-dot.on { background: var(--c-ok); }
    .ed6c-av-lg .ed6c-dot { width: 14px; height: 14px; right: 2px; bottom: 2px; }

/* ════════════════════════════════════════════════════════════════════════════
   PAGE : liste | conversation | détail
   ════════════════════════════════════════════════════════════════════════════ */

.ed6c-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) auto;
    height: calc(100vh - 128px);
    min-height: 480px;
    background: #FFFFFF;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    overflow: hidden;
}

body.xaf-size-s .ed6c-page { height: calc(100vh - 112px); }

/* Liste */
.ed6c-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--c-line); background: #FFFFFF; }

.ed6c-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; }
.ed6c-title { margin: 0; font: 600 15px/1.3 "Sora", "Geist", sans-serif; letter-spacing: -.01em; color: var(--c-ink-0); }

.ed6c-search { padding: 0 14px 10px; }
    .ed6c-search input {
        width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
        border: 1px solid #ECEAF5; background: var(--c-soft); font: inherit; color: var(--c-ink-0); outline: none;
    }
    .ed6c-search input:focus { background: #FFFFFF; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(83, 81, 251, .14); }

.ed6c-convs { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }

.ed6c-conv {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 8px; border: 0; border-radius: 10px; background: transparent;
    text-align: left; cursor: pointer;
}

    .ed6c-conv:hover { background: var(--c-soft); }
    .ed6c-conv.on { background: var(--c-brand-50); box-shadow: inset 3px 0 0 var(--c-brand); }

.ed6c-conv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed6c-conv-top { display: flex; align-items: baseline; gap: 8px; }
    .ed6c-conv-top b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-conv-top small { flex: none; font-size: 11px; color: var(--c-ink-3); }
.ed6c-conv-sub { display: flex; align-items: center; gap: 6px; }
.ed6c-prev { flex: 1; min-width: 0; font-size: 12px; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed6c-conv.is-unread .ed6c-prev { color: var(--c-ink-1); font-weight: 500; }
.ed6c-conv.is-unread .ed6c-conv-top small { color: var(--c-brand); font-weight: 600; }
.ed6c-mute { font-size: 11px; opacity: .7; }

/* Nouvelle conversation */
.ed6c-new { display: flex; flex-direction: column; gap: 8px; margin: 0 14px 12px; padding: 10px; border: 1px solid var(--c-line); border-radius: 12px; background: #FBFBFE; }
.ed6c-seg { display: flex; padding: 2px; border-radius: 8px; background: var(--c-soft); }
    .ed6c-seg button { flex: 1; height: 26px; border: 0; border-radius: 6px; background: transparent; font-weight: 600; font-size: 12px; color: var(--c-ink-2); cursor: pointer; }
    .ed6c-seg button.on { background: #FFFFFF; color: var(--c-ink-0); box-shadow: 0 1px 2px rgba(20, 15, 62, .1); }
.ed6c-new-foot { display: flex; align-items: center; gap: 6px; }
    .ed6c-new-foot .ed6c-muted { flex: 1; }

.ed6c-people { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ed6c-people-sm { max-height: 180px; }

.ed6c-person, .ed6c-member {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 6px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
}

    .ed6c-member { cursor: default; }
    .ed6c-person:hover { background: var(--c-soft); }
    .ed6c-person.on { background: var(--c-brand-50); }
    .ed6c-person .ed6c-av, .ed6c-member .ed6c-av { width: 28px; height: 28px; font-size: 10.5px; }
.ed6c-person-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .ed6c-person-t b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-person-t small { font-size: 11px; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed6c-check { width: 16px; color: var(--c-brand); font-weight: 700; }

/* Conversation */
.ed6c-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #FBFBFE; }

.ed6c-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #FFFFFF; border-bottom: 1px solid var(--c-line); }
.ed6c-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .ed6c-head-t b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-head-t small { font-size: 11.5px; color: var(--c-ink-3); }
.ed6c-head-actions { display: flex; align-items: center; gap: 6px; }

/* Détail */
.ed6c-side {
    width: 264px; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px; border-left: 1px solid var(--c-line); background: #FFFFFF;
}

.ed6c-side-person { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 10px; text-align: center; }
    .ed6c-side-person b { margin-top: 6px; font-weight: 600; font-size: 14px; }
    .ed6c-side-person small { font-size: 12px; color: var(--c-ink-2); }
.ed6c-side-h { margin: 10px 0 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.ed6c-side-none { font-size: 12px; color: var(--c-ink-3); }
.ed6c-side-item, .ed6c-side-file {
    display: flex; flex-direction: column; gap: 1px; width: 100%;
    padding: 7px 9px; border: 1px solid var(--c-line); border-radius: 9px; background: #FFFFFF; text-align: left;
}

    .ed6c-side-item { cursor: pointer; }
    .ed6c-side-item:hover { border-color: #CBCAFE; background: var(--c-brand-50); }
    .ed6c-side-item b, .ed6c-side-file b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-side-item small, .ed6c-side-file small { font-size: 11px; color: var(--c-ink-3); }
.ed6c-members { display: flex; flex-direction: column; }
.ed6c-side-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ed6c-side-bottom { margin-top: 14px; }
.ed6c-note { margin: 10px 0 0; padding: 9px 10px; border-radius: 9px; background: var(--c-soft); font-size: 11.5px; color: var(--c-ink-2); line-height: 1.4; }

/* ════════════════════════════════════════════════════════════════════════════
   FIL DE LA CONVERSATION (page et bulle)
   ════════════════════════════════════════════════════════════════════════════ */

.ed6c-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.ed6c-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 2px; }

.ed6c-older { align-self: center; margin-bottom: 8px; height: 26px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 13px; background: #FFFFFF; font-size: 12px; color: var(--c-ink-2); cursor: pointer; }

.ed6c-day { display: flex; justify-content: center; margin: 12px 0 8px; }
    .ed6c-day span { padding: 2px 10px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--c-line); font-size: 11px; font-weight: 600; color: var(--c-ink-3); }

.ed6c-event { align-self: center; margin: 6px 0; font-size: 11.5px; color: var(--c-ink-3); text-align: center; }
    .ed6c-event b { color: var(--c-ink-2); font-weight: 600; }

.ed6c-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; max-width: 78%; }
    .ed6c-row.is-follow { margin-top: 2px; }
    .ed6c-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }
    .ed6c-row .ed6c-av { width: 28px; height: 28px; font-size: 10.5px; }
.ed6c-av-gap { width: 28px; flex: none; }

.ed6c-bub {
    min-width: 0; padding: 8px 11px 6px;
    border-radius: 14px 14px 14px 4px;
    background: #FFFFFF; border: 1px solid var(--c-line);
    box-shadow: 0 1px 1px rgba(20, 15, 62, .03);
}

    .ed6c-row.is-follow .ed6c-bub { border-top-left-radius: 6px; }
    .ed6c-row.is-mine .ed6c-bub { border-radius: 14px 14px 4px 14px; background: var(--c-brand); border-color: var(--c-brand); color: #FFFFFF; }
    .ed6c-row.is-mine.is-follow .ed6c-bub { border-top-right-radius: 6px; }

.ed6c-author { margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--c-brand-dk); }
.ed6c-text { line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
    .ed6c-text a { color: inherit; text-decoration: underline; }
.ed6c-mention { padding: 0 3px; border-radius: 4px; background: var(--c-brand-50); color: var(--c-brand-dk); font-weight: 600; }
.ed6c-row.is-mine .ed6c-mention { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

.ed6c-meta { margin-top: 3px; font-size: 10.5px; color: var(--c-ink-3); text-align: right; }
.ed6c-row.is-mine .ed6c-meta { color: rgba(255, 255, 255, .78); }

/* Carte d'un écran Educated lié */
.ed6c-card {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 220px;
    margin: 6px 0 2px; padding: 8px 10px;
    border: 1px solid var(--c-line); border-radius: 10px; background: #FFFFFF; color: var(--c-ink-0);
    text-align: left; cursor: pointer;
}

    .ed6c-card:hover { border-color: #CBCAFE; background: #FBFBFF; }
.ed6c-card-ico { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--c-brand-50); color: var(--c-brand); display: inline-flex; align-items: center; justify-content: center; }
.ed6c-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .ed6c-card-t b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-card-t small { font-size: 11px; color: var(--c-ink-3); }
.ed6c-card-go { font-size: 11.5px; font-weight: 600; color: var(--c-brand); }

/* Fichiers */
.ed6c-img { display: block; margin: 6px 0 2px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: transparent; cursor: pointer; }
    .ed6c-img img { display: block; max-width: 260px; max-height: 200px; object-fit: cover; }
.ed6c-file {
    display: flex; align-items: center; gap: 9px; min-width: 200px;
    margin: 6px 0 2px; padding: 7px 10px;
    border: 1px solid var(--c-line); border-radius: 10px; background: #FFFFFF; color: var(--c-ink-0); text-align: left; cursor: pointer;
}

    .ed6c-file:hover { border-color: #CBCAFE; }
.ed6c-file-ico { flex: none; min-width: 34px; height: 30px; padding: 0 4px; border-radius: 7px; background: var(--c-soft); color: var(--c-ink-2); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ed6c-file-t { min-width: 0; display: flex; flex-direction: column; }
    .ed6c-file-t b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
    .ed6c-file-t small { font-size: 11px; color: var(--c-ink-3); }

/* « écrit… » */
.ed6c-typing { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px 36px; font-size: 11.5px; color: var(--c-ink-3); }
.ed6c-dots { display: inline-flex; gap: 3px; padding: 7px 9px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--c-line); }
    .ed6c-dots i { width: 5px; height: 5px; border-radius: 50%; background: #A9A5C0; animation: ed6c-blink 1.2s infinite ease-in-out; }
    .ed6c-dots i:nth-child(2) { animation-delay: .15s; }
    .ed6c-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes ed6c-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Saisie */
.ed6c-composer { padding: 10px 14px 12px; background: #FFFFFF; border-top: 1px solid var(--c-line); }
.ed6c-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ed6c-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 4px 0 9px; border-radius: 13px; background: var(--c-brand-50); color: var(--c-brand-dk); font-size: 12px; font-weight: 500; }
    .ed6c-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
    .ed6c-chip button:hover { background: rgba(83, 81, 251, .15); }

.ed6c-input {
    display: block; width: 100%; min-height: 40px; max-height: 160px; resize: none;
    padding: 10px 12px; border: 1px solid #E1DEEE; border-radius: 10px; background: #FFFFFF;
    font: inherit; line-height: 1.4; color: var(--c-ink-0); outline: none;
}

    .ed6c-input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(83, 81, 251, .14); }

.ed6c-tools { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ed6c-tool {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent;
    color: var(--c-ink-2); font-size: 12px; font-weight: 500; cursor: pointer;
}

    .ed6c-tool:hover { background: var(--c-soft); color: var(--c-ink-0); }
.ed6c-hidden-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ed6c-hint { flex: 1; text-align: right; font-size: 11px; color: var(--c-ink-3); padding-right: 6px; }
.ed6c-send { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--c-brand); color: #FFFFFF !important; font-weight: 600; font-size: 12.5px; cursor: pointer; }
    .ed6c-send:hover:not(:disabled) { background: var(--c-brand-dk); }
    .ed6c-send:disabled { opacity: .45; cursor: default; }

.ed6c-pop-host { position: relative; }
.ed6c-pop {
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
    width: 280px; max-height: 280px; overflow-y: auto; padding: 6px;
    border: 1px solid var(--c-line); border-radius: 12px; background: #FFFFFF;
    box-shadow: 0 16px 36px -12px rgba(20, 15, 62, .3), 0 2px 6px rgba(20, 15, 62, .06);
}

.ed6c-pop-h { padding: 4px 6px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.ed6c-pop-none { padding: 6px; font-size: 12px; color: var(--c-ink-3); }
.ed6c-pop-i { width: 100%; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
    .ed6c-pop-i:hover { background: var(--c-soft); }
    .ed6c-pop-i b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-pop-i small { font-size: 11px; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bulle : fil plus serré */
.ed6c-thread.is-compact .ed6c-msgs { padding: 10px 12px 6px; }
.ed6c-thread.is-compact .ed6c-row { max-width: 88%; }
.ed6c-thread.is-compact .ed6c-hint,
.ed6c-thread.is-compact .ed6c-tool span { display: none; }
.ed6c-thread.is-compact .ed6c-composer { padding: 8px 10px 10px; }
.ed6c-thread.is-compact .ed6c-img img { max-width: 200px; max-height: 150px; }
.ed6c-thread.is-compact .ed6c-pop { width: 250px; }

/* ════════════════════════════════════════════════════════════════════════════
   BULLE (tous les écrans, en bas à droite)
   ════════════════════════════════════════════════════════════════════════════ */

.ed6c-bubble-host { position: fixed; right: 20px; bottom: 20px; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
    .ed6c-bubble-host > * { pointer-events: auto; }

.ed6c-fab {
    position: relative; width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: linear-gradient(135deg, #5351FB 0%, #342484 100%); color: #FFFFFF !important;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 12px 24px -10px rgba(52, 36, 132, .75), 0 2px 6px rgba(20, 15, 62, .15);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

    .ed6c-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(52, 36, 132, .85), 0 2px 6px rgba(20, 15, 62, .18); }
    .ed6c-fab.is-open { background: var(--c-brand-dk); }
    .ed6c-fab:focus-visible { outline: 3px solid #B9B8FD; outline-offset: 2px; }

body.xaf-size-s .ed6c-fab { width: 46px; height: 46px; }

.ed6c-fab-n {
    position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: linear-gradient(180deg, #DC4A63 0%, #B4233B 100%); color: #FFFFFF;
    font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #FFFFFF;
}

.ed6c-pop-panel {
    width: 372px; height: min(560px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    border: 1px solid var(--c-line); border-radius: 16px; background: #FFFFFF; overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(20, 15, 62, .4), 0 2px 8px rgba(20, 15, 62, .08);
}

.ed6c-pp-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--c-line-2); }
    .ed6c-pp-head b { font: 600 14px "Sora", "Geist", sans-serif; }
.ed6c-pp-sp { flex: 1; }
.ed6c-icon-btn { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--c-ink-2); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
    .ed6c-icon-btn:hover { background: var(--c-soft); color: var(--c-ink-0); }

.ed6c-strip-zone { position: relative; z-index: 5; }

/* Bandeau des discussions : avatar + prénom (ou nom du groupe) dessous */
.ed6c-pp-strip { display: flex; align-items: flex-start; gap: 4px; padding: 8px 10px 6px; border-bottom: 1px solid var(--c-line-2); overflow-x: auto; scrollbar-width: thin; }

.ed6c-strip-i {
    position: relative; flex: none; width: 58px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 2px 3px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}

    .ed6c-strip-i:hover { background: var(--c-soft); }
    .ed6c-strip-i.on { background: var(--c-brand-50); }
    .ed6c-strip-i.on .ed6c-av { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--c-brand); }

.ed6c-strip-av { position: relative; display: inline-flex; }
    .ed6c-strip-av .ed6c-av { width: 36px; height: 36px; font-size: 12px; }
    .ed6c-strip-av .ed6c-av-group { border-radius: 11px; }

.ed6c-strip-l {
    max-width: 56px; font-size: 10.5px; line-height: 1.2; font-weight: 500; color: var(--c-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

    .ed6c-strip-i.on .ed6c-strip-l { color: var(--c-brand-dk); font-weight: 600; }
    .ed6c-strip-i.is-unread .ed6c-strip-l { color: var(--c-ink-0); font-weight: 700; }

/* Groupe : petit pictogramme « personnes » en bas à droite de l'avatar */
.ed6c-group-ico {
    position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--c-ink-1); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #FFFFFF;
}

.ed6c-strip-n { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--c-brand); color: #FFFFFF; font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #FFFFFF; }

.ed6c-strip-new { width: 36px; height: 36px; border: 1.5px dashed #CBCAFE; border-radius: 50%; color: var(--c-brand); font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ed6c-strip-add.on .ed6c-strip-new { border-style: solid; border-color: var(--c-brand); background: var(--c-brand-50); }

/* Fiche au survol d'une discussion du bandeau */
.ed6c-hovercard {
    position: absolute; left: 10px; right: 10px; top: calc(100% + 4px); z-index: 20;
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border-radius: 12px; background: var(--c-ink-0); color: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 36px -14px rgba(20, 15, 62, .6);
    font-size: 12px; pointer-events: none; animation: ed6c-in 120ms ease-out;
}

    .ed6c-hovercard .ed6c-muted { color: rgba(255, 255, 255, .62); }
.ed6c-hc-top { display: flex; align-items: center; gap: 8px; }
    .ed6c-hc-top b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed6c-hc-tag { padding: 1px 7px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 10.5px; }
.ed6c-hc-line { display: flex; align-items: center; gap: 6px; line-height: 1.35; }
.ed6c-hc-dot { width: 8px; height: 8px; border-radius: 50%; background: #8E8AA8; flex: none; }
    .ed6c-hc-dot.on { background: #3DD68C; }
.ed6c-hc-last { display: flex; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
    .ed6c-hc-last span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FFFFFF; }
    .ed6c-hc-last small { flex: none; color: rgba(255, 255, 255, .6); }

.ed6c-pp-people { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
    .ed6c-pp-people .ed6c-people { max-height: none; flex: 1; }

/* « Groupe · 5 membres › » : ouvre le détail de la discussion dans la bulle */
.ed6c .ed6c-linkbtn {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    padding: 0; border: 0; background: transparent; cursor: pointer;
    font-size: 11.5px; font-weight: 500; color: var(--c-brand);
}

    .ed6c .ed6c-linkbtn:hover { color: var(--c-brand-dk); text-decoration: underline; }

.ed6c-pp-details { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: #FBFBFE; }
.ed6c-pd-row { display: flex; align-items: center; gap: 6px; }
    .ed6c-pd-row .ed6c-side-h { margin: 0; }
.ed6c-pd-add { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--c-line); border-radius: 12px; background: #FFFFFF; }
    .ed6c-pd-add .ed6c-btn { align-self: flex-end; }
.ed6c-pd-members { display: flex; flex-direction: column; gap: 1px; padding: 4px; border: 1px solid var(--c-line); border-radius: 12px; background: #FFFFFF; }
.ed6c-pd-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }

.ed6c-pp-conv { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--c-line-2); }
    .ed6c-pp-conv .ed6c-pp-who { flex: 1; }

/* Une discussion du bandeau : « × » au survol pour la fermer */
.ed6c-strip-w { position: relative; flex: none; display: inline-flex; }
.ed6c-strip-x {
    position: absolute; left: 2px; top: 0; z-index: 2;
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: var(--c-ink-1); color: #FFFFFF !important; font-size: 12px; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px #FFFFFF; cursor: pointer; opacity: 0; transition: opacity 120ms ease;
}

    .ed6c-strip-w:hover .ed6c-strip-x, .ed6c-strip-x:focus-visible { opacity: 1; }
    .ed6c-strip-x:hover { background: var(--c-bad); }
.ed6c-pp-who { display: flex; flex-direction: column; min-width: 0; }
    .ed6c-pp-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-pp-who small { font-size: 11.5px; color: var(--c-ink-3); }

.ed6c-pop-panel .ed6c-thread { background: #FBFBFE; }

/* Pop-ups des messages reçus */
.ed6c-toasts { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ed6c-toast {
    display: flex; align-items: stretch; width: 320px;
    border: 1px solid var(--c-line); border-radius: 14px; background: #FFFFFF; overflow: hidden;
    box-shadow: 0 18px 40px -16px rgba(20, 15, 62, .38), 0 2px 6px rgba(20, 15, 62, .08);
    animation: ed6c-in 220ms ease-out;
}

.ed6c-toast-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
    .ed6c-toast-main:hover { background: #FBFBFF; }
.ed6c-toast-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .ed6c-toast-t b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed6c-toast-t span { font-size: 12px; color: var(--c-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Message reçu pendant que la bulle montre une autre discussion */
.ed6c-inbanner { display: flex; align-items: stretch; margin: 8px 10px 0; border: 1px solid #CBCAFE; border-radius: 12px; background: var(--c-brand-50); overflow: hidden; animation: ed6c-in 200ms ease-out; }
.ed6c-inbanner-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 6px 7px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; }
    .ed6c-inbanner-main .ed6c-av { width: 28px; height: 28px; font-size: 10.5px; }
    .ed6c-inbanner-main:hover { background: #E4E4FF; }

.ed6c-toast-x { width: 30px; border: 0; background: transparent; color: var(--c-ink-3); font-size: 16px; cursor: pointer; }
    .ed6c-toast-x:hover { color: var(--c-ink-0); background: var(--c-soft); }

@keyframes ed6c-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ed6c-toast, .ed6c-dots i { animation: none; }
}

@media (max-width: 1100px) {
    .ed6c-page { grid-template-columns: 260px minmax(0, 1fr); }
    .ed6c-side { display: none; }
}