/* Webてんちょ施工日誌：フロントとブロックエディターで共通 */
.build-chat-log {
	width: min(100%, 820px);
	margin: 45px auto;
	padding: 28px;
	background:
		linear-gradient(rgba(23, 23, 23, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px),
		#e6e2d8;
	background-size: 22px 22px;
	border: 4px solid #171717;
	box-shadow: 9px 9px 0 #171717;
}

.build-chat-log > .build-chat-message {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	margin: 0 0 26px;
}

.build-chat-log > .build-chat-message:last-child {
	margin-bottom: 0;
}

.build-chat-message--manager {
	flex-direction: row-reverse;
}

.build-chat-person {
	flex: 0 0 88px;
	width: 88px;
	margin: 0 !important;
}

.build-chat-person .build-chat-icon {
	display: grid;
	width: 64px;
	height: 64px;
	margin: 0 auto 5px !important;
	place-items: center;
	background: #fffef8;
	border: 3px solid #171717;
	border-radius: 50%;
	box-shadow: 3px 3px 0 #171717;
	font-size: 34px;
	line-height: 1;
}

.build-chat-message--manager .build-chat-icon {
	background: #f6c900;
}

.build-chat-person .build-chat-name {
	margin: 0 !important;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.35;
	white-space: nowrap;
}

.build-chat-bubble {
	position: relative;
	flex: 0 1 auto;
	max-width: min(72%, 580px);
	margin: 4px 0 0 !important;
	padding: 17px 20px;
	background: #fffef8;
	border: 3px solid #171717;
	border-radius: 5px 18px 18px;
	box-shadow: 5px 5px 0 rgba(23, 23, 23, 0.22);
}

.build-chat-bubble::before {
	content: "";
	position: absolute;
	top: 16px;
	left: -13px;
	width: 20px;
	height: 20px;
	background: #fffef8;
	border-bottom: 3px solid #171717;
	border-left: 3px solid #171717;
	transform: rotate(45deg);
}

.build-chat-message--manager .build-chat-bubble {
	background: #f6c900;
	border-radius: 18px 5px 18px 18px;
}

.build-chat-message--manager .build-chat-bubble::before {
	right: -13px;
	left: auto;
	background: #f6c900;
	border: 0;
	border-top: 3px solid #171717;
	border-right: 3px solid #171717;
}

.build-chat-bubble p {
	margin: 0 !important;
	font-size: clamp(15px, 2vw, 18px);
	font-weight: 700;
	line-height: 1.75;
}

/* 編集画面では、削除してよい3つ目の返信を判別しやすくする。 */
.editor-styles-wrapper .build-chat-message--optional::after {
	content: "必要な場合のみ使用";
	align-self: center;
	padding: 3px 6px;
	background: #171717;
	color: white;
	font-family: monospace;
	font-size: 9px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.build-chat-log {
		margin-block: 30px;
		padding: 20px 12px;
		box-shadow: 6px 6px 0 #171717;
	}

	.build-chat-log > .build-chat-message {
		gap: 8px;
		margin-bottom: 20px;
	}

	.build-chat-person {
		flex-basis: 62px;
		width: 62px;
	}

	.build-chat-person .build-chat-icon {
		width: 50px;
		height: 50px;
		font-size: 27px;
	}

	.build-chat-person .build-chat-name {
		font-size: 10px;
	}

	.build-chat-bubble {
		max-width: calc(100% - 70px);
		padding: 13px 14px;
	}

	.build-chat-bubble p {
		font-size: 14px;
	}
}