@charset "utf-8";
/* ============================================================
   でんねつくん チャットボット 共通スタイル
   /assets/ai/chatbot.css

   トップ版（chatbot-top-include.html）と
   下層版（chatbot-footer-include.html）の両方がこの1枚を読み込みます。

   ■ 色やサイズを調整するとき
     下の「設計トークン」だけを変えてください。
     例）ブランドカラーを変える → --hk-blue の1行を変えれば全体に反映されます。

   ■ サイト側CSSとの衝突について
     クラス名は下層版が #hk- / .hk-、トップ版が .inline-chat- / .ic- で
     スコープしてあります。カスタムプロパティも --hk- 接頭辞で統一。
============================================================ */

/* ============================================================
   設計トークン（ここだけ変えれば全体に効きます）
============================================================ */
:root {
  /* ブランドカラー（サイトのトーンに合わせる）
     この3色を変えれば全体に反映されます。 */
  --hk-blue:         #03468c;   /* 濃い青。見出し・ユーザー吹き出し・すべての輪郭線 */
  --hk-accent:       #e50041;   /* 送信ボタン・起動アイコンのバッジ */
  --hk-avatar-bg:    #ffd900;   /* アバターの丸の地色 */

  --hk-accent-hover: #c20038;   /* 送信ボタンのホバー */
  /* 罫線
     輪郭（枠・吹き出し・サジェスト・入力欄）は濃い青で締める。
     区切り線2本だけは薄いまま。カードの途中に濃い線が入ると分断して見えるため。 */
  --hk-line:         var(--hk-blue);   /* 枠線 */
  --hk-line-soft:    var(--hk-blue);   /* ボット吹き出しの線 */
  --hk-line-btn:     var(--hk-blue);   /* サジェストボタンの線 */
  --hk-line-input:   var(--hk-blue);   /* 入力欄の線 */
  --hk-line-area:    #e0e6ed;          /* 入力エリア上部の区切り（薄いまま）*/
  --hk-line-foot:    #eef1f5;          /* フッターの区切り（薄いまま）*/

  /* 背景 */
  --hk-bg-chat:      #f5f8fc;   /* メッセージ欄の地色 */
  --hk-bg-foot:      #fafbfc;   /* フッターの地色 */

  /* 文字 */
  --hk-ink:          #333;      /* 本文 */
  --hk-ink-mute:     #666;      /* ウェルカムの説明 */
  --hk-ink-mute2:    #555;      /* ウェルカムの本文 */
  --hk-ink-faint:    #999;      /* プレースホルダ・注釈 */

  /* そのほか */
  --hk-dot-color:    #a0b0c0;   /* 入力中の3点 */
  --hk-disabled:     #b0c0d0;   /* 送信ボタン無効時 */
  --hk-badge:        var(--hk-accent);  /* 起動アイコンのバッジ。送信ボタンと同じ赤に揃える */

  /* 角丸 */
  /* レイアウト */
  --hk-top-w:         800px;    /* トップ版の最大幅（サジェストと枠で共用） */

  /* トップ版ヘッダーの背景。設置先にセクション色の変数が無いときの既定値。
     ★ここで var(--po-concierge-bg, …) と書いてはいけない。
       カスタムプロパティは【宣言した場所】で解決されるため、:root では
       先方の変数（.page-top-pre-open で宣言）が見えず、必ず既定値になる。
       先方の変数を拾うのは .inline-chat-header 側で行う。 */
  --hk-header-bg:     #50a0f3;

  --hk-radius:        18px;     /* 枠全体 */
  --hk-radius-bubble: 14px;     /* 吹き出し */
  --hk-radius-pill:   20px;     /* サジェストボタン */

  /* 影 */
  --hk-shadow-panel:  0 12px 40px rgba(0,59,112,.22);
  --hk-shadow-box:    0 7px 16px rgb(0 0 0 / .15);
  --hk-shadow-icon:   0 6px 20px rgba(0,59,112,.35);
  --hk-shadow-bubble: 0 4px 16px rgba(0,59,112,.18);

  /* キャラクター画像（JSが HK_CONFIG.imgBase を元に上書きします） */
  --hk-bust: url(/assets/ai/images/ph_avatar_bust.png);

  /* 書体（下層版のみ明示指定。トップ版はページの書体を継承します） */
  --hk-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* ============================================================
   共通アニメーション（両版で共有）
============================================================ */
@keyframes hkFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hkDotBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-7px); }
}
@keyframes hkPop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes icScrollRTL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes icScrollLTR {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ------------------------------------------------------------
   動きを減らす設定（OSの「視差効果を減らす」がON）への対応

   ■ なぜキーフレームごと上書きするのか
     セレクタ側で animation を打ち消すと、使っている箇所を1つでも
     書き漏らすと効かない。キーフレームの名前で上書きすれば、
     この先どこで使っても自動的に効く。
   ■ 消さずに「動かさない」
     入力中のドットは「考えている」という意味を持っているので止めない。
     上下の動きを不透明度の明滅に置き換えて、意味だけ残す。
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* 位置移動・拡大縮小をやめ、短いフェードだけ残す */
  @keyframes hkFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes hkPop {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* 上下の跳ねを明滅に置き換える。nth-child の animation-delay がそのまま効くので、
     3つが順番に光る動きは保たれる */
  @keyframes hkDotBounce {
    0%, 60%, 100% { opacity: .3; }
    30%           { opacity: 1; }
  }
}

/* ============================================================
   共通ルール（トップ版・下層版で中身が同じもの）
============================================================ */

/* キャラクター名など、途中で改行させたくない語に付ける
   （例：「でんねつくん」が「電熱く／ん」で折れるのを防ぐ） */
.hk-nobr { white-space: nowrap; }
/* スマホでだけ、この中身を次の行に送る（注意文の2文目など） */
@media (max-width: 480px) { .hk-sp-block { display: block; } }

/* 入力中の3点 */
.ic-dot,
.hk-dot {
  width: 8px; height: 8px;
  background: var(--hk-dot-color);
  border-radius: 50%;
  animation: hkDotBounce 1.3s infinite;
}
.ic-dot:nth-child(2), .hk-dot:nth-child(2) { animation-delay: .15s; }
.ic-dot:nth-child(3), .hk-dot:nth-child(3) { animation-delay: .3s; }

/* 吹き出しの共通部分（余白だけ各版で微調整） */
.ic-msg-bubble,
.hk-bub {
  border-radius: var(--hk-radius-bubble);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

/* メッセージ行の並び */
.ic-msg.user, .hk-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.ic-msg.bot,  .hk-msg.bot  { align-self: flex-start; }

/* アバター画像の収まり */
.ic-msg-avatar img,
.hk-msg .hk-ava img { width: 100%; height: 100%; object-fit: cover; }

/* 送信ボタン */
.inline-chat-send,
#hk-send {
  width: 44px; height: 44px;
  background: var(--hk-accent);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
  /* 設置先のCSSで padding が付いても 44px を保つ */
  box-sizing: border-box;
}

/* 送信の▶。テキスト（U+25B6）だと環境ごとに字形と位置が変わるので、CSSで描く。
   大きさは各版の font-size に追従する（下の 18px / 16px が調整箇所）。 */
.inline-chat-send::before,
#hk-send::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: .39em 0 .39em .62em;   /* 上 右 下 左。左辺だけ塗って右向きの三角にする */
  border-color: transparent transparent transparent currentColor;
  /* 三角は重心が底辺（左）寄りのため、ど真ん中に置くと左にずれて見える。少しだけ右へ。 */
  margin-left: .12em;
}
.inline-chat-send:hover,   #hk-send:hover    { background: var(--hk-accent-hover); }
.inline-chat-send:disabled, #hk-send:disabled { background: var(--hk-disabled); cursor: not-allowed; }

