/* ============================================================================
 * chx-chat-meta.css · Unified Chat-Modul für alle chazon.eu Sites
 * ============================================================================
 *
 * Brand-Anchor: kontemplativ, museum-grade editorial, aubergine-anthrazit +
 * rose-gold, Cormorant-Garamond-Italic. Ersetzt:
 *   - .seer-* (energies)
 *   - .tutor-* (elements tutor-drawer)
 *   - .chx-sc-* (shared chx-seer-companion)
 *
 * data-character drives glow-color via --chx-chat-glow CSS-variable.
 * data-state drives avatar-frame border + LED.
 * data-open drives pill ↔ panel transition.
 *
 * Komponenten:
 *   .chx-chat-pill           · floating trigger bottom-right
 *   .chx-chat                · aside drawer right
 *     .chx-chat__head        · avatar + name + voice + close
 *     .chx-chat__msgs        · message-list (assistant + user bubbles)
 *     .chx-chat__suggest     · suggestion-pills row
 *     .chx-chat__input       · textarea + send
 *
 * Konsumiert: .chx-avatar-frame (in chazon-shared.css)
 * ============================================================================ */

/* ============ Pill (floating trigger) ============ */
.chx-chat-pill {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: var(--z-chat-pill, 3000);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .9rem .55rem .55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 28%, transparent);
  background: color-mix(in oklab, var(--base-elevated, #1c1320) 86%, var(--base-deep, #14101d));
  color: var(--text-bright, #faf2e8);
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 6px 22px -10px rgba(0, 0, 0, .55),
    0 0 0 1px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 10%, transparent) inset;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  max-width: 280px;
}
.chx-chat-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px -10px rgba(0, 0, 0, .65),
    0 0 0 1px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 22%, transparent) inset;
}
.chx-chat-pill:focus-visible {
  outline: 2px solid var(--chx-chat-glow, #f5d0c5);
  outline-offset: 3px;
}
.chx-chat-pill__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 42%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 30%, transparent);
}
.chx-chat-pill__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chx-chat-pill__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  min-width: 0;
}
.chx-chat-pill__text .eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .95rem;
  color: var(--text-bright, #faf2e8);
  line-height: 1.1;
}
.chx-chat-pill__text .label {
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-warm, #ead7c8);
  opacity: .82;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.chx-chat-pill__glyph {
  font-family: 'Cormorant Garamond', serif;
  color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 88%, white);
  font-size: 1rem;
  margin-left: .15rem;
}
/* Pill versteckt wenn panel offen */
.chx-chat[data-open="true"] ~ .chx-chat-pill,
body:has(.chx-chat[data-open="true"]) .chx-chat-pill {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}
/* Pill optional verstecken solange Hero sichtbar (opt-in via body.chx-pill-hidden).
   Seiten, die das wollen, setzen die Klasse im Hero-Scroll-Listener. Default:
   Pill ist immer sichtbar, sobald gerendert. */
body.chx-pill-hidden .chx-chat-pill {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

/* ============ Panel (expanded chat drawer) · v1.51 modern redesign ============ */
.chx-chat {
  position: fixed;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  width: clamp(360px, 30vw, 460px);
  height: min(78vh, 760px);
  max-height: calc(100vh - 2rem);
  z-index: var(--z-chat-panel, 3100);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
                color-mix(in oklab, var(--base-elevated, #1c1320) 92%, var(--base-deep, #14101d)) 0%,
                color-mix(in oklab, var(--base-deep, #14101d) 96%, var(--chx-chat-glow, #f5d0c5)) 100%);
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 28%, transparent);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, .75),
    0 0 0 1px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 14%, transparent) inset,
    0 -1px 0 color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 22%, transparent) inset;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  pointer-events: none;
  transition: opacity .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1);
}
/* subtle ambient glow ring at the top edge — frames the avatar without taking space */
.chx-chat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 55%, transparent) 50%,
    transparent);
  opacity: .7;
  pointer-events: none;
}
.chx-chat[data-open="true"] {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

/* ============ Head · avatar + name + voice + close ============ */
/* v1.37 · Eigene .chx-chat__avatar Klasse (NICHT shared chx-avatar-frame).
   Hauptdimensionen sind im JS als inline-style gesetzt damit nichts aus
   site-CSS überschreiben kann · CSS hier nur für state-driven cosmetics. */
.chx-chat__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .55rem;
  padding: .42rem .55rem .42rem .55rem;
  border-bottom: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 12%, transparent);
  background: linear-gradient(180deg,
                color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 5%, transparent),
                transparent 100%);
  flex-shrink: 0;
  min-height: 52px;
}
/* .chx-chat__avatar · own, isolated avatar wrapper · all sizing via inline-style.
   Hier nur background/box-shadow für die museum-portrait Atmosphäre. */
