/* =========================================================
   ircClient.css — Cleaned & Commented (final)
   ---------------------------------------------------------
   1) Shell & Themes
   2) Tabs, Unread Badge & Spinner
   3) Main Layout (Server variant)
   4) Channel View (Topic / Modes / Chat)
   5) Messages & Badges
   6) Input
   7) Userlist
   8) Context Menus (outside shell; themed)
   9) Modals
   10) Helpers & Responsive
   11) ALLCHANNEL Messages
   12) Reconnect button
   13) Notice messages
   14) Tab reording CSS
   15) Flood Warning Modal and message classes
   16) Responsive CSS
   17) Card Games — Fullscreen Overlay / Table / Buttons
   ========================================================= */


/* =========================
   1) SHELL & THEMES
   ========================= */

#ircClientShell{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:fixed !important;
  left:16px !important; right:16px !important; bottom:16px !important;
  z-index:99999 !important;
  display:flex; flex-direction:column;
  min-width:360px; max-width:calc(100% - 32px) !important;
  border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.3);
  transition:height .2s ease, box-shadow .2s ease, left .2s ease, right .2s ease, top .2s ease, bottom .2s ease;
  overflow:visible; /* do not clip descendants */
}

#ircClientShell.ircc-dark  { background:rgba(20,20,24,.96);  color:#e9eef6; }
#ircClientShell.ircc-light { background:rgba(248,248,252,.98); color:#111; }
#ircClientShell.ircc-transparent { backdrop-filter:blur(6px); }

#ircClientShell .irc-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:10px 14px; user-select:none; cursor:default;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#ircClientShell.ircc-light .irc-bar{ border-bottom-color:rgba(0,0,0,.08); }

#ircClientShell .irc-handle{ font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px; }
#ircClientShell .irc-controls{ margin-left:auto; display:flex; gap:8px; align-items:center; }

/* Buttons (override Bootstrap look) */
#ircClientShell.ircc-dark button,
#ircClientShell.ircc-dark .irctabs button{
  color:#fff !important; background-color:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.35);
}
#ircClientShell.ircc-light button,
#ircClientShell.ircc-light .irctabs button{
  color:#000 !important; background-color:rgba(0,0,0,.05) !important;
  border:1px solid rgba(0,0,0,.2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.05);
}

/* Content becomes visible when open/maximized */
#ircClientShell .irc-content{ display:none; flex:1 1 auto; padding:16px !important; box-sizing:border-box !important; }
#ircClientShell.ircc-open .irc-content,
#ircClientShell.ircc-max  .irc-content{ display:block; }

/* Start of : Quick Action Button CSS */
/* === IRCQuickAction (global; works inside or outside the shell) === */
.IRCQuickAction {
    font-weight: 900;
    font-size: 16px;
}
.IRCQuickAction.JoinChannel.btn.btn-default {
    background: #000;
    color: yellow;
    border: 2px solid yellow;
    border-radius: 5px;
}
.IRCQuickAction.JoinChannel.btn.btn-default:hover {
    background: #f1f1f1;
    color: #000;
    border: 2px solid #000;
}
/*.IRCQuickAction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.20);
    background: rgba(0,0,0,0.05);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: transform .06s ease, box-shadow .12s ease;
}
.IRCQuickAction:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.IRCQuickAction:active { transform: translateY(1px); }*/
/* End of : Quick Action Button CSS */



/* =========================
   2) TABS, UNREAD BADGE & SPINNER
   ========================= */

.irctabs{
  flex:0 0 auto; display:flex; gap:6px; overflow-x:auto;
  padding:0 0 10px 0; white-space:nowrap;
}

#ircClientShell .irctabs button{
  position:relative; /* anchor for badge/spinner */
  display:inline-flex;
  align-items:center; gap:8px; overflow:visible;
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  min-width:86px;
}
#ircClientShell.ircc-light .irctabs button{ border-color:rgba(0,0,0,.12); }

