/* MYBAMBOO LIME AUDIO ORB */

:root {
  --bamboo-orb-lime: #beff27;
}

.hero-carousel-card,
.hero-carousel-card * {
  box-sizing: border-box;
}

.hero-carousel-card {
  min-width: 0;
}

.hero-carousel-card.is-calling {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;

  padding: clamp(10px, 1.1vw, 16px) !important;

  min-width: 0;
  min-height: 0;
}

.hero-carousel-card.is-calling
.hero-carousel-card-icon,

.hero-carousel-card.is-calling
.hero-carousel-card-label,

.hero-carousel-card.is-calling
.hero-carousel-card-name,

.hero-carousel-card.is-calling
.hero-carousel-card-business,

.hero-carousel-card.is-calling
.hero-carousel-card-divider,

.hero-carousel-card.is-calling
.hero-carousel-card-status,

.hero-carousel-card.is-calling
.hero-carousel-card-desc {
  flex-shrink: 0;

  max-width: 100%;
  min-width: 0;

  position: relative;
  inset: auto;
  transform: none;

  text-align: center;
  overflow-wrap: anywhere;
}

.hero-carousel-card.is-calling
.hero-carousel-card-icon {
  margin: 0 0 4px;
}

.hero-carousel-card.is-calling
.hero-carousel-card-label {
  margin: 0 0 2px;
  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.22;
}

.hero-carousel-card.is-calling
.hero-carousel-card-name {
  margin: 0 0 2px;
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.08;
}

.hero-carousel-card.is-calling
.hero-carousel-card-business {
  margin: 0 0 3px;
  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.22;
}

.hero-carousel-card.is-calling
.hero-carousel-card-divider {
  margin: 3px 0;
}

.hero-carousel-card.is-calling
[data-bam-agent-play] {
  display: none !important;
}

.hero-carousel-card.is-calling
[data-bam-agent-stop] {
  display: grid !important;
  place-items: center;

  /* Centred in the normal flex flow, same spot the play button sat in —
     not a corner badge (position: absolute; top/right), which read as
     "off to the side" instead of "the control that replaced play". */
  position: relative !important;
  margin: 0 auto 4px;

  transform: none !important;

  z-index: 6;

  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
}

.hero-carousel-card.is-calling
.bamboo-orb-stage {
  flex: 1 1 0;

  min-height: 44px;
  min-width: 0;

  width: 100%;
  max-width: 100%;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(
    circle,
    rgba(190,255,39,.055),
    transparent 70%
  );
}

.hero-carousel-card.is-calling
svg.hero-carousel-card-wave,

.hero-carousel-card.is-calling
svg.bamboo-liquid-orb {
  flex: 0 1 auto;

  display: block;

  width: min(100%, 150px);
  height: auto;

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

  aspect-ratio: 1;
  overflow: hidden;

  color: var(--bamboo-orb-lime);
  fill: none;

  filter: drop-shadow(
    0 0 1.5px rgba(190,255,39,.65)
  );
}

.hero-carousel-card.is-calling
.bamboo-liquid-orb .wave-main {
  fill: none;
  stroke: currentColor;

  filter:
    drop-shadow(
      0 0 2px rgba(190,255,39,.78)
    )
    drop-shadow(
      0 0 4px rgba(190,255,39,.28)
    );
}

.hero-carousel-card.is-calling
.bamboo-liquid-orb .wave-echo {
  fill: none;
  stroke: currentColor;
}

.hero-carousel-card.is-calling
.hero-carousel-card-status,

.hero-carousel-card.is-calling
.hero-carousel-card-desc {
  margin: 4px 0 0;

  max-width: 100%;
  width: 100%;

  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.3;

  white-space: normal;
}

.hero-carousel-card.is-calling
.hero-carousel-card-status[hidden],

