/* COUNSELING_AI_LOADING_V2 */

.counseling-ai-loading[hidden] {
  display: none !important;
}

.counseling-ai-loading {
  position: relative;
  width: min(920px, calc(100% - 32px));
  min-height: 640px;
  margin: 22px auto 70px;
  padding: 34px 34px 40px;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(229, 206, 255, 0.56);
  border-radius: 34px;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(235, 198, 255, 0.25) 0,
      rgba(142, 83, 201, 0.12) 31%,
      transparent 59%
    ),
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 221, 151, 0.18),
      transparent 31%
    ),
    radial-gradient(
      circle at 84% 24%,
      rgba(152, 204, 255, 0.18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #24133f 0%,
      #40215e 46%,
      #24173f 100%
    );
  box-shadow:
    0 32px 80px rgba(55, 28, 83, 0.24),
    inset 0 0 70px rgba(255, 255, 255, 0.045);
  isolation: isolate;
}

.counseling-ai-loading::before,
.counseling-ai-loading::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
  border-radius: 999px;
  filter: blur(10px);
}

.counseling-ai-loading::before {
  top: -130px;
  left: -90px;
  width: 330px;
  height: 330px;
  background: rgba(170, 117, 255, 0.18);
}

.counseling-ai-loading::after {
  right: -110px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  background: rgba(255, 205, 116, 0.11);
}

.counseling-ai-loading__header {
  position: relative;
  z-index: 5;
  text-align: center;
}

.counseling-ai-loading__eyebrow {
  margin: 0 0 9px;
  color: #e7ccff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.counseling-ai-loading__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 3.3vw, 37px);
  line-height: 1.25;
  text-shadow:
    0 4px 22px rgba(222, 179, 255, 0.28);
}

.counseling-ai-loading__header > p:last-child {
  margin: 11px 0 0;
  color: rgba(249, 241, 255, 0.78);
  font-size: 14px;
  line-height: 1.65;
}

.counseling-ai-loading__stage {
  --loader-orbit-radius: 205px;

  position: relative;
  width: min(100%, 650px);
  height: 455px;
  margin: 12px auto 0;
}

.counseling-ai-loading__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.counseling-ai-loading__halo--one {
  width: 370px;
  height: 370px;
  border: 1px solid rgba(232, 202, 255, 0.22);
  box-shadow:
    0 0 45px rgba(190, 119, 255, 0.12),
    inset 0 0 45px rgba(190, 119, 255, 0.08);
  animation:
    counselingAiHaloPulse 3.4s ease-in-out infinite;
}

.counseling-ai-loading__halo--two {
  width: 285px;
  height: 285px;
  border: 1px dashed rgba(255, 218, 149, 0.22);
  animation:
    counselingAiHaloSpin 20s linear infinite;
}

.counseling-ai-loading__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.counseling-ai-loading__stars span {
  position: absolute;
  color: rgba(255, 232, 173, 0.78);
  font-size: 16px;
  text-shadow:
    0 0 14px rgba(255, 221, 143, 0.75);
  animation:
    counselingAiStarTwinkle 2.2s ease-in-out infinite;
}

.counseling-ai-loading__stars span:nth-child(1) {
  top: 17%;
  left: 15%;
}

.counseling-ai-loading__stars span:nth-child(2) {
  top: 30%;
  left: 7%;
  animation-delay: -0.8s;
}

.counseling-ai-loading__stars span:nth-child(3) {
  top: 65%;
  left: 13%;
  animation-delay: -1.2s;
}

.counseling-ai-loading__stars span:nth-child(4) {
  top: 82%;
  left: 30%;
  animation-delay: -0.4s;
}

.counseling-ai-loading__stars span:nth-child(5) {
  top: 12%;
  left: 73%;
  animation-delay: -1.6s;
}

.counseling-ai-loading__stars span:nth-child(6) {
  top: 31%;
  right: 8%;
  animation-delay: -0.6s;
}

.counseling-ai-loading__stars span:nth-child(7) {
  top: 62%;
  right: 12%;
  animation-delay: -1.1s;
}

.counseling-ai-loading__stars span:nth-child(8) {
  right: 25%;
  bottom: 8%;
  animation-delay: -1.8s;
}

.counseling-ai-loading__stars span:nth-child(9) {
  top: 48%;
  left: 23%;
  animation-delay: -0.3s;
}

.counseling-ai-loading__stars span:nth-child(10) {
  top: 43%;
  right: 22%;
  animation-delay: -1.4s;
}

.counseling-ai-loading__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  transform-origin: center;
  animation:
    counselingAiOrbitRotate 18s linear infinite;
}

.counseling-ai-loading__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 78px;
  height: 130px;
  transform:
    translate(-50%, -50%)
    rotate(var(--loader-angle))
    translateY(calc(var(--loader-orbit-radius) * -1))
    rotate(var(--loader-counter-angle));
  transform-origin: center;
}

.counseling-ai-loading__card-face {
  width: 100%;
  height: 100%;
  animation:
    counselingAiCardCounterRotate 18s linear infinite reverse;
}

