/* Deployment-only branding. Semantic tokens keep LibreChat components intact.
   High-contrast / forced-color modes retain their accessible theme. */
html:not(.high-contrast-light):not(.high-contrast-dark) {
  color-scheme: dark;
  --presentation: 7 24 39 !important;
  --text-primary: 232 237 242 !important;
  --text-secondary: 184 196 207 !important;
  --text-secondary-alt: 164 181 197 !important;
  --text-tertiary: 164 181 197 !important;
  --text-muted: 164 181 197 !important;
  --accent-primary: 193 162 104 !important;
  --accent-primary-hover: 214 184 128 !important;
  --link: 214 184 128 !important;
  --link-hover: 230 204 157 !important;
  --link-visited: 193 162 104 !important;
  --ring-primary: 193 162 104 !important;
  --header-primary: 11 31 48 !important;
  --header-hover: 22 47 67 !important;
  --header-button-hover: 22 47 67 !important;
  --surface-primary: 7 24 39 !important;
  --surface-primary-alt: 11 31 48 !important;
  --surface-primary-contrast: 17 39 58 !important;
  --surface-secondary: 11 31 48 !important;
  --surface-secondary-alt: 17 39 58 !important;
  --surface-tertiary: 17 39 58 !important;
  --surface-tertiary-alt: 22 47 67 !important;
  --surface-dialog: 11 31 48 !important;
  --surface-chat: 11 31 48 !important;
  --surface-code: 11 31 48 !important;
  --surface-hover: 22 47 67 !important;
  --surface-hover-alt: 28 56 77 !important;
  --surface-composer-hover: 22 47 67 !important;
  --surface-active: 30 53 66 !important;
  --surface-active-alt: 42 59 68 !important;
  --surface-submit: 173 141 84 !important;
  --surface-submit-hover: 193 162 104 !important;
  --surface-inverted: 193 162 104 !important;
  --surface-inverted-hover: 214 184 128 !important;
  --text-inverted: 7 24 39 !important;
  --border-light: 40 61 80 !important;
  --border-medium: 58 79 97 !important;
  --border-medium-alt: 58 79 97 !important;
  --border-heavy: 82 101 118 !important;
  --border-xheavy: 120 141 160 !important;
  --syntax-text: 241 238 229 !important;
  --syntax-comment: 164 181 197 !important;
  --syntax-meta: 197 207 217 !important;
  --syntax-builtin: 231 183 94 !important;
  --syntax-keyword: 132 185 223 !important;
  --syntax-string: 130 201 177 !important;
  --syntax-attr: 222 160 196 !important;
  --syntax-title: 231 171 153 !important;
}
:root { --aethelgard-brand-height: 48px; }
body { background: rgb(var(--surface-primary)); height: 100dvh; overflow: clip; }
#aethelgard-brand-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--aethelgard-brand-height); display: flex; align-items: center;
  gap: 10px; padding: 0 16px; box-sizing: border-box;
  color: #f1eee5; background: #071827; border-bottom: 1px solid #283d50;
  font: 600 16px/1.2 Inter, system-ui, sans-serif; letter-spacing: .025em;
}
#aethelgard-brand-header img { width: 34px; height: 34px; object-fit: contain; }
#root { padding-top: var(--aethelgard-brand-height); box-sizing: border-box; height: 100dvh; overflow: clip; }
/* The installed shell uses an inline viewport height. Reserve exactly the
   header band; internal navigation, panels and chat keep their own layout. */
#root > div { height: calc(100dvh - var(--aethelgard-brand-height)) !important; min-height: 0; }
#root .min-h-screen { min-height: calc(100dvh - var(--aethelgard-brand-height)); }
img[src="assets/logo.svg"] { height: 100px; content: url('/assets/aethelgard-brand/logo.svg'); }
div:has(> img[src="assets/logo.svg"]) { height: 100px; }
html:not(.high-contrast-light):not(.high-contrast-dark) #send-button:not(:disabled) { color: #071827; }
html:not(.high-contrast-light):not(.high-contrast-dark) button[aria-pressed="true"] { color: #d6b880; }
@media (max-width: 640px) {
  :root { --aethelgard-brand-height: 44px; }
  #aethelgard-brand-header { padding: 0 10px; font-size: 14px; }
  #aethelgard-brand-header img { width: 30px; height: 30px; }
}
@media (forced-colors: active) {
  #aethelgard-brand-header { color: CanvasText; background: Canvas; border-color: CanvasText; }
}
/* Branding deliberately supplies the same navy surfaces in both normal theme
   modes. Tailwind typography has its own light/inverted palette, so map both
   prose palettes to the actual semantic surface instead of the mode class. */
html:not(.high-contrast-light):not(.high-contrast-dark) .message-content.prose {
  color: rgb(var(--text-primary));
  --tw-prose-body: rgb(var(--text-primary));
  --tw-prose-headings: rgb(var(--text-primary));
  --tw-prose-lead: rgb(var(--text-secondary));
  --tw-prose-links: rgb(var(--link));
  --tw-prose-bold: rgb(var(--text-primary));
  --tw-prose-counters: rgb(var(--text-secondary));
  --tw-prose-bullets: rgb(var(--text-secondary));
  --tw-prose-quotes: rgb(var(--text-primary));
  --tw-prose-quote-borders: rgb(var(--border-medium));
  --tw-prose-captions: rgb(var(--text-secondary));
  --tw-prose-code: rgb(var(--text-primary));
  --tw-prose-pre-code: rgb(var(--text-primary));
  --tw-prose-pre-bg: rgb(var(--surface-code));
  --tw-prose-invert-body: rgb(var(--text-primary));
  --tw-prose-invert-headings: rgb(var(--text-primary));
  --tw-prose-invert-lead: rgb(var(--text-secondary));
  --tw-prose-invert-links: rgb(var(--link));
  --tw-prose-invert-bold: rgb(var(--text-primary));
  --tw-prose-invert-counters: rgb(var(--text-secondary));
  --tw-prose-invert-bullets: rgb(var(--text-secondary));
  --tw-prose-invert-quotes: rgb(var(--text-primary));
  --tw-prose-invert-quote-borders: rgb(var(--border-medium));
  --tw-prose-invert-captions: rgb(var(--text-secondary));
  --tw-prose-invert-code: rgb(var(--text-primary));
  --tw-prose-invert-pre-code: rgb(var(--text-primary));
  --tw-prose-invert-pre-bg: rgb(var(--surface-code));
}
/* Existing role layout: assistant rows use items-start, user rows justify-end.
   Wrap the existing avatar/name/content/actions without changing column width. */
html:not(.high-contrast-light):not(.high-contrast-dark) .message-render.items-start {
  background: #102737;
  border: 1px solid #294454;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
}
.message-render .message-content { min-width: 0; overflow-wrap: anywhere; }
.message-render .message-content :is(pre, table) { max-width: 100%; }
html:not(.high-contrast-light):not(.high-contrast-dark) .message-content :is(code, pre) {
  color: rgb(var(--text-primary));
  background-color: rgb(var(--surface-code));
}
html:not(.high-contrast-light):not(.high-contrast-dark) .message-content a {
  color: rgb(var(--link));
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  html:not(.high-contrast-light):not(.high-contrast-dark) .message-render.items-start { padding: 12px; }
}