@charset "utf-8";
/* =====================================================================
   AIアシスタント 相談窓口（フローティング）
   ---------------------------------------------------------------------
   全画面版（theme/default/stylesheet/ai/assistant.css）と同じ世界。
     紙 = 面 ／ 墨 = 本文 ／ 藍 = 構造色 ／ 朱 = 決裁だけ
   店の見立ては「帳場の小窓」。札（ランチャー）を押すと窓が開き、
   同じ担当者がそのまま応対を続ける。商材が封筒なので、札の紋は封筒、
   窓の見出しにも同じ封筒を捺して、窓口の主を一貫させる。

   全ページに読み込まれる。セレクタは必ず #ai-floating 配下に閉じること。
   ===================================================================== */

/* =====================================================================
   画面右下の定位置（ドック）
   ---------------------------------------------------------------------
   右下は取り合いになる。ドックが右下を一手に持ち、ここに積まれた要素
   だけが右下に居てよい、という約束にする。ページ側で右下に何か足す
   ときは #ai-floating の子にすること。
   reCAPTCHA バッジは Google が body 直下に固定で差し込むため、こちらから
   左下へ退かす（表示自体は残すので規約上の掲示義務を満たす）。
   ===================================================================== */
#ai-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;

  /* 紙 */
  --pp-paper:   #FCFBF8;
  --pp-sunk:    #F3F1EB;
  --pp-rule:    #DAD5CA;
  --pp-rule-2:  #EAE6DE;
  /* 墨 */
  --pp-ink:     #191B20;
  --pp-ink-2:   #5F646E;
  --pp-ink-3:   #8E939C;
  /* 藍 */
  --pp-ai:      #22346B;
  --pp-ai-deep: #1A2953;
  --pp-ai-soft: #EAEEF7;
  --pp-ai-line: #C3CDE4;
  /* 朱。決裁と失敗にだけ使う */
  --pp-shu:     #B7282E;

  --pp-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --pp-gothic: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  --pp-mono:   ui-monospace, "SFMono-Regular", Consolas, "Roboto Mono", monospace;

  font-family: var(--pp-gothic);
  color: var(--pp-ink);
  line-height: 1.7;
}
#ai-floating, #ai-floating *, #ai-floating *::before, #ai-floating *::after { box-sizing: border-box; }

.grecaptcha-badge {
  left: 0 !important;
  right: auto !important;
  bottom: 14px !important;
  /* Google の既定は right:-186px、つまり 256px のうち左70pxだけを見せて
     紋（reCAPTCHAロゴ）を出し、hover で全幅を出す作り。
     左端に移すと同じ手が使えない（画面外に逃がすと本文側が残る）ので、
     見せ幅を切り出して同じ挙動を作る。隠す幅は Google 既定と同じ 186px。 */
  clip-path: inset(0 186px 0 0);
  transition: clip-path .3s ease !important;
}
.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within { clip-path: inset(0); }

#ai-floating .pp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   札 — 窓口のランチャー
   ---------------------------------------------------------------------
   紋は封筒。触れても紋の形は変えない（フラップが開く動きは、封筒が潰れて
   見えるうえ視線を奪うため取りやめた）。触れたことは背景色だけで示す。
   読んでいる最中は紋だけに畳んで幅を返す。
   ===================================================================== */
/* ログイン状態・利用可否が分かるまでは札を出さない。
   HTML は誰にも同一なので、ここで出すと使えない人にも一瞬見えてしまう */
#ai-floating.is-checking .pp-launch { display: none; }