.irctabs button .tab-title{ overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.irctabs button .tab-close{ font-weight:700; opacity:.85; padding:0 2px; }

/* Active tab (no translate to avoid badge wobble) */
.irctabs button.active{
  box-shadow:0 6px 18px rgba(0,0,0,.2) inset, 0 0 0 1px currentColor inset;
  transform:none;
}
#ircClientShell.ircc-dark  .irctabs button.active{ background:rgba(255,214,10,.18) !important; border-color:rgba(255,214,10,.95) !important; color:#ffe66d !important; }
#ircClientShell.ircc-light .irctabs button.active{ background:rgba(58,122,254,.12) !important; border-color:rgba(58,122,254,.95) !important; color:#1e40af !important; }

/* System tabs (!SERVER/!ALLCHANNELS/!LINKS) */
#ircClientShell .irctabs button.sys-tab{ font-weight:600 !important; border-width:1px !important; }
#ircClientShell.ircc-dark  .irctabs button.sys-tab{ background:rgba(255,193,7,.24) !important; border-color:rgba(255,193,7,.35) !important; color:#ffe082 !important; }
#ircClientShell.ircc-light .irctabs button.sys-tab{ background:rgba(255,193,7,.18) !important; border-color:rgba(214,158,0,.45) !important; color:#9a6b00 !important; }

/* PM/Whisper tabs */
#ircClientShell .irctabs button.pm-tab{ font-weight:600 !important; }
#ircClientShell.ircc-dark  .irctabs button.pm-tab{ background:rgba(156,39,176,.22) !important; border-color:rgba(206,147,216,.55) !important; color:#e1bee7 !important; }
#ircClientShell.ircc-light .irctabs button.pm-tab{ background:rgba(156,39,176,.12) !important; border-color:rgba(156,39,176,.45) !important; color:#6a1b9a !important; }
#ircClientShell.ircc-dark  .irctabs button.pm-tab.active{ background:rgba(186,104,200,.28) !important; border-color:rgba(255,214,10,.95) !important; color:#f3e5f5 !important; }
#ircClientShell.ircc-light .irctabs button.pm-tab.active{ background:rgba(156,39,176,.16) !important; border-color:rgba(58,122,254,.95) !important; color:#4a148c !important; }

/* Unread badge — vertically centered; theme colors */
.irctabs .tab-count{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  display:none; min-width:18px; height:18px; line-height:18px;
  border-radius:9px; text-align:center; padding:0 5px;
  font-size:11px; font-weight:700; box-sizing:border-box;
}
#ircClientShell.ircc-dark  .irctabs .tab-count{ background:#f5c542; color:#000; }
#ircClientShell.ircc-light .irctabs .tab-count{ background:#d93025; color:#fff; }

/* Reserve right-side space (also prevents ? overlap) */
#ircClientShell .irctabs button.has-badge{ padding-right:28px; }
#ircClientShell .irctabs button.has-badge.badge-2{ padding-right:34px; }
#ircClientShell .irctabs button.has-badge.badge-3{ padding-right:40px; }
/* Ensure the close X doesn't collide with spinner/badge */
.irctabs button.has-badge .tab-close{ margin-right:22px; }
.irctabs button.has-badge.badge-2 .tab-close{ margin-right:28px; }
.irctabs button.has-badge.badge-3 .tab-close{ margin-right:34px; }

/* Loading spinner replaces the badge (no legacy border spinner) */
.irctabs .tab-count.loading{ background:transparent !important; box-shadow:none !important; font-size:0; }
/* Pretty spinner via ::after (rotates + breathes) */
.irctabs .tab-count.loading::after{
  content:""; position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  --arc:40deg;
  background:conic-gradient(currentColor 0 var(--arc), transparent var(--arc) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:irc-spin .8s linear infinite, irc-sweep 1.4s ease-in-out infinite;
  pointer-events:none;
}
#ircClientShell.ircc-dark  .irctabs .tab-count.loading{ color:#f5c542; }
#ircClientShell.ircc-light .irctabs .tab-count.loading{ color:#3a7afe; }

@keyframes irc-spin{ to{ transform:translateY(-50%) rotate(360deg); } }
@keyframes irc-sweep{ 0%{--arc:40deg;} 50%{--arc:320deg;} 100%{--arc:40deg;} }

/* Fallback (no conic-gradient support) */
@supports not (background: conic-gradient(red, transparent)){
  .irctabs .tab-count.loading::after{
    background:none; border:2px solid currentColor; border-right-color:transparent;
    -webkit-mask:none; mask:none; animation:irc-spin-fallback .8s linear infinite;
  }
  @keyframes irc-spin-fallback{ to{ transform:translateY(-50%) rotate(360deg);} }
}

/* Close “×” fixed at far right */
.irctabs .tab-close{
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  line-height: 1;
  z-index: 2;
}

/* Unread badge fixed just left of the close button */
.irctabs .tab-count{
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: none;
}
#ircClientShell.ircc-dark .server-tab .tab-count {
  right: 5px;
}

/* Show the badge when the button has unread */
.irctabs button.show-badge .tab-count{ display:inline-block; }

/* Optional: if you had earlier margin tricks for .tab-close/.has-badge, remove them */
.irctabs button.has-badge .tab-close,
.irctabs button.has-badge.badge-2 .tab-close,
.irctabs button.has-badge.badge-3 .tab-close{
  margin-right: 0 !important;
}



/* =========================
   3) MAIN LAYOUT (SERVER VARIANT)
   ========================= */

.irc-main-layout{
  display:grid; grid-template-columns:1fr 260px; gap:16px; box-sizing:border-box;
}
#ircClientShell.server-mode .irc-main-layout{ grid-template-columns:1fr !important; }
#ircClientShell.server-mode .userlist-area{ display:none !important; }

#ircClientShell .irc-main-layout,
#ircClientShell .channel-area,
#ircClientShell .channel-view,
#ircClientShell .userlist-area,
#ircClientShell .chat-history {
  min-height: 0;
}


/* =========================
   4) CHANNEL VIEW (TOPIC / MODES / CHAT)
   ========================= */

.channel-view{
  display:flex; flex-direction:column; box-sizing:border-box;
  padding:12px; padding-bottom:12px;
  border-radius:10px; background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
}
#ircClientShell.ircc-light .channel-view{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.08); }

/* Two-row meta header: topic row, then modes/bans row */
.channel-view .channel-meta{
  display:grid !important;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  grid-column-gap:10px; grid-row-gap:8px;
}

/* Topic line (prominent; up to 2 lines) */
.channel-view .topic-line{
  grid-column:1 / -1; display:flex; align-items:center; gap:10px;
  min-height:44px; padding:8px 10px; border-radius:8px;
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.12);
}
#ircClientShell.ircc-dark .topic-line{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); }

.topic-line .topic-text{
  flex:1 1 auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; white-space:normal !important;
}
.topic-line .topic-edit-wrap{ display:none; gap:8px; }
.topic-line .topic-input{ min-width:260px; }

/* Modes/Bans row */
.channel-view .modes-line{ grid-column:1 / -1; padding:4px 2px; font-size:12px; opacity:.9; }

