/* STREAMING_CHUNK */
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* STREAMING_CHUNK */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  
  .animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* STREAMING_CHUNK*/
@keyframes loadingBar {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-loading-bar {
  animation: loadingBar 1.5s ease-in-out infinite;
}

/* 標準仕様（Firefoxなど）向け */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #27272a #0f0f11;
}

/* STREAMING_CHUNK*/
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #0f0f11;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 9999px;
}

.spinner {
  width: 200px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.spinner > div {
  background-color:#ffffff; /* ベースの色 */
  height: 100%;
  width: 10px; 
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2  {animation-delay: -1.1s;}
.spinner .rect3  {animation-delay: -1.0s;}
.spinner .rect4  {animation-delay: -0.9s;}
.spinner .rect5  {animation-delay: -0.8s;}
.spinner .rect6  {animation-delay: -0.7s;}
.spinner .rect7  {animation-delay: -0.6s;}
.spinner .rect8  {animation-delay: -0.5s;}
.spinner .rect9  {animation-delay: -0.4s;}
.spinner .rect10 {animation-delay: -0.3s;}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
  }  
  20% { 
    transform: scaleY(1.0);
  }
}