/* ガスペック AI相談チャット（2026-10-25 社内だけで試験表示）。読み込みは /include/gschat/gschat_live.php */
.gsc, .gsc * { box-sizing: border-box; }
.gsc { --gsc-navy: #0f3a66; --gsc-blue: #1059b5; --gsc-or: #f07818; --gsc-line: #dde5ee; --gsc-ink: #1f2d3a; --gsc-sub: #5b6670;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--gsc-ink); font-size: 15px; line-height: 1.7; -webkit-text-size-adjust: 100%; }
.gsc button { font-family: inherit; }

/* ---- 右下の呼び出しボタン ---- */
.gsc-open { position: fixed; right: 18px; bottom: 22px; z-index: 10045; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; }
.gsc-open__say { position: relative; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--gsc-navy); font-size: 14px; font-weight: 700; white-space: nowrap;
	box-shadow: 0 4px 14px rgba(15, 58, 102, .18); }
.gsc-open__say small { display: block; font-size: 11px; font-weight: 400; color: var(--gsc-sub); line-height: 1.3; }
.gsc-open__say::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: #fff; }
.gsc-open__ic { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 6px 18px rgba(15, 58, 102, .3); transition: transform .15s ease; }
.gsc-open__ic img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.gsc-open__ic::after { content: ""; position: absolute; right: 2px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: #2fb36d; border: 2px solid #fff; }
.gsc-open:hover .gsc-open__ic { transform: translateY(-2px); }
.gsc-open:focus-visible { outline: 3px solid #f59f00; outline-offset: 4px; border-radius: 999px; }
html.gsc-is-open .gsc-open { display: none; }

/* 見積りカゴのボタンはチャットの上へ（チャットがあるときだけ） */
html.gsc-on .gs-cart-chip { bottom: 104px !important; }
html.gsc-on .gs-cart-panel { bottom: 158px !important; }

/* ---- 窓 ---- */
.gsc-win { position: fixed; right: 18px; bottom: 22px; z-index: 10070; display: none; flex-direction: column; width: 390px; height: min(640px, calc(100vh - 44px)); overflow: hidden;
	border-radius: 16px; background: #f4f7fb; box-shadow: 0 14px 44px rgba(15, 40, 80, .32); }
html.gsc-is-open .gsc-win { display: flex; }
.gsc-hd { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 8px 10px 12px; background: var(--gsc-navy); color: #fff; }
.gsc-hd__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; }
.gsc-hd__ic img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.gsc-hd__t { flex: 1; min-width: 0; line-height: 1.35; }
.gsc-hd__t b { display: block; font-size: 15px; }
.gsc-hd__t small { display: block; font-size: 11.5px; color: #c9dcf2; }
.gsc-hd__t small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #4fd18b; vertical-align: 1px; }
.gsc-hd button { flex: none; display: flex; align-items: center; justify-content: center; height: 36px; min-width: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 12px; cursor: pointer; }
.gsc-hd button:hover { background: rgba(255, 255, 255, .14); }
.gsc-hd button svg { width: 20px; height: 20px; }

.gsc-log { position: relative; flex: 1; overflow-y: auto; padding: 14px 12px 6px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gsc-m { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.gsc-m__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.gsc-m__ic img { display: block; width: 100%; height: 100%; }
.gsc-m__b { max-width: calc(100% - 44px); padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid var(--gsc-line); word-break: break-word; overflow-wrap: anywhere; }
.gsc-m__b p { margin: 0 0 6px; }
.gsc-m__b p:last-child { margin-bottom: 0; }
.gsc-li { position: relative; margin: 2px 0; padding-left: 1.1em; }
.gsc-li::before { content: ""; position: absolute; left: .25em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: #7e9cc0; }
.gsc-li--2 { margin-left: 1.1em; }
.gsc-li--2::before { width: 5px; height: 5px; background: transparent; border: 1px solid #7e9cc0; }
.gsc-li--n { padding-left: 1.5em; }
.gsc-li--n::before { content: attr(data-n) "."; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; border: 0; color: #0b2e55; font-weight: 700; }
.gsc-li + p { margin-top: 6px; }
.gsc-m__b a { color: var(--gsc-blue); text-decoration: underline; }
.gsc-m__b b { color: #0b2e55; }
.gsc-m--u { justify-content: flex-end; }
.gsc-m--u .gsc-m__b { border: 0; border-radius: 14px 4px 14px 14px; background: var(--gsc-blue); color: #fff; white-space: pre-wrap; }
.gsc-m--note .gsc-m__b { background: #fff8ef; border-color: #f3d6b3; }

/* 考え中 */
.gsc-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.gsc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9db3cc; animation: gsc-b 1.1s infinite ease-in-out; }
.gsc-dots i:nth-child(2) { animation-delay: .15s; }
.gsc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gsc-b { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-5px); opacity: 1; } }

/* すぐ聞ける質問 */
.gsc-qs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px 38px; }
.gsc-qs button { padding: 6px 12px; border: 1px solid #b9cde4; border-radius: 999px; background: #fff; color: var(--gsc-blue); font-size: 13px; line-height: 1.4; cursor: pointer; }
.gsc-qs button:hover { background: #eaf2fc; }

.gsc-ft { flex: none; padding: 8px 10px 8px; background: #fff; border-top: 1px solid var(--gsc-line); }
.gsc-in { display: flex; align-items: flex-end; gap: 8px; }
.gsc-in textarea { flex: 1; min-height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid #c3cfdc; border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.5; resize: none; color: var(--gsc-ink); background: #fff; }
.gsc-in textarea:focus { outline: 0; border-color: var(--gsc-blue); box-shadow: 0 0 0 3px rgba(16, 89, 181, .15); }
.gsc-send { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--gsc-or); color: #fff; cursor: pointer; }
.gsc-send svg { width: 20px; height: 20px; }
.gsc-send[disabled] { background: #c9d2db; cursor: default; }
.gsc-note { margin: 6px 2px 0; font-size: 11px; line-height: 1.5; color: var(--gsc-sub); }
.gsc-note a { color: var(--gsc-sub); }
.gsc-again { display: block; width: 100%; height: 44px; border: 1px solid var(--gsc-blue); border-radius: 10px; background: #fff; color: var(--gsc-blue); font-size: 15px; font-weight: 700; cursor: pointer; }

/* ---- スマホ ---- */
@media (max-width: 767px) {
	.gsc-open { right: 10px; bottom: 84px; }	/* 下の固定の帯（見積り・電話）の上 */
	.gsc-open__ic { width: 56px; height: 56px; }
	.gsc-open__say { padding: 6px 11px; font-size: 13px; }
	.gsc-open__say small { display: none; }
	html.gsc-on .gs-cart-chip { bottom: 152px !important; }
	html.gsc-on .gs-cart-panel { bottom: 200px !important; }
	.gsc-win { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
	html.gsc-is-open, html.gsc-is-open body { overflow: hidden; }
	html.gsc-is-open .spn-bt, html.gsc-is-open .gs-cart-chip { visibility: hidden; }
}
@media print { .gsc { display: none !important; } }