.skc-ai-guide-root {
	--skc-ai-ink: #24444b;
	--skc-ai-copy: #526b70;
	--skc-ai-teal: #315f65;
	--skc-ai-deep: #274d52;
	--skc-ai-blue: #e7f1f3;
	--skc-ai-cream: #f7f4ec;
	--skc-ai-line: rgba(36, 68, 75, 0.15);
	--skc-ai-shadow: 0 24px 70px rgba(32, 60, 69, 0.2);
	position: fixed;
	left: 22px;
	bottom: max(22px, env(safe-area-inset-bottom));
	z-index: 9998;
	color: var(--skc-ai-ink);
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	line-height: 1.7;
	letter-spacing: 0.035em;
}

.skc-ai-guide-root *,
.skc-ai-guide-root *::before,
.skc-ai-guide-root *::after { box-sizing: border-box; }

.skc-ai-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 62px;
	padding: 9px 18px 9px 10px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--skc-ai-ink);
	border: 1px solid var(--skc-ai-line);
	border-radius: 999px;
	box-shadow: 0 14px 38px rgba(32, 60, 69, 0.16);
	font: inherit;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.skc-ai-toggle:hover,
.skc-ai-toggle:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(32, 60, 69, 0.2);
	outline: none;
}

.skc-ai-toggle-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 44px;
	height: 44px;
	background: var(--skc-ai-teal);
	border-radius: 50%;
}

.skc-ai-toggle-icon::after {
	position: absolute;
	right: 3px;
	bottom: 4px;
	content: "";
	width: 10px;
	height: 10px;
	background: var(--skc-ai-teal);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	transform: rotate(14deg);
}

.skc-ai-toggle-icon i {
	position: relative;
	z-index: 1;
	display: block;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
}

.skc-ai-toggle > span:last-child { text-align: left; }
.skc-ai-toggle small {
	display: block;
	margin-bottom: 1px;
	color: #73959c;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.19em;
}
.skc-ai-toggle strong {
	display: block;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.skc-ai-guide-root.is-open .skc-ai-toggle { opacity: 0; pointer-events: none; }

.skc-ai-panel {
	position: absolute;
	left: 0;
	bottom: 0;
	display: grid;
	grid-template-rows: auto auto minmax(150px, 1fr) auto auto auto;
	width: min(398px, calc(100vw - 32px));
	height: min(680px, calc(100vh - 38px));
	max-height: 78dvh;
	overflow: hidden;
	background: #fbfdfd;
	border: 1px solid rgba(36, 68, 75, 0.16);
	border-radius: 26px;
	box-shadow: var(--skc-ai-shadow);
	transform-origin: left bottom;
	animation: skc-ai-panel-in 0.24s ease-out;
}

.skc-ai-panel[hidden] { display: none !important; }

.skc-ai-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 21px 17px;
	background: linear-gradient(135deg, #edf5f5, #f8f6ef);
	border-bottom: 1px solid var(--skc-ai-line);
}

.skc-ai-header small {
	display: block;
	margin-bottom: 3px;
	color: #73959c;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.skc-ai-header h2 {
	margin: 0;
	color: var(--skc-ai-teal);
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.4;
}

.skc-ai-close {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--skc-ai-line);
	border-radius: 50%;
	cursor: pointer;
}

