/*
 * karte ご案内チャット：見た目（PC・スマホ）
 * 値は input/chatbot/ の ChatPanel.dc.html / Chat-PC.dc.html / Chat-SP.dc.html のインラインスタイルに合わせている。
 * Astra・Elementorのボタン・入力欄の既定スタイルに負けないよう、.mw-chat-root 配下で指定している。
 */

.mw-chat-root {
	--mwc-accent: #1B3560;
	--mwc-accent-hover: #102243;
	--mwc-ink: #232733;
	--mwc-muted: #6B7488;
	--mwc-line: #E3E8F0;
	--mwc-line2: #DCE3EE;
	--mwc-bg: #F3F6FA;
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: var(--mwc-ink);
	-webkit-font-smoothing: antialiased;
}
.mw-chat-root *, .mw-chat-root *::before, .mw-chat-root *::after { box-sizing: border-box; }
.mw-chat-root button, .mw-chat-root input { font-family: inherit; letter-spacing: 0; text-transform: none; }
.mw-chat-root button:focus-visible, .mw-chat-root input:focus-visible, .mw-chat-root a:focus-visible, .mw-chat-root .mw-chat-log:focus-visible {
	outline: 3px solid #7FA6E0;
	outline-offset: 2px;
}
.mw-chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 呼び出しボタン ---------- */
.mw-chat-root .mw-chat-launcher {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 64px;
	margin: 0;
	padding: 0 24px 0 20px;
	border: 0;
	border-radius: 32px;
	background: var(--mwc-accent);
	box-shadow: 0 8px 24px rgba(14, 26, 48, .3);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .2s, opacity .15s;
}
.mw-chat-root .mw-chat-launcher:hover { background: var(--mwc-accent-hover); }
.mw-chat-root .mw-chat-launcher svg { flex: 0 0 auto; }
.mw-chat-root .mw-chat-launcher-text { font-size: 15px; font-weight: 700; line-height: 1.2; color: #FFFFFF; white-space: nowrap; }

/* ---------- パネル ---------- */
.mw-chat-root .mw-chat-panel {
	position: fixed;
	right: 28px;
	bottom: 112px;
	z-index: 99991;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 580px;
	max-height: calc(100vh - 132px);
	max-height: calc(100dvh - 132px);
	overflow: hidden;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 12px 32px rgba(14, 26, 48, .28);
}
.mw-chat-root .mw-chat-panel[hidden] { display: none; }

.mw-chat-root .mw-chat-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	padding: 0 12px 0 18px;
	background: var(--mwc-accent);
}
.mw-chat-root .mw-chat-headtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mw-chat-root .mw-chat-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: #FFFFFF; }
.mw-chat-root .mw-chat-sub { font-size: 11px; line-height: 1.4; color: #C6D0E0; }
.mw-chat-root .mw-chat-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.mw-chat-root .mw-chat-log {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--mwc-bg);
}
.mw-chat-root .mw-chat-msg { display: flex; flex-direction: column; gap: 8px; }
.mw-chat-root .mw-chat-msg.is-bot { align-items: flex-start; }
.mw-chat-root .mw-chat-msg.is-user { align-self: flex-end; max-width: 80%; }
.mw-chat-root .mw-chat-bubble { font-size: 14px; color: var(--mwc-ink); overflow-wrap: anywhere; }
.mw-chat-root .is-bot .mw-chat-bubble {
	max-width: 86%;
	padding: 12px 14px;
	border: 1px solid var(--mwc-line2);
	border-radius: 4px 14px 14px 14px;
	background: #FFFFFF;
	line-height: 1.85;
	white-space: pre-line;
}
.mw-chat-root .is-user .mw-chat-bubble {
	padding: 11px 14px;
	border-radius: 14px 4px 14px 14px;
	background: var(--mwc-accent);
	line-height: 1.8;
	color: #FFFFFF;
}
.mw-chat-root a.mw-chat-link {
	padding: 2px 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--mwc-accent);
	text-decoration: underline;
}
.mw-chat-root a.mw-chat-link:hover { color: var(--mwc-accent-hover); }
.mw-chat-root .mw-chat-choices { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.mw-chat-root .mw-chat-btn {
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--mwc-accent);
	border-radius: 20px;
	background: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--mwc-accent);
	text-align: left;
	cursor: pointer;
	transition: background-color .15s;
}
.mw-chat-root .mw-chat-btn:hover { background: #EEF2F8; color: var(--mwc-accent); border-color: var(--mwc-accent); }
.mw-chat-root .mw-chat-btn.is-primary { background: var(--mwc-accent); font-weight: 700; color: #FFFFFF; }
.mw-chat-root .mw-chat-btn.is-primary:hover { background: var(--mwc-accent-hover); color: #FFFFFF; }

.mw-chat-root .mw-chat-foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--mwc-line);
	background: #FFFFFF;
}
.mw-chat-root .mw-chat-row { display: flex; align-items: center; gap: 8px; }
.mw-chat-root .mw-chat-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #C5D0E2;
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: none;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mwc-ink);
}
.mw-chat-root .mw-chat-input:focus { border-color: var(--mwc-accent); box-shadow: none; background: #FFFFFF; }
.mw-chat-root .mw-chat-input::placeholder { color: #8A93A5; opacity: 1; }
.mw-chat-root .mw-chat-send {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: var(--mwc-accent);
	cursor: pointer;
}
.mw-chat-root .mw-chat-send:hover { background: var(--mwc-accent-hover); }
.mw-chat-root .mw-chat-note { font-size: 11px; line-height: 1.6; color: var(--mwc-muted); }

/* ---------- ページ最下部の余白：フッターの文字・ボタンが呼び出しボタンに隠れないようにする ---------- */
body.monowa-chat .mw-footer { padding-bottom: 120px; }

/* ---------- スマートフォン（〜767px。390px幅で確認） ---------- */
@media (max-width: 767px) {
	.mw-chat-root .mw-chat-launcher {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		height: 48px;
		gap: 8px;
		padding: 0 16px 0 14px;
		border-radius: 24px;
	}
	.mw-chat-root .mw-chat-launcher svg { width: 22px; height: 22px; }
	.mw-chat-root .mw-chat-launcher-text { font-size: 14px; }
	/* 問い合わせバンド・フッターが下端に来ている間は隠す（JSが is-away を付ける） */
	.mw-chat-root.is-away .mw-chat-launcher { opacity: 0; visibility: hidden; pointer-events: none; }
	/* パネルを開いている間は、パネルの「×」で閉じるので、呼び出しボタンは隠す */
	.mw-chat-root.is-open .mw-chat-launcher { opacity: 0; visibility: hidden; pointer-events: none; }

	.mw-chat-root .mw-chat-panel {
		z-index: 100000; /* 全画面で開くので、ログイン中に出るWordPressの管理バー（99999）より前に出す */
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
	}
	.mw-chat-root .mw-chat-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
	/* iPhoneは、16px未満の入力欄をタップすると画面が拡大されるため、16pxにする */
	.mw-chat-root .mw-chat-input { font-size: 16px; }
	body.monowa-chat .mw-footer { padding-bottom: calc(28px + 88px + env(safe-area-inset-bottom, 0px)); }
}

/* パネルを全画面で開いている間、背面のページをスクロールさせない */
@media (max-width: 767px) {
	html.mw-chat-lock, html.mw-chat-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.mw-chat-root .mw-chat-launcher, .mw-chat-root .mw-chat-btn { transition: none; }
}
@media print {
	.mw-chat-root { display: none; }
}