/*
 * AI24Solutions Voice AI demo pointer — V25
 *
 * Presentation only.
 * assistant.js is not modified.
 *
 * Desktop:
 * callout sits immediately above the floating assistant.
 *
 * Mobile:
 * compact layout respects iPhone safe-area
 * and leaves the assistant control unobstructed.
 */

.voice-widget-callout-v25 {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 900;

  box-sizing: border-box;
  width: min(300px, calc(100vw - 48px));

  padding: 13px 46px 13px 15px;

  border:
    1px solid
    rgba(89, 102, 168, .20);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .98),
      rgba(247, 248, 255, .97)
    );

  box-shadow:
    0 14px 36px
    rgba(30, 41, 70, .14);

  color: #172033;

  pointer-events: none;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.voice-widget-callout-v25__title {
  display: block;

  margin: 0 0 3px;

  color: #172033;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.voice-widget-callout-v25__text {
  display: block;

  color: #68758d;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.voice-widget-callout-v25__pointer {
  position: absolute;
  right: 12px;
  bottom: -20px;

  display: block;

  font-size: 30px;
  line-height: 1;

  transform:
    rotate(-16deg);

  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .voice-widget-callout-v25__pointer {
    animation:
      voice-widget-pointer-v25
      1.7s
      ease-in-out
      infinite;
  }

  @keyframes voice-widget-pointer-v25 {
    0%,
    100% {
      transform:
        translateY(0)
        rotate(-16deg);
    }

    50% {
      transform:
        translateY(5px)
        rotate(-16deg);
    }
  }
}


/*
 * Tablet + mobile
 */
@media (max-width: 767px) {
  .voice-widget-callout-v25 {
    right: 14px;

    bottom:
      calc(
        86px
        + env(safe-area-inset-bottom, 0px)
      );

    width:
      min(
        260px,
        calc(100vw - 86px)
      );

    padding:
      11px
      40px
      11px
      13px;

    border-radius: 14px;
  }

  .voice-widget-callout-v25__title {
    font-size: 13px;
    line-height: 1.25;
  }

  .voice-widget-callout-v25__text {
    font-size: 11px;
    line-height: 1.35;
  }

  .voice-widget-callout-v25__pointer {
    right: 10px;
    bottom: -18px;

    font-size: 27px;
  }
}


/*
 * Narrow phones:
 * iPhone SE / compact Android widths.
 */
@media (max-width: 430px) {
  .voice-widget-callout-v25 {
    right: 12px;

    bottom:
      calc(
        84px
        + env(safe-area-inset-bottom, 0px)
      );

    width:
      min(
        238px,
        calc(100vw - 88px)
      );
  }
}


/*
 * Very narrow viewport.
 */
@media (max-width: 360px) {
  .voice-widget-callout-v25 {
    width:
      min(
        218px,
        calc(100vw - 82px)
      );

    padding:
      10px
      36px
      10px
      11px;
  }

  .voice-widget-callout-v25__title {
    font-size: 12px;
  }

  .voice-widget-callout-v25__text {
    font-size: 10.5px;
  }
}


/*
 * Short mobile screen:
 * keep the prompt compact rather than
 * covering page content.
 */
@media (
  max-width: 767px
) and (
  max-height: 650px
) {
  .voice-widget-callout-v25 {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .voice-widget-callout-v25__text {
    display: none;
  }
}


/* ==================================================
   VOICE WIDGET POINTER V26

   Visual correction:
   - title-only callout;
   - pointer moves from the widget's right side
     toward its upper-left corner;
   - responsive coordinates for desktop/mobile;
   - no assistant runtime dependency.
   ================================================== */

.voice-widget-callout-v25 {
  padding-bottom: 13px;
}

.voice-widget-callout-v25__pointer {
  left: 56px !important;
  right: auto !important;
  bottom: -19px !important;

  animation:
    voice-widget-pointer-v26
    1.7s
    ease-in-out
    infinite !important;

  transform:
    translateY(0)
    rotate(-18deg) !important;
}

@keyframes voice-widget-pointer-v26 {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-18deg);
  }

  50% {
    transform:
      translateY(5px)
      rotate(-18deg);
  }
}


