/* KYC LibreChat document workplace. Load AFTER native LibreChat styles.
 * Pinned image: sha256:5b706bcee1ca154a1e2987303aaeca0eb27f97919cccee4bb604226c2f8abf61.
 * Tokens are native RGB channel strings, not hex values.
 * !important is restricted to theme tokens: the native ThemeProvider writes
 * ordinary inline values on html. Accessibility palettes remain native.
 */

@font-face {
  font-family: "KH Sora";
  src: url("/assets/kh-kyc-brand/sora-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "KH Bebas Neue";
  src: url("/assets/kh-kyc-brand/bebas-neue-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* The standard LibreChat light/dark palettes remain the fallbacks.
 * High contrast and Windows forced colors keep native colors and typography.
 */
@media (forced-colors: none) {
  html:not(.high-contrast) {
    --theme-font-family: "KH Sora", Sora, Inter, ui-sans-serif, system-ui, sans-serif !important;
    --theme-control-radius: 0.625rem !important;
    --theme-surface-radius: 0.875rem !important;
    --theme-large-surface-radius: 1.25rem !important;

    /* Exact brand blue is suitable for decorative marks and focus perimeters.
     * Normal white button text uses the darker derived #006CAD, 5.602:1.
     * --accent-primary also colors small form labels, so uses that derivation.
     */
    --ring-primary: 6 138 224 !important;
    --surface-submit: 0 108 173 !important;
    --surface-submit-hover: 0 87 140 !important;
  }

  html:not(.dark):not(.high-contrast) {
    --presentation: 255 255 255 !important;
    --surface-primary: 255 255 255 !important;
    --surface-primary-alt: 247 247 247 !important;
    --surface-primary-contrast: 239 239 239 !important;
    --surface-secondary: 239 239 239 !important;
    --surface-secondary-alt: 227 227 227 !important;
    --surface-tertiary: 239 239 239 !important;
    --surface-tertiary-alt: 255 255 255 !important;
    --surface-dialog: 255 255 255 !important;
    --surface-chat: 255 255 255 !important;
    --surface-active: 239 239 239 !important;
    --surface-active-alt: 227 227 227 !important;
    --surface-hover: 227 227 227 !important;
    --surface-hover-alt: 214 214 214 !important;
    --surface-composer-hover: 227 227 227 !important;
    --header-primary: 255 255 255 !important;
    --header-hover: 239 239 239 !important;
    --header-button-hover: 239 239 239 !important;
    --text-primary: 0 0 0 !important;
    --text-secondary: 66 66 66 !important;
    --text-secondary-alt: 89 89 89 !important;
    --text-tertiary: 89 89 89 !important;
    --text-muted: 89 89 89 !important;
    --accent-primary: 0 108 173 !important;
    --accent-primary-hover: 0 87 140 !important;
    --link: 0 108 173 !important;
    --link-hover: 0 87 140 !important;
    --border-light: 205 205 205 !important;
    --border-medium: 153 153 153 !important;
    --border-medium-alt: 153 153 153 !important;
    --border-heavy: 112 112 112 !important;
    --border-xheavy: 89 89 89 !important;
  }

  /* Dark surfaces and brand-link tint are derived for legibility; the supplied
   * original blue/black wordmark is carried on white, never recolored.
   */
  html.dark:not(.high-contrast) {
    --presentation: 18 20 23 !important;
    --surface-primary: 18 20 23 !important;
    --surface-primary-alt: 25 28 32 !important;
    --surface-primary-contrast: 32 36 41 !important;
    --surface-secondary: 25 28 32 !important;
    --surface-secondary-alt: 32 36 41 !important;
    --surface-tertiary: 32 36 41 !important;
    --surface-tertiary-alt: 32 36 41 !important;
    --surface-dialog: 25 28 32 !important;
    --surface-chat: 18 20 23 !important;
    --surface-active: 51 57 64 !important;
    --surface-active-alt: 43 49 56 !important;
    --surface-hover: 43 49 56 !important;
    --surface-hover-alt: 57 64 73 !important;
    --surface-composer-hover: 43 49 56 !important;
    --header-primary: 25 28 32 !important;
    --header-hover: 43 49 56 !important;
    --header-button-hover: 43 49 56 !important;
    --text-primary: 255 255 255 !important;
    --text-secondary: 214 218 223 !important;
    --text-secondary-alt: 184 191 199 !important;
    --text-tertiary: 184 191 199 !important;
    --text-muted: 184 191 199 !important;
    --accent-primary: 121 203 255 !important;
    --accent-primary-hover: 172 224 255 !important;
    --link: 121 203 255 !important;
    --link-hover: 172 224 255 !important;
    --border-light: 62 69 79 !important;
    --border-medium: 89 98 110 !important;
    --border-medium-alt: 89 98 110 !important;
    --border-heavy: 132 141 151 !important;
    --border-xheavy: 184 191 199 !important;
  }

  /* The app's .font-sans is hard-coded to Inter; shared primitives already
   * read --theme-font-family through .font-theme-ui. Code/pre/.font-mono and
   * syntax tokens intentionally have no override.
   */
  html:not(.high-contrast) :where(body, .font-sans) {
    font-family: var(--theme-font-family);
  }

  /* Exact native AuthLayout logo slot. The own Compose override supplies the
   * original Figma SVG as assets/logo.svg. This CSS never
   * hides the native image or injects a second logo.
   */
  html:not(.high-contrast) div:has(> img:is(
    [src="assets/logo.svg"],
    [src="/assets/logo.svg"],
    [src="/assets/kh-kyc-brand/krommenhoek-metals.svg"]
  )) {
    display: flex;
    height: auto;
    justify-content: center;
  }

  html:not(.high-contrast) img:is(
    [src="assets/logo.svg"],
    [src="/assets/logo.svg"],
    [src="/assets/kh-kyc-brand/krommenhoek-metals.svg"]
  ) {
    display: block;
    box-sizing: content-box;
    width: 220px;
    max-width: calc(100vw - 64px);
    height: auto;
    margin-inline: auto;
    padding: 12px 16px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 0.625rem;
  }

  /* AuthLayout is the only page with this logo slot and direct main > div >
   * h1. Bebas belongs to that short product/auth heading, never chat Markdown,
   * dialog headings, navigation, input labels, or user-authored content.
   */
  html:not(.high-contrast) div:has(> div > img:is(
    [src="assets/logo.svg"],
    [src="/assets/logo.svg"],
    [src="/assets/kh-kyc-brand/krommenhoek-metals.svg"]
  )) > main > div > h1 {
    font-family: "KH Bebas Neue", "Arial Narrow", sans-serif;
    font-weight: 400;
    letter-spacing: 0.035em;
    line-height: 1.15;
  }

  html:not(.high-contrast) #send-button:not(:disabled) {
    background-color: rgb(var(--surface-submit));
    color: #fff;
  }

  html:not(.high-contrast) #send-button:not(:disabled):hover {
    background-color: rgb(var(--surface-submit-hover));
  }

  html:not(.high-contrast) #send-button:not(:disabled) svg {
    color: #fff;
  }
}