/* Chat history (height managed by JS) */
.chat-history{
  overflow-y:auto;
  padding:10px 10px 10px 0;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
  scrollbar-gutter:stable both-edges;
}
#ircClientShell.ircc-dark .chat-history{ border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.05); }

#ircClientShell .ircc-chan-link { cursor: pointer; }


/* =========================
   5) MESSAGES & BADGES
   ========================= */

.msg{ margin:6px 0; line-height:1.3; }

.msg-card{
  border-radius:8px;
  padding:8px 10px;
  margin:8px 10px 8px 0;
  background:rgba(255,255,255,.75); border-left:3px solid transparent;
}
#ircClientShell.ircc-dark .msg-card{ background:rgba(0,0,0,.35); }

.msg-self{ border-left-color:#1e88e5; }
#ircClientShell.ircc-dark .msg-self{ border-left-color:#64b5f6; }
.msg-cmd{  background:rgba(66,133,244,.15); }
.msg-mode{ background:rgba(251,188,5,.18); }
.msg-nick{ background:rgba(251,188,5,.18); }
.msg-join{ background:rgba(251,188,5,.18); }
.msg-part{ background:rgba(251,188,5,.18); }
.msg-quit{ background:rgba(251,188,5,.18); }
#ircClientShell.ircc-dark .msg-cmd{  background:rgba(66,133,244,.28); }
#ircClientShell.ircc-dark .msg-mode{ background:rgba(251,188,5,.32); }
#ircClientShell.ircc-dark .msg-nick{ background:rgba(251,188,5,.32); }
#ircClientShell.ircc-dark .msg-join{ background:rgba(251,188,5,.32); }
#ircClientShell.ircc-dark .msg-part{ background:rgba(251,188,5,.32); }
#ircClientShell.ircc-dark .msg-quit{ background:rgba(251,188,5,.32); }

.msg-mode .msg-head,
.msg-nick .msg-head,
.msg-join .msg-head,
.msg-part .msg-head,
.msg-quit .msg-head {
    float: right;
}
.msg-mode .head-left,
.msg-nick .head-left,
.msg-join .head-left,
.msg-part .head-left,
.msg-quit .head-left {
    display:none;
}

.msg-card .msg-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; opacity:.95; }
.msg-card .nick{ font-weight:700; }
.msg-card .badges{ display:inline-flex; gap:6px; font-size:11px; }

.msg-card .badge{ padding:1px 6px; border-radius:999px; font-weight:600; }
.badge-op{    background:#d93025; color:#fff; }
.badge-voice{ background:#1e8e3e; color:#fff; }
.badge-irco{  background:#b00020; color:#fff; }

/* SERVER tab — make only the message body text orange (both themes) */
#ircClientShell [data-tab="!SERVER"] .chat-history .msg-card .msg-text,
#ircClientShell [data-key="!SERVER"] .chat-history .msg-card .msg-text{
  color: #bf5e0f !important;
}

/* (Optional) if you have a special Wallops card, don't recolor its text */
#ircClientShell [data-tab="!SERVER"] .chat-history .msg-card.msg-wallops .msg-text,
#ircClientShell [data-key="!SERVER"] .chat-history .msg-card.msg-wallops .msg-text{
  color: inherit !important;
}

/* === Nickname styling like mIRC: <Nickname> === */

/* Orange angle brackets on every message */
#ircClientShell .chat-history .msg-card .msg-head .nick::before {
  content: "<";
  color: #bf5e0f;            /* same orange as !SERVER messages */
  margin-right: 2px;
  font-weight: 700;
}
#ircClientShell .chat-history .msg-card .msg-head .nick::after {
  content: ">";
  color: #bf5e0f;
  margin-left: 2px;
  font-weight: 700;
}

/* Self user's nickname color = same vibe as your self-message accent */
#ircClientShell.ircc-dark  .chat-history .msg-card.msg-self .msg-head .nick { color: #64b5f6; }
#ircClientShell.ircc-light .chat-history .msg-card.msg-self .msg-head .nick { color: #1e88e5; }

/* Join/Part/Kick/Ban: make the “title” nick orange like !SERVER */
#ircClientShell .chat-history .msg-card.msg-join .msg-head .nick,
#ircClientShell .chat-history .msg-card.msg-part .msg-head .nick,
#ircClientShell .chat-history .msg-card.msg-kick .msg-head .nick,
#ircClientShell .chat-history .msg-card.msg-ban .msg-head .nick,
#ircClientShell .chat-history .msg-card.msg-quit .msg-head .nick,
#ircClientShell .chat-history .msg-card[data-kind="join"] .msg-head .nick,
#ircClientShell .chat-history .msg-card[data-kind="part"] .msg-head .nick,
#ircClientShell .chat-history .msg-card[data-kind="kick"] .msg-head .nick,
#ircClientShell .chat-history .msg-card[data-kind="ban"] .msg-head .nick,
#ircClientShell .chat-history .msg-card[data-kind="quit"] .msg-head .nick {
  color: #bf5e0f;
}
/* Make < > brackets black on yellow mode/topic cards (both themes) */
#ircClientShell .chat-history .msg-card.msg-mode .msg-head .nick::before,
#ircClientShell .chat-history .msg-card.msg-mode .msg-head .nick::after,
#ircClientShell .chat-history .msg-card.msg-nick .msg-head .nick::before,
#ircClientShell .chat-history .msg-card.msg-nick .msg-head .nick::after,
#ircClientShell .chat-history .msg-card.msg-topic .msg-head .nick::before,
#ircClientShell .chat-history .msg-card.msg-topic .msg-head .nick::after,
#ircClientShell .chat-history .msg-card[data-kind="mode"]  .msg-head .nick::before,
#ircClientShell .chat-history .msg-card[data-kind="mode"]  .msg-head .nick::after,
#ircClientShell .chat-history .msg-card[data-kind="nick"]  .msg-head .nick::before,
#ircClientShell .chat-history .msg-card[data-kind="nick"]  .msg-head .nick::after,
#ircClientShell .chat-history .msg-card[data-kind="topic"] .msg-head .nick::before,
#ircClientShell .chat-history .msg-card[data-kind="topic"] .msg-head .nick::after {
  color: #000; /* black reads clean over the yellow background */
}


