/*
 * LibreChat im Design von dk communications – Umsetzung von docs/design/DESIGN.md (Mockups V01–V03).
 *   - Farben: Variablen von LibreChat (client/src/style.css) auf die dk-Tokens gesetzt
 *   - Seitenleiste immer dunkel mit Bildmarke, Wortmarke, Produktname und Claim (V01/V03)
 *   - Anmeldeseite mit Titelbild „Deine KI. Dein Server.“ (V02)
 *   - Karten, Eingabefeld, Knöpfe, Hinweis-Banner und Fokus in Markenfarbe
 * Markenelemente fügt dk-branding.js ein. Eigene Fassung: custom/branding/librechat/dk-branding.css.
 * Selektoren html:not(.dark) / html.dark überstimmen die Standardwerte (html / .dark) von LibreChat sicher.
 */

html {
  --dk-brand: #f26b1d;
  --dk-brand-strong: #e25a0c;
  --dk-side: #16171a;
  --dk-side-active: #3a2416;
  --dk-radius: 14px;
}

html:not(.dark) {
  --brand-purple: #f26b1d;
  --ring-primary: #f26b1d;
  --presentation: #f7f7f8;
  --text-primary: #16181d;
  --text-secondary: #5f6570;
  --surface-primary: #ffffff;
  --surface-secondary: #ffffff;
  --surface-chat: #ffffff;
  --surface-active: #fff3ea;
  --surface-submit: #f26b1d;
  --surface-submit-hover: #e25a0c;
  --border-light: #e4e5e8;
  --border-medium: #d6d8dc;
  --border-medium-alt: #d6d8dc;
  --dk-card: #ffffff;
  --dk-soft: #fff3ea;
  --dk-line: #e4e5e8;
  --dk-link: #c24e0a;
}

html.dark {
  --brand-purple: #f26b1d;
  --ring-primary: #f26b1d;
  --presentation: #121315;
  --text-primary: #f1f1f2;
  --text-secondary: #a3a6ad;
  --text-secondary-alt: #8b8e95;
  --header-primary: #1b1c1f;
  --header-hover: #26282c;
  --header-button-hover: #26282c;
  --surface-active: #2e1f15;
  --surface-active-alt: #2b2d31;
  --surface-hover: #26282c;
  --surface-hover-alt: #2b2d31;
  --surface-primary: #121315;
  --surface-primary-alt: #16171a;
  --surface-primary-contrast: #16171a;
  --surface-secondary: #1b1c1f;
  --surface-secondary-alt: #1b1c1f;
  --surface-tertiary: #232428;
  --surface-tertiary-alt: #232428;
  --surface-dialog: #1b1c1f;
  --surface-chat: #1b1c1f;
  --surface-submit: #f26b1d;
  --surface-submit-hover: #e25a0c;
  --border-light: #2d2f34;
  --border-medium: #3a3c42;
  --border-medium-alt: #3a3c42;
  --border-heavy: #4a4d54;
  --background: 225 7% 8%;
  --dk-card: #1b1c1f;
  --dk-soft: #2b1d14;
  --dk-line: #2d2f34;
  --dk-link: #ff8a4c;
}

/* ------------------------------------------------------------------ */
/* Allgemein                                                           */
/* ------------------------------------------------------------------ */

:focus-visible {
  outline-color: var(--dk-brand);
}
::selection {
  background: rgba(242, 107, 29, 0.25);
}
.markdown a,
.prose a {
  color: var(--dk-link);
}

.dk-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.dk-wordmark {
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f1f1f2;
  white-space: nowrap;
}
.dk-wordmark b {
  font-weight: 800;
  color: var(--dk-brand);
}

/* Hinweis-Banner (Datenschutz) als orange Hinweisbox */
#root > div.sticky:first-child {
  background: var(--dk-soft);
  border-bottom: 1px solid rgba(242, 107, 29, 0.35);
  color: var(--text-primary);
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ------------------------------------------------------------------ */
/* Seitenleiste: immer dunkel (V01), aktive Einträge orange            */
/* ------------------------------------------------------------------ */

