body {
    font-family: Arial, sans-serif; /* กำหนดฟอนต์ */
    margin: 0; /* ไม่มีระยะขอบ */
    padding: 0; /* ไม่มีระยะห่างภายใน */
    display: flex; /* ใช้ Flexbox เพื่อจัดเรียงไอเท็ม */
    justify-content: center; /* จัดกึ่งกลางแนวนอน */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    height: 100vh; /* ความสูงเต็มหน้าจอ */
    background-color: #f0f0f0; /* สีพื้นหลังของหน้าจอ */
    overflow: hidden; /* ป้องกันการเลื่อนหน้าจอ */
}

#chat-container {
    width: 100%;
    max-width: 800px;
    height: calc(100vh - 60px); /* ลดความสูงลงเพื่อเว้นที่สำหรับ input-container */
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    margin-top: 18%;
    margin-bottom: 10%;
    padding-bottom: 10%;
    position: relative;
}

#messages {
    flex: 1; /* ให้มีพื้นที่เหลือที่เหลือทั้งหมด */
    padding: 15px; /* ระยะห่างภายใน */
    overflow-y: auto; /* แสดง Scroll หากมีเนื้อหาเกิน */
    border-bottom: 1px solid #ddd; /* เส้นแบ่งระหว่างข้อความกับอินพุต */
    display: flex; /* ใช้ Flexbox เพื่อจัดเรียงข้อความ */
    flex-direction: column; /* จัดเรียงข้อความในแนวตั้ง */
}

.bot-message-container {
    display: flex; /* ใช้ Flexbox เพื่อจัดตำแหน่งข้อความและไอคอน */
    align-items: flex-start; /* จัดให้อยู่ด้านบน */
    margin-bottom: 10px; /* ระยะห่างด้านล่างของแต่ละข้อความ */
    justify-content: flex-start; /* จัดข้อความบอทไปทางซ้าย */
}

.user-message-container {
    display: flex; /* ใช้ Flexbox เพื่อจัดตำแหน่งข้อความและไอคอน */
    align-items: center; /* จัดให้อยู่กึ่งกลางในแนวตั้ง */
    justify-content: flex-end; /* จัดข้อความผู้ใช้ไปทางขวา */
    margin-bottom: 10px; /* ระยะห่างด้านล่างของแต่ละข้อความ */
}

.bot-icon {
    width: 40px; /* ขนาดไอคอน */
    height: 40px; /* ขนาดไอคอน */
    margin-right: 10px; /* ระยะห่างระหว่างไอคอนและข้อความ */
    border: 3px solid #f89718; /* เส้นขอบของไอคอน */
    border-radius: 50%; /* ทำให้ขอบเป็นวงกลม */
    align-self: flex-start; /* จัดให้อยู่ด้านบนของ container */
}

.user-message, .bot-message {
    max-width: 70%; /* ความกว้างสูงสุดของข้อความ */
    padding: 10px; /* ระยะห่างภายในข้อความ */
    border-radius: 8px; /* มุมกลมของข้อความ */
    display: inline-block; /* จัดให้ข้อความเป็นบล็อค */
    word-wrap: break-word; /* ตัดคำเมื่อเกินความกว้าง */
}

.user-message {
    background-color: #007bff; /* สีพื้นหลังของข้อความผู้ใช้ */
    color: white; /* สีของข้อความผู้ใช้ */
    align-self: flex-end; /* จัดข้อความไปทางขวา */
    text-align: left; /* จัดข้อความในกล่องไปทางขวา */
}

.bot-message {
    background-color: #e9ecef; /* สีพื้นหลังของข้อความบอท */
    color: #333; /* สีของข้อความบอท */
    border-radius: 8px; /* มุมกลมของข้อความ */
    padding: 10px; /* ระยะห่างภายในข้อความ */
    max-width: 70%; /* ความกว้างสูงสุดของข้อความ */
    word-wrap: break-word; /* ตัดคำเมื่อเกินความกว้าง */
    margin-top: 0; /* ปรับระยะห่างด้านบนให้อยู่ชิดกับไอคอน */
    display: inline-block; /* จัดให้ข้อความเป็นบล็อค */
}

#input-container {
    display: flex;
    padding: 10px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

#message {
    flex: 1; /* ให้ความกว้างเต็มที่ที่เหลือ */
    padding: 10px; /* ระยะห่างภายในอินพุต */
    border: 1px solid #ddd; /* เส้นขอบอินพุต */
    border-radius: 8px; /* มุมกลมของอินพุต */
    margin-right: 10px; /* ระยะห่างจากปุ่มส่ง */
    font-size: 18px; /* ขนาดฟอนต์อินพุต */
    width: 100%;
    resize: none; /* ห้ามผู้ใช้ลากขยายกล่องเอง */
    min-height: 40px; /* ความสูงเริ่มต้น */
    max-height: 120px; /* ความสูงสูงสุดก่อนที่จะเกิด Scrollbar (ปรับได้ตามต้องการ) */
    box-sizing: border-box;
    padding: 10px;
    font-family: inherit;
    line-height: 1.5;
}

