/* ============================================================
   Règles 定期お届け便 — 「いつものAIに相談」ウィジェット
   ------------------------------------------------------------
   base.css のトークンだけで組む。将来 select でも読めるよう、
   このブロック（ask-ai）以外には手を出さない独立ファイル
   ============================================================ */

/* 起動ボタンと吹き出しの位置をひとつの式で持つ。
   既存トークンの組み合わせだけで作る（新しい寸法は足さない）
   - launcher-bottom: SPは .sticky-cta（固定バー）の上に逃がす
   - panel-bottom: 起動ボタンの高さ（--s-7相当）だけ上に積む */
:root {
  --ask-ai-launcher-bottom: calc(var(--s-8) + var(--s-5) + env(safe-area-inset-bottom));
  --ask-ai-panel-bottom: calc(var(--ask-ai-launcher-bottom) + var(--s-7));
}

@media (min-width: 768px) {
  :root {
    --ask-ai-launcher-bottom: var(--s-5);
  }
}

/* ============================================================
   起動ボタン
   決済導線（.btn--ink / .sticky-cta）より一段弱い見た目にする。
   「1画面で最も重要な操作は常に1つ」を崩さないため、
   濃い面ではなく白地＋罫で置く
   ============================================================ */
.ask-ai__launcher {
  position: fixed;
  right: var(--gutter);
  bottom: var(--ask-ai-launcher-bottom);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow:
    inset 0 0 0 1px var(--hair),
    var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

/* 引っ込めるのは透明にするだけなので、そのままだと見えない
   ボタンが右下に残り、下のリンクのタップを奪う */
.ask-ai__launcher:not(.ask-ai__launcher--in) {
  pointer-events: none;
}

.ask-ai__launcher--in {
  opacity: 1;
  transform: none;
}

.ask-ai__launcher:hover {
  box-shadow:
    inset 0 0 0 1px var(--slab),
    var(--shadow);
}

/* 水色は「AIに聞ける」という補助導線の目印にだけ差す */
.ask-ai__launcher-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aqua);
}

/* 開いている間は起動ボタンを押し込んだ状態にする */
.ask-ai__launcher[aria-expanded="true"] {
  background: var(--aqua-tint);
  box-shadow:
    inset 0 0 0 2px var(--slab),
    var(--shadow);
}

/* ============================================================
   吹き出し（ポップオーバー）
   ------------------------------------------------------------
   モーダルではない。背景を塗らず、ページのスクロールも操作も
   止めない。ページを読みながら依頼文を書けるようにするため、
   起動ボタンの直上・右そろえに出す
   ============================================================ */
.ask-ai {
  position: fixed;
  right: var(--gutter);
  bottom: var(--ask-ai-panel-bottom);
  z-index: 90;
  width: min(var(--narrow), calc(100vw - var(--gutter) * 2));
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.ask-ai--in {
  opacity: 1;
  transform: none;
}

.ask-ai__panel {
  /* 画面を覆わない高さに収め、あふれたら中だけスクロールさせる */
  max-height: calc(100vh - var(--ask-ai-panel-bottom) - var(--s-6));
  max-height: calc(100dvh - var(--ask-ai-panel-bottom) - var(--s-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 0 1px var(--hair),
    var(--shadow);
}

.ask-ai__panel:focus {
  outline: none;
}

@media (min-width: 768px) {
  .ask-ai__panel {
    padding: var(--s-6);
  }
}

/* ---- 見出し ---- */
.ask-ai__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.ask-ai__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
}

.ask-ai__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.25s var(--ease);
}

.ask-ai__close:hover {
  box-shadow: inset 0 0 0 1px var(--slab);
}

.ask-ai__lead {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ---- 定型質問チップ ---- */
.ask-ai__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.ask-ai__chip {
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition:
    background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.ask-ai__chip:hover {
  box-shadow: inset 0 0 0 1px var(--slab);
}

/* 選択状態は既存の選択UIと同じ（aqua-tint + 2pxリング） */
.ask-ai__chip--on {
  background: var(--aqua-tint);
  box-shadow: inset 0 0 0 2px var(--slab);
}

/* ---- 入力欄 ---- */
.ask-ai__label {
  display: block;
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.ask-ai__input {
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--hair);
  resize: vertical;
  transition: box-shadow 0.25s var(--ease);
}

.ask-ai__input::placeholder {
  color: var(--ink-faint);
}

.ask-ai__input:focus {
  box-shadow: inset 0 0 0 1px var(--slab);
}

/* コピーが通らなかった端末で出す、手動コピー用の欄 */
.ask-ai__fallback {
  margin-top: var(--s-3);
  color: var(--ink-soft);
  background: var(--mist);
}

/* ---- LLMの一覧 ---- */
.ask-ai__services {
  margin-top: var(--s-2);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--hair);
  overflow: hidden;
}

.ask-ai__service {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  text-align: left;
  box-shadow: inset 0 1px 0 var(--hair);
  transition: background-color 0.25s var(--ease);
}

.ask-ai__services li:first-child .ask-ai__service {
  box-shadow: none;
}

.ask-ai__service:hover {
  background: var(--aqua-tint);
}

.ask-ai__service-name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ask-ai__service-hint {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.ask-ai__service-mark {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  transition: transform 0.25s var(--ease);
}

.ask-ai__service:hover .ask-ai__service-mark {
  transform: translateX(3px);
}

/* ---- 状態表示・注記 ---- */
.ask-ai__status:not(:empty) {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--aqua-tint);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink);
}

.ask-ai__note {
  margin-top: var(--s-4);
  font-size: var(--fs-micro);
  line-height: 1.8;
  color: var(--ink-faint);
}

/* 2つ目の注記（外部サービスであることの断り）は
   1つ目に続けて置く。段落は分けるが、間は詰める */
.ask-ai__note + .ask-ai__note {
  margin-top: var(--s-2);
}

.ask-ai__note a {
  color: var(--aqua-deep);
  text-decoration: underline;
}

/* prefers-reduced-motion は base.css が全トランジションを
   無効化する。ここでは opacity / transform の値を上書きせず、
   状態クラス（--in）だけで出し入れする */