body { font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif; display: flex; flex-direction: column; min-height: 100vh; background-color: #f3f4f6; }
#app { flex-grow: 1; transition: filter 0.3s; }

/* プライバシー保護モード（離席・タブ切り替え時のぼかし） */
body.privacy-mode #app {
    filter: blur(10px);
    pointer-events: none;
    user-select: none;
}
/* プライバシー保護時のオーバーレイメッセージ */
body.privacy-mode::after {
    content: "プライバシー保護のため表示を隠しています";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
}

/* 共通UIコンポーネント */
.modal-backdrop { background-color: rgba(0,0,0,0.5); }
.status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.status-申告受付 { background-color: #e0f2fe; color: #0c4a6e; } 
.status-管理者確認中 { background-color: #ede9fe; color: #5b21b6; } 
.status-委員会レビュー中 { background-color: #fef3c7; color: #92400e; } 
.status-要追加情報 { background-color: #ffedd5; color: #9a3412; } 
.status-追加情報受領 { background-color: #dbeafe; color: #1e40af; } 
.status-対応協議中 { background-color: #dcfce7; color: #166534; } 
.status-対応完了 { background-color: #fee2e2; color: #991b1b; }
.unread-badge { background-color: #ef4444; color: white; margin-left: 8px; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 9999px; }

/* フォーム要素 */
.form-section { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.5rem; }
.form-section-title { font-weight: 600; margin-bottom: 1rem; color: #1f2937; }

/* タブデザイン (メインナビゲーション) */
.nav-tab {
    position: relative;
    cursor: pointer;
    padding: 1rem 0.5rem;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #f9fafb;
}
.nav-tab:hover { color: #2563eb; background-color: #eff6ff; }
.nav-tab.active { color: #2563eb; border-bottom-color: #2563eb; background-color: #ffffff; }
.nav-tab:not(:last-child) { border-right: 1px solid #e5e7eb; }
@media (max-width: 640px) {
    .nav-tab { padding: 0.75rem 0.25rem; font-size: 0.8rem; flex-direction: column; gap: 0.25rem; }
    .nav-tab svg { width: 1.25rem; height: 1.25rem; }
}

/* モーダル内のタブデザイン */
.modal-tab {
    cursor: pointer;
    padding: 0.75rem 0.5rem;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #f9fafb;
}
.modal-tab:hover { color: #2563eb; background-color: #eff6ff; }
.modal-tab.active { color: #2563eb; border-bottom-color: #2563eb; background-color: #ffffff; }
.modal-tab:not(:last-child) { border-right: 1px solid #e5e7eb; }

/* 動画コンテナ (16:9アスペクト比維持) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #000;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* リストアイテム */
.comm-case-item.selected, .memo-list-item.selected { background-color: #eff6ff; border-left: 4px solid #2563eb; }

/* チャット UI */
.comment { display: flex; align-items: flex-start; margin-bottom: 1.25rem; }
.comment-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; margin-right: 10px; font-size: 0.9rem; }
.comment-content { flex-grow: 1; }
.comment-header { display: flex; align-items: center; margin-bottom: 4px; }
.comment-author { font-weight: 600; font-size: 0.875rem; color: #1f2937; }
.comment-time { font-size: 0.75rem; color: #6b7280; margin-left: 8px; }
.comment-body { font-size: 0.9rem; color: #374151; white-space: pre-wrap; line-height: 1.6; }

/* ユーティリティ */
.rotate-180 { transform: rotate(180deg); }

/* カスタムスクロールバー */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }

/* 検索ハイライト */
mark { background-color: #fef08a; padding: 2px 1px; border-radius: 3px; }
mark.current-match { background-color: #facc15; outline: 2px solid #f97316; }

/* モーダル拡大 */
.modal-expanded {
    width: 98vw !important;
    max-width: 98vw !important;
    height: 95vh !important;
    max-height: 95vh !important;
}