/* style.css */
:root {
    --main-blue: #004a8d;
    --main-red: #a50021;
}

/* คุม Container หลักไม่ให้ใหญ่เกินความสูงจอ */
.main-container {
    width: 100vw;
    max-width: 450px;
    height: 100dvh; /* ใช้ dvh เพื่อให้พอดีจอรวมแถบบราวเซอร์มือถือ */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ห้ามมี Scrollbar นอกแชท */
    background: #f5f7f9;
}

/* ทำให้ Chat Area ยืดหยุ่น */
.chat-area {
    flex-grow: 1; /* กินพื้นที่ที่เหลือทั้งหมด */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}



/* --- สำหรับจอเล็กแบบ iPhone 8 (หน้าจอสั้น) --- */
@media (max-height: 670px) {
    .header-blue { padding: 8px 5px; }
    .info-bar { padding: 5px 10px; }
    .user-avatar { width: 32px; height: 32px; }
    .bet-btn { padding: 5px 2px; font-size: 11px; }
    .bet-panel { padding: 10px; }
    .bet-grid { 
        grid-template-columns: repeat(4, 1fr); /* มั่นใจว่ามี 4 คอลัมน์เท่าเดิมแต่หดช่องไฟ */
        gap: 4px; /* ลดระยะห่างระหว่างปุ่มเพื่อให้ปุ่มมีพื้นที่กว้างขึ้น */
    }
    
}