/*
 * 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: 242 107 29;
  --ring-primary: 242 107 29;
  --presentation: 247 247 248;
  --text-primary: 22 24 29;
  --text-secondary: 95 101 112;
  --surface-primary: 255 255 255;
  --surface-secondary: 255 255 255;
  --surface-chat: 255 255 255;
  --surface-active: 255 243 234;
  --surface-submit: 242 107 29;
  --surface-submit-hover: 226 90 12;
  --border-light: 228 229 232;
  --border-medium: 214 216 220;
  --border-medium-alt: 214 216 220;
  --dk-card: #ffffff;
  --dk-soft: #fff3ea;
  --dk-line: #e4e5e8;
  --dk-link: #c24e0a;
}

html.dark {
  --brand-purple: 242 107 29;
  --ring-primary: 242 107 29;
  --presentation: 18 19 21;
  --text-primary: 241 241 242;
  --text-secondary: 163 166 173;
  --text-secondary-alt: 139 142 149;
  --header-primary: #1b1c1f;
  --header-hover: #26282c;
  --header-button-hover: #26282c;
  --surface-active: 46 31 21;
  --surface-active-alt: 43 45 49;
  --surface-hover: 38 40 44;
  --surface-hover-alt: 43 45 49;
  --surface-primary: 18 19 21;
  --surface-primary-alt: 22 23 26;
  --surface-primary-contrast: 22 23 26;
  --surface-secondary: 27 28 31;
  --surface-secondary-alt: 27 28 31;
  --surface-tertiary: 35 36 40;
  --surface-tertiary-alt: 35 36 40;
  --surface-dialog: 27 28 31;
  --surface-chat: 27 28 31;
  --surface-submit: 242 107 29;
  --surface-submit-hover: 226 90 12;
  --border-light: 45 47 52;
  --border-medium: 58 60 66;
  --border-medium-alt: 58 60 66;
  --border-heavy: 74 77 84;
  --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: rgb(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: rgb(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: 22 23 26;
  --surface-primary: 22 23 26;
  --surface-secondary: 31 32 36;
  --surface-hover: 38 40 44;
  --surface-active-alt: 58 36 22;
  --surface-active: 58 36 22;
  --text-primary: 241 241 242;
  --text-secondary: 163 166 173;
  --border-light: 42 44 49;
  --border-medium: 52 54 60;
  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);
}
/* Symbole mit festem „text-black dark:text-white“ (z. B. „Neuer Chat“ neben „Chats“) wären auf der immer dunklen
   Seitenleiste im hellen Modus schwarz – sie nehmen die Farbe ihres Knopfes (text-secondary, beim Darüberfahren hell) */
#root aside svg.text-black {
  color: currentColor;
}
#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: rgb(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: rgb(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;
}

/* Abgelehnte Anmeldung (dk-branding.js zugangFehlt): Erklärung über dem Knopf „Firmen-Login“ */
.dk-zugang {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--dk-line);
  border-left: 3px solid var(--dk-brand);
  border-radius: var(--dk-radius);
  background: var(--dk-soft);
  color: rgb(var(--text-primary));
  font-size: 14px;
  line-height: 1.45;
}
.dk-zugang b {
  display: block;
  margin-bottom: 4px;
}
.dk-zugang p {
  margin: 0 0 8px;
  color: rgb(var(--text-secondary));
}
.dk-zugang a {
  color: var(--dk-link);
  font-weight: 600;
}
/* Kein Modell freigegeben (dk-branding.js ohneModell): über dem Eingabefeld der Startseite */
.dk-ohne-modell {
  margin: 0 auto 12px;
  width: 100%;
  max-width: 560px;
  text-align: left;
}
.dk-ohne-modell p {
  margin: 0;
}
/* Abgelaufene Anmeldung im Chat (dk-branding.js anmeldungAbgelaufen): ersetzt den rohen Fehler im Verlauf */
.dk-abgelaufen {
  margin: 8px 0;
  max-width: 560px;
}

