/* サイト内検索とチャット（assets/js/assist.js が作る .as-root）。docs/SEARCH.md
   〜767: 画面の下から出るシート。768〜: 右下の小窓。どちらも後ろを暗くして、閉じるまで後ろは操作できない（role=dialog・aria-modal）。
   色・角丸・余白は tokens.css の変数だけ。書体はゴシック（本文と同じ）。
   高さは 100vh を使わない: assist.js が visualViewport から --as-vvh（見えている高さ）と --as-kb（キーボードの高さ）を入れる。無いときは dvh と % で代える。 */
.as-root { position: fixed; inset: 0; z-index: 400; font-family: var(--f-body); letter-spacing: 0.02em; }
.as-root[hidden] { display: none; }
.as-scrim { position: absolute; inset: 0; background: var(--c-scrim); opacity: 0; transition: opacity .3s ease; touch-action: none; }
.as-root.is-open .as-scrim { opacity: 1; }
/* 開いている間は後ろを動かさない。消えたスクロールバーの幅は body の右の余白で埋める（PC で本文が横にずれないように） */
html.as-lock, html.as-lock body { overflow: hidden; }
html.as-lock body { padding-right: var(--as-sb, 0px); }

/* ---- 枠（〜767 はシート） ---- */
.as-panel {
  position: absolute; left: 0; right: 0; bottom: var(--as-kb, 0px);
  display: flex; flex-direction: column;
  height: min(620px, calc(100% - 40px));
  height: min(620px, calc(var(--as-vvh, 100dvh) - 40px));
  background: linear-gradient(180deg, var(--c-hero-top) 0, var(--c-peach-soft) 64px, var(--c-cream) 150px);
  border-radius: var(--r-l) var(--r-l) 0 0;
  color: var(--c-ink);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  outline: none;
}
.as-root.is-open .as-panel { transform: none; }

.as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 6px 20px; flex: none; }
.as-title { flex: 1 1 auto; min-width: 0; font-family: var(--f-round); font-size: 17px; line-height: 1.4; color: var(--c-ink-deep); letter-spacing: 0.04em; margin: 0; }
/* 質問したあとは、窓口の名前（ウララ歯科のご案内）を上に小さく、最後の質問を 1 行で大きく。2 行でも閉じるボタン（44px）の高さに収まるので見出しの高さは変わらない */
.as-title-sub { display: block; font-size: 12px; line-height: 1.5; color: var(--c-ink-soft); letter-spacing: 0.08em; }
.as-title-main { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-title-sub[hidden] { display: none; }
.as-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); color: var(--c-orange); box-shadow: var(--shadow-pill); }
.as-close svg { width: 22px; height: 22px; }
/* 右上: 「リセット」（質問したあとだけ出る。高さ 44 のピル）と閉じる。344 幅でも見出しの上の小さな名前は切れない */
.as-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.as-reset { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-orange); box-shadow: var(--shadow-pill); font-size: 13px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; transition: background-color .2s, color .2s; }
.as-reset[hidden] { display: none; }
.as-reset-ic { display: inline-flex; }
.as-reset-ic svg { display: block; }

/* ---- 会話 ---- */
.as-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 20px; outline: none; }
.as-msg { flex: none; max-width: 100%; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.as-msg p { margin: 0; }
.as-bot { align-self: stretch; background: var(--c-white); border-radius: 6px var(--r-m) var(--r-m) var(--r-m); padding: 14px 16px; }
.as-you { align-self: flex-end; max-width: 85%; background: var(--c-peach-soft); color: var(--c-ink-deep); border-radius: var(--r-m) 6px var(--r-m) var(--r-m); padding: 10px 16px; line-height: 1.6; }
.as-hello > p { margin-bottom: 8px; }
.as-msg .as-lead { margin-top: 12px; }
.as-small { font-size: 13px; line-height: 1.7; color: var(--c-ink-soft); }
.as-strong { color: var(--c-ink-deep); }
.as-msg .as-note { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.7; color: var(--c-ink-soft); }
.as-fact p + p { margin-top: 4px; }
.as-list { margin: 4px 0 0; padding-left: 1.3em; list-style: disc; font-size: 14px; line-height: 1.7; }

/* 例のことば（見た目 36px・当たり判定 44px） */
.as-chips { display: flex; flex-wrap: wrap; gap: 0 8px; }
.as-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; line-height: 1.3; color: var(--c-orange); text-align: left; }
.as-chip::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border: 1px solid var(--c-orange); border-radius: var(--r-pill); background: var(--c-white); transition: background-color .2s; }