#root aside {
  --surface-primary-alt: var(--dk-side);
  --surface-primary: var(--dk-side);
  --surface-secondary: #1f2024;
  --surface-hover: #26282c;
  --surface-active-alt: var(--dk-side-active);
  --surface-active: var(--dk-side-active);
  --text-primary: #f1f1f2;
  --text-secondary: #a3a6ad;
  --border-light: #2a2c31;
  --border-medium: #34363c;
  background: var(--dk-side);
  color: #f1f1f2;
}
#root aside [data-testid='convo-item'][class*=' bg-surface-active-alt'] {
  box-shadow: inset 3px 0 0 var(--dk-brand);
}
#root aside [data-testid='convo-item'][class*=' bg-surface-active-alt'] a,
#root aside [data-testid='convo-item'][class*=' bg-surface-active-alt'] span {
  color: #ff9a5c;
}
#root aside button[data-testid^='nav-panel'][class*=' bg-surface-active-alt'] svg {
  color: var(--dk-brand);
}
#root aside [data-testid='nav-search-input']::placeholder {
  color: #8b8e95;
}

.dk-side-brand {
  padding: 14px 16px 16px;
  margin: 0 8px 8px;
  border-bottom: 1px solid #2d2f34;
}
.dk-side-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dk-side-logo img {
  height: 38px;
  width: auto;
}
.dk-side-product {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dk-side-product b {
  font-size: 15px;
  font-weight: 700;
  color: #f1f1f2;
}
.dk-side-product span {
  font-size: 13px;
  color: #a3a6ad;
}

/* ------------------------------------------------------------------ */
/* Chat: Startseite, Vorschlagskarten, Eingabefeld, Knöpfe             */
/* ------------------------------------------------------------------ */

.dk-landing-eyebrow {
  text-align: center;
}
@media (max-width: 639px) {
  .dk-landing-eyebrow .dk-claim {
    display: none;
  }
}

#messages-view p.split-parent {
  font-weight: 800;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) {
  #messages-view p.split-parent {
    font-size: 40px;
    line-height: 1.15;
  }
}

/* Vorschläge als Auswahlkarten (V01/V02) */
#messages-view button[class*='max-w-[16rem]'] {
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius);
  color: var(--text-primary);
  font-size: 14px;
  text-align: left;
  padding: 14px 16px;
  transition: border-color 0.15s, background 0.15s;
}
#messages-view button[class*='max-w-[16rem]']:hover {
  border-color: var(--dk-brand);
  background: var(--dk-soft);
}

/* Eingabefeld als Karte mit orangem Fokus */
#messages-view form [class*='rounded-t-3xl'] {
  background: var(--dk-card);
  border-color: var(--dk-line);
  border-radius: var(--dk-radius);
  box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04);
}
#messages-view form:focus-within [class*='rounded-t-3xl'] {
  border-color: var(--dk-brand);
  box-shadow: 0 0 0 3px rgba(242, 107, 29, 0.15);
}
#send-button {
  background: var(--dk-brand);
  color: #fff;
}
#send-button svg,
#send-button path {
  color: #fff;
}
#send-button:hover:not(:disabled) {
  background: var(--dk-brand-strong);
}
#send-button:disabled {
  opacity: 0.35;
}

/* Aktive Werkzeuge (Dateisuche usw.) als orange Chips statt grün */
#messages-view form button[class*='border-green-600'] {
  border-color: rgba(242, 107, 29, 0.55);
  background: var(--dk-soft);
  color: var(--text-primary);
}
#messages-view form button[class*='border-green-600'] svg {
  color: var(--dk-brand);
}

/* Modellauswahl und Kopfzeilen-Knöpfe */
#messages-view main button[class*='rounded-xl'][class*='border-border-light'] {
  border-radius: 10px;
}
#messages-view main button[class*='rounded-xl'][class*='border-border-light']:hover {
  border-color: var(--dk-brand);
}

/* ------------------------------------------------------------------ */
/* Anmeldeseite: Titelbild links (V02), Formular rechts                */
/* ------------------------------------------------------------------ */

