@charset "UTF-8";

/* reset----------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-weight:400; vertical-align:baseline; background:transparent; list-style: none; }
body { line-height:1; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; color: inherit; padding:0; vertical-align:baseline; background:transparent; text-decoration: none; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; transition: .3s;}
input, select { vertical-align:middle; }
*, *::before, *::after { box-sizing: border-box; }
img { vertical-align:bottom; }



:root {
	--brand: #88cc11;
	/* ブランド基調色 */
	--brand-weak: #e6f3f1;
	/* 薄い背景 */
	--user: #cfe6ff;
	--bot: #eeeeee;
	--text: #222;
	--radius: 14px;
	--shadow: 0 6px 20px rgba(0, 0, 0, .08);
	--border: #ddd;
}
html,
body {
	height: 100%;
	margin: 0;
}
body {
	font-size: 16px;
	font-family: "noto-sans-cjk-jp", sans-serif;
	font-weight: 400;
	max-width: 450px;
	margin: 0 auto;
	padding: 0;
	background-color: #f0f0f0;
	position: relative;
	line-height: 1.7;
	overflow: hidden;
}
#app {
	height: calc(var(--vh, 100vh) * 100);
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: #f6faf6;
}
@supports (height: 100svh) {
	#app {
		height: 100svh;
	}
}
@supports (height: 100dvh) {
	#app {
		height: 100dvh;
	}
}
header {
	width: 100%;
	position: relative;
	z-index: 5;
	padding-top: max(10px, env(safe-area-inset-top));
	background: var(--brand);
}
header h1 {
	text-align: center;
	padding: 6px 16px 16px 16px;
}
header .ttl_under {
	background: #ccbb11;
	color: #fff;
	font-size: 13px;
	padding: 3px;
	text-align: center;
}
header .logo {
	display: block;
	margin: 0 auto;
	width: 90%;
}
#app>#chat-wrap {
	min-height: 0;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	width: 100%;
	margin: 0 auto;
}
#chat-log {
	height: calc(100vh - 187px);
	overflow-y: auto;
	padding: 30px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: linear-gradient(180deg, #fff, #f7fffe 80%);
}
.row {
	display: flex;
	gap: 10px;
	align-items: flex-end
}
.row.user {
	justify-content: flex-end
}
.avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--brand-weak);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	font-size: 14px;
	color: var(--brand);
	border: 1px solid #dce9e7;
}
.bubble {
	max-width: 75%;
	padding: 10px 12px;
	box-shadow: var(--shadow);
	line-height: 1.6;
	word-wrap: break-word;
	white-space: pre-wrap;
	border: 1px solid #e7e7e7;
	background: var(--bot);
	color: #000 !important;
}
.bot .bubble {
	border-radius: 16px 16px 16px 0;
}
.user .bubble {
	background: var(--user);
	border-color: #c2dcfb;
	margin: 0 0 0 auto;
	border-radius: 16px 16px 0 16px;
}
.meta {
	font-size: 11px;
	opacity: .5;
	margin-top: 4px;
}
.user .meta {
	text-align: right;
}
.typing {
	display: inline-block;
	min-width: 26px
}
.dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 1px;
	border-radius: 50%;
	background: #999;
	opacity: .5;
	animation: blink 1.2s infinite
}
.dot:nth-child(2) {
	animation-delay: .2s
}
.dot:nth-child(3) {
	animation-delay: .4s
}
@keyframes blink {

	0%,
	80%,
	100% {
		opacity: .2
	}
	40% {
		opacity: 1
	}
}
#composer {
	position: relative;
	z-index: 5;
	border-top: 1px solid #e5e5e5;
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	background: #fff;
	display: grid;
	gap: 12px;
	max-width: 450px;
	width: 100%;
}
#input-row {
	display: flex;
	gap: 8px
}
textarea {
	flex: 1;
	resize: none;
	min-height: 44px;
	max-height: 160px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	outline: none;
	line-height: 1.6;
	font-size: 16px;
}
textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(10, 124, 110, .12)
}
button {
	padding: 10px 14px;
	border-radius: 8px;
	border: 0;
	background: var(--brand);
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
	display: inline-block;
	height: 44px;
}
}
button:disabled {
	opacity: .5;
	cursor: not-allowed
}
#toolbar {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center
}
.tips {
	font-size: 12px;
	opacity: .7
}
.ghost {
	background: #fff;
	color: var(--brand);
	border: 1px solid var(--brand)
}
.right {
	display: flex;
	gap: 8px
}
@media (max-width:520px) {
	.bubble {
		max-width: 80%
	}
	header h1 {
		font-size: 16px
	}
	button {
		padding: 3px 16px;
		font-size: 13px;
	}
	.ghost {
		font-size: 10px;
		font-weight: 400;
		height: 22px;
	}
}