.wc-sb {
  --wc-sb-fg:#e4f5e6;
  --wc-n-blue:var(--wc-g,#39ff14); /* 0.4.4.2: focus ring in the Shoutbox wears Collective green */
  color: var(--wc-sb-fg);
  font:
    13px/1.4 Verdana,
    Tahoma,
    ui-sans-serif,
    sans-serif;
  min-width: 0;
  overflow: hidden;
}
.wc-sb__head {
  display: flex;
  align-items: center;
}
.wc-sb__h {
  margin: 0;
}
.wc-sb__help { margin-left: auto; padding: 1px 6px; border: 1px solid rgb(var(--wc-g-rgb,57 255 20)/.41); border-radius: 3px; color: var(--wc-g,#39ff14) !important; font-size: 11px; text-decoration: none; } /* 0.4.5.2 */
.wc-sb__list {
  list-style: none;
  margin: 0 8px;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.wc-sb__item {
  padding: 6px 2px;
  border-bottom: 1px dashed rgb(var(--wc-g-rgb,57 255 20)/.22);
  min-width: 0;
}
.wc-sb__item--pin {
  background: rgba(255, 211, 77, .07);
  border-left: 2px solid #ffd34d;
  padding-left: 6px;
}
.wc-sb__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.wc-sb__who {
  font-weight: 700;
  overflow-wrap: anywhere;
  min-width: 0;
}
.wc-sb__pin {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ffd34d;
}
.wc-sb__t {
  margin-left: auto;
  font-size: 10px;
  opacity: .7;
  white-space: nowrap;
}
.wc-sb__txt {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.wc-sb__clip {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  margin: 0 1px;
}
.wc-sb__gifimg {
  display: block;
  max-width: 100%;
  max-height: 160px;
  height: auto;
  margin-top: 4px;
  border-radius: 3px;
}
.wc-sb__empty {
  padding: 8px 2px;
  opacity: .75;
}
.wc-sb__mod {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.wc-sb__b,
.wc-sb__sel {
  font: 11px/1.2 inherit;
  padding: 2px 6px;
  border: 1px solid rgb(var(--wc-g-rgb,57 255 20)/.41);
  border-radius: 3px;
  background: rgba(5, 8, 6, .8);
  color: var(--wcg-d9ffd6,#d9ffd6);
  cursor: pointer;
}
.wc-sb__b--del {
  border-color: rgba(255, 92, 108, .7);
  color: #ffb3bb;
}
.wc-sb__b:focus-visible,
.wc-sb__sel:focus-visible,
.wc-sb__go:focus-visible,
.wc-sb__in:focus-visible {
  outline: 2px solid var(--wc-g,#39ff14);
  outline-offset: 1px;
}
.wc-sb__form {
  margin: 8px 8px 0;
}
.wc-sb__in,
.wc-sb__gif {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgb(var(--wc-g-rgb,57 255 20)/.41);
  border-radius: 3px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
}
.wc-sb__gif {
  margin-top: 6px;
}
.wc-sb__tools {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.wc-sb__tools button {
  padding: 4px 8px;
  border: 1px solid rgb(var(--wc-g-rgb,57 255 20)/.41);
  border-radius: 3px;
  background: rgba(5, 8, 6, .8);
  color: var(--wcg-d9ffd6,#d9ffd6);
  cursor: pointer;
  font: 12px/1.2 inherit;
}
.wc-sb__go {
  margin-left: auto;
  border-color: var(--wc-g,#39ff14) !important;
  color: var(--wc-g,#39ff14) !important;
}
.wc-sb__clips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.wc-sb__cb {
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
}
.wc-sb__cb:hover,
.wc-sb__cb:focus-visible {
  border-color: var(--wc-g,#39ff14);
}
.wc-sb__msg {
  min-height: 1em;
  margin: 4px 0 0;
  font-size: 11px;
  color: #ffb3bb;
}
.wc-sb__guest,
.wc-sb__muted {
  margin: 8px 8px 0;
  font-size: 12px;
}
.wc-sb__reg {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--wc-g,#39ff14);
  border-radius: 3px;
  color: var(--wc-g,#39ff14) !important;
  font-weight: 700;
  text-decoration: none;
}
.wc-sb__mutes {
  margin: 6px 8px 0;
  font-size: 11px;
}
.wc-sb__mrow {
  margin: 2px 0;
}
.wc-sb [hidden] {
  display: none !important;
}
a.wc-sb__who.wc-name {
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  color: var(--rk,inherit);
}
a.wc-sb__who.wc-name:is(:hover, :focus-visible) {
  border-bottom-color: currentColor;
  text-shadow: 0 0 6px var(--rk,var(--wc-g,#39ff14));
}
.wc-sb__item--whisper {
  background: rgb(var(--wc-g-rgb,57 255 20)/.05);
  border-left: 2px dashed var(--wc-g,#39ff14);
  padding-left: 6px;
  font-style: italic;
}
.wc-sb__item--whisper .wc-sb__txt {
  color: var(--wcg-b8ffb0,#b8ffb0);
}
.wc-sb__wtag {
  font:
    700 10px/1 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  color: var(--wc-g,#39ff14);
  letter-spacing: .06em;
  text-transform: lowercase;
  font-style: normal;
  text-shadow: 0 0 6px rgb(var(--wc-g-rgb,57 255 20)/.6);
}
.wc-sb__warr {
  color: var(--wc-g,#39ff14);
  font-style: normal;
}

/* ---- 0.4.4.4 @mention glow: a shout that names you (@nicename or display name) gets a soft Borg green pulse;
   the name itself is marked. Client-side only; still under prefers-reduced-motion. ---- */
.wc-sb .wc-sb__at {
  padding: 0 3px;
  border-radius: 4px;
  background: rgb(var(--wc-g-rgb,57 255 20)/.16);
  box-shadow: 0 0 0 1px rgb(var(--wc-g-rgb,57 255 20)/.35);
  color: var(--wc-g,#39ff14);
  font-weight: 700;
}
.wc-sb .wc-sb__item.wc-sb__item--me {
  border-radius: 6px;
  animation: wc-sb-me 2.8s ease-in-out infinite;
}
@keyframes wc-sb-me {
  0%, 100% { box-shadow: inset 3px 0 0 var(--wc-g,#39ff14), 0 0 0 rgb(var(--wc-g-rgb,57 255 20)/0); background-color: rgb(var(--wc-g-rgb,57 255 20)/.04); }
  50% { box-shadow: inset 3px 0 0 var(--wc-g,#39ff14), 0 0 14px rgb(var(--wc-g-rgb,57 255 20)/.35); background-color: rgb(var(--wc-g-rgb,57 255 20)/.10); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-sb .wc-sb__item.wc-sb__item--me {
    animation: none;
    box-shadow: inset 3px 0 0 var(--wc-g,#39ff14) !important;
    background-color: rgb(var(--wc-g-rgb,57 255 20)/.08) !important;
  }
}
/* 0.4.4.7 system shouts ("iO") */
.wc-sb__who.wc-rk--system { color: var(--wcg-b6ffb0,#b6ffb0); font-family: var(--wc2-mono, ui-monospace, monospace); letter-spacing: .08em; }
/* 0.4.5.1 broadcasts (iO + moderator !broadcast) */
.wc-sb .wc-sb__item--bc .wc-sb__txt, .wc-sb .wc-sb__item--bc .wc-sb__who { color: #ffd23f; }
.wc-sb .wc-sb__msg--warn { color: #ff9a3c; }
.wc-sb__soon {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: .7;
}