.dk-auth #root > div {
  display: grid;
  grid-template-columns: minmax(360px, 42%) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.dk-auth #root > div > :not(.dk-hero) {
  grid-column: 2;
}
.dk-auth #root > div > div.bg-cover {
  display: none; /* Logo über dem Formular: steht im Titelbild */
}
.dk-auth main {
  grid-row: 2;
}
.dk-auth main h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dk-auth main > div {
  background: transparent;
}
.dk-auth main .dk-eyebrow {
  text-align: center;
}

.dk-hero {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  overflow: hidden;
  background: #121315;
  color: #f1f1f2;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
}
.dk-hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.dk-hero-brand img {
  height: 46px;
  width: auto;
}
.dk-hero-brand .dk-wordmark {
  font-size: 24px;
}
.dk-hero-text {
  margin-top: 18vh;
  position: relative;
  z-index: 2;
}
.dk-hero-text h2 {
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  color: #fff;
}
.dk-hero-text h2 i {
  font-style: normal;
  color: var(--dk-brand);
}
.dk-hero-text p {
  font-size: 19px;
  line-height: 1.6;
  color: #c9cbd0;
  margin: 0;
}
.dk-hero-mark {
  position: absolute;
  right: 6%;
  bottom: 4%;
  width: 34%;
  opacity: 0.55;
  z-index: 1;
}
.dk-hero-mark img {
  width: 100%;
  height: auto;
}
.dk-hero-circle {
  position: absolute;
  left: -38%;
  bottom: -46%;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, #ff7a2a 0%, #f26b1d 45%, #c24e0a 100%);
  z-index: 0;
}

@media (max-width: 860px) {
  .dk-auth #root > div {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
  .dk-auth #root > div > :not(.dk-hero) {
    grid-column: 1;
  }
  .dk-auth main {
    grid-row: 3;
  }
  .dk-hero {
    grid-row: 1;
    padding: 22px 20px 26px;
  }
  .dk-hero-text {
    margin-top: 22px;
  }
  .dk-hero-text h2 {
    font-size: 38px;
    margin-bottom: 0;
  }
  .dk-hero-text p,
  .dk-hero-mark {
    display: none;
  }
  .dk-hero-circle {
    left: auto;
    right: -70px;
    bottom: -120px;
    width: 220px;
  }
}

/* Spracheingabe bzw. Vorlesen auf der Plattform abgeschaltet (dk-init.js): Knöpfe ausblenden */
.dk-no-stt #audio-recorder {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Menüs und Dialoge: Karten mit Radius 14 px, orange Hervorhebung     */
/* ------------------------------------------------------------------ */

.popover-ui,
[role='menu'],
[role='listbox'] {
  border-radius: 12px;
  border: 1px solid var(--dk-line);
  box-shadow: 0 8px 24px rgba(22, 24, 29, 0.12);
}
[role='menuitem']:hover,
[role='menuitem'][data-active-item],
[role='option'][data-active-item],
[role='option']:hover {
  background: var(--dk-soft);
}
[role='menuitem'][aria-checked='true'] svg,
[role='option'][aria-selected='true'] svg {
  color: var(--dk-brand);
}
[role='dialog'] {
  border-radius: var(--dk-radius);
}
[role='dialog'] h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Einstellungen: aktiver Reiter orange (wie V03) */
[role='dialog'] [role='tab'][data-state='active'],
[role='dialog'] [role='tab'][aria-selected='true'] {
  color: var(--dk-brand);
  background: var(--dk-soft);
}
/* Schalter „an“ in Markenfarbe */
button[role='switch'][data-state='checked'],
button[role='switch'][aria-checked='true'] {
  background-color: var(--dk-brand);
}

