/* Colour mode is independent of artwork. Dark accents retain each theme's hue. */
:root[data-color-mode] {
  color: var(--theme-ink);
  background: var(--theme-back);
  --muted: var(--theme-quiet);
  --accent: var(--theme-accent);
  --line: var(--theme-line);
  --surface: var(--theme-surface);
}
:root[data-color-mode='light'] {
  color-scheme: light;
}
:root[data-color-mode='light'][data-theme='neon'] {
  --theme-ink: #322344;
  --theme-quiet: #6b587d;
  --theme-surface: #fdfaff;
  --theme-line: #cdbddb;
  --theme-soft: #eee5f7;
  --theme-button: #e9def4;
  --theme-hover: #dccced;
  --theme-accent: #784aa0;
  --theme-link: #6b3995;
  --theme-on-accent: #fff;
  --theme-selected: #e4d3f2;
  --theme-back: #f3edf8;
  --theme-rail: #f8f3fcf2;
  --theme-content: #faf5fee8;
  --theme-header: #fdf9fff5;
  --theme-input: #fefbfff2;
  --theme-pattern: #aa77d011;
  --theme-ok: #32685d;
  --theme-ok-bg: #e1efe9f2;
  --theme-ok-line: #accdc1;
  --theme-bad: #9b3854;
  --theme-bad-bg: #fae5ec;
  --theme-warn: #856029;
  --theme-card: #fffaffaa;
  --theme-focus: #8752b344;
  --theme-shade: #29103e66;
}
:root[data-color-mode='dark'] {
  color-scheme: dark;
  --theme-ink: #e7edf6;
  --theme-quiet: #acb9ca;
  --theme-surface: #1d2939;
  --theme-line: #425369;
  --theme-soft: #29394d;
  --theme-button: #2c3e55;
  --theme-hover: #3a506c;
  --theme-accent: #99bffa;
  --theme-link: #b4d2ff;
  --theme-on-accent: #12253f;
  --theme-selected: #334e70;
  --theme-back: #131e2d;
  --theme-rail: #172333f5;
  --theme-content: #152031ed;
  --theme-header: #1d2a3bf5;
  --theme-input: #192637f5;
  --theme-pattern: #8badcf08;
  --theme-ok: #a5d9b8;
  --theme-ok-bg: #233b32f2;
  --theme-ok-line: #416957;
  --theme-bad: #ffb7bd;
  --theme-bad-bg: #482a33;
  --theme-warn: #ecc18e;
  --theme-card: #273749bb;
  --theme-focus: #a0c6fc44;
  --theme-shade: #050d1acc;
}
:root[data-color-mode='dark'][data-theme='cafe'] {
  --theme-ink: #f1e9dc;
  --theme-quiet: #c4b7a4;
  --theme-surface: #2e2922;
  --theme-line: #615444;
  --theme-soft: #3c3429;
  --theme-button: #443b2e;
  --theme-hover: #574a39;
  --theme-accent: #bdc998;
  --theme-link: #d0dba9;
  --theme-on-accent: #293219;
  --theme-selected: #49503a;
  --theme-back: #201c17;
  --theme-rail: #27221bf5;
  --theme-content: #241e18ed;
  --theme-header: #30291ff5;
  --theme-input: #2b241cf5;
  --theme-pattern: #cab08908;
  --theme-card: #3c3328bb;
  --theme-focus: #baca9844;
}
:root[data-color-mode='dark'][data-theme='neon'] {
  --theme-ink: #f3eefa;
  --theme-quiet: #b8abc9;
  --theme-surface: #21182f;
  --theme-line: #59416d;
  --theme-soft: #30223f;
  --theme-button: #382549;
  --theme-hover: #4c3263;
  --theme-accent: #c193fc;
  --theme-link: #cbb0ff;
  --theme-on-accent: #251335;
  --theme-selected: #51346b;
  --theme-back: #191124;
  --theme-rail: #20162ef5;
  --theme-content: #191223ed;
  --theme-header: #241a32f5;
  --theme-input: #21182ff5;
  --theme-pattern: #ce8cff0b;
  --theme-card: #30213bbb;
  --theme-focus: #d69cff44;
}
:root[data-color-mode='dark'][data-theme='everyday'] {
  --theme-ink: #e7eee9;
  --theme-quiet: #b1c1b9;
  --theme-surface: #242f2b;
  --theme-line: #485e54;
  --theme-soft: #2e4037;
  --theme-button: #33493e;
  --theme-hover: #425d4e;
  --theme-accent: #a4cfb6;
  --theme-link: #b4dcc6;
  --theme-on-accent: #182e22;
  --theme-selected: #395546;
  --theme-back: #19221d;
  --theme-rail: #1e2a23f5;
  --theme-content: #1b261fed;
  --theme-header: #243129f5;
  --theme-input: #202d25f5;
  --theme-pattern: transparent;
  --theme-card: #2c3d32bb;
  --theme-focus: #a4cfb644;
}
:root[data-color-mode='dark'][data-theme='mall'] {
  --theme-ink: #f9eaf4;
  --theme-quiet: #cfb4c9;
  --theme-surface: #302033;
  --theme-line: #68435f;
  --theme-soft: #422c46;
  --theme-button: #4c3150;
  --theme-hover: #624063;
  --theme-accent: #f1a4d6;
  --theme-link: #ffc4e8;
  --theme-on-accent: #3c1631;
  --theme-selected: #613951;
  --theme-back: #241726;
  --theme-rail: #2c1b30f2;
  --theme-content: #281a2ce8;
  --theme-header: #342038f5;
  --theme-input: #302033f5;
  --theme-pattern: #ff9cdc08;
  --theme-ok: #8ddce6;
  --theme-ok-bg: #1d3b43f2;
  --theme-ok-line: #42727e;
  --theme-bad: #ffb6cb;
  --theme-bad-bg: #522739;
  --theme-warn: #f5cb98;
  --theme-card: #412b43bb;
  --theme-focus: #f3a0d444;
  --theme-shade: #100815cc;
}
:root[data-color-mode='dark'][data-theme='mall']:not([data-custom-theme]) .messageBody {
  --theme-ink: #fff;
  --theme-quiet: #fff;
}
:root[data-color-mode='dark'][data-theme='beach'] {
  --theme-ink: #f0f2e6;
  --theme-quiet: #b9c8bd;
  --theme-surface: #23332f;
  --theme-line: #47645b;
  --theme-soft: #30453c;
  --theme-button: #344d44;
  --theme-hover: #436153;
  --theme-accent: #a1d9c6;
  --theme-link: #bae9d8;
  --theme-on-accent: #193b30;
  --theme-selected: #3e6253;
  --theme-back: #18251f;
  --theme-rail: #1d2d25f5;
  --theme-content: #192920ed;
  --theme-header: #25362bf5;
  --theme-input: #213126f5;
  --theme-pattern: #e3d09b08;
  --theme-card: #2d4235bb;
  --theme-focus: #a1d9c644;
}
:root[data-color-mode='dark'][data-theme='pool'] {
  --theme-ink: #e8f8f5;
  --theme-quiet: #accdce;
  --theme-surface: #1c343a;
  --theme-line: #3e6970;
  --theme-soft: #28484f;
  --theme-button: #2d5158;
  --theme-hover: #3a6670;
  --theme-accent: #8ce0d8;
  --theme-link: #a9efea;
  --theme-on-accent: #133b40;
  --theme-selected: #32646c;
  --theme-back: #13272e;
  --theme-rail: #173038f5;
  --theme-content: #152b33ed;
  --theme-header: #1d3941f5;
  --theme-input: #1a333cf5;
  --theme-pattern: #8adce608;
  --theme-card: #284850bb;
  --theme-focus: #8ce0d844;
}
:root[data-color-mode='dark'][data-theme='trans'] {
  --theme-ink: #fff4fb;
  --theme-quiet: #d1bdd4;
  --theme-surface: #30263a;
  --theme-line: #62506f;
  --theme-soft: #42334f;
  --theme-button: #4a3958;
  --theme-hover: #604970;
  --theme-accent: #f3b4d8;
  --theme-link: #ffceea;
  --theme-on-accent: #40213b;
  --theme-selected: #604364;
  --theme-back: #221b2c;
  --theme-rail: #2a2034f5;
  --theme-content: #261c30ed;
  --theme-header: #342740f5;
  --theme-input: #302439f5;
  --theme-pattern: #8cd4ec0b;
  --theme-ok: #9dddf3;
  --theme-ok-bg: #263e51f2;
  --theme-ok-line: #477287;
  --theme-card: #41304ebb;
  --theme-focus: #f3b4d844;
}
#colorMode {
  width: 100%;
  margin-top: 6px;
}
.messageBody {
  white-space: normal;
  overflow-wrap: anywhere;
}
.messageBody > :first-child {
  margin-top: 0;
}
.messageBody > :last-child {
  margin-bottom: 0;
}
.messageBody p {
  margin: 0 0 0.65em;
  color: inherit;
  line-height: inherit;
}
.messageBody :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1.1em;
  line-height: 1.4;
  margin: 0.8em 0 0.4em;
}
.messageBody h1 {
  font-size: 1.35em;
}
.messageBody h2 {
  font-size: 1.2em;
}
.messageBody :is(ul, ol) {
  margin: 0.5em 0;
  padding-left: 1.6em;
}
.messageBody li + li {
  margin-top: 0.25em;
}
.messageBody blockquote {
  margin: 0.5em 0;
  padding: 0.1em 0.8em;
  border-left: 3px solid var(--theme-accent);
  color: var(--theme-quiet);
}
.messageBody code,
#markdownHelp pre {
  color: var(--theme-ink);
  background: var(--theme-soft);
  border-radius: 5px;
  font-size: 0.9em;
  padding: 0.12em 0.3em;
}
.messageBody pre {
  max-width: 100%;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-soft);
  white-space: pre;
}
.messageBody pre code {
  padding: 0;
}
.messageBody table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0.65em 0;
}
.messageBody :is(th, td) {
  border: 1px solid var(--theme-line);
  padding: 6px 9px;
}
.messageBody th {
  background: var(--theme-soft);
}
.messageBody .align-left {
  text-align: left;
}
.messageBody .align-center {
  text-align: center;
}
.messageBody .align-right {
  text-align: right;
}
.messageBody hr {
  border: 0;
  border-top: 1px solid var(--theme-line);
}
#markdownHelp pre {
  overflow-x: auto;
  padding: 14px;
  line-height: 1.8;
}
#formatHelp {
  padding: 2px 5px;
  min-height: 24px;
  font-size: 11px;
  margin-left: auto;
}
.message-sound-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  cursor: pointer;
}
.message-sound-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--theme-accent);
}
#unreadBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 4px 20px;
  color: var(--theme-ink);
  background: var(--theme-selected);
  border-bottom: 1px solid var(--theme-line);
}
#unreadBar button {
  padding: 5px 0;
  min-height: 32px;
  font-size: 12px;
}
#readSyncStatus {
  font-size: 12px;
  color: var(--theme-warn);
}
.new-messages {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--theme-link);
  font-size: 12px;
  font-weight: 700;
  margin: 18px 0 12px;
}
.new-messages::before,
.new-messages::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--theme-accent);
}
.msg.unread::before {
  content: '';
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--theme-accent);
}
.has-unread .channel-hint {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
  padding: 2px 6px;
  border-radius: 10px;
}
@media (max-width: 700px) {
  #unreadBar {
    padding: 3px 12px;
  }
}