/*
============================================================================
CARBI VOICE CORE V1
Original ASKCARBI speaking visualization.
This file is isolated from all chat, voice, account, and specialist styling.
============================================================================
*/

:root {
  --cvc-safe-top:
    max(
      14px,
      env(safe-area-inset-top)
    );

  --cvc-safe-bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );
}

#carbi-voice-core {
  position: fixed;
  inset: 0;
  z-index: 2147483620;

  width: 100%;
  max-width: 100%;
  height: 100dvh;

  display: grid;
  place-items: center;

  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(14, 147, 255, 0.22),
      rgba(4, 35, 77, 0.13) 38%,
      rgba(0, 8, 25, 0.84) 78%,
      rgba(0, 4, 15, 0.94)
    );

  -webkit-backdrop-filter:
    blur(13px)
    saturate(1.12);

  backdrop-filter:
    blur(13px)
    saturate(1.12);

  transition:
    opacity 260ms ease,
    visibility 260ms ease;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;

  box-sizing: border-box;
}

#carbi-voice-core,
#carbi-voice-core * {
  box-sizing: border-box;
}

#carbi-voice-core[data-open="true"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.cvc-background-grid {
  position: absolute;
  inset: -10%;

  opacity: 0.2;

  background-image:
    linear-gradient(
      rgba(60, 171, 255, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(60, 171, 255, 0.11) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  mask-image:
    radial-gradient(
      circle at center,
      #000 12%,
      transparent 72%
    );

  -webkit-mask-image:
    radial-gradient(
      circle at center,
      #000 12%,
      transparent 72%
    );

  transform:
    perspective(760px)
    rotateX(62deg)
    translateY(22%);

  animation:
    cvcGridMove
    8s linear infinite;
}

.cvc-scan {
  position: absolute;
  inset: 0;

  opacity: 0.18;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 4px,
      rgba(86, 198, 255, 0.065) 5px
    );
}

.cvc-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18%;

  height: 17%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(70, 203, 255, 0.18),
      transparent
    );

  animation:
    cvcScanSweep
    4.8s linear infinite;
}

.cvc-shell {
  position: relative;
  z-index: 3;

  width:
    min(
      520px,
      calc(100vw - 30px)
    );

  min-height:
    min(
      650px,
      calc(100dvh - 38px)
    );

  padding:
    calc(var(--cvc-safe-top) + 12px)
    20px
    calc(var(--cvc-safe-bottom) + 8px);

  display: grid;
  grid-template-rows:
    auto
    minmax(310px, 1fr)
    auto;

  align-items: center;

  border:
    1px solid
    rgba(94, 193, 255, 0.22);

  border-radius: 34px;

  background:
    linear-gradient(
      155deg,
      rgba(12, 39, 75, 0.5),
      rgba(3, 14, 36, 0.34)
    );

  box-shadow:
    0 35px 100px
    rgba(0, 2, 14, 0.58),
    inset 0 1px 0
    rgba(255, 255, 255, 0.08);

  overflow: hidden;
}

.cvc-shell::before,
.cvc-shell::after {
  content: "";
  position: absolute;

  width: 74px;
  height: 74px;

  pointer-events: none;
}

.cvc-shell::before {
  top: 13px;
  left: 13px;

  border-top:
    2px solid
    rgba(83, 207, 255, 0.72);

  border-left:
    2px solid
    rgba(83, 207, 255, 0.72);

  border-radius:
    16px 0 0 0;
}

.cvc-shell::after {
  right: 13px;
  bottom: 13px;

  border-right:
    2px solid
    rgba(83, 207, 255, 0.52);

  border-bottom:
    2px solid
    rgba(83, 207, 255, 0.52);

  border-radius:
    0 0 16px 0;
}

.cvc-header {
  position: relative;
  z-index: 5;

  text-align: center;
}

.cvc-kicker {
  margin: 0 0 7px;

  color: #79d8ff;
  letter-spacing: 0.28em;
  font-size: 10px;
  font-weight: 850;
}

.cvc-header h2 {
  margin: 0;

  color: #f5fbff;
  letter-spacing: 0.03em;
  font-size:
    clamp(
      23px,
      6vw,
      32px
    );

  font-weight: 720;
}

.cvc-header p {
  margin: 7px 0 0;

  color: #a8c7df;
  font-size: 12px;
  line-height: 1.45;
}

.cvc-stage {
  position: relative;

  width:
    min(
      390px,
      82vw
    );

  aspect-ratio: 1;
  margin: 0 auto;

  display: grid;
  place-items: center;
}

.cvc-aura {
  position: absolute;
  inset: 4%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(43, 203, 255, 0.18),
      rgba(17, 104, 244, 0.09) 40%,
      transparent 69%
    );

  filter: blur(12px);

  animation:
    cvcAura
    2.2s ease-in-out infinite;
}

.cvc-orbit {
  position: absolute;
  inset: 8%;

  border:
    1px solid
    rgba(67, 187, 255, 0.36);

  border-radius: 45% 55% 52% 48%;

  box-shadow:
    0 0 20px
    rgba(28, 154, 255, 0.22);

  animation:
    cvcOrbitClockwise
    8.5s linear infinite;
}

