@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("/assets/actiontext-0dad4df9.css");
@import url("/assets/message_transitions-559b616c.css");

/* Your custom styles here */

/* Rotating Carousel Styles */
#rotating-text {
  transition: all 0.5s ease-in-out;
  display: inline-block;
  font-weight: 900;
  padding: 0.25rem 0.5rem;
  transform: scaleY(1.3);
  text-shadow: 
    0.3px 0.3px 0.5px rgba(0, 0, 0, 0.6),
    -0.3px -0.3px 0.5px rgba(0, 0, 0, 0.6),
    0.3px -0.3px 0.5px rgba(0, 0, 0, 0.6),
    -0.3px 0.3px 0.5px rgba(0, 0, 0, 0.6),
    0 0.3px 0.5px rgba(0, 0, 0, 0.6),
    0 -0.3px 0.5px rgba(0, 0, 0, 0.6),
    0.3px 0 0.5px rgba(0, 0, 0, 0.6),
    -0.3px 0 0.5px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.1em;
}


/* Enhanced bold colors for rotating text - matching image content */
#rotating-text.text-neutral {
  color: #4e4eba !important; /* Custom purple for chronic illness, stress */
}

#rotating-text.text-error {
  color: #4b6ca3 !important; /* Custom blue for anxiety, heart disease, hypertension */
}

#rotating-text.text-info {
  color: #3e80a3 !important; /* Custom blue for depression */
}

#rotating-text.text-accent {
  color: #abe6e3 !important; /* Custom light teal for asthma */
}

#rotating-text.text-warning {
  color: oklch(0.5 0.12 60) !important; /* Bold orange/yellow for diabetes, high cholesterol, obesity */
}

#image-carousel {
  width: 1000%; /* 10 images = 1000% width */
  display: flex;
  transition: transform 1s ease-in-out;
  overflow: hidden;
}

#image-carousel > div {
  width: 10%; /* 100% / 10 images = 10% each */
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#image-carousel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Navigation dots removed - auto-rotate only */

