/* /chat-voc : chat X.GPT plein écran — salon, vocal, messages privés, appels (préfixe cv-). */
:root{
  color-scheme:dark;
  --bg:#09080a;--rail:#060507;--side:#0d0b0e;--main:#0a090b;--raise:#16131a;--raise2:#1d1922;--hover:#ffffff08;--line:#ffffff0f;--line2:#ffffff17;
  --text:#ececf1;--soft:#c3c3cc;--muted:#8b8b96;--dim:#62626d;
  --red:#ff4d55;--red2:#d91f2c;--green:#2ecc71;--green2:#1f9d55;--amber:#f5a524;--blue:#7cc4ff;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,textarea,input{font:inherit;color:inherit}
:is(button,a,textarea,input):focus-visible{outline:2px solid #ff8a8f;outline-offset:2px}
::selection{background:#ff4d5555}
*{scrollbar-width:thin;scrollbar-color:#ffffff1c transparent}
@keyframes cv-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes cv-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes cv-pulse{50%{box-shadow:0 0 0 6px #2ecc7100}}
@keyframes cv-ringpulse{0%{box-shadow:0 0 0 0 #2ecc7177}70%{box-shadow:0 0 0 22px #2ecc7100}100%{box-shadow:0 0 0 0 #2ecc7100}}
@keyframes cv-blink{50%{opacity:.25}}
@keyframes cv-dots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* ---------- cadre ---------- */
.cv{position:relative;display:grid;grid-template-columns:72px 264px minmax(0,1fr) 244px;height:100dvh;width:100%;overflow:hidden}
.cv:not([data-view=channel]),.cv.no-members{grid-template-columns:72px 264px minmax(0,1fr) 0}
.cv:not([data-view=channel]) .cv-members,.cv.no-members .cv-members{display:none}

/* ---------- rail ---------- */
.cv-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;background:var(--rail);border-right:1px solid var(--line);overflow:auto}
.cv-rail-btn{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:16px;background:#ffffff0a;color:var(--soft);cursor:pointer;text-decoration:none;transition:border-radius .18s,background .18s,color .18s,transform .1s}
.cv-rail-btn svg{width:22px;height:22px}
.cv-rail-btn img{width:32px;height:32px;object-fit:contain}
.cv-rail-btn:hover{border-radius:14px;background:#ffffff14;color:#fff}
.cv-rail-btn:active{transform:scale(.95)}
.cv-rail-btn.active{border-radius:14px;background:linear-gradient(135deg,#ff3a45,#a8121d);color:#fff;box-shadow:0 6px 20px #ff2d3a33}
.cv-rail-btn.server.active{background:linear-gradient(135deg,#2a1216,#120c0e);box-shadow:inset 0 0 0 1.5px #ff4d55aa,0 6px 20px #ff2d3a26}
.cv-rail-btn.active::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:#fff}
.cv-rail-btn.home{background:none;color:var(--muted)}
.cv-rail-btn.home:hover{background:#ffffff10;color:#fff}
.cv-rail-btn.small{width:40px;height:30px;border-radius:9px;font-size:11px;font-weight:850;letter-spacing:.06em;color:var(--muted);background:none;border:1px solid var(--line2)}
.cv-rail-sep{width:30px;height:2px;border-radius:2px;background:var(--line2);margin:2px 0}
.cv-rail-fill{flex:1}
.cv-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:850;line-height:1;font-style:normal}
.cv-rail-btn .cv-badge{position:absolute;right:-4px;bottom:-4px;border:3px solid var(--rail);min-width:22px;height:22px}

/* ---------- colonne salons / conversations ---------- */
.cv-side{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,#140d10 0,var(--side) 200px);border-right:1px solid var(--line)}
.cv-pane{display:none;flex:1;min-height:0;flex-direction:column}
.cv[data-view=channel] .cv-pane-server,.cv:not([data-view=channel]) .cv-pane-dm{display:flex}
.cv-server{display:flex;align-items:center;gap:12px;margin:12px 12px 4px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(135deg,#ff2d3a14,#ffffff03)}
.cv-server img{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 0 10px #ff2d3a55)}
.cv-server div{min-width:0;flex:1}
.cv-server b{display:block;font-size:15.5px;font-weight:800}
.cv-server small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-dmhead{display:flex;align-items:center;height:60px;padding:0 12px 0 18px;border-bottom:1px solid var(--line)}
.cv-dmhead b{flex:1;font-size:15.5px;font-weight:800}
.cv-chans{flex:1;min-height:0;overflow:auto;padding:8px 10px 12px}
.cv-cat{margin:16px 10px 6px;color:var(--dim);font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.cv-cat-row{display:flex;align-items:center;justify-content:space-between}
.cv-mini{width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.cv-mini:hover{background:#ffffff10;color:#fff}
.cv-chan{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:14.5px;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.cv-chan:hover{background:var(--hover);color:var(--soft)}
.cv-chan.active{background:#ffffff0d;color:#fff}
.cv-chan.active::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--red);box-shadow:0 0 10px var(--red)}
.cv-chan svg{width:19px;height:19px;flex:none}
.cv-chan .cv-badge{margin-left:auto}
.cv-chan em{margin-left:auto;padding:1px 7px;border-radius:99px;background:#ffffff0d;font-style:normal;font-size:11px;font-weight:700;color:var(--soft)}
.cv-chan em:empty{display:none}
.cv-chan.voice.in{color:#7ee2a8}
.cv-chan.voice.in em{background:#2ecc7122;color:#7ee2a8}
.cv-hash{width:19px;text-align:center;font-size:19px;font-weight:500;line-height:1;color:var(--dim)}
.cv-chan.active .cv-hash{color:var(--soft)}
.cv-hint{display:block;margin:6px 10px 0;color:var(--dim);font-size:11.5px;line-height:1.45}
.cv-vmembers{list-style:none;margin:2px 0 0;padding:0 0 0 14px}
.cv-vmembers li{display:flex;align-items:center;gap:9px;height:34px;padding:0 8px;border-radius:9px;font-size:13.5px;color:var(--soft);animation:cv-in .2s ease}
.cv-vmembers li:hover{background:var(--hover)}
.cv-vmembers li b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-vmembers li .cv-av{width:24px;height:24px;font-size:10.5px}
.cv-vmembers svg{width:15px;height:15px;color:#f87171;flex:none}
.cv-convs{list-style:none;margin:0;padding:0}
.cv-conv{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 8px;border:0;border-radius:11px;background:none;color:var(--muted);text-align:left;cursor:pointer;animation:cv-in .18s ease;transition:background .15s,color .15s}
.cv-conv:hover{background:var(--hover);color:var(--soft)}
.cv-conv.active{background:#ffffff0e;color:#fff}
.cv-conv .cv-av{width:34px;height:34px;font-size:13px}
.cv-conv-txt{flex:1;min-width:0}
.cv-conv-txt b{display:block;font-size:14px;font-weight:650;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-conv-txt small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-conv.unread b{color:#fff}
.cv-conv.unread small{color:var(--soft)}
.cv-conv small.typing{color:#7ee2a8}

.cv-voicebar{display:flex;align-items:center;gap:8px;margin:0 10px 10px;padding:10px 8px 10px 12px;border:1px solid #2ecc7133;border-radius:var(--r);background:linear-gradient(135deg,#2ecc7114,#0d0b0e);animation:cv-in .2s ease}
.cv-voicebar.calling{border-color:#f5a52444;background:linear-gradient(135deg,#f5a52414,#0d0b0e)}
.cv-voicebar.calling b{color:#ffd28a}
.cv-voicebar.calling .cv-dot{background:var(--amber);box-shadow:0 0 0 3px #f5a52426}
.cv-vb-info{flex:1;min-width:0}
.cv-voicebar b{display:flex;align-items:center;gap:7px;color:#7ee2a8;font-size:13px}
.cv-voicebar small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #2ecc7126;animation:cv-pulse 2s ease-in-out infinite}

.cv-me{display:flex;align-items:center;gap:9px;padding:10px 10px 12px;border-top:1px solid var(--line);background:#08070999}
.cv-me-txt{flex:1;min-width:0}
.cv-me-txt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-me-txt small{display:block;color:var(--muted);font-size:11.5px}
.cv-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,transform .1s}
.cv-icon:hover{background:#ffffff0d;color:#fff}
.cv-icon:active{transform:scale(.94)}
.cv-icon svg{width:20px;height:20px}
.cv-icon .off{display:none}
.cv-icon[aria-pressed=true] .on{display:none}
.cv-icon[aria-pressed=true] .off{display:block}
#cv-mute[aria-pressed=true],#cv-deaf[aria-pressed=true]{color:#ff6b72;background:#ff4d5514}
#cv-sound .on{display:block}#cv-sound .off{display:none}
#cv-sound[aria-pressed=false]{color:var(--dim)}
#cv-sound[aria-pressed=false] .on{display:none}#cv-sound[aria-pressed=false] .off{display:block}
#cv-members-btn[aria-pressed=true]{color:#fff;background:#ffffff0c}
.cv:not([data-view=channel]) #cv-members-btn{display:none}
.cv-icon.danger{color:#ff8a8f;background:#ff4d5512}
.cv-icon.danger:hover{background:var(--red2);color:#fff}
.cv-icon.call{color:#7ee2a8}
.cv-icon.call:hover{background:#2ecc711c;color:#a7f3c8}

/* ---------- avatars ---------- */
.cv-av{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,hsl(var(--h,350) 60% 42%),hsl(calc(var(--h,350) + 30) 55% 26%));color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;transition:box-shadow .15s}
.cv-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.cv-av.speaking{box-shadow:0 0 0 2px var(--side),0 0 0 4px var(--green),0 0 14px #2ecc7188}
.cv-av[data-online]::after,.cv-av[data-off]::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2.5px solid var(--side)}
.cv-av[data-off]::after{background:#4b4b55}

/* ---------- colonne principale ---------- */
.cv-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(1200px 500px at 50% -260px,#ff2d3a12,transparent 70%),var(--main)}
.cv-head{display:flex;align-items:center;gap:8px;height:60px;flex:none;padding:0 12px 0 20px;border-bottom:1px solid var(--line);background:#0a090bd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cv-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.cv-title h1{margin:0;font-size:16.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-title .cv-av{width:30px;height:30px;font-size:12px}
.cv-title svg{width:22px;height:22px;color:var(--dim);flex:none}
.cv-title .state{color:var(--muted);font-size:12.5px;white-space:nowrap}
.cv-hash.big{font-size:23px;color:var(--dim)}
.cv-topic{min-width:0;padding-left:12px;border-left:1px solid var(--line2);color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-conn{color:var(--muted);font-size:12px;white-space:nowrap}
.cv-conn.bad{color:var(--amber)}
.cv-icon.cv-menu,.cv-icon.cv-close-side{display:none}

.cv-scroll{flex:1;min-height:0;overflow-y:auto;padding:24px 0 10px;overscroll-behavior:contain}
.cv[data-view=friends] .cv-scroll,.cv[data-view=friends] .cv-bottom,.cv[data-view=friends] .cv-newpill{display:none!important}
.cv-older{display:block;margin:0 auto 14px;padding:7px 14px;border:1px solid var(--line2);border-radius:99px;background:none;color:var(--muted);font-size:12.5px;cursor:pointer}
.cv-older:hover{color:#fff;border-color:#ffffff30}
.cv-welcome{margin:0 24px 8px;padding:6px 0 22px;border-bottom:1px solid var(--line)}
.cv-welcome .big{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,#ff2d3a2a,#ffffff08);border:1px solid #ff4d5533;color:#fff;font-size:38px;font-weight:600}
.cv-welcome .cv-av{width:76px;height:76px;font-size:30px}
.cv-welcome h2{margin:16px 0 6px;font-size:26px;font-weight:850;letter-spacing:-.02em}
.cv-welcome p{margin:0;max-width:560px;color:var(--muted);font-size:14.5px;line-height:1.55}
.cv-welcome .cv-btn{display:inline-flex;margin-top:14px;padding:0 16px}

/* messages */
.cv-msgs{display:flex;flex-direction:column;padding:0 10px}
.cv-msg{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:2px 64px 2px 14px;border-radius:10px;animation:cv-in .18s ease;content-visibility:auto;contain-intrinsic-size:auto 44px}
.cv-msg.first{margin-top:16px;padding-top:6px;padding-bottom:3px}
.cv-msg:hover{background:#ffffff05}
.cv-msg .cv-av{grid-row:span 3;width:40px;height:40px;margin-top:1px}
.cv-msg:not(.first) .cv-av{visibility:hidden;height:0}
.cv-msg>*:not(.cv-av){grid-column:2}
.cv-who{display:flex;align-items:baseline;gap:8px;min-width:0}
.cv-who b{font-size:14.5px;font-weight:700;color:#f4f4f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-who b.admin{color:#ff7076}
.cv-who .tag{align-self:center;padding:2px 6px;border-radius:5px;background:linear-gradient(120deg,#ff3a45,#c4121f);color:#fff;font-size:9.5px;font-weight:850;letter-spacing:.05em}
.cv-who time{color:var(--dim);font-size:11.5px;white-space:nowrap}
.cv-text{margin:1px 0 0;font-size:14.7px;line-height:1.55;color:#dadae0;white-space:pre-wrap;overflow-wrap:anywhere}
.cv-text.jumbo{font-size:40px;line-height:1.2}
.cv-text a{color:var(--blue);text-decoration:none}
.cv-text a:hover{text-decoration:underline}
.cv-msg .side-time{position:absolute;left:14px;top:5px;width:40px;text-align:right;color:var(--dim);font-size:10.5px;opacity:0}
.cv-msg:not(.first):hover .side-time{opacity:1}
.cv-tools{position:absolute;right:10px;top:-14px;display:none;gap:2px;padding:3px;border:1px solid var(--line2);border-radius:10px;background:var(--raise2);box-shadow:0 6px 18px #0009;z-index:2}
.cv-msg:hover .cv-tools,.cv-tools:focus-within{display:flex}
.cv-tools button{display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;font-size:15px}
.cv-tools button:hover{background:#ffffff12;color:#fff}
.cv-tools button svg{width:16px;height:16px}
.cv-tools button.del{color:#ff8a8f}
.cv-tools button.del.armed{background:var(--red2);color:#fff}
.cv-day{display:flex;align-items:center;gap:12px;margin:22px 14px 2px;color:var(--dim);font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.cv-day::before,.cv-day::after{content:"";flex:1;height:1px;background:var(--line)}
.cv-seen{margin:4px 0 0 68px;color:var(--dim);font-size:11px}

/* réactions */
.cv-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.cv-react{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:1px solid var(--line2);border-radius:8px;background:#ffffff08;color:var(--soft);font-size:13px;cursor:pointer;animation:cv-pop .15s ease}
.cv-react b{font-size:12px;font-weight:700}
.cv-react:hover{border-color:#ffffff30}
.cv-react.mine{border-color:#ff4d5577;background:#ff4d551a;color:#fff}

/* pièces jointes */
.cv-att{margin-top:6px;max-width:min(420px,100%)}
.cv-att img,.cv-att video{display:block;max-width:100%;max-height:340px;border-radius:12px;border:1px solid var(--line);background:#0006;cursor:zoom-in}
.cv-att video{cursor:auto;width:100%}
.cv-audio{display:flex;align-items:center;gap:10px;width:min(340px,100%);padding:8px 12px 8px 8px;border:1px solid var(--line2);border-radius:14px;background:var(--raise)}
.cv-audio button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:linear-gradient(120deg,#ff3a45,#c4121f);color:#fff;cursor:pointer}
.cv-audio button svg{width:16px;height:16px}
.cv-audio .bar{position:relative;flex:1;height:6px;border-radius:99px;background:#ffffff14;cursor:pointer}
.cv-audio .bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--red)}
.cv-audio time{min-width:36px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.cv-audio .mic{width:14px;height:14px;color:var(--dim);flex:none}

/* friends */
.cv-friends{flex:1;min-height:0;overflow:auto;padding:16px 24px 24px}
.cv-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.cv-tabs button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--muted);font-size:13.5px;font-weight:650;cursor:pointer}
.cv-tabs button:hover{background:#ffffff0c;color:#fff}
.cv-tabs button[aria-selected=true]{background:#ffffff12;color:#fff}
.cv-tabs button.add{background:linear-gradient(120deg,#2ecc71,#1f9d55);color:#04150b}
.cv-tabs button.add[aria-selected=true]{background:none;color:#7ee2a8;box-shadow:inset 0 0 0 1.5px #2ecc7166}
.cv-addform{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cv-addform h2{margin:0 0 6px;font-size:17px;font-weight:800}
.cv-addform p{margin:0 0 12px;color:var(--muted);font-size:13.5px}
.cv-addrow{display:flex;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--line2);border-radius:13px;background:var(--raise)}
.cv-addrow:focus-within{border-color:#ff4d5577}
.cv-addrow input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px}
.cv-addmsg{min-height:20px;margin:8px 2px 0;font-size:13px}
.cv-addmsg.ok{color:#7ee2a8}.cv-addmsg.err{color:#ff8a8f}
.cv-flist{list-style:none;margin:0;padding:0}
.cv-flist li{display:flex;align-items:center;gap:12px;height:62px;padding:0 10px;border-top:1px solid var(--line);border-radius:4px;animation:cv-in .18s ease}
.cv-flist li:hover{background:var(--hover);border-radius:12px}
.cv-flist .who{flex:1;min-width:0}
.cv-flist .who b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-flist .who small{color:var(--muted);font-size:12.5px}
.cv-flist .acts{display:flex;gap:6px}
.cv-flist .acts button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--raise2);color:var(--soft);cursor:pointer}
.cv-flist .acts button:hover{color:#fff;background:#2a2530}
.cv-flist .acts button.yes:hover{color:#7ee2a8}
.cv-flist .acts button.no:hover{color:#ff8a8f}
.cv-flist .acts svg{width:17px;height:17px}
.cv-fempty{margin:40px auto;max-width:360px;text-align:center;color:var(--muted);font-size:14px;line-height:1.55}

/* appel privé */
.cv-callpanel{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;padding:22px 16px 18px;background:radial-gradient(500px 200px at 50% 0,#2ecc7114,transparent),#060507;border-bottom:1px solid var(--line);animation:cv-in .2s ease}
.cv-call-people{display:flex;gap:26px}
.cv-call-people .cv-av{width:84px;height:84px;font-size:32px}
.cv-call-people .cv-av.waiting{animation:cv-blink 1.6s ease-in-out infinite}
.cv-call-state{margin:0;color:var(--soft);font-size:13.5px;font-variant-numeric:tabular-nums}
.cv-call-actions{display:flex;gap:12px}
.cv-round{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--raise2);color:#fff;cursor:pointer;transition:transform .1s,filter .15s}
.cv-round:hover{filter:brightness(1.15)}
.cv-round:active{transform:scale(.93)}
.cv-round svg{width:21px;height:21px}
.cv-round[aria-pressed=true]{background:#fff;color:#111}
.cv-round.red{background:#e5333d}
.cv-round.green{background:var(--green2)}
.cv-round.big{width:60px;height:60px}
.cv-ring{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:#000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:cv-in .2s ease}
.cv-ring-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(300px,100%);padding:30px 24px 24px;border:1px solid var(--line2);border-radius:26px;background:linear-gradient(170deg,#1a1520,#0b0a0c);box-shadow:0 30px 90px #000c;animation:cv-pop .2s ease}
.cv-ring-av .cv-av{width:92px;height:92px;font-size:34px;animation:cv-ringpulse 1.4s infinite}
.cv-ring-card b{margin-top:12px;font-size:19px;font-weight:800;text-align:center}
.cv-ring-card small{color:var(--muted);font-size:13.5px}
.cv-ring-actions{display:flex;gap:28px;margin-top:20px}

/* bas : écrire */
.cv-newpill{position:absolute;left:50%;bottom:110px;z-index:3;transform:translateX(-50%);padding:8px 16px;border:0;border-radius:99px;background:linear-gradient(120deg,#ff3a45,#c4121f);color:#fff;font-size:12.5px;font-weight:750;cursor:pointer;box-shadow:0 10px 30px #ff2d3a40,0 4px 12px #0009}
.cv-bottom{flex:none;padding:0 20px 18px}
.cv-typing{display:flex;align-items:center;gap:6px;height:22px;padding:0 6px;color:var(--soft);font-size:12.5px}
.cv-typing b{font-weight:700;color:#fff}
.cv-typing .dots{display:inline-flex;gap:3px}
.cv-typing .dots i{width:5px;height:5px;border-radius:50%;background:var(--soft);animation:cv-dots 1.2s infinite}
.cv-typing .dots i:nth-child(2){animation-delay:.15s}.cv-typing .dots i:nth-child(3){animation-delay:.3s}
.cv-tray{display:flex;gap:8px;overflow-x:auto;padding:10px;margin-bottom:6px;border:1px solid var(--line2);border-radius:14px;background:var(--raise)}
.cv-chip{position:relative;flex:none;width:96px;height:96px;border-radius:11px;overflow:hidden;background:#000;border:1px solid var(--line2)}
.cv-chip img,.cv-chip video{width:100%;height:100%;object-fit:cover}
.cv-chip .lbl{position:absolute;inset:auto 0 0 0;padding:3px 6px;background:#000b;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-chip .prog{position:absolute;inset:auto 0 0 0;height:3px;background:var(--red);transform-origin:left;transition:transform .2s}
.cv-chip .x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#000c;color:#fff;cursor:pointer;font-size:14px}
.cv-chip.audio{display:grid;place-items:center;color:var(--soft)}
.cv-chip.audio svg{width:30px;height:30px}
.cv-compose{display:flex;align-items:flex-end;gap:4px;padding:7px 7px 7px 7px;border:1px solid var(--line2);border-radius:16px;background:var(--raise);box-shadow:0 10px 30px #0006;transition:border-color .15s,box-shadow .15s}
.cv-compose:focus-within{border-color:#ff4d5566;box-shadow:0 10px 30px #0006,0 0 0 4px #ff4d5512}
.cv-compose textarea{flex:1;min-width:0;min-height:26px;max-height:200px;margin:5px 4px;padding:0;border:0;background:none;resize:none;font-size:15px;line-height:1.45;outline:none}
.cv-compose textarea::placeholder{color:var(--dim)}
.cv-cbtn{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.cv-cbtn:hover{color:#fff;background:#ffffff0e}
.cv-cbtn svg{width:21px;height:21px}
#cv-attach{border-radius:50%;background:#ffffff0e}
#cv-attach svg{width:18px;height:18px}
.cv-send{display:grid;place-items:center;flex:none;width:40px;height:36px;border:0;border-radius:11px;background:linear-gradient(120deg,#ff3a45,#c4121f);color:#fff;cursor:pointer;box-shadow:0 6px 18px #ff2d3a33;transition:transform .1s,filter .15s}
.cv-send:hover{filter:brightness(1.1)}
.cv-send:active{transform:scale(.94)}
.cv-send svg{width:17px;height:17px}
.cv-send:disabled,.cv-compose textarea:disabled,.cv-cbtn:disabled{opacity:.45;cursor:not-allowed}
.cv-recbar{display:flex;align-items:center;gap:12px;height:52px;padding:0 8px 0 18px;border:1px solid #ff4d5566;border-radius:16px;background:var(--raise)}
.cv-recdot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:cv-blink 1s infinite}
.cv-recbar b{font-variant-numeric:tabular-nums;font-size:14px;min-width:40px}
.cv-rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;overflow:hidden}
.cv-rec-wave i{flex:none;width:3px;border-radius:2px;background:#ff6b72}
.cv-drop{position:absolute;inset:60px 0 0;z-index:20;display:grid;place-items:center;background:#0a090bdd;border:2px dashed #ff4d5588;border-radius:16px;margin:10px;pointer-events:none}
.cv-drop div{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff}
.cv-drop svg{width:44px;height:44px;color:var(--red)}

/* membres */
.cv-members{min-height:0;overflow:auto;padding:20px 12px;border-left:1px solid var(--line);background:var(--side)}
.cv-members h3{display:flex;align-items:center;gap:8px;margin:0 8px 12px;color:var(--dim);font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.cv-members h3 b{padding:1px 7px;border-radius:99px;background:#2ecc7120;color:#7ee2a8;letter-spacing:0}
.cv-members ul{list-style:none;margin:0;padding:0}
.cv-members li{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px;border-radius:10px;font-size:14px;animation:cv-in .2s ease}
.cv-members li:hover{background:var(--hover)}
.cv-members li b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--soft)}
.cv-members li b.admin{color:#ff7076}
.cv-members li .cv-av{width:32px;height:32px;font-size:12.5px}
.cv-members li svg{width:15px;height:15px;margin-left:auto;color:#7ee2a8;flex:none}

/* emojis */
.cv-emoji{position:fixed;z-index:65;display:flex;flex-direction:column;width:min(352px,calc(100vw - 16px));height:min(380px,60vh);border:1px solid var(--line2);border-radius:16px;background:#15121a;box-shadow:0 24px 60px #000d;overflow:hidden;animation:cv-pop .14s ease}
.cv-emoji-cats{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line);overflow-x:auto;flex:none}
.cv-emoji-cats button{flex:none;width:34px;height:32px;padding:0;border:0;border-radius:8px;background:none;font-size:18px;cursor:pointer;filter:grayscale(.7);opacity:.7}
.cv-emoji-cats button:hover,.cv-emoji-cats button[aria-selected=true]{background:#ffffff12;filter:none;opacity:1}
.cv-emoji-grid{flex:1;overflow-y:auto;padding:6px 8px 10px}
.cv-emoji-grid h4{margin:10px 4px 4px;color:var(--dim);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cv-emoji-grid .row{display:grid;grid-template-columns:repeat(8,1fr)}
.cv-emoji-grid .row button{height:38px;padding:0;border:0;border-radius:8px;background:none;font-size:24px;line-height:1;cursor:pointer;transition:transform .08s}
.cv-emoji-grid .row button:hover{background:#ffffff14;transform:scale(1.12)}

/* divers */
.cv-lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:#000e;animation:cv-in .15s ease;cursor:zoom-out}
.cv-lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 80px #000}
.cv-lightbox .cv-icon{position:absolute;top:14px;right:14px;background:#ffffff14;color:#fff}
.cv-gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#050506d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cv-gate-card{width:min(430px,100%);padding:34px 28px 24px;border:1px solid var(--line2);border-radius:24px;background:linear-gradient(160deg,#18101a,#0b0a0c 60%);text-align:center;box-shadow:0 30px 90px #000c,0 0 80px #ff2d3a1a}
.cv-gate-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:20px;background:linear-gradient(135deg,#ff3a45,#8f1520);box-shadow:0 0 34px #ff2d3a55}
.cv-gate-ico svg{width:30px;height:30px}
.cv-gate h2{margin:0 0 8px;font-size:22px;font-weight:850}
.cv-gate p{margin:0 0 20px;color:#a4a4ae;font-size:14.5px;line-height:1.55}
.cv-btn{display:flex;align-items:center;justify-content:center;height:46px;margin-top:10px;border:0;border-radius:13px;background:linear-gradient(120deg,#ff3a45,#c4121f);color:#fff;font-weight:750;text-decoration:none;cursor:pointer;box-shadow:0 8px 24px #ff2d3a33}
.cv-btn.small{height:38px;margin:0;padding:0 14px;font-size:13.5px;border-radius:10px;white-space:nowrap}
.cv-btn.ghost{border:1px solid var(--line2);background:#ffffff06;color:#e4e4ea;box-shadow:none}
.cv-gate-home{display:inline-block;margin-top:16px;color:var(--muted);font-size:13px;text-decoration:none}
.cv-gate-home:hover{color:#fff}
.cv-toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translateX(-50%);max-width:calc(100% - 32px);padding:11px 16px;border:1px solid var(--line2);border-radius:13px;background:#17141aee;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f4f4f6;font-size:13.5px;box-shadow:0 14px 40px #000c;animation:cv-in .2s ease}
.cv-toast.err{border-color:#ff4d5577;color:#ffd0d3}
.cv-toast.clickable{cursor:pointer}
.cv-shade{display:none}

/* ---------- tablette / mobile ---------- */
@media (max-width:1100px){
  .cv,.cv.no-members,.cv:not([data-view=channel]){grid-template-columns:72px 248px minmax(0,1fr) 0}
  .cv-members{display:none}
  .cv[data-view=channel].show-members{grid-template-columns:72px 248px minmax(0,1fr) 220px}
  .cv[data-view=channel].show-members .cv-members{display:block}
}
@media (max-width:760px){
  .cv,.cv.no-members,.cv:not([data-view=channel]),.cv[data-view=channel].show-members{grid-template-columns:minmax(0,1fr)}
  .cv-rail{position:absolute;inset:0 auto 0 0;z-index:11;width:72px;transform:translateX(-102%);transition:transform .22s ease}
  .cv-side{position:absolute;inset:0 auto 0 72px;z-index:10;width:min(280px,calc(100% - 96px));transform:translateX(calc(-100% - 72px));transition:transform .22s ease;box-shadow:24px 0 60px #000c}
  .cv.side-open .cv-rail,.cv.side-open .cv-side{transform:none}
  .cv.side-open .cv-shade{display:block;position:absolute;inset:0;z-index:9;background:#000a}
  .cv[data-view=channel].show-members .cv-members{position:absolute;top:60px;right:0;bottom:0;z-index:6;width:min(260px,82%);box-shadow:-24px 0 60px #000c}
  .cv-icon.cv-menu,.cv-icon.cv-close-side{display:grid}
  .cv-head{padding:0 6px;gap:4px}
  .cv-topic{display:none}
  .cv-welcome{margin:0 14px 8px}
  .cv-msgs{padding:0 4px}
  .cv-msg{padding:2px 12px 2px 10px;column-gap:10px}
  .cv-msg .side-time{left:4px}
  .cv-tools{right:6px}
  .cv-bottom{padding:0 8px max(8px,env(safe-area-inset-bottom))}
  .cv-friends{padding:12px 12px 20px}
  .cv-addrow{flex-wrap:wrap;padding:8px}
  .cv-addrow input{flex-basis:100%;padding:4px 6px}
  .cv-addrow .cv-btn{width:100%}
  .cv-call-people .cv-av{width:66px;height:66px;font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.cv-rail-btn.server.unread::after{content:"";position:absolute;left:-12px;top:20px;width:8px;height:8px;border-radius:0 4px 4px 0;background:#fff}
.cv-rail-btn.server.active.unread::after{display:none}

/* ---------- vue vocale : tuiles ---------- */
.cv[data-view=voice] .cv-scroll,.cv[data-view=voice] .cv-bottom,.cv[data-view=voice] .cv-newpill,.cv[data-view=voice] .cv-members,.cv[data-view=voice] #cv-members-btn{display:none!important}
.cv[data-view=voice]{grid-template-columns:72px 264px minmax(0,1fr) 0}
.cv-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#000}
.cv-tiles{flex:1;min-height:0;display:grid;gap:10px;padding:14px;align-content:center;justify-content:center;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.cv-tiles.spot{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
.cv-tiles.spot .cv-strip{display:flex;gap:10px;overflow-x:auto;padding-top:2px}
.cv-tiles.spot .cv-strip .cv-tile{flex:none;width:200px;max-height:none}
.cv-tile{position:relative;aspect-ratio:16/9;max-height:calc((100dvh - 190px) / var(--rows,1));width:100%;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h,350) 45% 30%),hsl(calc(var(--h,350) + 40) 45% 16%));display:grid;place-items:center;cursor:pointer;animation:cv-pop .2s ease;transition:box-shadow .12s;justify-self:center}
.cv-tiles.spot>.cv-tile{aspect-ratio:auto;height:100%;max-height:none;cursor:zoom-out}
.cv-tile .cv-av{width:clamp(56px,22%,104px);height:auto;aspect-ratio:1;font-size:clamp(20px,4vw,40px);box-shadow:0 8px 30px #0006}
.cv-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cv-tile.screen{background:#050506}
.cv-tile.screen video{object-fit:contain}
.cv-tile.mirror video{transform:scaleX(-1)}
.cv-tile.speaking{box-shadow:inset 0 0 0 3px var(--green),0 0 22px #2ecc7144}
.cv-tile .tag{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:4px 9px;border-radius:8px;background:#000000b3;color:#fff;font-size:13px;font-weight:650;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cv-tile .tag span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-tile .tag svg{width:15px;height:15px;color:#ff6b72;flex:none}
.cv-tile .live{position:absolute;left:10px;top:10px;padding:2px 7px;border-radius:6px;background:#e5333d;color:#fff;font-size:10.5px;font-weight:850;letter-spacing:.06em}
.cv-tile .tile-tools{position:absolute;right:8px;top:8px;display:none;gap:6px}
.cv-tile:hover .tile-tools,.cv-tile:focus-within .tile-tools{display:flex}
.cv-tile .tile-tools button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:#000000b3;color:#fff;cursor:pointer}
.cv-tile .tile-tools button svg{width:16px;height:16px}
.cv-tile .vol{position:absolute;right:8px;bottom:10px;display:none;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;background:#000000b3}
.cv-tile:hover .vol{display:flex}
.cv-tile .vol input{width:90px;accent-color:var(--green)}
.cv-tile .vol svg{width:14px;height:14px;color:#fff}
.cv-stage-join{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:20px;text-align:center;background:radial-gradient(600px 300px at 50% 40%,#2ecc7112,transparent),#000000cc}
.cv-sj-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#2ecc71,#1f7a45);box-shadow:0 0 40px #2ecc7144;margin-bottom:8px}
.cv-sj-ico svg{width:34px;height:34px;color:#fff}
.cv-stage-join h2{margin:0;font-size:24px;font-weight:850}
.cv-stage-join p{margin:0 0 12px;color:var(--muted);font-size:14px}
.cv-btn.green{background:linear-gradient(120deg,#2ecc71,#1f9d55);color:#04150b;box-shadow:0 8px 24px #2ecc7133;padding:0 22px}
.cv-vctl{flex:none;display:flex;justify-content:center;align-items:center;gap:10px;padding:12px 12px 16px;background:linear-gradient(0deg,#000,#0000)}
.cv-vgroup{display:flex;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:14px;background:#111014}
.cv-vbtn{display:grid;place-items:center;width:48px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:#e4e4ea;cursor:pointer;transition:background .15s,color .15s,transform .1s}
.cv-vbtn:hover{background:#ffffff12}
.cv-vbtn:active{transform:scale(.94)}
.cv-vbtn svg{width:22px;height:22px}
.cv-vbtn .off{display:none}
#cv-v-mic[aria-pressed=true],#cv-v-deaf[aria-pressed=true]{color:#ff6b72;background:#ff4d551a}
#cv-v-mic[aria-pressed=true] .on,#cv-v-deaf[aria-pressed=true] .on{display:none}
#cv-v-mic[aria-pressed=true] .off,#cv-v-deaf[aria-pressed=true] .off{display:block}
#cv-v-cam .on{display:none}#cv-v-cam .off{display:block}
#cv-v-cam[aria-pressed=true] .on{display:block}#cv-v-cam[aria-pressed=true] .off{display:none}
#cv-v-cam[aria-pressed=true],#cv-v-screen[aria-pressed=true],#cv-v-sb[aria-pressed=true]{background:#2ecc7122;color:#7ee2a8}
.cv-vbtn.hang{width:64px;height:52px;border-radius:14px;background:#e5333d;color:#fff}
.cv-vbtn.hang:hover{background:#f04450}
.cv-sbtoast{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:3}
.cv-sbtoast div{padding:6px 12px;border-radius:99px;background:#000000c0;border:1px solid var(--line2);font-size:13px;animation:cv-pop .15s ease}

/* soundboard */
.cv-sb{position:fixed;z-index:66;display:flex;flex-direction:column;width:min(420px,calc(100vw - 16px));max-height:min(480px,70vh);border:1px solid var(--line2);border-radius:18px;background:#15121a;box-shadow:0 24px 60px #000d;animation:cv-pop .14s ease}
.cv-sb header{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 16px;border-bottom:1px solid var(--line)}
.cv-sb header b{flex:1;font-size:15px}
.cv-sb-vol{display:flex;align-items:center;gap:6px;color:var(--muted)}
.cv-sb-vol svg{width:16px;height:16px}
.cv-sb-vol input{width:90px;accent-color:var(--red)}
.cv-sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;padding:12px;overflow:auto}
.cv-sound{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 10px;border:1px solid var(--line2);border-radius:11px;background:#1d1922;color:#e4e4ea;font-size:13px;font-weight:650;text-align:left;cursor:pointer;transition:background .12s,border-color .12s,transform .08s}
.cv-sound:hover{background:#262030;border-color:#ffffff2a}
.cv-sound:active{transform:scale(.96)}
.cv-sound.playing{border-color:var(--green);box-shadow:0 0 14px #2ecc7144}
.cv-sound i{font-style:normal;font-size:20px}
.cv-sound span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-sound .x{position:absolute;right:-6px;top:-6px;display:none;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#e5333d;color:#fff;font-size:12px;cursor:pointer}
.cv-sound:hover .x{display:grid}
.cv-sb-add{display:flex;gap:6px;padding:10px 12px 4px;border-top:1px solid var(--line)}
.cv-sb-add input{flex:1;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line2);border-radius:10px;background:var(--raise);outline:none}
.cv-sb-emoji{width:38px;height:38px;flex:none;border:1px solid var(--line2);border-radius:10px;background:var(--raise);font-size:18px;cursor:pointer}
.cv-sb-hint{display:block;padding:2px 14px 12px;color:var(--dim);font-size:11.5px}
.cv-sb-hint.ok{color:#7ee2a8}.cv-sb-hint.err{color:#ff8a8f}
@media (max-width:1100px){.cv[data-view=voice]{grid-template-columns:72px 248px minmax(0,1fr) 0}}
@media (max-width:760px){
  .cv[data-view=voice]{grid-template-columns:minmax(0,1fr)}
  .cv-tiles{padding:8px;gap:8px}
  .cv-vbtn{width:42px;height:42px}
  .cv-vctl{gap:6px;padding:8px 6px max(10px,env(safe-area-inset-bottom))}
  .cv-tiles.spot .cv-strip .cv-tile{width:130px}
}
.cv-sb-add{flex-wrap:wrap}
.cv-sb-add input{flex:1 1 150px}
.cv-sb-add .cv-btn{flex:1 1 auto}
.cv-sb-vol input{width:min(90px,24vw)}