Board.css

.board-page-container {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 20px 40px;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	/* Light grey background for the whole page */
	box-sizing: border-box;
	position: relative;
}

@media (max-width: 768px) {
	.board-page-container {
		padding: 0 5px;
		/* Minimal horizontal padding */
	}

	.messages-area {
		padding-left: 0;
		/* No extra padding */
		padding-right: 100px;
		/* Ensure chat ends before timer starts (approx 84px from right) */
	}
}

/* Optional: Add a central content area if a constrained chat width is desired, 
   but user asked for 'web site' look, so full width or wide container is good. 
   Let's keep the messages area full width but maybe limit reading width if needed.
   For now, we'll keep it flexible. */

.messages-area {
	flex: 1;
	overflow-y: auto;
	padding: 40px 20px 20px 20px;
	display: flex;
	flex-direction: column;
	/* Ensure messages stack from top */
}

/* Custom scrollbar for messages if needed */
.messages-area::-webkit-scrollbar {
	width: 8px;
}

.messages-area::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 4px;
}

.loading-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	color: #555;
	background-color: #f5f5f5;
	gap: 12px;
}

.error-icon-container {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	border: 3px solid #fff;
	margin-bottom: 8px;
}

.error-icon-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.7);
}

.error-message {
	font-size: 16px;
	font-weight: 600;
	color: #666;
	margin: 0;
}

.error-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

/* Material Design Color Tokens */
:root {
	--md-primary: #1a73e8;
	/* Google Blue */
	--md-on-primary: #ffffff;
	--md-surface: #ffffff;
	--md-outline: #dadce0;
	--md-text-secondary: #5f6368;
	--md-error: #d93025;
}

/* --- アイコンと文字が縦に並んだ四角いボタン --- */
.square-icon-button {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	width: 125px !important;
	height: 80px !important;
	gap: 4px !important;
	font-size: 0.85rem !important;
	padding: 8px !important;
	border-radius: 8px !important;
	background-color: white !important;
	color: #ed6c02 !important;
	border: 1px solid #ed6c02 !important;
	font-weight: bold !important;
	text-transform: none !important;
}

.square-icon-button:hover {
	background-color: rgba(237, 108, 2, 0.04) !important;
	border-color: #e65100 !important;
}

/* 解答エリア：クリーンなサーフェス */
.fixed-answer-bar {
	width: 100%;
	background-color: var(--md-surface);
	border-top: 1px solid var(--md-outline);
	padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
	/* 控えめな影 */
	position: sticky;
	bottom: 0;
	z-index: 100;
}

.square-icon-button.visible {
	background-color: white !important;
	color: var(--md-error) !important;
	border-color: var(--md-error) !important;
}

/* 答えのテキストが長い場合に折り返せるようにする */
.square-icon-button span {
	text-align: center;
	line-height: 1.2;
}

.square-icon-button.visible span {
	font-size: 0.8rem;
}

/* 答えを確認ボタン：未確認時は目立たせるために塗りつぶしスタイルに */
.square-icon-button.answer-toggle-btn:not(.visible) {
	background-color: #ed6c02 !important;
	color: white !important;
	box-shadow: 0 4px 14px 0 rgba(237, 108, 2, 0.39);
}

.square-icon-button.answer-toggle-btn:not(.visible):hover {
	background-color: #e65100 !important;
}

/* ラベル：Material標準のキャプションスタイル */
.answer-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--md-text-secondary);
	margin: 0 0 10px 0;
	text-align: center;
}

/* スマホ向けの微調整 */
@media (max-width: 768px) {
	.board-page-container {
		padding: 0;
	}

	.messages-area {
		padding-left: 10px;
		padding-right: 20px;
		/* Removed 100px padding since Board doesn't have a timer */
	}

	.fixed-answer-bar {
		padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
		justify-content: center;
		gap: 15px;
	}

	.square-icon-button {
		width: 120px !important;
		height: 80px !important;
		font-size: 0.75rem !important;
		padding: 6px !important;
	}

	.answer-label {
		font-size: 11px;
		margin-bottom: 2px;
	}
}