/* =========================================================
   TAQA ELSWEDY — WHATSAPP FLOATING CTA
   Desktop: compact premium pill
   Mobile: circular floating button
========================================================= */

:root{
  --taqa-wa-orange:#C06024;
  --taqa-wa-orange-soft:#E39A60;
  --taqa-wa-space:#070C14;
  --taqa-wa-white:#F4F7F8;
  --taqa-wa-green:#25D366;
}

/* =========================================================
   DESKTOP / TABLET
========================================================= */

#myAliceWebChat > div{
  right:22px !important;
  bottom:22px !important;
  left:auto !important;

  min-height:50px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:7px 9px 7px 15px !important;

  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14) !important;

  background:
    linear-gradient(
      145deg,
      rgba(10,18,27,.82),
      rgba(15,31,43,.72)
    ) !important;

  color:#F4F7F8 !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 1px 0 rgba(255,255,255,.08) inset !important;

  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;

  overflow:hidden !important;

  font-family:"Space Grotesk","Manrope",Arial,sans-serif !important;

  transition:
    transform .28s cubic-bezier(.22,.9,.24,1),
    border-color .28s ease,
    box-shadow .28s ease !important;
}

#myAliceWebChat > div::before{
  content:"";
  position:absolute;

  left:0;
  top:10px;
  bottom:10px;

  width:2px;

  border-radius:999px;

  background:linear-gradient(
    180deg,
    transparent,
    var(--taqa-wa-orange-soft),
    var(--taqa-wa-orange),
    transparent
  );

  box-shadow:
    0 0 10px rgba(192,96,36,.55),
    0 0 20px rgba(192,96,36,.18);

  pointer-events:none;
}

#myAliceWebChat > div::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    115deg,
    rgba(255,255,255,.10),
    transparent 27%,
    transparent 72%,
    rgba(192,96,36,.06)
  );

  pointer-events:none;
  opacity:.7;

  transition:opacity .28s ease;
}

#myAliceWebChat > div:hover{
  transform:translateY(-2px) !important;

  border-color:rgba(227,154,96,.32) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.26),
    0 0 24px rgba(192,96,36,.10),
    0 1px 0 rgba(255,255,255,.09) inset !important;
}

#myAliceWebChat > div:hover::after{
  opacity:1;
}

#myAliceWebChat > div > span{
  position:relative;
  z-index:2;

  margin:0 !important;

  font-size:12px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.025em !important;

  color:inherit !important;
}

#myAliceWebChat > div > svg{
  position:relative;
  z-index:2;

  width:34px !important;
  height:34px !important;

  padding:7px;

  box-sizing:border-box;

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      rgba(37,211,102,.16),
      rgba(37,211,102,.07)
    );

  border:1px solid rgba(37,211,102,.26);

  box-shadow:
    0 0 16px rgba(37,211,102,.09);

  flex:0 0 auto;
}

#myAliceWebChat > div > svg path{
  fill:var(--taqa-wa-green) !important;
}

/* Theme sync */
body.taqa-theme-light #myAliceWebChat > div{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(226,235,239,.58)
    ) !important;

  color:#11161D !important;

  border-color:rgba(17,22,29,.10) !important;

  box-shadow:
    0 10px 28px rgba(26,42,53,.11),
    0 1px 0 rgba(255,255,255,.86) inset !important;
}

body.taqa-theme-dark #myAliceWebChat > div{
  background:
    linear-gradient(
      145deg,
      rgba(7,12,20,.86),
      rgba(16,33,46,.74)
    ) !important;

  color:#F4F7F8 !important;
}

/* =========================================================
   MOBILE — CIRCULAR BUTTON
========================================================= */