.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: rgb(var(--surface-dialog, var(--surface-primary)));
  color: rgb(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: rgb(var(--text-secondary));
}
.dk-da-overlay .dk-da-x:hover {
  background: rgb(var(--surface-hover));
  color: rgb(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 rgb(var(--border-medium));
  border-radius: 10px;
  background: rgb(var(--surface-primary));
  color: rgb(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: rgb(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: rgb(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: rgb(var(--surface-hover));
}
.dk-da-zeile.dk-da-gewaehlt {
  background: var(--dk-soft, rgb(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: rgb(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: rgb(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: rgb(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: rgb(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: rgb(var(--text-secondary));
}
.dk-da-ziel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgb(var(--text-secondary));
}
.dk-da-ziel select {
  padding: 0.35rem 0.5rem;
  border: 1px solid rgb(var(--border-medium));
  border-radius: 8px;
  background: rgb(var(--surface-primary));
  color: rgb(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 rgb(var(--border-medium));
}
.dk-da-abbrechen:hover {
  background: rgb(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;
}
/* Bildschirm teilen (dk-bildschirm.js) – Dialog wie „Aus der Dateiablage“, Vorschau mit Ausschnitt */
.dk-bs-dialog {
  width: min(64rem, 100%);
  max-height: calc(100vh - 2rem);
}
.dk-bs-tipp {
  margin: 0;
  padding: 0 1.25rem 0.5rem;
  color: rgb(var(--text-secondary));
}
.dk-bs-flaeche {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 0;
  margin: 0 1.25rem;
  overflow: hidden;
  border: 1px solid var(--dk-line);
  border-radius: 10px;
  background: rgb(var(--surface-secondary));
}
.dk-bs-bild {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 17rem);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.dk-bs-rahmen {
  position: absolute;
  border: 2px solid var(--dk-brand);
  border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(10, 11, 13, 0.45);
  pointer-events: none;
}
/* App & Benachrichtigungen (dk-push.js) – Dialog wie „Aus der Dateiablage“ */
.dk-push-dialog {
  width: min(32rem, 100%);
}
.dk-push-inhalt {
  overflow-y: auto;
  padding: 0 1.25rem 0.25rem;
}
.dk-push-laden {
  color: rgb(var(--text-secondary));
}
.dk-push-teil {
  padding: 0.75rem 0;
  border-top: 1px solid var(--dk-line);
}
.dk-push-teil:first-child {
  border-top: 0;
  padding-top: 0.25rem;
}
.dk-push-teil h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-secondary));
}
.dk-push-teil p {
  margin: 0 0 0.5rem;
}
.dk-push-teil .dk-da-hinweis {
  padding: 0.5rem 0 0;
}
.dk-push-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dk-da-overlay .dk-push-installieren {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-weight: 600;
}
.dk-push-arten {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dk-push-art {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}
.dk-push-art:hover {
  background: rgb(var(--surface-hover));
}
.dk-push-art input {
  accent-color: var(--dk-brand);
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  flex: none;
}
.dk-push-art span,
.dk-push-geraete li span {
  display: flex;
  flex-direction: column;
}
.dk-push-art small,
.dk-push-geraete small {
  color: rgb(var(--text-secondary));
}
.dk-push-geraete {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dk-push-geraete li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
}
.dk-da-overlay .dk-push-entfernen {
  color: var(--dk-link, var(--dk-brand));
}
.dk-da-overlay .dk-push-entfernen:hover {
  text-decoration: underline;
}
.dk-push-meldung {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: rgb(var(--text-secondary));
}
.dk-push-fehler {
  color: #d64545;
}
/* Desktop-App koppeln (dk-desktop.js) – Dialog wie „App & Benachrichtigungen“, Code in Kästchen wie Mockup
   docs/design/mockups/desktop-app/ (Szene „Taskleiste & Einrichtung“) */
.dk-desktop-dialog {
  width: min(34rem, 100%);
}
.dk-desktop-inhalt {
  overflow-y: auto;
  padding: 0 1.25rem 0.5rem;
}
.dk-desktop-lead {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  color: rgb(var(--text-secondary));
  line-height: 1.5;
}
.dk-desktop-lead-icon {
  display: inline-flex;
  flex: none;
  margin-top: 0.1rem;
  color: var(--dk-brand);
}
.dk-desktop-lead kbd {
  display: inline-block;
  padding: 0 0.3rem;
  border: 1px solid rgb(var(--border-medium));
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgb(var(--surface-secondary));
  color: rgb(var(--text-primary));
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dk-desktop-inhalt svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}
.dk-desktop-laden,
.dk-desktop-leise,
.dk-desktop-leer {
  color: rgb(var(--text-secondary));
}
.dk-desktop-teil {
  padding: 0.75rem 0;
  border-top: 1px solid var(--dk-line);
}
.dk-desktop-teil h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-secondary));
}
.dk-desktop-teil p {
  margin: 0 0 0.6rem;
}
.dk-da-overlay .dk-desktop-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.dk-da-overlay a.dk-da-ok:focus-visible {
  outline: 2px solid var(--dk-brand);
  outline-offset: 2px;
}
.dk-desktop-code-bereich {
  margin-bottom: 0.75rem;
}
.dk-desktop-code-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.dk-desktop-code {
  display: flex;
  gap: clamp(0.3rem, 1.5vw, 0.5rem);
}
.dk-desktop-code span {
  display: grid;
  place-items: center;
  width: clamp(1.75rem, 7.4vw, 3rem);   /* 8 Kästchen passen auch bei 375 px */
  height: clamp(2.25rem, 9.5vw, 3.25rem);
  border: 1px solid var(--dk-line);
  border-radius: 10px;
  background: var(--dk-card);
  color: rgb(var(--text-primary));
  font-size: clamp(1rem, 4.4vw, 1.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dk-desktop-code em {
  align-self: center;
  color: rgb(var(--text-secondary));
  font-style: normal;
}
.dk-desktop-abgelaufen .dk-desktop-code {
  opacity: 0.4;
}
.dk-desktop-abgelaufen .dk-desktop-ablauf {
  color: var(--dk-ds-rot);
}
.dk-desktop-ablauf {
  margin: 0.5rem 0 0.75rem !important;
  color: rgb(var(--text-secondary));
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.dk-da-overlay .dk-desktop-kopieren {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgb(var(--border-medium));
  border-radius: 10px;
  font-weight: 600;
}
.dk-da-overlay .dk-desktop-kopieren:hover {
  background: rgb(var(--surface-hover));
}
.dk-da-overlay .dk-desktop-kopieren:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.dk-desktop-adresse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--dk-line);
  border-radius: 10px;
  background: var(--dk-card);
}
.dk-desktop-adresse-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dk-desktop-adresse-text small {
  color: rgb(var(--text-secondary));
  font-size: 0.75rem;
}
.dk-desktop-adresse-text b {
  overflow-wrap: anywhere;
}
.dk-desktop-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dk-desktop-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
}
.dk-desktop-liste li + li {
  border-top: 1px solid var(--dk-line);
}
.dk-desktop-geraet-icon {
  display: inline-flex;
  color: rgb(var(--text-secondary));
}
.dk-desktop-geraet {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 10rem;
}
.dk-desktop-geraet b {
  overflow-wrap: anywhere;
}
.dk-desktop-geraet small {
  color: rgb(var(--text-secondary));
}
.dk-desktop-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 0.75rem;
  margin-left: auto;
}
.dk-desktop-frage {
  color: rgb(var(--text-secondary));
}
.dk-da-overlay .dk-desktop-entfernen,
.dk-da-overlay .dk-desktop-nein {
  color: var(--dk-link, var(--dk-brand));
}
.dk-da-overlay .dk-desktop-ja {
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  background: var(--dk-ds-rot-soft);
  color: var(--dk-ds-rot);
  font-weight: 600;
}
.dk-da-overlay .dk-desktop-entfernen:hover,
.dk-da-overlay .dk-desktop-nein:hover {
  text-decoration: underline;
}
.dk-desktop-callout {
  display: flex;
  gap: 0.6rem;
  margin: 0.25rem 0 0.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--dk-soft);
  color: rgb(var(--text-primary));
  font-size: 0.8rem;
  line-height: 1.45;
}
.dk-desktop-callout svg {
  margin-top: 0.1rem;
  color: var(--dk-brand);
}
.dk-desktop-callout b {
  color: var(--dk-link);
}
.dk-desktop-aus {
  margin: 0.5rem 0;
  padding: 0.75rem;
  border: 1px solid var(--dk-line);
  border-radius: 10px;
  color: rgb(var(--text-secondary));
}
.dk-desktop-fehler {
  color: var(--dk-ds-rot);
}
@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;
  }
}

/* Linke Symbolleiste (dk-kopf.js): Verwaltung, Dateien & Office, Agenten, Workflows – je nach Rolle */
.dk-rail { display: flex; flex-direction: column; gap: 4px; }
.dk-rail-trenner { margin: 4px 8px; border-bottom: 1px solid rgb(var(--border-light)); }
.dk-rail-link {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px;
  color: rgb(var(--text-secondary)); transition: background-color .1s, color .1s;
}
.dk-rail-link:hover { background: rgb(var(--surface-hover)); color: var(--dk-brand, #f26b1d); }
.dk-rail-link:focus-visible { outline: 2px solid var(--dk-brand, #f26b1d); outline-offset: 1px; }
.dk-rail-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* Knöpfe oben rechts (dk-kopf.js, nur ohne linke Symbolleiste): 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 rgb(var(--border-light));
  border-radius: 10px;
  background: rgb(var(--surface-primary));
  color: rgb(var(--text-primary));
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dk-kopf-link:hover {
  background: rgb(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;
}
/* Handy: in der Kopfzeile vor „Neuer Chat“ und „…“ (dk-kopf.js) – etwas kleiner als deren Knöpfe (36 px); die
   Profil-Auswahl links schrumpft dafür und wird abgeschnitten statt unter die Knöpfe zu laufen */
.dk-kopf.dk-kopf-zeile {
  position: static;
  gap: 4px;
  flex-shrink: 0;
}
.dk-kopf.dk-kopf-zeile .dk-kopf-link {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}
.dk-kopf.dk-kopf-zeile .dk-kopf-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 767px) {
  div[class*="h-[52px]"]:has(.dk-kopf-zeile) > div.min-w-0.flex-1 {
    overflow: hidden;
  }
}
/* „Weitere“ (mehr als drei Oberflächen): nur in der Kopfzeile am Handy; sonst stehen alle Knöpfe in einer Reihe */
.dk-kopf-weitere { display: contents; }
.dk-kopf-mehr { display: none; font: inherit; cursor: pointer; }
.dk-kopf-mehr svg { stroke-width: 3; }
.dk-kopf.dk-kopf-zeile.dk-kopf-viele { position: relative; }
.dk-kopf.dk-kopf-zeile.dk-kopf-viele .dk-kopf-mehr { display: inline-flex; }
.dk-kopf.dk-kopf-zeile.dk-kopf-viele .dk-kopf-weitere {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgb(var(--border-light));
  border-radius: 12px;
  background: rgb(var(--surface-primary));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.dk-kopf.dk-kopf-zeile.dk-kopf-offen .dk-kopf-weitere { display: flex; }
.dk-kopf.dk-kopf-zeile .dk-kopf-weitere .dk-kopf-link {
  width: auto;
  height: 36px;
  padding: 0 12px;
  justify-content: flex-start;
  border-color: transparent;
  white-space: nowrap;
}
.dk-kopf.dk-kopf-zeile .dk-kopf-weitere .dk-kopf-link span { position: static; width: auto; height: auto; clip: auto; }
@media (max-width: 359px) {
  .dk-kopf.dk-kopf-zeile { gap: 2px; }
  .dk-kopf.dk-kopf-zeile .dk-kopf-link { width: 28px; height: 28px; }
}
/* schmal, wenn sie ein Bedienelement verdecken (aufgeklappte Seitenleiste: „Neuer Chat“): ausweichen – unsichtbar,
   aber mit Maßen, damit dk-kopf.js weiter prüfen kann, ob darunter wieder frei ist */
.dk-kopf.dk-kopf-verdeckt {
  visibility: hidden;
  pointer-events: none;
}
@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);
  }
}

/* Hochladen in Alltagssprache (dk-hochladen.js) */
[data-dk-versteckt] { display: none !important; }
[data-dk-hl-titel] { font-size: 0 !important; }
[data-dk-hl-titel]::after { content: "Datei hochladen"; font-size: 1.125rem; line-height: 1.75rem; }
.dk-hl-knopf { width: 100%; text-align: left; }
.dk-hl-knopf .dk-da-menu-icon { display: inline-flex; width: 18px; height: 18px; }
.dk-hl-knopf .dk-da-menu-icon svg { width: 18px; height: 18px; }
.dk-hl-hinweis { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 12px; background: rgb(var(--surface-primary)); color: rgb(var(--text-primary));
  border: 1px solid rgb(var(--border-medium)); box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: 14px; }
.dk-hl-hinweis a { color: #f26b1d; text-decoration: underline; word-break: break-all; }
.dk-hl-hinweis.dk-hl-fehler { border-color: #d64545; }

/* PDF-Vorschau ohne PDF-Anzeige im Browser (dk-pdf.js, Chrome auf Android) */
.dk-pdf-hinweis { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px;
  border: 1px solid rgba(242, 107, 29, .35); border-radius: var(--dk-radius, 14px); background: var(--dk-soft, #fff3ea);
  color: rgb(var(--text-primary)); font-size: 14px; line-height: 1.5; }
.dk-pdf-hinweis p { margin: 0; }
.dk-pdf-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 0;
  border-radius: 10px; background: var(--dk-brand, #f26b1d); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.dk-pdf-knopf:hover { background: var(--dk-brand-strong, #e25a0c); }
.dk-pdf-knopf:focus-visible { outline: 2px solid var(--dk-brand, #f26b1d); outline-offset: 2px; }
.dk-pdf-knopf svg { width: 18px; height: 18px; }

/* Datenschutz-Abzeichen unter dem Eingabefeld (dk-datenschutz.js) – Mockup docs/design/mockups/datenschutz-abzeichen.html */
html:not(.dark) { --dk-ds-lokal: #15803d; --dk-ds-lokal-soft: #ecfdf3; --dk-ds-eu: #003399; --dk-ds-eu-soft: #eef2fb;
  --dk-ds-welt: #b45309; --dk-ds-welt-soft: #fff7e8; --dk-ds-rot: #b91c1c; --dk-ds-rot-soft: #fdeeee; }
html.dark { --dk-ds-lokal: #4ade80; --dk-ds-lokal-soft: #12261a; --dk-ds-eu: #8fb0ff; --dk-ds-eu-soft: #17203a;
  --dk-ds-welt: #fbbf24; --dk-ds-welt-soft: #2a2110; --dk-ds-rot: #f87171; --dk-ds-rot-soft: #2c1515; }
.dk-ds-abz { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 6px; border-radius: 11px;
  font: 500 12px/1 Inter, system-ui, sans-serif; border: 1px solid transparent; white-space: nowrap; }
.dk-ds-abz svg { width: 14px; height: 14px; flex: none; }
.dk-ds-abz b { font-weight: 700; }
.dk-ds-abz.lokal { color: var(--dk-ds-lokal); background: var(--dk-ds-lokal-soft); }
.dk-ds-abz.eu { color: var(--dk-ds-eu); background: var(--dk-ds-eu-soft); }
/* eigener KI-Server mit öffentlicher Adresse (gemietete GPU): wie EU, im Klartext mit Rahmen */
.dk-ds-abz.extern { color: var(--dk-ds-eu); background: var(--dk-ds-eu-soft); }
.dk-ds-abz.extern.klar { border-color: var(--dk-ds-eu); }
.dk-ds-abz.eu.klar { border-color: var(--dk-ds-eu); }
.dk-ds-abz.welt { color: var(--dk-ds-welt); background: var(--dk-ds-welt-soft); }
.dk-ds-abz.welt.klar { color: var(--dk-ds-rot); background: var(--dk-ds-rot-soft); border-color: var(--dk-ds-rot); font-weight: 600; }
.dk-ds-fest { position: fixed; z-index: 40; cursor: pointer; }
.dk-ds-fest:focus-visible { outline: 2px solid var(--dk-brand); outline-offset: 2px; }
.dk-ds-karte { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: 14px 16px;
  background: var(--dk-card); color: inherit; border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font: 13px/1.45 Inter, system-ui, sans-serif; }
html:not(.dark) .dk-ds-karte { color: #16181d; }
html.dark .dk-ds-karte { color: #f1f1f2; }
.dk-ds-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.dk-ds-zu { border: 0; background: none; color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.dk-ds-zu:hover { opacity: 1; }
.dk-ds-karte dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 10px; margin: 0; }
.dk-ds-karte dt { opacity: .65; }
.dk-ds-karte dd { margin: 0; overflow-wrap: anywhere; }
.dk-ds-warn { margin: 12px 0 0; padding: 9px 11px; border-radius: 10px; background: var(--dk-ds-rot-soft); color: var(--dk-ds-rot); }
.dk-ds-link { display: inline-block; margin-top: 10px; color: var(--dk-link); text-decoration: none; }
.dk-ds-link:hover { text-decoration: underline; }

/* Gründlichkeit je Chat (dk-denken.js): Schnell · Normal · Gründlich rechts unter dem Eingabefeld, Maße wie das
   Datenschutz-Abzeichen */
.dk-dk-leiste { position: fixed; z-index: 40; display: inline-flex; align-items: center; height: 22px; padding: 0 2px 0 6px;
  border: 1px solid var(--dk-line); border-radius: 11px; background: var(--dk-card); white-space: nowrap;
  font: 500 12px/1 Inter, system-ui, sans-serif; color: rgb(var(--text-secondary)); }
.dk-dk-symbol { display: inline-flex; margin-right: 2px; }
.dk-dk-symbol svg { width: 14px; height: 14px; }
.dk-dk-leiste button { height: 18px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: inherit;
  font: inherit; cursor: pointer; }
.dk-dk-leiste button:hover { color: rgb(var(--text-primary)); }
.dk-dk-leiste button[aria-checked="true"] { background: var(--dk-soft); color: var(--dk-link); font-weight: 600; }
.dk-dk-leiste button:focus-visible { outline: 2px solid var(--dk-brand); outline-offset: 1px; }
.dk-dk-leiste.eng { padding-left: 2px; }
.dk-dk-leiste.eng .dk-dk-symbol { display: none; }
.dk-dk-leiste.eng button { padding: 0 6px; }
@media print { .dk-dk-leiste { display: none; } }

/* Eigene Elemente mit „hidden“ immer ausblenden: Klassen wie .dk-ds-abz setzen display und hoben das ab LibreChat 0.8.8
   auf (dessen [hidden] hat kein !important) – z. B. stand das Datenschutz-Abzeichen dann über dem Chatverlauf am Handy */
[class^="dk-"][hidden], [class*=" dk-"][hidden] { display: none !important; }
/* Live-Gespräch (dk-sprachagent.js): Knopf neben dem Mikrofon, Fenster mit Kugel, Mitschrift und Hinweis */
.dk-sa-knopf:not([class*="rounded"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: rgb(var(--text-secondary));
}
/* steht in der Zeile unter dem Feld neben Mikrofon und Senden (nicht in deren Hülle) – nie zusammendrücken */
.dk-sa-knopf {
  flex-shrink: 0;
}
.dk-sa-knopf:hover {
  color: var(--dk-brand);
}
.dk-sa-dialog {
  width: min(28rem, 100%);
}
.dk-sa-profil {
  font-weight: 400;
  color: rgb(var(--text-secondary));
}
.dk-sa-mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 1.25rem 0.5rem;
}
.dk-sa-kugel {
  --dk-sa-pegel: 0;
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0.5rem 0 0.75rem;
}
.dk-sa-kugel span {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #ffb27f, var(--dk-brand) 55%, var(--dk-brand-strong));
  transform: scale(calc(0.86 + var(--dk-sa-pegel) * 0.22));
  transition: transform 90ms linear, background 300ms, opacity 300ms;
  box-shadow: 0 0 0 calc(var(--dk-sa-pegel) * 18px) rgba(242, 107, 29, 0.18);
}
.dk-sa-kugel[data-zustand="verbinden"] span,
.dk-sa-kugel[data-zustand="initializing"] span,
.dk-sa-kugel[data-zustand="stumm"] span,
.dk-sa-kugel[data-zustand="ende"] span {
  background: radial-gradient(circle at 35% 30%, #c9cbd0, #8b8e95 60%, #6b6e75);
}
.dk-sa-kugel[data-zustand="verbinden"] span,
.dk-sa-kugel[data-zustand="initializing"] span {
  animation: dk-sa-atmen 1.6s ease-in-out infinite;
}
.dk-sa-kugel[data-zustand="thinking"]::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 3px solid transparent;
  border-top-color: var(--dk-brand);
  animation: dk-sa-drehen 1s linear infinite;
}
.dk-sa-kugel[data-zustand="fehler"] span {
  background: radial-gradient(circle at 35% 30%, #f3b0a8, #d14b3c 60%, #a8382c);
}
@keyframes dk-sa-atmen {
  50% { transform: scale(0.94); opacity: 0.7; }
}
@keyframes dk-sa-drehen {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-sa-kugel span, .dk-sa-kugel::after { animation: none !important; transition: none; }
}
.dk-sa-zustand {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.dk-sa-zustand.dk-sa-tippen {
  color: var(--dk-link);
  text-decoration: underline;
  cursor: pointer;
}
.dk-sa-zeit {
  min-height: 1.1em;
  margin: 0;
  color: rgb(var(--text-secondary));
  font-size: 0.8rem;
}
.dk-sa-mitschrift {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: 0 1.25rem;
}
.dk-sa-mitschrift:empty {
  display: none;
}
.dk-sa-zeile {
  max-width: 85%;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border-radius: 12px;
  line-height: 1.4;
}
.dk-sa-ich {
  align-self: flex-end;
  background: var(--dk-soft);
}
.dk-sa-ki {
  align-self: flex-start;
  border: 1px solid var(--dk-line);
}
.dk-sa-hinweis {
  list-style: disc;   /* LibreChat setzt Listen ohne Punkte */
  margin: 0.75rem 1.25rem 0;
  padding: 0.5rem 0.75rem 0.5rem 1.6rem;
  border-left: 3px solid var(--dk-brand);
  border-radius: 6px;
  background: var(--dk-soft);
  color: rgb(var(--text-secondary));
  font-size: 0.78rem;
  line-height: 1.45;
}
.dk-sa-fuss {
  justify-content: center;
}
.dk-da-overlay .dk-sa-stumm,
.dk-da-overlay .dk-sa-ende,
.dk-sa-chat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-weight: 600;
}
.dk-da-overlay .dk-sa-stumm {
  border: 1px solid rgb(var(--border-medium));
}
.dk-da-overlay .dk-sa-stumm[aria-pressed="true"] {
  border-color: var(--dk-brand);
  color: var(--dk-brand);
}
.dk-da-overlay .dk-sa-ende {
  background: #d14b3c;
  color: #fff;
}
.dk-da-overlay .dk-sa-ende:hover {
  background: #b53d30;
}
.dk-sa-chat {
  background: var(--dk-brand);
  color: #fff !important;
  text-decoration: none !important;
}
.dk-sa-stumm svg,
.dk-sa-ende svg {
  width: 1.1rem;
  height: 1.1rem;
}
.dk-sa-ton {
  display: none;
}

/* Bilder aus praesentation_vorlage_lesen und praesentation_entwurf sind nur fürs Modell (Blindtext); LibreChat speichert sie
   als Anhang der Antwort. Der Entwurf für die Person steht als eigenes Bild im Text. */
img[src*="-praesentation_vorlage_lesen_mcp_"], img[src*="-praesentation_entwurf_mcp_"],
:is(div, button, span):has(> img[src*="-praesentation_vorlage_lesen_mcp_"]),
:is(div, button, span):has(> img[src*="-praesentation_entwurf_mcp_"]),
:is(div, button, span):has(> :is(div, button, span) > img[src*="-praesentation_vorlage_lesen_mcp_"]),
:is(div, button, span):has(> :is(div, button, span) > img[src*="-praesentation_entwurf_mcp_"]) {
  display: none;
}
/* Ebenso die Vorschaubilder der Selbstkontrolle (Office bearbeiten, Code ausführen): Die Person sieht den Kontaktbogen
   bzw. die Diagramme als eigenes Bild im Text (docs/OFFICE-UND-CODE.md) */
img:is([src*="-office_ansehen_mcp_"], [src*="-ansehen_mcp_office"], [src*="-praesentation_bearbeiten_mcp_"], [src*="-tabelle_bearbeiten_mcp_"], [src*="-word_bearbeiten_mcp_"], [src*="-pdf_bearbeiten_mcp_"],
       [src*="-python_ausfuehren_mcp_"]),
:is(div, button, span):has(> img:is([src*="-office_ansehen_mcp_"], [src*="-ansehen_mcp_office"], [src*="-praesentation_bearbeiten_mcp_"],
                                    [src*="-tabelle_bearbeiten_mcp_"], [src*="-word_bearbeiten_mcp_"], [src*="-pdf_bearbeiten_mcp_"], [src*="-python_ausfuehren_mcp_"])),
:is(div, button, span):has(> :is(div, button, span) > img:is([src*="-office_ansehen_mcp_"], [src*="-ansehen_mcp_office"],
                           [src*="-praesentation_bearbeiten_mcp_"], [src*="-tabelle_bearbeiten_mcp_"], [src*="-word_bearbeiten_mcp_"], [src*="-pdf_bearbeiten_mcp_"],
                           [src*="-python_ausfuehren_mcp_"])) {
  display: none;
}

/* Fortschritt bei langen Schritten (dk-fortschritt.js): Zeile über dem Eingabefeld, solange eine Antwort läuft
   und eine Weile nichts Neues kommt */
.dk-fortschritt {
  position: fixed;
  z-index: 40;
  transform: translate(-50%, -100%);
  max-width: min(640px, 92vw);
  padding: 5px 12px 5px 26px;
  border: 1px solid var(--dk-line);
  border-radius: 999px;
  background: var(--dk-card);
  color: rgb(var(--text-secondary));
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.dk-fortschritt::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--dk-brand);
  animation: dk-fortschritt-puls 1.4s ease-in-out infinite;
}
.dk-fortschritt[hidden] { display: none; }
@keyframes dk-fortschritt-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dk-fortschritt::before { animation: none; } }
@media (max-width: 640px) { .dk-fortschritt { font-size: 12px; border-radius: 12px; } }

/* Werkzeugaufrufe im Klartext (dk-fortschritt.js klartextSetzen): Text von React bleibt im DOM, sichtbar ist das
   Attribut – „PowerPoint bearbeitet“ statt „praesentation_bearbeiten_mcp_office ausgeführt“ */
.dk-klartext { font-size: 0 !important; }
.dk-klartext::before {
  content: attr(data-dk-klartext);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Vorschau rechts (dk-vorschau.js): Dateien neben dem Chat – am breiten Bildschirm rückt der Chat nach links, am Handy
   Vollbild. Farben aus den Variablen des Brandings (hell/dunkel). */
html.dk-vs-offen:not(.dk-vs-vollbild) #root { margin-right: var(--dk-vs-breite, 0px); transition: margin-right .18s ease; }
html.dk-vs-ziehen, html.dk-vs-ziehen * { cursor: col-resize !important; user-select: none !important; }
.dk-vs { position: fixed; top: 0; right: 0; bottom: 0; width: var(--dk-vs-breite, 0px); z-index: 45; display: none;
  flex-direction: column; background: var(--dk-card, #fff); border-left: 1px solid var(--dk-line, #e4e5e8);
  color: rgb(var(--text-primary)); box-shadow: -6px 0 24px rgba(0, 0, 0, .06); }
html.dk-vs-offen .dk-vs { display: flex; }
html.dk-vs-vollbild .dk-vs { width: 100%; left: 0; z-index: 60; border-left: 0; }
.dk-vs-griff { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; }
html.dk-vs-vollbild .dk-vs-griff { display: none; }
.dk-vs-kopf { display: flex; align-items: center; gap: 6px; padding: 8px 8px 0 12px; border-bottom: 1px solid var(--dk-line, #e4e5e8); }
.dk-vs-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: thin; }
.dk-vs-tab { display: inline-flex; align-items: center; max-width: 220px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 8px 8px 0 0; padding: 0 2px 0 10px; margin-bottom: -1px; color: rgb(var(--text-secondary)); }
.dk-vs-tab.an { background: var(--dk-card, #fff); border-color: var(--dk-line, #e4e5e8); color: rgb(var(--text-primary)); }
.dk-vs-tabname { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;
  font-weight: 600; padding: 8px 4px; }
.dk-vs-tabzu, .dk-vs-zu { all: unset; cursor: pointer; display: inline-flex; padding: 6px; border-radius: 6px;
  color: rgb(var(--text-secondary)); }
.dk-vs-tabzu svg { width: 13px; height: 13px; } .dk-vs-zu svg { width: 18px; height: 18px; }
.dk-vs-tabzu:hover, .dk-vs-zu:hover { background: var(--surface-hover, rgba(127, 127, 127, .12)); }
.dk-vs-leiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--dk-line, #e4e5e8); }
.dk-vs-knopf { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; line-height: 1;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--dk-line, #e4e5e8); background: transparent;
  color: rgb(var(--text-primary)); text-decoration: none; cursor: pointer; }
.dk-vs-knopf:hover { background: var(--surface-hover, rgba(127, 127, 127, .1)); }
.dk-vs-knopf:disabled { opacity: .5; cursor: default; }
.dk-vs-knopf svg { width: 15px; height: 15px; flex: none; }
.dk-vs-meldung { margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: rgba(192, 57, 43, .1); color: #c0392b; }
.dk-vs-meldung.gut { background: rgba(46, 139, 87, .12); color: #2e8b57; }
html.dark .dk-vs-meldung { color: #ff8a80; } html.dark .dk-vs-meldung.gut { color: #4cc38a; }
.dk-vs-inhalt { flex: 1; overflow: auto; padding: 14px; background: rgb(var(--surface-secondary)); }
html.dark .dk-vs-inhalt { background: rgba(0, 0, 0, .18); }
.dk-vs-seite { margin: 0 auto 18px; max-width: 1100px; }
.dk-vs-seite img, .dk-vs-platz { display: block; width: 100%; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.dk-vs-platz { aspect-ratio: 1.414; display: flex; align-items: center; justify-content: center; font-size: 13px;
  color: #888; }
.dk-vs-seite figcaption { text-align: center; font-size: 12px; color: rgb(var(--text-secondary)); margin-top: 6px; }
.dk-vs-laden { padding: 40px 12px; text-align: center; color: rgb(var(--text-secondary)); font-size: 14px; }
.dk-vs-rahmen { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; border-radius: 6px; background: #fff; }
@media (max-width: 640px) { .dk-vs-knopf span { display: none; } .dk-vs-knopf { padding: 8px; } }

#send-button, #send-button svg, #send-button path, .dk-da-overlay .dk-da-ok, .dk-da-overlay .dk-da-anmelden, .dk-pdf-knopf { color:#000000; }
#send-button:hover:not(:disabled), #send-button:hover svg, #send-button:hover path, .dk-da-overlay .dk-da-ok:hover, .dk-da-overlay .dk-da-anmelden:hover, .dk-pdf-knopf:hover { color:#000000; }

.dk-company-logo { max-width: 160px; height: 44px; object-fit: contain; }
.dk-wordmark { overflow-wrap: anywhere; white-space:normal; min-width: 0; }
.dk-company { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dk-company img.dk-company-logo { max-width:100%; width:auto; object-position:left; }