/*
 * IROHA AIコンシェルジュ「いろは」案内オーバーレイ 共通スタイル
 * 既存 subpage.css のトークン（--primary/--deep/--ink/--soft/--line/--mint/--serif/--sans）をそのまま利用し、
 * 新しい配色は持ち込まない。ホテルコンシェルジュ/高級旅館を想起させる、静かで上品なトーンを目指す。
 * このファイルは追加のみで、既存クラスの再定義は行わない。
 */

/* ── ページ下部：コンシェルジュカード（要求⑥+⑨統合） ── */
.iroha-concierge-card{
  margin:28px auto;
  padding:26px 28px;
  max-width:640px;
  border:1px solid var(--line,#e1ebe7);
  border-radius:20px;
  background:linear-gradient(135deg,var(--paper,#fcfdfc),var(--beige,#faf6ed));
  box-shadow:0 20px 40px -34px rgba(35,80,70,.35);
  opacity:0;
  transform:translateY(8px);
  animation:irohaFadeIn .32s ease-out forwards;
}
.iroha-concierge-card-eyebrow{
  display:flex;align-items:center;gap:8px;
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.14em;
  margin-bottom:.6rem;
}
.iroha-concierge-card-eyebrow img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.iroha-concierge-card h3{
  margin:0 0 .5rem;
  font-family:var(--serif);
  font-size:1.08rem;font-weight:500;line-height:1.6;
  color:var(--ink,#3c4a47);
}
.iroha-concierge-card p{
  margin:0 0 1rem;
  color:var(--soft,#6d7c78);
  font-family:var(--sans);
  font-size:.8rem;line-height:1.85;
}
.iroha-concierge-card-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.2rem;
  border-radius:999px;
  background:var(--primary,#00ae95);
  color:#fff;
  font-family:var(--sans);
  font-size:.76rem;font-weight:700;
  transition:transform .2s;
}
.iroha-concierge-card-cta:hover{transform:translateY(-1px);}

/* ── 訪問時ルーター：セッション最初の1ページ目だけ、上部に一度だけ表示（3択＋スキップ） ── */
.iroha-visit-router{
  position:relative;
  margin:0 auto;
  padding:20px 22px;
  max-width:720px;
  border:1px solid var(--line,#e1ebe7);
  border-radius:20px;
  background:linear-gradient(135deg,var(--paper,#fcfdfc),var(--beige,#faf6ed));
  box-shadow:0 20px 40px -34px rgba(35,80,70,.35);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
}
.iroha-visit-router-outer{
  padding:16px 20px 0;
}
.iroha-visit-router.is-visible{opacity:1;transform:translateY(0);}
.iroha-visit-router-avatar{
  display:flex;justify-content:center;
  margin-bottom:14px;
}
.iroha-visit-router-avatar-glow{
  position:relative;
  width:108px;height:108px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary,#00ae95) 30%,transparent),transparent 72%);
}
.iroha-visit-router-avatar-glow img{
  width:84px;height:84px;
  border-radius:50%;object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 10px 26px -10px rgba(24,115,95,.45);
}
.iroha-visit-router-bubble{
  position:relative;
  margin:0 auto 18px;
  max-width:400px;
  padding:14px 18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line,#e1ebe7);
  box-shadow:0 16px 34px -26px rgba(35,80,70,.4);
  text-align:center;
}
.iroha-visit-router-bubble:before{
  content:"";
  position:absolute;top:-8px;left:50%;
  margin-left:-8px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #fff;
}
.iroha-visit-router-bubble p{
  margin:0;
  color:var(--ink,#3c4a47);
  font-family:var(--sans);
  font-size:.86rem;font-weight:700;line-height:1.65;
}
.iroha-visit-router-skip{
  position:absolute;top:16px;right:18px;
  border:0;background:none;
  color:var(--faint,#98a5a1);
  font-family:var(--sans);
  font-size:.68rem;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.iroha-visit-router-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.iroha-visit-router-choice{
  padding:.85rem .7rem;
  border:1px solid #bfe6dc;
  border-radius:14px;
  background:#fff;
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.76rem;font-weight:700;
  line-height:1.5;
  text-align:center;
  cursor:pointer;
  transition:background .2s,transform .2s;
}
.iroha-visit-router-choice:hover{background:var(--mint,#eef9f6);transform:translateY(-1px);}

/* スマホ：画面全体を覆うポップアップに切り替え。スキップは常に画面上部に固定表示 */
@media(max-width:700px){
  .iroha-visit-router-choices{grid-template-columns:1fr;}
  body.iroha-visit-router-lock{overflow:hidden;}
  .iroha-visit-router-outer{
    position:fixed;
    inset:0;
    z-index:9500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:76px 18px 24px;
    background:linear-gradient(165deg,rgba(255,255,255,.98),rgba(250,246,237,.98));
    overflow-y:auto;
  }
  .iroha-visit-router{
    width:100%;
    max-width:420px;
    margin:0;
    box-shadow:0 30px 70px -28px rgba(35,80,70,.4);
  }
  .iroha-visit-router-avatar-glow{width:132px;height:132px;}
  .iroha-visit-router-avatar-glow img{width:104px;height:104px;}
  .iroha-visit-router-skip{
    position:fixed;
    top:max(16px, env(safe-area-inset-top));
    right:16px;
    z-index:9501;
    display:flex;align-items:center;gap:.3rem;
    padding:.55rem 1rem;
    border:1px solid var(--line,#e1ebe7);
    border-radius:999px;
    background:#fff;
    box-shadow:0 10px 24px -14px rgba(0,0,0,.28);
    text-decoration:none;
    font-weight:700;
  }
}

/* ── いろはランチャー：全ページ右下に常設するアバター起動ボタン ──
   ページを開いた瞬間は一回り大きく（.is-intro)、約2秒後に通常サイズへ落ち着く。
   ホテルコンシェルジュを意識し、動きは cubic-bezier のゆるやかな一種類のみに統一。 */
.iroha-concierge-launcher{
  --size:58px;
  position:fixed;
  right:20px;
  bottom:20px;
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:60;
  width:var(--size);height:var(--size);
  border-radius:50%;
  border:2px solid #fff;
  background:var(--primary,#00ae95);
  box-shadow:0 14px 30px -14px rgba(24,115,95,.55);
  cursor:pointer;
  padding:0;
  display:grid;place-items:center;
  overflow:hidden;
  transition:width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1),transform .2s ease;
}
.iroha-concierge-launcher.is-intro{--size:96px;}
.iroha-concierge-launcher:hover{transform:translateY(-2px);}
.iroha-concierge-launcher img{width:100%;height:100%;object-fit:cover;display:block;}
.iroha-concierge-launcher-badge{
  position:absolute;top:-2px;right:-2px;
  width:16px;height:16px;
  border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.iroha-concierge-launcher-badge svg{width:9px;height:9px;color:var(--primary,#00ae95);}

.iroha-concierge-launcher-bubble{
  position:fixed;
  right:20px;
  bottom:calc(max(20px, env(safe-area-inset-bottom)) + 58px + 10px);
  z-index:59;
  width:min(18.5rem, calc(100vw - 40px));
  padding:14px 16px;
  border:1px solid var(--line,#e1ebe7);
  border-radius:18px 18px 4px 18px;
  background:#fff;
  box-shadow:0 20px 45px -22px rgba(35,80,70,.5);
  opacity:0;
  transform:translateY(10px) scale(.98);
  transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),bottom .55s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.iroha-concierge-launcher-bubble.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.iroha-concierge-launcher-bubble.is-intro{
  bottom:calc(max(20px, env(safe-area-inset-bottom)) + 96px + 10px);
}
.iroha-concierge-launcher-bubble-eyebrow{
  display:flex;align-items:center;gap:6px;
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;
  margin-bottom:.5rem;
}
.iroha-concierge-launcher-bubble p{
  margin:0 0 .7rem;
  color:var(--ink,#3c4a47);
  font-family:var(--sans);
  font-size:.78rem;line-height:1.7;
}
.iclb-line{
  margin:0 0 .45rem;
  color:var(--ink,#3c4a47);
  font-family:var(--sans);
  font-size:.75rem;line-height:1.65;
}
.iclb-line b{color:var(--deep,#18735f);font-weight:700;}
.iclb-next{
  display:block;
  margin-top:.6rem;
  padding-top:.6rem;
  border-top:1px solid var(--line,#e1ebe7);
  color:var(--primary,#00ae95);
  font-family:var(--sans);
  font-size:.75rem;font-weight:700;
  line-height:1.6;
}
.iroha-concierge-launcher-bubble-cta{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem 1rem;
  border-radius:999px;
  background:var(--primary,#00ae95);
  color:#fff;
  font-family:var(--sans);
  font-size:.72rem;font-weight:700;
}
.iroha-concierge-launcher-bubble-close{
  position:absolute;top:8px;right:10px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border:0;background:none;
  color:var(--faint,#98a5a1);
  font-size:.85rem;line-height:1;
  cursor:pointer;
}

/* ── 離脱防止カード（要求⑧・デスクトップのみ） ── */
.iroha-exit-nudge{
  position:fixed;
  left:20px;bottom:20px;
  z-index:65;
  max-width:18rem;
  padding:16px 18px;
  border:1px solid var(--line,#e1ebe7);
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 48px -30px rgba(35,80,70,.5);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .32s ease,transform .32s ease;
  pointer-events:none;
}
.iroha-exit-nudge.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.iroha-exit-nudge-title{
  display:flex;align-items:center;gap:8px;
  margin:0 0 .45rem;
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.72rem;font-weight:700;
}
.iroha-exit-nudge p{
  margin:0 0 .8rem;
  color:var(--soft,#6d7c78);
  font-family:var(--sans);
  font-size:.74rem;line-height:1.75;
}
.iroha-exit-nudge-actions{display:flex;align-items:center;gap:10px;}
.iroha-exit-nudge-cta{
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.74rem;font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.iroha-exit-nudge-close{
  margin-left:auto;
  border:0;background:none;
  color:var(--faint,#98a5a1);
  font-family:var(--sans);
  font-size:.68rem;
  cursor:pointer;
}

/* ── ai-concierge.html：ページ文脈バナー＆質問チップ（要求⑩） ── */
.iroha-ctx-banner{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;
  margin-bottom:14px;
  border:1px solid #cde9e2;
  border-radius:16px;
  background:var(--mint,#eef9f6);
}
.iroha-ctx-banner img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.iroha-ctx-banner p{
  margin:0;
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.74rem;line-height:1.75;
}
.iroha-ctx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px;}
.iroha-ctx-chip{
  padding:.5rem .9rem;
  border:1px solid #bfe6dc;
  border-radius:999px;
  background:#fff;
  color:var(--deep,#18735f);
  font-family:var(--sans);
  font-size:.7rem;font-weight:700;
  cursor:pointer;
  transition:background .2s;
}
.iroha-ctx-chip:hover{background:var(--mint,#eef9f6);}

@keyframes irohaFadeIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

@media(prefers-reduced-motion:reduce){
  .iroha-concierge-card,.iroha-concierge-launcher-bubble,.iroha-concierge-launcher,.iroha-exit-nudge,.iroha-visit-router{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .iroha-concierge-launcher.is-intro{--size:58px;}
  .iroha-concierge-launcher-bubble.is-intro{bottom:calc(max(20px, env(safe-area-inset-bottom)) + 58px + 10px);}
}

/* ── モバイル：ランチャーは常設、離脱カードのみ非表示（要求⑫） ── */
@media(max-width:800px){
  .iroha-exit-nudge{display:none!important;}
  .iroha-concierge-card{margin:20px auto;padding:20px;border-radius:16px;}
  .iroha-concierge-launcher{--size:50px;right:14px;}
  .iroha-concierge-launcher.is-intro{--size:80px;}
  .iroha-concierge-launcher-bubble{right:14px;width:min(16.5rem, calc(100vw - 28px));bottom:calc(max(14px, env(safe-area-inset-bottom)) + 50px + 10px);}
  .iroha-concierge-launcher-bubble.is-intro{bottom:calc(max(14px, env(safe-area-inset-bottom)) + 80px + 10px);}
}