/* ========================================================= */
/* [CSS FIX] ADMIN CHAT PANEL STYLING (ฉบับแก้ไขปัญหา Scrollbar และ iOS Long Press) */
/* ========================================================= */

/* 0. VARIABLES & BASE STYLES */
:root {
    --primary-color: #A51C30;
    --primary-hover: #8F192A;
    --accent-color: #A51C30;
    --accent-hover: #8F192A;
    --history-color: #6c757d;
    --history-light: #e9ecef;
    --background-color: #f8f9fa;
    --container-bg: #ffffff;
    --text-color: #343a40;
    --secondary-color: #6c757d;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --danger-color: #dc3545;
    --danger-hover: #c82333;
    --user-bubble-bg: #e4e6eb;
    --admin-bubble-bg: var(--primary-color);
    --border-radius-bubble: 18px;
    --border-radius-group: 8px;
    --transition-time: 0.25s;
}

/* 1. GLOBAL MOBILE FIXES */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none !important;
    /* ปิดเมนูระบบ iOS เพื่อใช้ Long Press ของเรา */
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
}

input,
textarea,
.selectable-text {
    -webkit-user-select: text !important;
    user-select: text !important;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    font-family: 'Prompt', sans-serif;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 1. LAYOUT & CONTAINER (Full Viewport) */
body {
    display: block;
    min-height: 100vh;
    width: 100vw;
    height: 100vh;
    background-color: var(--container-bg);
    /* 🔑 [FIX 2/3]: ลบ overflow: hidden; ออกจาก body หรือเปลี่ยนเป็น auto */
    overflow: hidden;
    /* คงไว้ที่ hidden เพื่อบังคับ Scroll ภายใน #chatList (ในกรณีที่หน้าจอหลักไม่มีอะไรล้น) */
}

/* 2. LOGIN & WELCOME SCREEN STYLES (ไม่มีการแก้ไขในส่วนนี้) */
#loginScreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: 90%;
    padding: 40px;
    background: var(--container-bg);
    box-shadow: var(--shadow-soft);
    border-radius: 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-title-login {
    font-size: 32px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 20px;
}

#logoArea,
.welcome-logo-area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 0px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

#logoArea img,
.welcome-logo-area img,
#logoArea #schoolLogo,
.welcome-logo-area #welcomeSchoolLogo {
    height: 70px !important;
    width: 70px !important;
    margin: 0 8px !important;
    object-fit: cover !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin-top: 0 !important;
}

/* 🔑 [NEW/MODIFIED] Input Field ทั่วไป (สำหรับ Login/Welcome Screen) */
.input-field,
.text-input {
    width: 100%;
    /* 🔑 [CRITICAL FIX]: กำหนดความกว้างสูงสุดให้ Input Field */
    max-width: 300px;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: var(--border-radius-group);
    font-size: 16px;
    margin-bottom: 15px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-time);
    font-family: 'Prompt', sans-serif, Arial;
}

.input-field:focus,
.text-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(165, 28, 48, 0.25), 0 3px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.welcome-screen-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#welcomeHeader {
    text-align: center;
    margin-bottom: 30px;
}

.app-title-welcome {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 10px 0 0;
}

#appTitleImage {
    width: 320px;
    height: auto;
    margin-bottom: 30px;
    transition: all var(--transition-time);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#appTitleImageAdmin {
    width: 320px;
    height: auto;
    margin-bottom: 30px;
    transition: all var(--transition-time);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.welcome-box {
    max-width: 380px;
    width: 100%;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);

}

.welcome-message {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    width: 100%;
}

.welcome-button-group {
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 3. BUTTONS (ไม่มีการแก้ไขในส่วนนี้) */
.primary-button {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    border-radius: var(--border-radius-group);
    transition: all var(--transition-time) ease-out;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

/* 🔑 [CRITICAL FIX]: บังคับปุ่ม Login (#loginScreen) ให้มีความกว้างสูงสุดเท่ากับ Input Field (300px) */
#loginScreen .primary-button {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* ต้องเป็น block เพื่อให้ max-width และ margin auto ทำงาน */
}

.primary-button:hover {
    background: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.primary-button.enter-chat-btn {
    position: relative;
    background: linear-gradient(135deg, #8b0000 0%, #ff0000 100%);
    /* แดงเข้มไปแดงสว่าง */
    color: #fff;
    border: 2px solid #d4af37;
    /* ขอบสีทอง Metallic */
    padding: 15px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    /* เงาสีแดงฟุ้งๆ */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5);
    font-family: 'Prompt', sans-serif;
}

.primary-button.enter-chat-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5), 0 0 10px #d4af37;
    /* เงาทองผสมแดง */
    border-color: #fcc200;
    /* ทองสว่างขึ้นเมื่อ Hover */
}