/* Emotes (/me) — subtle purple tint + italic body */
.msg-emote { 
  background: rgba(155, 81, 224, 0.10);
  border-left-color: #9b51e0;            /* prominent left bar */
}
#ircClientShell.ircc-dark .msg-emote { 
  background: rgba(155, 81, 224, 0.20);
}
.msg-emote .msg-head { float:right; }
.msg-emote .head-left { display:none; }
.msg-emote .msg-body { font-style: italic; }

/* Keep angle brackets readable on emotes (use the regular orange) */
.msg-emote .angles { color: #bf5e0f; }

/* Links inside messages */
#ircClientShell .chat-history a[data-ircc-link]{
  text-decoration: underline;
  word-break: break-word;
}
#ircClientShell.ircc-dark  .chat-history a[data-ircc-link]{ color: #9ec5ff; }
#ircClientShell.ircc-light .chat-history a[data-ircc-link]{ color: #1a73e8; }
#ircClientShell .chat-history a[data-ircc-link]:hover{
  text-decoration-thickness: 2px;
}

/* YouTube embed wrapper */
#ircClientShell .yt-embed-wrap{
  margin: 6px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
}
#ircClientShell.ircc-dark .yt-embed-wrap{
  border-color: rgba(255,255,255,0.12);
}
#ircClientShell .yt-embed{
  display: block;
  width: 100%; /* actual pixel size set by JS for exact 16:9 */
}

/* TikTok embed (vertical video) */
.tt-embed-wrap {
  width: 100%;
  max-width: 560px;      /* keep in line with your YT width cap */
  margin: 6px 0;
}

.tt-embed {
  width: 100%;
  aspect-ratio: 9 / 16;  /* TikTok is vertical; keeps ratio */
  max-height: 78vh;      /* avoid towering embeds on huge screens */
  border: 0;
  border-radius: 8px;
  display: block;
}

/* Rumble iframe (sized by the same JS as YouTube) */
.rumble-embed{
  display:block;
  width:100%;
  border:0;
  border-radius:8px;
}

/* optional, purely cosmetic */
#ircClientShell .sc-embed-wrap { margin-top: 6px; }

/* SoundCloud player */
.sc-embed {
  display:block;
  width:100%;
  border:0;
  border-radius:8px;
}

/* Twitch player */
.tw-embed {
  display:block;
  width:100%;
  border:0;
  border-radius:8px;
}

/* Vimeo player */
.vimeo-embed {
  display:block;
  width:100%;
  border:0;
  border-radius:8px;
}

/* Spotify player */
.sp-embed {
  display:block;
  width:100%;
  border:0;
  border-radius:8px;
}

/* --- Mention alert on tabs (pulsing red border/glow) --- */
#ircClientShell .irctabs button.mention-alert{
  border-color:#e53935 !important;
  box-shadow:0 0 0 2px rgba(229,57,53,.45) inset, 0 0 10px rgba(229,57,53,.35);
  animation:ircc-tab-pulse 1s ease-in-out infinite;
}
@keyframes ircc-tab-pulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(229,57,53,.45) inset, 0 0 10px rgba(229,57,53,.35); }
  50%   { box-shadow:0 0 0 3px rgba(229,57,53,.75) inset, 0 0 14px rgba(229,57,53,.55); }
}

/* --- Mention highlight on the message card (permanent) --- */
#ircClientShell .chat-history .msg.msg-mention{
  position:relative;
  background:rgba(255,214,10,.12); /* subtle amber wash */
  box-shadow:0 0 0 2px rgba(255,214,10,.85) inset, 0 0 14px rgba(255,214,10,.35);
  border-left-color:#ffd60a !important; /* keep left accent vivid */
}

/* START OF: User Badge CSS in Message zone */
/* ==== Badges – high-contrast colors (works in dark & light) ==== */
/* Base */
.badges .badge,
.badges .b,
.badges .rank-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  line-height:1;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  border:1px solid transparent;
}

/* Operator (@) — red pill, white text */
.theme-dark .badges .badge-op,
.theme-dark .badges .b-op,
.theme-dark .badges .rank-op,
.badges .badge-op,
.badges .b-op,
.badges .rank-op {
  background:#b62d2d;
  color:#fff;
  border-color:#cf6868;
}

/* Halfop (%) — orange pill, dark text */
.theme-dark .badges .badge-hop,
.theme-dark .badges .b-hop,
.theme-dark .badges .rank-hop,
.badges .badge-hop,
.badges .b-hop,
.badges .rank-hop {
  background:#d98324;
  color:#1b1208;
  border-color:#e8a86a;
}

/* Voice (+) — green pill, white text */
.theme-dark .badges .badge-voice,
.theme-dark .badges .b-voice,
.theme-dark .badges .rank-voice,
.badges .badge-voice,
.badges .b-voice,
.badges .rank-voice {
  background:#2f8f4b;
  color:#fff;
  border-color:#69c189;
}