.link-button {
  background: none;
  border: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.link-button:hover {
  text-decoration: none;
}

/* Hide Trix toolbar while preserving rich text functionality */
trix-toolbar {
  display: none !important;
}

/* Social feed rich text input with unlimited height growth */
.social-feed-input {
  min-height: 2rem !important;
  max-height: none !important; /* Remove height constraint */
  resize: none !important;
  overflow: visible !important; /* Allow content to flow naturally */
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start for multi-line */
  transition: all 0.3s ease !important;
}

.social-feed-input trix-editor {
  min-height: 2.25rem !important;
  max-height: none !important; /* Remove height constraint */
  overflow: visible !important; /* Allow content to flow naturally */
  padding: 0.5rem !important; /* Add some padding for better text appearance */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important; /* Better line spacing for readability */
}

/* Override Trix editor default border to prevent extra border */
.social-feed-input trix-toolbar {
  border: none !important;
  box-shadow: none !important;
}

.social-feed-input trix-editor:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure Trix editor never shows extra borders, even after form submission */
.social-feed-input trix-editor {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override any Trix editor default styling that might cause extra borders */
.social-feed-input trix-editor[contenteditable] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure the input field container doesn't get extra borders after form submission */
.social-feed-input:not(:focus-within) {
  box-shadow: none !important;
}

/* More aggressive overrides for post-submission border issues */
.social-feed-input {
  border: 1px solid #d1d5db !important; /* Force the intended border */
  box-shadow: none !important;
  outline: none !important;
}

.social-feed-input:focus-within {
  border: 1px solid #3b82f6 !important; /* Force blue border on focus */
  box-shadow: none !important;
  outline: none !important;
}

/* Override any Trix editor styling that might cause double borders */
.social-feed-input trix-editor {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Ensure Trix editor never gets its own border */
.social-feed-input trix-editor:before,
.social-feed-input trix-editor:after {
  border: none !important;
  box-shadow: none !important;
}

/* Override any Trix editor focus states */
.social-feed-input trix-editor:focus,
.social-feed-input trix-editor:focus-visible,
.social-feed-input trix-editor:focus-within {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Prevent any border from appearing around the input container after form submission */
.social-feed-input {
  border: 1px solid #d1d5db !important; /* Only the intended border */
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure the input container never gets an extra wrapper border */
.social-feed-input:after,
.social-feed-input:before {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override any form or container styling that might add borders */
.social-feed-input,
.social-feed-input * {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Re-apply the intended border only to the input field itself */
.social-feed-input {
  border: 1px solid #d1d5db !important;
}

.social-feed-input:focus-within {
  border: 1px solid #3b82f6 !important;
}

/* Prevent any wrapper border around the input field and icons */
.flex.items-start.gap-3 {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.flex-1.relative.min-w-0.flex.items-center.gap-2.mb-2 {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure no border appears around the entire input container */
.flex.items-start.gap-3,
.flex.items-start.gap-3 * {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Re-apply only the intended border to the input field */
.flex.items-start.gap-3 .social-feed-input {
  border: 1px solid #d1d5db !important;
}

.flex.items-start.gap-3 .social-feed-input:focus-within {
  border: 1px solid #3b82f6 !important;
}

/* Image preview styles */
.image-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0;
}

.image-preview-container .relative {
  position: relative;
}

.image-preview-container img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.image-preview-container button {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  background-color: #ef4444;
  color: white;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.image-preview-container button:hover {
  background-color: #dc2626;
}

/* Expanded input field styles - unlimited height */
.social-feed-input.expanded {
  /* Allow unlimited height growth */
  min-height: 2rem !important;
  max-height: none !important;
}

.social-feed-input.expanded trix-editor {
  /* Allow unlimited height growth */
  min-height: 2.25rem !important;
  max-height: none !important;
}

/* Focus state to prevent double borders */
.social-feed-input:focus-within {
  border-color: #3b82f6 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Expanded card styles for image previews and unlimited input growth */
.expanded-card {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  transition: all 0.3s ease-in-out !important;
}

/* Force card body to expand */
.expanded-card .card-body {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  padding-bottom: 1rem !important;
}

/* Ensure card grows with input content */
.card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

.card .card-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure social feed input container grows */
[data-image-preview-target="inputField"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure preview container is visible and not constrained */
.expanded-card [data-image-preview-target="previewContainer"] {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Make sure preview grid can expand */
.expanded-card [data-image-preview-target="previewGrid"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Override parent container constraints */
.image-preview-expanded {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Social posts page layout - allow natural height */
body.social-posts-page {
  height: auto !important;
  min-height: 100vh !important;
}

body.social-posts-page .flex-1 {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.social-posts-page #main_content_area {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Override flex constraints on social posts page */
.w-full.flex-1.flex.justify-center.items-stretch {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

.container.mx-auto.max-w-lg {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Specific overrides for social posts page */
.social-posts-page {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

.social-posts-page .container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.social-posts-page #post-form-container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.social-posts-page #social-posts {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Mobile and small screen responsive styles for social posts */
@media (max-width: 480px) {
  .social-posts-page {
    padding: 0 !important;
    padding-top: 1rem !important; /* Space below nav bar */
  }
  
  .social-posts-page .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  .social-posts-page #social-posts {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Add space above the input form */
  .social-posts-page #post-form-container {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Remove padding and rounded borders from social post cards on mobile */
  .social-posts-page .card {
    border-radius: 0 !important;
    margin-bottom: 0.5rem !important; /* Add vertical spacing between cards */
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #d1d5db !important; /* Same color as before */
    border-bottom: 1px solid #d1d5db !important; /* Same color as before */
  }
  
  .social-posts-page .card:first-child {
    border-top: 1px solid #d1d5db !important; /* Keep top border */
  }
  
  .social-posts-page .card:last-child {
    border-bottom: 1px solid #d1d5db !important; /* Keep bottom border */
  }
  
  /* Ensure card body has no horizontal padding on mobile */
  .social-posts-page .card .card-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Keep rounded corners on media elements for social posts index */
  .social-posts-page .card img,
  .social-posts-page .card video {
    border-radius: 0.5rem !important;
  }
  
  /* Keep rounded corners on all image containers for social posts index */
  .social-posts-page .card .rounded-lg {
    border-radius: 0.5rem !important;
  }
  
  /* Keep images with rounded borders and padding on social posts index */
  .social-posts-page .card .max-h-96,
  .social-posts-page .card .aspect-video,
  .social-posts-page .card .aspect-square {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
  }
  
  /* Ensure images have rounded corners on social posts index */
  .social-posts-page .card img,
  .social-posts-page .card video {
    border-radius: 0.5rem !important;
  }
}

/* Small screen responsive styles (sm breakpoint) */
@media (max-width: 576px) {
  .social-posts-page {
    padding: 0 !important;
    padding-top: 1rem !important; /* Space below nav bar */
  }
  
  .social-posts-page .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  .social-posts-page #social-posts {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Add space above the input form */
  .social-posts-page #post-form-container {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Remove padding and rounded borders from social post cards on small screens */
  .social-posts-page .card {
    border-radius: 0 !important;
    margin-bottom: 0.5rem !important; /* Add vertical spacing between cards */
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #d1d5db !important; /* Same color as before */
    border-bottom: 1px solid #d1d5db !important; /* Same color as before */
  }
  
  .social-posts-page .card:first-child {
    border-top: 1px solid #d1d5db !important; /* Keep top border */
  }
  
  .social-posts-page .card:last-child {
    border-bottom: 1px solid #d1d5db !important; /* Keep bottom border */
  }
  
  /* Ensure card body has no horizontal padding on small screens */
  .social-posts-page .card .card-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Keep rounded corners on media elements for social posts index */
  .social-posts-page .card img,
  .social-posts-page .card video {
    border-radius: 0.5rem !important;
  }
  
  /* Keep rounded corners on all image containers for social posts index */
  .social-posts-page .card .rounded-lg {
    border-radius: 0.5rem !important;
  }
  
  /* Keep images with rounded borders and padding on social posts index */
  .social-posts-page .card .max-h-96,
  .social-posts-page .card .aspect-video,
  .social-posts-page .card .aspect-square {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
  }
  
  /* Ensure images have rounded corners on social posts index */
  .social-posts-page .card img,
  .social-posts-page .card video {
    border-radius: 0.5rem !important;
  }
}

/* Mobile and small screen responsive styles for social post show page */
@media (max-width: 480px) {
  .social-post-show-page {
    padding: 0 !important;
    padding-top: 1rem !important; /* Space below nav bar */
  }
  
  .social-post-show-page .max-w-2xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  /* Remove padding and rounded borders from social post card on mobile */
  .social-post-show-page .card {
    border-radius: 0 !important;
    margin: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #d1d5db !important;
    border-bottom: 1px solid #d1d5db !important;
  }
  
  /* Ensure card body maintains proper padding for text content */
  .social-post-show-page .card .card-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Remove rounded corners from media elements on mobile */
  .social-post-show-page .card img,
  .social-post-show-page .card video {
    border-radius: 0 !important;
  }
  
  /* Remove rounded corners from all image containers on mobile */
  .social-post-show-page .card .rounded-lg {
    border-radius: 0 !important;
  }
  
  /* Ensure media containers extend to edges on mobile */
  .social-post-show-page .card .aspect-video,
  .social-post-show-page .card .aspect-square {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  
  /* Expand single images to full screen width on mobile */
  .social-post-show-page .card .rounded-lg {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
  }
  
  /* Ensure single images extend to screen edges */
  .social-post-show-page .card img {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Target only media containers for edge-to-edge display */
  .social-post-show-page .card .mb-4:has(img),
  .social-post-show-page .card .mb-4:has(video) {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
  }
  
  /* Ensure media containers with images/videos extend to edges */
  .social-post-show-page .card div[class*="mb-4"]:has(img),
  .social-post-show-page .card div[class*="mb-4"]:has(video) {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
  }
  
  /* Override any potential padding from parent containers */
  .social-post-show-page .card-body {
    overflow-x: hidden !important;
  }
}

/* Small screen responsive styles for social post show page (sm breakpoint) */
@media (max-width: 576px) {
  .social-post-show-page {
    padding: 0 !important;
    padding-top: 1rem !important; /* Space below nav bar */
  }
  
  .social-post-show-page .max-w-2xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  /* Remove padding and rounded borders from social post card on small screens */
  .social-post-show-page .card {
    border-radius: 0 !important;
    margin: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #d1d5db !important;
    border-bottom: 1px solid #d1d5db !important;
  }
  
  /* Ensure card body has no horizontal padding on small screens */
  .social-post-show-page .card .card-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Remove rounded corners from media elements on small screens */
  .social-post-show-page .card img,
  .social-post-show-page .card video {
    border-radius: 0 !important;
  }
  
  /* Remove rounded corners from all image containers on small screens */
  .social-post-show-page .card .rounded-lg {
    border-radius: 0 !important;
  }
  
  /* Ensure media containers extend to edges on small screens */
  .social-post-show-page .card .aspect-video,
  .social-post-show-page .card .aspect-square {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  
  /* Expand single images to full screen width on small screens */
  .social-post-show-page .card .rounded-lg {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
  }
  
  /* Ensure single images extend to screen edges */
  .social-post-show-page .card img {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Target only media containers for edge-to-edge display */
  .social-post-show-page .card .mb-4:has(img),
  .social-post-show-page .card .mb-4:has(video) {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
  }
  
  /* Ensure media containers with images/videos extend to edges */
  .social-post-show-page .card div[class*="mb-4"]:has(img),
  .social-post-show-page .card div[class*="mb-4"]:has(video) {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
    padding: 0 !important;
  }
  
  /* Override any potential padding from parent containers */
  .social-post-show-page .card-body {
    overflow-x: hidden !important;
  }
}

/* Ensure main content area background extends fully */
#main_content_area {
  min-height: 100% !important;
}

/* Dashboard specific fixes - ensure proper height constraints */
.drawer {
  min-height: calc(100vh - 5rem); /* Account for footer height with padding */
}

/* Allow scrolling on mobile, prevent on desktop */
.drawer-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-content > div {
  flex: 1;
  min-height: 0;
}

/* Mobile: allow scrolling */
@media (max-width: 1023px) {
  .drawer-content > div {
    overflow-y: auto;
  }
}

/* Desktop: prevent overflow for full-height layout */
@media (min-width: 1024px) {
  .drawer {
    height: calc(100vh - 5rem);
    max-height: calc(100vh - 5rem);
    overflow: hidden;
  }
  
  .drawer-content {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  
  .drawer-content > div {
    overflow: hidden;
  }
}

/* Ensure grid items stretch to fill their containers */
.grid > * {
  height: 100%;
  min-height: 0;
}

/* Mobile: ensure dashboard cards have proper minimum heights */
@media (max-width: 1023px) {
  
  /* Ensure dashboard card content areas are properly sized - only target dashboard cards */
  .dashboard-content .card {
    min-height: 400px;
    height: auto;
    max-height: none;
  }
  
  .dashboard-content .card-body {
    min-height: 350px;
    height: auto;
    max-height: none;
  }
  
  /* Override dashboard grid constraints on mobile */
  .dashboard-grid {
    height: auto;
    max-height: none;
    min-height: 400px;
  }
  
  .dashboard-grid > * {
    height: auto;
    max-height: none;
    min-height: 400px;
  }
}

/* Medium screens: slightly larger minimum height */
@media (min-width: 768px) and (max-width: 1023px) {
  
  .dashboard-content .card {
    min-height: 500px;
    height: auto;
    max-height: none;
  }
  
  .dashboard-content .card-body {
    min-height: 450px;
    height: auto;
    max-height: none;
  }
  
  /* Override dashboard grid constraints on medium screens */
  .dashboard-grid {
    height: auto;
    max-height: none;
    min-height: 500px;
  }
  
  .dashboard-grid > * {
    height: auto;
    max-height: none;
    min-height: 500px;
  }
}

/* Fix the 1020px breakpoint issue - extend mobile rules to cover the gap */
@media (max-width: 1024px) {
  .dashboard-content .card {
    min-height: 500px;
    height: auto;
    max-height: none;
  }
  
  .dashboard-content .card-body {
    min-height: 450px;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  
  .dashboard-grid {
    height: auto;
    max-height: none;
    min-height: 500px;
  }
  
  .dashboard-grid > * {
    height: auto;
    max-height: none;
    min-height: 500px;
    overflow: visible;
  }
}

/* Dashboard specific grid fixes for bottom row */
.dashboard-grid {
  display: grid;
  grid-template-rows: 1fr;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  max-height: calc(100vh - 200px); /* Prevent viewport overflow */
}

.dashboard-grid > * {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Mobile-specific dashboard grid overrides */
@media (max-width: 1023px) {
  .dashboard-grid {
    height: auto;
    max-height: none;
    min-height: 400px;
  }
  
  .dashboard-grid > * {
    height: auto;
    max-height: none;
    min-height: 400px;
    overflow: visible;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-grid {
    height: auto;
    max-height: none;
    min-height: 500px;
  }
  
  .dashboard-grid > * {
    height: auto;
    max-height: none;
    min-height: 500px;
    overflow: visible;
  }
}

/* Fix 1020px breakpoint - extend mobile grid overrides */
@media (max-width: 1024px) {
  .dashboard-grid {
    height: auto;
    max-height: none;
    min-height: 500px;
  }
  
  .dashboard-grid > * {
    height: auto;
    max-height: none;
    min-height: 500px;
    overflow: visible;
  }
}

/* Ensure dashboard cards maintain height after turbo updates */
.dashboard-content .card {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

.dashboard-content .card-body {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Mobile-specific dashboard card overrides */
@media (max-width: 1023px) {
  .dashboard-content .card {
    height: auto;
    min-height: 400px;
    max-height: none;
  }
  
  .dashboard-content .card-body {
    height: auto;
    min-height: 350px;
    max-height: none;
    overflow: visible;
  }
  
  /* Preserve social feed card height in single column mode */
  .dashboard-content .social-feed-card {
    height: 100% !important;
    min-height: 400px;
  }
  
  .dashboard-content .social-feed-card .card-body {
    height: 100% !important;
    min-height: 350px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-content .card {
    height: auto;
    min-height: 500px;
    max-height: none;
  }
  
  .dashboard-content .card-body {
    height: auto;
    min-height: 450px;
    max-height: none;
    overflow: visible;
  }
  
  /* Preserve social feed card height in medium screen single column mode */
  .dashboard-content .social-feed-card {
    height: 100% !important;
    min-height: 500px;
  }
  
  .dashboard-content .social-feed-card .card-body {
    height: 100% !important;
    min-height: 450px;
  }
}

/* Fix 1020px breakpoint - extend mobile card overrides */
@media (max-width: 1024px) {
  .dashboard-content .card {
    height: auto;
    min-height: 500px;
    max-height: none;
  }
  
  .dashboard-content .card-body {
    height: auto;
    min-height: 450px;
    max-height: none;
    overflow: visible;
  }
  
  /* Preserve social feed card height at 1020px breakpoint */
  .dashboard-content .social-feed-card {
    height: 100% !important;
    min-height: 500px;
  }
  
  .dashboard-content .social-feed-card .card-body {
    height: 100% !important;
    min-height: 450px;
  }
}

/* Prevent social feed content from affecting card height */
#social-feed-scroll {
  max-height: 100%;
  overflow-y: auto;
}

#social_feed {
  max-height: 100%;
  overflow: hidden;
}

/* Ensure social posts with images don't break layout */
.social-feed-card .border-b {
  max-height: none;
  overflow: visible;
}

/* Image preview styling for dashboard context */
.social-feed-card .image-preview-container {
  max-height: 200px;
  overflow-y: auto;
}

.social-feed-card .image-preview-container img {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
}


/* Image preview styling for chat messages */
.messages .image-preview-container {
  max-height: 150px;
  overflow-y: auto;
}

.messages .image-preview-container img {
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* Ensure image previews don't break dashboard layout */
.dashboard-content .expanded-card {
  max-height: none !important;
  overflow: visible !important;
}

.dashboard-content .expanded-card .card-body {
  max-height: none !important;
  overflow: visible !important;
}

/* Fix embedded social posts prose spacing */
.dashboard-content .prose {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove navbar padding and min-height only for logged-in users */
body:has(.navbar .avatar) .navbar {
  padding: 0 !important;
  min-height: 0 !important;
}

.dashboard-content .prose p {
  margin: 0 !important;
  padding: 0 !important;
}

.dashboard-content .prose > * + * {
  margin-top: 0 !important;
}

/* Chat bubble vertical centering */
.chat-bubble {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.5rem;
}

.chat-bubble > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
}

/* Assessment page responsive styles */
@media (max-width: 640px) {
  /* Mobile styles for assessment questions */
  .card[data-controller="assessment"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    padding: 1rem !important;
  }
  
  /* Question text - text-xl on mobile */
  .card[data-controller="assessment"] h2 {
    font-size: 1.25rem !important; /* text-xl */
    line-height: 1.4 !important;
    min-height: auto !important;
  }
  
  /* Answer options - text-md on mobile */
  .card[data-controller="assessment"] .grid button,
  .card[data-controller="assessment"] .grid div {
    font-size: 0.875rem !important; /* text-md */
    line-height: 1.4 !important;
  }
  
  /* Make options stack properly on mobile */
  .card[data-controller="assessment"] .grid {
    gap: 0.75rem !important;
  }
  
  /* Ensure buttons are touch-friendly */
  .card[data-controller="assessment"] button {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }
}

/* Desktop styles to maintain consistent container size */
@media (min-width: 641px) {
  .card[data-controller="assessment"] {
    width: 40rem !important;
    height: 38rem !important;
    min-height: 38rem !important;
    max-height: 38rem !important;
  }
}

/* Intro page mobile styles */
@media (max-width: 640px) {
  /* Add rounded corners and make full width on mobile for intro page */
  #assessment_frame .card {
    border-radius: 0.5rem !important; /* rounded-lg */
    margin: 0 !important;
    margin-top: 1rem !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #d1d5db !important;
    border-bottom: 1px solid #d1d5db !important;
  }
  
  /* Ensure intro page scrolls to top */
  #assessment_frame {
    scroll-margin-top: 0 !important;
  }
  
  /* Force scroll to top for assessment pages */
  body:has(#assessment_frame) {
    scroll-behavior: smooth !important;
  }
}

/* CRITICAL: Prevent social feed card from collapsing when form expands - MAXIMUM SPECIFICITY */
.social-feed-card.expanded-card {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  /* Override any conflicting general expanded-card rules */
  transition: none !important;
}

.social-feed-card.expanded-card .card-body {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important; /* Override general expanded-card padding */
}

/* Allow the form area to expand within the card */
.social-feed-card.expanded-card .px-3 {
  flex-shrink: 0 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Ensure the feed content area maintains its scrollable height */
.social-feed-card.expanded-card .flex-1 {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Allow image preview container to be visible */
.social-feed-card.expanded-card [data-image-preview-target="previewContainer"] {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Allow image preview grid to be visible */
.social-feed-card.expanded-card [data-image-preview-target="previewGrid"] {
  display: flex !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Override ALL conflicting expanded-card rules for social feed with maximum specificity */
.social-feed-card.expanded-card * {
  /* Reset any auto height that might be applied by general expanded-card rules */
}

.social-feed-card.expanded-card .card-body * {
  /* Ensure card body maintains its structure */
}

/* Additional override for dashboard context */
.dashboard-content .social-feed-card.expanded-card {
  height: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
}

.dashboard-content .social-feed-card.expanded-card .card-body {
  height: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
}

/* CSS class to remove border from social feed input after submission */
.social-feed-input-no-border {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.social-feed-input-no-border:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override social-feed-input border for messages form specifically */
#message_form .social-feed-input.border-primary {
  border: 1px solid var(--fallback-p, oklch(var(--p) / 1)) !important;
}

/* Fix social feed card height collapse when images are added */
.dashboard-grid .social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.dashboard-grid .social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) .card-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Fix social feed card height collapse in single column mode */
.social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) .card-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure mobile responsive rules take precedence over image preview rules */
@media (max-width: 1024px) {
  .social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) {
    height: 100% !important;
    min-height: 400px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) .card-body {
    height: 100% !important;
    min-height: 350px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Additional mobile-specific rules for image previews */
@media (max-width: 1023px) {
  .social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) {
    height: 100% !important;
    min-height: 400px !important;
  }
  
  .social-feed-card:has([data-image-preview-target="previewContainer"]:not(.hidden)) .card-body {
    height: 100% !important;
    min-height: 350px !important;
  }
  
  /* Ensure social feed card maintains height on smaller mobile screens */
  .dashboard-content .social-feed-card {
    height: 100% !important;
    min-height: 400px !important;
  }
  
  .dashboard-content .social-feed-card .card-body {
    height: 100% !important;
    min-height: 350px !important;
  }
}

/* Ensure mobile social feed card maintains height even after form submission */
@media (max-width: 1024px) {
  .dashboard-content .social-feed-card {
    height: 100% !important;
    min-height: 400px !important;
  }
  
  .dashboard-content .social-feed-card .card-body {
    height: 100% !important;
    min-height: 350px !important;
  }
  
  /* Override any image preview rules that might interfere */
  .dashboard-content .social-feed-card:has([data-image-preview-target="previewContainer"]) {
    height: 100% !important;
    min-height: 400px !important;
  }
  
  .dashboard-content .social-feed-card:has([data-image-preview-target="previewContainer"]) .card-body {
    height: 100% !important;
    min-height: 350px !important;
  }
}

/* Ensure social feed form layout works with image previews */
.dashboard-content .social-feed-card .flex.items-start.gap-3 {
  align-items: flex-start !important;
}

/* Remove border from social feed input field container */
.dashboard-content .social-feed-card [data-image-preview-target="inputField"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove border from social feed textarea specifically */
.dashboard-content .social-feed-card .social-feed-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove border from social feed textarea focus state */
.dashboard-content .social-feed-card .social-feed-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove all borders from social feed form elements */
.dashboard-content .social-feed-card form {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dashboard-content .social-feed-card form div,
.dashboard-content .social-feed-card form textarea,
.dashboard-content .social-feed-card form button,
.dashboard-content .social-feed-card form label {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure card header has bottom border - separate from input styling */
.social-feed-card .card-body > div:first-child {
  border-bottom: 1px solid #e5e7eb !important;
}