.atr-chat {
	--atr-chat-accent: #1E7F8C;
	--atr-chat-accent-text: #fff;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99990;
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.atr-chat *, .atr-chat *::before, .atr-chat *::after { box-sizing: border-box; }

.atr-chat-toggle {
	display: block;
	margin-left: auto;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--atr-chat-accent);
	color: var(--atr-chat-accent-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.atr-chat.is-open .atr-chat-toggle,
.atr-chat.has-trigger .atr-chat-toggle { display: none; }

.atr-chat-panel {
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 32px);
	background: #fff;
	color: #1d1d1f;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.atr-chat-panel[hidden] { display: none; }

.atr-chat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--atr-chat-accent);
	color: var(--atr-chat-accent-text);
	font-weight: 600;
}
.atr-chat-close {
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.atr-chat-log {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	background: #f4f5f7;
}
.atr-chat-msg {
	max-width: 88%;
	margin: 0 0 10px;
	padding: 9px 12px;
	border-radius: 12px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.atr-chat-bot { background: #fff; border: 1px solid #e1e3e8; }
.atr-chat-user { margin-left: auto; background: var(--atr-chat-accent); color: var(--atr-chat-accent-text); }
.atr-chat-thinking { opacity: .6; font-style: italic; }
.atr-chat-msg a { color: var(--atr-chat-accent); font-weight: 600; text-decoration: underline; }

.atr-chat-cards { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.atr-chat-card { padding: 10px 12px; background: #fff; border: 1px solid #e1e3e8; border-radius: 10px; }
.atr-chat-card.is-soldout { background: #fafafa; }
.atr-chat-card-name { font-weight: 600; overflow-wrap: anywhere; }
.atr-chat-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.atr-chat-card-price { font-weight: 700; color: var(--atr-chat-accent); }
.atr-chat-tag { padding: 1px 7px; border-radius: 999px; background: #eef0f4; color: #3c4048; font-size: 12px; }
.atr-chat-tag-warn { background: #fff1d6; color: #7a4a00; }
.atr-chat-card-spec { margin-top: 4px; color: #3c4048; font-size: 13px; }
.atr-chat-card-note { margin-top: 4px; color: #7a4a00; font-size: 12px; }
.atr-chat-card-link { display: inline-block; margin-top: 6px; color: var(--atr-chat-accent); font-weight: 600; text-decoration: underline; }

.atr-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e1e3e8; background: #fff; }
.atr-chat-input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #c9ccd3;
	border-radius: 8px;
	font: inherit;
	color: #1d1d1f;
	background: #fff;
}
.atr-chat-send {
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--atr-chat-accent);
	color: var(--atr-chat-accent-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.atr-chat-send:disabled { opacity: .5; cursor: default; }
.atr-chat-note { padding: 0 12px 10px; background: #fff; color: #5b5f68; font-size: 12px; }
.atr-chat-note a { color: inherit; text-decoration: underline; }

@media (max-width: 480px) {
	.atr-chat { right: 8px; bottom: 8px; }
	.atr-chat-panel { width: calc(100vw - 16px); height: calc(100vh - 16px); }
	.atr-chat-input { font-size: 16px; } /* stops iOS zoom on focus */
}