/* Chan owner (~) — plum */
.theme-dark .badges .badge-owner,
.theme-dark .badges .b-owner,
.theme-dark .badges .rank-owner,
.badges .badge-owner,
.badges .b-owner,
.badges .rank-owner {
  background:#7f3a91;
  color:#fff;
  border-color:#b37acc;
}

/* Chan protected (&) — teal */
.theme-dark .badges .badge-prot,
.theme-dark .badges .b-prot,
.theme-dark .badges .rank-prot,
.badges .badge-prot,
.badges .b-prot,
.badges .rank-prot {
  background:#1f7b82;
  color:#fff;
  border-color:#59b6bc;
}

/* IRCop star in messages – keep visible on both themes */
.badges .op-badge img {
  width:14px; height:14px; object-fit:contain;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
}
/* If you ever use a monochrome star svg/png, uncomment to auto-invert on light theme */
/* .theme-light .badges .op-badge img { filter: invert(1) drop-shadow(0 0 1px rgba(0,0,0,.15)); } */

/* ——— Userlist badges already colored via the nick classes; make sure text stays readable ——— */
.user-entry .rank-op,
.user-entry .rank-owner,
.user-entry .rank-prot,
.user-entry .rank-hop,
.user-entry .rank-voice {
  font-weight:700;
}

/* Small tweak so blue self nick NEVER clashes with green voice pill */
.msg .badges .badge-voice,
.msg .badges .b-voice { color:#fff !important; }

/* Optional: subtle border in light theme for separation */
.theme-light .badges .badge,
.theme-light .badges .b,
.theme-light .badges .rank-badge {
  border-color:rgba(0,0,0,.08);
}

/* END OF: User Badge CSS in Message zone */

.msg-notice .badge-irco {
    padding: 4px 6px;
    font-size: 13px;
    line-height: 13px;
    border-radius: 5px;
}

/* =========================
   6) INPUT
   ========================= */

.input-area{ flex:0 0 auto; display:flex; gap:8px; align-items:center; margin-top:10px; }
.input-area input[type="text"]{
  flex:1; min-height:40px; padding:12px 12px; box-sizing:border-box;
  border:1px solid rgba(0,0,0,.12); border-radius:8px; outline:none;
}
#ircClientShell.ircc-dark .input-area input[type="text"]{ background:rgba(0,0,0,.45); color:#fff; border-color:rgba(255,255,255,.08); }
.input-area input[type="text"]:focus{ box-shadow:0 0 0 4px rgba(0,120,215,.10); transform:translateY(-1px); transition:all 120ms; }

.ircc-btn{ border:1px solid rgba(255,255,255,.2); background:transparent; color:inherit; padding:6px 10px; border-radius:8px; }
.ircc-btn.primary{ background:#3a7afe; border-color:#3a7afe; color:#fff; }



/* =========================
   7) USERLIST
   ========================= */

.userlist-area{ display:flex; flex-direction:column; justify-content:flex-start; }
.userlist{
  background:rgba(0,0,0,.03);
  border-radius:10px !important;
  border:1px solid rgba(0,0,0,.12);
  overflow-y:auto; padding:8px 10px 10px; box-sizing:border-box;
}
#ircClientShell.ircc-dark .userlist{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }

.userlist .group{ margin-bottom:8px; }
.user-entry{ display:flex; gap:8px; align-items:center; padding:6px; border-radius:6px; cursor:default; }
.user-entry:hover{ background:rgba(0,0,0,.05); }

.user-entry .op-badge{ color:#fff; background:#d33; padding:2px 6px; border-radius:4px; font-size:11px; margin-right:6px; }

/* START : USER LIST role colos */
/* --- Role colors (dark, readable on your theme) --- */
:root {
  /* tweak if you want them a hair brighter/darker */
  --irc-op-color:   #c0392b; /* dark red */
  --irc-voice-color:#1f4fbf; /* dark blue */
}

/* Badges in message headers */
.badge-op    { color: var(--irc-op-color); }
.badge-voice { color: var(--irc-voice-color); }

/* Message-card nick coloring */
.msg-card .nick.nick-op    { color: var(--irc-op-color) !important; }
.msg-card .nick.nick-voice { color: var(--irc-voice-color) !important; }

/* User list coloring: make the symbol and the name match */
.user-entry.role-op    .nickTxt,
.user-entry.role-op    [title="rank"] { color: var(--irc-op-color); }

.user-entry.role-voice .nickTxt,
.user-entry.role-voice [title="rank"] { color: var(--irc-voice-color); }

/* Keep your "self" blue when not op/voice */
.user-entry.self:not(.role-op):not(.role-voice) .nickTxt { 
  /* whatever blue you already use for self */
  color: var(--self-blue, #64b5f6);
}
/* NEW */
/* ---------- Role color tokens ---------- */
#ircClientShell.irc-dark,
#ircClientShell[data-theme="dark"] {
  --nick-op:    #e24a3d;   /* deep warm red (good on dark) */
  --nick-voice: #6aa7ff;   /* bright blue (good on dark) */
  --nick-self:  #78d4ff;   /* cyan/blue for “you” when not op/voice */
}

#ircClientShell.irc-light,
#ircClientShell[data-theme="light"] {
  --nick-op:    #b71f1f;   /* darker red (contrast on light bg) */
  --nick-voice: #1d4ed8;   /* deeper royal blue */
  --nick-self:  #0b6dbd;   /* medium blue for “you” when not op/voice */
}

/* ---------- Userlist (rank + nick) ---------- */
.user-entry .rank,
.user-entry .nickTxt {
  font-weight: 600;                 /* bold all nicks for readability */
  transition: color .15s ease-in-out;
}

/* rank badges and names share the same color per role */
.user-entry .rank.rank-op,
.user-entry .nickTxt.is-op     { color: var(--nick-op); }

.user-entry .rank.rank-voice,
.user-entry .nickTxt.is-voice  { color: var(--nick-voice); }

/* your own name if you’re neither op nor voice */
.user-entry .nickTxt.is-self:not(.is-op):not(.is-voice) {
  color: var(--nick-self);
}

/* keep the symbol itself in the same color */
.user-entry .rank.rank-op      { /* already colored by rule above */ }
.user-entry .rank.rank-voice   { /* already colored by rule above */ }

/* ---------- Messages (channel history) ---------- */
/* We’ll add small classes on the <span class="nick"> to reflect role */
.msg .nick { font-weight: 600; }

.msg .nick.op      { color: var(--nick-op); }
.msg .nick.voice   { color: var(--nick-voice); }

/* If message is yours and you’re not op/voice there, tint with self */
.msg .nick.nick-self:not(.op):not(.voice) { color: var(--nick-self); }

/* END : USER LIST role colos */



/* =========================
   8) CONTEXT MENUS (outside shell; themed)
   ========================= */

/* Base (dark look, like your working file) */
#ircc-context,
#ircc-sub,
#ircc-sub2{
    position: fixed !important; /* use viewport coords */
    z-index: 999999 !important; /* above everything */
    left: 0;  /* will be set by JS */
    top: 0;   /* will be set by JS */
    visibility: hidden; /* measured, then shown */
    display: none;
    min-width: 220px;
    padding: 6px;                    /* outer gutter around items */
    background: rgba(20,20,20,.95);
    color: #fff;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    font: 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    user-select: none;
}

/* Items (buttons and custom rows) — comfy spacing + pointer */
#ircc-context button,
#ircc-sub button,
#ircc-sub2 button,
#ircc-context .ircc-ctx-item,
#ircc-sub .ircc-ctx-item,
#ircc-sub2 .ircc-ctx-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;              /* match your “good” padding */
  line-height: 1.4;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* Hover (dark) */
#ircc-context button:hover,
#ircc-sub button:hover,
#ircc-sub2 button:hover,
#ircc-context .ircc-ctx-item:hover,
#ircc-sub .ircc-ctx-item:hover,
#ircc-sub2 .ircc-ctx-item:hover{
  background: rgba(255,255,255,.07);
}

