/* FILE: assets/css/chat.css (INDEX LAYOUT FINAL FIX) */
/* --- 全体・ダークモード設定 --- */
body[data-bs-theme="dark"] { background-color: black; color: white; }
.card, .modal-content, .offcanvas { background-color: #1a1a1a; color: white; border-color: #333333; }
.card-header, .modal-header, .offcanvas-header, .modal-footer { border-color: #333333; }

/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 修正箇所 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
/* chat.phpのページ全体スクロールのみを無効化する */
body.chat-page { 
	overflow: hidden; 
}
/* index.php のレイアウトを正しく機能させるために高さを指定 */
html, body[data-my-userid] {
	height: 100%;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* --- ヘッダーのカスタムスタイル --- */
.custom-header { height: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.room-title { font-size: 1.1rem; font-weight: bold; margin: 0 auto; }
.custom-header .d-flex { flex-wrap: nowrap; }

/* --- レイアウト --- */
main.chat-area, aside.participants-area { padding-top: 100px; }
.chat-log-container { height: calc(100dvh - 100px - 78px - 52px); overflow-y: auto; display: flex; flex-direction: column; }
.message-input-area { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; z-index: 100; background-color: #111111; border-top: 1px solid #333333; }
@media (min-width: 768px) { 
	main.col.chat-area { flex: 0 0 auto; width: 66.66666667%; }
	aside.participants-area { flex: 0 0 auto; width: 33.33333333%; }
	.message-input-area { width: 66.66666667%; right: auto; } 
}
@media (min-width: 992px) { 
	main.col.chat-area { flex: 0 0 auto; width: 75%; }
	aside.participants-area { flex: 0 0 auto; width: 25%; }
	.message-input-area { width: 75%; right: auto; } 
}
aside.participants-area { height: 100dvh; overflow-y: auto; background-color: #1c1c1c !important; }

/* --- ダークモード時の入力フォームのスタイル --- */
[data-bs-theme="dark"] .form-control { background-color: #2a2a2a; color: white; border-color: #444; }
[data-bs-theme="dark"] .form-control:focus { background-color: #2a2a2a; color: white; border-color: #0d6efd; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
[data-bs-theme="dark"] .form-control::placeholder { color: #888; }

/* --- メッセージ入力欄のTextarea対応 --- */
#message-input { resize: none; overflow-y: hidden; line-height: 1.5; max-height: 120px; }

/* --- メッセージ関連 --- */
.chat-message { max-width: 70%; margin-bottom: 0.5rem; }
.chat-message.self { align-self: flex-end; }
.chat-message.other { align-self: flex-start; }
.message-bubble { padding: 0.25rem 0.75rem; border-radius: 2px; word-wrap: break-word; transition: font-weight 0.3s ease-in-out, color 0.3s ease-in-out; }
.message-bubble.self { background-color: #0d6efd; color: white; }
.message-bubble.other { background-color: #262626; color: white; }
.message-meta { color: #888; }
.delete-message-btn { cursor: pointer; font-size: 0.8rem; color: crimson; opacity: 0.6; }
.delete-message-btn:hover { opacity: 1; }
.new-message.other .message-bubble { font-weight: bold; color: #ffc107 !important; }

/* --- 参加者リスト --- */
.list-group-item.user-list-item { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.1); }
.user-list-item:hover { background-color: #2a2a2a !important; }
.status-dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; }
.status-online { background-color: orange; }
.status-offline { background-color: gray; }
.status-typing { background-color: crimson; animation: blink 1.2s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }

/* --- アップロード画像関連 --- */
.message-image { max-width: 150px; max-height: 150px; border-radius: 5px; cursor: zoom-in; display: block; object-fit: cover; }
.image-container { display: inline-block; text-align: center; }
.image-caption { display: inline-block; font-size: 0.75em; margin-top: 4px; line-height: 1.2; }
.image-caption.bg-light.text-dark { padding: 0 4px; border-radius: 3px; }

/* --- 画像フェードインアニメーション --- */
.new-image-fadein { opacity: 0; transition: opacity 0.6s ease-in-out; }
.new-image-fadein.visible { opacity: 1; }

/* --- 画像拡大表示（ドラッグ＆リサイズ可能ウィンドウ） --- */
#image-lightbox-overlay { position: fixed; bottom: 90px; right: 20px; width: 350px; height: auto; z-index: 1200; display: none; background-color: #212529; border: 1px solid #495057; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
#image-lightbox-caption { padding: 0.3rem 0.6rem; background-color: #343a40; color: white; font-size: 0.9em; display: flex; align-items: center; cursor: move; border-bottom: 1px solid #495057; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; flex-shrink: 0; }
#image-lightbox-container { width: 100%; height: 300px; overflow: hidden; flex-grow: 1; background-color: #000; }
#image-lightbox-container img { width: 100%; height: 100%; display: block; object-fit: contain; cursor: default; transition: transform 0.15s ease-out; }
#resize-handle { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: se-resize; z-index: 1201; border-right: 3px solid rgba(255,255,255,0.4); border-bottom: 3px solid rgba(255,255,255,0.4); opacity: 0.8; transition: opacity 0.2s; }
#resize-handle:hover { opacity: 1; }
.zoom-btn:disabled { opacity: 0.5; }

/* --- システム通知エリア --- */
.system-notification-container { height: 44px; overflow: hidden; position: relative; font-size: 0.8rem; }
.system-notification-message { position: absolute; width: 100%; text-align: center; color: #888; line-height: 22px; opacity: 0; transform: translateY(100%); transition: opacity 0.4s ease-out, transform 0.4s ease-out, top 0.4s ease-out, color 0.5s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.system-notification-message.is-highlighted { color: #ffc107 !important; font-weight: bold; }
.system-notification-message.is-visible { opacity: 1; transform: translateY(0); }
.system-notification-message.is-new { top: 22px; }
.system-notification-message.is-old { top: 0; }

.text-blueviolet { color: Blueviolet !important; }
#scroll-to-top-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* --- index.php 専用スタイル --- */
.main-card { height: 100%; display: flex; flex-direction: column; }
.fixed-section { flex-shrink: 0; }
.scrollable-section { flex-grow: 1; overflow-y: auto; min-height: 0; }
.btn-no-wrap { white-space: nowrap; }
.list-group-flush .list-group-item { background-color: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0.75rem 1rem; transition: border-left-color 0.2s ease-in-out; border-left: 5px solid transparent; }
.list-group-flush .list-group-item:last-child { border-bottom: none; }
.list-group-item strong, .list-group-item .join-room-btn { transition: all 0.2s ease-out; }
.list-group-item.hover-effect:hover { cursor: pointer; border-left-color: #198754; }
.list-group-item.locked-item:hover { cursor: default; border-left-color: #dc3545; }
.list-group-item.hover-effect:hover strong { background-color: #198754; border-radius: .25rem; padding: 0.1rem 0.3rem; color: white !important; }
.list-group-item.hover-effect:hover .join-room-btn {
	background-color: #198754; /* btn-success の色 */
	border-color: #198754;
	color: #fff;
}
/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ ここから追加 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
/* プロフィール編集モーダル内のチェックボックスラベルを左寄せにする */
#profileModal .modal-body .form-label.d-block {
	text-align: left; /* ラベル（タイトル）を左寄せ */
}

/* チェックボックスを囲むdiv要素のスタイル */
#profileModal .modal-body .mb-3 > div {
	/* 自分、希望、何が好き？のチェックボックスコンテナを特定 */
	text-align: left; /* コンテナ内の要素（チェックボックス）を左寄せ */
	justify-content: flex-start; /* flexboxの場合の対策 */
}
#profileModal .checkbox-container {
	max-height: 120px; /* ボックスの最大の高さを指定。この高さを超えるとスクロールバーが表示されます */
	overflow-y: auto;  /* 縦方向にコンテンツがはみ出た場合のみスクロールバーを表示 */
	border: 1px solid #444; /* 枠線 */
	padding: 10px;          /* 内側の余白 */
	border-radius: 5px;   /* 角を丸くする */
	text-align: left;       /* コンテナ内の要素を左寄せ */
}

/* スクロールバーのスタイル（ダークモード用、任意） */
#profileModal .checkbox-container::-webkit-scrollbar {
	width: 8px;
}
#profileModal .checkbox-container::-webkit-scrollbar-track {
	background: #2a2a2a;
}
#profileModal .checkbox-container::-webkit-scrollbar-thumb {
	background-color: #555;
	border-radius: 4px;
}
#profileModal .checkbox-container::-webkit-scrollbar-thumb:hover {
	background-color: #777;
}