/* State-Bot: Emotion³ — Primär #e4d9d9 im Header, Akzent für Interaktion, neutrale Chat-Fläche */

:root {
  --foot-h: 28px;
  --state-alt-bg: #f0f3f6;
  --state-alt-fg: #5a6570;
  --state-alt-border: #b8c4ce;
}

body:has(.state-main) {
  --state-primary: #e4d9d9;
  --state-accent: #c46868;
  --state-accent-deep: #9e4242;
  --state-primary-ink: #5c3838;
  --journey-accent: var(--state-accent-deep);
  --state-highlight: var(--state-accent);
  --radius: 18px;

  /* Chat: neutral wie Journey — Farbe lebt im Header, nicht im Verlauf */
  --bubble-bot-bg: #f7f7f7;
  --bubble-bot-border: #eee;
  --bubble-user-bg: #eaeaea;
  --bubble-user-fg: #111;
  --c-border: #ddd;

  --state-alt-bg: #f5f0f0;
  --state-alt-fg: #6b4848;
  --state-alt-border: #d8c8c8;

  --btn-bg: var(--state-accent-deep);
  --btn-fg: #fff;
}

/* Kopfzeile: Primärfarbe trägt die Marke */
body:has(.state-main) header {
  background: var(--state-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--state-accent) 28%, #d4c4c4);
}

body:has(.state-main) main.journey.state-main,
body:has(.state-main) #messages {
  background: #fff;
}

body:has(.state-main) .input-bar {
  background: #fff;
  border-top-color: #eee;
}

body:has(.state-main) .input-bar input {
  border-radius: 12px;
}

body:has(.state-main) .input-bar .menu-btn[aria-expanded="true"] {
  background: var(--state-primary);
  border-color: var(--state-accent);
}

body:has(.state-main) .brand-btn strong {
  color: var(--state-primary-ink);
}

body:has(.state-main) .brand-btn span {
  color: color-mix(in srgb, var(--state-primary-ink) 65%, #666);
}

body:has(.state-main) .jump {
  background: #fff;
  border-color: color-mix(in srgb, var(--state-accent) 35%, #ddd);
  color: var(--state-primary-ink);
}

footer {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--foot-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: #f5f5f5;
  border-top: 1px solid var(--c-border, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--c-muted, #666);
  box-sizing: border-box;
}

body:has(.state-main) footer {
  background: #f5f5f5;
  border-top-color: #eee;
  color: var(--c-muted, #666);
}

.state-gate.hidden {
  display: none;
}

.state-gate {
  padding: 1.25rem 1rem 0.5rem;
  text-align: center;
}
.state-gate p {
  margin: 0.5rem 0 1rem;
  color: var(--c-muted, #666);
  font-size: 0.95rem;
}
.state-gate .choices {
  justify-content: center;
}

/* Abstand erste Nachricht ↔ Header: wie global.css #stack (12px 16px) — kein Override */
.state-main #stack {
  padding: 12px 16px var(--gap-bot);
}

.state-main .emotion3-logo-background {
  background-size: min(72vw, 320px) auto;
  opacity: 0.08;
}

body:has(.state-main) .bubble em {
  font-style: italic;
  color: var(--state-highlight);
}

/* Chips: ohne Schatten, weiche Pillen, flaches Selected (wie Journey) */
body:has(.state-main) .journey .choices .chip:not(.chip--alt) {
  color: var(--state-accent-deep);
  border-color: var(--state-accent);
  background: #fff;
  border-radius: 9999px;
  box-shadow: none;
}

body:has(.state-main) .journey .choices .chip:hover:not(.selected):not(.chip--alt) {
  background: color-mix(in srgb, var(--state-primary) 55%, #fff);
  color: var(--state-accent-deep);
  border-color: var(--state-accent-deep);
  box-shadow: none;
  transform: translateY(-1px);
}

body:has(.state-main) .journey .choices .chip.selected,
body:has(.state-main) .journey .choices .chip.selected:hover {
  background: var(--state-accent-deep);
  color: #fff;
  border-color: var(--state-accent-deep);
  box-shadow: none;
}

.journey .choices .chip.chip--alt {
  background: var(--state-alt-bg);
  color: var(--state-alt-fg);
  border-color: var(--state-alt-border);
  border-radius: 9999px;
  box-shadow: none;
}

body:has(.state-main) .journey .choices .chip.chip--alt:hover {
  background: color-mix(in srgb, var(--state-primary) 45%, #fff);
  color: var(--state-accent-deep);
  border-color: var(--state-accent);
  box-shadow: none;
}

.choices-group {
  margin-bottom: 0.65rem;
}
.choices-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--state-primary-ink) 50%, #888);
  margin: 0.35rem 0 0.4rem 0.15rem;
  text-transform: none;
}
.choices--alt {
  margin-top: 0.35rem;
}

.input-menu .menu-option-link {
  display: block;
  text-decoration: none;
  color: inherit;
}