.counseling-ai-loading__card-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 235, 188, 0.86);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 235, 184, 0.95),
      rgba(188, 112, 255, 0.78),
      rgba(255, 225, 155, 0.92)
    );
  box-shadow:
    0 0 0 2px rgba(126, 67, 167, 0.55),
    0 10px 28px rgba(11, 3, 24, 0.52),
    0 0 24px rgba(207, 150, 255, 0.32);
  animation:
    counselingAiCardGlow 2.8s ease-in-out infinite;
  animation-delay: var(--loader-card-delay);
}

.counseling-ai-loading__card-frame::before {
  position: absolute;
  z-index: 2;
  inset: -50%;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 39%,
      rgba(255, 255, 255, 0.72) 49%,
      transparent 59%
    );
  transform: translateX(-65%) rotate(8deg);
  animation:
    counselingAiCardShine 3.8s ease-in-out infinite;
  animation-delay: var(--loader-card-delay);
}

.counseling-ai-loading__card-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}

.counseling-ai-loading__card.is-reversed
  .counseling-ai-loading__card-frame img {
  transform: rotate(180deg);
}

.counseling-ai-loading__card-number {
  position: absolute;
  z-index: 4;
  top: -8px;
  right: -8px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #44215e;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: #ffe8aa;
  box-shadow:
    0 4px 12px rgba(19, 4, 36, 0.38);
  font-size: 11px;
  font-weight: 900;
}

.counseling-ai-loading__core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -48%);
}

.counseling-ai-loading__crystal {
  position: relative;
  display: grid;
  width: 145px;
  height: 145px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 238, 255, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.95) 0,
      rgba(255, 255, 255, 0.2) 8%,
      transparent 18%
    ),
    radial-gradient(
      circle at 52% 54%,
      rgba(240, 193, 255, 0.94),
      rgba(143, 82, 210, 0.74) 45%,
      rgba(49, 22, 81, 0.96) 76%
    );
  box-shadow:
    inset 0 0 32px rgba(255, 255, 255, 0.34),
    0 0 22px rgba(219, 161, 255, 0.52),
    0 0 65px rgba(176, 98, 242, 0.46);
  animation:
    counselingAiCrystalPulse 2.4s ease-in-out infinite;
}

.counseling-ai-loading__crystal::before {
  position: absolute;
  inset: 15%;
  content: "";
  border: 1px solid rgba(255, 240, 255, 0.23);
  border-radius: 50%;
  animation:
    counselingAiHaloSpin 9s linear infinite reverse;
}

.counseling-ai-loading__crystal-star {
  position: absolute;
  top: 37px;
  left: 38px;
  color: #fff4bc;
  font-size: 31px;
  text-shadow:
    0 0 19px rgba(255, 234, 150, 0.95);
  animation:
    counselingAiStarTwinkle 1.7s ease-in-out infinite;
}

.counseling-ai-loading__crystal-moon {
  position: absolute;
  right: 30px;
  bottom: 27px;
  color: rgba(255, 242, 210, 0.86);
  font-size: 38px;
  text-shadow:
    0 0 18px rgba(249, 208, 255, 0.75);
}

.counseling-ai-loading__fox {
  width: 82px;
  margin-top: -22px;
  filter:
    drop-shadow(0 10px 13px rgba(9, 2, 22, 0.46));
  animation:
    counselingAiFoxFloat 2.8s ease-in-out infinite;
}

