/* src/features/chat/-new/styles/chat.css */

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro/SourceSansPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro/SourceSansPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro/SourceSansPro-It.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}


body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
}


/* Chat container layout */
.chat-container {
  background-color: #f5f4ed; /* Matches your desired background color */
  height: 100vh; /* Full viewport height */
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrollbars from affecting layout */
  position: relative;
  z-index: 1; /* Ensure proper stacking below BottomNav */
}


.chat-message-section {
  flex: 1;
  overflow-y: auto;
  border-radius: 10px;
  background-color: #fff;
  margin: 10px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


/* Main chat area */
.chat-main {
  flex: 1; /* Make it take up remaining space */
  overflow-y: auto; /* Allow scrolling for messages */
  padding: 15px; /* Add padding for aesthetics */
  padding-top: 75px; /* Space for absolute header (60px + 15px) */
  padding-bottom: 100px; /* Extra space for fixed input section */
}

/* Messages section */
.chat-messages {
  position: relative;
  z-index: 1;
  background-color: transparent; /* Transparent to allow full bleed */
  background-image: url('/images/chatbg.png'); /* Update path if needed */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Keeps it static */
  background-repeat: no-repeat;
  padding: 20px;
}




.message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.message {
  display: flex;
  align-items: flex-end;
  margin-bottom: 15px;
  gap: 10px;
  flex-direction: row; /* Align all messages left */
  text-align: left;
}

/* Profile picture */
.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Message content wrapper */
.message-content {
  position: relative;
  padding: 10px 15px;
  border-radius: 15px;
  max-width: 70%;
  background-color: #faf8d7; /* User's message background color */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}

/* Incoming messages (other users) */
.message-incoming .message-content {
  background-color: #e8fad7; /* Other users' message background color */
}


/* Triangle (chat bubble tail) */
.message-content::after {
  content: '';
  position: absolute;
  bottom: 10px; /* Slightly above the bottom of the chat bubble */
  left: -6px; /* Aligns with the left edge */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0; /* Creates a right-pointing triangle */
  border-color: #faf8d7 transparent transparent transparent; /* Match bubble color */
  transform: translateY(50%) rotate(180deg); /* Adjusts alignment and rotates triangle */
  
}

.message-incoming .message-content::after {
  border-color: #e8fad7 transparent transparent transparent; /* Match bubble color */
}


/* "Tag" pointing to profile image for incoming messages */
.message-incoming .message-bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #f1f1f1 transparent transparent transparent;
}



/* Sender name */
.message-user {
  font-size: 0.85rem;
  font-weight: normal;
  margin-bottom: 4px;
}

/* Message text */
.message-text {
  font-size: .9rem;
  line-height: 1.5;
}

/* Timestamp and read receipt container */
.message-timestamp-container {
  display: flex; /* Flexbox layout */
  justify-content: flex-start; /* Align timestamp and read receipt to the left */
  align-items: center; /* Vertically align items */
  gap: 5px; /* Add space between the timestamp and checkmark */
  font-size: 0.85rem; /* Adjust font size */
  color: #999; /* Gray color */
  margin-top: 5px; /* Optional spacing above */
}

/* Timestamp */
.message-timestamp {
  display: flex; /* Use flexbox for alignment */
  justify-content: space-between; /* Space out items */
  align-items: center; /* Vertically align items */
  font-size: 0.85rem; /* Adjust font size if needed */
  color: #999; /* Light gray color */
  margin-top: 5px; /* Space above */
}

/* Style for the checkmark */
.read-receipt {
  margin-left: 8px; /* Optional spacing between timestamp and check */
  color: #999; /* Match timestamp color */
  font-size: 0.85rem; /* Ensure size matches the timestamp */
}

/* Input section */
.chat-input-section {
  background-color: transparent; /* Transparent to avoid visual bulk */
  padding: 0.25rem 0.5rem; /* Minimal padding for just the input bubble */
  position: fixed; /* Fixed to bottom of screen */
  bottom: 60px; /* Above BottomNav */
  left: 0;
  right: 0;
  z-index: 100; /* Above chat messages but below BottomNav */
}

/* Wrapper for input and icons */
.chat-input-form {
  padding-right: 1rem; /* leave room for mic icon */
  font-size: 1rem;
  min-height: 3.5rem;
}

/* Container wrapping the input and icons */
.chat-input-wrapper {
  display: flex;
  align-items: center;
  width: calc(100% - 1rem); /* Full width with small margins */
  max-width: none; /* Remove max-width constraint */
  padding: 12px 16px; /* Increased padding for better touch targets */
  background-color: #fff;
  border-radius: 24px; /* Slightly more rounded */
  border: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 0.5rem; /* Center with small margins */
  min-height: 48px; /* Minimum height for better mobile usability */
}


/* Input box */
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  margin: 0 8px;
}

.chat-input-container {
  display: flex;
  align-items: center;
  flex: 1;         /* expand to fill leftover space */
  margin: 0 8px;   /* horizontal gap from the icons */
  width: 100%;
}

.chat-mentions-input {
  width: 100%;
  min-width: 225px;
}