/* ============================================================
   トップページ版（ページ内に埋め込む大きなチャット枠）
   scope: .inline-chatbot / .ic-
============================================================ */
.inline-chatbot {
  background: #fff;
  box-shadow: var(--hk-shadow-box);
  /* 幅は 800px で頭打ち。狭いときは画面端から 20px を確保する。
     メディアクエリは不要（境界の数値を二重管理しなくて済む）。
     ★ calc(100% - 40px) ではなく min() を使う。100% は「親の内寸」なので、
       設置先のコンテナに既に余白があると 20px を上乗せして枠が細くなる
       （375px 幅で 263px まで痩せた）。min(100%, 100vw - 40px) なら、
       親が十分な余白を持つときは何も足さず、無いときだけ 20px を作る。
     box-sizing も明示する。設置先が content-box だと border 1px ぶん
     幅がずれて、サジェストと左右が合わなくなる。 */
  box-sizing: border-box;
  width: min(100%, calc(100vw - 40px));
  max-width: var(--hk-top-w);
  margin: 0 auto 60px;
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius);
}

/* ヘッダー
   右下にでんねつくんの胸像を重ねる。文字が画像の下に潜らないよう、
   画像の幅ぶんだけ padding-right を確保しておくこと（--hk-bust-w）。 */
