:root {
  --bg-rail: #0f1012;
  --bg-side: #17181b;
  --bg-main: #1e1f22;
  --bg-bar: #232428;
  --bg-hover: #2a2b30;
  --bg-active: #35363c;
  --bg-input: #2a2b30;
  --bg-float: #111214;
  --text: #dbdee1;
  --text-strong: #f2f3f5;
  --muted: #949ba4;
  --blurple: #5865f2;
  --blurple-hover: #4752c4;
  --green: #23a559;
  --red: #f23f43;
  --yellow: #f0b232;
  --line: #2b2c31;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-main);
  color: var(--text);
  font: 16px/1.375 "gg sans", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { font: inherit; color: var(--text); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #101113; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
a { color: #00a8fc; text-decoration: none; }
a:hover { text-decoration: underline; }
svg.ico { flex: none; display: block; }
.grow { flex: 1; }

.btn { padding: 8px 16px; border-radius: 4px; font-weight: 500; background: var(--bg-active); color: var(--text-strong); font-size: 14px; }
.btn:hover { background: #40414a; }
.btn.primary { background: var(--blurple); color: #fff; }
.btn.primary:hover { background: var(--blurple-hover); }
.btn.green { background: var(--green); color: #fff; }
.btn.danger { background: var(--red); color: #fff; }
.btn.ghost { background: none; }
.btn.ghost:hover { text-decoration: underline; background: none; }
.btn.big { width: 100%; padding: 12px; font-size: 16px; border-radius: 3px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.error { color: var(--red); font-size: 14px; min-height: 18px; }

/* ── Avatars & statuts ── */
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; position: relative; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 15px; text-transform: uppercase; user-select: none;
}
.avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .dot {
  position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%;
  border: 3px solid var(--dot-bg, var(--bg-side)); box-sizing: content-box; background: #80848e;
}
.avatar .dot.online { background: var(--green); }
.avatar .dot.idle { background: var(--yellow); }
.avatar .dot.dnd { background: var(--red); }
.avatar .dot.dnd::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 2px; background: var(--dot-bg, var(--bg-side)); border-radius: 1px; }
.avatar .dot.offline, .avatar .dot.invisible { background: #80848e; }
.avatar .dot.offline::after, .avatar .dot.invisible::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--dot-bg, var(--bg-side)); }
.avatar.lg { width: 80px; height: 80px; font-size: 34px; }
.avatar.lg .dot { width: 18px; height: 18px; right: -2px; bottom: -2px; border-width: 5px; }
.avatar.lg .dot.dnd::after { top: 7px; left: 3px; right: 3px; height: 4px; }

/* ── Auth ── */
#auth {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto;
  background:
    radial-gradient(60% 50% at 15% 10%, #4b3aa8 0%, transparent 70%),
    radial-gradient(50% 50% at 90% 20%, #2b3fb8 0%, transparent 70%),
    radial-gradient(60% 60% at 60% 100%, #21206b 0%, transparent 70%),
    #0b0b2b;
}
#auth.register {
  background:
    radial-gradient(80% 60% at 0% 40%, #2a2d33 0 55%, transparent 56%),
    radial-gradient(70% 45% at 25% 105%, #d9c1d8 0 35%, transparent 36%),
    radial-gradient(60% 40% at 100% 100%, #2c86c9 0 50%, transparent 51%),
    linear-gradient(160deg, #2a2d33 0 45%, #e7e9f6 45% 100%);
}
.auth-logo { position: fixed; left: 32px; top: 32px; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 24px; letter-spacing: .02em; }
.auth-logo .lg { width: 44px; height: 32px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #23272a; }
.auth-card {
  width: 480px; max-width: 94vw; background: var(--bg-main); padding: 32px; border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.4); margin: 24px;
}
.auth-card.login { width: 784px; display: flex; gap: 48px; }
.auth-card.login .left { flex: 1; min-width: 0; }
.auth-card.login .right { width: 240px; flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 4px; }
.auth-card h1 { margin: 0; font-size: 24px; text-align: center; color: var(--text-strong); font-weight: 600; }
.auth-card .sub { text-align: center; color: var(--muted); margin: 8px 0 20px; }
.auth-card label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 20px; letter-spacing: .02em; text-transform: uppercase; }
.auth-card label i { color: var(--red); font-style: normal; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] {
  display: block; width: 100%; margin-top: 8px; padding: 10px; height: 40px; border: 0; border-radius: 3px; background: var(--bg-rail); outline: none; font-size: 16px;
}
.auth-card input:focus { outline: 2px solid var(--blurple); }
.auth-card .dob { display: flex; gap: 12px; margin-top: 8px; }
.auth-card select { flex: 1; height: 40px; background: var(--bg-rail); border: 0; border-radius: 3px; padding: 0 10px; color: var(--muted); outline: none; }
.auth-card select:focus { outline: 2px solid var(--blurple); }
.auth-card .check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; font-weight: 400; text-transform: none; color: var(--muted); margin: 8px 0 16px; }
.auth-card .check input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--blurple); flex: none; }
.auth-card .switch { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.auth-card .forgot { font-size: 14px; display: inline-block; margin: -12px 0 20px; }
.qr { width: 176px; height: 176px; background: #fff; border-radius: 4px; padding: 8px; margin-bottom: 24px; position: relative; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr .center { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%,-50%); background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.qr .center span { width: 32px; height: 32px; border-radius: 50%; background: #23272a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.auth-card .right h2 { margin: 0 0 8px; font-size: 24px; color: var(--text-strong); font-weight: 600; }
.auth-card .right p { margin: 0 0 20px; color: var(--muted); font-size: 16px; }

/* ── Layout ── */
#app { display: flex; height: 100vh; }
#rail {
  width: 72px; flex: none; background: var(--bg-rail); display: flex; flex-direction: column;
  align-items: center; padding: 12px 0; gap: 8px; overflow-y: auto;
}
#rail::-webkit-scrollbar { display: none; }
.rail-item { position: relative; width: 48px; height: 48px; flex: none; }
.rail-item .pill {
  position: absolute; left: -12px; top: 50%; width: 8px; height: 0; background: #fff;
  border-radius: 0 4px 4px 0; transform: translateY(-50%); transition: height .15s;
}
.rail-item.unread .pill { height: 8px; }
.rail-item.active .pill { height: 40px; }
.rail-item:hover:not(.active) .pill { height: 20px; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg-main); display: flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: var(--text);
  transition: border-radius .15s, background .15s; overflow: hidden; white-space: nowrap;
}
.rail-btn img { width: 100%; height: 100%; object-fit: cover; }
.rail-btn:hover, .rail-item.active .rail-btn { border-radius: 16px; background: var(--blurple); color: #fff; }
.rail-btn.plain:hover, .rail-item.active .rail-btn.has-icon { background: var(--bg-main); }
.rail-btn.green { color: var(--green); background: var(--bg-main); }
.rail-btn.green:hover { background: var(--green); color: #fff; }
.rail-sep { width: 32px; height: 2px; background: var(--bg-main); border-radius: 1px; flex: none; }
.badge {
  position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 8px;
  border: 3px solid var(--bg-rail); box-sizing: content-box; display: flex; align-items: center; justify-content: center;
}
.rail-voice { position: absolute; right: -3px; top: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-rail); box-sizing: content-box; }

#sidebar { width: 240px; flex: none; background: var(--bg-side); display: flex; flex-direction: column; min-height: 0; --dot-bg: var(--bg-side); }
#sidebar-head {
  height: 48px; flex: none; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 600; color: var(--text-strong); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
}
#sidebar-head:hover { background: var(--bg-hover); }
#sidebar-head .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
#sidebar-head.search { padding: 10px 10px; height: 48px; }
.search-btn { width: 100%; height: 28px; border-radius: 4px; background: var(--bg-rail); color: var(--muted); font-size: 13px; text-align: left; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#channel-list { flex: 1; overflow-y: auto; padding: 8px 8px 0; }
.nav-row {
  display: flex; align-items: center; gap: 12px; padding: 0 8px; height: 42px; margin-bottom: 2px; border-radius: 4px;
  color: var(--muted); cursor: pointer; font-weight: 500; user-select: none;
}
.nav-row.sm { height: 34px; gap: 10px; }
.nav-row:hover { background: var(--bg-hover); color: var(--text); }
.nav-row.active { background: var(--bg-active); color: var(--text-strong); }
.nav-row .pilltag { margin-left: auto; font-size: 10px; font-weight: 700; background: #fff; color: #111; border-radius: 8px; padding: 1px 6px; }
.nav-row .count { margin-left: auto; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.list-sep { height: 1px; background: var(--line); margin: 8px 0; }
.cat {
  display: flex; align-items: center; gap: 2px; padding: 16px 4px 4px 0; font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer; user-select: none;
}
.cat:hover { color: var(--text); }
.cat .cn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat .plus { opacity: 0; }
.cat:hover .plus { opacity: 1; }
.cat .plus:hover { color: var(--text-strong); }
.cat.head { padding-top: 12px; }
.cat > svg:first-child { transition: transform .12s; }
.cat.collapsed > svg:first-child { transform: rotate(-90deg); }
.channel {
  display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 34px; margin-bottom: 2px; border-radius: 4px;
  color: var(--muted); cursor: pointer; font-weight: 500; user-select: none;
}
.channel:hover { background: var(--bg-hover); color: var(--text); }
.channel.active { background: var(--bg-active); color: var(--text-strong); }
.channel.unread { color: var(--text-strong); font-weight: 700; }
.channel .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.channel .acts { display: none; gap: 4px; color: var(--muted); }
.channel:hover .acts, .channel.active .acts { display: flex; }
.channel .acts button:hover { color: var(--text-strong); }
.channel .timer { font-size: 12px; color: var(--green); font-variant-numeric: tabular-nums; }
.channel.live { color: var(--green); }
.channel.live.active { color: var(--green); }
.dm-row { height: 44px; gap: 12px; }
.dm-row .who { min-width: 0; line-height: 1.15; flex: 1; }
.dm-row .who b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row .who small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .who b { color: var(--text-strong); font-weight: 700; }
.voice-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 32px; color: var(--muted); font-size: 14px; border-radius: 4px; cursor: default; }
.voice-user:hover { background: var(--bg-hover); }
.voice-user .avatar { width: 24px; height: 24px; font-size: 12px; }
.voice-user .vn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.voice-user .st { margin-left: auto; display: flex; gap: 4px; align-items: center; color: var(--muted); }
.voice-user .live-pill, .live-pill { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; }
.voice-user.speaking .avatar { box-shadow: 0 0 0 2px var(--green); }

#voice-panel { flex: none; padding: 10px 12px 8px; background: var(--bg-bar); border-top: 1px solid var(--line); }
#voice-panel .top { display: flex; align-items: center; gap: 10px; }
#voice-panel .status { color: var(--green); font-weight: 600; font-size: 14px; line-height: 1.2; }
#voice-panel .where { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; max-width: 140px; }
#voice-panel .where:hover { text-decoration: underline; }
#voice-panel .btns { display: flex; gap: 6px; margin-top: 8px; }
#voice-panel .btns button { flex: 1; height: 32px; background: var(--bg-active); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text); }
#voice-panel .btns button:hover { background: #45464e; }
#voice-panel .btns button.live { background: var(--green); color: #fff; }

#userbar { height: 56px; flex: none; background: var(--bg-bar); display: flex; align-items: center; gap: 4px; padding: 0 8px; --dot-bg: var(--bg-bar); }
#userbar .me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 4px; cursor: pointer; }
#userbar .me:hover { background: var(--bg-hover); }
#userbar .who { min-width: 0; line-height: 1.15; }
#userbar .who b { display: block; font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#userbar .who small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: 32px; height: 32px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-strong); }
.icon-btn.on { color: var(--red); }
.icon-btn.act { color: var(--text-strong); background: var(--bg-active); }
.split { display: inline-flex; align-items: center; }
.split .icon-btn.caret { width: 16px; }

/* ── Barre du haut + contenu ── */
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#chat-head {
  height: 48px; flex: none; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); font-weight: 600; color: var(--text-strong); --dot-bg: var(--bg-main);
}
#chat-head .hash { color: var(--muted); display: flex; }
#chat-head .vsep { width: 1px; height: 24px; background: #3f4147; margin: 0 8px; }
#chat-head .tab { padding: 2px 10px; border-radius: 4px; color: var(--muted); font-weight: 500; font-size: 15px; height: 28px; }
#chat-head .tab:hover { background: var(--bg-hover); color: var(--text); }
#chat-head .tab.sel { background: var(--bg-active); color: var(--text-strong); }
#chat-head .tab.add { background: var(--blurple); color: #fff; }
#chat-head .tab.add.sel { background: none; color: #00a8fc; }
#chat-head .hsub { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
#chat-head .searchbox { width: 160px; height: 24px; background: var(--bg-rail); border-radius: 4px; display: flex; align-items: center; padding: 0 6px; gap: 4px; color: var(--muted); transition: width .2s; }
#chat-head .searchbox:focus-within { width: 240px; }
#chat-head .searchbox input { background: none; border: 0; outline: none; flex: 1; min-width: 0; font-size: 13px; }
#content { flex: 1; display: flex; min-height: 0; position: relative; }
#chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#messages { flex: 1; overflow-y: auto; padding: 16px 0 8px; }
.welcome { padding: 16px; }
.welcome .big { width: 68px; height: 68px; border-radius: 50%; background: var(--bg-active); display: flex; align-items: center; justify-content: center; color: var(--text-strong); margin-bottom: 8px; }
.welcome h2 { margin: 0 0 8px; font-size: 32px; color: var(--text-strong); }
.welcome p { margin: 0 0 12px; color: var(--muted); }
.welcome .btn { display: inline-flex; align-items: center; gap: 8px; }
.day { display: flex; align-items: center; margin: 16px 16px 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: #3f4147; }
.day span { padding: 0 8px; }
.msg { position: relative; padding: 2px 48px 2px 72px; --dot-bg: var(--bg-main); }
.msg.head { margin-top: 16px; }
.msg:hover { background: rgba(255,255,255,.02); }
.msg > .avatar { position: absolute; left: 16px; top: 4px; width: 40px; height: 40px; cursor: pointer; }
.msg .time-side { position: absolute; left: 0; width: 72px; text-align: center; font-size: 11px; color: var(--muted); line-height: 22px; visibility: hidden; }
.msg:hover .time-side { visibility: visible; }
.msg .meta { line-height: 22px; }
.msg .author { font-weight: 500; color: var(--text-strong); margin-right: 8px; cursor: pointer; }
.msg .author:hover { text-decoration: underline; }
.msg .ts { font-size: 12px; color: var(--muted); }
.msg .pinmark { color: var(--muted); margin-left: 6px; vertical-align: middle; }
.msg .text { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 22px; }
.msg .text code { background: var(--bg-side); padding: 2px 4px; border-radius: 3px; font-family: Consolas, monospace; font-size: 14px; }
.msg .text pre { background: var(--bg-side); border: 1px solid var(--line); border-radius: 4px; padding: 8px; margin: 4px 0; font-family: Consolas, monospace; font-size: 14px; overflow-x: auto; white-space: pre; }
.msg .text pre code { padding: 0; background: none; }
.msg .attach-img { display: block; max-width: min(420px, 100%); max-height: 350px; border-radius: 6px; margin-top: 4px; cursor: zoom-in; }
.msg video, .msg audio { display: block; max-width: min(420px, 100%); margin-top: 4px; border-radius: 6px; }
.file-card { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 14px; background: var(--bg-side); border: 1px solid var(--line); border-radius: 6px; max-width: 420px; }
.file-card .fn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.file-card small { color: var(--muted); }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 8px; background: var(--bg-hover); border: 1px solid transparent; font-size: 14px; height: 26px; }
.react:hover { border-color: #5c5f66; }
.react.mine { background: rgba(88,101,242,.25); border-color: var(--blurple); }
.react b { font-weight: 500; font-size: 13px; }
.toolbar { position: absolute; right: 16px; top: -14px; display: none; background: var(--bg-main); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 5; }
.msg:hover .toolbar { display: flex; }
.toolbar button { width: 32px; height: 32px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.toolbar button:hover { background: var(--bg-hover); color: var(--text-strong); }
.toolbar button.del:hover { color: var(--red); }

#typing { height: 24px; padding: 0 16px; font-size: 13px; font-weight: 600; flex: none; line-height: 24px; }
#composer-wrap { padding: 0 16px 24px; flex: none; }
#pending { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-side); border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--line); font-size: 14px; }
#pending .x { margin-left: auto; color: var(--red); }
#composer { display: flex; align-items: flex-start; background: var(--bg-input); border-radius: 8px; padding: 0 8px 0 4px; }
#pending:not([hidden]) + #composer { border-radius: 0 0 8px 8px; }
#composer textarea { flex: 1; background: none; border: 0; outline: none; resize: none; padding: 11px 6px; max-height: 50vh; line-height: 22px; }
#composer .icon-btn { width: 36px; height: 44px; }
#composer .icon-btn:first-child svg { background: var(--muted); color: var(--bg-input); border-radius: 50%; padding: 3px; width: 24px; height: 24px; }
.composer-tools { display: flex; }
.composer-tools .icon-btn { width: 34px; }
.gif-tag { font-size: 11px; font-weight: 800; border: 2px solid currentColor; border-radius: 4px; padding: 0 3px; line-height: 14px; }

#members { width: 240px; flex: none; background: var(--bg-side); overflow-y: auto; padding: 8px 8px 16px; --dot-bg: var(--bg-side); }
#members .cat { cursor: default; padding-top: 20px; font-size: 12px; font-weight: 600; }
.member { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px; color: var(--muted); font-weight: 500; cursor: pointer; }
.member:hover { background: var(--bg-hover); }
.member.on { color: var(--text); }
.member.off .avatar > *:not(.dot) { opacity: .45; }
.member .who { min-width: 0; line-height: 1.15; flex: 1; }
.member .who b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .who small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .crown { color: var(--yellow); }

/* ── Pages Amis / Demandes ── */
#page { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 30px; }
.page-search { position: relative; margin-bottom: 16px; }
.page-search input { width: 100%; height: 36px; background: var(--bg-rail); border: 0; border-radius: 8px; padding: 0 40px 0 12px; outline: none; }
.page-search svg { position: absolute; right: 10px; top: 8px; color: var(--muted); }
.page h3, .page .lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0; text-transform: none; }
.prow { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-top: 1px solid var(--line); border-radius: 8px; --dot-bg: var(--bg-main); }
.prow:hover { background: var(--bg-hover); --dot-bg: var(--bg-hover); }
.prow .who { flex: 1; min-width: 0; line-height: 1.2; }
.prow .who b { font-weight: 600; color: var(--text-strong); }
.prow .who span { color: var(--muted); font-size: 14px; margin-left: 6px; }
.prow .who small { display: block; color: var(--muted); font-size: 14px; }
.prow .acts { display: flex; gap: 8px; }
.round { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-side); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.round:hover { color: var(--text-strong); }
.round.ok:hover { color: var(--green); }
.round.no:hover { color: var(--red); }
.add-friend { max-width: 800px; }
.add-friend h2 { margin: 0 0 4px; font-size: 16px; color: var(--text-strong); }
.add-friend p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.add-friend .box { display: flex; gap: 8px; background: var(--bg-rail); border: 1px solid #101113; border-radius: 8px; padding: 12px; align-items: center; }
.add-friend .box:focus-within { border-color: var(--blurple); }
.add-friend .box input { flex: 1; background: none; border: 0; outline: none; }
.add-friend .msg-ok { color: var(--green); font-size: 14px; margin-top: 8px; }
.req-empty, .empty { color: var(--muted); text-align: center; margin-top: 80px; }
.req-row { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-top: 1px solid var(--line); }
.req-row .who { flex: 1; min-width: 0; }
.req-row .who b { color: var(--text-strong); }
.req-row .who span { color: var(--muted); font-size: 14px; margin-left: 6px; }
.req-row .who small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-row .acts { display: flex; gap: 8px; }
.empty-home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--muted); text-align: center; padding: 24px; height: 100%; }
.empty-home h2 { color: var(--text-strong); margin: 0; }

/* ── Vue vocale ── */
#voice-view { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #000; position: relative; }
#tiles { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-content: center; padding: 16px; overflow-y: auto; --dot-bg: #1e1f22; }
.tile {
  position: relative; width: 100%; aspect-ratio: 16/9; background: #1a1b1e; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; outline: 3px solid transparent; outline-offset: -3px;
  transition: outline-color .1s; cursor: pointer; min-height: 0;
}
.tile.speaking { outline-color: var(--green); }
.tile .avatar { width: 80px; height: 80px; font-size: 34px; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; }
.tile.has-video video { display: block; }
.tile.has-video .avatar { display: none; }
.tile .label { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.7); padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #fff; display: flex; gap: 6px; align-items: center; max-width: 90%; }
.tile .live-pill { position: absolute; right: 8px; top: 8px; }
#tiles.stage { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; }
#tiles.stage .tile { width: 190px; flex: none; }
#tiles.stage .tile .avatar { width: 48px; height: 48px; font-size: 20px; }
#tiles.stage .tile.focus { order: -1; width: 100%; aspect-ratio: auto; height: calc(100% - 132px); min-height: 220px; }
#tiles.stage .tile.focus .avatar { width: 80px; height: 80px; }
#voice-bar { flex: none; height: 80px; display: flex; align-items: center; justify-content: center; position: relative; }
#voice-bar .grp { display: flex; align-items: center; gap: 4px; background: #17181b; border-radius: 12px; padding: 6px; }
#voice-bar .ctl { height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; background: #26272b; color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; }
#voice-bar .ctl:hover { background: #33343a; }
#voice-bar .ctl.off { background: #fff; color: #111; }
#voice-bar .ctl.live { background: var(--green); color: #fff; }
#voice-bar .ctl.hang { background: var(--red); color: #fff; padding: 0 14px; }
#voice-bar .ctl.hang:hover { background: #d83539; }
#voice-bar .caret { width: 20px; padding: 0; height: 44px; background: none; border-radius: 6px; color: #b5bac1; display: flex; align-items: center; justify-content: center; }
#voice-bar .caret:hover { background: #26272b; }
#voice-bar .right { position: absolute; right: 16px; display: flex; gap: 8px; }
#voice-bar .left { position: absolute; left: 16px; display: flex; gap: 8px; }
#voice-bar .right button, #voice-bar .left button { color: #b5bac1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
#voice-bar .right button:hover, #voice-bar .left button:hover { background: #26272b; color: #fff; }
.voice-wait { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ── Popovers / menus ── */
.menu {
  position: fixed; z-index: 80; min-width: 220px; max-width: 320px; background: #111214; border: 1px solid #26272b; border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5); padding: 6px 8px; font-size: 14px;
}
.menu .it { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 3px; cursor: pointer; color: var(--text); }
.menu .it:hover { background: var(--blurple); color: #fff; }
.menu .it.danger { color: #f23f43; }
.menu .it.danger:hover { background: var(--red); color: #fff; }
.menu .it .grow { flex: 1; }
.menu .it.sel::after { content: "✓"; margin-left: auto; }
.menu .sep { height: 1px; background: #26272b; margin: 4px 0; }
.menu .mh { padding: 6px 8px 2px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.menu .it .sdot { width: 10px; height: 10px; border-radius: 50%; }
.profile-card { position: fixed; z-index: 80; width: 340px; max-width: 94vw; background: #111214; border: 1px solid #26272b; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.6); overflow: hidden; --dot-bg: #111214; }
.profile-card .banner { height: 100px; }
.profile-card .av { position: absolute; left: 16px; top: 58px; }
.profile-card .av .avatar { border: 6px solid #111214; width: 92px; height: 92px; box-sizing: border-box; font-size: 38px; }
.profile-card .av .avatar .dot { right: 0; bottom: 0; width: 16px; height: 16px; border-width: 5px; }
.profile-card .cs { position: absolute; left: 116px; top: 108px; background: #2b2d31; border-radius: 12px; padding: 6px 12px; font-size: 13px; color: var(--muted); max-width: 200px; cursor: pointer; }
.profile-card .body { padding: 60px 12px 12px; position: relative; }
.profile-card .box { background: #1a1b1e; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.profile-card h3 { margin: 0; font-size: 20px; color: var(--text-strong); font-weight: 700; }
.profile-card .un { color: var(--text); font-size: 14px; }
.profile-card .bio { margin-top: 10px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-card .lab { font-size: 12px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; margin-bottom: 6px; }
.profile-card .act { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 4px; color: var(--muted); cursor: pointer; }
.profile-card .act:hover { background: var(--bg-hover); color: var(--text-strong); }
.profile-card .act .grow { flex: 1; }
.profile-card .vc { display: flex; align-items: center; gap: 10px; }
.profile-card .vbtn { width: 100%; margin-top: 10px; height: 36px; background: #2b2d31; border-radius: 4px; font-weight: 500; }
.profile-card .vbtn:hover { background: #35373c; }
.profile-card .sub { padding-left: 24px; }

/* ── Modales ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { width: 440px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: #242529; border-radius: 8px; padding: 24px; position: relative; }
.modal.wide { width: 860px; }
.modal h2 { margin: 0 0 8px; color: var(--text-strong); font-size: 24px; text-align: center; font-weight: 600; }
.modal .close { position: absolute; right: 12px; top: 12px; color: var(--muted); }
.modal .close:hover { color: var(--text-strong); }
.modal p.sub { color: var(--muted); text-align: center; margin: 0 0 16px; font-size: 14px; }
.modal label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 14px 0 8px; text-transform: uppercase; }
.modal label i { color: var(--red); font-style: normal; }
.modal input[type=text], .modal textarea, .modal select { width: 100%; padding: 10px; background: var(--bg-rail); border: 0; border-radius: 3px; outline: none; }
.modal input[type=text]:focus, .modal textarea:focus { outline: 2px solid var(--blurple); }
.modal textarea { resize: none; height: 90px; }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 20px; }
.modal .row.between { justify-content: space-between; }
.modal .code { display: flex; gap: 8px; }
.modal .code input { flex: 1; }
.modal .seg { display: flex; flex-direction: column; gap: 8px; }
.modal .seg button { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-side); border: 2px solid transparent; border-radius: 4px; text-align: left; }
.modal .seg button.sel { border-color: var(--blurple); background: var(--bg-active); }
.modal .seg button small { display: block; color: var(--muted); }
.modal .opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 8px; background: #2b2d31; border: 1px solid #1a1b1e; border-radius: 8px; text-align: left; }
.modal .opt:hover { background: #35373c; }
.modal .opt .grow { flex: 1; }
.modal .opt .e { font-size: 24px; width: 32px; text-align: center; }
.modal .bottom { text-align: center; margin-top: 16px; }
.modal .bottom h4 { margin: 0 0 8px; color: var(--text-strong); font-size: 16px; }
.modal .iconpick { width: 80px; height: 80px; margin: 8px auto 4px; border: 2px dashed var(--muted); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; overflow: hidden; position: relative; }
.modal .iconpick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal .iconpick .pl { position: absolute; right: -2px; top: -2px; }
.modal hr { border: 0; border-top: 1px solid #3f4147; margin: 20px 0 4px; }
.profile-edit { display: flex; gap: 24px; }
.profile-edit .form { flex: 1; min-width: 0; }
.profile-edit .prev { width: 320px; flex: none; }
.profile-edit .prev .profile-card { position: relative; width: 100%; box-shadow: none; border: 1px solid #2f3035; }
.profile-edit .prev .banner { height: 100px; }
.profile-edit h2 { text-align: left; font-size: 20px; }
@media (max-width: 800px) { .profile-edit .prev { display: none; } .auth-card.login .right { display: none; } .auth-card.login { width: 480px; } }

.picker { position: fixed; z-index: 90; width: 340px; height: 320px; background: #1e1f22; border: 1px solid #101113; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.picker .cats { display: flex; padding: 6px; gap: 2px; border-bottom: 1px solid #101113; }
.picker .cats button { flex: 1; padding: 4px; border-radius: 4px; font-size: 18px; }
.picker .cats button:hover { background: var(--bg-hover); }
.picker .grid { flex: 1; overflow-y: auto; padding: 6px; }
.picker .em { display: flex; flex-wrap: wrap; }
.picker .em button { width: 36px; height: 36px; font-size: 22px; border-radius: 4px; }
.picker .em button:hover { background: var(--bg-active); }
.results { position: fixed; z-index: 85; width: 420px; max-height: 70vh; overflow-y: auto; background: #111214; border: 1px solid #26272b; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.results h4 { margin: 0; padding: 12px 16px; font-size: 12px; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid #26272b; }
.results .r { padding: 10px 16px; border-bottom: 1px solid #1c1d20; cursor: pointer; }
.results .r:hover { background: var(--bg-hover); }
.results .r small { color: var(--muted); }
.results .r div { overflow-wrap: anywhere; font-size: 14px; }
.results .none { padding: 24px; color: var(--muted); text-align: center; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg-float); border-left: 4px solid var(--blurple); padding: 10px 14px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.4); max-width: 320px; }
.toast.err { border-color: var(--red); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 120; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; }

@media (max-width: 900px) { #members { display: none; } }
@media (max-width: 640px) { #sidebar { width: 200px; } .msg { padding-left: 60px; } }

/* ───────── Bot : badge APP, mentions, embeds, boutons, menus, messages éphémères ───────── */
.app-tag { display: inline-block; background: var(--blurple); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; padding: 0 4px; border-radius: 3px; margin-right: 6px; vertical-align: 2px; letter-spacing: .02em; }
.member .who .app-tag { margin-left: 4px; vertical-align: 1px; }
.mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; cursor: pointer; }
.mention:hover { background: var(--blurple); color: #fff; }
.mention.role { cursor: default; }
.ts-tag { background: rgba(255,255,255,.06); border-radius: 3px; padding: 0 2px; }
.embed { display: flex; gap: 16px; max-width: 520px; margin-top: 4px; background: #2b2d31; border-left: 4px solid #1e1f22; border-radius: 4px; padding: 8px 16px 16px 12px; }
.embed .e-main { flex: 1; min-width: 0; }
.embed .e-title { font-weight: 600; color: var(--text-strong); margin-top: 8px; }
.embed .e-title a { color: #00a8fc; }
.embed .e-desc { margin-top: 8px; font-size: 14px; line-height: 1.375; white-space: pre-wrap; overflow-wrap: anywhere; }
.embed .e-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.embed .e-field { grid-column: 1 / -1; font-size: 14px; min-width: 0; }
.embed .e-field.inline { grid-column: auto; }
.embed .e-field .fn { font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.embed .e-field .fv { white-space: pre-wrap; overflow-wrap: anywhere; }
.embed .e-image { display: block; max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 16px; cursor: zoom-in; }
.embed .e-thumb { flex: none; margin-top: 8px; }
.embed .e-thumb img, .embed .e-thumb .avatar { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; }
.embed .e-thumb .avatar { border-radius: 4px; font-size: 34px; }
.embed .e-thumb .avatar > img { border-radius: 4px; }
.embed .e-footer { margin-top: 8px; font-size: 12px; color: var(--text); }
.embed a { color: #00a8fc; }
.comps { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.c-row { display: flex; flex-wrap: wrap; gap: 8px; }
.c-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; }
.c-btn:hover { filter: brightness(1.12); }
.c-btn.primary { background: var(--blurple); }
.c-btn.success { background: #248046; }
.c-btn.danger { background: #da373c; }
.c-btn.link { background: #4e5058; }
.c-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.c-emoji { width: 20px; height: 20px; object-fit: contain; font-size: 16px; line-height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.c-select { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 8px 0 12px; background: #1e1f22; border: 1px solid #111214; border-radius: 4px; color: var(--muted); cursor: pointer; max-width: 400px; }
.c-select:hover { border-color: #000; }
.c-menu { max-height: 340px; overflow-y: auto; padding: 8px; }
.c-menu .it input { margin: 0; accent-color: var(--blurple); }
.msg.ephemeral { background: rgba(88,101,242,.06); }
.msg .eph { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.msg .eph a { color: #00a8fc; }
#composer.locked { opacity: .6; }
#composer textarea:disabled { cursor: not-allowed; }
.channel .limit { font-size: 11px; color: var(--muted); background: var(--bg-rail); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; background: #2b2d31; border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.role-chip i { width: 10px; height: 10px; border-radius: 50%; }
.role-chip b { cursor: pointer; color: var(--muted); margin-left: 2px; }
.role-chip b:hover { color: var(--red); }
.role-chip.add { cursor: pointer; padding: 2px 8px; font-weight: 700; }
.role-chip.add:hover { background: var(--blurple); color: #fff; }

/* ───────── Bulle des participants au-dessus de « Voix connectée » ───────── */
.vc-bubble { display: flex; align-items: center; gap: 0; background: var(--bg-rail); border-radius: 999px; padding: 4px 12px 4px 6px; margin-bottom: 10px; cursor: pointer; width: fit-content; max-width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.vc-bubble:hover { background: #1a1b1e; }
.vc-bubble .vb-av { margin-left: -6px; border-radius: 50%; border: 2px solid var(--bg-rail); display: inline-flex; transition: box-shadow .1s; }
.vc-bubble .vb-av:first-child { margin-left: 0; }
.vc-bubble .vb-av .avatar { width: 26px; height: 26px; font-size: 12px; }
.vc-bubble .vb-av.speaking { box-shadow: 0 0 0 2px var(--green); }
.vc-bubble .vb-more { margin-left: 4px; font-size: 12px; color: var(--muted); }
.vc-bubble .vb-n { margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ───────── Menu du stream (comme Discord) ───────── */
.smenu { min-width: 250px; padding: 8px; }
.smenu .it { padding: 9px 8px; font-size: 15px; font-weight: 500; position: relative; }
.smenu .it:hover { background: #2b2d31; color: var(--text-strong); }
.smenu .it.danger:hover { background: #2b2d31; color: #f23f43; }
.smenu .cbox { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #4e5058; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.smenu .cbox.on { background: var(--blurple); border-color: var(--blurple); }
.smenu .submenu { display: none; position: absolute; left: calc(100% + 6px); top: -8px; min-width: 190px; background: #111214; border: 1px solid #26272b; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.5); padding: 8px; cursor: default; max-height: 70vh; overflow-y: auto; }
.smenu .it.sub:hover > .submenu { display: block; }
.smenu .submenu::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
.smenu .submenu .mh { text-transform: none; font-size: 14px; font-weight: 500; padding: 8px 8px 6px; }
.smenu .submenu .it { cursor: pointer; }
.smenu .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b5bac1; box-sizing: border-box; }
.smenu .radio.on { border: 6px solid var(--blurple); background: #fff; }
.smenu .submenu[style*="right"]::before { left: auto; right: -10px; }

/* ───────── Appli PC : choix de l'écran, appuyer-pour-parler ───────── */
.pick-tabs { display: flex; gap: 8px; margin: 8px 0 12px; }
.pick-tabs button { padding: 6px 14px; border-radius: 4px; color: var(--muted); font-weight: 600; }
.pick-tabs button.sel { background: var(--bg-active); color: var(--text-strong); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 50vh; overflow-y: auto; }
.pick { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 6px; background: var(--bg-side); border: 2px solid transparent; text-align: left; }
.pick:hover { background: var(--bg-hover); }
.pick.sel { border-color: var(--blurple); }
.pick > img, .pick .noth { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }
.pick span { display: flex; align-items: center; gap: 6px; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pick .pi { width: 16px; height: 16px; flex: none; }
.keycap { min-width: 90px; padding: 8px 12px; background: var(--bg-rail); border-radius: 4px; font-weight: 600; text-align: center; }
#userbar.ptt-live .avatar { box-shadow: 0 0 0 2px var(--green); }

/* ───────── GHOSTY : logo, écran de chargement ───────── */
#boot-splash { position: fixed; inset: 0; z-index: 1000; background: var(--bg-main); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: opacity .3s; }
#boot-splash.out { opacity: 0; pointer-events: none; }
#boot-splash img { width: 160px; height: 160px; }
#boot-splash b { font-size: 24px; font-weight: 800; letter-spacing: .14em; color: var(--text-strong); }
.auth-logo .gh-logo { width: 40px; height: 40px; margin-right: 10px; }
.rail-btn .rail-logo { width: 34px; height: 34px; object-fit: contain; }
.qr .center img { width: 100%; height: 100%; object-fit: contain; }

/* ───────── mise à jour de l'appli PC ───────── */
#chat-head .upd-btn { color: #23a55a; margin-left: auto; }
#chat-head .upd-btn:hover { color: #2dc770; }
.modal .upd-cancel { width: 100%; margin-top: 14px; background: #3a3b42; color: #fff; }
.modal .upd-cancel:hover { background: #45464e; }

/* ───────── mise à jour : gris = à jour, vert = prête ───────── */
#chat-head .upd-btn { color: var(--muted); }
#chat-head .upd-btn:hover { color: var(--text-strong); }
#chat-head .upd-btn.ready { color: #23a55a; }
#chat-head .upd-btn.ready:hover { color: #2dc770; }
/* ───────── sous-menu du stream : ouvert par JS (classe .open) ───────── */
.smenu .it.sub:hover > .submenu { display: none; }
.smenu .it.sub.open > .submenu { display: block; }
.smenu .it.sub.open { background: #2b2d31; color: var(--text-strong); }
/* ───────── bannière du serveur ───────── */
#sidebar-head.banner { height: 138px; align-items: flex-start; padding-top: 14px; background-size: cover; background-position: center; position: relative; border-bottom: none; }
#sidebar-head.banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0) 45%); pointer-events: none; }
#sidebar-head.banner > * { position: relative; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#sidebar-head.banner:hover { background-color: transparent; filter: brightness(1.06); }
.bannerpick { height: 120px; border-radius: 8px; border: 2px dashed #4e5058; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); cursor: pointer; overflow: hidden; font-size: 13px; }
.bannerpick:hover { border-color: var(--blurple); color: var(--text-strong); }
.bannerpick img { width: 100%; height: 100%; object-fit: cover; }
.bannerpick.busy { opacity: .5; pointer-events: none; }

/* ───────── QR code de la page de connexion (vrai code → site vitrine) ───────── */
.auth-card .qr { display: block; position: relative; cursor: pointer; }
.auth-card .qr img.code { width: 100%; height: 100%; display: block; }
/* ───────── envoi de gros fichiers : progression ───────── */
#pending .up-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#pending .up-bar { display: block; height: 6px; border-radius: 3px; background: #3f4147; overflow: hidden; }
#pending .up-bar i { display: block; height: 100%; background: var(--blurple); transition: width .2s; }
#pending .up-pct { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; min-width: 48px; text-align: right; }

/* ───────── annonce des administrateurs ───────── */
#announce { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: linear-gradient(90deg, #5865f2, #8b5cf6); color: #fff; font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
#announce .tx { flex: 1; }
#announce button { background: none; border: 0; color: #fff; cursor: pointer; display: flex; padding: 4px; border-radius: 4px; }
#announce button:hover { background: rgba(255,255,255,.2); }

/* ───────── Paramètres du serveur (plein écran) ───────── */
#ssettings { position: fixed; inset: 0; z-index: 60; display: flex; background: var(--bg-main); animation: ssIn .15s ease-out; }
@keyframes ssIn { from { opacity: 0; transform: scale(1.02); } }
.ss-side { flex: 1 0 218px; background: var(--bg-side); display: flex; justify-content: flex-end; overflow-y: auto; }
.ss-nav { width: 218px; padding: 60px 6px 60px 20px; }
.ss-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 6px 10px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 6px 10px; margin: 2px 0; border-radius: 4px; color: var(--muted); font-size: 15px; font-weight: 500; }
.ss-item:hover { background: var(--bg-hover); color: var(--text); }
.ss-item.sel { background: var(--bg-active); color: var(--text-strong); }
.ss-item.danger { color: #f87171; }
.ss-sep { height: 1px; background: var(--line); margin: 8px 10px; }
.ss-main { flex: 1 1 800px; display: flex; overflow-y: auto; position: relative; }
.ss-content { flex: 1; max-width: 1000px; padding: 60px 40px 120px; }
.ss-close { position: sticky; top: 60px; height: 0; margin-right: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.ss-close button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ss-close button:hover { border-color: var(--text-strong); color: var(--text-strong); }
.ss-content h2 { margin: 0 0 6px; font-size: 20px; color: var(--text-strong); }
.ss-lead { margin: 0 0 20px; color: var(--text); font-size: 14px; }
.ss-content section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.ss-content section h3 { margin: 0 0 6px; font-size: 16px; color: var(--text-strong); }
.ss-hint { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.ss-content input[type=text], .ss-content textarea { width: 100%; background: var(--bg-rail); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; outline: none; resize: vertical; }
.ss-content input[type=text]:focus, .ss-content textarea:focus { border-color: var(--blurple); }
.ss-count { text-align: right; color: var(--muted); font-size: 12px; margin-top: 4px; }
.ss-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.ss-preview { position: sticky; top: 20px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn.link-danger { background: transparent; color: #f87171; }
.btn.link-danger:hover { background: rgba(248,113,113,.1); }
.btn.green { background: var(--green); color: #fff; }
.btn.green:hover { background: #1a8a4a; }
.btn:disabled { opacity: .5; pointer-events: none; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 560px; }
.swatch { height: 64px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.swatch:hover { transform: translateY(-1px); }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--blurple); }
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.trait { display: flex; align-items: center; gap: 6px; background: var(--bg-rail); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.trait input { flex: 1; min-width: 0; background: none !important; border: 0 !important; padding: 8px 2px !important; }
.t-emoji { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); }
.t-emoji:hover { background: var(--bg-hover); }
.t-rm { color: var(--muted); border-radius: 50%; padding: 3px; display: flex; }
.t-rm:hover { color: var(--text-strong); background: var(--bg-hover); }
.trait input:placeholder-shown + .t-rm { visibility: hidden; }
.gsearch { position: relative; max-width: 560px; }
.gsearch > svg { position: absolute; right: 12px; top: 13px; color: var(--muted); pointer-events: none; }
.gresults { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: var(--bg-float); border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow-y: auto; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.gres { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; }
.gres:hover { background: var(--bg-hover); }
.gres img, .gph { width: 30px; height: 40px; border-radius: 4px; object-fit: cover; flex: none; background: var(--bg-active); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.gres span { flex: 1; }
.gnone { padding: 10px; color: var(--muted); }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin-top: 16px; }
.gitem { position: relative; font-size: 12px; font-weight: 600; color: var(--text); }
.gitem > span { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game { aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #3b3d45, #24252a); display: flex; align-items: center; justify-content: center; text-align: center; }
.game img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game b { padding: 8px; font-size: 13px; color: var(--text-strong); }
.g-rm { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.7); color: #fff; border-radius: 50%; padding: 4px; display: none; }
.gitem:hover .g-rm { display: flex; }
.ss-savebar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(700px, calc(100vw - 40px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 8px; background: var(--bg-float); box-shadow: 0 8px 24px rgba(0,0,0,.6); z-index: 61; font-weight: 500; }
.ss-savebar > span { flex: 1; }
.ss-savebar.shake { animation: ssShake .4s; background: #f23f43; }
@keyframes ssShake { 20%, 60% { transform: translateX(calc(-50% - 8px)); } 40%, 80% { transform: translateX(calc(-50% + 8px)); } }
/* carte de profil du serveur */
.pcard { background: var(--bg-float); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.pc-banner { height: 112px; }
.pc-icon { position: absolute; left: 16px; top: 72px; width: 72px; height: 72px; border-radius: 20px; background: var(--bg-active); border: 5px solid var(--bg-float); overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: var(--text-strong); }
.pc-icon img { width: 100%; height: 100%; object-fit: cover; }
.pc-body { padding: 44px 16px 16px; }
.pc-name { font-size: 18px; font-weight: 800; color: var(--text-strong); word-break: break-word; }
.pc-stats { display: flex; gap: 12px; color: var(--muted); font-size: 13px; margin-top: 4px; }
.pc-stats i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #80848e; margin-right: 5px; }
.pc-stats i.g { background: var(--green); }
.pc-since { color: var(--muted); font-size: 13px; margin-top: 2px; }
.pc-desc { margin-top: 10px; font-size: 14px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.pc-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pc-traits .chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-main); font-size: 13px; font-weight: 600; }
.pc-games { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; }
.pc-games .game b { font-size: 8px; padding: 2px; }
.jn-prev { margin-top: 14px; }
@media (max-width: 900px) { .ss-cols { grid-template-columns: 1fr; } .ss-preview { position: static; } .ss-side { flex: 0 0 180px; } .ss-nav { width: 180px; padding-left: 8px; } .ss-content { padding: 40px 16px 120px; } }

/* ───────── Rôles, membres, modération ───────── */
.r-icon { display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; line-height: 1; object-fit: contain; }
.member .who > b { display: inline-block; max-width: calc(100% - 26px); vertical-align: middle; }
.to-badge { display: inline-flex; color: #f0b232; margin-left: 4px; vertical-align: middle; }
.srv-mod { display: inline-flex; color: var(--red); }
.nav-row.on { background: var(--bg-active); color: var(--text-strong); }
.nav-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.msg.mentioned { background: rgba(240, 178, 50, .08); box-shadow: inset 2px 0 0 #f0b232; }
.msg.mentioned:hover { background: rgba(240, 178, 50, .12); }
.btn.link { background: none; color: var(--link, #00a8fc); padding-left: 6px; padding-right: 6px; }
.btn.link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
/* interrupteur */
.sw { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i { position: absolute; inset: 0; border-radius: 12px; background: #72767d; transition: background .15s; }
.sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:disabled + i { opacity: .45; cursor: not-allowed; }
.ss-toggle { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; }
.ss-toggle > div { flex: 1; min-width: 0; }
.ss-toggle h3 { font-size: 15px !important; }
.ss-toggle .ss-hint { margin: 0; }
.ss-toggle.pm { padding: 14px 0 !important; }
.ss-toggle.locked h3 { color: var(--muted) !important; }
.pm-g { margin: 26px 0 4px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: .02em; }
.req { color: var(--red); }
/* page Membres */
.mb-tabs { display: flex; gap: 6px; margin: 18px 0 14px; border-bottom: 1px solid var(--line); }
.mb-tabs button { padding: 8px 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mb-tabs button.sel { color: var(--text-strong); border-color: var(--blurple); }
.mb-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mb-tools .gsearch { flex: 1; min-width: 200px; }
.mb-tools select { background: var(--bg-rail); border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--text); }
.mb-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--bg-float); }
.mb-bulk > span { flex: 1; font-weight: 600; }
.mb-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mb-row { display: grid; grid-template-columns: 32px minmax(160px, 2fr) 1fr 1fr 1.2fr 1.4fr 40px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.mb-row:first-child { border-top: 0; }
.mb-row:hover:not(.mb-head) { background: var(--bg-hover); }
.mb-head { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); background: var(--bg-side); }
.mb-name { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.mb-name > span { min-width: 0; }
.mb-name b { color: var(--text-strong); }
.mb-name small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-name .crown { color: var(--yellow); margin-left: 4px; display: inline-flex; vertical-align: middle; }
.mb-meth code { background: var(--bg-rail); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.mb-roles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mb-roles .role-chip, .role-chip.more { font-size: 12px; }
.role-chip.add { cursor: pointer; }
.mb-act { display: flex; justify-content: flex-end; }
.mb-empty { padding: 24px; text-align: center; color: var(--muted); }
.mb-more { margin-top: 10px; }
.ban-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ban-row:first-child { border-top: 0; }
.ban-row small { display: block; color: var(--muted); }
.grow { flex: 1; min-width: 0; }
/* modales de modération */
.to-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.to-it { padding: 10px; border-radius: 6px; background: var(--bg-rail); border: 1px solid var(--line); font-weight: 600; }
.to-it.sel { border-color: var(--blurple); background: rgba(88, 101, 242, .15); color: var(--text-strong); }
.mv-list, .mr-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.mv-it, .mr-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-align: left; cursor: pointer; }
.mv-it:hover, .mr-it:hover { background: var(--bg-hover); }
.mv-it span, .mr-it span { flex: 1; }
.mv-it small { color: var(--muted); }
.mr-it > i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mr-it[hidden] { display: none; }
/* page Rôles */
.rl-everyone { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 20px; border-radius: 8px; background: var(--bg-float); border: 1px solid var(--line); }
.rl-everyone:hover { background: var(--bg-hover); }
.rl-everyone small { display: block; color: var(--muted); font-size: 13px; }
.rl-table { margin-top: 6px; }
.rl-row { display: grid; grid-template-columns: 26px 1fr 110px 80px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; border-top: 1px solid var(--line); }
.rl-row:hover:not(.rl-head) { background: var(--bg-hover); }
.rl-row.locked { cursor: default; opacity: .7; }
.rl-row.dragging { opacity: .4; }
.rl-head { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); cursor: default; border-top: 0; }
.rl-grip { color: var(--muted); display: flex; cursor: grab; }
.rl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rl-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-name .r-icon { margin: 0; }
.rl-count { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rl-acts { display: flex; justify-content: flex-end; gap: 2px; }
.re-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.re-side { position: sticky; top: 0; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.re-back { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); padding: 6px 4px 12px; font-size: 13px; }
.re-back:hover { color: var(--text-strong); }
.re-it { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 4px; color: var(--text); font-size: 14px; }
.re-it > i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.re-it span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-it:hover { background: var(--bg-hover); }
.re-it.sel { background: var(--bg-active); color: var(--text-strong); }
.re-it.locked { color: var(--muted); cursor: default; }
.re-it.add { color: var(--muted); margin-top: 6px; }
.re-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.re-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); margin: 10px 0 8px; }
.re-tabs button { padding: 8px 2px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.re-tabs button.sel { color: var(--text-strong); border-color: var(--blurple); }
.re-colors { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.re-col { width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent; }
.re-col.big { width: 66px; height: 50px; border-radius: 6px; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.re-col.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--blurple); }
.re-col.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.re-grid { display: grid; grid-template-columns: repeat(10, 22px); gap: 8px; }
.re-iconprev { width: 48px; height: 48px; border-radius: 8px; background: var(--bg-rail); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.re-iconprev .r-icon { margin: 0; }
.re-prev { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 8px; background: var(--bg-main); border: 1px solid var(--line); }
.re-prev small { display: block; color: var(--muted); font-size: 12px; }
.rm-list { margin-top: 8px; }
.rm-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; }
.rm-row:hover { background: var(--bg-hover); }
.rm-row small { display: block; color: var(--muted); }
.mr-list.am .mr-it { padding: 6px 8px; }
/* mentions dans la zone de saisie */
#composer { position: relative; }
.mention-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20; background: var(--bg-float); border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-height: 340px; overflow-y: auto; }
.mention-pop .mh { padding: 4px 8px 6px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.mp-it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 4px; }
.mp-it.sel, .mp-it:hover { background: var(--bg-active); }
.mp-it small { margin-left: auto; color: var(--muted); }
.mp-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-rail); display: flex; align-items: center; justify-content: center; font-weight: 800; }
@media (max-width: 900px) { .mb-row { grid-template-columns: 28px 1fr 1fr 40px; } .mb-row > :nth-child(4), .mb-row > :nth-child(5), .mb-row > :nth-child(6) { display: none; } .re-wrap { grid-template-columns: 1fr; } .re-side { position: static; max-height: none; } }
.modal label.mr-it { display: flex; margin: 0; font-size: 15px; font-weight: 500; color: var(--text); text-transform: none; }
.modal label.mr-it i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.modal label.mr-it input { width: auto; margin: 0; }