.secondary-button {
    background: #494949;
    /* ดำถ่าน */
    border: 1px solid #d4af37;
    /* เส้นขอบทองบางๆ */
    color: #ffffff;
    /* ตัวอักษรสีทอง */
    padding: 15px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    font-family: 'Prompt', sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.secondary-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(61, 48, 48, 0.5), 0 0 10px #d4af37;
    /* เงาทองผสมแดง */
    border-color: #fcc200;
    /* ทองสว่างขึ้นเมื่อ Hover */
}

.secondary-button:active {
    transform: scale(0.97);
}

/* ปรับไอคอนในปุ่มประวัติแชท */
.secondary-button i {
    color: #b8860b;
    /* สีทองเข้ม (Dark Goldenrod) เพื่อให้ตัดกับพื้นเทา */
}

/* --- ปุ่มออกจากระบบ (เวอร์ชัน แดง-ทอง Luxury) --- */
.logout-full-btn {
    background: linear-gradient(135deg, #440000 0%, #b30000 100%) !important;
    /* แดงเลือดหมูไปแดงสว่าง */
    color: #ffffff !important;
    border: 1px solid #d4af37 !important;
    /* ขอบทองบางๆ ให้เข้าธีม */
    padding: 15px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(179, 0, 0, 0.3) !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

.logout-full-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5), 0 0 10px #d4af37;
    /* เงาทองผสมแดง */
    border-color: #fcc200;
    /* ทองสว่างขึ้นเมื่อ Hover */
}

.logout-full-btn:active {
    transform: scale(0.95);
}

/* ปรับไอคอนในปุ่ม Logout */
.logout-full-btn i {
    color: #ffffff;
    /* ไอคอนสีทอง */
}

/* ตกแต่งไอคอนไอคอนสีทอง */
.welcome-button-group i {
    font-size: 20px;
}

.enter-chat-btn i {
    color: #d4af37;
    /* ไอคอนสีทองบนพื้นแดง */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.primary-button.enter-chat-btn:hover::before {
    left: 100%;
}

.danger-button {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    white-space: nowrap;
    box-sizing: border-box;
    gap: 5px;
}

.danger-button:hover {
    background: var(--danger-hover);
    transform: translateY(-1px);
}


/* 2. RESPONSIVE CONTAINER (ปรับขนาดตามหน้าจอแอดมิน) */
#adminPanelContainer {
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* 3. SCREENS & PANELS */
#listScreen,
#historyScreen,
#chatScreenContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--container-bg);
    display: none;
    flex-direction: column;
    z-index: 50;
}

#chatListPanel,
#historyListPanel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 4. SCROLLABLE AREAS (ทำให้เลื่อนได้ลื่นบนมือถือ) */
#chatList,
#historyList,
#chatBox {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* 🔑 ลื่นไหลบน iOS */
    padding: 15px;
    touch-action: pan-y;
    /* 🔑 สำคัญ: ยอมให้เลื่อนขึ้นลงได้แม้จะกดโดนบับเบิ้ล */
}

#listScreen,
#historyScreen,
#chatScreenContainer {
    display: none;
    /* ควบคุมการแสดงผลด้วย JS */
    flex-direction: column;
    width: 100%;
    height: 100vh;
    /* บังคับให้เต็มจอเมื่อแสดงผล */
    background-color: var(--container-bg);
    position: fixed;
    /* ใช้ fixed เพื่อให้หน้าจอแชททับหน้าจอหลักได้สนิท */
    top: 0;
    left: 0;
    z-index: 50;
}

#chatList,
#historyList,
#chatBox {
    flex: 1;
    overflow-y: auto !important;
    /* บังคับให้มี Scroll */
    -webkit-overflow-scrolling: touch;
    /* 🔑 ทำให้เลื่อนลื่นบน iOS */
    padding: 15px;
    display: flex;
    flex-direction: column;
}

#listScreen,
#historyScreen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: var(--container-bg);
}

#chatListPanel,
#historyListPanel {
    flex-grow: 1;
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
}

#chatList,
#historyList,
#chatBox {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* ให้การ Scroll บน iOS ลื่นไหล */
    padding: 10px;
}