.counseling-ai-loading__status {
  position: relative;
  z-index: 5;
  width: min(610px, 100%);
  margin: -4px auto 0;
  padding: 18px 22px;
  text-align: center;
  border: 1px solid rgba(229, 202, 255, 0.26);
  border-radius: 18px;
  background: rgba(24, 10, 43, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.counseling-ai-loading__dots {
  display: flex;
  min-height: 11px;
  margin-bottom: 10px;
  justify-content: center;
  gap: 7px;
}

.counseling-ai-loading__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2d2ff;
  box-shadow:
    0 0 10px rgba(228, 177, 255, 0.82);
  animation:
    counselingAiDot 1.25s ease-in-out infinite;
}

.counseling-ai-loading__dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.counseling-ai-loading__dots span:nth-child(3) {
  animation-delay: 0.32s;
}

.counseling-ai-loading__status strong {
  display: block;
  min-height: 24px;
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.counseling-ai-loading__status strong.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.counseling-ai-loading__status p {
  display: -webkit-box;
  max-width: 520px;
  margin: 8px auto 0;
  overflow: hidden;
  color: rgba(245, 231, 255, 0.7);
  font-size: 12px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.counseling-ai-loading.is-completing {
  animation:
    counselingAiLoadingComplete 0.58s ease forwards;
}

.counseling-ai-loading.is-completing
  .counseling-ai-loading__card-frame {
  box-shadow:
    0 0 0 2px rgba(255, 240, 190, 0.95),
    0 0 38px rgba(255, 224, 135, 0.88);
}

@keyframes counselingAiOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes counselingAiCardCounterRotate {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes counselingAiHaloSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes counselingAiHaloPulse {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes counselingAiCrystalPulse {
  0%,
  100% {
    transform: scale(0.96);
    filter: brightness(0.94);
  }

  50% {
    transform: scale(1.04);
    filter: brightness(1.16);
  }
}

@keyframes counselingAiFoxFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes counselingAiCardGlow {
  0%,
  100% {
    filter: brightness(0.88) saturate(0.92);
  }

  45%,
  60% {
    filter: brightness(1.18) saturate(1.16);
  }
}

@keyframes counselingAiCardShine {
  0%,
  32% {
    transform: translateX(-72%) rotate(8deg);
    opacity: 0;
  }

  47% {
    opacity: 0.72;
  }

  68%,
  100% {
    transform: translateX(72%) rotate(8deg);
    opacity: 0;
  }
}

@keyframes counselingAiStarTwinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes counselingAiDot {
  0%,
  65%,
  100% {
    opacity: 0.32;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

@keyframes counselingAiLoadingComplete {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  65% {
    opacity: 1;
    transform: scale(1.01);
    filter: brightness(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(0.985);
  }
}

@media (max-width: 760px) {
  .counseling-ai-loading {
    width: calc(100% - 20px);
    min-height: 530px;
    margin: 12px auto 46px;
    padding: 25px 12px 28px;
    border-radius: 25px;
  }

  .counseling-ai-loading__header h2 {
    font-size: 24px;
  }

  .counseling-ai-loading__header > p:last-child {
    padding: 0 12px;
    font-size: 12px;
  }

  .counseling-ai-loading__stage {
    --loader-orbit-radius: 135px;

    height: 360px;
    margin-top: 2px;
  }

  .counseling-ai-loading__halo--one {
    width: 250px;
    height: 250px;
  }

  .counseling-ai-loading__halo--two {
    width: 195px;
    height: 195px;
  }

  .counseling-ai-loading__card {
    width: 50px;
    height: 84px;
  }

  .counseling-ai-loading__card-frame {
    padding: 2px;
    border-radius: 7px;
  }

  .counseling-ai-loading__card-frame img {
    border-radius: 5px;
  }

  .counseling-ai-loading__card-number {
    top: -7px;
    right: -7px;
    width: 19px;
    height: 19px;
    font-size: 9px;
  }

  .counseling-ai-loading__crystal {
    width: 100px;
    height: 100px;
  }

  .counseling-ai-loading__crystal-star {
    top: 24px;
    left: 26px;
    font-size: 22px;
  }

  .counseling-ai-loading__crystal-moon {
    right: 19px;
    bottom: 17px;
    font-size: 28px;
  }

  .counseling-ai-loading__fox {
    width: 61px;
    margin-top: -16px;
  }

  .counseling-ai-loading__status {
    width: calc(100% - 12px);
    margin-top: -5px;
    padding: 15px 14px;
  }

  .counseling-ai-loading__status strong {
    font-size: 13px;
  }

  .counseling-ai-loading__status p {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .counseling-ai-loading__stage {
    --loader-orbit-radius: 121px;

    height: 336px;
  }

  .counseling-ai-loading__card {
    width: 46px;
    height: 77px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .counseling-ai-loading *,
  .counseling-ai-loading *::before,
  .counseling-ai-loading *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* COUNSELING_AI_LOADING_V16_START */

.counseling-ai-loading {
  width: min(1120px, calc(100% - 28px));
  min-height: 820px;
  margin: 22px auto 76px;
  padding: 46px 42px 42px;
  border: 1px solid rgba(244, 214, 255, 0.58);
  border-radius: 38px;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(173, 95, 255, 0.27) 0,
      rgba(89, 35, 149, 0.13) 31%,
      transparent 62%
    ),
    radial-gradient(
      circle at 13% 30%,
      rgba(122, 77, 236, 0.22),
      transparent 33%
    ),
    radial-gradient(
      circle at 86% 68%,
      rgba(255, 151, 218, 0.15),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #090720 0%,
      #171033 30%,
      #2b1550 57%,
      #110b2c 100%
    );
  box-shadow:
    0 38px 110px rgba(25, 8, 55, 0.42),
    0 0 0 1px rgba(255, 238, 255, 0.07) inset,
    0 0 90px rgba(140, 62, 220, 0.16) inset;
}

.counseling-ai-loading::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 20% 22%,
      rgba(255, 255, 255, 0.75) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 72% 18%,
      rgba(255, 229, 158, 0.7) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 45% 72%,
      rgba(224, 193, 255, 0.6) 0 1px,
      transparent 2px
    );
  background-size:
    73px 73px,
    117px 117px,
    151px 151px;
  opacity: 0.44;
  filter: none;
  animation: counselingAiV16StarField 18s linear infinite;
}

.counseling-ai-loading::after {
  right: -12%;
  bottom: -22%;
  width: 58%;
  height: 56%;
  background:
    radial-gradient(
      ellipse,
      rgba(126, 72, 217, 0.26),
      rgba(90, 43, 160, 0.08) 47%,
      transparent 71%
    );
  filter: blur(20px);
  animation: counselingAiV16NebulaBreath 7s ease-in-out infinite;
}

.counseling-ai-loading__header {
  z-index: 20;
}

.counseling-ai-loading__eyebrow {
  color: #f3d69a;
  letter-spacing: 0.32em;
  text-shadow: 0 0 18px rgba(255, 213, 125, 0.42);
}

.counseling-ai-loading__header h2 {
  font-size: clamp(31px, 4vw, 50px);
  letter-spacing: -0.035em;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.34),
    0 0 32px rgba(208, 146, 255, 0.38);
}

.counseling-ai-loading__header > p:last-child {
  color: rgba(248, 238, 255, 0.78);
  font-size: 15px;
}

.counseling-ai-loading__stage {
  --loader-orbit-radius: 270px;

  width: min(100%, 900px);
  height: 590px;
  margin-top: 2px;
}

.counseling-ai-loading__cosmos {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.counseling-ai-loading__nebula,
.counseling-ai-loading__galaxy-ring,
.counseling-ai-loading__bubble,
.counseling-ai-loading__burst,
.counseling-ai-loading__stardust {
  position: absolute;
  pointer-events: none;
}

.counseling-ai-loading__nebula {
  border-radius: 50%;
  filter: blur(32px);
  mix-blend-mode: screen;
}

.counseling-ai-loading__nebula--one {
  top: 12%;
  left: 3%;
  width: 42%;
  height: 46%;
  background:
    radial-gradient(
      ellipse,
      rgba(154, 85, 255, 0.32),
      rgba(92, 49, 192, 0.1) 52%,
      transparent 73%
    );
  animation: counselingAiV16NebulaOne 9s ease-in-out infinite;
}

.counseling-ai-loading__nebula--two {
  right: 1%;
  bottom: 8%;
  width: 45%;
  height: 44%;
  background:
    radial-gradient(
      ellipse,
      rgba(248, 137, 224, 0.25),
      rgba(107, 67, 205, 0.11) 48%,
      transparent 72%
    );
  animation: counselingAiV16NebulaTwo 11s ease-in-out infinite;
}

.counseling-ai-loading__galaxy-ring {
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
}

.counseling-ai-loading__galaxy-ring--one {
  width: 690px;
  height: 405px;
  border: 1px solid rgba(226, 190, 255, 0.18);
  box-shadow:
    0 0 25px rgba(178, 112, 255, 0.13),
    inset 0 0 24px rgba(178, 112, 255, 0.08);
  animation: counselingAiV16GalaxyRing 15s linear infinite;
}

.counseling-ai-loading__galaxy-ring--two {
  width: 560px;
  height: 330px;
  border: 1px dashed rgba(255, 219, 145, 0.2);
  animation: counselingAiV16GalaxyRingReverse 21s linear infinite;
}

.counseling-ai-loading__bubble {
  border: 1px solid rgba(245, 225, 255, 0.46);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.95) 0 4%,
      rgba(255, 255, 255, 0.13) 17%,
      rgba(189, 126, 255, 0.08) 55%,
      rgba(82, 42, 136, 0.2) 100%
    );
  box-shadow:
    inset -8px -10px 20px rgba(104, 51, 173, 0.22),
    inset 5px 5px 13px rgba(255, 255, 255, 0.13),
    0 0 22px rgba(194, 129, 255, 0.16);
  backdrop-filter: blur(2px);
}

.counseling-ai-loading__bubble--1 {
  top: 13%;
  left: 2%;
  width: 62px;
  height: 62px;
  animation: counselingAiV16Bubble 8s ease-in-out infinite;
}

.counseling-ai-loading__bubble--2 {
  top: 28%;
  right: 3%;
  width: 38px;
  height: 38px;
  animation: counselingAiV16Bubble 6.7s ease-in-out -2s infinite;
}

.counseling-ai-loading__bubble--3 {
  right: 8%;
  bottom: 9%;
  width: 78px;
  height: 78px;
  animation: counselingAiV16Bubble 9.4s ease-in-out -4s infinite;
}

.counseling-ai-loading__bubble--4 {
  bottom: 13%;
  left: 5%;
  width: 31px;
  height: 31px;
  animation: counselingAiV16Bubble 7.1s ease-in-out -1s infinite;
}

.counseling-ai-loading__bubble--5 {
  top: 6%;
  right: 20%;
  width: 23px;
  height: 23px;
  animation: counselingAiV16Bubble 6.3s ease-in-out -3s infinite;
}

.counseling-ai-loading__bubble--6 {
  top: 43%;
  left: 11%;
  width: 18px;
  height: 18px;
  animation: counselingAiV16Bubble 5.8s ease-in-out -1.5s infinite;
}

.counseling-ai-loading__burst {
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.94) 0,
      rgba(248, 217, 255, 0.7) 12%,
      rgba(196, 126, 255, 0.24) 38%,
      transparent 70%
    );
  transform: translate(-50%, -50%) scale(0.2);
  mix-blend-mode: screen;
}

.counseling-ai-loading__stardust {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 410px;
  opacity: 0.52;
  border-radius: 50%;
  background:
    conic-gradient(
      from 30deg,
      transparent 0deg,
      rgba(255, 231, 175, 0.18) 18deg,
      transparent 38deg,
      rgba(208, 159, 255, 0.18) 74deg,
      transparent 104deg,
      rgba(255, 255, 255, 0.12) 150deg,
      transparent 205deg,
      rgba(238, 187, 255, 0.16) 275deg,
      transparent 360deg
    );
  filter: blur(3px);
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: counselingAiV16Stardust 13s linear infinite;
}

.counseling-ai-loading__halo {
  z-index: 3;
}

.counseling-ai-loading__halo--one {
  width: 430px;
  height: 430px;
  border-color: rgba(226, 188, 255, 0.3);
  box-shadow:
    0 0 55px rgba(184, 105, 255, 0.24),
    inset 0 0 70px rgba(174, 99, 255, 0.12);
}

.counseling-ai-loading__halo--two {
  width: 340px;
  height: 340px;
  border-color: rgba(255, 219, 145, 0.3);
}

.counseling-ai-loading__orbit {
  z-index: 8;
  animation: none !important;
}

.counseling-ai-loading__card {
  --loader-x: 0px;
  --loader-y: 0px;
  --loader-rotate: 0deg;
  --loader-start-x: 0px;
  --loader-start-y: 0px;

  width: 96px;
  height: 158px;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate(
      var(--loader-start-x),
      var(--loader-start-y)
    )
    scale(0.42)
    rotate(var(--loader-rotate));
  transition:
    transform 1.15s cubic-bezier(0.22, 0.85, 0.28, 1),
    opacity 0.72s ease,
    filter 0.75s ease;
  transition-delay: calc(var(--loader-index, 0) * 70ms);
  will-change: transform, opacity, filter;
}

.counseling-ai-loading__card:nth-child(1) {
  --loader-x: 0px;
  --loader-y: -260px;
  --loader-start-x: -390px;
  --loader-start-y: -350px;
  --loader-rotate: -8deg;
}

.counseling-ai-loading__card:nth-child(2) {
  --loader-x: 210px;
  --loader-y: -180px;
  --loader-start-x: 390px;
  --loader-start-y: -330px;
  --loader-rotate: 13deg;
}

.counseling-ai-loading__card:nth-child(3) {
  --loader-x: 285px;
  --loader-y: 8px;
  --loader-start-x: 470px;
  --loader-start-y: -45px;
  --loader-rotate: 20deg;
}

.counseling-ai-loading__card:nth-child(4) {
  --loader-x: 210px;
  --loader-y: 190px;
  --loader-start-x: 440px;
  --loader-start-y: 330px;
  --loader-rotate: 12deg;
}

.counseling-ai-loading__card:nth-child(5) {
  --loader-x: 0px;
  --loader-y: 260px;
  --loader-start-x: 110px;
  --loader-start-y: 390px;
  --loader-rotate: -7deg;
}

.counseling-ai-loading__card:nth-child(6) {
  --loader-x: -210px;
  --loader-y: 190px;
  --loader-start-x: -420px;
  --loader-start-y: 350px;
  --loader-rotate: -18deg;
}

.counseling-ai-loading__card:nth-child(7) {
  --loader-x: -285px;
  --loader-y: 8px;
  --loader-start-x: -485px;
  --loader-start-y: 20px;
  --loader-rotate: -16deg;
}

.counseling-ai-loading__card:nth-child(8) {
  --loader-x: -210px;
  --loader-y: -180px;
  --loader-start-x: -430px;
  --loader-start-y: -320px;
  --loader-rotate: -12deg;
}

.counseling-ai-loading__card-face {
  animation: none !important;
}

.counseling-ai-loading__card-frame {
  border-radius: 12px;
  box-shadow:
    0 0 0 2px rgba(116, 62, 172, 0.8),
    0 13px 34px rgba(6, 2, 18, 0.7),
    0 0 28px rgba(205, 139, 255, 0.4);
}

.counseling-ai-loading__card-number {
  top: -10px;
  right: -10px;
  width: 27px;
  height: 27px;
  color: #402052;
  background:
    linear-gradient(145deg, #fff2c5, #e7b968);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.72),
    0 5px 15px rgba(12, 3, 25, 0.55),
    0 0 18px rgba(255, 216, 132, 0.4);
}

.counseling-ai-loading.is-summoning
  .counseling-ai-loading__card {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate(
      var(--loader-start-x),
      var(--loader-start-y)
    )
    scale(0.7)
    rotate(var(--loader-rotate));
}

.counseling-ai-loading.is-converging
  .counseling-ai-loading__card {
  opacity: 1;
  filter: brightness(1.1) saturate(1.12);
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--loader-x) * 0.28),
      calc(var(--loader-y) * 0.28)
    )
    scale(0.9)
    rotate(calc(var(--loader-rotate) * 0.35));
}

.counseling-ai-loading.is-fusing
  .counseling-ai-loading__card {
  opacity: 0.94;
  filter:
    brightness(1.3)
    saturate(1.25)
    drop-shadow(0 0 18px rgba(233, 189, 255, 0.82));
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--loader-x) * 0.06),
      calc(var(--loader-y) * 0.06)
    )
    scale(0.78)
    rotate(calc(var(--loader-rotate) * 0.1));
}

