/*
 * Nocturne Archive shared design foundation
 *
 * The live site uses installed CJK faces so text paints immediately without
 * adding a megabyte-scale font request to every first visit. Versioned legacy
 * faces remain declared only for old exported documents that name them.
 */
/* Kept as a versioned same-origin legacy face for old exported documents.
   The live --ds-font-sans stack below does not reference it, so browsers do
   not request this file for website body copy. */
@font-face {
  font-family: "Nocturne Sans Legacy";
  src: url("assets/fonts/nocturne-sans-sc.woff2?v=0da6acc7131dc7992b41") format("woff2-variations");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

/* The archive serif remains available to exported/legacy documents, but the
   live site deliberately uses installed CJK serif faces. A single visit used
   to download this 1.1 MB file even when only a few headings were visible. */
@font-face {
  font-family: "Nocturne Serif Legacy";
  src: url("assets/fonts/nocturne-serif-sc.woff2?v=f52e001370ed97a10b35") format("woff2-variations"),
       local("Noto Serif SC"), local("Noto Serif CJK SC"), local("Source Han Serif SC");
  font-display: optional;
  font-style: normal;
  font-weight: 100 900;
}

:root {
  --reading-scale: 1;
  --ds-bg: #0b1019;
  --ds-bg-deep: #070b12;
  --ds-surface: #121a26;
  --ds-surface-raised: #182230;
  --ds-paper: #e8dfcc;
  --ds-paper-strong: #fff8e8;
  --ds-muted: #9da9b5;
  --ds-gold: #d1ad6c;
  --ds-gold-soft: #f0d69f;
  --ds-cyan: #79b9bd;
  --ds-green: #69b49d;
  --ds-red: #c96f6c;
  --ds-line: rgba(226, 213, 185, .16);
  --ds-line-strong: rgba(226, 213, 185, .34);
  --ds-focus: #f0c77e;
  --ds-radius-sm: 3px;
  --ds-radius-md: 10px;
  --ds-shadow-sm: 0 10px 30px rgba(0, 0, 0, .24);
  --ds-shadow-lg: 0 30px 80px rgba(0, 0, 0, .36);
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-control-height: 2.75rem;
  /* Body copy deliberately prefers installed system faces. Keeping the large
     archive sans face out of the active stack saves roughly 1 MB per visit. */
  --ds-font-sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --ds-font-serif: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: var(--ds-font-sans);
  --serif: var(--ds-font-serif);
}

/* Shared widgets are mounted on pages that do not all load styles.css. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme="dawn"] {
  --ds-bg: #eee9df;
  --ds-bg-deep: #ddd5c7;
  --ds-surface: #faf6ed;
  --ds-surface-raised: #e5ddcf;
  --ds-paper: #222a30;
  --ds-paper-strong: #0d1418;
  --ds-muted: #536069;
  --ds-gold: #76521f;
  --ds-gold-soft: #5f3f12;
  --ds-cyan: #216a6e;
  --ds-green: #32715d;
  --ds-red: #823a34;
  --ds-line: rgba(21, 29, 34, .16);
  --ds-line-strong: rgba(21, 29, 34, .3);
  --ds-focus: #714a10;
  --ds-shadow-sm: 0 10px 30px rgba(55, 44, 30, .12);
  --ds-shadow-lg: 0 30px 80px rgba(55, 44, 30, .18);
  color-scheme: light;
}

[hidden] {
  display: none !important;
}

html {
  font-size: calc(16px * var(--reading-scale, 1));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.ds-page {
  min-width: 320px;
  color: var(--paper, var(--ds-paper));
  font-family: var(--ds-font-sans);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

body.ds-page :where(p, li, dd) {
  font-size: .875rem;
}

body.ds-page :where(label, label > span) {
  font-size: .875rem;
}

body.ds-page :where(small, .eyebrow, [class*="eyebrow"], [class*="kicker"], [class*="caption"]) {
  font-size: .75rem;
}

body.ds-page :where(button, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  min-height: var(--ds-control-height);
  font-family: var(--ds-font-sans);
  font-size: .875rem;
}

body.ds-page :where(button, [role="button"]) {
  min-width: var(--ds-control-height);
}

body.ds-page :where(.icon-button, .reading-size-toggle, .account-button, .audience-button, .profile-link, .dialog-close) {
  min-width: var(--ds-control-height);
  min-height: var(--ds-control-height);
}

body.ds-page :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border-radius: var(--ds-radius-sm);
}

body.ds-page :where(button, [role="button"], input, textarea, select, a) {
  outline: none;
}

body.ds-page :where(button, [role="button"], input, textarea, select, a):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 3px;
}

body.ds-page :where(button, input, textarea, select):disabled,
body.ds-page :where(button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.45);
  opacity: .52;
}

body.ds-page :where(button, [role="button"])[aria-busy="true"] {
  cursor: progress;
  opacity: .72;
}

body.ds-page :where(nav a, .button, [class*="-action"], [class*="text-button"]) {
  min-height: var(--ds-control-height);
  align-items: center;
}

body.ds-page :where([role="alert"], .error, [class*="-error"], [class*="error-"]) {
  color: #f0aaa5;
}

body.ds-page :where([aria-busy="true"], [class*="loading"]) {
  cursor: progress;
}

body.ds-page ::placeholder {
  color: color-mix(in srgb, var(--muted, var(--ds-muted)) 78%, transparent);
  opacity: 1;
}

body.ds-page dialog::backdrop {
  background: rgba(1, 5, 10, .78);
  backdrop-filter: blur(5px);
}

/* Shared persistent save failure banner, injected by resilience.js. */
.ng-persistence-alert {
  position: fixed;
  z-index: 20000;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: min(58rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(201, 111, 108, .72);
  border-left: 4px solid var(--ds-red);
  border-radius: var(--ds-radius-md);
  background: color-mix(in srgb, #21151a 94%, transparent);
  box-shadow: var(--ds-shadow-lg);
  color: #fff2e8;
  font: 600 .875rem/1.65 var(--ds-font-sans);
  backdrop-filter: blur(18px);
}

.ng-persistence-alert[hidden] { display: none !important; }
.ng-persistence-alert p { margin: 0; font-size: inherit !important; }
.ng-persistence-alert > div { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.ng-persistence-alert button {
  min-height: var(--ds-control-height);
  padding: .5rem .875rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font: 600 .8125rem/1.2 var(--ds-font-sans);
  cursor: pointer;
}
.ng-persistence-alert [data-ng-persistence-export] {
  border-color: var(--ds-gold);
  background: var(--ds-gold);
  color: #15181e;
}
.ng-persistence-alert button:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 3px; }

.ng-mirror-banner {
  position: relative;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .75rem;
  width: 100%;
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(209, 173, 108, .45);
  background: #171a22;
  color: #f0e5cf;
  font: 500 .8125rem/1.5 var(--ds-font-sans);
}

.ng-mirror-banner strong { color: var(--ds-gold); }
.ng-mirror-banner a { color: #fff7e8; text-decoration: underline; text-underline-offset: .2em; }
.ng-mirror-banner a:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 3px; }

/* COC7 keeps its field-green identity inside the shared night archive shell. */
body.coc7-page,
body.combat-page {
  --ds-focus: #8ed4bd;
  --green: #69b49d;
}

body.coc7-page :where(button, a):focus-visible,
body.combat-page :where(button, a):focus-visible {
  outline-color: var(--green);
}

/* Dense desk pages used sub-12px type historically; keep hierarchy, not strain. */
body:is(.run-page, .coc7-page, .combat-page) :where(p, li, dd, label, label > span, .prose, .empty-state) {
  font-size: .875rem !important;
}

body:is(.run-page, .coc7-page, .combat-page) :where(small, .eyebrow, [class*="eyebrow"], [class*="kicker"], [class*="caption"], [class*="meta"]) {
  font-size: .75rem !important;
}

body:is(.run-page, .coc7-page, .combat-page) :where(button, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  min-height: var(--ds-control-height) !important;
  font-size: .875rem !important;
}

/* The live room desks previously compressed labels and hit areas for a
   presentation-sized viewport. Keep them readable at laptop and phone scale. */
body:is(.gm-page, .player-page, .campaign-page) :where(p, li, dd, label, label > span, .prose, .empty-state) {
  font-size: .875rem !important;
}

body:is(.gm-page, .player-page, .campaign-page) :where(small, .eyebrow, [class*="eyebrow"], [class*="kicker"], [class*="caption"], [class*="meta"]) {
  font-size: .75rem !important;
}

body:is(.gm-page, .player-page, .campaign-page) :where(button, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  min-height: var(--ds-control-height) !important;
  font-size: .875rem !important;
}

body:is(.gm-page, .player-page, .campaign-page) :where(button, [role="button"]) {
  min-width: var(--ds-control-height) !important;
}

body:is(.gm-page, .player-page, .campaign-page) :where(nav a, [class*="-action"], [class*="-button"]) {
  min-height: var(--ds-control-height) !important;
}

body:is(.profile-page, .studio-page) :where(label, label > span, input, textarea, select, button) {
  font-size: .875rem;
}

/* Character allocation is a dense widget, but its controls still use the
   shared 44px target. Let content decide the column count instead of forcing
   seven cards into a container that cannot hold them. */
body.player-page .attribute-point-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        calc(var(--ds-control-height) + var(--ds-control-height) + var(--ds-control-height) + 30px)
      ),
      1fr
    )
  ) !important;
}