.skc-ai-close span::before,
.skc-ai-close span::after {
	position: absolute;
	left: 11px;
	top: 18px;
	content: "";
	width: 15px;
	height: 1px;
	background: var(--skc-ai-teal);
}
.skc-ai-close span::before { transform: rotate(45deg); }
.skc-ai-close span::after { transform: rotate(-45deg); }
.skc-ai-close:hover,
.skc-ai-close:focus-visible { background: #fff; outline: 2px solid rgba(49, 95, 101, 0.24); outline-offset: 2px; }

.skc-ai-scope {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 9px;
	align-items: start;
	padding: 11px 18px;
	background: var(--skc-ai-cream);
	border-bottom: 1px solid rgba(36, 68, 75, 0.1);
}

.skc-ai-scope > span {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	background: #e1eceb;
	color: var(--skc-ai-teal);
	border-radius: 50%;
	font-family: serif;
	font-size: 11px;
	font-weight: 700;
}

.skc-ai-scope p {
	margin: 0;
	color: #66645d;
	font-size: 10px;
	line-height: 1.65;
}
.skc-ai-scope b { color: #665b50; font-weight: 700; }

.skc-ai-messages {
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	scrollbar-color: rgba(49, 95, 101, 0.28) transparent;
	scrollbar-width: thin;
}

.skc-ai-message { max-width: 91%; }
.skc-ai-message p {
	margin: 0;
	font-size: 13px;
	line-height: 1.85;
	white-space: pre-line;
}

.skc-ai-message-user {
	align-self: flex-end;
	padding: 11px 14px;
	background: var(--skc-ai-teal);
	color: #fff;
	border-radius: 17px 17px 4px 17px;
}

.skc-ai-message-bot {
	align-self: flex-start;
	padding: 14px 15px 15px;
	background: #fff;
	border: 1px solid var(--skc-ai-line);
	border-radius: 5px 18px 18px 18px;
	box-shadow: 0 7px 22px rgba(32, 60, 69, 0.045);
}

.skc-ai-message-bot > small {
	display: block;
	margin-bottom: 6px;
	color: #71949c;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.skc-ai-message-bot.mode-safety {
	background: #fff8f2;
	border-color: rgba(151, 103, 74, 0.24);
}

.skc-ai-message-bot.mode-error {
	background: #fff5f3;
	border-color: rgba(165, 75, 67, 0.24);
}

.skc-ai-links {
	display: grid;
	gap: 7px;
	margin-top: 12px;
}

.skc-ai-links a {
	position: relative;
	display: block;
	padding: 10px 33px 10px 12px;
	background: #edf4f4;
	color: var(--skc-ai-teal);
	border: 1px solid rgba(49, 95, 101, 0.1);
	border-radius: 11px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.55;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.skc-ai-links a::after {
	position: absolute;
	right: 12px;
	top: 50%;
	content: "↗";
	transform: translateY(-50%);
	font-size: 12px;
}

.skc-ai-links a:hover,
.skc-ai-links a:focus-visible {
	background: #fff;
	border-color: rgba(49, 95, 101, 0.35);
	outline: none;
}

.skc-ai-disclaimer {
	display: block;
	margin-top: 11px;
	padding-top: 9px;
	color: #718084;
	border-top: 1px solid rgba(36, 68, 75, 0.1);
	font-size: 8px;
	line-height: 1.65;
}

.skc-ai-loading {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 58px;
	min-height: 43px;
}

.skc-ai-loading i {
	display: block;
	width: 5px;
	height: 5px;
	background: #7d9ba0;
	border-radius: 50%;
	animation: skc-ai-dot 1.1s infinite ease-in-out;
}
.skc-ai-loading i:nth-child(2) { animation-delay: 0.14s; }
.skc-ai-loading i:nth-child(3) { animation-delay: 0.28s; }

.skc-ai-quick {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	padding: 8px 18px 10px;
	border-top: 1px solid rgba(36, 68, 75, 0.08);
	scrollbar-width: none;
}
.skc-ai-quick::-webkit-scrollbar { display: none; }
.skc-ai-quick button {
	flex: 0 0 auto;
	padding: 7px 11px;
	background: #f1f6f6;
	color: var(--skc-ai-teal);
	border: 1px solid rgba(49, 95, 101, 0.15);
	border-radius: 999px;
	font: inherit;
	font-size: 9px;
	cursor: pointer;
}
.skc-ai-quick button:hover,
.skc-ai-quick button:focus-visible { background: #e4efef; outline: none; }
.skc-ai-quick button:disabled { opacity: 0.55; cursor: wait; }

.skc-ai-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 8px;
	margin: 0 14px 11px;
	padding: 6px 7px 6px 11px;
	background: #fff;
	border: 1px solid rgba(36, 68, 75, 0.2);
	border-radius: 15px;
	box-shadow: 0 6px 24px rgba(32, 60, 69, 0.055);
}

.skc-ai-form:focus-within { border-color: rgba(49, 95, 101, 0.55); box-shadow: 0 0 0 3px rgba(49, 95, 101, 0.08); }
.skc-ai-form textarea {
	display: block;
	width: 100%;
	height: 40px;
	min-height: 40px;
	max-height: 88px;
	resize: none;
	padding: 8px 0 5px;
	background: transparent;
	color: var(--skc-ai-ink);
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
}
.skc-ai-form textarea::placeholder { color: #95a3a5; }
.skc-ai-form > div {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	padding-bottom: 2px;
}
.skc-ai-count { color: #86999c; font-size: 8px; }
.skc-ai-form button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 4px 5px 4px 11px;
	background: var(--skc-ai-teal);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
}
.skc-ai-form button b {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	background: rgba(255, 255, 255, 0.17);
	border-radius: 50%;
	font-size: 14px;
}
.skc-ai-form button:hover,
.skc-ai-form button:focus-visible { background: var(--skc-ai-deep); outline: none; }
.skc-ai-form button:disabled,
.skc-ai-form textarea:disabled { opacity: 0.62; cursor: wait; }
.skc-ai-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.skc-ai-panel footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 16px 12px;
	color: #89999c;
	font-size: 7px;
}
.skc-ai-panel footer a { color: #69898f; text-decoration: underline; text-underline-offset: 2px; }

.skc-ai-guide-root .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@keyframes skc-ai-panel-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes skc-ai-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.42; }
	30% { transform: translateY(-4px); opacity: 1; }
}

@media (min-width: 861px) {
	.skc-ai-guide-root {
		left: calc(var(--rail, 0px) + 22px);
	}
}

@media (max-width: 620px) {
	.skc-ai-guide-root {
		left: 12px;
		bottom: calc(82px + env(safe-area-inset-bottom));
	}
	.skc-ai-toggle { min-height: 54px; padding: 7px 14px 7px 8px; }
	.skc-ai-toggle-icon { width: 39px; height: 39px; }
	.skc-ai-toggle small { font-size: 6px; }
	.skc-ai-toggle strong { font-size: 11px; }
	.skc-ai-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: min(710px, 82dvh);
		max-height: none;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 25px 25px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		transform-origin: center bottom;
	}
	.skc-ai-header { padding: 17px 18px 14px; }
	.skc-ai-header h2 { font-size: 20px; }
	.skc-ai-scope { padding: 9px 16px; }
	.skc-ai-messages { padding: 15px 14px; }
	.skc-ai-message { max-width: 94%; }
	.skc-ai-message p { font-size: 13px; }
	.skc-ai-quick { padding-right: 14px; padding-left: 14px; }
	.skc-ai-form { margin-right: 10px; margin-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.skc-ai-panel,
	.skc-ai-loading i,
	.skc-ai-toggle { animation: none !important; transition: none !important; }
}

@media print {
	.skc-ai-guide-root { display: none !important; }
}