/*
 * 製品案内チャットボット
 *
 * style.css は編集しない方針。ここだけで完結させ、chat.css を外せば
 * サイトが完全に元へ戻る状態を保つ。
 */

.cchat-fab,
.cchat-panel {
    /* アバター画像の実寸。tools/normalize_avatar.py が全画像をこの寸法に揃えている */
    --avatar-w: 688;
    --avatar-h: 1083;
    /* 丸に収めるときの基準点。画像のこの位置が枠の中心に来る */
    --face-y: 25%;
    /* 拡大率。値を小さくすると引きになり、顔まわりが広く写る */
    --face-zoom: 150%;

    --cchat-radius: 4px;
    /* 既存の industrial トーンに合わせ、丸くしすぎない */
}

/* ---------------------------------------------------------- 顔の切り出し
   用意された画像は正方形の顔写真ではなく、縦長(688x1083)のバストアップ。
   小さな丸にそのまま入れると全身が縮んで顔が潰れるため、
   顔の位置(--face-y)を枠の中心に合わせて拡大表示する。 */
.cchat-face {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color: #dbe6ef;
    flex: 0 0 auto;
}

.cchat-face img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--face-zoom);
    max-width: none;
    /* style.css の img{max-width:100%} を打ち消す */
    height: auto;
    transform: translate(-50%, calc(var(--face-y) * -1));
    display: block;
}

/* ---------------------------------------------------------- 起動ボタン */
.cchat-fab {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-bg-dark);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(11, 25, 44, 0.3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

    /* z-index の設計:
       ハンバーガー(.menu-toggle)が 9999、モバイルドロワーが 99、
       そのオーバーレイが 98 を使っている（style.css 実測）。
       FAB を 97 に置くと、ドロワーを開いたときオーバーレイが自然に覆ってくれるので、
       「メニューの上に押せないボタンが浮く」状態が構造的に起きない。 */
    z-index: 97;
}

.cchat-fab .cchat-face {
    width: 100%;
    height: 100%;
}

.cchat-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(11, 25, 44, 0.4);
}

.cchat-fab[aria-expanded="true"] {
    opacity: 0;
    pointer-events: none;
}

/* 既存の「上に戻る」ボタン(style.css: right:30px; bottom:30px; z-index:99)と
   同じ場所を取り合うため、上へ逃がす。style.css 側は触らない。
   詳細度を上げるため body を付けている */
body .page-top-btn.is-visible {
    bottom: 100px;
}

/* ---------------------------------------------------------- パネル */
.cchat-panel {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 380px;
    max-width: calc(100vw - 40px);
    /* 高さは内容なりに伸ばし、上限だけ決める。
       固定値にすると、会話が始まる前は空のログが大きな余白になって間延びする。
       dvh を使うのは、vh だと iOS Safari のアドレスバーで下端が隠れるため */
    height: auto;
    max-height: min(620px, 75dvh);
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--cchat-radius);
    box-shadow: 0 20px 60px rgba(11, 25, 44, 0.35);
    overflow: hidden;
    /* 固定ヘッダー(100)と「上に戻る」(99)より上に出す。
       ハンバーガー(9999)より下なので、メニュー操作を邪魔しない */
    z-index: 101;
}

.cchat-panel[hidden] {
    display: none;
}

/* ---------------------------------------------------------- ヘッダー */
.cchat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #00d2ff;
    color: var(--color-white);
    flex: 0 0 auto;
}

.cchat-face--sm {
    /* 会話が始まると立ち姿(116x150px)が消え、この丸だけが表情の変化を伝える。
       40pxは小さすぎて「写真が表示されない」と誤解されたため、56pxに拡大した */
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

/* 表情が切り替わった瞬間に気づけるよう、一瞬だけ縁を光らせて拡大する。
   JS側で emotion 変更のたびに一時的にこのクラスを付ける */
.cchat-face--sm.is-reacting {
    transform: scale(1.12);
    border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .cchat-face--sm {
        transition: none;
    }
}

.cchat-title {
    margin: 0;
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    /* style.css の h1-h6 は色が濃紺。ここは濃紺地なので白に戻す */
    color: var(--color-white);
    line-height: 1.4;
}

.cchat-close,
.cchat-reset {
    background: transparent;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--cchat-radius);
    transition: background var(--transition-fast);
}

