/* ===========================================
   Persistent Widget CSS
   テキスト+リアルタイム ハイブリッドウィジェット
   =========================================== */

/* CSS Variables — defaults (EJS dynamic <style> may override these) */
:root {
  --agent-primary: #0D9488;
  /* RGB triplet for rgba() fallbacks (iOS Safari < 16.4 で color-mix() 非対応) */
  /* テナント側で --agent-primary を override する場合は --agent-primary-rgb も */
  /* 同時に override すること。Issue #445 */
  --agent-primary-rgb: 13, 148, 136;
  --agent-primary-dark: #0B7C72;
  --agent-primary-hover: #0F766E;
  --agent-bg: #FFFFFF;
  --agent-bg-chat: #F9FAFB;
  --agent-text: #1F2937;
  /* Issue #290: text-muted を AA (#6B7280) → AAA (#4B5563) に上げる。高齢者・視力低下ユーザーの読みやすさ向上 */
  --agent-text-muted: #4B5563;
  --agent-border: #E5E7EB;
  --agent-user-bg: #0D9488;
  --agent-user-text: #FFFFFF;
  --agent-bot-bg: #F3F4F6;
  --agent-bot-text: #1F2937;
  --agent-system-bg: #F1F5F9;
  --agent-system-text: #475569;
  --agent-footer-bg: #FFFFFF;
  --agent-radius: 12px;
  --agent-radius-sm: 8px;
  --agent-bubble-radius: 16px;
  --agent-card-radius: 12px;
  --agent-button-radius: 8px;
  --agent-input-radius: 12px;
  --agent-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --agent-bubble-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --agent-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --agent-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.10);
  --agent-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Issue #290: rem ベースでブラウザの「文字を大きく」設定 (高齢者の主要なアクセシビリティ手段) に追従する。
     基準は html ルート (通常 16px)。0.875rem = 14px / 0.75rem = 12px / 0.9375rem = 15px 相当 */
  --agent-font-size: 0.875rem;
  --agent-font-size-small: 0.75rem;
  --agent-font-size-header: 0.9375rem;
  /* Header brand colors (defaults to primary color) */
  --agent-header-bg: var(--agent-primary);
  --agent-header-text: #ffffff;
}

/* Issue #290: ダークモード対応 (prefers-color-scheme: dark) — 深夜帯のスマホ利用で目が痛い問題に対応。
   テナント側で <style> 内 :root { --agent-bg: ...; } を後置上書きすればテナント指定色が優先される
   (cascade 順: defaults → @media dark :root → tenant inline :root)。ブランドカラー (primary 系) は
   明色/暗色どちらでも見えるよう敢えて変更しない。
   ⚠️ ホストページに本 CSS を直接 link する非 iframe マウント形態では :root スコープが
   ホスト :root と共有されるため、ホストの CSS 変数 (もし同名があれば) を上書きしうる。
   公式マウントは iframe 経由なので問題ないが、テナントが直接 link する場合は注意。 */
@media (prefers-color-scheme: dark) {
  :root {
    --agent-bg: #1F2937;
    --agent-bg-chat: #111827;
    --agent-text: #F9FAFB;
    /* round 1 medium: 旧 #9CA3AF は #1F2937 上で 5.4:1 (AA borderline)。
       #D1D5DB は #1F2937 上で約 10.5:1 → AAA 達成。ライトモード AAA との整合性を担保。 */
    --agent-text-muted: #D1D5DB;
    --agent-border: #374151;
    --agent-bot-bg: #374151;
    --agent-bot-text: #F3F4F6;
    --agent-system-bg: #1E293B;
    --agent-system-text: #CBD5E1;
    --agent-footer-bg: #1F2937;
  }
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--agent-font-family);
  /* Issue #290: 固定 14px ではなく rem ベース変数を使い、ユーザーの「文字を大きく」設定に追従する */
  font-size: var(--agent-font-size);
  line-height: 1.5;
  color: var(--agent-text);
  background: var(--agent-bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===========================================
   Layout: 3-part grid (header / messages / footer)
   =========================================== */
.agent {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Issue #280: モバイルでソフトキーボードが出た時、widget-app-persistent.js の
     visualViewport listener が --agent-keyboard-offset を更新してウィジェット高さを
     縮めることで入力欄が隠れないようにする。未対応ブラウザ (visualViewport なし) では
     0px のままで従来通り 100dvh フル表示。 */
  height: calc(100dvh - var(--agent-keyboard-offset, 0px));
  max-height: calc(100dvh - var(--agent-keyboard-offset, 0px));
  overflow: hidden;
}

/* Header */
.agent__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--agent-header-bg);
  color: var(--agent-header-text);
  height: 56px;
  min-height: 56px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.agent__header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.agent__header-logo {
  display: block;
  max-height: 24px;
  width: auto;
  object-fit: contain;
}

