:root {
  --bg-main:#313338; --bg-side:#2b2d31; --bg-dark:#1e1f22; --bg-hover:#35373c;
  --bg-msg-hover:#2e3035; --bg-input:#383a40; --bg-float:#111214;
  --text:#dbdee1; --text-strong:#f2f3f5; --text-muted:#949ba4; --text-faint:#80848e;
  --accent:#5865f2; --accent-hover:#4752c4; --online:#23a55a; --divider:#3f4147;
  --link:#00a8fc; --danger:#f23f42; --mention-bg:rgba(88,101,242,.15); --mention-text:#c9cdfb;
  --font:"gg sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg-main); color:var(--text); font-family:var(--font); font-size:15px; -webkit-font-smoothing:antialiased; overflow:hidden; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--bg-dark); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track { background:transparent; }
.hidden { display:none !important; }
b { font-weight:600; }

.app { display:flex; height:100vh; }
.chat { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
.members { width:260px; background:var(--bg-side); flex-shrink:0; display:flex; flex-direction:column; position:relative; }

/* Header */
.chat-header { height:48px; flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid var(--bg-dark); box-shadow:0 1px 0 rgba(0,0,0,.15); z-index:2; }
.chat-header .hash { color:var(--text-faint); font-size:24px; line-height:1; }
.chat-header .channel-name { color:var(--text-strong); font-weight:700; }
.header-sep { width:1px; height:20px; background:var(--divider); margin:0 6px; }
.header-topic { color:var(--text-muted); font-size:13px; }
.header-spacer { flex:1; }
.online-pill { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; }
.online-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--online); }
.online-pill b { color:var(--text); }

/* Messages */
.messages { flex:1; overflow-y:auto; padding:16px 0 24px; display:flex; flex-direction:column; }
#msg-list { display:flex; flex-direction:column; margin-top:auto; }
.load-more { align-self:center; margin:8px 0 4px; padding:4px 12px; font-size:13px; color:var(--text-muted); background:var(--bg-input); border-radius:12px; cursor:pointer; }
.load-more:hover { color:var(--text); }