.cchat-close:hover,
.cchat-reset:hover {
    background: rgba(255, 255, 255, 0.15);
}

.cchat-reset {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 8px;
    flex: 0 0 auto;
}

.cchat-reset[hidden] {
    display: none;
}

/* ---------------------------------------------------------- 初期表示（立ち姿） */
.cchat-hero {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 1rem 1rem 0;
    flex: 0 0 auto;
}

/* 会話が始まったら引っ込め、ログの領域を最大化する */
.cchat-panel[data-state="chat"] .cchat-hero {
    display: none;
}

.cchat-hero__figure {
    width: 116px;
    flex: 0 0 auto;
    /* 立ち姿は下端を切って、顔と上半身だけ見せる */
    height: 150px;
    overflow: hidden;
}

.cchat-hero__figure img {
    width: 100%;
    height: auto;
    display: block;
}

.cchat-hero__text {
    flex: 1;
    margin: 0 0 1rem;
    padding: 0.75rem;
    background: var(--color-bg);
    border-radius: var(--cchat-radius);
    font-size: 0.85rem;
    line-height: 1.7;
    white-space: pre-line;
    /* JSONの挨拶文の改行をそのまま活かす */
    color: var(--color-text);
}

/* ---------------------------------------------------------- ログ */
.cchat-log {
    flex: 1 1 auto;
    /* flex の子は既定で min-height:auto となり中身より縮まない。
       0 にしないとログが伸びてパネルが上限を突き抜ける */
    min-height: 0;
    overflow-y: auto;
    /* チャット内をスクロールし切ったとき、背後のページが動き出すのを防ぐ */
    overscroll-behavior: contain;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 会話が始まる前は空。場所を取らせない（パネルが内容なりに縮む） */
.cchat-log:empty {
    display: none;
}

.cchat-msg {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--cchat-radius);
    font-size: 0.85rem;
    line-height: 1.7;
    white-space: pre-line;
    word-break: break-word;
}

.cchat-msg--bot {
    align-self: flex-start;
    background: var(--color-bg);
    color: var(--color-text);
}

.cchat-msg--user {
    align-self: flex-end;
    background: var(--color-bg-dark);
    color: var(--color-white);
}

/* botの発言に添える顔。ヘッダーの丸(56px)だけでは会話中に見落とされたため、
   会話の流れの中、毎回の返答の隣に表情が見える形にした */
.cchat-msg-row {
    display: flex;
    align-items: flex-start;
    /* .cchat-log は flex-column で既定 align-items:stretch のため、
       指定しないと行の幅が親いっぱいに伸びてしまう */
    align-self: flex-start;
    gap: 0.5rem;
    max-width: 92%;
}

/* botの発言に添える立ち姿。オープニング(.cchat-hero__figure)と同じ見せ方に揃える。
   丸(.cchat-face)と別系統にしているのは、丸の下地(#dbe6ef)や拡大(--face-zoom)を
   引き継ぐと、透過画像の背後に灰色の四角が出てしまうため。
   縁も付けない（透過画像に枠を付けると、人物ではなく箱に見える） */
