/* /web/static/css/style.css */

/* 字體設定 */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* 背景改個淺灰色，讓白色聊天室更跳出來 */
}

/* 頁面佈局基礎 */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    display: flex;           /* 新增：讓內部的 row 可以撐開 */
    flex-direction: column;  /* 新增 */
}

/* navbar 樣式 */
.custom-navbar {
    background-color: #1988bc !important;
    transition: box-shadow 0.3s ease;
}

/* footer 聯絡資訊區塊 */
.footer-contact-bg {
    background-color: rgb(30, 41, 59);
    width: 100%;
    height: auto !important;
    padding: 15px 0 !important;
    min-height: 60px;
}

footer {
    padding: 0 !important;
}

/* 內容區塊 padding-top */
.page-padding {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;           /* 確保寬度吃滿 */
    max-width: 1200px;     /* 設定一個比較寬的最大寬度，像銀行介面一樣 */
}

/* -----------------------------------------------------------
   關鍵修改：聊天室樣式 (變大、變高)
----------------------------------------------------------- */

/* 聊天室外框 */
.chat-card {
    /* height: 85vh;  <-- 關鍵！讓它變得很高，佔據畫面大部分 */
    height: calc(100vh - 180px); /* 更精準的算法：視窗高度減去 Header 和 Footer 的空間 */
    display: flex;
    flex-direction: column;
    border: none;          /* 移除邊框，讓它看起來更現代 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 加強陰影，增加立體感 */
}

/* 聊天室標題 */
.chat-header {
    flex-shrink: 0;
    padding: 15px 20px;
    background-color: #1988bc; /* 改成跟 Navbar 同色，更有整體感 */
    color: white;              /* 文字變白 */
    font-size: 1.1rem;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0; /* 上方圓角 */
}

/* 聊天訊息區域 */
.chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #ffffff;
}

/* 底部輸入框區域 */
.chat-footer {
    flex-shrink: 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px; /* 下方圓角 */
}