/* --- Global & Base Styles --- */

/* Define CSS Variables for easy theming and consistent values */
:root {
  /* --- Colors --- */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #333333;
  --color-text-muted: #8899a6;
  --color-heart-unliked: #657786;
  --color-heart-liked: #e0245e;
  /* Vibrant red */
  --color-brand-blue: #1DA1F2;
  /* Twitter-like blue */
  --color-background-light: #ffffff;
  --color-border-light: #e1e8ed;
  --color-shadow-light: rgba(0, 0, 0, 0.15);
  /* Soft shadow for posts */
  --color-shadow-medium: rgba(0, 0, 0, 0.25);
  /* Stronger shadow for hover */
  --color-focus-outline: rgba(29, 161, 242, 0.5);
  /* Semi-transparent blue for focus rings */
  --color-badge-danger: #dc3545;
  /* Standard Bootstrap danger red */

  /* --- Spacing --- */
  --spacing-xs: 0.3rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.8rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;

  /* --- Border Radii --- */
  --border-radius-circle: 50%;
  --border-radius-md: 0.75rem;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.3s ease;
}


/* Chat General Body Styles */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #f0f2f5;
  /* Light grey background for the page */
}


/* --- Profile Picture Styling --- */
.profile-pic-small,
.profile-pic-medium,
.profile-pic-large {
  border-radius: var(--border-radius-circle);
  object-fit: cover;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Specific sizes for small profile pictures */
.profile-pic-small {
  width: 30px;
  height: 30px;
  margin-right: var(--spacing-sm);
  border: 2px solid var(--color-border-light);
  padding: 2px;
}

/* Specific sizes for medium profile pictures */
.profile-pic-medium {
  width: 60px;
  height: 60px;
}

/* Specific sizes for large profile pictures */
.profile-pic-large {
  width: 120px;
  height: 120px;
  object-position: center;
}

/* Hover effect for all profile pictures */
.profile-pic-small:hover,
.profile-pic-medium:hover,
.profile-pic-large:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--color-shadow-medium);
  cursor: pointer;
}

/* Navbar profile picture (already has transition) */
.navbar-profile-picture {
  width: 75px;
  height: 75px;
  object-fit: cover;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.navbar-profile-picture:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--color-shadow-medium);
  cursor: pointer;
}

/* Avatar initials for placeholders */
.avatar-initial {
  background-color: #696969;
  /* Gray */
  color: white;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  /* Prevent shrinking if space is tight */
}

/* --- Post Section Styling --- */
.all-posts .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.all-posts .post {
  flex: 1 1 100%;
  /* 100% width on mobile */
  max-width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  background-color: var(--color-background-light);
  box-shadow: var(--color-shadow-light);
  margin-bottom: 2rem;
  /* Space between posts */
}

/* Post hover effect */
.post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px var(--color-shadow-light);
}

/* Prevent hover effect when modal is active */
body.modal-open .post:hover {
  transform: none;
  box-shadow: none;
}

/* Username within posts */
.username {
  font-size: 1.2rem;
  /* Slightly larger on mobile */
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Post content text */
.post-content {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
  font-size: 1rem;
  color: var(--color-text-secondary);
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 700px;
}

/* Date display within posts */
.post-date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: color var(--transition-fast);
}

.post-date:hover {
  color: var(--color-brand-blue);
}

/* Style for the "Edited" badge appended by JavaScript */
.edited-tag {
  font-size: 0.65rem;
  /* Make it a bit smaller than the date */
  padding: 0.2em 0.4em;
  vertical-align: middle;
  /* Ensure it's positioned relative to the parent, NOT absolutely to the post */
  position: relative;
  top: -1px;
  /* Small adjustment for perfect vertical alignment */
}

/* --- Like Button & Interactions --- */

.like-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-heart-unliked);
}

.like-section button.fa-heart {
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  transition: color var(--transition-medium), transform var(--transition-fast);
  outline: none;
}

.like-section button.fa-heart:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-outline);
  border-radius: var(--border-radius-circle);
}

.like-section button.far.fa-heart {
  color: var(--color-heart-unliked);
}

.like-section button.fas.fa-heart {
  color: var(--color-heart-liked);
}