.inline-chat-header {
  --hk-bust-w: 133px;   /* 胸像の幅。下のメディアクエリで画面幅に応じて縮める */
  position: relative;
  /* 設置先のセクション色に揃える。--po-concierge-bg は先方サイト側の変数で、
     祖先（.page-top-pre-open）から継承される。無い環境では --hk-header-bg。 */
  background: var(--po-concierge-bg, var(--hk-header-bg));
  color: #fff;
  padding: 18px 24px;
  padding-right: calc(var(--hk-bust-w) + 16px);
  display: flex;
  border-radius: var(--hk-radius) var(--hk-radius) 0 0;
}
.inline-chat-header::before {
  position: absolute;
  content: "";
  bottom: 0;
  right: 10px;
  width: var(--hk-bust-w);
  height: calc(var(--hk-bust-w) * 0.9);
  background: var(--hk-bust) no-repeat right bottom;
  background-size: contain;
}
.inline-chat-header .chat-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.inline-chat-header .chat-header-text h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.5px;
}
.inline-chat-header .chat-header-text p {
  font-size: 12px;
  opacity: 0.85;
  margin: 3px 0 0 0;
}

/* メッセージ欄 */
.inline-chat-messages {
  height: 370px;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--hk-bg-chat);
}
.inline-chat-welcome {
  text-align: center;
  padding: 24px 12px;
  color: var(--hk-ink-mute);
}
.inline-chat-welcome h4 {
  color: var(--hk-blue);
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 700;
}
.inline-chat-welcome p {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 14px;
  color: var(--hk-ink-mute2);
}
.inline-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.inline-chat-suggestions button {
  padding: 7px 16px;
  background: #fff;
  border: 1px solid var(--hk-line-btn);
  border-radius: var(--hk-radius-pill);
  font-size: 13px;
  cursor: pointer;
  color: var(--hk-blue);
  transition: all 0.2s;
  font-family: inherit;
}
.inline-chat-suggestions button:hover {
  background: var(--hk-blue);
  color: #fff;
  border-color: var(--hk-blue);
}

/* 質問例の横スクロール */
/* サジェストの横スクロールは画面いっぱいに流す（チャット枠の 800px には揃えない）。
   overflow: hidden は、はみ出した分を隠して流れて見せるために必要。 */
.ic-scroll-examples {
  margin: 60px 0 16px;
  overflow: hidden;
}
.ic-scroll-row      { overflow: hidden; margin-bottom: 8px; }
.ic-scroll-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.ic-scroll-rtl .ic-scroll-track { animation: icScrollRTL 40s linear infinite; }
.ic-scroll-ltr .ic-scroll-track { animation: icScrollLTR 40s linear infinite; }
.ic-scroll-track:hover { animation-play-state: paused; }