.agent__header-title {
  font-size: var(--agent-font-size-header);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--agent-header-text);
}

.agent__header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--agent-header-text);
  opacity: 0.85;
}

.agent__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
}

.agent__status-dot--connecting {
  background: #FBBF24;
  animation: agent-pulse 1s infinite;
}

.agent__status-dot--connected {
  background: #4ADE80;
  animation: agent-pulse 2s infinite;
}

.agent__status-dot--disconnected {
  background: #F87171;
}

@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.agent__header-actions {
  display: flex;
  /* 0.3.0-dev.66: center, not the default stretch. The touch-target rule
   * below (@media (max-width:480px),(pointer:coarse) → .agent__header-btn
   * 44×44) makes this row 44px tall on every real widget (the iframe is
   * ~400px wide), and with stretch the view-tabs pill was pulled to 44px
   * while its fixed 28px buttons stayed at the top — measured live as a
   * 2px top / 14px bottom gap inside the pill ("下余白だけ太い" report).
   * Desktop-width previews never showed it, which is why the asymmetry
   * looked like an original-design quirk. */
  align-items: center;
  gap: 6px;
}

.agent__header-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--agent-header-text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.15s, color 0.15s;
}

.agent__header-btn:hover {
  background: rgba(0,0,0,0.12);
  color: var(--agent-header-text);
}

/* View tabs (home / chat toggle) */
.agent__view-tabs {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.15);
  border-radius: var(--agent-radius-sm);
  padding: 2px;
}

.agent__view-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--agent-header-text);
  opacity: 0.65;
  width: 30px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.agent__view-tab:hover {
  color: var(--agent-header-text);
  opacity: 1;
}

.agent__view-tab--active {
  background: rgba(255,255,255,0.2);
  color: var(--agent-header-text);
  opacity: 1;
  box-shadow: var(--agent-shadow-sm);
  pointer-events: none;
}

/* 0.3.0-dev.65: optical correction. Bootstrap Icons paints its glyphs
 * entirely above the baseline (font descent = 0) and its own
 * `vertical-align: -0.125em` under-compensates for the surrounding font's
 * strut descent, so the icon lands ~2px above the button's geometric
 * center — measured: 6.9px above the glyph vs 8.9px below inside the
 * 28px-tall tab. Every box (pill padding 2px, buttons, icon line box) is
 * perfectly symmetric; only the painted glyph is high, which reads as a
 * fat bottom padding on the dark pill. translateY(1px) equalizes the
 * painted gaps (7.9px / 7.9px). Deliberate deviation from production
 * visual parity (the production widget has the same artifact). */
.agent__view-tab .bi {
  transform: translateY(1px);
}

/* Home View (scrollable container for welcome + quick actions + CTA) */
.agent__home-view {
  flex: 1;
  overflow-y: auto;
  background: var(--agent-bg-chat);
}


/* Body (Messages area) */
.agent__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 16px;
  background: var(--agent-bg-chat);
  scroll-behavior: smooth;
  position: relative;
}

/* 背景透かし画像（--agent-watermark-url 設定時のみ表示） */
.agent__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--agent-watermark-url, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  opacity: var(--agent-watermark-opacity, 0.06);
  pointer-events: none;
  z-index: 0;
}

.agent__body > * {
  position: relative;
  z-index: 1;
}

/* Message Bubbles */
.agent__message {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  animation: agent-fadeIn 0.2s ease;
  /* Issue #285 fix: msg-actions を bubble の下段に折り返すための wrap。
     timestamp は小幅なので bubble と同一行に留まる。 */
  flex-wrap: wrap;
}

@keyframes agent-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.agent__message--user {
  flex-direction: row-reverse;
  animation: agent-slideInRight 0.25s ease-out;
}

.agent__message--system {
  justify-content: center;
  animation: agent-fadeIn 0.3s ease-out;
}

.agent__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--agent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
}

.agent__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.agent__bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: var(--agent-bubble-radius);
  font-size: var(--agent-font-size);
  line-height: 1.6;
  word-break: break-word;
  box-shadow: var(--agent-bubble-shadow);
}

.agent__message--bot .agent__bubble {
  background: var(--agent-bot-bg);
  color: var(--agent-bot-text);
  border-top-left-radius: 4px;
  white-space: pre-wrap;
}

.agent__message--user .agent__bubble {
  background: var(--agent-user-bg);
  color: var(--agent-user-text);
  border-top-right-radius: 4px;
}

.agent__message--system .agent__bubble {
  max-width: 85%;
  background: var(--agent-system-bg);
  color: var(--agent-system-text);
  font-size: 12px;
  text-align: center;
  border-radius: var(--agent-radius-sm);
}
.agent__message--system .agent__timestamp { display: none; }