#ai-floating .pp-launch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 20px 0 15px;
  font-family: var(--pp-gothic);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--pp-ai);
  border: 1px solid var(--pp-ai);
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(25, 27, 32, .26);
  transition: background .16s, padding .2s ease, gap .2s ease, box-shadow .16s, color .16s, border-color .16s;
}
#ai-floating .pp-launch:hover { background: var(--pp-ai-deep); box-shadow: 0 8px 26px rgba(25, 27, 32, .32); }
#ai-floating .pp-launch:focus-visible { outline: 2px solid var(--pp-ai); outline-offset: 3px; }
/* 紋は2つ持ち、開閉で入れ替える。閉じるときに封筒を出すと意味が合わない */
#ai-floating .pp-launch-mark { display: inline-flex; flex: none; }
#ai-floating .pp-launch-mark-shut { display: none; }
#ai-floating.is-open .pp-launch-mark { display: none; }
#ai-floating.is-open .pp-launch-mark-shut { display: inline-flex; }
#ai-floating .pp-launch-label {
  max-width: 8em;
  overflow: hidden;
  transition: max-width .2s ease, opacity .14s ease;
}
/* スクロール中は紋だけに畳む。
   ラベルは max-width:0 で潰れるがフレックス項目としては残るため、gap を 0 に
   しないと紋と空のラベルの間に 9px が入り、紋が gap の半分（4.5px）だけ左へ
   ずれる。justify-content:center だけでは中央に来ないのはこのため。 */
#ai-floating.is-tight .pp-launch {
  padding: 0;
  width: 50px;
  gap: 0;
  justify-content: center;
}
#ai-floating.is-tight .pp-launch-label { max-width: 0; opacity: 0; }

/* 開いている間は札を反転させ、窓の続きであることを示す */
#ai-floating.is-open .pp-launch {
  color: var(--pp-ai);
  background: var(--pp-paper);
  border-color: var(--pp-ai-line);
}
#ai-floating.is-open .pp-launch:hover { background: var(--pp-ai-soft); }

/* =====================================================================
   窓 — 対話パネル
   ===================================================================== */
#ai-floating .pp-win {
  display: flex;
  flex-direction: column;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 150px);
  background: var(--pp-paper);
  border: 1px solid var(--pp-rule);
  border-radius: 14px;
  box-shadow: 0 20px 52px rgba(25, 27, 32, .22);
  overflow: hidden;
}
#ai-floating .pp-win[hidden] { display: none; }
/* hidden が外れた瞬間に一度だけ走る。札の角から立ち上がるように見せる */
#ai-floating .pp-win:not([hidden]) {
  animation: pp-win-in .2s cubic-bezier(.2, .8, .3, 1) both;
  transform-origin: 100% 100%;
}
@keyframes pp-win-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

#ai-floating .pp-win-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 12px 12px 14px;
  color: #fff;
  background: var(--pp-ai);
}
#ai-floating .pp-win-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .13);
}
#ai-floating .pp-win-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#ai-floating .pp-win-title {
  font-family: var(--pp-mincho);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.35;
}
#ai-floating .pp-win-sub {
  font-size: 10.5px;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--pp-ai-line);
}
#ai-floating .pp-win-act {
  flex: none;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--pp-ai-line);
  text-decoration: none;
  border-bottom: 1px solid rgba(195, 205, 228, .45);
  padding-bottom: 1px;
}
#ai-floating .pp-win-act:hover { color: #fff; border-bottom-color: #fff; }
/* ヘッダーの操作は <a>（全画面）と <button>（新しい相談・履歴）が混在する。
   見た目を揃えるため、button 側だけボタン既定の見た目を打ち消す */
#ai-floating .pp-win-actbtn {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(195, 205, 228, .45);
  cursor: pointer;
  font-family: inherit;
}
#ai-floating .pp-win-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--pp-ai-line);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
#ai-floating .pp-win-close:hover { color: #fff; background: rgba(255, 255, 255, .13); }
#ai-floating .pp-win-act:focus-visible,
#ai-floating .pp-win-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 本文・入力欄と、その上に重ねる一覧の土台。
   上下に割ると狭い窓ではどちらも読めなくなるので、覆う方式にする */
#ai-floating .pp-win-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 過去の相談。ヘッダーの下を丸ごと覆う（入力欄も隠す。
   相談を選ぶ前に打てても行き先が無いため） */
#ai-floating .pp-convs {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  background: #fff;
  padding: 6px 8px 10px;
}
#ai-floating .pp-convs-empty { margin: 0; padding: 10px 6px; font-size: 12px; color: #6b7793; }
#ai-floating .pp-conv {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid #eef1f6;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
#ai-floating .pp-conv:hover { background: #f1f4fa; }
#ai-floating .pp-conv.is-current { background: #e8eefb; }
#ai-floating .pp-conv-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #1d2433;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ai-floating .pp-conv-date { flex: none; font-size: 11px; color: #8a93a8; }