.counseling-ai-loading.is-bursting
  .counseling-ai-loading__card {
  opacity: 0.35;
  filter:
    brightness(1.8)
    saturate(0.9)
    blur(1px);
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--loader-x) * 0.5),
      calc(var(--loader-y) * 0.5)
    )
    scale(1.08)
    rotate(var(--loader-rotate));
}

.counseling-ai-loading.is-bursting
  .counseling-ai-loading__burst {
  animation: counselingAiV16Burst 0.92s ease-out forwards;
}

.counseling-ai-loading.is-expanding
  .counseling-ai-loading__card,
.counseling-ai-loading.is-floating
  .counseling-ai-loading__card {
  opacity: 1;
  filter:
    brightness(1.05)
    saturate(1.1)
    drop-shadow(0 0 14px rgba(213, 161, 255, 0.42));
  transform:
    translate(-50%, -50%)
    translate(
      var(--loader-x),
      var(--loader-y)
    )
    scale(1)
    rotate(var(--loader-rotate));
}

.counseling-ai-loading.is-floating
  .counseling-ai-loading__card-face {
  animation:
    counselingAiV16CardFloat 3.8s ease-in-out infinite;
  animation-delay: var(--loader-card-delay);
}

.counseling-ai-loading__core {
  z-index: 12;
}

