/*
============================================================================
ASKCARBI VOICE CORE GLOBAL GLASS OVERLAY V2
Transparent overlay that keeps the customer-visible page clearly readable.
This file only overrides the existing Voice Core appearance.
============================================================================
*/

#carbi-voice-core {
  /*
   * The page remains visible behind the Voice Core.
   * No solid full-screen blackout.
   */
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(22, 164, 255, 0.16) 0%,
      rgba(15, 111, 213, 0.09) 27%,
      rgba(2, 17, 38, 0.12) 56%,
      rgba(0, 7, 20, 0.24) 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(2.5px)
    saturate(1.06) !important;

  backdrop-filter:
    blur(2.5px)
    saturate(1.06) !important;
}

#carbi-voice-core .cvc-background-grid {
  opacity: 0.12 !important;
}

#carbi-voice-core .cvc-scan {
  opacity: 0.1 !important;
}

#carbi-voice-core .cvc-shell {
  width:
    min(
      500px,
      calc(100vw - 24px)
    ) !important;

  min-height:
    min(
      625px,
      calc(
        var(
          --carbi-visible-height,
          100dvh
        ) - 26px
      )
    ) !important;

  border:
    1px solid
    rgba(102, 210, 255, 0.27) !important;

  /*
   * Transparent computer-glass panel.
   */
  background:
    linear-gradient(
      155deg,
      rgba(7, 34, 68, 0.25),
      rgba(3, 17, 38, 0.11)
    ) !important;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(1.08) !important;

  backdrop-filter:
    blur(3px)
    saturate(1.08) !important;

  box-shadow:
    0 26px 85px
    rgba(0, 8, 26, 0.27),
    inset 0 1px 0
    rgba(255, 255, 255, 0.09) !important;
}

#carbi-voice-core .cvc-header {
  text-shadow:
    0 2px 12px
    rgba(0, 12, 32, 0.8);
}

#carbi-voice-core .cvc-header p {
  color:
    rgba(
      210,
      239,
      255,
      0.88
    ) !important;
}

#carbi-voice-core .cvc-core {
  /*
   * Keep the Carbi C and voice core highly visible,
   * even while the surrounding overlay stays transparent.
   */
  box-shadow:
    0 0
    calc(
      42px +
      (
        var(--cvc-level, 0.35) *
        46px
      )
    )
    rgba(32, 176, 255, 0.84),
    0 0 105px
    rgba(25, 118, 255, 0.32),
    inset 0 0 30px
    rgba(255, 255, 255, 0.2) !important;
}

#carbi-voice-core .cvc-letter {
  color: #ffffff !important;

  text-shadow:
    0 0 8px #ffffff,
    0 0 20px #62ddff,
    0 0 42px
    rgba(30, 139, 255, 0.95) !important;
}

#carbi-voice-core .cvc-status {
  background:
    rgba(
      4,
      30,
      62,
      0.48
    ) !important;

  -webkit-backdrop-filter:
    blur(5px);

  backdrop-filter:
    blur(5px);
}

#carbi-voice-core .cvc-control {
  background:
    rgba(
      11,
      49,
      89,
      0.53
    ) !important;

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);
}

#carbi-voice-core .cvc-control-danger {
  background:
    linear-gradient(
      145deg,
      rgba(199, 41, 78, 0.75),
      rgba(112, 20, 53, 0.72)
    ) !important;
}

@media (max-width: 620px) {
  #carbi-voice-core {
    width: 100% !important;
    max-width: 100% !important;

    height:
      var(
        --carbi-visible-height,
        100dvh
      ) !important;

    overflow: hidden !important;
  }

  #carbi-voice-core .cvc-shell {
    width:
      calc(
        100vw - 14px
      ) !important;

    min-height:
      calc(
        100% - 14px
      ) !important;

    border-radius:
      25px !important;
  }

  #carbi-voice-core .cvc-stage {
    width:
      min(
        350px,
        86vw
      ) !important;
  }
}

@media (max-height: 690px) {
  #carbi-voice-core .cvc-shell {
    min-height:
      calc(
        100% - 10px
      ) !important;
  }

  #carbi-voice-core .cvc-stage {
    width:
      min(
        300px,
        68vh
      ) !important;
  }
}