/* 🔴 動きを減らす設定のとき、この帯は「止めるだけ」にしてはいけない。
   親が overflow:hidden なので、止めると画面外のボタンに到達できなくなる。
   止めると同時に、指で横に送れるようにする（JSは要らない）。
   ※ トラックは同じ10問を2回並べて途切れなく流している。送ると同じ問いが
     もう一度出るが、押せなくなるより害が小さいのでそのままにしている。 */
@media (prefers-reduced-motion: reduce) {
  .ic-scroll-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  /* 元の指定が `.ic-scroll-rtl .ic-scroll-track`（クラス2つ）なので、
     `.ic-scroll-track` だけでは詳細度が足りず打ち消せない。
     メディアクエリは詳細度を上げない。同じ形で書くこと */
  .ic-scroll-rtl .ic-scroll-track,
  .ic-scroll-ltr .ic-scroll-track { animation: none; }
}
.ic-scroll-track button {
  padding: 8px 18px;
  background: #fff;
  border: 1px solid var(--hk-line-btn);
  border-radius: 22px;
  font-size: 13px;
  cursor: pointer;
  color: var(--hk-blue);
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.ic-scroll-track button:hover {
  background: var(--hk-blue);
  color: #fff;
  border-color: var(--hk-blue);
}

/* メッセージ */
.ic-msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
  animation: hkFadeIn 0.25s ease;
}
.ic-msg-avatar {
  width: 36px; height: 36px;
  background: var(--hk-avatar-bg);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}
.ic-msg.user .ic-msg-avatar {
  background: var(--hk-blue);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}
.ic-msg-bubble { padding: 10px 16px; }
.ic-msg.user .ic-msg-bubble {
  background: var(--hk-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ic-msg.bot .ic-msg-bubble {
  background: #fff;
  border: 1px solid var(--hk-line-soft);
  border-bottom-left-radius: 4px;
  color: var(--hk-ink);
}
.ic-typing .ic-msg-bubble {
  display: flex; gap: 5px; align-items: center; padding: 14px 20px;
}

/* 入力欄 */
.inline-chat-input-area {
  padding: 14px 18px;
  border-top: 1px solid var(--hk-line-area);
  display: flex;
  gap: 10px;
  background: #fff;
  border-radius: 0 0 var(--hk-radius) var(--hk-radius);
}
.inline-chat-input-area textarea {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid var(--hk-line-input);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  max-height: 80px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s;
}
.inline-chat-input-area textarea,
.inline-chat-input-area textarea::placeholder {
  color: var(--hk-ink) !important;
  caret-color: var(--hk-ink) !important;
}
.inline-chat-input-area textarea::placeholder { color: var(--hk-ink-faint) !important; }
.inline-chat-input-area textarea:focus {
  border-color: var(--hk-blue);
  box-shadow: 0 0 0 2px rgba(0, 91, 172, 0.1);
}
.inline-chat-send { font-size: 18px; }   /* ▶の大きさ（em基準）*/

/* 注記が続くときは、入力欄の下の角丸を消して注記側に持たせる */
.inline-chat-input-area:has(+ .inline-chat-footer) { border-radius: 0; }
.inline-chat-footer {
  padding: 8px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--hk-ink-faint);
  background: var(--hk-bg-foot);
  border-top: 1px solid var(--hk-line-foot);
  border-radius: 0 0 var(--hk-radius) var(--hk-radius);
}

/* ---- タブレット ---- */
@media (max-width: 768px) {
  .inline-chat-messages { height: 300px; }
  .inline-chat-header {
    --hk-bust-w: 96px;
    padding: 14px 16px;
    padding-right: calc(var(--hk-bust-w) + 10px);
  }
  .inline-chat-header .chat-header-text h3 { font-size: 14px; }
  .inline-chat-header .chat-header-text p  { font-size: 11.5px; }
}

/* ---- スマートフォン ---- */
@media (max-width: 480px) {
  .inline-chat-header {
    --hk-bust-w: 74px;
    padding: 12px 14px;
    padding-right: calc(var(--hk-bust-w) + 6px);
  }
  .inline-chat-header::before { right: 4px; }
  .inline-chat-header .chat-header-text h3 { font-size: 13.5px; line-height: 1.45; }
  .inline-chat-header .chat-header-text p  { font-size: 11px; line-height: 1.5; }

  /* 挨拶の見出し。スマホでも「やあ、ボクはでんねつくん！」を1行で見せる。
     名前は .hk-nobr で途中改行させない（折り返すなら「やあ、ボクは」の後ろで）。 */
  .inline-chat-welcome { padding: 18px 10px; }
  .inline-chat-welcome h4 { font-size: 15px; line-height: 1.55; }
  .inline-chat-welcome p  { font-size: 12.5px; }

  /* 枠全体（見出し＋メッセージ欄＋入力欄＋注意文）が1画面に収まる高さにする。
     画面の高さの8割から、見出し・入力欄・注意文のぶん（約220px）を引く。 */
  .inline-chat-messages { height: calc(80svh - 220px); min-height: 200px; padding: 14px; }
  .ic-msg { max-width: 94%; }
  .inline-chat-input-area { padding: 10px 12px; gap: 8px; }
  .inline-chat-input-area textarea { padding: 9px 12px; font-size: 16px; } /* 16px未満はiOSで自動ズームする */
  .ic-scroll-track button { padding: 7px 14px; font-size: 12px; }
  /* スマホは画面が狭いぶん速く見えるので、ゆっくり流す（PCは40秒）。
     元の指定と同じ形（クラス2つ）で書かないと詳細度で負ける。 */
  .ic-scroll-rtl .ic-scroll-track,
  .ic-scroll-ltr .ic-scroll-track { animation-duration: 45s; }
}

/* ============================================================
   下層ページ版（右下アイコン → ポップアップ）
   scope: #hk-widget / .hk-
============================================================ */
#hk-widget, #hk-widget * { box-sizing: border-box; }
#hk-widget {
  position: fixed; right: 20px; bottom: 20px; z-index: 99999;
  font-family: var(--hk-font);
}