.cchat-figure--msg {
    display: block;
    flex: 0 0 auto;
    /* 96px幅なら描画高は約151px。124pxで切ると、オープニング(116x150)とほぼ同じ
       「頭から胴体まで」の範囲になる */
    width: 96px;
    height: 124px;
    overflow: hidden;
    /* 下端が水平にスパッと切れて「輪切り」に見えるのを防ぐ。
       オープニングは下に余白があるので気にならないが、
       吹き出しの横で何度も繰り返されると悪目立ちする */
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.cchat-figure--msg img {
    width: 100%;
    height: auto;
    /* style.css の img{max-width:100%} と競合しないよう明示 */
    max-width: none;
    display: block;
}

.cchat-msg-row .cchat-msg--bot {
    /* 幅の制約は行(.cchat-msg-row)側で行うので、吹き出し自体は広げてよい */
    max-width: 100%;
    /* flexアイテムは既定で min-width:auto となり中身より縮まない。
       0にしないと長文のとき吹き出しが row の max-width(92%) を突き破る */
    min-width: 0;
}

/* ---------------------------------------------------------- 検索結果 */
.cchat-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* style.css の ul li::before（水色の四角）を、ここでは出さない */
.cchat-items li::before {
    content: none;
    display: none;
}

.cchat-items li {
    margin: 0;
    position: static;
}

.cchat-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-white);
    border: 1px solid #dbe2ea;
    border-left: 3px solid var(--color-accent);
    border-radius: var(--cchat-radius);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.cchat-item:hover {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    border-left-color: var(--color-accent);
    transform: translateX(2px);
}

.cchat-item__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-bg-dark);
    line-height: 1.5;
}

.cchat-item__cat {
    font-size: 0.7rem;
    color: var(--color-text-light);
    letter-spacing: 0.05em;
}

.cchat-item:hover .cchat-item__name,
.cchat-item:hover .cchat-item__cat {
    color: var(--color-white);
}

.cchat-item--link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-bg-dark);
}

.cchat-item--link:hover {
    color: var(--color-white);
}

/* ---------------------------------------------------------- 選択肢ボタン */
.cchat-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 0.75rem;
    flex: 0 0 auto;
}

.cchat-quick:empty {
    display: none;
}

.cchat-quick__btn {
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 100px;
    padding: 0.35rem 0.8rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-bg-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cchat-quick__btn:hover {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-white);
}

/* 「このページについて」。今いるページの話なので、他より目立たせる */
.cchat-quick__btn--primary {
    border-color: var(--color-bg-dark);
    border-width: 2px;
}

/* ---------------------------------------------------------- 入力欄 */
.cchat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e6ebf0;
    background: var(--color-white);
    flex: 0 0 auto;
}

.cchat-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--cchat-radius);
    font-family: var(--font-body);
    /* 16px 未満だと iOS がフォーカス時にページを勝手に拡大する */
    font-size: 16px;
    color: var(--color-text);
    background: var(--color-white);
}

.cchat-input:focus {
    outline: 2px solid var(--color-accent-hover);
    outline-offset: 1px;
    border-color: transparent;
}

.cchat-send {
    flex: 0 0 auto;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* アクセント色(#00d2ff)は白背景に対し 1.9:1 しかないので、
       その上に白文字・白アイコンは置かない。濃紺地に白で 16:1 を確保する */
    background: var(--color-bg-dark);
    color: var(--color-white);
    border: none;
    border-radius: var(--cchat-radius);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.cchat-send:hover {
    background: var(--color-accent-hover);
}

/* ---------------------------------------------------------- 補助 */
.cchat-sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cchat-fab:focus-visible,
.cchat-close:focus-visible,
.cchat-send:focus-visible,
.cchat-quick__btn:focus-visible,
.cchat-item:focus-visible {
    outline: 2px solid var(--color-accent-hover);
    outline-offset: 3px;
}

/* ---------------------------------------------------------- スマホ */
@media (max-width: 768px) {
    .cchat-fab {
        right: 20px;
        bottom: 20px;
        width: 56px;
        height: 56px;
    }

    body .page-top-btn.is-visible {
        bottom: 88px;
    }

    .cchat-panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 85dvh;
        border-radius: var(--cchat-radius) var(--cchat-radius) 0 0;
    }

    /* 縦長の写真が狭い画面を占有しないよう、初期表示でも小さく */
    .cchat-hero__figure {
        width: 92px;
        height: 120px;
    }

    /* スマホではパネルが画面をほぼ覆うので、背後のページは固定する。
       PCでは背後を読ませたいのでこの指定はしない */
    body.cchat-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cchat-fab,
    .cchat-item,
    .cchat-quick__btn,
    .cchat-close,
    .cchat-send {
        transition: none;
    }

    .cchat-fab:hover,
    .cchat-item:hover {
        transform: none;
    }
}