body { 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            max-width: 800px; 
            margin: 0 auto; /* 中央寄せ */
            padding: 0;
            background-color: #f7f7f8; /* 背景色を少しグレーに */
            height: 100vh; /* ビューポートの高さいっぱい */
            display: flex;
            flex-direction: column; /* 縦方向に要素を並べる */
        }
        h1 {
            text-align: center;
            color: #333;
            padding: 20px 0;
            margin: 0;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        #chat-container { 
            flex-grow: 1; /* 残りのスペースを全て占める */
            padding: 20px;
            overflow-y: auto; /* スクロールは許可するが... */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            background-color: #fff; /* チャット背景も白に */
            border-bottom: 1px solid #eee; /* 下部の境界線は維持 */
        }
        /* Webkit系のブラウザでスクロールバーを非表示にする */
        #chat-container::-webkit-scrollbar {
            display: none;
        }

        /* 各メッセージブロックのラッパー */
        .message-wrapper {
            display: flex; /* Flexboxを使って発言者名と吹き出しを配置 */
            flex-direction: column; /* 縦方向に並べる */
            margin-bottom: 15px; /* メッセージ間の余白 */
            align-items: flex-start; /* デフォルトは左寄せ */
        }

        .user-message-wrapper {
            align-items: flex-end; /* ユーザーメッセージは右寄せ */
        }

        /* 発言者名のスタイル */
        .speaker-name {
            font-size: 0.9em;
            color: #333; /* 黒文字 */
            margin-bottom: 5px; /* 吹き出しとの間に少し余白 */
            padding: 0 5px; /* 左右に少しパディング */
        }

        .message { 
            padding: 10px 15px;
            border-radius: 8px; /* 角を丸くする */
            max-width: 80%; /* 最大幅を設定 */
            line-height: 1.6; /* 行の高さ */
            word-wrap: break-word; /* 長い単語でも改行 */
            color: #333; /* 全てのメッセージテキストのデフォルト色を黒に */
        }

        .user-message { 
            background-color: #e6f7ff; /* ユーザーメッセージの背景色 */
        }
        
        /* あまちゃんの吹き出し色を淡い桜色に */
        .amachan-message { 
            background-color: #ffe0f0; /* 淡い桜色 */ 
        }

        .shimpan-message { 
            background-color: #f0f0f0; /* AIメッセージのデフォルト背景色 (進行) */ 
        }
        
        /* 新しく追加するスコア表示用のスタイル */
        .score-display {
            text-align: center; /* 中央揃え */
            margin: 20px auto; /* 上下に余白、左右中央 */
            padding: 15px;
            border: 1px solid; /* 色は動的に設定するため、ここでは指定しない */
            border-radius: 10px;
            max-width: 60%; /* 幅を調整 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            font-weight: bold;
            line-height: 1.8;
            color: #333;
        }
        /* 勝者に応じたスコア表示の背景色とボーダー色 */
        .score-display.user-winner {
            background-color: #e6f7ff; /* ユーザーメッセージと同じ背景色 */
            border-color: #a0d0e0; /* ユーザーメッセージに合わせたボーダー色 */
        }
        .score-display.amachan-winner {
            background-color: #ffe0f0; /* あまちゃんメッセージと同じ背景色 */
            border-color: #f0a0c0; /* あまちゃんメッセージに合わせたボーダー色 */
        }
        /* 進行が勝者になることはないが、念のためデフォルトのAIカラーも用意 */
        .score-display.shimpan-winner {
            background-color: #f0f0f0; 
            border-color: #ccc;
        }


        .score-display .title {
            font-size: 1.2em;
            color: #007000; /* 緑系の強調色 */
            margin-bottom: 5px;
        }
        .score-display .score-value {
            font-size: 1.5em;
            color: #ff4500; /* オレンジレッドで目立たせる */
        }


        #input-area { 
            display: flex; 
            padding: 15px 20px;
            background-color: #fff;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
            align-items: center; /* 垂直方向中央寄せ */
        }
        #user-input { 
            flex-grow: 1; 
            padding: 12px 15px;
            border: 1px solid #ddd; 
            border-radius: 20px; /* カプセル型に丸くする */
            margin-right: 10px; 
            font-size: 16px;
            outline: none; /* フォーカス時のアウトラインを削除 */
            resize: none; /* リサイズハンドルを削除 (textareaの場合) */
            min-height: 20px; /* 1行分の最低高さを保証 */
            max-height: 100px; /* 最大高さ */
            overflow-y: auto; /* 入力が増えたらスクロール */
        }
        #send-button { 
            padding: 10px 20px; 
            background-color: #007bff; 
            color: white; 
            border: none; 
            border-radius: 20px; /* カプセル型に丸くする */
            cursor: pointer; 
            font-size: 16px;
            transition: background-color 0.2s ease;
            height: 40px; /* 入力欄と高さを合わせる */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #send-button:hover { 
            background-color: #0056b3; 
        }

        /* 逐次表示のためのアニメーションクラス */
        .typing-effect {
            overflow: hidden; /* テキストのあふれを隠す */
            white-space: pre-wrap; /* 改行を保持しつつ折り返し */
        }

        /* AI検討中のアニメーション */
        .thinking-indicator {
            display: flex;
            align-items: center;
            margin-left: 10px;
            font-size: 1.2em;
            color: #555;
            margin-top: 10px; /* ユーザーコメントとの間に少し余白 */
            margin-bottom: 10px; /* 次の要素との間に少し余白 */
        }

        .thinking-indicator .dot {
            animation: blink 1.4s infinite both;
            font-weight: bold;
        }

        .thinking-indicator .dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .thinking-indicator .dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes blink {
            0% { opacity: 0.2; }
            20% { opacity: 1; }
            100% { opacity: 0.2; }
        }