.chx-chat__avatar {
  background: radial-gradient(ellipse at 50% 35%,
              color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 18%, transparent) 0%,
              color-mix(in oklab, var(--base-deep, #14101d) 92%, transparent) 70%,
              var(--base-deep, #14101d) 100%);
  box-shadow:
    inset 0 0 12px color-mix(in oklab, var(--base-deep, #14101d) 65%, transparent),
    inset 0 -10px 18px color-mix(in oklab, var(--base-deep, #14101d) 35%, transparent);
  isolation: isolate;
}
.chx-chat__avatar[data-state="speaking"]  { border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 70%, transparent) !important; }
.chx-chat__avatar[data-state="listening"] { border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 58%, transparent) !important; }
.chx-chat__avatar[data-state="thinking"]  { border-color: color-mix(in oklab, var(--sd-purple, #c4a8da) 50%, transparent) !important; }
/* .chx-chat__id (name + state) nimmt den verfügbaren Platz */
.chx-chat__head > .chx-chat__id {
  flex: 1 1 auto;
  min-width: 0;
}
.chx-chat__id {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.chx-chat__name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text-bright, #faf2e8);
  line-height: 1.05;
}
.chx-chat__state {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--text-warm, #ead7c8);
  text-transform: lowercase;
}
.chx-chat__state .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 75%, white);
  box-shadow: 0 0 8px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 60%, transparent);
}
.chx-chat[data-state="speaking"] .chx-chat__state .led {
  animation: chx-led-pulse 0.9s ease-in-out infinite;
}
.chx-chat[data-state="thinking"] .chx-chat__state .led {
  background: color-mix(in oklab, var(--sd-purple, #c4a8da) 75%, white);
  animation: chx-led-blink 1.2s ease-in-out infinite;
}
.chx-chat[data-state="listening"] .chx-chat__state .led {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 95%, white);
  animation: chx-led-pulse 1.4s ease-in-out infinite;
}
@keyframes chx-led-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
@keyframes chx-led-blink {
  0%, 70%, 100% { opacity: 1; }
  80%, 90%      { opacity: .15; }
}

.chx-chat__voice, .chx-chat__close,
.chx-chat__voicebtn, .chx-chat__reset {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 25%, transparent);
  background: color-mix(in oklab, var(--base-deep, #14101d) 60%, transparent);
  color: var(--text-warm, #ead7c8);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}
.chx-chat__voice:hover, .chx-chat__close:hover,
.chx-chat__voicebtn:hover, .chx-chat__reset:hover {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 18%, transparent);
  border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 55%, transparent);
  color: var(--text-bright, #faf2e8);
}
.chx-chat__voice:focus-visible, .chx-chat__close:focus-visible,
.chx-chat__voicebtn:focus-visible, .chx-chat__reset:focus-visible {
  outline: 2px solid var(--chx-chat-glow, #f5d0c5);
  outline-offset: 2px;
}
.chx-chat__reset {
  font-size: .9rem;
  font-family: 'Manrope', sans-serif;
  opacity: .85;
}
.chx-chat__reset:hover { opacity: 1; }

/* ============ Messages · assistant + user bubbles ============ */
.chx-chat__msgs {
  list-style: none;
  margin: 0;
  padding: .85rem .9rem;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  scroll-behavior: smooth;
}
.chx-chat__msg {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .98rem;
  line-height: 1.48;
  padding: .55rem .85rem;
  border-radius: 14px;
  max-width: 90%;
  /* v1.39 · robuster text-flow für lange deutsche Kompositum-Wörter +
     URLs · overflow-wrap erlaubt mid-word break wenn überlauf-droht,
     hyphens fügt Trennstrich ein (lang=de wird respektiert). */
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
  white-space: pre-wrap;
}
.chx-chat__msg--assistant {
  align-self: flex-start;
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 8%, var(--base-deep, #14101d));
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 14%, transparent);
  color: var(--text-bright, #faf2e8);
}
.chx-chat__msg--user {
  align-self: flex-end;
  background: color-mix(in oklab, var(--base-elevated, #1c1320) 75%, var(--base-deep, #14101d));
  border: 1px solid color-mix(in oklab, var(--accent-rosegold, #f5d0c5) 20%, transparent);
  color: var(--text-warm, #ead7c8);
  font-style: normal;
  font-family: 'Manrope', sans-serif;
  font-size: .88rem;
  line-height: 1.42;
}
/* ============ Avatar-Transition · System-Marker zwischen Avataren ============ */
.chx-chat__msg--transition {
  align-self: center;
  max-width: 90%;
  background: transparent;
  border: none;
  padding: .2rem .4rem;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faded, #a89aa0);
  opacity: .72;
  text-align: center;
  position: relative;
}
.chx-chat__msg--transition::before,
.chx-chat__msg--transition::after {
  content: '';
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 35%, transparent);
  vertical-align: middle;
  margin: 0 .5rem;
}
.chx-chat__msg--welcome em {
  color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 92%, white);
  font-style: italic;
}

/* ============ Rich-Text Spans (v1.52) · semantic highlights ============ */

/* Paragraph spacing inside assistant bubbles */
.chx-chat__msg .chx-chat__para {
  margin: 0;
  padding: 0;
}
.chx-chat__msg .chx-chat__para + .chx-chat__para {
  margin-top: .55rem;
}

/* Cross-avatar character tag · "[Paracelsus]:" → little pill */
.chx-chat__char-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: .68em;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .08em .5em;
  margin-right: .25em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 28%, transparent);
  color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 92%, white);
  vertical-align: .12em;
}

/* Three-layer markers · 📐 messbar / 🌀 tradition / 🌌 synthese */
.chx-chat__layer {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: .82em;
  letter-spacing: .015em;
  padding: .05em .42em;
  border-radius: 6px;
  margin-right: .15em;
  vertical-align: .04em;
}
.chx-chat__layer--measurable {
  background: linear-gradient(135deg,
    color-mix(in oklab, #4ea3ff 18%, transparent),
    color-mix(in oklab, #4ea3ff 8%, transparent));
  border: 1px solid color-mix(in oklab, #4ea3ff 32%, transparent);
  color: #b8d8ff;
}
.chx-chat__layer--tradition {
  background: linear-gradient(135deg,
    color-mix(in oklab, #c4a8da 22%, transparent),
    color-mix(in oklab, #c4a8da 10%, transparent));
  border: 1px solid color-mix(in oklab, #c4a8da 38%, transparent);
  color: #e8d6ff;
}
.chx-chat__layer--synthesis {
  background: linear-gradient(135deg,
    color-mix(in oklab, #c9a44a 22%, transparent),
    color-mix(in oklab, #f5d0c5 14%, transparent));
  border: 1px solid color-mix(in oklab, #c9a44a 42%, transparent);
  color: #f5deb3;
}

/* Years 1500-2099 · mono-pill */
.chx-chat__year {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: .88em;
  letter-spacing: .02em;
  padding: .02em .3em;
  border-radius: 4px;
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 10%, transparent);
  color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 78%, white);
}

/* Foreign signature phrases · sola dosis, sicut superius, expérience … */
.chx-chat__foreign {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: color-mix(in oklab, var(--accent-gold, #c9a44a) 78%, white);
  letter-spacing: .01em;
  border-bottom: 1px dotted color-mix(in oklab, var(--accent-gold, #c9a44a) 38%, transparent);
}

/* Bold/strong text · gold-tinged */
.chx-chat__msg strong {
  font-weight: 600;
  font-style: normal;
  color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 88%, white);
}

/* Inline em (echte Emphasis) · soft glow */
.chx-chat__msg em {
  font-style: italic;
  color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 80%, white);
}
.chx-chat__msg--streaming::after {
  content: '▌';
  display: inline-block;
  margin-left: .15em;
  opacity: .55;
  animation: chx-caret 1s steps(2) infinite;
}
@keyframes chx-caret {
  0%, 50% { opacity: .8; }
  50.1%, 100% { opacity: 0; }
}
.chx-chat__msg--error {
  background: rgba(255, 94, 58, .08);
  border-color: rgba(255, 94, 58, .35);
  color: #ff8b6f;
}
/* v1.39 · Free-tier rate-limit bubble · gold-tone gentle hint */
.chx-chat__msg--limit {
  background: linear-gradient(135deg, rgba(201,164,74,.10), rgba(245,208,197,.05));
  border-color: rgba(201,164,74,.35);
  color: color-mix(in oklab, var(--accent-gold, #c9a44a) 90%, white);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}
.chx-chat__msg--limit::before {
  content: '⌛ ';
  opacity: .7;
}

/* Custom scrollbar */
.chx-chat__msgs::-webkit-scrollbar { width: 8px; }
.chx-chat__msgs::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 22%, transparent);
  border-radius: 4px;
}

/* ============ Suggestions · 3-Spalten Grid (max 3 chips, fit in row) ============ */
.chx-chat__suggest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
  padding: .35rem .55rem .4rem;
  flex-shrink: 0;
  border-top: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 8%, transparent);
}
.chx-chat__suggest:empty { display: none; }
.chx-chat__suggest-btn {
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: .66rem;
  letter-spacing: .005em;
  padding: .26rem .42rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 22%, transparent);
  background: color-mix(in oklab, var(--base-deep, #14101d) 60%, transparent);
  color: var(--text-warm, #ead7c8);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.chx-chat__suggest-btn:active {
  transform: scale(.96);
}
.chx-chat__suggest-btn:hover {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 10%, var(--base-deep, #14101d));
  border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 40%, transparent);
  color: var(--text-bright, #faf2e8);
}
.chx-chat__suggest-btn:focus-visible {
  outline: 2px solid var(--chx-chat-glow, #f5d0c5);
  outline-offset: 1px;
}

/* ============ Input · textarea + send ============ */
.chx-chat__input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  padding: .55rem .75rem .75rem;
  border-top: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 14%, transparent);
  background: linear-gradient(0deg,
                color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 7%, transparent),
                transparent);
  flex-shrink: 0;
}
.chx-chat__field {
  resize: none;
  font-family: 'Manrope', sans-serif;
  font-size: .9rem;
  line-height: 1.42;
  padding: .55rem .85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 24%, transparent);
  background: color-mix(in oklab, var(--base-deep, #14101d) 75%, transparent);
  color: var(--text-bright, #faf2e8);
  max-height: 108px;
  overflow-y: auto;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.chx-chat__field:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 14%, transparent);
}
.chx-chat__field:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 55%, transparent);
}
.chx-chat__field::placeholder {
  color: var(--text-faded, #a89aa0);
  font-style: italic;
  opacity: .8;
}
.chx-chat__send {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--chx-chat-glow, #f5d0c5), color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 70%, var(--accent-gold, #c9a961)));
  color: var(--base-deep, #14101d);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  align-self: end;
  transition: transform .2s ease, box-shadow .2s ease;
}
.chx-chat__send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 45%, transparent);
}
.chx-chat__send:focus-visible {
  outline: 2px solid var(--chx-chat-glow, #f5d0c5);
  outline-offset: 3px;
}
.chx-chat__send:disabled,
.chx-chat__send[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  filter: saturate(0.5);
  border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 14%, transparent);
  background: color-mix(in oklab, var(--base-deep, #14101d) 70%, transparent);
  pointer-events: none;
}
.chx-chat__send:disabled:hover,
.chx-chat__send[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

/* ============ Mobile · bottom-sheet style panel ============ */
@media (max-width: 720px) {
  .chx-chat {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 88vh;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }
  .chx-chat[data-open="true"] {
    transform: translateY(0);
  }
  .chx-chat-pill {
    bottom: 1rem;
    right: 1rem;
  }
}

/* ============ Reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
  .chx-chat,
  .chx-chat-pill,
  .chx-chat__send,
  .chx-chat__voice,
  .chx-chat__close {
    transition: none !important;
  }
  .chx-chat__state .led {
    animation: none !important;
  }
  .chx-chat__msg--streaming::after {
    animation: none !important;
    opacity: .55;
  }
}

/* ============================================================================
 * v1.41 · INLINE VOICECALL · Voice-Button-Morph, Timer, Voice-Bubbles
 * Design-Team-Spec 2026-05-21 02:35 · "professionelles multitool, clean".
 * 7 visuelle states · idle / connecting / listening / speaking / user-talking
 * / ending / ended-freetier
 * ============================================================================ */

/* --- Timer im Head --- */
.chx-chat__timer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem;
  letter-spacing: .04em;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 22%, transparent);
  background: color-mix(in oklab, var(--base-deep, #14101d) 70%, transparent);
  color: var(--text-warm, #ead7c8);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.chx-chat[data-voice="connecting"] .chx-chat__timer { color: color-mix(in oklab, var(--accent-gold, #c9a44a) 90%, white); }
.chx-chat[data-voice="ending"] .chx-chat__timer {
  color: #ff8b6f;
  border-color: rgba(255, 94, 58, .55);
  box-shadow:
    0 0 12px rgba(255, 139, 111, 0.28),
    inset 0 0 8px rgba(255, 139, 111, 0.12);
  animation: chx-chat-timer-pulse 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes chx-chat-timer-pulse {
  0%, 100% {
    opacity: 0.62;
    box-shadow: 0 0 8px rgba(255, 139, 111, 0.18), inset 0 0 6px rgba(255, 139, 111, 0.08);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 139, 111, 0.38), inset 0 0 10px rgba(255, 139, 111, 0.18);
  }
}

/* --- Voice-Button Morph: 📞 mic-glyph → ■ stop-glyph --- */
.chx-chat__voicebtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 25%, transparent);
  background: color-mix(in oklab, var(--base-deep, #14101d) 60%, transparent);
  color: var(--text-warm, #ead7c8);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .25s ease;
}
.chx-chat__voicebtn:hover {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 18%, transparent);
  border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 55%, transparent);
  color: var(--text-bright, #faf2e8);
}
.chx-chat__voicebtn:focus-visible {
  outline: 2px solid var(--chx-chat-glow, #f5d0c5);
  outline-offset: 2px;
}
.chx-chat__voicebtn-icon-mic,
.chx-chat__voicebtn-icon-stop {
  position: absolute;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.chx-chat__voicebtn-icon-stop {
  opacity: 0;
  transform: scale(.5);
  font-size: .85rem;
  font-weight: 600;
  color: #ff5e3a;
}
/* connecting · mic spins (Spinner-ähnlich) */
.chx-chat[data-voice="connecting"] .chx-chat__voicebtn-icon-mic {
  animation: chx-chat-spin .8s linear infinite;
}
@keyframes chx-chat-spin {
  to { transform: rotate(360deg); }
}
/* active states · mic verschwindet, stop kommt rein */
.chx-chat[data-voice="listening"] .chx-chat__voicebtn,
.chx-chat[data-voice="speaking"] .chx-chat__voicebtn,
.chx-chat[data-voice="ending"] .chx-chat__voicebtn {
  background: rgba(255, 94, 58, .12);
  border-color: rgba(255, 94, 58, .55);
}
.chx-chat[data-voice="listening"] .chx-chat__voicebtn-icon-mic,
.chx-chat[data-voice="speaking"] .chx-chat__voicebtn-icon-mic,
.chx-chat[data-voice="ending"] .chx-chat__voicebtn-icon-mic {
  opacity: 0;
  transform: scale(.5);
}
.chx-chat[data-voice="listening"] .chx-chat__voicebtn-icon-stop,
.chx-chat[data-voice="speaking"] .chx-chat__voicebtn-icon-stop,
.chx-chat[data-voice="ending"] .chx-chat__voicebtn-icon-stop {
  opacity: 1;
  transform: scale(1);
}

/* --- LED pulses · listening calm, speaking faster --- */
.chx-chat[data-voice="connecting"] .chx-chat__state .led {
  background: color-mix(in oklab, var(--accent-gold, #c9a44a) 85%, white);
  animation: chx-led-pulse 1.4s ease-in-out infinite;
}
.chx-chat[data-voice="listening"] .chx-chat__state .led {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 95%, white);
  animation: chx-led-pulse 1.4s ease-in-out infinite;
}
.chx-chat[data-voice="speaking"] .chx-chat__state .led {
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 95%, white);
  animation: chx-led-pulse .7s ease-in-out infinite;
}

/* --- Voice-Bubbles (dotted-border, mic-glyph prefix) --- */
.chx-chat__msg--voice {
  border-style: dashed;
  position: relative;
  padding-left: 2rem !important;
}
.chx-chat__msg--voice::before {
  content: '🎙';
  position: absolute;
  left: .6rem;
  top: .55rem;
  font-size: .8rem;
  opacity: .55;
  font-style: normal;
}
.chx-chat__msg--voice.is-user {
  align-self: flex-end;
  border-color: color-mix(in oklab, var(--accent-aubergine, #5a3a5e) 40%, transparent);
  background: color-mix(in oklab, var(--accent-aubergine, #5a3a5e) 8%, var(--base-deep, #14101d));
}
.chx-chat__msg--voice.is-assistant {
  align-self: flex-start;
  border-color: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 35%, transparent);
  background: color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 8%, var(--base-deep, #14101d));
}
.chx-chat__msg--voice.is-interim {
  opacity: .55;
  font-style: italic;
}

/* --- Suggestions hide während voice-call --- */
.chx-chat__suggest--hidden {
  display: none !important;
}

/* --- Text-input bleibt aktiv (multitool) · placeholder hint --- */
.chx-chat[data-voice="listening"] .chx-chat__field::placeholder,
.chx-chat[data-voice="speaking"] .chx-chat__field::placeholder {
  content: '· tippe parallel oder still mithören …';
}

/* --- Mobile reduzieren · timer kompakter --- */
@media (max-width: 720px) {
  .chx-chat__timer { font-size: .75rem; padding: .2rem .4rem; }
}

/* --- Reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .chx-chat__voicebtn-icon-mic,
  .chx-chat__voicebtn-icon-stop,
  .chx-chat__timer {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
 * v1.45 · LIQUID-GLASS LAYER · 2030-Gen-Z (2026-05-21)
 *
 * Konsumiert Tokens aus chazon-shared.css v1.45:
 *   --chx-glass-tint · --chx-glass-blur · --chx-glass-saturate
 *   --chx-glass-edge · --chx-glow-strength · --chx-iridescent
 *
 * Switching per [data-context="elements|energies|codex"] auf <body>, .chx-chat,
 * .chx-chat-pill (set durch chx-chat-meta.js · context = cfg.site).
 *
 * Wichtig: liegt am Ende der Datei → überschreibt v1.0-v1.44 Defaults ohne
 *          !important wo möglich.
 * ============================================================================ */

/* --- Pill: liquid-glass surface mit kontext-tint ---------------------- */
.chx-chat-pill[data-context],
[data-context] .chx-chat-pill {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) calc(var(--chx-glow-strength, 0.45) * 18%), transparent),
      transparent 70%),
    var(--chx-glass-tint, rgba(20, 16, 29, 0.62));
  backdrop-filter: blur(var(--chx-glass-blur, 18px)) saturate(var(--chx-glass-saturate, 160%));
  -webkit-backdrop-filter: blur(var(--chx-glass-blur, 18px)) saturate(var(--chx-glass-saturate, 160%));
  border-color: var(--chx-glass-edge, color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 28%, transparent));
}

/* --- Panel: liquid-glass + iridescent hairline · the centerpiece ------- */
.chx-chat[data-context],
[data-context] .chx-chat {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) calc(var(--chx-glow-strength, 0.45) * 8%), transparent),
      transparent 40%),
    var(--chx-glass-tint, rgba(20, 16, 29, 0.62));
  backdrop-filter: blur(var(--chx-glass-blur, 22px)) saturate(var(--chx-glass-saturate, 160%));
  -webkit-backdrop-filter: blur(var(--chx-glass-blur, 22px)) saturate(var(--chx-glass-saturate, 160%));
  border-color: var(--chx-glass-edge, color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) 22%, transparent));
  isolation: isolate;
}

/* Iridescent rotating hairline auf Panel-Border · subtil, 14s rotation
   · nur sichtbar wenn Panel offen damit Idle-Pill ruhig bleibt. */
.chx-chat[data-open="true"]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--chx-iridescent,
    conic-gradient(from var(--chx-angle, 0deg),
      var(--chx-ener-aubergine, #2a1530), var(--chx-ener-rosegold, #f5d0c5), var(--chx-ener-magenta, #c4a8da), var(--chx-ener-aubergine, #2a1530)));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: chx-iridescent-rotate var(--chx-iridescent-duration, 14s) linear infinite;
  pointer-events: none;
  opacity: calc(0.35 + var(--chx-glow-strength, 0.45) * 0.4);
  z-index: 0;
}

/* --- Avatar: phosphor-breath wenn idle · sichtbarer Atem auf 80×100 --- */
.chx-chat__avatar[data-state="idle"] {
  animation: chx-phosphor-breath var(--chx-breath-duration, 6.5s) var(--chx-ease-breath, cubic-bezier(.4,0,.2,1)) infinite;
  will-change: opacity, filter;
}
/* Speaking + listening: aktive states behalten LED-driven Pulse, kein doppelter Atem */
.chx-chat__avatar[data-state="speaking"],
.chx-chat__avatar[data-state="listening"],
.chx-chat__avatar[data-state="thinking"] {
  animation: none;
}

/* Erweitere den state-driven glow um proper outer halo · jetzt rendered weicher
   weil avatar 80×100 mehr Fläche bietet. */
.chx-chat__avatar[data-state="speaking"]  {
  box-shadow:
    inset 0 0 12px color-mix(in oklab, var(--base-deep, #14101d) 65%, transparent),
    inset 0 -10px 18px color-mix(in oklab, var(--base-deep, #14101d) 35%, transparent),
    0 0 22px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) calc(var(--chx-glow-strength, 0.45) * 70%), transparent);
}
.chx-chat__avatar[data-state="listening"] {
  box-shadow:
    inset 0 0 12px color-mix(in oklab, var(--base-deep, #14101d) 65%, transparent),
    inset 0 -10px 18px color-mix(in oklab, var(--base-deep, #14101d) 35%, transparent),
    0 0 18px color-mix(in oklab, var(--chx-chat-glow, #f5d0c5) calc(var(--chx-glow-strength, 0.45) * 55%), transparent);
}
.chx-chat__avatar[data-state="thinking"] {
  box-shadow:
    inset 0 0 12px color-mix(in oklab, var(--base-deep, #14101d) 65%, transparent),
    inset 0 -10px 18px color-mix(in oklab, var(--base-deep, #14101d) 35%, transparent),
    0 0 18px color-mix(in oklab, var(--sd-purple, #c4a8da) calc(var(--chx-glow-strength, 0.45) * 50%), transparent);
}

/* Context-spezifische Name-Tone-Justierungen — codex bekommt warm-paper-Tone */
.chx-chat[data-context="codex"] .chx-chat__name {
  color: color-mix(in oklab, #f5ecd9 92%, white);
}
.chx-chat[data-context="elements"] .chx-chat__name {
  color: color-mix(in oklab, #faf2e8 88%, var(--chx-elem-gold-light, #f5deb3));
}

/* Pill-Hover bekommt Pulse-Halo in jedem Kontext */
.chx-chat-pill:hover {
  animation: chx-pulse-halo var(--chx-pulse-duration, 2.6s) ease-in-out infinite;
}

/* Reduced-motion gate v1.45 — alles oben silencen */
@media (prefers-reduced-motion: reduce) {
  .chx-chat__avatar[data-state="idle"],
  .chx-chat[data-open="true"]::before,
  .chx-chat-pill:hover {
    animation: none !important;
  }
}