/*=================================================================
                              AI 客服
=================================================================*/
body {
  &:has(#chat-window.is-open) {
    @media (width < 640px) {
      overflow: hidden;
    }    
  }
}
.chat {
  --white: oklch(100% 0 0);
  --bg: oklch(97% 0.0029 264.5);
  --surface: oklch(96.12% 0 0);
  --border: oklch(92.46% 0.0058 264.5);
  --accent: oklch(68.9% 0.0846 189.4);
  --accent-hover: oklch(74.49% 0.0848 186.8);
  --text: oklch(37.91% 0 0);
  --text-muted: oklch(71.37% 0.0192 261.3);

  --base-shadow: hsl(214 80% 27% / 4%);
  --shade-shadow: hsl(from var(--base-shadow) calc(h + 8) 25 calc(l - 5));
  --shadow:
    0 0 0 1px var(--base-shadow),
    0 1px 1px -0.5px var(--shade-shadow),
    0 3px 3px -1.5px var(--shade-shadow),
    0 6px 6px -3px var(--shade-shadow),
    0 12px 12px -6px var(--base-shadow),
    0 24px 24px -12px var(--base-shadow);

  --window-width-mobile: 340px;
  --window-width-pc: 400px;
  --c-spacing: 8px;
  --gap: 8px;
  --rounded: 8px;

  color: var(--text);
  background-color: var(--white);
  font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.chat-btn {
  z-index: 1;
  position: fixed;
  inset-block-end: calc(11 * var(--c-spacing));
  inset-inline-end: var(--c-spacing);
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 60px;
  block-size: 60px;
  background-color: var(--accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.12s,
    scale 0.18s;

  /*__ [狀態] __*/
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--accent-hover);
      scale: 1.05;
    }
  }
  &:active {
    scale: 0.95;
  }
  &.is-open {
    .icon-chat {
      opacity: 0;
      transform: rotate(90deg) scale(0.6);
    }
    .icon-close {
      opacity: 1;
      transform: none;
    }
  }
  .icon-chat,
  .icon-close {
    position: absolute;
    transition:
      opacity 0.15s,
      transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
  .icon-chat {
    opacity: 1;
    transform: none;
  }
}
.chat-window {
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  inline-size: 100dvi;
  block-size: 100dvh;
  aspect-ratio: 3/4;
  border: 1px solid transparent;
  transform-origin: bottom right;
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.9) translateY(12px);
  overflow: clip;
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
  @media (width > 640px) {
    inset-block-end: var(--c-spacing);
    inset-inline-end: calc(10 * var(--c-spacing));
    inline-size: var(--window-width-pc);
    block-size: auto;
    border-color: var(--border);
    border-radius: calc(2 * var(--rounded));
  }
  &.is-open {
    opacity: 1;
    transform: none;
    pointer-events: all;
  }
  .chat-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: calc(2 * var(--gap));
    margin-block-end: -1px;
    padding: var(--c-spacing) calc(2 * var(--c-spacing));
    background-color: var(--white);
    letter-spacing: 1px;
    border-block-end: 1px solid var(--border);
    .chat-avatar {
      flex-shrink: 0;
      position: relative;
      .chat-bolt {
        background-color: var(--surface);
      }
      .dot {
        position: absolute;
        inset-block-end: calc(-0.25 * var(--c-spacing));
        inset-inline-end: calc(-0.25 * var(--c-spacing));
        inline-size: 12px;
        block-size: 12px;
        background: var(--accent);
        border-radius: 50%;
        border: 2px solid var(--white);
        &:after {
          content: "";
          position: absolute;
          inset: -3px;
          background: rgba(34, 197, 94, 0.22);
          border-radius: 50%;
          animation: wave 2s ease-out infinite;
        }
      }
    }
    .chat-title {
      flex: 1;
      .name {
        font-size: 18px;
        font-weight: 700;
      }
      .status {
        display: none;
        /* color: var(--accent-hover);
        font-size: 14px; */
      }
    }
    .chat-close {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: calc(.5 * var(--gap));
      padding: calc(.5 * var(--c-spacing)) var(--c-spacing);
      min-block-size: 44px;
      color: var(--text);
      background-color: transparent;
      border-radius: var(--rounded);
      border: none;
      cursor: pointer;
      transition:
        color 0.12s,
        background-color 0.12s;
      /*__ [狀態] __*/
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--text);
          background-color: var(--surface);
        }
      }
      svg {
        display: block;
        scale: 1.05;
      }
    }
  }
  .chat-bolt, .chat-user {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    background-color: var(--white);
    border-radius: 50%;
    .img {
      inline-size: 80%;
      aspect-ratio: 1;
    }
  }
  .chat-msg {
    flex: 1 0 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: calc(2 * var(--c-spacing)) calc(1.5 * var(--c-spacing));
    background-color: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    @media (width > 1536px) {
      flex-basis: 30rem;
    }
    .msg-wrap {
      display: flex;
      align-items: end;
      gap: var(--gap);
      animation: msgIn 0.18s ease both;
      + .msg-wrap {
        margin-block-start: calc(2 * var(--c-spacing));
      }
      .msg-body {
        max-inline-size: 75%;
        .chat-time {
          margin-block-start: calc(0.5 * var(--c-spacing));
          padding-inline: calc(0.5 * var(--c-spacing));
          color: var(--text-muted);
          font-size: 12px;
        }
      }
      &.user {
        justify-content: end;
        /* flex-direction: row-reverse; */
        .msg-body {
          .chat-box {
            color: var(--white);
            background-color: var(--accent);
            border-color: transparent;
            border-radius: var(--rounded);
            border-end-end-radius: calc(0.25 * var(--rounded));
            a {
              color: var(--white);
            }
          }
          .chat-time {
            text-align: end;
          }
        }
      }
    }
    .chat-box {
      padding: var(--c-spacing) calc(1.5 * var(--c-spacing));
      background-color: var(--white);
      font-size: 16px;
      line-height: 1.75;
      word-break: break-word;
      border: 1px solid var(--border);
      border-radius: var(--rounded);
      border-end-start-radius: calc(0.25 * var(--rounded));
      /* strong {
        position: relative;
        display: flex;
        color: var(--accent);
        padding-inline-start: calc(2 * var(--c-spacing));
        &:before {
          content: '▶';
          font-size: 12px;
          color: oklch(77.0% 0.159 70.76);
        }
      } */

      /* 柏彥調整 ol li 樣式 */
      /* ol{
        list-style-type: decimal;
        padding-left: 2rem;
        margin-bottom: 1rem;
      } */
      ul, ol {
        /* list-style-type: disc; */
        padding-left: 1rem;
        margin-bottom: 1rem;
        li {
          position: relative;
          &:before {
            content: '\f0da';
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: -1rem;
            color: var(--accent);
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
          }
        }
      }
      a {
        color: var(--accent);
        @media (hover: hover) and (pointer: fine) {
          &:hover {
            color: var(--accent-hover);
          }
        }
      }
      p {
        margin-block-end: 0;
      }
    }
    .bolt-loading {
      display: flex;
      gap: var(--gap);
      align-items: center;
      .chat-box {
        display: flex;
        align-items: center;
        gap: calc(0.5 * var(--gap));
        span {
          display: inline-block;
          inline-size: 6px;
          block-size: 6px;
          background-color: var(--accent);
          border-radius: 50%;
          animation: bounceCircle 1.4s ease-in-out infinite;
          &:nth-child(1) {
            animation-delay: 0s;
          }
          &:nth-child(2) {
            animation-delay: 0.16s;
          }
          &:nth-child(3) {
            animation-delay: 0.32s;
          }
        }
      }
    }
  }
  .chat-footer {
    flex-shrink: 0;
    margin-block-start: -1px;
    padding: calc(2 * var(--c-spacing));
    padding-block-end: var(--c-spacing);
    background-color: var(--white);
    border-block-start: 1px solid var(--border);
    .chat-footer-wrap {
      display: flex;
      align-items: end;
      gap: var(--gap);
      padding: var(--c-spacing);
      background-color: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: var(--rounded);
      transition: border-color 0.14s;
      .msg-input {
        flex: 1;
        max-block-size: 120px;
        background-color: transparent;
        line-height: 1.75;
        border: none;
        outline: none;
        resize: none;
        field-sizing: content;
        overflow-y: auto;
        &::placeholder {
          color: var(--text-muted);
        }
      }
      .chat-send {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 35px;
        block-size: 35px;
        color: var(--white);
        background-color: var(--accent);
        border: none;
        border-radius: var(--rounded);
        cursor: pointer;
        transition:
          background-color 0.12s,
          transform 0.12s;
        /*__ [狀態] __*/
        @media (hover: hover) and (pointer: fine) {
          &:hover {
            background-color: var(--accent-hover);
          }
        }
      }
    }
    .chat-note {
      display: block;
      margin-block-start: var(--c-spacing);
      color: var(--text-muted);
      text-align: center;
    }
  }
}

@keyframes wave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bounceCircle {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}