/*
 * Tablet / phone:
 * pointer remains close to the widget's
 * upper-left edge.
 */
@media (max-width: 767px) {
  .voice-widget-callout-v25__pointer {
    left: 48px !important;
    right: auto !important;
    bottom: -17px !important;
  }
}


/*
 * Typical iPhone / Android widths.
 */
@media (max-width: 430px) {
  .voice-widget-callout-v25__pointer {
    left: 44px !important;
    right: auto !important;
    bottom: -15px !important;
  }
}


/*
 * Compact phones.
 */
@media (max-width: 360px) {
  .voice-widget-callout-v25__pointer {
    left: 40px !important;
    right: auto !important;
    bottom: -14px !important;
  }
}


/*
 * Respect reduced-motion preference.
 */
@media (prefers-reduced-motion: reduce) {
  .voice-widget-callout-v25__pointer {
    animation: none !important;
  }
}


/* ==================================================
   VOICE WIDGET CALLOUT POLISH V27

   - compact bubble;
   - width follows the two title lines;
   - AI + assistant stay together;
   - no subtitle;
   - existing pointer behavior is preserved.
   ================================================== */

.voice-widget-callout-v25 {
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;

  padding:
    12px
    14px !important;
}

.voice-widget-callout-v25__title {
  width: max-content !important;
  max-width: none !important;

  margin: 0 !important;

  font-size: 14px !important;
  line-height: 1.22 !important;

  text-wrap: nowrap;
}

.voice-widget-callout-v27__nowrap {
  white-space: nowrap;
}

.voice-widget-callout-v25__text {
  display: none !important;
}


/*
 * Tablet + mobile.
 * The forced two-line structure remains the same,
 * but typography becomes slightly more compact.
 */
@media (max-width: 767px) {
  .voice-widget-callout-v25 {
    max-width:
      calc(
        100vw
        - 28px
        - env(safe-area-inset-left, 0px)
        - env(safe-area-inset-right, 0px)
      ) !important;

    padding:
      11px
      13px !important;
  }

  .voice-widget-callout-v25__title {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}


/*
 * Compact phones.
 */
@media (max-width: 360px) {
  .voice-widget-callout-v25 {
    padding:
      10px
      12px !important;
  }

  .voice-widget-callout-v25__title {
    font-size: 12px !important;
  }
}


/* ==================================================
   VOICE WIDGET MINIMAL CALLOUT V28

   Final visual model:
   - one compact line;
   - no detached pointer;
   - no subtitle;
   - width follows content;
   - positioned directly above assistant widget.
   ================================================== */

.voice-widget-callout-v25 {
  right: 24px !important;
  bottom: 78px !important;

  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;

  padding:
    8px
    12px !important;

  border-radius: 12px !important;

  background:
    rgba(255, 255, 255, .96) !important;

  box-shadow:
    0 8px 24px
    rgba(30, 41, 70, .10) !important;
}

.voice-widget-callout-v25__title {
  display: block !important;

  width: max-content !important;
  max-width: none !important;

  margin: 0 !important;

  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;

  white-space: nowrap !important;
}

.voice-widget-callout-v25__text,
.voice-widget-callout-v25__pointer,
.voice-widget-callout-v27__nowrap {
  display: none !important;
}


/*
 * Tablet + mobile.
 */
@media (max-width: 767px) {
  .voice-widget-callout-v25 {
    right:
      calc(
        12px
        + env(safe-area-inset-right, 0px)
      ) !important;

    bottom:
      calc(
        74px
        + env(safe-area-inset-bottom, 0px)
      ) !important;

    padding:
      7px
      10px !important;

    border-radius: 11px !important;
  }

  .voice-widget-callout-v25__title {
    font-size: 12px !important;
  }
}


/*
 * Very narrow phones.
 */
@media (max-width: 360px) {
  .voice-widget-callout-v25__title {
    font-size: 11px !important;
  }
}