/* Dividers (dark) */
#ircc-context .ircc-divider,
#ircc-sub .ircc-divider,
#ircc-sub2 .ircc-divider{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 6px 10px;                /* inset to align with item padding */
}

/* ---------- Light theme overrides (menu is a sibling of the shell) ---------- */
#ircClientShell.ircc-light ~ #ircc-context,
#ircClientShell.ircc-light ~ #ircc-sub,
#ircClientShell.ircc-light ~ #ircc-sub2{
  background: #fff;
  color: #111;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
}

#ircClientShell.ircc-light ~ #ircc-context button:hover,
#ircClientShell.ircc-light ~ #ircc-sub button:hover,
#ircClientShell.ircc-light ~ #ircc-sub2 button:hover,
#ircClientShell.ircc-light ~ #ircc-context .ircc-ctx-item:hover,
#ircClientShell.ircc-light ~ #ircc-sub .ircc-ctx-item:hover,
#ircClientShell.ircc-light ~ #ircc-sub2 .ircc-ctx-item:hover{
  background: rgba(0,0,0,.05);
}

/* Light divider contrast (the change you asked for) */
#ircClientShell.ircc-light ~ #ircc-context .ircc-divider,
#ircClientShell.ircc-light ~ #ircc-sub .ircc-divider,
#ircClientShell.ircc-light ~ #ircc-sub2 .ircc-divider{
  border-top-color: rgba(0,0,0,.22);
}


/* =========================
   9) MODALS
   ========================= */

.ircc-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:99999; }
.ircc-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:420px; max-width:90vw; max-height:80vh; overflow:auto;
  background:#1b1b1b; color:#eee; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); display:none; z-index:100000;
}
.ircc-modal header{ padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.1); font-weight:600; }
.ircc-modal .body{   padding:12px 16px; }
.ircc-modal .footer{ padding:12px 16px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:flex-end; gap:10px; }



/* =========================
   10) HELPERS & RESPONSIVE
   ========================= */

.empty-hint{ opacity:.7; font-size:12px; padding:10px; }
.ircc-indent{ margin-left:18px; }
.ircc-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ircc-dim{ opacity:.7; }

#ircClientShell .channel-view .util-spacer{ width:100%; }

#ircClientShell.ircc-light .chat-history{ background:rgba(0,0,0,.03); }

@media (max-width:900px){
  .irc-main-layout{ grid-template-columns:1fr; }
}

/* =========================
   11) ALLCHANNEL Messages
   ========================= */

/* !ALLCHANNELS list rows: two-column grid, topic wraps to 2 lines */
#ircClientShell .allch-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}
#ircClientShell .allch-row .left{ min-width: 0; } /* allow wrapping */
#ircClientShell .allch-row .ch{ font-weight: 700; margin-right: 6px; }
#ircClientShell .allch-row .topic{
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* two lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
#ircClientShell .allch-row .right{
  display: inline-flex; align-items: center; gap: 8px;
}
#ircClientShell .allch-row .users{
  opacity: .75; font-size: 12px;
}

