/* netclusive.de design language, scoped to the pinned LibreChat frontend.
 * Brand colors are separate from semantic warning/error/success colors.
 * All assets are served by this instance; no external fonts or tracking.
 */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./pt-sans-narrow-700.woff2') format('woff2');
}
html:root {
  --nc-blue: #0b65ae;
  --nc-blue-dark: #084675;
  --nc-blue-light: #2ba3ff;
  --nc-tint: #f0f6fa;
  --theme-font-family: Arial, Helvetica, sans-serif;
  --theme-control-radius: 8px;
  --theme-surface-radius: 12px;
  --theme-large-surface-radius: 16px;
  --accent-primary: 11 101 174;
  --accent-primary-hover: 8 70 117;
  --ring-primary: 11 101 174;
  --surface-submit: 11 101 174;
  --surface-submit-hover: 8 70 117;
  --link: 11 101 174;
  --link-hover: 8 70 117;
}
html:root:not(.dark) {
  --text-primary: 33 37 41;
  --text-secondary: 73 76 83;
  --text-secondary-alt: 85 99 112;
  --text-tertiary: 85 99 112;
  --surface-primary-alt: 240 246 250;
  --surface-secondary: 240 246 250;
  --surface-secondary-alt: 228 239 248;
  --surface-active: 220 236 249;
  --surface-hover: 228 239 248;
  --surface-composer-hover: 240 246 250;
  --header-hover: 240 246 250;
  --border-light: 215 225 233;
  --border-medium: 183 204 221;
}
html:root.dark {
  --presentation: 15 29 42;
  --nc-tint: #0c1824;
  --accent-primary: 105 187 250;
  --accent-primary-hover: 151 209 255;
  --link: 105 187 250;
  --link-hover: 151 209 255;
  --ring-primary: 105 187 250;
  --text-primary: 235 243 250;
  --text-secondary: 196 212 226;
  --text-secondary-alt: 165 187 206;
  --surface-primary: 15 29 42;
  --surface-primary-alt: 12 24 36;
  --surface-secondary: 19 38 55;
  --surface-secondary-alt: 24 45 64;
  --surface-chat: 15 29 42;
  --surface-dialog: 19 38 55;
  --surface-hover: 29 54 75;
  --surface-active: 29 61 87;
  --header-primary: 15 29 42;
  --header-hover: 24 45 64;
  --border-light: 42 64 83;
  --border-medium: 59 86 109;
}
body, input, textarea, select, button {
  font-family: Arial, Helvetica, sans-serif;
}
/* Do not replace code, equations or user-selected monospace styling. */
pre, code, kbd, .cm-editor, .cm-content { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
h1, h2, h3 { font-family: 'PT Sans Narrow', Arial, sans-serif; font-weight: 700; }
/* Versioned CSS URL also replaces logos cached under the upstream URL. */
img[src='assets/logo.svg'] { content: url('./netclusive-logo.svg'); }

/* Site-style primary actions. The upper gradient stop is darkened for readable
 * white labels; the original bright blue remains in borders and accents. */
button.bg-surface-submit, button[data-testid='login-button'], button#send-button {
  background: linear-gradient(180deg, #1674bd 0%, #0b65ae 100%);
  border: 1px solid #084675;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 4px rgb(8 70 117 / 12%);
}
button.bg-surface-submit:hover:not(:disabled), button[data-testid='login-button']:hover:not(:disabled), button#send-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #0b65ae 0%, #084675 100%);
  box-shadow: 0 4px 10px rgb(8 70 117 / 20%);
}
button.bg-surface-submit:disabled, button#send-button:disabled { opacity: .45; box-shadow: none; }
button#send-button svg { color: #fff; }
button:focus-visible, a:focus-visible { outline: 2px solid rgb(var(--ring-primary)); outline-offset: 3px; }

