/* MGK 静的サイト: page-layout。同じ表示設定を複数ページで共有します。 */
/* パネル表示中はreCAPTCHA v3バッジを隠す（モバイル全画面で送信ボタンに重なるため）。
   Googleの規約に従い、代替の帰属表記 .mgkcc-privacy をパネル内へ常時表示している */
body.mgkcc-badge-off .grecaptcha-badge {
  visibility: hidden !important;
}
#mgkcc-panel .mgkcc-privacy {
  flex: 0 0 auto;
  padding: 4px 12px 8px;
  background: #fff;
  font-size: 10px;
  line-height: 1.6;
  color: #8a93a3;
  text-align: center;
}
#mgkcc-panel .mgkcc-privacy a {
  color: #8a93a3;
  text-decoration: underline;
}
/* すべて #mgk-chat-contact（ランチャー）と #mgkcc-panel（チャットウィンドウ）配下にスコープ。
   パネルは祖先に transform 等がある場合に body 直下へ退避することがあるため、ID単位で独立して成立させる。 */
/* アクセント色: 仕様の #7C5BFF は白文字とのコントラストが 4.377:1 でWCAG AA(4.5:1)未達のため、
   同系色でわずかに濃い #7250F0（対白 5.10:1）を採用。枠線・塗り・文字すべてこの1色に統一する。 */
#mgk-chat-contact,
#mgkcc-panel {
  font-size: 14px;
  line-height: 1.7;
  color: #1c1f26;
}
#mgk-chat-contact {
  margin: 24px 0;
  max-width: 100%;
}
#mgk-chat-contact *,
#mgkcc-panel * {
  box-sizing: border-box;
}
#mgk-chat-contact [hidden],
#mgkcc-panel [hidden],
#mgkcc-panel[hidden] {
  display: none !important;
}
#mgk-chat-contact button,
#mgkcc-panel button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
#mgk-chat-contact .visually-hidden,
#mgkcc-panel .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
/* 起動ボタン（ランチャー）: 幅は内容フィット・タップ領域48px */
#mgk-chat-contact .mgkcc-launch {
  max-width: 100%;
}
#mgk-chat-contact .mgkcc-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 48px;
  padding: 8px 20px 8px 16px;
  background: #7250f0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(114, 80, 240, 0.26);
}
#mgk-chat-contact .mgkcc-launch-btn:hover {
  background: #5b3ed6;
}
#mgk-chat-contact .mgkcc-launch-btn:focus {
  outline: 2px solid #7250f0;
  outline-offset: 2px;
}
#mgk-chat-contact .mgkcc-launch-ico {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
}
#mgk-chat-contact .mgkcc-launch-ico svg {
  display: block;
  width: 22px;
  height: 22px;
}
#mgk-chat-contact .mgkcc-launch-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#mgk-chat-contact .mgkcc-launch-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#mgk-chat-contact .mgkcc-launch-sub {
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* v3.1(f10): 送信中に閉じたあと結果が確定したときの未確認バッジ。白地に紫（対白 5.10:1） */
#mgk-chat-contact .mgkcc-launch-badge {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 3px 10px;
  background: #fff;
  border-radius: 999px;
  color: #5b3ed6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
