/**
 * CIHWEB AIコンシェルジュ（チャットUI）
 * public/cihc.css
 * PC：右下フローティング 400×最大660px。スマホ：小さめカード（画面を隠さない）。
 */

#cihc-root { position: fixed; right: 18px; bottom: 18px; z-index: 99990; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }

/* ── FAB：ピル型＋通知ドット＋ふわっと浮くアニメ ── */
.cihc-fab { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 28px;
	background: linear-gradient(135deg, #1e40af, #2563eb); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
	box-shadow: 0 6px 20px rgba(30,64,175,.45); animation: cihc-float 3s ease-in-out infinite; }
.cihc-fab:hover { filter: brightness(1.08); }
.cihc-fab-ico { font-size: 18px; }
.cihc-fab-txt { white-space: nowrap; }
.cihc-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff;
	animation: cihc-pulse 1.6s ease-out infinite; }
.cihc-fab-open .cihc-dot { display: none; }
@keyframes cihc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cihc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ── パネル ── */
.cihc-panel { position: fixed; right: 18px; bottom: 84px; width: 400px; max-width: calc(100vw - 24px);
	height: 620px; max-height: min(82vh, 680px); display: flex; flex-direction: column;
	background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 44px rgba(0,0,0,.28); }

/* ヘッダー */
.cihc-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: linear-gradient(135deg, #1e40af, #2563eb); color: #fff; }
.cihc-title { flex: 1; font-size: 15px; letter-spacing: .02em; }
.cihc-title b { font-weight: 800; }
.cihc-x { border: 0; border-radius: 50%; width: 36px; height: 36px; background: rgba(255,255,255,.22); color: #fff;
	font-size: 22px; line-height: 1; cursor: pointer; padding: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.cihc-x:hover { background: rgba(255,255,255,.35); }

/* 会話ログ */
.cihc-log { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fc; }
.cihc-msg { display: flex; }
.cihc-ai { justify-content: flex-start; }
.cihc-user { justify-content: flex-end; }
.cihc-bubble { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.65; white-space: normal; word-break: break-word; }
.cihc-ai .cihc-bubble { background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; color: #1a202c; }
.cihc-user .cihc-bubble { background: #2563eb; color: #fff; border-bottom-right-radius: 4px; }
.cihc-link { color: #2563eb; font-weight: 700; text-decoration: none; }
.cihc-user .cihc-link { color: #fff; text-decoration: underline; }

/* アクションボタン（会員登録・ログイン）。 */
.cihc-actions { gap: 8px; flex-wrap: wrap; }
.cihc-act { display: inline-block; padding: 9px 14px; border-radius: 20px; font-size: 13.5px; font-weight: 700; text-decoration: none;
	background: #fff; border: 1.5px solid #2563eb; color: #2563eb !important; }
.cihc-act-primary { background: #22c55e; color: #fff !important; border-color: #22c55e; }
.cihc-act:hover { filter: brightness(1.06); }

/* クイックボタン */
.cihc-quick { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: hidden; overflow-y: auto; max-height: 108px; padding: 8px 10px; background: #fff; border-top: 1px solid #edf2f7; scrollbar-width: thin; }
.cihc-qbtn { flex: 0 0 auto; border: 1px solid #cbd5e0; background: #f7fafc; color: #234 !important; border-radius: 16px; padding: 7px 12px;
	font-size: 12.5px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.cihc-qbtn:hover { background: #ebf2ff; border-color: #93b4f7; }

/* 入力欄 */
.cihc-in { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #e2e8f0; }
.cihc-in input { flex: 1; border: 1.5px solid #cbd5e0; border-radius: 22px; padding: 11px 16px; font-size: 15px; outline: none; min-width: 0; }
.cihc-in input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.cihc-send { border: 0; border-radius: 50%; width: 44px; height: 44px; background: #1e40af; color: #fff; font-size: 17px; cursor: pointer; flex: 0 0 auto; }
.cihc-send:hover { background: #17357f; }

/* 左配置オプション */
.cihc-left { right: auto; left: 18px; }
.cihc-left .cihc-panel { right: auto; left: 18px; }

/* ── スマホ ── */
@media (max-width: 640px) {
	.cihc-panel { position: fixed; inset: auto; left: 10px; right: 10px; bottom: 76px; top: auto;
		width: auto; max-width: none; height: auto; max-height: min(66vh, 480px); border-radius: 16px; }
	.cihc-hd { padding: 9px 10px; }
	.cihc-title { font-size: 13px; }
	.cihc-log { padding: 10px; gap: 8px; }
	.cihc-bubble { font-size: 13.5px; padding: 8px 11px; line-height: 1.55; }
	.cihc-quick { max-height: 76px; padding: 6px 8px; }
	.cihc-quick button { font-size: 12px; padding: 5px 9px; }
	.cihc-in { padding: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.cihc-in input { padding: 9px 13px; font-size: 14px; }
	.cihc-send { width: 38px; height: 38px; font-size: 15px; }
	.cihc-x { width: 34px; height: 34px; font-size: 22px; background: #fff; color: #1e40af; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
	.cihc-x:hover { background: #fff; }
	.cihc-fab-txt { font-size: 14px; }
}
@media (max-width: 640px) and (max-height: 700px) {
	.cihc-panel { max-height: 58vh; bottom: 70px; }
}

/* ── 一言バブル ── */
.cihc-peek {
	position: absolute; right: 0; bottom: 64px; z-index: 2;
	display: flex; align-items: center; gap: 8px;
	max-width: 230px; padding: 10px 12px;
	background: #fff; color: #22314d; font-size: 13.5px; line-height: 1.4;
	border: 1px solid #dbe3ef; border-radius: 14px 14px 4px 14px;
	box-shadow: 0 6px 20px rgba(20,40,80,.16);
	cursor: pointer; animation: cihc-peek-in .28s ease-out both;
}
.cihc-left .cihc-peek { right: auto; left: 0; border-radius: 14px 14px 14px 4px; }
.cihc-peek-txt { flex: 1; }
.cihc-peek-x { flex: none; width: 20px; height: 20px; padding: 0; line-height: 18px;
	border: 0; border-radius: 50%; background: #eef2f8; color: #7385a3; font-size: 14px; cursor: pointer; }
.cihc-peek-x:hover { background: #e2e8f2; color: #48597a; }
@keyframes cihc-peek-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cihc-nudge { animation: cihc-nudge 1.1s ease-in-out 2; }
@keyframes cihc-nudge {
	0%,100% { transform: none; }
	20% { transform: translateY(-5px); }
	40% { transform: translateY(0); }
	60% { transform: translateY(-2px); }
	80% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.cihc-nudge { animation: none; }
	.cihc-peek { animation: none; }
}

/* ── ショートコード[cih_concierge_faq]用のFAQ一覧 ── */
.cihc-faq-list { margin: 1em 0; }
.cihc-faq-item { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; margin: 10px 0; background: #fff; }
.cihc-faq-q { margin: 0 0 6px; font-size: 1.05em; color: #1e40af; }
.cihc-faq-a { line-height: 1.7; color: #333; }