.msg { display:flex; gap:16px; padding:2px 48px 2px 16px; position:relative; }
.msg:hover { background:var(--bg-msg-hover); }
.msg.first { margin-top:16px; }
.avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; user-select:none; }
.msg.grouped .avatar { visibility:hidden; height:0; margin:0; }
.msg-body { min-width:0; flex:1; }
.msg-head { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.msg-author { font-weight:600; font-size:15px; cursor:pointer; }
.msg-author:hover { text-decoration:underline; }
.role-badge { font-size:10px; font-weight:700; text-transform:uppercase; padding:1px 6px; border-radius:8px; color:#fff; background:var(--accent); letter-spacing:.02em; }
.msg-time { color:var(--text-faint); font-size:12px; }
.msg.grouped .msg-head { display:none; }
.msg-time-hover { position:absolute; left:0; width:56px; text-align:center; line-height:22px; color:var(--text-faint); font-size:11px; opacity:0; transition:opacity .06s; }
.msg.grouped:hover .msg-time-hover { opacity:1; }
.msg-text { color:var(--text); line-height:1.375; white-space:pre-wrap; word-wrap:break-word; }
.msg-text a { color:var(--link); text-decoration:none; }
.msg-text a:hover { text-decoration:underline; }
.msg-text.deleted { color:var(--text-faint); font-style:italic; }
.edited-tag { color:var(--text-faint); font-size:10px; margin-left:4px; }

/* Markdown */
.md-code { background:var(--bg-dark); border-radius:3px; padding:0 3px; font-family:Consolas,"Courier New",monospace; font-size:85%; }
.md-pre { background:var(--bg-dark); border:1px solid #222; border-radius:4px; padding:8px 10px; margin:4px 0; font-family:Consolas,"Courier New",monospace; font-size:85%; white-space:pre-wrap; }

/* Mentions */
.mention { background:var(--mention-bg); color:var(--mention-text); border-radius:3px; padding:0 2px; font-weight:600; cursor:pointer; }
.mention.me { background:rgba(240,178,50,.18); }
.msg.mentions-me { background:rgba(240,178,50,.08); box-shadow:inset 2px 0 0 #f0b232; }

/* Embeds */
.embed-img { display:block; max-width:400px; max-height:300px; border-radius:8px; margin-top:6px; cursor:pointer; }
.embed-video { display:block; max-width:400px; max-height:300px; border-radius:8px; margin-top:6px; background:#000; }
.embed-yt { margin-top:6px; width:400px; max-width:100%; aspect-ratio:16/9; border:0; border-radius:8px; }

/* Réactions */
.reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.reaction { display:flex; align-items:center; gap:5px; background:var(--bg-input); border:1px solid transparent; border-radius:8px; padding:1px 7px; font-size:13px; cursor:pointer; user-select:none; }
.reaction:hover { border-color:var(--text-faint); }
.reaction.mine { background:rgba(88,101,242,.16); border-color:var(--accent); }
.reaction .cnt { color:var(--text-muted); font-size:12px; font-weight:600; }
.reaction.mine .cnt { color:#c9cdfb; }

/* Actions au survol du message */
.msg-actions { position:absolute; top:-14px; right:12px; display:none; background:var(--bg-side); border:1px solid var(--bg-dark); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.msg:hover .msg-actions { display:flex; }
.msg-actions button { background:none; border:none; color:var(--text-muted); font-size:16px; padding:5px 8px; cursor:pointer; }
.msg-actions button:hover { color:var(--text-strong); background:var(--bg-hover); border-radius:6px; }

/* Édition inline */
.edit-box { width:100%; background:var(--bg-input); border-radius:8px; padding:8px 12px; margin-top:4px; }
.edit-box textarea { width:100%; resize:none; border:none; outline:none; background:transparent; color:var(--text); font-family:var(--font); font-size:15px; line-height:1.375; }
.edit-hint { font-size:11px; color:var(--text-faint); margin-top:4px; }
.edit-hint a { color:var(--link); cursor:pointer; }

/* Menu contextuel */
.ctx-menu { position:fixed; z-index:60; background:var(--bg-float); border:1px solid #000; border-radius:8px; padding:6px; min-width:180px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.ctx-item { padding:7px 10px; border-radius:4px; font-size:14px; color:var(--text); cursor:pointer; }
.ctx-item:hover { background:var(--accent); color:#fff; }
.ctx-item.ctx-danger { color:var(--danger); }
.ctx-item.ctx-danger:hover { background:var(--danger); color:#fff; }

/* Sélecteur emoji */
.emoji-panel { position:fixed; z-index:60; background:var(--bg-float); border:1px solid #000; border-radius:10px; padding:10px; width:340px; max-height:300px; overflow-y:auto; box-shadow:0 6px 20px rgba(0,0,0,.45); display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.emoji-panel span { font-size:22px; text-align:center; padding:4px; border-radius:6px; cursor:pointer; }
.emoji-panel span:hover { background:var(--bg-hover); }

/* Autocomplétion mentions */
.mention-pop { position:fixed; z-index:60; background:var(--bg-float); border:1px solid #000; border-radius:8px; padding:6px; min-width:200px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.mention-opt { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px; cursor:pointer; }
.mention-opt.active, .mention-opt:hover { background:var(--accent); }
.mention-opt .ma { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; }

/* Day divider / typing */
.day-divider { display:flex; align-items:center; gap:8px; margin:18px 16px 8px; color:var(--text-faint); font-size:12px; font-weight:600; text-transform:capitalize; }
.day-divider::before,.day-divider::after { content:""; flex:1; height:1px; background:var(--divider); }
.new-divider { color:#f23f42; }
.new-divider::before,.new-divider::after { background:rgba(242,63,66,.4); }
.typing { height:24px; padding:0 16px; display:flex; align-items:center; gap:8px; color:var(--text); font-size:13px; }
.typing-dots { display:inline-flex; gap:3px; }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--text-muted); animation:blink 1.4s infinite both; }
.typing-dots span:nth-child(2){animation-delay:.2s;} .typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink { 0%,80%,100%{opacity:.3;} 40%{opacity:1;} }

/* Jump bottom */
.jump-bottom { position:absolute; right:24px; bottom:96px; z-index:5; background:var(--bg-float); color:var(--text); border:none; border-radius:16px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.jump-bottom:hover { background:#000; }
.jump-bottom #jump-count { color:#f0b232; }

/* Members */
.member-group { margin-bottom:18px; }
.member-group-title { color:var(--text-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; padding:0 8px 4px; }
.member { display:flex; align-items:center; gap:12px; height:44px; padding:0 8px; border-radius:6px; cursor:pointer; }
.member:hover { background:var(--bg-hover); }
.member-avatar-wrap { position:relative; flex-shrink:0; }
.member-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; user-select:none; }
.status-dot { position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; border:3px solid var(--bg-side); }
.status-dot.online { background:var(--online); } .status-dot.offline { background:var(--text-faint); }
.member-main { min-width:0; }
.member-name { color:var(--text-muted); font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member.is-online .member-name { color:var(--text); }
.member.is-offline { opacity:.45; }
.member-role { font-size:10px; color:var(--text-faint); text-transform:uppercase; }

/* Reconnect */
.reconnect { position:fixed; top:0; left:0; right:0; z-index:50; background:#f0b232; color:#1e1f22; text-align:center; font-size:13px; font-weight:600; padding:5px; display:flex; align-items:center; justify-content:center; gap:8px; }
.spin { width:12px; height:12px; border:2px solid rgba(30,31,34,.35); border-top-color:#1e1f22; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Panneau GIF */
.gif-panel { position:fixed; z-index:60; background:var(--bg-float); border:1px solid #000; border-radius:10px; padding:10px; width:380px; box-shadow:0 6px 20px rgba(0,0,0,.45); }
.gif-panel input { width:100%; background:var(--bg-input); border:none; outline:none; color:var(--text); border-radius:6px; padding:8px 10px; font-size:14px; font-family:var(--font); margin-bottom:8px; }
.gif-results { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:320px; overflow-y:auto; }
.gif-results img { width:100%; border-radius:6px; cursor:pointer; display:block; }
.gif-results img:hover { outline:2px solid var(--accent); }
.gif-empty { color:var(--text-faint); font-size:13px; text-align:center; padding:20px; grid-column:1/3; }

/* Boîte LFG (composer) */
.lfg-box { position:fixed; z-index:60; background:var(--bg-float); border:1px solid #000; border-radius:10px; padding:14px; width:340px; box-shadow:0 6px 20px rgba(0,0,0,.45); }
.lfg-title { font-weight:700; color:var(--text-strong); margin-bottom:10px; }
.lfg-box input { width:100%; background:var(--bg-input); border:none; outline:none; color:var(--text); border-radius:6px; padding:9px 11px; font-size:14px; font-family:var(--font); margin-bottom:8px; }
.lfg-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.lfg-actions button { border:none; border-radius:6px; padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; }
#lfg-cancel { background:transparent; color:var(--text-muted); }
#lfg-post { background:var(--accent); color:#fff; }
#lfg-post:hover { background:var(--accent-hover); }

/* Carte LFG dans le fil */
.lfg-card { margin-top:6px; background:linear-gradient(135deg, rgba(88,101,242,.14), rgba(35,165,90,.10)); border:1px solid rgba(88,101,242,.35); border-radius:10px; padding:12px 14px; max-width:440px; }
.lfg-card .lc-head { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--text-strong); font-size:15px; }
.lfg-card .lc-badge { background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:2px 7px; border-radius:8px; text-transform:uppercase; }
.lfg-card .lc-game { color:#c9cdfb; }
.lfg-card .lc-note { color:var(--text-muted); font-size:13px; margin:4px 0 8px; }
.lfg-card .lc-players { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.lfg-card .lc-chip { display:flex; align-items:center; gap:5px; background:var(--bg-side); border-radius:12px; padding:2px 8px 2px 2px; font-size:12px; }
.lfg-card .lc-chip .ma { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:700; }
.lfg-card .lc-join { background:var(--online); color:#fff; border:none; border-radius:8px; padding:7px 16px; font-size:14px; font-weight:700; cursor:pointer; }
.lfg-card .lc-join:hover { filter:brightness(1.1); }
.lfg-card .lc-join.in { background:var(--bg-input); color:var(--text); }

/* Réponse / citation */
.reply-bar { display:flex; align-items:center; justify-content:space-between; background:var(--bg-dark); border-radius:8px 8px 0 0; padding:6px 14px; font-size:13px; color:var(--text-muted); margin-bottom:-4px; }
.reply-bar b { color:var(--text); }
.reply-bar button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px; }
.reply-bar button:hover { color:var(--text-strong); }
.reply-preview { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); margin-bottom:2px; cursor:pointer; max-width:600px; }
.reply-preview::before { content:""; width:22px; height:10px; border-left:2px solid var(--divider); border-top:2px solid var(--divider); border-radius:6px 0 0 0; margin-left:18px; flex-shrink:0; }
.reply-preview .rp-author { font-weight:600; flex-shrink:0; }
.reply-preview .rp-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.reply-preview:hover .rp-text { opacity:1; }
/* Spoiler */
.spoiler { background:#1e1f22; color:transparent; border-radius:4px; padding:0 3px; cursor:pointer; }
.spoiler.revealed { background:rgba(255,255,255,.1); color:var(--text); }

/* Bouton header (épingles) */
.header-btn { background:none; border:none; color:var(--text-muted); font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.header-btn:hover { color:var(--text-strong); background:var(--bg-hover); }
.header-btn b { color:var(--text); }

/* Overlay glisser-déposer */
.drop-overlay { position:fixed; inset:0; z-index:80; background:rgba(88,101,242,.25); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; }
.drop-overlay div { border:3px dashed #fff; border-radius:16px; padding:40px 60px; color:#fff; font-size:22px; font-weight:700; }

/* Panneau épingles */
.pins-panel { position:fixed; z-index:60; right:250px; top:52px; width:380px; max-height:60vh; overflow-y:auto; background:var(--bg-float); border:1px solid #000; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.pp-title { font-weight:700; color:var(--text-strong); padding:12px 14px; border-bottom:1px solid var(--bg-dark); position:sticky; top:0; background:var(--bg-float); }
.pin-item { padding:10px 14px; border-bottom:1px solid var(--bg-dark); cursor:pointer; }
.pin-item:hover { background:var(--bg-hover); }
.pin-item .pi-author { font-weight:600; font-size:14px; }
.pin-item .pi-text { color:var(--text-muted); font-size:13px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pin-empty { color:var(--text-faint); font-size:13px; padding:20px; text-align:center; }
.msg.pinned { box-shadow:inset 3px 0 0 #f0b232; }
.pin-tag { color:#f0b232; font-size:11px; margin-left:6px; }

/* Popout utilisateur */
.user-pop { position:fixed; z-index:65; width:240px; background:var(--bg-float); border:1px solid #000; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.user-pop .up-banner { height:52px; }
.user-pop .up-body { padding:0 14px 14px; margin-top:-24px; }
.user-pop .up-avatar { width:56px; height:56px; border-radius:50%; border:5px solid var(--bg-float); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:22px; }
.user-pop .up-name { font-size:18px; font-weight:700; color:var(--text-strong); margin-top:6px; }
.user-pop .up-sub { font-size:13px; color:var(--text-muted); margin-top:2px; }
.user-pop .up-actions { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.user-pop .up-actions button { background:var(--bg-input); color:var(--text); border:none; border-radius:6px; padding:8px 10px; font-size:14px; text-align:left; cursor:pointer; }
.user-pop .up-actions button:hover { background:var(--accent); color:#fff; }

/* état d'upload */
.uploading { color:var(--text-faint); font-style:italic; font-size:13px; padding:4px 16px; }

/* Rail conversations (gauche) */
/* (rail gauche supprimé : tout est dans la colonne de droite) */
.rail-item { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:6px; color:var(--text-muted); font-weight:600; font-size:15px; cursor:pointer; margin-bottom:2px; }
.rail-item:hover { background:var(--bg-hover); color:var(--text); }
.rail-item.active { background:var(--bg-side); color:var(--text-strong); }
.rail-item .ri-hash { color:var(--text-faint); font-size:18px; }
.rail-item .ri-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; flex-shrink:0; }
.rail-item .ri-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-item .ri-badge { background:var(--danger); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.rail-item .ri-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rail-item .ri-dot.online { background:var(--online); } .rail-item .ri-dot.offline { background:var(--text-faint); }
.rail-section { color:var(--text-faint); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:12px 10px 4px; }
.dm-empty { color:var(--text-faint); font-size:12px; padding:4px 10px; }

/* Statut (rail) */
.rail-status { margin-top:12px; border-top:1px solid var(--bg-side); padding-top:4px; }
#status-select { width:100%; background:var(--bg-side); color:var(--text); border:none; border-radius:6px; padding:7px 8px; font-size:13px; font-family:var(--font); cursor:pointer; outline:none; }
.st-dot { width:10px; height:10px; border-radius:50%; }
.status-dot.dispo { background:var(--online); } .status-dot.occupe { background:#f0b232; } .status-dot.npd { background:var(--danger); }
.ri-dot.dispo { background:var(--online); } .ri-dot.occupe { background:#f0b232; } .ri-dot.npd { background:var(--danger); }

/* Aperçu de lien */
.link-preview { display:flex; gap:10px; margin-top:6px; max-width:440px; background:var(--bg-side); border-left:4px solid var(--accent); border-radius:6px; padding:10px 12px; cursor:pointer; }
.link-preview:hover { background:var(--bg-hover); }
.lp-body { min-width:0; flex:1; }
.lp-site { color:var(--text-faint); font-size:11px; }
.lp-title { color:var(--link); font-weight:600; font-size:14px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lp-desc { color:var(--text-muted); font-size:13px; margin-top:3px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lp-thumb { width:72px; height:72px; object-fit:cover; border-radius:4px; flex-shrink:0; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.lightbox img { max-width:88vw; max-height:80vh; border-radius:6px; }
.lb-bar { display:flex; gap:8px; }
.lb-bar button, .lb-bar a { background:var(--bg-float); color:var(--text); border:none; border-radius:6px; padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.lb-bar button:hover, .lb-bar a:hover { background:var(--accent); color:#fff; }

/* Emoji perso */
.custom-emoji { width:22px; height:22px; vertical-align:-5px; object-fit:contain; }
.emoji-panel .ce-title { grid-column:1/9; color:var(--text-faint); font-size:11px; font-weight:700; text-transform:uppercase; padding:6px 2px 2px; }
.emoji-panel img.ce { width:26px; height:26px; object-fit:contain; padding:3px; border-radius:6px; cursor:pointer; }
.emoji-panel img.ce:hover { background:var(--bg-hover); }

/* Aperçu du dernier message (rail PM) */
.rail-item.dm { height:auto; align-items:flex-start; padding:8px 10px; }
.ri-main { min-width:0; flex:1; }
.ri-last { color:var(--text-faint); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.ri-badge.mention { background:#f0b232; color:#1e1f22; }

/* ── Colonne de droite unique (salon + PM + membres + moi) ── */
.side-scroll { flex:1; overflow-y:auto; padding:12px 8px 8px; }
.side-sep { height:1px; background:var(--divider); margin:10px 8px; }
.members .rail-item { color:var(--text-muted); }
.members .rail-item.active { background:var(--bg-hover); color:var(--text-strong); }

/* Bloc utilisateur en bas (clic = menu statut) */
.me-bar { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--bg-dark); cursor:pointer; flex-shrink:0; }
.me-bar:hover { background:#191a1d; }
.me-avatar-wrap { position:relative; flex-shrink:0; }
.me-bar .member-avatar { width:34px; height:34px; font-size:13px; }
.me-bar .status-dot { border-color:var(--bg-dark); }
.me-main { min-width:0; flex:1; }
.me-name { color:var(--text-strong); font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-status { color:var(--text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-caret { color:var(--text-muted); font-size:12px; }

/* Menu de statut (au-dessus du bloc utilisateur) */
.status-menu { position:absolute; bottom:58px; left:8px; right:8px; z-index:40; background:var(--bg-float); border:1px solid #000; border-radius:8px; padding:6px; box-shadow:0 -4px 16px rgba(0,0,0,.45); }
.sm-item { padding:8px 10px; border-radius:5px; font-size:14px; color:var(--text); cursor:pointer; }
.sm-item:hover { background:var(--accent); color:#fff; }
.sm-item.active { background:var(--bg-hover); }

/* ══════════ COMPOSER (aligné, avec flèche d'envoi) ══════════ */
.composer { padding:0 16px 20px; }
.composer-box {
  display:flex; align-items:flex-end; gap:4px;
  background:var(--bg-input); border-radius:10px; padding:6px 8px;
  border:1px solid transparent; transition:border-color .15s, box-shadow .15s;
}
.composer-box:focus-within { border-color:rgba(88,101,242,.5); box-shadow:0 0 0 3px rgba(88,101,242,.10); }
.composer textarea {
  flex:1; min-width:0; resize:none; border:none; outline:none; background:transparent; color:var(--text);
  font-family:var(--font); font-size:15px; line-height:22px; padding:8px 4px; max-height:45vh; display:block;
}
.composer textarea::placeholder { color:var(--text-faint); }
.cb-actions { display:flex; align-items:center; gap:2px; padding-bottom:2px; }

/* toutes les icônes du composer : MÊME taille, MÊME alignement */
.cb-icon {
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px; cursor:pointer;
  color:var(--text-muted); transition:background .12s, color .12s;
}
.cb-icon:hover { color:var(--text-strong); background:rgba(255,255,255,.06); }
.cb-icon svg { width:21px; height:21px; }
.cb-gif { font-size:11px; font-weight:800; letter-spacing:.4px; }

/* flèche d'envoi */
.cb-send {
  width:34px; height:34px; flex-shrink:0; margin-left:2px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); border:none; border-radius:8px; cursor:pointer; color:#fff;
  transition:background .12s, transform .08s, opacity .12s; opacity:.55;
}
.cb-send:hover { background:var(--accent-hover); }
.cb-send:active { transform:scale(.94); }
.cb-send.ready { opacity:1; }
.cb-send svg { width:19px; height:19px; }

/* barre d'outils sous le champ */
.toolbar { display:flex; align-items:center; gap:2px; padding:6px 2px 0; flex-wrap:wrap; }
.toolbar button {
  background:none; border:none; color:var(--text-faint); font-size:12px; font-weight:700;
  cursor:pointer; padding:4px 7px; border-radius:6px; line-height:1; transition:color .12s, background .12s;
}
.toolbar button:hover { color:var(--text-strong); background:rgba(255,255,255,.06); }
.tb-sep { width:1px; height:14px; background:var(--divider); margin:0 5px; }
.tb-hint { margin-left:auto; color:var(--text-faint); font-size:11px; opacity:.75; }

/* ══════════ RECHERCHE (intégrée au header) ══════════ */
.search-wrap { position:relative; display:flex; align-items:center; margin-left:auto; }
.search-ico { position:absolute; left:9px; width:15px; height:15px; color:var(--text-faint); pointer-events:none; }
.search-wrap input {
  background:var(--bg-dark); border:1px solid transparent; outline:none; color:var(--text);
  border-radius:8px; padding:6px 10px 6px 30px; font-size:13px; font-family:var(--font);
  width:150px; transition:width .18s, border-color .15s, background .15s;
}
.search-wrap input::placeholder { color:var(--text-faint); }
.search-wrap input:focus { width:230px; border-color:rgba(88,101,242,.45); background:var(--bg-main); }

/* ══════════ AVATARS (image ou initiales) ══════════ */
.avatar, .member-avatar { background-size:cover; background-position:center; overflow:hidden; }
.me-avatar-wrap { cursor:pointer; }
/* Petit badge appareil-photo en coin : les INITIALES restent visibles */
.me-avatar-edit {
  position:absolute; right:-3px; top:-3px; width:16px; height:16px;
  display:none; align-items:center; justify-content:center;
  background:var(--accent); border:2px solid var(--bg-dark); border-radius:50%;
  font-size:8px; line-height:1;
}
.me-avatar-wrap:hover .me-avatar-edit { display:flex; }
.me-avatar-wrap:hover .member-avatar { filter:brightness(1.15); }

/* Croix de fermeture d'un PM */
.ri-close {
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  font-size:12px; padding:2px 4px; border-radius:4px; opacity:0; flex-shrink:0;
}
.rail-item:hover .ri-close { opacity:1; }
.ri-close:hover { color:var(--text-strong); background:rgba(255,255,255,.08); }

/* ══════════ Attentions graphiques (moins carré, moins terne) ══════════ */
.chat-header { background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.msg { transition:background .08s; }
.msg.first { border-radius:6px; }
.avatar { box-shadow:0 1px 3px rgba(0,0,0,.25); }
.member { transition:background .1s; }
.member-avatar { box-shadow:0 1px 2px rgba(0,0,0,.2); }
.reaction { transition:transform .08s, border-color .1s, background .1s; }
.reaction:active { transform:scale(.93); }
.msg-actions { box-shadow:0 3px 10px rgba(0,0,0,.35); border-radius:8px; overflow:hidden; }
.online-pill .dot { box-shadow:0 0 0 3px rgba(35,165,90,.15); }
.rail-item, .member { border-radius:8px; }
.lfg-card { box-shadow:0 2px 10px rgba(0,0,0,.18); }
.day-divider { opacity:.85; }

/* Icône SVG dans la barre d'outils (spoiler) */
.toolbar .tb-svg { display:inline-flex; align-items:center; justify-content:center; padding:3px 7px; }
.toolbar .tb-svg svg { width:17px; height:17px; }

/* Avatars cliquables (agrandissement) */
.msg .avatar, .member .member-avatar { cursor:pointer; }
.msg .avatar:hover, .member .member-avatar:hover { filter:brightness(1.12); }

/* Aperçu d'avatar : compact et rond (pas plein écran) */
.lightbox img.avatar-view {
  width:220px; height:220px; max-width:220px; max-height:220px;
  border-radius:50%; object-fit:cover;
  border:4px solid var(--bg-float); box-shadow:0 8px 32px rgba(0,0,0,.5);
}

/* Icône du jeu sous le pseudo (comme l'ancienne Taverne) */
.member-role.game { display:flex; align-items:center; gap:5px; }
.member-role.game .game-ico { width:14px; height:14px; object-fit:contain; border-radius:2px; flex-shrink:0; }
.member-role.game span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Annonce / Notification / Timer / Vote (cartes système) */
.sys-card { margin-top:6px; border-radius:10px; padding:12px 14px; max-width:460px; }
.sys-card .sc-head { display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.sys-card .sc-body { font-size:15px; color:var(--text-strong); }
.sys-ann { background:rgba(242,63,66,.12); border:1px solid rgba(242,63,66,.4); }
.sys-ann .sc-head { color:#f23f42; }
.sys-notif { background:rgba(240,178,50,.12); border:1px solid rgba(240,178,50,.4); }
.sys-notif .sc-head { color:#f0b232; }
.sys-timer { background:rgba(88,101,242,.12); border:1px solid rgba(88,101,242,.45); }
.sys-timer .sc-head { color:#8f9bff; }
.timer-val { font-size:30px; font-weight:800; color:var(--text-strong); font-variant-numeric:tabular-nums; letter-spacing:1px; }
.timer-val.urgent { color:#f23f42; }
.sys-msg { background:rgba(35,165,90,.10); border:1px solid rgba(35,165,90,.35); }
.sys-msg .sc-head { color:#23a55a; }
.sys-card pre { font-family:var(--font-code); font-size:13px; color:var(--text); white-space:pre-wrap; margin:0; line-height:1.55; }

/* Sondage / vote */
.vote-card { background:linear-gradient(135deg, rgba(88,101,242,.13), rgba(235,69,158,.09)); border:1px solid rgba(88,101,242,.4); border-radius:10px; padding:14px; max-width:460px; margin-top:6px; }
.vote-q { font-weight:700; color:var(--text-strong); font-size:15px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.vote-opt { display:flex; align-items:center; gap:8px; margin-bottom:6px; cursor:pointer; }
.vote-bar-wrap { flex:1; background:var(--bg-input); border-radius:6px; height:30px; position:relative; overflow:hidden; }
.vote-bar { position:absolute; inset:0 auto 0 0; background:rgba(88,101,242,.55); transition:width .35s ease; }
.vote-lbl { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 10px; font-size:13px; color:var(--text-strong); z-index:1; }
.vote-opt.mine .vote-bar { background:rgba(35,165,90,.6); }
.vote-opt:hover .vote-bar-wrap { outline:1px solid var(--accent); }
.vote-total { color:var(--text-faint); font-size:12px; margin-top:6px; }

/* Autocomplétion des commandes */
.cmd-pop { position:fixed; z-index:70; background:var(--bg-float); border:1px solid #000; border-radius:10px; padding:6px; width:420px; max-height:300px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.cmd-pop .cp-title { color:var(--text-faint); font-size:11px; font-weight:700; text-transform:uppercase; padding:6px 8px 4px; }
.cmd-opt { display:flex; align-items:baseline; gap:8px; padding:7px 9px; border-radius:6px; cursor:pointer; }
.cmd-opt.active, .cmd-opt:hover { background:var(--bg-hover); }
.cmd-name { color:var(--text-strong); font-weight:700; font-family:var(--font-code); font-size:13px; }
.cmd-desc { color:var(--text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd-admin { margin-left:auto; font-size:9px; background:rgba(242,63,66,.25); color:#ff8a8c; padding:2px 5px; border-radius:4px; font-weight:700; flex-shrink:0; }
.lfg-hint { color:var(--text-faint); font-size:11px; margin:-4px 0 8px 2px; }

/* Mode "fenêtre de PM" : uniquement la conversation (le rail est masqué) */
body.pm-window .members { display:none; }
body.pm-window #lfg-btn,
body.pm-window #mention-all,
body.pm-window #pins-btn { display:none; }
body.pm-window .chat { border-radius:0; }


/* ─── Intégration dans le launcher (WebView2) ───
   La WebView2 ne respecte pas le CornerRadius du Border WPF : c'est donc la PAGE
   qui doit arrondir ses propres coins et remplir tout le cadre, sinon on voit
   des angles carrés et des bandes noires. */
html, body { height:100%; margin:0; background:transparent; overflow:hidden; }
.app { height:100vh; border-radius:12px; overflow:hidden; }
.chat { min-width:0; }