#listScreen,
#historyScreen {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /* 🔑 [CONFIRMATION]: ยืนยันว่า Panel หลักยืดเต็มจอ */
    overflow: hidden;
    /* ควบคุม Scroll ภายใน Panel ย่อย */
    padding: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background-color: var(--container-bg);
    box-sizing: border-box;
}

/* 🔑 [CRITICAL FIX]: เพิ่มการกำหนดความสูงให้ Chat List Panel (ส่วนที่อยู่ระหว่าง Header และ List) */
#chatListPanel,
#historyListPanel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    /* 🔴 [NEW FIX]: ทำให้ Panel ย่อยที่บรรจุ #chatList ยืดเต็มพื้นที่ที่เหลืออยู่ของ Container แม่ (#listScreen) */
    height: calc(100% - 50px);
    /* ประมาณ 100% ลบความสูงของ Header (50px โดยประมาณ) */
    /* หรือใช้ height: 100%; หาก #listScreen ถูกกำหนดให้ใช้ flexbox ดีแล้ว */
    /* หากใช้ flexbox ถูกต้องแล้ว ไม่จำเป็นต้องใส่ height: 100% แต่โค้ดนี้จะช่วยแก้ปัญหา fallback ได้ */
}


#chatScreenContainer {
    /* จะถูกเปลี่ยนเป็น flex ใน JS */
    flex-direction: column;
    height: 100vh;
    /* สูงเท่าจอภาพพอดี */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f5f7fb;
    overflow: hidden;
    /* ห้ามตัวแม่เลื่อนเอง */
    z-index: 10000;

    display: none;
    height: -webkit-fill-available;
    /* สำหรับ iOS Safari */
    padding: 0;
    background: var(--container-bg);
}

#fullChatView {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--container-bg);
    border-radius: 0;
    overflow: hidden;
}

.chat-header-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--primary-color);
    color: white;
    padding: 12px 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    gap: 10px;

    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    /* ป้องกันขนาดเพี้ยน */
}

#chatTitle {
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
    text-align: left;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    font-size: 1.25rem;
    margin-left: 0;
}

#endChatButton,
#deleteChatButton {
    display: none;
}

#chatButtonContainer {
    display: flex;
    gap: 10px;
    align-items: center;
    order: 2;
}

#backButton {
    background-color: #8F192A;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.2s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    order: 3;
    margin-left: 0;
    width: auto;
}

#backButton:hover {
    background-color: #6c1220;
}

.chat-header,
#chatHeader {
    display: none !important;
}

#chatBox {
    flex-grow: 1;
    border: none;
    border-radius: 11px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 15px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.chat-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    gap: 15px;
    position: sticky;
    /* ทำให้ล็อกอยู่กับที่ */
    top: 0;
    /* ติดขอบบน */
    z-index: 1000;
    /* ให้อยู่เหนือรายการแชทที่เลื่อนผ่าน */
    background-color: #ffffff;
    /* ต้องใส่สีพื้นหลังเพื่อไม่ให้ข้อความด้านล่างทะลุขึ้นมา */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* เพิ่มเงาเล็กน้อยให้ดูมีมิติ */
}

#chatListHeader,
#historyListHeader,
#chat-header-bar {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: white;
    position: relative;
    overflow: hidden;

    /* 1. ชมพูหลายเฉด: ไล่จากชมพูเข้ม > ชมพูสด > ชมพูอ่อน (เห็นความต่างชัดเจน) */
    background: linear-gradient(to right,
            #c2185b 0%,
            #e91e63 25%,
            #ff4081 50%,
            #f06292 75%,
            #f8bbd0 100%);
    background-size: 200% auto;
    animation: pinkFlow 5s ease infinite alternate;
    /* ให้สีชมพูขยับไหลไปมา */

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* --- ลายเส้นทองสว่างระยิบระยับ (Sparkling Gold Lines) --- */
#chatListHeader::before,
#historyListHeader::before,
#chat-header-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* เส้นทองสว่างแบบเนียนๆ */
    background: repeating-linear-gradient(45deg,
            rgba(255, 215, 0, 0.15) 0px,
            rgba(255, 215, 0, 0.15) 2px,
            transparent 2px,
            transparent 15px);
    pointer-events: none;
}

/* --- ลำแสงทองสว่างวิ่งตัดหน้า (Bright Gold Flash) --- */
#chatListHeader::after,
#historyListHeader::after,
#chat-header-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    /* แสงทองสว่างจ้า */
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.3),
            rgba(255, 223, 0, 0.6),
            rgba(255, 255, 255, 0.3),
            transparent);
    transform: skewX(-30deg);
    animation: brightFlash 5s infinite;
}

