/* ═══════════════════════════════════════════════════════════════════════════ */
/* MAIN LAYOUT STRUCTURE                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* The main container holding both Sidebar and Chat Window */
.whatsapp-layout {
  display: flex;                /* Aligns children (Sidebar/Chat) side-by-side */
  width: 100%;                  /* Forces full width of the container */
  height: 85vh;                 /* Fixed height (adjusts to viewport) to enable internal scrolling */
  background-color: #f0f2f5;    /* Light grey background behind everything */
  border: 1px solid #d1d7db;
  border-radius: 0;             /* WhatsApp Web is usually square, but you can use 8px */
  overflow: hidden;             /* Prevents the whole page from scrolling */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* LEFT SIDEBAR (Chat List)                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.sidebar {
  width: 35%;                   /* Fixed width for sidebar (usually 30-35%) */
  min-width: 300px;             /* Prevent it from getting too narrow */
  max-width: 450px;
  background-color: #ffffff;
  border-right: 1px solid #d1d7db;
  display: flex;
  flex-direction: column;       /* Stacks search bar (future) and list vertically */
}

/* The scrollable container for the list of chats */
#chats_list {
  flex: 1;                      /* Fills all available vertical space */
  overflow-y: auto;             /* Enables scrolling ONLY for the list */
  height: 100%;
}

/* Individual Chat Item Styling */
.chat-list-item {
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-list-item a {
  display: block;               /* Makes the whole link area clickable */
  padding: 12px 15px;
  text-decoration: none;
  color: inherit;
}

.chat-list-item:hover {
  background-color: #f5f6f6;    /* Light hover effect */
}

/* Remote Info (Name & Number row) */
.chat-list-item .remote-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.chat-list-item .name {
  font-size: 16px;
  color: #111b21;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list-item .number {
  font-size: 12px;
  color: #008069;               /* WhatsApp Green for numbers */
  font-weight: normal;
}

/* Last Message Preview */
.chat-list-item p {
  margin: 0;
  font-size: 13px;
  color: #667781;               /* Subtitle grey */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RIGHT CHAT WINDOW                                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.chat-window {
  flex: 1;                      /* Takes remaining width (65-70%) */
  display: flex;
  flex-direction: column;
  background-color: #efeae2;    /* WhatsApp Chat Background Color */
  /* Optional: Add a subtle background pattern image here if you have one */
  position: relative;
}

/* Turbo Frame must act as a flex container to push input to bottom */
turbo-frame#active_chat_window {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #667781;
  background-color: #f0f2f5;
  border-bottom: 6px solid #43cba8; /* Decorative line */
}

/* Header (Contact Name) */
.chat-header {
  background-color: #f0f2f5;
  padding: 10px 16px;
  border-bottom: 1px solid #d1d7db;
  height: 60px;                 /* Fixed height for stability */
  display: flex;
  align-items: center;
  flex-shrink: 0;               /* Prevents header from shrinking */
}

.chat-header h3 {
  margin: 0;
  font-size: 16px;
  color: #111b21;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MESSAGES AREA                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* The scrollable area for bubbles */
.messages-list {
  flex: 1;                      /* Pushes Header up and Input down */
  overflow-y: auto;             /* Scrollable */
  padding: 20px 50px;           /* Padding sides for readability */
  display: flex;
  flex-direction: column;
  gap: 2px;                     /* Gap between message groups */
}

/* Message Rows */
.message {
  display: flex;
  margin-bottom: 8px;
  width: 100%;
}

.message-received {
  justify-content: flex-start;
}

.message-sent {
  justify-content: flex-end;
}

/* The Bubble Itself */
.message-bubble {
  max-width: 65%;
  padding: 6px 7px 8px 9px;
  border-radius: 7.5px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  position: relative;
  font-size: 14.2px;
  line-height: 19px;
}

.message-received .message-bubble {
  background-color: #ffffff;
  border-top-left-radius: 0;    /* Corner styling like WhatsApp */
}

.message-sent .message-bubble {
  background-color: #d9fdd3;
  border-top-right-radius: 0;
}

.message-body {
  margin: 0;
  color: #111b21;
  word-wrap: break-word;
}

.message-time {
  float: right;
  margin-left: 10px;
  margin-top: 4px;
  font-size: 11px;
  color: #667781;
  position: relative;
  top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MEDIA ATTACHMENTS                                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.message-image-container,
.message-audio-container,
.message-video-container {
  margin-top: 4px;
  margin-bottom: 4px;
  display: block;
}

.message-img-small {
  max-width: 300px;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  cursor: pointer;
}

/* Audio Player */
audio {
  width: 260px;
  height: 40px;
  margin: 5px 0;
}

.message-audio-player {
  width: 100%;
  max-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FOOTER - MESSAGE INPUT                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

.message-input {
  background-color: #f0f2f5;
  padding: 10px 16px;
  min-height: 62px;
  display: flex;
  align-items: center;
  flex-shrink: 0;               /* Prevents input from shrinking */
  border-top: 1px solid #d1d7db;
}

.message-input form {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: center;
}

/* Text Field */
.message-input input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #fff;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  background-color: #ffffff;
}

.message-input input[type="text"]:focus {
  border-color: #fff;           /* WhatsApp keeps it white */
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* File Upload Label/Button */
.message-input label[for="message_files"] {
  cursor: pointer;
  color: #54656f;
  padding: 8px;
}

.message-input label[for="message_files"]:hover {
  color: #111b21;
}

/* Hide the actual file input */
.message-input input[type="file"] {
  display: none;
}

/* Send Button */
.message-input input[type="submit"] {
  background-color: transparent;
  color: #54656f;               /* Or use #00a884 for Green button */
  border: none;
  cursor: pointer;
  font-weight: bold;
  padding: 8px 15px;
  text-transform: uppercase;    /* Optional */
}

/* If you want a Green Send Button like Web */
/*
.message-input input[type="submit"] {
  background-color: transparent; 
  color: #00a884; 
  font-size: 24px; 
}
*/