.cvc-orbit::before,
.cvc-orbit::after {
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #72e7ff;

  box-shadow:
    0 0 13px #40cbff,
    0 0 28px
    rgba(38, 157, 255, 0.82);
}

.cvc-orbit::before {
  top: 10%;
  left: 17%;
}

.cvc-orbit::after {
  right: 11%;
  bottom: 21%;
}

.cvc-orbit-two {
  inset: 15%;

  border-color:
    rgba(113, 106, 255, 0.37);

  border-radius:
    57% 43% 47% 53%;

  transform: rotate(35deg);

  animation:
    cvcOrbitCounter
    6.8s linear infinite;
}

.cvc-orbit-three {
  inset: 23%;

  border-style: dashed;
  border-color:
    rgba(65, 216, 255, 0.42);

  border-radius: 50%;

  animation:
    cvcOrbitClockwise
    4.9s linear infinite;
}

.cvc-spectrum {
  position: absolute;
  inset: 6%;

  border-radius: 50%;

  display: grid;
  place-items: center;

  animation:
    cvcSpectrumBreathe
    1.2s ease-in-out infinite;
}

.cvc-spectrum-bar {
  --cvc-bar-index: 0;

  position: absolute;
  top: 50%;
  left: 50%;

  width: 3px;
  height:
    calc(
      10px +
      (
        var(--cvc-level, 0.35) *
        23px
      )
    );

  border-radius: 999px;

  transform-origin:
    50%
    calc(154px);

  transform:
    translate(-50%, -154px)
    rotate(
      calc(
        var(--cvc-bar-index) *
        10deg
      )
    );

  background:
    linear-gradient(
      to top,
      rgba(16, 118, 255, 0.18),
      #58e0ff
    );

  box-shadow:
    0 0 8px
    rgba(65, 211, 255, 0.58);

  opacity:
    calc(
      0.35 +
      (
        var(--cvc-level, 0.35) *
        0.65
      )
    );

  transition:
    height 90ms linear,
    opacity 90ms linear;
}

.cvc-core {
  position: relative;
  z-index: 5;

  width:
    min(
      164px,
      39vw
    );

  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(104, 222, 255, 0.72);

  border-radius:
    36% 64% 58% 42%;

  background:
    radial-gradient(
      circle at 43% 38%,
      #dffaff 0,
      #6bdfff 9%,
      #1789f1 27%,
      #102b7c 52%,
      #03132f 75%
    );

  box-shadow:
    0 0
    calc(
      35px +
      (
        var(--cvc-level, 0.35) *
        42px
      )
    )
    rgba(32, 176, 255, 0.72),
    inset 0 0 30px
    rgba(255, 255, 255, 0.17);

  animation:
    cvcCoreMorph
    4.8s ease-in-out infinite;

  transition:
    box-shadow 90ms linear;
}

.cvc-core::before {
  content: "";
  position: absolute;
  inset: 13%;

  border:
    1px solid
    rgba(188, 242, 255, 0.5);

  border-radius:
    59% 41% 48% 52%;

  animation:
    cvcOrbitCounter
    4.3s linear infinite;
}

.cvc-core::after {
  content: "";
  position: absolute;
  inset: 28%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #ffffff,
      #8be8ff 26%,
      #248eff 47%,
      rgba(8, 80, 205, 0.14) 74%
    );

  box-shadow:
    0 0 22px
    rgba(163, 239, 255, 0.95),
    0 0 48px
    rgba(19, 139, 255, 0.86);

  transform:
    scale(
      calc(
        0.86 +
        (
          var(--cvc-level, 0.35) *
          0.32
        )
      )
    );

  transition:
    transform 80ms linear;
}

.cvc-letter {
  position: relative;
  z-index: 6;

  color: #ffffff;
  text-shadow:
    0 0 8px #ffffff,
    0 0 20px #65dcff;

  font-size:
    clamp(
      33px,
      9vw,
      48px
    );

  font-weight: 850;
}

.cvc-particle {
  --cvc-particle-index: 0;

  position: absolute;
  top: 50%;
  left: 50%;

  width:
    calc(
      2px +
      (
        var(--cvc-particle-index) %
        3
      )
    );

  height:
    calc(
      2px +
      (
        var(--cvc-particle-index) %
        3
      )
    );

  border-radius: 50%;

  background:
    rgba(102, 221, 255, 0.9);

  box-shadow:
    0 0 8px
    rgba(76, 200, 255, 0.88);

  transform:
    rotate(
      calc(
        var(--cvc-particle-index) *
        18deg
      )
    )
    translateY(
      calc(
        -92px -
        (
          (
            var(--cvc-particle-index) %
            5
          ) *
          17px
        )
      )
    );

  animation:
    cvcParticlePulse
    calc(
      1.1s +
      (
        (
          var(--cvc-particle-index) %
          7
        ) *
        0.14s
      )
    )
    ease-in-out infinite;
}

