/* ----------------- DESKTOP ----------------- */

/* Phone mockup styling */
.miraclelink {
  position: relative;
  width: 350px;
  height: 663px;
  margin: auto;
  padding-left: 4px;
  padding-top: 147px;
  background-image: url('/images/phoneborder.png');
  /*background-size: cover;*/
  background-repeat: no-repeat;
  /*background-position: center center;*/
}

/* Screen inside phone */
.miraclelink .screen {
    width: 300px;
    height: 425px;
    background-image: url('https://images.pyonkotchi.com/valphone bg tile.png');
    box-shadow: inset 11px 0px 6px -10px #682d8c60,
                inset -11px 0px 6px -10px #682d8c60,
                inset 0px 11px 6px -10px #682d8c60,
                inset 0px -11px 6px -10px #682d8c60;

    display: flex;
    justify-content: center;
    align-items: center;
}
.mask1 {
  width: 300px;
  height: 423px;
  margin: auto;
  -webkit-mask-image: url(/images/mask.png);
  mask-image: url(/images/mask.png);
  mask-repeat: no-repeat;
}

/* Chat toggle button */
#chatButton {
  margin: 0 auto;
  position: fixed;
  bottom: 20px;    /* distance from bottom */
  left: 20px;      /* distance from left */
  background: #f759c5;
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: url(/images/cursorglow.png), default;
  font-size: 16px;
  text-align: center;
  display: block;
}

/* Hover effect */
#chatButton:hover {
  background: #85c8ff;
}


/* Chat container for desktop: centers phone mockup */
#chatBox {
  position: fixed;
  bottom: 10px;
  left: 20px;
  width: 350px;
  height: 685px;
  border-radius: 12px 12px 0 0;
  transform: translateY(120%);
  transition: transform 0.3s ease-out;
  overflow: hidden;
  display: flex;
  justify-content: center;
  /* center horizontally */
  align-items: flex-end;
  /* align to bottom */
}

/* iFrame */
#chatBox iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Show chat */
#chatBox.show {
  transform: translateY(0);
}

#chatHeaderButton {
  display: none;
}

/* Close Button - Pink Circle */
/* Wrapper expands the hitbox without changing visuals */
#closeChatWrapper {
  position: absolute;
  top: -10px;
  left: -10px;
  padding: 12px; /* Extra clickable space */
  cursor: url(/images/cursorglow.png), default;
  z-index: 1000;
}

/* Visual 32px circle stays the same */
#closeChat {
  width: 32px;
  height: 32px;
  background: #ed3fb6c7;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: inherit;
  z-index: 1000;
}

/* White X */
#closeChat::before {
  content: "✕";
  color: white;
  font-size: 16px;
  line-height: 1;
  pointer-events: none; /* so clicks go to the button */
}
#chatBox, #chatButton {
  z-index: 2000 !important;
}

.top {
  z-index: 1000; /* Keep it above content but below chat */
}

/* ----------------- MOBILE ----------------- */
@media (max-width: 768px) {

  /* Only show when chat is open */
  #chatBox.show+#chatHeaderButton {
    display: block;
  }

  /* Original chat button visible only when chat is closed */
  #chatButton {
    display: block;
    margin: 10px auto;
    z-index: 1000;
  }

  /* Chat container full width below header */
  #chatBox {
    width: 100%;
    height: calc(100% - 40px);
    /* leave space for header */
    left: 0;
    top: 40px;
    bottom: 0;
    right: 0;
    border-radius: 0;
    transform: translateY(100%);
  }

  #chatBox iframe {
    flex-grow: 1;
    height: 100%;
  }

  /* Remove phone mockup on mobile */
  .miraclelink,
  .mask1,
  .screen {
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Mobile header button */
  #chatHeaderButton {
    display: none;
    /* only visible when chat is open */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    font-family: "Quicksand", serif;
    font-optical-sizing: auto;
    font-style: normal;
    background: linear-gradient(to bottom, #FFBBF4, #FF94D3);
    color: #FF59C5;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    border: none;
    border-bottom: 2px solid #FF81CE;
    cursor: pointer;
    z-index: 1000;
    text-shadow:
      1px 1px 0 #fff,
      -1px 1px 0 #fff,
      1px -1px 0 #fff,
      -1px -1px 0 #fff;
  }
}