/* ALLCHANNELS rows: left text + right actions */
.allch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.allch-row .left {
  flex: 1 1 auto;
  min-width: 0; /* allow ellipsis/wrap */
}

.allch-row .ch { font-weight: 700; margin-right: 6px; }
.allch-row .sep { opacity: .65; margin-right: 6px; }

/* two-line topic, no overlap with Join button */
.allch-row .topic {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.allch-row .right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.allch-row .users { opacity: .8; font-size: 12px; }

/* !ALLCHANNELS: layout + pill */
.allch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.allch-row .left { flex:1 1 auto; min-width:0; }
.allch-row .ch { font-weight:700; margin-right:6px; }
.allch-row .sep { opacity:.65; margin-right:6px; }

/* Topic wraps to two lines and never collides with the right-side controls */
.allch-row .topic{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
}

.allch-row .right{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; }

/* Users pill */
.allch-row .users-pill{
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;           /* “1000” and bigger stay tidy */
  opacity:.95;
}
#ircClientShell.ircc-light .allch-row .users-pill{ border-color:rgba(0,0,0,.20); color:#111; }
#ircClientShell.ircc-dark  .allch-row .users-pill{ color:#eee; }



/* =========================
   12) Reconnect button
   ========================= */

#ircClientShell .irc-controls .irc-reconnect.ircc-btn.danger,
#ircClientShell.ircc-dark .irc-controls .irc-reconnect.ircc-btn.danger {
  background: #b00020 !important;
  border-color: #b00020 !important;
  color: #fff !important;
}
#ircClientShell.ircc-light .irc-controls .irc-reconnect.ircc-btn.danger {
  background: #c62828 !important;
  border-color: #c62828 !important;
  color: #fff !important;
}
#ircClientShell .irc-controls .irc-reconnect.ircc-btn.danger:hover {
  filter: brightness(1.05) !important;
}



/* =========================
   13) Notice messages — compact row, all bold
   ========================= */

#ircClientShell .msg-card.msg-notice{
  background:#bf5e0f;          /* orange */
  color:#000;                  /* black text */
  border-left-color:#7a3c06;
  padding:6px 10px;
  line-height:1.15;
  font-weight:700;             /* everything bold */
}
#ircClientShell.ircc-light .msg-card.msg-notice {
  background:#dea16f;          /* Lighter orange */
}
.msg-notice .msg-text,
.msg-card .msg-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}



/* no badges in notices */
.msg-notice .badges{ display:none !important; }

/* one-row grid: [ <Nick> ] [ message (wraps) ] [ time ] */
.msg-notice .msg-line{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:10px;
  align-items:center;
}

