/* ========== Global Page Styling ========== */
:root {
  --primary-color: #333;
  --secondary-color: #f1f1f1;
  --highlight-color: #007bff;
  --light-color: #f5f5f5;
  --dark-color: #0062cc;
  --white-color: #fff;
  --black-color: #000;
  --transition-speed: 0.3s;
  --border-style: 1px solid #ccc;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: #f5f5f5;
  color: var(--primary-color);
}

header {
  background-color: #007bff; /* Brand color from previous design */
  color: #fff;
  padding: 1rem;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
}

main {
  padding: 1rem 2rem;
}

/* ========== Message List ========== */
.message-list {
  margin-top: 10px;
}

.message-item {
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 5px;
  position: relative; /* so we can position card image inside */
}

.message-header {
  font-weight: bold;
  margin-bottom: 6px;
  color: #007bff;
  /* Could also reference “Card #” styling from your prior code */
}

.message-body-text {
  margin: 8px 0;
}

/* ========== INBOX SUMMARIES ========== */
.inbox-summaries {
  margin-bottom: 20px;
}

.conversation-row {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  justify-content: space-between; /* push view button to far right? */
}

.conversation-details {
  flex: 1; /* let details expand */
  margin-left: 10px; /* after the icon */
}

.conversation-title {
  font-weight: bold;
  color: #007bff;
}

.last-message-excerpt {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #666;
}

/* unread highlight */
.unread-conversation {
  background: #e9f2ff; /* slight highlight for unread */
}

/* "View" button (optional if row itself is clickable) */
.btn-view {
  background: #007bff;
  border: none;
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
}
.btn-view:hover {
  background: #0056b3;
}

/* === Backdrop Overlay === */
.conversation-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* === Modal Container (Smaller) === */
.conversation-modal {
  background: #fff;
  width: 650px; /* moderate width */
  max-width: 90%;
  border-radius: 6px;
  position: relative;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Close “×” in top-right corner */
.conversation-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
}

/* === Two-Column Layout via Flex === */
.conversation-modal-content {
  display: flex;
  gap: 20px;
}

/* Left panel for the card image */
.conversation-left-panel {
  flex: 0 0 30%; /* 30% of width */
}

/* Right panel for the conversation & input */
.conversation-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column; /* vertical stacking for title, messages, input */
}

/* Title at the top of the right panel */
.conversation-modal-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Scrollable messages area */
.conversation-modal-messages {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  max-height: 400px; /* Set the maximum height for larger screens */
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
}

/* Each group is a block with a small top margin */
.message-group {
  margin: 8px 0;
}

/* The user’s name or label at the top of the group */
.message-group-header {
  display: flex;
  align-items: center; /* vertically center the icon & name */
  font-weight: bold;
  margin-bottom: 4px;
  color: #007bff;
}

/* The small inline user icon next to the name */
.user-chat-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px; /* spacing before the user name */
  border: 1px solid #fff; /* optional border or box-shadow */
}

/* A bubble around all the messages from one user */
.message-group-bubble {
  background: #f1f1f1;
  padding: 8px;
  border-radius: 6px;
}

/* individual lines inside the bubble */
.message-line {
  margin-bottom: 6px; /* spacing between lines */
}

/* My messages (right side) */
.my-group {
  text-align: right; /* position messages to the right */
}

/* My messages styling */
.my-group .message-group-bubble {
  background: #e0f7fa;
  margin-left: 30%; /* push it to the right */
}
.my-group .message-group-header {
  justify-content: flex-end;
}

/* The other user’s messages (left side) */
.their-group {
  text-align: left;
}
.their-group .message-group-bubble {
  background: #f1f1f1;
  margin-right: 30%;
}

/* Each message item */
.message-item {
  padding: 5px 0;
}

/* === Input at bottom (textarea + button) === */
.conversation-message-input {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* The text area for composing new messages */
.conversation-input-text {
  flex: 1;
  height: 50px;
  resize: vertical;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  font-size: 1rem;
}

/* The send button */
.conversation-send-button {
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
  align-self: center;
}
.conversation-send-button:hover {
  background: #0056b3;
}

/* === Card Wrapper & Icon Overlays === */
.card-photo-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

.message-card-image {
  width: 100%; /* the left panel is only ~30% total modal width */
  border: 1px solid #ccc;
  border-radius: 4px;
  object-fit: cover;
  max-height: 300px; /* keep it from getting too tall */
}

.user-profile-icon {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.summary-user-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px; /* spacing from text */
  border: 2px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.no-scroll {
  overflow: hidden;
}

/* 
    MEDIA QUERY:
    When screen width <= 600px, switch to a single-column layout
  */
/* Global box-sizing for consistency */
@media (max-width: 600px) {
  /* Modal settings */
  .conversation-modal {
    width: 90vw; /* 70% of the viewport width */
    height: 75vh; /* 95% of the viewport height */
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content overflow */
  }

  /* Stack the card image and the right panel vertically */
  .conversation-modal-content {
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    flex: 1;
    overflow: hidden;
    align-items: center;
    gap: 0px;
  }

  /* Left panel with the card image */
  .conversation-left-panel {
    flex: 0 0 auto; /* Use natural height */
    width: 50%; /* Full width on mobile */
    margin-bottom: 10px; /* Spacing between image and the following content */
  }

  /* Right panel for title, messages, and input */
  .conversation-right-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
  }

  /* Title at the top of the right panel */
  .conversation-modal-title {
    flex: 0 0 auto; /* Fixed height based on content */
    margin-bottom: 5px;
  }

  /* Chat (messages) area takes available space and scrolls when needed */
  .conversation-modal-messages {
    flex: 1 1 auto; /* Expand to fill available space */
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
    overflow-y: auto;
    margin-bottom: 10px; /* Spacing before the input area */
  }

  /* Input area stays pinned at the bottom */
  .conversation-message-input {
    flex: 0 0 auto; /* Fixed height */
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .conversation-input-text {
    flex: 1;
    height: 50px; /* Fixed height for the textarea */
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    font-size: 1rem;
    min-width: 0; /* Prevents flex overflow issues */
  }

  .conversation-send-button {
    white-space: nowrap;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
    align-self: center;
  }

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