.cvc-footer {
  position: relative;
  z-index: 5;

  display: grid;
  justify-items: center;
  gap: 13px;
}

.cvc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 39px;
  padding: 9px 16px;

  border:
    1px solid
    rgba(89, 204, 255, 0.28);

  border-radius: 999px;

  color: #c7edff;

  background:
    rgba(7, 35, 71, 0.64);

  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 850;
}

.cvc-status-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #55e9ff;

  box-shadow:
    0 0 0 4px
    rgba(54, 204, 255, 0.11),
    0 0 15px
    rgba(54, 204, 255, 0.85);

  animation:
    cvcStatusPulse
    0.85s ease-in-out infinite;
}

.cvc-controls {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 10px;
}

.cvc-control {
  min-width: 0;
  min-height: 48px;

  padding: 10px 13px;

  border:
    1px solid
    rgba(104, 194, 255, 0.3);

  border-radius: 16px;

  color: #d8f3ff;

  background:
    rgba(16, 52, 91, 0.68);

  font: inherit;
  font-size: 12px;
  font-weight: 770;

  cursor: pointer;

  touch-action: manipulation;

  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.cvc-control:active {
  transform: scale(0.97);
}

.cvc-control-danger {
  border-color:
    rgba(255, 127, 149, 0.38);

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      rgba(199, 41, 78, 0.84),
      rgba(131, 25, 62, 0.86)
    );
}

.cvc-mini {
  position: fixed;
  right:
    max(
      13px,
      env(safe-area-inset-right)
    );

  bottom:
    max(
      18px,
      env(safe-area-inset-bottom)
    );

  z-index: 2147483621;

  width: 61px;
  height: 61px;

  border:
    1px solid
    rgba(115, 220, 255, 0.7);

  border-radius: 50%;

  display: none;
  place-items: center;

  color: #ffffff;

  background:
    radial-gradient(
      circle,
      #8eecff,
      #137fe7 36%,
      #071c52 73%
    );

  box-shadow:
    0 0 0 5px
    rgba(25, 149, 255, 0.11),
    0 0 34px
    rgba(31, 169, 255, 0.6);

  font-size: 20px;
  font-weight: 850;

  cursor: pointer;
  touch-action: manipulation;

  animation:
    cvcMiniPulse
    1.25s ease-in-out infinite;
}

.cvc-mini[data-open="true"] {
  display: grid;
}

@media (max-width: 620px) {
  #carbi-voice-core {
    height:
      var(
        --carbi-visible-height,
        100dvh
      );
  }

  .cvc-shell {
    width: calc(100vw - 16px);
    min-height: calc(100% - 16px);

    padding-left: 15px;
    padding-right: 15px;

    border-radius: 26px;
  }

  .cvc-stage {
    width:
      min(
        355px,
        88vw
      );
  }

  .cvc-spectrum-bar {
    transform-origin:
      50%
      calc(
        min(
          40vw,
          145px
        )
      );

    transform:
      translate(
        -50%,
        calc(
          -1 *
          min(
            40vw,
            145px
          )
        )
      )
      rotate(
        calc(
          var(--cvc-bar-index) *
          10deg
        )
      );
  }
}

@media (max-height: 690px) {
  .cvc-shell {
    min-height: calc(100% - 12px);
    grid-template-rows:
      auto
      minmax(260px, 1fr)
      auto;
  }

  .cvc-stage {
    width:
      min(
        310px,
        73vh
      );
  }

  .cvc-header p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #carbi-voice-core *,
  #carbi-voice-core *::before,
  #carbi-voice-core *::after,
  .cvc-mini {
    animation-duration:
      3s !important;

    animation-iteration-count:
      infinite !important;
  }
}

@keyframes cvcGridMove {
  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      0 42px,
      42px 0;
  }
}

@keyframes cvcScanSweep {
  from {
    transform:
      translateY(-15vh);
  }

  to {
    transform:
      translateY(120vh);
  }
}

@keyframes cvcAura {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform:
      scale(
        calc(
          1 +
          (
            var(--cvc-level, 0.35) *
            0.09
          )
        )
      );
  }
}

@keyframes cvcOrbitClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes cvcOrbitCounter {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes cvcSpectrumBreathe {
  0%,
  100% {
    transform: scale(0.98);
  }

  50% {
    transform:
      scale(
        calc(
          1 +
          (
            var(--cvc-level, 0.35) *
            0.05
          )
        )
      );
  }
}

@keyframes cvcCoreMorph {
  0%,
  100% {
    border-radius:
      36% 64% 58% 42%;
    transform:
      rotate(-2deg)
      scale(0.97);
  }

  50% {
    border-radius:
      58% 42% 35% 65%;
    transform:
      rotate(3deg)
      scale(1.04);
  }
}

@keyframes cvcParticlePulse {
  0%,
  100% {
    opacity: 0.18;
  }

  50% {
    opacity: 1;
  }
}

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

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

@keyframes cvcMiniPulse {
  0%,
  100% {
    transform: scale(0.96);
  }

  50% {
    transform: scale(1.05);
  }
}