/* 起動ボタン方式(M10-3): 右下に固定のボタン → 全画面のオーバーレイ */
/* 位置は --rar-launcher-x / --rar-launcher-y(ショートコードの offset_x / offset_y)。既定は画面の右下 */
.rar-launcher { position: fixed; right: max(var(--rar-launcher-x, 16px), env(safe-area-inset-right)); bottom: max(var(--rar-launcher-y, 12px), env(safe-area-inset-bottom)); z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 20px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #1f2937; font: 700 15px/1.2 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; }
.rar-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.rar-launcher:focus-visible, .rar-overlay__close:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.rar-launcher[hidden], .rar-overlay[hidden] { display: none !important; }
.rar-launcher__face { display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #e5e7eb; flex: none; }
.rar-launcher__face img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rar-launcher__face img.is-crop { height: 190%; object-position: 50% 0; } /* アイコン未配置の担当: アバターの上部を代用 */
.rar-launcher__label { white-space: nowrap; }
.rar-overlay { position: fixed; inset: 0; z-index: 2147483001; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #1f2937; }
.rar-overlay__close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #1f2937; font: 400 28px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
html.rar-noscroll, html.rar-noscroll body { overflow: hidden !important; }
@media (max-width: 768px) { .rar-launcher { font-size: 13px; padding: 5px 16px 5px 5px; gap: 8px; bottom: max(calc(var(--rar-launcher-y, 12px) + 5px), env(safe-area-inset-bottom)); /* スマホはボタンが低いぶん、少し上げる */ } .rar-launcher__face { width: 44px; height: 44px; } }

/* RESONIX AI受付 フロントエンド(M6)。全画面デザイン: 背景画像(ぼかし+暗め)の上に、PC は左55%会話/右45%アバター、768px以下は縦積み */
.rar { --rar-accent: #2563eb; --rar-muted: #9ca3af; --rar-text: #1f2937; --rar-card: rgba(255, 255, 255, 0.55); --rar-ink: #444;
  --avatar-fade-start: 70%; /* アバター下端のフェード開始位置(ここから下端 100% にかけて透明に)。調整用 */
  /* 会話画面の高さ(--rar-h)。ページ内への埋め込み(mode="inline")は 1 画面に収まる min(85vh, 760px)。起動ボタンのオーバーレイと、768px 以下は画面いっぱい(100dvh) */
  --rar-h: min(85vh, 760px);
  position: relative; box-sizing: border-box; width: 100%; min-height: var(--rar-h); overflow: hidden; isolation: isolate;
  color: var(--rar-text); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: #1f2937; }
/* 背景: data-bg-image を敷く(画像自体がボケたイラスト前提で blur 2px、黒8%を重ねる)。未指定は暗めのグラデーション(仮) */
.rar::before { content: ""; position: absolute; inset: -16px; z-index: -2;
  background: var(--rar-bg-image, linear-gradient(135deg, #1e293b 0%, #334155 45%, #1f2937 100%)) center / cover no-repeat;
  filter: blur(2px); }
.rar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.08); }
.rar-overlay .rar { --rar-h: 100vh; }
@supports (height: 100dvh) { .rar-overlay .rar { --rar-h: 100dvh; } }
.rar__inner { display: grid; grid-template-columns: 55% 45%; grid-template-areas: "panel stage"; min-height: var(--rar-h); }

/* アバター(右45%): 背景の箱なし、透過画像(余白トリム済み、縦横比はエージェントごとに異なる)を右カラム内で上下中央に。
   高さ 90dvh 上限、幅は右カラムに収まる範囲で最大(object-fit: contain) */
.rar__stage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 8px; box-sizing: border-box; }
.rar__avatar { display: block; max-height: calc(var(--rar-h) * 0.9); max-width: 100%; width: auto; height: auto; object-fit: contain; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--avatar-fade-start), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 var(--avatar-fade-start), transparent 100%); }
/* ネームプレート: アバターの右下、腕〜脇腹に少し重なる位置 */
.rar__nameplate { position: absolute; right: 8%; bottom: 12%; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
  padding: 8px 16px; border-radius: 14px; background: var(--rar-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
/* 引き継ぎの演出(M10-2): ツーショット → 新エージェントが中央へ。transform と opacity だけで動かす */
.rar__avatar--main, .rar__avatar--prev { transition: transform 0.5s ease, opacity 0.5s ease; will-change: transform, opacity; }
.rar__avatar--prev { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
.rar__stage--twoshot .rar__avatar--main { transform: translateX(19%); animation: rar-enter-right 0.5s ease both; }
.rar__stage--twoshot .rar__avatar--prev { transform: translate(calc(-50% - 29%), -50%); }
.rar__stage--settle .rar__avatar--prev { transform: translate(calc(-50% - 29%), -50%); opacity: 0; }
.rar__nameplate--prev { right: auto; left: 8%; transition: opacity 0.4s ease; }
.rar__stage--settle .rar__nameplate--prev { opacity: 0; }
.rar__stage--twoshot .rar__nameplate--main { animation: rar-fade-in 0.5s ease both; }
@keyframes rar-enter-right { from { opacity: 0; transform: translateX(35%); } to { opacity: 1; transform: translateX(19%); } }
@keyframes rar-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rar__avatar--main, .rar__avatar--prev { transition: opacity 0.2s linear; animation: none !important; } }
.rar__msg-name { display: block; font-size: 11px; font-weight: 700; color: #4b5563; margin-bottom: 2px; }
.rar__role { font-size: 11px; color: #4b5563; }
.rar__name { font-size: 18px; font-weight: 700; }

/* 会話エリア(左55%) */
.rar__panel { grid-area: panel; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 24px 16px 36px 32px; box-sizing: border-box; }
.rar__statusbar { display: flex; align-items: center; gap: 10px; min-height: 1.4em; font-size: 12px; color: var(--rar-ink); }
.rar__debug { font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #111; background: rgba(255, 255, 255, 0.85); padding: 4px 8px; border-radius: 6px; word-break: break-all; }
.rar__status { min-height: 1.2em; }
.rar__mic { font-size: 12px; color: #14532d; padding: 2px 10px; border-radius: 999px; background: #bbf7d0; }
.rar__mic.is-hearing { background: #86efac; animation: rar-pulse 1s ease-in-out infinite; }
@keyframes rar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* 字幕カード: 半透明白+backdrop blur */
.rar__log { min-height: 200px; max-height: calc(var(--rar-h) * 0.55); overflow-y: auto; padding: 14px; border-radius: 14px;
  background: var(--rar-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); font-size: 15px; line-height: 1.7; }
.rar__hint { color: #6b7280; }
.rar__msg { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
.rar__msg--user { background: rgba(229, 231, 235, 0.7); margin-left: 24px; }
.rar__msg--assistant { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(229, 231, 235, 0.8); margin-right: 24px; }
.rar__msg--system { background: none; color: var(--rar-ink); font-size: 13px; text-align: center; padding: 4px; }
.rar__thanks { color: var(--rar-ink); padding: 8px 12px; }
.rar__micnotice { font-size: 13px; color: #374151; background: var(--rar-card); padding: 6px 12px; border-radius: 8px; }
.rar__input { display: flex; gap: 8px; }
.rar__input input { flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; background: rgba(255, 255, 255, 0.95); }
.rar__input button { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--rar-accent); color: #fff; font-size: 14px; cursor: pointer; }
.rar__input button:disabled { background: var(--rar-muted); cursor: default; }
.rar__buttons { display: flex; gap: 10px; }
.rar__btn { flex: 1; padding: 12px 16px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 10px; background: rgba(255, 255, 255, 0.45); color: #555; font-size: 15px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .15s, color .15s, border-color .15s; }
.rar__btn.is-active { background: var(--rar-accent); border-color: var(--rar-accent); color: #fff; }
.rar__btn--end.is-active { background: #dc2626; border-color: #dc2626; }
.rar__btn:disabled { cursor: default; }
.rar__turnstile { min-height: 0; }
.rar__turnstile iframe { display: block; margin: 4px auto 0; }
.rar__form-errors { margin: 0 0 4px; padding: 6px 10px 6px 1.6em; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 12px; line-height: 1.5; }
.rar__notice { font-size: 13px; color: #92400e; background: #fef3c7; padding: 8px 12px; border-radius: 8px; }
.rar__error { font-size: 13px; color: #991b1b; background: #fee2e2; padding: 8px 12px; border-radius: 8px; }
/* 連絡先フォーム(仕様 9.4)。字幕カードの末尾にインラインで展開 */
.rar__form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(199, 210, 254, 0.9); }
.rar__slots { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(199, 210, 254, 0.9); }
.rar__slots-title { font-weight: 700; font-size: 13px; color: #4338ca; }
.rar__slot { appearance: none; text-align: left; padding: 10px 12px; min-height: 44px; border-radius: 10px; border: 1px solid #c7d2fe; background: rgba(255, 255, 255, 0.92); color: #1f2937; font-size: 15px; font-family: inherit; cursor: pointer; }
.rar__slot:hover:not(:disabled) { background: #eef2ff; }
.rar__slot:disabled { opacity: 0.55; cursor: default; }
.rar__slot.is-picked { opacity: 1; background: #4f46e5; border-color: #4f46e5; color: #fff; }
.rar__form-title { font-weight: 700; font-size: 14px; }
.rar__booking { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(238, 242, 255, 0.85); font-size: 13px; color: #1f2937; }
.rar__booking dt { font-weight: 700; color: #4338ca; }
.rar__booking dd { margin: 0; word-break: break-word; }
.rar__form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #374151; }
.rar__label { display: inline-flex; align-items: baseline; gap: 4px; }
.rar__form input, .rar__form textarea { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; font-family: inherit; background: rgba(255, 255, 255, 0.9); }
.rar__req { color: #dc2626; }
.rar__fhint { color: var(--rar-muted); font-size: 11px; }
.rar__ferr { color: #b91c1c; font-size: 12px; }
.rar__form-submit { align-self: flex-end; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--rar-accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.rar__form-submit:disabled { background: var(--rar-muted); cursor: default; }
.rar__form-done { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: rgba(220, 252, 231, 0.6); color: #166534; font-size: 14px; }
/* プライバシー(仕様 7.6)。1行トグル、既定は折りたたみ */
/* 1行(トグル)は帯なしの文字だけ(#444)。展開時の3行だけ字幕カードと同じ半透明白+blur の帯 */
.rar__privacy { align-self: flex-start; max-width: 100%; box-sizing: border-box; font-size: 12px; color: #444; }
.rar__privacy-toggle { background: none; border: 0; padding: 4px 0; margin: 0; font: inherit; font-size: 12px; color: #444; cursor: pointer; text-align: left; }
.rar__privacy-toggle:hover { color: #111; }
.rar__privacy-caret { display: inline-block; width: 1em; }
.rar__privacy-list { margin: 4px 0 0; padding: 6px 10px 6px 1.6em; border-radius: 8px; font-size: 11px; line-height: 1.5;
  background: var(--rar-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rar__privacy-list li { margin: 0; }
/* VOICEVOX クレジット: 左下隅 */
.rar__credit { position: absolute; left: 14px; bottom: 8px; font-size: 11px; color: #555; pointer-events: none; }

/* 768px 以下: アバター(上 45dvh、背景に重ねる)→ 字幕カード → 2ボタン */
@media (max-width: 768px) {
  .rar { --rar-h: 100vh; }
  @supports (height: 100dvh) { .rar { --rar-h: 100dvh; } }
  .rar__inner { grid-template-columns: 1fr; grid-template-areas: "stage" "panel"; grid-template-rows: 45vh 1fr; grid-template-rows: 45dvh 1fr; }
  .rar__stage { height: 45vh; height: 45dvh; }
  .rar__avatar { max-height: 45vh; max-height: 45dvh; }
  .rar__nameplate { right: 6%; bottom: 10%; padding: 6px 12px; }
  .rar__nameplate--prev { right: auto; left: 4%; }
  .rar__name { font-size: 15px; }
  .rar__panel { justify-content: flex-start; gap: 8px; padding: 8px 10px 26px; }
  .rar__statusbar { font-size: 11px; }
  .rar__log { min-height: 110px; max-height: 30vh; max-height: 30dvh; font-size: 14px; line-height: 1.5; padding: 10px; }
  /* フォーム表示中は字幕カードの高さ制限を外し、フォームを画面幅いっぱいのシートとしてカード最下部に */
  .rar--form-open .rar__log { max-height: none; overflow: visible; }
  .rar--form-open .rar__form { margin: 8px -10px 0; border-radius: 12px 12px 0 0; padding: 12px 12px 16px; }
  .rar--form-open .rar__form-submit { align-self: stretch; padding: 14px; font-size: 16px; }
  .rar__micnotice { font-size: 12px; padding: 4px 10px; }
  .rar__input input { padding: 8px 10px; }
  .rar__btn { padding: 10px 12px; font-size: 14px; }
  .rar__privacy { font-size: 11px; }
  .rar__panel { padding-bottom: 30px; } /* 左下隅のクレジットと重ねない */
  .rar__privacy-list { font-size: 10px; line-height: 1.4; }
  .rar__credit { left: 10px; bottom: 6px; font-size: 10px; }
}