/* Authentication only: original fields/actions remain untouched in the DOM. */
#root > div:has(> main form[aria-label='Login form']) {
  background: var(--nc-tint);
  min-height: 100dvh;
}
#root > div:has(> main form[aria-label='Login form']) > div:has(> img[src='assets/logo.svg']) {
  margin-top: 0;
  height: 100px;
  padding: 10px 32px;
  background: #fff;
  border-bottom: 3px solid var(--nc-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#root > div:has(> main form[aria-label='Login form']) > div > img[src='assets/logo.svg'] {
  width: 260px;
  height: 80px;
  object-position: left center;
}
#root > div:has(> main form[aria-label='Login form']) > div:has(> img[src='assets/logo.svg'])::after {
  content: 'ask · KI Preview';
  color: #494c53;
  font-size: 13px;
  letter-spacing: .06em;
  white-space: nowrap;
}
#root main:has(form[aria-label='Login form']) { padding: 44px 20px 60px; }
#root main > div:has(form[aria-label='Login form']) {
  width: 440px;
  max-width: 100%;
  padding: 36px;
  overflow: visible;
  border: 1px solid rgb(var(--border-light));
  border-top: 4px solid var(--nc-blue);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgb(8 70 117 / 9%);
}
#root main > div:has(form[aria-label='Login form'])::before {
  content: 'NETCLUSIVE ASK';
  display: block;
  color: rgb(var(--accent-primary));
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}
#root main:has(form[aria-label='Login form']) h1 { font-size: 34px; line-height: 1.2; }
form[aria-label='Login form'] input { border-radius: 8px; min-height: 48px; }
.dark form[aria-label='Login form'] input { background-color: rgb(var(--surface-primary)) !important; }
form[aria-label='Login form'] button[type='submit'] { letter-spacing: .025em; }
#root > div:has(> main form[aria-label='Login form']) > [role='contentinfo']::before {
  content: 'netclusive · Ihr KI-Arbeitsplatz';
  color: rgb(var(--text-secondary-alt));
  font-size: 12px;
}

/* Existing welcome animation keeps its accessible text and behavior. */
main .split-parent { font-family: 'PT Sans Narrow', Arial, sans-serif; font-weight: 700; color: rgb(var(--accent-primary)); }
aside nav[aria-hidden='false'] { display: flex; flex-direction: column; }
aside nav[aria-hidden='false']::before {
  content: '';
  display: block;
  flex: 0 0 74px;
  background: url('./netclusive-logo.svg') center / 240px auto no-repeat;
  border-bottom: 1px solid rgb(var(--border-light));
}
aside nav[aria-hidden='false'] > div { min-height: 0; height: auto; flex: 1; }
.dark aside nav[aria-hidden='false']::before { background-image: url('./netclusive-logo-dark.svg'); }
a[data-testid='new-chat-button'] { background: #0b65ae; color: white; border: 1px solid #084675; }
a[data-testid='new-chat-button'] svg { color: white; }
a[data-testid='new-chat-button']:hover { background: #084675; }
button[data-testid='model-selector-button'] { border-radius: 8px; }

/* Readable navigation without changing the virtualized conversation row heights. */
aside nav[aria-hidden='false'] .text-sm,
aside nav[aria-hidden='false'] input { font-size: 16px; line-height: 24px; }
aside nav[aria-hidden='false'] .text-xs { font-size: 14px; line-height: 20px; }
aside nav[aria-hidden='false'] h2 {
  /* Upstream DateLabel sets its small font size inline. */
  font-size: 14px !important;
  line-height: 20px;
}

/* Only author headers, never headings inside the generated answer body. */
main h2:has(> span.size-6),
main [data-testid='author-header'] h2 { font-size: 18px; line-height: 26px; }
main h2:has(> span.size-6) { min-height: 32px; gap: 10px; margin-bottom: 8px; }
main h2 > span.size-6,
main [data-testid='author-header'] > div.size-6 { width: 32px; height: 32px; }
main h2 > span.size-6 .icon-md,
main [data-testid='author-header'] > div.size-6 .icon-md { width: 100%; height: 100%; }
/* Custom endpoint icons have additional fixed-size, padded wrappers. */
main h2 > span.size-6 div:has(img[src$='/netclusive-icon.svg']),
main [data-testid='author-header'] > div.size-6 div:has(img[src$='/netclusive-icon.svg']) {
  width: 100% !important;
  height: 100% !important;
  padding: 0;
}

@media (max-width: 600px) {
  #root > div:has(> main form[aria-label='Login form']) > div:has(> img[src='assets/logo.svg']) { height: 80px; padding: 6px 12px; }
  #root > div:has(> main form[aria-label='Login form']) > div > img[src='assets/logo.svg'] { width: 195px; height: 60px; }
  #root > div:has(> main form[aria-label='Login form']) > div:has(> img[src='assets/logo.svg'])::after { font-size: 10px; letter-spacing: 0; }
  #root main:has(form[aria-label='Login form']) { padding: 30px 16px 60px; }
  #root main > div:has(form[aria-label='Login form']) { padding: 28px 24px; }
  #root main:has(form[aria-label='Login form']) h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none !important; }
}