@media (max-width:767px){

  #myAliceWebChat > div{
    right:14px !important;
    bottom:14px !important;

    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;

    padding:0 !important;
    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        145deg,
        rgba(7,12,20,.92),
        rgba(18,38,52,.84)
      ) !important;

    border:1px solid rgba(255,255,255,.12) !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,.28),
      0 0 18px rgba(192,96,36,.10),
      inset 0 1px 0 rgba(255,255,255,.08) !important;

    -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
    backdrop-filter:blur(16px) saturate(135%) !important;

    transform:none !important;
  }

  #myAliceWebChat > div:hover{
    transform:none !important;
  }

  #myAliceWebChat > div{
    overflow:visible !important;
  }

  #myAliceWebChat > div > span{
    position:absolute !important;
    left:50% !important;
    top:calc(100% + 6px) !important;

    display:block !important;

    width:max-content !important;
    max-width:84px !important;

    margin:0 !important;
    padding:0 !important;

    transform:translateX(-50%) !important;

    color:var(--taqa-wa-white) !important;

    font-family:"Manrope","Space Grotesk",Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;

    white-space:nowrap !important;
    text-align:center !important;

    text-shadow:0 2px 8px rgba(0,0,0,.38) !important;

    pointer-events:none !important;
  }

  body.taqa-theme-light #myAliceWebChat > div > span{
    color:#11161D !important;
    text-shadow:0 1px 6px rgba(255,255,255,.7) !important;
  }

  body.taqa-theme-dark #myAliceWebChat > div > span{
    color:#F4F7F8 !important;
  }

  #myAliceWebChat > div > svg{
    width:26px !important;
    height:26px !important;

    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

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

  #myAliceWebChat > div > svg path{
    fill:var(--taqa-wa-green) !important;
  }

  #myAliceWebChat > div::before{
    content:"";
    position:absolute;

    inset:4px;

    width:auto;
    height:auto;

    border-radius:50%;

    border:1px solid rgba(192,96,36,.32);

    background:transparent;

    box-shadow:
      0 0 10px rgba(192,96,36,.16),
      inset 0 0 8px rgba(192,96,36,.06);

    pointer-events:none;
  }

  #myAliceWebChat > div::after{
    display:none !important;
  }

  body.taqa-theme-light #myAliceWebChat > div{
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.88),
        rgba(226,235,239,.74)
      ) !important;

    border-color:rgba(17,22,29,.10) !important;

    box-shadow:
      0 8px 20px rgba(26,42,53,.13),
      0 0 16px rgba(192,96,36,.08),
      inset 0 1px 0 rgba(255,255,255,.86) !important;
  }

  body.taqa-theme-dark #myAliceWebChat > div{
    background:
      linear-gradient(
        145deg,
        rgba(7,12,20,.94),
        rgba(16,33,46,.84)
      ) !important;
  }
}


/* =========================================================
   FINAL DESKTOP BEHAVIOR
   Collapsed circle at the extreme bottom-right.
   Expands into a labeled pill on hover/focus.
========================================================= */

