@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Variables — Dark (défaut) ── */
:root {
  --lc-bg-sidebar:   #0f1729;
  --lc-bg-main:      #0c1120;
  --lc-bg-header:    rgba(15,23,41,.95);
  --lc-bg-input:     #162035;
  --lc-bg-hover:     rgba(99,102,241,.06);
  --lc-bg-system:    rgba(99,102,241,.06);
  --lc-bg-announce:  rgba(245,158,11,.07);
  --lc-bg-modal:     #111d35;
  --lc-bg-ctx:       #111d35;

  --lc-accent:       #6366f1;
  --lc-accent-2:     #8b5cf6;
  --lc-accent-h:     #4f46e5;
  --lc-accent-grad:  linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --lc-accent-glow:  0 0 24px rgba(99,102,241,.45);
  --lc-danger:       #f43f5e;
  --lc-success:      #10b981;
  --lc-warn:         #f59e0b;

  --lc-text:         #94a3b8;
  --lc-text-body:    #cbd5e1;
  --lc-text-muted:   #475569;
  --lc-text-h:       #f1f5f9;

  --lc-border:       rgba(99,102,241,.12);
  --lc-border-soft:  rgba(255,255,255,.05);
  --lc-shadow:       0 32px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(99,102,241,.14);
  --lc-shadow-sm:    0 8px 32px rgba(0,0,0,.4);
  --lc-r:            14px;
  --lc-sw:           256px;
  --lc-ht:           min(700px, 88vh);
  --lc-t:            .18s cubic-bezier(.4,0,.2,1);
}

/* ── Variables — Clair ── */
.lc-light {
  --lc-bg-sidebar:   #f0f4ff;
  --lc-bg-main:      #ffffff;
  --lc-bg-header:    rgba(255,255,255,.95);
  --lc-bg-input:     #eef2ff;
  --lc-bg-hover:     rgba(99,102,241,.05);
  --lc-bg-system:    rgba(99,102,241,.04);
  --lc-bg-announce:  rgba(245,158,11,.07);
  --lc-bg-modal:     #ffffff;
  --lc-bg-ctx:       #ffffff;
  --lc-text:         #64748b;
  --lc-text-body:    #334155;
  --lc-text-muted:   #94a3b8;
  --lc-text-h:       #0f172a;
  --lc-border:       rgba(99,102,241,.1);
  --lc-border-soft:  rgba(0,0,0,.06);
  --lc-shadow:       0 20px 48px rgba(99,102,241,.12), 0 0 0 1px rgba(99,102,241,.08);
  --lc-shadow-sm:    0 4px 20px rgba(0,0,0,.1);
  --lc-accent-glow:  0 0 20px rgba(99,102,241,.2);
}

/* ── Reset ── */
.lc-app *,.lc-join-overlay *,.lc-ctx-menu *,.lc-modal *,.lc-mod-panel *{
  box-sizing:border-box;margin:0;padding:0;
}

/* ── Wrapper principal ── */
.lc-app {
  display:flex;
  width:100%;
  height:var(--lc-ht);
  border-radius:var(--lc-r);
  overflow:hidden;
  box-shadow:var(--lc-shadow);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;
  color:var(--lc-text-body);
  background:var(--lc-bg-main);
  position:relative;
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.lc-sidebar {
  width:var(--lc-sw);min-width:var(--lc-sw);
  background:var(--lc-bg-sidebar);
  display:flex;flex-direction:column;
  border-right:1px solid var(--lc-border-soft);
  transition:width var(--lc-t),min-width var(--lc-t),transform var(--lc-t);
  overflow:hidden;
}
.lc-sidebar.collapsed{width:0;min-width:0}

.lc-sidebar-brand {
  display:flex;align-items:center;gap:11px;
  padding:20px 16px 16px;
  font-weight:800;font-size:15px;letter-spacing:-.02em;
  color:var(--lc-text-h);
  border-bottom:1px solid var(--lc-border-soft);
  flex-shrink:0;
}
.lc-sidebar-brand-icon {
  width:34px;height:34px;border-radius:10px;
  background:var(--lc-accent-grad);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:var(--lc-accent-glow);
}
.lc-sidebar-brand-icon svg{width:19px;height:19px;color:#fff}

.lc-sidebar-section{padding:14px 0 4px;flex-shrink:0}
.lc-sidebar-users-section{flex:1;overflow-y:auto;min-height:0}

.lc-sidebar-label {
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--lc-text-muted);padding:4px 16px 8px;
  display:flex;align-items:center;gap:6px;
}

.lc-room-btn {
  display:flex;align-items:center;gap:9px;
  width:calc(100% - 16px);margin:1px 8px;
  padding:7px 10px;
  background:none;border:none;
  color:var(--lc-text-muted);font-size:13.5px;font-weight:500;
  cursor:pointer;border-radius:8px;text-align:left;
  transition:background var(--lc-t),color var(--lc-t);
  position:relative;
}
.lc-room-btn::before {
  content:'';position:absolute;left:-8px;top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px;height:55%;border-radius:0 3px 3px 0;
  background:var(--lc-accent-grad);
  transition:transform var(--lc-t);
}
.lc-room-btn:hover{background:var(--lc-bg-hover);color:var(--lc-text-h)}
.lc-room-btn.active{background:rgba(99,102,241,.12);color:var(--lc-text-h);font-weight:600}
.lc-room-btn.active::before{transform:translateY(-50%) scaleY(1)}

.lc-room-hash {
  width:26px;height:26px;border-radius:7px;
  background:rgba(99,102,241,.1);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--lc-accent);
  transition:background var(--lc-t);
}
.lc-room-hash svg{width:14px;height:14px}
.lc-room-btn.active .lc-room-hash{background:rgba(99,102,241,.2)}