/* Issue #279: 人間窓口フォールバック (welcome 下部に常設) */
.agent__human-fallback {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--agent-text-muted);
  text-align: center;
  border-top: 1px dashed var(--agent-border);
}
.agent__human-fallback-link {
  color: var(--agent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agent__human-fallback-link:hover {
  text-decoration: none;
}

/* Issue #286 / #278: 共通エラーバブル (renderErrorBubble 用) */
.agent__error-card {
  background: var(--agent-error-bg, #fdecea);
  border: 1px solid var(--agent-error-border, #f5c2c0);
  color: var(--agent-error-text, #b13a37);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 90%;
}
.agent__error-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.agent__error-body {
  margin-bottom: 8px;
  color: var(--agent-text);
}
.agent__error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.agent__error-actions > * {
  appearance: none;
  border: 1px solid var(--agent-border);
  background: var(--agent-bg);
  color: var(--agent-text);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agent__error-actions > .agent__error-retry {
  background: var(--agent-primary);
  color: #fff;
  border-color: var(--agent-primary);
}
.agent__error-actions > .agent__error-retry:hover {
  background: var(--agent-primary-hover, var(--agent-primary-dark));
}

/* Timestamp — 常時表示 */
.agent__timestamp {
  font-size: 10px;
  color: var(--agent-text-muted);
  margin-top: 4px;
  text-align: right;
}

.agent__message--user .agent__timestamp {
  text-align: left;
}

/* Streaming Indicator */
.agent__streaming {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.agent__streaming span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--agent-primary);
  animation: agent-dots 1.2s infinite;
}

.agent__streaming span:nth-child(2) { animation-delay: 0.2s; }
.agent__streaming span:nth-child(3) { animation-delay: 0.4s; }

@keyframes agent-dots {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Quick Actions (2-column grid) */
.agent__quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 12px;
}

.agent__quick-btn {
  appearance: none;
  border: 1px solid var(--agent-border);
  background: var(--agent-bg);
  color: var(--agent-text);
  padding: 12px;
  border-radius: var(--agent-button-radius);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  line-height: 1.4;
  display: flex;
  /* 0.3.0-dev.67: flex-start -> center。アイコン枠が28pxなのに1行ラベル
   * (約20px)が上端に張り付き、「アイコンは中央・文字だけ上寄り」に
   * 見えていた(実機報告)。複数行ラベルでも中央揃えが自然。 */
  align-items: center;
  gap: 8px;
}

.agent__quick-btn:hover {
  border-color: var(--agent-primary);
  box-shadow: var(--agent-shadow-sm);
  transform: translateY(-1px);
}

/* Card UI (for navigate actions) */
.agent__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 8px;
  background: var(--agent-bg);
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-card-radius);
  cursor: pointer;
  box-shadow: var(--agent-card-shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}

.agent__card:hover {
  box-shadow: var(--agent-card-shadow-hover);
  transform: translateY(-1px);
}

.agent__card:active { transform: scale(0.98); }

.agent__card-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.agent__card-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--agent-primary);
}

/* Rich Card UI */
.agent__rich-card {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  background: var(--agent-bg);
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-card-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--agent-card-shadow);
  transition: box-shadow 0.2s, transform 0.2s;
  max-width: 280px;
}

.agent__rich-card:hover {
  box-shadow: var(--agent-card-shadow-hover);
  transform: translateY(-1px);
}

.agent__rich-card:active { transform: scale(0.98); }

.agent__rich-card-thumb {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: var(--agent-bg-chat);
}

.agent__rich-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent__rich-card-body {
  padding: 10px 12px 6px;
}

.agent__rich-card-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--agent-primary);
  background: rgba(var(--agent-primary-rgb), 0.08); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 8%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.agent__rich-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--agent-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent__rich-card-desc {
  font-size: var(--agent-font-size-small);
  color: var(--agent-text-muted);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent__rich-card-action {
  padding: 6px 12px 10px;
}

.agent__rich-card-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--agent-primary);
  font-size: var(--agent-font-size-small);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s;
}

.agent__rich-card-btn:hover {
  opacity: 0.7;
}

/* CTA Card (large emphasis) */
.agent__cta-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, var(--agent-primary) 0%, var(--agent-primary-dark) 100%);
  border-radius: var(--agent-card-radius);
  cursor: pointer;
  color: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(var(--agent-primary-rgb), 0.25); /* fallback for iOS < 16.4 */
  box-shadow: 0 2px 8px color-mix(in srgb, var(--agent-primary) 25%, transparent);
}

.agent__cta-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--agent-primary-rgb), 0.35); /* fallback for iOS < 16.4 */
  box-shadow: 0 4px 16px color-mix(in srgb, var(--agent-primary) 35%, transparent);
}

