/* ============================
   ⚡ ALERT CHAT ROOM STYLE
   ============================ */

/* Use usable height from app layout */
#alertChatContainer {
  display: flex;
  flex-direction: column;
  height: var(--usable-height); /* fit between top & bottom bars */
  background: #1e1e1e;
  color: #fff;
  font-family: "Segoe UI", sans-serif;
}

/* Chat messages container */
#chatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column; /* early messages at top, latest at bottom */
  justify-content: flex-end;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
  scroll-behavior: smooth; /* smooth scroll for new messages */
}

#chatMessages::-webkit-scrollbar {
  width: 6px;
}

#chatMessages::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

/* Individual message bubbles */
.message {
  max-width: 75%; /* slightly wider for full screen */
  padding: 10px 14px;
  border-radius: 18px;
  word-wrap: break-word;
  font-size: 14px;
  display: inline-block;
  position: relative;
  line-height: 1.3;
}

.message.me {
  background: #2d89ef;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.message.other {
  background: #2e2e2e;
  color: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.message img {
  max-width: 100%;
  border-radius: 10px;
  margin-top: 5px;
}

.message small {
  display: block;
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: 2px;
}

/* Chat input area at bottom */
#chatInputContainer {
  flex-shrink: 0; /* prevent shrinking */
  display: flex;
  padding: 10px;
  background: #2c2c2c;
  border-top: 1px solid #444;

  /* ✅ fix white gap: stick input to bottom */
  position: sticky;
  bottom: 0;
  z-index: 10;
}

#chatInput {
  flex: 1;
  padding: 10px 15px;
  border-radius: 20px;
  border: none;
  outline: none;
  background: #3a3a3a;
  color: #fff;
}

#sendChatBtn {
  margin-left: 10px;
  padding: 0 16px;
  border: none;
  border-radius: 20px;
  background: #2d89ef;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

#sendChatBtn:hover {
  background: #1a5fc2;
}

/* Optional: Timestamp style (like screenshot) */
.message-time {
  font-size: 10px;
  color: #888;
  text-align: right;
  margin-top: 2px;
}

/* Optional: Smooth scroll for new messages */
#chatMessages {
  scroll-behavior: smooth;
}