.lc-room-unread{
  margin-left:auto;background:var(--lc-danger);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;
}
.lc-count-badge{
  background:var(--lc-success);color:#fff;
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;
}

.lc-users-list{padding:2px 8px;overflow-y:auto}

.lc-user-item{
  display:flex;align-items:center;gap:9px;
  padding:5px 8px;border-radius:8px;cursor:default;
  transition:background var(--lc-t);
}
.lc-user-item:hover{background:var(--lc-bg-hover)}

.lc-user-dot{
  width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex-shrink:0;position:relative;
}
.lc-user-dot::after{
  content:'';position:absolute;bottom:-2px;right:-2px;
  width:10px;height:10px;
  background:var(--lc-success);border-radius:50%;
  border:2px solid var(--lc-bg-sidebar);
  animation:lcPulse 2.4s infinite;
}
@keyframes lcPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  60%{box-shadow:0 0 0 5px rgba(16,185,129,0)}
}

.lc-user-name{
  font-size:13px;font-weight:500;color:var(--lc-text-body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lc-mod-crown{font-size:11px;color:var(--lc-warn);margin-left:2px}

.lc-self-bar{
  margin-top:auto;padding:12px 14px;
  background:rgba(0,0,0,.25);
  display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--lc-border-soft);flex-shrink:0;
}
.lc-self-avatar{
  width:32px;height:32px;border-radius:9px;
  font-weight:700;font-size:13px;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.lc-self-meta{flex:1;overflow:hidden}
.lc-self-name{
  font-size:13px;font-weight:600;color:var(--lc-text-h);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lc-self-role{font-size:11px;color:var(--lc-text-muted)}
.lc-leave-btn{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  padding:5px;border-radius:7px;display:flex;align-items:center;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-leave-btn:hover{color:var(--lc-danger);background:rgba(244,63,94,.1)}
.lc-leave-btn svg{width:17px;height:17px}

/* ═══════════════════════════════════════
   MAIN
═══════════════════════════════════════ */
.lc-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--lc-bg-main)}

.lc-header{
  display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;
  background:var(--lc-bg-header);
  border-bottom:1px solid var(--lc-border-soft);
  flex-shrink:0;z-index:10;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.lc-sidebar-toggle{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  padding:6px;border-radius:7px;display:none;align-items:center;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-sidebar-toggle:hover{color:var(--lc-text-h);background:var(--lc-bg-hover)}
.lc-sidebar-toggle svg{width:20px;height:20px}

.lc-header-room{display:flex;align-items:center;gap:7px;flex:1;overflow:hidden}
.lc-header-hash{font-size:17px;font-weight:700;color:var(--lc-accent)}
#lc-header-room-name{font-weight:700;font-size:15px;color:var(--lc-text-h);letter-spacing:-.01em}
.lc-header-sep{color:var(--lc-border-soft);margin:0 1px;font-size:18px}
.lc-header-desc{color:var(--lc-text-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lc-header-tools{display:flex;gap:2px;flex-shrink:0}
.lc-tool-btn{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  padding:7px;border-radius:8px;display:flex;align-items:center;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-tool-btn:hover{color:var(--lc-text-h);background:var(--lc-bg-hover)}
.lc-tool-btn svg{width:19px;height:19px}

.lc-pinned{
  display:flex;align-items:center;gap:10px;padding:8px 16px;
  background:rgba(99,102,241,.05);border-bottom:1px solid rgba(99,102,241,.1);
  font-size:13px;flex-shrink:0;
}
.lc-pinned>svg{width:14px;height:14px;color:var(--lc-accent);flex-shrink:0}
.lc-pinned-content{flex:1;overflow:hidden}
.lc-pinned-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--lc-accent);display:block;margin-bottom:1px;
}
.lc-pinned-text{color:var(--lc-text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.lc-pinned-close{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  font-size:18px;line-height:1;padding:2px 6px;border-radius:5px;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-pinned-close:hover{color:var(--lc-danger);background:rgba(244,63,94,.1)}

/* Messages */
.lc-messages-wrap{flex:1;overflow:hidden;position:relative}
.lc-messages{height:100%;overflow-y:auto;padding:16px 0 8px;scroll-behavior:smooth}
.lc-messages::-webkit-scrollbar{width:4px}
.lc-messages::-webkit-scrollbar-track{background:transparent}
.lc-messages::-webkit-scrollbar-thumb{background:rgba(99,102,241,.18);border-radius:2px}
.lc-messages::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,.35)}

.lc-welcome{
  text-align:center;padding:48px 24px 32px;
  background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,.07) 0%,transparent 65%);
}
.lc-welcome-icon{
  width:80px;height:80px;border-radius:22px;
  background:var(--lc-accent-grad);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  box-shadow:var(--lc-accent-glow);
}
.lc-welcome-icon svg{width:44px;height:44px;color:#fff}
.lc-welcome h2{
  font-size:22px;font-weight:800;color:var(--lc-text-h);
  margin-bottom:8px;letter-spacing:-.03em;
}
.lc-welcome p{color:var(--lc-text-muted);font-size:14px;line-height:1.65}

/* ── Messages ── */
.lc-msg{
  display:flex;gap:12px;padding:4px 16px;
  position:relative;transition:background var(--lc-t);
}
.lc-msg:hover{background:var(--lc-bg-hover)}
.lc-msg:hover .lc-msg-actions{display:flex}
.lc-msg.lc-first{margin-top:16px;padding-top:8px}

.lc-msg-avatar{
  width:36px;height:36px;border-radius:10px;
  font-weight:700;font-size:14px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;align-self:flex-start;margin-top:1px;cursor:default;
}
.lc-msg.lc-cont .lc-msg-avatar{visibility:hidden}
.lc-msg-body{flex:1;min-width:0}
.lc-msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.lc-msg.lc-cont .lc-msg-meta{display:none}
.lc-msg-author{font-weight:700;font-size:14px;cursor:default;color:var(--lc-text-h)}
.lc-mod-tag{
  font-size:9px;font-weight:700;
  background:var(--lc-accent-grad);color:#fff;
  padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em;
}
.lc-msg-time{font-size:11px;color:var(--lc-text-muted)}
.lc-msg-time-hover{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--lc-text-muted);width:28px;text-align:right;display:none;
}
.lc-msg.lc-cont:hover .lc-msg-time-hover{display:block}

.lc-msg-text{
  color:var(--lc-text-body);line-height:1.62;word-break:break-word;white-space:pre-wrap;
}
.lc-msg-text a{color:var(--lc-accent);text-decoration:none}
.lc-msg-text a:hover{text-decoration:underline}
.lc-msg-text code{
  background:rgba(99,102,241,.12);border-radius:4px;
  padding:1px 5px;font-size:13px;color:var(--lc-accent-2);
}
.lc-msg-text strong{font-weight:700;color:var(--lc-text-h)}
.lc-msg-text em{font-style:italic;color:var(--lc-text)}

.lc-reply-quote{
  display:flex;align-items:center;gap:8px;margin-bottom:5px;
  padding:4px 10px;
  border-left:3px solid var(--lc-accent);
  border-radius:0 6px 6px 0;
  background:rgba(99,102,241,.06);
  cursor:pointer;opacity:.7;
  transition:opacity var(--lc-t);
}
.lc-reply-quote:hover{opacity:1}
.lc-reply-author{font-size:12px;font-weight:700;color:var(--lc-accent)}
.lc-reply-text{font-size:12px;color:var(--lc-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lc-msg-img{margin-top:6px}
.lc-msg-img img{
  max-width:min(400px,100%);max-height:300px;border-radius:8px;
  cursor:pointer;object-fit:contain;display:block;
  border:1px solid var(--lc-border-soft);
}

.lc-msg-system{
  display:flex;align-items:center;gap:8px;padding:2px 16px;
  color:var(--lc-text-muted);font-size:12.5px;font-style:italic;
}
.lc-msg-system::before{content:'';display:inline-block;width:36px;flex-shrink:0}

.lc-msg-announce{
  margin:8px 16px;padding:12px 14px;
  background:var(--lc-bg-announce);
  border-left:3px solid var(--lc-warn);
  border-radius:0 8px 8px 0;
}
.lc-msg-announce .lc-msg-author{color:var(--lc-warn)}

/* Réactions */
.lc-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.lc-reaction{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.15);
  border-radius:20px;padding:3px 9px;font-size:13px;cursor:pointer;
  transition:background var(--lc-t),border-color var(--lc-t),transform var(--lc-t);
  user-select:none;
}
.lc-reaction:hover{background:rgba(99,102,241,.16);border-color:var(--lc-accent);transform:scale(1.06)}
.lc-reaction.lc-reacted{background:rgba(99,102,241,.18);border-color:var(--lc-accent)}
.lc-reaction-cnt{font-size:12px;font-weight:600;color:var(--lc-text-body)}

/* Barre d'actions message */
.lc-msg-actions{
  position:absolute;top:-14px;right:16px;
  display:none;align-items:center;gap:1px;
  background:var(--lc-bg-ctx);border:1px solid var(--lc-border);
  border-radius:9px;padding:3px;
  box-shadow:var(--lc-shadow-sm);z-index:10;
}
.lc-action-btn{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  padding:5px 7px;border-radius:6px;font-size:15px;line-height:1;
  transition:color var(--lc-t),background var(--lc-t);display:flex;align-items:center;
}
.lc-action-btn:hover{background:var(--lc-bg-hover);color:var(--lc-text-h)}

/* Bouton scroll-to-bottom */
.lc-scroll-btn{
  position:absolute;bottom:16px;right:16px;
  background:var(--lc-accent);border:none;
  color:#fff;border-radius:50%;width:40px;height:40px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--lc-accent-glow),0 4px 16px rgba(0,0,0,.3);
  transition:transform var(--lc-t),box-shadow var(--lc-t);
}
.lc-scroll-btn:hover{transform:scale(1.1);box-shadow:var(--lc-accent-glow),0 6px 20px rgba(0,0,0,.4)}
.lc-scroll-btn svg{width:20px;height:20px}
#lc-scroll-count{
  position:absolute;top:-6px;right:-6px;
  background:var(--lc-danger);color:#fff;font-size:10px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}

.lc-typing-bar{
  display:flex;align-items:center;gap:8px;
  padding:2px 16px 6px;font-size:12px;color:var(--lc-text-muted);
  flex-shrink:0;min-height:24px;
}
.lc-dots{display:flex;gap:3px;align-items:center}
.lc-dots span{
  width:5px;height:5px;border-radius:50%;
  background:var(--lc-accent);opacity:.7;
  animation:lcBounce .9s infinite ease;
}
.lc-dots span:nth-child(2){animation-delay:.15s}
.lc-dots span:nth-child(3){animation-delay:.3s}
@keyframes lcBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

.lc-slowmode-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 16px;background:rgba(245,158,11,.07);
  border-top:1px solid rgba(245,158,11,.14);
  font-size:12px;color:var(--lc-warn);flex-shrink:0;
}
.lc-slowmode-bar svg{width:14px;height:14px;flex-shrink:0}

.lc-reply-bar{
  display:flex;align-items:center;gap:10px;
  padding:7px 16px;background:rgba(99,102,241,.06);
  border-top:1px solid rgba(99,102,241,.12);
  font-size:13px;flex-shrink:0;
}
.lc-reply-bar-inner{
  flex:1;display:flex;align-items:center;gap:7px;overflow:hidden;color:var(--lc-text-muted);
}
.lc-reply-bar-inner svg{width:13px;height:13px;flex-shrink:0;color:var(--lc-accent)}
.lc-reply-bar-inner strong{color:var(--lc-text-h)}
.lc-reply-bar-inner em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-reply-bar>button{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  font-size:18px;line-height:1;padding:2px 7px;border-radius:5px;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-reply-bar>button:hover{color:var(--lc-danger);background:rgba(244,63,94,.1)}

/* Zone de saisie */
.lc-input-area{
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 16px 14px;flex-shrink:0;
  background:var(--lc-bg-main);
  border-top:1px solid var(--lc-border-soft);
}
.lc-input-btn{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  padding:9px;border-radius:8px;flex-shrink:0;
  transition:color var(--lc-t),background var(--lc-t);display:flex;align-items:center;
}
.lc-input-btn:hover{color:var(--lc-text-h);background:var(--lc-bg-hover)}
.lc-input-btn svg{width:20px;height:20px}

.lc-input-wrap{
  flex:1;background:var(--lc-bg-input);border-radius:12px;
  display:flex;align-items:flex-end;padding:0 8px 0 14px;
  border:1.5px solid transparent;
  transition:border-color var(--lc-t),box-shadow var(--lc-t);
}
.lc-input-wrap:focus-within{
  border-color:rgba(99,102,241,.35);
  box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
.lc-input{
  flex:1;background:none;border:none;outline:none;
  color:var(--lc-text-h);font-size:14px;font-family:inherit;
  resize:none;padding:10px 0;max-height:120px;overflow-y:auto;line-height:1.5;
}
.lc-input::placeholder{color:var(--lc-text-muted)}

.lc-emoji-btn{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  padding:9px 6px;flex-shrink:0;
  transition:color var(--lc-t);display:flex;align-items:center;
}
.lc-emoji-btn:hover{color:var(--lc-warn)}
.lc-emoji-btn svg{width:20px;height:20px}

.lc-send-btn{
  background:var(--lc-accent-grad);border:none;color:#fff;cursor:pointer;
  padding:10px 14px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
  transition:opacity var(--lc-t),transform var(--lc-t),box-shadow var(--lc-t);
}
.lc-send-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,102,241,.45)}
.lc-send-btn:active{transform:translateY(0);opacity:1}
.lc-send-btn svg{width:20px;height:20px}

/* Sélecteur d'emojis */
.lc-emoji-picker{
  position:absolute;bottom:80px;right:16px;
  width:320px;max-height:360px;
  background:var(--lc-bg-ctx);border:1px solid var(--lc-border);
  border-radius:12px;box-shadow:var(--lc-shadow-sm);
  overflow:hidden;z-index:100;display:flex;flex-direction:column;
}
.lc-emoji-search{padding:10px 12px;border-bottom:1px solid var(--lc-border-soft);flex-shrink:0}
.lc-emoji-search input{
  width:100%;background:var(--lc-bg-input);
  border:1.5px solid transparent;border-radius:8px;outline:none;
  color:var(--lc-text-h);font-size:13px;padding:7px 12px;font-family:inherit;
  transition:border-color var(--lc-t);
}
.lc-emoji-search input:focus{border-color:rgba(99,102,241,.4)}
.lc-emoji-search input::placeholder{color:var(--lc-text-muted)}
.lc-emoji-cats{
  display:flex;padding:6px 10px;gap:2px;
  border-bottom:1px solid var(--lc-border-soft);flex-shrink:0;overflow-x:auto;
}
.lc-emoji-cat-btn{
  background:none;border:none;font-size:16px;padding:5px 7px;
  cursor:pointer;border-radius:7px;transition:background var(--lc-t);opacity:.5;flex-shrink:0;
}
.lc-emoji-cat-btn:hover,.lc-emoji-cat-btn.active{background:rgba(99,102,241,.12);opacity:1}
.lc-emoji-grid{
  flex:1;overflow-y:auto;padding:8px;display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start;
}
.lc-emoji-cell{
  background:none;border:none;font-size:20px;padding:5px;
  cursor:pointer;border-radius:7px;line-height:1;
  transition:background var(--lc-t),transform var(--lc-t);
}
.lc-emoji-cell:hover{background:rgba(99,102,241,.12);transform:scale(1.25)}

/* Menu contextuel */
.lc-ctx-menu{
  position:fixed;background:var(--lc-bg-ctx);border:1px solid var(--lc-border);
  border-radius:10px;padding:5px;box-shadow:var(--lc-shadow-sm);z-index:1000;min-width:170px;
}
.lc-ctx-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 12px;background:none;border:none;color:var(--lc-text-body);
  font-size:13px;font-weight:500;cursor:pointer;border-radius:7px;text-align:left;
  transition:background var(--lc-t),color var(--lc-t);font-family:inherit;
}
.lc-ctx-item:hover{background:var(--lc-bg-hover);color:var(--lc-text-h)}
.lc-ctx-item.lc-ctx-danger{color:var(--lc-danger)}
.lc-ctx-item.lc-ctx-danger:hover{background:rgba(244,63,94,.1);color:var(--lc-danger)}
.lc-ctx-item svg{width:14px;height:14px;flex-shrink:0}
.lc-ctx-sep{height:1px;background:var(--lc-border-soft);margin:4px 0}

/* ═══════════════════════════════════════
   OVERLAY REJOINDRE
═══════════════════════════════════════ */
.lc-join-overlay{
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(12,17,32,.97) 0%,rgba(15,23,45,.96) 100%);
  display:flex;align-items:center;justify-content:center;
  z-index:200;
  font-family:'Inter',system-ui,sans-serif;
}
.lc-join-overlay::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 50%,rgba(99,102,241,.22) 0%,transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 50%,rgba(139,92,246,.16) 0%,transparent 70%);
  pointer-events:none;
}
.lc-join-card{
  position:relative;z-index:1;
  background:rgba(17,29,55,.82);
  border:1px solid rgba(99,102,241,.22);
  border-radius:18px;
  padding:44px 40px;text-align:center;max-width:400px;width:90%;
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(99,102,241,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.lc-join-hero{
  width:88px;height:88px;border-radius:24px;
  background:var(--lc-accent-grad);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 16px 48px rgba(99,102,241,.55);
}
.lc-join-hero svg{width:48px;height:48px;color:#fff}
.lc-join-card h2{
  font-size:24px;font-weight:800;color:var(--lc-text-h);
  margin-bottom:8px;letter-spacing:-.03em;
}
.lc-join-card p{color:var(--lc-text-muted);font-size:14px;margin-bottom:24px;line-height:1.65}
.lc-join-input{
  width:100%;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(99,102,241,.2);
  border-radius:10px;color:var(--lc-text-h);font-size:15px;
  padding:12px 16px;outline:none;
  transition:border-color var(--lc-t),box-shadow var(--lc-t);
  margin-bottom:14px;display:block;font-family:inherit;
}
.lc-join-input:focus{border-color:var(--lc-accent);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.lc-join-input::placeholder{color:var(--lc-text-muted)}
.lc-join-btn{
  width:100%;background:var(--lc-accent-grad);border:none;color:#fff;
  font-size:15px;font-weight:700;padding:13px;border-radius:10px;
  cursor:pointer;font-family:inherit;letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(99,102,241,.45);
  transition:opacity var(--lc-t),transform var(--lc-t),box-shadow var(--lc-t);
}
.lc-join-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 12px 32px rgba(99,102,241,.55)}
.lc-join-btn:active{transform:translateY(0)}
.lc-join-error{color:var(--lc-danger);font-size:13px;margin-bottom:10px}

/* Thème clair — join overlay */
.lc-light .lc-join-overlay{
  background:linear-gradient(145deg,rgba(238,242,255,.97),rgba(224,231,255,.96));
}
.lc-light .lc-join-overlay::before{
  background:
    radial-gradient(ellipse 60% 50% at 25% 50%,rgba(99,102,241,.14) 0%,transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 50%,rgba(139,92,246,.1) 0%,transparent 70%);
}
.lc-light .lc-join-card{
  background:rgba(255,255,255,.88);
  border-color:rgba(99,102,241,.14);
  box-shadow:0 24px 64px rgba(99,102,241,.14),0 0 0 1px rgba(99,102,241,.07);
}
.lc-light .lc-join-input{
  background:rgba(99,102,241,.05);
  color:var(--lc-text-h);
}

/* ═══════════════════════════════════════
   MODALES
═══════════════════════════════════════ */
.lc-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  z-index:500;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.lc-modal{
  background:var(--lc-bg-modal);border-radius:14px;
  width:400px;max-width:90vw;
  box-shadow:var(--lc-shadow);overflow:hidden;
  border:1px solid var(--lc-border);
}
.lc-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--lc-border-soft);
}
.lc-modal-header h3{font-size:16px;font-weight:700;color:var(--lc-text-h);letter-spacing:-.01em}
.lc-modal-header button{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  font-size:20px;line-height:1;padding:2px 6px;border-radius:5px;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-modal-header button:hover{color:var(--lc-danger);background:rgba(244,63,94,.1)}
.lc-modal-body{padding:22px}
.lc-modal-body label{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--lc-text-muted);margin-bottom:7px;
}
.lc-form-ctrl{
  width:100%;background:var(--lc-bg-input);
  border:1.5px solid var(--lc-border);
  border-radius:8px;color:var(--lc-text-h);font-size:14px;padding:9px 13px;
  outline:none;margin-bottom:16px;font-family:inherit;
  transition:border-color var(--lc-t),box-shadow var(--lc-t);
}
.lc-form-ctrl:focus{border-color:rgba(99,102,241,.4);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.lc-modal-footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 22px;border-top:1px solid var(--lc-border-soft);
}

/* Boutons */
.lc-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:8px;border:none;
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:opacity var(--lc-t),transform var(--lc-t);font-family:inherit;
}
.lc-btn:active{opacity:.85;transform:scale(.98)}
.lc-btn svg{width:15px;height:15px}
.lc-btn-primary{background:var(--lc-accent-grad);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.lc-btn-primary:hover{opacity:.9}
.lc-btn-danger{background:var(--lc-danger);color:#fff;box-shadow:0 4px 12px rgba(244,63,94,.25)}
.lc-btn-danger:hover{opacity:.9}
.lc-btn-ghost{
  background:rgba(255,255,255,.07);color:var(--lc-text-body);
  border:1px solid var(--lc-border);
}
.lc-btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Panneau modérateur — absolu dans .lc-app pour rester dans le widget */
.lc-mod-panel{
  position:absolute;top:0;right:0;width:300px;max-width:90%;height:100%;
  background:var(--lc-bg-modal);border-left:1px solid var(--lc-border);
  z-index:600;display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.5);overflow:hidden;
}
.lc-mod-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--lc-border-soft);flex-shrink:0;
}
.lc-mod-header h3{
  display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--lc-text-h);
}
.lc-mod-header h3 svg{width:18px;height:18px;color:var(--lc-warn)}
.lc-mod-header button{
  background:none;border:none;color:var(--lc-text-muted);cursor:pointer;
  font-size:20px;padding:2px 6px;border-radius:5px;
  transition:color var(--lc-t),background var(--lc-t);
}
.lc-mod-header button:hover{color:var(--lc-danger);background:rgba(244,63,94,.1)}
.lc-mod-body{flex:1;overflow-y:auto;padding:20px 22px}
.lc-mod-body section{margin-bottom:28px}
.lc-mod-body h4{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--lc-text-muted);margin-bottom:12px;
}