#ai-floating .pp-win-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 12px;
  font-size: 13.5px;
  line-height: 1.8;
  overscroll-behavior: contain;
}

/* ---- 切り出し。空の窓を出さず、頼めることを具体例で示す ------------- */
#ai-floating .pp-seeds-lead {
  margin: 4px 2px 12px;
  font-family: var(--pp-mincho);
  font-size: 16px;
  line-height: 1.6;
}
#ai-floating .pp-seed {
  display: block;
  width: 100%;
  margin-bottom: 7px;
  padding: 10px 13px;
  font-family: var(--pp-gothic);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-rule-2);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
#ai-floating .pp-seed:hover { border-color: var(--pp-ai-line); background: var(--pp-ai-soft); }
#ai-floating .pp-seed:focus-visible { outline: 2px solid var(--pp-ai); outline-offset: 2px; }

#ai-floating .pp-earlier {
  display: block;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 11.5px;
  text-align: center;
  color: var(--pp-ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--pp-rule-2);
}
#ai-floating .pp-earlier:hover { color: var(--pp-ai); }

/* ---- 未ログインの案内 ----------------------------------------------- */
#ai-floating .pp-win-gate { padding: 6px 2px; }
#ai-floating .pp-gate-lead {
  margin: 0 0 8px;
  font-family: var(--pp-mincho);
  font-size: 16px;
  line-height: 1.65;
}
#ai-floating .pp-gate-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--pp-ink-2); }
#ai-floating .pp-gate-acts { margin: 0 0 10px; display: flex; gap: 8px; }
#ai-floating .pp-gate-note { margin: 0; font-size: 11px; color: var(--pp-ink-3); }
#ai-floating .pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  font-family: var(--pp-gothic);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-rule);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
#ai-floating .pp-btn:hover { border-color: var(--pp-ink-3); }
#ai-floating .pp-btn-primary {
  color: #fff;
  background: var(--pp-ai);
  border-color: var(--pp-ai);
}
#ai-floating .pp-btn-primary:hover { background: var(--pp-ai-deep); border-color: var(--pp-ai-deep); }

/* =====================================================================
   発話
   ---------------------------------------------------------------------
   自分は右・藍の塗り、窓口は左・白の紙片。全画面版と同じ向き付け。
   吹き出しの中は本文だけに保ち、進捗・決裁は外に積む（本文は描き直される）。
   ===================================================================== */
#ai-floating .pp-turn { display: flex; flex-direction: column; margin-bottom: 12px; }
#ai-floating .pp-turn-user { align-items: flex-end; }
#ai-floating .pp-turn-assistant { align-items: flex-start; }

#ai-floating .pp-bubble {
  max-width: 90%;
  padding: 9px 13px;
  border-radius: 13px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#ai-floating .pp-bubble.is-empty { display: none; }
#ai-floating .pp-turn-assistant .pp-bubble {
  background: #fff;
  border: 1px solid var(--pp-rule-2);
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(25, 27, 32, .05);
}
#ai-floating .pp-turn-user .pp-bubble {
  color: #fff;
  background: var(--pp-ai);
  border: 1px solid var(--pp-ai);
  border-top-right-radius: 4px;
  white-space: pre-wrap;
}

#ai-floating .pp-typing { display: inline-flex; align-items: center; gap: 5px; padding: 3px 1px; }
#ai-floating .pp-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pp-ai-line);
  animation: pp-dot 1.2s ease-in-out infinite;
}
#ai-floating .pp-typing i:nth-child(2) { animation-delay: .15s; }
#ai-floating .pp-typing i:nth-child(3) { animation-delay: .30s; }
@keyframes pp-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

#ai-floating .pp-status {
  margin: 6px 2px 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--pp-ink-2);
}
#ai-floating .pp-status.is-run { color: var(--pp-ink-3); }
#ai-floating .pp-status.is-ready { color: var(--pp-ai); }
#ai-floating .pp-status.is-done { color: var(--pp-ai); }
#ai-floating .pp-status.is-fail { color: var(--pp-shu); }
#ai-floating .pp-status.is-warn { color: var(--pp-ink-2); margin-top: 5px; font-size: 11px; }
#ai-floating .pp-status-link { color: var(--pp-ai); text-decoration: underline; text-underline-offset: 2px; }