.counseling-ai-loading__crystal {
  width: 174px;
  height: 174px;
  border: 1px solid rgba(255, 240, 255, 0.82);
  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(255, 255, 255, 0.98) 0,
      rgba(255, 255, 255, 0.26) 8%,
      transparent 18%
    ),
    radial-gradient(
      circle at 48% 51%,
      rgba(247, 210, 255, 0.98),
      rgba(169, 97, 229, 0.83) 42%,
      rgba(43, 18, 79, 0.98) 76%
    );
  box-shadow:
    inset 0 0 38px rgba(255, 255, 255, 0.38),
    0 0 28px rgba(236, 192, 255, 0.7),
    0 0 82px rgba(180, 99, 255, 0.58),
    0 0 150px rgba(140, 69, 220, 0.25);
}

.counseling-ai-loading.is-fusing
  .counseling-ai-loading__crystal,
.counseling-ai-loading.is-bursting
  .counseling-ai-loading__crystal {
  animation: counselingAiV16CrystalCharge 0.78s ease-in-out infinite;
}

.counseling-ai-loading.is-floating
  .counseling-ai-loading__crystal {
  animation: counselingAiV16CrystalFloat 3s ease-in-out infinite;
}

.counseling-ai-loading__fox {
  width: 94px;
  margin-top: -27px;
}

