/* Generated from extension/sc-theme.css and extension/chat.css by scripts/site-sync.mjs (npm run site:sync). Edit the extension's, not this.
   The demos are in a .yc wrapper; nothing here reaches the rest of the site. */

/* ---- extension/sc-theme.css ---- */

/*
 * Yapp Chat — design tokens and components. The accent is the duck's yellow
 * (as on yapp.chat), for "on" and the primary action; orange (the beak) is for
 * highlights and warnings, so the two never mean the same.
 */

.yc {
  color-scheme: dark;

  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2128;
  --surface-3: #262c34;
  --border: #30363d;
  --border-strong: #3d444d;
  --border-subtle: #21262d;

  --text: #e6edf3;
  --muted: #9da7b3; /* ≥ 4.5:1 on --bg and --surface */
  --switch-knob: #c9d1d9; /* an "off" switch's knob */

  --accent: #ffd23f; /* text, rings, lines */
  --accent-fill: #ffd23f; /* buttons, switches and checkboxes that are on */
  --accent-hover: #ffdf73; /* a filled one, pointed at */
  --accent-soft: rgba(255, 210, 63, 0.12);
  --accent-line: rgba(255, 210, 63, 0.4);
  --on-accent: #111111;

  --warn: #ff9a1f;
  --warn-soft: rgba(255, 154, 31, 0.12);
  --warn-line: rgba(255, 154, 31, 0.4);

  --danger: #ff7b72;
  --danger-soft: rgba(255, 123, 114, 0.1);
  --danger-line: rgba(255, 123, 114, 0.45);

  --radius: 10px;
  --radius-sm: 6px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --hover: rgba(255, 255, 255, 0.03);
  --link: #58a6ff;
  --label: #d2b8ff; /* purple text: roles, notices */
  --floating: rgba(28, 33, 40, 0.9);
  --shadow: rgba(0, 0, 0, 0.55);
}

/* Settings → Theme: Light (or System on a light system). */

:root[data-theme="light"] .yc {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #f3f4f6;
  --surface-3: #e5e8ec;
  --border: #d0d7de;
  --border-strong: #b6bec8;
  --border-subtle: #e6e9ed;

  --text: #1f2328;
  --muted: #59636e;
  --switch-knob: #fff; /* white, clear on the light track */

  /* Yellow can't be text or a ring on white: a dark gold for those, the yellow for fills. */
  --accent: #8a6400;
  --accent-fill: #ffd23f;
  --accent-hover: #ffc61a;
  --accent-soft: rgba(255, 196, 0, 0.18);
  --accent-line: rgba(138, 100, 0, 0.35);
  --on-accent: #111111;

  --warn: #b45309;
  --warn-soft: rgba(255, 154, 31, 0.14);
  --warn-line: rgba(180, 83, 9, 0.4);

  --danger: #cf222e;
  --danger-soft: rgba(207, 34, 46, 0.08);
  --danger-line: rgba(207, 34, 46, 0.4);

  --hover: rgba(31, 35, 40, 0.04);
  --link: #0969da;
  --label: #6f3fd1;
  --floating: rgba(255, 255, 255, 0.94);
  --shadow: rgba(31, 35, 40, 0.18);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .yc {
    color-scheme: light;

    --bg: #ffffff;
    --surface: #f6f8fa;
    --surface-2: #f3f4f6;
    --surface-3: #e5e8ec;
    --border: #d0d7de;
    --border-strong: #b6bec8;
    --border-subtle: #e6e9ed;

    --text: #1f2328;
    --muted: #59636e;
    --switch-knob: #fff; /* white, clear on the light track */

    /* Yellow can't be text or a ring on white: a dark gold for those, the yellow for fills. */
    --accent: #8a6400;
    --accent-fill: #ffd23f;
    --accent-hover: #ffc61a;
    --accent-soft: rgba(255, 196, 0, 0.18);
    --accent-line: rgba(138, 100, 0, 0.35);
    --on-accent: #111111;

    --warn: #b45309;
    --warn-soft: rgba(255, 154, 31, 0.14);
    --warn-line: rgba(180, 83, 9, 0.4);

    --danger: #cf222e;
    --danger-soft: rgba(207, 34, 46, 0.08);
    --danger-line: rgba(207, 34, 46, 0.4);

    --hover: rgba(31, 35, 40, 0.04);
    --link: #0969da;
    --label: #6f3fd1;
    --floating: rgba(255, 255, 255, 0.94);
    --shadow: rgba(31, 35, 40, 0.18);
  }
}

.yc,
.yc *,
.yc *::before,
.yc *::after {
  box-sizing: border-box;
}

/* Thin scrollbars on a transparent track (scrollbar-color is inherited). */

.yc,
.yc * {
  scrollbar-width: thin;
}

.yc {
  scrollbar-color: var(--border-strong) transparent;
}

.yc {
  margin: 0;
  font: 13px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.yc h1,
.yc h2,
.yc h3,
.yc p {
  margin: 0;
}

.yc [hidden] {
  display: none !important;
}

.yc .muted {
  color: var(--muted);
}

.yc .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Sprite icons are line icons (fill set here, not on the <symbol>). */

.yc svg:has(> use) {
  fill: none;
}

.yc :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Buttons ---- */

.yc .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0; /* layouts opt in to shrinking */
  padding: 7px 12px;
  font: 500 12px/1.3 var(--font);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.yc .btn:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.yc .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yc .btn-primary {
  color: var(--on-accent);
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  font-weight: 600;
}

.yc .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.yc .btn-ghost {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.yc .btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-2);
  border-color: transparent;
}

.yc .btn-sm {
  padding: 5px 9px;
}

.yc .btn-icon {
  padding: 6px;
}

/* ---- Switch ---- */

.yc .switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  padding: 0;
  background: var(--border-strong);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.yc .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--switch-knob);
  border-radius: 50%;
  transition: transform 0.15s, background-color 0.15s;
}

.yc .switch[aria-checked="true"],
.yc [aria-checked="true"] > .switch {
  background: var(--accent-fill);
}

.yc .switch[aria-checked="true"]::after,
.yc [aria-checked="true"] > .switch::after {
  transform: translateX(16px);
  background: var(--on-accent);
}

/* ---- Cards and setting rows ---- */

.yc .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.yc .setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
}

.yc .setting-row:last-child {
  border-bottom: none;
}

.yc .card > .setting-row:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.yc .card > .setting-row:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.yc button.setting-row {
  cursor: pointer;
}

.yc button.setting-row:hover {
  background: var(--hover);
}

.yc .setting-row > svg {
  color: var(--muted);
}

.yc .setting-text {
  flex: 1;
  min-width: 0;
}

.yc .setting-title {
  display: block;
  font-weight: 500;
}

.yc .setting-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Inputs ---- */

.yc .input {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font: 13px/1.4 var(--font);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.yc .input::placeholder {
  color: var(--muted); /* 4.5:1+ on --bg, in both themes */
}

/* A /regex/ with its parts coloured as regex tools do (Settings' word lists and builder: options.js entryView; the website). */

.yc .rx {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.yc .rx-delim,
.yc .rx-flags {
  color: var(--muted);
}

.yc .rx-escape {
  color: var(--link);
}

.yc .rx-class {
  color: var(--label);
}

.yc .rx-quant {
  color: var(--warn);
}

.yc .rx-group,
.yc .rx-alt {
  font-weight: 700;
  color: var(--accent);
}

.yc .rx-anchor {
  color: var(--danger);
}

/* Search settings (options.js searchSettings): at the top; what doesn't match goes. */

.yc .settings-search {
  position: relative;
  margin-bottom: 8px;
}

.yc .settings-search .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  translate: 0 -50%;
  pointer-events: none;
}

.yc .settings-search .input {
  width: 100%;
  padding-left: 36px;
}

.yc .search-out {
  display: none !important;
}

.yc .search-none {
  margin: 24px 0;
  color: var(--muted);
}

/* Reset: its second click resets. */

.yc #resetBtn.sure {
  color: var(--danger);
  border-color: var(--danger-line);
}

/* ---- Checkbox (lib/ui.js checkbox): the real input, drawn as a box that fills with the accent ---- */

.yc .check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.yc .check input {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  /* Level with the middle of the label's first line, however tall it is. */
  margin: calc((1lh - 18px) / 2) 0 0;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  appearance: none;
  transition: background 0.12s, border-color 0.12s;
}

/* The tick: drawn by a mask, in the colour that reads on the accent. */