/* 結果のカード */
.as-cards { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.as-card { position: relative; display: grid; gap: 2px; min-height: 44px; padding: 12px 40px 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-cream); color: var(--c-ink); transition: background-color .2s; }
.as-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.as-card-type { display: inline-block; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--r-pill); font-size: 12px; line-height: 1.6; color: var(--c-orange); }
.as-card-date { font-family: var(--f-en); font-size: 12px; color: var(--c-ink-soft); }
.as-card-title { font-family: var(--f-round); font-size: 15px; line-height: 1.5; color: var(--c-ink-deep); }
.as-card-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.65; color: var(--c-ink-soft); }
.as-card-sum.is-answer { -webkit-line-clamp: 4; }
.as-card-go { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--c-orange); }
.as-card-go svg { display: block; }
.as-links { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.as-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-orange); }

/* 電話（塗りのグラデ。サイトの「採用サイトへ」と同じ色） */
.as-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 10px; padding: 0 24px 0 8px; border-radius: var(--r-pill); background: var(--g-orange); color: var(--c-white); font-family: var(--f-en); font-size: 20px; letter-spacing: 0.06em; }
.as-tel-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-white); color: var(--c-orange); flex: none; }
.as-tel-ic svg { display: block; }
.as-fact .as-tel, .as-urgent .as-tel { margin-bottom: 4px; }

/* 急ぎ（強い痛み・顔の腫れ・止まらない出血・ぶつけた）: 先頭に電話 */
.as-urgent { margin-bottom: 12px; padding: 14px 16px; border: 2px solid var(--c-orange); border-radius: var(--r-m); background: var(--c-white); }
.as-urgent-title { font-family: var(--f-round); font-size: 16px; color: var(--c-orange); }
.as-urgent p + p { margin-top: 4px; }

/* 読み込み中 */
.as-wait { align-self: flex-start; width: 76px; padding: 12px 16px; }
.as-dots { display: flex; gap: 6px; }
.as-dots::before, .as-dots::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-peach); animation: as-blink 1s ease-in-out infinite; }
.as-dots::after { animation-delay: .3s; }
@keyframes as-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- 入力欄（16px 未満だと iOS が拡大するので 16px） ---- */
.as-form { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--c-white); border-top: 1px solid var(--c-line); }
.as-input { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; padding: 0 18px; border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-cream); font: inherit; font-size: 16px; line-height: 1.4; letter-spacing: 0.02em; color: var(--c-ink-deep); -webkit-appearance: none; appearance: none; }
.as-input::placeholder { color: var(--c-ink-soft); opacity: .7; }
.as-input:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 0; border-color: transparent; }
.as-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); }
.as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 768〜: 右下の小窓 ---- */
@media (min-width: 768px) {
  .as-panel {
    left: auto; right: 24px; bottom: calc(24px + var(--as-kb, 0px));
    width: min(400px, calc(100% - 48px));
    height: min(640px, calc(100% - 48px));
    height: min(640px, calc(var(--as-vvh, 100dvh) - 48px));
    border-radius: var(--r-l);
    transform: translateY(16px); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
  }
  .as-root.is-open .as-panel { transform: none; opacity: 1; }
  .as-form { border-radius: 0 0 var(--r-l) var(--r-l); padding-bottom: 12px; }
}
@media (min-width: 1080px) { .as-panel { width: 420px; right: 32px; } }

@media (hover: hover) and (pointer: fine) {
  .as-card:hover { background: var(--c-peach-soft); }
  .as-chip:hover { color: var(--c-white); }
  .as-chip:hover::before { background: var(--c-orange); }
  .as-close:hover, .as-reset:hover { background: var(--c-orange); color: var(--c-white); }
  .as-link:hover { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .as-panel, .as-scrim, .as-card, .as-chip::before, .as-reset { transition: none; }
  .as-dots::before, .as-dots::after { animation: none; opacity: .7; }
}