/* フローティングのチャットウィンドウ */
#mgkcc-panel {
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 99999;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(600px, 78vh);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
#mgkcc-panel.mgkcc-open {
  opacity: 1;
  transform: translateY(0);
}
#mgkcc-panel .mgkcc-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e1f2;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(28, 31, 38, 0.28);
  overflow: hidden;
}
#mgkcc-panel .mgkcc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #7250f0;
  color: #fff;
}
#mgkcc-panel .mgkcc-head-main {
  flex: 1 1 auto;
  min-width: 0;
}
#mgkcc-panel .mgkcc-head-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
#mgkcc-panel .mgkcc-head-sub {
  font-size: 12px;
  line-height: 1.5;
}
#mgkcc-panel .mgkcc-head-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
#mgkcc-panel .mgkcc-head-close:hover {
  background: rgba(255, 255, 255, 0.18);
}
#mgkcc-panel .mgkcc-head-close[disabled] {
  opacity: 0.5;
  cursor: default;
}
#mgkcc-panel .mgkcc-head-close svg {
  display: block;
  width: 18px;
  height: 18px;
}
#mgkcc-panel .mgkcc-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f5f3fb;
  padding: 16px 14px 10px;
}
#mgkcc-panel .mgkcc-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 12px;
}
#mgkcc-panel .mgkcc-row-user {
  justify-content: flex-end;
}
#mgkcc-panel .mgkcc-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1c1f26;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mgkcc-panel .mgkcc-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 78%;
  min-width: 0;
}
#mgkcc-panel .mgkcc-row-user .mgkcc-wrap {
  flex-direction: row-reverse;
}
#mgkcc-panel .mgkcc-bubble {
  padding: 9px 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#mgkcc-panel .mgkcc-bot {
  background: #fff;
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 1px 2px rgba(28, 31, 38, 0.06);
}
#mgkcc-panel .mgkcc-user {
  background: #7250f0;
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}
#mgkcc-panel .mgkcc-bubble a {
  color: #5b3ed6;
  text-decoration: underline;
}
/* タイムスタンプ: 仕様のUI節は10pxだが、同じ仕様のアクセシビリティ節「薄グレー文字は12px以上」を優先して12pxとする（色は対 #F5F3FB で約5.1:1） */
#mgkcc-panel .mgkcc-time {
  flex: 0 0 auto;
  padding-bottom: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: #63667a;
}
#mgkcc-panel .mgkcc-sum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin-top: 8px;
}
#mgkcc-panel .mgkcc-sum-k {
  font-size: 12px;
  color: #63667a;
  white-space: nowrap;
}
#mgkcc-panel .mgkcc-sum-v {
  overflow-wrap: anywhere;
}
#mgkcc-panel .mgkcc-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 1px 2px rgba(28, 31, 38, 0.06);
}
#mgkcc-panel .mgkcc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a9a3c4;
  animation: mgkccBounce 0.9s infinite ease-in-out;
}
#mgkcc-panel .mgkcc-dot:nth-child(2) {
  animation-delay: 0.15s;
}
#mgkcc-panel .mgkcc-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes mgkccBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
#mgkcc-panel .mgkcc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px 36px;
}
#mgkcc-panel .mgkcc-chip {
  max-width: 100%;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #7250f0;
  border-radius: 999px;
  color: #7250f0;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#mgkcc-panel .mgkcc-chip:hover,
#mgkcc-panel .mgkcc-chip:focus {
  background: #7250f0;
  color: #fff;
}
#mgkcc-panel .mgkcc-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #edeaf7;
}
#mgkcc-panel .mgkcc-input,
#mgkcc-panel .mgkcc-area {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #ddd8f0;
  color: #1c1f26;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}
#mgkcc-panel .mgkcc-input {
  border-radius: 999px;
  height: 40px;
}
/* textareaは複数行時に999pxだと角に文字が乗るため20px（見た目の破綻回避） */
#mgkcc-panel .mgkcc-area {
  border-radius: 20px;
  resize: none;
  max-height: 96px;
  overflow-y: auto;
}
#mgkcc-panel .mgkcc-input:focus,
#mgkcc-panel .mgkcc-area:focus,
#mgkcc-panel .mgkcc-chip:focus,
#mgkcc-panel .mgkcc-send:focus,
#mgkcc-panel .mgkcc-head-close:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
#mgkcc-panel .mgkcc-input:focus,
#mgkcc-panel .mgkcc-area:focus,
#mgkcc-panel .mgkcc-chip:focus,
#mgkcc-panel .mgkcc-send:focus {
  outline-color: #7250f0;
}
#mgkcc-panel .mgkcc-send {
  flex: 0 0 auto;
  height: 40px;
  min-width: 64px;
  padding: 0 16px;
  background: #7250f0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#mgkcc-panel .mgkcc-send[disabled] {
  background: #cfc9e6;
  cursor: default;
}
#mgkcc-panel .mgkcc-hint {
  flex: 0 0 auto;
  padding: 0 16px 10px;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
  color: #63667a;
}
@media (max-width: 640px) {
  #mgkcc-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  #mgkcc-panel .mgkcc-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #mgkcc-panel .mgkcc-log {
    padding: 14px 10px 8px;
  }
  #mgkcc-panel .mgkcc-head {
    padding: 10px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #mgkcc-panel {
    transition: none;
  }
  #mgkcc-panel .mgkcc-dot {
    animation: none;
  }
}