/* Claude 05.10.2026 (E107, B-078): Statuschip am Avatarrahmen und in der Kopfzeile (status-chip.mjs). Nur Theme-Variablen.
   Ohne Flackern: keine Animation, nur eine kurze Farbüberblendung (Flacker-Regel, tools/test_aiona_glow_flicker.mjs).
   Text + Farbe: der Text steht immer in der Textfarbe des Themes (Kontrast), die Farbe tragen Punkt und Rand. */
.status-chip{--sc:var(--muted);display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:22px;padding:2px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--sc) 60%,transparent);background:color-mix(in srgb,var(--sc) 16%,var(--theme-menu-solid,var(--surface)));
  color:var(--text);font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;
  transition:background-color .3s ease,border-color .3s ease}
.status-chip[hidden]{display:none}
.status-chip>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--sc);transition:background-color .3s ease}
.status-chip .status-chip-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.status-chip[data-zustand="inaktiv"]{--sc:var(--muted)}
.status-chip[data-zustand="bereit"]{--sc:var(--accent)}
.status-chip[data-zustand="nutzer"]{--sc:var(--violet)}
.status-chip[data-zustand="spricht"]{--sc:var(--premium,#e8c46a)}
.status-chip[data-zustand="denkt"]{--sc:color-mix(in srgb,var(--violet) 55%,var(--accent))}
.status-chip[data-zustand="arbeit"]{--sc:color-mix(in srgb,var(--premium,#e8c46a) 60%,#ff9a62)}

/* Am Avatarrahmen: oben links, über Bild und Hauch, nie im Weg (pointer-events: none). */
.avatar-stage .status-chip--buehne{position:absolute;left:10px;top:10px;z-index:3;max-width:calc(100% - 20px)}

/* In der Kopfzeile: Kurzform neben „Verbunden“, eine Zeile, kleine Schrift (Platz bei 375 px). */
.topbar-status-row{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
#app>.topbar .status-chip--kopf{min-height:0;padding:0 6px;gap:4px;border:0;font-size:10px;line-height:1.2;max-width:11ch}   /* ohne Rand und mit Zeilenhöhe 1,2: nicht höher als die Zeile „Verbunden“ */
#app>.topbar .status-chip--kopf>i{width:5px;height:5px}

/* Schmale Handys (bis 420 px): das Wort „Verbunden“ weicht dem Chip – der grüne Punkt bleibt, ein Verbindungsverlust zeigt der Chip als „Inaktiv“
   und die Meldung #offline darunter. So bleibt die Kopfzeile einzeilig und die Knopfreihe rechts behält ihren Platz (B-036). */
@media (max-width:420px){
  html[data-theme]:root #app>.topbar .topbar-status-row .connection{font-size:0!important;gap:0!important}
  #app>.topbar .topbar-status-row .connection i{flex:none}
}

@media (prefers-reduced-motion:reduce){.status-chip,.status-chip>i{transition:none}}