@charset "UTF-8";

/* =========================
   HARADA SAKAN AI SEARCH CSS
   （無効値をすべて正しいCSSに修正済み）
   ========================= */

:root {
	--msai-primary: #2b5bd3;
	--msai-primary-hover: #1844a0;
	--msai-border: #dfe4f5;
	--msai-bg: rgba(253, 255, 255, 0.94);
	--msai-shadow: 0 15px 45px rgba(0, 0, 0, 0.18);
	--msai-radius: 12px;
}

/* main visual */
.mainVisual--with-ai {
	position: relative;
	overflow: hidden;
	height: calc(100vh - 80px);
	background: url(../img/mainVisual01_notext.png) no-repeat center center;
	background-size: cover;
}

/* overlay */
.ai-search-overlay {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: min(90%, 1100px);
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--msai-radius);
	box-shadow: var(--msai-shadow);
	padding: 16px 18px 12px;
	backdrop-filter: blur(4px);
	z-index: 10;
}

.ai-search-overlay::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.65);
	pointer-events: none;
}

/* title */
.msai-title {
	color: #1b1b1b;
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	margin: 2px 0 8px;
	letter-spacing: 0.02em;
}

/* ask area */
.msai-ask {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* checkboxes */
.msai-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 4px 0;
}

.msai-checkboxes__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f4f8ff;
	border: 1px solid var(--msai-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	color: #1b1b1b;
	cursor: pointer;
	transition:
		background 0.2s,
		border-color 0.2s,
		transform 0.2s;
}

.msai-checkboxes__item:hover {
	background: #eef1ff;
	border-color: #b4ccff;
	transform: translateY(-3px);
}

.msai-checkbox__input {
	accent-color: var(--msai-primary);
	cursor: pointer;
}

/* textarea + button */
.input-container {
	position: relative;
}

#user_input {
	width: 100%;
	border-radius: var(--msai-radius);
	border: 1px solid var(--msai-border);
	padding: 10px 44px 12px 12px;
	resize: vertical;
	min-height: 88px;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
	background: #fff;
}

#send-button {
	position: absolute;
	right: 8px;
	bottom: 10px;
	padding: 5px 9px;
	border: none;
	background: #e6efff;
	border-radius: 8px;
	cursor: pointer;
	transition:
		background 0.2s,
		transform 0.2s;
	z-index: 2;

	/* SVGが currentColor を参照しても確実に出るように */
	color: var(--msai-primary);
}

#send-button:hover:not(:disabled) {
	background: #d4e4ff;
	transform: translateY(-3px);
}

#send-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* icons */
#send-icon,
#loading-icon {
	stroke: currentColor; /* ← var依存をやめて確実に表示 */
}

/* spinner */
.animate-spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* status / error */
#loading-message {
	font-size: 11px;
	color: #2a5a7a;
	text-align: center;
}

#error-container {
	color: #c29998;
	font-size: 11px;
}

/* answer area */
.msai-answer {
	display: none;
	max-width: 1098px;
	margin: -44px auto 80px;
	background: #fff;
	border-radius: var(--msai-radius);
	box-shadow: var(--msai-shadow);
	padding: 20px 18px;
	position: relative;
	z-index: 1;
	border: 1px solid #e7edff;
}

.msai-answer.active {
	display: block;
}

.msai-answer.disabled {
	background: #f5f9ff;
	border-color: #d4e7ff;
}

/* chat container */
#chat-container {
	border: 1px solid #e3ebff;
	border-radius: 10px;
	padding: 14px 18px;
	min-height: 118px;
	max-height: 598px;
	overflow-y: auto;
	line-height: 1.6;
	color: #1b1b1b;
}

.chat-message {
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
}

.user-message {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.user-bubble {
	max-width: 100%;
	padding: 8px 13px;
	border-radius: 10px;
	background: #eef1ff;
	border: 1px solid #d6e4ff;
	word-break: break-word;
}

.user-loading-icon {
	width: 18px;
	height: 18px;
	display: none;
}

/* suggested question link */
.msai-question-link {
	display: inline-block;
	background: #f2f7ff;
	border: 1px solid #d9e5ff;
	border-radius: 8px;
	padding: 4px 10px;
	text-decoration: none;
	color: #2f3275;
	margin: 2px 0;
	font-size: 13px;
	transition:
		background 0.2s,
		border-color 0.2s;
}

.msai-question-link:hover {
	background: #e5eeff;
	border-color: #b4ccff;
}

/* links in chat */
#chat-container a {
	color: var(--msai-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		border-color 0.2s,
		color 0.2s;
}

#chat-container a:hover {
	color: var(--msai-primary-hover);
	border-bottom-color: var(--msai-primary-hover);
}

#chat-container ul,
#chat-container ol {
	margin: 10px 0 12px 18px;
}

/* disabled state */
.msai-ask.disabled .msai-checkboxes__item,
.msai-ask.disabled #user_input,
.msai-ask.disabled #send-button {
	pointer-events: none;
	opacity: 0.6;
}

/* SP */
@media (max-width: 765px) {
	.mainVisual--with-ai {
		height: calc(100vh - (55px + 43px));
	}

	.ai-search-overlay {
		width: calc(98% - 24px);
		top: auto;
		bottom: 20px;
		transform: translateX(-50%);
		padding: 12px 12px 10px;
	}

	.msai-title {
		font-size: 16px;
	}

	.msai-checkboxes__item {
		font-size: 11px;
	}

	.msai-answer {
		margin: -26px 12px 60px;
	}
}