.counseling-ai-loading__status {
  width: min(720px, 100%);
  margin-top: -4px;
  padding: 23px 28px 21px;
  border: 1px solid rgba(236, 202, 255, 0.38);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(34, 18, 62, 0.72),
      rgba(23, 11, 47, 0.58)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 48px rgba(7, 2, 22, 0.34),
    0 0 30px rgba(185, 111, 255, 0.12);
  backdrop-filter: blur(18px);
}

.counseling-ai-loading__status::before,
.counseling-ai-loading__status::after {
  position: absolute;
  top: 50%;
  color: #f6d787;
  content: "✦";
  text-shadow: 0 0 16px rgba(255, 216, 128, 0.75);
  transform: translateY(-50%);
}

.counseling-ai-loading__status::before {
  left: 22px;
}

.counseling-ai-loading__status::after {
  right: 22px;
}

.counseling-ai-loading__status strong {
  font-size: 17px;
}

@keyframes counselingAiV16StarField {
  to {
    background-position:
      73px 73px,
      -117px 117px,
      151px -151px;
  }
}

@keyframes counselingAiV16NebulaBreath {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes counselingAiV16NebulaOne {
  0%,
  100% {
    opacity: 0.48;
    transform: translate(-2%, 2%) scale(0.94);
  }

  50% {
    opacity: 0.92;
    transform: translate(5%, -4%) scale(1.08);
  }
}

@keyframes counselingAiV16NebulaTwo {
  0%,
  100% {
    opacity: 0.48;
    transform: translate(3%, 2%) scale(0.96);
  }

  50% {
    opacity: 0.88;
    transform: translate(-5%, -3%) scale(1.09);
  }
}

@keyframes counselingAiV16GalaxyRing {
  to {
    transform:
      translate(-50%, -50%)
      rotate(349deg);
  }
}

@keyframes counselingAiV16GalaxyRingReverse {
  to {
    transform:
      translate(-50%, -50%)
      rotate(-371deg);
  }
}

@keyframes counselingAiV16Bubble {
  0%,
  100% {
    opacity: 0.36;
    transform: translate3d(0, 8px, 0) scale(0.92);
  }

  50% {
    opacity: 0.9;
    transform: translate3d(10px, -18px, 0) scale(1.08);
  }
}

@keyframes counselingAiV16Stardust {
  to {
    transform:
      translate(-50%, -50%)
      rotate(348deg);
  }
}

@keyframes counselingAiV16Burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.8);
  }
}

@keyframes counselingAiV16CardFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1.2deg);
  }
}

@keyframes counselingAiV16CrystalCharge {
  0%,
  100% {
    transform: scale(0.96);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.1);
    filter: brightness(1.55);
  }
}

@keyframes counselingAiV16CrystalFloat {
  0%,
  100% {
    transform: translateY(0) scale(0.98);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-7px) scale(1.04);
    filter: brightness(1.24);
  }
}