/* ── Room list in sidebar ── */
.lc-rooms-list { padding: 2px 8px; }
.lc-room-lock { margin-left: auto; font-size: 11px; }

/* ── Toast notifications ── */
.lc-toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lc-bg-ctx);
  border: 1px solid var(--lc-border);
  color: var(--lc-text-body);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  z-index: 800;
  white-space: nowrap;
  box-shadow: var(--lc-shadow-sm);
  pointer-events: none;
  animation: lcToastIn .2s cubic-bezier(.4,0,.2,1);
  transition: opacity .35s ease, transform .35s ease;
}
.lc-toast-error   { border-color: var(--lc-danger); color: var(--lc-danger); }
.lc-toast-success { border-color: var(--lc-success); color: var(--lc-success); }
.lc-toast-out {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}
@keyframes lcToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Load more spinner */
.lc-load-more-spin {
  display: inline-block;
  animation: lcSpin .7s linear infinite;
  font-size: 16px;
  color: var(--lc-text-muted);
}
@keyframes lcSpin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media(max-width:640px){
  :root{--lc-sw:220px;--lc-ht:min(620px,92vh)}
  .lc-sidebar-toggle{display:flex!important}
  .lc-sidebar{
    position:absolute;top:0;left:0;height:100%;z-index:50;
    box-shadow:4px 0 32px rgba(0,0,0,.5);
  }
  .lc-sidebar.collapsed{width:var(--lc-sw);min-width:var(--lc-sw);transform:translateX(-100%)}
  .lc-emoji-picker{width:calc(100vw - 32px);right:8px}
  .lc-header-desc{display:none}
}