
body.ui-skin #chat {
  --fg: var(--ui-text);
  --dim: var(--ui-dim);
  --surface: var(--ui-inset);
  --raised: var(--ui-raised);
  --hairline: var(--ui-line);
  --text: var(--ui-text);
  --text-dim: var(--ui-muted);
  --text-muted: var(--ui-dim);
  --border: var(--ui-line);
  --input-bg: var(--ui-inset);
  --input-border: var(--ui-line);
  color: var(--ui-text);
  background: linear-gradient(180deg, #241c16c9, #15110ff5 180px);
  border-color: var(--ui-line);
}

body.ui-skin #chat-header {
  background: linear-gradient(100deg, #50301966, #251b14e6);
  border-bottom-color: var(--ui-edge);
  box-shadow: 0 2px 12px #0002;
}


body.ui-skin #chat-resize,
body.ui-skin #split-divider {
  background: var(--ui-line);
}

body.ui-skin #chat-resize:hover,
body.ui-skin #split-divider:hover {
  background: var(--ui-orange);
}

body.ui-skin #messages,
body.ui-skin #twitch-messages,
body.ui-skin #local-messages {
  scrollbar-color: #775335 transparent;
}

body.ui-skin .msg.alt {
  background: #f7931a08;
}

body.ui-skin #chat-input {
  padding: 5.5px 10px;
  background: linear-gradient(180deg, #2e22174d, #211810bf);
  border-top-color: var(--ui-line);
  box-shadow: 0 -5px 20px #0001;
}

body.ui-skin #msg-input {
  border-color: #e3b47d33;
  border-radius: 11px;
  background: #100d0ba6;
  box-shadow: inset 0 2px 6px #0003, 0 1px #ffe4bd08;
  transition: border-color .18s, box-shadow .18s;
}

body.ui-skin #msg-input:focus {
  border-color: #f7931a99;
  box-shadow: 0 0 0 3px #f7931a0d, inset 0 2px 6px #0002;
}

body.ui-skin #chat-pinned {
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-left: 3px solid var(--ui-orange);
  border-radius: 10px;
  background: linear-gradient(110deg, #f7931a12, #211a1499);
}

body.ui-skin #pending-reply {
  border-left-color: var(--ui-button-edge);
  box-shadow: var(--ui-button-glow);
  border-radius: 8px;
  background: #f7931a0d;
}

body.ui-skin :is(#viewer-list-popup, #stage-dropdown, #stage-invite-popup, #twitch-popup, #mention-popup, #ban-popup, .chat-context-popover, .info-tooltip) {
  background: var(--ui-glass-quiet);
  border: 1px solid var(--ui-edge);
  box-shadow: var(--ui-pop-shadow);
  backdrop-filter: var(--ui-blur);
  -webkit-backdrop-filter: var(--ui-blur);
  color: var(--ui-text);
}

body.ui-skin #viewer-list-popup {
  padding: 15px;
  border-radius: 16px;
  background: radial-gradient(ellipse at top left, #e8861914, transparent 65%), #1d1814eb;
}

body.ui-skin :is(.viewer-category-title, .emoji-category-title, #stage-dropdown .stage-title) {
  color: var(--ui-bright);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
}

body.ui-skin .viewer-name {
  padding: 6px 7px;
  border-radius: 7px;
  color: var(--ui-text);
}

body.ui-skin .viewer-name:hover {
  background: #f7931a0e;
}

body.ui-skin #stage-dropdown {
  min-width: 210px;
  padding: 15px;
  border-radius: 16px;
  border-top: 2px solid var(--ui-orange);
}

body.ui-skin #stage-invite-popup {
  border-radius: 13px;
  background: linear-gradient(125deg, #6a3a1acf, #241912f0);
}

body.ui-skin #twitch-popup {
  background: radial-gradient(ellipse at top right, #9147ff1c, transparent 70%), #211a18f0;
  border-color: #c09bdc55;
}

body.ui-skin #mention-popup {
  border-radius: 10px;
  padding: 4px;
}

body.ui-skin .chat-context-popover {
  border-radius: 14px;
  background: linear-gradient(160deg, #37271df2, #18130ff2);
}

body.ui-skin :is(.chat-context-actions, .chat-context-reaction-picker, .chat-inline-actions) {
  border-color: var(--ui-line);
}

body.ui-skin .chat-inline-actions {
  border-color: var(--ui-button-edge);
  border-radius: 9px;
  background: #2a1e16ed;
  box-shadow: var(--ui-button-glow), 0 4px 16px #0004;
}

body.ui-skin #settings-overlay {
  background: #100b0780;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
