/* --------------------------------------------------------------------------
   steuerstoff UI system
   One source of truth for tactile feedback, glass materials and shell-level
   visual consistency. This replaces the old repair/override stylesheet.
   -------------------------------------------------------------------------- */

:root {
  --ss-glass-bg: rgba(252, 249, 245, 0.78);
  --ss-glass-bg-strong: rgba(252, 249, 245, 0.9);
  --ss-glass-border: rgba(255, 255, 255, 0.7);
  --ss-glass-shadow: 0 12px 34px -24px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --ss-dialog-shadow: 0 28px 70px -34px rgba(15, 23, 42, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --ss-glass-blur: blur(22px) saturate(1.08);
  --ss-press-y: 1.25px;
  --ss-press-scale: 0.994;
  --ss-press-duration: 115ms;
}

.dark {
  --ss-glass-bg: rgba(24, 24, 30, 0.76);
  --ss-glass-bg-strong: rgba(24, 24, 30, 0.9);
  --ss-glass-border: rgba(255, 255, 255, 0.11);
  --ss-glass-shadow: 0 14px 38px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ss-dialog-shadow: 0 30px 72px -32px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Shared materials --------------------------------------------------------- */
.ss-glass-surface,
header.sticky {
  background: var(--ss-glass-bg);
  border-color: var(--ss-glass-border);
  box-shadow: var(--ss-glass-shadow);
  -webkit-backdrop-filter: var(--ss-glass-blur) !important;
  backdrop-filter: var(--ss-glass-blur) !important;
}

.ss-dialog-surface,
section[aria-labelledby="knowledge-paywall-title"] {
  background: var(--ss-glass-bg-strong);
  border: 1px solid var(--ss-glass-border);
  box-shadow: var(--ss-dialog-shadow);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
}

/* The post-onboarding login uses the same material while keeping its colored
   aura behind the card. */
[aria-labelledby="post-onboarding-login-title"] > section > div.relative {
  background: var(--ss-glass-bg-strong);
  border-color: var(--ss-glass-border);
  box-shadow: var(--ss-dialog-shadow);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
}

/* One tactile press model --------------------------------------------------
   Only the deepest actionable surface moves. A clickable card containing a
   real button/link therefore stays still while the control itself presses. */
:where(
  a[href][class*="rounded"],
  button[class*="rounded"],
  [role="button"][class*="rounded"],
  [role="link"][class*="rounded"]
):not(:disabled):not([aria-disabled="true"]):not([data-no-press="true"]):not(:has(a[href], button, [role="button"], [role="link"])) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition:
    transform var(--ss-press-duration) cubic-bezier(0.18, 0.86, 0.22, 1),
    filter var(--ss-press-duration) ease,
    box-shadow var(--ss-press-duration) ease,
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

:where(
  a[href][class*="rounded"],
  button[class*="rounded"],
  [role="button"][class*="rounded"],
  [role="link"][class*="rounded"]
):not(:disabled):not([aria-disabled="true"]):not([data-no-press="true"]):not(:has(a[href], button, [role="button"], [role="link"])):active {
  transform: translate3d(0, var(--ss-press-y), 0) scale(var(--ss-press-scale)) !important;
  filter: brightness(0.995) saturate(0.998);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.035), 0 1px 2px rgba(15, 23, 42, 0.02);
}

@media (hover: none) and (pointer: coarse) {
  :root {
    --ss-press-y: 1.5px;
    --ss-press-scale: 0.992;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    a[href][class*="rounded"],
    button[class*="rounded"],
    [role="button"][class*="rounded"],
    [role="link"][class*="rounded"]
  ) {
    transition-duration: 0.01ms;
  }
}

/* Chat surface normalization ----------------------------------------------
   These rules are intentionally scoped to the legacy chat wrapper and live
   here with the rest of the UI system instead of in a separate fix file. */
.chat-bg-deep {
  background: var(--color-background);
  color: var(--color-foreground);
}

.chat-bg-deep > .border-b {
  border-color: var(--color-border);
}

.chat-bg-deep > .border-b h1 {
  color: var(--color-foreground);
}

.chat-bg-deep > .border-b p {
  color: var(--color-muted-foreground);
}

.chat-bg-deep > .border-b button {
  border-color: var(--color-border);
  background: var(--color-card);
  color: var(--color-foreground);
}

.chat-bg-deep form[data-no-swipe="true"] {
  background: var(--color-background);
  border-color: var(--color-border);
}

.chat-bg-deep [data-no-swipe="true"] textarea,
.chat-bg-deep [data-no-swipe="true"] input,
.dark .chat-bg-deep [data-no-swipe="true"] textarea,
.dark .chat-bg-deep [data-no-swipe="true"] input {
  color: var(--color-foreground);
}

.chat-bg-deep [data-no-swipe="true"] textarea::placeholder,
.chat-bg-deep [data-no-swipe="true"] input::placeholder,
.dark .chat-bg-deep [data-no-swipe="true"] textarea::placeholder,
.dark .chat-bg-deep [data-no-swipe="true"] input::placeholder {
  color: var(--color-muted-foreground);
  opacity: 1;
}

.chat-bg-deep [data-msg].justify-start > div > .rounded-xl > p:last-child {
  white-space: pre-wrap;
  font-weight: 400;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .chat-bg-deep [data-msg].justify-start > div {
    min-height: 0;
    height: auto;
    background-color: var(--color-card);
    color: var(--color-card-foreground);
  }

  .chat-bg-deep [data-msg].justify-start > div .text-foreground {
    color: var(--color-card-foreground);
  }

  .chat-bg-deep [data-msg].justify-start > div .text-muted-foreground {
    color: var(--color-muted-foreground);
  }

  .chat-bg-deep [data-msg].justify-start > div .bg-foreground\/\[0\.04\] {
    background-color: color-mix(in oklab, var(--color-card-foreground) 4%, transparent);
  }
}

/* Legacy dark-berry palette normalization ---------------------------------
   Keep the current black hierarchy deterministic while older components are
   gradually moved to semantic tokens. No !important cascade is needed. */
[class*="text-[#5f2e47]"],
[class*="text-[#72435a]"],
[class*="text-[#864763]"],
[class*="text-[#6b3650]"],
[class*="text-[#7a4960]"],
[class*="text-[#6c4459]"],
[class*="text-[#735469]"] {
  color: #000000;
}

.dark [class*="text-[#5f2e47]"],
.dark [class*="text-[#72435a]"],
.dark [class*="text-[#864763]"],
.dark [class*="text-[#6b3650]"],
.dark [class*="text-[#7a4960]"],
.dark [class*="text-[#6c4459]"],
.dark [class*="text-[#735469]"] {
  color: var(--color-foreground);
}

[class*="border-[#5f2e47]"],
[class*="border-[#72435a]"],
[class*="border-[#864763]"],
[class*="border-[#6b3650]"],
[class*="border-[#7a4960]"],
[class*="border-[#6c4459]"],
[class*="border-[#735469]"] {
  border-color: #000000;
}

[class*="bg-[#5f2e47]"],
[class*="bg-[#72435a]"],
[class*="bg-[#864763]"],
[class*="bg-[#6b3650]"],
[class*="bg-[#7a4960]"],
[class*="bg-[#6c4459]"],
[class*="bg-[#735469]"] {
  background-color: #000000;
}

[class*="fill-[#5f2e47]"],
[class*="fill-[#72435a]"],
[class*="fill-[#864763]"],
[class*="fill-[#6b3650]"],
[class*="fill-[#7a4960]"],
[class*="fill-[#6c4459]"],
[class*="fill-[#735469]"] {
  fill: #000000;
}

[class*="stroke-[#5f2e47]"],
[class*="stroke-[#72435a]"],
[class*="stroke-[#864763]"],
[class*="stroke-[#6b3650]"],
[class*="stroke-[#7a4960]"],
[class*="stroke-[#6c4459]"],
[class*="stroke-[#735469]"] {
  stroke: #000000;
}

/* Liquid Glass / Wasserlinsen-Material ------------------------------------
   iOS-26-artige dicke Klarglas-Linse: klarer Kern, deutlich stärkere
   Brechung an den Rändern, adaptive Specular-Kanten, innerer Lichtsaum
   und ein kurzer flüssiger Press-Impuls. Nur Material — keine Funktionsänderung. */
:root {
  --ss-lq-tint: rgba(255, 255, 255, 0.06);
  --ss-lq-tint-strong: rgba(255, 255, 255, 0.16);
  --ss-lq-edge: rgba(255, 255, 255, 0.72);
  --ss-lq-edge-soft: rgba(255, 255, 255, 0.2);
  --ss-lq-inner-glow: rgba(255, 255, 255, 0.62);
  --ss-lq-shadow: 0 20px 48px -26px rgba(15, 23, 42, 0.42), 0 2px 10px -6px rgba(15, 23, 42, 0.22);
  --ss-lq-blur: blur(0.5px) saturate(175%) contrast(1.03) brightness(1.03);
  --ss-lq-blur-edge: blur(16px) saturate(215%) contrast(1.07) brightness(1.05);
}

.dark {
  --ss-lq-tint: rgba(255, 255, 255, 0.03);
  --ss-lq-tint-strong: rgba(255, 255, 255, 0.08);
  --ss-lq-edge: rgba(255, 255, 255, 0.34);
  --ss-lq-edge-soft: rgba(255, 255, 255, 0.11);
  --ss-lq-inner-glow: rgba(255, 255, 255, 0.18);
  --ss-lq-shadow: 0 22px 52px -26px rgba(0, 0, 0, 0.82), 0 2px 12px -6px rgba(0, 0, 0, 0.6);
  --ss-lq-blur: blur(0.5px) saturate(165%) contrast(1.05) brightness(1.05);
  --ss-lq-blur-edge: blur(18px) saturate(195%) contrast(1.08) brightness(1.06);
}

.ss-liquid-glass {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 36%, var(--ss-lq-tint) 68%, var(--ss-lq-tint-strong) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%, rgba(15, 23, 42, 0.02) 100%);
  border: 1px solid var(--ss-lq-edge-soft);
  box-shadow: var(--ss-lq-shadow);
  backdrop-filter: var(--ss-lq-blur);
  transition:
    transform var(--ss-press-duration) cubic-bezier(0.18, 0.86, 0.22, 1),
    box-shadow 220ms ease,
    background-color 220ms ease;
}

