/* Colour themes. The video surface deliberately stays dark in both modes. */
.theme-setting {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.chat-settings .theme-picker button {
  justify-self: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.chat-settings .theme-picker button + button { border-left: 1px solid var(--border); }
.chat-settings .theme-picker button.active {
  background: rgba(83, 252, 24, 0.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(83, 252, 24, 0.28);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #d8dce3;
  --text: #17191d;
  --muted: #646b76;
  --pz-hairline: rgba(18, 24, 33, 0.11);
}
html[data-theme="light"],
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .stage,
html[data-theme="light"] .player { background: #000; }

html[data-theme="light"] .chat {
  border-color: var(--border);
  background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
}
html[data-theme="light"] .chat-tabs,
html[data-theme="light"] .chat-online-stats {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.96);
}
html[data-theme="light"] .chat-source-filters,
html[data-theme="light"] .send-targets {
  border-color: #cfd4dc;
  background: #eef1f4;
}
html[data-theme="light"] .source-toggle + .source-toggle,
html[data-theme="light"] .send-targets button + button { border-left-color: #cfd4dc; }
html[data-theme="light"] .source-toggle.active,
html[data-theme="light"] .send-targets button.active {
  background: #fff;
  color: #17191d;
  box-shadow: 0 1px 4px rgba(18, 24, 33, 0.12);
}
html[data-theme="light"] .chat-header-btn:hover,
html[data-theme="light"] .chat-header-btn.active,
html[data-theme="light"] .chat-hide-btn:hover { background: rgba(18, 24, 33, 0.07); }

html[data-theme="light"] .pinned {
  border-bottom-color: #e2c458;
  background: #fffaf0;
}
html[data-theme="light"] .pinned-title { background: #fff3c8; color: #735600; text-shadow: none; }
html[data-theme="light"] .pinned-title button,
html[data-theme="light"] .pinned-links a,
html[data-theme="light"] .pinned-collapsed-links a {
  border-color: #dec66b;
  background: rgba(255, 255, 255, 0.72);
  color: #245ea8;
}
html[data-theme="light"] .wallets code { color: #454b54; }

html[data-theme="light"] .msg:hover { background: rgba(18, 24, 33, 0.055); }
html[data-theme="light"] .msg-reply-btn { background: rgba(18, 24, 33, 0.08); color: #505762; }
html[data-theme="light"] .msg.reply-to-me,
html[data-theme="light"] .msg.mention-to-me {
  background: linear-gradient(90deg, rgba(45, 150, 20, 0.14), rgba(45, 150, 20, 0.04));
}
html[data-theme="light"] .msg .reply {
  border-left-color: var(--accent);
  color: #565047;
}
html[data-theme="light"] .msg .reply-label { color: #6d665c; }
html[data-theme="light"] .msg .reply-name { color: var(--accent); }
html[data-theme="light"] .msg .reply-text { color: #49453e; }
html[data-theme="light"] .msg .reply[data-parent-id]:hover {
  border-left-color: var(--accent-dark);
  background: var(--accent-soft);
  color: #28251f;
}
html[data-theme="light"] .chat-reply-compose {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: #49453e;
}
html[data-theme="light"] .chat-reply-compose button { color: #49453e; }
html[data-theme="light"] .user-history-message .reply { color: #565047; }
html[data-theme="light"] .thread-body .thread-msg { color: var(--text); }
html[data-theme="light"] .thread-head button:hover { color: var(--text); }
html[data-theme="light"] #messages::-webkit-scrollbar-thumb,
html[data-theme="light"] .pinned-scroll::-webkit-scrollbar-thumb { background: rgba(18, 24, 33, 0.20); }

html[data-theme="light"] .chat-composer {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.97);
}
html[data-theme="light"] .chat-input-wrap {
  border-color: #cfd4dc;
  background: #f7f8fa;
}
html[data-theme="light"] .quick-emotes button:hover,
html[data-theme="light"] .composer-icon:hover { background: rgba(18, 24, 33, 0.07); }

html[data-theme="light"] .chat-settings,
html[data-theme="light"] .chat-auth-pop,
html[data-theme="light"] .quality-menu,
html[data-theme="light"] .mention-suggest,
html[data-theme="light"] .chat-emote-picker,
html[data-theme="light"] .user-action-menu,
html[data-theme="light"] .user-history-card,
html[data-theme="light"] .thread-panel {
  border-color: #cfd4dc;
  background: rgba(255, 255, 255, 0.98);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(18, 24, 33, 0.18);
}
html[data-theme="light"] .chat-settings button,
html[data-theme="light"] .chat-popout,
html[data-theme="light"] .chat-auth-pop button,
html[data-theme="light"] .quality-menu button,
html[data-theme="light"] .user-action-menu button,
html[data-theme="light"] .user-history-actions button,
html[data-theme="light"] .user-history-more,
html[data-theme="light"] .chat-search-form button,
html[data-theme="light"] #chat-search-close {
  border-color: #cfd4dc;
  background: #f0f2f5;
  color: var(--text);
}
html[data-theme="light"] .chat-blocks { border-color: #d8dce3; background: #f7f8fa; }
html[data-theme="light"] .chat-search-form input { border-color: #cfd4dc; background: #fff; color: var(--text); }
html[data-theme="light"] .user-history-head,
html[data-theme="light"] .chat-search-form,
html[data-theme="light"] .thread-head { border-color: #d8dce3; }
html[data-theme="light"] .user-history-message { border-color: #e5e8ed; }
html[data-theme="light"] .mention-item:hover,
html[data-theme="light"] .mention-item.active { background: rgba(45, 150, 20, 0.12); }

/* Cinema is a dark glass overlay over video, even when the shell is light. */
@media (min-width: 801px) {
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat {
    background: linear-gradient(90deg, rgba(8, 8, 14, 0) 0%, rgba(8, 8, 14, 0.72) 22px, rgba(8, 8, 14, 0.88) 100%);
    border-color: rgba(255, 255, 255, 0.10);
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-tabs,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-composer {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 14, 0.42);
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .text {
    color: #f5f5f7;
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg.system,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg-time,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .reply-label,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .reply-text {
    color: #b8bbc4;
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-header-btn,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-hide-btn,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .source-toggle,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .send-targets button {
    color: #b8bbc4;
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .source-toggle.active,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .send-targets button.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-source-filters,
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .send-targets {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(8, 8, 14, 0.48);
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-input-wrap {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(8, 8, 14, 0.62);
    color: #f5f5f7;
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) #chat-input-render {
    color: #f5f5f7;
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg:hover {
    background: rgba(255, 255, 255, 0.07);
  }
  html[data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg-reply-btn {
    background: rgba(255, 255, 255, 0.11);
    color: #e7e7eb;
  }
}

@media (max-width: 800px), (pointer: coarse) {
  .theme-setting { grid-template-columns: 78px minmax(0, 1fr); }
  .chat-settings .theme-picker button { min-height: 44px; }
}

/* The chosen community colour drives a complete palette, not only highlights. */
html, body { background: var(--bg); color: var(--text); }
.chat {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 42%, var(--surface-0) 100%);
}
.chat-tabs,
.chat-online-stats { border-color: var(--border); background: color-mix(in srgb, var(--surface-1) 94%, transparent); }
.chat-source-filters,
.send-targets { border-color: var(--border); background: var(--surface-0); }
.source-toggle + .source-toggle,
.send-targets button + button { border-left-color: var(--border); }
.source-toggle.active,
.send-targets button.active { background: var(--surface-3); box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-composer { border-color: var(--border); background: color-mix(in srgb, var(--surface-0) 96%, transparent); }
.chat-input-wrap { border-color: var(--border); background: var(--surface-1); }
.chat-input-wrap:focus-within { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-settings,
.chat-auth-pop,
.quality-menu,
.mention-suggest,
.chat-emote-picker,
.user-action-menu,
.user-history-card,
.thread-panel {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  color: var(--text);
}
.settings-head { border-color: var(--border); background: color-mix(in srgb, var(--surface-2) 94%, transparent); }
.chat-settings > button,
.chat-settings button,
.chat-popout,
.chat-auth-pop button,
.quality-menu button,
.user-action-menu button,
.user-history-actions button,
.user-history-more,
.chat-search-form button,
#chat-search-close { border-color: var(--border); background: var(--surface-3); color: var(--text); }
.chat-settings > button:hover,
.user-action-menu button:hover,
.user-action-menu button:focus-visible { background: var(--surface-4); }
.chat-blocks,
.chat-search-form input { border-color: var(--border); background: var(--surface-1); color: var(--text); }
.user-history-head,
.chat-search-form,
.thread-head,
.user-history-message { border-color: var(--border); }
.pinned { background: linear-gradient(180deg, var(--accent-soft), transparent), var(--surface-1); border-color: var(--accent-medium); }
.pinned-title { background: var(--accent-soft); color: var(--accent); text-shadow: 0 0 12px var(--pz-glow); }
.mention-item:hover,
.mention-item.active,
.msg.reply-to-me,
.msg.mention-to-me { background: linear-gradient(90deg, var(--accent-medium), var(--accent-soft)); }
#chat-send-button,
.unmute,
.offline-wake { background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark)); color: var(--accent-contrast); }
.seek-fill { background: var(--accent); box-shadow: 0 0 9px var(--pz-glow); }
.theme-picker button.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-medium); }

/* Every emote source, including the injected VK Users catalogue, follows the palette. */
.chat-emote-tabs {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
}
.chat-emote-tabs button {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.chat-emote-tabs button:hover { background: var(--surface-3); color: var(--text); }
.chat-emote-tabs button.active {
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: inset 0 -2px var(--accent);
}
.pzdc-vk-controls { color: var(--text) !important; }
.pzdc-vk-stream-select {
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  color-scheme: normal !important;
}
.pzdc-vk-stream-select:hover,
.pzdc-vk-stream-select:focus { border-color: var(--accent-medium) !important; background: var(--surface-3) !important; }
.pzdc-vk-stream-select option { background: var(--surface-2) !important; color: var(--text) !important; }
#chat-emote-list[data-pzdc-vk-list="1"] { background: transparent !important; }
#chat-send-button {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  color: var(--accent-contrast);
  box-shadow: 0 2px 10px var(--pz-glow);
}
#chat-send-button:hover { box-shadow: 0 3px 14px var(--pz-glow); }

html[data-theme="light"] .chat {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--panel), var(--surface-0));
}
html[data-theme="light"] .chat-tabs,
html[data-theme="light"] .chat-online-stats,
html[data-theme="light"] .chat-composer { border-color: var(--border); background: color-mix(in srgb, var(--panel) 95%, transparent); }
html[data-theme="light"] .chat-source-filters,
html[data-theme="light"] .send-targets,
html[data-theme="light"] .chat-input-wrap,
html[data-theme="light"] .chat-blocks { border-color: var(--border); background: var(--surface-0); }
html[data-theme="light"] .source-toggle.active,
html[data-theme="light"] .send-targets button.active { background: var(--panel); color: var(--text); }
html[data-theme="light"] .chat-settings,
html[data-theme="light"] .chat-auth-pop,
html[data-theme="light"] .quality-menu,
html[data-theme="light"] .mention-suggest,
html[data-theme="light"] .chat-emote-picker,
html[data-theme="light"] .user-action-menu,
html[data-theme="light"] .user-history-card,
html[data-theme="light"] .thread-panel { border-color: var(--border); background: var(--panel); color: var(--text); }
html[data-theme="light"] .settings-head { border-color: var(--border); background: color-mix(in srgb, var(--panel) 94%, transparent); }
html[data-theme="light"] .chat-settings button,
html[data-theme="light"] .chat-popout,
html[data-theme="light"] .chat-auth-pop button,
html[data-theme="light"] .quality-menu button,
html[data-theme="light"] .user-action-menu button,
html[data-theme="light"] .user-history-actions button,
html[data-theme="light"] .user-history-more,
html[data-theme="light"] .chat-search-form button,
html[data-theme="light"] #chat-search-close { border-color: var(--border); background: var(--surface-2); color: var(--text); }
html[data-theme="light"] .pinned { border-color: var(--accent-medium); background: linear-gradient(180deg, var(--accent-soft), transparent), var(--panel); }
html[data-theme="light"] .pinned-title { background: var(--accent-soft); color: var(--accent-dark); }

/* Numbered ivory swatches stay readable without opening their tooltip. */
.accent-swatch[data-scheme="pantone"] {
  display: grid;
  place-items: center;
  color: #2f2b23;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.35px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.accent-swatch[data-scheme="pantone"] span { pointer-events: none; }

/* Pantone themes are deliberately matte and warm throughout the shell. */
html[data-color-scheme="pantone"] .chat-settings,
html[data-color-scheme="pantone"] .chat-auth-pop,
html[data-color-scheme="pantone"] .quality-menu,
html[data-color-scheme="pantone"] .mention-suggest,
html[data-color-scheme="pantone"] .chat-emote-picker,
html[data-color-scheme="pantone"] .user-action-menu,
html[data-color-scheme="pantone"] .user-history-card,
html[data-color-scheme="pantone"] .thread-panel { box-shadow: 0 14px 36px rgba(68, 59, 42, 0.13); }

/* The selected Pantone colour belongs to the chat itself, not only its settings dialog. */
html[data-color-scheme="pantone"] .chat {
  background: linear-gradient(180deg, var(--surface-4) 0%, var(--surface-3) 44%, var(--surface-2) 100%);
}
html[data-color-scheme="pantone"] #messages {
  background: color-mix(in srgb, var(--surface-3) 72%, transparent);
}
html[data-color-scheme="pantone"] .chat-tabs,
html[data-color-scheme="pantone"] .chat-online-stats,
html[data-color-scheme="pantone"] .chat-composer {
  background: var(--surface-2);
}
html[data-color-scheme="pantone"] .chat-source-filters,
html[data-color-scheme="pantone"] .send-targets,
html[data-color-scheme="pantone"] .chat-input-wrap {
  background: var(--surface-1);
}

/* Preserve the original letter shapes; a small shadow is enough for bright nick colours. */
.msg .who,
.msg .reply-name {
  -webkit-text-stroke: 0;
  paint-order: normal;
  background: none;
  box-shadow: none;
  text-shadow: none;
}
html[data-theme="light"] .msg .who { color: var(--nick-light-color) !important; }

/* @mentions need their own contrast on pale themes instead of the dark-theme yellow. */
html[data-theme="light"] .msg .mention {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--accent-medium);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
  font-weight: 750;
}
html[data-color-scheme="pantone"] .msg .mention {
  background: var(--surface-4);
  color: #3d3729;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Pinned content uses two colours from the active palette, not a fixed yellow card. */
.pinned {
  border-color: var(--accent-medium);
  background:
    linear-gradient(135deg, var(--accent-medium) 0%, transparent 48%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.pinned-title {
  border-bottom-color: var(--accent-medium);
  background: linear-gradient(90deg, var(--accent-medium), var(--accent-soft));
  color: var(--accent);
  text-shadow: none;
}
html[data-color-scheme="pantone"] .pinned {
  border-bottom: 2px solid var(--accent);
  background:
    linear-gradient(135deg, var(--surface-4) 0%, transparent 56%),
    linear-gradient(180deg, var(--surface-2), var(--panel));
}
html[data-color-scheme="pantone"] .pinned-title {
  background: linear-gradient(90deg, var(--surface-4), var(--surface-2));
  color: var(--accent);
}

@media (min-width: 801px) {
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat {
    border-color: var(--border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface-3) 12%, transparent) 0%, var(--surface-3) 24px, var(--surface-2) 100%);
    opacity: 1;
  }
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-tabs,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-composer,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-source-filters,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .send-targets,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-input-wrap {
    border-color: var(--border);
    background: var(--surface-1);
  }
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .text,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg.system,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg-time,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .reply-label,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .reply-text,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-header-btn,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-hide-btn,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .source-toggle,
  html[data-color-scheme="pantone"][data-theme="light"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .send-targets button {
    color: var(--text);
  }
}

.who.aliased { text-decoration: underline dotted currentColor; text-underline-offset: 3px; }
.mention-real { margin-left: 7px; color: var(--muted); font-size: 0.82em; font-weight: 400; }
.user-action-menu { width: min(230px, calc(100vw - 16px)); }

.custom-palette {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  overflow: hidden;
}
.custom-palette.active { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }
.custom-palette summary {
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}
.custom-palette-fields { display: grid; gap: 7px; padding: 2px 12px 10px; }
.chat-settings .custom-palette-fields label {
  display: grid;
  grid-template-columns: 1fr 88px 44px;
  align-items: center;
  gap: 10px;
}
.chat-settings .custom-palette-fields .custom-color-hex {
  width: 88px;
  height: 32px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-0);
  color: var(--text);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
}
.chat-settings .custom-palette-fields .custom-color-hex:focus { border-color: var(--accent); outline: 0; }
.chat-settings .custom-palette-fields .custom-color-hex.invalid { border-color: #ff6262; }
.chat-settings .custom-palette-fields input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  cursor: pointer;
}
.chat-settings #custom-palette-reset {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 8px 10px;
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.custom-palette-keybox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 8px;
  padding: 0 12px 11px;
}
.custom-palette-keybox > label { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 700; }
.chat-settings .custom-palette-keybox > input {
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-0);
  color: var(--text);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.chat-settings .custom-palette-keybox > input:focus { border-color: var(--accent); outline: 0; }
.chat-settings .custom-palette-keybox > input.invalid { border-color: #e34242; box-shadow: 0 0 0 2px rgba(227,66,66,.12); }
.custom-palette-key-actions { display: flex; gap: 5px; }
.chat-settings .custom-palette-key-actions button { padding: 6px 8px; font-size: 11px; }
.custom-palette-keybox small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }

/* The yellow smile disappears on ivory; give it a proper high-contrast button. */
html[data-theme="light"] #chat-emote-toggle {
  top: 50%;
  right: 5px;
  bottom: auto;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: #4b412d;
  box-shadow: none;
  font-weight: 900;
}
html[data-theme="light"] #chat-emote-toggle svg,
html[data-theme="aero"] #chat-emote-toggle svg { display: block; width: 17px; height: 17px; }
html[data-theme="light"] #chat-emote-toggle:hover,
html[data-theme="light"] #chat-emote-toggle.active { background: var(--accent-medium); color: var(--accent-dark); }
html[data-theme="aero"] #chat-emote-toggle { border: 0; background: rgba(255,255,255,.42); color: #07536a; box-shadow: none; }

/* lev: the neutral pre-palette dark design, including its amber pinned block. */
html[data-color-scheme="legacy"] .pinned {
  background: linear-gradient(180deg, rgba(255, 213, 74, 0.05), rgba(255, 213, 74, 0.02)), #14141a;
  border-color: rgba(255, 213, 74, 0.18);
}
html[data-color-scheme="legacy"] .pinned-title {
  background: rgba(255, 213, 74, 0.07);
  color: #ffd54a;
  text-shadow: 0 0 12px rgba(255, 213, 74, 0.25);
}

/* Matte black deliberately removes coloured wash, glossy gradients and bloom. */
html[data-color-scheme="matte"] .chat,
html[data-color-scheme="matte"] .chat-settings,
html[data-color-scheme="matte"] .chat-auth-pop,
html[data-color-scheme="matte"] .quality-menu,
html[data-color-scheme="matte"] .mention-suggest,
html[data-color-scheme="matte"] .chat-emote-picker,
html[data-color-scheme="matte"] .user-action-menu,
html[data-color-scheme="matte"] .user-history-card,
html[data-color-scheme="matte"] .thread-panel { background: var(--surface-1); }
html[data-color-scheme="matte"] .chat-tabs,
html[data-color-scheme="matte"] .chat-online-stats,
html[data-color-scheme="matte"] .chat-composer,
html[data-color-scheme="matte"] .settings-head { background: var(--surface-0); }
html[data-color-scheme="matte"] .pinned,
html[data-color-scheme="matte"] .pinned-title { background: var(--surface-1); border-color: var(--border); text-shadow: none; }
html[data-color-scheme="matte"] .pinned-title { color: var(--text); }
html[data-color-scheme="matte"] #chat-send-button,
html[data-color-scheme="matte"] .unmute,
html[data-color-scheme="matte"] .offline-wake { background: #dedede; box-shadow: none; color: #050505; }
html[data-color-scheme="matte"] .seek-fill { box-shadow: none; }
html[data-color-scheme="matte"] .msg.reply-to-me,
html[data-color-scheme="matte"] .msg.mention-to-me,
html[data-color-scheme="matte"] .mention-item:hover,
html[data-color-scheme="matte"] .mention-item.active { background: rgba(255, 255, 255, 0.075); }

.shazam-btn { gap: 5px; min-width: 34px; white-space: nowrap; font-size: 11px; font-weight: 750; }
.shazam-btn:disabled { cursor: wait; opacity: 0.72; }
.shazam-mark {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #168cff;
  color: #fff;
  font: 800 12px/1 system-ui, sans-serif;
}
.shazam-btn.listening .shazam-mark { animation: shazam-pulse 0.9s ease-in-out infinite alternate; }
@keyframes shazam-pulse { to { transform: scale(1.12); box-shadow: 0 0 12px #168cff; } }
.shazam-result {
  position: absolute;
  right: 14px;
  bottom: 70px;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100% - 28px));
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;
  background: rgba(8, 10, 16, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48);
  color: #fff;
}
.shazam-result.hidden { display: none; }
.shazam-cover { width: 52px; height: 52px; border-radius: 7px; object-fit: cover; }
.shazam-cover.hidden { display: none; }
.shazam-result-text { display: grid; min-width: 0; gap: 2px; }
.shazam-result-text small { color: #54aaff; font-size: 9px; font-weight: 850; letter-spacing: 1px; }
.shazam-result-text a { overflow: hidden; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.shazam-result-text a:not(.no-link):hover { text-decoration: underline; }
.shazam-result-text a.no-link { pointer-events: none; }
.shazam-result-text span { overflow: hidden; color: #b8bdc8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shazam-result > button { align-self: start; border: 0; background: none; color: #aeb3bd; cursor: pointer; font-size: 18px; }
@media (max-width: 700px) {
  .shazam-label { display: none; }
  .shazam-btn { padding-inline: 3px; }
  .shazam-result { right: 8px; bottom: 64px; width: calc(100% - 16px); }
}

/* One continuous emote catalogue; category buttons above are optional jump links. */
.chat-emote-picker { max-height: min(360px, 52vh); }
.chat-emote-list {
  display: block;
  max-height: min(320px, 46vh);
  padding: 0 6px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.emote-browser-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(112px, .72fr);
  gap: 6px;
  margin: 0 -6px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  backdrop-filter: blur(12px);
}
.emote-search-wrap { position: relative; min-width: 0; }
.emote-search-wrap > span {
  position: absolute;
  left: 9px;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}
.emote-search-wrap input,
.emote-browser-toolbar select {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
.emote-search-wrap input { padding: 0 30px 0 27px; }
.emote-browser-toolbar select { min-width: 0; padding: 0 6px; cursor: pointer; font-size: 11px; }
.emote-search-wrap input:focus,
.emote-browser-toolbar select:focus { border-color: var(--accent); }
.emote-search-wrap button[data-emote-search-clear] {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  font-size: 18px;
}
.emote-search-wrap button.hidden { display: none; }
.vk-emote-channel-form {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.vk-emote-channel-form input {
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 0 9px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
.vk-emote-channel-form input:focus { border-color: var(--accent); }
.vk-emote-channel-form button {
  width: auto;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  background: var(--accent-medium);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.vk-emote-channel-form button:disabled { opacity: .55; cursor: wait; }
.vk-emote-channel-status {
  grid-column: 1 / -1;
  min-height: 0;
  color: var(--muted);
  font-size: 11px;
}
.vk-emote-channel-status:empty { display: none; }
.vk-emote-channel-status.error { color: #ff7d7d; }
.emote-section { display: block; }
.emote-section-title {
  position: sticky;
  top: 48px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.emote-section-title small { color: var(--muted); font-weight: 600; }
.emote-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 3px;
  padding: 5px 0 9px;
}
.emote-section-grid .chat-emote-empty { min-height: 38px; }
.emote-search-empty { padding: 24px 8px; }
.emote-suggest-source {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
}
@media (pointer: coarse) {
  .emote-section-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
}

/* Frutiger Aero / Y2K: bright sky, water, glossy plastic and readable glass. */
html[data-theme="aero"] { color-scheme: light; }
html[data-theme="aero"],
html[data-theme="aero"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.95) 0 7%, transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.72) 0 5%, transparent 16%),
    linear-gradient(180deg, #69d5f4 0%, #c9f5ff 58%, #7ed971 76%, #41ad55 100%);
  background-attachment: fixed;
  color: var(--text);
}
html[data-theme="aero"] .stage,
html[data-theme="aero"] .player { background: #000; }

html[data-theme="aero"] .chat {
  border-color: rgba(42, 137, 163, 0.52);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.82) 0%, rgba(226, 250, 255, 0.72) 48%, rgba(151, 225, 238, 0.66) 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.78), -10px 0 30px rgba(18, 126, 158, 0.16);
}
html[data-theme="aero"] #messages {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(223, 248, 252, 0.54));
}
html[data-theme="aero"] .chat-tabs,
html[data-theme="aero"] .chat-online-stats,
html[data-theme="aero"] .chat-composer,
html[data-theme="aero"] .settings-head {
  border-color: rgba(50, 143, 168, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(215, 246, 251, 0.72) 48%, rgba(142, 214, 230, 0.66) 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(32, 128, 153, 0.18);
  backdrop-filter: blur(14px) saturate(1.35);
}
html[data-theme="aero"] .chat-source-filters,
html[data-theme="aero"] .send-targets,
html[data-theme="aero"] .chat-input-wrap,
html[data-theme="aero"] .chat-blocks {
  border-color: rgba(45, 139, 164, 0.44);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(216, 247, 252, 0.75));
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(27, 116, 142, 0.12);
}
html[data-theme="aero"] .source-toggle.active,
html[data-theme="aero"] .send-targets button.active,
html[data-theme="aero"] .theme-picker button.active {
  background: linear-gradient(180deg, #fff 0%, #d8f8ff 48%, #91deec 100%);
  color: #0e5268;
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(23, 124, 151, 0.24);
}
html[data-theme="aero"] .chat-settings,
html[data-theme="aero"] .chat-auth-pop,
html[data-theme="aero"] .quality-menu,
html[data-theme="aero"] .mention-suggest,
html[data-theme="aero"] .chat-emote-picker,
html[data-theme="aero"] .user-action-menu,
html[data-theme="aero"] .user-history-card,
html[data-theme="aero"] .thread-panel {
  border-color: rgba(45, 139, 164, 0.48);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.94), transparent 34%),
    linear-gradient(145deg, rgba(239, 253, 255, 0.94), rgba(176, 231, 241, 0.88));
  color: var(--text);
  box-shadow: inset 0 1px 0 #fff, 0 16px 42px rgba(16, 101, 128, 0.25);
  backdrop-filter: blur(18px) saturate(1.4);
}
html[data-theme="aero"] .chat-settings > button,
html[data-theme="aero"] .chat-settings button,
html[data-theme="aero"] .chat-popout,
html[data-theme="aero"] .chat-auth-pop button,
html[data-theme="aero"] .quality-menu button,
html[data-theme="aero"] .user-action-menu button,
html[data-theme="aero"] .user-history-actions button,
html[data-theme="aero"] .user-history-more,
html[data-theme="aero"] .chat-search-form button,
html[data-theme="aero"] #chat-search-close {
  border-color: rgba(41, 132, 157, 0.44);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(190,235,244,.82));
  color: #17485a;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(25, 112, 137, 0.15);
}
html[data-theme="aero"] .chat-settings > button:hover,
html[data-theme="aero"] .user-action-menu button:hover,
html[data-theme="aero"] .quality-menu button:hover {
  background: linear-gradient(180deg, #fff, #9fe8f3);
}
html[data-theme="aero"] .msg .text,
html[data-theme="aero"] .thread-body .thread-msg { color: #173744; }
html[data-theme="aero"] .msg.system,
html[data-theme="aero"] .msg-time,
html[data-theme="aero"] .msg .reply-label,
html[data-theme="aero"] .msg .reply-text { color: #5a747c; }
html[data-theme="aero"] .msg:hover { background: rgba(255, 255, 255, 0.56); }
html[data-theme="aero"] .msg .who { color: var(--nick-light-color) !important; }
html[data-theme="aero"] .msg .mention {
  padding: 0 4px;
  border: 1px solid rgba(18, 116, 143, 0.32);
  border-radius: 7px;
  background: linear-gradient(180deg, #f9ffff, #aee9f2);
  color: #07536a;
  box-shadow: inset 0 1px 0 #fff;
  font-weight: 800;
}
html[data-theme="aero"] .pinned {
  border-color: rgba(37, 157, 89, 0.48);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.86), transparent 22%),
    linear-gradient(135deg, rgba(205, 255, 166, 0.92), rgba(95, 220, 190, 0.76) 52%, rgba(117, 205, 245, 0.74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(30, 139, 103, 0.16);
}
html[data-theme="aero"] .pinned-title {
  border-color: rgba(27, 135, 88, 0.34);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(103,221,168,.36));
  color: #12613e;
}
html[data-theme="aero"] .pinned-title button,
html[data-theme="aero"] .pinned-links a,
html[data-theme="aero"] .pinned-collapsed-links a {
  border-color: rgba(22, 117, 103, 0.34);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(176,241,218,.58));
  color: #075b73;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="aero"] .wallets strong { color: #23643f; }
html[data-theme="aero"] .wallets code { color: #285864; }
html[data-theme="aero"] #chat-send-button,
html[data-theme="aero"] .unmute,
html[data-theme="aero"] .offline-wake {
  border: 1px solid color-mix(in srgb, var(--accent) 62%, #0b7188);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0 8%, transparent 44%),
    linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 4px 12px var(--pz-glow);
}
html[data-theme="aero"] #messages::-webkit-scrollbar-thumb,
html[data-theme="aero"] .pinned-scroll::-webkit-scrollbar-thumb {
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(180deg, #77dcea, #299bb8);
}

@media (min-width: 801px) {
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat {
    border-color: rgba(42, 137, 163, 0.52);
    background: linear-gradient(90deg, rgba(199, 244, 251, 0.18), rgba(232, 252, 255, 0.94) 26px, rgba(194, 238, 246, 0.94));
    opacity: 1;
  }
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg .text,
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg.system,
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .msg-time,
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat-header-btn,
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .source-toggle { color: var(--text); }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="aero"] .chat-settings,
  html[data-theme="aero"] .chat-auth-pop,
  html[data-theme="aero"] .quality-menu { animation: aero-pop 180ms cubic-bezier(.2,.8,.2,1); }
  @keyframes aero-pop { from { opacity: 0; transform: translateY(5px) scale(.985); } }
}

/* Aero transparency pass: scenery remains visible through layered liquid glass. */
html[data-theme="aero"],
html[data-theme="aero"] body {
  background:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,.92) 0 2.4%, rgba(255,255,255,.28) 2.7% 4.4%, transparent 4.8%),
    radial-gradient(circle at 76% 20%, rgba(255,255,255,.72) 0 1.8%, rgba(165,241,255,.30) 2.1% 4.2%, transparent 4.7%),
    radial-gradient(circle at 93% 48%, rgba(255,255,255,.58) 0 3%, rgba(99,216,244,.22) 3.3% 5.4%, transparent 5.9%),
    radial-gradient(ellipse at 50% 102%, #2f9d42 0 23%, #72d96a 24% 36%, transparent 37%),
    linear-gradient(180deg, #37bde9 0%, #9ceaff 46%, #eaffff 65%, #6ed267 66%, #2b9d48 100%);
  background-attachment: fixed;
}
html[data-theme="aero"] .chat {
  border: 1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.58) 0 6%, transparent 21%),
    linear-gradient(118deg, rgba(255,255,255,.24), rgba(214,249,255,.11) 52%, rgba(91,206,229,.17));
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.95),
    inset -1px 0 0 rgba(39,139,166,.20),
    -14px 0 40px rgba(14,107,139,.20);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="aero"] #messages {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(224,250,253,.14));
}
html[data-theme="aero"] .chat-tabs,
html[data-theme="aero"] .chat-online-stats,
html[data-theme="aero"] .chat-composer,
html[data-theme="aero"] .settings-head {
  border-color: rgba(255,255,255,.68);
  background:
    linear-gradient(180deg, rgba(255,255,255,.47) 0%, rgba(255,255,255,.20) 46%, rgba(101,206,226,.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(28,124,151,.20),
    0 5px 18px rgba(28,126,154,.10);
  backdrop-filter: blur(14px) saturate(1.55);
}
html[data-theme="aero"] .chat-source-filters,
html[data-theme="aero"] .send-targets,
html[data-theme="aero"] .chat-input-wrap,
html[data-theme="aero"] .chat-blocks {
  border-color: rgba(255,255,255,.76);
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(201,243,250,.17));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(31,135,160,.16),
    0 4px 14px rgba(25,114,141,.10);
  backdrop-filter: blur(11px) saturate(1.48);
}
html[data-theme="aero"] .chat-settings,
html[data-theme="aero"] .chat-auth-pop,
html[data-theme="aero"] .quality-menu,
html[data-theme="aero"] .mention-suggest,
html[data-theme="aero"] .chat-emote-picker,
html[data-theme="aero"] .user-action-menu,
html[data-theme="aero"] .user-history-card,
html[data-theme="aero"] .thread-panel {
  border: 1px solid rgba(255,255,255,.84);
  background:
    radial-gradient(circle at 13% 2%, rgba(255,255,255,.94) 0 4%, transparent 29%),
    radial-gradient(circle at 92% 91%, rgba(64,204,225,.25), transparent 32%),
    linear-gradient(145deg, rgba(245,254,255,.58), rgba(173,230,241,.30));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 1px 0 0 rgba(255,255,255,.70),
    inset -1px -1px 0 rgba(30,126,153,.18),
    0 22px 54px rgba(8,91,121,.28);
  backdrop-filter: blur(16px) saturate(1.6) contrast(1.02);
}
html[data-theme="aero"] .chat-settings::before,
html[data-theme="aero"] .chat-auth-pop::before,
html[data-theme="aero"] .quality-menu::before {
  position: absolute;
  inset: 5px 10% auto 10%;
  height: 1px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 9px rgba(255,255,255,.90);
  content: "";
  pointer-events: none;
}
html[data-theme="aero"] .chat-settings > button,
html[data-theme="aero"] .chat-settings button,
html[data-theme="aero"] .chat-popout,
html[data-theme="aero"] .chat-auth-pop button,
html[data-theme="aero"] .quality-menu button,
html[data-theme="aero"] .user-action-menu button,
html[data-theme="aero"] .user-history-actions button,
html[data-theme="aero"] .user-history-more,
html[data-theme="aero"] .chat-search-form button,
html[data-theme="aero"] #chat-search-close {
  border-color: rgba(255,255,255,.80);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.42) 48%, rgba(111,207,225,.36) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(20,118,146,.20),
    0 4px 12px rgba(16,107,136,.14);
  backdrop-filter: blur(12px) saturate(1.5);
}
html[data-theme="aero"] .msg {
  border-radius: 8px;
  transition: background .15s ease, box-shadow .15s ease;
}
html[data-theme="aero"] .msg:hover,
html[data-theme="aero"] .msg.reply-to-me,
html[data-theme="aero"] .msg.mention-to-me {
  background: rgba(255,255,255,.47);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="aero"] .pinned {
  border: 1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 88% 3%, rgba(255,255,255,.70) 0 5%, transparent 25%),
    linear-gradient(135deg, rgba(212,255,177,.58), rgba(69,211,174,.38) 52%, rgba(80,191,236,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(22,123,97,.18),
    0 8px 24px rgba(22,126,106,.15);
  backdrop-filter: blur(22px) saturate(1.65);
}
html[data-theme="aero"] .pinned-title {
  background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(73,202,158,.20));
}
@media (min-width: 801px) {
  html[data-theme="aero"]:not(.chat-only) body.cinema-mode .layout:not(.chat-hidden) .chat {
    background:
      linear-gradient(90deg, rgba(205,246,252,.04), rgba(238,253,255,.36) 32px, rgba(155,224,237,.30));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}