#Chat {
  position: fixed;
  bottom: var(--n-2xl);
  right: var(--n-2xl);
  transition: all .6s ease;

  #chatButton {
    --btn-bg: var(--pos-alt);
    --btn-txt: var(--ntl-100);
    --btn-gpm: var(--n-xl);
    transition-timing-function: var(--ease-out);

    &:has(+ #chatDialog[open]) {
      opacity: 0;
      transform: translateY(var(--n-xl));
      transition-timing-function: linear
    }

    @starting-style {
      &:has(+ #chatDialog[open]) {
        opacity: 1;
        transform: translateY(0)
      }
    }
  }

  #chatDialog {
    position: fixed;
    margin: auto var(--n-3xl) var(--n-2xl) auto;
    width: min(22em, 100%);
    transform: scale(1) translateY(0);
    transform-origin: bottom right;
    transition-property: opacity, transform;
    transition-duration: var(--trs-2);
    transition-timing-function: var(--ease-out);
    a {width: 100%;text-transform: capitalize}
    &:not([open]) {display: none}
    &[open] {
      display: block;
      transition-property: display, opacity, transform;
      transition-duration: var(--trs-2);
      transition-timing-function: var(--ease-out);
      transition-behavior: allow-discrete;

      .cls-btn {--btn-pos: clamp(var(--n-l), 1.9vw, var(--n-2xl))}
    }

    @starting-style {
      &[open] {
        display: block;
        opacity: 0;
        transform: scale(0.92) translateY(8px)
      }
    }
  }
}

.viber {--btn-txt: var(--ntl-100);--btn-bg: var(--viber)}
.whatsapp {--btn-txt: var(--ntl-100);--btn-bg: var(--whatsapp)}
.telegram {--btn-txt: var(--ntl-100);--btn-bg: var(--telegram)}
.messenger {--btn-txt: var(--ntl-100);--btn-bg: var(--facebook)}

body:has(#sticky-cart-dialog.active) #Chat {bottom: var(--n-6xl)}
@media (width < 40em) {
  #Chat #chatDialog {margin: auto auto var(--n-2xl)}
}