:root{
  color-scheme: dark;

  --bg:#0b0f14;
  --guilds:#05080f;
  --channels:#0b1220;
  --main:#0b0f14;
  --members:#0b1220;

  --top:#0f172a;
  --border:#1f2937;

  --text:#e5e7eb;
  --muted:#94a3b8;
  --muted2:#64748b;

  --accent:#60a5fa;
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#fb7185;

  --guildW:72px;
  --chanW:280px;
  --membersW:260px;
  --topH:56px;
  --inputH:78px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  height:100vh;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  tab-size:4;
}

.app{
  height:100vh;
  display:grid;
  grid-template-columns: var(--guildW) var(--chanW) 1fr var(--membersW);
}

/* ===== Guilds ===== */
.guilds{
  background:var(--guilds);
  border-right:1px solid var(--border);
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guild{
  width:56px;height:56px;
  border-radius:18px;
  background:rgba(96,165,250,.06);
  border:1px solid rgba(96,165,250,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  overflow:hidden;
}
.guild:hover{ transform:translateY(-1px); border-color:rgba(96,165,250,.35); background:rgba(96,165,250,.10); }
.guild.active{ outline:2px solid rgba(96,165,250,.35); }
.guild img{
  width:42px;height:42px;
  object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* Home icon (inline SVG) */
.guild .wlIcon{
  width:26px;
  height:26px;
  fill: rgba(255,255,255,.90);
  display:block;
}
.guildDot{
  width:10px;height:10px;border-radius:999px;
  background:var(--err);
  box-shadow: 0 0 0 4px rgba(251,113,133,.10);
  margin:2px auto 0;
}
.guildDot.on{
  background:var(--ok);
  box-shadow: 0 0 0 4px rgba(52,211,153,.10);
}

/* ===== Channels ===== */
.channels{
  background:var(--channels);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.chanTop{
  height:var(--topH);
  display:flex;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid var(--border);
  background:rgba(15,23,42,.55);
  backdrop-filter: blur(10px);
  gap:10px;
}
.chanTop .title{
  font-weight:900;
  letter-spacing:.2px;
}
.chanTop .sub{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.chanList{
  padding:10px 10px 14px;
  overflow:auto;
  min-height:0;
}
.chanGroup{
  color:var(--muted2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  margin:10px 8px 6px;
}
.chanItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  color:#cbd5e1;
  user-select:none;
  border:1px solid transparent;
}
.chanItem:hover{ background:rgba(96,165,250,.08); }
.chanItem.active{
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.22);
  color:#fff;
}
.ico{
  width:18px;
  color:rgba(148,163,184,.9);
  font-weight:900;
  text-align:center;
  flex:0 0 auto;
}
.chanName{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.unreadDot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  margin-left:8px;
  background:rgba(56,189,248,.95);
  box-shadow:0 0 0 3px rgba(56,189,248,.18);
}

.chanActions{
  padding:12px;
  border-top:1px solid var(--border);
  background:rgba(2,6,23,.45);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.row{ display:flex; gap:8px; }
input, button{
  border:1px solid #334155;
  background:#0b1220;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font:inherit;
}
input{ flex:1; min-width:0; }
button{ cursor:pointer; }
button:disabled{ opacity:.6; cursor:not-allowed; }

.pill{
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.45);
  color:var(--muted);
  font-size:12px;
}
.pill strong{ color:#e2e8f0; }

/* ===== Main ===== */
.main{
  background:var(--main);
  display:flex;
  flex-direction:column;
  min-width:0;
  border-right:1px solid var(--border);
}
.topbar{
  height:var(--topH);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-bottom:1px solid var(--border);
  background:rgba(15,23,42,.55);
  backdrop-filter: blur(10px);
}
.chanBadge{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:rgba(96,165,250,.12);
  border:1px solid rgba(96,165,250,.25);
  color:#dbeafe;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  max-width:50%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topic{
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.chat{
  flex:1;
  overflow:auto;
  padding:14px 16px 0;
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(168,85,247,.07), transparent 65%);
}

.msg{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  margin-bottom:6px;
}
.msg:hover{ background:rgba(148,163,184,.05); }
.avatar{
  width:38px;height:38px;
  border-radius:14px;
  background:rgba(96,165,250,.14);
  border:1px solid rgba(96,165,250,.20);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#dbeafe;
  flex:0 0 auto;
  user-select:none;
}
.bubble{ min-width:0; }
.meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px;
}
.nick{
  font-weight:900;
  font-size:13px;
}
.time{
  color:var(--muted);
  font-size:11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text{
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}

.sysline{
  color:var(--muted);
  font-size:12px;
  padding:8px 10px;
  border-left:3px solid rgba(148,163,184,.25);
  margin:6px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Preserve spacing for aligned server/service notices */
  white-space: pre;
}
.sysline strong{ color:#e2e8f0; }

.composer{
  height:var(--inputH);
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:rgba(2,6,23,.55);
  display:flex;
  gap:10px;
  align-items:center;
}
.composer input{
  height:48px;
  border-radius:14px;
}
.hint{
  color:var(--muted);
  font-size:11px;
  margin-left:auto;
  display:none;
}
@media (min-width: 1200px){
  .hint{ display:block; }
}

/* ===== Members ===== */
.members{
  background:var(--members);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.membersTop{
  height:var(--topH);
  display:flex;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid var(--border);
  background:rgba(15,23,42,.55);
  backdrop-filter: blur(10px);
  gap:10px;
}
.membersTop .title{
  font-weight:900;
  letter-spacing:.2px;
}
.membersTop .count{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.memberList{
  padding:10px 10px 14px;
  overflow:auto;
  min-height:0;
}
.memberItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  cursor:default;
  border:1px solid transparent;
}
.memberItem:hover{ background:rgba(148,163,184,.05); }
.mDot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(52,211,153,.9);
  box-shadow: 0 0 0 3px rgba(52,211,153,.10);
  flex:0 0 auto;
}
.mNick{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Modal ===== */
.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}
.modal{
  width:min(560px, 100%);
  border-radius:18px;
  background:rgba(15,23,42,.86);
  border:1px solid rgba(148,163,184,.20);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  overflow:hidden;
}
.modalHead{
  padding:16px 18px;
  border-bottom:1px solid rgba(148,163,184,.16);
  display:flex;
  align-items:center;
  gap:12px;
}
.modalHead img{
  width:34px;height:34px;
  object-fit:contain;
}
.modalTitle{
  font-weight:950;
  letter-spacing:.2px;
}
.modalSub{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.modalBody{
  padding:16px 18px 8px;
  display:grid;
  gap:12px;
}
.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px 2px;
  font-weight:700;
  letter-spacing:.02em;
}
.field input{
  width:100%;
  height:46px;
  border-radius:14px;
}
.modalFoot{
  padding:14px 18px;
  border-top:1px solid rgba(148,163,184,.16);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.btnPrimary{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.14);
}
.btnGhost{
  border-color: rgba(148,163,184,.22);
  background: rgba(2,6,23,.40);
  color: var(--muted);
}
.note{
  color:var(--muted);
  font-size:12px;
  padding:0 18px 16px;
}
.note code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:#dbeafe;
}
/* IMPORTANT: autorise le scroll dans un child flex */
.main { min-height: 0; }
.chat { min-height: 0; overflow-y: auto; }

.chat { scrollbar-gutter: stable; }

.chanTabs{
  display:flex;
  gap:8px;
  padding:10px 10px 0;
}
.tab{
  flex:1;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.35);
  color:#cbd5e1;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
}
.tab.active{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.14);
  color:#fff;
}

.chanBrowse{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:10px;
}
.browseTop{ display:flex; gap:8px; padding-bottom:10px; }
.browseList{
  overflow:auto;
  min-height:0;
  border:1px solid rgba(148,163,184,.12);
  border-radius:12px;
  background:rgba(2,6,23,.25);
}
.browseItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.08);
}
.browseItem:last-child{ border-bottom:none; }
.browseLeft{ min-width:0; }
.browseChan{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:900;
}
.browseMeta{ color:rgba(148,163,184,.85); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

.userbar{
  border-top:1px solid rgba(148,163,184,.14);
  background:rgba(2,6,23,.65);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.userMini{ display:flex; align-items:center; gap:10px; min-width:0; }
.userDot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(251,113,133,.9);
  box-shadow: 0 0 0 3px rgba(251,113,133,.10);
}
.userDot.on{
  background:rgba(52,211,153,.9);
  box-shadow: 0 0 0 3px rgba(52,211,153,.10);
}
.userText{ min-width:0; }
.userNick{ font-weight:950; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.userState{ color:rgba(148,163,184,.85); font-size:11px; }

.userBtns{ display:flex; gap:8px; align-items:center; }
.userBtns button{ padding:8px 10px; border-radius:12px; }

/* ===== Explorer (LIST) in main chat area ===== */
.explorerMain{
  padding: 14px 14px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.explorerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.explorerTitle{
  font-weight:700;
  letter-spacing:.2px;
  opacity:.92;
}

.explorerSearch{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.35);
  color:inherit;
  outline:none;
}

.explorerList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.explorerItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(2,6,23,.25);
  cursor:pointer;
  transition:transform .08s ease, border-color .12s ease, background .12s ease;
}

.explorerItem:hover{
  transform:translateY(-1px);
  border-color: rgba(56,189,248,.28);
  background:rgba(2,6,23,.34);
}

.explChan{
  font-weight:700;
}

.explTopic{
  opacity:.75;
  font-size:.92em;
  margin-top:2px;
}

.explRight{
  opacity:.75;
  font-variant-numeric: tabular-nums;
}


/* ===== Right-click context menu ===== */
.ctxMenu{
  position:absolute;
  z-index:99999;
  min-width: 190px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.ctxItem{
  width:100%;
  text-align:left;
  padding: 9px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ctxItem:hover{
  background: rgba(56,189,248,.12);
}

.ctxSep{
  height:1px;
  margin: 6px 4px;
  background: rgba(148,163,184,.16);
}

/* Explorer central */
.explorerMain { padding: 12px; }
.explorerTop { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:10px; }
.explorerTitle { font-weight:700; letter-spacing:.2px; }
.explorerHint { opacity:.7; font-size:12px; }
.explorerList { display:flex; flex-direction:column; gap:8px; }
.explorerItem { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid rgba(148,163,184,.14); border-radius:12px; cursor:pointer; }
.explorerItem:hover { border-color: rgba(56,189,248,.35); }
.exLeft { min-width:0; }
.exChan { font-weight:700; }
.exTopic { opacity:.75; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:720px; }
.exRight { display:flex; align-items:center; gap:12px; }
.exUsers { opacity:.8; font-variant-numeric: tabular-nums; }
.exJoin { padding:6px 10px; border-radius:10px; border:1px solid rgba(56,189,248,.25); }

/* Context menu */
#wlContextMenu { position:fixed; z-index:99999; min-width:190px; padding:8px; border-radius:12px;
  background:rgba(2,6,23,.98); border:1px solid rgba(148,163,184,.18); box-shadow:0 18px 60px rgba(0,0,0,.45); }
#wlContextMenu .cmItem { width:100%; text-align:left; padding:10px 10px; border-radius:10px; background:transparent; border:0; color:#e5e7eb; cursor:pointer; }
#wlContextMenu .cmItem:hover { background:rgba(56,189,248,.12); }
#wlContextMenu .cmItem:disabled { opacity:.35; cursor:not-allowed; }
#wlContextMenu .cmSep { height:1px; margin:6px 0; background:rgba(148,163,184,.14); }



/* =========================================================
   IRC (mIRC) formatting helpers
   - Classes generated by utils.js -> ircToHtml()
   ========================================================= */
.irc-bold{ font-weight: 700; }
.irc-italic{ font-style: italic; }
.irc-underline{ text-decoration: underline; }

/* mIRC palette 0-15 */
.irc-fg-0{ color:#ffffff; }  .irc-bg-0{ background:#ffffff; }
.irc-fg-1{ color:#000000; }  .irc-bg-1{ background:#000000; }
.irc-fg-2{ color:#00007f; }  .irc-bg-2{ background:#00007f; }
.irc-fg-3{ color:#009300; }  .irc-bg-3{ background:#009300; }
.irc-fg-4{ color:#ff0000; }  .irc-bg-4{ background:#ff0000; }
.irc-fg-5{ color:#7f0000; }  .irc-bg-5{ background:#7f0000; }
.irc-fg-6{ color:#9c009c; }  .irc-bg-6{ background:#9c009c; }
.irc-fg-7{ color:#fc7f00; }  .irc-bg-7{ background:#fc7f00; }
.irc-fg-8{ color:#ffff00; }  .irc-bg-8{ background:#ffff00; }
.irc-fg-9{ color:#00fc00; }  .irc-bg-9{ background:#00fc00; }
.irc-fg-10{ color:#009393; } .irc-bg-10{ background:#009393; }
.irc-fg-11{ color:#00ffff; } .irc-bg-11{ background:#00ffff; }
.irc-fg-12{ color:#0000fc; } .irc-bg-12{ background:#0000fc; }
.irc-fg-13{ color:#ff00ff; } .irc-bg-13{ background:#ff00ff; }
.irc-fg-14{ color:#7f7f7f; } .irc-bg-14{ background:#7f7f7f; }
.irc-fg-15{ color:#d2d2d2; } .irc-bg-15{ background:#d2d2d2; }

/* Small readability tweak: if a bg color is set, add padding/rounding */
.irc-bg-0,.irc-bg-1,.irc-bg-2,.irc-bg-3,.irc-bg-4,.irc-bg-5,.irc-bg-6,.irc-bg-7,.irc-bg-8,.irc-bg-9,.irc-bg-10,.irc-bg-11,.irc-bg-12,.irc-bg-13,.irc-bg-14,.irc-bg-15{
  padding: 0 2px;
  border-radius: 3px;
}

/* Clickable IRC channel tokens (#chan) */
.chanLink{
  cursor:pointer;
  color:#38bdf8;
  text-decoration:none;
  font-weight:600;
}
.chanLink:hover{ text-decoration:underline; }

/* Twemoji sizing */
img.emoji{
  height: 1.1em;
  width: 1.1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.15em;
}

/* --- Twemoji: make emoji images visible & aligned --- */
.text img.emoji,
.msg .text img,
.sysline img,
.chanItem img,
.chanName img {
  display: inline-block !important;
  height: 1.1em !important;
  width: 1.1em !important;
  vertical-align: -0.2em !important;
}
/* === Twemoji hard-fix === */
#chat img,
#chat img.emoji {
  display: inline-block !important;
  width: 1.15em !important;
  height: 1.15em !important;
  vertical-align: -0.2em !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  max-width: none !important;
  max-height: none !important;
}

#chat .text {
  overflow: visible !important;
}
/* =========================================================
   Emoji / Twemoji hard-fix (FINAL)
   - IMPORTANT: ton conteneur est .chat, pas #chat
   ========================================================= */

/* 1) Base: n'affecte QUE les emojis (pas les autres images) */
.chat img.emoji,
.text img.emoji,
.sysline img.emoji {
  display: inline-block !important;
  width: 1.15em !important;
  height: 1.15em !important;
  vertical-align: -0.2em !important;
  margin: 0 0.05em 0 0.1em !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* 2) Si ton renderer met des emojis <img> sans class="emoji" (fallback),
      on sécurise uniquement dans .text, pas partout */
.text img:not(.avatarImg):not(.guildImg):not(.modalImg) {
  /* On ne force PAS tout, seulement si un reset CSS les a cassés */
  vertical-align: middle;
}

/* 3) Empêche les conteneurs de couper les emojis */
.text,
.sysline {
  overflow: visible !important;
}

/* 4) Sécurité: images non-emoji (avatars, guild icons) restent normales */
.guild img{
  width:42px;height:42px;
  object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.modalHead img{
  width:34px;height:34px;
  object-fit:contain;
}


/* Firefox */
.chat{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.25) rgba(2,6,23,.55);
}

/* Chrome/Edge/Safari uniquement */
@supports selector(::-webkit-scrollbar){
  .chat::-webkit-scrollbar{ width: 10px; }
  .chat::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.25);
    border-radius: 999px;
    border: 2px solid rgba(2,6,23,.55);
  }
  .chat::-webkit-scrollbar-thumb:hover{
    background: rgba(148,163,184,.40);
  }
}


/* ===== Twemoji FINAL render fix ===== */
.chat img.emoji,
.chat .text img.emoji,
.chat .sysline img.emoji{
  display:inline-block !important;
  width:1.15em !important;
  height:1.15em !important;
  vertical-align:-0.2em !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}

.chat .text,
.chat .sysline{
  overflow:visible !important;
}
/* =========================================================
   Emoji picker (Composer)
   ========================================================= */

.composer{ position:relative; }

.emojiBtn{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.35);
  cursor:pointer;
  flex:0 0 auto;
}
.emojiBtn:hover{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.10);
}

.emojiPopover{
  position:absolute;
  left: 12px;
  bottom: calc(var(--inputH) + 10px);
  width: min(360px, calc(100vw - 24px));
  max-height: 360px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  overflow:hidden;
  z-index: 99999;
}

.emojiPopHead{
  display:flex;
  gap:10px;
  padding:10px;
  border-bottom:1px solid rgba(148,163,184,.14);
  align-items:center;
}

.emojiSearch{
  flex:1;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  color: inherit;
  padding: 8px 10px;
  outline:none;
}

.emojiClose{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  color: var(--muted);
  cursor:pointer;
}
.emojiClose:hover{
  color:#fff;
  border-color: rgba(96,165,250,.35);
}

.emojiGrid{
  padding:10px;
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:6px;
  overflow:auto;
  max-height: 300px;
}

.emojiItem{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  font-size: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.emojiItem:hover{
  border-color: rgba(56,189,248,.28);
  background: rgba(56,189,248,.08);
}


/* ===== Composer icon buttons & popovers ===== */
.iconBtn{
  height:48px;
  padding:0 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.40);
  cursor:pointer;
  user-select:none;
}
.iconBtn:hover{ background:rgba(96,165,250,.10); border-color:rgba(96,165,250,.28); }
.popover{
  position:absolute;
  bottom:calc(var(--inputH) - 6px);
  left:12px;
  width:min(380px, 92vw);
  max-height: min(420px, 60vh);
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.92);
  backdrop-filter: blur(16px);
  box-shadow:0 24px 90px rgba(0,0,0,.55);
  padding:10px;
  z-index:9998;
  overflow:hidden;
}
.emojiPopover{ left:12px; }
.colorPopover{ left:68px; width:min(440px, 92vw); }
.emojiPicker{ width:100%; height:360px; }
.emojiPicker::part(search){ color: var(--text); }
.emojiPicker::part(input){ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }

/* ===== IRC color picker (Option C) ===== */
.cpHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cpSeg{ display:flex; gap:6px; padding:6px; border:1px solid rgba(148,163,184,.14); border-radius:14px; background:rgba(255,255,255,.04); }
.cpSegBtn{ border:0; padding:8px 10px; border-radius:10px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; }
.cpSegBtn.active{ background:rgba(96,165,250,.14); color:#fff; }
.cpRight{ display:flex; align-items:center; gap:8px; }
.cpPreview{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-weight:900; }
.cpBtn,.cpBtnPrimary{ height:34px; padding:0 10px; border-radius:12px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.04); cursor:pointer; }
.cpBtnPrimary{ border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.14); }
.cpGrid{ display:grid; grid-template-columns: repeat(8, 1fr); gap:8px; }
.cpSw{ width:100%; aspect-ratio: 1/1; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); cursor:pointer; position:relative; }
.cpSw.active{ outline:2px solid rgba(96,165,250,.35); }
.cpIdx{ position:absolute; bottom:4px; right:6px; font-size:10px; opacity:.75; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.cpHint{ margin-top:10px; color:rgba(148,163,184,.85); font-size:12px; }
.cpHint code{ color:#dbeafe; }

/* ===== Toast overlay ===== */
.toastHost{ position:fixed; top:12px; right:12px; z-index:100000; display:flex; flex-direction:column; gap:10px; }
.toast{ width:min(360px, 92vw); border-radius:14px; border:1px solid rgba(148,163,184,.18); background:rgba(2,6,23,.92); backdrop-filter: blur(16px); box-shadow:0 18px 60px rgba(0,0,0,.45); padding:12px 12px; }
.toastTitle{ font-weight:900; font-size:13px; }
.toastBody{ opacity:.85; font-size:12px; margin-top:4px; }


/* ===== Composer buttons (Emoji/Color) ===== */
.iconBtn{
  height:48px;
  min-width:48px;
  padding:0 12px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #334155;
  background:#0b1220;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
.iconBtn:hover{ background:rgba(96,165,250,.10); }

.popover{
  position:absolute;
  bottom:calc(var(--inputH) - 10px);
  left:12px;
  z-index:9999;
  width:min(380px, 92vw);
  border-radius:16px;
  background:rgba(2,6,23,.92);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  overflow:hidden;
}
.emojiPopover{ left:12px; }
.colorPopover{ left:72px; width:min(430px, 96vw); }

/* emoji-picker-element custom styling */
emoji-picker.emojiPicker{
  width:100%;
  height:360px;
  --background: rgba(2,6,23,.92);
  --border-color: rgba(148,163,184,.18);
  --indicator-color: rgba(96,165,250,.85);
  --input-border-color: rgba(148,163,184,.22);
  --input-font-color: var(--text);
  --input-placeholder-color: rgba(148,163,184,.70);
  --outline-color: rgba(96,165,250,.45);
  --category-icon-color: rgba(148,163,184,.75);
  --category-icon-active-color: rgba(96,165,250,.95);
  --button-hover-background: rgba(96,165,250,.12);
}

/* ===== IRC color popover ===== */
.cpHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.cpSeg{ display:flex; gap:6px; }
.cpSegBtn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.45);
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}
.cpSegBtn.active{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.14);
  color:#fff;
}
.cpRight{ display:flex; align-items:center; gap:8px; }
.cpPreview{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.cpBtn, .cpBtnPrimary{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.40);
  color:var(--muted);
  cursor:pointer;
  font-weight:900;
}
.cpBtnPrimary{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.14);
  color:#fff;
}
.cpGrid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:8px;
  padding:12px;
}
.cpSwatch{
  height:34px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  cursor:pointer;
  position:relative;
}
.cpSwatch::after{
  content: attr(data-i);
  position:absolute;
  inset:auto 6px 6px auto;
  font-size:10px;
  opacity:.75;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  padding:1px 5px;
  border-radius:999px;
}
.cpSwatch.active{ outline:2px solid rgba(96,165,250,.45); }
.cpHint{
  padding:0 12px 12px;
  color:rgba(148,163,184,.85);
  font-size:11px;
}
.cpHint code{ color:#dbeafe; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ===== Toast notifications ===== */
.toastHost{
  position:fixed;
  top:12px;
  right:12px;
  z-index:100000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  width:min(340px, 92vw);
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.92);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  padding:12px 14px;
  pointer-events:none;
}
.toastTitle{ font-weight:950; margin-bottom:2px; }
.toastBody{ opacity:.85; font-size:12px; }
.toast.pm{ border-color: rgba(96,165,250,.28); }
.toast.hl{ border-color: rgba(251,191,36,.28); }


.chanClose{
  margin-left:auto;
  width:28px;height:28px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.35);
  color:#e5e7eb;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  line-height:1;font-size:18px;
}
.chanClose:hover{ background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.25); }


@media (max-width: 900px){
  .guilds{ display:none; }
  .members{ display:none; }
  .app{ grid-template-columns: var(--chanW) 1fr; }
}
@media (max-width: 520px){
  .channels{ display:none; }
  .app{ grid-template-columns: 1fr; }
}