.like-section button.fa-heart:hover {
  color: var(--color-heart-liked);
  transform: scale(1.15);
}

/* Comment Section Styling */
.share-btn {
  background-color: transparent;
  border: none;
  padding: 6px;
  border-radius: 50%;
  transition: transform 0.2s ease;
  cursor: pointer;
  outline: none; /* Removed default outline */
}

/* Added focus-visible for accessibility */
.share-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-outline);
  border-radius: var(--border-radius-circle);
}

/* Icon color: green */
.share-btn i {
  color: #28a745;
  /* Bootstrap green */
  font-size: 1.2rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover effect: enlarge and brighten green */
.share-btn:hover {
  transform: scale(1.2);
}

.share-btn:hover i {
  color: #218838;
  /* Slightly darker green on hover */
}

/* Comment Section Styling */
.comment-box {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: 25px;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.comment-box:focus {
  border-color: #007bff;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.comment-box::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Comment text overflow handling */
.comment-box,
.post-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Comments counter (Updated to use variable) */
.comments-counter {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-text-primary); /* Changed from #333 */
}


/* Comments list general styling */
.comments-list {
  list-style: none;
  padding-left: 0;
  margin-top: var(--spacing-md);
}

.comments-list li {
  margin-bottom: var(--spacing-sm);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Individual comment item styling (Updated to use variable) */
.comment-item {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: flex-start;
  background-color: var(--color-background-light); /* Changed from #fff */
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  overflow: hidden;
  color: #333;
  padding: 12px;
}

/* Profile image within comments */
.comment-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
  margin-right: var(--spacing-sm);
}

/* Username styling within comments */
.comment-username {
  font-size: 16px;
  color: var(--color-brand-blue);
  margin-bottom: var(--spacing-xs);
}

/* Comment text styling */
.comment-item p {
  margin: 0;
  color: var(--color-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.4;
}

/* Delete Button for Post Owner within comments */
.comment-item form button {
  font-size: 12px;
  color: var(--color-badge-danger);
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none; /* Removed default outline */
}

/* Added focus-visible for accessibility */
.comment-item form button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-focus-outline);
  border-radius: 3px;
  outline: none;
}

/* Delete Button Hover Effect for comments */
.comment-item form button:hover {
  text-decoration: underline;
}

/* --- File Input Styling --- */

.file-input-hidden {
  display: none;
}

.file-upload-button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #212529;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.file-upload-button:hover {
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.file-upload-button:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-outline);
  border-radius: var(--border-radius-circle);
}

.file-upload-button i {
  margin-right: 0.5rem;
}

.form-control-file {
  padding: 0;
  height: auto;
}

