/* === Live Chat Styles (Appended) === */
#chatContainer {
  margin-top: 20px;
  background: #1e1e2f;
  border: 1px solid #2a2a40;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 300px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

#chatMessages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  color: #f0f0f0;
  font-size: 14px;
}

/* Dark scrollbar for chat */
#chatMessages::-webkit-scrollbar {
  width: 8px;
}
#chatMessages::-webkit-scrollbar-track {
  background: #1a1a28;
}
#chatMessages::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}
#chatMessages::-webkit-scrollbar-thumb:hover {
  background: #666;
}

#chatMessages p {
  margin: 5px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

#chatMessages p.user {
  background: #ff69b4;
  color: #fff;
  align-self: flex-end;
  text-align: right;
}

.chat-input {
  display: flex;
  border-top: 1px solid #2a2a40;
  background: #26263a;
  padding: 8px;
}

.chat-input input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  outline: none;
  background: #1a1a28;
  color: #fff;
}

.chat-input button {
  margin-left: 8px;
  padding: 8px 14px;
  background: #ff69b4;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-input button:hover {
  background: #ff4da6;
}



/* Modern WhatsApp/Telegram inspired chat UI */

/* Chat container */
.chat-container, .chat-box {
  display: flex;
  flex-direction: column;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background: #1e1e2f;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* Header */
.chat-header {
  background: linear-gradient(90deg, #ff3e8f, #ff7eb3);
  color: #fff;
  font-weight: 600;
  padding: 12px;
  text-align: center;
}

/* Messages area */
.chat-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Common bubble style */
.chat-message {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

/* Sent (right aligned) */
.chat-message.user, .chat-message.sent {
  align-self: flex-end;
  background: #ff4da6;
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Received/system (left aligned) */
.chat-message.system, .chat-message.received {
  align-self: flex-start;
  background: #2d2d44;
  color: #ddd;
  border-bottom-left-radius: 4px;
}

/* Timestamp */
.chat-time {
  font-size: 11px;
  opacity: 0.7;
  display: block;
  margin-top: 4px;
}

/* Input area */
.chat-input-area {
  display: flex;
  padding: 10px;
  background: #2a2a3d;
  border-top: 1px solid #333;
}

.chat-input {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  background: #3a3a55;
  color: #fff;
}

.chat-send-btn {
  margin-left: 8px;
  border: none;
  background: #ff4da6;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.3s ease;
}

.chat-send-btn:hover {
  background: #ff267f;
}


/* === Embedded Live Chat Below Video (Realtime-ready) === */
.live-chat-box{display:flex;flex-direction:column;gap:8px;margin-top:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;background:#0f1020;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.live-chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:linear-gradient(135deg,#ff2aa1,#6366f1);color:#fff}
.live-chat-title{font-weight:700}
.live-chat-messages{
  /* Fill available space within the chat box and scroll when overflowing */
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-msg{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;animation:fadeIn .25s ease}
.live-msg-meta{font-size:12px;opacity:.75;margin-bottom:4px}
.live-msg-text{font-size:14px;line-height:1.35}
.live-chat-input{display:flex;gap:8px;padding:10px;background:#0b0c1a;border-top:1px solid rgba(255,255,255,.06)}
.live-chat-input input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#12132a;color:#fff}
.live-chat-input button{border:none;border-radius:10px;padding:10px 14px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff2aa1,#6366f1);transition:transform .15s ease}
.live-chat-input button:active{transform:scale(.98)}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:768px){.live-chat-messages{flex:1 1 auto;min-height:30vh;}}

#liveChatMessages{margin-bottom:auto;}