.yc .check input::after {
  width: 12px;
  height: 12px;
  content: "";
  background: var(--on-accent);
  opacity: 0;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.yc .check input:checked {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
}

.yc .check input:checked::after {
  opacity: 1;
}

.yc .check:hover input:not(:checked) {
  border-color: var(--accent);
}

.yc .check input:focus-visible {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .yc .check input {
      transition: none;
  }
}

/* A dropdown (lib/ui.js dropdown): a button like an input, opening a list like the chat's menus. */

.yc .dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font: 13px/1.4 var(--font);
  color: var(--text);
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.yc .dropdown:hover {
  border-color: var(--border-strong);
}

.yc .dropdown:focus-visible,
.yc .dropdown[aria-expanded="true"] {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.yc .dropdown-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .dropdown .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: rotate 0.15s;
}

.yc .dropdown[aria-expanded="true"] .icon {
  rotate: 180deg;
}

.yc .dropdown-list {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 16px);
  max-height: 280px;
  padding: 4px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .dropdown-option {
  flex-shrink: 0; /* a long list scrolls; its options keep their height */
  padding: 7px 10px;
  font: 13px var(--font);
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .dropdown-option:hover,
.yc .dropdown-option:focus-visible {
  background: var(--surface-3);
  outline: none;
  box-shadow: none; /* the highlight says where the keys are, no ring as well */
}

.yc .dropdown-option[aria-selected="true"] {
  font-weight: 600;
  color: var(--accent);
}

.yc .input:focus,
.yc .input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/*
 * What's wrong with what was typed, under its box (lib/ui.js fieldNote), in place of the browser's own bubble: a
 * panel like the lists and menus, with the warning's colour on its edge, its icon and the box.
 */

.yc .input[aria-invalid="true"] {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.yc .field-note {
  position: fixed;
  z-index: 39; /* under a list of suggestions, should one open */
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 12px 8px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
  animation: yc-field-note-in 0.14s ease-out;
}

.yc .field-note .icon {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--warn);
}

.yc .field-note-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.yc .field-note-text strong {
  font-weight: 600;
}

.yc .field-note-text span {
  color: var(--muted);
}

@keyframes yc-field-note-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .field-note {
      animation: none;
  }
}

/* Yellow on white is faint (about 1.4:1): a dark-gold edge so "on" still stands out in the light theme. */

:root[data-theme="light"] .yc .switch[aria-checked="true"],
:root[data-theme="light"] .yc [aria-checked="true"] > .switch {
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .yc .switch[aria-checked="true"],
  :root:not([data-theme]) .yc [aria-checked="true"] > .switch {
    box-shadow: inset 0 0 0 1px var(--accent);
  }
}

/* ---- Status messages ---- */

.yc .status-msg {
  margin-top: 10px;
  font-size: 12px;
}

.yc .status-msg:empty {
  display: none;
}

.yc .status-msg.ok {
  color: var(--accent);
}

.yc .status-msg.err {
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .yc,
  .yc *,
  .yc *::before,
  .yc *::after {
      transition: none !important;
  }
}

/* ---- extension/chat.css ---- */

/* Chat panes (lib/chat.js), shared by the side panel and the chat window. Tokens: sc-theme.css. */

.yc {
  --chat-size: 15px;
  --twitch: #a970ff;
  --youtube: #ff4e45;
  --kick: #53fc18;
  --first: #c832c8; /* someone's first message in a channel */
  --first-soft: rgba(200, 50, 200, 0.1);
  --friend: #ffca28; /* friends' gold: their stripe and star */
  --loud-light: rgb(255 255 255 / 0.28); /* what crosses a loud notice's line (a big gift, a big cheer) */
}

/* Kick's green and the friends' gold are too light to read on white; the magenta a touch darker, for the label. */

:root[data-theme="light"] .yc {
  --kick: #1f9c00;
  --first: #b42db4;
  --first-soft: rgba(200, 50, 200, 0.08);
  --friend: #b07d00;
  --loud-light: rgb(255 255 255 / 0.75);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .yc {
    --kick: #1f9c00;
    --first: #b42db4;
    --first-soft: rgba(200, 50, 200, 0.08);
    --friend: #b07d00;
    --loud-light: rgb(255 255 255 / 0.75);
  }
}

.yc .pane {
  position: relative;
  container: pane / inline-size; /* narrow panes trim the header (see the end of this file) */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.yc .pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

/* The channels in this chat (lib/chat.js renderHead). */

.yc .pane-feeds {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.yc .feed-chip {
  display: flex;
  flex: 1 1 auto; /* the header's room: the name has what the rest leaves */
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* The platform before a chat's name: a tile in its colour, the same size for each (lib/ui.js platformTile).
   A touch below the middle of the line, where lowercase names have their middle. */

.yc .platform-tile {
  position: relative;
  top: 0.08em;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #fff;
}

.yc .platform-tile.twitch rect {
  fill: #9146ff;
}

.yc .platform-tile.kick {
  color: #0b0e0f;
}

.yc .platform-tile.kick rect {
  fill: #53fc18;
}

.yc .platform-tile.youtube rect {
  fill: #ff0033;
}

/* Several channels: their pictures, names and total viewers on one line; click for the panel. */

.yc .feed-stack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-left: -4px;
  padding: 3px 8px 3px 4px;
  font: inherit;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.yc .feed-stack:hover,
.yc .feed-stack[aria-expanded="true"] {
  background: var(--surface-2);
}

.yc .stack-pics {
  display: inline-flex;
  flex-shrink: 0;
}

.yc .stack-pic + .stack-pic {
  margin-left: -7px;
}

.yc .stack-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

/* The panel under the header: one row per channel. */

.yc .feeds-pop {
  position: absolute;
  top: 44px;
  left: 8px;
  z-index: 6;
  display: grid;
  gap: 2px;
  width: min(340px, calc(100% - 16px));
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 6px;
  border-radius: var(--radius-sm);
}

.yc .pop-row:hover {
  background: var(--surface-3);
}

.yc .pop-row .btn:hover:not(:disabled) {
  background: var(--border-strong);
}

.yc .pop-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.yc .pop-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.yc .pop-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A channel's picture, with a small Twitch / YouTube badge on its corner. */

.yc .source-pic {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.yc .source-avatar {
  flex-shrink: 0;
  object-fit: cover;
  background: var(--surface-3);
  border-radius: 50%;
}

.yc .source-pic .source-avatar {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 2px var(--bg);
}

/* A solid circle in the platform's colour with a white mark, ringed off from the picture. */

.yc .platform-badge {
  --ring: var(--bg);
  position: absolute;
  z-index: 1; /* above the next picture in the header's overlapping row */
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: var(--badge, 12px);
  height: var(--badge, 12px);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ring);
}

.yc .platform-badge .icon {
  width: 66%;
  height: 66%;
}

.yc .platform-badge.twitch {
  background: #9146ff;
}

.yc .platform-badge.youtube {
  background: #ff0033;
}

/* Kick's own colours: a black mark on its green. */

.yc .platform-badge.kick {
  color: #0b0e0f;
  background: #53fc18;
}

/* The triangle's path is already drawn balanced on its centre of mass (its box sits right of centre). */

.yc .platform-badge.youtube .icon {
  width: 58%;
  height: 58%;
}

.yc .stack-pic {
  --badge: 11px;
  width: 24px;
  height: 24px;
}

.yc .pop-pic {
  --badge: 14px;
  width: 32px;
  height: 32px;
}

/* On the panel's lighter background. */

.yc .feeds-pop .source-pic .source-avatar {
  box-shadow: 0 0 0 2px var(--surface-2);
}

.yc .feeds-pop .platform-badge {
  --ring: var(--surface-2);
}

.yc .feeds-pop .pop-row:hover .platform-badge,
.yc .feeds-pop .pop-row:hover .source-avatar {
  box-shadow: 0 0 0 2px var(--surface-3);
}

/* At the start of each line in a merged chat. */

.yc .msg-source {
  --badge: 10px;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: -5px;
}

.yc .pane-title {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Live for 2h 14m · 26.5K watching. */

.yc .pane-live {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The red "live" dot. */

.yc .pane-live:not(.offline)::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: -3px;
  background: #eb0400;
  border-radius: 50%;
}

.yc .pane-live .viewers {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.yc .pane-live .icon {
  width: 12px;
  height: 12px;
}

/* Banned from this chat (reading as a guest). */

.yc .pane-flag {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: 999px;
}

/* In a merged chat's header: just a hammer. */

.yc .pane-flag.flag-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
}

.yc .flag-icon .icon {
  width: 12px;
  height: 12px;
}

/* "Connecting…", "Reconnecting…", "Offline": a mark that always fits (a spinner while it's on its way, a dot when
   something's wrong) with its words beside it; a narrow pane keeps the mark and leaves the words to a hover. */

.yc .pane-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.yc .pane-status[data-tone="warn"] {
  color: var(--warn);
}

.yc .status-mark {
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.yc .pane-status[data-busy="true"] .status-mark {
  width: 11px;
  height: 11px;
  background: none;
  border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: yc-status-spin 0.8s linear infinite;
}

@keyframes yc-status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A combined chat names the channel too: that much of it. */

.yc .status-text {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container pane (max-width: 440px) {
  .yc .status-text {
      display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .pane-status[data-busy="true"] .status-mark {
      animation: none;
  }
}

.yc .pane-actions {
  display: flex;
  flex-shrink: 0;
}

.yc .pane-filter {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.yc .pane-list {
  font-family: var(--chat-font, var(--font)); /* Settings → Font */
  flex: 1;
  min-height: 0;
  padding: 4px 0 8px;
  overflow-y: auto;
  font-size: var(--chat-size);
  line-height: 1.5;
  overscroll-behavior: contain;
  /* Hidden while following the chat; shows once you scroll up to read back. */
  scrollbar-color: transparent transparent;
}

.yc .pane-list.scrolled-up {
  scrollbar-color: var(--border-strong) transparent;
}

/* ---- Messages ---- */

.yc .msg {
  position: relative; /* for its buttons (.msg-actions) */
  padding: 2px 10px;
  overflow-wrap: anywhere;
  border-left: 2px solid transparent;
}

/* The buttons on the message under the pointer, on its top edge (lib/chat.js showActions). */

.yc .msg-actions {
  position: absolute;
  z-index: 2;
  top: -13px;
  right: 8px;
  display: flex;
  gap: 1px;
  padding: 2px;
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  user-select: none;
}

.yc .msg-actions.inside {
  top: 2px;
}

.yc .msg-actions .btn-icon {
  padding: 4px;
}

.yc .msg-actions .btn-icon:hover {
  background: var(--surface-3);
}

.yc .msg-actions .i-trash {
  color: var(--danger);
}

.yc .msg:hover {
  background: var(--hover);
}

/* Your name or one of your highlight words. */

.yc .msg.hl {
  background: var(--warn-soft);
  border-left-color: var(--warn);
}

/* First message from this user in the channel (Twitch): tinted, the stripe, and "First message" above it. */

.yc .msg.first {
  background: var(--first-soft);
  border-left-color: var(--first);
}

.yc .first-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--first);
}

.yc .first-line .icon {
  width: 1.1em;
  height: 1.1em;
}

/* Channel points (Twitch): a highlighted message, or a reward redeemed with one, said above it (lib/chat.js renderMessage). */

.yc .msg.redeemed {
  background: color-mix(in srgb, var(--twitch) 12%, transparent);
  border-left-color: var(--twitch);
}

.yc .redeem-line {
  font-weight: 600;
  color: color-mix(in srgb, var(--twitch) 60%, var(--text));
}

.yc .redeem-line strong {
  font-weight: 800;
}

/* A touch bigger and bolder than the first message's: these two have finer lines. */

.yc .redeem-line .icon {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 2.4;
}

.yc .redeem-cost {
  margin-left: 2px;
  padding: 0 6px;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--twitch) 18%, transparent);
  border-radius: 999px;
}

/* Subs, gifts, raids, announcements, Super Chats, memberships: tinted in their colour (lib/chat.js renderNotice). */

.yc .msg.notice {
  --notice: var(--twitch);
  margin: 3px 0;
  padding-top: 6px;
  padding-bottom: 6px;
  background: color-mix(in srgb, var(--notice) 9%, transparent);
  border-left: 3px solid var(--notice);
}

.yc .notice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.9em;
}

/* With their own message below it. */

.yc .notice-head:not(:last-child) {
  margin-bottom: 4px;
}

.yc .notice-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #fff;
  background: var(--notice);
  border-radius: 50%;
}

.yc .notice-icon .icon {
  width: 12px;
  height: 12px;
}

/* Super Chat yellow needs dark text. */

.yc .msg[data-event="superchat"] .notice-icon {
  color: #1a1300;
}

.yc .notice-title {
  min-width: 0;
}

/* What a moderator did (lib/mod-tools.js logMessage): a quiet line with a small shield, not a box. */

.yc .msg.notice[data-event="modlog"] {
  padding-top: 2px;
  padding-bottom: 2px;
  background: none;
  border-left-color: transparent;
}

.yc .msg[data-event="modlog"] .notice-icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
  background: none;
}

.yc .msg[data-event="modlog"] .notice-head {
  font-size: 0.85em;
  color: var(--muted);
}

.yc .notice-pill {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  color: color-mix(in srgb, var(--notice) 65%, var(--text));
  white-space: nowrap;
  background: color-mix(in srgb, var(--notice) 18%, transparent);
  border-radius: 999px;
}

/* A notice that's louder (lib/notices.js loudness: many subs gifted at once, 20, 50, 100, 200; many bits cheered,
   1,000, 5,000, 10,000, 100,000; level 1 also for a sub gifted to you), each level more than the one before: more
   colour (its own, into a second one, then every colour moving), a bigger icon and count, and light crossing the
   line: once, twice, then every few seconds; from level 3 the icon beats too. Still for those who asked for less
   motion. */

.yc .msg.notice[data-loud] {
  --loud-to: var(--notice);
  --loud-ink: var(--notice); /* the count's colour */
  --loud-tint: 17%;
  --loud-icon: 22px;
  --loud-count: 1.08em;
  background:
    linear-gradient(110deg, transparent 42%, var(--loud-light) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--notice) var(--loud-tint), transparent), color-mix(in srgb, var(--loud-to) var(--loud-tint), transparent));
  border-image: linear-gradient(var(--notice), var(--loud-to)) 1;
  animation: yc-loud-light 1.4s ease-in-out 0.15s 1;
}

