/* ==========================================================================
   PEE.CHAT · LIVE DOCK (js/live-dock.js) — 7/10/2026
   Appel / room / battle en continu pendant la navigation : languette flottante
   (pilule au bord sur telephone, mini-fenetre aux coins sur ordinateur), carte
   qui sonne, live bar sous la barre du haut, choix Keep / End / Switch.
   Prefixe .cd- (languette) et .ld- (live bar). Symetrie : rangees centrees,
   paires egales, bouton seul centre dessous.
   ========================================================================== */
#callOverlay.cd-hidden, #videoRoomModal.ld-min { display: none !important; }
.cd-minbtn {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 24px; padding: 0 12px 0 8px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .78); font: 700 .68rem/1 var(--font-sub, 'Rajdhani', sans-serif);
    letter-spacing: .6px; text-transform: uppercase; transition: border-color .2s, color .2s, background .2s;
}
.cd-minbtn svg { width: 14px; height: 14px; }
.cd-minbtn:hover, .cd-minbtn:focus-visible { border-color: rgba(255, 107, 53, .6); color: #fff; background: rgba(255, 107, 53, .12); outline: none; }
.control-btn.ld-roommin { display: inline-flex; align-items: center; gap: 5px; }
.control-btn.ld-roommin svg { width: 16px; height: 16px; }
.control-btn.ld-roommin span { font: 700 .74rem/1 var(--font-sub, 'Rajdhani', sans-serif); letter-spacing: .4px; text-transform: uppercase; }
@media (max-width: 768px) { .control-btn.ld-roommin span { display: none; } }

.cd {
    position: fixed; left: 0; top: 0; z-index: 199000;
    transform: translate3d(-9999px, 0, 0); touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    color: #fff; font-family: 'Inter', sans-serif;
}
.cd.cd-ready { transition: transform .32s cubic-bezier(.2, .9, .3, 1.12); }
.cd.cd-drag { transition: none; cursor: grabbing; }
.cd.cd-tobar .cd-pill, .cd.cd-tobar .cd-win { opacity: .55; transform: scale(.92); }
.cd video { pointer-events: none; }
.cd [hidden] { display: none !important; }

/* verre sombre + liseré dégradé PEE.CHAT */
.cd-pill, .cd-win, .cd-rc, .cd-ask-card, .ld-row {
    background:
        linear-gradient(160deg, rgba(28, 28, 28, .9), rgba(12, 12, 12, .92)) padding-box,
        linear-gradient(150deg, rgba(255, 107, 53, .8), rgba(247, 201, 72, .45) 55%, rgba(255, 107, 53, .25)) border-box;
    border: 1.5px solid transparent;
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 107, 53, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cd-pill, .cd-win, .cd-rc, .cd-ask-card { animation: cdIn .32s cubic-bezier(.2, .9, .3, 1.15); transition: opacity .2s, transform .2s; }
@keyframes cdIn { from { opacity: 0; transform: scale(.88); } }

/* avatar pentagone (anneau dégradé) */
.cd-av { position: relative; display: block; width: 52px; height: 52px; padding: 2px; flex: 0 0 auto;
    clip-path: var(--pee-penta, polygon(50% 0%, 100% 37.2%, 84.1% 100%, 15.9% 100%, 0% 37.2%));
    background: linear-gradient(135deg, #FF6B35, #F7C948); }
.cd-av > i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal;
    clip-path: var(--pee-penta, polygon(50% 0%, 100% 37.2%, 84.1% 100%, 15.9% 100%, 0% 37.2%));
    background: #161210 center / cover no-repeat; color: #FF6B35; font: 800 1.25rem/1 'Orbitron', sans-serif; padding-top: 12%; }
.cd-av.cd-av-l { width: 64px; height: 64px; }
.cd-av.cd-av-l > i { font-size: 1.5rem; }
.cd-av > i[style*="url"] { padding-top: 0; }

/* boutons ronds */
.cd-c { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    cursor: pointer; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    transition: background .2s, border-color .2s, transform .15s; padding: 0; }
.cd-c:active { transform: scale(.92); }
.cd-c:focus-visible, .cd-ib:focus-visible, .cd-pb:focus-visible, .cd-tab:focus-visible, .ld-b:focus-visible, .ld-mid:focus-visible { outline: 2px solid #F7C948; outline-offset: 2px; }
.cd-i1, .cd-i2 { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.cd-i2 { display: none; }
.cd-c.two.off .cd-i1, .ld-b.two.off .cd-i1 { display: none; }
.cd-c.two.off .cd-i2, .ld-b.two.off .cd-i2 { display: inline-flex; }
.cd-c.off, .ld-b.off { background: rgba(255, 68, 68, .18); border-color: rgba(255, 68, 68, .5); color: #FF6B6B; }
.cd-c.cd-end, .ld-b.ld-end { background: linear-gradient(135deg, #FF5A5A, #D92B2B); border-color: rgba(255, 120, 120, .5); color: #fff; box-shadow: 0 4px 14px rgba(255, 68, 68, .35); }
.cd-c.cd-end.open, .ld-b.ld-end.open { background: linear-gradient(135deg, #FF6B35, #F7C948); border-color: transparent; color: #0A0A0A; box-shadow: 0 4px 14px rgba(255, 107, 53, .35); }
.cd-c.cd-end.armed, .ld-b.ld-end.armed { animation: cdArm .7s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255, 68, 68, .35), 0 4px 14px rgba(255, 68, 68, .5); }
@keyframes cdArm { 50% { transform: scale(1.1); } }
.cd-time { font: 700 .66rem/1 'Orbitron', sans-serif; letter-spacing: .5px; color: #FF8C5A; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd.cd-live .cd-time { color: #3DDC84; }

/* ---------- TELEPHONE : pilule verticale au bord ---------- */
.cd-pill { width: 72px; padding: 6px 6px 8px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cd-media { position: relative; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 16px; overflow: hidden; outline: none; }
.cd-media:focus-visible { box-shadow: 0 0 0 2px #F7C948; }
.cd-ph.cd-video .cd-media, .cd-ph.cd-k-battle .cd-media { height: 72px; background: #000; }
.cd-vslot, .cd-lslot { display: none; }
.cd.cd-video .cd-vslot { display: block; position: absolute; inset: 0; }
.cd-vslot video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; position: static !important; }
.cd.cd-video .cd-media > .cd-av, .cd.cd-video .cd-stage > .cd-av { display: none; }
.cd-ph .cd-lslot { display: none !important; }
.cd-tab { display: none; }
.cd-ph.cd-tucked .cd-pill { display: none; }
.cd-ph.cd-tucked .cd-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 26px; height: 66px; padding: 0; cursor: pointer; border: 0; border-radius: 14px 0 0 14px;
    background: linear-gradient(160deg, #FF6B35, #F7C948); color: #0A0A0A;
    box-shadow: -4px 6px 18px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 107, 53, .35);
}
.cd-ph.cd-tucked.cd-left .cd-tab { border-radius: 0 14px 14px 0; box-shadow: 4px 6px 18px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 107, 53, .35); }
.cd-ph.cd-tucked.cd-left .cd-tab svg { transform: scaleX(-1); }
.cd-tab svg { width: 16px; height: 16px; stroke-width: 3; }
.cd-dot { width: 8px; height: 8px; border-radius: 50%; background: #0A0A0A; box-shadow: 0 0 0 2px rgba(10, 10, 10, .2); }
.cd.cd-live .cd-dot { background: #00A845; animation: cdBlink 1.6s ease-in-out infinite; }
@keyframes cdBlink { 50% { opacity: .35; } }

/* ---------- ORDINATEUR : mini-fenetre ---------- */
.cd-win { width: 236px; border-radius: 18px; overflow: hidden; }
.cd-stage { position: relative; height: 158px; display: flex; align-items: center; justify-content: center; padding-top: 18px; cursor: grab; background: radial-gradient(80% 70% at 50% 40%, rgba(255, 107, 53, .12), transparent 70%); }
.cd-dk.cd-video .cd-stage { height: auto; aspect-ratio: 4 / 5; padding-top: 0; background: #000; }
.cd-dk.cd-k-room.cd-video .cd-stage, .cd-dk.cd-k-battle .cd-stage { aspect-ratio: auto; height: 176px; padding-top: 0; background: #000; }
.cd-dk .cd-lslot { position: absolute; right: 8px; bottom: 8px; width: 62px; height: 78px; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(255, 107, 53, .6); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); background: #111; }
.cd-dk.cd-self .cd-lslot { display: block; }
.cd-lslot video { position: static !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border: 0 !important; border-radius: 0 !important; display: block !important; }
.cd-bar { position: absolute; left: 0; right: 0; top: 0; height: 44px; padding: 0 8px; display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 6px;
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); z-index: 2; }
.cd-ib { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .2s, color .2s; }
.cd-ib svg { width: 15px; height: 15px; }
.cd-ib:hover { border-color: rgba(255, 107, 53, .7); color: #fff; }
.cd-pipb { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.cd-dk:not(.cd-video) .cd-pipb { display: none; }
.cd-who { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.cd-who .cd-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .9rem/1.1 var(--font-sub, 'Rajdhani', sans-serif); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.cd-dk .cd-time { font-size: .62rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.cd-pipnote { display: none; position: absolute; inset: 0; z-index: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .7); font: 600 .75rem/1.3 'Inter', sans-serif; background: #0C0C0C; }
.cd-pipnote svg { width: 26px; height: 26px; color: #FF8C5A; }
.cd-dk.cd-pip .cd-pipnote { display: flex; }
.cd-ctrls { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 12px 12px; }
.cd-ctrls .cd-end { width: 46px; height: 46px; }

/* ---------- BATTLE : deux cameras + VS ---------- */
.cd-k-battle .cd-vslot { display: block; position: absolute; inset: 0; }
.cd-k-battle .cd-media > .cd-av, .cd-k-battle .cd-stage > .cd-av { display: none; }
.cd-vs2 { display: flex !important; }
.cd-half { position: relative; flex: 1 1 50%; overflow: hidden; background: linear-gradient(160deg, rgba(255, 107, 53, .35), #120a06); }
.cd-half.b { background: linear-gradient(160deg, rgba(247, 201, 72, .32), #120f05); }
.cd-half video { opacity: 0; transition: opacity .3s; }
.cd-half.on video { opacity: 1; }
.cd-sc { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 900 .72rem/1 'Orbitron', sans-serif; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); z-index: 1; }
.cd-half.a .cd-sc { color: #FF8C5A; }
.cd-half.b .cd-sc { color: #F7C948; }
.cd-vsb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 3px 6px; border-radius: 8px; background: linear-gradient(135deg, #FF6B35, #F7C948); color: #0A0A0A; font: 900 .6rem/1 'Orbitron', sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.cd-ph .cd-vs2 { flex-direction: column; }
.cd-ph .cd-sc { bottom: 2px; font-size: .58rem; }
.cd-ph .cd-vsb { font-size: .5rem; padding: 2px 4px; }
.cd-dk.cd-k-battle .cd-sc { bottom: 8px; font-size: .9rem; }

/* ---------- carte qui sonne (appel entrant pendant la navigation) ---------- */
.cd-rc { display: none; }
.cd.cd-ringing .cd-pill, .cd.cd-ringing .cd-win, .cd.cd-ringing .cd-tab { display: none !important; }
.cd.cd-ringing .cd-rc { display: flex; }
.cd-rc { width: min(340px, calc(100vw - 24px)); padding: 16px 16px 14px; border-radius: 22px; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.cd-rc-av { cursor: pointer; padding: 8px; margin: -8px 0 2px; outline: none; }
.cd-rc .cd-name { margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.08rem/1.2 var(--font-sub, 'Rajdhani', sans-serif); }
.cd-sub { font: 500 .78rem/1.3 'Inter', sans-serif; color: rgba(255, 255, 255, .6); }
.cd-av-ring { animation: cdPulse 1.4s ease-in-out infinite; }
@keyframes cdPulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 107, 53, 0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 10px rgba(255, 107, 53, .8)); transform: scale(1.06); } }
.cd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.cd-pb { height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; padding: 0 10px;
    font: 700 .92rem/1 var(--font-sub, 'Rajdhani', sans-serif); letter-spacing: .3px; transition: transform .15s, filter .2s; }
.cd-pb:active { transform: scale(.96); }
.cd-pb svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cd-pb.cd-no { background: rgba(255, 68, 68, .14); border: 1px solid rgba(255, 68, 68, .5); color: #FF6B6B; }
.cd-pb.cd-ok { background: linear-gradient(135deg, #00C851, #2BE07A); border: 1px solid rgba(120, 255, 170, .5); color: #04210F; box-shadow: 0 4px 16px rgba(0, 200, 81, .3); }
.cd-pb.cd-keep { background: linear-gradient(135deg, #FF6B35, #F7C948); border: 0; color: #0A0A0A; box-shadow: 0 4px 16px rgba(255, 107, 53, .3); }
.cd-pb.cd-cancel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); width: calc(50% - 5px); margin: 10px auto 0; }
.cd-pb:hover { filter: brightness(1.08); }

/* ---------- choix : Keep / End / Switch ---------- */
.cd-ask { position: fixed; inset: 0; z-index: 199800; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cd-ask-card { width: min(360px, 100%); border-radius: 22px; padding: 22px 18px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cd-ask-card h3 { margin: 10px 0 2px; font: 800 .98rem/1.2 'Orbitron', sans-serif; letter-spacing: .5px; color: #fff; }
.cd-ask-who { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .9rem/1.3 var(--font-sub, 'Rajdhani', sans-serif); color: #F7C948; }
.cd-ask-txt { margin: 8px 0 0; font: 500 .8rem/1.45 'Inter', sans-serif; color: rgba(255, 255, 255, .66); }

/* ---------- LIVE BAR : sous la barre du haut, centree ---------- */
/* z 1990 : sous la barre du haut (2000), le menu du compte et la barre laterale mobile (2100) */
.ld-bar { position: fixed; z-index: 1990; left: 50%; transform: translateX(-50%); top: calc(var(--top-bar-h, 60px) + 6px);
    width: min(520px, calc(100vw - 16px)); display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: none; }
.ld-bar[hidden] { display: none; }
body.room-modal-open .ld-bar { display: none; }   /* room plein ecran : la barre ne cache pas son en-tete */
/* le site descend sous la live bar : elle ne cache ni les titres ni les onglets */
.app-container { transition: padding-top .25s ease; }
body.ld-bar-on .app-container { padding-top: calc(var(--top-bar-h, 60px) + var(--ld-bar-h, 0px)); }
@media (min-width: 769px) { .sidebar { transition: transform var(--transition-slow, .4s ease), top .25s ease; } body.ld-bar-on .sidebar { top: calc(var(--top-bar-h, 60px) + var(--ld-bar-h, 0px)); } }
.ld-row { pointer-events: auto; display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) 34px 34px; align-items: center; gap: 6px;
    height: 48px; padding: 0 6px; border-radius: 24px; animation: ldIn .3s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes ldIn { from { opacity: 0; transform: translateY(-8px); } }
.ld-b { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: background .2s, border-color .2s, transform .15s; }
.ld-b:active { transform: scale(.92); }
.ld-b svg { width: 16px; height: 16px; }
.ld-b[hidden] { visibility: hidden; display: inline-flex; }
.ld-fl.on { border-color: rgba(255, 107, 53, .7); color: #FF8C5A; background: rgba(255, 107, 53, .12); }
.ld-mid { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; outline: none; border-radius: 16px; }
.cd-av.ld-av { width: 32px; height: 32px; padding: 1.5px; }
.ld-av > i { font-size: .8rem; }
.ld-txt { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ld-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .88rem/1.1 var(--font-sub, 'Rajdhani', sans-serif); color: #fff; }
.ld-meta { display: inline-flex; align-items: center; gap: 5px; font: 700 .62rem/1 'Orbitron', sans-serif; letter-spacing: .4px; color: #FF8C5A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-live { width: 6px; height: 6px; border-radius: 50%; background: #FF8C5A; }
.ld-row.ld-on .ld-meta { color: #3DDC84; }
.ld-row.ld-on .ld-live { background: #3DDC84; animation: cdBlink 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .cd.cd-ready { transition: none; }
    .cd-pill, .cd-win, .cd-rc, .cd-ask-card, .cd-av-ring, .cd.cd-live .cd-dot, .ld-row, .ld-row.ld-on .ld-live, .cd-end.armed, .ld-end.armed { animation: none; }
}