.agent__cta-card:active { transform: scale(0.98); }

.agent__cta-card-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.agent__cta-card-body {
  flex: 1;
  min-width: 0;
}

.agent__cta-card-text {
  font-size: 14px;
  font-weight: 600;
}

.agent__cta-card-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

/* Follow-up actions (after bot response) */
.agent__follow-up {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  animation: agent-fadeIn 0.3s ease;
}

.agent__follow-up-btn {
  appearance: none;
  border: 1px solid var(--agent-border);
  background: var(--agent-bg);
  color: var(--agent-text);
  padding: 6px 12px;
  border-radius: var(--agent-button-radius);
  font-size: var(--agent-font-size-small);
  cursor: pointer;
  transition: all 0.2s;
}

.agent__follow-up-btn:hover {
  border-color: var(--agent-primary);
  color: var(--agent-primary);
}

/* CTA Panel (inside home-view) */
.agent__cta-panel {
  padding: 0 16px 8px;
}

.agent__cta-panel:empty {
  display: none;
}

/* Welcome CTA (primary card inside CTA panel) */
.agent__welcome-cta {
  margin: 4px 0;
  width: 100%;
  animation: agent-fadeIn 0.4s ease;
}

.agent__cta-card-arrow {
  font-size: 16px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.agent__cta-card:hover .agent__cta-card-arrow {
  transform: translateX(2px);
}

/* Welcome CTA row (secondary buttons) */
.agent__welcome-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
  width: 100%;
  animation: agent-fadeIn 0.4s ease 0.1s both;
}

.agent__welcome-cta-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--agent-border);
  background: var(--agent-bg);
  color: var(--agent-text);
  padding: 8px 14px;
  border-radius: var(--agent-button-radius);
  font-size: var(--agent-font-size-small);
  cursor: pointer;
  transition: all 0.2s;
}

.agent__welcome-cta-btn:hover {
  border-color: var(--agent-primary);
  color: var(--agent-primary);
  background: var(--agent-bg-chat);
}

.agent__welcome-cta-btn i {
  font-size: 14px;
  color: var(--agent-primary);
}

/* Skeleton Loading */
.agent__skeleton {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  animation: agent-fadeIn 0.2s ease;
}

.agent__skeleton-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(90deg,
    var(--agent-border) 25%,
    var(--agent-surface, #f0f0f0) 50%,
    var(--agent-border) 75%);
  background-size: 200% 100%;
  animation: agent-skeleton-shimmer 1.8s ease-in-out infinite;
}

.agent__skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--agent-bg);
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-bubble-radius);
  border-bottom-left-radius: 4px;
}

.agent__skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--agent-border) 25%,
    var(--agent-surface, #f0f0f0) 50%,
    var(--agent-border) 75%);
  background-size: 200% 100%;
  animation: agent-skeleton-shimmer 1.8s ease-in-out infinite;
}

.agent__skeleton-line:nth-child(1) { width: 85%; }
.agent__skeleton-line:nth-child(2) { width: 65%; animation-delay: 0.15s; }
.agent__skeleton-line:nth-child(3) { width: 45%; animation-delay: 0.3s; }

.agent__skeleton-status {
  font-size: 11px;
  color: var(--agent-text-muted);
  margin-bottom: 4px;
  animation: agent-skeleton-shimmer 1.5s infinite;
}

@keyframes agent-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Markdown Lite (structured bot responses) */
.agent__bubble .agent__md-heading {
  font-size: 13px;
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--agent-text);
}

.agent__bubble .agent__md-heading:first-child {
  margin-top: 0;
}

.agent__bubble .agent__md-para {
  margin: 4px 0;
}

/* 先頭ブロック上の余白は bubble の padding-top と二重になるため除去
   (Mac Chrome の system-ui フォントだと特に visible)。
   末尾も同様。.agent__md-heading 既存ルールと対称的。 */
.agent__bubble .agent__md-para:first-child,
.agent__bubble .agent__md-list:first-child {
  margin-top: 0;
}
.agent__bubble .agent__md-para:last-child,
.agent__bubble .agent__md-list:last-child {
  margin-bottom: 0;
}

.agent__bubble .agent__md-list {
  margin: 4px 0;
  padding-left: 18px;
  list-style: disc;
}

.agent__bubble .agent__md-list li {
  margin: 2px 0;
  font-size: var(--agent-font-size);
  line-height: 1.5;
}