/* 参照した記事。窓は狭いので出典と表題だけの一行カードにする */
#ai-floating .pp-refs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 2px 0;
}
#ai-floating .pp-ref {
  display: block;
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pp-ink);
  text-decoration: none;
  background: var(--pp-sunk);
  border: 1px solid var(--pp-rule-2);
  border-radius: 4px;
}
#ai-floating a.pp-ref:hover { border-color: var(--pp-ai); }
#ai-floating a.pp-ref:focus-visible { outline: 2px solid var(--pp-ai); outline-offset: 2px; }
#ai-floating .pp-ref-src {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--pp-ink-2);
}
#ai-floating .pp-ref-title { display: block; }

/* 再送ボタン。失敗の行にそのまま添える。
   打ち直していただかずに済むことが分かるよう、文言のすぐ隣に置く */
#ai-floating .pp-retry {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 10px;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-rule);
  border-radius: 3px;
  cursor: pointer;
}
#ai-floating .pp-retry:hover { background: var(--pp-sunk); border-color: var(--pp-ink-2); }
#ai-floating .pp-retry:focus-visible { outline: 2px solid var(--pp-ai); outline-offset: 2px; }

/* 決裁。ページ内で朱を使う唯一の場所 */
#ai-floating .pp-commit {
  align-self: flex-start;
  margin-top: 8px;
  padding: 9px 18px;
  font-family: var(--pp-gothic);
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  background: var(--pp-shu);
  border: 1px solid var(--pp-shu);
  border-radius: 6px;
  cursor: pointer;
}
#ai-floating .pp-commit:hover { background: #98191F; }
#ai-floating .pp-commit:disabled { opacity: .5; cursor: default; }
#ai-floating .pp-commit:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 2px; }

/* =====================================================================
   吹き出しの中の Markdown
   ===================================================================== */
#ai-floating .pp-md > *:first-child { margin-top: 0; }
#ai-floating .pp-md > *:last-child  { margin-bottom: 0; }
#ai-floating .pp-md p { margin: 0 0 .6em; }
#ai-floating .pp-md h1,
#ai-floating .pp-md h2,
#ai-floating .pp-md h3,
#ai-floating .pp-md h4,
#ai-floating .pp-md h5,
#ai-floating .pp-md h6 {
  margin: .9em 0 .4em;
  padding: 0;
  font-family: var(--pp-mincho);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: inherit;
  background: none;
  border: 0;
}
#ai-floating .pp-md ul,
#ai-floating .pp-md ol { margin: .4em 0 .6em; padding-left: 1.35em; }
#ai-floating .pp-md ul { list-style: disc outside; }
#ai-floating .pp-md ol { list-style: decimal outside; }
#ai-floating .pp-md li { margin: .18em 0; padding: 0; background: none; list-style: inherit; }
#ai-floating .pp-md li::marker { color: var(--pp-ai); }
#ai-floating .pp-md a { color: var(--pp-ai); text-decoration: underline; text-underline-offset: 2px; }
#ai-floating .pp-turn-user .pp-md a { color: #fff; }
#ai-floating .pp-md blockquote {
  margin: .6em 0;
  padding-left: 10px;
  border-left: 2px solid var(--pp-ai-line);
  color: var(--pp-ink-2);
}
#ai-floating .pp-md hr { height: 0; margin: .8em 0; border: 0; border-top: 1px solid var(--pp-rule); }
#ai-floating .pp-md code {
  padding: 1px 4px;
  font-family: var(--pp-mono);
  font-size: 12px;
  background: var(--pp-sunk);
  border: 1px solid var(--pp-rule-2);
  border-radius: 3px;
}
#ai-floating .pp-md pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--pp-sunk);
  border: 1px solid var(--pp-rule-2);
  border-radius: 6px;
}
#ai-floating .pp-md pre code { padding: 0; background: none; border: 0; white-space: pre; }
#ai-floating .pp-md table {
  width: auto;
  margin: 0;
  font-size: 12.5px;
  background: var(--pp-paper);
  border-collapse: collapse;
}
#ai-floating .pp-md th,
#ai-floating .pp-md td {
  padding: 5px 9px;
  border: 1px solid var(--pp-rule-2);
  text-align: left;
  white-space: nowrap;
}
#ai-floating .pp-md th { font-weight: 600; color: var(--pp-ink-2); background: var(--pp-sunk); }
#ai-floating .pp-turn-user .pp-md code,
#ai-floating .pp-turn-user .pp-md pre {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
}
/* markdown.js が付ける後処理用の枠 */
#ai-floating .pp-md-tablewrap { margin: .6em 0; overflow-x: auto; }
#ai-floating .pp-md-code { position: relative; margin: .6em 0; }
#ai-floating .pp-md-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  font-family: var(--pp-gothic);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--pp-ink-2);
  background: var(--pp-paper);
  border: 1px solid var(--pp-rule);
  border-radius: 3px;
  cursor: pointer;
}
#ai-floating .pp-md-copy.is-done { color: var(--pp-ai); border-color: var(--pp-ai-line); }

