@charset "utf-8";

/**
 * ai-assist.css
 * AIアシスタント（右下フローティングボタン + スライドインチャット）
 *
 * 構成:
 *   .ai-fab-group   … 右下の縦積みアクションボタン群
 *   .ai-panel       … 右からスライドインするチャットパネル
 *   .ai-overlay     … SP時のみ表示する背面オーバーレイ
 */

:root{
	--ai-accent: #4169E1;
	--ai-accent-weak: #f0f4ff;
	--ai-line: #e0e0e0;
	--ai-text: #000;
	--ai-muted: #707070;
	/* ウィンドウ幅の30%。
	   ★下限500px … これより狭いと本文が細く折り返され、読みにくくなる。
	     上限620px … 広いディスプレイで間延びしないため。
	   SPは全画面にするので、この値は使わない（下部のメディアクエリで上書き） */
	--ai-panel-w: clamp(500px, 30vw, 620px);
}

/* ===============================================================================
   フローティングボタン群
   =============================================================================== */

.ai-fab-group{position: fixed; right: 28px; bottom: 32px; z-index: 9000; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;}

/* 個々のアクションボタン（要約・チャット） */
.ai-fab{position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 9px; border: 1px solid var(--ai-line); border-radius: 26px; background: #fff; color: var(--ai-text); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .02em; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.10); transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background-color .25s, color .25s, border-color .25s; white-space: nowrap;}
.ai-fab:hover{transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.16);}
.ai-fab:active{transform: translateY(0);}
.ai-fab:focus-visible{outline: 2px solid var(--ai-accent); outline-offset: 3px;}

.ai-fab .ai-fab-icon{display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;}
.ai-fab .ai-fab-icon svg{width: 100%; height: 100%; display: block;}
.ai-fab .ai-fab-label{display: inline-flex; align-items: center; gap: 6px;}

/* ラベル先頭のきらめき。AIであることを一目で伝える */
.ai-fab .ai-fab-spark{display: inline-flex; width: 15px; height: 15px; flex-shrink: 0;}
.ai-fab .ai-fab-spark svg{width: 100%; height: 100%; display: block;}

/* アーコの顔。青地に沈まないよう白く抜く */
.ai-fab .ai-fab-face{display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #fff;}
.ai-fab .ai-fab-face img{width: 100%; height: 100%; display: block; object-fit: cover;}

/* チャットボタンはアクセントカラーで主役化 */
.ai-fab.is-primary{background: var(--ai-accent); border-color: var(--ai-accent); color: #fff; box-shadow: 0 6px 24px rgba(65,105,225,.34);}
.ai-fab.is-primary:hover{background: #3559d1; border-color: #3559d1; box-shadow: 0 10px 30px rgba(65,105,225,.42);}

/* 処理中のボタン */
.ai-fab.is-loading{pointer-events: none; opacity: .65;}
.ai-fab.is-loading .ai-fab-icon{animation: ai-spin .9s linear infinite;}

@keyframes ai-spin{to{transform: rotate(360deg);}}

/* パネルが開いている間はボタン群を退避させる */
.ai-fab-group.is-hidden{opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, visibility .25s, transform .25s;}

/* ===============================================================================
   オーバーレイ
   =============================================================================== */

.ai-overlay{position: fixed; inset: 0; z-index: 9400; background: rgba(0,0,0,.38); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;}
.ai-overlay.is-open{opacity: 1; visibility: visible;}

/* ===============================================================================
   チャットパネル
   =============================================================================== */

.ai-panel{position: fixed; top: 0; right: 0; z-index: 9500; width: var(--ai-panel-w); max-width: 100%; height: 100%; height: 100dvh; background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.14); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.9,.28,1); visibility: hidden;}
.ai-panel.is-open{transform: translateX(0); visibility: visible;}

/* ヘッダー */
.ai-panel-header{display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid var(--ai-line); flex-shrink: 0;}
.ai-panel-header .ai-panel-mark{display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ai-accent-weak); flex-shrink: 0; overflow: hidden;}
.ai-panel-header .ai-panel-mark svg{width: 19px; height: 19px; display: block;}
.ai-panel-header .ai-panel-mark img{width: 100%; height: 100%; display: block; object-fit: cover;}
.ai-panel-header .ai-panel-title{flex: 1; min-width: 0;}
.ai-panel-header .ai-panel-title h2{font-size: 15px; font-weight: 700; line-height: 140%; margin: 0; letter-spacing: .04em;}
.ai-panel-header .ai-panel-title .ai-panel-sub{font-size: 11px; color: var(--ai-muted); margin-left: 6px;}
.ai-panel-header .ai-panel-title p{font-size: 11px; line-height: 140%; color: var(--ai-muted); margin: 2px 0 0;}