/* Into a lighter shade of its colour (a cheer's is its tier's); a gift's pink into purple, then gold. */

.yc .msg.notice[data-loud="2"] {
  --loud-to: color-mix(in srgb, var(--notice) 55%, #fff);
  --loud-tint: 24%;
  --loud-icon: 24px;
  --loud-count: 1.16em;
  animation-iteration-count: 2;
}

.yc .msg.notice[data-loud="3"] {
  --loud-to: color-mix(in srgb, var(--notice) 40%, #fff);
  --loud-tint: 30%;
  --loud-icon: 26px;
  --loud-count: 1.24em;
  animation: yc-loud-light-again 4s ease-in-out 0.15s infinite;
}

.yc .msg.notice[data-event="gifts"][data-loud="2"] {
  --loud-to: #a970ff;
  --loud-ink: #a970ff;
}

.yc .msg.notice[data-event="gifts"][data-loud="3"] {
  --loud-to: #ffb020;
  --loud-ink: #ffb020;
}

/* The most: every colour, flowing under the light. */

.yc .msg.notice[data-loud="4"] {
  --loud-to: #ffb020;
  --loud-ink: #ffb020;
  --loud-tint: 34%;
  --loud-icon: 28px;
  --loud-count: 1.32em;
  background:
    linear-gradient(110deg, transparent 42%, var(--loud-light) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, #ff6bb5 var(--loud-tint), transparent), color-mix(in srgb, #ffb020 var(--loud-tint), transparent), color-mix(in srgb, #4ad6c5 var(--loud-tint), transparent), color-mix(in srgb, #a970ff var(--loud-tint), transparent), color-mix(in srgb, #ff6bb5 var(--loud-tint), transparent)) 0 0 / 200% 100%;
  border-image: linear-gradient(#ff6bb5, #ffb020, #4ad6c5, #a970ff) 1;
  animation: yc-loud-flow 4s linear infinite;
}

.yc .msg.notice[data-loud] .notice-icon {
  width: var(--loud-icon);
  height: var(--loud-icon);
  background: linear-gradient(135deg, var(--notice), var(--loud-to));
}

.yc .msg.notice[data-loud] .notice-icon .icon {
  width: 60%;
  height: 60%;
}

.yc .msg.notice[data-loud="3"] .notice-icon,
.yc .msg.notice[data-loud="4"] .notice-icon {
  animation: yc-loud-beat 1.6s ease-in-out infinite;
}

.yc .msg.notice[data-loud] .loud-count {
  font-size: var(--loud-count);
  color: color-mix(in srgb, var(--loud-ink) 60%, var(--text));
}

@keyframes yc-loud-light {
  to {
    background-position: -60% 0, 0 0;
  }
}

/* The same, with a rest after it. */

@keyframes yc-loud-light-again {
  35%,
  100% {
    background-position: -60% 0, 0 0;
  }
}

@keyframes yc-loud-flow {
  0% {
    background-position: 160% 0, 0 0;
  }

  35% {
    background-position: -60% 0, -70% 0;
  }

  100% {
    background-position: -60% 0, -200% 0;
  }
}

@keyframes yc-loud-beat {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--loud-to) 0%, transparent);
    transform: scale(1.12);
  }

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--loud-to) 55%, transparent);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .msg.notice[data-loud],
  .yc .msg.notice[data-loud] .notice-icon {
      animation: none;
  }
}

.yc .msg.system {
  color: var(--muted);
}

/* Something of yours that didn't go (lib/chat.js system's `warn`): "Not sent: this room is followers-only…". */

.yc .msg.system.warn {
  margin: 3px 0;
  padding-top: 6px;
  padding-bottom: 6px;
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
}

.yc .msg.system.warn .system-line {
  color: var(--text);
}

.yc .warn-lead {
  color: var(--warn);
}

/* Your message Twitch refused (lib/chat.js markNotSent): greyed, and said so. */

.yc .msg.not-sent .body {
  opacity: 0.5;
}

.yc .not-sent-tag {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--warn);
}

/* /help's list (lib/mod-tools.js commandsHelp): by group, a command and what it takes and does a row; a click types it. */

.yc .command-help {
  margin: 4px 0;
  padding: 8px 10px 10px;
  font-size: 0.9em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.yc .help-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.yc .help-head span {
  font-size: 0.9em;
  color: var(--muted);
}

.yc .help-group {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
}

.yc .help-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  margin-top: 4px;
  align-items: baseline;
}

.yc .help-cmd {
  justify-self: start;
  padding: 0 5px;
  font: 600 0.95em var(--mono, ui-monospace, monospace);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-3);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.yc .help-cmd:hover {
  background: var(--accent-soft);
}

/* A mode's "off", after what it does: quieter than the commands. */

.yc .help-about .help-cmd {
  font-weight: 500;
  color: var(--muted);
  background: none;
  box-shadow: inset 0 0 0 1px var(--border);
}

.yc .help-about {
  color: var(--text);
}

.yc .help-usage {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85em;
  color: var(--muted);
}

.yc .system-line {
  display: block;
  font-size: 0.85em;
  color: var(--muted);
}

.yc .msg.notice .system-line {
  color: var(--label);
}

.yc .msg.deleted .body {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Hover to read it plainly. */

.yc .msg.deleted:hover .body {
  opacity: 0.85;
  text-decoration: none;
}

.yc .msg.action .body {
  font-style: italic;
}

.yc .ts {
  margin-right: 6px;
  font: 0.75em var(--mono);
  color: var(--muted);
}

.yc .badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
  /* Centred on the name: a fixed offset from the baseline would put letter
     pills (whose baseline is their own text) lower than image badges, and
     "middle" alone centres on the lowercase letters, a little low. */
  position: relative;
  top: -0.1em;
  vertical-align: middle;
}