.agent__bubble .agent__md-link {
  color: var(--agent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agent__bubble .agent__md-link:hover {
  opacity: 0.7;
}

.agent__bubble .agent__md-cta {
  display: inline-block;
  background: var(--agent-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--agent-button-radius);
  font-size: var(--agent-font-size-small);
  font-weight: 600;
  text-decoration: none;
  margin: 4px 2px;
  transition: opacity 0.15s;
}

.agent__bubble .agent__md-cta:hover {
  opacity: 0.85;
}

/* Footer */
.agent__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* iPhone X系のホームインジケータと重ならないよう safe-area-inset を加算する。Issue #444 */
  /* viewport meta tag に viewport-fit=cover が必須 (テンプレ側で対応済) */
  padding: 10px 12px;
  padding-bottom: max(10px, calc(10px + env(safe-area-inset-bottom)));
  padding-left: max(12px, calc(12px + env(safe-area-inset-left)));
  padding-right: max(12px, calc(12px + env(safe-area-inset-right)));
  background: var(--agent-footer-bg);
  border-top: 1px solid var(--agent-border);
  transition: border-color 0.3s ease;
}

.agent__footer-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent__input {
  /* Issue #287: textarea 化 + auto-resize 対応 */
  flex: 1;
  appearance: none;
  border: 1px solid var(--agent-border);
  background: var(--agent-bg);
  border-radius: var(--agent-input-radius);
  padding: 10px 16px;
  font-size: 16px; /* iOS Safari の自動ズーム防止（16px未満で発動する） */
  font-family: var(--agent-font-family);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
  max-height: 120px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

.agent__input:focus {
  border-color: var(--agent-primary);
  box-shadow: 0 0 0 3px rgba(var(--agent-primary-rgb), 0.10); /* fallback for iOS < 16.4 */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-primary) 10%, transparent);
}

.agent__input::placeholder {
  color: var(--agent-text-muted);
}

.agent__send-btn {
  /* Issue #287: WCAG 2.5.5 (44x44px) 達成 */
  appearance: none;
  border: none;
  background: var(--agent-primary);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
  flex-shrink: 0;
}

.agent__send-btn:hover {
  background: var(--agent-primary-hover, var(--agent-primary-dark));
}

.agent__send-btn:active {
  transform: scale(0.92);
}

.agent__send-btn:disabled {
  background: var(--agent-border);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Footer bottom row: disclaimer + action buttons */
.agent__footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.agent__footer-disclaimer {
  font-size: 11px;
  color: var(--agent-text-muted);
  line-height: 1.4;
}

.agent__footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* 0.3.0-dev.41: 免責文 (disclaimer_inline_enabled=false) を消した構成では
     footer-bottom の子がこのボタン群だけになり、space-between の単独子として
     左端に落ちていた。免責の有無に関わらず右寄せを保証する。 */
  margin-left: auto;
}