/* „Aus der Dateiablage“ (dk-dateiablage.js): Menüpunkt der Büroklammer und Auswahldialog */
.dk-da-menu-icon svg,
.dk-da-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dk-da-menu-icon {
  display: inline-flex;
  margin-right: 0.5rem;
}
.dk-da-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 11, 13, 0.55);
}
.dk-da-dialog {
  display: flex;
  flex-direction: column;
  width: min(42rem, 100%);
  max-height: min(40rem, calc(100vh - 2rem));
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius);
  background: var(--surface-dialog, var(--surface-primary));
  color: var(--text-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-size: 0.875rem;
}
.dk-da-overlay button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dk-da-overlay button:focus-visible {
  outline: 2px solid var(--dk-brand);
  outline-offset: 2px;
}
.dk-da-overlay input,
.dk-da-overlay select {
  font: inherit;
}
.dk-da-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}
.dk-da-kopf h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.dk-da-overlay .dk-da-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-secondary);
}
.dk-da-overlay .dk-da-x:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.dk-da-leiste {
  padding: 0.25rem 1.25rem 0.5rem;
}
.dk-da-suche {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  background: var(--surface-primary);
  color: var(--text-primary);
}
.dk-da-suche:focus {
  outline: 2px solid var(--dk-brand);
  outline-offset: 0;
  border-color: transparent;
}
.dk-da-pfad {
  padding: 0 1.25rem 0.5rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow-x: auto;
}
.dk-da-pfad button {
  color: var(--dk-link, var(--dk-brand));
}
.dk-da-pfad button:hover {
  text-decoration: underline;
}
.dk-da-pfad button[aria-current] {
  color: var(--text-primary);
  font-weight: 600;
}
.dk-da-liste {
  flex: 1;
  min-height: 12rem;
  overflow-y: auto;
  margin: 0 0.75rem;
  border-top: 1px solid var(--dk-line);
  border-bottom: 1px solid var(--dk-line);
}
.dk-da-zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
}
.dk-da-zeile:hover {
  background: var(--surface-hover);
}
.dk-da-zeile.dk-da-gewaehlt {
  background: var(--dk-soft, var(--surface-active));
}
.dk-da-zeile input {
  accent-color: var(--dk-brand);
  width: 1rem;
  height: 1rem;
  flex: none;
}
.dk-da-icon {
  display: inline-flex;
  flex: none;
  color: var(--text-secondary);
}
.dk-da-ist-ordner .dk-da-icon {
  color: var(--dk-brand);
}
.dk-da-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dk-da-ist-ordner .dk-da-name:hover {
  color: var(--dk-link, var(--dk-brand));
  text-decoration: underline;
}
.dk-da-meta {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.dk-da-meldung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  color: var(--text-secondary);
  text-align: center;
}
.dk-da-meldung small {
  font-size: 0.75rem;
}
.dk-da-hinweis {
  margin: 0;
  padding: 0.6rem 1.25rem 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
}
.dk-da-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
}
.dk-da-info {
  flex: 1;
  min-width: 8rem;
  color: var(--text-secondary);
}
.dk-da-ziel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
}
.dk-da-ziel select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  background: var(--surface-primary);
  color: var(--text-primary);
}
.dk-da-overlay .dk-da-abbrechen,
.dk-da-overlay .dk-da-ok,
.dk-da-overlay .dk-da-anmelden {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-weight: 600;
}
.dk-da-overlay .dk-da-abbrechen {
  border: 1px solid var(--border-medium);
}
.dk-da-abbrechen:hover {
  background: var(--surface-hover);
}
.dk-da-overlay .dk-da-ok,
.dk-da-overlay .dk-da-anmelden {
  background: var(--dk-brand);
  color: #fff;
}
.dk-da-overlay .dk-da-ok:hover,
.dk-da-overlay .dk-da-anmelden:hover {
  background: var(--dk-brand-strong);
}
.dk-da-overlay .dk-da-ok:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .dk-da-overlay {
    padding: 0;
    align-items: stretch;
  }
  .dk-da-dialog {
    max-height: none;
    border-radius: 0;
  }
  .dk-da-meta {
    display: none;
  }
}

/* Knöpfe oben rechts (dk-kopf.js): Verwaltung, Dateien & Office, Agenten – je nach Rolle */
.dk-kopf {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 30;
  display: flex;
  gap: 6px;
}
.dk-kopf-link {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dk-kopf-link:hover {
  background: var(--surface-hover);
  border-color: var(--dk-brand);
}
.dk-kopf-link:focus-visible {
  outline: 2px solid var(--dk-brand);
  outline-offset: 2px;
}
.dk-kopf-link svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--dk-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* schmal: nur Symbole, unter der Kopfleiste */
.dk-kopf.dk-kopf-schmal {
  top: 56px;
}
@media (max-width: 1100px) {
  .dk-kopf-link {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .dk-kopf-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}