/**
 * chatbot.css
 * AssisTrust チャットボット「トラ」スタイル
 */

/* ============================================================
   変数
   ============================================================ */
:root {
	--chat-primary    : #3d62a0;
	--chat-primary-dk : #2e4d80;
	--chat-white      : #ffffff;
	--chat-bg         : #f7f8fa;
	--chat-border     : #e0e4ea;
	--chat-user-bg    : #e8eef7;
	--chat-bot-bg     : #ffffff;
	--chat-text       : #333333;
	--chat-text-light : #666666;
	--chat-shadow     : 0 4px 24px rgba(0, 0, 0, 0.14);
	--chat-radius     : 16px;
	--chat-btn-size   : 64px;
	--chat-w          : 400px;
	--chat-h          : 600px;
	--chat-z          : 9999;
}

/* ============================================================
   フローティングボタン
   ============================================================ */
.assistrust-chat-btn {
	position   : fixed;
	right      : 24px;
	bottom     : 24px;
	z-index    : var(--chat-z);
	height     : var(--chat-btn-size);
	padding    : 0 20px 0 16px;
	border-radius : 9999px;
	background : var(--chat-primary);
	color      : var(--chat-white);
	border     : none;
	cursor     : pointer;
	display    : flex;
	align-items    : center;
	justify-content: center;
	gap        : 8px;
	box-shadow : var(--chat-shadow);
	transition : transform 0.2s ease, background 0.2s ease;
	white-space: nowrap;
}

.assistrust-chat-btn:hover {
	background : var(--chat-primary-dk);
	transform  : scale(1.03);
}

