/* Phase 9A: exact existing Bella WebGPU character, isolated for Bella Lab. */
:root { --bella-cinematic-character-size: 212px; --bella-cinematic-character-edge: 20px; }

#bella-character-host.bella-cinematic-character {
  position: fixed;
  z-index: 190;
  right: var(--bella-cinematic-character-edge);
  bottom: calc(var(--bella-cinematic-character-edge) + env(safe-area-inset-bottom, 0px));
  width: var(--bella-cinematic-character-size);
  height: var(--bella-cinematic-character-size);
  aspect-ratio: 1;
  isolation: isolate;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, visibility 0s linear;
}

html.bella-preloading #bella-character-host.bella-cinematic-character { visibility: hidden; opacity: 0; }
#bella-character-host.bella-cinematic-character canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; pointer-events: none; }
#bella-character-host.bella-cinematic-character.is-fallback { display: none; }
#bella-character-host.bella-cinematic-character.is-chatbot-open { transform: scale(.96); }
#bella-character-host.bella-cinematic-character:focus-visible::after { opacity: 1; }
#bella-character-host.bella-cinematic-character::after { position: absolute; inset: 15%; border: 2px solid rgb(234 246 255 / .9); border-radius: 50%; box-shadow: 0 0 0 4px rgb(30 115 168 / .62); content: ''; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }

body:has(#bella-character-host.bella-cinematic-character.is-ready) .bella-cinematic-chatbot .bella-chatbot-toggle {
  width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
}

body:has(#bella-character-host.bella-cinematic-character.is-ready) .bella-cinematic-chatbot .bella-chatbot-window { bottom: calc(var(--bella-cinematic-character-size) + 36px); }
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --bella-cinematic-character-size: 202px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root { --bella-cinematic-character-size: clamp(160px, 16vw, 180px); }
}

@media (max-width: 767px) {
  :root { --bella-cinematic-character-size: clamp(118px, 30vw, 130px); --bella-cinematic-character-edge: 15px; }
  body:has(#bella-character-host.bella-cinematic-character.is-ready) .bella-cinematic-chatbot .bella-chatbot-window { bottom: calc(var(--bella-cinematic-character-size) + 30px); }
}

@media (prefers-reduced-motion: reduce) {
  #bella-character-host.bella-cinematic-character { transition: none; }
}