body { overflow: hidden; height: 100vh; background-color: #f1f5f9; }

        /* PCでの見た目制限 */
        .app-container {
            max-width: 600px; /* PCでの横幅を制限 */
            margin: 0 auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* チャットエリア：画面全体を基本とし、下部に余白を確保 */
        .chat-history {
            height: 55vh;
            overflow-y: auto;
            padding-bottom: 300px; /* キャラと入力欄に被らないための余白 */
            -webkit-overflow-scrolling: touch;
        }

        /* キャラクター表示エリア：ログの下、操作パネルの上に浮かせた感じに */
        .char-fixed-layer {
            position: fixed;
            /*bottom: 150px; /* 入力欄より少し上 */
            bottom: 165px;
            left: 0;
            right: 0;
            z-index: 5;
            pointer-events: none; /* 下のログを触れるように */
        }
        .char-display {
            width: 180px;
            height: 180px;
            margin: 0 auto;
            pointer-events: auto; /* キャラ自体は触れるように */
        }

        /* 操作エリア：可変高さ */
        .controls-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 20;
            transition: all 0.3s ease-in-out;
            max-height: 90vh; /* 広がっても全画面の90%まで */
        }

        /* 設定が開いている時のスタイル */
        details[open] {
            background: white;
        }

        .bubble {
            position: relative;
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 1.25rem;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        .bubble-chara { background-color: #fbbf24; color: #451a03; border-bottom-right-radius: 0; align-self: flex-end; }
        .bubble-user { background-color: #bae6fd; color: #0c4a6e; border-top-left-radius: 0; }

        /* ドットが波打つアニメーション */
        .dot-typing {
            display: flex;
            align-items: center;
            gap: 4px;
            height: 24px;
        }

        .dot-typing span {
            width: 6px;
            height: 6px;
            background-color: #451a03; /* トワ君の吹き出し文字色に合わせる */
            border-radius: 50%;
            display: inline-block;
            animation: dot-blink 1.4s infinite ease-in-out both;
        }

        .dot-typing span:nth-child(1) { animation-delay: -0.32s; }
        .dot-typing span:nth-child(2) { animation-delay: -0.16s; }

        @keyframes dot-blink {
            0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
            40% { transform: scale(1); opacity: 1; }
        }