/* Juraj's document workplace, explicitly selected by the owner on 2026-10-13.
 * Presentation only: these rules do not grant or revoke API permissions.
 * Native test IDs and icon identities avoid matching translated button text.
 * display:none also removes these shortcuts from keyboard and accessibility
 * navigation; chat, document choice, files, history and account stay native.
 */
:is(
  [data-testid="nav-panel-agents"],
  [data-testid="nav-panel-memories"],
  [data-testid="nav-panel-bookmarks"],
  [data-testid="nav-panel-prompts"],
  [data-testid="add-multi-convo-button"],
  [data-testid="read-aloud-button"],
  [data-testid="token-usage"],
  #bookmark-menu-button,
  #header-menu-button,
  #header-compare,
  #audio-recorder,
  [role="tab"][id$="-trigger-speech"]
) {
  display: none;
}

/* This is the native projects section, including its collapsed descendants.
 * Do not match user messages, history rows or the file attachment picker.
 */
aside nav div.flex-col:has(> div > button > svg.lucide-folders),
#messages-view button[aria-label="Temporary Chat"],
#messages-view button[aria-label="Tijdelijke chat"],
#messages-view button[aria-label="Read aloud"],
#messages-view button[aria-label="Voorlezen"],
#messages-view button:has(svg.lucide-git-fork) {
  display: none;
}

/* Keep the original Figma artwork visible in the chat toolbar as well as login.
 * A fixed-size decorative mark participates in flex layout, not an overlay.
 * The native document selector and sidebar controls retain their own labels.
 */
#messages-view div.absolute.top-0:has([data-testid="model-selector-button"])::after {
  content: "";
  display: block;
  flex: 0 0 172px;
  height: 42px;
  margin-left: auto;
  border-radius: 8px;
  background: #fff url("/assets/kh-kyc-brand/krommenhoek-metals.svg") center / 156px auto no-repeat;
}

@media (max-width: 767px) {
  #messages-view div.absolute.top-0:has([data-testid="model-selector-button"])::after {
    flex-basis: 118px;
    height: 34px;
    background-size: 106px auto;
  }
}

@media (forced-colors: active) {
  #messages-view div.absolute.top-0:has([data-testid="model-selector-button"])::after {
    forced-color-adjust: none;
  }
}