/**
 * AVL Auto Live - Chat Styles
 * ใช้กับ Waiting Room และ Live Room
 */

/* พื้นที่รายการแชท */
#avl-al-chat-list {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  height: 360px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column-reverse; /* ข้อความใหม่ขึ้นบน */
}

/* ข้อความ */
.avl-chat-message {
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.avl-chat-meta {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}
.avl-chat-meta span {
  color: #6b7280;
  font-size: 12px;
  margin-left: 4px;
}

/* Composer */
#avl-al-chat-form {
  display: flex;
  gap: 8px;
  margin-bottom: 6px; /* เว้นช่องด้านล่างสำหรับ reactions */
}
#avl-al-chat-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}
#avl-al-chat-form button[type=submit] {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
}

/* Quick reactions (ย้ายมาอยู่ด้านล่าง) */
.avl-al-quick-reactions {
  margin-top: 4px;
  display: flex;
  gap: 6px;
}
.avl-al-quick-reactions .avl-al-react {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
}
.avl-al-quick-reactions .avl-al-react:hover {
  background: #f3f4f6;
}

/* Scrollbar */
#avl-al-chat-list::-webkit-scrollbar {
  width: 6px;
}
#avl-al-chat-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}