/* StarTop — interface sociale (extrait de social-ui.js pour la CSP : pas de <style> injecté) */
#soc-bubbles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.bub{position:absolute;left:0;top:0;will-change:transform;contain:layout}.bub .bi{transform:translate(-50%,-100%);background:#fff;color:#1b1b2f;padding:6px 10px;border-radius:14px;font:600 13px/1.25 system-ui,sans-serif;max-width:200px;width:max-content;box-shadow:0 4px 14px #0006;white-space:normal;overflow-wrap:anywhere;position:relative;animation:bubIn .25s ease-out}.bub .bi:after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0}.bub b{display:block;font-size:11px;color:#e94560}@keyframes bubIn{from{opacity:0;transform:translate(-50%,-80%) scale(.8)}to{opacity:1}}
.soc-btn{position:relative}.soc-badge{position:absolute;top:-5px;right:-5px;background:#ffd23f;color:#111;border-radius:9px;font-size:11px;padding:1px 5px;font-weight:700}
#soc-panel{position:absolute;right:8px;top:96px;bottom:8px;width:360px;background:#141225ee;backdrop-filter:blur(8px);border:1px solid #ffffff22;border-radius:14px;z-index:6;display:flex;flex-direction:column;color:#fff;font:14px system-ui,sans-serif;box-shadow:0 10px 40px #000a;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(18px);transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s}
#soc-panel.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}#soc-panel header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #ffffff1a;font-weight:700}
#soc-panel header .x{margin-left:auto;background:#ffffff1a}#soc-body{flex:1;overflow:auto;padding:10px 12px}
.conv{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer}.conv:hover,.conv.on{background:#ffffff14}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#e94560,#ff9a5a);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;overflow:hidden}.av img{width:100%;height:100%;object-fit:cover}
.conv small{display:block;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.dot{width:9px;height:9px;border-radius:50%;background:#ffd23f;margin-left:auto;flex:none}
.msgs{display:flex;flex-direction:column;gap:6px}.msg{max-width:80%;padding:7px 10px;border-radius:14px;background:#2a2745;align-self:flex-start}.msg.me{align-self:flex-end;background:#e94560}.msg i{display:block;font-size:11px;opacity:.7;font-style:normal}.msg.pend{opacity:.6;border:1px dashed #ffd23f}
.send{display:flex;gap:6px;padding:10px;border-top:1px solid #ffffff1a}.send input{flex:1;border-radius:20px;border:0;padding:10px 14px;background:#ffffff1a;color:#fff;font-size:15px}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;background:#ffffff1f;font-size:12px;margin:2px 2px 0 0}.tag.ok{background:#0c8}.tag.warn{background:#d9a400;color:#111}.tag.red{background:#e0245e}
#soc-card{position:absolute;left:8px;bottom:8px;width:320px;background:#141225f2;border:1px solid #ffffff22;border-radius:14px;padding:12px;z-index:6;display:block;color:#fff;font:14px system-ui,sans-serif;box-shadow:0 10px 40px #000a;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s}
#soc-card.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}#soc-card .top{display:flex;gap:10px;align-items:center}#soc-card .por{width:72px;height:72px;border-radius:12px;background:#222;overflow:hidden;flex:none}#soc-card .por img{width:100%;height:100%}
#soc-card .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}#soc-card .acts button{font-size:14px}
.row{display:flex;gap:8px;align-items:center;margin:6px 0}.row label{flex:1}
table.spl{width:100%;border-collapse:collapse;font-size:13px}table.spl td,table.spl th{padding:4px 3px;border-bottom:1px solid #ffffff14;text-align:left}table.spl input{width:62px;border:0;border-radius:6px;padding:6px;background:#ffffff1a;color:#fff;font-size:14px}
.bar{height:8px;border-radius:4px;background:#ffffff14;overflow:hidden;display:flex}.bar span{display:block;height:100%}
.tot.ok{color:#5f5}.tot.bad{color:#ff6b6b}
#soc-visio{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#2a1a44,#07060f);z-index:9;display:flex;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s;flex-direction:column;color:#fff;font:14px system-ui,sans-serif}
#soc-visio.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}#soc-visio .hd{padding:12px 16px;display:flex;gap:10px;align-items:center}#soc-visio .grid{flex:1;display:grid;gap:10px;padding:10px 16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-content:center}
.tile{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3;box-shadow:0 0 0 3px transparent;transition:box-shadow .2s}.tile.spk{box-shadow:0 0 0 3px #3fff8c,0 0 22px #3fff8c88}.tile img,.tile canvas{width:100%;height:100%;object-fit:cover;display:block}
.tile .nm{position:absolute;left:8px;bottom:8px;background:#0009;padding:3px 9px;border-radius:9px;font-size:13px}.tile .mu{position:absolute;right:8px;top:8px;background:#0009;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
#soc-visio .ctl{display:flex;gap:12px;justify-content:center;padding:14px}#soc-visio .ctl button{width:58px;height:58px;border-radius:50%;font-size:22px;background:#ffffff24}#soc-visio .ctl button.end{background:#e0245e}#soc-visio .ctl button.off{background:#ffffff55}
#soc-toast{position:absolute;left:50%;top:70px;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 14px;border-radius:10px;z-index:10;font:14px system-ui;display:none}
@media (max-width:760px),(pointer:coarse){button{min-height:44px;min-width:44px;font-size:15px}#soc-panel{left:0;right:0;top:auto;bottom:0;width:auto;height:72vh;border-radius:16px 16px 0 0}#soc-card{left:0;right:0;bottom:0;width:auto;border-radius:16px 16px 0 0}table.spl input{width:70px;min-height:40px}.conv{min-height:48px}#soc-visio .grid{grid-template-columns:1fr 1fr}}

.msg .tx,.tx{overflow-wrap:anywhere;white-space:pre-wrap}
#soc-panel header .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
@media (max-width:760px){#soc-panel{transform:translateY(24px)}#soc-panel.on{transform:none}}
@media (prefers-reduced-motion:reduce){#soc-panel,#soc-card,#soc-visio,.tile,.bub .bi{transition:none!important;animation:none!important;transform:none}.bub .bi{transform:translate(-50%,-100%)}}
