/* ==========================================================================
   Y&Aサイト案内チャット（日本語＋YA House英語） v5
   - LLM不使用。知識ベース(data/chat-kb.md)由来の定型文のみを表示する
   - 固定要素は --fixbar-h / --consent-h を共有し、FABとパネルを同じ退避量で配置
   - 表情画像: img/mascot/*.svg（v2: ロゴ由来のツバメ。切り替えはJSがsrc差し替え）
   ========================================================================== */

/* ---- 起動ボタン（FAB） ---- */
.ym-fab{
  position:fixed;right:16px;bottom:calc(var(--ym-avoid-h,0px) + 22px + env(safe-area-inset-bottom,0px));z-index:75;
  width:78px;height:78px;border-radius:50%;
  background:#fff;border:2.5px solid var(--key,#1E6FA8);
  box-shadow:0 8px 24px rgba(11,29,44,.3);
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
/* さざ波で視線を引く。::after と ::before の2本を1.4秒ずらして出し、
   途切れず波が続くように見せる（1本だと消えている時間が長く気づかれにくい） */
.ym-fab::after,.ym-fab::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:3.5px solid rgba(217,51,63,.75);
  animation:ymPulse 2.8s ease-out infinite;pointer-events:none;
}
.ym-fab::before{animation-delay:1.4s}
@keyframes ymPulse{
  0%{transform:scale(.94);opacity:1}
  70%{transform:scale(1.42);opacity:0}
  100%{transform:scale(1.42);opacity:0}
}
.ym-fab:hover{transform:scale(1.06)}
.ym-fab:focus-visible{outline:3px solid var(--key,#1E6FA8);outline-offset:3px}
.ym-fab img{width:62px;height:62px;display:block}
/* ラベルは円の「外・上」に出す。円に重ねると案内役の顔（＝親しみを生む部分）が隠れるため。
   しっぽ付きの吹き出しにして、案内役が話しかけている＝質問してよい場所だと一目で分かるようにする */
.ym-fab .ym-fab-label{
  position:absolute;bottom:calc(100% + 9px);right:-2px;left:auto;top:auto;
  background:var(--key,#1E6FA8);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
  box-shadow:0 3px 10px rgba(11,29,44,.3);pointer-events:none;white-space:nowrap;
}
/* 吹き出しのしっぽ（円の中心側＝右下を指す） */
.ym-fab .ym-fab-label::after{
  content:"";position:absolute;top:100%;right:22px;
  border:6px solid transparent;border-top-color:var(--key,#1E6FA8);border-bottom:0;
}
/* パネルを開いている間はラベルを消す（パネル下端と重なって読みづらくなるため） */
.ym-fab[aria-expanded="true"] .ym-fab-label{opacity:0}
/* fixbar(モバイル固定CTA)が見えている時はその上に退避 */
/* ハンバーガーメニュー開放中はFABを隠す（メニュー下部の事業切替ピル・言語切替と重なり
   誤タップを誘発するため）。.nav-open は js/site.js がメニュー開閉時に body へ付け外しする */
body.nav-open .ym-fab{display:none}

/* 案内犬ハミー。写実イラストなので円形に切り抜いて枠内いっぱいに収める（全ページ共通） */
.ym-fab-hammy img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* 宿 YA House だけはブランド色（オレンジ）に寄せる。清掃側は赤の波紋のままにする
   ―― 青系の清掃サイト上では赤の方がコントラストが立ち、気づかれやすいため */
.ym-fab-stay{border-color:var(--accent,#F5923E)}
.ym-fab-stay::after,.ym-fab-stay::before{border-color:rgba(245,146,62,.8)}
.ym-fab-stay .ym-fab-label{background:var(--accent-d,#D97C25)}
.ym-fab-stay .ym-fab-label::after{border-top-color:var(--accent-d,#D97C25)}

/* ---- パネル ---- */
.ym-panel{
  position:fixed;right:8px;bottom:calc(var(--ym-avoid-h,0px) + 8px + env(safe-area-inset-bottom,0px));z-index:9991;
  width:min(392px,calc(100vw - 16px));
  max-height:min(560px,calc(100dvh - var(--ym-avoid-h,0px) - 24px - env(safe-area-inset-bottom,0px)));
  display:flex;flex-direction:column;
  background:var(--paper,#fff);border:1px solid var(--line,#DFE9F0);border-radius:16px;
  box-shadow:0 12px 40px rgba(11,29,44,.3);
  overflow:hidden;
}
.ym-panel[hidden]{display:none}

/* ヘッダー */
.ym-head{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--key,#1E6FA8);color:#fff;flex:none;
}
.ym-head img{width:36px;height:36px;background:#fff;border-radius:50%;padding:2px;flex:none;object-fit:cover}
.ym-head .ym-title{min-width:0;line-height:1.3}
.ym-head .ym-title b{display:block;font-size:14px;letter-spacing:.02em}
.ym-head .ym-title b:focus{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.ym-head .ym-title small{display:block;font-size:12px;opacity:.9}
.ym-close{
  margin-left:auto;flex:none;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;font-size:18px;line-height:1;cursor:pointer;
}
.ym-close:hover{background:rgba(255,255,255,.28)}
.ym-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 会話ログ */
.ym-log{
  flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;
  background:var(--base,#F7F9FB);overscroll-behavior:contain;
}
.ym-row{display:flex;gap:8px;align-items:flex-end}
.ym-row.ym-user{justify-content:flex-end}
.ym-row .ym-ava{width:30px;height:30px;flex:none;border-radius:50%;object-fit:cover}
.ym-bubble{
  max-width:82%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.8;
  white-space:pre-line;word-break:break-word;
}
.ym-row.ym-bot .ym-bubble{background:#fff;border:1px solid var(--line,#DFE9F0);border-bottom-left-radius:4px;color:var(--ink,#16303F)}
.ym-row.ym-user .ym-bubble{background:var(--key,#1E6FA8);color:#fff;border-bottom-right-radius:4px;font-weight:700;font-size:13px}
.ym-bubble .ym-note{display:block;margin-top:6px;font-size:12px;color:var(--muted,#5A6E7A)}
.ym-bubble a.ym-link{
  display:inline-flex;align-items:center;min-height:44px;margin:8px 6px 0 0;padding:7px 12px;border:1px solid var(--key,#1E6FA8);
  border-radius:999px;color:var(--key-d,#175A88);font-size:12px;font-weight:800;text-decoration:none;
}
.ym-bubble a.ym-link:hover{background:var(--key-t,#E1EEF7)}

/* 選択肢チップ */
.ym-choices{
  flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line,#DFE9F0);background:var(--paper,#fff);
  max-height:180px;overflow-y:auto;
}
.ym-chip{
  border:1px solid var(--key,#1E6FA8);background:#fff;color:var(--key-d,#175A88);
  border-radius:999px;padding:9px 13px;font-size:12.5px;font-weight:800;cursor:pointer;
  min-height:44px;font-family:inherit;
}
.ym-chip:hover{background:var(--key-t,#E1EEF7)}
.ym-chip:focus-visible{outline:2px solid var(--key,#1E6FA8);outline-offset:2px}
.ym-chip.ym-chip-sub{border-color:var(--line-2,#D5DCDF);color:var(--muted,#5A6E7A);font-weight:700}

/* 常設フッター（電話・LINE・フォーム・最初へ） */
.ym-foot{
  flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line,#DFE9F0);
  background:var(--paper,#fff);
}
.ym-foot a,.ym-foot button{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 9px;
  font-size:12px;font-weight:800;color:var(--key-d,#175A88);text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit;min-height:44px;
}
.ym-foot a:hover,.ym-foot button:hover{background:var(--key-t,#E1EEF7)}
.ym-foot .ym-ic{font-size:16px;line-height:1}


/* hiddenパネルの外に常設するスクリーンリーダー向け通知領域 */
.ym-live{
  position:fixed;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ym-bot .ym-bubble:focus{outline:2px solid var(--key,#1E6FA8);outline-offset:2px}
/* v11: Cookie設定の常駐ボタンは廃止したため、ここでの退避指定も不要になった */

/* モバイル微調整 */
@media(max-width:480px){
  .ym-panel{right:6px;left:6px;width:auto;bottom:calc(var(--ym-avoid-h,0px) + 6px + env(safe-area-inset-bottom,0px));max-height:min(600px,calc(100dvh - var(--ym-avoid-h,0px) - 12px - env(safe-area-inset-bottom,0px)))}
  /* 360px前後では82pxの円と吹き出しが本文を広く覆うため、44pxの操作領域を
     十分に上回る64pxへ抑える。案内犬の視認性を保ちつつ、予約情報を隠しにくくする。 */
  .ym-fab{width:64px;height:64px;right:14px}
  .ym-fab img{width:58px;height:58px}
  .ym-fab .ym-fab-label{font-size:11.5px;padding:4px 9px;bottom:calc(100% + 6px)}
}

@media(prefers-reduced-motion:reduce){
  .ym-fab{transition:none}
  .ym-fab::after,.ym-fab::before{animation:none;opacity:0}
}

@media (hover:none),(pointer:coarse){
  .ym-fab:active,.ym-close:active,.ym-chip:active,
  .ym-bubble a.ym-link:active,.ym-foot a:active,.ym-foot button:active{
    filter:brightness(.88);
  }
  .ym-fab:active,.ym-chip:active{transform:scale(.96)}
}

/* 2026-09-03: スマホで「質問どうぞ」の吹き出しが本文に重なる（実機報告）。
   FAB自体には aria-label が別に付いているので、見た目のラベルだけ隠しても
   支援技術からは従来どおり「チャットを開く」として読める。犬のアイコンは残す。 */
@media(max-width:860px){
  .ym-fab .ym-fab-label{display:none}
}