.yc .badges:empty {
  display: none;
}

.yc .badge {
  width: 18px;
  height: 18px;
}

/* Yapp Chat's badges that shine (lib/ui.js shiny: the founders', the team's): a reflection crosses the picture from
   its top left to its bottom right, a moment every few seconds. Not for those who asked their system for less
   motion. The corners are the tile's (scripts/badges.mjs: 16 of 72). */

.yc .badge-shine {
  position: relative;
  display: inline-block;
  flex: none;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 22%;
}

.yc .badge-shine > img {
  display: block;
}

.yc .badge-shine::after {
  position: absolute;
  inset: 0;
  content: '';
  /* A band of light on a sheet three times the picture's size, slid across it: no edge of the sheet ever shows. */
  background: linear-gradient(135deg, transparent 43%, rgb(255 255 255 / 0.85) 50%, transparent 57%) 100% 100% / 300% 300%;
  animation: yc-badge-shine 4.5s ease-in-out infinite;
  pointer-events: none; /* the picture under it has the tooltip */
}

@keyframes yc-badge-shine {
  0%,
  78% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .badge-shine::after {
      animation: none;
  }
}

.yc .badge-pill {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font: 700 10px/1 var(--font);
  color: #fff;
  background: var(--surface-3);
  border-radius: 3px;
}

.yc .badge-pill[data-kind="broadcaster"],
.yc .badge-pill[data-kind="owner"] {
  background: #e91916;
}

.yc .badge-pill[data-kind="moderator"] {
  background: #00a35c;
}

.yc .badge-pill[data-kind="vip"] {
  background: #e005b9;
}

.yc .badge-pill[data-kind="subscriber"],
.yc .badge-pill[data-kind="founder"],
.yc .badge-pill[data-kind="member"] {
  background: #8205b4;
}

.yc .badge-pill[data-kind="partner"],
.yc .badge-pill[data-kind="verified"] {
  background: #5c16c5;
}

.yc .name {
  padding: 0;
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.yc .name:hover {
  text-decoration: underline;
}

.yc .sep {
  color: var(--muted);
}

/* Above a reply: a connector up from the message, then "@name their message" (lib/chat.js renderReply). */

.yc .reply-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.8em;
  color: var(--muted);
}

.yc .reply-line::before {
  content: "";
  flex-shrink: 0;
  align-self: flex-end;
  width: 16px;
  height: 0.75em;
  margin-left: 7px;
  border-top: 2px solid var(--border-strong);
  border-left: 2px solid var(--border-strong);
  border-top-left-radius: 6px;
}

.yc .reply-to {
  flex-shrink: 0;
  font-weight: 700;
}

.yc .reply-body {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A reply's quote: point at it for a preview of the conversation, click for all of it. */

.yc .reply-line {
  cursor: pointer; /* click: the conversation */
}

.yc .reply-line:hover .reply-body {
  color: var(--text);
}

/* Emotes in the quote, at the quote's size. */

.yc .reply-body .emote {
  height: 1.5em;
  vertical-align: middle;
}

/* A message that was answered (lib/chat.js threadMark): how many replies, and a click for the conversation. */

.yc .thread-mark {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  font-family: inherit;
  font-size: 0.75em;
  font-weight: 700;
  line-height: inherit;
  color: var(--muted);
  vertical-align: 1px;
  cursor: pointer;
  user-select: none; /* not part of what's said: selecting chat text leaves the number out */
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: 999px;
}

.yc .thread-mark .icon {
  width: 1.15em;
  height: 1.15em;
}

.yc .thread-mark:hover,
.yc .thread-mark:focus-visible {
  color: var(--accent);
  border-color: var(--accent-line);
}

/* The message a reply answers, while you point at the reply. */

.yc .msg.replied {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 var(--accent);
}

/* A conversation (lib/chat.js showThread): placed like the user card. */

.yc .thread-panel {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100% - 16px));
  max-height: min(420px, calc(100% - 16px));
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow);
}

.yc .thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-subtle);
}

.yc .thread-count {
  flex: 1;
  color: var(--muted);
}

/* Its lines as the chat's: Settings' text size and spacing (emotes are sized from them). */

.yc .thread-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
  font-size: var(--chat-size);
  line-height: 1.5;
}

/* Answering the conversation (lib/chat.js showThread): under the list, which shrinks for it. */

.yc .thread-reply {
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--border-subtle);
}

/* Its corners follow the panel's (14px, 10px in): room for the focus glow, no clashing curves. */

.yc .thread-reply .input {
  width: 100%;
  border-radius: 9px;
}

.yc .thread-msg {
  cursor: pointer;
}

.yc .thread-msg:hover {
  background: var(--hover);
}

.yc .thread-msg.current {
  background: var(--accent-soft);
}

.yc .thread-gone {
  color: var(--muted);
  cursor: default;
}

.yc .thread-note {
  font-size: 0.85em;
}

/* A message you jumped to (a reply's quote, a thread, a mention): lit while the chat scrolls there and you find it, then fading. */

.yc .msg.flash {
  animation: yc-flash 2.8s ease-out;
}

@keyframes yc-flash {
  0%,
  40% {
    background: var(--accent-soft);
  }
}

.yc .mention {
  font-weight: 600;
}

.yc .link {
  color: var(--link);
  text-decoration: none;
}

.yc .link:hover {
  text-decoration: underline;
}

/* Emotes sit on the text line; zero-width ones are drawn over the one before. */