@media (min-width:768px){

  #myAliceWebChat > div{
    right:12px !important;
    bottom:12px !important;
    left:auto !important;

    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    max-width:54px !important;

    padding:0 !important;
    margin:0 !important;
    gap:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    border-radius:50% !important;

    overflow:hidden !important;

    transition:
      width .34s cubic-bezier(.22,.9,.24,1),
      max-width .34s cubic-bezier(.22,.9,.24,1),
      border-radius .34s cubic-bezier(.22,.9,.24,1),
      padding .34s cubic-bezier(.22,.9,.24,1),
      gap .34s cubic-bezier(.22,.9,.24,1),
      transform .24s ease,
      box-shadow .28s ease,
      border-color .28s ease !important;
  }

  /* keep the icon centered when collapsed */
  #myAliceWebChat > div > svg{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;

    margin:0 10px !important;
    flex:0 0 34px !important;

    transition:
      margin .34s cubic-bezier(.22,.9,.24,1),
      transform .28s ease !important;
  }

  /* text hidden in collapsed state */
  #myAliceWebChat > div > span{
    display:block !important;

    width:0 !important;
    max-width:0 !important;

    margin:0 !important;

    opacity:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;

    transform:translateX(8px) !important;

    transition:
      width .34s cubic-bezier(.22,.9,.24,1),
      max-width .34s cubic-bezier(.22,.9,.24,1),
      opacity .20s ease,
      transform .34s cubic-bezier(.22,.9,.24,1) !important;
  }

  #myAliceWebChat > div:hover,
  #myAliceWebChat > div:focus-within{
    width:152px !important;
    max-width:152px !important;

    padding:7px 8px 7px 14px !important;
    gap:8px !important;

    border-radius:16px !important;

    transform:translateY(-2px) !important;
  }

  #myAliceWebChat > div:hover > svg,
  #myAliceWebChat > div:focus-within > svg{
    margin:0 !important;
    transform:scale(1.02) !important;
  }

  #myAliceWebChat > div:hover > span,
  #myAliceWebChat > div:focus-within > span{
    width:auto !important;
    max-width:88px !important;

    opacity:1 !important;

    transform:translateX(0) !important;
  }

  /* Make orange accent become a circular energy ring when collapsed */
  #myAliceWebChat > div::before{
    left:5px !important;
    right:5px !important;
    top:5px !important;
    bottom:5px !important;

    width:auto !important;

    border-radius:50% !important;

    background:transparent !important;

    border:1px solid rgba(192,96,36,.26) !important;

    box-shadow:
      0 0 10px rgba(192,96,36,.12),
      inset 0 0 8px rgba(192,96,36,.05) !important;

    transition:
      left .34s cubic-bezier(.22,.9,.24,1),
      right .34s cubic-bezier(.22,.9,.24,1),
      border-radius .34s cubic-bezier(.22,.9,.24,1),
      opacity .28s ease !important;
  }

  #myAliceWebChat > div:hover::before,
  #myAliceWebChat > div:focus-within::before{
    left:0 !important;
    right:auto !important;
    top:10px !important;
    bottom:10px !important;

    width:2px !important;

    border:0 !important;
    border-radius:999px !important;

    background:linear-gradient(
      180deg,
      transparent,
      var(--taqa-wa-orange-soft),
      var(--taqa-wa-orange),
      transparent
    ) !important;

    box-shadow:
      0 0 10px rgba(192,96,36,.55),
      0 0 20px rgba(192,96,36,.18) !important;
  }
}


/* =========================================================
   V2 — MOVE WHOLE WHATSAPP CONTROL 2% UP
   Keeps circle + label together and prevents label clipping.
========================================================= */

@media (min-width:768px){
  #myAliceWebChat > div{
    bottom:calc(12px + 2vh) !important;
  }
}

@media (max-width:767px){

  /* =======================================================
     MOBILE VIEWPORT FIT
     Keep the WHOLE WhatsApp control (circle + label) inside
     the visible phone viewport and above the safe area.
  ======================================================= */

  #myAliceWebChat{
    position:fixed !important;
    right:14px !important;
    bottom:max(
      34px,
      calc(env(safe-area-inset-bottom,0px) + 34px)
    ) !important;

    left:auto !important;
    top:auto !important;

    width:52px !important;
    height:52px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:2147482500 !important;

    overflow:visible !important;
    pointer-events:none !important;
  }

  #myAliceWebChat > div{
    position:relative !important;

    right:auto !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;

    margin:0 !important;

    overflow:visible !important;
    pointer-events:auto !important;
  }

  /* The label sits below the circle, so reserve its real height
     instead of relying on vh percentages. */
  #myAliceWebChat > div > span{
    top:calc(100% + 5px) !important;
  }
}


/* =========================================================
   V3 — HARD MOBILE VIEWPORT ANCHOR
   Anchor the actual WhatsApp control itself to the visual viewport.
   This bypasses any MyAlice wrapper positioning that can push it below
   the visible phone area.
========================================================= */

@media (max-width:767px){

  #myAliceWebChat{
    position:static !important;
    width:0 !important;
    height:0 !important;
    overflow:visible !important;
    pointer-events:none !important;
  }

  #myAliceWebChat > div{
    position:fixed !important;

    right:14px !important;
    left:auto !important;

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

    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    overflow:visible !important;
    pointer-events:auto !important;

    z-index:2147483000 !important;
  }

  #myAliceWebChat > div:hover,
  #myAliceWebChat > div:focus-within,
  #myAliceWebChat > div:active{
    transform:none !important;
  }

  #myAliceWebChat > div > span{
    top:calc(100% + 5px) !important;
  }
}