/* Hidden file input */
.hidden-file-input {
  display: none;
}

/* Icon styles */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevent icons from shrinking */
  width: 24px;
  height: 24px;
  margin: 0 2px;
  color: #555;
  cursor: pointer;
}

.right-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto; /* Push to the right */
  min-width: 80px; /* Increased minimum width for better icon spacing */
  flex-shrink: 0; /* Prevent shrinking on mobile */
  gap: 4px; /* Add space between icons */
}


.icon:hover {
  color: #000;
}

.icon.mic {
  margin-left: 2px;
  margin-right: 2px;
}

.icon.send {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: #555;
  margin-left: auto; /* Keep it right-aligned */
}

.icon.send:hover {
  color: #000;
}

.icon.emoji {
  margin-left: 2px;
  margin-right: 2px;
}

.icon.paperclip {
  margin-left: 2px;
  margin-right: 2px;
}

.mic-icon {
  right: 1rem;
  bottom: 1rem;
}

/* Attachments list */
.attachments-list {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.attachment {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.attachment-link {
  text-decoration: none;
  color: #2F5D50;
  margin-right: 5px;
}

.remove-attachment {
  background: none;
  border: none;
  color: #ff4d4d;
  cursor: pointer;
}

/* Emoji picker */
.emoji-picker {
  position: absolute;
  bottom: 60px;
  right: 20px;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.emoji-picker-container {
  position: absolute;
  bottom: 50px; /* adjust as needed */
  left: 10px;   /* or right: 10px if you prefer */
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* UserList container */
.user-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #ddd;
  background-color: #f9f9f9;
}

/* Header section */
.user-list-header {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}

.user-list-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.user-search-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* User list body */
.user-list-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

/* User item */
.user-list-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-list-item:hover {
  background-color: #f1f1f1;
}

.current-user {
  background-color: #E8F1EE;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
}

/* Empty user list */
.user-list-empty {
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  margin-top: 20px;
}

.message-attachments img {
  max-width: 100%; /* Prevent the image from exceeding the chat bubble width */
  max-height: 200px; /* Optional: Set a maximum height for the image */
  -o-object-fit: cover;
     object-fit: cover; /* Ensure the image scales properly */
  border-radius: 10px; /* Match the chat bubble's rounded corners */
  display: block; /* Ensures the image stays within its container */
  margin-top: 5px; /* Add some spacing between the text and the image */
}


.attachment-preview {
  max-width: 100px;
  max-height: 100px;
  margin-right: 5px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Profile Modal Overlay */
.profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Chat Groups List Container - different for list vs chat view */
.chat-groups-container {
  padding: 1rem;
  height: 100%;
  /* Defensive styling to prevent loading issues */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* List view: restore white background and proper styling */
.chat-list-view .chat-groups-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: none; /* Container already has shadow */
  height: auto;
  max-width: 100%; /* Prevent overflow */
  /* Additional defensive styling */
  width: 100%;
  overflow-x: hidden;
}

/* Chat view: transparent background */
.chat-shell:not(.chat-list-view) .chat-groups-container {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Reset list style for chat groups */
.chat-groups-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* Chat Group Item styled similar to categoryItem */
.chat-group-item {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center; /* Center align items */
  gap: 1.25rem;
  
  /* Prevent overflow and ensure proper margins - DEFENSIVE */
  width: calc(100% - 2rem); /* Account for container padding */
  max-width: calc(100% - 2rem); /* Enforce max width */
  min-width: 0; /* Allow flexbox to shrink */
  margin-left: 1rem;
  margin-right: 1rem;
  box-sizing: border-box;
  overflow: hidden; /* Prevent content overflow */
  
  /* Ensure consistent positioning */
  position: relative;
}

.chat-group-description {
  font-weight: normal;
  /* You can add additional styling as needed */
  margin: 0.5rem 0;
}


/* For odd-numbered chat groups */
.chat-group-item:nth-child(odd) {
  background-color: #F0ECE6; /* Warm ritual off-white */
}

/* For even-numbered chat groups */
.chat-group-item:nth-child(even) {
  background-color: #E8E4DC; /* Grounded neutral */
}


.chat-group-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Chat Group Link styling (if using an anchor) */
.chat-group-link {
  display: block;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

/* Chat Header styling (for the selected chat view) */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f5f4ed;
  position: absolute; /* Use absolute within container */
  top: 0;
  left: 0;
  right: 0;
  /* Removed width: 100% - left + right already makes it full width */
  z-index: 50; /* Above messages */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  margin: 0;
  height: 60px; /* Fixed height for consistency */
}

/* Chat Title styled similar to categoryTitle */
.chat-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

/* Chat Back Button styled similar to ForumBackButton */
.back-button {
  background-color: #8FAAA1;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  margin-left: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}


/* Optional: Adjust Message List styling if desired */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

/* UserTagging.module.css */
.mentionsWrapper {
  position: relative;
  flex: 1;
  min-width: 0; /* This allows the flex item to shrink below its content size */
  margin: 0 8px;
}

/* These classes are important for styling the suggestions */
.suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
}

.focusedSuggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.profilePicture {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.userName {
  font-size: 14px;
}

.loadingIndicator {
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 12px;
  color: #888;
}


/* Important: Override react-mentions styles to ensure the suggestions list stays visible */
/* Override react-mentions styles */
:global(.react-mentions__input) {
  border: none;
  outline: none;
  width: 100%;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

/* Make sure suggestions appear above other content */
:global(.react-mentions__suggestions) {
  position: absolute !important;
  z-index: 100 !important;
}

.mention {
  color: #2F5D50;
  font-weight: bold;
  background: #E8F1EE;
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 2px;
  display: inline-block;
}

/* --- Chat Shell - Different styling for list vs chat view --- */
.chat-shell {
  width: 100%;
  height: 100vh;
  margin: 0;
  background: #f5f4ed; /* Match body background */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  
  /* Default: no borders for chat view */
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Chat Shell for LIST view - restore white container */
.chat-shell.chat-list-view {
  width: calc(100% - 1rem);
  max-width: 1200px;
  margin: 0.5rem auto;
  margin-bottom: calc(var(--bottom-nav-height, 60px) + 1rem); /* Space for bottom nav + margin */
  height: auto;
  min-height: calc(100vh - var(--bottom-nav-height, 60px) - 2rem); /* Account for nav height and margins */
  
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  
  /* Prevent off-screen extension */
  max-width: calc(100vw - 1rem);
  overflow-x: hidden;
  box-sizing: border-box;
}

/* space under list H1 */
.chat-title {
  margin: 0 0 12px 0; /* or 16px if you want more */
}

/* center each chat card's content */
.chat-group-item--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* ensure text is centered too */
}

/* inline row: [avatar] [name], centered as a unit */
.chat-group-core {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

/* small round avatar (reuse if you already have .pod-avatar) */
.pod-avatar {
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Avatar sizing */
img.pod-avatar--sm {
  width: 40px;       /* or 32px if you prefer */
  height: 40px;
  max-width: none;   /* cancel global max-width:100% */
  -o-object-fit: cover;
     object-fit: cover; /* keep the face centered */
  border-radius: 9999px;
  display: inline-block; /* avoids weird shrink in flex contexts */
}


/* optional: make the name a touch bolder */
.chat-group-name {
  font-size: clamp(1rem, 4vw, 1.5rem); /* Auto-resize to prevent wrapping */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 60px); /* Account for avatar + gap */
  flex: 1; /* Allow flexible sizing within flex container */
}

/* === MOBILE RESPONSIVE STYLES === */
@media (max-width: 768px) {
  /* Chat shell - list view keeps container on mobile */
  .chat-shell.chat-list-view {
    width: calc(100% - 0.5rem);
    margin: 0.25rem auto;
    margin-bottom: calc(var(--bottom-nav-height, 60px) + 0.5rem); /* Space for bottom nav + margin */
    min-height: calc(100vh - var(--bottom-nav-height, 60px) - 1rem); /* Account for nav height and margins */
    max-width: calc(100vw - 0.5rem);
    box-sizing: border-box;
  }
  
  /* Chat shell - chat view goes full screen */
  .chat-shell:not(.chat-list-view) {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
  }
  
  /* Chat container mobile adjustments */
  .chat-container {
    height: calc(100vh - 60px);
    width: 100%;
  }
  
  /* Chat input section - ensure full width on mobile */
  .chat-input-section {
    left: 0;
    right: 0;
    padding: 0.25rem; /* Minimal padding on mobile */
  }
  
  /* Chat input wrapper - optimized for mobile devices */
  .chat-input-wrapper {
    width: calc(100% - 0.5rem);
    margin: 0 0.25rem;
    padding: 10px 14px;
    min-height: 46px;
  }
  
  /* Chat groups container - proper spacing on mobile */
  .chat-groups-container {
    padding: 0.75rem;
    height: auto;
  }
  
  /* Chat group items - prevent overflow on mobile */
  .chat-group-item {
    width: calc(100% - 1rem);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.75rem 1rem;
  }
  
  /* Chat header mobile adjustments */
  .chat-header {
    padding: 0.75rem 1rem;
    background-color: #f5f4ed;
  }
  
  /* Chat main area mobile adjustments */
  .chat-main {
    padding: 8px;
    padding-top: 68px; /* Space for header on mobile (60px + 8px) */
    padding-bottom: 110px; /* Extra space for fixed input */
  }
  
  /* Icon sizing for mobile */
  .icon {
    width: 28px;
    height: 28px;
    margin: 0 3px;
  }
  
  /* Right icons container - better spacing on mobile */
  .right-icons {
    min-width: 90px;
    gap: 6px;
  }
}

/* Additional styles for very narrow screens (like Pixel 7 in portrait) */
@media (max-width: 430px) {
  .chat-input-wrapper {
    width: calc(100% - 0.25rem);
    margin: 0 0.125rem;
    padding: 8px 12px;
  }
  
  .chat-input-section {
    padding: 0.2rem; /* Even less padding on narrow screens */
  }
  
  .right-icons {
    min-width: 100px;
    gap: 8px;
  }
}