body.player-page .attribute-point-card {
  min-width: 0;
  overflow: hidden;
}

body.player-page .attribute-point-card > small {
  min-height: 3.2em;
  overflow-wrap: anywhere;
}

body.player-page .attribute-controls {
  grid-template-columns: repeat(3, minmax(var(--ds-control-height), 1fr)) !important;
  gap: .25rem;
  width: 100%;
  min-width: 0;
}

body.player-page .attribute-controls > button {
  width: 100% !important;
  min-width: var(--ds-control-height) !important;
  height: auto;
}

body.player-page .attribute-controls > input {
  width: 100%;
  min-width: var(--ds-control-height) !important;
  appearance: textfield;
}

body.player-page .attribute-controls > input::-webkit-inner-spin-button,
body.player-page .attribute-controls > input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.player-room-member-mark,
.gm-room-avatar,
.room-member-avatar { position: relative; overflow: hidden; }
.player-room-member-mark > span,
.gm-room-avatar > span { position: relative; z-index: 0; }
.player-room-member-mark > img,
.gm-room-avatar > img,
.room-member-avatar__image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-room-avatar::after,
.room-member-avatar__presence { z-index: 2; }

/* Shared QQ-style room chat. Page-specific legacy rules load before this file;
   these selectors intentionally provide one authoritative presentation for
   both the keeper and player workspaces. */
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-panel {
  display: grid;
  grid-template-rows: auto auto minmax(360px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong, var(--ds-line-strong));
  border-radius: 12px;
  background:
    radial-gradient(circle at 10% 0, rgba(101, 154, 164, .08), transparent 34%),
    linear-gradient(180deg, #0d151f, #080e16);
  box-shadow: 0 24px 75px rgba(0, 0, 0, .5);
}

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-panel--inline {
  width: 100%;
  height: clamp(660px, 76svh, 820px);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-header {
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 1rem;
  align-items: center;
  min-height: 78px;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line, var(--ds-line));
  background: rgba(16, 25, 37, .94);
}

.campaign-chat-heading { min-width: 0; }
.campaign-chat-heading > :where(small, strong, span) { display: block; }
.campaign-chat-heading > small { color: var(--gold, var(--ds-gold)); font-size: .6875rem !important; letter-spacing: .12em; }
.campaign-chat-heading > strong { margin-top: .1rem; color: var(--paper-strong, var(--ds-paper-strong)); font: 650 1.05rem/1.35 var(--serif, var(--ds-font-serif)); }
.campaign-chat-heading > span { margin-top: .15rem; overflow: hidden; color: var(--muted, var(--ds-muted)); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

.campaign-chat-header-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  justify-content: flex-end;
}

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-avatar-control {
  display: flex;
  min-width: 138px !important;
  min-height: var(--ds-control-height) !important;
  gap: .5rem;
  align-items: center;
  padding: .25rem .55rem .25rem .3rem;
  border: 1px solid rgba(212, 173, 107, .35);
  border-radius: 999px;
  background: rgba(212, 173, 107, .06);
  color: var(--paper, var(--ds-paper));
  text-align: left;
  cursor: pointer;
}

.campaign-chat-avatar-control > span:last-child { min-width: 0; max-width: 15rem; }
.campaign-chat-avatar-control :where(strong, small) { display: block; line-height: 1.25; }
.campaign-chat-avatar-control strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-avatar-control small { overflow: hidden; margin-top: .15rem; color: var(--muted, var(--ds-muted)); font-size: .625rem !important; text-overflow: ellipsis; white-space: nowrap; }

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-avatar-clear {
  min-width: 44px !important;
  padding: 0 .45rem;
  border: 0;
  background: transparent;
  color: var(--muted, var(--ds-muted));
  font-size: .68rem !important;
  cursor: pointer;
}

.campaign-chat-connection {
  min-width: 4em;
  color: var(--muted, var(--ds-muted));
  font-size: .7rem;
  text-align: right;
  white-space: nowrap;
}

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-close {
  width: var(--ds-control-height) !important;
  min-width: var(--ds-control-height) !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted, var(--ds-muted));
  font-size: 1.35rem !important;
  cursor: pointer;
}