/* --- Animations --- */

/* อนิเมชั่นสีชมพูไหล */
@keyframes pinkFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* อนิเมชั่นแสงทองวิ่ง */
@keyframes brightFlash {
    0% {
        left: -120%;
    }

    30% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* ปรับฟอนต์ให้มีเงาตัดกับพื้นหลัง */
#chatListHeader span,
#chatListHeader i,
#historyListHeader span,
#historyListHeader i,
#chat-header-bar span,
#chat-header-bar i {
    position: relative;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* ดันเนื้อหา (ข้อความ/ปุ่ม) ให้อยู่เหนือลวดลายทอง */
#chatListHeader>*,
#historyListHeader>*,
#chat-header-bar>* {
    position: relative;
    z-index: 1;
}

#chatListHeader,
#historyListHeader,
#chat-header-bar {
    border-bottom: none;
    background: var(--primary-color);
    color: white !important;
    padding: 12px 15px;
    flex-shrink: 0;
    /* 🔴 [NEW FIX]: ป้องกันไม่ให้ Header ถูกบีบอัดเมื่อ listScreen ใช้ flexbox */
}

.panel-title {
    flex-grow: 0 !important;
    order: -1;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.35rem;
    white-space: normal;
}

#goHomeBtn,
#backToWelcomeBtn {
    background-color: var(--primary-hover);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 11px;
    transition: background-color 0.2s;
    white-space: nowrap;
    width: auto;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: none;
    order: 1;
}

#goHomeBtn:hover,
#backToWelcomeBtn:hover {
    background-color: #6c1220;
    border-color: white;
}

#chatList,
#historyList {
    flex-grow: 1;
    overflow-y: auto;
    /* ✅ ส่วนนี้คือตัวสร้าง Scrollbar */
    padding: 10px;
    box-sizing: border-box;
    /* 🔴 [NEW FIX]: ทำให้ padding ไม่ไปขยายขนาดเกินความสูงที่กำหนด */
}

.chat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    border-radius: 10px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: var(--container-bg);
    border-left: none;
}

.chat-item:hover {
    background: #fce4e4;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.chat-info-container {
    flex-grow: 1;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-item p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.chat-item strong,
.chat-item .chat-time,
.chat-item .chat-owner {
    margin: 0 !important;
    padding: 0 !important;
}

.chat-item strong {
    font-size: 14px;
}

.chat-item .chat-time,
.chat-item .chat-owner {
    font-size: 11px;
}

.chat-item.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 8px rgba(165, 28, 48, 0.3);
    transform: scale(1.005);
    border-radius: 10px;
}

.chat-item.active strong,
.chat-item.active .chat-time,
.chat-item.active .chat-owner {
    color: white !important;
}

.chat-item.unread {
    background-color: #fffde7;
    border-left: 5px solid #ffc107;
    font-weight: 400;
}

.chat-item.unread.active {
    background: var(--primary-color);
    border-left: 5px solid white;
}

.unread-dot {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 10px;
    height: 10px;
    background-color: #dc3545;
    border-radius: 50%;
    z-index: 10;
}

.chat-item:not(.active) .unread-dot {
    background-color: #ffc107;
}

.history-item {
    background-color: var(--history-light);
    border-left: none;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item:hover {
    background: #d4d8db;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.history-item.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 8px rgba(165, 28, 48, 0.3);
    transform: scale(1.005);
    border-left: 5px solid white;
    border-radius: 10px;
}


/* CHAT PANEL (ขวา - Active Chat) (ไม่มีการแก้ไขในส่วนนี้) */
.input-area {
    display: flex;
    align-items: flex-end;
    /* ให้ปุ่มส่งอยู่ระนาบเดียวกับบรรทัดสุดท้ายของ Textarea */
    gap: 12px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    /* เอฟเฟกต์กระจกฝ้า */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.05);
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

#chatInput {
    flex: 1;
    border: 2px solid #edf2f7;
    border-radius: 24px;
    padding: 12px 20px;
    font-family: 'Prompt', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    color: #2d3748;
    /* ไม่ให้มันยาวจนบังจอ */
    min-height: 40px;
    max-height: 120px;
    /* ยอมให้ขยายได้สูงสุดประมาณ 5-6 บรรทัด */
    overflow-y: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* 9. UTILITIES */
.message-time {
    font-size: 10px;
    opacity: 0.7;
    margin: 0 5px;
}

.admin-container .message-time {
    order: 1;
}

.user-container .message-time {
    order: 2;
}

/* 10. HIDE SCROLLBARS */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

#chatList,
#chatBox {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#chatInput:focus {
    background: #ffffff;
    border-color: #dc3545;
    /* สีเริ่มของ Gradient */
    box-shadow: 0 0 0 4px rgba(254, 79, 79, 0.15), 0 8px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

#sendButton {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff021b 0%, #570000 100%);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
    flex-shrink: 0;
    /* ห้ามปุ่มเบี้ยว */
    padding: 0;
}