.hero-carousel-card.is-calling
.hero-carousel-card-desc[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .hero-carousel-card.is-calling {
    padding: 9px !important;
  }

  .hero-carousel-card.is-calling
  .hero-carousel-card-name {
    font-size: 20px;
  }

  .hero-carousel-card.is-calling
  svg.hero-carousel-card-wave {
    width: min(100%, 112px);
  }
}

@media (max-height: 650px) {
  .hero-carousel-card.is-calling {
    padding: 8px !important;
  }

  .hero-carousel-card.is-calling
  svg.hero-carousel-card-wave {
    width: min(100%, 100px);
  }
}

@media (max-height: 500px) {
  .hero-carousel-card.is-calling
  .hero-carousel-card-icon {
    display: none;
  }

  .hero-carousel-card.is-calling
  .hero-carousel-card-name {
    font-size: 18px;
  }

  .hero-carousel-card.is-calling
  svg.hero-carousel-card-wave {
    width: min(100%, 82px);
  }
}

/* ============================================
   MYBAMBOO 3D VOICE MESH
   Strong audio reaction + contained layout
   ============================================ */

.hero-carousel-card.is-calling {
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.hero-carousel-card.is-calling
.bamboo-orb-stage {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;

  flex: 1 1 0;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.hero-carousel-card.is-calling
.bamboo-voice-mesh {
  display: block;

  width: min(100%, 168px);
  height: auto;

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

  min-width: 0;
  flex: 0 1 auto;

  aspect-ratio: 1 / 1;
  object-fit: contain;

  filter:
    drop-shadow(
      0 0 6px rgba(190,255,39,0.23)
    );
}

.hero-carousel-card.is-calling
.hero-carousel-card-name,
.hero-carousel-card.is-calling
.hero-carousel-card-business,
.hero-carousel-card.is-calling
.hero-carousel-card-status {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 640px) {
  .hero-carousel-card.is-calling
  .bamboo-voice-mesh {
    width: min(100%, 124px);
  }
}

@media (max-height: 650px) {
  .hero-carousel-card.is-calling
  .bamboo-voice-mesh {
    width: min(100%, 104px);
  }
}

/* ===========================================
   MYBAMBOO FINE NEON ORB
   No giant blur, fully contained in card
   =========================================== */

.hero-carousel-card.is-calling {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hero-carousel-card.is-calling
.bamboo-orb-stage {
  display: flex !important;

  flex: 1 1 0;

  align-items: center;
  justify-content: center;

  position: relative;

  width: 100%;
  max-width: 100%;

  min-height: 0;
  min-width: 0;

  padding: 0;

  overflow: hidden;

  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;

  border-radius: 12px;
}

.hero-carousel-card.is-calling
.bamboo-voice-orb {
  display: block;

  width: min(100%, 170px);
  height: auto;

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

  aspect-ratio: 1 / 1;
  object-fit: contain;

  flex: 0 1 auto;

  filter: none !important;
  box-shadow: none !important;
}

.hero-carousel-card.is-calling
.hero-carousel-card-name,
.hero-carousel-card.is-calling
.hero-carousel-card-business,
.hero-carousel-card.is-calling
.hero-carousel-card-status,
.hero-carousel-card.is-calling
.hero-carousel-card-desc {
  position: relative;

  min-width: 0;
  max-width: 100%;

  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 640px) {
  .hero-carousel-card.is-calling
  .bamboo-voice-orb {
    width: min(100%, 125px);
  }
}

@media (max-height: 620px) {
  .hero-carousel-card.is-calling
  .bamboo-voice-orb {
    width: min(100%, 100px);
  }
}

/* ===========================================
   CLOSE CALL BUTTON
   Replaces the top stop square — last element
   under the Live status line
   =========================================== */

.hero-carousel-card.is-calling
.hero-carousel-card-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;

  margin: 6px auto 0 !important;
  padding: 3px 8px !important;

  position: relative !important;
  transform: none !important;
  inset: auto !important;

  background: #BEFF27 !important;
  color: #000000 !important;

  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;

  border: 0;
  border-radius: 12px;

  cursor: pointer;
  z-index: 6;
}