.campaign-chat-avatar {
  position: relative;
  display: grid;
  overflow: hidden;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(212, 173, 107, .5);
  border-radius: 50%;
  background: linear-gradient(145deg, #27303b, #121922);
  color: #f1dcae;
  font: 700 1rem/1 var(--serif, var(--ds-font-serif));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
}

.campaign-chat-avatar > span { position: relative; z-index: 0; }
.campaign-chat-avatar > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign-chat-avatar--mine { width: 36px; min-width: 36px; height: 36px; }
.campaign-chat-avatar--bot { border-color: rgba(105, 174, 181, .7); background: linear-gradient(145deg, #17323a, #0d1c25); color: #a6e0e1; font-family: var(--ds-font-sans); }

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-earlier {
  grid-row: 2;
  width: 100%;
  min-height: 38px !important;
  border: 0;
  border-bottom: 1px solid var(--line, var(--ds-line));
  background: rgba(8, 14, 22, .7);
  color: var(--muted, var(--ds-muted));
  font-size: .7rem !important;
  cursor: pointer;
}

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-messages {
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  overflow: auto;
  margin: 0;
  padding: 1rem clamp(.7rem, 2vw, 1.25rem);
  list-style: none;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-messages > .campaign-chat-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  gap: .65rem;
  align-items: flex-start;
  padding: .25rem 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:is(.gm-page, .player-page) .campaign-chat-message.is-own { flex-direction: row-reverse; }
.campaign-chat-message-body { display: flex; min-width: 0; max-width: min(78%, 70ch); flex-direction: column; align-items: flex-start; }
.campaign-chat-message.is-own .campaign-chat-message-body { align-items: flex-end; }
.campaign-chat-message.is-bot .campaign-chat-message-body { max-width: min(84%, 76ch); }

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-message-body > header {
  display: flex;
  min-width: 0;
  gap: .35rem;
  align-items: baseline;
  margin: 0 .35rem .22rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.campaign-chat-message.is-own .campaign-chat-message-body > header { flex-direction: row-reverse; }
.campaign-chat-message-body > header strong { overflow: hidden; max-width: 20rem; color: #d8dfdf; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-message-body > header span { overflow: hidden; max-width: 16rem; padding: .08rem .32rem; border: 1px solid rgba(155, 166, 170, .3); border-radius: 999px; color: #9eaaad; font-size: .58rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-message.is-bot .campaign-chat-message-body > header span { border-color: rgba(105, 174, 181, .4); color: #9ed4d7; }
.campaign-chat-message-body > header time { color: #75828b; font-size: .62rem; white-space: nowrap; }

.campaign-chat-bubble {
  position: relative;
  min-width: 3rem;
  max-width: 100%;
  padding: .65rem .8rem;
  border: 1px solid rgba(158, 174, 183, .19);
  border-radius: 5px 14px 14px;
  background: #15202c;
  color: #d2d8d7;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.campaign-chat-message.is-own .campaign-chat-bubble { border-color: rgba(212, 173, 107, .34); border-radius: 14px 5px 14px 14px; background: linear-gradient(145deg, #4b3c25, #30291f); color: #fff3d8; }
.campaign-chat-message.is-bot .campaign-chat-bubble { border-color: rgba(105, 174, 181, .35); background: linear-gradient(145deg, #102831, #101c28); }
.campaign-chat-message.is-private .campaign-chat-bubble { border-color: rgba(194, 112, 139, .62); background: linear-gradient(145deg, #301d2a, #201824); color: #f7dce7; box-shadow: 0 0 0 1px rgba(194, 112, 139, .08), 0 8px 24px rgba(0, 0, 0, .22); }
.campaign-chat-message.is-private.is-bot .campaign-chat-bubble { border-color: rgba(138, 132, 205, .68); background: linear-gradient(145deg, #23233d, #171b30); }
.campaign-chat-bubble > p { margin: 0 !important; color: inherit !important; font-size: .875rem !important; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }
.campaign-chat-audience { display: flex; min-width: 0; gap: .35rem; align-items: center; margin: -.12rem 0 .45rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(226, 154, 180, .2); color: #efb8cc; }
.campaign-chat-audience > span { flex: 0 0 auto; font-size: .58rem; }
.campaign-chat-audience > strong { overflow: hidden; min-width: 0; font-size: .65rem; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-message.deleted .campaign-chat-bubble { border-style: dashed; background: rgba(15, 22, 31, .7); box-shadow: none; }
.campaign-chat-message.deleted .campaign-chat-bubble > p { color: #7f8b91 !important; font-style: italic; }

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-delete {
  min-width: 44px !important;
  min-height: 30px !important;
  margin-top: .45rem;
  padding: 0 .45rem;
  border: 0;
  border-top: 1px solid rgba(220, 98, 105, .2);
  background: transparent;
  color: #d89296;
  font-size: .64rem !important;
  cursor: pointer;
}

.campaign-chat-dice-result > p { margin: 0 0 .5rem !important; color: #bcd7d8 !important; font-size: .76rem !important; }
.campaign-chat-dice-result > p :where(strong, b) { color: #d9f1ee; }
.campaign-chat-dice-result > div { display: flex; min-width: 0; flex-wrap: wrap; gap: .35rem; align-items: center; }
.campaign-chat-dice-faces { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem; }
.campaign-chat-dice-faces > span { display: grid; min-width: 2rem; height: 2rem; place-items: center; padding: 0 .25rem; border: 1px solid rgba(105, 174, 181, .38); border-radius: 6px; background: rgba(4, 12, 19, .5); color: #e5fbf5; font-weight: 700; }
.campaign-chat-dice-result :where(i, em) { color: #89a4a8; font-size: .75rem; font-style: normal; }
.campaign-chat-dice-result > div > strong { min-width: 2.2rem; color: #ffe1a0; font: 750 1.35rem/1 var(--serif, var(--ds-font-serif)); text-align: center; }

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-empty {
  display: grid;
  min-height: 9rem;
  place-content: center;
  gap: .2rem;
  padding: 1.5rem;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted, var(--ds-muted));
  text-align: center;
}
.campaign-chat-empty > span { color: var(--gold, var(--ds-gold)); font-size: 1.3rem; }
.campaign-chat-empty > strong { color: #cbd1cf; font-size: .82rem; }
.campaign-chat-empty > small { font-size: .7rem !important; }

body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-composer {
  grid-row: 4;
  display: grid;
  grid-template-areas:
    "tools textarea"
    "warning warning"
    "footer footer"
    "error error";
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  min-width: 0;
  padding: .6rem .7rem;
  border-top: 1px solid var(--line, var(--ds-line));
  background: rgba(11, 18, 27, .96);
}

.campaign-chat-tools { position: relative; grid-area: tools; display: flex; min-width: 0; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: 0; }
.campaign-chat-scope { position: relative; min-width: 0; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-scope-toggle { display: inline-flex; max-width: 15rem; min-width: 124px !important; gap: .4rem; align-items: center; padding: 0 .7rem; border: 1px solid rgba(212, 173, 107, .38); border-radius: 999px; background: rgba(212, 173, 107, .07); color: #e3c98f; cursor: pointer; }
.campaign-chat-scope-toggle b { overflow: hidden; min-width: 0; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-composer.is-private .campaign-chat-scope-toggle { border-color: rgba(213, 121, 153, .68); background: rgba(170, 72, 109, .14); color: #f0bed0; }
.campaign-chat-scope-menu { position: absolute; z-index: 7; bottom: calc(100% + .35rem); left: 0; width: min(23rem, calc(100vw - 2rem)); max-height: min(72svh, 34rem); overflow: auto; padding: .75rem; border: 1px solid rgba(212, 173, 107, .42); border-radius: 10px; background: #111a25; box-shadow: 0 18px 46px rgba(0, 0, 0, .55); }
.campaign-chat-scope-menu > header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: .75rem; padding: 0 .15rem .55rem; border-bottom: 1px solid var(--line, var(--ds-line)); }
.campaign-chat-scope-menu > header strong { color: var(--paper-strong, var(--ds-paper-strong)); font-size: .8rem; }
.campaign-chat-scope-menu > header small { overflow: hidden; color: var(--muted, var(--ds-muted)); font-size: .62rem !important; text-overflow: ellipsis; white-space: nowrap; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-scope-menu > button { display: grid; width: 100%; min-width: 0 !important; gap: .16rem; margin-top: .5rem; padding: .55rem .65rem; border: 1px solid rgba(155, 166, 170, .24); border-radius: 7px; background: rgba(255, 255, 255, .025); color: var(--paper, var(--ds-paper)); text-align: left; cursor: pointer; }
.campaign-chat-scope-menu > button strong,.campaign-chat-scope-menu > button small { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-scope-menu > button strong { font-size: .76rem; }.campaign-chat-scope-menu > button small { color: var(--muted, var(--ds-muted)); font-size: .64rem !important; }
.campaign-chat-scope-menu fieldset { display: grid; gap: .35rem; min-width: 0; margin: .55rem 0 0; padding: .55rem; border: 1px solid rgba(194, 112, 139, .3); }
.campaign-chat-scope-menu legend { padding: 0 .35rem; color: #e7adc2; font-size: .68rem; }
.campaign-chat-scope-menu fieldset > label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: center; min-width: 0; padding: .35rem; border-radius: 5px; cursor: pointer; }
.campaign-chat-scope-menu fieldset > label:hover { background: rgba(255, 255, 255, .04); }
.campaign-chat-scope-menu fieldset > label > span { min-width: 0; }.campaign-chat-scope-menu fieldset :where(strong,small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-chat-scope-menu fieldset strong { color: #e2e7e5; font-size: .72rem; }.campaign-chat-scope-menu fieldset small { margin-top: .1rem; color: var(--muted, var(--ds-muted)); font-size: .61rem !important; }
.campaign-chat-scope-menu fieldset > p { margin: 0 !important; color: var(--muted, var(--ds-muted)) !important; font-size: .7rem !important; }
.campaign-chat-scope-menu > footer { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .6rem; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-scope-menu > footer button { min-width: 72px !important; padding: 0 .6rem; border: 1px solid var(--line, var(--ds-line)); background: transparent; color: var(--paper, var(--ds-paper)); font-size: .68rem !important; cursor: pointer; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-scope-menu > footer button:last-child { border-color: rgba(194, 112, 139, .6); background: rgba(194, 112, 139, .13); color: #f0bed0; }
.campaign-chat-private-warning { grid-area: warning; min-width: 0; margin: 0 !important; padding: .42rem .6rem; border: 1px solid rgba(194, 112, 139, .4); border-left: 3px solid #c2708b; border-radius: 5px; background: rgba(152, 62, 96, .1); color: #efbdce !important; font-size: .7rem !important; line-height: 1.45; overflow-wrap: anywhere; }
.campaign-chat-composer.is-private .campaign-chat-textarea textarea { border-color: rgba(194, 112, 139, .56); box-shadow: inset 0 0 0 1px rgba(194, 112, 139, .06); }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-dice-toggle { min-width: 124px !important; padding: 0 .7rem; border: 1px solid rgba(105, 174, 181, .35); border-radius: 999px; background: rgba(105, 174, 181, .07); color: #a9dcde; font-size: .72rem !important; cursor: pointer; }
.campaign-chat-dice-menu { position: absolute; z-index: 5; bottom: calc(100% + .35rem); left: 0; display: flex; width: min(36rem, calc(100vw - 2rem)); min-width: 0; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .65rem; border: 1px solid rgba(105, 174, 181, .4); border-radius: 9px; background: #111c28; box-shadow: 0 15px 38px rgba(0, 0, 0, .45); }
.campaign-chat-dice-menu > span { color: #a8c8ca; font-size: .68rem; white-space: nowrap; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-dice-menu button { min-width: 44px !important; padding: 0 .55rem; border: 1px solid rgba(105, 174, 181, .25); background: rgba(105, 174, 181, .06); color: #c7e9e6; font-size: .7rem !important; cursor: pointer; }
.campaign-chat-dice-menu label { min-width: 8rem; flex: 1 1 9rem; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-dice-menu input { width: 100%; min-width: 0; padding: 0 .6rem; border: 1px solid var(--line, var(--ds-line)); background: #080f17; color: var(--paper-strong, var(--ds-paper-strong)); }
.campaign-chat-dice-menu > small { width: 100%; color: var(--muted, var(--ds-muted)); font-size: .62rem !important; }
.campaign-chat-textarea { display: block; grid-area: textarea; min-width: 0; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-textarea textarea { width: 100%; min-width: 0; min-height: 76px !important; padding: .65rem .75rem; border: 1px solid var(--line, var(--ds-line)); border-radius: 8px; outline: 0; resize: none; background: #070d14; color: var(--paper-strong, var(--ds-paper-strong)); font-size: .875rem !important; line-height: 1.55; }
.campaign-chat-textarea textarea:focus { border-color: var(--gold, var(--ds-gold)); box-shadow: 0 0 0 2px rgba(212, 173, 107, .08); }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-composer > footer { grid-area: footer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; margin-top: 0; }
.campaign-chat-composer > footer > small { color: var(--muted, var(--ds-muted)); font-size: .67rem !important; white-space: nowrap; }
.campaign-chat-composer > footer > span { overflow: hidden; color: #718089; font-size: .66rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-composer > footer > button { min-width: 82px !important; padding: 0 1rem; border: 1px solid var(--gold, var(--ds-gold)); border-radius: 7px; background: var(--gold, var(--ds-gold)); color: #15120c; font-weight: 750; cursor: pointer; }

.campaign-chat-panel [hidden] { display: none !important; }
.campaign-chat-composer > p { grid-area: error; margin: 0 !important; color: #efaaad !important; font-size: .72rem !important; }

@media (max-width: 700px) {
  body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-panel--inline {
    height: auto;
    min-height: 640px;
    grid-template-rows: auto auto minmax(320px, 1fr) auto;
  }
  body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-header { grid-template-columns: 1fr; align-items: start; padding: .65rem .75rem; }
  body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-composer { display: block; }
  .campaign-chat-heading > span { white-space: normal; }
  .campaign-chat-header-actions { justify-content: flex-start; }
  body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-avatar-control { min-width: 132px !important; }
  .campaign-chat-connection { margin-left: auto; }
  .campaign-chat-messages { padding-inline: .65rem !important; }
  .campaign-chat-avatar { width: 36px; min-width: 36px; height: 36px; }
  .campaign-chat-message-body { max-width: 86%; }
  .campaign-chat-message.is-bot .campaign-chat-message-body { max-width: 88%; }
  .campaign-chat-message-body > header { flex-wrap: wrap; row-gap: .12rem; }
  .campaign-chat-dice-menu {
    position: fixed;
    z-index: 1000;
    right: max(.65rem, env(safe-area-inset-right));
    bottom: max(.65rem, env(safe-area-inset-bottom));
    left: max(.65rem, env(safe-area-inset-left));
    width: auto;
    max-height: min(72svh, 30rem);
    margin: 0;
    overflow: auto;
  }
  .campaign-chat-scope-menu { position: fixed; z-index: 1001; right: max(.65rem, env(safe-area-inset-right)); bottom: max(.65rem, env(safe-area-inset-bottom)); left: max(.65rem, env(safe-area-inset-left)); width: auto; max-height: min(78svh, 36rem); margin: 0; }
  .campaign-chat-tools { flex-wrap: wrap; margin-bottom: .5rem; }
  body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-composer > footer { grid-template-columns: auto 1fr; margin-top: .5rem; }
  .campaign-chat-composer > p { margin-top: .45rem !important; }
  .campaign-chat-composer > footer > span { display: none; }
}

@media (max-width: 430px) {
  .campaign-chat-header-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; width: 100%; }
  body:is(.gm-page, .player-page, .tabletop-page) .campaign-chat-avatar-control { width: 100%; min-width: 0 !important; }
  .campaign-chat-connection { margin-left: 0; }
  .campaign-chat-message-body { max-width: calc(100% - 46px); }
  .campaign-chat-message.is-bot .campaign-chat-message-body { max-width: calc(100% - 46px); }
  .campaign-chat-message-body > header time { width: 100%; }
  .campaign-chat-message.is-own .campaign-chat-message-body > header time { text-align: right; }
  .campaign-chat-bubble { padding: .58rem .68rem; }
}

@media (max-width: 640px) {
  .ng-persistence-alert {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .ng-persistence-alert > div { justify-content: stretch; }
  .ng-persistence-alert button { flex: 1 1 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

@media print {
  html { font-size: 16px; }
  .ng-persistence-alert,
  .ng-mirror-banner { display: none !important; }
}