.assistrust-chat-btn__text {
	font-size  : 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ============================================================
   チャットウィンドウ
   ============================================================ */
.assistrust-chat-window {
	position   : fixed;
	right      : 24px;
	bottom     : 100px;
	z-index    : var(--chat-z);
	width      : var(--chat-w);
	height     : var(--chat-h);
	max-height : 80vh;
	background : var(--chat-white);
	border-radius : var(--chat-radius);
	box-shadow : var(--chat-shadow);
	display    : flex;
	flex-direction : column;
	overflow   : hidden;

	/* 初期状態: 非表示 */
	opacity    : 0;
	transform  : translateY(16px) scale(0.97);
	pointer-events : none;
	transition : opacity 0.25s ease, transform 0.25s ease;
}

.assistrust-chat-window.is-open {
	opacity        : 1;
	transform      : translateY(0) scale(1);
	pointer-events : auto;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.assistrust-chat-header {
	background    : var(--chat-primary);
	color         : var(--chat-white);
	padding       : 14px 16px;
	display       : flex;
	align-items   : center;
	justify-content: space-between;
	flex-shrink   : 0;
}

.assistrust-chat-title {
	font-size   : 15px;
	font-weight : 600;
	letter-spacing : 0.03em;
}

.assistrust-chat-close {
	background  : transparent;
	border      : none;
	color       : var(--chat-white);
	font-size   : 18px;
	cursor      : pointer;
	line-height : 1;
	padding     : 0 4px;
	opacity     : 0.8;
	transition  : opacity 0.2s;
}

.assistrust-chat-close:hover {
	opacity : 1;
}

/* ============================================================
   メッセージエリア
   ============================================================ */
.assistrust-chat-messages {
	flex       : 1;
	overflow-y : auto;
	padding    : 16px;
	background : var(--chat-bg);
	display    : flex;
	flex-direction : column;
	gap        : 10px;
	scroll-behavior : smooth;
}

/* スクロールバー */
.assistrust-chat-messages::-webkit-scrollbar { width: 4px; }
.assistrust-chat-messages::-webkit-scrollbar-track { background: transparent; }
.assistrust-chat-messages::-webkit-scrollbar-thumb { background: var(--chat-border); border-radius: 2px; }

/* ============================================================
   メッセージ吹き出し
   ============================================================ */
.assistrust-msg {
	display        : flex;
	max-width      : 85%;
}

.assistrust-msg--user {
	align-self     : flex-end;
	flex-direction : row-reverse;
}

.assistrust-msg--assistant {
	align-self : flex-start;
}

.assistrust-msg__bubble {
	padding       : 10px 14px;
	border-radius : 12px;
	font-size     : 14px;
	line-height   : 1.6;
	word-break    : break-word;
}

.assistrust-msg--user .assistrust-msg__bubble {
	background    : var(--chat-primary);
	color         : var(--chat-white);
	border-bottom-right-radius : 4px;
}

.assistrust-msg--assistant .assistrust-msg__bubble {
	background    : var(--chat-bot-bg);
	color         : var(--chat-text);
	border        : 1px solid var(--chat-border);
	border-bottom-left-radius : 4px;
}

/* ============================================================
   ローディング（3点ドット）
   ============================================================ */
.assistrust-msg__bubble--loading {
	display    : flex;
	gap        : 4px;
	align-items: center;
	padding    : 12px 16px;
}

.assistrust-msg__bubble--loading span {
	display       : block;
	width         : 7px;
	height        : 7px;
	border-radius : 50%;
	background    : var(--chat-border);
	animation     : assistrust-bounce 1.2s infinite ease-in-out;
}

.assistrust-msg__bubble--loading span:nth-child(1) { animation-delay: 0s; }
.assistrust-msg__bubble--loading span:nth-child(2) { animation-delay: 0.2s; }
.assistrust-msg__bubble--loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes assistrust-bounce {
	0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
	40%            { transform: scale(1.2); opacity: 1; }
}

/* ============================================================
   クロージングリンク
   ============================================================ */
.assistrust-closing {
	display        : flex;
	flex-direction : column;
	gap            : 8px;
	margin-top     : 4px;
	align-self     : flex-start;
	width          : 100%;
}

.assistrust-closing__btn {
	display        : block;
	padding        : 10px 14px;
	border-radius  : 8px;
	font-size      : 13px;
	font-weight    : 600;
	text-align     : center;
	text-decoration: none;
	transition     : opacity 0.2s;
}

.assistrust-closing__btn:hover {
	opacity : 0.85;
}

.assistrust-closing__btn--form {
	background : var(--chat-primary);
	color      : var(--chat-white);
}

.assistrust-closing__btn--line {
	background : #06c755;
	color      : var(--chat-white);
}

/* ============================================================
   入力エリア
   ============================================================ */
.assistrust-chat-input-wrap {
	display     : flex;
	align-items : flex-end;
	gap         : 8px;
	padding     : 10px 12px;
	border-top  : 1px solid var(--chat-border);
	background  : var(--chat-white);
	flex-shrink : 0;
}

.assistrust-chat-input {
	flex        : 1;
	resize      : none;
	border      : 1px solid var(--chat-border);
	border-radius : 8px;
	padding     : 8px 12px;
	font-size   : 14px;
	line-height : 1.5;
	color       : var(--chat-text);
	background  : var(--chat-bg);
	min-height  : 38px;
	max-height  : 120px;
	overflow-y  : auto;
	transition  : border-color 0.2s;
	font-family : inherit;
}

.assistrust-chat-input:focus {
	outline      : none;
	border-color : var(--chat-primary);
}

.assistrust-chat-send {
	flex-shrink  : 0;
	width        : 38px;
	height       : 38px;
	border-radius: 8px;
	background   : var(--chat-primary);
	color        : var(--chat-white);
	border       : none;
	cursor       : pointer;
	display      : flex;
	align-items  : center;
	justify-content: center;
	transition   : background 0.2s;
}

.assistrust-chat-send:hover {
	background : var(--chat-primary-dk);
}

.assistrust-chat-send:disabled {
	opacity : 0.5;
	cursor  : not-allowed;
}

/* ============================================================
   レスポンシブ（スマホ）
   ============================================================ */
@media (max-width: 767px) {
	.assistrust-chat-window {
		right         : 0;
		bottom        : 0;
		width         : 100%;
		height        : 80vh;
		border-radius : var(--chat-radius) var(--chat-radius) 0 0;
		max-height    : 80vh;
	}

	.assistrust-chat-btn {
		right   : 16px;
		bottom  : 16px;
		padding : 0 16px 0 14px;
		gap     : 6px;
	}

	.assistrust-chat-btn__text {
		font-size : 12px;
	}
}