@media (max-width: 760px) {
  .counseling-ai-loading {
    width: calc(100% - 14px);
    min-height: 650px;
    margin: 8px auto 42px;
    padding: 26px 8px 24px;
    border-radius: 27px;
  }

  .counseling-ai-loading__header h2 {
    font-size: clamp(25px, 8vw, 35px);
  }

  .counseling-ai-loading__header > p:last-child {
    padding-inline: 8px;
    font-size: 13px;
  }

  .counseling-ai-loading__stage {
    width: 100%;
    height: 455px;
    margin-top: 6px;
    transform: scale(0.82);
    transform-origin: top center;
    margin-bottom: -78px;
  }

  .counseling-ai-loading__card {
    width: 79px;
    height: 130px;
  }

  .counseling-ai-loading__galaxy-ring--one {
    width: 610px;
    height: 350px;
  }

  .counseling-ai-loading__galaxy-ring--two {
    width: 500px;
    height: 290px;
  }

  .counseling-ai-loading__status {
    width: calc(100% - 16px);
    padding: 20px 34px 18px;
    border-radius: 20px;
  }

  .counseling-ai-loading__status strong {
    font-size: 14px;
  }

  .counseling-ai-loading__status p {
    font-size: 11px;
  }

  .counseling-ai-loading__status::before {
    left: 14px;
  }

  .counseling-ai-loading__status::after {
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .counseling-ai-loading *,
  .counseling-ai-loading *::before,
  .counseling-ai-loading *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* COUNSELING_AI_LOADING_V16_END */

/* COUNSELING_AI_LOADING_BG_V16_START */

/*
 * V16 일러스트 무대
 * 배경 이미지에는 제목, 수정구슬, 여우, 슬롯, 하단 패널이
 * 포함되어 있으므로 실제 DOM에서는 카드와 광원 효과를 중심으로 표시합니다.
 */

.counseling-ai-loading {
  width: min(1280px, calc(100% - 24px));
  aspect-ratio: 3 / 2;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 192, 255, 0.62);
  border-radius: 34px;
  background:
    linear-gradient(
      rgba(7, 4, 27, 0.05),
      rgba(7, 4, 27, 0.05)
    ),
    url(
      "/static/images/counseling/counseling-ai-loading-bg-v16.png?v=20260724"
    )
    center center / cover no-repeat;
  box-shadow:
    0 36px 100px rgba(24, 8, 52, 0.48),
    0 0 0 1px rgba(255, 242, 255, 0.08) inset;
}

/* 이미지에 제목이 들어 있으므로 기존 HTML 제목은 접근성만 유지 */
.counseling-ai-loading__header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 배경 이미지의 전체 무대 비율에 맞춤 */
.counseling-ai-loading__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
}

/*
 * 이미지 안에 수정구슬과 여우가 있으므로
 * 기존 HTML 수정구슬과 여우는 중복 표시하지 않습니다.
 */
.counseling-ai-loading__core {
  display: none;
}

/* 기존 장식 중 이미지와 중복되는 것은 숨김 */
.counseling-ai-loading__halo,
.counseling-ai-loading__stars,
.counseling-ai-loading__nebula,
.counseling-ai-loading__galaxy-ring,
.counseling-ai-loading__bubble {
  display: none;
}

/*
 * 카드 배치 기준점
 * 이미지 중심 마법진 기준으로 조정합니다.
 */
.counseling-ai-loading__orbit {
  position: absolute;
  z-index: 15;
  top: 49.5%;
  left: 50%;
  width: 1px;
  height: 1px;
  transform: none;
}

/* 실제 배경 슬롯에 맞춘 카드 크기 */
.counseling-ai-loading__card {
  width: clamp(58px, 7.2vw, 105px);
  height: clamp(96px, 11.8vw, 172px);
}

/*
 * 일러스트의 원형 슬롯에 맞춘 카드 좌표
 * 데스크톱 기준 1280×853 비율
 */
.counseling-ai-loading__card:nth-child(1) {
  --loader-x: 0px;
  --loader-y: clamp(-255px, -20vw, -170px);
  --loader-rotate: 0deg;
}

.counseling-ai-loading__card:nth-child(2) {
  --loader-x: clamp(150px, 18vw, 245px);
  --loader-y: clamp(-190px, -14vw, -120px);
  --loader-rotate: 8deg;
}

.counseling-ai-loading__card:nth-child(3) {
  --loader-x: clamp(215px, 23vw, 310px);
  --loader-y: 0px;
  --loader-rotate: 12deg;
}

.counseling-ai-loading__card:nth-child(4) {
  --loader-x: clamp(150px, 18vw, 245px);
  --loader-y: clamp(120px, 14vw, 190px);
  --loader-rotate: 8deg;
}

.counseling-ai-loading__card:nth-child(5) {
  --loader-x: 0px;
  --loader-y: clamp(170px, 20vw, 255px);
  --loader-rotate: 0deg;
}

.counseling-ai-loading__card:nth-child(6) {
  --loader-x: clamp(-245px, -18vw, -150px);
  --loader-y: clamp(120px, 14vw, 190px);
  --loader-rotate: -8deg;
}

.counseling-ai-loading__card:nth-child(7) {
  --loader-x: clamp(-310px, -23vw, -215px);
  --loader-y: 0px;
  --loader-rotate: -12deg;
}

.counseling-ai-loading__card:nth-child(8) {
  --loader-x: clamp(-245px, -18vw, -150px);
  --loader-y: clamp(-190px, -14vw, -120px);
  --loader-rotate: -8deg;
}

/* 카드 테두리를 일러스트의 황금색과 통일 */
.counseling-ai-loading__card-frame {
  padding: 3px;
  border: 1px solid rgba(255, 228, 159, 0.94);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      #ffe9a8,
      #9d5ed0 48%,
      #f4c56d
    );
  box-shadow:
    0 0 0 2px rgba(83, 38, 132, 0.78),
    0 12px 31px rgba(7, 2, 22, 0.72),
    0 0 26px rgba(219, 155, 255, 0.55),
    0 0 45px rgba(255, 205, 115, 0.2);
}

