/* 번들이 뜨기 전 첫 화면(index.html의 .boot-splash) 전용 스타일이다.
   /chat·/agent/*·/admin/* 응답에는 style-src-elem 'self' CSP가 붙어 인라인
   <style>이 차단되므로(vercel.ts), 인라인으로 두면 프로덕션에서만 조용히
   무시돼 캐릭터가 좌상단에 원본 크기로 노출된다. 반드시 외부 파일로 둔다.
   모양·색·주기는 LoadingScreen과 같은 값이어야 하고(#fff/#f3f4f5/#DD1919 =
   seed 라이트 토큰), 첫 렌더에서 React가 이 노드를 지운다. */

/* 이 시점에는 Tailwind preflight가 아직 없다. 기본값(body 여백 8px,
   content-box)을 그대로 두면 캐릭터가 LoadingScreen보다 32px 아래에
   놓여, 번들이 뜨는 순간 위로 튀어 오른다. 여기서 직접 맞춘다. */
body {
  margin: 0;
}
#root > .boot-splash {
  box-sizing: border-box;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: #fff;
}
#root > .boot-splash > div {
  display: grid;
  gap: 20px;
  justify-items: center;
}
#root > .boot-splash img {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  animation: boot-splash-bob 2.4s ease-in-out infinite;
}
@keyframes boot-splash-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
#root > .boot-splash i {
  display: block;
  overflow: hidden;
  width: min(200px, 60%);
  height: 3px;
  border-radius: 999px;
  background: #f3f4f5;
}
#root > .boot-splash b {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: #dd1919;
  animation: boot-splash-bar 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes boot-splash-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #root > .boot-splash img,
  #root > .boot-splash b {
    animation: none;
  }
  #root > .boot-splash b {
    width: 100%;
  }
}