:root {
  --mya-primary: #A10079;
  --mya-primary-dark: #7d005e;
  --mya-primary-light: #fde7f3;
  --mya-accent: #f59e0b;
  --mya-success: #10b981;
  --mya-bg: #ffffff;
  --mya-bg-secondary: #f8f7fc;
  --mya-bg-warm: #fffbeb;
  --mya-text: #1e293b;
  --mya-text-secondary: #64748b;
  --mya-border: #e2e8f0;
  --mya-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  --mya-radius: 16px;
  --mya-radius-sm: 12px;
}

#mya-chat-widget {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* Sit above every host-site element. 99999 was getting overlapped by
     my-assistant.jp's sticky header on mobile, where the host header
     uses a high z-index of its own. 2147483647 is the signed-32-bit
     integer max — the convention used by Intercom / Drift / Crisp and
     other embedded chat widgets to guarantee always-on-top behaviour
     without forcing every host site to rewrite its z-index stack. */
  z-index: 2147483647;
}

/* ── Toggle ── */
#mya-toggle-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--mya-primary), var(--mya-primary-dark));
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

#mya-toggle-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5);
}

#mya-toggle-btn svg { width: 28px; height: 28px; }

#mya-toggle-btn .mya-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--mya-accent);
  border-radius: 50%;
  border: 2px solid white;
}

/* ── Window ── */
#mya-chat-window {
  display: none;
  flex-direction: column;
  width: 420px;
  height: 620px;
  max-height: 85vh;
  background: var(--mya-bg);
  border-radius: var(--mya-radius);
  box-shadow: var(--mya-shadow);
  overflow: hidden;
  position: absolute;
  bottom: 78px;
  right: 0;
  animation: mya-slide-up 0.3s ease;
}

#mya-chat-window.open { display: flex; }

@keyframes mya-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
#mya-header {
  background: linear-gradient(135deg, var(--mya-primary), var(--mya-primary-dark));
  color: white;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#mya-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

#mya-header-info h3 { margin: 0; font-size: 15px; font-weight: 600; }
#mya-header-info p { margin: 2px 0 0; font-size: 12px; opacity: 0.85; }

#mya-new-chat-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
#mya-new-chat-btn:hover { background: rgba(255, 255, 255, 0.25); }
#mya-new-chat-btn svg { width: 12px; height: 12px; }

#mya-close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  /* 44x44 minimum tap target — Apple HIG / WCAG AA recommendation.
     The 4px padding previously left the touch area below the 44px
     threshold on mobile, so users (Ishii / Sasaki-san) couldn't
     reliably hit the ✕ to dismiss the chat. Pairs with the outside-
     tap-to-dismiss handler in widget.js as a second escape hatch. */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

#mya-close-btn:hover { opacity: 1; }

/* ── Messages ── */
#mya-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--mya-bg-secondary);
}

#mya-messages::-webkit-scrollbar { width: 4px; }
#mya-messages::-webkit-scrollbar-thumb { background: var(--mya-border); border-radius: 4px; }

/* ── Message Bubbles ── */
.mya-msg-group { display: flex; flex-direction: column; gap: 8px; }

.mya-msg {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: var(--mya-radius-sm);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
}

.mya-msg.assistant {
  align-self: flex-start;
  background: var(--mya-bg);
  color: var(--mya-text);
  border: 1px solid var(--mya-border);
  border-bottom-left-radius: 4px;
}

.mya-msg.user {
  align-self: flex-end;
  background: var(--mya-primary);
  color: white;
  border-bottom-right-radius: 4px;
}

/* ── Cards ── */
.mya-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}

.mya-card {
  background: var(--mya-bg);
  border: 1px solid var(--mya-border);
  border-radius: var(--mya-radius-sm);
  padding: 14px 16px;
  cursor: default;
}

/* Explicitly reset hover — cards are not clickable */
.mya-card:hover,
.mya-card:focus,
.mya-card:active {
  border-color: var(--mya-border) !important;
  box-shadow: none !important;
  background: var(--mya-bg) !important;
  outline: none !important;
}