#sendButton:hover {
    transform: scale(1.1) rotate(-10deg);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
}

#sendButton:active {
    transform: scale(0.9);
}

#sendButton i {
    margin-left: 2px;
    /* ขยับไอคอนเครื่องบินให้ดูบาลานซ์ */
}

/* ปรับแต่ง Scrollbar เล็กๆ ให้ดูพรีเมียมเวลาข้อความยาวเกิน max-height */
#chatInput::-webkit-scrollbar {
    width: 0px;
}

#chatInput::-webkit-scrollbar-thumb {
    background: rgba(79, 172, 254, 0.4);
    border-radius: 10px;
}

/* ========================================================= */
/* 5. CHAT MESSAGE STYLES (รวมการจัดกลุ่มบับเบิ้ล) */
/* ========================================================= */
.message-container {
    display: flex;
    flex-direction: row;
    /* แนวนอน */
    align-items: flex-end;
    margin-bottom: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.message-container.show {
    opacity: 1;
}

.message-bubble {
    margin: 0;
    /* มั่นใจว่าไม่มี margin ส่วนเกิน */
    border-radius: var(--border-radius-bubble);
    line-height: 1.4;
    font-size: 15px;
    word-wrap: break-word;
    white-space: pre-wrap;
    /* 💡 แก้ไข: ใช้ Shadow ที่เบาลงเล็กน้อยสำหรับ Bubble */
    display: block;
    max-width: 100%;
    /* 💡 เพิ่ม: Transition สำหรับเงาและ Transform */
    transition: box-shadow var(--transition-time) ease-in-out, transform var(--transition-time) ease-out;

    pointer-events: auto !important;
    /* บังคับให้รับแรงกด/คลิก */
    /* ทำให้ Cursor เปลี่ยนเป็นรูปมือเมื่อชี้ (บนคอม) เพื่อทดสอบ */
    cursor: pointer !important;

    /* ยืนยันตำแหน่งเพื่อให้ Layer ชัดเจน */
    position: relative;
    z-index: 10;
    cursor: context-menu;
    /* เปลี่ยนรูปเมาส์ให้รู้ว่าคลิกขวาได้ */


    /* ป้องกันเมนูเลือกข้อความของ iOS */
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;

    /* ช่วยให้การแตะตอบสนองไวขึ้น */
    touch-action: manipulation;

    padding: 6px 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* เพิ่มเงานิดๆ ให้ดูมีมิติ */
    transition: all 0.2s ease;
}

.user-bubble {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Feedback เมื่อกดโดนบับเบิ้ล */
.message-bubble:active {
    transform: scale(0.96);
    opacity: 0.9;
}

/* Admin (Right) & User (Left) */
.admin-container {
    justify-content: flex-end;
}

.admin-container .message-bubble {
    background-color: var(--admin-bubble-bg);
    color: white;
    order: 2;
}


.user-container .message-bubble {
    background-color: var(--user-bubble-bg);
    color: var(--text-color);
}

/* 6. BUBBLE GROUPING (การจัดรูปทรงบับเบิ้ล) */
/* User Grouping */
.user-container:has(+ .user-container) .message-bubble {
    border-bottom-left-radius: var(--border-radius-group);
}

.user-container+.user-container:has(+ .user-container) .message-bubble {
    border-radius: var(--border-radius-group) var(--border-radius-bubble) var(--border-radius-bubble) var(--border-radius-group);
}

.user-container+.user-container:not(:has(+ .user-container)) .message-bubble {
    border-top-left-radius: var(--border-radius-group);
}

/* Admin Grouping */
.admin-container:has(+ .admin-container) .message-bubble {
    border-bottom-right-radius: var(--border-radius-group);
}

.admin-container+.admin-container:has(+ .admin-container) .message-bubble {
    border-radius: var(--border-radius-bubble) var(--border-radius-group) var(--border-radius-group) var(--border-radius-bubble);
}

.admin-container+.admin-container:not(:has(+ .admin-container)) .message-bubble {
    border-top-right-radius: var(--border-radius-group);
}

.admin-container {
    justify-content: flex-end;
}

.admin-container .message-bubble {
    background-color: var(--admin-bubble-bg);
    color: white;
}

.user-container .message-bubble {
    background-color: var(--user-bubble-bg);
    color: var(--text-color);
}

.message-bubble:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------- */
/* 🔑 [CHAT BUBBLE GROUPING] - USER (ชิดซ้าย) */
/* ---------------------------------------------------- */
.user-container {
    justify-content: flex-start;
    flex-wrap: wrap;
    /* รองรับชื่อผู้ส่งด้านบน */
}

.user-container .message-bubble {
    background-color: var(--user-bubble-bg);
    color: var(--text-color);
    border-bottom-left-radius: var(--border-radius-bubble);
    border-top-left-radius: var(--border-radius-bubble);
}

/* 1. USER - บับเบิ้ลแรกในกลุ่ม: ตัดมุมล่างซ้ายออก */
.user-container:has(+ .user-container) .message-bubble {
    border-bottom-left-radius: var(--border-radius-group);
    border-top-left-radius: var(--border-radius-bubble);
}

/* 2. USER - บับเบิ้ลกลางในกลุ่ม: ตัดมุมบนซ้ายและมุมล่างซ้ายออก */
.user-container+.user-container:has(+ .user-container) .message-bubble {
    border-top-left-radius: var(--border-radius-group);
    border-bottom-left-radius: var(--border-radius-group);
}

/* 3. USER - บับเบิ้ลสุดท้ายในกลุ่ม: ตัดมุมบนซ้ายออก */
.user-container+.user-container:not(:has(+ .user-container)) .message-bubble {
    border-top-left-radius: var(--border-radius-group);
    border-bottom-left-radius: var(--border-radius-bubble);
}

.user-container .message-time {
    order: 2;
    margin-left: 6px;
    color: var(--secondary-color);
}

/* ---------------------------------------------------- */
/* 🔑 [CHAT BUBBLE GROUPING] - ADMIN (ชิดขวา) */
/* ---------------------------------------------------- */
.admin-container {
    justify-content: flex-end;
    position: relative;
}

.admin-container .message-bubble {
    background-color: var(--admin-bubble-bg);
    color: white;
    border-bottom-right-radius: var(--border-radius-bubble);
    border-top-right-radius: var(--border-radius-bubble);
    order: 2;
}

.admin-container .message-time {
    order: 1;
    margin-right: 6px;
    color: var(--secondary-color);
}

/* 1. ADMIN - บับเบิ้ลแรกในกลุ่ม: ตัดมุมล่างขวาออก */
.admin-container:has(+ .admin-container) .message-bubble {
    border-bottom-right-radius: var(--border-radius-group);
    border-top-right-radius: var(--border-radius-bubble);
}

/* 2. ADMIN - บับเบิ้ลกลางในกลุ่ม: ตัดมุมบนขวาและมุมล่างขวาออก */
.admin-container+.admin-container:has(+ .admin-container) .message-bubble {
    border-top-right-radius: var(--border-radius-group);
    border-bottom-right-radius: var(--border-radius-group);
}

/* 3. ADMIN - บับเบิ้ลสุดท้ายในกลุ่ม: ตัดมุมบนขวาออก */
.admin-container+.admin-container:not(:has(+ .admin-container)) .message-bubble {
    border-top-right-radius: var(--border-radius-group);
    border-bottom-right-radius: var(--border-radius-bubble);
}

/* ---------------------------------------------------- */
/* --- SYSTEM MESSAGE STYLES --- */
.system-container,
.deleted-system-message {
    justify-content: center;
    text-align: center;
    width: 100%;
}

.system-container .message-bubble,
.deleted-system-message .message-bubble {
    background-color: #fff3cd;
    color: #856404;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 10px;
    max-width: 50%;
    box-shadow: none;
    order: 1;
}

.deleted-bubble {
    background-color: #fce4e4 !important;
    color: var(--danger-color) !important;
    font-style: italic;
    border: 1px dashed var(--danger-color);
    max-width: 60%;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.deleted-bubble+.message-time {
    display: none !important;
}


.message-time {
    display: block;
    font-size: 10px;
    opacity: 0.8;
    white-space: nowrap;
    line-height: 1.2;
    margin-top: 0;
}

.date-separator {
    text-align: center;
    margin: 6px 0 3px 0;
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: #777;
    font-weight: 500;
}

.date-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ccc;
    z-index: -1;
}

.date-separator:after {
    content: attr(data-text);
    position: relative;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 2;
}


/* ========================================================= */
/* 6. CONTEXT MENU STYLES (สำหรับยกเลิกข้อความ) - FIXED FOR iOS */
/* ========================================================= */

.context-menu {
    position: fixed;
    /* 🔑 ต้องเป็น Fixed เท่านั้นบนมือถือ */
    z-index: 999999;
    min-width: 180px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;

}

/* 🔑 สำคัญ: ตรวจสอบว่า ID นี้ใน CSS ของคุณใช้ตัวไหน (contextMenu หรือ context-menu) */
#contextMenu,
.context-menu {
    position: fixed !important;
    display: none;
    /* เริ่มต้นให้ซ่อน */
    z-index: 999999 !important;
    pointer-events: auto;
}

.context-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.context-menu.active,
.context-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.admin-container .context-menu {
    right: 0;
    /* ชิดขวาของ Bubble สำหรับ Admin */
    left: auto;
}

.context-menu-item {
    padding: 16px 20px;
    /* 🔑 ขยายพื้นที่กดให้แอดมินกดง่ายขึ้น */
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text-color);
}

.context-menu-item:active {
    background-color: #f5f5f5;
}

.context-menu-item.delete {
    color: var(--danger-color);
    font-weight: 600;
}

/* 8. HEADER & INPUT AREA */
.chat-header-bar,
.chat-list-header {
    height: 60px;
    background: var(--primary-color);
    color: white;
    padding: 0 15px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:active {
    background-color: #f5f5f5;
}

.context-menu-item.delete {
    color: var(--danger-color);
    font-weight: 600;
}

.context-menu-item:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
    margin: 0 5px;
}

.context-menu-item:first-child:hover {
    border-radius: 5px 5px 0 0;
}

.context-menu-item:last-child:hover {
    border-radius: 0 0 5px 5px;
}

.context-menu-item:first-child:last-child:hover {
    border-radius: 5px;
}


.context-menu-item.delete {
    color: var(--danger-color);
    font-weight: 600;
}

.context-menu-item.delete:hover {
    background-color: var(--danger-color);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    border-radius: 0 0 9px 9px;
    margin: 0;
    padding: 9px 15px;
}

.context-menu-item.delete:first-child:last-child:hover {
    border-radius: 9px;
}

.context-menu-item i {
    font-size: 16px;
    transition: color 0.2s;
}

.context-menu-item.delete:hover i {
    color: white;
}

@keyframes fadeInAdminBubble {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#listScreen,
#historyScreen {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /* 🔴 [NEW FIX]: ยืนยันความสูงเต็มจอในโหมด Mobile */
    overflow: hidden;
    padding: 0 !important;
}

#chatListPanel,
#historyListPanel {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    /* 🔴 [NEW FIX]: ทำให้ Panel ย่อยยืดเต็มที่ */
    height: 100%;
}