/* keep nick tight, no wrapping */
.msg-notice .nick-wrap{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* black angle brackets on orange */
.msg-notice .nick-angles{ color:#000 !important; }

/* message can wrap; don’t push time */
.msg-notice .notice-text{
  min-width:0;
  word-wrap:break-word;
}

/* time pinned on the right, single line */
.msg-notice .meta{
  white-space:nowrap;
  color:#000;
  opacity:1;
}

/* =========================
   14) Tab reording CSS
   ========================= */

/* --- Tab drag indicators (minimal, non-invasive) --- */
.irctabs button.dragging { opacity: .65; }

.irctabs button.drag-over-left::before,
.irctabs button.drag-over-right::after{
  content:"";
  position:absolute;
  top:6px; bottom:6px;
  width:2px;
  background: currentColor;
  opacity:.9;
}

.irctabs button.drag-over-left::before  { left:-4px;  }
.irctabs button.drag-over-right::after  { right:-4px; }



/* =========================
   15) Flood Warning Modal and message classes
   ========================= */


/* Flood warning modal “danger” variant */
.ircc-modal.danger {
  border: 2px solid #c62828;
  box-shadow: 0 0 0 3px rgba(198,40,40,.25), 0 12px 30px rgba(0,0,0,.35);
  animation: ircc-danger-pulse 1.1s ease-in-out infinite alternate;
}
.ircc-modal.danger header {
  background: #b71c1c;
  color: #fff;
}
.ircc-modal.danger .body { color: #fff; }
.ircc-modal.danger .body .ircc-danger-tip { margin-top: 6px; font-size: 12px; opacity: .85; }
@keyframes ircc-danger-pulse {
  from { box-shadow: 0 0 0 2px rgba(198,40,40,.25), 0 12px 30px rgba(0,0,0,.35); }
  to   { box-shadow: 0 0 0 6px rgba(198,40,40,.45), 0 12px 30px rgba(0,0,0,.35); }
}

/* Blocked (client rate-limited) local echo */
.msg-card.msg-blocked {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255,77,79,.45), inset 0 0 0 1px rgba(255,77,79,.35);
}
.msg-card.msg-blocked .msg-time {
  background: #ffefef !important;
  color: #7a0000 !important;
}
.msg-card.msg-blocked .msg-text::after {
  content: '  • not sent (rate limited)';
  font-size: .85em;
  opacity: .9;
  margin-left: .5rem;
  color: #ffb3b3;
  font-weight: 600;
}




/* =========================
   16) Responsive CSS
   ========================= */

/* ---------- Responsive userlist drawer ---------- */
:root {
  --ircc-break-narrow: 900px;
}

/* Drawer toggle button (only shows on narrow) */
.irc-users-toggle{
  display:none;
  margin-left:.2rem;
  padding:.35rem .6rem;
  border:1px solid var(--ircc-accent);
  background:transparent;
  color:var(--ircc-accent);
  font-weight:600;
  line-height:1;
  cursor:pointer;
}
.irc-users-toggle:focus{ outline:2px solid var(--ircc-accent) }

/* Scrim behind the drawer */
.userlist-scrim{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:9999;
}

/* Narrow layout: single column + userlist as drawer */
@media (max-width: 900px){
  .irc-main-layout{
    grid-template-columns: 1fr !important;
    grid-template-areas: "channel" !important;
  }
  .channel-area{ grid-area: channel !important; }

  .userlist-area{
    position:fixed !important;
    top:0; right:0; bottom:0;
    width:min(85vw, 360px);
    max-width:90vw;
    height:100vh !important;

    /* drawer look */
    background: var(--ircc-surface-3, rgba(16,16,22,0.96));
    color: var(--ircc-fg, #ddd);
    border-left: 2px solid rgba(255,255,255,0.07);
    box-shadow: -18px 0 32px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);

    transform: translateX(100%);
    transition: transform .25s ease, opacity .25s ease;
    z-index:10000;
    overflow:auto;
  }
  .ircc-userlist-open .userlist-area{ transform: translateX(0); }

  .userlist-scrim{
    display:none;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.45); /* a bit darker than before */
    z-index:9999;
  }
  .ircc-userlist-open .userlist-scrim{ display:block; }

  .irc-users-toggle{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-left:.2rem;
    padding:.35rem .6rem;
    border:1px solid var(--ircc-accent);
    background:rgba(0,0,0,.2);
    color:var(--ircc-accent);
    font-weight:600;
    line-height:1;
    cursor:pointer;
  }
  .irc-users-toggle:focus{ outline:2px solid var(--ircc-accent) }
}

@media (min-width: 901px){
  .userlist-scrim{ display:none !important; }
  .irc-users-toggle{ display:none !important; }
}

/* ---------- Header: compact layout under 680px ---------- */
@media (max-width: 680px){
  /* allow the header row to wrap */
  .irc-bar{ flex-wrap: wrap; }
  
  #ircClientShell .irc-handle { display:block; }
  
  /* move the status to its own line under the brand/title */
  .irc-status{
    order: 3;           /* wrap to next line */
    flex-basis: 100%;   /* take the whole row */
    margin-top: .25rem;
    font-size: .85rem;
    opacity: .9;
  }

  /* hide the very long session key/badge inside the status */
  .irc-handle .irc-key,
  .irc-handle .irc-bridge-key,
  .irc-handle .key,
  .irc-handle [data-role="session-key"]{
    display: none !important;
  }
}


/* =========================================================
   17) Card Games — Fullscreen Overlay / Table / Buttons
   ========================================================= */

/* --- Fullscreen overlay skeleton --- */
#ircc-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above shell */
    display: none;   /* toggled by JS */
    background: rgba(0,0,0,0.65); /* dim backdrop */
    backdrop-filter: blur(2px);
}

/* Stage keeps things centered and responsive */
#ircc-game-stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 24px;
    box-sizing: border-box;
}

/* Header with centered title and a close button */
#ircc-game-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
#ircc-game-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}
#ircc-game-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(0,0,0,.35);
    color: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
}
#ircClientShell.ircc-light #ircc-game-close {
    background: rgba(255,255,255,.85);
    color: #111;
    border-color: rgba(0,0,0,.25);
}

/* Canvas where any game can render */
#ircc-game-canvas {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    /* Margins inside the overlay to reserve seat space */
    padding: 48px;           /* room around the table for seats */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The table itself — green felt with thick black border */
.ircc-game-table {
    width: min(1100px, 90vw);
    height: min(600px, 65vh);
    background: #095e27;                 /* requested felt color */
    border: 12px solid #000;             /* thick black border */
    border-radius: 28px;                 /* rounded edges */
    box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.25);
    position: relative;
}

/* Placeholder middle message area (errors, loading, etc.) */
.ircc-game-center-msg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
    pointer-events: none;
    font-weight: 700;
    font-size: 18px;
}

/* Error state (game failed to load) */
.ircc-game-center-msg.error {
    color: #ff5d5d;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* Optional: you can position seats later around the table */
.ircc-seat {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: radial-gradient(ellipse at 35% 35%, #eee, #bbb);
    border: 2px solid rgba(0,0,0,.5);
    box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

/* --- In-chat game button styling --- */
.ircc-game-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid #1e88e5;
    color: #1e88e5;
    background: transparent;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}
#ircClientShell.ircc-dark .ircc-game-open-btn {
    border-color: #64b5f6;
    color: #64b5f6;
    background: rgba(100,181,246,.1);
}
#ircClientShell.ircc-light .ircc-game-open-btn:hover,
#ircClientShell.ircc-dark  .ircc-game-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* --- Context submenu: disabled items for “coming soon” --- */
#ircc-sub button.is-disabled,
#ircc-context button.is-disabled {
    opacity: .45;
    pointer-events: none;
}
#ircc-context .ircc-ctx-item.ircc-static,
#ircc-sub .ircc-ctx-item.ircc-static,
#ircc-sub2 .ircc-ctx-item.ircc-static { cursor: default; pointer-events: none; }
#ircc-context .ircc-ctx-item.ircc-disabled,
#ircc-sub .ircc-ctx-item.ircc-disabled,
#ircc-sub2 .ircc-ctx-item.ircc-disabled { cursor: default; opacity: .6; pointer-events: none; }