/* Hinweisleiste der Live-Demo (nur in der Demo geladen) */
#czh-demo{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--fg) 92%,transparent);color:var(--bg);font:500 12.5px/1.2 var(--font-body);
  box-shadow:0 8px 30px rgba(0,0,0,.18);backdrop-filter:blur(8px);white-space:nowrap;max-width:calc(100vw - 24px)}
#czh-demo b{font-weight:600}
#czh-demo .czd-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);animation:czdPulse 2s infinite}
#czh-demo .czd-t{opacity:.72;overflow:hidden;text-overflow:ellipsis}
#czh-demo button,#czh-demo a{all:unset;cursor:pointer;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--bg) 14%,transparent);color:var(--bg);font-weight:600}
#czh-demo a{background:var(--accent);color:var(--on-accent)}
#czh-demo button:hover{background:color-mix(in srgb,var(--bg) 24%,transparent)}
#czh-demo button:focus-visible,#czh-demo a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes czdPulse{50%{box-shadow:0 0 0 6px transparent}}
@media (max-width:860px){#czh-demo .czd-t{display:none}}
@media (max-width:420px){#czh-demo a{display:none}}
/* Platz unter dem Inhalt, damit die Leiste nichts verdeckt */
#view{padding-bottom:64px}
.toasts{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
/* Assistent offen: Demo-Leiste nicht über dem Eingabefeld */
@media (min-width:1280px){body.ai-on #czh-demo{left:calc(50% - 210px)}}
@media (max-width:1279px){body.ai-on #czh-demo{display:none}}
/* Konsolen-Dock über der Hinweisleiste */
.cdock{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
body.has-dock .toasts{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
body.has-dock #view{padding-bottom:112px}
body.has-dock .consoles{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}