/* Message Styling - User-ID based automatic styling */

/* Force own messages to right side with direct approach */
#messages_container .message-container.current-user {
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
  flex-direction: row-reverse !important;
  width: auto !important;
  /* Allow it to be as wide as needed */
  text-align: right !important;
}

/* Hide avatar for current user's messages */
#messages_container .message-container.current-user .message-avatar {
  display: none !important;
}

/* Rest of the styling */
#messages_container .message-container {
  margin-bottom: 1rem !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  justify-content: flex-start !important;
  width: auto !important;
  /* Remove the width constraint */
  max-width: 80% !important;
  /* Limit max width instead */
}

/* User name display */
#messages_container .message-container .sender-name {
  display: inline !important;
}

#messages_container .message-container .current-user-indicator {
  display: none !important;
}

/* For current user's messages, show "You" instead of name */
#messages_container .message-container.current-user .sender-name {
  display: none !important;
}

#messages_container .message-container.current-user .current-user-indicator {
  display: inline !important;
}

/* Message header alignment */
#messages_container .message-container .message-header {
  justify-content: flex-start !important;
}

#messages_container .message-container.current-user .message-header {
  justify-content: flex-end !important;
}

/* Message bubble styling */
#messages_container .message-container .message-bubble {
  background-color: #f3f4f6 !important;
  /* light gray */
  color: #111827 !important;
  /* dark text */
}

#messages_container .message-container.current-user .message-bubble {
  background-color: #2563eb !important;
  /* blue */
  color: white !important;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  #messages_container .message-container .message-bubble {
    background-color: #374151 !important;
    /* dark gray */
    color: #f9fafb !important;
    /* light text */
  }

  #messages_container .message-container.current-user .message-bubble {
    background-color: #1d4ed8 !important;
    /* darker blue */
  }
}

/* Actions alignment */
#messages_container .message-container .message-actions {
  justify-content: flex-start !important;
}

#messages_container .message-container.current-user .message-actions {
  justify-content: flex-end !important;
}

/* Reactions alignment */
#messages_container .message-container .message-reactions {
  justify-content: flex-start !important;
}

#messages_container .message-container.current-user .message-reactions {
  justify-content: flex-end !important;
}

/* Fix long filename wrapping in file overlays */
.file-name,
.file-info-overlay .file-name,
.image-info-overlay .file-name {
  word-break: break-all !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* Ensure file info overlays have proper text wrapping */
.file-info-overlay,
.image-info-overlay {
  word-wrap: break-word !important;
  hyphens: auto !important;
}

.file-info-content {
  word-wrap: break-word !important;
  hyphens: auto !important;
}