/* --- Conversation List (Messages) Styling --- */
.conversation-list {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.conversation-item {
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.conversation-item:hover {
  background-color: #f9f9f9;
}

.active-conversation {
  background-color: #e9f2ff !important;
}

.unread-conversation {
  font-weight: 500;
  background-color: #f0f8ff;
}

.badge.bg-primary {
  font-size: 0.7rem;
  padding: 0.3em 0.6em;
}

.text-muted.small {
  font-size: 0.9rem;
}

/* Optional: Style for empty state in conversations */
.text-center i.fa-comment-slash {
  color: #adb5bd;
}

/* --- Chat Interface Styling --- */
.chat-container-wrapper {
  flex-grow: 1;
  /* Allows this wrapper to take available space */
  width: 100%;
  /* Take full width */
  padding: 15px;
  /* Add some padding around the chat box */
  box-sizing: border-box;
  /* Include padding in element's total width/height */
  display: flex;
  /* Make it a flex container to center chat-main */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  min-height: 85vh;
  /* Ensure it takes at least full viewport height */
}

/* Styles for the main chat application box */
.chat-main {
  width: 100%;
  /* Take full width of its flex parent (.chat-container-wrapper) */
  max-width: 800px;
  /* Max width for the chat box on larger screens (WhatsApp-like) */
  height: calc(85vh - 20px);
  /* Adjusted to account for wrapper padding */
  min-height: 400px;
  /* Prevent it from becoming too small */
  border-radius: 10px;
  overflow: hidden;
  /* Important for rounded corners with children */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  /* White background for the main chat box */
  display: flex;
  flex-direction: column;
  /* Stack header, window, form vertically */
}

/* Chat Header */
.chat-header {
  background-color: #f7f7f7;
  border-bottom: 1px solid #dee2e6;
  color: #333;
  padding: 15px;
  /* Consistent padding */
  display: flex;
  /* Ensure flex properties apply */
  align-items: center;
  /* Vertically align items */
}

.chat-header h5 {
  color: #333;
  /* Darker text for username */
  font-weight: 500;
  margin-left: 10px;
  /* Space between avatar and username */
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.chat-header .btn {
  border-radius: 50%;
  /* Make back button circular */
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Chat Window */
.chat-window {
  background-color: #e5ddd5;
  /* WhatsApp-like background */
  display: flex;
  flex-direction: column;
  /* Ensure messages stack vertically */
  gap: 10px;
  /* Space between message groups */
  padding: 15px;
  /* Consistent padding */
  overflow-y: auto;
  /* Enable scrolling */
  flex-grow: 1;
  /* Allow chat window to take available vertical space */
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari) */
.chat-window::-webkit-scrollbar {
  width: 8px;
}

.chat-window::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-window::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.chat-window::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Chat Message Bubbles */
.message-row {
  align-items: flex-end;
  /* Align sender info and bubble to the bottom of the row */
}

.message-sender-info {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Prevent avatar/username from shrinking */
}

.chat-message-avatar {
  width: 30px;
  /* Smaller avatar for messages */
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.message-bubble-wrapper {
  position: relative;
  display: flex;
  /* To align bubble and delete button */
  align-items: center;
  /* Vertically center bubble and delete button */
}

.chat-bubble {
  border-radius: 20px;
  padding: 10px 15px;
  max-width: 100%;
  /* Limit bubble width */
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  /* Ensure long words break */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  flex-shrink: 1;
  /* Allow bubble to shrink if needed */
}

.chat-bubble.right {
  /* Sender's messages */
  background-color: #dcf8c6;
  /* WhatsApp-like green */
  color: #333;
  margin-left: auto;
  /* Push to the right in flex container */
  border-radius: 10px 10px 0 10px;
  /* Rounded corners with pointed bottom-right */
}

.chat-bubble.left {
  /* Receiver's messages */
  background-color: #e5e5e5;
  /* Light grey */
  color: #333;
  margin-right: auto;
  /* Push to the left in flex container */
  border-radius: 10px 10px 10px 0;
  /* Rounded corners with pointed bottom-left */
}

/* Styles for message images inside bubbles */
.chat-bubble .message-image-container {
  max-width: 100%;
  /* Ensure it doesn't overflow its parent bubble */
  text-align: center;
  /* Center the image if it's smaller than the container */
  margin-bottom: 8px;
  /* Space between image and text content */
}

.chat-bubble .message-image-container img {
  max-width: 280px;
  /* Adjust this value as desired for larger images */
  width: 100%;
  /* Ensure it fills its container up to max-width */
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  /* Remove extra space below image */
  margin: 0 auto;
  /* Center the image */
  border-radius: 8px;
  /* Slightly rounded corners for the image itself */
  object-fit: contain;
  /* Ensures the whole image is visible within its dimensions */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for better visual separation */
}

/* Delete message button (appears on hover) */
.delete-message-form {
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.2s ease-in-out;
  margin: 0 5px;
  /* Space between bubble and button */
  align-self: center;
  /* Vertically center with the bubble */
}

.message-row:hover .delete-message-form {
  opacity: 1;
  /* Show on hover of the message row */
}

.btn-delete-message {
  color: #dc3545;
  /* Red color for trash icon */
  font-size: 1rem;
  padding: 0.25rem;
}

.btn-delete-message:hover {
  color: #b02a37;
  /* Darker red on hover */
  background-color: transparent;
  /* Ensure no background on hover */
}

/* Chat Input Form (WhatsApp-like) */
#chat-form {
  display: flex;
  /* Make it a flex container */
  align-items: flex-end;
  /* Align items to the bottom, so textarea expands upwards from its base */
  gap: 10px;
  /* Provides consistent spacing between elements */
  padding: 15px;
  /* Add some padding around the input area */
  background-color: #f7f7f7;
  /* Light background for the input strip */
  border-top: 1px solid #dee2e6;
  /* Border at the top */
  flex-shrink: 0;
  /* Prevent form from shrinking */
}

#message-input {
  flex-grow: 1;
  /* Allow the textarea to take up available horizontal space */
  resize: none;
  /* Prevent manual resizing by the user */
  overflow-y: hidden;
  /* Hide scrollbar by default, JS will manage overflow */
  min-height: 40px;
  /* Set a minimum height for the textarea (e.g., one line) */
  max-height: 120px;
  /* Set a maximum height before a scrollbar appears (e.g., 4-5 lines) */
  border-radius: 20px;
  /* Rounded corners for a modern look */
  padding: 10px 15px;
  /* Adjust padding for better look with rounded corners */
  line-height: 20px;
  /* Set a consistent line height */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  /* Subtle inner shadow */
  border: 1px solid #ced4da;
  /* Standard Bootstrap input border */

  /* For Firefox */
  scrollbar-width: none;
  /* For IE/Edge */
  -ms-overflow-style: none;
}

/* For Webkit browsers (Chrome, Safari, newer Edge) - FIX: Moved out of nesting */
#message-input::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  -webkit-appearance: none;
}

/* Camera icon container and send button */
#chat-form .d-flex.flex-column {
  /* This targets the div around the camera button and file name */
  flex-shrink: 0;
  /* Prevent it from shrinking */
  align-self: flex-end;
  /* Align to the bottom of the form */
}

.send-button {
  /* Applied to the button directly */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* Make it a perfect circle */
  background-color: #007bff;
  /* Bootstrap primary blue */
  border-color: #007bff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Prevent shrinking */
  padding: 0;
  /* Remove default padding from buttons */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Subtle shadow for buttons */
}

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

#attached-file-name {
  max-width: 70px;
  /* Constrain the width of the filename display */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Add ellipsis if name is too long */
  white-space: nowrap;
  font-size: 0.75rem;
  /* Smaller font for filename */
  margin-top: 2px;
  /* Small space below camera icon */
}

