@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin-wght-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
:root{--rail:#14121A;--side:#17151E;--chat:#14121A;--input:#221F2B;--text:#F4F1FA;--muted:#A8A3B5;--accent:#6FE3D2;--hover:#1E1B26;--hover2:#18161F;--mention:#33251F;--danger:#F23F43;
  --deep:#221F2B;--sel:#2A2633;--line:#2A2633;--bar:#18161F;--btn:#3A3546;--float:#1E1B26;--border:#24212D;--strong:#fff;--fs:15px;
  --coral:#FF6B4A;--on-coral:#1A0E0A;--live:#6FE3D2;--on-live:#0F2B27;--live-text:#6FE3D2;--live-bg:#18302C;--bubble:#262330;--card:#1E1B26;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Figtree",system-ui,"Segoe UI",sans-serif}
:root[data-theme="light"]{--rail:#FBF9FC;--side:#F6F3F8;--chat:#FFFFFF;--input:#F0EDF3;--text:#1E1A26;--muted:#615B6E;--accent:#0E8F7E;--hover:#F1EEF4;--hover2:#F8F6FA;--mention:#FFF1E8;
  --deep:#EEEAF2;--sel:#E6E1EC;--line:#E6E1EC;--bar:#F6F3F8;--btn:#D9D3E0;--float:#FFFFFF;--border:#E9E4EE;--strong:#14121A;
  --live:#14A390;--on-live:#fff;--live-text:#0B7A6B;--live-bg:#E2F6F2;--bubble:#EFEBF3;--card:#F6F3F8}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--rail:#FBF9FC;--side:#F6F3F8;--chat:#FFFFFF;--input:#F0EDF3;--text:#1E1A26;--muted:#615B6E;--accent:#0E8F7E;--hover:#F1EEF4;--hover2:#F8F6FA;--mention:#FFF1E8;
  --deep:#EEEAF2;--sel:#E6E1EC;--line:#E6E1EC;--bar:#F6F3F8;--btn:#D9D3E0;--float:#FFFFFF;--border:#E9E4EE;--strong:#14121A;
  --live:#14A390;--on-live:#fff;--live-text:#0B7A6B;--live-bg:#E2F6F2;--bubble:#EFEBF3;--card:#F6F3F8}}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:15px/1.375 system-ui,"Segoe UI",sans-serif;background:var(--chat);color:var(--text);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{display:flex;height:100vh}
#servers{width:72px;background:var(--rail);padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:8px;overflow-y:auto;flex:none}
.srv{width:48px;height:48px;border-radius:50%;background:var(--chat);display:grid;place-items:center;font-weight:700;transition:border-radius .15s,background .15s;position:relative}
.srv:hover,.srv.on{border-radius:16px;background:var(--accent);color:var(--strong)}
.srv.on::before{content:"";position:absolute;left:-12px;width:4px;height:40px;background:#fff;border-radius:0 4px 4px 0}
.srv.add{color:var(--accent);font-size:24px}.srv.add:hover{color:var(--strong)}
.sep{width:32px;height:2px;background:var(--side)}
#sidebar{width:240px;background:var(--side);display:flex;flex-direction:column;flex:none}
#side-head{height:48px;padding:0 16px;display:flex;align-items:center;font-weight:700;border-bottom:1px solid var(--border)}
#side-list{flex:1;overflow-y:auto;padding:12px 8px}
.cat{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;padding:4px 8px}
.cat button{color:var(--muted);font-size:16px;line-height:1}
.chan{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border-radius:4px;color:var(--muted);text-align:left}
.chan:hover{background:var(--hover);color:var(--text)}.chan.on{background:var(--sel);color:var(--strong)}
.chan.unread{color:var(--strong);font-weight:600}.chan .badge{margin-left:auto;background:var(--danger);color:var(--strong);border-radius:8px;font-size:11px;padding:0 5px}
#me{height:52px;background:var(--bar);display:flex;align-items:center;gap:8px;padding:0 8px}
#me select{background:var(--input);color:var(--text);border:0;border-radius:4px;padding:4px;flex:1}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--strong);flex:none;position:relative}
.av .st{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:3px solid var(--side)}
#chat{flex:1;display:flex;flex-direction:column;min-width:0}
#chat-head{height:48px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--border);flex:none}
#chan-title{font-weight:700}#chan-topic{color:var(--muted);font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-box{position:relative}
#q{width:160px;background:var(--deep);border:0;border-radius:4px;padding:5px 8px;color:var(--text);transition:width .15s}#q:focus{width:240px;outline:none}
#sugg{position:absolute;right:0;top:calc(100% + 6px);width:280px;background:var(--float);border-radius:6px;list-style:none;margin:0;padding:6px;display:none;z-index:10}
#sugg.open{display:block}#sugg li{display:flex;justify-content:space-between;padding:6px 8px;border-radius:4px;cursor:pointer}
#sugg li.active,#sugg li:hover{background:var(--hover)}#sugg .h{color:var(--muted);font-size:12px}
#view{flex:1;overflow-y:auto;padding:16px 0}
.welcome{padding:0 16px 16px;color:var(--muted)}.welcome h2{color:var(--strong);margin:0 0 4px;font-size:28px}
.day{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin:16px 16px 8px}.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line)}
.msg{display:flex;gap:16px;padding:2px 48px 2px 16px;position:relative}
.msg.first{margin-top:14px}.msg:hover{background:var(--hover2)}.msg.mentioned{background:var(--mention);box-shadow:inset 2px 0 #f0b232}
.msg.flash{animation:flash 1.6s}@keyframes flash{0%,40%{background:#4a4f2a}}
.msg .gut{width:40px;flex:none;color:var(--muted);font-size:11px;text-align:right;padding-top:3px;visibility:hidden}.msg:hover .gut{visibility:visible}
.msg.first .gut{visibility:visible}.msg .gut .av{width:40px;height:40px}
.body{min-width:0;flex:1}.who{font-weight:600}.when{color:var(--muted);font-size:12px;margin-left:6px}
.text{white-space:pre-wrap;word-wrap:break-word}.edited{color:var(--muted);font-size:11px}
.text code{background:var(--deep);padding:1px 4px;border-radius:3px;font-size:13px}.text a{color:#00a8fc}
.mention{background:#3c4270;color:#c9cdfb;border-radius:3px;padding:0 2px}
.replyto{font-size:13px;color:var(--muted);margin-bottom:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.replyto b{color:var(--text)}
.reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.react{background:var(--side);border:1px solid transparent;border-radius:8px;padding:0 6px;font-size:14px}.react.mine{background:#373a6b;border-color:#5865f2}
.tools{position:absolute;right:16px;top:-14px;background:var(--side);border:1px solid var(--border);border-radius:6px;display:none}
.msg:hover .tools{display:flex}.tools button{padding:4px 7px}.tools button:hover{background:var(--hover)}
.edit-box{width:100%;background:var(--input);color:var(--text);border:0;border-radius:6px;padding:8px;font:inherit;resize:none}
.hint{font-size:12px;color:var(--muted)}
#typing{height:20px;padding:0 16px;font-size:13px;color:var(--muted)}
#composer{padding:0 16px 20px;flex:none}
#reply-bar{background:var(--side);border-radius:8px 8px 0 0;padding:6px 12px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
#input{width:100%;background:var(--input);color:var(--text);border:0;border-radius:8px;padding:11px 16px;font:inherit;resize:none;max-height:200px;outline:none}
#members{width:240px;background:var(--side);padding:16px 8px;overflow-y:auto;flex:none}
#members.hide{display:none}#members h4{color:var(--muted);font-size:12px;text-transform:uppercase;margin:12px 8px 4px}
.mem{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:4px}.mem:hover{background:var(--hover)}.mem.off{opacity:.4}
.mem small{display:block;color:var(--muted);font-size:12px}
#results{width:360px;background:var(--side);display:flex;flex-direction:column;flex:none}
#results header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--muted)}
#res-list{overflow-y:auto;padding:8px}.res{background:var(--chat);border-radius:6px;padding:8px 10px;margin-bottom:8px;cursor:pointer}.res:hover{outline:1px solid var(--btn)}
.res .meta{font-size:12px;color:var(--muted)}mark{background:#f0b232;color:#000;border-radius:2px}
#picker{position:fixed;background:var(--side);border:1px solid var(--border);border-radius:8px;padding:6px;display:grid;grid-template-columns:repeat(6,32px);gap:2px;z-index:20}
#picker button{font-size:20px;padding:2px;border-radius:4px}#picker button:hover{background:var(--hover)}
dialog{background:var(--chat);color:var(--text);border:0;border-radius:8px;padding:16px;width:min(360px,90vw)}dialog::backdrop{background:#000a}
dialog input{width:100%;background:var(--deep);color:var(--text);border:0;border-radius:4px;padding:8px}dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:12px 0 0}
dialog button{padding:6px 14px;border-radius:4px}#dlg-ok{background:var(--accent);color:var(--strong)}
[hidden]{display:none!important}
#chan-title{white-space:nowrap}
#side-head{gap:8px;justify-content:space-between}#side-head button{color:var(--muted);font-size:13px}#side-head button:hover{color:var(--strong)}
.srv.home{background:#5865f2;color:var(--strong);font-size:20px}
.srv .dot{position:absolute;right:-2px;bottom:-2px;background:var(--danger);color:var(--strong);font-size:11px;border-radius:8px;padding:0 5px;border:3px solid var(--rail)}
#auth{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#3b3f8f,var(--deep));padding:16px}
.card{background:var(--chat);border-radius:8px;padding:28px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 32px #0008}
.card h1{margin:0;text-align:center}.card>p{margin:0;text-align:center;color:var(--muted)}
.card label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.card input{background:var(--deep);border:0;border-radius:4px;padding:10px;color:var(--text);font:inherit;text-transform:none}
.primary{background:#5865f2;color:var(--strong);border-radius:4px;padding:10px 16px;font-weight:600}.primary:hover{background:#4752c4}
.primary.green{background:var(--accent)}.danger-btn{color:var(--danger)}
.err{color:#fa777c;font-size:13px;min-height:1em;margin:0}.small{font-size:13px;color:var(--muted)}a{color:#00a8fc}
.dm{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:4px;color:var(--muted);text-align:left}
.dm:hover{background:var(--hover);color:var(--text)}.dm.on{background:var(--sel);color:var(--strong)}.dm.unread{color:var(--strong);font-weight:600}
.dm .badge{margin-left:auto;background:var(--danger);color:var(--strong);border-radius:8px;font-size:11px;padding:0 5px}
.av{position:relative}.av .st{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:3px solid var(--side)}
.friends{padding:0 24px}.tabs{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{padding:3px 10px;border-radius:4px;color:var(--muted)}.tabs button.on,.tabs button:hover{background:var(--sel);color:var(--strong)}
.tabs button.add{background:var(--accent);color:var(--strong)}.tabs button.add.on{background:none;color:var(--accent)}
.friend{display:flex;align-items:center;gap:12px;padding:10px 8px;border-top:1px solid var(--line);border-radius:6px}.friend:hover{background:var(--hover)}
.friend .grow{flex:1}.friend small{display:block;color:var(--muted)}
.friend .act{width:36px;height:36px;border-radius:50%;background:var(--side)}.friend .act:hover{color:var(--strong);background:var(--deep)}
.addf{display:flex;gap:8px;background:var(--deep);border-radius:8px;padding:8px}.addf input{flex:1;background:none;border:0;color:var(--text);font:inherit;outline:none}
.sys .text{color:var(--muted);font-style:italic}
#conn{position:fixed;top:0;left:0;right:0;background:var(--danger);color:var(--strong);text-align:center;padding:4px;z-index:50}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--float);color:var(--strong);padding:10px 16px;border-radius:6px;z-index:50;box-shadow:0 4px 16px #0008}
#toast.bad{background:#a12828}
.more{display:block;margin:0 auto 8px;color:#00a8fc}
.empty-state{text-align:center;color:var(--muted);padding:48px 16px}
[hidden]{display:none!important}
#app{height:100dvh}
#menu{display:none;font-size:20px;color:var(--muted)}
.input-row{display:flex;align-items:flex-start;background:var(--input);border-radius:8px}
.input-row #input{background:none}
#attach{width:40px;height:44px;color:var(--muted);font-size:22px;flex:none}#attach:hover{color:var(--strong)}
#reply-bar+#pending,#pending{display:flex;gap:8px;flex-wrap:wrap;background:var(--side);padding:10px;border-radius:8px 8px 0 0}
.pend{position:relative;width:110px;background:var(--input);border-radius:6px;padding:6px;font-size:12px;color:var(--muted)}
.pend img{width:100%;height:70px;object-fit:cover;border-radius:4px;display:block}
.pend .ico{height:70px;display:grid;place-items:center;font-size:32px}
.pend .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.pend button{position:absolute;top:-6px;right:-6px;background:var(--danger);color:var(--strong);border-radius:50%;width:20px;height:20px;font-size:12px}
.pend.up{opacity:.6}
.atts{display:flex;flex-direction:column;gap:6px;margin-top:4px;align-items:flex-start}
.att-img{max-width:min(400px,100%);max-height:300px;border-radius:8px;cursor:zoom-in;display:block}
.att-video{max-width:min(400px,100%);max-height:300px;border-radius:8px}
.att-file{display:flex;align-items:center;gap:10px;background:var(--side);border:1px solid var(--bar);border-radius:8px;padding:10px 12px;max-width:400px;color:var(--text);text-decoration:none}
.att-file .ico{font-size:28px}.att-file small{display:block;color:var(--muted)}
#drop{position:fixed;inset:0;background:#5865f2cc;color:var(--strong);font-size:24px;font-weight:700;display:grid;place-items:center;z-index:60;pointer-events:none}
#lightbox{position:fixed;inset:0;background:#000d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:70}
#lightbox img{max-width:92vw;max-height:84vh;border-radius:6px}#lightbox a{color:#ccc;font-size:14px}
.av{background-size:cover!important;background-position:center!important;overflow:visible}
#card{position:fixed;width:280px;background:var(--float);border-radius:8px;z-index:40;box-shadow:0 8px 24px #000a;overflow:hidden}
#card .ban{height:56px}#card .in{padding:0 14px 14px;margin-top:-30px}
#card .av{width:72px;height:72px;font-size:28px;border:5px solid var(--float)}
#card h3{margin:6px 0 0}#card .cs{color:var(--text);font-size:14px;margin-top:4px}#card .ab{color:var(--muted);font-size:13px;margin-top:8px;white-space:pre-wrap;border-top:1px solid var(--side);padding-top:8px}
#card .msgbtn{margin-top:10px;width:100%}
.who,.mem,.friend .grow b{cursor:pointer}
.mem small,.dm small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#profile-form{display:flex;flex-direction:column;gap:12px;min-width:min(380px,85vw)}
#profile-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted)}
#profile-form input,#profile-form select,#profile-form textarea{background:var(--deep);border:0;border-radius:4px;padding:8px;color:var(--text);font:inherit;text-transform:none}
#profile-form input[type=color]{padding:2px;height:36px;width:80px}
.prof-top{display:flex;gap:16px;align-items:center}#prof-av .av{width:80px;height:80px;font-size:32px}
#me .meinfo{flex:1;min-width:0;cursor:pointer;border-radius:4px;padding:2px 4px}#me .meinfo:hover{background:var(--hover)}
#me .meinfo small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan.voice{color:var(--muted)}
.vmem{display:flex;align-items:center;gap:8px;padding:3px 8px 3px 28px;font-size:14px;color:var(--muted)}
.vmem .av{width:24px;height:24px;font-size:11px;transition:box-shadow .1s}.vmem i{font-style:normal;margin-left:auto;font-size:12px}
.speaking .av,.vmem.speaking .av{box-shadow:0 0 0 2px var(--side),0 0 0 4px #23a55a}
#voice-panel{background:var(--bar);border-bottom:1px solid var(--border);padding:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vp-info{flex:1;min-width:0}.vp-info b{display:block;font-size:13px}.vp-info b.ok{color:#23a55a}.vp-info b.warn{color:#f0b232}
.vp-info small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#voice-panel button{width:32px;height:32px;border-radius:4px}#voice-panel button:hover{background:var(--hover)}
#vp-leave{order:2}.vp-btns{order:3;width:100%;display:flex;gap:6px}.vp-btns button{flex:1;background:var(--side)}
.vp-btns button.off{background:#4b2224}
#call.active{background:var(--danger);border-radius:6px;padding:2px 6px}
.callbar{position:sticky;top:-16px;z-index:2;margin:-16px 0 8px;background:var(--deep);padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.callbar .av{width:36px;height:36px}.callbar button{margin-left:auto}
#ring{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--float);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;z-index:80;box-shadow:0 8px 32px #000c;animation:pop .2s}
#ring small{display:block;color:var(--muted)}#ring .av{width:44px;height:44px;animation:pulse 1s infinite}
#ring button{width:44px;height:44px;border-radius:50%;font-size:18px;color:var(--strong)}#ring-accept{background:#23a55a}#ring-decline{background:var(--danger)}
@keyframes pulse{50%{box-shadow:0 0 0 6px #23a55a55}}@keyframes pop{from{transform:translate(-50%,-20px);opacity:0}}
#stage-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--deep);font-size:13px;color:var(--muted)}
#stage-bar button{color:#00a8fc;font-size:13px}
#stage{background:#000;padding:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-height:48vh;overflow:auto;flex:none}
#stage.collapsed{display:none!important}
#stage.has-focus{grid-template-columns:1fr;max-height:60vh}#stage.has-focus .tile:not(.focus){display:none}
.tile{position:relative;background:var(--deep);border-radius:8px;overflow:hidden;aspect-ratio:16/9;cursor:pointer;transition:box-shadow .1s}
.tile.focus{aspect-ratio:auto;height:calc(60vh - 16px)}
.tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tile.screen video,.tile.focus video{object-fit:contain}
.tile.mine video{transform:scaleX(-1)}
.tile.speaking{box-shadow:inset 0 0 0 3px #23a55a}
.tile .tl{position:absolute;left:8px;bottom:8px;background:#000a;color:var(--strong);font-size:12px;padding:2px 8px;border-radius:4px}
.tile .tile-full{position:absolute;right:8px;top:8px;background:#000a;color:var(--strong);border-radius:4px;padding:2px 6px;opacity:0;transition:opacity .15s}
.tile:hover .tile-full{opacity:1}
.vp-btns button.on{background:#1f4d2e}
.vmem i{display:flex;gap:4px;align-items:center}.vmem .live{background:var(--danger);color:var(--strong);font-size:9px;font-weight:700;border-radius:3px;padding:0 4px}
@media (max-width:640px){#stage{grid-template-columns:1fr 1fr;max-height:40vh}.tile.focus{height:38vh}}
.chan .gear{margin-left:auto;opacity:0;padding:0 4px;color:var(--muted)}.chan:hover .gear,.chan.on .gear{opacity:1}.chan .gear:hover{color:var(--strong)}
.chan .badge+.gear{margin-left:4px}
.srv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.big{width:min(860px,96vw);max-height:90vh;padding:0;overflow:hidden}
.srv-wrap{display:flex;height:min(640px,86vh);position:relative}
#srv-tabs{width:200px;background:var(--side);padding:16px 8px;display:flex;flex-direction:column;gap:2px;flex:none}
#srv-tabs h4{margin:0 8px 8px;font-size:12px;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
#srv-tabs button{text-align:left;padding:6px 10px;border-radius:4px;color:var(--muted)}#srv-tabs button.on,#srv-tabs button:hover{background:var(--sel);color:var(--strong)}
#srv-body{flex:1;overflow:auto;padding:16px 24px}#srv-body h3{margin-top:0}
#srv-close{position:absolute;right:12px;top:10px;font-size:18px;color:var(--muted)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fld input{background:var(--deep);border:0;border-radius:4px;padding:8px;color:var(--text);font:inherit;text-transform:none}
.fld input[type=color]{width:70px;height:34px;padding:2px}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;margin:8px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.row button,#srv-body>button,#srv-new-invite{background:var(--btn);color:var(--strong);border-radius:4px;padding:6px 12px}
.row button:disabled{opacity:.4;cursor:default}
.roles-wrap{display:flex;gap:16px;min-height:100%}
.role-list{width:190px;flex:none;display:flex;flex-direction:column;gap:2px}
.role-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;text-align:left}.role-item:hover,.role-item.on{background:var(--sel)}
.role-item i,.rchip i,.ow td i{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}.role-item small{margin-left:auto;color:var(--muted)}
.role-edit{flex:1;min-width:0}
.perm{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.perm small{display:block;color:var(--muted);font-size:12px}.perm input{width:18px;height:18px;flex:none}
.warn-box{background:#4b3a1a;border-radius:6px;padding:8px 12px;font-size:13px}
.card-roles{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rchip{display:inline-flex;align-items:center;gap:5px;background:var(--side);border:1px solid var(--line);border-radius:4px;padding:1px 7px;font-size:12px;color:var(--text)}
button.rchip{opacity:.55}button.rchip.has{opacity:1;border-color:#5865f2}button.rchip:hover{opacity:1}
.mod-btns{display:flex;gap:12px;margin-top:10px}
.ow{border-collapse:collapse;width:100%;font-size:14px}.ow th{color:var(--muted);font-size:12px;font-weight:600;padding:4px}
.ow td{padding:4px;border-top:1px solid var(--line);text-align:center}.ow td:first-child{text-align:left;display:flex;gap:6px;align-items:center}
.tri{width:34px;height:26px;border-radius:4px;background:var(--side);font-weight:700}.tri.allow{background:#1f4d2e;color:#57f287}.tri.deny{background:#4b2224;color:#fa777c}
#chan-body{padding:16px 24px;overflow:auto;max-height:86vh}
#input:disabled{cursor:not-allowed;opacity:.6}
@media (max-width:640px){.srv-wrap{flex-direction:column}#srv-tabs{width:auto;flex-direction:row;flex-wrap:wrap;padding:8px}#srv-tabs h4{display:none}.roles-wrap{flex-direction:column}.role-list{width:auto}}
dialog .chk input,dialog .perm input,dialog input[type=checkbox]{width:18px;height:18px;flex:none;padding:0}
#poll-btn{width:40px;height:44px;color:var(--muted);font-size:18px;flex:none}#poll-btn:hover{color:var(--strong)}
#pins{font-size:16px}
.poll{background:var(--side);border:1px solid var(--bar);border-radius:8px;padding:12px;margin-top:6px;max-width:460px}
.poll .pq{font-weight:700;font-size:16px;margin-bottom:2px}
.pa{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--deep);border:1px solid transparent;border-radius:6px;padding:9px 12px;margin-top:6px;overflow:hidden}
.pa:hover:not(:disabled){border-color:#5865f2}.pa.on{border-color:#5865f2}.pa:disabled{cursor:default}
.pa .bar{position:absolute;inset:0 auto 0 0;background:#5865f233;transition:width .3s}.pa.on .bar{background:#5865f255}.pa.win .bar{background:#23a55a44}
.pa .box,.pa .pt,.pa .pc{position:relative}.pa .pt{flex:1}.pa .pc{color:var(--muted);font-size:13px;white-space:nowrap}
.poll .pf{margin-top:8px;font-size:12px;color:var(--muted)}.poll.ended .pq::after{content:" · terminé";color:var(--muted);font-weight:400;font-size:13px}
.link{color:#00a8fc;font-size:12px;padding:0}.link:hover{text-decoration:underline}
#poll-form{display:flex;flex-direction:column;gap:6px;min-width:min(420px,85vw)}
#poll-form .fld input,#poll-form select{background:var(--deep);border:0;border-radius:4px;padding:8px;color:var(--text);font:inherit;text-transform:none}
.pans{display:flex;gap:6px;margin-bottom:6px}.pans input{flex:1;width:auto!important}.pans button{color:var(--muted);width:30px}
#poll-add{color:#00a8fc;align-self:flex-start;text-transform:none}
#msugg{list-style:none;margin:0 0 6px;padding:6px;background:var(--side);border-radius:8px;max-height:260px;overflow:auto}
#msugg li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:4px;cursor:pointer}#msugg li.active,#msugg li:hover{background:var(--sel)}
#msugg .av{width:24px;height:24px;font-size:11px}#msugg small{color:var(--muted);margin-left:auto;font-size:12px}
.res{cursor:pointer}
img.emoji{width:22px;height:22px;object-fit:contain;vertical-align:-5px}
.big-emoji img.emoji{width:44px;height:44px}
.react img.emoji{width:16px;height:16px;vertical-align:-3px}
#picker{grid-template-columns:repeat(6,34px);max-height:320px;overflow:auto}
#picker .pk-h{grid-column:1/-1;font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 2px}
#picker button img.emoji{width:24px;height:24px}
#emoji-btn,#rec-btn{width:40px;height:44px;color:var(--muted);font-size:18px;flex:none}#emoji-btn:hover,#rec-btn:hover{color:var(--strong)}
.chan.thread{padding-left:22px;font-size:14px}
.tchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:6px;background:var(--side);border:1px solid var(--bar);border-radius:8px;padding:8px 12px;text-align:left;max-width:420px}
.tchip:hover{border-color:#5865f2}.tchip span{font-size:12px;color:var(--muted)}
.crumb{color:var(--muted);font-weight:600;font-size:15px}.crumb:hover{color:var(--strong);text-decoration:underline}
#chan-topic .link{font-size:13px}.arch{background:var(--btn);color:var(--strong);font-size:11px;border-radius:3px;padding:1px 5px}
.starter{margin-top:12px;background:var(--side);border-left:3px solid #5865f2;border-radius:4px;padding:8px 12px;color:var(--text)}
.starter .meta{font-size:12px;color:var(--muted);margin-bottom:2px}
.vnote{display:flex;align-items:center;gap:10px;background:var(--side);border:1px solid var(--bar);border-radius:24px;padding:6px 14px 6px 6px;max-width:340px;margin-top:4px}
.vplay{width:34px;height:34px;border-radius:50%;background:#5865f2;color:var(--strong);font-size:14px;flex:none}
.vwave{flex:1;height:30px;display:flex;align-items:center;gap:2px;cursor:pointer}
.vwave i{flex:1;background:var(--btn);border-radius:2px;min-height:3px}.vwave i.played{background:#949cf7}
.vtime{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
#rec-bar{display:flex;align-items:center;gap:10px;background:var(--input);border-radius:8px;padding:6px 10px}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#f23f43;animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}
#rec-time{font-variant-numeric:tabular-nums;min-width:36px}#rec-wave{flex:1;height:32px;min-width:0}
#rec-cancel,#rec-send{width:36px;height:36px;border-radius:50%;font-size:16px}#rec-cancel{background:var(--btn)}#rec-send{background:#5865f2;color:var(--strong)}
.emo-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.emo-add input{background:var(--deep);border:0;border-radius:4px;padding:8px;color:var(--text);font:inherit}
.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.emo{background:var(--side);border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.emo img{width:48px;height:48px;object-fit:contain}.emo small{color:var(--muted);font-size:11px}.emo .danger-btn{font-size:12px}
.vnote{width:min(340px,100%)}

/* Texte blanc sur fonds colorés, quel que soit le thème */
.primary,.srv.home,.srv:hover,.srv.on,.srv .dot,.badge,.chan .badge,.dm .badge,#ring button,.vplay,#rec-send,.live,#conn,#toast,#drop,.tile .tl,.tile .tile-full,#lightbox a,
.react.mine,.tabs button.add,#dlg-ok,.pend button,#call.active,.mention[data-goto],.rchip.has{color:#fff}
.mention{color:#c9cdfb}:root[data-theme="light"] .mention{background:#e6e8fd;color:#3c4ab8}
:root[data-theme="light"] .tabs button.on,:root[data-theme="light"] .tabs button:hover{color:var(--strong)}
:root[data-theme="light"] .tabs button.add.on{color:var(--accent)}
:root[data-theme="light"] #auth{background:linear-gradient(135deg,#8e97ff,#e3e5e8)}
:root[data-theme="light"] .msg.flash{animation:flashl 1.6s}@keyframes flashl{0%,40%{background:#fdf3d8}}
:root[data-theme="light"] .tri.allow{background:#d1f3dc;color:#1a7f37}:root[data-theme="light"] .tri.deny{background:#fde2e3;color:#c4282d}
:root[data-theme="light"] .vp-btns button.off{background:#fde2e3}:root[data-theme="light"] .vp-btns button.on{background:#d1f3dc}
:root[data-theme="light"] .warn-box{background:#fdf3d8}
body{font-size:var(--fs)}
/* --- Markdown */
.text{white-space:normal}
.codeblock{position:relative;background:var(--deep);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin:4px 0;overflow-x:auto;font-size:13px;line-height:1.45;white-space:pre}
.codeblock code{background:none;padding:0;font-family:ui-monospace,Consolas,monospace}.codeblock .lang{position:absolute;right:8px;top:4px;font-size:11px;color:var(--muted)}
blockquote{margin:2px 0;padding:0 0 0 12px;border-left:4px solid var(--btn)}
.text ul,.text ol{margin:2px 0;padding-left:22px}
.h1{font-size:1.5em;font-weight:800;margin:4px 0}.h2{font-size:1.25em;font-weight:700;margin:3px 0}.h3{font-size:1.08em;font-weight:700;margin:2px 0}
.spoiler{background:var(--btn);color:transparent;border-radius:3px;cursor:pointer;transition:background .15s;user-select:none}
.spoiler:not(.shown):hover{filter:brightness(1.15)}.spoiler.shown{background:rgba(127,127,127,.18);color:inherit;user-select:text;cursor:auto}
.spoiler.shown *{visibility:visible}.spoiler:not(.shown) *{visibility:hidden}
/* --- Nouveaux messages / présent */
.newdiv{display:flex;align-items:center;margin:14px 16px 4px;color:var(--danger);font-size:11px;font-weight:700;text-transform:uppercase}
.newdiv::before{content:"";flex:1;height:1px;background:var(--danger)}.newdiv span{background:var(--danger);color:#fff;border-radius:3px;padding:0 6px;margin-left:4px}
#chat{position:relative}
#jump-present{position:absolute;right:24px;bottom:96px;background:var(--btn);color:var(--strong);border-radius:16px;padding:6px 14px;font-size:13px;box-shadow:0 4px 12px #0006;z-index:4}
#jump-present.news{background:#5865f2;color:#fff}#jump-present.news::before{content:"Nouveaux messages · "}
/* --- Bloqués */
.blocked-msg .body{color:var(--muted);font-size:13px;padding:4px 0}
.block-link{display:block;margin:10px auto 0;font-size:13px}.danger-link{color:var(--danger)!important}
/* --- Aller à… */
.qs-open{margin:8px 8px 0;background:var(--deep);color:var(--muted);border-radius:4px;padding:6px 8px;text-align:left;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.qs-open:hover{color:var(--text)}
kbd{background:var(--sel);border-radius:3px;padding:0 4px;font-size:11px;font-family:inherit;color:var(--text)}
#qs{width:min(560px,94vw);padding:16px;top:12vh;margin-top:0;position:fixed}
#qs-input{width:100%;font-size:18px;padding:12px}
#qs-list{list-style:none;margin:10px 0 6px;padding:0;max-height:52vh;overflow:auto}
#qs-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:4px;cursor:pointer}
#qs-list li.active,#qs-list li:hover{background:var(--sel)}#qs-list li small{color:var(--muted)}#qs-list li.unread span{font-weight:700;color:var(--strong)}
/* --- Paramètres */
#settings-body{padding:16px 24px;overflow:auto;max-height:86vh}#settings-body h4{margin:18px 0 8px;font-size:12px;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.seg button{background:var(--deep);border-radius:6px;padding:8px 12px;border:2px solid transparent}
.seg button.on{border-color:#5865f2}
#settings-body input[type=range]{width:100%;accent-color:#5865f2;padding:0;background:none}
#settings-body .row button,#settings-body #ask-notif{background:var(--btn);color:var(--strong);border-radius:4px;padding:6px 12px}
#settings-body menu{display:flex;justify-content:flex-end;padding:0;margin:16px 0 0}
#open-settings{color:var(--muted);font-size:18px;width:32px;height:32px;border-radius:4px}#open-settings:hover{background:var(--hover);color:var(--strong)}
/* --- Mode compact */
body.compact .msg.first{margin-top:6px}body.compact .msg .gut .av{width:26px;height:26px;font-size:12px}body.compact .msg .gut{width:26px}
body.compact .msg{padding-top:0;padding-bottom:0;gap:10px}body.compact .day{margin:8px 16px 4px}
/* --- App installée (iPhone : encoche) */
@media (display-mode: standalone){body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}

/* ---------- 1.1 : statuts, soundboard, vocal+, mises à jour ---------- */
.me-av{padding:0;border-radius:50%;flex:none}.me-av:hover .av{filter:brightness(1.1);box-shadow:0 0 0 2px var(--btn)}
#status-menu{position:fixed;width:260px;background:var(--float);border-radius:8px;box-shadow:0 8px 24px #000a;padding:6px;z-index:45}
#status-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.sm-item{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:7px 8px;border-radius:4px}
.sm-item:hover{background:#5865f2;color:#fff}.sm-item:hover small{color:#e0e3ff}.sm-item.on{background:var(--sel)}
.sm-item small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.st-dot{width:10px;height:10px;border-radius:50%;flex:none}
.sm-custom{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--side);border-radius:6px;margin-bottom:4px;font-size:14px}
.sm-custom span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sm-custom small{color:var(--muted);font-size:11px}
.sm-custom button{color:var(--muted)}.sm-custom button:hover{color:var(--danger)}
.cs-row{display:flex;gap:8px;margin:8px 0}.cs-row .emo-in,.emo-in{width:52px!important;flex:none;text-align:center;font-size:18px}
.cs-quick{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:10px}.cs-quick button{font-size:20px;padding:3px 5px;border-radius:4px}.cs-quick button:hover{background:var(--hover)}
#cs-dlg label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted)}
#cs-dlg select,#settings-dlg select{background:var(--deep);color:var(--text);border:0;border-radius:4px;padding:8px;font:inherit;text-transform:none}
.mem small img.emoji,.meinfo small img.emoji,#card .cs img.emoji,.sm-custom img.emoji{width:16px;height:16px;vertical-align:-3px}
.mem small,.meinfo small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.meinfo small b,.mem small b{font-weight:600}
#card .act{margin-top:8px;background:var(--side);border-radius:6px;padding:6px 8px;font-size:13px}#card .act small{display:block;color:var(--muted);font-size:11px}
.uvol{margin-top:10px;border-top:1px solid var(--side);padding-top:8px;font-size:13px}
.uvol label:first-child{display:flex;flex-direction:column;gap:4px}.uvol input[type=range]{width:100%;accent-color:#5865f2}
#sb{position:fixed;width:330px;background:var(--float);border-radius:10px;box-shadow:0 8px 24px #000a;padding:10px;z-index:45}
#sb header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}#sb header input{width:90px;vertical-align:middle;accent-color:#5865f2}
.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow-y:auto}
.sb-grid button{background:var(--side);border-radius:8px;padding:8px 4px;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .1s,background .1s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-grid button i{font-style:normal;font-size:22px}.sb-grid button:hover{background:var(--sel)}.sb-grid button.custom{background:#2d3359}
.sb-grid button.fired{transform:scale(.92);background:#5865f2;color:#fff}
#sb .small{margin:8px 0 0}
.vmem.sb .av,.sb .av{box-shadow:0 0 0 2px var(--side),0 0 0 4px #5865f2!important}
.ptt .av{box-shadow:0 0 0 2px var(--side),0 0 0 4px #23a55a}
.snd-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.snd-add input{background:var(--deep);border:0;border-radius:4px;padding:8px;color:var(--text);font:inherit}
.snd-list h4{color:var(--muted);font-size:12px;text-transform:uppercase;margin:14px 0 6px}
.snd{display:flex;align-items:center;gap:10px;background:var(--side);border-radius:6px;padding:6px 10px;margin-bottom:4px}
.snd i{font-style:normal;font-size:18px}.snd b{flex:1}.snd small{color:var(--muted)}
.snd button[data-presound]{width:28px;height:28px;border-radius:50%;background:var(--btn);color:var(--strong)}
.vu{position:relative;height:8px;background:var(--deep);border-radius:4px;overflow:hidden}
.vu i{position:absolute;left:0;top:0;bottom:0;width:0;background:#f0b232;transition:width .1s}.vu i.open{background:#23a55a}
.vu b{position:absolute;top:0;bottom:0;width:2px;background:var(--strong)}
#settings-dlg input[type=range]{accent-color:#5865f2}
#conn{display:flex;justify-content:center;align-items:center;gap:12px}#conn[hidden]{display:none}
#conn button{background:#fff3;color:#fff;border-radius:4px;padding:2px 10px;font-weight:600}#conn button:hover{background:#fff5}
#update-bar{position:fixed;top:0;left:0;right:0;z-index:49;background:#3ba55d;color:#fff;display:flex;justify-content:center;align-items:center;gap:12px;padding:6px}
#update-bar[hidden]{display:none}#update-bar .primary{padding:4px 12px;background:#fff;color:#1f6b38}#update-bar .link{color:#fff}
:root[data-theme="light"] .sb-grid button.custom{background:#dfe3ff}
dialog .snd-add input{width:auto}#snd-file{flex:1 1 100%}#snd-name{flex:1;min-width:120px}.snd-add label{display:flex;align-items:center;gap:6px}

/* ======================================================================
   Parlotte 1.2 — nouveau style : deux espaces (Potes / Serveurs) + Activité
   ====================================================================== */
body{font-family:var(--body);font-size:var(--fs);background:var(--chat);-webkit-font-smoothing:antialiased}
h1,h2,h3,.welcome h2,.card h1{font-family:var(--display)}
button,input,textarea,select{font-family:inherit}
::selection{background:#FF6B4A55}
*{scrollbar-width:thin;scrollbar-color:var(--btn) transparent}

/* Boutons */
.primary,#dlg-ok{background:var(--coral);color:var(--on-coral);border-radius:12px;padding:10px 16px;font-weight:700}
.primary:hover,#dlg-ok:hover{background:#FF8466}
.primary.green{background:var(--live);color:var(--on-live)}
.ghost-btn{display:inline-flex;align-items:center;gap:6px;background:var(--sel);color:var(--text);border-radius:12px;padding:9px 14px;font-weight:600}
.ghost-btn:hover{background:var(--btn)}
.round-btn{width:40px;height:40px;border-radius:20px;background:var(--deep);color:var(--text);display:inline-grid;place-items:center;flex:none}
.round-btn:hover{background:var(--sel)}.round-btn.accent{background:var(--coral);color:var(--on-coral)}
.pill-btn{height:40px;padding:0 14px;border-radius:20px;background:var(--deep);color:var(--text);display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pill-btn:hover{background:var(--sel)}
.mini-btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:16px;background:var(--sel);color:var(--text);font-weight:700;font-size:13px;flex:none;cursor:pointer}
.mini-btn:hover{filter:brightness(1.1)}.mini-btn.accent{background:var(--coral);color:var(--on-coral)}
.mini-btn.live,.mini-btn.ok{background:var(--live);color:var(--on-live)}.mini-btn:disabled{opacity:.7;cursor:default}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--live);margin-right:6px;vertical-align:1px;animation:livepulse 1.6s infinite}
@keyframes livepulse{50%{opacity:.45}}
.small.pad,.pad{padding:12px 16px}

/* Disposition générale */
#app{display:flex;height:100dvh}
#rail{width:76px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0 12px;background:var(--rail);border-right:1px solid var(--border);z-index:6}
#rail .logo{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;margin-bottom:12px;color:var(--strong)}#rail .logo span{color:var(--coral)}
.rail-btn{position:relative;width:52px;height:52px;border-radius:16px;color:var(--muted);display:grid;place-items:center;transition:background .15s,color .15s}
.rail-btn b{display:none}.rail-btn:hover{background:var(--hover);color:var(--text)}
.rail-btn.on{background:var(--sel);color:var(--strong)}
.rb-badge{position:absolute;right:4px;top:4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--coral);color:var(--on-coral);font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--rail);box-sizing:border-box}
.rail-grow{flex:1}
#rail #me{height:auto;background:none;flex-direction:column;gap:8px;padding:0}
#rail #me .meinfo{display:none}
#rail #me .av{width:42px;height:42px;font-size:16px}#rail #me .av .st{border-color:var(--rail)}
#rail #me #open-settings{width:40px;height:40px;border-radius:12px;color:var(--muted);display:grid;place-items:center}
#rail #me #open-settings:hover{background:var(--hover);color:var(--text)}

#servers{width:280px;flex:none;display:none;flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--chat);border-right:1px solid var(--border);overflow-y:auto}
#sidebar{width:330px;flex:none;display:flex;flex-direction:column;background:var(--chat);border-right:1px solid var(--border)}
body.space-servers #servers{display:flex}
body.space-servers #sidebar{width:240px;background:var(--bar)}
body.space-activity #sidebar,body.no-server #sidebar{display:none}
body.space-activity #members,body.no-server #members{display:none!important}
#chat{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--chat)}
#members{width:300px;background:var(--chat);border-left:1px solid var(--border);padding:16px 12px}
body.space-servers #members{width:240px}
#side-head{height:auto;border:0;padding:0;display:block}
#side-list{padding:0 0 12px}
.qs-open{margin:4px 14px 10px}
body.space-potes .qs-open{display:none}

.col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 16px 10px}
.col-head h1{margin:0;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.4px;color:var(--strong)}
.col-acts{display:flex;gap:6px}

/* Cartes des serveurs */
.srv-cards{display:flex;flex-direction:column;gap:4px;padding:4px 10px 16px}
.srv-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;text-align:left;position:relative;width:100%}
.srv-card:hover{background:var(--hover)}.srv-card.on{background:var(--sel)}
.srv-tile{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;flex:none}
.srv-tile.sm{width:34px;height:34px;border-radius:11px;font-size:14px}
.srv-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.srv-txt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-txt small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-txt small.lv,small.lv{color:var(--live-text)}
.srv-badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--coral);color:var(--on-coral);font-size:12px;font-weight:800;display:grid;place-items:center}

/* Colonne des salons d'un serveur */
.srv-banner{background:linear-gradient(0deg,var(--bar) 0,transparent 70%),var(--srv);min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 14px}
.srv-banner .srv-name{font-family:var(--display);font-weight:800;font-size:20px;color:#fff;text-shadow:0 1px 6px #0006}
.srv-acts{display:flex;gap:6px;flex-wrap:wrap}.srv-acts button{background:#0006;color:#fff;border-radius:10px;padding:3px 10px;font-size:13px;font-weight:600}
.srv-acts button:hover{background:#000a}
#side-list .cat{padding:14px 14px 4px;letter-spacing:.6px}
#side-list .chan{margin:0 8px;width:calc(100% - 16px);border-radius:10px;padding:7px 10px;font-weight:500}
#side-list .chan.on{background:var(--sel)}
#side-list .chan.voice{font-weight:600}
.vmem{padding-left:34px}

/* Espace Potes : rangée dispo (notes) */
.dispo-row{display:flex;gap:12px;padding:30px 16px 12px;overflow-x:auto;scrollbar-width:none}
.dispo-row::-webkit-scrollbar{display:none}
.dispo{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;flex:none}
.dispo .ring{width:60px;height:60px;border-radius:30px;padding:3px;border:2.5px solid var(--line);display:grid;place-items:center}
.dispo .ring.live{border-color:var(--live)}.dispo .ring.story{border-color:var(--coral)}
.dispo .ring .av{width:48px;height:48px;font-size:18px}.dispo .ring .av .st{border-color:var(--chat)}
.dispo .dn{font-size:12px;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dispo .note{position:absolute;top:-24px;max-width:84px;padding:3px 8px;border-radius:12px;background:var(--float);box-shadow:0 2px 8px #0005;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.dispo .note.empty{color:var(--muted)}.dispo .note img.emoji{width:14px;height:14px;vertical-align:-2px}
.dispo .pill{position:absolute;top:48px;font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;border:2px solid var(--chat)}
.dispo .pill.live{background:var(--live);color:var(--on-live)}.dispo .pill.game{background:#F5C04A;color:#14121A}
.dispo.me .ring{border-style:dashed}
.dispo-empty{align-self:center;margin:0}
.chips{display:flex;gap:6px;padding:4px 16px 10px;flex-wrap:wrap}
.chip{height:34px;padding:0 14px;border-radius:17px;background:var(--deep);color:var(--text);font-weight:600;font-size:14px;white-space:nowrap}
.chip:hover{background:var(--sel)}.chip.on{background:var(--strong);color:var(--chat)}
.chip.unread{font-weight:800}.chip.voice{background:var(--live-bg);color:var(--live-text)}
.convs{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.conv{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:16px;text-align:left;color:var(--text)}
.conv:hover{background:var(--hover)}.conv.on{background:var(--sel)}
.conv>.av,.conv .stack{width:52px;height:52px;font-size:19px}
.conv .av .st{border-color:var(--chat)}
.conv.calling{background:var(--live-bg)}
.cv-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.cv-txt b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-txt small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .cv-txt b,.conv.unread .cv-txt small{font-weight:800;color:var(--strong)}
.udot{width:10px;height:10px;border-radius:5px;background:var(--coral);flex:none}
.stack{position:relative;flex:none;display:block}
.stack .av{position:absolute;width:62%;height:62%;font-size:13px;border:2px solid var(--chat)}
.stack .av:first-child{left:0;top:0}.stack .av:nth-child(2){right:0;bottom:0}
.add-friend{display:flex;gap:8px;padding:0 8px 10px}
.add-friend input{flex:1;min-width:0;background:var(--deep);border:0;border-radius:12px;padding:10px 12px;color:var(--text);font:inherit;outline:none}
.add-friend input:focus{box-shadow:0 0 0 2px var(--coral)}
.conv.req{cursor:default}

/* En-tête de la discussion */
#chat-head{height:64px;padding:0 16px;gap:10px;border-bottom:1px solid var(--border)}
#chan-av{display:contents}#chan-av .av,#chan-av .stack{width:40px;height:40px;font-size:15px;flex:none}#chan-av .av .st{border-color:var(--chat)}
#chan-title{font-family:var(--display);font-weight:700;font-size:17px}
#chat-head>button{width:40px;height:40px;border-radius:20px;color:var(--text);display:grid;place-items:center;flex:none}
#chat-head>button:hover{background:var(--hover)}
#q{background:var(--deep);border-radius:10px;padding:8px 10px}
#chan-chips{display:none}

/* Bulles */
#view.bubbles{padding:12px 16px}
.b-intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px 20px;color:var(--muted)}
.b-intro .av,.b-intro .stack{width:88px;height:88px;font-size:34px;margin-bottom:8px}
.b-intro h2{margin:0;color:var(--strong);font-size:22px}.b-intro p{margin:4px 0 0;font-size:14px}
.btime{text-align:center;font-size:12px;color:var(--muted);margin:14px 0 6px}
.msg.b{display:flex;align-items:flex-end;gap:8px;padding:1px 0;background:none!important;position:relative;max-width:100%}
.msg.b.first{margin-top:8px}
.msg.b.mine{flex-direction:row-reverse}
.bav{width:28px;flex:none}.bav .av{width:28px;height:28px;font-size:11px}
.bcol{display:flex;flex-direction:column;gap:3px;max-width:min(560px,72%);position:relative}
.msg.b.mine .bcol{align-items:flex-end}.msg.b.theirs .bcol{align-items:flex-start}
.bname{font-size:12px;font-weight:700;margin:0 0 1px 12px}
.bubble{padding:8px 14px;border-radius:20px;background:var(--bubble);color:var(--text);max-width:100%;word-wrap:break-word}
.msg.b.mine .bubble{background:var(--coral);color:var(--on-coral)}
.msg.b.mine .bubble a,.msg.b.mine .bubble .mention{color:var(--on-coral);text-decoration:underline}
.msg.b.theirs:not(.last) .bubble{border-bottom-left-radius:6px}.msg.b.theirs:not(.first) .bubble{border-top-left-radius:6px}
.msg.b.mine:not(.last) .bubble{border-bottom-right-radius:6px}.msg.b.mine:not(.first) .bubble{border-top-right-radius:6px}
.bubble.big{background:none!important;padding:0}.bubble .text.big-emoji{font-size:44px;line-height:1.1}
.bubble .edited{font-size:11px;opacity:.7;margin-left:6px}
.msg.b.mentioned .bubble{box-shadow:0 0 0 2px #F5C04A}
.breply{font-size:12px;color:var(--muted);background:var(--hover);border-radius:12px;padding:4px 10px;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.b .reacts{margin:-8px 8px 0;position:relative;z-index:1}
.msg.b .react{background:var(--float);border:2px solid var(--chat);border-radius:12px;padding:0 6px;font-size:13px}
.msg.b .react.mine{border-color:var(--chat);background:var(--sel)}
.msg.b .tools{top:auto;bottom:4px;right:auto;left:calc(100% - 4px);position:absolute;opacity:0;pointer-events:none;display:flex;background:var(--float);border:0;border-radius:12px}
.msg.b.theirs .tools{left:auto;right:0;transform:translateX(105%)}
.msg.b.mine .tools{left:0;transform:translateX(-105%)}
.msg.b:hover .tools{opacity:1;pointer-events:auto}
.msg.b .atts{margin:0}.msg.b .att-img{border-radius:18px}
.receipt{text-align:right;font-size:12px;color:var(--muted);padding:2px 4px 8px}.receipt.seen{color:var(--text)}
.msg.bsys{justify-content:center;text-align:center;font-size:13px;color:var(--muted);padding:6px 0;background:none!important}
.msg.bsys .text{font-style:normal}
.heart-pop{position:absolute;left:50%;top:50%;color:var(--coral);transform:translate(-50%,-50%) scale(.3);animation:heartpop .8s ease-out forwards;pointer-events:none}
.heart-pop svg{width:56px;height:56px;filter:drop-shadow(0 2px 8px #0008)}
@keyframes heartpop{30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
.callbar{display:flex;align-items:center;gap:8px;margin:8px auto 10px;padding:8px 12px;border-radius:16px;background:var(--live-bg);color:var(--live-text);font-weight:700;width:fit-content;max-width:100%}

/* Messages des serveurs : petit rafraîchissement */
.msg .gut .av{border-radius:50%}
.msg:hover{background:var(--hover2)}
.mention{background:#FF6B4A26;color:#FFB29D;border-radius:4px;padding:0 3px}
:root[data-theme="light"] .mention{color:#B3341A}
.msg.mentioned{background:var(--mention);box-shadow:inset 3px 0 var(--coral)}
.tools{border-radius:10px;background:var(--float);border:1px solid var(--border)}
.reacts .react.mine{background:#FF6B4A26;border-color:var(--coral)}

/* Zone de saisie façon pilule */
#composer{padding:0 16px 18px}
.input-row{background:var(--input);border-radius:24px;align-items:center;padding:4px}
#attach{width:40px;height:40px;border-radius:20px;background:var(--coral);color:var(--on-coral);font-size:20px;display:grid;place-items:center}
#attach:hover{color:var(--on-coral);filter:brightness(1.08)}
#input{padding:9px 10px;border-radius:0}
.input-row>button:not(#attach){width:38px;height:38px;border-radius:19px;display:grid;place-items:center;flex:none}
.input-row>button:not(#attach):hover{background:var(--sel)}

/* Panneau de droite (conversation) */
.dm-panel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 6px;text-align:center}
.dm-panel h3{margin:4px 0 0;font-size:20px}.dm-panel>.small{margin:0}
.dp-av{position:relative;margin-top:22px}
.dp-av .ring{width:100px;height:100px;border-radius:50px;padding:4px;border:3px solid var(--line);display:grid;place-items:center}
.dp-av .ring.live{border-color:var(--live)}
.dp-av .ring .av{width:86px;height:86px;font-size:34px}.dp-av .ring .av .st{width:18px;height:18px;border-width:4px;border-color:var(--chat)}
.dp-av>.stack,.dp-av>.av{width:86px;height:86px}
.dp-av .note{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;padding:4px 10px;border-radius:12px;background:var(--float);box-shadow:0 2px 8px #0005;font-size:12px}
.dp-about{font-size:14px;color:var(--muted);white-space:pre-wrap;margin:0}
.dp-acts{display:flex;gap:8px;margin:6px 0}
.dm-panel h4{align-self:flex-start;margin:14px 6px 4px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.dm-panel .mem{align-self:stretch;text-align:left}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-self:stretch}
.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in;max-height:none}
.common-srv{display:flex;align-items:center;gap:10px;align-self:stretch;padding:8px;border-radius:12px;background:var(--card);text-align:left}
.common-srv:hover{background:var(--sel)}.common-srv span:nth-child(2){flex:1;font-weight:600}
.leave-grp{margin-top:16px}

/* Activité */
.activity{max-width:720px;margin:0 auto;padding:8px 16px 32px}
.act-chips{padding:4px 0 6px}
.act-h{font-family:var(--body);font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:18px 4px 8px}
.act-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:18px;text-align:left;color:var(--text);margin-bottom:6px}
button.act-item:hover{background:var(--hover)}
.act-item.invite{background:var(--card)}
.act-item.new{box-shadow:inset 3px 0 var(--coral)}
.act-item>.av{width:42px;height:42px}
.ai-txt{flex:1;min-width:0;font-size:14px;line-height:1.4}
.ai-txt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.ai-quote{display:block;margin-top:4px;padding:6px 10px;border-radius:10px;background:var(--deep);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-q{color:var(--muted)}
.ai-acts{display:flex;gap:6px;flex:none}

/* États vides */
.empty-state.big{display:flex;flex-direction:column;align-items:center;gap:6px;padding:72px 24px}
.empty-state.big h2{margin:6px 0 0;color:var(--strong)}.empty-state.big p{margin:0;max-width:380px}
.es-ico{width:72px;height:72px;border-radius:24px;background:var(--deep);display:grid;place-items:center;color:var(--coral)}
.es-ico svg{width:34px;height:34px}.es-acts{display:flex;gap:8px;margin-top:12px}

/* Vocal : mini-lecteur flottant */
#voice-panel{position:fixed;left:88px;bottom:14px;width:300px;z-index:30;background:var(--float);border:1px solid var(--live-bg);border-radius:18px;padding:10px;box-shadow:0 10px 30px #0008}
#voice-panel #vp-status.ok{color:var(--live-text)}
#vp-leave{background:var(--danger)!important;color:#fff;border-radius:16px!important}
body.in-voice #side-list,body.in-voice .srv-cards{padding-bottom:130px}

/* Boîtes de dialogue */
dialog{background:var(--float);border-radius:20px;padding:20px;box-shadow:0 20px 60px #000a}
dialog input,dialog textarea{border-radius:10px}
dialog button{border-radius:10px}
.pick-list{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto;margin:8px 0}
.pick{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;text-align:left;width:100%;cursor:pointer}
.pick:hover{background:var(--hover)}.pick span{flex:1;font-weight:600}
.pick input{width:20px!important;height:20px;flex:none;accent-color:var(--coral)}
.code-row{display:flex;gap:8px;align-items:center}.code-row code{flex:1;background:var(--deep);padding:8px 12px;border-radius:10px;font-size:16px;letter-spacing:1px}
#invite-dlg{width:min(400px,92vw)}#invite-dlg h4{margin:16px 0 6px;font-size:12px;text-transform:uppercase;color:var(--muted)}

/* Connexion */
#auth{background:radial-gradient(circle at 20% 10%,#3a2440,transparent 50%),radial-gradient(circle at 90% 90%,#163a35,transparent 45%),var(--chat)}
.card{border-radius:22px;background:var(--float)}
.card h1{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-1px}
.card h1::after{content:".";color:var(--coral)}
.card input{border-radius:12px;background:var(--deep)}

/* Amis (page « Tes potes ») */
.friends{padding:8px 24px;max-width:760px;margin:0 auto}
.tabs button{border-radius:14px;padding:6px 12px;font-weight:600}
.tabs button.add{background:var(--coral);color:var(--on-coral)}.tabs button.add.on{background:none;color:var(--coral)}
.friend{border-top:0;border-radius:14px}
.friend .act{background:var(--deep)}

/* ---------------------------------------------------------------- Téléphone */
@media (max-width:700px){
  #app{flex-direction:column}
  #rail{position:fixed;left:0;right:0;bottom:0;width:auto;height:calc(62px + env(safe-area-inset-bottom));padding:0 8px env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;border-right:0;border-top:1px solid var(--border);z-index:20}
  #rail .logo,.rail-grow,#rail #me #open-settings{display:none}
  .rail-btn{width:64px;height:54px;border-radius:14px;gap:0}.rail-btn b{display:block;font-size:11px;font-weight:600;margin-top:-6px}
  .rail-btn.on{background:none;color:var(--strong)}.rail-btn.on b{font-weight:800}
  #rail #me{flex-direction:row}#rail #me .av{width:30px;height:30px;font-size:12px}
  #app>#servers,#app>#sidebar,#app>#chat,#app>#members{width:auto!important;flex:1;min-height:0;border:0}
  #members,#results{display:none!important}
  #servers,#sidebar,#chat{display:none!important}
  #view{padding-bottom:8px}
  /* niveau « liste » */
  body.space-potes:not(.has-chan) #sidebar{display:flex!important;padding-bottom:70px}
  body.space-servers:not(.has-chan) #servers{display:flex!important;padding-bottom:70px}
  body.space-activity #chat{display:flex!important;padding-bottom:62px}
  /* niveau « discussion » : plein écran, sans barre du bas */
  body.has-chan #chat{display:flex!important}
  body.has-chan #rail{display:none}
  body.space-servers.has-chan.show-channels #sidebar{display:flex!important;position:fixed;inset:64px 0 0 0;z-index:15}
  #menu{display:grid!important;width:40px;height:40px;border-radius:20px;place-items:center;color:var(--text)}
  body.space-activity #menu{display:none!important}
  #chat-head{height:58px;padding:0 8px;gap:6px}
  #chan-topic,.search-box,#toggle-members,#threads-btn{display:none!important}
  #chan-chips:not([hidden]){display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--border);scrollbar-width:none;flex:none}
  #chan-chips .chip{flex:none;border-radius:12px;height:34px}
  .col-head{padding:16px 16px 8px}
  .bcol{max-width:78%}
  .msg.b .tools{display:none!important}
  #voice-panel{left:8px;right:8px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom));padding:8px;gap:6px;flex-wrap:nowrap}
  #voice-panel .vp-btns{order:1;width:auto;gap:4px}#voice-panel .vp-btns button{width:34px;height:34px;flex:none}
  #voice-panel #vp-leave{order:2}#voice-panel .vp-btns #vp-cam,#voice-panel .vp-btns #vp-screen{display:none}
  body.has-chan #voice-panel{bottom:calc(74px + env(safe-area-inset-bottom))}
  body.in-voice.has-chan #view{padding-bottom:70px}
  #composer{padding:0 8px calc(10px + env(safe-area-inset-bottom))}
  .msg{padding-right:12px}
}
@media (min-width:701px){#menu{display:none!important}}
@media (min-width:701px) and (max-width:1100px){#members{display:none!important}#servers{width:240px}body.space-potes #sidebar{width:300px}}
body.space-activity .search-box,body.space-activity #toggle-members{display:none!important}
body.space-activity #chan-title{font-size:22px;font-weight:800}
.b-intro .stack{width:88px;height:88px}.b-intro .stack .av{width:60px;height:60px;font-size:22px}
.dp-av>.stack{width:96px;height:96px}.dp-av>.stack .av{width:62px;height:62px;font-size:22px}
@media (min-width:701px) and (max-width:1380px){body.space-servers #members{width:210px}body.space-servers #servers{width:220px}body.space-servers #sidebar{width:220px}#q{width:120px}#q:focus{width:180px}}
#chan-topic{min-width:60px}
#thread-bar{display:flex;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted)}#thread-bar[hidden]{display:none}#thread-bar span{flex:1}

/* ---------- 1.2.1 : panneaux, défilement, messages vocaux ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--btn) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--btn);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--muted)}::-webkit-scrollbar-corner{background:transparent}
#view{overflow-x:hidden}
.text{overflow-wrap:anywhere}
#app,#chat,#sidebar,#servers,#members,#results{overflow-x:hidden}
body.res-open #members{display:none!important}
.vnote{width:260px;max-width:100%;box-sizing:border-box}
.vwave i{flex:1 0 2px;background:#6A6478}.vwave i.played{background:var(--coral)}
.vplay{background:var(--coral);color:var(--on-coral)}
@media (min-width:701px) and (max-width:1100px){
  body.space-servers:not(.no-server) #servers{display:none}
  #results{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:35;box-shadow:-16px 0 40px #0009;border-left:1px solid var(--border)}
  body.members-open #members{display:block!important;position:fixed;top:0;right:0;bottom:0;width:280px;z-index:34;box-shadow:-16px 0 40px #0009;overflow-y:auto}
}
@media (max-width:700px){
  #results:not([hidden]){display:flex!important;position:fixed;inset:0;z-index:40;width:auto}
  body.members-open #members{display:block!important;position:fixed;top:56px;left:0;right:0;bottom:0;width:auto!important;z-index:39;overflow-y:auto}
}
.vnote{width:min(240px,62vw)}.vtime{flex:none;min-width:30px;text-align:right}
.vwave{min-width:0;overflow:hidden;gap:1.5px}.vwave i{flex:1 1 0;min-width:1px}

/* ---------- 1.3 : stories ---------- */
.sfull{position:fixed;inset:0;z-index:60;background:#0B0A0F;display:flex;align-items:center;justify-content:center;color:#fff}
.sfull[hidden]{display:none}
body.story-open{overflow:hidden}
.sstage{position:relative;height:min(94vh,calc(100vw * 16 / 9));aspect-ratio:9/16;max-width:100vw;border-radius:22px;overflow:hidden;background:#1E1B26;display:grid;place-items:center}
.sstage>video,.sstage>#sedit-media,.sstage>#sview-media{position:absolute;inset:0;width:100%;height:100%}
.sstage video,.sstage img{width:100%;height:100%;object-fit:contain;display:block}
#scam-v{object-fit:cover}.mirror{transform:scaleX(-1)}
#scam-msg{position:relative;z-index:2;max-width:80%;text-align:center;line-height:1.5;color:#E6E0EE}
.s-top{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100vw,calc(min(94vh,calc(100vw * 16 / 9)) * 9 / 16));display:flex;align-items:center;gap:8px;padding:14px;box-sizing:border-box;z-index:5;background:linear-gradient(#0008,transparent)}
.s-top b{flex:1;text-align:center;font-family:"Bricolage Grotesque",sans-serif;font-size:17px}.s-top .grow{flex:1}
.s-ico{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:#fff;background:#0006;flex:none}
.s-ico:hover{background:#000a}.s-ico .aa{font:800 18px "Bricolage Grotesque",sans-serif}
.s-bottom{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw,calc(min(94vh,calc(100vw * 16 / 9)) * 9 / 16));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box;z-index:5;background:linear-gradient(transparent,#000a)}
.s-bottom.cam{justify-content:center;gap:36px}
.s-hint{font-size:12px;color:#E6E0EE;line-height:1.3;min-width:80px}
.gal{cursor:pointer}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#scam-shutter{--p:0;width:78px;height:78px;border-radius:50%;border:5px solid #fff;background:transparent;padding:5px;position:relative;flex:none;touch-action:none}
#scam-shutter i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .15s,background .15s,border-radius .15s}
#scam-shutter:active i{transform:scale(.9)}#scam-shutter.flash i{background:var(--coral)}
#scam-shutter.rec{border-color:transparent;background:conic-gradient(var(--coral) calc(var(--p)*360deg),#fff4 0)}
#scam-shutter.rec i{background:var(--coral);transform:scale(.55);border-radius:14px}
#scam-shutter:disabled{opacity:.4}
#scam-rec{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:6px;background:#0008;border-radius:14px;padding:4px 10px;font-weight:700}
#scam-rec i{width:10px;height:10px;border-radius:5px;background:#F23F43;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.s-share{padding:12px 20px;border-radius:24px}
.stk-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.stk{position:absolute;pointer-events:auto;max-width:80%;text-align:center;touch-action:none;user-select:none}
.stk.drag{cursor:grab}
.stk.text{font:800 28px/1.15 "Bricolage Grotesque",sans-serif;padding:4px 10px;border-radius:10px;text-shadow:0 1px 6px #0007;white-space:pre-wrap;overflow-wrap:anywhere}
.stk.text[style*="background"]{text-shadow:none}
#sview-layer .stk.text{pointer-events:none}
.stk.poll{width:240px;background:#fff;color:#14121A;border-radius:18px;padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px #0006}
.stk.poll b{font:800 18px/1.2 "Bricolage Grotesque",sans-serif}
.stk.poll .pa{position:relative;overflow:hidden;height:40px;border-radius:12px;background:#EDEAF2;color:#14121A;font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.stk.poll .pa i{position:absolute;left:0;top:0;bottom:0;background:#FFD5CB}.stk.poll .pa.mine i{background:var(--coral)}
.stk.poll .pa span,.stk.poll .pa em{position:relative;font-style:normal}
.stk.poll small{color:#615B6E;font-size:12px}
.stk-del{position:absolute;top:-16px;right:-16px;width:34px;height:34px;border-radius:17px;background:#F23F43;color:#fff;display:grid;place-items:center;pointer-events:auto}
.s-modal{position:absolute;inset:0;z-index:20;background:#000a;display:grid;place-items:center;padding:20px}
.s-modal[hidden]{display:none}
.s-form{width:min(340px,100%);background:var(--float);color:var(--text);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 16px 40px #000a}
.s-form textarea,.s-form input:not([type=checkbox]){width:100%;box-sizing:border-box;background:var(--deep);color:var(--text);border:0;border-radius:12px;padding:12px;font:16px Figtree,sans-serif;resize:none}
.s-form textarea{font:800 22px "Bricolage Grotesque",sans-serif}
.s-form menu{display:flex;justify-content:flex-end;gap:8px;margin:4px 0 0;padding:0}.s-form menu button{padding:10px 16px;border-radius:12px}
.s-colors{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:15px;border:2px solid #fff3}.sw.on{border-color:var(--coral);box-shadow:0 0 0 2px var(--float),0 0 0 4px var(--coral)}
.s-bars{position:absolute;top:10px;left:10px;right:10px;z-index:4;display:flex;gap:4px}
.s-bars span{flex:1;height:3px;border-radius:2px;background:#fff5;overflow:hidden}.s-bars i{display:block;height:100%;background:#fff}
.s-head{position:absolute;top:20px;left:0;right:0;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;background:linear-gradient(#0007,transparent)}
.s-head .av{width:34px;height:34px;font-size:14px}.s-head small{color:#E6E0EE}.s-head .grow{flex:1}
.s-tap{position:absolute;inset:70px 0 90px;z-index:1}
.s-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:10px;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#000a)}
.s-reply{flex:1;display:flex;align-items:center;border:1.5px solid #fff9;border-radius:24px;padding:0 4px 0 16px;height:46px}
.s-reply input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:15px Figtree,sans-serif;outline:none}
.s-reply .s-ico{background:none;width:38px;height:38px}
.s-like{background:none}.s-like.on{color:var(--coral)}
.s-seen{display:flex;align-items:center;gap:8px;color:#fff;background:#0006;border-radius:20px;padding:8px 14px;font-weight:600}
.s-vlist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto}
.s-vrow{display:flex;align-items:center;gap:10px}.s-vrow span{flex:1;font-weight:600}.s-vrow small{color:var(--muted)}.s-vheart{color:var(--coral)}
.s-nav{width:52px;height:52px;border-radius:26px;background:#ffffff1a;color:#fff;display:grid;place-items:center;margin:0 18px;flex:none}
.s-nav:hover{background:#ffffff33}.s-nav:disabled{opacity:.2}
.dispo .ring.story{border-color:var(--coral);border-width:3px}.dispo .ring.seen{border-color:var(--btn)}
.dispo .ring.story.mine{border-color:var(--coral)}
.add-story{position:absolute;top:42px;left:42px;width:22px;height:22px;border-radius:11px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;border:3px solid var(--chat);cursor:pointer}
.add-story svg{width:14px;height:14px;stroke-width:3}
.rail-btn.create{background:var(--coral);color:var(--on-coral)}.rail-btn.create:hover{background:#FF8466;color:var(--on-coral)}
.sreply{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.sreply.mine{align-items:flex-end}.sreply small{color:var(--muted);font-size:12px}
.sthumb{display:block;width:96px;height:150px;border-radius:14px;overflow:hidden;background:var(--bubble);cursor:pointer;flex:none}
.sthumb img,.sthumb video{width:100%;height:100%;object-fit:cover;display:block}.sthumb.gone{opacity:.45;cursor:default}
.act-item .sthumb{width:40px;height:62px;border-radius:8px;margin-left:auto}
@media (max-width:700px){
  .sstage{height:100dvh;width:100vw;aspect-ratio:auto;border-radius:0}
  .s-top,.s-bottom{width:100vw}
  .s-nav{display:none}
  .rail-btn.create{width:52px;height:40px;border-radius:14px;align-self:center}.rail-btn.create b{display:none}
}

.sstage .s-top,.sstage .s-bottom{left:0;right:0;width:auto;transform:none}
.dispo .ring.story,.dispo .ring.seen{border-style:solid}

/* ---------- 1.4 : paramètres du serveur, version fun ---------- */
#srv-dlg{width:min(980px,96vw);padding:0;border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 80px #000c;background:var(--chat)}
#srv-dlg[open]{animation:dlgIn .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.srv-wrap{height:min(700px,88vh)}
#srv-tabs{width:220px;background:var(--side);padding:18px 12px;gap:4px;border-right:1px solid var(--border)}
.st-head{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.st-head b{font-family:var(--display);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#srv-tabs button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;font-weight:600;color:var(--muted);transition:background .15s,color .15s,transform .1s}
#srv-tabs button:hover{background:var(--hover);color:var(--text)}
#srv-tabs button.on{background:var(--coral);color:var(--on-coral)}
#srv-tabs button:active{transform:scale(.97)}
#srv-body{padding:26px 30px 90px}
#srv-body h3{font-family:var(--display);font-size:22px;display:flex;align-items:center;gap:10px;margin:0 0 14px}
#srv-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:20px;background:var(--deep);display:grid;place-items:center;z-index:3}
#srv-close:hover{background:var(--sel);transform:rotate(90deg);transition:transform .2s}
.count-pill{font:700 13px Figtree,sans-serif;background:var(--deep);color:var(--muted);border-radius:12px;padding:2px 10px}
#srv-body .fld input,#srv-body .fld textarea,#srv-body input:not([type]),#srv-body input[type=text]{background:var(--deep);border:2px solid transparent;border-radius:14px;padding:11px 14px;color:var(--text);font:15px Figtree,sans-serif;transition:border-color .15s,background .15s;box-sizing:border-box}
#srv-body .fld textarea{resize:none;width:100%}
#srv-body .fld input:focus,#srv-body .fld textarea:focus,#srv-body input:focus{outline:none;border-color:var(--coral);background:var(--input)}
#srv-body button:not(.primary):not(.link):not(.sw):not(.pill-btn):not(.rchip):not(.danger-btn):not(.role-item){background:var(--deep);color:var(--text);border-radius:12px;padding:9px 14px;font-weight:600;transition:background .15s,transform .1s}
#srv-body button:not(.link):active{transform:scale(.97)}
#srv-body .primary{border-radius:14px;padding:11px 18px;background:var(--coral);color:var(--on-coral);font-weight:700;box-shadow:0 6px 18px #ff6b4a33}
#srv-body .primary:hover{filter:brightness(1.08)}
#srv-body .danger-btn{background:#3A1E22;color:#FF8A8C;border-radius:12px;padding:8px 14px;font-weight:600}
#srv-body .danger-btn:hover{background:#4B2226}
/* aperçu du serveur */
.ov{display:flex;flex-direction:column;gap:22px;max-width:640px}
.ov-card{border-radius:22px;overflow:hidden;background:var(--side);border:1px solid var(--border)}
.ov-banner{position:relative;height:150px;background:radial-gradient(circle at 20% 20%,#ffffff33,transparent 45%),linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#14121A));background-size:cover;background-position:center;display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;padding:12px}
.ov-banner.img{background-size:cover}
.ov-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:#000000a0;color:#fff;font-weight:700;font-size:13px;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,transform .1s}
.ov-chip:hover{background:#000c;transform:translateY(-1px)}.ov-chip.danger{padding:0 10px}
.ov-id{display:flex;align-items:flex-end;gap:14px;padding:0 18px 18px;margin-top:-34px;position:relative}
.ov-icon{position:relative;cursor:pointer;flex:none}
.ov-icon .srv-tile{width:84px;height:84px;border-radius:26px;font-size:30px;border:5px solid var(--side);box-sizing:content-box}
.ov-icon-cam{position:absolute;right:-4px;bottom:-4px;width:32px;height:32px;border-radius:16px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;border:3px solid var(--side);transition:transform .15s}
.ov-icon:hover .ov-icon-cam{transform:scale(1.12) rotate(-8deg)}
.ov-names{flex:1;min-width:0;padding-bottom:6px}.ov-names b{display:block;font-family:var(--display);font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-names small{color:var(--muted)}
.ov-fields{display:flex;flex-direction:column;gap:6px}
.ov-colors{display:flex;flex-wrap:wrap;align-items:center;gap:10px;text-transform:none;font-weight:600}
.ov-colors .sw{width:34px;height:34px;border-radius:17px;border:3px solid transparent;cursor:pointer;transition:transform .12s;padding:0}
.ov-colors .sw:hover{transform:scale(1.12)}
.ov-colors .sw.on{box-shadow:0 0 0 3px var(--chat),0 0 0 5px var(--text)}
.ov-colors .sw.custom{position:relative;display:grid;place-items:center;background:conic-gradient(#FF6B4A,#F5C04A,#3FB27F,#6FE3D2,#5B8CFF,#8E6CFF,#E05A8A,#FF6B4A);overflow:hidden}
.ov-colors .sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ov-colors .sw.custom span{font-weight:800;color:#fff;text-shadow:0 1px 3px #0008;pointer-events:none}
.ov-invite{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--side);border:1px solid var(--border);border-radius:20px;padding:16px 18px}
.ovi-txt{flex:1 1 220px}.ovi-txt b{display:block}.ovi-txt small{color:var(--muted)}
.code-pill{font:700 17px ui-monospace,Consolas,monospace;letter-spacing:2px;background:var(--deep);border:2px dashed var(--btn);border-radius:14px;padding:8px 14px;color:var(--live-text)}
.ov-save{position:sticky;bottom:-70px;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;border-radius:18px;background:var(--float);border:1px solid var(--border);box-shadow:0 12px 30px #0008;transform:translateY(130%);opacity:0;transition:transform .25s cubic-bezier(.2,.9,.3,1.2),opacity .2s;pointer-events:none}
.ov-save.show{transform:none;opacity:1;pointer-events:auto;bottom:0}
.ov-save span{flex:1;font-weight:600}
/* choix de fichier */
.fpick{display:flex;align-items:center;gap:12px;flex:1 1 100%;padding:14px 16px;border:2px dashed var(--btn);border-radius:18px;background:var(--side);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.fpick:hover{border-color:var(--coral);background:var(--hover)}.fpick:active{transform:scale(.99)}
.fp-ico{width:44px;height:44px;border-radius:14px;background:var(--deep);color:var(--coral);display:grid;place-items:center;flex:none}
.fp-txt{display:flex;flex-direction:column;min-width:0}.fp-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fp-txt small{color:var(--muted)}
.fpick.chosen{border-style:solid;border-color:var(--live)}.fpick.chosen .fp-ico{color:var(--live)}
.emo-add,.snd-add{gap:10px}
.emo-grid{gap:12px}.emo{border-radius:18px;transition:transform .12s}.emo:hover{transform:translateY(-2px)}
/* bannissements */
.ban-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ban-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border-radius:20px;background:var(--side);border:1px solid var(--border);text-align:center}
.ban-card .av{width:56px;height:56px;font-size:22px;filter:grayscale(.7)}
/* bannière du serveur dans la colonne des salons */
.srv-banner.has-img{background:linear-gradient(0deg,var(--bar) 0,transparent 75%),var(--srv-img) center/cover,var(--srv)}
.srv-tile.img{background-size:cover;background-position:center}
@media (max-width:700px){
  #srv-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .srv-wrap{height:100%}#srv-tabs{width:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding-right:60px;padding:10px;border-right:0;border-bottom:1px solid var(--border)}
  .st-head{display:none}#srv-tabs button{flex:none}#srv-body{padding:18px 16px 90px}
  .ov-banner{height:120px}
}

/* ---------- 1.4 : stories plus vivantes ---------- */
/* fond flou derrière la story (comme sur Insta sur ordi) + remplissage flou des photos pas au format */
#sview::before{content:"";position:absolute;inset:-60px;background:var(--sbg,none) center/cover;filter:blur(60px) saturate(1.4);opacity:.45;transition:background-image .4s}
#sview>*{position:relative}
#sview>.s-modal{position:absolute}
.sstage img.s-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.7) saturate(1.3);transform:scale(1.2)}
.sstage img.s-main{position:relative;z-index:1}
#sview-media,#sedit-media{display:grid;place-items:center}
#sview-media>*,#sedit-media>*{grid-area:1/1}
/* ouverture / fermeture / passage d'une personne à l'autre */
#sview.opening{animation:svFade .25s ease both}#sview.opening .sstage{animation:svOpen .38s cubic-bezier(.2,.9,.25,1.15) both}
#sview.closing{animation:svFade .2s ease reverse both}#sview.closing .sstage{animation:svClose .2s ease-in both}
@keyframes svFade{from{opacity:0}to{opacity:1}}
@keyframes svOpen{from{transform:scale(.6) translateY(8%);border-radius:50%;opacity:0}60%{border-radius:28px;opacity:1}to{transform:none}}
@keyframes svClose{to{transform:scale(.85) translateY(6%);opacity:0}}
.sstage.swap-next{animation:swapNext .45s cubic-bezier(.25,.8,.25,1) both;transform-origin:left center}
.sstage.swap-prev{animation:swapPrev .45s cubic-bezier(.25,.8,.25,1) both;transform-origin:right center}
@keyframes swapNext{from{transform:perspective(1400px) translateX(45%) rotateY(-55deg);opacity:.2;filter:brightness(.4)}to{transform:none;opacity:1;filter:none}}
@keyframes swapPrev{from{transform:perspective(1400px) translateX(-45%) rotateY(55deg);opacity:.2;filter:brightness(.4)}to{transform:none;opacity:1;filter:none}}
#sedit-stage.opening{animation:svOpen .38s cubic-bezier(.2,.9,.25,1.15) both}
/* média : fondu d'arrivée puis lent zoom (Ken Burns) */
#sview-media>video,#sview-media>img.s-main{animation:mediaIn .35s ease both}
#sview-media>img.s-main{animation:mediaIn .35s ease both,kb 6s linear .35s forwards}
#sview.paused #sview-media>img.s-main{animation-play-state:paused}
@keyframes mediaIn{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
@keyframes kb{to{scale:1.07}}
/* barres de progression */
.s-bars{top:12px;gap:5px}
.s-bars span{height:3.5px;background:#ffffff40;box-shadow:0 1px 4px #0003}
.s-bars i{background:#fff;border-radius:2px;box-shadow:0 0 8px #fff8}
#sview.paused .s-bars{opacity:.55;transition:opacity .2s}
#sview.paused .s-head,#sview.paused .s-foot{opacity:0;transition:opacity .2s}
.s-head,.s-foot{transition:opacity .25s}
/* autocollants qui « pop » */
.stk-layer.pop .stk,.stk.new{animation:stkPop .5s cubic-bezier(.2,1.5,.4,1) both}
.stk-layer.pop .stk:nth-child(2){animation-delay:.08s}.stk-layer.pop .stk:nth-child(3){animation-delay:.16s}.stk-layer.pop .stk:nth-child(n+4){animation-delay:.24s}
@keyframes stkPop{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
.stk.poll{box-shadow:0 10px 30px #0007,0 0 0 1px #ffffff33}
.stk.poll .pa{transition:transform .12s}.stk.poll .pa:active{transform:scale(.96)}
.stk.poll .pa i{transition:width .6s cubic-bezier(.2,.9,.3,1)}
/* cœur : explosion + rebond du bouton */
.s-like.on svg{animation:likeBump .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes likeBump{0%{scale:.6}60%{scale:1.3}to{scale:1}}
.s-burst{position:absolute;left:50%;top:45%;width:0;height:0;z-index:30;pointer-events:none;color:var(--coral)}
.s-burst svg{position:absolute;width:110px;height:110px;left:-55px;top:-55px;filter:drop-shadow(0 6px 20px #FF6B4A88);animation:burstHeart .85s cubic-bezier(.2,1.4,.4,1) forwards}
.s-burst b{position:absolute;width:10px;height:10px;left:-5px;top:-5px;border-radius:5px;background:var(--coral);animation:burstDot .7s ease-out forwards;--a:0deg}
.s-burst b:nth-child(odd){background:#FFD166}
@keyframes burstHeart{0%{scale:0;opacity:0}30%{scale:1.15;opacity:1}55%{scale:.95}80%{scale:1;opacity:1}to{scale:1.3;opacity:0;translate:0 -30px}}
@keyframes burstDot{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateY(-120px) scale(.2);opacity:0}}
/* réponse envoyée : l'avion en papier s'envole */
.s-fly{position:absolute;right:70px;bottom:40px;z-index:30;color:#fff;pointer-events:none;animation:fly .85s cubic-bezier(.4,0,.6,1) forwards}
.s-fly svg{width:30px;height:30px;filter:drop-shadow(0 2px 6px #0008)}
@keyframes fly{0%{transform:none;opacity:1}to{transform:translate(60px,-320px) rotate(-25deg) scale(.5);opacity:0}}
/* boutons « verre dépoli » */
.sfull .s-ico{background:#00000055;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .12s,background .15s}
.sfull .s-ico:hover{background:#00000088}.sfull .s-ico:active{transform:scale(.9)}
.s-reply{background:#00000033;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .15s}
.s-reply:focus-within{border-color:#fff}
.s-share{display:inline-flex;align-items:center;gap:8px;border-radius:24px!important;padding:12px 20px!important;background:linear-gradient(135deg,#FF6B4A,#FF8E53 50%,#F5C04A)!important;color:#1A0E0A!important;font-weight:800;box-shadow:0 8px 24px #FF6B4A66;transition:transform .12s}
.s-share:active{transform:scale(.95)}
#sedit .s-top .s-ico{width:48px;height:48px}
.s-head .av{box-shadow:0 0 0 2px var(--coral)}
.s-nav{backdrop-filter:blur(10px);transition:transform .15s,background .15s}.s-nav:hover:not(:disabled){transform:scale(1.08)}
/* appareil photo : déclencheur qui respire, enregistrement */
#scam-shutter,#scam .s-bottom{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#scam-shutter{touch-action:none;box-shadow:0 0 0 0 #ffffff55;animation:breathe 2.4s ease-in-out infinite}
#scam-shutter.rec{animation:none;transform:scale(1.18);transition:transform .2s}
@keyframes breathe{50%{box-shadow:0 0 0 10px #ffffff00}}
#scam-rec{display:flex;align-items:center;gap:8px}#scam-rec[hidden]{display:none}
#scam-rec em{display:none;font-style:normal;font-size:12px;opacity:.85}#scam-rec.tapstop em{display:inline}
#scam-rec i{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
/* anneau de story qui tourne doucement (pas encore vue) */
.dispo .ring.story{position:relative;border-color:transparent!important}
.dispo .ring.story::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3px;background:conic-gradient(from var(--ra,0deg),#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ringSpin 4s linear infinite}
@property --ra{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ringSpin{to{--ra:360deg}}
.dispo[data-story-user]{transition:transform .15s}.dispo[data-story-user]:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){
  #sview.opening,#sview.opening .sstage,.sstage.swap-next,.sstage.swap-prev,#sview-media>img.s-main,.dispo .ring.story::before,#scam-shutter{animation:none!important}
}

/* ---------- 1.5 : corrections téléphone (iPhone en appli écran d'accueil) ---------- */
html,body{overscroll-behavior:none}
body{overflow:hidden}
/* le corps ne prend plus de marge en bas : la barre du bas et la zone d'écriture gèrent déjà le bord de l'écran */
@media (display-mode: standalone){
  body{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  #app{height:calc(var(--vvh,100dvh) - env(safe-area-inset-top))}
}
@media (display-mode: browser),(display-mode: minimal-ui){ #app{height:var(--vvh,100dvh)} }
/* écran de connexion : défile s'il est trop petit (téléphone couché) */
#auth{display:flex;flex-direction:column;overflow-y:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
#auth>.card{margin:auto;flex:none}
/* pas de zoom automatique d'iOS quand on touche un champ (il zoome sous 16 px) */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select,#input{font-size:16px!important}
}
body.story-open{position:fixed;inset:0;touch-action:none}
.sfull{overscroll-behavior:contain;touch-action:none}
.sfull input,.sfull textarea,.s-vlist{touch-action:auto}

/* ---------- 1.5 : bouton Envoyer ---------- */
#send-btn{width:40px;height:40px;border-radius:20px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;flex:none;animation:sendIn .2s cubic-bezier(.2,1.4,.4,1)}
#send-btn[hidden]{display:none}
@keyframes sendIn{from{scale:.4;opacity:0}}

/* ---------- 1.5 : appareil photo, éditeur, souvenirs ---------- */
.cam-side{display:flex;flex-direction:column;gap:10px;align-items:center}
.sedit-bar{justify-content:space-between!important;gap:6px!important;align-items:flex-end!important}
.s-act{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:11px;font-weight:700;background:none;min-width:58px}
.s-act i{width:46px;height:46px;border-radius:23px;display:grid;place-items:center;background:#00000066;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .12s,background .15s}
.s-act:active i{transform:scale(.88)}
.s-act.done i{background:#3FB27F}
.s-act.pop i{animation:likeBump .45s cubic-bezier(.2,1.6,.4,1)}
.s-share{align-self:center}.s-share svg{width:18px;height:18px}
.s-sound{position:absolute;right:14px;bottom:100px;z-index:6}
.s-bad{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;font-weight:700;color:#fff;background:#1E1B26}
.sheet-wrap{background:#000a;align-items:flex-end;z-index:61}
.msheet{width:min(560px,100vw);max-height:82dvh;background:var(--float);color:var(--text);border-radius:24px 24px 0 0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
.msheet.opening{animation:sheetUp .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes sheetUp{from{transform:translateY(100%)}}
.msheet-head{display:flex;align-items:center;gap:8px;padding:14px 14px 8px 20px}.msheet-head b{font-family:var(--display);font-size:20px}.msheet-head .grow{flex:1}
.msheet .s-ico{background:var(--deep);color:var(--text)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;overflow-y:auto;touch-action:pan-y}
.mcell{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--deep);border-radius:6px}
.mcell img,.mcell video{width:100%;height:100%;object-fit:cover;display:block}
.mcell small{position:absolute;left:6px;bottom:5px;color:#fff;font-size:11px;font-weight:700;text-shadow:0 1px 4px #000}
.mplay{position:absolute;top:6px;right:6px;color:#fff;filter:drop-shadow(0 1px 3px #000)}.mplay svg{width:16px;height:16px}
.mempty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 24px;color:var(--muted)}.mempty svg{width:48px;height:48px;color:var(--coral)}.mempty b{color:var(--text);font-size:17px}.mempty p{margin:0}
.ssend-list{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto;touch-action:pan-y}
.ssend-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;cursor:pointer}.ssend-row:hover{background:var(--hover)}
.ssend-row span{flex:1;font-weight:600}.ssend-row input{width:22px;height:22px;accent-color:var(--coral)}
.ssend-row .av{width:36px;height:36px}

/* ---------- 1.5 : À la une ---------- */
.hl-pick{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 8px}
.hl-chip,.pc-hli{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;width:68px;font-size:12px;font-weight:600;color:var(--text);background:none}
.hl-chip span,.pc-hli span{max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-cover{display:block;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--deep);box-shadow:0 0 0 2px var(--float),0 0 0 4px var(--btn);transition:transform .15s}
.hl-cover img,.hl-cover video{width:100%;height:100%;object-fit:cover;display:block}
.hl-chip:hover .hl-cover,.pc-hli:hover .hl-cover{transform:scale(1.06)}
.hl-newrow{display:flex;gap:8px}.hl-newrow input{flex:1}

/* ---------- 1.5 : profils ---------- */
#card.pc-card{width:320px;border-radius:20px;background:var(--float);box-shadow:0 18px 50px #000b;overflow:hidden;border:1px solid var(--border);max-height:calc(100dvh - 16px);overflow-y:auto}
#card.pc-in{animation:pcIn .2s cubic-bezier(.2,.9,.3,1.1)}
@keyframes pcIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.pc{position:relative;background:var(--float)}
.pc-banner{position:relative;height:110px;background:radial-gradient(circle at 15% 20%,#ffffff2e,transparent 45%),linear-gradient(135deg,var(--pc1),var(--pc2));background-size:cover;background-position:center}
.pc-banner.img{background-size:cover}
.pc.full .pc-banner{height:180px}
.pc-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:18px;background:#0007;color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px)}.pc-x:hover{background:#000a}
.pc-x svg{width:18px;height:18px}
.pc-head{display:flex;align-items:flex-end;gap:10px;padding:0 16px;margin-top:-46px;position:relative}
.pc-av{position:relative;border-radius:50%;padding:5px;background:var(--float);flex:none}
.pc-av .av{width:84px;height:84px;font-size:32px}
.pc.full .pc-av .av{width:110px;height:110px;font-size:42px}
.pc-av .av .st{width:20px;height:20px;border-width:4px;border-color:var(--float)}
.pc-av.story::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from var(--ra,0deg),#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:ringSpin 4s linear infinite}
.pc-av.story.seen::before{background:var(--btn);animation:none}
.pc-av[data-pc-story]{cursor:pointer}
.pc-bubble{margin-bottom:12px;background:var(--deep);border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:13px;max-width:180px;position:relative;box-shadow:0 4px 12px #0003}
.pc-bubble img.emoji{width:16px;height:16px;vertical-align:-3px}
.pc-body{padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px}
.pc-names h3{margin:0;font-family:var(--display);font-size:22px;line-height:1.1}
.pc.full .pc-names h3{font-size:28px}
.pc-sub{color:var(--muted);font-size:13px;margin-top:2px}
.pc-act{background:var(--deep);border-radius:14px;padding:8px 12px;font-size:13px}.pc-act small{display:block;color:var(--muted);font-size:11px}
.pc-sec{background:var(--deep);border-radius:14px;padding:10px 12px}
.pc-sec h5{margin:0 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pc-sec p{margin:0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.pc-since{display:flex;align-items:center;gap:6px}
.pc-hl{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 2px;scrollbar-width:none}
.pc-hl .hl-cover{box-shadow:0 0 0 2px var(--deep),0 0 0 4px var(--btn);width:56px;height:56px}
.pc-common{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted)}.pc-common span{display:inline-flex;align-items:center;gap:5px}
.pc-actions{display:flex;gap:8px}
.pc-actions .primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:11px 14px;background:var(--coral);color:var(--on-coral);font-weight:700}
.pc-actions .primary.green{background:var(--accent);color:#0B2B26}
.pc-actions .pill-btn{border-radius:14px}
.pc .block-link{align-self:flex-start;font-size:12px}
.pc .card-roles{margin-top:0}
#pfull{position:fixed;inset:0;z-index:55;background:#000b;display:grid;place-items:center;padding:16px;overflow-y:auto}
#pfull[hidden]{display:none}
#pfull.pc-in .pfull-box{animation:pcIn .25s cubic-bezier(.2,.9,.3,1.1)}
.pfull-box{width:min(520px,100%);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px #000c;border:1px solid var(--border)}
@media (max-width:700px){
  #card.pc-card{left:0!important;right:0;top:auto!important;bottom:0;width:100%;border-radius:24px 24px 0 0;max-height:88dvh;padding-bottom:env(safe-area-inset-bottom)}
  #card.pc-in{animation:sheetUp .3s cubic-bezier(.2,.9,.3,1)}
  #pfull{padding:0;place-items:stretch}
  .pfull-box{width:100%;min-height:100%;border-radius:0;border:0}
}
/* éditeur de profil */
#profile-dlg{width:min(860px,96vw);padding:0;border-radius:24px;overflow:hidden}
#profile-dlg[open]{animation:dlgIn .22s cubic-bezier(.2,.9,.3,1.2)}
#profile-form{display:flex;flex-direction:column;max-height:90dvh}
.pe{display:grid;grid-template-columns:1fr 330px;gap:24px;padding:22px 24px;overflow-y:auto}
.pe-form{display:flex;flex-direction:column;gap:14px;min-width:0}.pe-form h3{margin:0;font-family:var(--display);font-size:24px}
.pe-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pe-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pe-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.pe-label small{text-transform:none;letter-spacing:0;font-weight:600}
.pe-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pe-btns .pill-btn{cursor:pointer}
.pe-form input:not([type=color]):not([type=file]),.pe-form select,.pe-form textarea{background:var(--deep);border:2px solid transparent;border-radius:14px;padding:11px 14px;color:var(--text);font:15px Figtree,sans-serif;resize:none;width:100%;box-sizing:border-box}
.pe-form input:focus,.pe-form textarea:focus,.pe-form select:focus{outline:none;border-color:var(--coral)}
.pe-colors{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pe-colors small{color:var(--muted);font-weight:600;margin-right:4px}
.pe-colors .sw{width:30px;height:30px;border-radius:15px;border:3px solid transparent;padding:0;cursor:pointer;transition:transform .12s}
.pe-colors .sw:hover{transform:scale(1.12)}.pe-colors .sw.on{box-shadow:0 0 0 2px var(--float),0 0 0 4px var(--text)}
.pe-colors .sw.custom{position:relative;display:grid;place-items:center;background:conic-gradient(#FF6B4A,#F5C04A,#3FB27F,#6FE3D2,#5B8CFF,#8E6CFF,#E05A8A,#FF6B4A);overflow:hidden}
.pe-colors .sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.pe-colors .sw.custom span{font-weight:800;color:#fff;text-shadow:0 1px 3px #0008;pointer-events:none}
.pe-prev{display:flex;flex-direction:column;gap:8px}
#pe-preview .pc{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 12px 30px #0006}
.pe-menu{display:flex;justify-content:flex-end;gap:10px;margin:0;padding:14px 24px;border-top:1px solid var(--border);background:var(--float)}
.pe-menu button{border-radius:14px;padding:11px 18px;font-weight:700}
.pe-menu .primary{background:var(--coral);color:var(--on-coral)}
@media (max-width:760px){
  #profile-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  #profile-form{height:100%;max-height:none}
  .pe{grid-template-columns:1fr;padding:16px;gap:16px}.pe-prev{order:-1}
  .pe-row{grid-template-columns:1fr}
  .pe-menu{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- 1.5 : cartes de serveurs épaisses ---------- */
.srv-cards{gap:10px;padding:4px 12px 16px}
.srv-card.big{display:block;padding:0;border-radius:20px;overflow:hidden;background:var(--side);border:1px solid var(--border);transition:transform .15s,border-color .15s,box-shadow .15s}
.srv-card.big:hover{background:var(--side);transform:translateY(-2px);box-shadow:0 10px 24px #0005;border-color:var(--btn)}
.srv-card.big.on{border-color:var(--coral);background:var(--side)}
.sc-banner{display:block;position:relative;height:64px;background:radial-gradient(circle at 20% 20%,#ffffff33,transparent 50%),linear-gradient(135deg,var(--srv),color-mix(in srgb,var(--srv) 45%,#14121A));background-size:cover;background-position:center}
.sc-banner.img{background-size:cover}
.sc-live{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;background:#000a;color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:12px;backdrop-filter:blur(6px)}
.sc-body{display:flex;align-items:flex-start;gap:12px;padding:0 14px 14px}
.sc-body .srv-tile{width:56px;height:56px;border-radius:18px;margin-top:-22px;border:4px solid var(--side);box-sizing:content-box;font-size:20px;flex:none}
.sc-body .srv-txt{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:8px}
.sc-body .srv-txt b{font-family:var(--display);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-desc{color:var(--text)!important;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal!important}
.sc-stats{display:flex;align-items:center;gap:6px;color:var(--muted)}
.sc-on{width:8px;height:8px;border-radius:4px;background:#23a55a;display:inline-block}.sc-dot{width:3px;height:3px;border-radius:2px;background:var(--muted);display:inline-block}
.sc-ev{display:flex;align-items:center;gap:6px;margin-top:3px;padding:5px 9px;border-radius:10px;background:var(--deep);color:var(--text)!important;font-weight:600;max-width:100%}
.sc-ev svg{width:14px;height:14px;flex:none;color:var(--coral)}.sc-ev span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-card.big .srv-badge{position:absolute;top:8px;left:10px}

/* ---------- 1.5 : événements ---------- */
#events-btn{position:relative}
#events-btn svg{width:20px;height:20px}
.ev-count{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:8px;background:var(--coral);color:var(--on-coral);font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.ev-count[hidden]{display:none}
#ev-dlg{width:min(640px,96vw);padding:0;border-radius:24px;overflow:hidden}
#ev-dlg[open]{animation:dlgIn .22s cubic-bezier(.2,.9,.3,1.2)}
#ev-body{max-height:86dvh;overflow-y:auto;padding:0 0 18px}
.ev-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--float);border-bottom:1px solid var(--border)}
.ev-head h2{margin:0;font-family:var(--display);font-size:22px}.ev-head small{color:var(--muted)}.ev-head .grow{flex:1}
.ev-head .primary{display:inline-flex;align-items:center;gap:6px;border-radius:14px;padding:9px 14px;background:var(--coral);color:var(--on-coral);font-weight:700}
.ev-head .primary svg{width:18px;height:18px}
.ev-ico{width:42px;height:42px;border-radius:14px;background:var(--deep);color:var(--coral);display:grid;place-items:center}
.ev-x{width:38px;height:38px;border-radius:19px;background:var(--deep);display:grid;place-items:center;font-size:22px;color:var(--text)}
.ev-list{display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.ev-card{border-radius:20px;overflow:hidden;background:var(--side);border:1px solid var(--border);animation:pcIn .3s ease both}
.ev-card.now{border-color:var(--coral)}
.ev-cover{position:relative;height:110px;background:radial-gradient(circle at 80% 20%,#ffffff33,transparent 45%),linear-gradient(135deg,var(--srv),color-mix(in srgb,var(--srv) 40%,#14121A));background-size:cover;background-position:center}
.ev-cover.img{background-size:cover}
.ev-date{position:absolute;left:14px;bottom:-22px;width:56px;height:60px;border-radius:16px;background:var(--float);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 16px #0006;border:1px solid var(--border)}
.ev-date small{color:var(--coral);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.06em}.ev-date b{font-family:var(--display);font-size:24px;line-height:1}
.ev-now{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;background:#000a;color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:12px}
.ev-info{padding:30px 16px 14px;display:flex;flex-direction:column;gap:6px}
.ev-info h3{margin:0;font-family:var(--display);font-size:20px}
.ev-when{margin:0;color:var(--coral);font-weight:700;font-size:14px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.ev-when .link{display:inline-flex;align-items:center;gap:4px;color:var(--live-text,var(--accent))}
.ev-desc{margin:0;color:var(--text);opacity:.9;white-space:pre-wrap;font-size:14px}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.ev-who{display:flex;align-items:center}.ev-who .av{width:28px;height:28px;font-size:12px;border:2px solid var(--side);margin-left:-8px}.ev-who .av:first-child{margin-left:0}
.ev-who small{margin-left:8px;color:var(--muted);font-weight:600}
.ev-rsvp{display:flex;gap:6px;align-items:center}
.ev-rsvp button{height:36px;padding:0 12px;border-radius:18px;background:var(--deep);color:var(--text);font-weight:700;font-size:13px;transition:transform .1s,background .15s}
.ev-rsvp button:active{transform:scale(.94)}
.ev-rsvp button.on{background:var(--coral);color:var(--on-coral)}
.ev-rsvp .ev-del{width:36px;padding:0;display:grid;place-items:center;color:#FF8A8C}
.ev-by{color:var(--muted)}
.ev-form{display:flex;flex-direction:column;gap:12px}
.ev-form>*:not(.ev-head){margin:0 18px}
.ev-form .fld{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;color:var(--muted)}
.ev-form input:not([type=file]),.ev-form select,.ev-form textarea{background:var(--deep);border:2px solid transparent;border-radius:14px;padding:11px 14px;color:var(--text);font:15px Figtree,sans-serif;text-transform:none;resize:none;color-scheme:dark}
.ev-form input:focus,.ev-form textarea:focus,.ev-form select:focus{outline:none;border-color:var(--coral)}
.ev-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ev-form menu{display:flex;justify-content:flex-end;gap:8px;padding:0}
.ev-form menu button{border-radius:14px;padding:11px 18px;font-weight:700}.ev-form menu .primary{background:var(--coral);color:var(--on-coral)}
.ev-act .ev-date{position:static;width:44px;height:48px;border-radius:12px;flex:none;box-shadow:none;background:var(--deep)}.ev-act .ev-date b{font-size:18px}
@media (max-width:700px){#ev-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}#ev-body{max-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}}

/* ---------- 1.5 : menu « + » ---------- */
.pop-menu{position:fixed;z-index:45;width:240px;background:var(--float);border:1px solid var(--border);border-radius:18px;padding:6px;box-shadow:0 16px 40px #000a;display:flex;flex-direction:column}
.pop-menu[hidden]{display:none}
.pop-menu.pop-in{animation:pcIn .18s cubic-bezier(.2,.9,.3,1.2);transform-origin:bottom left}
.pop-menu button{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-align:left;color:var(--text)}
.pop-menu button:hover{background:var(--hover)}
.pop-menu button>svg{width:36px;height:36px;padding:8px;border-radius:12px;background:var(--deep);color:var(--coral);box-sizing:border-box;flex:none}
.pop-menu span{display:flex;flex-direction:column}.pop-menu small{color:var(--muted);font-size:12px}

/* ---------- 1.5 : morpion ---------- */
.ttt{width:min(280px,100%);background:var(--side);border:1px solid var(--border);border-radius:20px;padding:14px;margin-top:6px;display:flex;flex-direction:column;gap:12px}
.ttt.myturn{border-color:var(--coral);box-shadow:0 0 0 3px #FF6B4A22}
.ttt-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ttt-p{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 6px;border-radius:12px;transition:background .2s}
.ttt-p.turn{background:var(--deep)}
.ttt-p b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.ttt-p i{font-style:normal;font-weight:900;font-size:16px}.ttt-p.x i{color:var(--coral)}.ttt-p.o i{color:var(--accent)}
.ttt-p .av{width:26px;height:26px;font-size:12px;flex:none}
.ttt-q{background:var(--btn)!important;color:var(--muted)}
.ttt-vs{font-family:var(--display);font-weight:800;color:var(--muted);font-size:12px}
.ttt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ttt-c{aspect-ratio:1;border-radius:14px;background:var(--deep);font-size:34px;font-weight:900;display:grid;place-items:center;transition:background .15s,transform .1s}
.ttt-c:not(:disabled):hover{background:var(--sel)}.ttt-c:not(:disabled):active{transform:scale(.92)}
.ttt-c.f{animation:tttPop .3s cubic-bezier(.2,1.6,.4,1)}
.ttt-c.x{color:var(--coral)}.ttt-c.o{color:var(--accent)}
.ttt-c.win{background:var(--coral);color:var(--on-coral);animation:tttWin .6s ease-in-out 2}
.ttt-c.o.win{background:var(--accent);color:#0B2B26}
@keyframes tttPop{from{scale:.3}}
@keyframes tttWin{50%{transform:scale(1.08)}}
.ttt-st{text-align:center;font-weight:700;font-size:14px}
.msg.b .ttt{margin-top:2px}

/* ---------- 1.5 : écran d'appel ---------- */
.welcome h2{text-wrap:balance}
.vp-info{position:relative;cursor:pointer}
.vp-open{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;color:var(--muted);vertical-align:middle;margin-left:6px}
.vp-open:hover{background:var(--sel);color:var(--text)}
#callx{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;color:#fff;background:#0B0A0F;overflow:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#callx[hidden]{display:none}
#callx.cx-in{animation:cxIn .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes cxIn{from{transform:translateY(40px);opacity:0}}
.cx-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 25%,var(--c1),transparent 55%),radial-gradient(circle at 75% 80%,color-mix(in srgb,var(--c1) 50%,#5B8CFF),transparent 55%),#0B0A0F;filter:blur(40px) saturate(1.2);opacity:.75;animation:cxDrift 14s ease-in-out infinite alternate}
.cx-bg.img{background-size:cover;background-position:center;filter:blur(50px) brightness(.55) saturate(1.3);opacity:1}
@keyframes cxDrift{to{transform:translate(4%,-3%) scale(1.08) rotate(3deg)}}
#callx>*:not(.cx-bg){position:relative}
.cx-top{display:flex;align-items:center;gap:12px;padding:14px 16px}
.cx-title{flex:1;text-align:center;display:flex;flex-direction:column}
.cx-title b{font-family:var(--display);font-size:20px}.cx-title small{opacity:.8;font-size:13px}
.cx-sp{width:44px}
.cx-round{width:44px;height:44px;border-radius:22px;background:#ffffff1f;color:#fff;display:grid;place-items:center;backdrop-filter:blur(10px)}
.cx-people{flex:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:28px 22px;padding:20px;overflow-y:auto}
.cx-p{display:flex;flex-direction:column;align-items:center;gap:10px;width:120px;text-align:center}
.cx-av{position:relative;display:block;border-radius:50%;transition:box-shadow .15s}
.cx-p .av{width:104px;height:104px;font-size:40px;box-shadow:0 10px 30px #0006}
.cx-people.n1 .cx-p,.cx-people.n2 .cx-p{width:160px}
.cx-people.n1 .av,.cx-people.n2 .av{width:140px;height:140px;font-size:54px}
.cx-p.speaking .cx-av{box-shadow:0 0 0 4px #3FB27F,0 0 0 10px #3FB27F44;animation:cxTalk 1s ease-in-out infinite}
@keyframes cxTalk{50%{box-shadow:0 0 0 5px #3FB27F,0 0 0 16px #3FB27F22}}
.cx-p b{font-size:16px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px #0008}
.cx-p small{opacity:.85;font-size:12px}.cx-p small.live{background:#F23F43;color:#fff;border-radius:6px;padding:1px 6px;font-weight:800;opacity:1}
.cx-muted{position:absolute;right:2px;bottom:2px;width:30px;height:30px;border-radius:15px;background:#F23F43;color:#fff;display:grid;place-items:center;border:3px solid #0B0A0F}
.cx-p.ringing .av{animation:cxRing 1.6s ease-out infinite}
@keyframes cxRing{0%{box-shadow:0 0 0 0 #ffffff55}100%{box-shadow:0 0 0 40px #ffffff00}}
.cx-people.with-video{flex:none;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:8px 16px;gap:14px}
.cx-people.with-video .cx-p{width:72px}.cx-people.with-video .av{width:60px!important;height:60px!important;font-size:22px!important}
.cx-people.with-video .cx-p b{font-size:12px}
.cx-stage-slot{flex:none}
.cx-people.with-video~.cx-stage-slot{flex:1;min-height:0;display:flex;padding:0 12px}
#stage.in-callx{background:transparent;max-height:none;flex:1;border-radius:18px;padding:0}
#stage.in-callx .tile{border-radius:18px}
.cx-ctrl{display:flex;justify-content:center;gap:14px;padding:18px 16px 26px;flex-wrap:wrap}
.cx-btn{width:62px;height:62px;border-radius:31px;background:#ffffff26;color:#fff;display:grid;place-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .12s,background .15s}
.cx-btn:hover{background:#ffffff3a}.cx-btn:active{transform:scale(.9)}
.cx-btn.off{background:#fff;color:#14121A}
.cx-btn.on{background:#3FB27F}
.cx-btn.hang{background:#F23F43;width:72px}
.cx-btn.hang svg{transform:rotate(0)}
@media (max-width:420px){.cx-btn{width:56px;height:56px}.cx-ctrl{gap:10px}}
.cx-stage-slot:has(#stage .tile){flex:1;min-height:0;display:flex;padding:0 12px}
.cx-stage-slot #stage{width:100%}
@media (max-width:700px){#stage.in-callx{grid-template-columns:1fr;align-content:center;justify-items:center}#stage.in-callx .tile{aspect-ratio:3/4;max-height:100%}}
#profile-form .pe-btns .pill-btn{flex-direction:row;align-items:center;gap:8px;text-transform:none;font-size:14px;font-weight:700;color:var(--text);padding:9px 14px;letter-spacing:0}
#profile-form .pe-btns .pill-btn svg{width:18px;height:18px}
#profile-form label.pe-field{text-transform:none;font-size:inherit;color:inherit;font-weight:inherit}
#profile-form .sw.custom{flex-direction:row}

/* ---------- 1.6 : navigation des serveurs, tiroir téléphone, feuilles du bas ---------- */
/* cartes de serveurs : l'icône passe devant la bannière */
.sc-body{position:relative}.sc-body .srv-tile{position:relative;z-index:1;box-shadow:0 4px 12px #0004}
.srv-add-card{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:2px dashed var(--btn);border-radius:20px;color:var(--muted);text-align:left;transition:border-color .15s,color .15s,background .15s}
.srv-add-card:hover{border-color:var(--coral);color:var(--text);background:var(--hover)}
.srv-add-card>svg{width:44px;height:44px;padding:11px;box-sizing:border-box;border-radius:15px;background:var(--deep);color:var(--coral);flex:none}
.srv-add-card b{display:block;color:var(--text)}.srv-add-card small{font-size:12px}
/* colonne fine (dans un serveur) */
#servers{transition:width .28s cubic-bezier(.2,.8,.2,1)}
body.srv-slim #servers{width:76px!important;background:var(--rail);border-right:1px solid var(--border)}
@media (min-width:701px){body.srv-slim #servers{display:flex!important}}
.slim-col{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 16px;min-height:100%;box-sizing:border-box;animation:slimIn .3s ease both}
@keyframes slimIn{from{opacity:0;transform:translateX(-8px)}}
.slim-btn{position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:18px;flex:none;transition:transform .15s}
.slim-btn .srv-tile{width:48px;height:48px;border-radius:24px;font-size:16px;transition:border-radius .2s,transform .15s}
.slim-btn:hover .srv-tile,.slim-btn.on .srv-tile{border-radius:16px}
.slim-btn:active{transform:scale(.92)}
.slim-btn.home,.slim-btn.add{width:48px;height:48px;border-radius:24px;background:var(--deep);color:var(--text);transition:border-radius .2s,background .2s,color .2s}
.slim-btn.home:hover{border-radius:16px;background:var(--coral);color:var(--on-coral)}
.slim-btn.add{color:var(--live);margin-top:4px}.slim-btn.add:hover{border-radius:16px;background:var(--live);color:var(--on-live,#0b1a14)}
.slim-sep{width:30px;height:2px;border-radius:1px;background:var(--line);flex:none}
.slim-pill{position:absolute;left:-12px;top:50%;width:4px;height:0;border-radius:0 4px 4px 0;background:var(--text);transform:translateY(-50%);transition:height .2s}
.slim-btn.unread .slim-pill{height:8px}.slim-btn:hover .slim-pill{height:20px}.slim-btn.on .slim-pill{height:38px}
.slim-badge{position:absolute;right:-2px;bottom:-2px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#F23F43;color:#fff;font:700 11px/18px Figtree,sans-serif;border:3px solid var(--rail);box-sizing:content-box}
.slim-live{position:absolute;right:0;top:0;width:12px;height:12px;border-radius:6px;background:var(--live);border:3px solid var(--rail)}
#slim-tip{position:fixed;z-index:80;transform:translateY(-50%);background:var(--float);color:var(--text);font-weight:700;font-size:14px;padding:8px 12px;border-radius:10px;box-shadow:0 8px 24px #0008;pointer-events:none;white-space:nowrap}
#slim-tip[hidden]{display:none}#slim-tip.in{animation:tipIn .12s ease-out}
@keyframes tipIn{from{opacity:0;transform:translate(-4px,-50%) scale(.96)}}
/* panneau Épinglés / recherche : carte flottante animée au lieu d'une colonne qui pousse tout */
#results:not([hidden]){animation:panelIn .26s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes panelIn{from{opacity:0;transform:translateX(24px) scale(.98)}}
@media (min-width:1101px){
  #results:not([hidden]){position:fixed;top:68px;right:14px;bottom:14px;width:380px;z-index:35;border-radius:20px;border:1px solid var(--border);box-shadow:0 24px 60px #000b;background:var(--float);overflow:hidden}
  body.res-open #members{display:block!important}
}
@media (min-width:701px) and (max-width:1100px){#results:not([hidden]){top:10px;right:10px;bottom:10px;border-radius:20px;border:1px solid var(--border)}}
#results header{font-weight:700;color:var(--text)}
#close-results{width:34px;height:34px;border-radius:17px;background:var(--deep);display:grid;place-items:center;transition:transform .2s}#close-results:hover{transform:rotate(90deg)}
/* pas de barre d'outils « survol » sur les écrans tactiles (appui long à la place) */
@media (hover:none){.msg:hover .tools,.msg.b:hover .tools{display:none!important}}
.msg.pressing{background:var(--hover);transition:background .35s}

/* téléphone : tiroir serveurs + salons qui apparaît sous le salon */
@media (max-width:700px){
  body.space-servers.has-chan.show-channels #sidebar{display:none!important}
  body.srv-slim.has-chan #servers{display:flex!important;position:fixed;left:0;top:0;bottom:0;width:72px!important;z-index:1;border:0;padding:env(safe-area-inset-top) 0 calc(70px + env(safe-area-inset-bottom))}
  body.srv-slim.has-chan #sidebar{display:flex!important;position:fixed;left:72px;right:0;top:0;bottom:0;z-index:1;border-radius:20px 0 0 0;padding:env(safe-area-inset-top) 56px calc(70px + env(safe-area-inset-bottom)) 0;background:var(--side)}
  body.srv-slim.has-chan #chat{position:relative;z-index:5;transition:transform .32s cubic-bezier(.22,.8,.2,1),border-radius .32s;will-change:transform}
  body.drawer-open #chat{transform:translateX(calc(100vw - 56px));border-radius:22px 0 0 22px;overflow:hidden;box-shadow:-12px 0 40px #000a}
  body.drawer-open #chat>*{pointer-events:none}
  body.drawer-drag #chat,body.drawer-instant #chat{transition:none!important}
  body.drawer-drag #chat{box-shadow:-12px 0 40px #000a;border-radius:22px 0 0 22px;overflow:hidden}
  body.drawer-open #rail{display:flex!important;z-index:6;animation:railUp .3s ease both}
  @keyframes railUp{from{transform:translateY(100%)}}
  body.srv-slim.has-chan .slim-col{padding-top:10px}
  body.srv-slim.has-chan .slim-btn .slim-pill{left:-10px}
  body.srv-slim.has-chan #sidebar #side-list{padding-bottom:20px}
  body:not(.drawer-open):not(.drawer-drag) #sidebar .srv-banner{opacity:.98}
}

/* feuilles qui montent du bas */
#sheet{position:fixed;inset:0;z-index:90}#sheet[hidden]{display:none}
.sh-back{position:absolute;inset:0;background:#0000;transition:background .26s}
#sheet.open .sh-back{background:#000a}
.sh-panel{position:absolute;left:0;right:0;bottom:0;max-height:85dvh;overflow-y:auto;background:var(--float);border-radius:24px 24px 0 0;padding:8px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px #0008;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.9,.25,1);touch-action:pan-y}
#sheet.open .sh-panel{transform:translateY(0)}
.sh-panel.dragging{transition:none}
@media (min-width:701px){.sh-panel{left:50%;right:auto;bottom:50%;width:400px;border-radius:24px;padding:10px 16px 16px;transform:translate(-50%,50%) scale(.94);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.3,1.15),opacity .18s}
  #sheet.open .sh-panel{transform:translate(-50%,50%);opacity:1}.sh-grab{visibility:hidden}}
.sh-grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--btn);margin:4px auto 12px;cursor:grab}
.sh-title{font-family:var(--display);font-size:20px;margin:0 4px 12px}
.sh-item{display:flex;align-items:center;gap:14px;width:100%;padding:12px;border-radius:16px;text-align:left;color:var(--text);transition:background .12s}
.sh-item:hover,.sh-item:active{background:var(--hover)}
.sh-item b{font-weight:700}.sh-item small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.sh-item.big{padding:14px;background:var(--deep);margin-bottom:8px}
.sh-ico{width:40px;height:40px;border-radius:14px;background:var(--deep);display:grid;place-items:center;flex:none;color:var(--text)}
.sh-item.big .sh-ico{background:var(--side)}.sh-ico.coral{background:var(--coral)!important;color:var(--on-coral)}
.sh-item.danger{color:#FF7A7C}.sh-item.danger .sh-ico{color:#FF7A7C}
.sh-list{display:flex;flex-direction:column;background:var(--deep);border-radius:18px;padding:4px}
.sh-list .sh-item .sh-ico{background:transparent;width:28px}
.sh-msg{display:flex;gap:10px;align-items:flex-start;padding:4px 4px 14px}.sh-msg .av{width:36px;height:36px;font-size:14px;flex:none}
.sh-msg p{margin:2px 0 0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-quick{display:flex;justify-content:space-between;gap:6px;margin-bottom:12px}
.sh-quick button{flex:1;aspect-ratio:1;max-width:52px;border-radius:26px;background:var(--deep);font-size:24px;display:grid;place-items:center;transition:transform .12s}
.sh-quick button:active{transform:scale(.88)}
/* en-tête du serveur (colonne des salons) : bannière plus haute, fondu doux, boutons ronds en verre */
#side-head .srv-banner{min-height:128px;padding:14px 14px 12px;gap:8px;position:relative;background:linear-gradient(0deg,var(--side) 0,color-mix(in srgb,var(--side) 55%,transparent) 38%,transparent 75%),radial-gradient(circle at 15% 15%,#ffffff2e,transparent 50%),var(--srv)}
#side-head .srv-banner.has-img{background:linear-gradient(0deg,var(--side) 0,color-mix(in srgb,var(--side) 55%,transparent) 38%,transparent 75%),var(--srv-img) center/cover,var(--srv)}
#side-head .srv-banner .srv-name{font-size:22px;line-height:1.1}
#side-head .srv-acts{gap:6px}
#side-head .srv-acts button{background:#00000059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:5px 11px;transition:background .15s,transform .1s}
#side-head .srv-acts button:hover{background:#000000a0}#side-head .srv-acts button:active{transform:scale(.95)}
#side-head{animation:headIn .3s ease both}
@keyframes headIn{from{opacity:0}}
#side-list{animation:listIn .28s ease both}
@keyframes listIn{from{opacity:0;transform:translateY(6px)}}
/* déclencheur : anneau de progression (au lieu d'un disque qui se remplit) */
#scam-shutter.rec{background:transparent!important;border-color:#ffffff55!important}
#scam-shutter .sh-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
#scam-shutter .sh-ring circle{fill:none;stroke:var(--coral);stroke-width:6;stroke-linecap:round;stroke-dasharray:295.3;stroke-dashoffset:295.3;opacity:0;transition:stroke-dashoffset .2s linear,opacity .15s}
#scam-shutter.rec .sh-ring circle{opacity:1;stroke-dashoffset:calc(295.3 - 295.3 * var(--p))}
#scam-shutter.rec i{transform:scale(.42);border-radius:30%}
.v-kick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:38px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;z-index:3;animation:kickIn .25s ease both}
.v-kick svg{width:34px;height:34px}
@keyframes kickIn{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
#smem:not([hidden]){animation:fadeBg .25s ease both}
#smem.closing{animation:fadeBg .26s ease reverse both}#smem.closing .msheet{animation:sheetDown .26s cubic-bezier(.4,0,.8,.4) both}
@keyframes fadeBg{from{background:#0000}to{background:#000a}}
@keyframes sheetDown{to{transform:translateY(100%)}}

/* ---------- 1.6 : paramètres de l'appli façon Discord ---------- */
#settings-dlg{width:min(1100px,96vw);height:min(760px,92dvh);max-height:none;padding:0;border-radius:24px;overflow:hidden;border:1px solid var(--border);background:var(--chat)}
#settings-dlg.opening{animation:setIn .26s cubic-bezier(.2,.9,.3,1.05) both}
#settings-dlg.closing{animation:setOut .18s ease-in both}
#settings-dlg.opening::backdrop{animation:fadeIn .26s ease both}
@keyframes setIn{from{opacity:0;transform:scale(1.04)}}
@keyframes setOut{to{opacity:0;transform:scale(.97)}}
@keyframes fadeIn{from{opacity:0}}
#settings-body{height:100%}
.set-wrap{display:flex;height:100%}
.set-nav{width:260px;flex:none;background:var(--side);border-right:1px solid var(--border);overflow-y:auto}
.set-nav-in{padding:22px 12px;display:flex;flex-direction:column;gap:2px}
.set-me{display:flex;align-items:center;gap:10px;padding:4px 10px 16px}.set-me .av{width:40px;height:40px;font-size:16px}.set-me b{font-family:var(--display);font-size:17px}
.set-nav h5{margin:14px 10px 6px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.set-tab{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;color:var(--muted);font-weight:600;text-align:left;transition:background .15s,color .15s,transform .1s}
.set-tab span{flex:1}.set-tab .chev{display:none;opacity:.5}
.set-tab:hover{background:var(--hover);color:var(--text)}.set-tab:active{transform:scale(.98)}
.set-tab.on{background:var(--sel);color:var(--text)}.set-tab.on svg{color:var(--coral)}
.set-tab.danger{color:#FF7A7C}.set-tab.danger:hover{background:#3A1E22}
.set-sep{height:1px;background:var(--line);margin:10px 8px}
.set-ver{font-size:11px;color:var(--muted);padding:8px 12px;margin:0}
.set-main{flex:1;min-width:0;display:flex;flex-direction:column}
.set-head{display:flex;align-items:center;gap:10px;padding:22px 28px 10px}
.set-head h2{flex:1;margin:0;font-family:var(--display);font-size:26px}
.set-back{display:none}
.set-close{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}
.set-close svg{width:38px;height:38px;padding:9px;box-sizing:border-box;border:2px solid var(--btn);border-radius:19px;transition:background .15s,transform .2s}
.set-close:hover svg{background:var(--hover);transform:rotate(90deg)}.set-close small{font-size:10px;font-weight:700;letter-spacing:.4px}
.set-pane{flex:1;overflow-y:auto;padding:8px 28px 40px}
.set-pane.pane-in{animation:paneIn .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes paneIn{from{opacity:0;transform:translateX(22px)}}
.set-pane>*{max-width:680px}
.set-pane h4{margin:26px 0 10px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.set-pane h4:first-child{margin-top:6px}
.set-pane .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.set-pane button:not(.primary):not(.pill-btn):not(.danger-btn):not(.link):not([data-theme-pick]){background:var(--deep);color:var(--text);border-radius:12px;padding:9px 14px;font-weight:600;transition:background .15s}
.set-pane .seg{display:flex;gap:8px;flex-wrap:wrap}
.set-pane .seg button{flex:1;min-width:120px;padding:14px;border-radius:16px;background:var(--deep);border:2px solid transparent;font-weight:700;transition:border-color .15s,transform .1s}
.set-pane .seg button.on{border-color:var(--coral);background:var(--sel)}.set-pane .seg button:active{transform:scale(.97)}
.set-pane .chk{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--side);border-radius:14px;margin:6px 0;cursor:pointer}
.set-pane .chk input{width:20px;height:20px;accent-color:var(--coral);flex:none}
.set-pane input[type=range]{accent-color:var(--coral)!important;width:100%}
.set-pane .primary{border-radius:14px;padding:11px 18px}
/* Mon compte */
.acc-card{border-radius:22px;overflow:hidden;background:var(--side);border:1px solid var(--border)}
.acc-banner{height:110px;background:radial-gradient(circle at 20% 20%,#ffffff33,transparent 50%),linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 45%,#14121A));background-size:cover;background-position:center}
.acc-id{display:flex;align-items:flex-end;gap:14px;padding:0 18px;margin-top:-36px}
.acc-id .av{width:84px;height:84px;font-size:30px;border:6px solid var(--side);box-sizing:content-box;flex:none}
.acc-id>div{flex:1;min-width:0;padding-bottom:6px}.acc-id b{display:block;font-family:var(--display);font-size:22px}.acc-id small{color:var(--muted)}
.acc-id .pill-btn{margin-bottom:8px}
.acc-rows{margin:16px;background:var(--deep);border-radius:16px;padding:4px}
.acc-row{display:flex;align-items:center;gap:10px;padding:10px 12px}
.acc-row span{flex:1;display:flex;flex-direction:column;gap:2px}.acc-row small{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.acc-row input{background:transparent;border:0;color:var(--text);font:600 16px Figtree,sans-serif;padding:2px 0;outline:none}
.acc-pass{display:flex;flex-direction:column;gap:10px;max-width:420px}
.acc-pass input{background:var(--deep);border:2px solid transparent;border-radius:14px;padding:12px 14px;color:var(--text);font:16px Figtree,sans-serif;outline:none;transition:border-color .15s}
.acc-pass input:focus{border-color:var(--coral)}.acc-pass .primary{align-self:flex-start}
.acc-dev{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;background:var(--side);border-radius:16px}.acc-dev span{flex:1;font-weight:600}
/* Profil */
.prof-teaser{width:min(340px,100%);border-radius:22px;overflow:hidden;background:var(--side);border:1px solid var(--border);margin:6px 0 14px}
.pt-banner{height:90px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 45%,#14121A));background-size:cover;background-position:center}
.pt-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:2px}.pt-body .av{width:72px;height:72px;font-size:26px;border:5px solid var(--side);margin-top:-36px;box-sizing:content-box}
.pt-body b{font-family:var(--display);font-size:20px;margin-top:4px}.pt-body small{color:var(--muted)}.pt-body p{margin:8px 0 0;color:var(--muted);font-size:14px}
.big-btn{padding:13px 20px!important}
/* téléphone : liste des catégories, puis la catégorie glisse par-dessus */
@media (max-width:700px){
  #settings-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .set-wrap{position:relative;overflow:hidden}
  .set-nav{width:100%;border:0;padding-top:env(safe-area-inset-top)}
  .set-tab{padding:14px;font-size:16px;background:var(--deep);border-radius:0}.set-tab .chev{display:block}
  .set-nav h5+.set-tab{border-radius:16px 16px 0 0}.set-tab:has(+h5),.set-tab:has(+.set-sep){border-radius:0 0 16px 16px}
  .set-tab.on{background:var(--deep);color:var(--muted)}.set-tab.on svg{color:inherit}
  .set-tab.danger{border-radius:16px}
  .set-main{position:absolute;inset:0;background:var(--chat);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.85,.25,1);padding-top:env(safe-area-inset-top)}
  .set-wrap.pane-open .set-main{transform:none}
  .set-head{padding:12px 14px 6px}.set-head h2{font-size:22px}
  .set-back{display:grid;place-items:center;width:40px;height:40px;border-radius:20px;color:var(--text)}
  .set-close small{display:none}
  .set-pane{padding:6px 16px calc(30px + env(safe-area-inset-bottom))}
  .set-pane.pane-in{animation:none}
}
#settings-dlg #settings-body{padding:0;max-height:none;overflow:hidden}
.set-pane select{background:var(--deep)!important;border:2px solid transparent!important;border-radius:12px!important;padding:10px 12px!important;color:var(--text);font:15px Figtree,sans-serif;transition:border-color .15s}
.set-pane select:focus{outline:none;border-color:var(--coral)!important}
/* animations communes */
#view.chan-in{animation:chanIn .22s ease-out both}
@keyframes chanIn{from{opacity:0;transform:translateY(8px)}}
dialog[open]:not(#settings-dlg):not(#srv-dlg){animation:dlgPop .22s cubic-bezier(.2,.9,.3,1.12) both}
dialog[open]::backdrop{animation:fadeIn .2s ease both}
@keyframes dlgPop{from{opacity:0;transform:translateY(10px) scale(.96)}}
#toast:not([hidden]){animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}}
button,.chip,.conv,.dispo,.srv-card{-webkit-tap-highlight-color:transparent}
.chip{transition:background .15s,transform .1s}.chip:active{transform:scale(.95)}
#side-list .chan{transition:background .12s,color .12s,transform .1s}#side-list .chan:active{transform:scale(.98)}
#srv-body.pane-in{animation:paneIn .26s cubic-bezier(.2,.9,.3,1) both}

/* ---------- 1.6 : nos lecteurs (photo, vidéo, son) ---------- */
.att-img,.photo-grid img{cursor:pointer!important;transition:transform .15s,filter .15s}.att-img:hover{filter:brightness(1.06)}.att-img:active{transform:scale(.98)}
.att-img{border-radius:14px}
.vplay{display:grid;place-items:center;padding:0}.vplay svg{display:block}
.vplay:active{transform:scale(.9)}
/* vidéo */
.mvid{position:relative;max-width:min(420px,100%);border-radius:16px;overflow:hidden;background:#000;margin:4px 0;line-height:0}
.mvid video{width:100%;max-height:340px;display:block;object-fit:contain;background:#000}
.mv-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:30px;background:#00000080;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;transition:transform .15s,opacity .2s}
.mv-big svg{width:26px;height:26px}.mv-big:hover{transform:translate(-50%,-50%) scale(1.08)}
.mvid.playing .mv-big{opacity:0;pointer-events:none}
.mv-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:18px 10px 8px;background:linear-gradient(transparent,#000b);color:#fff;line-height:normal;opacity:0;transition:opacity .2s}
.mvid:hover .mv-bar,.mvid.playing .mv-bar{opacity:1}.mvid.playing:not(:hover) .mv-bar{opacity:0}
@media (hover:none){.mvid.playing .mv-bar{opacity:1}}
.mv-bar button{width:30px;height:30px;display:grid;place-items:center;color:#fff;border-radius:15px;flex:none}.mv-bar button:hover{background:#ffffff26}
.mv-t{font:600 12px Figtree,sans-serif;min-width:32px}
.mv-track{flex:1;height:5px;border-radius:3px;background:#ffffff40;cursor:pointer;position:relative;padding:6px 0;background-clip:content-box}
.mv-track i{position:absolute;left:0;top:6px;height:5px;border-radius:3px;background:var(--coral)}
/* son */
.maudio{display:flex;align-items:center;gap:10px;width:min(280px,100%);padding:8px 12px 8px 8px;border-radius:22px;background:var(--bubble,var(--deep));margin:4px 0}
.ma-play{width:36px;height:36px;border-radius:18px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;flex:none}
.maudio .mv-track{background:var(--btn);background-clip:content-box}.ma-time{font-size:12px;color:var(--muted);min-width:30px;text-align:right}
/* visionneuse */
#pv{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;color:#fff;user-select:none;-webkit-user-select:none}
#pv[hidden]{display:none}
.pv-bg{position:absolute;inset:0;background:#08070bf2;transition:opacity .2s}
#pv.in .pv-bg{animation:fadeIn .25s ease both}
#pv.closing{animation:pvOut .22s ease-in both}
@keyframes pvOut{to{opacity:0}}
#pv.closing #pv-img{transform:scale(.92)!important;transition:transform .22s ease-in!important}
.pv-stage{position:absolute;inset:64px 0 40px;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in}
#pv.zoomed .pv-stage{cursor:grab}
#pv-img{max-width:min(92vw,1400px);max-height:100%;border-radius:6px;box-shadow:0 20px 60px #000c;transform-origin:center;will-change:transform;-webkit-user-drag:none}
#pv-img.pv-in-r{animation:pvInR .28s cubic-bezier(.2,.9,.3,1) both}#pv-img.pv-in-l{animation:pvInL .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes pvInR{from{opacity:0;translate:60px 0}}@keyframes pvInL{from{opacity:0;translate:-60px 0}}
.pv-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 14px 12px;z-index:2;transition:opacity .2s}
.pv-top .grow{flex:1}.pv-who{display:flex;align-items:center;gap:10px}.pv-who .av{width:36px;height:36px;font-size:14px}.pv-who span{display:flex;flex-direction:column}.pv-who small{color:#ffffffaa;font-size:12px}
.pv-btn{width:44px;height:44px;border-radius:22px;background:#ffffff1a;color:#fff;display:grid;place-items:center;transition:background .15s,transform .1s}
.pv-btn:hover{background:#ffffff33}.pv-btn:active{transform:scale(.92)}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:26px;background:#ffffff1a;color:#fff;display:grid;place-items:center;z-index:2;transition:background .15s,transform .15s}
.pv-nav:hover{background:#ffffff33;transform:translateY(-50%) scale(1.06)}.pv-nav.prev{left:18px}.pv-nav.next{right:18px}.pv-nav[hidden]{display:none}
.pv-count{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font:600 13px Figtree,sans-serif;color:#ffffffaa;z-index:2}
#pv.zoomed .pv-top,#pv.zoomed .pv-nav,#pv.zoomed .pv-count{opacity:0;pointer-events:none}
@media (max-width:700px){.pv-nav{display:none!important}.pv-stage{inset:0}#pv-img{max-width:100vw;border-radius:0}}
.push-card{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:var(--side);border:1px solid var(--border)}
.push-card.on{border-color:color-mix(in srgb,var(--live) 50%,transparent)}
.pc-ico{width:44px;height:44px;border-radius:14px;background:var(--deep);display:grid;place-items:center;font-size:22px;flex:none}
.push-card b{font-size:16px}.push-card p{margin:4px 0 10px;color:var(--muted);font-size:14px}.push-card .row{gap:8px}
.pub-card{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:20px;background:var(--side);border:1px solid var(--border)}
.pub-card.on{border-color:color-mix(in srgb,var(--live) 50%,transparent)}
.pub-card b{font-size:16px}.pub-card p{margin:6px 0 10px;color:var(--muted);font-size:14px}.pub-card p b{color:var(--text);font-size:inherit}
.pub-card code{background:var(--deep);padding:2px 8px;border-radius:8px;color:var(--live-text);word-break:break-all}
.pub-card .code-row code{font-size:14px;padding:8px 12px}
.pub-steps{margin:0 0 12px;padding-left:20px;color:var(--muted);font-size:14px}.pub-steps li{margin:3px 0}
.pub-qr{flex:none}.pub-qr .qr{display:block;border-radius:16px;box-shadow:0 8px 24px #0006}
@media (max-width:700px){.pub-card{flex-direction:column}}
#install-bar{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:20px;background:var(--float);border:1px solid var(--border);box-shadow:0 14px 40px #000a;animation:ibIn .4s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes ibIn{from{opacity:0;transform:translateY(30px)}}
#install-bar img{width:44px;height:44px;border-radius:12px;flex:none}#install-bar div{flex:1;min-width:0}#install-bar b{font-size:14px}
#install-bar p{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.35}#install-bar p b{color:var(--text);font-size:inherit}
.ib-x{width:30px;height:30px;border-radius:15px;background:var(--deep);flex:none}
body.has-chan #install-bar{display:none}
#input::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 1.6.1 : boutons fermer, « Mon compte » sur téléphone */
.set-nav-head{display:none}
.dlg-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:18px;background:var(--deep);color:var(--text);display:grid;place-items:center;z-index:5;transition:transform .2s}
.dlg-x:hover{transform:rotate(90deg)}
@media (max-width:700px){
  .set-nav-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px 10px}
  .set-nav-head h2{margin:0;font-family:var(--display);font-size:26px}
  .set-x{width:40px;height:40px;border-radius:20px;border:2px solid var(--btn);display:grid;place-items:center;color:var(--text)}
  .set-me{padding-top:4px}
  .acc-id{flex-direction:column;align-items:flex-start;gap:8px;margin-top:-42px}
  .acc-id>div{padding-bottom:0}.acc-id b{font-size:22px}
  .acc-id .pill-btn{align-self:stretch;text-align:center;justify-content:center;margin-bottom:0}
  .acc-row{flex-wrap:wrap}.acc-row .pill-btn{margin-left:auto}
  .acc-dev{flex-direction:column;align-items:stretch;text-align:center}
  .acc-pass .primary{align-self:stretch}
}

/* ---------- 1.7 : iPhone (appli écran d'accueil) — l'appli se cale entre l'heure et le bas ---------- */
/* La page ne peut plus « glisser » (iOS la décalait vers le haut après le clavier) : tout est fixé à l'écran,
   et la hauteur vient de la vraie zone visible (mesurée par mobile.js), l'encoche est gérée par un retrait. */
html.standalone,html.standalone body{position:fixed;inset:0;overflow:hidden;padding:0!important;margin:0}
html.standalone #app{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100%);padding-top:env(safe-area-inset-top);box-sizing:border-box}
html.standalone #auth{position:fixed;inset:0}
/* écrans plein écran : rien sous l'heure ni sous l'encoche */
.sfull .s-top{padding-top:max(14px,env(safe-area-inset-top))}
.s-bars{top:calc(12px + env(safe-area-inset-top))}
.s-head{top:calc(20px + env(safe-area-inset-top))}
.sfull .s-modal{padding-top:max(20px,env(safe-area-inset-top))}
#scam-rec{top:calc(70px + env(safe-area-inset-top))}
@media (max-width:700px){
  #srv-dlg,#ev-dlg,#settings-dlg{padding-top:env(safe-area-inset-top)!important;padding-bottom:env(safe-area-inset-bottom)!important;box-sizing:border-box}
  #srv-close{top:calc(14px + env(safe-area-inset-top))}
  .dlg-x{top:calc(12px + env(safe-area-inset-top))}
  #results:not([hidden]){padding-top:env(safe-area-inset-top)}
  body.members-open #members{top:calc(56px + env(safe-area-inset-top))!important}
}

/* ---------- 1.7 : côté serveur façon maquette ---------- */
/* salon vocal en carte */
.vcard{margin:4px 6px 8px;border-radius:14px;background:var(--hover2);border:1px solid var(--border);padding:4px;transition:background .2s,border-color .2s}
.vcard.live{background:var(--live-bg);border-color:transparent}
.vcard.on{box-shadow:0 0 0 2px var(--live)}
.vc-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px;border-radius:10px;color:var(--muted);text-align:left;font-size:14px}
.vc-head:hover{background:#ffffff0d}.vc-head b{flex:1;font-weight:700}
.vcard.live .vc-head{color:var(--live-text)}
.vc-dot{width:8px;height:8px;border-radius:4px;background:var(--btn);flex:none}
.vcard.live .vc-dot,.fc-voice .vc-dot{background:var(--live);box-shadow:0 0 0 0 var(--live);animation:livePulse 2s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 6px transparent}}
.vc-n{font:700 12px Figtree,sans-serif;background:var(--live);color:var(--on-live);border-radius:9px;padding:1px 7px}
.vc-list{display:flex;flex-direction:column;gap:2px;padding:0 4px 4px}
.vcard .vmem{padding:4px 6px;border-radius:8px;color:var(--text);font-size:13px}
.vcard .vmem .av{width:24px;height:24px;font-size:10px}
.vcard .vmem.speaking .av{box-shadow:0 0 0 2px var(--live-bg),0 0 0 4px var(--live)}
.vc-join{width:calc(100% - 8px);margin:2px 4px 4px;height:34px;border-radius:10px;background:var(--live);color:var(--on-live);font:700 13px Figtree,sans-serif;transition:filter .15s,transform .1s}
.vc-join:hover{filter:brightness(1.08)}.vc-join:active{transform:scale(.97)}
.vc-join.leave{background:#3A1E22;color:#FF8A8C}
/* prochain événement */
.ev-mini{display:flex;align-items:center;gap:10px;width:calc(100% - 12px);margin:6px 6px 10px;padding:10px;border-radius:14px;background:var(--deep);text-align:left;transition:background .15s}
.ev-mini:hover{background:var(--sel)}
.evm-cal{width:40px;flex:none;border-radius:10px;background:#F4F1FA;color:#14121A;text-align:center;padding:3px 0;line-height:1.1}
.evm-cal small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;color:#C0392B}.evm-cal b{font-family:var(--display);font-size:18px;font-weight:800}
.evm-txt{display:flex;flex-direction:column;min-width:0}.evm-txt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.evm-txt small{font-size:12px;color:var(--muted)}
/* messages : rôle en pastille, plus d'air, système discret */
.rpill{display:inline-block;margin-left:6px;font:700 11px Figtree,sans-serif;padding:1px 7px;border-radius:7px;background:color-mix(in srgb,var(--rc) 18%,transparent);color:var(--rc);vertical-align:1px}
.msg.first{margin-top:14px}
.msg .gut .av{width:40px;height:40px}
.msg.sys{opacity:.85}
.msg.sys .gut .av{width:28px;height:28px;font-size:12px;margin-left:6px}
.msg.sys .who,.msg.sys .mention{display:none}
.msg.sys .when{margin-left:0}
.msg.sys .text{font-size:13.5px;color:var(--muted)}
/* sondages */
.poll{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;max-width:420px}
.poll .pq{font-weight:700;font-size:15px}
.pa{height:40px;padding:0 12px;border-radius:10px;background:var(--bubble);border:0;margin-top:8px;transition:transform .1s}
.pa:not([disabled]):active{transform:scale(.98)}
.pa .bar{background:color-mix(in srgb,#8E6CFF 45%,transparent)!important;border-radius:10px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.pa.on .bar{background:color-mix(in srgb,var(--coral) 45%,transparent)!important}
.pa.win .bar{background:color-mix(in srgb,var(--live) 40%,transparent)!important}
.pa .box{opacity:.7;position:relative}.pa .pt{position:relative;flex:1;font-weight:600}.pa .pc{position:relative;font-weight:700}
.poll .pf{margin-top:10px;font-size:12px;color:var(--muted)}
/* en-tête : description du salon et recherche en pilule */
#chan-topic{color:var(--muted);font-size:13px}
.search-box{display:flex;align-items:center}
#q{border-radius:12px!important;padding:8px 12px 8px 32px!important;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A3B5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center!important}
/* téléphone : bandeau vocal */
#vbanner{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:8px 8px 8px 12px;border-radius:16px;background:var(--live-bg);animation:vbIn .3s cubic-bezier(.2,.9,.3,1.1) both}
#vbanner[hidden]{display:none}
@keyframes vbIn{from{opacity:0;transform:translateY(10px)}}
.vb-faces{display:flex}.vb-faces .av{width:28px;height:28px;font-size:11px;border:2px solid var(--live-bg);margin-left:-8px}.vb-faces .av:first-child{margin-left:0}
.vb-txt{flex:1;min-width:0;font-size:13px;color:var(--live-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-join{height:36px;padding:0 14px;border-radius:18px;background:var(--live);color:var(--on-live);font:700 14px Figtree,sans-serif;flex:none}
/* téléphone : le fil des serveurs */
.feed-icons{display:flex;gap:12px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none;flex:none}
.feed-icons::-webkit-scrollbar{display:none}
.fi-srv{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:60px;flex:none}
.fi-srv .srv-tile{width:56px;height:56px;border-radius:18px;font-size:22px}
.fi-srv small{font-size:11px;color:var(--muted);max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-badge{position:absolute;right:-2px;top:40px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;border:2px solid var(--chat);background:var(--coral);color:var(--on-coral);font:700 11px/16px Figtree,sans-serif}
.feed{display:flex;flex-direction:column;gap:14px;padding:0 14px 90px}
.feed-card{display:block;border-radius:22px;overflow:hidden;background:var(--card);cursor:pointer;transition:transform .12s;flex:none}
.feed-card:active{transform:scale(.985)}
.fc-banner{display:block;height:54px;background:linear-gradient(135deg,var(--srv),color-mix(in srgb,var(--srv) 45%,#14121A));background-size:cover;background-position:center}
.fc-body{padding:0 14px 14px;margin-top:-24px;display:flex;flex-direction:column;gap:12px;position:relative}
.fc-id{display:flex;align-items:flex-end;gap:10px}
.fc-id .srv-tile{width:52px;height:52px;border-radius:16px;font-size:22px;border:3px solid var(--card);box-sizing:content-box;flex:none}
.fc-name{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:2px}.fc-name b{font-size:17px}.fc-name small{font-size:12px;color:var(--muted)}
.fc-new{background:var(--coral);color:var(--on-coral);font-size:12px;font-weight:700;border-radius:10px;padding:2px 8px;margin-bottom:4px;flex:none}
.fc-voice{display:flex;align-items:center;gap:10px;background:var(--live-bg);border-radius:14px;padding:10px 12px}
.fc-voice span{flex:1;min-width:0;display:flex;flex-direction:column}.fc-voice b{font-size:14px}.fc-voice small{font-size:12px;color:var(--live-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-ev{display:flex;gap:12px;align-items:center;background:var(--bubble);border-radius:14px;padding:10px 12px}
.fc-ev span:last-child{display:flex;flex-direction:column}.fc-ev b{font-size:14px}.fc-ev small{font-size:12px;color:var(--muted)}
.fc-last{display:flex;flex-direction:column;gap:4px;font-size:14px}.fc-last div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fc-ch{color:var(--muted)}
/* proposer une partie */
#plan-btn{width:36px;height:36px;display:grid;place-items:center;color:var(--muted);border-radius:18px;flex:none}#plan-btn:hover{color:var(--text);background:var(--hover)}
.plan-form{display:flex;flex-direction:column;gap:10px}
.plan-lbl{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.plan-lbl input{background:var(--deep);border:2px solid transparent;border-radius:14px;padding:12px 14px;color:var(--text);font:600 16px Figtree,sans-serif;text-transform:none;letter-spacing:0;outline:none}
.plan-lbl input:focus{border-color:var(--coral)}
.plan-slots{display:flex;flex-wrap:wrap;gap:8px}
.plan-slot{height:38px;padding:0 14px;border-radius:19px;background:var(--deep);color:var(--text);font-weight:600;border:2px solid transparent;transition:border-color .15s,transform .1s}
.plan-slot.on{border-color:var(--coral);background:var(--sel)}.plan-slot:active{transform:scale(.95)}
.plan-go{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:16px!important;margin-top:4px}
.plan-or{display:flex;align-items:center;gap:10px;margin:14px 4px;color:var(--muted);font-size:12px}.plan-or::before,.plan-or::after{content:"";flex:1;height:1px;background:var(--line)}
.plan-card{width:min(300px,100%);margin-top:6px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.pc-top{display:flex;align-items:center;gap:10px}.pc-top>span:last-child{display:flex;flex-direction:column;min-width:0}
.pc-top small{font-size:12px;color:var(--muted)}.pc-top b{font-size:16px;line-height:1.25}
.pc-ico{width:42px;height:42px;border-radius:13px;background:#F5C04A;color:#14121A;display:grid;place-items:center;flex:none}
.pc-acts{display:flex;gap:8px}
.pc-acts button{flex:1;height:40px;border-radius:12px;font:700 14px Figtree,sans-serif;transition:transform .1s,background .15s}
.pc-acts button:active{transform:scale(.96)}
.pc-yes{background:var(--deep);color:var(--text)}.pc-yes.on,.pc-yes:hover{background:var(--live);color:var(--on-live)}
.pc-no{background:var(--deep);color:var(--text)}.pc-no.on{background:#3A1E22;color:#FF8A8C}
.pc-who{font-size:12px;color:var(--muted)}
.msg.b .plan-card{margin-top:2px}
#chan-chips .chip.voice{display:inline-flex;align-items:center;gap:6px;background:var(--live-bg);color:var(--live-text);font-weight:700}
/* 1.7 : finitions */
#srv-close svg,#close-results svg{display:block}
.size-hints{margin:0 0 4px;font-size:13px;color:var(--muted);background:var(--deep);border-radius:12px;padding:10px 12px}.size-hints b{color:var(--text)}
#crop{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:16px;padding-top:max(16px,env(safe-area-inset-top));background:transparent;border:0;box-shadow:none;place-items:center;box-sizing:border-box}
#crop[open]{display:grid;animation:none!important}#crop::backdrop{background:#000c}#crop[open] .cr-box{animation:dlgPop .25s cubic-bezier(.2,.9,.3,1.1) both}
.cr-box{width:min(560px,100%);background:var(--float);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #000c}
.cr-box header{display:flex;flex-direction:column;gap:2px}.cr-box header b{font-family:var(--display);font-size:19px}.cr-box header small{color:var(--muted)}
.cr-stage{position:relative;height:min(52vh,360px);border-radius:16px;overflow:hidden;background:#08070b;touch-action:none;cursor:grab}
#cr-img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;-webkit-user-drag:none}
.cr-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:14px;box-shadow:0 0 0 9999px #000a;outline:2px solid #fff;pointer-events:none}
.cr-frame.round{border-radius:50%}
.cr-zoom{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}.cr-zoom input{flex:1;accent-color:var(--coral)}
.cr-box menu{display:flex;justify-content:flex-end;gap:8px;margin:0;padding:0}.cr-box menu button{padding:10px 18px;border-radius:12px;background:var(--deep);color:var(--text);font-weight:700}.cr-box menu .primary{background:var(--coral);color:var(--on-coral)}
#mute-btn{display:grid;place-items:center}#mute-btn.muted{color:var(--coral)}#mute-btn[hidden]{display:none}
.mute-sec{margin-bottom:14px}.mute-sec h4{margin:0 4px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.mute-opts{display:flex;flex-wrap:wrap;gap:8px}
.sh-title svg{vertical-align:-3px;margin-right:6px}
#once-btn{display:inline-flex;align-items:center;gap:6px;align-self:center;height:34px;padding:0 12px;border-radius:17px;background:var(--deep);color:var(--muted);font-weight:700;font-size:13px;margin-left:6px;transition:background .15s,color .15s}
#once-btn.on{background:var(--coral);color:var(--on-coral)}
.once-card{display:flex;align-items:center;gap:12px;width:min(260px,100%);padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 30%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--coral) 40%,transparent);text-align:left;color:var(--text);transition:transform .1s}
.once-card:not([disabled]):active{transform:scale(.97)}
.once-card .oc-ico{width:40px;height:40px;border-radius:20px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;flex:none}
.once-card span:last-child{display:flex;flex-direction:column}.once-card small{color:var(--muted);font-size:12px}
.once-card.opened{background:var(--card);border-color:var(--border)}.once-card.opened .oc-ico{background:var(--deep);color:var(--muted)}
.once-card[disabled]{cursor:default}
#pv.once #pv-dl,#pv.once .pv-nav,#pv.once .pv-count{display:none!important}
.draft-tag{color:var(--coral);font-weight:700}
#upd-pwa{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:46;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-radius:18px;background:var(--float);border:1px solid var(--border);box-shadow:0 14px 40px #000a;white-space:nowrap;animation:ibIn .35s cubic-bezier(.2,.9,.3,1.1) both}
#upd-pwa .primary{padding:8px 14px;border-radius:12px}

/* ---------- 1.8 : iPhone, zone d'affichage trop courte (bug iOS) ---------- */
html.ios-gap #rail{position:absolute!important}
html.ios-gap .sfull,html.ios-gap #pv,html.ios-gap #sheet,html.ios-gap #callx,html.ios-gap #install-bar~#sheet{bottom:calc(-1 * var(--gapb))!important;height:auto}
html.ios-gap body.srv-slim.has-chan #servers,html.ios-gap body.srv-slim.has-chan #sidebar,html.ios-gap body.members-open #members,html.ios-gap #results:not([hidden]){bottom:calc(-1 * var(--gapb))!important}
html.ios-gap #toast,html.ios-gap #install-bar,html.ios-gap #upd-pwa,html.ios-gap #voice-panel{translate:0 var(--gapb)}
html.ios-gap #srv-dlg,html.ios-gap #ev-dlg,html.ios-gap #settings-dlg,html.ios-gap #crop{height:var(--apph)!important;max-height:none!important;margin-top:0!important;top:0}
html.ios-gap #sedit,html.ios-gap #scam,html.ios-gap #sview,html.ios-gap #smem{bottom:calc(-1 * var(--gapb))!important}
/* paramètres sur téléphone : une seule marge sous l'heure (elle était appliquée deux fois) */
@media (max-width:700px){#settings-dlg{padding-top:0!important}}
/* ---------- 1.8 : appareil photo, menu + ---------- */
.plus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.plus-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:18px;background:var(--deep);color:var(--text);text-align:left;transition:transform .1s,background .15s}
.plus-tile:hover{background:var(--sel)}.plus-tile:active{transform:scale(.96)}
.plus-tile svg{width:40px;height:40px;padding:8px;box-sizing:border-box;border-radius:13px;background:var(--side);color:var(--coral);margin-bottom:4px}
.plus-tile b{font-size:15px}.plus-tile small{font-size:12px;color:var(--muted)}
.plus-tile.hot{background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 35%,var(--deep)),var(--deep))}
.plus-tile.hot svg{background:var(--coral);color:var(--on-coral)}
#sedit-to{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-end;margin-bottom:6px}
#sedit .s-bottom:has(#sedit-to){flex-wrap:wrap}
.sto-once{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:22px;background:#00000066;color:#fff;font-weight:700;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s}
.sto-once.on{background:var(--coral);color:var(--on-coral)}
.sto-send{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px!important;border-radius:24px!important;font-weight:800;box-shadow:0 8px 24px #FF6B4A55}
.ssend-once{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--deep);font-weight:600;cursor:pointer}
.ssend-once input{margin-left:auto;width:20px;height:20px;accent-color:var(--coral)}
/* ---------- 1.8 : serveurs (catégories, suppression, liste PC, icône sélectionnée) ---------- */
.slim-btn:focus{outline:none}.slim-btn:focus-visible .srv-tile{box-shadow:0 0 0 3px var(--rail),0 0 0 5px var(--text)}
.slim-btn.on .srv-tile{box-shadow:0 0 0 3px var(--rail),0 0 0 5px var(--sc,var(--coral))}
.slim-live{width:20px!important;height:20px!important;right:-4px!important;bottom:-4px!important;top:auto!important;display:grid;place-items:center;color:var(--on-live);border-width:2px!important;box-sizing:content-box}
.slim-live svg{width:12px;height:12px}
.cat18{display:flex;align-items:center;gap:2px;margin:14px 4px 4px;padding:0}
.cat-t{flex:1;display:flex;align-items:center;gap:4px;min-width:0;padding:4px;border-radius:8px;color:var(--muted);font:700 12px Figtree,sans-serif;text-transform:uppercase;letter-spacing:.5px;text-align:left}
.cat-t:hover{color:var(--text)}.cat-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-t svg{transition:transform .2s;flex:none}.cat18.closed .cat-t svg{transform:rotate(-90deg)}
.cat-dot{width:6px;height:6px;border-radius:3px;background:var(--text);margin-left:4px;flex:none}
.cat-b{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--muted);flex:none;opacity:0;transition:opacity .15s}
.cat18:hover .cat-b,.cat-b:focus-visible{opacity:1}@media (hover:none){.cat-b{opacity:1}}
.cat-b:hover{background:var(--hover);color:var(--text)}
.cat-empty{margin:2px 12px;font-size:12px;color:var(--muted)}
.cat-new{display:flex;align-items:center;gap:8px;margin:14px 6px 8px;padding:9px 10px;width:calc(100% - 12px);border-radius:12px;border:1.5px dashed var(--btn);color:var(--muted);font-weight:600;font-size:13px;transition:border-color .15s,color .15s}
.cat-new:hover{border-color:var(--coral);color:var(--text)}
.nc-types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nc-type input{position:absolute;opacity:0}
.nc-type span{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;background:var(--deep);border:2px solid transparent;cursor:pointer;transition:border-color .15s}
.nc-type span svg{color:var(--coral);margin-bottom:4px}.nc-type b{font-size:15px}.nc-type small{font-size:12px;color:var(--muted)}
.nc-type input:checked+span{border-color:var(--coral);background:var(--sel)}
.ch-place{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:8px 0}
.ch-place select{background:var(--deep);color:var(--text);border:0;border-radius:10px;padding:8px 10px;font:inherit}
.ch-move{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase}
.ch-move button{width:34px;height:34px;border-radius:10px;background:var(--deep);color:var(--text);display:grid;place-items:center}
.danger-zone{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;border:1.5px solid #5A2A2E;background:#2A1619}
.danger-zone div{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}.danger-zone b{color:#FF8A8C}.danger-zone small{color:var(--muted)}
.del-dlg{width:min(420px,92vw)}.del-dlg h3{margin:0 0 8px;font-family:var(--display)}.del-dlg p{color:var(--muted);font-size:14px}
.del-dlg input{width:100%;box-sizing:border-box;margin-top:6px;background:var(--deep);border:2px solid transparent;border-radius:12px;padding:10px 12px;color:var(--text);font:16px Figtree,sans-serif;outline:none}.del-dlg input:focus{border-color:#F23F43}
.del-dlg menu{display:flex;justify-content:flex-end;gap:8px;margin:14px 0 0;padding:0}.del-dlg menu button{padding:10px 14px;border-radius:12px;background:var(--deep);color:var(--text);font-weight:700}
.del-dlg .danger-btn{background:#F23F43!important;color:#fff!important}.del-dlg .danger-btn:disabled{opacity:.4}
.feed-page{padding:24px 28px 40px}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;max-width:1200px}
.feed-grid .srv-add-card{min-height:120px}
.feed-grid .feed-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px #0006}
.feed-grid .fc-banner{height:84px}
/* ---------- 1.8 : finitions ---------- */
.ico-btn{display:inline-grid!important;place-items:center;padding:0!important;line-height:0}
.snd button[data-presound]{width:32px;height:32px;border-radius:16px;background:var(--deep);color:var(--text);flex:none}
.snd button[data-presound]:hover{background:var(--coral);color:var(--on-coral)}
.ev-x{display:grid!important;place-items:center;padding:0!important;line-height:0}
#voice-panel button{display:grid;place-items:center;padding:0;line-height:0}
#voice-panel .vp-btns button{height:38px;border-radius:12px}
#voice-panel #vp-leave{width:38px;height:38px;border-radius:19px!important}
.ph-head{display:flex;align-items:center;justify-content:space-between}
.ph-all{display:inline-flex;align-items:center;gap:6px;font-size:12px;text-transform:none;letter-spacing:0}
.photo-grid.six{grid-template-columns:repeat(3,1fr)}
#gallery{position:fixed;inset:0;z-index:94;background:var(--chat);display:flex;flex-direction:column;animation:galIn .25s cubic-bezier(.2,.9,.3,1) both;padding-top:env(safe-area-inset-top)}
#gallery.closing{animation:galOut .22s ease-in both}
@keyframes galIn{from{opacity:0;transform:translateY(30px)}}@keyframes galOut{to{opacity:0;transform:translateY(30px)}}
#gallery header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
#gallery header b{font-family:var(--display);font-size:20px}#gallery header small{color:var(--muted)}
#gallery .pv-btn{background:var(--deep);color:var(--text)}
.gal-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:3px;padding:3px 3px calc(20px + env(safe-area-inset-bottom));align-content:start}
.gal-cell{position:relative;aspect-ratio:1;overflow:hidden;background:var(--deep)}
.gal-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.gal-cell:hover img{transform:scale(1.04)}
.gal-cell small{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 4px #000a}
@media (max-width:700px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
/* panneau de droite (membres / profil) sur écran moyen : carte flottante sous l'en-tête, plus de débordement */
@media (min-width:701px) and (max-width:1100px){
  body.members-open #members{top:64px!important;right:12px!important;bottom:12px!important;border-radius:20px;border:1px solid var(--border);animation:panelIn .26s cubic-bezier(.2,.9,.3,1.05) both}
}
/* ---------- 1.8 : appels réglables, thèmes, filtres ---------- */
#stage-bar{gap:10px}#stage-bar b{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text);min-width:0}
#stage-bar b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stage-toggle{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:15px;background:var(--side);color:var(--text);font-weight:700;font-size:12.5px;flex:none;transition:background .15s}
#stage-toggle:hover{background:var(--sel)}
#stage{transition:height .25s cubic-bezier(.2,.9,.3,1)}
body.stage-resizing #stage{transition:none}body.stage-resizing{cursor:row-resize;user-select:none}
#stage-grip{height:14px;display:grid;place-items:center;background:#000;cursor:row-resize;flex:none;touch-action:none}
#stage-grip[hidden]{display:none}
#stage-grip i{width:44px;height:4px;border-radius:2px;background:#ffffff40;transition:background .15s,width .15s}
#stage-grip:hover i,body.stage-resizing #stage-grip i{background:var(--coral);width:64px}
/* thèmes de conversation */
#chat.themed #view{background:var(--th-bg);background-attachment:local}
#chat.themed .msg.b.mine .bubble{background:var(--th-me);color:var(--th-on)}
#chat.themed .msg.b.mine .bubble a{color:var(--th-on)}
#chat.themed #view .day,#chat.themed #view .b-intro{text-shadow:0 1px 6px #0008}
.theme-btn{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 4px;padding:10px 12px;border-radius:16px;background:var(--deep);color:var(--text);text-align:left;transition:background .15s}
.theme-btn:hover{background:var(--sel)}.theme-btn>span:nth-child(2){flex:1;display:flex;flex-direction:column}.theme-btn small{color:var(--muted);font-size:12px}
.th-sw{width:38px;height:38px;border-radius:12px;position:relative;flex:none;border:1px solid var(--border)}
.th-sw i{position:absolute;right:5px;bottom:5px;width:14px;height:10px;border-radius:6px}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.theme-pick{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);font-size:12px}
.tp-prev{position:relative;width:100%;aspect-ratio:3/4;border-radius:14px;border:2px solid transparent;overflow:hidden;transition:transform .12s,border-color .15s}
.theme-pick:active .tp-prev{transform:scale(.95)}.theme-pick.on .tp-prev{border-color:var(--text)}
.tp-b1,.tp-b2{position:absolute;height:12px;border-radius:7px}.tp-b1{left:8px;top:30%;width:50%;background:#ffffff33}.tp-b2{right:8px;top:52%;width:45%}
.tp-prev em{position:absolute;inset:auto 6px 6px auto;width:24px;height:24px;border-radius:12px;background:var(--text);color:var(--chat);display:grid;place-items:center;font-style:normal}
@media (max-width:420px){.theme-grid{grid-template-columns:repeat(3,1fr)}}
/* filtres de l'appareil photo */
#scam-filters{position:absolute;left:0;right:0;bottom:calc(132px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:10px;padding:0 calc(50% - 30px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
#scam-filters::-webkit-scrollbar{display:none}
.sf{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:60px;scroll-snap-align:center;color:#fff;font:600 11px Figtree,sans-serif;text-shadow:0 1px 4px #000a;opacity:.75;transition:opacity .15s,transform .15s}
.sf i{width:46px;height:46px;border-radius:23px;border:2px solid #fff8;background:conic-gradient(#FF6B4A,#F5C04A,#3FB27F,#4FA3D1,#8E6CFF,#E05A8A,#FF6B4A)}
.sf.on{opacity:1;transform:scale(1.08)}.sf.on i{border-color:#fff;box-shadow:0 0 0 3px #00000055}
#scam .sstage>#scam-filters{position:absolute}
#stage-toggle{color:var(--text)!important;text-decoration:none!important}

/* =====================================================================================
   1.9 — fondations
   ===================================================================================== */
/* ---------- iPhone (appli écran d'accueil) : l'appli prend 100 % de l'écran, sans page « fixée » ---------- */
html.standalone{position:static;inset:auto;height:100%;overflow:hidden;background:var(--rail)}
html.standalone body{position:relative;inset:auto;height:100%;overflow:hidden;margin:0;padding:0!important}
html.standalone #app{position:relative;top:0;left:0;right:0;height:100%;padding-top:env(safe-area-inset-top);box-sizing:border-box}
html.standalone.kb #app{position:fixed;top:var(--vvt,0px);height:var(--vvh,100%)}
html.standalone.ios-gap:not(.kb) #app{height:calc(100% + var(--gapb,0px))}
html.standalone.ios-gap:not(.kb) #rail{position:absolute!important}
/* pas de sélection de texte ni de loupe iOS sur un appui long (sauf dans les champs) */
@media (pointer:coarse){
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  img,a{-webkit-touch-callout:none}
}
.pressing{transform:scale(.97);transition:transform .2s ease;filter:brightness(1.15)}

/* ---------- Barre du bas : Messages · Serveurs · (photo) · Activité · Profil ---------- */
@media (max-width:700px){
  #rail #me{position:relative;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:54px;border-radius:14px;cursor:pointer}
  #rail #me .av{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px transparent;transition:box-shadow .2s}
  #rail #me .me-lbl{display:block;font-size:11px;font-weight:600;color:var(--muted);line-height:1}
  #rail #me.on .av{box-shadow:0 0 0 2px var(--rail),0 0 0 4px var(--strong)}
  #rail #me.on .me-lbl{color:var(--strong);font-weight:800}
  #rail #me > :not(.me-av):not(.me-lbl){display:none}
  #rail #me .me-av{display:grid;place-items:center;pointer-events:none}
}
@media (min-width:701px){ #rail #me .me-lbl{display:none} }
/* changement d'onglet : la page arrive du bon côté */
.tab-in-right{animation:tabInR .32s cubic-bezier(.2,.9,.3,1) both}
.tab-in-left{animation:tabInL .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes tabInR{from{transform:translateX(26%);opacity:0}}
@keyframes tabInL{from{transform:translateX(-26%);opacity:0}}
body.tab-drag{overflow:hidden}

/* ---------- Onglet Profil ---------- */
#ptab{position:fixed;left:0;right:0;top:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:15;background:var(--chat);overflow:hidden;padding-top:env(safe-area-inset-top)}
#ptab[hidden]{display:none}
html.standalone.ios-gap #ptab{bottom:calc(62px + env(safe-area-inset-bottom) - var(--gapb))}
@media (min-width:701px){#ptab{left:76px;bottom:0;max-width:none}#ptab .pt-scroll{max-width:620px;margin:0 auto}}
.pt-scroll{height:100%;overflow-y:auto;padding-bottom:28px;box-sizing:border-box;overscroll-behavior:contain}
.pt-banner{position:relative;height:150px;margin:10px 12px 0;border-radius:24px;background:radial-gradient(circle at 15% 20%,#ffffff2e,transparent 45%),linear-gradient(135deg,var(--pc1),var(--pc2));background-size:cover;background-position:center}
.pt-gear{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:20px;background:#0006;color:#fff;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pt-gear svg{width:20px;height:20px}
.pt-id{display:flex;align-items:flex-end;gap:12px;margin:-46px 24px 0;position:relative}
.pt-av{position:relative;width:96px;height:96px;border-radius:50%;padding:4px;background:var(--chat);flex:none}
.pt-av .av{width:88px!important;height:88px!important;font-size:34px!important}
.pt-av .av .st{display:none}
.pt-av.story{background:conic-gradient(from 200deg,#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A);padding:4px}
.pt-av.story .av{box-shadow:0 0 0 3px var(--chat)}
.pt-av.story.seen{background:var(--btn)}
.pt-plus{position:absolute;right:2px;bottom:2px;width:28px;height:28px;border-radius:14px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;border:3px solid var(--chat)}
.pt-plus svg{width:14px;height:14px;stroke-width:3}
.pt-note{margin-bottom:14px;max-width:calc(100% - 110px);padding:8px 14px;border-radius:18px 18px 18px 4px;background:var(--float);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 18px #0004}
.pt-note.empty{color:var(--muted);font-weight:500}
.pt-names{padding:10px 24px 0}.pt-names h2{margin:0;font:800 26px/1.1 var(--display,inherit)}
.pt-names small{color:var(--muted);font-size:14px}
.pt-about{display:block;margin:10px 24px 0;color:var(--text);font-size:15px;white-space:pre-wrap;text-align:left}
.pt-about.empty{color:var(--muted);font-style:italic}
.pt-btns{display:flex;gap:8px;padding:16px 20px 4px}
.pt-btns .primary{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:14px}
.pt-btns .pill-btn{display:flex;align-items:center;gap:6px;height:44px;border-radius:14px;padding:0 16px}
.pt-sec{padding:18px 16px 0}
.pt-sec h5{margin:0 6px 10px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pt-sec h5 small{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
.pt-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 4px 6px;scroll-snap-type:x proximity}
.pt-row::-webkit-scrollbar{display:none}
.pt-new,.pt-st{flex:none;width:92px;height:150px;border-radius:16px;position:relative;overflow:hidden;scroll-snap-align:start}
.pt-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--deep);border:1.5px dashed var(--btn);color:var(--text)}
.pt-new span{width:44px;height:44px;border-radius:22px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center}
.pt-new small{font-weight:700;font-size:12px}
.pt-st img,.pt-st video{width:100%;height:100%;object-fit:cover;display:block}
.pt-st small{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(transparent,#000c);text-align:left}
.pt-st.aud{box-shadow:inset 0 0 0 3px var(--fc)}
.pt-st.aud::after{content:"";position:absolute;inset:0;border:3px solid var(--fc);border-radius:16px;pointer-events:none}
.pt-sec .pc-hli{flex:none}
.pt-star{color:#3FB27F!important}
.pt-foot{text-align:center;color:var(--muted);font-size:12px;margin:22px 0 0}

/* ---------- Profil d'un pote : feuille qui monte ---------- */
#pfull.sheet19{display:flex;align-items:flex-end;justify-content:center;padding:0;background:rgba(0,0,0,calc(.6 * var(--ps-fade,1)));overflow:hidden;transition:background .25s}
#pfull.sheet19[hidden]{display:none}
#pfull.sheet19 .pfull-box{width:100%;max-width:560px;min-height:0!important;height:auto;max-height:calc(100% - env(safe-area-inset-top) - 28px);overflow-y:auto;border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--border);background:var(--float);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -20px 60px #000a;overscroll-behavior:contain;position:relative}
#pfull.sheet19.ps-open .pfull-box{animation:psUp .38s cubic-bezier(.2,.9,.25,1) both}
#pfull.sheet19.ps-open{animation:psFade .3s ease both}
#pfull.sheet19.ps-out .pfull-box{transition:transform .25s ease-in;transform:translateY(105%)!important}
#pfull.sheet19.ps-out{background:transparent}
@keyframes psUp{from{transform:translateY(100%)}}
@keyframes psFade{from{background:transparent}}
.ps-grab{position:absolute;top:0;left:0;right:0;height:22px;display:flex;justify-content:center;align-items:center;z-index:3;pointer-events:none}
.ps-grab i{width:40px;height:5px;border-radius:3px;background:#fff9;box-shadow:0 1px 4px #0006}
#pfull.sheet19 .pc.full{border-radius:0;box-shadow:none;padding-bottom:18px}
#pfull.sheet19 .pc-banner{border-radius:26px 26px 0 0;height:140px}
#pfull.sheet19 .pc-x{top:14px}

/* ---------- Feuille d'un pote (appui long) ---------- */
.fs-head{display:flex;align-items:center;gap:12px;padding:6px 6px 14px}
.fs-head .av{width:52px;height:52px;font-size:20px}
.fs-head b{font-size:18px;display:block}.fs-head small{color:var(--muted);font-size:13px}
.fs-head > div:not(.av){flex:1;min-width:0}
.fs-head .av{flex:none}
.fs-close-badge{width:30px;height:30px;border-radius:15px;background:#3FB27F;color:#fff;display:grid;place-items:center}
.fs-close-badge svg{width:16px;height:16px}
.fs-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-bottom:14px}
.fs-quick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:18px;background:var(--deep);color:var(--text);font-size:12.5px;font-weight:700;transition:transform .12s,background .15s}
.fs-quick button:active{transform:scale(.95)}
.fs-quick button svg{width:22px;height:22px}
.fs-quick button.on{background:#3FB27F22;color:#3FB27F;box-shadow:inset 0 0 0 1.5px #3FB27F}
.fs-h{margin:4px 8px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.fs-groups{margin-bottom:10px}
.fg-dot{width:14px;height:14px;border-radius:7px;flex:none;margin:0 7px}
.fs-g b{flex:1}.fs-g small{margin:0!important}
.fs-chk{width:24px;height:24px;border-radius:12px;border:2px solid var(--btn);display:grid;place-items:center;color:transparent;flex:none;transition:all .15s}
.fs-g.on .fs-chk{background:var(--coral);border-color:var(--coral);color:var(--on-coral)}
.fs-chk svg{width:14px;height:14px;stroke-width:3}

/* ---------- Créer / modifier une catégorie d'amis ---------- */
#sheet.sh-tall .sh-panel{height:85dvh;display:flex;flex-direction:column}
#sheet.sh-tall .sh-body{flex:1;min-height:0;display:flex;flex-direction:column}
@media (min-width:701px){#sheet.sh-tall .sh-panel{height:min(640px,85dvh);width:440px}}
.fg-edit{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.fg-edit .sh-title{display:flex;align-items:center;gap:8px;margin-bottom:0}.fg-edit .sh-title svg{color:#3FB27F}
.fg-hint{margin:0 4px}
#fg-name{height:46px;border-radius:14px;background:var(--deep);border:1.5px solid transparent;color:var(--text);padding:0 14px;font-size:16px}
#fg-name:focus{border-color:var(--coral);outline:none}
.fg-colors{display:flex;gap:10px;flex-wrap:wrap;padding:0 2px}
.fg-c{width:30px;height:30px;border-radius:15px;transition:transform .15s,box-shadow .15s}
.fg-c.on{box-shadow:0 0 0 3px var(--float),0 0 0 5px var(--text);transform:scale(1.05)}
.fg-search,.fr-search,.fsr-box{display:flex;align-items:center;gap:8px;height:44px;border-radius:14px;background:var(--deep);padding:0 12px;color:var(--muted)}
.fg-search input,.fr-search input,.fsr-box input{flex:1;min-width:0;background:none;border:0;color:var(--text);font-size:16px;outline:none}
.fg-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.fg-pick{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;cursor:pointer}
.fg-pick:hover{background:var(--hover)}
.fg-pick[hidden]{display:none}
.fg-pick .av{width:40px;height:40px}
.fg-pick span{flex:1;font-weight:600}
.fg-pick input{position:absolute;opacity:0;pointer-events:none}
.fg-pick i{width:26px;height:26px;border-radius:13px;border:2px solid var(--btn);display:grid;place-items:center;color:transparent;transition:all .15s}
.fg-pick i svg{width:15px;height:15px;stroke-width:3}
.fg-pick input:checked ~ i{background:var(--coral);border-color:var(--coral);color:var(--on-coral)}
.fg-foot{display:flex;gap:8px;padding-top:4px}
.fg-foot .primary{flex:1;height:48px;border-radius:16px;font-size:16px}
.danger-pill{color:#FF7A7C!important;display:flex;align-items:center;gap:6px}
/* Paramètres → Catégories d'amis */
.fg-cards{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.fg-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--deep);color:var(--text);text-align:left;transition:background .15s}
.fg-card:hover{background:var(--sel)}
.fg-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--fc,var(--coral)) 22%,transparent);color:var(--fc,var(--coral));flex:none}
.fg-card.add .fg-ic{background:var(--side);color:var(--text)}
.fg-card.add{border:1.5px dashed var(--btn);background:none}
.fg-tx{flex:1;min-width:0}.fg-tx b{display:block}.fg-tx small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-av{display:flex}.fg-av .av{width:26px;height:26px;font-size:10px;margin-left:-8px;box-shadow:0 0 0 2px var(--deep)}
.fg-card > svg{color:var(--muted);flex:none}

/* ---------- Page « Tes potes » ---------- */
.f19 .fr-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 16px 4px;margin:0;flex-wrap:nowrap;border:0}
.f19 .fr-tabs::-webkit-scrollbar,.friends .fr-tabs::-webkit-scrollbar{display:none}
.friends .fr-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.fr-tabs button{flex:none;height:34px;padding:0 14px;border-radius:17px;background:var(--deep);color:var(--muted);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.fr-tabs button[style]{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fc) 45%,transparent)}
.fr-tabs button.on{background:var(--strong);color:var(--chat)}
.fr-tabs button[style].on{background:var(--fc);color:#fff;box-shadow:none}
.fr-tabs button.add{background:var(--coral);color:var(--on-coral)}
.fr-tabs button.add svg{width:15px;height:15px}
.fr-newg{width:34px;padding:0!important;justify-content:center}
.f19 .fr-search{margin:10px 16px 2px}
.fr-ghead{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--fc) 16%,transparent)}
.fr-ghead > span{color:var(--fc);display:grid}.fr-ghead b{flex:1;font-size:16px}
.fr-ghead .pill-btn{display:flex;align-items:center;gap:6px}
.f19 .frow{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 8px;border-radius:16px;cursor:pointer;transition:background .12s,transform .2s}
.f19 .frow:hover{background:var(--hover)}
.f19 .frow[hidden]{display:none}
.fr-av{position:relative;flex:none}
.fr-star{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:9px;background:#3FB27F;color:#fff;display:grid;place-items:center;border:2px solid var(--chat)}
.fr-star svg{width:10px;height:10px}
.fr-star.in{position:static;display:inline-grid;vertical-align:-3px;border:0;margin-left:2px}
.f19 .frow .grow b{display:block}.f19 .frow .grow small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.fr-tags i{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:9px;background:color-mix(in srgb,var(--fc) 20%,transparent);color:var(--fc)}
.fr-btn{width:38px;height:38px;border-radius:19px;background:var(--deep)!important;display:grid;place-items:center;color:var(--text)}
.fr-none{text-align:center;color:var(--muted);margin:24px}

/* ---------- Loupe : retrouver un pote ---------- */
.finder{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.fsr-box{height:48px;border-radius:16px;color:var(--text)}
.fsr-res{flex:1;min-height:0;overflow-y:auto;margin:0 -6px;padding:0 6px 10px}
.fsr-res h5{margin:14px 6px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.fsr-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:16px;color:var(--text);text-align:left;transition:background .12s}
.fsr-row:hover,.fsr-row:active{background:var(--hover)}
.fsr-row .av,.fsr-row .stack{width:44px;height:44px;flex:none}
.fsr-row > svg{color:var(--muted);flex:none}
.fsr-tx{flex:1;min-width:0}.fsr-tx b{display:block}.fsr-tx small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsr-srv{width:44px!important;height:44px!important;border-radius:14px!important;font-size:14px!important;flex:none}
.fsr-chips{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:2px 6px 4px}
.fsr-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;flex:none;color:var(--text);font-size:12px;font-weight:600}
.fsr-chip .av{width:56px;height:56px;font-size:20px}
.fsr-chip span{max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsr-new{margin-top:10px;background:var(--deep)}
.fsr-empty{text-align:center;color:var(--muted);padding:28px 10px;line-height:1.6}
.fsr-empty .pill-btn{margin-top:12px;display:inline-flex;align-items:center;gap:6px}

/* ---------- Colonne des serveurs : couleurs du thème, bien centrée ---------- */
.slim-btn.add{color:var(--muted)}
.slim-btn.add:hover{background:var(--coral);color:var(--on-coral)}
.slim-btn.home{color:var(--text)}
.slim-btn.on .srv-tile{box-shadow:0 0 0 2.5px var(--rail),0 0 0 4.5px var(--sc,var(--coral))}
@media (max-width:700px){
  body.srv-slim.has-chan #servers{width:76px!important}
  body.srv-slim.has-chan #sidebar{left:76px}
  body.srv-slim.has-chan .slim-col{width:76px;align-items:center;padding-left:0;padding-right:0;gap:10px}
  body.srv-slim.has-chan .slim-btn{width:56px;height:56px}
  body.srv-slim.has-chan .slim-btn .srv-tile,body.srv-slim.has-chan .slim-btn.home,body.srv-slim.has-chan .slim-btn.add{width:46px;height:46px}
  body.srv-slim.has-chan .slim-btn .slim-pill{left:-10px}
  .slim-sep{width:28px}
}

/* ---------- Catégories de salons : petites, avec une flèche ---------- */
.cat18{margin:16px 2px 2px!important}
.cat18 .cat-t{font-size:11.5px!important;letter-spacing:.6px;padding:3px 4px;gap:3px}
.cat18 .cat-t svg{width:11px;height:11px;opacity:.8}
.cat18.empty .cat-t{opacity:.55}
.cat18 .cat-b{width:24px;height:24px}
.cat18 .cat-b svg{width:14px;height:14px}
@media (max-width:700px){ .cat18 .cat-t{font-size:11.5px!important} }
.cat-tools{display:flex;gap:8px;margin:16px 6px 8px}
.cat-tools .cat-new{margin:0;flex:1;justify-content:center;padding:8px 10px}

/* ---------- Paramètres : la croix bien centrée ---------- */
.set-x,.set-close svg,.pc-x,.dlg-x{line-height:0}
.set-x{display:grid!important;place-items:center;padding:0!important}
.set-x svg{display:block;width:20px;height:20px;margin:0}
.set-close{align-items:center;justify-content:center}
.set-close svg{display:block}

/* ---------- Stories : chargement doux ---------- */
#sview.s-loading #sview-media img.s-main,#sview.s-loading #sview-media video{opacity:0}
#sview-media img.s-main,#sview-media video{transition:opacity .25s ease}
#sview.s-loading #sview-stage::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid #fff3;border-top-color:#fff;animation:spin .8s linear infinite;z-index:3}
@keyframes spin{to{transform:rotate(360deg)}}
.dispo .ring.close{border-color:#3FB27F!important;background:none}
.sedit-aud{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:22px;background:#0007;color:#fff;font-weight:700;font-size:13.5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;max-width:46vw}
.sedit-aud span{overflow:hidden;text-overflow:ellipsis}
.sedit-aud.on{background:var(--fc);color:#fff}
.sedit-aud svg{flex:none;width:16px;height:16px}
.aud-pick{display:flex;flex-direction:column;gap:8px;width:min(380px,92vw);background:var(--float);color:var(--text);border-radius:24px;padding:18px}
.aud-pick h3{margin:0 4px 6px}
.aud-opt{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:var(--deep);text-align:left;color:var(--text)}
.aud-opt b{display:block}.aud-opt small{color:var(--muted);font-size:12.5px}.aud-opt > span:nth-child(2){flex:1}
.aud-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--fc) 22%,transparent);color:var(--fc)}
.aud-opt i{width:24px;height:24px;border-radius:12px;border:2px solid var(--btn);display:grid;place-items:center;color:transparent}
.aud-opt.on{box-shadow:inset 0 0 0 2px var(--fc)}.aud-opt.on i{background:var(--fc);border-color:var(--fc);color:#fff}
.aud-opt i svg{width:13px;height:13px;stroke-width:3}
.aud-new{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;color:var(--muted);font-weight:700}

/* ---------- Paramètres → écran du téléphone ---------- */
.scr-set{display:flex;flex-direction:column;gap:8px}
.scr-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--deep);cursor:pointer}
.scr-opt input{accent-color:var(--coral);width:20px;height:20px}
.scr-opt b{display:block}.scr-opt small{color:var(--muted);font-size:13px}
.scr-diag summary{cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;padding:8px 4px}
.scr-diag pre{white-space:pre-wrap;font-size:12px;background:var(--deep);border-radius:12px;padding:10px;margin:4px 0 0;-webkit-user-select:text;user-select:text}

/* =====================================================================================
   2.0 — profils Insta, appareil photo, envoi, conversations
   ===================================================================================== */
/* ---------- Silhouette (pas de photo) ---------- */
.av.nopic{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--avc) 55%,#fff) 0,var(--avc) 55%,color-mix(in srgb,var(--avc) 70%,#000) 100%)!important;overflow:visible}
.av.nopic .sil{width:100%;height:100%;border-radius:50%;fill:#ffffffe6;display:block;clip-path:circle(50% at 50% 50%)}
.av.nopic .sil circle{fill:#fff}
.sp-card > .sil{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#8E6CFF,#FF6B4A);fill:#fff}

/* ---------- iPhone : l'appli commence sous l'heure (barre d'état normale) ---------- */
html.standalone{background:var(--chat)}

/* ---------- En-tête d'un salon : titre à gauche, boutons à droite ---------- */
#chat-head #chan-title{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mem-btn[hidden]{display:none!important}
@media (min-width:701px){#mem-btn{display:none!important}}
.mem-n{font:600 14px Figtree,sans-serif;color:var(--muted);margin-left:4px}
.sh-title svg{vertical-align:-4px;margin-right:4px}
.mem-sheet{flex:1;min-height:0;overflow-y:auto;margin:0 -6px;padding:0 6px}
.mem-sheet h4{margin:14px 6px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.mem-sheet .member,.mem-sheet [data-user].mem{border-radius:14px}

/* ---------- Vignette de serveur : fin contour blanc (plus de vert) ---------- */
.slim-btn.on .srv-tile{box-shadow:0 0 0 2px var(--rail),0 0 0 3.5px var(--text)!important}
.srv-tile{box-shadow:inset 0 0 0 1px #ffffff14}

/* ---------- Profil Insta ---------- */
.igp{padding:6px 18px 24px}
#pfull.ig .pfull-box{background:var(--chat)}
#pfull.ig .igp{padding-top:30px}
.igp-x{position:absolute!important;top:12px!important;right:12px!important;z-index:4;background:var(--deep)!important;color:var(--text)!important}
.igp-top{display:flex;align-items:center;gap:18px}
.igp-av{width:92px;height:92px;border-radius:50%;padding:3px;flex:none;background:transparent;position:relative}
.igp-av .av{width:86px!important;height:86px!important;font-size:32px!important;box-shadow:0 0 0 3px var(--chat)}
.igp-av .av .st{display:none}
.igp-av.story{background:conic-gradient(from 200deg,#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A)}
.igp-av.story.seen{background:var(--btn)}
.igp-stats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.igp-stats b{display:block;font:800 19px/1.2 var(--display,inherit)}
.igp-stats small{color:var(--muted);font-size:12.5px}
.ig-note{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:12px 0 0;padding:6px 12px 6px 6px;border-radius:18px 18px 18px 6px;background:var(--float);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600;text-align:left;box-shadow:0 6px 18px #0003}
.ig-note.empty{color:var(--muted);font-weight:500;padding-left:12px}
.ig-note .ign-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ign-ph{width:34px;height:34px;border-radius:10px;overflow:hidden;flex:none}
.ign-ph img,.ign-ph video,.note-ph img,.note-ph video{width:100%;height:100%;object-fit:cover;display:block}
.igp-name{margin-top:10px}.igp-name h2{margin:0;font:800 20px/1.2 var(--display,inherit)}
.igp-name small{color:var(--muted)}
.igp-bio{margin:6px 0 0;white-space:pre-wrap;font-size:14.5px;line-height:1.45}
.igp-btns{display:flex;gap:8px;margin-top:14px}
.igp-btns > *{flex:1;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700}
.igp-btns .pill-btn{background:var(--deep)}
.igp-btns .on-close{color:#3FB27F;box-shadow:inset 0 0 0 1.5px #3FB27F}
.igp-hl{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:18px -18px 0;padding:0 18px}
.igp-hl::-webkit-scrollbar{display:none}
.igp-hli{display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;flex:none;color:var(--text);font-size:12px;position:relative}
.igp-hli > :first-child{width:64px;height:64px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--chat),0 0 0 3.5px var(--btn)}
.igp-hli span{max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igp-tabs{display:flex;justify-content:center;margin:18px -18px 2px;border-top:1px solid var(--border)}
.igp-tabs span{padding:10px 30px;border-top:2px solid var(--text);margin-top:-1px;color:var(--text);display:grid}
.igp-grid{margin:0 -18px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-cell{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--deep)}
.ig-cell img,.ig-cell video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ig-cell:active img{transform:scale(.96)}
.ig-cell.add{display:grid;place-items:center;color:var(--muted);border:1.5px dashed var(--btn);background:none}
.ig-vid{position:absolute;top:6px;right:6px;color:#fff;filter:drop-shadow(0 1px 3px #000a)}
.ig-aud{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:11px;background:var(--fc);color:#fff;display:grid;place-items:center}
.ig-aud svg{width:12px;height:12px}
.igp-hli .ig-aud{top:0;left:auto;right:0}
.ig-grid.loading .sk{aspect-ratio:4/5}
.sk{display:block;background:linear-gradient(100deg,var(--deep) 30%,var(--sel) 50%,var(--deep) 70%);background-size:300% 100%;animation:sk 1.2s linear infinite;border-radius:6px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
.ig-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:36px 30px;color:var(--muted);width:100%}
.ig-empty svg{width:40px;height:40px;padding:14px;border-radius:50%;border:2px solid var(--btn);color:var(--text);box-sizing:content-box}
.ig-empty b{color:var(--text);font-size:16px}.ig-empty p{margin:0;font-size:13.5px}
.ig-empty.add{border-radius:18px}
/* onglet Profil */
.pt-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;padding:10px 12px 8px 20px;background:color-mix(in srgb,var(--chat) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pt-bar b{font:800 22px var(--display,inherit)}
.pt-ic{width:40px;height:40px;border-radius:20px;display:grid;place-items:center;color:var(--text)}
.pt-ic:active{background:var(--hover)}
.pt-banner.mini{height:64px;margin:0 12px;border-radius:18px;opacity:.85}
#ptab .igp{margin-top:-34px}
#ptab .igp-av .av{box-shadow:0 0 0 4px var(--chat)}
#ptab .pt-sec{padding:16px 2px 0}
/* ---------- Visionneuse de publication ---------- */
#postv{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center}
#postv[hidden]{display:none}
#postv.in{animation:psFade .25s ease both}#postv.in .pv-in{animation:pvIn .32s cubic-bezier(.2,.9,.3,1) both}
#postv.out{opacity:0;transition:opacity .2s}
@keyframes pvIn{from{transform:translateY(40px) scale(.97);opacity:0}}
.pv-in{width:100%;max-width:560px;flex:1;min-height:0;overflow-y:auto;padding-top:env(safe-area-inset-top);background:var(--chat);color:var(--text)}
@media (min-width:701px){#postv{justify-content:center;padding:30px}.pv-in{max-height:calc(100vh - 120px);border-radius:24px;flex:none}}
.pv-head{display:flex;align-items:center;gap:10px;padding:10px 12px;position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--chat) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pv-head .av{width:36px;height:36px;cursor:pointer}
.pv-who{flex:1;min-width:0}.pv-who b{display:block}.pv-who small{color:var(--muted);font-size:12.5px}
.pv-back,.pv-more{width:40px;height:40px;border-radius:20px;display:grid;place-items:center;color:var(--text)}
.pv-frame{position:relative;width:100%;max-height:72vh;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pv-frame img,.pv-frame video{width:100%;height:100%;object-fit:contain;display:block;max-height:72vh}
.pv-stk{position:absolute;inset:0;pointer-events:none}
.pv-snd{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:17px;background:#0008;color:#fff;display:grid;place-items:center}
.pv-snd svg{width:16px;height:16px}
.pv-burst{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;color:#fff;pointer-events:none;animation:pvBurst .85s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 6px 20px #0008)}
.pv-burst svg{width:100%;height:100%}
@keyframes pvBurst{0%{transform:scale(0);opacity:0}25%{transform:scale(1.15);opacity:1}55%{transform:scale(.95)}100%{transform:scale(1.1) translateY(-30px);opacity:0}}
.pv-acts{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:8px 8px 0}
.pv-acts > button:not(.pv-count){width:44px;height:44px;display:grid;place-items:center;color:var(--text);border-radius:22px;transition:transform .15s}
.pv-acts > button:active{transform:scale(.85)}
.pv-like.on{color:#FF3B5C!important;animation:likeBump .45s cubic-bezier(.2,1.6,.4,1)}
.pv-count{flex-basis:100%;text-align:left;font-size:14px;color:var(--text);padding:2px 8px 0}.pv-count small{color:var(--muted)}
.pv-cap{padding:4px 16px}.pv-cap p{margin:4px 0;white-space:pre-wrap}
.pv-coms{padding:2px 12px 90px}
.pv-c{display:flex;gap:10px;padding:8px 4px}
.pv-c .av{width:32px;height:32px}
.pv-c p{margin:0;flex:1;font-size:14.5px}.pv-c small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pv-c .link{font-size:12px;color:var(--muted)}
.pv-none{color:var(--muted);text-align:center;margin:16px;font-size:14px}
.pv-form{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:560px;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--chat);border-top:1px solid var(--border);box-sizing:border-box;z-index:3}
.pv-form[hidden]{display:none}
.pv-form input{flex:1;height:44px;border-radius:22px;background:var(--deep);border:0;padding:0 16px;color:var(--text);font-size:16px}
.pv-form.reply input{box-shadow:inset 0 0 0 1.5px var(--coral)}
.pv-post{width:44px;height:44px;border-radius:22px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center}
.pv-post svg{width:20px;height:20px}
/* activité : vignette */
.ai-thumb{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none}
.ai-thumb img,.ai-thumb video{width:100%;height:100%;object-fit:cover}
/* public */
.sh-sub{margin:-6px 4px 12px}
.aud-list{display:flex;flex-direction:column;gap:8px}
/* partager son profil */
.share-p{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-bottom:6px}
.sp-card{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 18px;border-radius:26px;background:radial-gradient(circle at 15% 20%,#ffffff2e,transparent 45%),linear-gradient(135deg,var(--pc1,#8E6CFF),var(--pc2,#FF6B4A));background-size:cover;color:#fff;box-shadow:0 18px 40px #0006}
.sp-card .av{width:72px;height:72px;box-shadow:0 0 0 4px #fff}
.sp-card b{font:800 22px var(--display,inherit);text-shadow:0 2px 10px #0006}
.sp-card small{opacity:.9;font-weight:600}
.sp-qr{padding:6px;background:#fff;border-radius:20px}
.sp-btns{display:flex;gap:8px;width:100%;max-width:320px}
.sp-btns > *{flex:1;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:6px}

/* ---------- Appareil photo ---------- */
.cam-tools{position:absolute;right:12px;top:calc(76px + env(safe-area-inset-top));z-index:6;display:flex;flex-direction:column;gap:10px}
.ct{width:44px;height:44px;border-radius:22px;background:#0006;color:#fff;display:grid;place-items:center;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s,transform .15s}
.ct:active{transform:scale(.9)}
.ct.on{background:#fff;color:#14121A}
.ct small{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:18px;padding:0 4px;border-radius:9px;background:var(--coral);color:var(--on-coral);font:800 10px/18px Figtree,sans-serif}
.ct small:empty{display:none}
.cam-round{width:52px;height:52px;border-radius:26px;background:#ffffff2b;color:#fff;display:grid;place-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid #ffffff55;transition:transform .2s}
.cam-round:active{transform:scale(.9)}
.cam-round.spin svg{animation:camSpin .5s cubic-bezier(.3,.9,.3,1)}
@keyframes camSpin{from{transform:rotate(-180deg)}}
#scam .s-bottom.cam{align-items:center!important}
#scam .cam-side{width:52px}
#scam .gal{display:none!important}
#scam-freeze{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.8);transform:scale(1.08);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1}
#scam-freeze.on{opacity:1;transition:none}
#scam-v{transition:opacity .2s}
#scam-count{position:absolute;inset:0;display:grid;place-items:center;z-index:7;font:900 130px var(--display,inherit);color:#fff;text-shadow:0 6px 30px #000a;pointer-events:none}
#scam-count.pop{animation:cntPop 1s ease both}
@keyframes cntPop{0%{transform:scale(1.6);opacity:0}20%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.7);opacity:0}}
#scam-sflash{position:absolute;inset:0;background:#fff;z-index:8}
#scam-sflash[hidden]{display:none}
/* filtres : cachés tant qu'on n'a pas touché la baguette ; jamais coupés, défilement horizontal seulement */
#scam-filters{opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1);padding-top:8px!important;padding-bottom:8px!important;overflow-y:hidden!important;touch-action:pan-x;overscroll-behavior-x:contain}
#scam.show-fx #scam-filters{opacity:1;pointer-events:auto;transform:none}
.sf i{width:50px!important;height:50px!important;border-radius:16px!important;border:2px solid #fff6!important;overflow:hidden;background:linear-gradient(180deg,#7ec8ff 0%,#ffd28a 55%,#3f8f5a 56%,#2d6b43 100%)!important;position:relative}
.sf i b{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff3b0;top:9px;right:9px;box-shadow:0 0 10px #fff8}
.sf.on i{border-color:#fff!important;box-shadow:0 0 0 2px var(--coral)}
.sf{opacity:.85!important}.sf.on{opacity:1!important}

/* ---------- Souvenirs : onglets ---------- */
.mtabs{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--deep)}
.mtabs button{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:12px;color:var(--muted);font-weight:700;font-size:14px}
.mtabs button svg{width:18px;height:18px}
.mtabs button.on{background:var(--float);color:var(--text);box-shadow:0 2px 8px #0003}
.mphone-pick{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;margin:6px;border-radius:20px;border:1.5px dashed var(--btn);color:var(--text);text-align:center;cursor:pointer}
.mphone-pick svg{width:34px;height:34px;color:var(--coral)}
.mphone-pick small{color:var(--muted)}

/* ---------- Éditeur ---------- */
#sedit .s-top{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.gif-ic{font:900 12px/1 Figtree,sans-serif;letter-spacing:.5px;border:2px solid currentColor;border-radius:6px;padding:3px 4px}
.s-go{display:flex;align-items:center;gap:6px;height:50px;padding:0 20px 0 24px;border-radius:25px;font-size:16px;font-weight:800;box-shadow:0 8px 24px #0006}
.s-go[hidden]{display:none}
#sedit-share[hidden],#sedit-send[hidden],#sedit-aud[hidden]{display:none!important}
.s-sound{width:36px!important;height:36px!important;bottom:110px!important}
.s-sound svg{width:18px;height:18px}
.tsty{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.tsb{flex:none;height:34px;padding:0 12px;border-radius:17px;background:#ffffff1a;color:#fff;font-size:14px}
.tsb.on{background:#fff;color:#14121A}
/* styles de texte */
.sty-neon{color:#fff!important;text-shadow:0 0 6px #ff4fd8,0 0 14px #ff4fd8,0 0 28px #b14bff;font-weight:800;background:none!important}
.sty-type{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace!important;font-weight:600;letter-spacing:.5px}
.sty-box{background:#fff!important;color:#14121A!important;padding:6px 12px!important;border-radius:10px;font-weight:800;box-shadow:0 4px 14px #0005}
.sty-strong{font-family:var(--display,inherit)!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.5px;-webkit-text-stroke:1px #0004}
.sty-classic{font-weight:700}
.stk.lbl{font-size:24px;padding:6px 14px;border-radius:12px;white-space:nowrap;color:#fff;text-shadow:0 2px 8px #0008;font-weight:800}
.stk.lbl.sty-classic{background:#0006}
.stk.gif{pointer-events:auto}
.stk.gif img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
.lbl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
.stk-prev{height:54px;border-radius:14px;background:#ffffff14;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;white-space:nowrap}
.stk-prev.on{outline:2px solid var(--coral);outline-offset:2px}
.plc-row{display:flex;gap:8px}.plc-row input{flex:1;min-width:0;height:44px;border-radius:12px;border:0;background:var(--deep);color:var(--text);padding:0 12px;font-size:16px}
.plc-row .pill-btn{display:flex;align-items:center;gap:4px;white-space:nowrap}
.lbl-pick h3{display:flex;align-items:center;gap:8px;margin:0 0 6px}

/* ---------- La feuille « Envoyer » ---------- */
.snd{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;width:100%;overflow-y:auto;margin:0 -4px;padding:0 4px 4px;box-sizing:content-box}
.snd > *{width:100%;box-sizing:border-box}
.snd-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.snd-dest{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:18px;background:var(--deep);color:var(--text);text-align:center;transition:transform .12s,box-shadow .15s}
.snd-dest:active{transform:scale(.95)}
.snd-dest b{font-size:14px}.snd-dest small{color:var(--muted);font-size:11px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff}
.sd-ic.story{background:conic-gradient(from 200deg,#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A)}
.sd-ic.note{background:linear-gradient(135deg,#4FA3D1,#8E6CFF)}
.sd-ic.post{background:linear-gradient(135deg,#3FB27F,#4FA3D1)}
.sd-chk{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:11px;border:2px solid var(--btn);display:grid;place-items:center;color:transparent;transition:all .15s}
.sd-chk svg{width:12px;height:12px;stroke-width:3.5}
.snd-dest.on{box-shadow:inset 0 0 0 2px var(--coral)}
.snd-dest.on .sd-chk{background:var(--coral);border-color:var(--coral);color:var(--on-coral)}
.snd-extra{display:flex;flex-direction:column;gap:8px}
.snd-extra:empty{display:none}
.snd-in{width:100%;box-sizing:border-box;border-radius:14px;background:var(--deep);border:0;color:var(--text);padding:12px 14px;font-size:16px;resize:none;font-family:inherit}
.snd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.snd-chip{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:color-mix(in srgb,var(--fc) 20%,transparent);color:var(--text);font-weight:700;font-size:13px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fc) 60%,transparent)}
.snd-chip svg{width:15px;height:15px}
.snd-audp{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.snd-ap{flex:none;height:34px;padding:0 12px;border-radius:17px;background:var(--deep);color:var(--text);font-weight:700;font-size:13px}
.snd-ap.on{background:var(--fc);color:#fff}
.snd-tog{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text);padding:6px 10px;border-radius:12px;background:var(--deep)}
.snd-tog input{accent-color:var(--coral);width:18px;height:18px}
.snd-tog.once{align-self:flex-start}
.snd-q{flex:none}
.snd-people{flex:none}
.snd-people h5{margin:12px 2px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.snd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px}
.snd-p{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);font-size:12px;font-weight:600;min-width:0}
.snd-p > span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-av{position:relative;width:60px;height:60px;display:grid;place-items:center}
.snd-av .av,.snd-av .stack{width:58px!important;height:58px!important;font-size:22px;transition:transform .15s}
.snd-av i{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:11px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;border:2.5px solid var(--float);transform:scale(0);transition:transform .2s cubic-bezier(.2,1.5,.4,1)}
.snd-av i svg{width:12px;height:12px;stroke-width:3.5}
.snd-p.on .snd-av i{transform:scale(1)}
.snd-p.on .snd-av .av{transform:scale(.92)}
.snd-foot{flex:none;padding-top:4px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--float) 30%)}
.snd-go{width:100%;height:52px;border-radius:18px;font-size:16px;font-weight:800}
.snd-go:disabled{opacity:.5}

/* ---------- GIF ---------- */
.gifp{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.gifp-top{display:flex;flex-direction:column;gap:8px}
.gifp-tabs{display:flex;gap:6px}
.gifp-tabs button{height:34px;padding:0 16px;border-radius:17px;background:var(--deep);color:var(--muted);font-weight:800}
.gifp-tabs button.on{background:var(--strong);color:var(--chat)}
.gifp-grid{flex:1;min-height:0;overflow-y:auto;columns:3 110px;column-gap:6px}
.gifp-grid .sk{height:120px;margin-bottom:6px;break-inside:avoid}
.gif-cell{display:block;width:100%;margin-bottom:6px;border-radius:12px;overflow:hidden;background:var(--deep);break-inside:avoid}
.gif-cell img{width:100%;height:100%;object-fit:cover;display:block}
.gifp-by{text-align:center;color:var(--muted);font-size:11px;margin:0}
.gif-off{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px}
.gif-off .gif-ic{font-size:20px;padding:6px 8px;color:var(--coral)}
#gif-btn{width:36px;height:36px;border-radius:18px;display:grid;place-items:center;color:var(--muted);flex:none}
#gif-btn .gif-ic{font-size:10px;border-width:1.8px;padding:2px 3px}
.giphy-form{display:flex;flex-direction:column;gap:8px}
.giphy-form .plc-row input{background:var(--input)}
/* note en photo */
.dispo .note.has-ph{display:flex;align-items:center;gap:4px;padding:3px 6px 3px 3px;top:-30px}
.note-ph{width:22px;height:22px;border-radius:7px;overflow:hidden;flex:none}

/* ---------- Conversations : appui long « soulevé » ---------- */
#mfocus{position:fixed;inset:0;z-index:85}
#mfocus[hidden]{display:none}
.mf-back{position:absolute;inset:0;background:rgba(10,8,16,.45);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);opacity:0;transition:opacity .2s}
#mfocus.in .mf-back{opacity:1}
.mf-wrap{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100vw - 16px)}
.mf-wrap.right{align-items:flex-end}
.mf-react{display:flex;gap:2px;padding:6px;border-radius:30px;background:var(--float);box-shadow:0 12px 40px #0008;transform:scale(.6) translateY(20px);opacity:0;transform-origin:bottom left;transition:transform .28s cubic-bezier(.2,1.4,.4,1),opacity .18s}
.mf-wrap.right .mf-react{transform-origin:bottom right}
.mf-react:empty{display:none}
.mf-react button{width:42px;height:42px;border-radius:21px;font-size:26px;display:grid;place-items:center;transition:transform .15s}
.mf-react button:active{transform:scale(1.35)}
.mf-react button.on{background:var(--sel)}
.mf-react .mf-more{color:var(--muted);background:var(--deep)}
.mf-msg{transform:scale(.97);transition:transform .25s cubic-bezier(.2,1.3,.4,1);pointer-events:none;max-height:40vh;overflow:hidden;border-radius:20px}
.mf-msg.srv{background:var(--float);padding:8px 12px;border-radius:16px;max-width:calc(100vw - 32px)}
.mf-clone{max-width:100%}
.mf-menu{min-width:220px;border-radius:18px;background:var(--float);box-shadow:0 12px 40px #0008;overflow:hidden;transform:scale(.8) translateY(-10px);opacity:0;transform-origin:top left;transition:transform .26s cubic-bezier(.2,1.3,.4,1),opacity .18s}
.mf-wrap.right .mf-menu{transform-origin:top right}
.mf-menu button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:12px 16px;color:var(--text);font-size:15.5px;font-weight:600;border-top:1px solid var(--border)}
.mf-menu button:active{background:var(--hover)}
.mf-menu button.danger{color:#FF6B6E}
.mf-when{display:flex;align-items:center;gap:6px;margin:0;padding:10px 16px;color:var(--muted);font-size:12.5px}
#mfocus.in .mf-react,#mfocus.in .mf-menu{transform:none;opacity:1}
#mfocus.in .mf-msg{transform:scale(1.03)}
#mfocus.out .mf-back{opacity:0}#mfocus.out .mf-react,#mfocus.out .mf-menu{opacity:0}
.msg.mf-src{opacity:0}
.react-burst{position:absolute;bottom:0;font-size:34px;pointer-events:none;animation:rBurst .9s cubic-bezier(.2,1.2,.4,1) both;z-index:3}
.msg.mine .react-burst{right:0}.msg:not(.mine) .react-burst{left:0}
@keyframes rBurst{0%{transform:scale(0) translateY(0);opacity:0}30%{transform:scale(1.3) translateY(-20px);opacity:1}100%{transform:scale(1) translateY(-60px);opacity:0}}
.msg .bcol{position:relative}
/* glisser pour répondre */
.msg.swiping{transition:none}
.msg[style*="--sw"]::before{content:"↩";position:absolute;top:50%;left:6px;transform:translateY(-50%) scale(var(--sw));opacity:var(--sw);width:30px;height:30px;border-radius:15px;background:var(--deep);color:var(--text);display:grid;place-items:center;font-size:15px}
.msg{position:relative}
#chat .msg[style*="--sw"]:not(.b)::before{left:auto;right:6px}
/* heure au toucher */
.b-when{display:block;height:0;overflow:hidden;font-size:11px;color:var(--muted);transition:height .2s,margin .2s;margin:0 6px}
.msg.show-time .b-when{height:16px;margin:2px 6px 0}
.msg.mine .b-when{text-align:right}
/* messages vocaux : plus épais, façon Insta */
.vnote{height:52px;padding:6px 16px 6px 6px!important;border-radius:26px!important;gap:12px!important;background:var(--bubble)!important;border:0!important}
.msg.mine .vnote{background:var(--coral)!important;color:var(--on-coral)}
.vplay{width:40px!important;height:40px!important;flex:none}
.msg.mine .vplay{background:var(--on-coral)!important;color:var(--coral)!important}
.vwave{height:34px!important;gap:3px!important}
.vwave i{border-radius:3px!important;min-width:3px!important;max-width:4px;background:#ffffff40!important}
.vwave i.played{background:#fff!important}
.msg:not(.mine) .vwave i{background:color-mix(in srgb,var(--text) 30%,transparent)!important}
.msg:not(.mine) .vwave i.played{background:var(--coral)!important}
.vtime{font-weight:700;font-size:13px}
.msg.mine .vtime{color:var(--on-coral)}
/* thèmes : animés */
#chat.th-aurora #view,#chat.th-candy #view,#chat.th-sunset #view{background-size:220% 220%!important;animation:thMove 18s ease-in-out infinite alternate}
@keyframes thMove{from{background-position:0% 30%}to{background-position:100% 70%}}
#chat.th-night #view{background-color:#070816}
#chat.th-neon .msg.b.mine .bubble{box-shadow:0 0 18px #ff2fa066}
#chat.th-neon .msg.b.theirs .bubble{background:#1a1030;box-shadow:inset 0 0 0 1px #21e6ff55,0 0 14px #21e6ff22}
#chat.th-light .msg.b.theirs .bubble{background:#ffffffcc;color:#1E1A26}
#chat.th-light #view .day,#chat.th-light #view .b-intro,#chat.th-light .btime,#chat.th-light .receipt{color:#3a3348;text-shadow:none}
#chat.themed .msg.b.theirs .bubble{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#chat.th-mono .msg.b.mine .bubble{color:#111}
.theme-pick .tp-prev{background-size:cover!important}
/* stories : glisser vers le bas, réactions rapides */
#sview{background:rgba(0,0,0,var(--sv-fade,1))!important}
.s-quick{display:flex;justify-content:space-between;gap:4px;width:100%;margin-bottom:8px}
.s-quick button{flex:1;height:40px;font-size:26px;border-radius:20px;transition:transform .15s}
.s-quick button:active{transform:scale(1.35)}
#sview-foot{flex-wrap:wrap}
.sq-fly{position:absolute;bottom:90px;font-size:40px;z-index:9;pointer-events:none;animation:sqFly 1.4s cubic-bezier(.2,.8,.3,1) both}
@keyframes sqFly{0%{transform:translateY(0) scale(.4);opacity:0}15%{opacity:1;transform:translateY(-40px) scale(1.2)}100%{transform:translateY(-62vh) scale(.9) rotate(20deg);opacity:0}}

#ptab .igp-stats{padding-top:34px}

/* =====================================================================================
   2.1 — refonte de l'interface
   ===================================================================================== */
/* ---------- Généralités : appuis vivants, pas de rebond ---------- */
html,body{overscroll-behavior:none}
#side-list,#view,.pt-scroll,#members,.sh-panel,.fsr-res,.snd,.pv-in{overscroll-behavior-y:contain}
button{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .conv,.sh-item,.fsr-row,.frow,.chip,.rail-btn,.round-btn,.pill-btn,.primary,.igp-btns > *,.ct-acts button,.s21-d,.snd-p,.aud-opt,.chan,.cat-t{transition:transform .14s ease,background .15s}
  .conv:active,.sh-item:active,.fsr-row:active,.frow:active,.chan:active{transform:scale(.98)}
  .chip:active,.rail-btn:active,.round-btn:active,.pill-btn:active,.primary:active,.ct-acts button:active,.snd-p:active,.aud-opt:active{transform:scale(.94)}
}
#sheet .sh-panel{transition:transform .38s cubic-bezier(.2,.95,.25,1)!important}
.toast-in,#toast{animation:toastIn .28s cubic-bezier(.2,1.2,.4,1)}
@keyframes toastIn{from{transform:translate(-50%,10px) scale(.96);opacity:0}}
body.bg-paused #th-layer *{animation-play-state:paused!important}

/* ---------- Silhouette ---------- */
.av.nopic{overflow:visible;background:linear-gradient(150deg,color-mix(in srgb,var(--avc) 70%,#fff) 0%,var(--avc) 45%,color-mix(in srgb,var(--avc) 55%,#14121A) 100%)!important}
.av.nopic .sil-w{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block}
.av.nopic .sil-w::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 1px 0 #ffffff40,inset 0 -6px 12px #0000002e}
.av.nopic .sil{position:absolute;left:12%;top:14%;width:76%;height:86%;clip-path:none;border-radius:0;fill:none;filter:drop-shadow(0 1px 1.5px #0003)}
.av.nopic .st{z-index:2}

/* ---------- Profil : plus fin ---------- */
.igp-stats b{font:700 16px/1.2 Figtree,system-ui,sans-serif}
.igp-stats small{font-size:11.5px;letter-spacing:.2px}
.igp-name h2{font:650 17px/1.25 Figtree,system-ui,sans-serif;letter-spacing:.1px}
.pt-bar b{font:700 19px Figtree,system-ui,sans-serif}
.igp-bio{font-size:14px;color:color-mix(in srgb,var(--text) 88%,transparent)}
.igp-btns > *{height:36px;border-radius:10px;font-size:13.5px;font-weight:650}
.igp-av{width:84px;height:84px}.igp-av .av{width:78px!important;height:78px!important}

/* ---------- Serveurs : sélection = juste la barre blanche ---------- */
.slim-btn.on .srv-tile,.slim-btn .srv-tile,.slim-btn:focus-visible .srv-tile{box-shadow:none!important}
.slim-btn.on .srv-tile{border-radius:16px}

/* ---------- En-tête d'une conversation privée ---------- */
body.in-dm .search-box{display:none!important}
@media (max-width:700px){
  body.in-dm #mute-btn,body.in-dm #pins{display:none!important}
  body.in-dm #chan-av,body.in-dm #chan-title{cursor:pointer}
  body.in-dm #chan-title::after{content:"›";margin-left:6px;color:var(--muted);font-weight:400}
}

/* ---------- Fiche contact (téléphone) ---------- */
#contact-back{position:fixed;inset:0;z-index:38;background:#0009;animation:psFade .25s ease both}
#contact-back[hidden]{display:none}
@media (max-width:700px){
  body.contact-open #members{display:block!important;position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;
    height:62vh;max-height:none;z-index:39;border-radius:26px 26px 0 0;background:var(--float);border:0;box-shadow:0 -20px 60px #000a;overflow-y:auto;padding:0 16px calc(20px + env(safe-area-inset-bottom));transition:height .35s cubic-bezier(.2,.9,.3,1)}
  body.contact-open.contact-full #members{height:calc(100% - 12px)}
  #members.ct-in{animation:psUp .36s cubic-bezier(.2,.9,.25,1) both}
  #members.ct-out{transform:translateY(100%)!important;transition:transform .23s ease-in!important}
}
.ct-grab{position:sticky;top:0;display:flex;justify-content:center;padding:10px 0 6px;margin:0 -16px;background:var(--float);z-index:2}
.ct-grab i{width:40px;height:5px;border-radius:3px;background:var(--btn)}
.ct-acts{width:100%;align-self:stretch;display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:6px;margin:14px 0 10px}
.ct-acts button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:16px;background:var(--deep);color:var(--text);font-size:11.5px;font-weight:650}
.ct-acts button svg{width:21px;height:21px}
.ct-acts button.on{color:var(--coral)}
.ct-profile{align-self:stretch;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin-bottom:6px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 18%,var(--deep)),var(--deep));color:var(--text);text-align:left}
.ct-profile .av{width:44px;height:44px}
.ct-profile > span{flex:1;min-width:0}.ct-profile b{display:block;font-size:15px}.ct-profile small{color:var(--muted);font-size:12.5px}
.ct-profile.locked{background:var(--deep);opacity:.6}
.dm-panel .dp-av.big{margin-top:6px}
/* recherche dans la conversation */
.csrch{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.cs-res{flex:1;min-height:0;overflow-y:auto}
.cs-hit{display:flex;gap:10px;width:100%;padding:10px 6px;border-radius:14px;text-align:left;color:var(--text)}
.cs-hit:active{background:var(--hover)}
.cs-hit .av{width:34px;height:34px;flex:none}.cs-hit small{color:var(--muted)}.cs-hit p{margin:2px 0 0;font-size:14px}
.cs-hit mark{background:color-mix(in srgb,var(--coral) 35%,transparent);color:inherit;border-radius:3px}
.msg.flash{animation:msgFlash 1.6s ease}
@keyframes msgFlash{0%,40%{background:color-mix(in srgb,var(--coral) 22%,transparent)}100%{background:transparent}}

/* ---------- Glisser pour sortir d'une conversation ---------- */
@media (max-width:700px){
  body.back-drag #sidebar,body.back-drag.space-servers #servers{display:flex!important;position:fixed;inset:0;z-index:0;filter:brightness(.7)}
  body.back-drag #chat{position:fixed;inset:0;z-index:20}
}

/* ---------- Appui long : réponse = citation lisible partout ---------- */
.breply{background:color-mix(in srgb,var(--bubble) 70%,transparent)!important;color:var(--text)!important;border-left:3px solid var(--coral);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#chat.decor .breply{background:#ffffff1f!important;color:#fff!important;border-left-color:var(--th-me,#fff)}

/* ---------- Toute la palette d'emojis ---------- */
.emo{display:flex;flex-direction:column;flex:1;min-height:0;gap:6px}
.emo-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;border-bottom:1px solid var(--border)}
.emo-tabs button{flex:none;width:38px;height:38px;border-radius:12px;font-size:20px;display:grid;place-items:center}
.emo-tabs button:active{background:var(--hover)}
.emo-kb{color:var(--muted);margin-left:auto}
.emo-kb-in{position:absolute;opacity:0;height:1px;width:1px;pointer-events:none}
.emo-scroll{flex:1;min-height:0;overflow-y:auto}
.emo-scroll h5{margin:12px 4px 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr)}
.emo-grid button{aspect-ratio:1;font-size:28px;border-radius:10px;display:grid;place-items:center;transition:transform .12s}
.emo-grid button:active{transform:scale(1.3);background:var(--hover)}

/* ---------- PC : vue unique sans zoom, croix toujours là ---------- */
#pv.once #pv-img{transform:none!important;max-height:84vh;max-width:min(92vw,900px);object-fit:contain}
#pv.once .pv-top{opacity:1!important;pointer-events:auto!important}

/* ---------- Thèmes : décors animés ---------- */
#chat.decor{background:var(--th-tint);isolation:isolate}
#th-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#chat.decor > #chat-head,#chat.decor > #chan-chips,#chat.decor > #thread-bar,#chat.decor > #stage-bar,#chat.decor > #stage,#chat.decor > #view,#chat.decor > #typing,#chat.decor > #composer{position:relative;z-index:1}
#chat.decor > #jump-present{z-index:3}
#chat.decor #view{background:transparent!important;animation:none!important}
#chat.decor #chat-head,#chat.decor #composer{background:color-mix(in srgb,var(--th-tint) 58%,transparent)!important;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-color:#ffffff14!important}
#chat.decor #chat-head *,#chat.decor .b-intro,#chat.decor .btime,#chat.decor .receipt,#chat.decor .bsys{color:#fff}
#chat.decor #composer .input-row{background:#ffffff14!important;border-color:#ffffff1f!important}
#chat.decor #input{color:#fff}#chat.decor #input::placeholder{color:#ffffff99}
#chat.decor .msg.b.theirs .bubble{background:#ffffff1c!important;color:#fff!important;backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset 0 0 0 1px #ffffff14}
#chat.decor .msg.b.mine .bubble{background:var(--th-me)!important;color:var(--th-on)!important;box-shadow:0 4px 18px color-mix(in srgb,var(--th-me) 35%,transparent)}
/* Nuit étoilée */
.dk-night .dn-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 0%,#3a2a7a66,transparent 55%),radial-gradient(ellipse at 10% 100%,#1b3a6b55,transparent 60%),linear-gradient(175deg,#04050f 0%,#0d0b2a 50%,#1e1445 100%)}
.dk-night .dn-moon{position:absolute;top:8%;right:12%;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe8,#f2e7b8 60%,#d9c98a);box-shadow:0 0 40px #fff6d566,0 0 120px #fff3c033;animation:moonGlow 6s ease-in-out infinite alternate}
.dk-night .dn-moon::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#0000000f;top:20px;left:16px;box-shadow:18px 14px 0 -2px #00000012,8px 26px 0 -4px #0000000c}
@keyframes moonGlow{to{box-shadow:0 0 60px #fff6d588,0 0 160px #fff3c044}}
.dk-night .dn-stars{position:absolute;top:0;left:0;width:1px;height:1px;border-radius:50%;background:transparent}
.dk-night .dn-stars.s1{animation:twinkle 4s ease-in-out infinite alternate}
.dk-night .dn-stars.s2{width:1.5px;height:1.5px;animation:twinkle 6s ease-in-out infinite alternate-reverse}
.dk-night .dn-stars.s3{width:2px;height:2px;animation:twinkle 3s ease-in-out infinite alternate;filter:drop-shadow(0 0 3px #fff)}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.dk-night .dn-shoot{position:absolute;top:10%;left:110%;width:140px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);transform:rotate(-25deg);opacity:0;animation:shoot 9s linear infinite}
.dk-night .dn-shoot.b{top:28%;animation-delay:3.4s;animation-duration:11s}
.dk-night .dn-shoot.c{top:4%;animation-delay:7s;animation-duration:13s}
@keyframes shoot{0%,88%{transform:translate(0,0) rotate(-25deg);opacity:0}89%{opacity:1}100%{transform:translate(-160vw,70vw) rotate(-25deg);opacity:0}}
/* Aurore */
.dk-aurora .da-base{position:absolute;inset:0;background:linear-gradient(180deg,#020a12,#06182a 55%,#0b1f2e)}
.dk-aurora .da-b{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;mix-blend-mode:screen}
.dk-aurora .b1{width:80vw;height:40vh;left:-20vw;top:-6vh;background:#18e0a0;animation:aur1 16s ease-in-out infinite alternate}
.dk-aurora .b2{width:70vw;height:36vh;right:-20vw;top:8vh;background:#7a5cff;animation:aur2 19s ease-in-out infinite alternate}
.dk-aurora .b3{width:60vw;height:30vh;left:10vw;top:26vh;background:#22b8e0;opacity:.45;animation:aur1 23s ease-in-out infinite alternate-reverse}
.dk-aurora .b4{width:50vw;height:24vh;right:0;bottom:-6vh;background:#ff4fb0;opacity:.28;animation:aur2 27s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(18vw,8vh) scale(1.2) rotate(12deg)}}
@keyframes aur2{to{transform:translate(-16vw,10vh) scale(1.15) rotate(-10deg)}}
.dk-aurora .da-grain{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:3px 3px}
/* Océan */
.dk-ocean .do-sky{position:absolute;inset:0;background:linear-gradient(180deg,#0e5a86 0%,#0a3a63 40%,#062543 75%,#03172c 100%)}
.dk-ocean .do-ray{position:absolute;top:-10%;width:18vw;height:90%;background:linear-gradient(180deg,#bfe9ff33,transparent);transform-origin:top;filter:blur(8px);animation:ray 8s ease-in-out infinite alternate}
.dk-ocean .r1{left:15%;transform:rotate(12deg)}.dk-ocean .r2{left:45%;animation-delay:2s;transform:rotate(6deg)}.dk-ocean .r3{left:72%;animation-delay:4s;transform:rotate(-8deg)}
@keyframes ray{from{opacity:.25}to{opacity:.8}}
.dk-ocean .do-wave{position:absolute;left:0;width:200%;height:90px;bottom:0;animation:wave 14s linear infinite}
.dk-ocean .do-wave path{fill:#2aa8d0;opacity:.18}
.dk-ocean .w2{bottom:-14px;animation-duration:10s;animation-direction:reverse}.dk-ocean .w2 path{fill:#3fd0e8;opacity:.14}
.dk-ocean .w3{bottom:-28px;animation-duration:18s}.dk-ocean .w3 path{fill:#0f6f9a;opacity:.35}
@keyframes wave{to{transform:translateX(-50%)}}
.dk-ocean .do-bub{position:absolute;bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;border:1px solid #bff2ff88;background:#bff2ff14;animation:bub 11s linear infinite}
@keyframes bub{to{transform:translate(20px,-110vh)}}
/* Coucher de soleil */
.dk-sunset .ds-sky{position:absolute;inset:0;background:linear-gradient(180deg,#1e0b33 0%,#5a1e52 30%,#b8404d 58%,#f2884a 78%,#ffc46b 100%)}
.dk-sunset .ds-sun{position:absolute;left:50%;bottom:16%;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(circle,#fff3c4,#ffc36b 55%,#ff8a4a);box-shadow:0 0 80px #ffb36b,0 0 200px #ff8a4a88;animation:sun 10s ease-in-out infinite alternate}
@keyframes sun{to{transform:translateY(14px);box-shadow:0 0 100px #ffb36b,0 0 240px #ff8a4aaa}}
.dk-sunset .ds-cloud{position:absolute;height:22px;border-radius:20px;background:#ffd8c055;filter:blur(3px);animation:cloud 60s linear infinite}
.dk-sunset .c1{top:22%;width:180px;left:-200px}.dk-sunset .c2{top:36%;width:120px;left:-140px;animation-duration:85s;animation-delay:-30s}
@keyframes cloud{to{transform:translateX(140vw)}}
.dk-sunset .ds-mtn{position:absolute;left:0;bottom:0;width:100%}
.dk-sunset .m1{height:34%}.dk-sunset .m1 path{fill:#3a1238}
.dk-sunset .m2{height:24%}.dk-sunset .m2 path{fill:#1c0a20}
/* Synthwave */
.dk-synth .dy-sky{position:absolute;inset:0;background:linear-gradient(180deg,#0a0420 0%,#2a0b4a 40%,#6b1a6e 58%,#14062a 59%,#08021a 100%)}
.dk-synth .dy-sun{position:absolute;left:50%;top:26%;width:170px;height:170px;margin-left:-85px;border-radius:50%;background:linear-gradient(180deg,#ffe36b 0%,#ff7a59 50%,#ff2fa0 100%);-webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 18px);mask:linear-gradient(#000 55%,transparent 55%),repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 17px);box-shadow:0 0 60px #ff2fa088}
.dk-synth .dy-grid{position:absolute;left:-50%;right:-50%;bottom:0;height:42%;perspective:260px;overflow:hidden}
.dk-synth .dy-grid i{position:absolute;inset:0 0 -100% 0;transform:rotateX(62deg);transform-origin:top;background-image:linear-gradient(#ff2fa0cc 2px,transparent 2px),linear-gradient(90deg,#ff2fa0cc 2px,transparent 2px);background-size:60px 60px;animation:grid 2.2s linear infinite;box-shadow:0 0 30px #ff2fa0}
@keyframes grid{to{background-position:0 60px}}
.dk-synth .dy-glow{position:absolute;left:0;right:0;top:57%;height:3px;background:#ff8ae0;box-shadow:0 0 24px 6px #ff2fa0aa}
.theme-pick .tp-prev{background-size:cover!important;background-position:center!important}
@media (prefers-reduced-motion:reduce){#th-layer *{animation:none!important}}

/* ---------- Éditeur : feuille qui monte, aperçu en direct ---------- */
#ed-sheet{position:absolute;left:0;right:0;bottom:0;z-index:30;max-height:56%;overflow-y:auto;background:color-mix(in srgb,#14121A 82%,transparent);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-radius:26px 26px 0 0;padding:0 16px calc(14px + env(safe-area-inset-bottom));color:#fff;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.95,.25,1)}
#ed-sheet[hidden]{display:none}
#ed-sheet.in{transform:none}
#sedit.editing .s-top,#sedit.editing .sedit-bar{opacity:0;pointer-events:none;transition:opacity .2s}
.eds-grab{display:flex;justify-content:center;padding:10px 0 8px}.eds-grab i{width:38px;height:5px;border-radius:3px;background:#ffffff55}
.eds-body{display:flex;flex-direction:column;gap:12px}
#eds-in{width:100%;box-sizing:border-box;border:0;border-radius:16px;background:#ffffff14;color:#fff;font-size:18px;padding:12px 14px;resize:none;font-family:inherit}
#eds-in:focus{outline:none;box-shadow:inset 0 0 0 1.5px #ffffff55}
.eds-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.eds-chip{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:76px;padding:10px 10px 8px;border-radius:16px;background:#ffffff10;color:#fff;transition:transform .12s,box-shadow .15s}
.eds-chip > span{font-size:17px;line-height:1.2;max-width:110px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:2px 6px}
.eds-chip small{font-size:11px;color:#ffffffaa;font-weight:600}
.eds-chip.on{box-shadow:inset 0 0 0 2px #fff,0 0 0 3px var(--coral);background:#ffffff1c}
.eds-chip.on small{color:#fff}
.eds-cols{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:3px}
.eds-col{flex:none;width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px #ffffff33;transition:transform .15s}
.eds-col.on{box-shadow:0 0 0 2.5px #14121A,0 0 0 4.5px #fff;transform:scale(1.08)}
.eds-bg{flex:none;height:32px;padding:0 12px;border-radius:16px;background:#ffffff14;color:#fff;font-weight:700;font-size:13px;margin-left:4px}
.eds-bg.on{background:#fff;color:#14121A}
.eds-row{display:flex;align-items:center;gap:10px}.eds-row input{flex:1;accent-color:#fff}
.eds-size-l{font-size:12px;opacity:.7}.eds-size-b{font-size:22px;font-weight:700}
.eds-foot{display:flex;gap:8px}.eds-foot > *{flex:1;height:46px;border-radius:16px;font-size:15px}
.eds-foot .pill-btn{background:#ffffff14;color:#fff}
.eds-place{display:flex;gap:8px}.eds-place input{flex:1;min-width:0;height:46px;border-radius:14px;border:0;background:#ffffff14;color:#fff;padding:0 14px;font-size:16px}
.eds-place .pill-btn{display:flex;align-items:center;gap:4px;background:#ffffff14;color:#fff;white-space:nowrap}
.eds-h{display:flex;align-items:center;gap:8px;margin:0;font:700 18px Figtree,sans-serif}
/* styles : plus forts que la couleur de base */
.stk.text.sty-neon,.stk.lbl.sty-neon,.eds-chip .sty-neon{color:#fff!important;text-shadow:0 0 4px #fff,0 0 10px #ff4fd8,0 0 22px #ff4fd8,0 0 40px #b14bff!important;background:none!important;font-weight:800}
.stk.text.sty-type,.stk.lbl.sty-type,.eds-chip .sty-type{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace!important;letter-spacing:.5px;font-weight:600;background:#14121Acc!important;color:#f5f0e6!important;padding:4px 10px!important;border-radius:4px}
.stk.text.sty-box,.stk.lbl.sty-box,.eds-chip .sty-box{background:#fff!important;color:#14121A!important;padding:6px 12px!important;border-radius:10px;font-weight:800;box-shadow:0 4px 14px #0005;text-shadow:none!important}
.stk.text.sty-strong,.stk.lbl.sty-strong,.eds-chip .sty-strong{font-family:var(--display,inherit)!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 3px 0 #0006,0 0 18px #0005!important}
.stk.lbl.sty-classic{background:#0006!important}
.ed-guide{position:absolute;z-index:8;background:#ffd400;box-shadow:0 0 6px #ffd400;pointer-events:none}
.ed-guide.v{left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px}
.ed-guide.h{top:50%;left:0;right:0;height:1.5px;margin-top:-.75px}
.ed-guide[hidden]{display:none}
#sedit-stage{touch-action:none}
/* caméra : fondu */
#scam-v.cam-hide{opacity:0!important}
#scam-v{transition:opacity .28s ease}

/* ---------- Feuille « Envoyer » refaite ---------- */
.s21{gap:14px!important}
.s21-dests{display:flex;justify-content:space-around;gap:6px;padding:6px 0 2px}
.s21-d{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--text);background:none;width:92px}
.s21-d b{font-size:13px;font-weight:650}
.s21-ring{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;padding:3px;box-sizing:border-box;transition:transform .2s cubic-bezier(.2,1.4,.4,1)}
.s21-ring.story{background:conic-gradient(from 200deg,#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A)}
.s21-ring.story .av{width:58px!important;height:58px!important;box-shadow:0 0 0 3px var(--float)}
.s21-ring.note{background:linear-gradient(135deg,#4FA3D1,#8E6CFF);color:#fff}
.s21-ring.note em{font:800 22px Figtree,sans-serif;font-style:normal}
.s21-ring.post{background:linear-gradient(135deg,#3FB27F,#4FA3D1);color:#fff}
.s21-d:active .s21-ring{transform:scale(.92)}
.s21-chk{position:absolute;top:46px;right:12px;width:24px;height:24px;border-radius:12px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;border:3px solid var(--float);transform:scale(0);transition:transform .22s cubic-bezier(.2,1.5,.4,1)}
.s21-chk svg{width:12px;height:12px;stroke-width:3.5}
.s21-d.on .s21-chk{transform:scale(1)}
.s21-d.on .s21-ring{box-shadow:0 0 0 3px var(--float),0 0 0 5px var(--coral)}
.s21-sec{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;background:var(--deep);animation:secIn .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes secIn{from{opacity:0;transform:translateY(-6px)}}
.s21-sec h5,.s21-h{margin:0;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.s21-h{margin:4px 2px -4px}
.s21-sec .snd-in{background:var(--float)}
.s21-sec .snd-ap{background:var(--float)}
.s21-togs{display:flex;flex-direction:column;gap:2px}
.s21-tog{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;font-size:14px;color:var(--text)}
.s21-tog input{accent-color:#34C759;width:20px;height:20px}
.s21-tog.once{padding:12px;border-radius:16px;background:var(--deep)}
.s21 .snd-extra{gap:10px}
.s21 .snd-grid{grid-template-columns:repeat(4,1fr);gap:16px 6px}

.s21-sec .snd-ap.on{background:var(--fc);color:#fff}
.dk-synth .dy-sun{opacity:.85}
.dk-sunset .ds-sun{opacity:.9}

/* ---------- 2.1 : fil des publications ---------- */
#pfeed{position:fixed;inset:0;z-index:72;background:var(--chat);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
#pfeed[hidden]{display:none}
#pfeed.in{animation:pfIn .32s cubic-bezier(.2,.9,.3,1) both}
#pfeed.out{transform:translateX(30%);opacity:0;transition:transform .23s ease-in,opacity .23s}
@keyframes pfIn{from{transform:translateX(40%);opacity:0}}
@media (min-width:701px){#pfeed{left:50%;right:auto;width:min(620px,100vw);transform:translateX(-50%);box-shadow:0 0 0 100vmax #000a}#pfeed.in{animation:psFade .25s ease both}#pfeed.out{transform:translateX(-50%);opacity:0}}
.pf-head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);flex:none;background:var(--chat);z-index:5}
.pf-head div{display:flex;flex-direction:column;line-height:1.15}.pf-head small{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px}.pf-head b{font-size:16px;font-weight:650}
.pf-back{width:42px;height:42px;border-radius:21px;display:grid;place-items:center;color:var(--text)}
.pf-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.pf-card{padding:4px 0 14px;border-bottom:1px solid var(--border);animation:secIn .3s ease both}
.pf-ch{display:flex;align-items:center;gap:10px;padding:8px 12px}
.pf-ch .av{width:34px;height:34px;cursor:pointer}
.pf-ch > div:not(.av){flex:1;min-width:0;line-height:1.2}
.pf-ch .av{flex:none}.pf-ch b{font-size:14px;font-weight:650;cursor:pointer}.pf-ch small{display:block;color:var(--muted);font-size:12px}
.pf-more{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;color:var(--text)}
.pf-media{position:relative;width:100%;background:#000;overflow:hidden;isolation:isolate;z-index:0}
.pf-media img,.pf-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pf-stk{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.pf-snd{position:absolute;right:10px;bottom:10px;z-index:2;width:32px;height:32px;border-radius:16px;background:#0009;color:#fff;display:grid;place-items:center}
.pf-snd svg{width:15px;height:15px}
.pf-media .pv-burst{z-index:3}
.pf-acts{display:flex;align-items:center;gap:6px;padding:6px 6px 0}
.pf-acts button{display:flex;align-items:center;gap:5px;height:42px;padding:0 8px;border-radius:21px;color:var(--text);font-weight:650;font-size:14px;transition:transform .15s}
.pf-acts button:active{transform:scale(.88)}
.pf-like.on{color:#FF3B5C}.pf-like.on span{color:var(--text)}
.pf-like.on svg{animation:likeBump .45s cubic-bezier(.2,1.6,.4,1)}
.pf-cap{margin:2px 14px 0;font-size:14.5px;line-height:1.45;white-space:pre-wrap}
.pf-cap b{font-weight:650}
.pf-allc{margin:4px 14px 0;color:var(--muted);font-size:14px;padding:0}
/* commentaires */
.pfc-sheet{display:flex;flex-direction:column;flex:1;min-height:0}
.pfc-list{flex:1;min-height:0;overflow-y:auto}
.pfc-form{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.pfc-form .av{width:32px;height:32px;flex:none}
.pfc-form input{flex:1;min-width:0;height:42px;border-radius:21px;border:0;background:var(--deep);color:var(--text);padding:0 14px;font-size:16px}
.pfc-go{width:42px;height:42px;border-radius:21px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center}
.pfc-go svg{width:19px;height:19px}
/* partager */
.psh{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto}
.psh-reply{display:flex;align-items:center;gap:8px;padding:8px;border-radius:18px;background:var(--deep)}
.psh-reply .av{width:34px;height:34px;flex:none}
.psh-reply input{flex:1;min-width:0;height:40px;border:0;background:none;color:var(--text);font-size:16px}
.psh-reply button{width:40px;height:40px;border-radius:20px;background:var(--coral);color:var(--on-coral);display:grid;place-items:center}
.psh-reply button svg{width:18px;height:18px}
.psh-note{margin:-6px 2px 0}
.psh .snd-grid{grid-template-columns:repeat(4,1fr);gap:14px 6px}
/* vignette d'une publication dans la conversation */
.sreply.post .pthumb{display:block;width:120px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;margin-top:4px;box-shadow:0 4px 14px #0004}
.sreply.post.mine .pthumb{margin-left:auto}
.pthumb img,.pthumb video{width:100%;height:100%;object-fit:cover;display:block}
/* « À la une » dans Envoyer */
.s21-ring.hl{background:linear-gradient(135deg,#F5C04A,#FF8A5B);color:#fff}
/* visionneuse 2.0 : réparations si elle sert encore */
.pv-frame img,.pv-frame video{height:auto!important;max-height:72vh}
.pv-head{z-index:5}.pv-frame{isolation:isolate;z-index:0}

/* =====================================================================================
   2.2 — Fil, barre flottante, finitions
   ===================================================================================== */
/* ---------- Serveurs : plus jamais de vert derrière l'icône choisie ---------- */
.slim-btn.srv,.slim-btn.srv:hover,.slim-btn.srv.on,.slim-btn.srv:focus{background:transparent!important;box-shadow:none!important}
.slim-btn.srv::before,.slim-btn.srv::after{display:none!important}
.slim-btn.srv .srv-tile{transform:none}

/* ---------- PC : plus de petite barre d'outils qui surgit dans les conversations privées ---------- */
.msg.b .tools{display:none!important}
/* bouton emoji inutile (les claviers ont des emojis) */
#emoji-btn{display:none!important}

/* ---------- Silhouette ---------- */
.av.nopic{background:radial-gradient(120% 90% at 25% 15%,color-mix(in srgb,var(--avc) 45%,#fff) 0%,var(--avc) 48%,color-mix(in srgb,var(--avc) 50%,#0d0b14) 100%)!important}
.av.nopic .sil-w::before{content:"";position:absolute;left:50%;top:22%;width:58%;height:58%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#ffffff38,transparent 70%)}
.av.nopic .sil{left:10%;top:13%;width:80%;height:90%;filter:drop-shadow(0 1.5px 2px #0000003a)}
.av.nopic .sil-w::after{box-shadow:inset 0 1.5px 0 #ffffff55,inset 0 -8px 14px #00000030,inset 0 0 0 1px #ffffff18}

/* ---------- Anneaux de story : plus de pointillés ---------- */
.dispo.me .ring{border-style:solid!important;border-color:var(--line)}
.dispo .ring{border-width:2px}
.s-bars{gap:3px!important;left:12px!important;right:12px!important}
.s-bars span{height:2px!important;background:#ffffff38!important;box-shadow:none!important;border-radius:2px}
.s-bars i{box-shadow:none!important}

/* ---------- Barre du bas flottante en verre (téléphone) ---------- */
@media (max-width:700px){
  #rail{left:12px!important;right:12px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;height:60px!important;padding:0 4px!important;border-radius:26px!important;
    background:color-mix(in srgb,var(--rail) 70%,transparent)!important;backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)!important;box-shadow:0 12px 34px #0007}
  #rail .rail-btn[data-space="activity"]{display:none!important}
  .rail-btn{width:auto!important;flex:1;height:52px!important}
  .rail-btn b{font-size:10.5px!important}
  #rail .rail-btn.create{flex:none;width:48px!important;height:40px!important;border-radius:14px}
  #rail #me{flex:1;width:auto!important}
  .rb-dot{position:absolute;top:8px;right:calc(50% - 16px);width:8px;height:8px;border-radius:4px;background:#FF3B5C;box-shadow:0 0 0 2px var(--rail)}
  .rb-dot[hidden]{display:none}
  #ptab{bottom:0!important}
  #ptab .pt-scroll,#ftab .ft-scroll{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body.space-potes:not(.has-chan) #sidebar,body.space-servers:not(.has-chan) #servers{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
  body.space-activity #chat{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
}

/* ---------- Le Fil ---------- */
#ftab{position:fixed;inset:0;z-index:15;background:var(--chat);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
#ftab[hidden]{display:none}
@media (min-width:701px){#ftab{left:76px}#ftab .ft-scroll > *{max-width:560px;margin-left:auto;margin-right:auto}}
.ft-head{display:flex;align-items:center;gap:4px;padding:8px 10px 6px 18px;flex:none}
.ft-logo{font:800 26px var(--display,inherit);letter-spacing:-.5px}.ft-logo span{color:var(--coral)}
.ft-heart{position:relative}
.ft-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:4px;background:#FF3B5C;box-shadow:0 0 0 2px var(--chat)}
.ft-dot[hidden]{display:none}
.ft-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
.ft-stories{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:6px 14px 14px;border-bottom:1px solid var(--border)}
.ft-stories::-webkit-scrollbar{display:none}
.fts{display:flex;flex-direction:column;align-items:center;gap:5px;width:70px;flex:none;color:var(--text);font-size:11.5px}
.fts small{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fts-ring{position:relative;width:66px;height:66px;border-radius:50%;padding:3px;box-sizing:border-box;display:grid;place-items:center;background:var(--line)}
.fts-ring.on{background:conic-gradient(from 200deg,#FF6B4A,#F5C04A,#E05A8A,#8E6CFF,#FF6B4A)}
.fts-ring.add{background:none}
.fts-ring .av{width:56px!important;height:56px!important;box-shadow:0 0 0 3px var(--chat)}
.fts-ring i{position:absolute;right:0;bottom:0;width:22px;height:22px;border-radius:11px;background:var(--coral);color:var(--on-coral);font:800 16px/20px Figtree,sans-serif;text-align:center;font-style:normal;border:3px solid var(--chat)}
.ft-list .pf-card{border-bottom:1px solid var(--border)}
.ft-sk{display:flex;flex-direction:column;gap:20px;padding:14px}.ft-sk .sk{height:380px;border-radius:18px}
.ft-empty,.ig-first{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:46px 30px 30px}
.ft-empty .art,.ig-first .art{width:150px;height:auto;filter:drop-shadow(0 18px 30px #e05a8a40);animation:artFloat 4s ease-in-out infinite alternate}
@keyframes artFloat{to{transform:translateY(-8px) rotate(-2deg)}}
.ft-empty b,.ig-first b{font:700 19px Figtree,sans-serif;margin-top:6px}
.ft-empty p,.ig-first p{margin:0;color:var(--muted);font-size:14px;max-width:300px;line-height:1.45}
.ft-empty .primary,.ig-first .primary{margin-top:8px;height:46px;padding:0 26px;border-radius:23px;font-size:15px;background:linear-gradient(135deg,#FF8A5B,#E05A8A 60%,#8E6CFF);color:#fff;box-shadow:0 10px 26px #e05a8a55}
.ft-empty .pill-btn{height:40px;padding:0 18px}
.ft-more{display:block;margin:16px auto 30px;height:40px;padding:0 20px;border-radius:20px;background:var(--deep);color:var(--text);font-weight:650}
.ft-more[hidden]{display:none}
/* grille du profil : sans bordures qui dépassent */
.ig-grid.g22{gap:2px;border-radius:0}
.ig-grid.g22 .ig-cell{border-radius:0;background:var(--deep)}
.ig-grid.g22 .ig-cell img{opacity:0;animation:imgIn .35s ease forwards}
@keyframes imgIn{to{opacity:1}}
#ptab .igp-grid .ig-first,#pfull .igp-grid .ig-first{padding-top:30px}

/* ---------- PC : publication en grand ---------- */
#pmodal{position:fixed;inset:0;z-index:74;background:#000c;display:grid;place-items:center;padding:30px}
#pmodal[hidden]{display:none}
#pmodal.in .pm-box{animation:pmIn .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes pmIn{from{transform:scale(.96);opacity:0}}
.pm-x{position:fixed;top:16px;right:20px;width:40px;height:40px;border-radius:20px;color:#fff;font-size:22px;background:#ffffff1a}
.pm-box{display:flex;width:min(1100px,100%);height:min(86vh,760px);background:var(--chat);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px #000c}
.pm-media{position:relative;flex:1.4;min-width:0;background:#000;display:grid;place-items:center}
.pm-media img,.pm-media video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pm-stk{position:absolute;inset:0;pointer-events:none}
.pm-side{flex:1;min-width:320px;max-width:420px;display:flex;flex-direction:column;border-left:1px solid var(--border)}
.pm-side .pf-ch{border-bottom:1px solid var(--border)}
.pm-coms{flex:1;min-height:0;overflow-y:auto;padding:6px 12px}
.pm-side .pf-acts{border-top:1px solid var(--border)}
.pm-form{padding:8px 12px 12px;border-top:0}
@media (max-width:900px){#pmodal{display:none!important}}

/* ---------- Thèmes : le décor jusque sous la barre d'écriture ---------- */
#chat.decor #composer{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-top:0!important}
#chat.decor #composer .input-row{background:color-mix(in srgb,var(--th-tint) 45%,#ffffff12)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 8px 24px #0005}
#chat.decor #chat-head{background:linear-gradient(color-mix(in srgb,var(--th-tint) 70%,transparent),transparent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:0!important}
#chat.decor #view{padding-bottom:6px}
/* Aurore : plus douce, des voiles qui se fondent */
.dk-aurora .da-b{filter:blur(80px)!important;mix-blend-mode:screen;opacity:.6}
.dk-aurora .b1{background:linear-gradient(120deg,#16e0a2,#0bb3c9)!important;border-radius:40% 60% 55% 45%;animation-duration:22s!important}
.dk-aurora .b2{background:linear-gradient(200deg,#7a5cff,#b14bff)!important;border-radius:55% 45% 40% 60%;animation-duration:26s!important}
.dk-aurora .b3{opacity:.4!important;animation-duration:31s!important}
.dk-aurora .da-base{background:radial-gradient(ellipse at 50% 120%,#0d2b3a,transparent 60%),linear-gradient(180deg,#020810,#061424 60%,#0a1d2b)!important}
/* Coucher de soleil : des collines arrondies, avec de la brume */
.dk-sunset .ds-mtn path{display:none}
.dk-sunset .ds-mtn{background:none}
.dk-sunset .m1{height:30%!important;background:radial-gradient(120% 100% at 20% 100%,#3a1238 60%,transparent 61%),radial-gradient(110% 90% at 75% 100%,#4a1840 58%,transparent 59%)!important}
.dk-sunset .m2{height:20%!important;background:radial-gradient(140% 100% at 60% 100%,#1c0a20 62%,transparent 63%),radial-gradient(90% 80% at 5% 100%,#24102a 60%,transparent 61%)!important}
.dk-sunset .ds-sky::after{content:"";position:absolute;left:0;right:0;bottom:22%;height:16%;background:linear-gradient(transparent,#ffb38055,transparent);filter:blur(10px)}

/* ---------- Appareil photo : filtres sous le déclencheur, icônes plus fines ---------- */
.ct{width:38px!important;height:38px!important;border-radius:19px!important}
.ct svg{width:19px;height:19px}
.cam-tools{gap:8px!important;right:10px!important}
.cam-round{width:46px!important;height:46px!important;border-radius:23px!important}
.cam-round svg{width:22px;height:22px}
#scam.show-fx #scam-filters{bottom:calc(36px + env(safe-area-inset-bottom))!important;padding-left:calc(50% - 31px)!important;padding-right:calc(50% - 31px)!important;gap:14px!important;z-index:6}
#scam.show-fx .sf{width:62px!important}
#scam.show-fx .sf span{display:none}
#scam.show-fx .sf i{width:52px!important;height:52px!important;border-radius:50%!important;border:2px solid #fff8!important}
#scam.show-fx .sf.on i{border-color:transparent!important;box-shadow:none!important}
#scam.show-fx .cam-side,#scam.show-fx #scam-flip{opacity:0;pointer-events:none}
#scam.show-fx #scam-shutter{position:relative;z-index:7;pointer-events:auto;background:transparent}
#scam.show-fx #scam-shutter i{opacity:0}
#scam.show-fx .s-bottom{pointer-events:none}
.sf i svg{width:100%;height:100%;display:block;border-radius:inherit}
#scam-fxname{position:absolute;left:0;right:0;top:42%;text-align:center;z-index:6;color:#fff;font:800 30px Figtree,sans-serif;text-shadow:0 4px 20px #0008;opacity:0;pointer-events:none}
#scam-fxname.on{animation:fxName 1.1s ease both}
@keyframes fxName{0%{opacity:0;transform:scale(.9)}20%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

/* ---------- Note (statut) : une vraie feuille ---------- */
@media (max-width:700px){
  #cs-dlg[open]{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;border-radius:26px 26px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:psUp .34s cubic-bezier(.2,.9,.25,1)}
}
#cs-dlg h3{font:700 18px Figtree,sans-serif}
#cs-dlg .cs-row{display:flex;gap:8px}
#cs-dlg .cs-row input{height:48px;border-radius:16px;border:0;background:var(--deep);color:var(--text);font-size:16px;padding:0 14px}
#cs-dlg .emo-in{width:56px;text-align:center;font-size:22px!important}
#cs-dlg .cs-row #cs-text{flex:1;min-width:0}
#cs-dlg .cs-quick{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
#cs-dlg .cs-quick button{width:42px;height:42px;border-radius:14px;background:var(--deep);font-size:21px}
#cs-dlg menu{display:flex;gap:8px;padding:0;margin:14px 0 0}
#cs-dlg menu button{flex:1;height:46px;border-radius:16px}