#backButton {
    display: flex !important;
}

#chatBox {
    margin: 10px;
}


.chat-header-bar #chatTitle {
    order: 1;
    flex-grow: 1;
}

.chat-header-bar #chatButtonContainer {
    order: 2;
}

.chat-header-bar #backButton {
    order: 3;
}

#listScreen {
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    flex-basis: auto;
    min-width: auto;
    flex-shrink: 1;
    background-color: var(--container-bg);
    border-right: none;
    padding: 0 !important;
    overflow: hidden;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    z-index: 10000;
    height: -webkit-fill-available;
    background: var(--container-bg);
}

#historyScreen {
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    flex-basis: auto;
    min-width: auto;
    flex-shrink: 1;
    background-color: var(--container-bg);
    border-right: none;
    padding: 0 !important;
    overflow: hidden;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    z-index: 10000;
    height: -webkit-fill-available;
    background: var(--container-bg);
}

#listScreen,
#historyScreen {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 !important;
}

#chatListPanel,
#historyListPanel {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: 100%;
    /* 🔴 [NEW FIX]: ทำให้ Panel ย่อยยืดเต็มที่ */
    height: 100%;
}

#backButton {
    display: flex !important;
}

/* ---------------------------------------------------- */
/* DELETE HISTORY BUTTON STYLES (ไม่มีการแก้ไขในส่วนนี้) */
/* ---------------------------------------------------- */
.delete-chat-history-btn {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    flex-shrink: 0;
    display: none;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-sizing: border-box;
}