#send-button {
    background-color: #007bff; /* สีพื้นหลังปุ่มส่ง */
    color: white; /* สีของข้อความปุ่มส่ง */
    padding: 10px 15px; /* ระยะห่างภายในปุ่มส่ง */
    border: none; /* ไม่มีเส้นขอบปุ่มส่ง */
    border-radius: 8px; /* มุมกลมของปุ่มส่ง */
    cursor: pointer; /* รูปแบบเคอร์เซอร์เมื่อวางเหนือปุ่ม */
    font-size: 18px; /* ขนาดฟอนต์ปุ่มส่ง */
}

#send-button:hover {
    background-color: #0056b3; /* สีพื้นหลังเมื่อวางเคอร์เซอร์เหนือปุ่มส่ง */
}

#welcome-container {
    text-align: center;
    background-color: #ffffff;
    padding: 40px 20px 20px; /* เพิ่ม padding ด้านบนเพื่อเว้นที่สำหรับโลโก้ */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 600px;
    position: relative;
}

/* เพิ่มสไตล์สำหรับโลโก้สำนักงาน */
.header-logo {
    text-align: center;
    margin-top: 10px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 10px;
}

.office-logo {
    width: 200px; /* ขนาดโลโก้ */
    height: auto; /* ปรับขนาดอัตโนมัติให้คงอัตราส่วน */
}

/* เพิ่มสไตล์สำหรับรูปภาพของ SaraBOT */
.sarabot-image-container {
    margin-top: 20px; /* เพิ่มระยะห่างด้านบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
}

.sarabot-image {
    width: 300px; /* ขนาดรูปของ SaraBOT */
    height: auto; /* ปรับขนาดอัตโนมัติให้คงอัตราส่วน */
}

.button {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    font-size: 18px;
    border-radius: 8px;
    font-family: "Kanit", sans-serif;
    font-style: normal;
}

.button:hover {
    background-color: #0056b3;
}

.train-header {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #007bff; /* สีฟ้าสำหรับหัวข้อ */
}

.input-field {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 18px;
}

#message-box {
    margin-top: 20px;
    color: green;
    font-size: 18px;
    text-align: center;
}

/* สไตล์สำหรับฟอร์มการสอน */
#train-form label {
    font-size: 18px;
    color: #333;
}

#train-form {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.version {
    color: rgb(85, 85, 85);
    font-size: 14px;
    text-align: center;
}

.kanit {
    font-family: "Kanit", sans-serif;
    line-height: 1.2;
    font-style: normal;
  }

@media only screen and (max-width: 480px) {
  body {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    overflow-y: auto;
    padding: 10px;
  }

  #welcome-container {
    padding: 20px 10px;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
  }

  .header-logo {
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .office-logo {
    width: 140px; /* ย่อโลโก้ให้พอดีจอ */
  }

  .sarabot-image-container {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .sarabot-image {
    width: 200px; /* ย่อขนาด SaraBOT */
  }

  .kanit h1 {
    font-size: 20px;
  }

  .kanit h2 {
    font-size: 18px;
  }

  .kanit p {
    font-size: 16px;
  }

  .button {
    font-size: 16px;
    padding: 12px 20px;
    width: 100%; /* ปรับปุ่มให้กว้างเต็มจอ */
    box-sizing: border-box;
  }

  .version {
    font-size: 12px;
    margin-top: 20px;
  }

  #input-container {
    flex-direction: column;
    padding: 8px;
    position: static;
    width: 100%;
    max-width: none;
  }

  #send-button {
    width: 100%;
    font-size: 16px;
  }
}

/* เส้นคั่น */
hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

/* เน้นส่วนอ้างอิง */
strong {
    color: #2c3e50;
    font-weight: 600;
}

/* จัดระยะห่างบรรทัด */
p {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* การตกแต่ง Animation กำลังคิด (Typing Indicator) */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    height: 24px;
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    background-color: #888; /* สีของจุด */
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

/* หน่วงเวลาให้จุดขยับไม่พร้อมกัน (เกิดเอฟเฟกต์คลื่น) */
.typing-indicator .dot:nth-child(1) {
    animation-delay: -0.32s;
}

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

/* สร้างการเคลื่อนไหว (ขยาย-ย่อ) */
@keyframes typingBounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.2);
    }
}

/* เมื่อช่องพิมพ์ถูกปิดใช้งาน (รอ AI ตอบ) */
#message:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.7;
}

/* เมื่อปุ่มส่งถูกปิดใช้งาน */
#send-button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    transform: none; /* ปิดเอฟเฟกต์การกด */
}

.bot-reply {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 70%;
    min-width: 0;
}

.bot-reply .bot-message {
    box-sizing: border-box;
    max-width: 100%;
}

.chat-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #555;
    font-size: 13px;
}

.chat-feedback-button {
    padding: 5px 9px;
    border: 1px solid #ccd3d9;
    border-radius: 16px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font: inherit;
}

.chat-feedback-button:hover,
.chat-feedback-button:focus-visible {
    border-color: #007bff;
}

.chat-feedback-button.selected {
    border-color: #007bff;
    background: #e8f2ff;
}

.chat-feedback-button:disabled {
    cursor: default;
}

.chat-feedback-status {
    flex-basis: 100%;
    min-height: 1em;
}

@media only screen and (max-width: 480px) {
    .bot-reply {
        max-width: 85%;
    }
}