/* 카드 주변 은하수 잔상 */
.counseling-ai-loading__card::before {
  position: absolute;
  z-index: -1;
  inset: -24px;
  content: "";
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(248, 210, 255, 0.38),
      rgba(178, 95, 255, 0.18) 38%,
      transparent 71%
    );
  filter: blur(9px);
  transition:
    opacity 0.7s ease,
    transform 0.8s ease;
}

/* 폭발 및 확산 단계에서 광륜 표시 */
.counseling-ai-loading.is-bursting
  .counseling-ai-loading__card::before,
.counseling-ai-loading.is-expanding
  .counseling-ai-loading__card::before,
.counseling-ai-loading.is-floating
  .counseling-ai-loading__card::before {
  opacity: 1;
  animation:
    counselingAiLoadingBgCardAuraV16
    3.6s ease-in-out infinite;
}

/* 중앙 수정구슬 위치 위에 DOM 광원만 덧씌움 */
.counseling-ai-loading__burst {
  z-index: 11;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(110px, 15vw, 210px);
  height: clamp(110px, 15vw, 210px);
  opacity: 0.2;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.92) 0,
      rgba(238, 203, 255, 0.65) 15%,
      rgba(176, 96, 255, 0.25) 42%,
      transparent 72%
    );
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  animation:
    counselingAiLoadingBgCrystalV16
    2.6s ease-in-out infinite;
}

/* 마법진 위 은하수 회전광 */
.counseling-ai-loading__stardust {
  z-index: 9;
  top: 50%;
  left: 50%;
  display: block;
  width: 62%;
  height: 58%;
  opacity: 0.58;
  border-radius: 50%;
  background:
    conic-gradient(
      from 15deg,
      transparent 0deg 20deg,
      rgba(255, 227, 158, 0.2) 27deg,
      transparent 40deg 88deg,
      rgba(210, 157, 255, 0.25) 99deg,
      transparent 113deg 184deg,
      rgba(255, 255, 255, 0.14) 197deg,
      transparent 214deg 286deg,
      rgba(240, 192, 255, 0.22) 298deg,
      transparent 320deg 360deg
    );
  filter: blur(2px);
  transform:
    translate(-50%, -50%)
    rotate(-8deg);
  mix-blend-mode: screen;
  animation:
    counselingAiLoadingBgGalaxyV16
    14s linear infinite;
}

/*
 * 배경 이미지 하단에 이미 상태 패널이 있으므로
 * 기존 패널은 투명 텍스트 레이어로 올립니다.
 */
.counseling-ai-loading__status {
  position: absolute;
  z-index: 25;
  right: 23%;
  bottom: 5.2%;
  left: 23%;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.counseling-ai-loading__status::before,
.counseling-ai-loading__status::after {
  display: none;
}

.counseling-ai-loading__dots {
  margin-bottom: 8px;
}

.counseling-ai-loading__status strong {
  color: #fff8e8;
  font-size: clamp(12px, 1.35vw, 17px);
  text-shadow:
    0 2px 10px rgba(6, 1, 18, 0.88),
    0 0 18px rgba(220, 170, 255, 0.52);
}

.counseling-ai-loading__status p {
  max-width: 90%;
  margin-top: 5px;
  color: rgba(245, 232, 255, 0.76);
  font-size: clamp(9px, 1vw, 12px);
  text-shadow:
    0 2px 7px rgba(5, 1, 16, 0.92);
}

@keyframes counselingAiLoadingBgGalaxyV16 {
  to {
    transform:
      translate(-50%, -50%)
      rotate(352deg);
  }
}

@keyframes counselingAiLoadingBgCrystalV16 {
  0%,
  100% {
    opacity: 0.28;
    transform:
      translate(-50%, -50%)
      scale(0.92);
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.86;
    transform:
      translate(-50%, -50%)
      scale(1.14);
    filter: brightness(1.45);
  }
}

@keyframes counselingAiLoadingBgCardAuraV16 {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.16);
  }
}

@media (max-width: 760px) {
  .counseling-ai-loading {
    width: calc(100% - 10px);
    aspect-ratio: 3 / 2;
    min-height: 0;
    margin: 8px auto 34px;
    border-radius: 22px;
  }

  .counseling-ai-loading__stage {
    height: 100%;
    margin: 0;
    transform: none;
  }

  .counseling-ai-loading__card {
    width: clamp(38px, 9.5vw, 58px);
    height: clamp(63px, 15.6vw, 95px);
  }

  .counseling-ai-loading__card-number {
    top: -7px;
    right: -7px;
    width: 19px;
    height: 19px;
    border-width: 1px;
    font-size: 9px;
  }

  .counseling-ai-loading__status {
    right: 14%;
    bottom: 4.5%;
    left: 14%;
  }

  .counseling-ai-loading__dots {
    margin-bottom: 3px;
  }

  .counseling-ai-loading__dots span {
    width: 5px;
    height: 5px;
  }

  .counseling-ai-loading__status strong {
    font-size: clamp(9px, 2.8vw, 13px);
    line-height: 1.35;
  }

  .counseling-ai-loading__status p {
    display: none;
  }
}

/* COUNSELING_AI_LOADING_BG_V16_END */