.ai-panel-close{display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; cursor: pointer; flex-shrink: 0; transition: background-color .2s;}
.ai-panel-close:hover{background: #f2f2f2;}
.ai-panel-close:focus-visible{outline: 2px solid var(--ai-accent); outline-offset: 2px;}
.ai-panel-close svg{width: 14px; height: 14px; display: block;}

/* 本文（スクロール領域） */
.ai-panel-body{flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 8px; -webkit-overflow-scrolling: touch;}

/* ===============================================================================
   メッセージ
   =============================================================================== */

.ai-msg{display: flex; margin: 0 0 24px;}

/* ★吹き出し同士が詰まって見えたため間隔を広げた。
   AI側はアバターの分だけ左にあり、利用者の吹き出しと近く感じる */
.ai-msg:last-child{margin-bottom: 0;}

/* アーコのアイコン。表情は回答内容に合わせて切り替わる */
.ai-avatar{width: 42px; height: 42px; flex-shrink: 0; margin: 0 10px 0 0; border-radius: 50%; overflow: hidden; background: var(--ai-accent-weak);}
.ai-avatar img{width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 1 / 1;}

/* アイコンの右側。吹き出しとカードが縦に積まれる */
.ai-msg-main{flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;}

.ai-msg-bubble{max-width: 88%; padding: 13px 16px; font-size: 14px; line-height: 178%; font-weight: 500; border-radius: 14px; word-break: break-word;}

/* AI側 */
.ai-msg.is-ai{justify-content: flex-start;}
.ai-msg.is-ai .ai-msg-bubble{background: #f5f6f8; color: var(--ai-text); border-top-left-radius: 4px; max-width: 100%;}

/* ユーザー側 */
.ai-msg.is-user{justify-content: flex-end;}
.ai-msg.is-user .ai-msg-bubble{background: var(--ai-accent); color: #fff; border-top-right-radius: 4px;}

/* 問い合わせへの導線。本文中にリンクとして現れる */
/* サイト内ページへの案内 */
.ai-page-link,
.ai-page-link:link,
.ai-page-link:visited{color: var(--ai-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;}
.ai-page-link:hover{color: #3559d1; opacity: 1;}

.ai-contact-link,
.ai-contact-link:link,
.ai-contact-link:visited{color: var(--ai-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;}
.ai-contact-link:hover{color: #3559d1; opacity: 1;}

/* 入力中インジケーター */
.ai-typing{display: flex; align-items: center; gap: 5px; padding: 16px;}
.ai-typing span{width: 7px; height: 7px; border-radius: 50%; background: #b8bcc4; animation: ai-bounce 1.3s ease-in-out infinite;}
.ai-typing span:nth-child(2){animation-delay: .16s;}
.ai-typing span:nth-child(3){animation-delay: .32s;}

@keyframes ai-bounce{
	0%, 60%, 100%{transform: translateY(0); opacity: .45;}
	30%{transform: translateY(-5px); opacity: 1;}
}

/* ===============================================================================
   相談文の下書き（問い合わせへの導線）
   =============================================================================== */

.ai-draft{border: 1px solid var(--ai-accent); border-radius: 12px; padding: 16px; margin: 0 0 18px 52px; background: var(--ai-accent-weak); animation: ai-rise .42s cubic-bezier(.2,.8,.3,1) both;}

/* 下から持ち上がるように現れる。会話の流れの中で出てきた感を出す */
@keyframes ai-rise{
	from{opacity: 0; transform: translateY(10px);}
	to{opacity: 1; transform: translateY(0);}
}

.ai-draft-head{display: flex; align-items: center; gap: 7px; padding: 0 0 11px; border-bottom: 1px solid rgba(65,105,225,.18); margin: 0 0 12px;}
.ai-draft-head svg{width: 15px; height: 15px; display: block; flex-shrink: 0;}
.ai-draft-head h3{font-size: 12px; font-weight: 700; line-height: 1.4; margin: 0; letter-spacing: .04em;}

.ai-draft-body{font-size: 13px; line-height: 180%; font-weight: 500; color: var(--ai-text); background: #fff; border-radius: 8px; padding: 13px 15px; margin: 0 0 13px;}

/* ★:link/:visited を付けているのは、サイト共通CSS（default.css）の
   a:link{color:#000} に詳細度で負けて文字が黒くなるため */
.ai-draft-btn,
.ai-draft-btn:link,
.ai-draft-btn:visited{display: block; text-align: center; background: var(--ai-accent); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1; text-decoration: none; border-radius: 22px; padding: 14px 20px; transition: background-color .2s, transform .2s;}
.ai-draft-btn:hover{background: #3559d1; color: #fff; transform: translateY(-1px); opacity: 1;}
.ai-draft-btn:focus-visible{outline: 2px solid var(--ai-accent); outline-offset: 3px;}

.ai-draft-note{font-size: 10.5px; line-height: 150%; color: var(--ai-muted); text-align: center; margin: 9px 0 0;}

/* ===============================================================================
   事例カード（AI回答に添える提案）
   =============================================================================== */

.ai-cards{display: flex; flex-direction: column; gap: 9px; margin: 11px 0 0; padding: 0 0 0 2px; width: 100%;}

.ai-card,
.ai-card:link,
.ai-card:visited{display: flex; align-items: flex-start; gap: 12px; padding: 11px; border: 1px solid var(--ai-line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--ai-text); transition: border-color .2s, box-shadow .2s, transform .2s;}
.ai-card:hover{border-color: var(--ai-accent); box-shadow: 0 4px 16px rgba(65,105,225,.14); transform: translateY(-1px);}

/* ★既存サイトの a:hover が透過をかけてくる。枠と浮きだけで十分なので打ち消す */
.ai-card:hover,
.ai-card:hover img,
.ai-card:hover .ai-card-img{opacity: 1;}
.ai-card .ai-card-img{width: 88px; height: 60px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #f2f2f2;}
.ai-card .ai-card-img.is-empty{background: var(--ai-accent-weak);}
.ai-card .ai-card-img img{width: 100%; height: 100%; object-fit: cover; display: block;}
.ai-card .ai-card-text{flex: 1; min-width: 0;}
.ai-card .ai-card-text h4{font-size: 12.5px; font-weight: 700; line-height: 148%; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.ai-card .ai-card-text p{font-size: 11px; line-height: 155%; font-weight: 500; color: var(--ai-muted); margin: 5px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* ===============================================================================
   入力フォーム
   =============================================================================== */

.ai-panel-footer{flex-shrink: 0; padding: 14px 20px 18px; border-top: 1px solid var(--ai-line); background: #fff;}

.ai-form{display: flex; align-items: flex-end; gap: 9px; border: 1px solid var(--ai-line); border-radius: 22px; padding: 7px 7px 7px 16px; transition: border-color .2s;}
.ai-form:focus-within{border-color: var(--ai-accent);}

.ai-form textarea{flex: 1; min-width: 0; border: none; outline: none; resize: none; font-size: 14px; line-height: 165%; font-weight: 500; color: var(--ai-text); background: transparent; max-height: 132px; padding: 6px 0;}
.ai-form textarea::placeholder{color: #a8adb6;}

/* ★Enterでは送信されないため、押す先はこのボタンだけ。
   入力があるときは少し拡大して、押せることが分かるようにする */
.ai-form-send{display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--ai-accent); cursor: pointer; transition: background-color .2s, transform .2s, opacity .2s;}
.ai-form-send:hover{background: #3559d1; transform: scale(1.06);}
.ai-form-send:disabled{background: #d5d8dd; cursor: default; transform: none;}
.ai-form-send:focus-visible{outline: 2px solid var(--ai-accent); outline-offset: 2px;}
.ai-form-send svg{width: 16px; height: 16px; display: block;}

.ai-panel-note{font-size: 10.5px; line-height: 150%; color: var(--ai-muted); text-align: center; margin: 10px 0 0;}

/* ===============================================================================
   SP
   =============================================================================== */

@media screen and (max-width: 767px){
	.ai-fab-group{right: 14px; bottom: 16px; gap: 10px;}

	/* ラベルを出すと画面幅を超えるため、SPでは円形のアイコンボタンにする。
	   ラベルは読み上げ用に残す（視覚的にだけ隠す） */
	.ai-fab{width: 62px; height: 62px; padding: 0; justify-content: center; border-radius: 50%; gap: 0;}
	.ai-fab .ai-fab-icon{width: 22px; height: 22px;}
	.ai-fab .ai-fab-face{width: 46px; height: 46px;}
	.ai-fab .ai-fab-label{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;}

	.ai-panel-body{padding: 18px 16px 8px;}
	.ai-panel-footer{padding: 12px 16px 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom));}
	.ai-msg-bubble{max-width: 92%;}
}

/* ★パネルを全画面にする境界は、FABの円形化（767px）とは別に置く。
   下限500pxのパネルが載ると、900px以下では背面がほとんど残らず
   中途半端な見え方になるため、そこまでは全画面にしてしまう */
@media screen and (max-width: 900px){
	.ai-panel{--ai-panel-w: 100%; width: 100%;}
}

/* スクロールバーを控えめに */
.ai-panel-body::-webkit-scrollbar{width: 6px;}
.ai-panel-body::-webkit-scrollbar-thumb{background: #d8dade; border-radius: 3px;}
.ai-panel-body::-webkit-scrollbar-track{background: transparent;}

/* モーション設定を尊重 */
@media (prefers-reduced-motion: reduce){
	.ai-panel, .ai-fab, .ai-overlay, .ai-card{transition: none;}
	.ai-typing span, .ai-fab.is-loading .ai-fab-icon{animation: none;}
	.ai-draft{animation: none;}
}