.mya-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mya-card-icon {
  font-size: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.mya-card[data-type="task_match"] .mya-card-icon { background: var(--mya-primary-light); }
.mya-card[data-type="case_study"] .mya-card-icon { background: #dcfce7; }
.mya-card[data-type="cross_sell"] .mya-card-icon { background: #fef3c7; }
.mya-card[data-type="cta"] .mya-card-icon { background: #fecaca; }

.mya-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mya-text);
  line-height: 1.3;
}

.mya-card-type-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  margin-left: auto;
  flex-shrink: 0;
}

.mya-card[data-type="task_match"] .mya-card-type-badge { background: var(--mya-primary-light); color: var(--mya-primary); }
.mya-card[data-type="case_study"] .mya-card-type-badge { background: #dcfce7; color: #059669; }
.mya-card[data-type="cross_sell"] .mya-card-type-badge { background: #fef3c7; color: #d97706; }
.mya-card[data-type="cta"] .mya-card-type-badge { background: #fecaca; color: #dc2626; }

.mya-card-desc {
  font-size: 13px;
  color: var(--mya-text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.mya-card-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mya-card-details li {
  font-size: 12px;
  color: var(--mya-text);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}

.mya-card-details li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mya-success);
  font-weight: 700;
  font-size: 11px;
}

.mya-card-time {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--mya-primary);
  background: var(--mya-primary-light);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.mya-card-cta {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--mya-primary), var(--mya-primary-dark));
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s;
  text-decoration: none;
}

.mya-card-cta:hover { opacity: 0.9; }

/* ── Suggested Questions ── */
.mya-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.mya-suggestion-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--mya-primary);
  background: var(--mya-bg);
  color: var(--mya-primary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1.3;
}

.mya-suggestion-btn:hover {
  background: var(--mya-primary);
  color: white;
}

/* Trial button highlight */
.mya-suggestion-btn.mya-trial-btn {
  background: var(--mya-primary);
  color: white;
  font-weight: 600;
}

.mya-suggestion-btn.mya-trial-btn:hover {
  background: var(--mya-primary-dark);
}

/* ── Video Player ── */
.mya-video-wrap {
  background: var(--mya-bg);
  border: 1px solid var(--mya-border);
  border-radius: var(--mya-radius-sm);
  overflow: hidden;
  max-width: 100%;
}

.mya-video-title {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mya-text);
  border-bottom: 1px solid var(--mya-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mya-video-title::before {
  content: "▶";
  color: var(--mya-primary);
  font-size: 11px;
}

.mya-video-player {
  width: 100%;
  display: block;
  max-height: 300px;
  background: #000;
}

/* ── Typing ── */
.mya-msg.typing {
  align-self: flex-start;
  background: var(--mya-bg);
  border: 1px solid var(--mya-border);
  border-bottom-left-radius: 4px;
  padding: 14px 18px;
}

.mya-typing-dots { display: flex; gap: 5px; padding: 2px 0; }
.mya-typing-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mya-text-secondary);
  animation: mya-bounce 1.4s infinite;
}
.mya-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.mya-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mya-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Input ── */
#mya-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--mya-border);
  display: flex;
  gap: 8px;
  background: var(--mya-bg);
  flex-shrink: 0;
}

#mya-input {
  flex: 1;
  border: 1px solid var(--mya-border);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  resize: none;
  max-height: 80px;
  line-height: 1.4;
}

#mya-input:focus {
  border-color: var(--mya-primary);
  box-shadow: 0 0 0 2px var(--mya-primary-light);
}

#mya-input::placeholder { color: var(--mya-text-secondary); }

#mya-send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--mya-primary), var(--mya-primary-dark));
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

#mya-send-btn:hover { opacity: 0.9; }
#mya-send-btn:disabled { background: var(--mya-border); cursor: not-allowed; }
#mya-send-btn svg { width: 18px; height: 18px; }