/* Linsenrand: starke, weich gezogene Brechung nur an den Kanten — erzeugt den
   Eindruck einer dicken, klaren Linse ohne echte Pixelverzerrung. */
.ss-liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  backdrop-filter: var(--ss-lq-blur-edge);
  mask-image: radial-gradient(
    130% 165% at 50% 50%,
    transparent 64%,
    rgba(0, 0, 0, 0.7) 86%,
    #000 100%
  );
}

/* Specular Highlights + innerer Lichtsaum.
   Oberkante und Seitenkanten bekommen ein glasiges, helles Linien-Highlight. */
.ss-liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, var(--ss-lq-edge) 0%, transparent 10%),
    linear-gradient(180deg, var(--ss-lq-inner-glow) 0%, transparent 28%),
    linear-gradient(0deg, var(--ss-lq-edge-soft) 0%, transparent 18%),
    radial-gradient(90% 110% at 0% 45%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(90% 110% at 100% 45%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(120% 80% at 22% -10%, rgba(255, 255, 255, 0.32), transparent 60%);
  opacity: 0.92;
  box-shadow:
    inset 0 1px 0 var(--ss-lq-edge),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -10px 22px -18px rgba(15, 23, 42, 0.35);
}

/* Inhalte über den Glaslayern halten. */
.ss-liquid-glass > * {
  position: relative;
  z-index: 2;
}

/* Runde Variante (schwebende Trigger). */
.ss-liquid-glass-round {
  border-radius: 9999px;
}

.ss-liquid-glass-round::before {
  mask-image: radial-gradient(circle at 50% 50%, transparent 62%, #000 100%);
}

/* Flüssiger Press-Impuls. */
.ss-liquid-glass-press:active {
  transform: translate3d(0, 1px, 0) scale(0.985);
  box-shadow:
    inset 0 2px 8px rgba(15, 23, 42, 0.08),
    0 8px 24px -20px rgba(15, 23, 42, 0.4);
}

/* Aktive Auswahl in der Bottom-Nav als klare Glas-Pill mit linsenartigem Rand. */
.ss-liquid-pill {
  background: radial-gradient(100% 100% at 50% 50%, var(--ss-lq-tint) 0%, var(--ss-lq-tint-strong) 100%);
  box-shadow:
    inset 0 1px 0 var(--ss-lq-edge),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 16px -12px rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(0.5px) saturate(190%) contrast(1.04) brightness(1.04);
}

.dark .ss-liquid-pill {
  background: radial-gradient(100% 100% at 50% 50%, var(--ss-lq-tint) 0%, var(--ss-lq-tint-strong) 100%);
  box-shadow:
    inset 0 1px 0 var(--ss-lq-edge),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 6px 16px -12px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(0.5px) saturate(180%) contrast(1.05) brightness(1.05);
}

/* Safari/Fallback ohne backdrop-filter: etwas mehr Eigenfarbe, damit der
   Kontrast erhalten bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ss-liquid-glass {
    background: var(--ss-glass-bg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-liquid-glass {
    transition-duration: 0.01ms;
  }

  .ss-liquid-glass-press:active {
    transform: none;
  }
}