.yc .emote-stack {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.yc .emote {
  display: block;
  height: calc(var(--chat-size) * var(--emote-scale, 2.1)); /* Settings → Emote size */
  margin: -4px 0;
}

.yc .emote.zero-width {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* Instant tooltip for emotes and badges (lib/chat.js showTip), fixed to the window. */

.yc .hover-tip {
  position: fixed;
  z-index: 20;
  display: flex;
  gap: 12px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .tip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.yc .tip-preview {
  margin-bottom: 6px;
}

.yc .tip-preview.round {
  border-radius: 50%;
}

.yc img.tip-preview {
  height: 56px;
  max-width: 168px;
  object-fit: contain;
}

.yc .hover-tip[data-kind="badge"] img.tip-preview {
  height: 36px;
}

.yc .badge-pill.tip-preview {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  font-size: 15px;
  border-radius: 6px;
}

.yc .tip-item strong {
  max-width: 168px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What only shows something on hover (no click): the "?" cursor says so. Names, links and replies keep the hand.
   Outside the list too (the user card, a conversation, the cards above the chat): what has a tooltip there. */

.yc .pane-list :is(.emote-stack, .badge, .badge-pill, .msg-source, .fold-count, .ts),
.yc .pane :is([data-tip], .emote-stack) {
  cursor: help;
}

/* The full message a reply answers. */

.yc .hover-tip[data-kind="reply"] {
  flex-direction: column;
  gap: 4px;
  max-width: min(380px, calc(100vw - 16px));
}

.yc .tip-reply {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* a preview: two lines a message at most */
}

/* The reply you're pointing at, in the preview of its conversation. */

.yc .tip-reply.current {
  padding-left: 8px;
  margin-left: -10px;
  border-left: 2px solid var(--accent);
}

.yc .tip-reply .emote {
  height: 28px;
}

/* A YouTube video or Twitch clip, from a link. */

.yc .hover-tip[data-kind="link"] {
  flex-direction: column;
  gap: 8px;
  width: min(300px, calc(100vw - 16px));
}

.yc .tip-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

/* A channel's picture (offline, or live with no stream picture yet). */

.yc .tip-thumb.round {
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.yc .tip-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
}

.yc .tip-source {
  font-size: 11px;
  color: var(--muted);
}

/* Right-click menu on a message (lib/chat.js showMenu). */

.yc .context-menu {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font: 13px var(--font);
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .menu-item.danger {
  color: var(--danger);
}

/* A row of choices in the menu: "Timeout 10m 1h 1d". */

.yc .menu-choices {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  font: 13px var(--font);
  color: var(--text);
}

.yc .menu-choices-label {
  flex: 1;
  margin-right: 6px;
}

.yc .menu-choice {
  min-width: 34px;
  padding: 3px 7px;
  font: 600 12px var(--font);
  color: var(--text);
  background: var(--surface-3);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .menu-choice:hover,
.yc .menu-choice:focus-visible {
  color: var(--on-accent);
  background: var(--accent);
  outline: none;
}

.yc .menu-sep {
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid var(--border);
}

.yc .menu-item:hover,
.yc .menu-item:focus-visible {
  background: var(--surface-3);
  outline: none;
}

/* ---- Below the list ---- */

.yc .pane-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* "↓ 8 new messages": scrolled up (or held under the pointer) while chat goes on. */

.yc .pane-more {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* one line, also in a narrow pane */
  gap: 4px;
  padding: 5px 12px 5px 9px;
  font: 500 12px var(--font);
  color: var(--text);
  background: var(--floating);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 6px 20px var(--shadow);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transform: translateX(-50%);
  animation: yc-more-in 0.18s ease-out;
}

.yc .pane-more:hover {
  background: var(--surface-3);
  border-color: var(--accent-line);
}

.yc .pane-more .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.yc .pane-more .count {
  margin-left: 2px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@keyframes yc-more-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}

.yc .pane-input {
  position: relative;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border-subtle);
}

.yc .pane-input:has(.link-btn) {
  text-align: center;
}

/* The message box (lib/emote-box.js): one line, the emotes typed in it as pictures. */

.yc .emote-box {
  min-height: calc(1.4em + 16px); /* a line, empty too */
  overflow: hidden;
  white-space: pre; /* the spaces you type, as an input keeps them */
  cursor: text;
}

/* The chat's own, a little bigger than the other boxes (a thread's reply box): it's where you write. */

.yc .pane-input .emote-box {
  min-height: calc(1.4em + 20px);
  padding: 9px 11px;
  font-size: 14px;
}

.yc .emote-box:empty::before {
  color: var(--muted);
  pointer-events: none;
  content: attr(data-placeholder);
}

.yc .emote-box[contenteditable="false"] {
  opacity: 0.6;
}

.yc .box-emote {
  display: inline-block;
  height: 1.7em;
  margin: -0.4em 1px;
  vertical-align: middle;
}

/* Several Twitch channels here: pick which one you're writing to. */

.yc .input-row {
  display: flex;
  gap: 6px;
}

.yc .input-row .input {
  min-width: 0;
}

/* Several Twitch channels here: the box shows the one you're writing to as a
   picture before the text (lib/chat.js renderInput); click it for the others. */

.yc .input-row.compose {
  align-items: center;
  gap: 0;
  padding-left: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.yc .input-row.compose:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.yc .input-row.compose .input,
.yc .input-row.compose .input:focus {
  padding-left: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.yc .target-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1px;
  padding: 2px;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.yc .target-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* Its chevron (not the platform badge's mark). */

.yc .target-btn > .icon {
  width: 12px;
  height: 12px;
}

/* Who you're writing to, in a merged chat: their picture (and platform, when the chat mixes them). */

.yc .target-pic {
  --badge: 12px;
  width: 24px;
  height: 24px;
}

.yc .menu-pic {
  --badge: 10px;
  width: 20px;
  height: 20px;
}

/* On the menu's lighter background, and its hovered row. */

.yc .context-menu .source-pic .source-avatar {
  box-shadow: 0 0 0 2px var(--surface-2);
}

.yc .context-menu .platform-badge {
  --ring: var(--surface-2);
}

.yc .menu-item:hover :is(.platform-badge, .source-pic .source-avatar) {
  --ring: var(--surface-3);
  box-shadow: 0 0 0 2px var(--surface-3);
}

.yc .menu-avatar {
  width: 20px;
  height: 20px;
}

/* The message box with what sits in it: the slow mode countdown (a clock and the seconds), at its end; what you
   type stops short of it. */

.yc .input-box {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.yc .cooldown {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
  pointer-events: none; /* a click there is a click in the box */
}

.yc .cooldown .icon {
  width: 13px;
  height: 13px;
}

.yc .input-box:has(.cooldown:not([hidden])) .input {
  padding-right: 58px;
}

.yc .cooldown.nudge {
  animation: yc-nudge 0.3s;
}

@keyframes yc-nudge {
  25%,
  75% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
}

/* "Replying to @name ✕" above the message box. */

.yc .reply-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 4px 6px 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--border-strong); /* the person's colour, set in lib/chat.js */
  border-radius: var(--radius-sm);
}

.yc .reply-chip-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yc .reply-chip-head {
  font-size: 12px;
  color: var(--muted);
}

/* The start of the message you're answering, on one line. */

.yc .reply-chip-body {
  overflow: hidden;
  font-size: 13px;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .reply-chip-body .emote-stack {
  vertical-align: -5px;
}

.yc .reply-chip-body .emote {
  height: 20px;
  margin: 0;
}

.yc .reply-chip .btn:hover:not(:disabled) {
  background: var(--surface-3);
}

/* Emote suggestions while typing ":name" (lib/chat.js buildSuggest). */

.yc .suggest {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 8px;
  width: min(380px, calc(100% - 16px));
  z-index: 6;
  max-height: 264px;
  padding: 4px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .suggest-row[aria-selected="true"] {
  background: var(--surface-3);
}

.yc .suggest-row img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.yc .suggest-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .suggest-at {
  width: 28px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.yc .suggest-source {
  font-size: 11px;
  color: var(--muted);
}

.yc .input-note {
  padding: 4px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.yc .link-btn {
  padding: 4px;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}

.yc .link-btn:hover {
  text-decoration: underline;
}

/* "Write on YouTube": opens elsewhere. */

.yc .link-btn .icon {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
}

/* ---- User card (lib/card.js) ---- */

.yc .usercard {
  position: absolute;
  left: 8px; /* set next to the name you clicked (lib/card.js placeCard) */
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow);
}

/* In a short chat only their messages give way (.card-recent); everything above keeps its height, not squeezed
   into the next part. */

.yc .usercard > * {
  flex-shrink: 0;
}

/* Their Twitch banner, or a wash of their name colour. */

.yc .card-banner {
  position: relative;
  flex-shrink: 0;
  height: 64px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--user-color) 45%, transparent), color-mix(in srgb, var(--user-color) 8%, transparent)) center / cover no-repeat;
}

/* The user card and the conversation, moved by their top (lib/chat.js floating). */

.yc .drag-handle {
  cursor: grab;
  user-select: none;
}

.yc .dragging .drag-handle {
  cursor: grabbing;
}

/* Pinned: 📌 lit in the accent; it stays open (only its ✕ closes it). */

.yc .pin-btn.on {
  color: var(--accent);
}

.yc .card-tools .pin-btn.on {
  color: #ffd23f;
}

.yc .pinned {
  box-shadow: 0 0 0 1px var(--accent-line), 0 16px 40px var(--shadow);
}

.yc .card-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2; /* above the picture's row, which overlaps the banner (else it takes their lower edge's clicks) */
  display: flex;
  gap: 4px;
}

.yc .card-tools .btn {
  color: #fff;
  background: rgba(13, 17, 23, 0.6);
  backdrop-filter: blur(6px);
}

.yc .card-tools .btn:hover:not(:disabled) {
  background: rgba(13, 17, 23, 0.85);
}

.yc .card-tools .friend-btn.on {
  color: #ffca28;
}

.yc .card-tools .i-twitch {
  color: #bf94ff;
}

.yc .card-tools .i-youtube {
  color: #ff4e45;
}

.yc .card-tools .i-kick {
  color: #53fc18;
}

/* The picture overlaps the banner; name, badges and channel sit below it. */

.yc .card-head {
  position: relative;
  margin-top: -34px;
  padding: 0 14px;
}

.yc .card-avatar-frame {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--surface-3);
  border: 4px solid var(--surface-2);
  border-radius: 50%;
}

/* Fades in (settling from a touch larger) once loaded; until then the frame is an empty circle. */

.yc .card-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.3s ease-out, transform 0.4s ease-out;
}

.yc .card-avatar-frame.loaded .card-avatar {
  opacity: 1;
  transform: none;
}

/* Their picture, big, while you point at it (lib/card.js zoomPicture). */

.yc .card-avatar-big {
  position: fixed;
  z-index: 10;
  object-fit: cover;
  background: var(--surface-3);
  border: 4px solid var(--surface-2);
  border-radius: 16px;
  box-shadow: 0 16px 40px var(--shadow);
  pointer-events: none; /* the pointer stays on the small one under it */
  transform-origin: top left;
  animation: yc-card-zoom 0.12s ease-out;
}

@keyframes yc-card-zoom {
  from {
    opacity: 0;
    transform: scale(0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .card-avatar-big {
      animation: none;
  }
}

.yc .card-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-top: 10px;
}

/* "Previously [xqcow 2017–2022] [+3 more]": earlier names, from the log servers, one chip each. */

.yc .card-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.yc .card-name-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 8px;
  font: inherit;
  color: var(--muted);
  background: var(--surface-3);
  border: none;
  border-radius: 999px;
}

.yc .card-name-chip strong {
  font-weight: 600;
  color: var(--text);
}

.yc .card-name-when {
  font-size: 11px;
}

.yc .card-names-more {
  cursor: pointer;
}

.yc .card-names-more:hover {
  color: var(--text);
}

.yc .card-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.yc .card-name {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .card-role {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--label);
  background: rgba(169, 112, 255, 0.15);
  border-radius: 999px;
}

/* Partner: Twitch's verified check instead of the word. */

.yc .card-role.is-verified {
  display: inline-flex;
  padding: 0;
  color: #9146ff;
  background: none;
}

/* Kick's verified check is green. */

.yc .card-role.is-verified.kick {
  color: var(--kick);
}

.yc .card-role.is-verified .icon {
  width: 20px;
  height: 20px;
}

.yc .card-name-row .badges {
  top: 0;
  margin: 0;
  vertical-align: 0;
}

/* Merged chat: which channel they're chatting in. */

.yc .card-in {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.yc .card-in-pic {
  --badge: 9px;
  width: 16px;
  height: 16px;
}

.yc .card-in-pic .source-avatar,
.yc .card-in-pic .platform-badge {
  box-shadow: 0 0 0 2px var(--surface-2);
}

.yc .card-bio {
  display: -webkit-box;
  margin: 10px 14px 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.yc .card-note-input {
  display: block;
  width: auto;
  min-height: 30px;
  margin: 10px 14px 0;
  padding: 5px 9px;
  font-size: 12px;
  resize: vertical;
}

/* Your nickname for them and the note, side by side (lib/card.js). */

.yc .card-private {
  display: flex;
  gap: 6px;
  margin: 10px 14px 0;
}

.yc .card-private .card-note-input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.yc .card-nick-input {
  flex: 0 0 32%;
  min-width: 0;
  padding: 5px 9px;
  font-size: 12px;
}

/* Followers, joined, live, subscribed: one short line each, two per row. */

.yc .card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px;
  margin: 10px 14px 0;
  font-size: 13px;
  color: var(--muted);
}

/* The same order whichever arrives first: followers, joined; sub, following; live now. */

.yc .card-stat.stat-user {
  order: 1;
}

.yc .card-stat.stat-calendar {
  order: 2;
}

.yc .card-stat.stat-star {
  order: 3;
}

.yc .card-stat.stat-heart {
  order: 4;
}

.yc .card-stat.stat-radio {
  order: 5;
}

.yc .card-stats:empty {
  display: none;
}

.yc .card-stat {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .card-stat .icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
}

.yc .card-stat strong {
  font-weight: 600;
  color: var(--text);
}

.yc .stat-star .icon {
  color: var(--label);
}

/* A new account or follow (lib/card.js sinceRow): a mod's first hint at a throwaway account. */

.yc .card-stat.fresh .icon,
.yc .card-stat.fresh strong {
  color: var(--warn);
}

.yc .card-stat.is-live .icon {
  color: #eb0400;
}

/* Their recent messages: scrolls on its own, so the card never needs to. */

.yc .card-recent {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.yc .card-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.yc .card-count {
  flex-shrink: 0;
  padding: 0 6px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--text);
  letter-spacing: 0;
  background: var(--surface-3);
  border-radius: 999px;
}

.yc .card-messages {
  flex: 1 1 auto;
  min-height: 48px;
  max-height: 240px;
  padding: 0 14px 6px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
}

/* Off-screen rows skip layout (thousands of lines from the logs). */

.yc .card-message {
  padding: 3px 0;
  overflow-wrap: anywhere;
  content-visibility: auto;
  contain-intrinsic-size: auto 24px;
}

/* One line: the log server, or what's loading; the whole text on hover when it's cut short. */

.yc .card-note {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

/* Above their messages: what's loaded from the logs, and buttons for earlier months. */

.yc .card-earlier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 14px 6px;
  padding: 6px 6px 6px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.yc .card-earlier-text {
  flex: 1 1 auto;
  min-width: 0;
}

.yc .card-earlier-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Their timeouts and bans, as chips that filter the list. */

.yc .card-offenses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 14px 6px;
}

.yc .offense-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  font: 12px var(--font);
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.yc .offense-chip:hover,
.yc .offense-chip[aria-pressed="true"] {
  border-color: var(--danger-line);
}

.yc .offense-chip .icon {
  width: 13px;
  height: 13px;
}

.yc .offense-last {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .card-search {
  flex-shrink: 0;
  width: auto;
  margin: 2px 14px 6px;
  padding: 5px 9px;
  font-size: 12px;
}

/* Day headings, staying at the top while you scroll that day. */

.yc .card-day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 0 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
}

.yc .card-timeout {
  color: var(--danger);
}

.yc .card-timeout .icon,
.yc .card-event .icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
}

.yc .card-event {
  margin-right: 6px;
  font-weight: 600;
}

.yc .card-message .emote {
  height: 24px;
  margin: -2px 0;
}

.yc .card-empty {
  font-size: 12px;
  color: var(--muted);
}

.yc .card-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border-subtle);
}

.yc .card-action {
  flex: 1;
}

.yc .card-mod {
  flex-wrap: wrap;
  padding-top: 0;
  border-top: none;
}

.yc .card-mod .card-action {
  flex: 1 1 auto;
}

/* The timeout lengths, joined: a clock, then 10m 1h 1d. */

.yc .card-timeouts {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--muted);
}

.yc .card-timeouts > .icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.yc .card-timeouts .card-action {
  flex: none;
  min-width: 38px;
  border-radius: 0;
}

.yc .card-timeouts .card-action + .card-action {
  margin-left: -1px;
}

.yc .card-timeouts .icon + .card-action {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.yc .card-timeouts .card-action:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.yc .card-action.danger {
  color: var(--danger);
  border-color: var(--danger-line);
}

/* ---- Channel suggestions under "add a channel" boxes (lib/channel-suggest.js) ---- */

.yc .channel-suggest {
  position: fixed;
  z-index: 40;
  max-height: 360px;
  padding: 4px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .cs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .cs-row[aria-selected="true"] {
  background: var(--surface-3);
}

.yc .cs-pic {
  --badge: 12px;
  width: 28px;
  height: 28px;
}

.yc .cs-pic .source-avatar {
  box-shadow: none;
}

.yc .cs-pic .platform-badge {
  --ring: var(--surface-2);
}

.yc .cs-row[aria-selected="true"] .platform-badge {
  --ring: var(--surface-3);
}

.yc .cs-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.yc .cs-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .cs-follow {
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--label);
  vertical-align: 1px;
  background: rgba(169, 112, 255, 0.15);
  border-radius: 999px;
}

.yc .cs-game {
  overflow: hidden;
  font-size: 11px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Live: a red dot and viewers. */

.yc .cs-live {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.yc .cs-live::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #eb0400;
  border-radius: 50%;
}

.yc .cs-offline {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
}

.yc .cs-note {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Modes, cheers, history ---- */

/* Slow, followers-only, sub-only… as one small group of icons (lib/chat.js renderModes). */

.yc .pane-modes {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 20px; /* one icon alone: a round tile, not a stub of a pill */
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--warn);
  white-space: nowrap;
  background: var(--warn-soft);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 28%, transparent);
  font-variant-numeric: tabular-nums;
}

.yc .mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help; /* hover: what the mode means */
}

.yc .mode .icon {
  width: 12px;
  height: 12px;
}

/* A mode that doesn't hold you back (lib/chat.js Feed.modePass): quiet. All of them: the pill too. */

.yc .mode.passed {
  color: var(--muted);
}

.yc .pane-modes.passed {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* The tooltip for a mode: what it means. */

.yc .hover-tip[data-kind="mode"] {
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.yc .pop-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

/* "Cheer100": the cheermote, then the amount in its tier colour. */

.yc .cheer-amount {
  margin: 0 4px 0 2px;
  font-weight: 700;
}

/* Said before you opened the chat (recent messages). */

.yc .msg.history {
  opacity: 0.6;
}

.yc .msg.history:hover {
  opacity: 1;
}

/* The channel's name in full while there's room (the rest keeps its width, the name gives way). Narrow panes (the
   side panel) keep it readable: the uptime and the modes' values go (hover a mode for it). */

.yc .feed-chip .pane-title {
  flex: 0 1 auto;
  min-width: 3ch;
}

@container pane (max-width: 440px) {
  .yc .feed-chip .mode-value {
      display: none;
  }

  .yc .feed-chip .pane-modes {
      gap: 5px;
  }

  /* One mode, now an icon by itself: a round tile. */

  .yc .feed-chip .pane-modes:has(> .mode:only-child) {
      padding: 0;
  }
}

/* The live time ("2h 5m") stays in a side panel of usual width; only a very narrow pane drops it. */

@container pane (max-width: 340px) {
  .yc .feed-chip .uptime {
      display: none;
  }
}

/* ---- Emote picker (lib/chat.js toggleEmotePicker) ---- */

.yc .picker-btn {
  flex-shrink: 0;
  align-self: center;
}

.yc .emote-picker {
  position: absolute;
  right: 8px; /* by the ☺ button */
  bottom: calc(100% + 4px);
  width: min(380px, calc(100% - 16px));
  z-index: 6;
  display: flex;
  flex-direction: column;
  max-height: min(340px, 60vh);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .picker-search {
  flex-shrink: 0;
  width: auto;
  margin: 8px 8px 4px;
}

.yc .picker-body {
  flex: 1;
  min-height: 0;
  padding: 0 8px 4px;
  overflow-y: auto;
}

.yc .picker-title {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 8px 2px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
}

.yc .picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px;
}

.yc .picker-emote {
  display: grid;
  place-items: center;
  height: 34px;
  padding: 1px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .picker-emote:hover,
.yc .picker-emote:focus-visible {
  background: var(--surface-3);
  outline: none;
}

/* Starred (right-click in the picker): a gold tint, and a star outlined to show on any emote. */

.yc .picker-emote.fav {
  position: relative;
  background: rgba(255, 202, 40, 0.14);
}

.yc .picker-emote.fav::after {
  content: "★";
  position: absolute;
  top: -1px;
  right: 0;
  font-size: 12px;
  line-height: 1;
  color: #ffca28;
  text-shadow: 0 0 2px #000, 0 0 1px #000;
}

.yc .picker-emote img {
  max-width: 100%;
  max-height: 32px;
  object-fit: contain;
}

/* One line, the same height empty or not (the picker grows upwards: a taller line would move it). */

.yc .picker-hovered {
  flex-shrink: 0;
  min-height: 28px;
  padding: 6px 12px;
  overflow: hidden;
  font-size: 12px;
  line-height: 15px; /* with the padding and border: the 28px, empty or not */
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid var(--border-subtle);
}

.yc .picker-empty {
  padding: 12px 4px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Folded repeats, row shading ---- */

/*
 * "×12": the same message sent again (lib/chat.js fold); it pops as it grows, and its tooltip says who sent it.
 * Louder as it grows (data-level, by strength, not colour: yellow, orange and gold already mean things): quiet
 * from 2, brighter from 5, filled from 20. "×9 similar" (different messages folded) has a dashed edge.
 */

.yc .fold-count {
  display: inline-block; /* for the pop's scale */
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--muted);
  vertical-align: 1px;
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: 999px;
}

.yc .fold-count[data-level="mid"] {
  color: var(--text);
  border-color: var(--border-strong);
}

.yc .fold-count[data-level="high"] {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.yc .fold-count.similar {
  border-style: dashed;
  border-color: var(--border-strong);
}

.yc .fold-count.similar[data-level="high"] {
  border-color: var(--bg);
}

/* A repeated timeout: beside the pills, spaced like them. */

.yc .notice-head .fold-count {
  margin-left: 0;
}

/* Settings → Shade every other line. */

.yc .alt-rows .pane-list > .msg:nth-child(even of :not([hidden])):not(.hl, .notice, .first, .friend) {
  background: var(--hover);
}

/* ---- Moderating (lib/moderation.js) ---- */

/* The chat modes as a button, for moderators: what's on (the pill as it is), or a quiet icon when nothing is. */

.yc .mod-modes {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.yc .mod-modes:hover {
  box-shadow: 0 0 0 1px var(--warn);
}

.yc .mod-modes.quiet {
  padding: 2px 4px;
  color: var(--muted);
  background: none;
  box-shadow: none;
}

.yc .mod-modes.quiet:hover {
  color: var(--text);
  background: var(--surface-3);
  box-shadow: none;
}

.yc .mod-modes.quiet .icon {
  width: 13px;
  height: 13px;
}

.yc .mod-modes .mode {
  cursor: inherit;
}

/* "Moderate…" and the chat modes: placed like the user card. */

.yc .mod-panel {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100% - 16px));
  padding: 12px;
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow);
}

.yc .mod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.yc .mod-reason.needed {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-soft);
}

.yc .mod-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.yc .mod-reasons,
.yc .mod-lengths,
.yc .mod-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.yc .mod-reasons .btn {
  font-weight: 500;
  border: 1px solid var(--border);
}

.yc .mod-danger {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
}

.yc .mod-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.yc .mod-row-label {
  color: var(--muted);
  white-space: nowrap;
}

.yc .mod-toggle {
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.yc .mod-toggle[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Settings → Moderation → on every message: delete, timeout, ban before the name. */

.yc .line-mod {
  display: inline-flex;
  gap: 1px;
  margin-right: 4px;
  vertical-align: -3px;
}

.yc .line-mod .btn-icon {
  width: 18px;
  height: 18px;
  padding: 2px;
  color: var(--muted);
}

.yc .line-mod .btn-icon:hover {
  color: var(--text);
}

.yc .line-mod .btn-icon:first-child:hover,
.yc .line-mod .btn-icon:last-child:hover {
  color: var(--danger);
}

.yc .line-mod .icon {
  width: 13px;
  height: 13px;
}

/* Twitch watches them (monitored) or shows their messages to mods only (restricted). */

/* Before the name like a badge (lib/chat.js trustTag, ageTag): a solid tile as tall as the badges, an icon and a
   word. Centred on the name as .badges are. */

.yc .trust-tag,
.yc .age-tag {
  position: relative;
  top: -0.1em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  margin-right: 5px;
  padding: 0 5px 0 4px;
  font: 700 11px/1 var(--font);
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 3px;
  cursor: help;
}

.yc .trust-tag .icon,
.yc .age-tag .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
  /* Centred on the capitals it is, but the words are mostly lowercase: a little lower reads as centred. */
  translate: 0 0.5px;
}

/* Twitch watches them: amber, dark text (white doesn't read on it). */

.yc .trust-tag {
  color: #2b1d00;
  background: #f5a524;
}

.yc .trust-tag.restricted {
  color: #fff;
  background: #d93d42;
}

/* A new account: deep orange. */

.yc .age-tag {
  background: #c2410c;
}

.yc .deleted-by {
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
}

/* On a notice line: lift a timeout, shout out a raider; under a held message, allow or deny it. */

.yc .notice-action {
  margin-left: auto;
  padding: 1px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.yc .notice-action + .notice-action {
  margin-left: 0;
}

.yc .notice-action:hover {
  border-color: var(--border-strong);
}

.yc .notice-action.allow {
  color: #fff;
  background: #2ba640;
  border-color: transparent;
}

/* Under a message AutoMod held: Allow and Deny (lib/chat.js automodButtons), where you've just read it. */

.yc .automod-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.yc .automod-actions .notice-action {
  margin-left: 0;
  padding: 2px 14px;
  font-size: 12px;
}

/* The moderation panel's announcement: the text, its colour, the button. */

.yc .mod-announce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.yc .mod-announce .input {
  grid-column: 1 / -1;
}

.yc .mod-chatters {
  justify-self: start;
  gap: 6px;
}

/* "Moderate…": what this chat saw of them. */

.yc .mod-history {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* "Moderate…": another length, typed. */

.yc .mod-other {
  width: 64px;
  padding: 4px 8px;
  font-size: 12px;
}

.yc .mod-other.needed {
  border-color: var(--danger);
}

/* Who's in chat. */

.yc .chatters-list {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.yc .chatters-names {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.yc .chatter {
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-3);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.yc .chatter:hover {
  background: var(--hover);
}

.yc .chatters-note {
  width: 100%;
  margin: 4px 2px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Above the chat: a channel's prediction, poll and pinned message (lib/pinned.js) ---- */

.yc .pane-pinned {
  display: grid;
  flex-shrink: 0;
  gap: 6px;
  max-height: 50%; /* two cards and a folded one, in a side panel */
  padding: 6px 8px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border-subtle);
}

.yc .pin-card {
  display: grid;
  gap: 4px;
  padding: 6px 8px 8px 10px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* What it is, its state (time left, "Locked", who pinned), and the ✕ at the end. */

.yc .pin-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
}

.yc .pin-head > .icon {
  flex: none;
  width: 13px;
  height: 13px;
}

.yc .pin-head .msg-source {
  margin-right: 0;
}

.yc .pin-kind {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.yc .pin-state {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Folded to one line: the head says the rest (the question and what leads, what was pinned). */

.yc .pin-head {
  cursor: pointer;
}

.yc .pin-summary {
  display: none;
}

.yc .pin-card.folded {
  padding-bottom: 6px;
}

.yc .pin-card.folded > :not(.pin-head) {
  display: none;
}

.yc .pin-card.folded .pin-state {
  flex: none;
  max-width: 45%;
}

.yc .pin-card.folded .pin-summary {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A folded pinned message is the message itself, "name: what they said": the pin says it's pinned, by whom waits
   for unfolding. Its emotes at the line's height. */

.yc .pin-card.pin.folded .pin-kind,
.yc .pin-card.pin.folded .pin-state {
  display: none;
}

.yc .pin-summary .emote {
  height: 18px;
  margin: -3px 0;
}

/* A hype train in its own warm colour (the level's bar too). */

.yc .pin-card.hype {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border-subtle));
}

.yc .pin-card.hype .pin-head > .icon,
.yc .pin-card.hype .pin-kind {
  color: var(--warn);
}

.yc .pin-card.hype .pin-bar {
  --fill: color-mix(in srgb, var(--warn) 32%, transparent);
}

/* "Vote on Twitch": under a running poll or prediction, where the vote is made. */

.yc .pin-go {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-self: start;
  padding: 2px 0 0;
}

.yc .pin-go .icon {
  width: 12px;
  height: 12px;
}

/* A narrow pane: a folded card's icon says what it is, the room is for what it says. */

@container pane (max-width: 440px) {
  .yc .pin-card.folded .pin-kind {
      display: none;
  }
}

.yc .pin-fold .icon {
  transition: transform 0.15s;
}

.yc .pin-card:not(.folded) .pin-fold .icon {
  transform: rotate(180deg);
}

/* Who pinned a message: their badges and name as in the chat, at the head's size. */

.yc .pin-state .badges {
  margin: 0 4px 0 2px;
}

.yc .pin-state .badge {
  width: 15px;
  height: 15px;
}

.yc .pin-state .badge-pill {
  min-width: 14px;
  height: 14px;
  font-size: 9px;
}

.yc .pin-head .btn {
  margin: -2px -4px -2px 0;
  padding: 3px;
}

.yc .pin-head .pin-fold {
  margin-right: -2px;
}

.yc .pin-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* A choice or an outcome: its share fills the row from the left, in its colour. */

.yc .pin-bar {
  --fill: var(--accent-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  color: var(--text);
  background: linear-gradient(to right, var(--fill) var(--share), var(--surface-3) var(--share));
  border-radius: 6px;
}

.yc .pin-bar[data-color="blue"] {
  --fill: rgba(56, 122, 255, 0.34);
}

.yc .pin-bar[data-color="pink"] {
  --fill: rgba(245, 0, 155, 0.3);
}

.yc .pin-bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .pin-bar-title .icon {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
}

.yc .pin-bar-detail {
  flex: none;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.yc .pin-bar-share {
  flex: none;
  min-width: 2.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* It's over: the one that won stands out, the others step back. */

.yc .pin-bar.won {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.yc .pin-bar.lost {
  opacity: 0.6;
}

/* A pinned message, as its line in the chat; a long one scrolls. */

.yc .pin-message {
  max-height: 4.6em;
  overflow-y: auto;
  overflow-wrap: anywhere; /* a long link */
  font-size: var(--chat-size);
  line-height: 1.5;
}

.yc .pin-message .msg {
  padding: 0;
  border: none;
}

/* In a combined chat the card's head says whose it is. */

.yc .pin-message .msg-source {
  display: none;
}

/* A raid into a channel you moderate: protect the chat, or shout them out (lib/mod-tools.js offerRaidProtection).
   A card as the ones above the chat (.pin-card), in the raid's colour. */

.yc .raid-bar {
  --notice: #ff9f43;
  display: grid;
  flex-shrink: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 6px 8px;
  padding: 8px 8px 8px 10px;
  font-size: 12px;
  background: color-mix(in srgb, var(--notice) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--notice) 35%, var(--border-subtle));
  border-radius: var(--radius-sm);
}

.yc .raid-bar + .pane-pinned:not([hidden]) {
  padding-top: 0;
}

.yc .raid-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: var(--notice);
  border-radius: 50%;
}

.yc .raid-icon .icon {
  width: 13px;
  height: 13px;
}

.yc .raid-text {
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}

.yc .raid-text strong {
  color: var(--text);
}

/* How many they bring, as a notice's chip. */

.yc .raid-viewers {
  display: inline-block;
  margin-left: 2px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--notice) 70%, var(--text));
  white-space: nowrap;
  background: color-mix(in srgb, var(--notice) 18%, transparent);
  border-radius: 999px;
}

.yc .raid-bar > .btn {
  margin: -2px 0;
  padding: 3px;
}

.yc .raid-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.yc .raid-actions .btn {
  padding: 4px 9px;
  font-size: 12px;
}

.yc .raid-actions .btn:not(.btn-primary) {
  background: var(--surface);
}

.yc .raid-actions .btn .icon {
  width: 13px;
  height: 13px;
}

/* Done: it says so, quietly. */

.yc .raid-actions .btn.done {
  color: var(--muted);
  background: none;
  border-color: var(--border-subtle);
  opacity: 1;
}

/* A first-time chatter's account under a month old. */

/* Commands' suggestions: the usage beside the name. */

.yc .suggest-usage {
  flex-shrink: 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.yc .suggest-command .suggest-name {
  flex: none;
}

.yc .suggest-command .suggest-source {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- A badge or paint the service just gave you (ChatPane.showGiven): its picture, big (a paint: a tile of its
   colours), what it is, and under that a button to wear it. A card as the ones above the chat, the accent's colour
   behind the picture. ---- */

.yc .given-bar {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 6px 8px;
  padding: 8px 8px 8px 10px;
  font-size: 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2)), var(--surface-2) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
  border-radius: var(--radius-sm);
}

.yc .given-bar + .pane-pinned:not([hidden]) {
  padding-top: 0;
}

/* Chats side by side: said once, in the first that shows. */

.yc .pane:not([hidden]) ~ .pane .given-bar {
  display: none;
}

.yc .given-art {
  display: flex;
}

/* It lands with a little bounce, once. Several: each half over the one before. */

.yc .given-art > * {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.3));
  animation: yc-given-land 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.yc .given-art > * + * {
  margin-left: -14px;
}

/* A paint: a tile as a badge's, in its colours (moving, if the paint does). */

.yc .given-paint {
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  border-radius: 10px;
}

.yc .given-paint.flowing {
  background-size: 200% 100%;
  animation:
    yc-given-land 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both,
    yc-paint-flow 5s linear infinite;
}

@keyframes yc-given-land {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .given-art > *,
  .yc .given-paint.flowing {
      animation: none;
  }
}

.yc .given-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.yc .given-text strong {
  font-size: 13px;
  color: var(--text);
}

.yc .given-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--muted);
}

.yc .given-bar > .btn {
  align-self: start;
  padding: 3px;
}

/* ---- A streamer live on other platforms too (ChatPane.offerSimulcast): combine the chats? ---- */

.yc .simulcast-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  font-size: 12px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
}

.yc .simulcast-tiles {
  display: flex;
  flex: none;
  gap: 3px;
}

.yc .simulcast-tiles .platform-tile {
  width: 18px;
  height: 18px;
}

.yc .simulcast-text {
  flex: 1;
  min-width: 0;
  color: var(--muted);
}

.yc .simulcast-text strong {
  color: var(--text);
}

.yc .simulcast-bar .btn {
  flex: none;
}

/* ---- Mentions inbox (lib/mentions.js) ---- */

.yc .mentions-btn {
  position: relative;
}

.yc .mentions-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
  text-align: center;
  background: #e5484d; /* the toolbar icon's count (background.js), in both themes */
  border-radius: 999px;
}

.yc .mentions-pop {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 16px));
  max-height: min(460px, 70vh);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}

.yc .mentions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.yc .mentions-list {
  flex: 1;
  min-height: 0;
  padding: 4px;
  overflow-y: auto;
}

/* A mention as chat shows it: the channel's picture (and platform), who, where and when, what they said. */

.yc .mention-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.yc .mention-row:hover {
  background: var(--surface-3);
}

/* New since you last opened the list: tinted, with a dot. */

.yc .mention-row.new {
  background: var(--accent-soft);
}

.yc .mention-row.new .mention-top::after {
  width: 6px;
  height: 6px;
  margin-left: auto;
  flex: none;
  align-self: center;
  background: var(--accent);
  border-radius: 50%;
  content: "";
}

.yc .mention-source {
  --badge: 12px;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

/* The rings around its picture and badge in the list's colour (a row's when pointed at). */

.yc .mention-source .source-avatar {
  box-shadow: none;
}

.yc .mention-source .platform-badge {
  --ring: var(--surface-2);
}

.yc .mention-body {
  flex: 1;
  min-width: 0;
}

.yc .mention-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.yc .mention-where {
  overflow: hidden;
  font-size: 11px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .mention-text {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.yc .mention-text .emote {
  display: inline;
  height: 1.7em;
  margin: -2px 0;
  vertical-align: middle;
}

/* Your name or the highlight word in it: in the highlight's colour on its tint (no line under it: it ran through
   a name's own underscores). */

.yc .mention-text mark {
  padding: 1px 3px;
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 4px;
}

/* Nothing yet: what it's waiting for (and signing in, if that's what it needs). */

.yc .mentions-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 16px 18px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.yc .mentions-empty strong {
  color: var(--text);
}

.yc .mentions-empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.yc .mentions-empty .btn {
  margin-top: 6px;
}

/* ---- Settings → Lines: Compact ---- */

/* Tighter lines, smaller emotes: more fits, nothing overlaps the lines around it. */

.yc [data-density="compact"] .pane-list {
  padding-top: 2px;
  line-height: 1.38;
}

.yc [data-density="compact"] .msg {
  padding-top: 1px;
  padding-bottom: 1px;
}

.yc [data-density="compact"] .msg.notice {
  padding-top: 3px;
  padding-bottom: 3px;
}

.yc [data-density="compact"] .emote {
  height: calc(var(--chat-size) * var(--emote-scale, 2.1) * 0.8);
  margin: -2px 0;
}

/* ---- Friends, "new since you left" ---- */

.yc .msg.friend {
  background: rgba(255, 202, 40, 0.07);
  border-left-color: var(--friend);
}

.yc .friend-star {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  color: var(--friend);
  vertical-align: -1px;
}

/* Name paints (7TV's, Yapp Chat's), in a chat line and on a user card: the gradient or image shows through the letters. */

.yc .name.painted,
.yc .card-name.painted,
.yc .given-text .painted {
  color: transparent !important;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: cover;
}

/* A Yapp Chat paint that moves (lib/paints.js `flow`): its colours, which end where they begin, slide through the
   name and come round again. Still for those who asked their system for less motion. */

.yc .name.painted.flowing,
.yc .card-name.painted.flowing,
.yc .given-text .painted.flowing {
  background-size: 200% 100%;
  animation: yc-paint-flow 5s linear infinite;
}

@keyframes yc-paint-flow {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc .name.painted.flowing,
  .yc .card-name.painted.flowing,
  .yc .given-text .painted.flowing {
      animation: none;
  }
}

.yc .unread-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.yc .unread-line::before,
.yc .unread-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--danger-line);
}

/* Over "×12": how many times, then who sent it, wrapping under it (lib/chat.js showFoldTip). */

.yc .hover-tip[data-kind="fold"] {
  flex-direction: column;
  gap: 4px;
  max-width: min(280px, calc(100vw - 16px));
  font-size: 13px;
}

.yc .hover-tip[data-kind="fold"] strong {
  white-space: nowrap;
}

.yc .tip-names {
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.yc .tip-name {
  font-weight: 600;
  white-space: nowrap;
}

/* Its platform, in a chat merging Twitch, Kick and YouTube. */

.yc .tip-name .platform-tile {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
}

/* "×9 similar": each version and who sent it, on one line when they fit. */

.yc .tip-variant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}

.yc .tip-variant-text {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .tip-variant .tip-names {
  font-size: 12px;
}

/* When exactly a message was sent (over a name or timestamp). */

.yc .hover-tip[data-kind="time"] {
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

/* Over a name (ChatPane.showNameTip): their picture (their initial until it's there), their name with its badges,
   what their profile says, and under those when the message was sent and how much they've written. */

.yc .hover-tip[data-kind="name"] {
  flex-direction: column;
  gap: 4px;
  max-width: min(320px, calc(100vw - 16px));
  font-size: 13px;
}

.yc .peek-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}

.yc .peek-photo {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
  object-fit: cover;
  background: var(--surface-3);
  border-radius: 50%;
}

.yc .peek-who {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.yc .peek-name {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 15px;
}

.yc .peek-name .badges {
  top: 0;
}

.yc .peek-name .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc .peek-facts {
  color: var(--text);
}

.yc .peek-facts span {
  white-space: nowrap;
}