/* ── Human fallback (常設「担当者に問い合わせ」リンク) ── */
#mya-human-fallback {
  text-align: center;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--mya-text-secondary);
  background: var(--mya-bg);
  border-top: 1px solid var(--mya-border);
}
#mya-human-fallback a {
  color: var(--mya-accent, #d22682);
  text-decoration: underline;
  font-weight: 600;
}
#mya-human-fallback a:hover {
  text-decoration: none;
}

/* ── Legal / privacy notice ──
   The wording is mandated by legal (Kawabuchi-san, 2026-05-29).
   We deliberately style this small and muted so it doesn't crowd
   the conversation, but keep it always-visible at the bottom of
   the panel so users see it before typing personal information.
   Don't introduce a "click to expand" affordance — the full text
   must be visible without an extra interaction. */
#mya-legal-notice {
  padding: 8px 12px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--mya-text-secondary);
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--mya-border);
}
#mya-legal-notice a {
  color: var(--mya-primary);
  text-decoration: underline;
  word-break: break-all;
}
#mya-legal-notice a:hover {
  text-decoration: none;
}

/* ── Powered ── */
#mya-powered {
  text-align: center;
  padding: 6px;
  font-size: 10px;
  color: var(--mya-text-secondary);
  background: var(--mya-bg);
}

/* ── Embed mode ── */
#mya-embed-container #mya-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
}

#mya-embed-container #mya-messages::-webkit-scrollbar { width: 4px; }
#mya-embed-container #mya-messages::-webkit-scrollbar-thumb { background: var(--mya-border); border-radius: 4px; }

#mya-embed-container .mya-msg {
  max-width: 85%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#mya-embed-container .mya-suggestion-btn {
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 13px;
}

#mya-embed-container #mya-input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--mya-border);
  display: flex;
  gap: 10px;
  background: var(--mya-bg);
  flex-shrink: 0;
}

#mya-embed-container #mya-input {
  flex: 1;
  border: 1px solid var(--mya-border);
  border-radius: 28px;
  padding: 12px 20px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  resize: none;
  max-height: 80px;
  line-height: 1.4;
}

#mya-embed-container #mya-input:focus {
  border-color: var(--mya-primary);
  box-shadow: 0 0 0 2px var(--mya-primary-light);
}

#mya-embed-container #mya-send-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--mya-primary), var(--mya-primary-dark));
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

#mya-embed-container #mya-send-btn:hover { opacity: 0.9; }
#mya-embed-container #mya-send-btn svg { width: 20px; height: 20px; }
#mya-embed-container #mya-send-btn:disabled { background: var(--mya-border); cursor: not-allowed; }

/* ── Responsive ── */
@media (max-width: 480px) {
  /* Three coordinated fixes from Ishii-san's iPhone 16 test:
       (1) iPhone software keyboard launches together with the
           chat panel and clips the top of the panel. Anchor the
           panel to the bottom of the viewport (fixed positioning
           directly on the window) so the input row stays just
           above the keyboard and the conversation scrolls into
           view from the top instead of being pushed off-screen.
       (2) The round "M" avatar in the header forces the title
           "業務相談AIエージェント" to wrap to a second line in the
           narrow header strip. Hide the avatar on mobile so the
           title sits comfortably on one line.
       (3) The previous rule used `right: -12px; width: calc(100vw
           - 24px)` which created an asymmetric, slightly-larger
           gap on the left edge. Switch to symmetric 8px gutters
           via `left/right: 8px` (which makes `width: auto` give
           us full-bleed-minus-gutters automatically). */
  #mya-chat-window {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;
    width: auto;
    height: calc(100vh - 80px);   /* fallback for older browsers */
    height: calc(100dvh - 80px);  /* prefer dvh: accounts for browser chrome */
    max-height: none;
  }
  #mya-chat-widget { bottom: 16px; right: 16px; }
  #mya-header-avatar { display: none; }
}