/* =====================================================================
   入力
   ===================================================================== */
#ai-floating .pp-win-foot {
  flex: none;
  padding: 10px 12px 12px;
  background: var(--pp-paper);
  border-top: 1px solid var(--pp-rule-2);
}
#ai-floating .pp-foot-row { display: flex; align-items: flex-end; gap: 8px; }
#ai-floating .pp-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  max-height: 116px;
  padding: 10px 12px;
  font-family: var(--pp-gothic);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pp-ink);
  background: #fff;
  border: 1px solid var(--pp-rule);
  border-radius: 10px;
  resize: none;
  overflow-y: auto;
}
#ai-floating .pp-input::placeholder { color: var(--pp-ink-3); }
#ai-floating .pp-input:focus {
  outline: none;
  border-color: var(--pp-ai);
  box-shadow: 0 0 0 3px var(--pp-ai-soft);
}
#ai-floating .pp-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: var(--pp-ai);
  border: 1px solid var(--pp-ai);
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
#ai-floating .pp-send:hover { background: var(--pp-ai-deep); border-color: var(--pp-ai-deep); }
#ai-floating .pp-send:focus-visible { outline: 2px solid var(--pp-ai); outline-offset: 2px; }
/* 応答中は同じボタンが「中止」に変わる。押す場所を増やさない */
#ai-floating .pp-send.is-stop { background: var(--pp-ink-2); border-color: var(--pp-ink-2); }
#ai-floating .pp-send.is-stop:hover { background: var(--pp-ink); border-color: var(--pp-ink); }
#ai-floating .pp-send.is-stop svg { display: none; }
#ai-floating .pp-send.is-stop::after {
  content: "";
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 2px;
}
#ai-floating .pp-foot-note {
  margin: 8px 2px 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--pp-ink-3);
}

/* =====================================================================
   狭い画面 — 窓ではなく、下から立ち上がるシート
   ===================================================================== */
@media screen and (max-width: 600px) {
  #ai-floating { right: 14px; bottom: 14px; }

  #ai-floating .pp-win {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  #ai-floating .pp-win:not([hidden]) {
    animation: pp-sheet-in .22s cubic-bezier(.2, .8, .3, 1) both;
    transform-origin: 50% 100%;
  }
  @keyframes pp-sheet-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  /* シートが全面を覆う間は札を退け、背後のページも動かさない */
  #ai-floating.is-open .pp-launch { display: none; }
  #ai-floating .pp-win-head { padding: 14px 12px 14px 16px; }
  #ai-floating .pp-win-body { padding: 16px 16px 12px; }
  #ai-floating .pp-win-foot { padding: 10px 14px 14px; }
  #ai-floating .pp-bubble { max-width: 92%; }
}
html.pp-dock-open { overflow: hidden; }
@media screen and (min-width: 601px) {
  html.pp-dock-open { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #ai-floating .pp-typing i,
  #ai-floating .pp-win:not([hidden]) { animation: none; }
  #ai-floating .pp-launch,
  #ai-floating .pp-launch-label,
  .grecaptcha-badge { transition: none !important; }
}