.site-chat-box {
  overflow: hidden;
  border: 1px solid #e4d8de;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(70, 42, 54, .09);
}
.site-chat-conversation[hidden],
.site-chat-start[hidden] { display: none !important; }
.site-chat-messages {
  height: 360px;
  padding: 18px;
  overflow-y: auto;
  background: linear-gradient(145deg, #fff 0%, #fff9fb 72%, #fbf6ee 100%);
  scroll-behavior: smooth;
}
.site-chat-loading,
.site-chat-empty { margin: 90px auto; color: #8a7b81; text-align: center; font-size: 13px; }
.site-chat-message { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 13px; }
.site-chat-message.is-own { align-items: flex-end; }
.site-chat-message-meta { margin: 0 7px 4px; color: #8b7c82; font-size: 10px; }
.site-chat-message p {
  max-width: min(78%, 560px);
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #eadfe4;
  border-radius: 5px 16px 16px;
  color: #40383c;
  background: #fff;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.site-chat-message.is-own p { color: #fff; border-color: #a84e73; border-radius: 16px 5px 16px 16px; background: linear-gradient(135deg, #a84e73, #c12869); }
.site-chat-send { display: grid; grid-template-columns: 1fr 92px; gap: 10px; padding: 14px; border-top: 1px solid #eee5e9; background: #fff; }
.site-chat-send textarea { width: 100%; min-height: 62px; padding: 10px 12px; resize: vertical; border: 1px solid #ddd2d7; border-radius: 10px; font: inherit; }
.site-chat-send button,
.site-chat-start button { border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #9e496d, #c72c6d); font-weight: 700; cursor: pointer; }
.site-chat-send button:disabled,
.site-chat-start button:disabled { opacity: .55; cursor: wait; }
.site-chat-error { margin: 0; padding: 9px 14px; color: #a4002d; background: #fff0f3; font-size: 12px; }
.site-chat-start { padding: 24px; }
.site-chat-customer-number { margin: 0; padding: 9px 14px; color: #8d4866; border-bottom: 1px solid #eee5e9; background: #fff7fa; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.site-chat-customer-number[hidden] { display: none !important; }
.site-chat-start > p { margin-top: 0; color: #756a6f; }
.site-chat-start label { display: grid; gap: 6px; color: #5d5156; font-size: 13px; font-weight: 700; }
.site-chat-start input { width: 100%; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #ddd2d7; border-radius: 9px; font: inherit; }
.site-chat-start button { min-height: 46px; padding: 8px 20px; }
.site-chat-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.member-admin-chat { margin-top: 24px; padding: clamp(20px, 4vw, 36px); border: 1px solid #e7ded2; border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(65, 42, 49, .06); }
.member-chat-note { margin: -8px 0 18px; color: #776c71; font-size: 13px; }

.customer-chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 9990; font-family: "Yu Gothic", "Meiryo", sans-serif; }
.customer-chat-toggle { min-height: 52px; padding: 10px 20px; border: 1px solid #d5b878; border-radius: 30px; color: #fff; background: linear-gradient(135deg, #8f4263, #c12b6a); box-shadow: 0 12px 30px rgba(99, 39, 65, .3); font-weight: 700; cursor: pointer; }
.customer-chat-toggle span { margin-right: 5px; color: #f3d79a; }
.customer-chat-panel { position: absolute; right: 0; bottom: 64px; width: min(420px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #decfd6; border-radius: 18px; background: #fff; box-shadow: 0 22px 65px rgba(49, 27, 37, .28); }
.customer-chat-panel[hidden] { display: none !important; }
.customer-chat-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; color: #fff; background: linear-gradient(120deg, #7e3a59, #b82663); }
.customer-chat-panel > header small { color: #f5dae6; font-size: 9px; letter-spacing: .18em; }
.customer-chat-panel > header h2 { margin: 1px 0 0; color: #fff; font-size: 20px; }
.customer-chat-panel > header button { width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff8c; border-radius: 50%; color: #fff; background: transparent; font-size: 25px; line-height: 1; cursor: pointer; }
.customer-chat-guidance { margin: 0; padding: 9px 14px; color: #71656a; border-bottom: 1px solid #eee5e9; background: #fffafc; font-size: 11px; }
.customer-chat-panel .site-chat-box { border: 0; border-radius: 0; box-shadow: none; }
.customer-chat-panel .site-chat-messages { height: 310px; }

@media (max-width: 600px) {
  .site-chat-messages { height: 320px; padding: 13px; }
  .site-chat-send { grid-template-columns: 1fr 70px; padding: 10px; }
  .site-chat-message p { max-width: 86%; }
  .customer-chat-widget { right: 12px; bottom: 12px; }
  .customer-chat-panel { position: fixed; inset: 10px; width: auto; height: calc(100dvh - 20px); border-radius: 16px; }
  .customer-chat-panel .site-chat-messages { height: calc(100dvh - 250px); }
}