.delete-chat-history-btn:hover {
    background: var(--danger-hover);
}

.history-item .delete-chat-history-btn,
.chat-item.history-item .delete-chat-history-btn {
    display: flex !important;
}

.chat-item:not(.history-item) .delete-chat-history-btn,
#chatList .delete-chat-history-btn {
    display: none !important;
}

/* --- Scrollbar Hiding --- */
#mainContainer::-webkit-scrollbar,
#chatBox::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#mainContainer,
#chatBox {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 6. HIDE SCROLLBARS */
#chatList::-webkit-scrollbar,
#chatBox::-webkit-scrollbar {
    display: none;
    width: 0;
}

#chatList,
#chatBox {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 7. MEDIA QUERIES */
@media (max-width: 900px) {
    .message-bubble {
        max-width: 85%;
    }

    .context-menu {
        min-width: 180px;
    }
}

#contextMenu {
    background-color: white;
    border: 1px solid #DEE2E6;
    border-radius: 111px;
    display: none;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity var(--transition-time);
    background: white;
    animation: fadeIn 0.15s ease-out;
    transition: transform 0.1s ease;
    transform-origin: top right;
    /* ถ้าหันซ้าย ให้งอกจากขวามาซ้าย */
    transition: opacity 0.2s ease;
    position: fixed;
    z-index: 99999;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 10px 20px -5px rgba(0, 0, 0, 0.15),
        0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    transform: translateX(-100%) scale(0.9);
}

