.ws-wrap{position:absolute;inset:0}

/* ---- Salon ---- */
.lobby{position:absolute;inset:0;padding:30px 60px;overflow-y:auto;background:rgba(11,11,13,.55)}
.lobby .back{position:absolute;left:40px;top:20px}
.lobby>.eyebrow{margin-top:56px;text-align:center}
.lobby>h2{text-align:center;font-size:32px;margin:10px 0 8px}
.lobby>.hint{text-align:center;margin-bottom:34px}
.lobby-cards{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.lcard{width:380px;padding:30px;border-radius:22px;border:1px solid #26262c;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(14px);
  animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both;transition:.25s}
.lcard:nth-child(2){animation-delay:.12s}
.lcard:hover{transform:translateY(-6px);border-color:#555;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lcard-ico{font-size:34px;margin-bottom:6px;animation:float 3.5s ease-in-out infinite}
.lcard h3{font-size:20px}
.lcard p{font-size:13px;color:#9a9aa3;line-height:1.5;margin-bottom:12px;min-height:58px}
.lcard .primary.small{align-self:flex-start;margin-top:6px}
.lobby .msg{margin-top:26px}

/* ---- IDE ---- */
.ide{position:absolute;inset:0;display:flex;flex-direction:column;background:#0e0e11;animation:viewIn .5s cubic-bezier(.2,.8,.2,1)}
.ide[hidden]{display:none}
.ide-bar{height:44px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#121216;border-bottom:1px solid #1f1f25;font-size:13px}
.spacer{flex:1}
.tiny{height:30px;padding:0 12px;font-size:12px;border-radius:9px}
.room{display:flex;gap:8px;align-items:center;font-size:12px;color:#9a9aa3}
.room code{padding:3px 8px;border-radius:7px;background:#1b1b21;border:1px solid #2a2a31;color:#e8e8ee;cursor:pointer;transition:.15s}
.room code:hover{background:#2a2a31}
.avatars{display:flex}
.avatars .av{width:28px;height:28px;border:2px solid #121216;margin-left:-6px;animation:pop .35s;cursor:default;font-size:12px}
.ide-main{flex:1;display:flex;min-height:0}
.explorer{width:260px;min-width:160px;background:#101014;border-right:1px solid #1f1f25;display:flex;flex-direction:column;position:relative;transition:margin .25s}
.explorer.collapsed{margin-left:-260px}
.ex-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 14px;font-size:11px;letter-spacing:.12em;color:#8a8a93;font-weight:600}
.ex-btns button{background:none;border:0;color:#aaa;cursor:pointer;width:26px;height:26px;border-radius:6px;font-size:13px;transition:.15s}
.ex-btns button:hover{background:#1f1f25;color:#fff;transform:scale(1.12)}
.tree{flex:1;overflow:auto;padding:4px 0 10px;font-size:13px;user-select:none}
.tree::-webkit-scrollbar,.chat-msgs::-webkit-scrollbar{width:8px;height:8px}
.tree::-webkit-scrollbar-thumb,.chat-msgs::-webkit-scrollbar-thumb{background:#2a2a31;border-radius:8px}
.node{display:flex;align-items:center;gap:7px;height:25px;padding-right:10px;cursor:pointer;white-space:nowrap;color:#cfcfd6;transition:background .1s}
.node:hover{background:#1a1a20}
.node.active{background:#24242c;color:#fff}
.node.sel{outline:1px solid #3a3a44;outline-offset:-1px}
.node .arrow{width:12px;font-size:9px;color:#888;transition:transform .15s;text-align:center}
.node .arrow.open{transform:rotate(90deg)}
.node .fi{width:14px;text-align:center;font-size:12px}
.node.enter{animation:nodeIn .25s both}
@keyframes nodeIn{from{opacity:0;transform:translateX(-8px)}}
.dropzone{margin:8px;padding:12px;border:1px dashed #2f2f37;border-radius:10px;text-align:center;font-size:11px;color:#6f6f78;transition:.2s}
.explorer.drag .dropzone{border-color:#fff;color:#fff;background:#1a1a20;transform:scale(1.03)}
.editor-col{flex:1;display:flex;flex-direction:column;min-width:0}
.tabs{height:36px;display:flex;background:#101014;border-bottom:1px solid #1f1f25;overflow-x:auto;overflow-y:hidden}
.tabs::-webkit-scrollbar{height:4px}.tabs::-webkit-scrollbar-thumb{background:#2a2a31}
.tab{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12px;color:#8a8a93;cursor:pointer;border-right:1px solid #1a1a20;white-space:nowrap;
  animation:tabIn .25s both;transition:background .12s}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}}
.tab:hover{background:#17171c}
.tab.active{background:#0e0e11;color:#fff;box-shadow:inset 0 2px 0 var(--accent)}
.tab .x{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:11px;opacity:.5}
.tab .x:hover{background:#2a2a31;opacity:1}
.editor-area{flex:1;position:relative;min-height:0}
#editor{position:absolute;inset:0}
.viewer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0e0e11;color:#9a9aa3;font-size:14px}
.viewer[hidden],.chat[hidden],#welcome[hidden]{display:none}
.viewer img{max-width:80%;max-height:70%;border-radius:10px;border:1px solid #26262c}
.welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0e0e11;color:#8a8a93;z-index:2;animation:rise .6s}
.welcome img{width:96px;opacity:.9;animation:float 4s ease-in-out infinite}
.welcome small{color:#55555d}
.chat{height:200px;border-top:1px solid #1f1f25;background:#101014;display:flex;flex-direction:column;animation:rise .25s}
.chat-msgs{flex:1;overflow-y:auto;padding:10px 14px;font-size:13px;display:flex;flex-direction:column;gap:6px}
.cmsg{animation:rise .25s}.cmsg b{margin-right:6px}.cmsg small{color:#6f6f78;margin-left:6px;font-size:10px}
.cmsg.sys{color:#6f6f78;font-size:12px;font-style:italic}
#chatInput{height:38px;border:0;border-top:1px solid #1f1f25;background:#0b0b0d;color:#fff;padding:0 14px;outline:0;font:inherit;font-size:13px}
.status{height:26px;display:flex;align-items:center;gap:18px;padding:0 12px;background:#17171d;border-top:1px solid #1f1f25;font-size:11px;color:#aaa}
.status button{background:none;border:0;color:#ccc;cursor:pointer;font-size:11px;padding:3px 8px;border-radius:5px}
.status button:hover{background:#2a2a31}
#stConn::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ddc84;margin-right:7px;animation:blink 2s infinite}
#chatBadge{background:#e5484d;color:#fff;border-radius:9px;padding:0 6px;font-style:normal;margin-left:4px;animation:pop .3s}

/* ---- Menu contextuel ---- */
.ctx{position:fixed;z-index:200;min-width:190px;padding:6px;border-radius:12px;background:#17171c;border:1px solid #2c2c33;box-shadow:0 18px 40px rgba(0,0,0,.6);animation:sheetIn .18s}
.ctx[hidden]{display:none}
.ctx div{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer;transition:.1s}
.ctx div:hover{background:#2a2a33}.ctx div.danger:hover{background:#e5484d}
.ctx hr{border:0;border-top:1px solid #26262c;margin:4px 0}

/* ---- Curseurs distants ---- */
.rsel{opacity:.28}
.rcur{position:relative;margin-left:-1px;border-left:2px solid}
.rcur::after{position:absolute;top:-17px;left:-2px;font-size:10px;line-height:15px;padding:0 5px;border-radius:4px 4px 4px 0;color:#000;white-space:nowrap;font-weight:600;z-index:5}