.agent__footer-btn {
  /* Issue #287: WCAG 2.5.5 (44x44px) 達成 */
  appearance: none;
  background: none;
  border: none;
  color: var(--agent-text-muted);
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.agent__footer-btn:hover {
  color: var(--agent-primary);
  background: var(--agent-bg-chat);
}


/* ============================================
   Waveform bar — テキスト入力の上に表示（realtime mode）
   ヘッダーと同じ配色
   ============================================ */
.agent__waveform-bar {
  flex-shrink: 0;
  position: relative;
  padding: 6px 10px;
  background: var(--agent-header-bg, var(--agent-primary));
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.agent__waveform-bar canvas {
  display: block;
  width: 100%;
  height: 32px;
  border-radius: 6px;
}

/* ============================================
   Realtime controls — テキスト入力の下に表示
   ヘッダーと同じ配色
   ============================================ */
.agent__realtime-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--agent-footer-bg, #f8fafc);
  border-top: 1px solid var(--agent-border, #e2e8f0);
}

.agent__realtime-back {
  appearance: none;
  border: 1px solid var(--agent-border, #e2e8f0);
  background: transparent;
  color: var(--agent-text-muted, #64748b);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
  margin-left: auto;
}

.agent__realtime-back:hover {
  background: rgba(var(--agent-primary-rgb), 0.08); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 8%, transparent);
  color: var(--agent-text, #1e293b);
}

/* Mute buttons */
.agent__mute-btn {
  appearance: none;
  border: 1px solid var(--agent-border, #e2e8f0);
  background: transparent;
  color: var(--agent-primary, #0D9488);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}

.agent__mute-btn:hover {
  background: rgba(var(--agent-primary-rgb), 0.08); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 8%, transparent);
}

.agent__mute-btn--muted {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #ef4444;
}

/* Mic device name */
.agent__mic-device-name {
  font-size: 11px;
  color: var(--agent-text-muted, #64748b);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

/* Mic device selector group */
.agent__mic-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.agent__mic-group--multi > .agent__mute-btn {
  border-radius: 16px 0 0 16px;
  border-right: none;
}

.agent__mic-select-btn {
  appearance: none;
  border: 1px solid var(--agent-border, #e2e8f0);
  background: transparent;
  color: var(--agent-primary, #0D9488);
  width: 20px;
  height: 32px;
  border-radius: 0 16px 16px 0;
  font-size: 9px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.agent__mic-select-btn:hover {
  background: rgba(var(--agent-primary-rgb), 0.08); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 8%, transparent);
}

/* Mic device popover — コントロール行の上に表示（ヘッダー配色） */
.agent__mic-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  width: calc(100vw - 32px);
  max-width: 360px;
  background: var(--agent-header-bg, var(--agent-primary));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 100;
  padding: 4px 0;
  color: var(--agent-header-text, #fff);
}

.agent__mic-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
}

.agent__mic-popover-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.agent__mic-refresh-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}

.agent__mic-refresh-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.agent__mic-device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

/* dev.57 W2 修正5: マイク切替中は一覧を操作不能にして連打/二重切替を防ぐ */
.agent__mic-device-list--busy {
  opacity: 0.55;
  pointer-events: none;
}

.agent__mic-device-item {
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  box-sizing: border-box;
}

.agent__mic-device-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.agent__mic-device-item--active {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

.agent__mic-device-item--active::before {
  content: "\2713";
  font-size: 12px;
  flex-shrink: 0;
}

/* Connection indicator — waveform bar 上に重ねて中央表示（ヘッダー配色） */
.agent__connection-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--agent-header-bg, var(--agent-primary));
  color: var(--agent-header-text, #fff);
  font-size: 12px;
  z-index: 10;
}

.agent__connection-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--agent-header-text, #fff);
  border-radius: 50%;
  animation: agent-spin 0.8s linear infinite;
}

@keyframes agent-spin {
  to { transform: rotate(360deg); }
}

/* Welcome message */
.agent__welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 16px 8px;
}

.agent__welcome-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--agent-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
  box-shadow:
    0 0 0 6px rgba(var(--agent-primary-rgb), 0.08),
    0 0 0 12px rgba(var(--agent-primary-rgb), 0.04); /* fallback for iOS < 16.4 */
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--agent-primary) 8%, transparent),
    0 0 0 12px color-mix(in srgb, var(--agent-primary) 4%, transparent);
  animation: agent-welcome-pulse 2.5s ease-in-out infinite;
  overflow: hidden;
}

.agent__welcome-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.agent__welcome-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--agent-text);
}

.agent__welcome-message {
  background: var(--agent-bot-bg);
  border-radius: var(--agent-radius);
  border-top-left-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--agent-text);
}

.agent__welcome-capabilities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
}

.agent__welcome-capability {
  font-size: var(--agent-font-size-small);
  color: var(--agent-primary);
  background: rgba(var(--agent-primary-rgb), 0.08); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 8%, transparent);
  padding: 4px 10px;
  border-radius: var(--agent-button-radius);
  white-space: nowrap;
  animation: agent-slideUp 0.3s ease-out both;
}

/* 初回来訪時のみ表示するディスクレーマ通知 (Issue #56 改 — モーダル非表示型) */
.agent__welcome-notice {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(var(--agent-primary-rgb), 0.06); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 6%, transparent);
  border: 1px solid rgba(var(--agent-primary-rgb), 0.18); /* fallback for iOS < 16.4 */
  border: 1px solid color-mix(in srgb, var(--agent-primary) 18%, transparent);
  border-radius: var(--agent-radius);
  text-align: left;
  animation: agent-slideUp 0.3s ease-out both;
}
.agent__welcome-notice[hidden] {
  display: none;
}
.agent__welcome-notice-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--agent-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent__welcome-notice-title .bi {
  font-size: 14px;
}
.agent__welcome-notice-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--agent-text-muted, #475569);
}
.agent__welcome-notice-list li {
  margin-bottom: 2px;
}
.agent__welcome-notice-list li:last-child {
  margin-bottom: 0;
}
.agent__welcome-notice-list strong {
  color: var(--agent-text);
}


/* Typing indicator (three bouncing dots) */
.agent__typing-indicator {
  display: flex;
  gap: 5px;
  padding: 12px 16px;
  align-items: center;
}

.agent__typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agent-text-muted);
  animation: agent-typing-bounce 1.4s infinite ease-in-out both;
}

.agent__typing-indicator span:nth-child(1) { animation-delay: 0s; }
.agent__typing-indicator span:nth-child(2) { animation-delay: 0.16s; }
.agent__typing-indicator span:nth-child(3) { animation-delay: 0.32s; }

@keyframes agent-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .agent__bubble {
    max-width: 85%;
  }

  .agent__quick-actions {
    padding: 0 12px 8px;
    gap: 6px;
  }

  .agent__quick-btn {
    font-size: 13px;
    padding: 10px;
  }


  .agent__mic-popover {
    min-width: 240px;
    left: -8px;
  }
}