#contextMenu.active {
    opacity: 1;
    transform: translateX(-100%) scale(1);
    display: block !important;
    pointer-events: auto !important;
    /* ปลดล็อคจากที่ตั้งไว้ใน HTML */
}

#contextMenu div:hover {
    background-color: #f5f5f5;
}

#contextMenu ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

#contextMenu li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

#contextMenu li:hover {
    background-color: #f5f5f5;
}

#deleteOption {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 18px;
    /* เพิ่ม padding ให้ดูโปร่ง ไม่อึดอัด */
    border-radius: 12px;
    /* เปลี่ยนจาก 30px เป็น 12px จะดู Modern กว่าสำหรับเมนู */
    color: #ff3b30;
    font-weight: 600;
    gap: 0;
    /* ใช้ margin ที่ไอคอนแทนเพื่อคุมระยะได้แม่นกว่า */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* ใช้ curve การเคลื่อนไหวที่สมูทขึ้น */
    background: transparent;

    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    user-select: none;
}

#deleteOption:hover {
    background-color: #ff2d55 !important;
    /* แดงเข้มขึ้น */
    transform: scale(1.05);
    /* ปุ่มขยายใหญ่ขึ้นนิดนึง */
    box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4) !important;
}

#deleteOption:active {
    transform: scale(0.95);
    /* ตอนกดให้ปุ่มบุ๋มลง */
}

#deleteOption i {
    font-size: 16px;
    /* ปรับไอคอนให้เด่นขึ้นนิดนึง */
    width: 20px;
    /* ล็อกความกว้างไอคอนเพื่อให้ตัวหนังสือตรงกันเสมอ */
    margin-right: 12px;
    transition: transform 0.2s ease;
}

#deleteOption:hover i {
    transform: rotate(-10deg);
    /* ลูกเล่นไอคอนเอียงนิดๆ ตอนเอาเมาส์วาง */
}

/* 7. HIDE SCROLLBAR */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* ป้องกันการเลื่อนที่ตัว Body ทั้งหน้า และไปเลื่อนเฉพาะในส่วนของรายการแทน */
.chat-list-container,
.chat-box-base {
    overflow-y: auto;
    /* ให้เลื่อนได้เฉพาะส่วนนี้ */
    flex: 1;
    /* ยืดหยุ่นตามพื้นที่ที่เหลือ */
    -webkit-overflow-scrolling: touch;
    /* ให้ iOS เลื่อนลื่นไหล */
}

/* หากแอปของคุณใช้ Flexbox ในหน้าแชท ให้ตรวจสอบส่วนนี้ */
.chat-view-panel {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* บังคับความสูงเท่าหน้าจอ */
    overflow: hidden;
    /* ป้องกันหน้าหลักขยับ */
}