/* 起動アイコン */
#hk-launcher {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
#hk-launcher .hk-bubble {
  background: #fff; color: var(--hk-blue); font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: var(--hk-radius-pill);
  box-shadow: var(--hk-shadow-bubble);
  white-space: nowrap; border: 1px solid var(--hk-line);
}
#hk-launcher .hk-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  /* トップ版のヘッダーと同じ色。設置先に変数が無ければ --hk-header-bg */
  background: var(--po-concierge-bg, var(--hk-header-bg));
  box-shadow: var(--hk-shadow-icon);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; transition: transform .2s;
}
#hk-launcher:hover .hk-avatar { transform: translateY(-2px) scale(1.04); }
#hk-launcher .hk-avatar img { width: 92%; height: 92%; object-fit: contain; object-position: bottom; }
#hk-launcher .hk-badge {
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  background: var(--hk-badge); border: 2px solid #fff; border-radius: 50%;
}
@media (max-width: 768px) {
  #hk-launcher .hk-bubble { display: none; }
  #hk-launcher .hk-avatar { width: 58px; height: 58px; }
}

/* ポップアップ枠 */
#hk-panel {
  position: absolute; right: 0; bottom: 78px; width: 370px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--hk-line); border-radius: var(--hk-radius); overflow: hidden;
  box-shadow: var(--hk-shadow-panel); display: none; flex-direction: column;
  transform-origin: bottom right;
}
#hk-widget.hk-open #hk-panel { display: flex; animation: hkPop .2s ease; }
#hk-widget.hk-open #hk-launcher .hk-bubble { display: none; }

/* ヘッダー */
#hk-panel .hk-header {
  /* トップ版のヘッダーと同じ色に揃える */
  position: relative; background: var(--po-concierge-bg, var(--hk-header-bg));
  color: #fff; padding: 16px 46px 16px 16px; display: flex; align-items: center; gap: 12px;
}
#hk-panel .hk-header .hk-h-ava {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18);
  overflow: hidden; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center;
}
#hk-panel .hk-header .hk-h-ava img { width: 90%; height: 90%; object-fit: contain; object-position: bottom; }
#hk-panel .hk-header h3 { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.4; }
#hk-panel .hk-header p { font-size: 11px; opacity: .85; margin: 3px 0 0; }
#hk-close {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
  box-sizing: border-box;
}
/* ×もCSSで描く。文字（×）だとフォントごとに字面の位置が違い、
   丸の中央からずれる。2本の線を中心に置いて交差させる。 */