/* Delete Chat Button Section */
.p-3.text-end form button {
  border-radius: 5px;
  /* Slightly rounded corners for the delete chat button */
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* --- Badge Animation --- */
@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.3);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.badge.bg-danger {
  background-color: var(--color-badge-danger) !important;
  animation: pulse-red 1.5s infinite;
}

/* --- General Form Styles --- */

.form-group {
  margin-bottom: 20px;
  position: relative;
}

/* Labels */
.form-label {
  font-size: 1rem;
  /* 16px */
  font-weight: bold;
  color: #4b4f56;
  /* Darker label color for better visibility */
  margin-bottom: 5px;
  display: block;
}

/* Form Fields */
.form-control {
  border: 1px solid #ddd;
  /* Lighter border */
  padding: 12px;
  border-radius: 8px;
  font-size: 1rem;
  /* 16px */
  color: #333;
  background-color: #fafbfc;
  /* Light background */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Textarea Styling */
textarea.form-control {
  resize: vertical;
}

/* Placeholder Styling */
.form-control::placeholder {
  color: #aaa;
  /* Placeholder text color */
  font-style: italic;
}

/* Form Layout Spacing */
.form-group.mb-3 {
  margin-bottom: 1.5rem;
  /* More consistent spacing */
}

/* Save Changes Button Container */
.d-flex.justify-content-end {
  margin-top: 20px;
}

/* --- Card & Column Styling (General Components) --- */

.card {
  border: 1px solid #ddd;
  /* Light border for card */
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  /* Light shadow */
  background-color: #fff;
}

/* Form Wrapper Styling */
.card-body {
  padding: 20px;
  background-color: #fafbfc;
}

/* Column Styling */
.col-md-6 {
  padding: 0 15px;
}

/* Row Spacing Between Columns */
.row {
  margin-bottom: 20px;
}


/* --- Profile Settings Styling --- */
.card-header-tabs .nav-item {
  margin-bottom: -1px;
}

.card-header-tabs .nav-link {
  color: #495057;
  background-color: #f8f9fa;
  border: 2px solid #ced4da;
  border-bottom-color: transparent;
  border-radius: 0.3rem 0.3rem 0 0;
  padding: 0.8rem 1.4rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 1;
}

.card-header-tabs .nav-item:first-child .nav-link {
  border-top-left-radius: calc(0.3rem - 1px);
}

.card-header-tabs .nav-item:last-child .nav-link {
  border-top-right-radius: calc(0.3rem - 1px);
}

.card-header-tabs .nav-link:hover {
  color: #0d6efd;
  background-color: #e9f0f8;
  border-color: #0d6efd;
  z-index: 2;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header-tabs .nav-link.active {
  color: #0d6efd;
  background-color: #fff;
  border-color: #0d6efd;
  border-bottom-color: transparent;
  font-weight: 600;
  transform: translateY(0);
  box-shadow: none;
}

.card-header-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -1px;
  right: -1px;
  height: 3px;
  background-color: #0d6efd;
  border-radius: 0 0 0.3rem 0.3rem;
  z-index: 3;
}


/* Icon Styling */
.card-header-tabs .nav-link i {
  color: inherit;
}

.tab-pane .list-group-item .fas {
  color: #6c757d;
}

.tab-pane .list-group-item .text-info {
  color: #0dcaf0 !important;
}

.tab-pane .list-group-item .text-primary {
  color: #0d6efd !important;
}

.tab-pane .list-group-item .text-warning {
  color: #ffc107 !important;
}

.tab-pane .list-group-item .text-danger {
  color: #dc3545 !important;
}

.tab-pane .list-group-item .text-success {
  color: #198754 !important;
}

.tab-pane .list-group-item .text-dark {
  color: #212529 !important;
}


/* --- Mobile Responsiveness: Breakpoint 1 (Screens up to 768px - Tablets & Large Phones) --- */
@media (max-width: 768px) {

  /* General Density & Post Adjustments */
  .all-posts .post {
      flex: 1 1 100%;
      padding: var(--spacing-sm);
      /* Reduced padding on mobile */
      margin-bottom: 1rem;
      /* Adjust bottom margin to reduce space between posts */
  }

  /* Text & Font Adjustments */
  .username {
      font-size: 1rem;
      /* Smaller font size */
  }

  .post-content {
      font-size: 0.9rem;
      /* Slightly smaller font size */
      margin-top: var(--spacing-sm);
      /* Reduced top margin */
      margin-bottom: var(--spacing-md);
      /* Reduced bottom margin */
      max-width: 100%;
      /* Ensure content doesn't overflow on small screens */
      line-height: 1.5; /* Slightly tighter line-height for better density */
  }

  /* Disable Hover Effects (Best practice for touch devices) */
  .post:hover {
      transform: none;
      box-shadow: none;
  }

  /* Post Date Fix (Crucial for preventing overlap) */
  .post-date {
      position: relative;
      /* Change from absolute to relative for mobile */
      margin-top: 0.5rem;
      /* Add some spacing on top */
      margin-right: 0;
      /* Remove right margin */
      text-align: left;
      /* Align the date to the left */
      top: 0;
      /* Reset the top position */
      right: 0;
      /* Reset the right position */
  }

  .post-date .date-text {
      display: block;
      /* Make sure the date is on its own line */
  }

  .edited-tag {
      font-size: 0.75rem;
      margin-left: 0.5rem;
  }

  .post-date:hover {
      color: var(--color-brand-blue);
  }

  /* Interaction Adjustments */
  .like-section {
      gap: var(--spacing-xs);
  }

  .like-section button.fa-heart {
      font-size: 1.3rem;
  }
  
  /* === New: Comment Density Tweak for Tablets === */
  .comment-item {
      padding: var(--spacing-sm); /* Reduced from default 12px for density */
  }

  .comment-item img {
      width: 35px; /* Slight reduction for better content flow */
      height: 35px;
  }
  /* ============================================= */

  /* Chat Adjustments for Tablets */
  .chat-main {
      max-width: 95%;
      /* Allow chat box to take more width on tablets */
      height: calc(100vh - 30px);
      /* Maintain height calculation */
  }

  .chat-bubble {
      max-width: 100%;
  }

  .chat-bubble .message-image-container img {
      max-width: 200px;
      /* Adjust image size for smaller screens */
  }

  /* Form Column Adjustments */
  .col-md-6 {
      margin-bottom: 15px;
  }
}


/* --- Mobile Responsiveness: Breakpoint 2 (Screens up to 576px - Mobile Phones) --- */
@media (max-width: 576px) {

  /* Avatar & Image Adjustments */
  .profile-pic-large {
      width: 90px;
      height: 90px;
  }

  .navbar-profile-picture {
      width: 50px;
      height: 50px;
  }

  /* Text & Density Tweaks */
  .username {
      font-size: 0.9rem;
  }

  .all-posts .post {
      padding: var(--spacing-xs);
      margin-bottom: 0.5rem;
  }

  .post-content {
      font-size: 0.85rem;
      margin-top: var(--spacing-xs);
      margin-bottom: var(--spacing-sm);
  }

  .post-date {
      font-size: 0.75rem;
      margin-top: 0.3rem;
  }

  .edited-tag {
      font-size: 0.6rem;
  }

  /* Conversation List Stacking */
  .conversation-item {
      flex-direction: column;
      align-items: flex-start;
  }

  .conversation-item .flex-grow-1 {
      margin-top: 0.5rem;
  }

  /* Comment Section Adjustments */
  .comment-item {
      padding: 10px;
  }

  .comment-item img {
      width: 35px;
      height: 35px;
  }

  .comment-item .comment-username {
      font-size: 14px;
  }

  .comment-form textarea {
      height: 60px;
  }

  /* Chat Full-Screen View */
  .chat-main {
      max-width: 100%;
      /* Full width on extra small screens */
      border-radius: 0;
      /* No rounded corners on full screen mobile view */
      box-shadow: none;
      /* No shadow on full screen mobile view */
      height: 100vh;
      /* Take full viewport height on small mobile */
      min-height: 100vh;
      /* Ensure it stays full height */
  }

  .chat-container-wrapper {
      padding: 0;
      /* Remove wrapper padding on small screens if chat-main goes full width */
      align-items: flex-start;
      /* Align chat-main to top on mobile for full height */
  }

  .chat-header {
      padding: 10px 15px;
  }

  .chat-window {
      padding: 10px;
  }

  /* Chat Input Form Compactness */
  #chat-form {
      padding: 10px 15px;
      gap: 8px;
  }

  .send-button {
      width: 38px;
      height: 38px;
  }

  #message-input {
      font-size: 13px;
      padding: 8px 12px;
      min-height: 38px;
      /* Match button height */
  }

  .chat-bubble .message-image-container img {
      max-width: 180px;
  }

  /* Profile Tabs Horizontal Scrolling (UX Fix) */
  .card-header-tabs {
      display: flex;
      overflow-x: auto; /* Enable horizontal scrolling */
      flex-wrap: nowrap; /* Prevent tabs from wrapping */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      padding-bottom: 5px; /* Add space below for the scrollbar/shadow */
  }

  /* Ensure tabs don't shrink and have reasonable padding */
  .card-header-tabs .nav-link {
      flex-shrink: 0;
      padding: 0.8rem 1rem;
  }
}


/* --- Mobile Responsiveness: Breakpoint 3 (Screens up to 480px - Ultra-Small Phones) --- */
@media (max-width: 480px) {
  /* Further reduce base spacing variables for maximum compactness */
  :root {
      --spacing-md: 0.6rem; 
      --spacing-lg: 0.8rem;
  }

  /* Shrink the smallest avatars just a bit more for tight layouts */
  .profile-pic-small {
      width: 25px;
      height: 25px;
  }
  
  /* Make input fields more compact for tiny screens */
  #message-input,
  .comment-box {
      font-size: 0.8rem;
      padding: 6px 10px;
  }

  /* Further restrict chat image width to prevent overflow */
  .chat-bubble .message-image-container img {
      max-width: 150px; 
  }
  
  /* === New: Enlarging Share Button Click Area === */
  .share-btn {
      padding: 8px; /* Increase tap area from default 6px for easier tapping */
  }
  /* =============================================== */
}