/* ===========================================
   Issue #280: モバイル / coarse pointer デバイスでのタップ領域 ≥ 44px
   WCAG 2.5.5 (Target Size) + Apple HIG / Material Design 推奨。
   `pointer: coarse` で iPad 横置きなど max-width: 480px に外れる端末も拾う。

   Issue #287 で .agent__send-btn / .agent__footer-btn は既に 44x44px 化済。
   ここでは追加で header / mute / mic-select / realtime-back を 44px 化する。
   =========================================== */
@media (max-width: 480px), (pointer: coarse) {
  .agent__header-btn {
    width: 44px;
    height: 44px;
  }

  .agent__mute-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .agent__mic-select-btn {
    /* mute-btn と並べた "薄いキャレット" だが、本 PR は ≥44x44 を目指す。
       AI Review #550 round2 で「タイトル謳い文句との不整合」を指摘されたため、
       mobile では幅も 44px に拡張する。mic-group の合計幅は 44+44=88px (mobile
       viewport ≥ 360px なら問題なく収まる)。 */
    width: 44px;
    height: 44px;
    font-size: 11px;
  }

  /* border-radius は mute-btn と並ぶ場合のみ右側のみ丸める。
     単独表示時 (`mic-group--multi` 以外) の視覚的不自然さを避ける (round4 low #1)。 */
  .agent__mic-group--multi > .agent__mic-select-btn {
    border-radius: 0 22px 22px 0;
  }

  /* mic-group--multi (mute + mic-select 並び) の左 border-radius も追従 */
  .agent__mic-group--multi > .agent__mute-btn {
    border-radius: 22px 0 0 22px;
  }

  .agent__realtime-back {
    /* Issue #280: 「テキストに戻る」を停止/復帰の主要操作として目立たせる。
       タップ領域 (min-height/padding) 拡張に加えて、`@media` の対象範囲
       (max-width: 480px, pointer: coarse) では音声モード中の主要操作として
       色も強調する。iPad 横置きなど 480px 超の coarse pointer デバイスでも
       同じ強調を適用するのは意図 (touch UI 全体で挙動を揃えるため) であり、
       タップ領域 vs 視覚スタイルを別 media query に分離しない。
       (AI Review #550 round6 low #1) */
    min-height: 44px;
    padding: 8px 14px;
    font-weight: 500;
    border-color: var(--agent-primary, #0D9488);
    color: var(--agent-primary, #0D9488);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .agent__message,
  .agent__card,
  .agent__quick-btn,
  .agent__send-btn,
  .agent__header-btn,
  .agent__footer-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* Hidden utility */
.agent--hidden {
  display: none !important;
}

/* ===========================================
   DESIGN ENHANCEMENTS (2026-03)
   CSS-only improvements — no CSS variable key changes.
   All new properties are additive and do not conflict
   with tenant theme_overrides (layer 2/3).
   =========================================== */

/* --- 2. Directional message animations --- */
@keyframes agent-slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes agent-slideInRight {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.agent__message--bot {
  animation: agent-slideInLeft 0.25s ease-out;
}

/* --- 3. Continuous bubble border-radius (iMessage style) --- */
.agent__message--first .agent__bubble { /* default radius — no change */ }

.agent__message--bot.agent__message--middle .agent__bubble {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.agent__message--bot.agent__message--last .agent__bubble {
  border-top-left-radius: 4px;
}

.agent__message--user.agent__message--middle .agent__bubble {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.agent__message--user.agent__message--last .agent__bubble {
  border-top-right-radius: 4px;
}

/* Reduce gap between consecutive same-sender messages */
.agent__message--middle,
.agent__message--last {
  margin-bottom: 3px;
}

.agent__message--first {
  margin-bottom: 3px;
}

/* Hide avatar for middle/last in a group */
.agent__message--middle .agent__avatar,
.agent__message--last .agent__avatar {
  visibility: hidden;
}

/* --- 4. Quick action button enhancements --- */
.agent__quick-btn .agent__quick-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: rgba(var(--agent-primary-rgb), 0.08); /* fallback for iOS < 16.4 */
  background: color-mix(in srgb, var(--agent-primary) 8%, transparent);
  color: var(--agent-primary);
  transition: transform 0.3s ease;
}

.agent__quick-btn:hover .agent__quick-icon {
  animation: agent-wiggle 0.4s ease;
}

@keyframes agent-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* Staggered entrance for quick action buttons */
.agent__quick-actions .agent__quick-btn {
  animation: agent-fadeIn 0.3s ease-out both;
}

.agent__quick-actions .agent__quick-btn:nth-child(1) { animation-delay: 0s; }
.agent__quick-actions .agent__quick-btn:nth-child(2) { animation-delay: 0.05s; }
.agent__quick-actions .agent__quick-btn:nth-child(3) { animation-delay: 0.1s; }
.agent__quick-actions .agent__quick-btn:nth-child(4) { animation-delay: 0.15s; }

/* --- 5. Welcome icon glow --- */
@keyframes agent-welcome-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(var(--agent-primary-rgb), 0.08),
      0 0 0 12px rgba(var(--agent-primary-rgb), 0.04); /* fallback for iOS < 16.4 */
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--agent-primary) 8%, transparent),
      0 0 0 12px color-mix(in srgb, var(--agent-primary) 4%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(var(--agent-primary-rgb), 0.12),
      0 0 0 16px rgba(var(--agent-primary-rgb), 0.06); /* fallback for iOS < 16.4 */
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--agent-primary) 12%, transparent),
      0 0 0 16px color-mix(in srgb, var(--agent-primary) 6%, transparent);
  }
}

/* Staggered entrance for welcome capabilities */
@keyframes agent-slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agent__welcome-capabilities .agent__welcome-capability:nth-child(1) { animation-delay: 0.1s; }
.agent__welcome-capabilities .agent__welcome-capability:nth-child(2) { animation-delay: 0.15s; }
.agent__welcome-capabilities .agent__welcome-capability:nth-child(3) { animation-delay: 0.2s; }
.agent__welcome-capabilities .agent__welcome-capability:nth-child(4) { animation-delay: 0.25s; }
.agent__welcome-capabilities .agent__welcome-capability:nth-child(5) { animation-delay: 0.3s; }
.agent__welcome-capabilities .agent__welcome-capability:nth-child(6) { animation-delay: 0.35s; }

/* --- 7. Footer input active feedback --- */
.agent__input:not(:placeholder-shown) ~ .agent__send-btn:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(var(--agent-primary-rgb), 0.15); /* fallback for iOS < 16.4 */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-primary) 15%, transparent);
}