#hk-close::before,
#hk-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  border-radius: 1px;
  background: currentColor;
}
#hk-close::before { transform: translate(-50%, -50%) rotate(45deg); }
#hk-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
#hk-close:hover { background: rgba(255,255,255,.32); }

/* メッセージ */
#hk-messages {
  height: 380px; max-height: 56svh; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 12px; background: var(--hk-bg-chat);
}
#hk-welcome { text-align: center; padding: 16px 8px; color: var(--hk-ink-mute); }
#hk-welcome h4 { color: var(--hk-blue); font-size: 15px; margin: 0 0 8px; font-weight: 700; }
#hk-welcome p { font-size: 13px; line-height: 1.8; margin: 0 0 14px; color: var(--hk-ink-mute2); }
#hk-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#hk-suggest button {
  padding: 7px 14px; background: #fff; border: 1px solid var(--hk-line-btn); border-radius: var(--hk-radius-pill);
  font-size: 12.5px; cursor: pointer; color: var(--hk-blue); transition: all .2s; font-family: inherit;
}
#hk-suggest button:hover { background: var(--hk-blue); color: #fff; border-color: var(--hk-blue); }

.hk-msg { display: flex; gap: 8px; max-width: 90%; animation: hkFadeIn .25s ease; }
.hk-msg .hk-ava { width: 34px; height: 34px; background: var(--hk-avatar-bg); border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.hk-msg.user .hk-ava {
  background: var(--hk-blue); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}
.hk-bub { padding: 10px 15px; }
.hk-msg.user .hk-bub { background: var(--hk-blue); color: #fff; border-bottom-right-radius: 4px; }
.hk-msg.bot .hk-bub { background: #fff; border: 1px solid var(--hk-line-soft); border-bottom-left-radius: 4px; color: var(--hk-ink); }
.hk-typing .hk-bub { display: flex; gap: 5px; align-items: center; padding: 14px 18px; }

/* 入力欄 */
#hk-input-area { padding: 12px 14px; border-top: 1px solid var(--hk-line-area); display: flex; gap: 10px; background: #fff; }
#hk-input {
  flex: 1; padding: 10px 14px; border: 1.5px solid var(--hk-line-input); border-radius: 12px; font-size: 14px;
  font-family: inherit; resize: none; max-height: 80px; line-height: 1.5; outline: none;
  color: var(--hk-ink); transition: border-color .2s;
}
#hk-input::placeholder { color: var(--hk-ink-faint); }
#hk-input:focus { border-color: var(--hk-blue); box-shadow: 0 0 0 2px rgb(3 70 140 / .15); }
#hk-send { font-size: 16px; }   /* ▶の大きさ（em基準）*/
#hk-foot {
  padding: 7px 12px; text-align: center; font-size: 11px; color: var(--hk-ink-faint);
  background: var(--hk-bg-foot); border-top: 1px solid var(--hk-line-foot);
}

@media (max-width: 480px) {
  #hk-widget { right: 12px; bottom: 12px; }
  #hk-panel { width: calc(100vw - 24px); bottom: 72px; }
  /* ポップアップ全体（見出し＋メッセージ欄＋入力欄＋注意文＋下の余白）が1画面に収まる高さにする。
     画面の60%を目安に、ほかの部分のぶん（約310px）を引いた高さを超えないようにする。 */
  #hk-messages { height: min(60svh, calc(100svh - 310px)); min-height: 180px; }
  /* 「〜のことな／ら」のような不自然な折り返しを避けるため少しだけ縮める */
  #hk-welcome p { font-size: 12.5px; }
  #hk-input { font-size: 16px; }   /* 16px未満はiOSで入力時に自動ズームする */
}