.p-sp-none {
  @media (max-width: 768px) {
    display: none;
  }
}

[data-chat="wrap"] {
  position: fixed;
  right: 0;
  top: 30svh;
  transition: top 0.3s ease, right 0.2s ease;
  z-index: 99;

  @media (max-width: 768px) {
    top: 12svh;
  }
}

button[data-chat] {
  border: none;
  background: none;
}

button[data-chat="disable"] {
  position: absolute;
  font-size: 2.2rem;
  top: -14px;
  left: -8px;
  color: #000;
  text-decoration: none;
  background: #ccc;
  border-radius: 25px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  -moz-text-box-trim: trim-both;
  -moz-text-box-edge: cap alphabetic;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

[data-chat="dialog"] {
  width: 90vw;
  height: 90svh;
  max-width: 600px;
  max-height: calc(100% - 2em - 6px);
  position: fixed;
  inset-inline-start: unset;
  inset-inline-end: 20px;
  inset-block-start: unset;
  inset-block-end: 20px;
  overflow: visible;
  transition: transform 0.3s ease;
  transform-origin: top right;
  border: none;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  user-select: text;
  z-index: 100;

  iframe {
    overflow: auto;
  }

  &::backdrop {
    display: none;
  }
}

button[data-chat="modalclose"]{
  position: absolute;
  font-size: 3.0rem;
  top: -14px;
  right: -8px;
  color: #000;
  text-decoration: none;
  background: #ccc;
  border-radius: 25px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  padding: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

button[data-chat="botopen"] {
  display: grid;
  place-items: center;
  background: #fef000;
  padding: 1rem 0.4rem;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  color: #000;
  text-decoration: none;
  border-width: 2px 0 2px 2px;
  border-style: solid;
  border-color: #333;

  &>span {
    display: grid;
    place-items: start;
    gap: 6px;
    font-weight: bold;
    
    @media (min-width: 769px) {
      writing-mode: vertical-rl;
      text-orientation: upright;
    }

    span {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }

  &>div {
    display: grid;
    place-items: center;

    img {
      width: 40px;
    }

    span {
      font-size: 1.4rem;
    }
  }
}