/* Issue #449-A: `:has()` は Safari 15.3 以下で非対応。
 * `:focus-within` は親要素の子孫フォーカス検知の標準パターン (Safari 5.1+ で動く)。
 * 当該 footer 内の唯一の focusable は .agent__input なので意味的に等価。 */
.agent__footer:focus-within {
  border-top-color: var(--agent-primary);
}

/* --- 8. Send button micro-interaction --- */
@keyframes agent-send-success {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.85); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.agent__send-btn--sent {
  animation: agent-send-success 0.4s ease;
}

/* --- 9. Follow-up buttons staggered entrance --- */
.agent__follow-up .agent__follow-up-btn {
  animation: agent-fadeIn 0.3s ease-out both;
}

.agent__follow-up .agent__follow-up-btn:nth-child(1) { animation-delay: 0.05s; }
.agent__follow-up .agent__follow-up-btn:nth-child(2) { animation-delay: 0.1s; }
.agent__follow-up .agent__follow-up-btn:nth-child(3) { animation-delay: 0.15s; }

/* --- Issue #288: 会話操作 UI (kebab メニュー + メッセージコピー) --- */

/* kebab メニューの dropdown 位置決め用ラッパ。
 * .agent__header-actions の flex 子要素として並ぶが、
 * dropdown は relative parent を基準に絶対配置する。 */
.agent__conversation-menu {
  position: relative;
  display: flex;
}

.agent__menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--agent-bg, #fff);
  border: 1px solid var(--agent-border, #e2e8f0);
  border-radius: var(--agent-radius-md, 8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 4px;
  z-index: 50;
}

.agent__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--agent-radius-sm, 6px);
  font-size: 13px;
  color: var(--agent-text, #1f2937);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.agent__menu-item:hover,
.agent__menu-item:focus-visible {
  background: var(--agent-bg-muted, #f1f5f9);
  outline: none;
}

.agent__menu-item > i {
  font-size: 15px;
  color: var(--agent-text-muted, #64748b);
}

/* メッセージごとのアクション (1 行統合: 👍 👎 コピー)。bot メッセージにのみ付く。
 * フィードバックボタンは常時表示したいため opacity による hover-to-show は廃止。
 * 個別ボタンの hover 表現はボタン自身のスタイル (border / color) で行う。
 * 旧仕様 (Issue #288 初版) はコピーのみで半透明 default だったが、Issue #285 で
 * フィードバックを同一行に統合したため常時表示に変更。 */
.agent__msg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-left: 36px;
  flex-wrap: wrap;
}

.agent__msg-action-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--agent-text-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.agent__msg-action-btn:hover,
.agent__msg-action-btn:focus-visible {
  color: var(--agent-primary, #0d9488);
  border-color: var(--agent-border, #e2e8f0);
  outline: none;
}

.agent__msg-action-btn--copied {
  color: var(--agent-primary, #0d9488);
  border-color: var(--agent-primary, #0d9488);
}

