@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Prevent font loading from causing layout shift */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: local('Inter');
}

:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { 
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  margin: 0; 
  padding: 0;
  background: url('./images/background.png') center center / cover no-repeat, #0f172a; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #ffffff; 
  line-height: 1.6;
  font-size: 16px; 
  /* Prevent elastic scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  /* FIXED: Enable scroll */
  overflow: auto;
  overflow-x: hidden;
  /* Dynamic height adjustment based on content */
  min-height: 100vh;
  height: auto;
}

html {
  /* Prevent elastic scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  overflow: auto;
  overflow-x: hidden;
  /* Dynamic height adjustment based on content */
  min-height: 100vh;
  height: auto;
}

/* When MedX Wall (Facebook page) is open AND VISIBLE, set body/html to fixed height */
/* Must have BOTH display:flex AND opacity:1, AND display must NOT be none */
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])),
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) {
  height: auto !important; /* Allow natural height */
  min-height: 100vh !important;
  max-height: none !important; /* Allow expansion */
  overflow: auto !important; /* Enable scrolling */
}

html:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])),
html:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) {
  height: auto !important; /* Allow natural height */
  min-height: 100vh !important;
  max-height: none !important; /* Allow expansion */
  overflow: auto !important; /* Enable scrolling */
}

/* Ensure scrolling is always enabled when MedX Wall is active */
body:has(#medWallOverlay),
html:has(#medWallOverlay) {
  overflow: auto !important; /* Force enable scrolling */
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* CRITICAL: Prevent any JavaScript from disabling scrolling */
body,
html {
  overflow: auto !important; /* Force enable scrolling at all times */
  overflow-x: auto !important;
  overflow-y: auto !important;
  height: auto !important; /* Allow natural height */
  max-height: none !important; /* Allow expansion */
}

/* Override any potential overflow: hidden from JavaScript or other CSS */
body[style*="overflow: hidden"],
html[style*="overflow: hidden"] {
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Ensure MedWall overlay allows scrolling */
#medWallOverlay,
#medWallOverlay {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
}

/* Enhanced startup animations */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

@keyframes fadeInUpDock {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes scaleInControls {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulseButton {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 30px rgba(59, 89, 152, 0.3);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* bounceInResults animation removed - no longer needed */

/* Apply enhanced startup animations */
.topnav {
  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.topnav-left {
  animation: slideInFromLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}

.topnav-right {
  animation: slideInFromRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}

main {
  animation: fadeIn 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards;
}

.dock-container {
  /* Animation removed - dock is dynamically created by JS so animation causes issues */
  /* It will appear immediately when JS creates the icons */
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Animation removed - controls now part of main search layout */

#resultsPanel {
  /* Animation removed - results appear instantly */
  opacity: 1;
  transition: opacity 0.2s ease;
}

header { padding: 0; background: transparent; color: #fff; display: none; }
header .brand { height: 0; }

.controls { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  padding: 8px 10px; 
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 35px; /* match dock radius */
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.16);
  /* Movement transitions removed - only opacity changes */
  /* Re-enable pointer events for controls */
  pointer-events: auto;
}

.controls.lowered {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.controls.hidden {
  /* When hidden, only fade out (no movement) */
  opacity: 0.3;
  will-change: opacity;
  transition: opacity 0.2s ease;
}

/* Keep floating search bar visible while focused */
.controls:focus-within {
  opacity: 1 !important;
}

/* Prevent any transitions on search input when focused to avoid movement */
#searchInput:focus {
  transition: none !important;
  transform: none !important;
}

/* Clean search input styling */
.search-input-field {
  width: 100% !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  border: 2px solid #3b5998 !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #000 !important;
  outline: none !important;
  cursor: text !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1000 !important;
}

.search-input-field:focus {
  border-color: #3b5998 !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.search-input-field:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Ensure search input is always clickable and focusable */
#searchInput {
  pointer-events: auto !important;
  cursor: text !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Blue tint when search has text */
.controls.has-text {
  background: linear-gradient(
      0deg,
      rgba(37, 99, 235, 0.10),
      rgba(37, 99, 235, 0.10)
    ), rgba(255, 255, 255, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Search input styles are now inline in HTML for better control */
.filters { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: #374151; }
label { display: inline-flex; align-items: center; gap: 6px; }



main { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px; 
  padding: 16px 20px 160px; 
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* Ensure main element allows scroll interaction and clicking */
  pointer-events: auto;
  touch-action: auto;
  position: relative;
  z-index: 1;
}
#booksPanel { border-right: 1px solid #e5e7eb55; padding-right: 16px; }
#booksPanel h3 { margin: 12px 0 6px; font-size: 14px; color: #111827; }
#booksPanel ul { list-style: none; padding: 0; margin: 0; }
#booksPanel li { margin: 6px 0; }
#booksPanel a { text-decoration: none; color: #ffffff; }

#booksPanel img { height: 56px; }

#resultsPanel { 
  padding-left: 0; 
  display: block; /* Changed from grid to block for better visibility */
  gap: 4px; 
  margin-top: 5px; /* Position very close under search bar */
  padding-top: 5px; /* Minimal spacing from search bar */
  visibility: visible !important;
  opacity: 1 !important;
}
#stats { font-size: 16px; color: #6b7280; margin-bottom: 4px; font-weight: 600; }
.filters-notice { opacity: 0; color: #ffffff; font-weight: 700; transition: opacity 0.6s ease; }
.filters-notice.show { opacity: 1; }
.limit-notice { color: #ffffff; opacity: 0.9; font-size: 12px; }
/* Copyable Page List - Simple */
.copylist { 
  margin: 6px 0; 
  display: none; /* Hidden by default - JavaScript can override */
  }
  
  /* Copyable list styling for mobile devices */
@media (max-width: 768px) {
  .copylist {
    margin: 4px 0; /* Smaller margin on mobile */
    /* Ensure page list is visible on mobile when toggled on */
  }
  
  /* Removed aggressive hiding rules to allow JavaScript control */
}

#copyList { 
  width: 100%; 
  min-height: 60px;
  max-height: 200px;
  resize: vertical; 
  padding: 10px 12px; 
  border-radius: 10px; 
  border: 1px solid rgba(255,255,255,0.2); 
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; 
  font-size: 11px;
  line-height: 1.6;
  transition: border-color 0.2s ease, background 0.2s ease;
}

#copyList:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(0,0,0,0.45);
}

#copyList::placeholder {
  color: rgba(255,255,255,0.4);
}
#results { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: block; /* Changed from grid to block for better visibility */
  gap: 6px; 
  /* Ensure results list allows scrolling and clicking */
  overflow: visible;
  pointer-events: auto;
  touch-action: auto;
  visibility: visible !important;
  opacity: 1 !important;
}
.result { 
  padding: 6px 10px; 
  border: 1px solid #37415155; 
  border-radius: 8px; 
  background: #111827; 
  border-left: 3px solid #37415155; 
  /* Allow clicking and scrolling */
  pointer-events: auto;
  touch-action: auto;
  /* Ensure scroll events bubble up to parent */
  overflow: visible;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Desktop only: Scale up text on hover */
@media (min-width: 769px) {
  .result:hover {
    transform: scale(1.02);
    background: #1a2332;
  }
  
  .result:hover a,
  .result:hover .result-text,
  .result:hover span {
    transform: scale(1.05);
    transition: transform 0.2s ease;
  }
}
.result.green { border-left-color: #22c55e; }
.result.red { border-left-color: #ef4444; }
.result.orange { border-left-color: #f59e0b; }
.result.blue { border-left-color: #3b82f6; }
.result.yellow { border-left-color: #eab308; }
.result a { 
  color: #ffffff; 
  font-weight: 600; 
  text-decoration: none; 
  font-size: 14px; 
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}
.snippet { 
  margin: 4px 0 0; 
  color: #d1d5db; 
  font-size: 12px; 
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}
.seen-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #2563eb;
  color: #fff;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}
.result-header { 
  padding: 8px 12px; 
  border-left: 4px solid #ef4444; 
  background: rgba(239,68,68,0.14); 
  border-radius: 8px; 
  font-weight: 800; 
  color: #ffffff; 
  font-size: 18px; 
  position: relative; 
  /* Allow scrolling within result headers */
  pointer-events: auto;
  touch-action: pan-y;
  /* Ensure scroll events bubble up to parent */
  overflow: visible;
}
.result-header img { 
  width: 32px; 
  height: 32px; 
  object-fit: contain; 
  margin-right: 10px; 
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}
.result-header .chevron { 
  position: absolute; 
  right: 10px; 
  bottom: 8px; 
  width: 14px; 
  height: 14px; 
  transition: transform 0.18s ease; 
  color: #ffffff; 
  display: inline-block; 
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}
.result-header.collapsed .chevron { transform: rotate(180deg); }
.book-group { list-style: none; padding-left: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
.book-group.collapsed { display: none; }
.reset-seen-btn { margin-left: auto; opacity: 0.6; }
.reset-seen-btn:hover { opacity: 0.8; }
.result-header.green { border-left-color: #22c55e; background: rgba(34,197,94,0.14); }
.result-header.red { border-left-color: #ef4444; background: rgba(239,68,68,0.14); }
.result-header.orange { border-left-color: #f59e0b; background: rgba(245,158,11,0.14); }
.result-header.blue { border-left-color: #3b82f6; background: rgba(59,130,246,0.14); }
.result-header.yellow { border-left-color: #eab308; background: rgba(234,179,8,0.14); }

footer { border-top: 1px solid #e5e7eb55; padding: 12px 20px; font-size: 14px; display: flex; justify-content: space-between; }
footer a { color: #ffffff; text-decoration: none; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #booksPanel { border-right: none; padding-right: 0; }
}


/* === BotX Blue Gradient Look & Text === */
.blue-gradient-bg {
  background: url('./images/background.png') center center / cover no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Wall Selector Responsive Layout */
#searchPageWallSelector {
  column-gap: 60px !important; /* Horizontal spacing between logos */
  row-gap: 20px !important; /* Vertical spacing between rows - reduced */
  flex-wrap: wrap !important; /* Allow wrapping into 2 rows */
}

.search-wall-btn {
  flex: 0 0 auto !important;
  min-width: 55px !important;
  max-width: 80px !important; /* Prevent buttons from getting too wide */
  user-select: none !important; /* Prevent text selection */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  transform: scale(0.9) !important; /* Make logos 0.9x smaller */
}

.search-wall-btn * {
  user-select: none !important; /* Prevent text selection on child elements */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* All screens: keep in one row with appropriate gaps */
@media (min-width: 1401px) {
  #searchPageWallSelector {
    column-gap: 80px !important;
  }
}

@media (max-width: 1400px) and (min-width: 701px) {
  #searchPageWallSelector {
    column-gap: 70px !important;
  }
}

@media (max-width: 700px) {
  #searchPageWallSelector {
    column-gap: 60px !important;
  }
}

@media (max-width: 500px) {
  #searchPageWallSelector {
    column-gap: 50px !important;
  }
  
  .search-wall-btn {
    transform: scale(0.855) !important; /* 0.9 * 0.95 - even smaller on mobile */
  }
}

@media (max-width: 400px) {
  #searchPageWallSelector {
    column-gap: 40px !important;
  }
}

.blue-gradient-text {
  background: linear-gradient(90deg, #0070f3 0%, #3b82f6 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: brightness(1.2) saturate(1.2) contrast(1.05);
}

/* === Apple-like Floating Dock (Carbon copy style) === */
.dock-container {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(0);
  z-index: 9999999 !important; /* Higher than everything including launcher */
  transition: transform 0.28s ease, opacity 0.3s ease, width 0.4s ease;
  will-change: transform;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 30px !important; /* Slightly more rounded - increased from 28px */
  backdrop-filter: blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  padding: 16px 20px !important;
  opacity: 0; /* Hidden by default until populated */
  max-width: calc(100vw - 8px); /* Dock extends very close to edges (4px margin each side) */
}

/* Show dock when it has children (populated by JavaScript) */
.dock-container:has(.dock:not(:empty)),
.dock-container.populated {
  opacity: 1;
}

/* Desktop: Smaller dock with more rounded corners */
@media (min-width: 769px) {
  .dock-container {
    padding: 0px !important; /* No padding at all */
    border-radius: 26px !important; /* Slightly more rounded - increased from 24px */
    height: 95px !important; /* Increased to accommodate labels below items */
    width: 520px !important; /* Width for 7 icons + separator + launcher (will expand when close button added) */
    max-width: calc(100vw - 40px) !important; /* Never wider than viewport minus margins */
    display: flex !important;
    align-items: center !important; /* Center content vertically */
    justify-content: center !important; /* Center content horizontally */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth width transition for back button */
  }
  
  /* Expanded state - same as default since we always show all icons on desktop */
  .dock-container.expanded {
    width: 520px !important; /* Width for current 7 icons + separator + launcher */
    max-width: calc(100vw - 40px) !important; /* Never wider than viewport minus margins */
  }
  
  /* Width when close button is added - use this class when close button is present */
  .dock-container.has-close-button {
    width: 580px !important; /* Expanded width to fit close button + all other icons */
    max-width: calc(100vw - 40px) !important; /* Never wider than viewport minus margins */
  }
  
  /* Animate dock icons when container changes size */
  .dock-item {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* Narrow desktop: Scale down dock for smaller viewports (600px-768px) */
@media (min-width: 600px) and (max-width: 768px) {
  .dock-container {
    width: 480px !important; /* Slightly narrower for smaller screens */
    max-width: calc(100vw - 40px) !important;
  }
  
  .dock-container.has-close-button {
    width: 540px !important;
    max-width: calc(100vw - 40px) !important;
  }
  
  .dock-item svg, .dock-item img {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Narrow desktop: Scale down dock for smaller viewports (500px-599px) */
@media (min-width: 500px) and (max-width: 599px) {
  .dock-container {
    width: 420px !important;
    max-width: calc(100vw - 30px) !important;
  }
  
  .dock-container.has-close-button {
    width: 470px !important;
    max-width: calc(100vw - 30px) !important;
  }
  
  .dock > * {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  
  .dock-item {
    width: 45px !important;
    height: 45px !important;
  }
  
  .dock-item svg, .dock-item img {
    width: 38px !important;
    height: 38px !important;
  }
}

.dock-container.hidden {
  transform: translateX(-50%) translateY(150%);
  will-change: transform;
}

.dock {
  display: flex;
  align-items: flex-end;
  justify-content: center; /* Center icons horizontally */
  gap: 14px;
  width: fit-content; /* Only take up space needed for icons */
  max-width: 100%; /* Fill container width but don't overflow */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth animation for gap changes */
}

/* Desktop: Smaller gap between icons */
@media (min-width: 769px) {
  .dock {
    gap: 0px !important; /* Set to 0, use margin instead for better animation */
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) !important; /* Extra smooth - match button animation */
  }
  
  /* Use margin for spacing instead of gap for smooth animation */
  .dock > * {
    margin-left: 8px !important;
    margin-right: 8px !important;
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) !important; /* Smooth position transitions */
  }
  
  .dock > *:first-child {
    margin-left: 0px !important;
  }
  
  .dock > *:last-child {
    margin-right: 0px !important;
  }
}

/* Desktop: Smaller dock */
@media (min-width: 769px) {
  .dock-item {
    position: relative;
    width: 50px !important; /* Increased for better alignment */
    height: 50px !important; /* Increased for better alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important; /* Align to top instead of center */
    background: transparent !important;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    overflow: visible;
    padding-top: 4px !important; /* Restored original padding */
  }
  
  .dock-item svg, .dock-item img {
    width: 32px !important; /* Increased for better proportion */
    height: 32px !important; /* Increased for better proportion */
    margin-top: -6px !important; /* Move icons upward more */
  }
  
  .dock {
    gap: 8px;
    padding: 10px 4px; /* Reduced horizontal padding from 14px to 4px */
  }
}

/* Desktop: Dock styling is now handled by the compact dock styles above */
/* These old responsive rules are commented out to avoid conflicts */

/* Mobile: Wider dock with appropriately sized icons */
@media (max-width: 768px) {
  .dock-container {
    width: auto !important; /* Auto-width on mobile */
    max-width: calc(100vw - 4px) !important; /* Almost full width - only 2px margin on each side */
    padding: 14px 8px 18px 8px !important; /* Slightly less top padding to move content up a bit */
    border-radius: 22px; /* Slightly more rounded - increased from 20px */
    display: flex !important;
    align-items: flex-start !important; /* Move content slightly higher */
    justify-content: center !important;
  }
  
  .dock {
    gap: 4px; /* Reduced spacing between icons */
  }
  
  .dock-item {
    position: relative;
    width: 65px !important;
    height: 65px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px; /* Less rounded on mobile */
    background: transparent !important;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    overflow: visible;
  }
  
  .dock-item > img {
    width: 62px !important;
    height: 62px !important;
  }
  
  /* Hide Marketplace icon on mobile - show only 6 core icons */
  .dock-item[aria-label="Marketplace"] {
    display: none !important;
  }
}

.dock-item:hover {
  transform: translateY(-3px) scale(1.06);
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
}

/* Default dock item images - overridden by media queries above */
.dock-item svg, .dock-item img {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important; /* Light shadow on dock icons */
}
/* Ensure dock item images display properly */
.dock-item > img {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important; /* Light shadow on dock icons */
}

/* Removed - handled by main mobile media queries above */

/* Dock separator styling */
.dock-separator {
  display: flex;
  align-self: center;
  flex-shrink: 0;
}

/* Hide separator on mobile */
@media (max-width: 768px) {
  .dock-separator {
    display: none;
  }
}

.dock-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px !important; /* Move labels down to avoid overlap with items */
  background: transparent !important;
  color: rgba(255, 255, 255, 0.35);
  padding: 0;
  border-radius: 0;
  font-size: 9px !important; /* Increased from 8px for better readability */
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: color 0.2s ease;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  letter-spacing: 0.3px;
  text-align: center;
  border: none !important;
  box-shadow: none !important;
}

.dock-item:hover .dock-label {
  color: rgba(255, 255, 255, 0.6);
}

/* Active page indicator - white dot under dock icons */
.dock-item.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  z-index: 10;
}

/* Ensure dot is visible and properly sized on mobile */
@media (max-width: 768px) {
  .dock-item.active::after {
    bottom: -1px;
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 520px) {
  .dock-item.active::after {
    bottom: -1px;
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 400px) {
  .dock-item.active::after {
    bottom: 0px;
    width: 5px;
    height: 5px;
  }
}

/* Gray dot for non-front-page icons */
.dock-item.active.page-active::after {
  background-color: rgba(128, 128, 128, 0.8);
  box-shadow: 0 0 6px rgba(128, 128, 128, 0.5);
}

/* Hide search bar and Quick Sign Up button when on auth forms (login/signup page) */
body:has(#authForms[style*="display: block"]) .controls,
body:has(#authForms[style*="display: flex"]) .controls,
body:has(#authForms[style*="display: block"]) .search-button-container,
body:has(#authForms[style*="display: flex"]) .search-button-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide dots when on auth forms or MedWall overlay */
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .dock-item.active::after,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .dock-item.active::after,
body:has(#authForms[style*="display: block"]) .dock-item.active::after {
  display: none;
}

/* Community Walls logo hover animation */
.community-walls-logo:hover {
  transform: scale(1.05);
}

/* Gray dock labels when on Facebook-style page or auth forms (only when actually visible, not closing) */
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .dock-label,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .dock-label,
body:has(#authForms[style*="display: block"]) .dock-label {
  color: rgba(107, 114, 128, 0.8) !important; /* Gray-500 with transparency - visible on white backgrounds */
}

body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .dock-item:hover .dock-label,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .dock-item:hover .dock-label,
body:has(#authForms[style*="display: block"]) .dock-item:hover .dock-label {
  color: rgba(107, 114, 128, 1) !important; /* Solid gray on hover */
}

/* Back button animation */
@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    width: 0px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px;
    padding-right: 0px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    width: 50px;
    margin-left: 8px !important;
    margin-right: 0px !important;
    padding-left: initial;
    padding-right: initial;
  }
}

@keyframes slideOutToBottom {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    width: 50px;
    min-width: 50px;
    margin-left: 8px !important;
    margin-right: 0px !important;
    padding-left: initial;
    padding-right: initial;
  }
  99% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    width: 0px;
    min-width: 0px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px;
    padding-right: 0px;
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    width: 0px;
    min-width: 0px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px;
    padding-right: 0px;
    visibility: hidden;
  }
}

#dockBackButton {
  animation: slideInFromBottom 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; /* Extra smooth with ease-in-out-cubic */
  overflow: hidden;
  white-space: nowrap;
}

#dockBackButton.hiding {
  animation: slideOutToBottom 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; /* Extra smooth with ease-in-out-cubic */
  overflow: hidden;
  white-space: nowrap;
}

/* Mobile: Move dock labels upward */
@media (max-width: 768px) {
  .dock-label {
    margin-top: 0px !important; /* Move labels upward on mobile */
    font-size: 11px !important; /* Larger font for better readability */
  }
}

/* Desktop: Move dock labels upward slightly */
@media (min-width: 769px) {
  .dock-label {
    margin-top: 4px !important; /* Move labels upward slightly on desktop (was 8px) */
  }
}

/* Small mobile screens: Smaller icons and tighter spacing */
@media (max-width: 520px) {
  .dock-container {
    max-width: calc(100vw - 4px) !important; /* Very close to edges - 2px margin each side */
    padding: 10px 4px 14px 4px !important; /* Slightly less top padding to move content up a bit */
    border-radius: 18px; /* Slightly more rounded - increased from 16px */
    display: flex !important;
    align-items: flex-start !important; /* Move content slightly higher */
    justify-content: center !important;
  }
  
  .dock { gap: 2px; padding: 8px 2px; }
  
  .dock-item { 
    width: 60px !important; 
    height: 60px !important; 
    border-radius: 10px; /* Less rounded on smaller screens */
  }
  
  .dock-item svg, .dock-item img { 
    width: 56px !important; 
    height: 56px !important; 
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important; /* Light shadow on dock icons */
  }
  
  .dock-label { 
    font-size: 9px !important; 
    margin-top: 2px; 
  }
}

/* Very small mobile screens: Even smaller icons */
@media (max-width: 400px) {
  .dock-container {
    max-width: calc(100vw - 4px) !important; /* Almost full width - 2px margin each side */
    padding: 8px 3px 12px 3px !important; /* Slightly less top padding to move content up a bit */
    border-radius: 14px; /* Slightly more rounded - increased from 12px */
    display: flex !important;
    align-items: flex-start !important; /* Move content slightly higher */
    justify-content: center !important;
  }
  
  .dock { gap: 1px; padding: 6px 1px; }
  
  .dock-item { 
    width: 55px !important; 
    height: 55px !important; 
    border-radius: 8px; /* Minimal rounding on very small screens */
  }
  
  .dock-item svg, .dock-item img { 
    width: 52px !important; 
    height: 52px !important; 
  }
  
  .dock-label { 
    font-size: 8px !important; 
    margin-top: 1px; 
  }
  
  /* Main search layout adjustments */
  .main-search-layout {
    top: auto; /* Reset top positioning */
    left: 50%; /* Maintain centering */
    transform: translateX(-50%); /* Maintain centering */
    padding: 20px 20px 10px;
  }
  
  .main-logo {
    height: 80px;
    max-width: 85vw; /* Slightly more space on mobile */
    max-height: 80px;
    margin-bottom: 20px;
  }
}

/* Mobile responsive tweaks */
@media (max-width: 768px) {
  .main-search-layout {
    top: auto; /* Reset top positioning */
    left: 50%; /* Maintain centering */
    transform: translateX(-50%); /* Maintain centering */
    padding: 20px 20px 10px;
    max-width: calc(100% - 40px);
  }
  
  .main-logo {
    height: 80px;
    max-width: 85vw; /* Slightly more space on mobile */
    max-height: 80px;
    margin-bottom: 20px;
  }
  
  .controls {
    width: 100%;
    padding: 10px 12px;
    border-radius: 35px;
  }
  
  #searchInput { 
    font-size: 16px; 
  }
}

/* === Main Search Layout (Google-style) === */
.main-search-layout {
  position: relative !important; /* Changed from fixed to relative for better scroll interaction */
  top: 0 !important; /* Explicit positioning */
  /* Proper horizontal centering that works with window resizing */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important; /* Lower z-index so topnav buttons are above it */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 1400px !important; /* Increased to allow Wall buttons to spread */
  padding: 0px 20px 20px !important;
  transition: none !important; /* REMOVE transition to prevent shift */
  /* Ensure scroll events can pass through */
  pointer-events: auto !important;
  touch-action: pan-y !important;
  /* Add top margin to account for top navigation */
  margin-top: 0px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Prevent layout shift on load */
  min-height: 200px !important; /* Reserve minimum space for logo */
  contain: layout !important; /* Isolate layout calculations */
  /* Force immediate layout */
  visibility: visible !important;
  opacity: 1 !important;
}

.main-logo {
  display: block !important; /* Force block for proper flex alignment */
  /* Fixed dimensions to prevent layout shift on load */
  width: 471px !important; /* Explicit width based on image */
  height: 120px !important; /* Explicit height */
  min-width: 471px !important;
  min-height: 120px !important;
  max-width: min(471px, 80vw) !important; /* Never exceed 80% of viewport width */
  max-height: 120px !important; /* Maintain aspect ratio */
  margin: 10px auto 20px auto !important; /* Reduced top and bottom margins */
  padding: 0 !important; /* No padding to prevent shifts */
  cursor: pointer;
  transition: none !important; /* REMOVE transition to prevent shift on load */
  object-fit: contain;
  /* Re-enable pointer events for logo */
  pointer-events: auto;
  z-index: 10 !important; /* Lower than top bar (10000) */
  position: relative !important;
  /* Prevent layout shift on load - CRITICAL */
  content-visibility: auto;
  contain: layout !important; /* Changed from strict to layout only */
  will-change: auto;
  transform: none !important; /* Remove transform to prevent distortion */
  backface-visibility: hidden; /* Prevent flickering */
  /* Reserve space immediately */
  aspect-ratio: 471 / 120;
  /* Force clean, high-quality rendering */
  image-rendering: auto !important; /* Use default high-quality rendering */
  filter: none !important; /* No filters */
  mix-blend-mode: normal !important; /* Normal blending */
  opacity: 1 !important; /* Full opacity */
}

/* Only animate logo on hover, not on load */
.main-logo:hover {
  transition: transform 0.2s ease;
}

.main-logo:hover {
  transform: scale(1.05);
}

/* === Top Navigation (BotX style) === */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 12px;
  will-change: transform;
  background: rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transform: translateY(0);
  transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  border-radius: 0 0 16px 16px;
  flex-wrap: wrap;
  row-gap: 8px;
}

.topnav.hidden {
  transform: translateY(-110%);
  will-change: transform;
}

.topnav.scrolled {
  /* Blur is now always on, just add shadow when scrolled */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.topnav-left {
  display: flex;
  align-items: flex-end; /* align bottoms of logos */
  gap: 10px;
  margin-bottom: 10px; /* extra space below logos before buttons */
}

.brand-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.brand-with-tm { display: inline-flex; align-items: flex-start; }
.brand-with-tm .tm-mark { color:#3b5998; font-size:12px; margin-left:0; line-height: 1; transform: translateY(-2px); }

.botx-product-text {
  color: #000000 !important;
  font-size: 11px;
  font-weight: 500;
  margin-left: 70px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
  align-self: flex-start;
}

.topnav-brand {
  height: 48px;
  width: auto;
  display: inline-block;
}
.medarmor-brand { height: 30px; margin-left: -15px; }

.topnav-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topnav-btn {
  color: white;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  line-height: 20px;
  white-space: nowrap;
  box-sizing: border-box;
}

.topnav-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.topnav-btn.active {
  background: linear-gradient(135deg, #3b5998, #2c4a7a);
  border: none;
}

/* Profile button - no border, just white background */
.profile-btn {
  background: white !important;
  border: 2px solid transparent !important; /* Transparent border to match page-list-btn height */
  color: #3b5998 !important;
  font-weight: 600 !important;
  position: relative !important;
  z-index: 10 !important;
  padding: 6px 10px 6px 14px !important; /* Smaller vertical padding for more compact button */
  border-radius: 25px !important; /* More rounded for pill shape with photo */
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  /* DO NOT force display here - let HTML/JS control it */
  align-items: center !important;
  gap: 10px !important;
  height: auto !important;
  min-width: fit-content !important;
  max-width: 300px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 1 !important; /* Match page-list-btn */
  vertical-align: middle !important; /* Match page-list-btn */
}

/* When the profile button is shown (by JS), apply flex layout */
#userProfileBtn[style*="inline-flex"] {
  display: inline-flex !important;
}

.profile-btn-name {
  color: #3b5998 !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.profile-btn-photo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: none; /* No border on photo */
  flex-shrink: 0;
  background: #3b82f6; /* Blue background for initials */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.profile-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

/* Show Page List button - white background with blue text */
.page-list-btn {
  background: white !important;
  border: 2px solid #3b82f6 !important;
  color: #3b5998 !important;
  font-weight: 600 !important;
  /* display controlled by JavaScript - REMOVED !important to allow JS control */
  visibility: visible;
  opacity: 1;
  position: relative !important;
  z-index: 10 !important;
  padding: 8px 16px !important;
  border-radius: 24px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  /* Flexbox properties only apply when button is displayed */
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* When button is shown by JS, apply flexbox */
.page-list-btn[style*="display: inline-flex"],
.page-list-btn[style*="display: flex"] {
  display: inline-flex !important;
}

.page-list-btn:hover {
  background: #3b82f6 !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Pulse attention animation for Quick Sign Up button */
@-webkit-keyframes pulse-attention {
  0%, 100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    -webkit-transform: scale(1.05) translateZ(0);
    transform: scale(1.05) translateZ(0);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.1);
  }
}

@keyframes pulse-attention {
  0%, 100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    -webkit-transform: scale(1.05) translateZ(0);
    transform: scale(1.05) translateZ(0);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.1);
  }
}

/* Study Materials button under search bar - white background with blue text */
.study-materials-btn {
  background: rgba(255, 255, 255, 0.15) !important; /* Semi-transparent for blur effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Subtle border for glass effect */
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; /* Add shadow for legibility */
  font-weight: 600 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10006 !important; /* Very high z-index to be clickable above everything */
  padding: 18px 60px !important; /* Increased padding for bigger button */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Enhanced shadow for depth */
  border-radius: 35px !important;
  text-align: center !important; /* Center the text */
  line-height: normal !important; /* Ensure proper vertical centering */
  font-size: 22px !important; /* Bigger text */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 auto !important;
  margin-top: 16px !important;
  width: 380px !important; /* Wider button */
  min-width: 380px !important; /* Ensure minimum width */
  height: auto !important; /* Ensure height is calculated */
  min-height: 60px !important; /* Minimum height */
  animation: pulse-attention 2s ease-in-out 2s 3 !important; /* Pulse animation: 3 pulses starting after 2 seconds */
  animation-fill-mode: both !important; /* Ensure animation states are preserved */
  
  /* Safari-specific fixes */
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  
  /* Force hardware acceleration for Safari */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  
  /* Ensure clickable area */
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.study-materials-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: white !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  animation-play-state: paused !important; /* Pause animation on hover */
  
  /* Safari hover fixes */
  -webkit-transform: translateY(-2px) scale(1.02) translateZ(0) !important;
  transform: translateY(-2px) scale(1.02) translateZ(0) !important;
  -webkit-transition: all 0.2s ease !important;
  transition: all 0.2s ease !important;
}

/* Responsive adjustments for Quick Sign Up button */
@media (max-width: 768px) {
  .study-materials-btn {
    width: 320px !important;
    min-width: 320px !important;
    font-size: 20px !important;
    padding: 16px 50px !important;
  }
}

@media (max-width: 480px) {
  .study-materials-btn {
    width: 90% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    font-size: 18px !important;
    padding: 14px 40px !important;
  }
}

.page-list-btn.active {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: white !important;
}

/* Toggle indicator dot (subtle) */
.topnav-btn .toggle-indicator {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #ffffff;
  display: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.topnav-btn.active .toggle-indicator { display: inline-block; }

.topnav-spacer { height: 52px; }

@media (max-width: 720px) {
  .topnav { padding: 4px 12px; }
  .topnav-brand { height: 44px; }
  .medarmor-brand { height: 28px; margin-left: -8px; }
  .topnav-center { display: none; }
  .topnav-spacer { height: 50px; }
}

/* Sort modal (ensure visible) - Match book finder structure */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column; /* Stack content vertically: widget above, button footer below */
  align-items: center;
  justify-content: center;
  z-index: 999999; /* Above everything including dock */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.25s ease;
}

/* Hide modal content when aria-hidden="true" - CRITICAL FIX */
.modal-overlay[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Search Bar Fixed Positioning - Always visible during scroll */
.controls {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.controls.fixed-search {
  position: fixed !important;
  top: 58px !important; /* Just under the top navigation */
  left: 20px !important;
  right: 20px !important;
  z-index: 9998 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 auto !important;
  
  /* CRITICAL: Remove from document flow completely */
  transform: translateZ(0) !important; /* Force hardware acceleration */
  will-change: transform !important;
  
  /* CRITICAL: Prevent any scrolling interaction */
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
  isolation: isolate !important;
}

@media (max-width: 768px) {
  .controls.fixed-search {
    left: 15px !important;
    right: 15px !important;
    max-width: calc(100vw - 30px) !important;
  }
}

/* macOS Browser Compatibility - Divider Click Fix */
.result-header {
  /* Ensure dividers are clickable on all macOS browsers */
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  
  /* Prevent text selection interference */
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Ensure cursor is always pointer */
  cursor: pointer !important;
  
  /* Fix any potential stacking/positioning issues */
  position: relative !important;
  z-index: 1 !important;
}

/* macOS Browser Compatibility - Search Input Click Fix */
#searchInput {
  /* Ensure search input is clickable on all macOS browsers */
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  
  /* Enable proper touch interactions */
  -webkit-touch-callout: default !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
  
  /* Ensure cursor is always text */
  cursor: text !important;
  
  /* Fix any potential stacking/positioning issues */
  position: relative !important;
  z-index: 99999 !important;
  
  /* Ensure it's always interactive */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Visitor Counter Styling */
.visitor-counter {
  position: relative;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: clamp(12px, 2.5vw, 16px); /* Responsive font size */
  color: white !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 100; /* Below top bar (10000) but above other content */
  line-height: 1.2;
  max-width: 100vw;
  overflow: hidden;
  text-shadow: 0 1px 3px #3b5998, 0 0 8px rgba(59, 89, 152, 0.25);
}

.visitor-row {
  white-space: nowrap;
  margin-bottom: 2px;
  max-width: 100vw;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 2.5vw, 16px); /* Responsive font size */
}

.users-row {
  white-space: nowrap;
  font-size: clamp(12px, 2.5vw, 16px); /* Responsive font size */
  color: #3b5998 !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  max-width: 100vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-counter span {
  display: inline-block;
  margin: 0 2px;
  font-weight: 700;
  color: #3b5998 !important;
  font-size: inherit; /* Inherit responsive font size */
}

/* Mobile responsive adjustments for visitor counter */
@media (max-width: 768px) {
  .visitor-counter {
    font-size: clamp(10px, 2vw, 14px); /* Smaller font on mobile */
    padding: 0 10px; /* Add horizontal padding */
  }
  
  .visitor-row {
    font-size: clamp(10px, 2vw, 14px); /* Smaller font on mobile */
  }
  
  .users-row {
    font-size: clamp(10px, 2vw, 14px); /* Smaller font on mobile */
  }
}

/* Scroll Control - Disable scrolling when no search results */
body.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}

html.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Ensure visitor counter doesn't interfere with other elements */
.main-search-layout {
  position: relative;
}

/* Search button container styling */
.search-button-container {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  text-align: center;
}

.modal-overlay.active { 
  opacity: 1;
  pointer-events: all;
}
/* Standardized overlay content dimensions - match book-finder-content */
.modal-content {
  width: 85%;
  max-width: 700px;
  max-height: 70vh; /* Match Book Finder */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 20px;
  color: #fff;
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Enable scrolling for modal content */
  overflow-y: auto;
  overflow-x: hidden;
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* Ensure scroll events work properly */
  touch-action: pan-y;
}

/* Reserve space at bottom for the big footer button across overlays */
.modal-content,
.book-finder-content {
  margin-bottom: 90px; /* space for bottom footer */
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20001;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.btn {
  padding: 12px 16px;
  border-radius: 9999px;
  border: 2px solid #d1d5db !important;
  background: white !important;
  color: #1f2937 !important; /* Dark text - reverted */
  font-weight: 600;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn.primary { 
  /* Match Book Finder big close button color */
  background: linear-gradient(135deg, #3b5998, #2c4a7a); 
  border-color: rgba(255,255,255,0.5); 
}

/* Reset Seen Button - Smaller, compact style */
.reset-seen-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-width: 1px !important;
}

/* Blue button style matching book finder close button */
.btn.book-finder-style {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn.book-finder-style:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn.book-finder-style:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.25);
}


/* Account Button in Top Bar */
.account-btn {
  background: linear-gradient(to right, #2563eb, #06b6d4) !important;
  border: 2px solid white !important;
  font-weight: bold !important;
}

.account-btn:hover {
  transform: scale(1.05);
}

/* Modal Page Title */
.modal-page-title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  z-index: 10002;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}

/* Book Finder Modal (Spotlight-style) */
.book-finder-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column; /* Vertical stack for content + footer */
  align-items: center;
  justify-content: center;
  z-index: 999999; /* Above everything including dock */
  overflow: hidden; /* Prevent scrolling the overlay itself */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.25s ease;
}

/* Mobile overlay fixes - ensure full screen coverage */
@media (max-width: 768px) {
  .book-finder-overlay,
  #chapterFinderOverlay,
  #sortFilterOverlay,
  #guideInfoOverlay {
    position: fixed !important;
    top: 0 !important;
  }
  
  /* Ensure overlays are hidden by default on mobile - CRITICAL FIX */
  .book-finder-overlay[aria-hidden="true"],
  #bookFinderOverlay[aria-hidden="true"],
  #chapterFinderOverlay[aria-hidden="true"],
  #sortOverlay[aria-hidden="true"],
  #guideOverlay[aria-hidden="true"],
  #medWallOverlay[aria-hidden="true"],
  .modal-overlay[aria-hidden="true"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Even more specific - when style has display: none */
  .book-finder-overlay[style*="display: none"],
  #bookFinderOverlay[style*="display: none"],
  #chapterFinderOverlay[style*="display: none"],
  #sortOverlay[style*="display: none"],
  #guideOverlay[style*="display: none"],
  #medWallOverlay[style*="display: none"],
  .modal-overlay[style*="display: none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Mobile: Ensure main search layout is visible when overlays are closed */
  body:not(:has(.modal-overlay.active)) #mainSearchLayout,
  body:not(:has(#medWallOverlay.active)) #mainSearchLayout {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  .book-finder-overlay.active,
  .book-finder-overlay:not([aria-hidden="true"]) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure overlay content is properly aligned on mobile */
  .book-finder-content,
  .modal-content {
    margin: 0 !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
  }
}

.book-finder-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}

.book-finder-content {
  width: 85%;
  max-width: 700px;
  max-height: 70vh;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 25px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  pointer-events: auto; /* Ensure content is clickable */
  position: relative;
  display: flex;
  flex-direction: column;
  /* Enable scrolling for book finder content */
  overflow-y: auto;
  overflow-x: hidden;
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* Ensure scroll events work properly */
  touch-action: pan-y;
}

.book-finder-overlay[aria-hidden="false"] .book-finder-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.book-finder-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

/* Chapter Finder Header - Vertical Layout */
.chapter-finder-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.chapter-finder-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Chapter Finder Input Styling */
#chapterFinderInput {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  color: white;
  font-size: 16px;
  padding: 14px 18px;
  width: 100%;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-weight: 400;
}

#chapterFinderInput::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

#chapterFinderInput:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15), 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

#chapterFinderInput:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.book-finder-icon {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 16px;
  flex-shrink: 0;
}

#bookFinderInput {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  outline: none;
  color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  transition: all 0.2s ease;
}

#bookFinderInput:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.book-finder-actions { 
  display: inline-flex; 
  gap: 8px; 
  margin-left: 10px; 
}

.bf-btn { 
  padding: 6px 10px; 
  font-size: 12px; 
  border-radius: 9999px; 
  border: 1px solid #d1d5db !important; 
  background: white !important; 
  color: #1f2937 !important;
  cursor: pointer; 
  transition: all 0.2s ease; 
  white-space: nowrap;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bf-btn:hover { 
  background: white !important; 
  border-color: #3b5998 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
.bf-btn.primary { background: linear-gradient(135deg, #3b82f6, #2563eb); border-color: rgba(255,255,255,0.4); }
.bf-btn.primary:hover { filter: brightness(1.05); }

/* Mobile optimizations for Book Finder buttons */
@media (max-width: 768px) {
  .book-finder-actions { 
    gap: 4px; 
    margin-left: 6px; 
  }
  
  .bf-btn { 
    padding: 4px 6px; 
    font-size: 10px; 
    min-width: auto;
  }
  
  /* Stack buttons vertically on very small screens */
  @media (max-width: 480px) {
    .book-finder-actions { 
      flex-direction: column; 
      gap: 3px; 
      margin-left: 0; 
      margin-top: 6px;
    }
    
    .bf-btn { 
      padding: 3px 8px; 
      font-size: 9px; 
      width: 100%;
      text-align: center;
    }
  }
}

#bookFinderInput::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.book-finder-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: 12px;
  flex-shrink: 0;
  pointer-events: auto !important;
  position: relative;
  z-index: 1000;
}

.book-finder-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.book-finder-close:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.25);
}

.book-finder-close svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: auto;
}

/* Book Finder Top-Right Close Button */
.book-finder-close-top-right {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10003;
}

.book-finder-close-top-right:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.book-finder-close-top-right:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.25);
}

.book-finder-close-top-right svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: auto;
}

/* Active Books Badges */
.active-books-badges {
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.active-books-badges::-webkit-scrollbar {
  width: 4px;
}

.active-books-badges::-webkit-scrollbar-track {
  background: transparent;
}

.active-books-badges::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.active-books-badges:empty {
  display: none;
}

/* Book Priority Drag & Drop Styles */
#bookPriority {
  cursor: grab;
}

#bookPriority:active {
  cursor: grabbing;
}

#bookPriority li {
  cursor: grab !important;
  transition: all 0.2s ease;
  user-select: none;
  pointer-events: auto !important;
  touch-action: none !important;
}

#bookPriority li:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#bookPriority li:active {
  cursor: grabbing;
}

#bookPriority li.dragging {
  opacity: 0.6;
  transform: rotate(2deg);
}

#bookPriority li.drop-target {
  border: 2px dashed rgba(59, 130, 246, 0.5) !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Force enable dragging on book priority items */
#bookPriority li[draggable="true"] {
  -webkit-user-drag: element !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: grab !important;
  pointer-events: auto !important;
}

.active-book-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.active-book-badge:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.4));
  transform: translateY(-1px);
}

.active-book-badge-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
}

.active-book-badge-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s;
}

.active-book-badge:hover .active-book-badge-remove {
  background: rgba(255, 255, 255, 0.5);
}

.active-book-badge-remove svg {
  width: 8px;
  height: 8px;
  stroke-width: 3;
  color: white;
}

.book-finder-results {
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.02);
  scroll-behavior: smooth;
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.book-finder-results::-webkit-scrollbar {
  display: none;
}

.book-finder-result {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid transparent;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Allow scrolling by preventing scroll event capture */
  pointer-events: auto;
  touch-action: pan-y;
  /* Ensure scroll events bubble up to parent */
  overflow: visible;
}

.book-finder-result-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.book-finder-result::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.book-finder-result:hover::before,
.book-finder-result.selected::before {
  opacity: 1;
}

.book-finder-result:hover,
.book-finder-result.selected {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: #3b5998;
}

.book-finder-result:active {
  transform: scale(0.98);
}

.book-finder-result-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-right: 18px;
  flex-shrink: 0;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform; /* Optimize animation */
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}

.book-finder-result:hover .book-finder-result-icon {
  transform: scale(1.02);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.book-finder-result-content {
  flex: 1;
  min-width: 0;
}

.book-finder-result-title {
  color: white;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}

.book-finder-result-description {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}

.book-finder-result-book {
  color: rgba(59, 130, 246, 0.8);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  /* Allow scroll events to bubble up - FIXED TO ENABLE CLICKS */
}

.chapter-page-range {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.chapter-open-btn {
  background: linear-gradient(135deg, #3b5998, #2c4a7a);
  color: white;
  padding: 22px 50px;
  border-radius: 40px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  min-width: 280px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chapter-open-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.chapter-open-btn:active {
  transform: scale(0.98);
}

/* Smaller variant for chapter finder cells */
.chapter-open-btn-small {
  padding: 6px 16px;
  font-size: 13px;
  min-width: 100px;
  border-radius: 18px;
}

/* Chapter Finder book select dropdown */
#chapterBookSelect {
  font-size: 14px !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
  font-weight: 500 !important;
}

.book-finder-result-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  /* Allow vertical scrolling */
  touch-action: pan-y;
}

.book-finder-result-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.book-finder-result:hover .book-finder-result-toggle::before {
  opacity: 1;
}

.book-finder-result-toggle.active {
  background: linear-gradient(135deg, #3b5998, #2c4a7a);
  color: white;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.book-finder-result-toggle.inactive {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.book-finder-result-toggle-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  transition: all 0.2s;
}

.book-finder-result-toggle.active .book-finder-result-toggle-icon {
  background: white;
  border-color: white;
}

.book-finder-result-toggle.active .book-finder-result-toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid #3b82f6;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.book-finder-empty {
  padding: 48px 24px;
  text-align: center;
}

.book-finder-empty-title {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 8px;
}

.book-finder-empty-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.book-finder-footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  width: 100%;
  margin-top: auto; /* Push footer to bottom of overlay */
}

/* Anchor footer to the very bottom of overlay for all modals */
.modal-overlay .book-finder-footer,
.book-finder-overlay > .book-finder-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Unified big footer button style to match Book Finder */
.footer-primary-button {
  width: calc(100% - 40px);
  max-width: 420px;
  font-size: 18px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 50px;
  display: inline-block;
}

/* Match the "Included" pill button style from Book Finder cells */
.included-style {
  background: linear-gradient(135deg, #3b5998, #2c4a7a);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.included-style:hover { filter: brightness(1.07); transform: translateY(-1px); }
.included-style:active { transform: scale(0.98); }

.book-finder-footer span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.book-finder-footer kbd {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.keyboard-hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* === Community Resources Modal Styles === */

/* Community Tabs */
.community-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.community-tab {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 20px;
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
}

.community-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

.community-tab.active {
  background: linear-gradient(135deg, #3b5998, #2c4a7a);
  border-color: #3b5998;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 89, 152, 0.3);
}

/* Tab Content */
.community-tab-content {
  display: none;
}

.community-tab-content.active {
  display: block;
}

/* Community Filters */
.community-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.community-filter-select {
  background: white !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 120px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.community-filter-select:hover {
  background: white !important;
  border-color: #3b5998 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.community-filter-select:focus {
  outline: none;
  border-color: #3b5998 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  background: white !important;
}

.community-filter-select option {
  background: white !important;
  color: #1f2937 !important;
}

/* Community Placeholder */
.community-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.7);
}

/* Upload Form Styles */
.community-upload-form {
  padding: 10px 0;
}

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

/* Tighter spacing for email verification form */
#emailVerification .form-group {
  margin-bottom: 12px !important;
}

#emailVerification .verification-content {
  padding: 0 !important;
}

#emailVerification .verification-content > p {
  margin: 8px 0 !important;
  font-size: 14px;
}

#emailVerification .verification-content > div {
  margin: 12px 0 !important;
}

#emailVerification .auth-btn {
  margin-top: 8px !important;
  margin-bottom: 4px !important;
}

#emailVerification {
  padding: 0 16px 16px 16px !important;
}

.form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group select {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.form-group input[type="file"] {
  cursor: pointer !important;
  position: relative;
  z-index: 1;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="file"]:focus,
.form-group select:focus {
  outline: none;
  border-color: #3b5998;
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.form-group small {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin-top: 4px;
}

/* Tag Checkboxes */
.tag-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.tag-checkboxes label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  margin-bottom: 0;
}

.tag-checkboxes label:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.tag-checkboxes input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.tag-checkboxes input[type="checkbox"]:checked + span,
.tag-checkboxes label:has(input[type="checkbox"]:checked) {
  background: rgba(59, 89, 152, 0.2);
  border-color: #3b5998;
  color: #ffffff;
}

/* Your Uploads Section */
.community-your-uploads {
  padding: 10px 0;
}

.your-uploads-check input[type="email"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.your-uploads-check input[type="email"]:focus {
  outline: none;
  border-color: #3b5998;
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.2);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .book-finder-content {
    width: 95%;
    max-width: none;
    border-radius: 24px;
  }
  
  .book-finder-header {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .book-finder-header .book-finder-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  /* Hide ESC close text on mobile - AGGRESSIVE */
  .keyboard-hint,
  .book-finder-header .keyboard-hint,
  #bookFinderEscClose,
  .modal-page-title + .keyboard-hint,
  .book-finder-top-row .keyboard-hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  #bookFinderInput {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .book-finder-result {
    padding: 14px 16px;
  }
  
  #bookFinderBigClose {
    margin-bottom: 0 !important;
    /* Force same behavior as other close buttons */
    position: relative !important;
    transform: none !important;
  }
  
  /* Ensure all close button containers are identical */
  #bookFinderOverlay .chapter-open-btn,
  #chapterFinderOverlay .chapter-open-btn,
  #communityOverlay .chapter-open-btn,
  #sortOverlay .chapter-open-btn,
  #guideOverlay .chapter-open-btn {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
  }
  
  .modal-content {
    width: 95% !important;
    padding: 16px !important;
    margin: 20px auto !important;
    /* Keep same height as Book Finder for consistency */
    max-height: 70vh !important;
  }
  
  /* Ensure proper centering on iPhone */
  .modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
  }
  
  .book-finder-result-icon {
    width: 48px;
    height: 48px;
    margin-right: 14px;
  }
  
  .book-finder-result-title {
    font-size: 15px;
  }
  
  .book-finder-result-description {
    font-size: 13px;
  }
  
  .book-finder-result-toggle {
    padding: 7px 14px;
    font-size: 12px;
  }
  
  .active-books-badges {
    padding: 10px 16px;
  }
  
  .active-book-badge {
    font-size: 11px;
    padding: 5px 10px;
  }
  
  /* Larger touch targets for mobile */
  .book-finder-result {
    min-height: 60px;
  }
  
  .book-finder-close {
    width: 44px;
    height: 44px;
  }
}

/* Ensure floating search bar never shrinks while focused */
.controls.focused {
  transform: translateX(-50%) translateY(0) scale(1) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Toast notification animations */
@keyframes slideDown {
  from { 
    opacity: 0; 
    transform: translate(-50%, -20px); 
  }
  to { 
    opacity: 1; 
    transform: translate(-50%, 0); 
  }
}

@keyframes slideUp {
  from { 
    opacity: 1; 
    transform: translate(-50%, 0); 
  }
  to { 
    opacity: 0; 
    transform: translate(-50%, -20px); 
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Support for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body {
    background: #000000 !important;
    color: #ffffff !important;
  }
  
  button, .btn {
    border: 2px solid #ffffff !important;
    background: #000000 !important;
    color: #ffffff !important;
  }
  
  #searchInput {
    border: 2px solid #ffffff !important;
    background: #000000 !important;
    color: #ffffff !important;
  }
}

/* Print styles */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  .topnav,
  .dock-container,
  .modal-overlay,
  .book-finder-overlay {
    display: none !important;
  }
  
  #resultsPanel {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Hide ALL search page elements when on Facebook pages - using :has() selector */
/* Only hide when MedX Wall is ACTUALLY VISIBLE (display: flex AND opacity: 1, NOT display: none) */
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) #mainSearchLayout,
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .main-search-layout,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) #mainSearchLayout,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .main-search-layout {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -9999 !important;
}

/* Only hide these when MedX Wall is ACTUALLY VISIBLE (not in transition/closing state) */
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) #medarmorLogo,
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) #searchInput,
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .controls,
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .visitor-counter,
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .topnav,
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) .topnav-spacer,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) #medarmorLogo,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) #searchInput,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .controls,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .visitor-counter,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .topnav,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) .topnav-spacer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -9999 !important;
}

/* Hide main element and results ONLY when on Facebook pages (MedX Wall is actually visible, not closing) */
body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) main,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) main {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -9999 !important;
}

body:has(#medWallOverlay[style*="display: flex"][style*="opacity: 1"]:not([style*="display: none"])) #resultsPanel,
body:has(#medWallOverlay.active[aria-hidden="false"]:not([style*="display: none"])) #resultsPanel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -9999 !important;
}

/* Main search layout needs lower z-index so topnav is above it */
#mainSearchLayout,
.main-search-layout {
  z-index: 1 !important;
  position: relative !important;
}

.topnav {
  z-index: 10005 !important; /* High z-index to ensure topnav buttons are clickable */
  position: relative !important;
}

.topnav-right {
  z-index: 10010 !important; /* Even higher for profile button */
  position: relative !important;
}

.controls {
  z-index: 10003 !important;
  position: relative !important;
}

#medarmorLogo {
  z-index: 1 !important;
  position: relative !important;
}

/* Interactive elements need positive z-index for clickability */
#studyMaterialsBtn {
  z-index: 10004 !important; /* Higher z-index to be clickable */
  position: relative !important;
}

#searchInput {
  z-index: 10006 !important; /* High z-index to be clickable */
  position: relative !important;
  pointer-events: auto !important;
}

#userProfileBtn {
  z-index: 10020 !important; /* Highest priority for profile button */
  position: relative !important;
}

main,
#resultsPanel {
  z-index: -10 !important;
  position: relative !important;
}

/* MedX Wall Overlay Styles - Full Window Design */
#medWallOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important; /* Remove top padding - content handles its own positioning */
  border-radius: 0 !important;
  background: #f7f7f7 !important; /* Background color for content area */
  backdrop-filter: none !important; /* No blur to prevent obscuring dock */
  z-index: 100 !important; /* Above front page but below dock */
  /* Flex properties for proper layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Align content to left, not center */
  justify-content: flex-start !important; /* Align content to top */
  /* Make the entire overlay scrollable with no elastic bounce */
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: none !important; /* Prevent elastic scrolling */
  overscroll-behavior-x: none !important;
  scroll-behavior: auto !important; /* Instant scroll - no smooth animation that could expose gap */
  box-sizing: border-box !important; /* Include padding in height calculation */
}

#medWallOverlay .modal-page-title {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 60px !important;
  background: rgba(255, 255, 255, 0.05) !important; /* Reduced opacity */
  backdrop-filter: none !important; /* No blur to keep dock crisp */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important; /* Center vertically */
  justify-content: center !important; /* Center horizontally */
  font-size: 20px !important;
  font-weight: 600 !important;
  color: white !important;
  z-index: 101 !important; /* Below dock so dock is always visible */
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

#medWallOverlay .modal-content {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  margin: 0 !important;
  margin-top: 90px !important; /* Push content just below both headers */
  padding: 20px !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.02) !important; /* Reduced opacity */
  backdrop-filter: none !important; /* Remove blur completely */
  overflow-y: visible !important;
  overflow-x: hidden !important;
  /* Enhanced Mac scroll support */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
}

/* MedX Wall Modal Content - Reduced padding for wider profile area */
#medWallOverlay .modal-content,
.modal-overlay#medWallOverlay .modal-content {
  padding: 0 !important; /* Remove padding to eliminate left gap */
}

#medWallOverlay .modal-close-btn {
  position: fixed !important;
  top: 15px !important;
  right: 20px !important;
  width: 30px !important;
  height: 30px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  color: white !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10003 !important;
  transition: all 0.2s ease !important;
}

#medWallOverlay .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.1) !important;
}

/* MedX Wall Content Styles - Apple-inspired Design */
.medwall-wall-welcome {
  text-align: center;
  padding: 80px 20px 60px 20px; /* Increased top padding to move text higher */
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start */
  justify-content: center;
  background: white !important; /* White background for welcome form */
  backdrop-filter: none; /* Remove blur for crisp white background */
  border-radius: 24px;
  margin: 20px;
  padding-top: 100px; /* Additional top padding to ensure text is above login form */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border for definition */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

.welcome-content h2 {
  color: #1f2937; /* Dark text for white background */
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-shadow: none; /* Remove text shadow for white background */
}

.welcome-content p {
  color: #4b5563; /* Dark gray text for white background */
  font-size: 1.2rem;
  margin-bottom: 32px;
  line-height: 1.6;
}

.welcome-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.auth-btn {
  padding: 10px 24px; /* Reduced vertical padding for tighter packing */
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;  /* Space between icon and text */
}

.auth-btn.primary {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.auth-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.auth-btn.secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.auth-btn.secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.auth-btn.tertiary {
  background: rgba(255, 255, 255, 0.8);
  color: #6b7280;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.auth-btn.tertiary:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1f2937;
  transform: translateY(-2px);
}

.auth-btn.danger {
  background: rgba(239, 68, 68, 0.8);
  color: white;
  border: 1px solid rgba(239, 68, 68, 0.9);
  backdrop-filter: blur(10px);
}

.auth-btn.danger:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(220, 38, 38, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Warning and Confirmation Boxes */
.warning-box {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.warning-box h4 {
  color: #ffc107;
  margin: 0 0 12px 0;
  font-size: 18px;
}

.warning-box p {
  color: rgba(255, 255, 255, 0.9);
  margin: 8px 0;
}

.warning-box ul {
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0;
  padding-left: 20px;
}

.warning-box li {
  margin: 6px 0;
}

.critical-warning-box {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.critical-warning-box h4 {
  color: #ef4444;
  margin: 0 0 12px 0;
  font-size: 18px;
}

.critical-warning-box p {
  color: rgba(255, 255, 255, 0.9);
  margin: 8px 0;
}

.critical-warning-box ul {
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0;
  padding-left: 20px;
}

.critical-warning-box li {
  margin: 6px 0;
}

.confirmation-actions,
.final-confirmation-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.confirmation-actions .auth-btn,
.final-confirmation-actions .auth-btn {
  flex: 1;
  min-width: 160px;
}

/* Post Styles - More Compact */
.post-item {
  background: white !important; /* White background for post widgets */
  backdrop-filter: none; /* Remove blur for crisp white background */
  border-radius: 24px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border for definition */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Reduced shadow for compact look */
}

.post-item:hover {
  background: white !important; /* Keep white on hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.author-info h4 {
  color: white;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.author-info span {
  color: #6b7280; /* Dark gray for white background */
  font-size: 0.9rem;
}

.post-content h3 {
  color: #1f2937; /* Dark text for white background */
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.post-content p {
  color: #4b5563; /* Dark gray text for white background */
  line-height: 1.4;
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

.post-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9fafb; /* Light gray background for white post */
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb; /* Light border for white background */
  margin-bottom: 8px;
}

.post-file span {
  color: #374151; /* Dark text for white background */
  font-size: 0.85rem;
}

/* Document Thumbnail Styles */
.document-thumbnail {
  width: 60px;
  height: 80px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.document-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-thumbnail .pdf-icon {
  font-size: 24px;
  color: #dc2626;
}

.document-thumbnail .doc-icon {
  font-size: 24px;
  color: #ffffff;
}

.document-thumbnail .image-icon {
  font-size: 24px;
  color: #059669;
}

.post-file-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.download-btn {
  background: linear-gradient(135deg, #34C759 0%, #28A745 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.download-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.post-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.action-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-1px);
}

/* Authentication Forms */
.auth-forms {
  position: fixed; /* Fixed positioning so it can be truly hidden */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh; /* Use full viewport height */
  min-height: 100vh; /* Ensure full height */
  max-height: 100vh; /* Prevent extending beyond viewport */
  background: transparent; /* Keep transparent - MedX Wall overlay provides background */
  display: none; /* HIDDEN BY DEFAULT - JavaScript can override this */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  z-index: 10020; /* Higher than everything else to ensure clickability */
  /* Note: z-index will be set to -9999 by JavaScript when hidden, and 10020 when shown */
  overflow: hidden !important; /* Prevent container from scrolling - only individual forms scroll */
  box-sizing: border-box; /* Include padding in height calculation */
}

/* When auth forms need to be shown (inside MedX Wall) - HIGHEST PRIORITY */
#medWallOverlay.active .auth-forms,
#medWallOverlay[aria-hidden="false"] .auth-forms,
#medWallOverlay .auth-forms,
.auth-forms.active {
  display: flex !important; /* Show when inside MedX Wall or marked active */
  z-index: 10005 !important; /* Restore proper z-index */
  pointer-events: auto !important; /* Enable clicks */
  visibility: visible !important; /* Make visible */
  position: fixed !important; /* Keep fixed to maintain full screen centering */
  opacity: 1 !important; /* Full opacity */
  /* CRITICAL: No transitions for instant visibility */
  transition: none !important;
  animation: none !important;
}

/* Individual auth forms - JavaScript has FULL control over visibility */
/* DO NOT set display, visibility, opacity, or pointer-events here */
/* Let JavaScript completely control which form shows */

/* Form inputs and buttons - only enable if parent form is visible */
/* JavaScript controls parent form visibility, these inherit from it */

.auth-form {
  background: white !important; /* White background for forms */
  backdrop-filter: none; /* Remove blur for crisp white background */
  border-radius: 24px;
  padding: 16px !important; /* Consistent padding all around */
  max-width: 450px !important; /* Cap at 450px to prevent stretching */
  width: 90%;
  border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border for definition */
  position: relative !important; /* Use relative positioning for proper centering within flex container */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth and separation */
  max-height: 85vh; /* Reduced from 90vh */
  overflow-y: auto; /* Allow scrolling if content is too tall */
  /* LET INLINE STYLES CONTROL VISIBILITY - Don't set display/visibility/opacity here */
  /* CRITICAL: No transitions for instant visibility */
  transition: none !important;
  animation: none !important;
}

/* Ensure auth form buttons are above everything */
.auth-form button,
.auth-form .auth-btn {
  position: relative !important;
  z-index: 10020 !important;
  pointer-events: auto !important;
}

/* Individual form IDs - let parent container control visibility */
/* DO NOT set display/visibility here - it prevents CSS from showing them inside overlay */

/* Individual form sizing - inherit absolute positioning from .auth-form */
#signupForm,
#loginForm,
#emailVerification,
#forgotPasswordForm {
  overflow-y: auto !important; /* Allow scrolling if form is too tall */
  overflow-x: hidden !important; /* Prevent horizontal scroll */
}

.form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 8px 0 !important; /* Zero top margin, white background goes to top */
  padding-top: 12px !important; /* Add padding inside the white background */
  text-align: center;
  position: relative !important;
  width: 100%;
}

.form-logo-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 4px; /* Reduced gap after logo container */
}

.form-logo {
  height: 40px;
  width: auto;
  margin-bottom: 6px; /* Reduced gap after logo */
}

.close-form-btn,
#closeSignupForm,
#closeLoginForm,
button.close-form-btn,
.form-header .close-form-btn,
.auth-form .close-form-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
  z-index: 100000 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-family: Arial, sans-serif !important;
  font-weight: normal !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.close-form-btn:hover,
#closeSignupForm:hover,
#closeLoginForm:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important;
  transform: rotate(90deg) !important;
}

.form-header h3 {
  color: #1f2937; /* Dark text for white background */
  margin: 0;
  margin-top: 4px; /* Small gap from logo */
  font-size: 1.4rem; /* Slightly smaller */
  font-weight: 600;
}

.form-group {
  margin-bottom: 10px; /* Reduced for tighter packing */
}

.form-group label {
  display: block;
  color: #374151; /* Dark text for white background */
  margin-bottom: 4px; /* Reduced for tighter packing */
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 12px; /* Reduced for tighter packing */
  border: 1px solid #d1d5db; /* Light border for white background */
  border-radius: 8px;
  background: white; /* White background for inputs */
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #e5e7eb 98%, #e5e7eb 100%); /* Thin line background */
  color: #1f2937; /* Dark text for white background */
  font-size: 0.95rem; /* Slightly smaller font */
  transition: all 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9ca3af; /* Light gray for white background */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3b5998;
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.1);
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #3b5998 98%, #3b5998 100%); /* Blue thin line when focused */
}

/* More specific auth form input styling to override conflicting rules */
.auth-form .form-group input,
.auth-form .form-group select,
.auth-form .form-group textarea {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #e5e7eb 98%, #e5e7eb 100%) !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
}

.auth-form .form-group input:focus,
.auth-form .form-group select:focus,
.auth-form .form-group textarea:focus {
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #3b5998 98%, #3b5998 100%) !important;
  border-color: #3b5998 !important;
}

.form-footer {
  text-align: center;
  margin-top: 12px; /* Reduced for tighter packing */
}

.form-footer p {
  color: #6b7280; /* Dark gray for white background */
  margin: 6px 0; /* Reduced for tighter packing */
}

.form-footer a {
  color: #3b5998;
  text-decoration: none;
  font-weight: 500;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10010 !important;
  touch-action: manipulation !important;
}

.form-footer a:hover {
  text-decoration: underline;
}

.verification-content {
  text-align: center;
}

.verification-content p:first-of-type {
  margin-top: 0; /* Remove top margin from first paragraph */
}

.verification-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* User Dashboard */
.user-dashboard {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 90px !important; /* Push 3-column content just below header */
  width: 100%;
}

/* MedX Wall User Dashboard - Wider for better mobile experience */
#medWallOverlay .user-dashboard,
.modal-overlay#medWallOverlay .user-dashboard {
  max-width: 95% !important;
  width: 95% !important;
  margin: 0 auto !important;
  padding: 16px !important;
}

/* Removed responsive width adjustments - single layout only */

/* Removed responsive breakpoints - single layout only */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white !important;
  backdrop-filter: none !important;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info h3 {
  color: #3b5998 !important; /* Blue text for white background */
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.user-info p {
  color: #666 !important;
  margin: 4px 0 0 0;
  font-size: 0.9rem;
}

.user-avatar {
  width: 80px;
  height: 80px;
  background: #007AFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 2px solid rgba(0, 122, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.user-avatar-container {
  position: relative;
  display: inline-block;
}

.change-photo-btn {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 10;
}

.change-photo-btn:hover {
  background: #0051D5;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.user-details h3 {
  color: #3b5998 !important; /* Blue text for white background */
  margin: 0 0 4px 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.user-details p {
  color: #666 !important;
  margin: 0;
  font-size: 0.9rem;
}

.dashboard-actions {
  display: flex;
  gap: 12px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
}

.tab-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.tab-btn.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.profile-settings {
  background: white !important;
  backdrop-filter: none !important;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Force all profile settings form elements to have white backgrounds - Maximum Specificity */
.profile-settings .form-group input,
.profile-settings .form-group select,
.profile-settings .form-group textarea,
#medWallOverlay .profile-settings .form-group input,
#medWallOverlay .profile-settings .form-group select,
#medWallOverlay .profile-settings .form-group textarea {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #e5e7eb 98%, #e5e7eb 100%) !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.profile-settings .form-group input:focus,
.profile-settings .form-group select:focus,
.profile-settings .form-group textarea:focus,
#medWallOverlay .profile-settings .form-group input:focus,
#medWallOverlay .profile-settings .form-group select:focus,
#medWallOverlay .profile-settings .form-group textarea:focus {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #3b5998 98%, #3b5998 100%) !important;
  border-color: #3b5998 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.profile-settings h4 {
  color: #3b5998 !important; /* Blue text for white background */
  margin: 0 0 20px 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.profile-settings p {
  color: #666 !important;
  margin: 8px 0;
}

.profile-settings input,
.profile-settings select {
  background: white !important;
  color: #3b5998 !important; /* Blue text - was invisible white on white! */
  border: 1px solid #ddd !important;
}

.profile-settings input:focus,
.profile-settings select:focus {
  border-color: #007AFF !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* Profile Tab Content Widgets */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.tab-pane .profile-widget {
  background: white !important;
  backdrop-filter: none !important;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Force all profile page form elements to have white backgrounds - Maximum Specificity */
.tab-pane .form-group input,
.tab-pane .form-group select,
.tab-pane .form-group textarea,
.profile-settings .form-group input,
.profile-settings .form-group select,
.profile-settings .form-group textarea,
#medWallOverlay .tab-pane .form-group input,
#medWallOverlay .tab-pane .form-group select,
#medWallOverlay .tab-pane .form-group textarea,
#medWallOverlay .profile-settings .form-group input,
#medWallOverlay .profile-settings .form-group select,
#medWallOverlay .profile-settings .form-group textarea {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #e5e7eb 98%, #e5e7eb 100%) !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tab-pane .form-group input:focus,
.tab-pane .form-group select:focus,
.tab-pane .form-group textarea:focus,
.profile-settings .form-group input:focus,
.profile-settings .form-group select:focus,
.profile-settings .form-group textarea:focus,
#medWallOverlay .tab-pane .form-group input:focus,
#medWallOverlay .tab-pane .form-group select:focus,
#medWallOverlay .tab-pane .form-group textarea:focus,
#medWallOverlay .profile-settings .form-group input:focus,
#medWallOverlay .profile-settings .form-group select:focus,
#medWallOverlay .profile-settings .form-group textarea:focus {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #3b5998 98%, #3b5998 100%) !important;
  border-color: #3b5998 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tab-pane .profile-widget h4 {
  color: #3b5998 !important; /* Blue text for white background */
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.tab-pane .profile-widget p {
  color: #666 !important;
  margin: 8px 0;
}

.tab-pane .profile-widget .empty-state {
  color: #999 !important;
  text-align: center;
  padding: 40px 20px;
}

/* User Info Widget */
.user-info-widget {
  background: white !important;
  backdrop-filter: none !important;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-info-widget h3 {
  color: #3b5998 !important; /* Blue text for white background */
  margin: 0 0 12px 0;
}

.user-info-widget p {
  color: #666 !important;
  margin: 4px 0;
}

/* Dashboard Actions */
.dashboard-actions {
  background: white !important;
  backdrop-filter: none !important;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Post Creation Modal */
.post-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10005;
}

.post-modal .modal-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  color: white;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.file-preview span {
  color: white;
  font-size: 0.9rem;
}

#removeFile {
  background: rgba(255, 59, 48, 0.2);
  color: #FF3B30;
  border: 1px solid rgba(255, 59, 48, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

#removeFile:hover {
  background: rgba(255, 59, 48, 0.3);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Following List */
.following-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.following-table-container {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.following-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.following-table thead {
  background: #3b5998; /* Blue background for table headers */
}

.following-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: white; /* White text for blue table headers */
  border-bottom: 2px solid #e5e7eb;
  font-size: 14px;
}

.following-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #1f2937;
  font-size: 14px;
}

.following-row:hover {
  background: #f8f9fa;
}

.following-table .user-name {
  font-weight: 500;
}

.following-table .user-school {
  color: #6b7280;
}

.following-table .user-year {
  color: #6b7280;
}

.following-table .user-action {
  text-align: center;
}

.following-table .follow-btn {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.following-table .follow-btn:hover {
  background: linear-gradient(135deg, #0051D5 0%, #003d99 100%);
  transform: translateY(-1px);
}

.following-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.following-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.following-item .author-avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  font-size: 1.4rem;
}

.following-item .author-info h4 {
  color: white;
  margin: 0 0 4px 0;
  font-size: 1rem;
}

.following-item .author-info span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.follow-btn {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.follow-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.follow-btn.following {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.follow-btn.following:hover {
  background: rgba(255, 59, 48, 0.2);
  color: #FF3B30;
}

/* Notification Animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Post Tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.tag {
  background: rgba(0, 89, 152, 0.2);
  color: #3b5998;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error States */
.error {
  border-color: #FF3B30 !important;
  background: rgba(255, 59, 48, 0.1) !important;
}

.error-message {
  color: #FF3B30;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

/* Success States */
.success {
  border-color: #34C759 !important;
  background: rgba(52, 199, 89, 0.1) !important;
}

/* Removed responsive design - single layout only */
.tab-btn {
    margin-bottom: 4px;
  }
  
  .post-modal .modal-content {
    margin: 20px;
    max-height: 90vh;
  }
  
  .following-container {
    grid-template-columns: 1fr;
  }

.auth-check {
  text-align: center;
  padding: 60px 20px;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-content {
  max-width: 500px;
  width: 100%;
}

.auth-content h2 {
  color: white;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 16px;
}

.auth-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin-bottom: 40px;
  line-height: 1.5;
}

.auth-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


.study-wall {
  padding: 40px 20px;
  min-height: calc(100vh - 60px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.search-section {
  margin-bottom: 40px;
  padding: 0 20px;
}

.search-container {
  display: flex;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(10px);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.search-submit {
  padding: 16px 24px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.search-submit:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
}

.posts-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.posts-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loading-spinner {
  text-align: center;
  padding: 40px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner p {
  color: #86868b;
  font-size: 16px;
  margin: 0;
}

/* Form Notifications - Mobile Compatible */
.form-notification {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  animation: slideIn 0.3s ease-out !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  word-wrap: break-word !important;
  line-height: 1.4 !important;
}

.form-notification-success {
  background: linear-gradient(135deg, #34C759 0%, #28A745 100%) !important;
}

.form-notification-error {
  background: linear-gradient(135deg, #FF3B30 0%, #D70015 100%) !important;
}

.form-notification-warning {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
}

.form-notification-info {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%) !important;
}

/* Removed mobile optimizations - single layout only */

/* Override any main-logo margins specifically for MedX Wall */
#medWallOverlay .modal-page-title .main-logo {
  margin: 0 !important; /* Force remove all margins */
  margin-bottom: 0 !important; /* Specifically remove bottom margin */
}

/* Even more specific override for MedX Wall logo */
.modal-overlay#medWallOverlay .modal-page-title img.main-logo {
  margin: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Subtle delete account link styling */
.profile-danger-zone {
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.profile-danger-zone p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
}

.profile-danger-zone a {
  color: #ff6b6b !important;
  text-decoration: none !important;
  font-size: 14px !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

.profile-danger-zone a:hover {
  opacity: 1 !important;
  text-decoration: underline !important;
}

.profile-danger-zone a#logoutBtn:hover {
  color: #4b5563 !important;
}

/* Facebook-style Layout for MedX Wall */
.MedWall-header {
  background: transparent;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: auto !important; /* Auto height to fit both bars */
  min-height: 55px !important; /* Minimum height */
  max-height: 85px !important; /* Maximum to prevent excessive growth */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex !important;
  border-radius: 0 0 12px 12px; /* Rounded bottom corners */
  flex-direction: column !important;
}

/* Top Bar - Dark Blue */
.header-top-bar {
  background: #1a365d; /* Dark blue like Facebook */
  height: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

/* Bottom Bar - Lighter Blue with bottom corner radius only */
.header-bottom-bar {
  border-radius: 0 0 12px 12px !important; /* Bottom corners only */
  background: linear-gradient(to bottom, #3b5998, #2c5282);
  height: 26px;
  display: flex;
  font-size: 12px; /* Slightly smaller font */
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo {
  color: white;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-transform: lowercase;
}

.header-logo::first-letter {
  font-size: 20px;
}

.header-link {
  color: white !important; /* White text by default */
  background: transparent !important; /* Transparent background */
  text-decoration: none;
  font-size: 12.5px !important; /* Half the size from 25px */
  font-family: Arial, sans-serif;
  text-transform: capitalize !important; /* Capitalize first letter */
  padding: 6px 14px !important; /* Larger padding for pill shape */
  border-radius: 24px !important; /* Full pill shape */
  transition: all 0.2s ease;
  font-weight: bold !important; /* Bold text */
  display: inline-block;
  border: none !important; /* No border */
}

.header-link:hover {
  background: white !important; /* White fill on hover */
  color: #3b5998 !important; /* Blue text on hover */
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-link:active {
  background: white !important; /* White fill on click */
  color: #3b5998 !important; /* Blue text on click */
  transform: scale(0.98); /* Slight press effect */
}

/* Notifications badge styling */
.notifications-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3b5998 !important; /* Facebook blue */
  color: #ffffff !important; /* Pure white text */
  font-size: 13px !important; /* Bigger text - increased from 10px */
  font-weight: 700 !important; /* Extra bold */
  min-width: 20px !important; /* Slightly larger circle */
  min-height: 20px !important;
  padding: 4px !important;
  border-radius: 50% !important; /* Perfect circle */
  margin-left: 6px;
  text-align: center !important;
  line-height: 1 !important;
  aspect-ratio: 1 / 1; /* Ensures perfect circle for any content */
  vertical-align: middle; /* Better alignment with text */
}

/* Ensure badge text is always white */
#notificationsBadge,
.notifications-badge,
.notifications-badge * {
  color: #ffffff !important;
}

#notificationsHeaderBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notifications-text {
  color: white !important; /* White text */
}

.MedWall-header .notifications-text {
  color: white !important; /* White text in MedX header */
}

#medWallOverlay .notifications-text,
.modal-overlay#medWallOverlay .notifications-text {
  color: white !important; /* Force white in all contexts */
}

#medWallOverlay #notificationsHeaderBtn .notifications-text,
.modal-overlay#medWallOverlay #notificationsHeaderBtn .notifications-text {
  color: white !important; /* Force white for notifications button text */
}

/* Notifications text should turn blue on hover - ULTIMATE SPECIFICITY */
/* These rules must come AFTER the white color rules to override them */

#medWallOverlay #notificationsHeaderBtn:hover .notifications-text,
.modal-overlay#medWallOverlay #notificationsHeaderBtn:hover .notifications-text,
#medWallOverlay .MedWall-header #notificationsHeaderBtn:hover .notifications-text,
.modal-overlay#medWallOverlay .MedWall-header #notificationsHeaderBtn:hover .notifications-text {
  color: #3b5998 !important; /* Blue text on hover - ultimate specificity */
}

#notificationsHeaderBtn:hover .notifications-text {
  color: #3b5998 !important; /* Blue text on hover for notifications button */
}

.header-link:hover .notifications-text {
  color: #3b5998 !important; /* Blue text on hover */
}

.MedWall-header .header-link:hover .notifications-text {
  color: #3b5998 !important; /* Blue text on hover in MedX header */
}

#medWallOverlay .header-link:hover .notifications-text,
.modal-overlay#medWallOverlay .header-link:hover .notifications-text {
  color: #3b5998 !important; /* Blue text on hover - override medxWallOverlay */
}

#medWallOverlay .MedWall-header .header-link:hover .notifications-text,
.modal-overlay#medWallOverlay .MedWall-header .header-link:hover .notifications-text {
  color: #3b5998 !important; /* Blue text on hover - maximum specificity */
}

/* Favorites Section */
.favorites-section h4 {
  display: none !important; /* Hide the "⭐ Favorites" header completely */
}

/* Placeholder rectangles for favorites */
.favorites-placeholder-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* Prevent wrapping - keep horizontal */
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 0 12px !important;
  overflow-x: auto !important; /* Horizontal scroll when needed */
  overflow-y: hidden !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.favorites-placeholder-container::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

.favorites-placeholder-rect {
  width: 75px !important;
  height: 80px !important; /* Increased vertical height */
  background: #D8DEEA !important; /* Light blue placeholder */
  border-radius: 8px !important;
  border: 2px dashed #90caf9 !important; /* Light blue dashed border */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important; /* Prevent shrinking */
}

.favorites-placeholder-text {
  color: #90caf9 !important; /* Light blue text */
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Empty state message styling */
.favorites-empty-message {
  color: #3b5998 !important; /* Blue text for "No favorites yet..." */
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 4px !important;
  margin: 0 !important;
}

/* Toggle button for favorites/meet someone new */
.favorites-toggle-btn {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  background: #3b5998 !important;
  color: white !important;
  border: none !important;
  border-radius: 15px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.favorites-toggle-btn:hover {
  background: #2c4a7a !important;
  transform: translateY(-1px) !important;
}

/* Meet someone new section */
.meet-someone-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex: 1 !important;
  align-items: stretch !important;
}

.meet-someone-container::-webkit-scrollbar {
  display: none !important;
}

.meet-someone-card {
  width: 75px !important;
  align-self: stretch !important;
  background: white !important;
  border-radius: 4px !important;
  border: 1px solid #d3d6db !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.meet-someone-card:hover {
  border-color: #3b5998 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.meet-someone-photo {
  width: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
  background: #3b5998 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.meet-someone-name {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #1d2129 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 0 !important;
  flex: 0 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: white !important;
  margin: 0 !important;
}

/* User Mention Autocomplete */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  margin-bottom: 8px;
}

.mention-dropdown-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
  background: #f9f9f9;
  border-radius: 12px 12px 0 0;
}

.mention-list {
  max-height: 160px;
  overflow-y: auto;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mention-item:hover {
  background: #f5f5f5;
}

.mention-item:last-child {
  border-radius: 0 0 12px 12px;
}

.mention-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.mention-info {
  flex: 1;
  min-width: 0;
}

.mention-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 2px;
}

.mention-username {
  font-size: 12px;
  color: #666;
}

/* Tagged user in post content */
.user-tag {
  color: #667eea;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.user-tag:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* Post Media Previews (in create form) */
.image-preview, .video-preview, .gif-preview {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview img, .gif-preview img {
  max-width: 100%;
  max-height: 400px;
  display: block;
  border-radius: 8px;
}

.video-preview video {
  max-width: 100%;
  max-height: 400px;
  display: block;
  border-radius: 8px;
}

.link-preview {
  margin-top: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  background: #f9f9f9;
}

.link-preview-content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.link-preview-content img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.link-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.link-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.link-info span {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
}

/* Post Media in Feed */
.post-media {
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-media:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.post-media-image img,
.post-media-gif img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  display: block;
}

.post-media-video video {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}

.post-media:hover .media-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.media-overlay span {
  color: white;
  font-size: 18px;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.post-media:hover .media-overlay span {
  opacity: 1;
  transform: scale(1);
}

/* Link Card in Post */
.post-media-link {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.post-media-link:hover {
  transform: translateY(-2px);
}

.link-card {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  transition: background 0.2s ease;
}

.link-card:hover {
  background: rgba(255,255,255,0.08);
}

.link-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.link-card-info {
  padding: 20px;
}

.link-card-info h4 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.link-card-info p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.link-domain {
  display: inline-block;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* File Card in Post */
.post-file-card {
  margin-top: 16px;
  padding: 20px;
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255,255,255,0.05);
}

.post-file-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}

.file-icon {
  font-size: 48px;
}

.file-info {
  flex: 1;
}

.file-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.file-size {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}

/* Post Title */
.post-title {
  margin-top: 16px;
}

.post-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

/* Post Actions Enhancement */
.post-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.post-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.post-action-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #ffffff;
  transform: translateY(-1px);
}

.action-icon {
  font-size: 18px;
}

.action-label {
  flex: 1;
  text-align: left;
}

.action-count {
  font-size: 12px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}

/* Media Viewer Modal */
.media-viewer-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000000;
  align-items: center;
  justify-content: center;
}

.media-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  cursor: pointer;
}

.media-viewer-content {
  position: relative;
  z-index: 1;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 300;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-viewer-close:hover {
  background: #ffffff;
  transform: scale(1.1);
}

/* Share Modal */
.share-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999998;
  align-items: center;
  justify-content: center;
}

.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.share-modal-content {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 500px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.share-modal-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

.share-modal-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-option:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.share-option-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.share-option-text {
  flex: 1;
}

.share-option-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.share-option-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.share-link-section {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.share-link-section input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
}

.copy-link-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

/* Notification System */
.notification-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000000 !important; /* Higher than dock (9999999) and topnav (10000) - always visible on top */
  pointer-events: none !important; /* Allow clicks to pass through container */
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  gap: 12px !important;
}

.notification-popup {
  position: relative !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important; /* Clear blur background */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 24px !important; /* Pill shape */
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  pointer-events: auto !important; /* Enable clicks on notification */
  transform: translateY(-100px) !important; /* Start hidden above */
  opacity: 0 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  flex: 1 !important;
  max-width: calc(100vw - 200px) !important;
  min-width: 300px !important;
  min-height: fit-content !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.notification-popup.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.notification-popup.hide {
  transform: translateY(-100px) !important;
  opacity: 1 !important;
}

/* Smooth transform during swipe gestures */
.notification-popup.swiping {
  transition: none !important; /* Disable transition during active swipe for instant feedback */
}

.notification-clear-btn {
  position: relative !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 24px !important;
  width: 80px !important;
  padding: 12px 8px !important;
  height: auto !important;
  min-height: fit-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transform: translateY(-100px) !important;
  opacity: 0 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: auto !important;
  text-align: center !important;
  line-height: 1.2 !important;
  align-self: stretch !important;
}

.notification-clear-btn.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.notification-clear-btn.hide {
  transform: translateY(-100px) !important;
  opacity: 1 !important;
}

.notification-clear-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.notification-photo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.notification-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.notification-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000 !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.2 !important;
}

.notification-message {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #000 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.notification-timestamp {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #666 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  min-width: 60px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .notification-popup {
    margin: 6px 12px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  
  .notification-photo {
    width: 36px !important;
    height: 36px !important;
  }
  
  .notification-title {
    font-size: 13px !important;
  }
  
  .notification-message {
    font-size: 12px !important;
  }
  
  .notification-timestamp {
    font-size: 10px !important;
  }
}

/* Favorites container and content */
.favorites-scroll-container,
.favorites-scroll-container div,
.user-info-box {
  background: white !important; /* White background for favorites container */
  background-color: white !important;
  min-height: 120px !important; /* Prevent vertical shrinking */
  height: auto !important; /* Allow content to expand */
  flex-shrink: 0 !important; /* Prevent flex shrinking */
}

/* Ensure favorites empty state has white background */
#favoritesScrollView div[style*="padding: 20px"],
#favoritesScrollView div,
.favorites-scroll-container div,
.user-info-box .favorites-scroll-container div {
  background: white !important;
  background-color: white !important;
}

/* Force white background for favorites empty message */
#favoritesScrollView div[style*="text-align: center"],
#favoritesScrollView div[style*="color: #65676b"] {
  background: white !important;
  background-color: white !important;
}

/* Favorites horizontal scroll */
.favorites-scroll-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.favorites-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.header-separator {
  display: none; /* Remove separators */
}

.header-profile-name {
  color: white !important;
  font-size: 20px; /* Bigger font */
  font-weight: 700; /* Bolder font */
  font-family: Arial, sans-serif;
  text-decoration: none !important; /* Remove underline */
}

.header-page-title {
  color: white !important;
  font-size: 20px; /* Bigger font */
  font-weight: 700; /* Bolder font */
  font-family: Arial, sans-serif;
}

/* Force MedX title to be white on Facebook page - MAXIMUM PRIORITY */
#medWallOverlay .header-page-title,
#medWallOverlay .header-bottom-bar .header-page-title,
.modal-overlay#medWallOverlay .header-page-title,
.modal-overlay#medWallOverlay .header-bottom-bar .header-page-title,
.MedWall-header .header-page-title,
.MedWall-header .header-bottom-bar .header-page-title,
.header-bottom-bar .header-page-title,
.header-bottom-bar .header-right .header-page-title,
span.header-page-title {
  color: white !important;
  color: rgb(255, 255, 255) !important;
}

/* Even more specific for the span element */
#medWallOverlay .header-bottom-bar .header-right span.header-page-title,
.modal-overlay#medWallOverlay .header-bottom-bar .header-right span {
  color: white !important;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo {
  font-size: 20px;
  font-weight: bold;
  color: white !important;
  text-decoration: none;
  font-family: Arial, sans-serif;
}

.header-profile-name {
  font-size: 20px; /* Bigger font */
  color: white !important;
  font-weight: 700; /* Bolder font */
  font-family: Arial, sans-serif;
  text-decoration: none !important; /* No underline */
}

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-top-bar .header-link {
  color: white !important; /* White text */
  background: transparent !important;
  text-decoration: none;
  font-size: 12.5px !important; /* Half the size from 25px */
  font-weight: bold !important; /* Bold text */
  text-transform: capitalize !important; /* Capitalize first letter */
  padding: 6px 14px !important;
  border-radius: 24px !important; /* Pill shape */
  transition: all 0.2s ease;
}

.header-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Removed separator ::after rule - no separators to match Facebook */

/* Main Container */
.MedWall-main-container {
  margin-top: 0px !important; /* No margin - profile page handles its own spacing */
  min-height: 100vh !important;
  background: #f7f7f7 !important;
  padding: 0 !important; /* No gap between header and content */
  width: 100%;
  max-width: none;
}

/* Remove margin when auth forms are shown */
.MedWall-main-container:has(#authForms[style*="display: flex"]) {
  margin-top: 0px !important;
  min-height: 100vh !important;
}

/* Ensure body background matches when MedX Wall is open */
#medWallOverlay {
  background: #f7f7f7 !important;
}

#medWallOverlay[aria-hidden="false"] {
  background: #f7f7f7 !important;
}

/* =========================================================================
   REBUILT COLUMN LAYOUT SYSTEM - NO WRAPPING, VERTICAL EXPANSION
   ========================================================================= */

/* Main Profile Page Container - Horizontal Layout, No Wrapping */
.MedWall-profile-page,
#medWallOverlay .MedWall-profile-page,
.modal-overlay#medWallOverlay .MedWall-profile-page {
  display: flex !important;
  flex-direction: row !important; /* Horizontal layout */
  flex-wrap: nowrap !important; /* NEVER wrap - stay side by side */
  width: 100% !important;
  height: auto !important; /* Allow vertical expansion */
  min-height: calc(100vh - 40px) !important; /* Full viewport height minus minimal gap */
  margin: 0 !important;
  margin-top: 110px !important; /* Gap above scrollview - header height (59px) + search bar height (50px) + 1px gap */
  padding-top: 0 !important; /* No top padding */
  padding: 0 6px 0 16px !important; /* Bigger gap on left (16px), normal on right (6px) */
  background: #e9ebee !important; /* Facebook's light gray background */
  gap: 0px !important; /* No gap - button sits in between */
  align-items: flex-start !important; /* Align columns to top */
  justify-content: flex-start !important; /* Start from left edge */
  position: relative !important;
  background: #f7f7f7 !important; /* Background matches overlay to hide any gap */
  box-sizing: border-box !important;
}

/* All desktop breakpoints removed - always use mobile layout */

/* Left Navigation - Completely Hidden */
.MedWall-left-nav,
#medWallOverlay .MedWall-left-nav,
.modal-overlay#medWallOverlay .MedWall-left-nav,
body .MedWall-left-nav,
html body .MedWall-left-nav {
  display: none !important;
  visibility: hidden !important;
}

/* Profile Content Column - Leftmost Anchor, Fixed Width, No Wrapping */
.MedWall-profile-content,
#medWallOverlay .MedWall-profile-content,
.modal-overlay#medWallOverlay .MedWall-profile-content {
  flex: 0 0 320px !important; /* Fixed width for profile photo column */
  width: 320px !important;
  min-width: 320px !important;
  max-width: 350px !important;
  height: auto !important; /* Allow vertical expansion */
  background: white !important;
  border: 1px solid #d3d6db;
  border-radius: 4px; /* Slight rounding for modern look */
  margin: 0 !important;
  margin-left: 5px !important; /* Minimal gap: button at 1px + 20px width + 5px = 26px */
  margin-right: 7px !important; /* Gap on right side between profile and mini-feed */
  padding: 0 !important;
  box-shadow: none;
  order: 1 !important; /* First column - leftmost anchor */
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important; /* Ensure clickability */
  pointer-events: auto !important;
  overflow-y: auto !important; /* Allow vertical scrolling if needed */
  overflow-x: hidden !important; /* Prevent horizontal overflow */
  display: none !important; /* Hidden by default - only show when logged in */
  transition: margin-left 0.3s ease-in-out, opacity 0.3s ease-in-out !important; /* Enable smooth collapse animation */
  
  /* Force vertical flow - prevent horizontal wrapping when visible */
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.profile-photo-large {
  width: 100% !important; /* Full width of profile content column */
  height: 450px !important; /* Increased vertical size */
  object-fit: cover !important; /* Scale to fit without stretching */
  object-position: center !important; /* Center the image */
  margin: 0 !important;
  display: block !important;
  cursor: pointer !important; /* Photo is clickable */
  pointer-events: auto !important;
  transition: filter 0.2s ease !important;
}

/* Mini-Feed Column - Extends to Window Right Edge, No Wrapping */
.MedWall-mini-feed,
#medWallOverlay .MedWall-mini-feed,
.modal-overlay#medWallOverlay .MedWall-mini-feed {
  flex: 1 !important; /* Expand to fill available space */
  width: calc(100vw - 220px - 18px) !important; /* Full window width minus profile column (220px) and gaps (6px left + 6px gap + 6px right) */
  min-width: 250px !important;
  max-width: none !important; /* Allow expansion to window edge */
  height: auto !important; /* Allow vertical expansion */
  background: white !important;
  border: 1px solid #d3d6db;
  border-radius: 4px; /* Slight rounding for modern look */
  margin: 0 !important;
  margin-left: 0px !important; /* No left margin in normal state - uses profile column's right margin */
  padding: 0 !important;
  box-shadow: none;
  order: 2 !important; /* Second column - middle */
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important; /* Ensure clickability - match profile column */
  pointer-events: auto !important; /* Ensure buttons are clickable */
  overflow-y: auto !important; /* Allow vertical scrolling if needed */
  overflow-x: hidden !important; /* Prevent horizontal overflow */
  display: none; /* Hidden by default - only show when logged in */
}

/* Search column uses mobile layout - no fixed width */

/* Make all text in search column blue - ULTRA SPECIFIC */
.MedWall-left-nav,
.MedWall-left-nav *,
.MedWall-left-nav a,
.MedWall-left-nav span,
.MedWall-left-nav div,
.MedWall-left-nav input,
.MedWall-left-nav label,
.MedWall-left-nav button,
.MedWall-left-nav .nav-link,
.MedWall-left-nav .nav-link-text,
.MedWall-left-nav .nav-link-edit {
  color: #3b5998 !important;
}

/* Ensure button elements in left nav are blue */
.MedWall-left-nav button,
.MedWall-left-nav button *,
body .MedWall-left-nav button,
html body .MedWall-left-nav button {
  color: #3b5998 !important;
}

.MedWall-left-nav .nav-link-text {
  color: #3b5998 !important;
  font-weight: bold !important;
}

.MedWall-left-nav .nav-search-input {
  color: #3b5998 !important;
  font-weight: bold !important;
}

.MedWall-left-nav .nav-search-input::placeholder {
  color: #3b5998 !important;
  font-weight: bold !important;
}

/* Override any other color rules for search column */
.MedWall-left-nav .nav-link {
  color: #3b5998 !important;
}

/* Make all table elements in search column blue */
.MedWall-left-nav table,
.MedWall-left-nav table td,
.MedWall-left-nav table th,
.MedWall-left-nav table tr,
.MedWall-left-nav table * {
  color: #3b5998 !important;
}

.MedWall-left-nav .nav-link-edit {
  color: #3b5998 !important;
}

/* Media queries removed - search column uses mobile layout at all sizes */

/* Overlay rules removed - search column uses mobile layout */

/* More media queries removed - search column uses mobile layout at all sizes */

.left-nav-search {
  padding: 8px;
  border-bottom: 1px solid #d3d6db;
}

.nav-search-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 24px; /* Pill shape with rounded corners */
  font-size: 11px;
  font-family: Arial, sans-serif;
  color: #3b5998 !important;
  font-weight: bold !important;
}

.nav-search-input::placeholder {
  color: #3b5998 !important;
  font-weight: bold !important;
}

.left-nav-links {
  padding: 0;
}

.nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px; /* Half padding */
  text-decoration: none;
  color: #3b5998 !important;
  font-size: 11px;
  font-family: Arial, sans-serif;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s ease;
}

.nav-link:hover {
  background: #f7f7f7;
}

.nav-link-text {
  color: #3b5998 !important;
  font-weight: bold !important;
}

.nav-link-edit {
  color: #999;
  font-size: 10px;
}

.sidebar-search {
  margin-bottom: 12px;
}

.sidebar-search .search-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 13px;
  background: #f7f7f7;
  color: #333;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-link {
  color: white !important; /* White text for blue headers */
  text-decoration: none;
  font-size: 13px;
  font-weight: normal;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-link:hover {
  background-color: #f7f7f7;
  color: #333;
}

.edit-link {
  color: #999;
  font-size: 11px;
  margin-left: 8px;
}

/* Main Profile Content layout CSS removed - will be rebuilt */

/* Profile Banner Container (Facebook-style Cover Photo) */
.profile-banner-container {
  width: 100%;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-banner {
  width: 100%;
  height: 180px;
  background: url('./images/Banner.png') center center / cover no-repeat, linear-gradient(135deg, #3b5998, #2c4373, #1a2947);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-banner:hover {
  filter: brightness(0.95);
}

/* Banner Upload Overlay (Shows on hover) */
.profile-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.profile-banner:hover .profile-banner-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.profile-banner-upload-btn {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #3b5998;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.profile-banner-upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  background: white;
}

.profile-banner-upload-btn svg {
  width: 20px;
  height: 20px;
}

.profile-banner-input {
  display: none !important;
}

.profile-photo-container {
  width: 100%;
  background: white;
  border-bottom: none;
  padding: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 101 !important; /* Ensure clickability */
  pointer-events: auto !important; /* Ensure container is clickable */
}

/* Photo upload overlay that appears on hover */
.profile-photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0 !important; /* Hidden by default */
  transition: opacity 0.2s ease;
  pointer-events: none !important; /* Don't block clicks when hidden */
  z-index: 100 !important;
  visibility: visible !important; /* Visibility always on so transition works */
}

.profile-photo-container:hover .profile-photo-overlay {
  opacity: 1 !important; /* Full opacity on hover */
  pointer-events: auto !important;
}

.profile-photo-container:hover .profile-photo-upload-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.profile-photo-upload-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer !important;
  pointer-events: auto !important; /* Always clickable */
  position: relative !important;
  z-index: 1000 !important; /* Very high z-index to ensure it's always on top */
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  user-select: none;
  -webkit-user-select: none;
}

.profile-photo-upload-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

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

.profile-photo-large {
  width: 100% !important;
  height: 390px !important; /* Increased vertical size */
  object-fit: cover !important; /* Scale to fit without stretching */
  object-position: center !important; /* Center the image */
  border: none !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  min-height: 310px !important;
  cursor: pointer !important; /* Photo is clickable */
  pointer-events: auto !important;
  transition: filter 0.2s ease !important;
}

.profile-action-links {
  padding: 0;
  border-bottom: none;
  background: white;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

.profile-action-links .profile-action-link {
  display: block;
  color: #3b5998 !important;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold !important; /* Make profile action links bold */
  padding: 4px 6px; /* Increased vertical padding for better size */
  line-height: 1.3; /* Slightly more line height */
  font-family: Arial, sans-serif;
  border-bottom: none !important; /* Remove horizontal line */
  transition: background 0.2s ease;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.profile-action-links .profile-action-link:hover {
  background: #f7f7f7;
}

.profile-action-links .profile-action-link:last-child {
  border-bottom: none !important;
}

/* Ensure no borders on Profile Actions section */
.profile-section .section-content.profile-action-links,
.profile-section .section-content.profile-action-links *,
.profile-action-links,
.profile-action-links * {
  border-bottom: none !important;
  border-top: none !important;
}

.profile-sections {
  padding: 0;
  background: white;
  
  /* Force vertical flow - prevent horizontal wrapping */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}

.profile-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none; /* Remove horizontal line under sections */
  
  /* Force vertical flow - prevent horizontal wrapping */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Override for Profile Actions section - respect inline display property */
#profileActionsSection {
  display: none !important; /* Hidden by default, only shown via JS when viewing someone else */
}

#profileActionsSection[style*="display: block"] {
  display: block !important; /* Allow JS to show it when viewing someone else */
}

.profile-section:last-child {
  border-bottom: none;
}

.profile-section .section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 3px 6px !important; /* More vertical padding to center text */
  height: 20px !important; /* Fixed height to match mini-feed headers */
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 1.3 !important; /* Better line height for text visibility */
  font-size: 11px !important; /* Consistent font size */
  background: #D8DEEA !important; /* More saturated Facebook light blue background for section headers */
  background-color: #D8DEEA !important;
  border: none !important; /* Remove all borders */
  border-bottom: none !important; /* Remove horizontal line */
  border-top: 2px solid #3b5998 !important; /* Thicker blue line at top matching other headers */
  border-left: none !important;
  border-right: none !important;
  overflow: hidden !important; /* Prevent text from overflowing outside header */
  text-overflow: ellipsis !important; /* Show ... if text is too long */
  white-space: nowrap !important; /* Keep text on one line */
  box-sizing: border-box !important; /* Include border and padding in height */
  box-shadow: none !important; /* Remove any shadow that might look like a line */
  outline: none !important;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  user-select: none;
}

/* Ultra-specific rule for profile section headers */
.MedWall-profile-content .profile-section .section-header {
  background: #D8DEEA !important;
  background-color: #D8DEEA !important;
  border: none !important;
  border-bottom: none !important;
  border-top: 2px solid #3b5998 !important; /* Thicker blue line at top */
  border-left: none !important;
  border-right: none !important;
  padding: 3px 6px !important; /* More vertical padding to center text */
  height: 20px !important; /* Fixed height */
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 1.3 !important; /* Better line height for text visibility */
  font-size: 11px !important;
  overflow: hidden !important; /* Prevent text overflow */
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.profile-sections .profile-section .section-header {
  background: #D8DEEA !important;
  background-color: #D8DEEA !important;
  border: none !important;
  border-bottom: none !important;
  border-top: 2px solid #3b5998 !important; /* Thicker blue line at top */
  border-left: none !important;
  border-right: none !important;
  padding: 3px 6px !important; /* More vertical padding to center text */
  height: 20px !important; /* Fixed height */
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 1.3 !important; /* Better line height for text visibility */
  font-size: 11px !important;
  overflow: hidden !important; /* Prevent text overflow */
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.profile-section .section-header:hover {
  background: #b8d4f0 !important; /* More saturated darker Facebook blue on hover */
}

.profile-section .section-icon {
  color: #3b5998 !important; /* Facebook blue arrows on light blue background */
  font-size: 9px !important; /* Smaller icon for compact headers */
  transition: transform 0.3s ease;
  display: inline-block;
  line-height: 1 !important; /* Prevent extra height */
  transform-origin: center; /* Ensure rotation happens from center */
}

/* Default state - arrows point down (expanded) */
.profile-section .section-icon {
  transform: rotate(0deg);
}

/* When collapsed, arrows rotate to point right */

/* Status Options Styling - styled like nav-links */
.status-options {
  padding: 0;
  border-bottom: none;
  background: white;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

.status-options .nav-link {
  padding: 8px 12px !important; /* Match nav-link padding */
  margin: 0 !important;
  border-bottom: none !important;
  color: #3b5998 !important; /* Force blue color */
  font-weight: bold !important; /* Force bold text */
}

.status-options .nav-link-text {
  color: #3b5998 !important; /* Force blue color on text */
  font-weight: bold !important; /* Force bold text */
}

.status-options .nav-link:hover {
  background: #f7f7f7 !important; /* Light gray hover */
  color: #3b5998 !important; /* Keep blue on hover */
}

.status-option-icon {
  font-size: 14px;
  margin-right: 8px;
}

/* Groups Section Styling */
.groups-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e4e6ea;
  transition: all 0.2s ease;
}

.group-item:hover {
  background: #f7f7f7;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.group-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e4e6ea;
  flex-shrink: 0;
}

.group-info {
  flex: 1;
  min-width: 0;
}

.group-name {
  font-weight: 600;
  color: #1d2129;
  font-size: 12px;
  margin-bottom: 2px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.group-members {
  color: #65676b;
  font-size: 12px;
}

/* Personal Information Section Styling */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: #1d2129;
  font-size: 14px;
}

.info-value {
  color: #65676b;
  font-size: 14px;
}

/* All Groups Modal Styling */
.all-groups-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none !important;
}

.all-groups-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.all-groups-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.all-groups-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e4e6ea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.all-groups-header h3 {
  margin: 0;
  color: #1d2129;
  font-size: 20px;
  font-weight: 600;
}

.close-all-groups-btn {
  background: none;
  border: none;
  font-size: 32px;
  color: #65676b;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.close-all-groups-btn:hover {
  background: #f0f0f0;
}

.all-groups-search {
  padding: 16px 24px;
  border-bottom: 1px solid #e4e6ea;
  flex-shrink: 0;
}

.groups-search-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.groups-search-input:focus {
  border-color: #3b5998;
}

.all-groups-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.all-groups-list .group-item {
  margin-bottom: 8px;
}

.all-groups-list .group-item:last-child {
  margin-bottom: 0;
}

/* Mutual Friends Grid Styling */
.mutual-friends-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0;
}

.mutual-friend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mutual-friend-item:hover {
  background: #f7f7f7;
}

.mutual-friend-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e4e6ea;
}

.mutual-friend-name {
  font-size: 11px;
  color: #1d2129;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Ultra-specific rule for section icons */
.MedWall-profile-content .profile-section .section-icon,
.profile-sections .profile-section .section-icon,
.profile-section .section-header .section-icon {
  color: white !important;
}

/* ULTRA-SPECIFIC RULE FOR ANY TEXT IN SECTION HEADERS */
.section-header *,
.mini-feed-header *,
.profile-section .section-header *,
.MedWall-profile-content .section-header *,
.profile-sections .section-header * {
  color: #3b5998 !important; /* Facebook blue for any text in section headers */
}

/* Exception: Buttons in headers should use their inline styles for color */
.mini-feed-header button,
.profile-section .section-header button,
.MedWall-profile-content .section-header button,
.profile-sections .section-header button {
  color: white !important; /* Force white text for buttons in headers */
  background: #3b5998 !important; /* Ensure blue background */
}

/* Pagination buttons (gray style) */
.mini-feed-header button[onclick*="previousPage"],
.mini-feed-header button[onclick*="nextPage"] {
  color: #65676b !important; /* Gray text for pagination buttons */
  background: #f7f9fc !important; /* Light gray background */
}

/* MAXIMUM SPECIFICITY FOR SECTION TITLES - FORCE FACEBOOK BLUE */
#medWallOverlay .section-title,
.modal-overlay#medWallOverlay .section-title,
.section-title,
.profile-section .section-title,
.MedWall-profile-content .section-title,
.profile-sections .profile-section .section-title,
.profile-section .section-header .section-title,
h3.section-title,
h2.section-title,
h1.section-title,
div.section-title,
span.section-title,
.section-header h3,
.section-header h2,
.section-header h1,
.section-header div,
.section-header span,
*[class*="section-title"],
*[class*="favorite"],
*[class*="connection"] {
  color: #3b5998 !important; /* Facebook blue - maximum specificity */
}

.profile-section .section-content {
  font-size: 11px;
  color: #333;
  line-height: 1.3; /* Slightly more line height */
  font-family: Arial, sans-serif;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding: 4px 12px; /* Increased vertical padding for better size */
  background: white;
  border: none !important;
  border-top: none !important;
  
  /* Force vertical flow - prevent horizontal wrapping */
  display: flex !important;
  flex-direction: column !important;
}

/* Allow JavaScript to override display for collapsed sections */
.profile-section .section-content.collapsed {
  display: none !important;
}

/* Activity section collapse rule */
#activityStatusSection.collapsed {
  display: none !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}

.status-icon {
  font-size: 14px;
  margin-right: 4px;
}

.posted-item {
  margin-top: 6px;
  padding: 6px;
  background: #f7f7f7;
  border-radius: 2px;
}

.posted-icon {
  margin-right: 4px;
}

.posted-link {
  color: #3b5998;
  text-decoration: none;
  font-size: 11px;
}

.posted-link:hover {
  text-decoration: underline;
}

.posted-date {
  color: #999;
  font-size: 10px;
  margin-top: 2px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: none;
  background: white;
}

.profile-header h1 {
  font-size: 18px;
  font-weight: bold;
  color: white !important; /* White text for blue headers */
  margin: 0;
  font-family: Arial, sans-serif;
}

.share-button {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 12px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  border-radius: 2px;
}

.share-button:hover {
  background: #e5e5e5;
}

.profile-info-box {
  padding: 16px;
  border-bottom: 1px solid #d3d6db;
  background: white;
  margin: 0;
}

.profile-info-content {
  font-size: 11px;
  font-family: Arial, sans-serif;
  background: white;
  border: none;
  padding: 0;
  border-radius: 0px;
}

.profile-affiliation {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  font-size: 13px;
}

.profile-details {
  color: #333;
  line-height: 1.6;
}

.profile-detail-item {
  margin: 3px 0;
  font-size: 11px;
}

.profile-main-section {
  display: flex;
  gap: 16px;
}

.profile-picture-section {
  width: 150px;
}

.profile-picture-container {
  position: relative;
  margin-bottom: 12px;
}

.profile-picture {
  width: 150px !important;
  height: 180px !important;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 3px;
}

/* Force profile picture size for MedX Wall */
#medWallOverlay .profile-picture {
  width: 150px !important;
  height: 180px !important;
  max-width: 150px !important;
  max-height: 180px !important;
}

.change-photo-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Slightly larger gap between actions */
}

.profile-action-link {
  color: #3b5998;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold !important; /* Make profile action links bold */
  line-height: 1.1; /* Tighter line height */
  font-family: Arial, sans-serif;
  padding: 1px 0; /* Small vertical padding */
}

.profile-action-link:hover {
  text-decoration: underline;
}

/* Profile Info Sections */
.profile-info-sections {
  flex: 1;
}

.info-section {
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 3px 6px !important; /* More vertical padding to center text */
  height: 20px !important; /* Fixed height */
  min-height: 20px !important;
  max-height: 20px !important;
  background: #D8DEEA !important; /* More saturated Facebook light blue background for headers with dropdown arrows */
  cursor: pointer;
  white-space: nowrap !important; /* Keep content on one line */
  flex-wrap: nowrap !important; /* Don't wrap flex items */
  line-height: 1.3 !important; /* Better line height for text visibility */
  font-size: 11px !important;
  overflow: hidden !important; /* Prevent text overflow */
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* REMOVED DUPLICATE - NOW HANDLED BY MAXIMUM SPECIFICITY RULE */

.section-icon {
  color: #3b5998 !important; /* Facebook blue arrows on light blue background */
  font-size: 10px;
  transition: transform 0.3s ease;
  display: inline-block;
  transform-origin: center;
}

.section-content {
  font-size: 12px;
  color: #333;
  line-height: 1.3; /* Slightly more line height */
  font-family: Arial, sans-serif;
  padding: 4px 12px; /* Increased vertical padding for better size */
}

.status-indicator {
  color: #4CAF50;
  font-size: 12px;
  margin-left: 8px;
}

.see-all-link {
  color: #3b5998;
  text-decoration: none;
  font-size: 11px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.see-all-link:hover {
  text-decoration: underline;
}

/* Right Mini-Feed layout CSS removed - will be rebuilt */

.user-info-box {
  background: white !important; /* White background to match favorites section */
  border: none;
  border-bottom: 1px solid #d3d6db;
  border-radius: 0px;
  padding: 0; /* Remove padding so header can extend to edges */
  margin-bottom: 0;
  min-height: 120px !important; /* Prevent vertical shrinking */
  height: auto !important; /* Allow content to expand */
}

/* Favorites header - matches mini-feed header styling */
.favorites-header {
  margin: 0; /* No margin to extend to edges */
  padding: 5px 6px !important; /* Match all other headers */
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
}

/* Force vertical centering for all header children */
.section-header > *,
.mini-feed-header > *,
.section-header .section-title,
.section-header .section-icon,
.mini-feed-header .section-title,
.mini-feed-header .section-icon,
.mini-feed-header .feed-title {
  align-self: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure section titles don't overflow */
.section-title,
.feed-title {
  line-height: 1.1 !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  max-height: 100% !important;
}

/* Add padding back to favorites-section content (not the header) */
.favorites-section {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 110px !important;
}

/* Allow sections to be collapsed when toggled */
.favorites-section[style*="display: none"],
#favoritesSection[style*="display: none"],
#discoverSection[style*="display: none"],
#mutualFriendsSection[style*="display: none"],
#groupsSection[style*="display: none"],
#activityStatusSection[style*="display: none"],
.section-content[style*="display: none"],
.mini-feed-section[style*="display: none"] {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.user-info-content {
  font-size: 12px;
  color: #3b5998 !important; /* Facebook blue text on light blue background */
  line-height: 1.4;
  font-family: Arial, sans-serif;
}

.user-name {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 4px;
  color: #3b5998 !important; /* Facebook blue text on light blue background */
  font-family: Arial, sans-serif;
}

.user-school, .user-graduation, .user-location {
  font-size: 11px;
  color: #3b5998 !important; /* Facebook blue text on light blue background */
  margin-bottom: 2px;
  font-family: Arial, sans-serif;
}

.mini-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 5px 6px !important; /* Vertical padding to center text */
  height: 28px !important; /* Fixed height with room for text */
  min-height: 28px !important; /* Fixed header height */
  max-height: 28px !important; /* Fixed height */
  background: #D8DEEA !important; /* More saturated Facebook light blue background for headers with dropdown arrows */
  border-bottom: 1px solid #d3d6db;
  border-top: 2px solid #3b5998 !important; /* Thicker blue line at top */
  cursor: pointer;
  user-select: none; /* Prevent text selection when clicking */
  white-space: nowrap !important; /* Keep content on one line */
  flex-wrap: nowrap !important; /* Don't wrap flex items */
  line-height: 1.3 !important; /* Better line height for text visibility */
  font-size: 11px !important; /* Font size for 20px headers */
  box-sizing: border-box !important; /* Include border and padding in height */
}

.mini-feed-header:hover {
  background: #b8d4f0 !important; /* More saturated darker Facebook blue on hover */
}

.mini-feed-header .section-icon {
  transition: transform 0.3s ease;
  display: inline-block;
  color: white !important;
  font-size: 9px !important; /* Smaller for compact headers */
  line-height: 1 !important; /* Prevent extra height */
}

.feed-title {
  color: #3b5998 !important; /* Facebook blue text on light blue backgrounds */
  font-size: 12px !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: none !important;
}

.feed-summary {
  font-size: 11px;
  color: #333;
  margin-bottom: 0;
  padding: 6px 12px;
  font-family: Arial, sans-serif;
  background: white;
  border-bottom: 1px solid #d3d6db;
}

.mini-feed-content {
  font-size: 11px;
  color: #333;
  line-height: 1.4;
  font-family: Arial, sans-serif;
  padding: 12px;
  min-height: 300px;
}

.feed-item {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.feed-date {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  font-family: Arial, sans-serif;
}

.feed-content {
  font-size: 12px;
  color: #333;
  margin-bottom: 4px;
  font-family: Arial, sans-serif;
}

.feed-comment {
  font-size: 11px;
  color: #666;
  font-style: italic;
  font-family: Arial, sans-serif;
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-date {
  color: #999;
  font-size: 10px;
  margin-bottom: 4px;
}

.feed-content {
  margin-bottom: 4px;
}

.feed-comment {
  color: #666;
  font-style: italic;
  font-size: 10px;
  margin-top: 4px;
}

/* Duplicate mobile breakpoint removed - using main responsive rules above */

/* Removed mobile header adjustments - single layout only */

/* Messaging System Styles */
.messaging-container {
  display: flex;
  height: calc(100% - 60px);
}

.message-list {
  width: 250px;
  border-right: 1px solid #ddd;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
}

.message-search {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

.message-search .search-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
}

.message-threads {
  flex: 1;
  overflow-y: auto;
}

.message-thread-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-thread-item:hover {
  background: #e9ecef;
}

.message-thread-item.active {
  background: #007AFF;
  color: white;
}

.message-thread-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #007AFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.message-thread-info {
  flex: 1;
}

.message-thread-name {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
}

.message-thread-preview {
  font-size: 11px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-time {
  font-size: 10px;
  color: #999;
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.message-header {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  background: #f7f7f7;
}

.message-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.message-user-details h4 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.message-user-details span {
  font-size: 11px;
  color: #666;
}

.message-thread {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.message-item.sent {
  flex-direction: row-reverse;
}

.message-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
}

.message-item.sent .message-bubble {
  background: #007AFF;
  color: white;
}

.message-item.received .message-bubble {
  background: #e9ecef;
  color: #333;
}

.message-time {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

.message-input {
  padding: 12px;
  border-top: 1px solid #ddd;
  display: flex;
  gap: 8px;
  align-items: center;
}

.message-text-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-size: 12px;
  outline: none;
}

.message-text-input:focus {
  border-color: #007AFF;
}

.send-message-btn {
  background: #007AFF;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.send-message-btn:hover {
  background: #0056b3;
}

.send-message-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Removed mobile responsiveness for messaging - single layout only */

/* Comment System Styles */
.comment-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.comment-input {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.comment-text-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-size: 12px;
  outline: none;
  background: #f7f7f7;
}

.comment-text-input:focus {
  border-color: #007AFF;
  background: white;
}

.comment-submit-btn {
  background: #007AFF;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.comment-submit-btn:hover {
  background: #0056b3;
}

.comment-submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #f7f7f7;
  border-radius: 8px;
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #007AFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: bold;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-author {
  font-size: 11px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.comment-text {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 4px;
}

.comment-time {
  font-size: 10px;
  color: #999;
}

.comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.comment-action {
  font-size: 10px;
  color: #666;
  cursor: pointer;
  text-decoration: none;
}

.comment-action:hover {
  color: #3b5998;
  text-decoration: underline;
}

.show-comments-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

.show-comments-btn:hover {
  color: #3b5998;
}

/* ULTIMATE: Force profile button styling - maximum specificity */
.modal-overlay#medWallOverlay .modal-page-title button#profileBtn.profile-button,
.modal-overlay#medWallOverlay .modal-page-title #profileBtn.profile-button,
#medWallOverlay .modal-page-title button#profileBtn.profile-button,
#medWallOverlay .modal-page-title #profileBtn.profile-button {
  position: absolute !important;
  top: 50% !important;
  right: 60px !important;
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #007AFF !important;
  backdrop-filter: none !important;
  border: 2px solid rgba(0, 122, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10002 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Profile Button Styling - Match profile page avatar style */
#profileBtn.profile-button {
  position: absolute !important;
  top: 50% !important;
  right: 60px !important; /* Moved left to avoid overlap with close button */
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #007AFF !important; /* Match profile page avatar blue */
  backdrop-filter: none !important; /* Remove blur to match profile page */
  border: 2px solid rgba(0, 122, 255, 0.3) !important; /* Match profile page border */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10003 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#profileBtn.profile-button:hover {
  background: #0056CC !important; /* Darker blue on hover */
  border-color: rgba(0, 122, 255, 0.5) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

#profileBtn.profile-button:active {
  transform: translateY(-50%) scale(0.95) !important;
}

#profileBtn.profile-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.profile-avatar {
  font-size: 22px !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Removed mobile responsive profile button - single layout only */

/* Additional specificity to override browser defaults */
button#profileBtn.profile-button {
  position: absolute !important;
  top: 50% !important;
  right: 60px !important; /* Moved left to avoid overlap with close button */
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #007AFF !important; /* Match profile page avatar blue */
  backdrop-filter: none !important; /* Remove blur to match profile page */
  border: 2px solid rgba(0, 122, 255, 0.3) !important; /* Match profile page border */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10003 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}
  
  #medWallOverlay .modal-content {
    top: 50px !important;
    height: calc(100vh - 50px) !important;
    padding: 16px !important;
  }
  
  /* Welcome Section Mobile */
  .medwall-wall-welcome {
    padding: 20px 16px !important;
    margin: 0 !important;
  }
  
  .welcome-content h2 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
  
  .welcome-content p {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  
  .welcome-actions {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important; /* Changed from stretch to center */
  }
  
  /* Auth Buttons Mobile */
  .auth-btn {
    width: auto !important; /* Changed from 100% to auto */
    max-width: 400px !important; /* Add max-width to prevent stretching */
    min-width: 200px !important; /* Minimum comfortable width */
    padding: 16px 24px !important;
    font-size: 16px !important;
    border-radius: 50px !important;
  }
  
  /* Auth Forms Mobile */
  .auth-forms {
    padding: 0 16px 200px 16px !important; /* Zero top padding, bottom padding to clear dock */
    min-height: 100vh !important; /* Keep full height for proper centering */
    height: 100vh !important; /* Ensure full height */
    align-items: flex-start !important; /* Start at top to eliminate gap */
    justify-content: center !important; /* Center horizontally */
  }
  
  /* Universal Facebook-style content buffer on mobile */
  #medWallOverlay {
    padding-bottom: 250px !important; /* Larger buffer on mobile for dock */
  }
  
  .auth-form {
    width: 90% !important;
    max-width: 500px !important; /* Cap at 500px even on wide screens */
    padding: 0 20px 12px 20px !important; /* Zero top padding, white background goes to top */
    margin: 0 auto !important; /* Center the form */
    border-radius: 16px !important;
  }
  
  /* Forms inherit sizing from .auth-form - no need for specific mobile sizes */
  
  .form-header h3 {
    font-size: 20px !important;
    margin-bottom: 20px !important;
  }
  
  .form-group {
    margin-bottom: 20px !important;
  }
  
  .form-group label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  
  .form-group input,
  .form-group select {
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  
  /* Form Footer Mobile */
  .form-footer {
    margin-top: 20px !important;
  }
  
  .form-footer p {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }
  
  /* Email Verification Mobile */
  .verification-content {
    padding: 20px !important;
  }
  
  .verification-content h3 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }
  
  .verification-content p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  
  #verificationCode {
    font-size: 24px !important;
    letter-spacing: 8px !important;
    padding: 16px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto 20px !important;
  }
  
  /* User Dashboard Mobile */
  .user-dashboard {
    padding: 16px !important;
  }
  
  /* MedX Wall User Dashboard Mobile - Even wider on mobile */
  #medWallOverlay .user-dashboard,
  .modal-overlay#medWallOverlay .user-dashboard {
    max-width: 98% !important;
    width: 98% !important;
    margin: 0 auto !important;
    padding: 12px !important;
  }
  
  /* MedX Wall Modal Content Mobile - Minimal padding */
  #medWallOverlay .modal-content,
  .modal-overlay#medWallOverlay .modal-content {
    padding: 8px !important;
  }
  
  .dashboard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  
  .user-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .user-avatar {
    width: 80px !important;
    height: 80px !important;
  }
  
  .user-details h2 {
    font-size: 20px !important;
  }
  
  .user-details p {
    font-size: 14px !important;
  }
  
  .dashboard-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  /* Tabs Mobile */
  .tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  
  .tab-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    font-size: 14px !important;
  }
  
  /* Posts Mobile */
  .post-item {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
  
  .post-header {
    margin-bottom: 6px !important;
  }
  
  .post-author {
    gap: 8px !important;
  }
  
  .author-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  
  .post-content h3 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }
  
  .post-content p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  
  .post-file {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
  }
  
  .document-thumbnail {
    width: 50px !important;
    height: 65px !important;
    margin-right: 8px !important;
  }
  
  .post-actions {
    gap: 6px !important;
    margin-top: 6px !important;
  }
  
  .post-actions button {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  
  /* Post Modal Mobile */
  .post-modal .modal-content {
    width: 95% !important;
    max-width: none !important;
    margin: 20px !important;
    padding: 20px !important;
    max-height: 90vh !important;
  }
  
  .modal-header h3 {
    font-size: 18px !important;
  }
  
  .form-group textarea {
    min-height: 120px !important;
    font-size: 16px !important;
  }
  
  .form-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .form-actions button {
    width: 100% !important;
  }
  
  /* Following Container Mobile */
  .following-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .following-item {
    padding: 16px !important;
  }
  
  .following-table-container {
    overflow-x: auto !important;
  }
  
  .following-table {
    min-width: 600px !important;
  }
  
  .following-table th,
  .following-table td {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  
  /* Study Wall Mobile */
  .study-wall {
    padding: 20px 16px !important;
  }
  
  .search-section {
    margin-bottom: 24px !important;
    padding: 0 !important;
  }
  
  .search-container {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .search-input {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }
  
  .search-submit {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }
  
  /* Posts Container Mobile */
  .posts-container {
    padding: 0 16px !important;
  }
  
  /* Close Button Mobile */
  .modal-close-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  
  /* Notifications Mobile */
  .notification {
    margin: 16px !important;
    padding: 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
  
  /* Form Notifications Mobile */
  .form-notification {
    padding: 14px 16px !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
    border-radius: 10px !important;
  }

/* Safari-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .study-materials-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10002 !important;
  }
  
  .study-materials-btn:hover {
    -webkit-transform: translateY(-2px) translateZ(0) !important;
    transform: translateY(-2px) translateZ(0) !important;
    -webkit-transition: all 0.2s ease !important;
    transition: all 0.2s ease !important;
    animation-play-state: paused !important; /* Pause animation on hover */
  }
  
  .study-materials-btn:active {
    -webkit-transform: translateY(0) translateZ(0) !important;
    transform: translateY(0) translateZ(0) !important;
    -webkit-transition: all 0.1s ease !important;
    transition: all 0.1s ease !important;
  }
  
  .study-materials-btn:focus {
    outline: 2px solid #007AFF !important;
    outline-offset: 2px !important;
  }
}

/* Ranking Badge Styles */
.ranking-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #333;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 8px;
  border: 1px solid #f4c430;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  text-shadow: none;
  white-space: nowrap;
  min-width: 24px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: badgeGlow 2s ease-in-out infinite alternate;
}

.ranking-badge.top-10 {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
  border: 1px solid #ff5252;
  animation: topBadgeGlow 2s ease-in-out infinite alternate;
}

.ranking-badge.top-3 {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #333;
  border: 1px solid #f4c430;
  animation: goldBadgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
  0% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
  100% { box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4); }
}

@keyframes topBadgeGlow {
  0% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
  100% { box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5); }
}

@keyframes goldBadgeGlow {
  0% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
  100% { box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6); }
}

/* Additional Safari compatibility */
.study-materials-btn {
  /* Force hardware acceleration */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  
  /* Ensure animation works on Safari */
  -webkit-animation: pulse-attention 2s ease-in-out 2s 3 !important;
  animation: pulse-attention 2s ease-in-out 2s 3 !important;
  -webkit-animation-fill-mode: both !important;
  animation-fill-mode: both !important;
  
  /* Ensure clickability */
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  
  /* Prevent text selection on double-click */
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Force visibility and dimensions */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 380px !important;
  height: 60px !important;
  min-width: 380px !important;
  min-height: 60px !important;
  
  /* Ensure proper stacking */
  position: relative;
  z-index: 10002 !important;
}

/* Removed iPhone specific optimizations - single layout only */
  
  .auth-btn {
    padding: 14px 20px !important;
    font-size: 15px !important;
    border-radius: 50px !important;
  }
  
  .form-group input,
  .form-group select {
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
  
  .tab-btn {
    padding: 10px 6px !important;
    font-size: 13px !important;
  }
  
  .post-item {
    padding: 14px !important;
  }
  
  .post-content h4 {
    font-size: 15px !important;
  }
  
  .post-content p {
    font-size: 13px !important;
  }

/* CRITICAL: Force remove all margins from MedX Wall logo - highest priority */
#medWallOverlay .modal-page-title img,
#medWallOverlay .modal-page-title .main-logo,
.modal-overlay#medWallOverlay .modal-page-title img.main-logo {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

/* Lower the MedX logo in the header */
#medWallOverlay .modal-page-title img,
#medWallOverlay .modal-page-title .main-logo,
.modal-overlay#medWallOverlay .modal-page-title img.main-logo {
  margin-top: 4px !important;
  transform: translateY(4px) !important;
}

/* ULTIMATE: Force all profile page elements to have white backgrounds - Maximum Priority */
.modal-overlay#medWallOverlay .tab-pane .form-group input,
.modal-overlay#medWallOverlay .tab-pane .form-group select,
.modal-overlay#medWallOverlay .tab-pane .form-group textarea,
.modal-overlay#medWallOverlay .profile-settings .form-group input,
.modal-overlay#medWallOverlay .profile-settings .form-group select,
.modal-overlay#medWallOverlay .profile-settings .form-group textarea,
#medWallOverlay .tab-pane .form-group input,
#medWallOverlay .tab-pane .form-group select,
#medWallOverlay .tab-pane .form-group textarea,
#medWallOverlay .profile-settings .form-group input,
#medWallOverlay .profile-settings .form-group select,
#medWallOverlay .profile-settings .form-group textarea {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #e5e7eb 98%, #e5e7eb 100%) !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-overlay#medWallOverlay .tab-pane .form-group input:focus,
.modal-overlay#medWallOverlay .tab-pane .form-group select:focus,
.modal-overlay#medWallOverlay .tab-pane .form-group textarea:focus,
.modal-overlay#medWallOverlay .profile-settings .form-group input:focus,
.modal-overlay#medWallOverlay .profile-settings .form-group select:focus,
.modal-overlay#medWallOverlay .profile-settings .form-group textarea:focus,
#medWallOverlay .tab-pane .form-group input:focus,
#medWallOverlay .tab-pane .form-group select:focus,
#medWallOverlay .tab-pane .form-group textarea:focus,
#medWallOverlay .profile-settings .form-group input:focus,
#medWallOverlay .profile-settings .form-group select:focus,
#medWallOverlay .profile-settings .form-group textarea:focus {
  background: white !important;
  background-image: linear-gradient(to bottom, transparent 0%, transparent 98%, #3b5998 98%, #3b5998 100%) !important;
  border-color: #3b5998 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Removed landscape iPhone optimizations - single layout only */
  
  .auth-btn {
    flex: 1 !important;
    min-width: 120px !important;
  }
  
  .auth-form {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

/* MedX Wall feed selector white background fixes */
#medWallOverlay .feed-selector,
#medWallOverlay .feed-selector select,
#medWallOverlay .tab-selector,
#medWallOverlay .tab-selector select,
.modal-overlay#medWallOverlay .feed-selector,
.modal-overlay#medWallOverlay .feed-selector select,
.modal-overlay#medWallOverlay .tab-selector,
.modal-overlay#medWallOverlay .tab-selector select {
  background: white !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ensure text visibility in browser feed - prevent white text on white background */
#medWallOverlay .post-item,
#medWallOverlay .post-item *,
.modal-overlay#medWallOverlay .post-item,
.modal-overlay#medWallOverlay .post-item * {
  color: #1f2937 !important;
}

#medWallOverlay .post-item h3,
#medWallOverlay .post-item h4,
#medWallOverlay .post-item p,
#medWallOverlay .post-item span,
.modal-overlay#medWallOverlay .post-item h3,
.modal-overlay#medWallOverlay .post-item h4,
.modal-overlay#medWallOverlay .post-item p,
.modal-overlay#medWallOverlay .post-item span {
  color: #1f2937 !important;
}

#medWallOverlay .post-item .post-author,
#medWallOverlay .post-item .author-info,
#medWallOverlay .post-item .post-content,
.modal-overlay#medWallOverlay .post-item .post-author,
.modal-overlay#medWallOverlay .post-item .author-info,
.modal-overlay#medWallOverlay .post-item .post-content {
  color: #1f2937 !important;
}

#medWallOverlay .post-item .post-file span,
#medWallOverlay .post-item .post-tags span,
.modal-overlay#medWallOverlay .post-item .post-file span,
.modal-overlay#medWallOverlay .post-item .post-tags span {
  color: #1f2937 !important;
}

/* Additional selector fixes for My Feed & My Posts */
#medWallOverlay select,
#medWallOverlay .form-group select,
.modal-overlay#medWallOverlay select,
.modal-overlay#medWallOverlay .form-group select {
  background: white !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Profile page tabs container white background - HIGH SPECIFICITY */
#medWallOverlay .tabs,
#medWallOverlay .dashboard-content .tabs,
#medWallOverlay .user-dashboard .tabs,
.modal-overlay#medWallOverlay .tabs,
.modal-overlay#medWallOverlay .dashboard-content .tabs,
.modal-overlay#medWallOverlay .user-dashboard .tabs {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Profile page tab toggle buttons white background */
#medWallOverlay .tab-btn,
#medWallOverlay .tab-btn.active,
#medWallOverlay .tab-btn:hover,
.modal-overlay#medWallOverlay .tab-btn,
.modal-overlay#medWallOverlay .tab-btn.active,
.modal-overlay#medWallOverlay .tab-btn:hover {
  background: white !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Profile page tab selector white background */
#medWallOverlay .profile-tabs,
#medWallOverlay .profile-tabs .tab,
#medWallOverlay .profile-tabs .tab.active,
.modal-overlay#medWallOverlay .profile-tabs,
.modal-overlay#medWallOverlay .profile-tabs .tab,
.modal-overlay#medWallOverlay .profile-tabs .tab.active {
  background: white !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Profile page tab content white background */
#medWallOverlay .tab-content,
#medWallOverlay .tab-pane,
.modal-overlay#medWallOverlay .tab-content,
.modal-overlay#medWallOverlay .tab-pane {
  background: white !important;
  color: #1f2937 !important;
}

/* COMPREHENSIVE PROFILE PAGE WHITE BACKGROUNDS - ALL INNER ELEMENTS */
#medWallOverlay .user-dashboard,
#medWallOverlay .dashboard-content,
#medWallOverlay .dashboard-tabs,
#medWallOverlay .dashboard-tab-content,
#medWallOverlay .user-profile,
#medWallOverlay .profile-info,
#medWallOverlay .profile-stats,
#medWallOverlay .profile-actions,
#medWallOverlay .posts-container,
#medWallOverlay .posts-feed,
#medWallOverlay .my-posts,
#medWallOverlay .following-list,
#medWallOverlay .browse-users,
#medWallOverlay .user-list,
#medWallOverlay .user-item,
#medWallOverlay .profile-settings,
#medWallOverlay .settings-section,
#medWallOverlay .stats-grid,
#medWallOverlay .stat-item,
#medWallOverlay .content-section,
#medWallOverlay .section-header,
#medWallOverlay .section-content,
#medWallOverlay .widget,
#medWallOverlay .widget-content,
#medWallOverlay .widget-header,
#medWallOverlay .widget-body,
#medWallOverlay .inner-container,
#medWallOverlay .inner-content,
#medWallOverlay .inner-widget,
#medWallOverlay .content-widget,
#medWallOverlay .info-widget,
#medWallOverlay .stats-widget,
#medWallOverlay .posts-widget,
#medWallOverlay .following-widget,
#medWallOverlay .browse-widget,
#medWallOverlay .settings-widget,
.modal-overlay#medWallOverlay .user-dashboard,
.modal-overlay#medWallOverlay .dashboard-content,
.modal-overlay#medWallOverlay .dashboard-tabs,
.modal-overlay#medWallOverlay .dashboard-tab-content,
.modal-overlay#medWallOverlay .user-profile,
.modal-overlay#medWallOverlay .profile-info,
.modal-overlay#medWallOverlay .profile-stats,
.modal-overlay#medWallOverlay .profile-actions,
.modal-overlay#medWallOverlay .posts-container,
.modal-overlay#medWallOverlay .posts-feed,
.modal-overlay#medWallOverlay .my-posts,
.modal-overlay#medWallOverlay .following-list,
.modal-overlay#medWallOverlay .browse-users,
.modal-overlay#medWallOverlay .user-list,
.modal-overlay#medWallOverlay .user-item,
.modal-overlay#medWallOverlay .profile-settings,
.modal-overlay#medWallOverlay .settings-section,
.modal-overlay#medWallOverlay .stats-grid,
.modal-overlay#medWallOverlay .stat-item,
.modal-overlay#medWallOverlay .content-section,
.modal-overlay#medWallOverlay .section-header,
.modal-overlay#medWallOverlay .section-content,
.modal-overlay#medWallOverlay .widget,
.modal-overlay#medWallOverlay .widget-content,
.modal-overlay#medWallOverlay .widget-header,
.modal-overlay#medWallOverlay .widget-body,
.modal-overlay#medWallOverlay .inner-container,
.modal-overlay#medWallOverlay .inner-content,
.modal-overlay#medWallOverlay .inner-widget,
.modal-overlay#medWallOverlay .content-widget,
.modal-overlay#medWallOverlay .info-widget,
.modal-overlay#medWallOverlay .stats-widget,
.modal-overlay#medWallOverlay .posts-widget,
.modal-overlay#medWallOverlay .following-widget,
.modal-overlay#medWallOverlay .browse-widget,
.modal-overlay#medWallOverlay .settings-widget {
  background: white !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
  background-color: white !important;
}

/* Profile page text elements - blue and black colors */
#medWallOverlay h1,
#medWallOverlay h2,
#medWallOverlay h3,
#medWallOverlay h4,
#medWallOverlay h5,
#medWallOverlay h6,
#medWallOverlay p,
#medWallOverlay span,
#medWallOverlay div,
#medWallOverlay label,
#medWallOverlay .user-name,
#medWallOverlay .user-school,
#medWallOverlay .user-bio,
#medWallOverlay .stat-number,
#medWallOverlay .stat-label,
#medWallOverlay .post-title,
#medWallOverlay .post-content,
#medWallOverlay .post-meta,
#medWallOverlay .user-info,
#medWallOverlay .follow-info,
#medWallOverlay .settings-label,
#medWallOverlay .form-label,
.modal-overlay#medWallOverlay h1,
.modal-overlay#medWallOverlay h2,
.modal-overlay#medWallOverlay h3,
.modal-overlay#medWallOverlay h4,
.modal-overlay#medWallOverlay h5,
.modal-overlay#medWallOverlay h6,
.modal-overlay#medWallOverlay p,
.modal-overlay#medWallOverlay span,
.modal-overlay#medWallOverlay div,
.modal-overlay#medWallOverlay label,
.modal-overlay#medWallOverlay .user-name,
.modal-overlay#medWallOverlay .user-school,
.modal-overlay#medWallOverlay .user-bio,
.modal-overlay#medWallOverlay .stat-number,
.modal-overlay#medWallOverlay .stat-label,
.modal-overlay#medWallOverlay .post-title,
.modal-overlay#medWallOverlay .post-content,
.modal-overlay#medWallOverlay .post-meta,
.modal-overlay#medWallOverlay .user-info,
.modal-overlay#medWallOverlay .follow-info,
.modal-overlay#medWallOverlay .settings-label,
.modal-overlay#medWallOverlay .form-label {
  color: #1f2937 !important;
}

/* Profile page headings - blue color */
#medWallOverlay h1,
#medWallOverlay h2,
#medWallOverlay h3:not(#contentColumnTitle):not(.content-column-header h3),
#medWallOverlay .section-title,
#medWallOverlay .page-title,
#medWallOverlay .user-name,
#medWallOverlay .stat-number,
.modal-overlay#medWallOverlay h1,
.modal-overlay#medWallOverlay h2,
.modal-overlay#medWallOverlay h3:not(#contentColumnTitle):not(.content-column-header h3),
.modal-overlay#medWallOverlay .section-title,
.modal-overlay#medWallOverlay .page-title,
.modal-overlay#medWallOverlay .user-name,
.modal-overlay#medWallOverlay .stat-number {
  color: #3b5998 !important; /* Facebook blue for section titles */
}

/* Exception: Content column title must be white */
#medWallOverlay #contentColumnTitle,
#medWallOverlay .content-column-header h3,
.modal-overlay#medWallOverlay #contentColumnTitle,
.modal-overlay#medWallOverlay .content-column-header h3 {
  color: white !important;
}

/* Profile page cards and containers */
#medWallOverlay .card,
#medWallOverlay .info-card,
#medWallOverlay .stats-card,
#medWallOverlay .posts-card,
#medWallOverlay .following-card,
#medWallOverlay .browse-card,
#medWallOverlay .settings-card,
#medWallOverlay .content-card,
.modal-overlay#medWallOverlay .card,
.modal-overlay#medWallOverlay .info-card,
.modal-overlay#medWallOverlay .stats-card,
.modal-overlay#medWallOverlay .posts-card,
.modal-overlay#medWallOverlay .following-card,
.modal-overlay#medWallOverlay .browse-card,
.modal-overlay#medWallOverlay .settings-card,
.modal-overlay#medWallOverlay .content-card {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Profile page lists and items */
#medWallOverlay ul,
#medWallOverlay li,
#medWallOverlay .list-item,
#medWallOverlay .user-item,
#medWallOverlay .post-item,
#medWallOverlay .following-item,
#medWallOverlay .browse-item,
.modal-overlay#medWallOverlay ul,
.modal-overlay#medWallOverlay li,
.modal-overlay#medWallOverlay .list-item,
.modal-overlay#medWallOverlay .user-item,
.modal-overlay#medWallOverlay .post-item,
.modal-overlay#medWallOverlay .following-item,
.modal-overlay#medWallOverlay .browse-item {
  background: white !important;
  color: #1f2937 !important;
  border-color: #e5e7eb !important;
}

/* Profile page form elements - keep existing white background rules */
#medWallOverlay .form-group,
#medWallOverlay .input-group,
#medWallOverlay .field-group,
.modal-overlay#medWallOverlay .form-group,
.modal-overlay#medWallOverlay .input-group,
.modal-overlay#medWallOverlay .field-group {
  background: white !important;
  color: #1f2937 !important;
}

/* Profile page empty states */
#medWallOverlay .empty-state,
#medWallOverlay .no-posts,
#medWallOverlay .no-following,
#medWallOverlay .no-users,
.modal-overlay#medWallOverlay .empty-state,
.modal-overlay#medWallOverlay .no-posts,
.modal-overlay#medWallOverlay .no-following,
.modal-overlay#medWallOverlay .no-users {
  background: white !important;
  color: #1f2937 !important;
}

/* Profile page notifications and messages */
#medWallOverlay .notification,
#medWallOverlay .message,
#medWallOverlay .alert,
#medWallOverlay .info-message,
.modal-overlay#medWallOverlay .notification,
.modal-overlay#medWallOverlay .message,
.modal-overlay#medWallOverlay .alert,
.modal-overlay#medWallOverlay .info-message {
  background: white !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
}

/* FORCE REMOVE ALL BLUR AND TRANSPARENCY FROM INNER ELEMENTS */
#medWallOverlay *,
.modal-overlay#medWallOverlay * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Override any remaining blur backgrounds on inner elements */
#medWallOverlay .user-dashboard *,
#medWallOverlay .dashboard-content *,
#medWallOverlay .profile-info *,
#medWallOverlay .profile-stats *,
#medWallOverlay .posts-container *,
#medWallOverlay .following-list *,
#medWallOverlay .browse-users *,
#medWallOverlay .profile-settings *,
.modal-overlay#medWallOverlay .user-dashboard *,
.modal-overlay#medWallOverlay .dashboard-content *,
.modal-overlay#medWallOverlay .profile-info *,
.modal-overlay#medWallOverlay .profile-stats *,
.modal-overlay#medWallOverlay .posts-container *,
.modal-overlay#medWallOverlay .following-list *,
.modal-overlay#medWallOverlay .browse-users *,
.modal-overlay#medWallOverlay .profile-settings * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
}

/* Ensure all inner elements have solid backgrounds */
#medWallOverlay .user-dashboard *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .dashboard-content *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .profile-info *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .profile-stats *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .posts-container *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .following-list *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .browse-users *:not(.modal-header):not(.modal-page-title),
#medWallOverlay .profile-settings *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .user-dashboard *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .dashboard-content *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .profile-info *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .profile-stats *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .posts-container *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .following-list *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .browse-users *:not(.modal-header):not(.modal-page-title),
.modal-overlay#medWallOverlay .profile-settings *:not(.modal-header):not(.modal-page-title) {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  color: #1f2937 !important;
}

/* FINAL OVERRIDE - FORCE TABS WHITE BACKGROUND */
#medWallOverlay .tabs,
.modal-overlay#medWallOverlay .tabs {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Terms Agreement Modal Styling */
.terms-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.terms-content {
  background: white;
  border-radius: 16px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  margin: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.terms-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terms-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 20px;
  font-weight: 600;
}

.terms-body {
  padding: 24px;
}

.terms-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.terms-warning h4 {
  margin: 0 0 8px 0;
  color: #92400e;
  font-size: 16px;
}

.terms-warning p {
  margin: 0;
  color: #92400e;
  font-size: 14px;
}

.terms-list {
  margin-bottom: 24px;
}

.term-item {
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.term-item h5 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.term-item p {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

.terms-footer {
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
}

.agreement-checkbox {
  margin-bottom: 20px;
}

.agreement-checkbox input[type="checkbox"] {
  margin-right: 12px;
  transform: scale(1.2);
}

.agreement-checkbox label {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.terms-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.upload-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}

.upload-warning p {
  margin: 0;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}

/* Removed mobile responsiveness for terms modal - single layout only */

/* ===== MEDX WALL POSITIONING FIXES ===== */
/* Ensure MedX Wall elements are properly positioned within viewport */
#medWallOverlay .MedWall-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  transform: none !important;
}

/* Removed force full width - using exact Facebook layout */

/* Removed conflicting sidebar rules - using exact Facebook layout */

/* Ensure auth forms don't extend beyond viewport */
#medWallOverlay .auth-forms {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important; /* Container should NOT scroll - only individual forms */
  box-sizing: border-box !important;
  z-index: 10005 !important;
}

/* Force hide auth-forms when logged in with maximum specificity */
#medWallOverlay.logged-in .auth-forms,
html body #medWallOverlay.logged-in .auth-forms,
html body .modal-overlay#medWallOverlay.logged-in .auth-forms,
#medWallOverlay.active.logged-in .auth-forms,
html body #medWallOverlay.active.logged-in .auth-forms {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Universal Facebook-style content buffer - adds gap between content and window bottom */
#medWallOverlay {
  padding-bottom: 200px !important; /* Universal buffer for all Facebook-style content */
  padding-top: 0 !important; /* No top padding - content starts at header */
  box-sizing: border-box !important;
  overscroll-behavior: none !important; /* Prevent pull-to-refresh and elastic bounce */
}

/* Ensure profile column has bottom margin */
.MedWall-profile-content,
#medWallOverlay .MedWall-profile-content,
.modal-overlay#medWallOverlay .MedWall-profile-content {
  margin-bottom: 200px !important; /* Force bottom margin on profile column */
}

/* Ensure content column has bottom margin */
.MedWall-content-column,
#medWallOverlay .MedWall-content-column,
.modal-overlay#medWallOverlay .MedWall-content-column {
  margin-bottom: 200px !important; /* Force bottom margin on content column */
}

/* Ensure mini feed has bottom margin */
.MedWall-mini-feed,
#medWallOverlay .MedWall-mini-feed,
.modal-overlay#medWallOverlay .MedWall-mini-feed {
  margin-bottom: 200px !important; /* Force bottom margin on mini feed */
}

/* Bottom spacer for Apple dock clearance on MedX Wall */
.medwall-bottom-spacer {
  height: 300px !important;
  width: 100% !important;
  background: transparent !important;
  visibility: hidden !important;
  margin-bottom: 150px !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

/* ===== FORM POSITIONING FIXES ===== */
/* Specific form positioning */
#loginForm,
#signupForm,
#verifyForm,
#resetPasswordForm {
  margin: 0 auto !important; /* Center horizontally only, no vertical margin */
  position: relative !important;
  top: auto !important; /* Reset any absolute positioning */
  transform: none !important; /* Reset any transforms */
  align-self: center !important; /* Center vertically in flex container */
}

/* Ensure auth-forms container properly centers its children */
.auth-forms,
#authForms {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important; /* Stack forms vertically if multiple */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10005 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ===== AUTH FORM BUTTON FIXES - HIGHEST SPECIFICITY ===== */
.modal-overlay#medWallOverlay .auth-form .auth-btn.primary,
.modal-overlay#medWallOverlay .auth-form button.auth-btn.primary,
.modal-overlay#medWallOverlay .auth-form #loginSubmitBtn,
.modal-overlay#medWallOverlay .auth-form #signupSubmitBtn,
.modal-overlay#medWallOverlay .auth-form #verifySubmitBtn,
.modal-overlay#medWallOverlay .auth-form #resetPasswordSubmitBtn {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%) !important;
  color: white !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-overlay#medWallOverlay .auth-form .auth-btn.secondary {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.modal-overlay#medWallOverlay .auth-form .auth-btn.tertiary {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #6b7280 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.header-branding {
  margin-top: 8px;
  text-align: right;
}

.header-brand-text {
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif !important;
}

/* Removed separator styling - separators hidden to match Facebook */

/* ===== PROFILE LAYOUT FIXES ===== */
.profile-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.profile-header h1 {
  font-size: 24px !important;
  font-weight: bold !important;
  color: white !important; /* White text for blue headers */
  margin: 0 !important;
  font-family: Arial, sans-serif !important;
}

.share-button {
  background: #3b5998 !important;
  color: white !important;
  border: 1px solid #ccc !important;
  padding: 6px 12px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-family: Arial, sans-serif !important;
}

.profile-info-box {
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}

.profile-info-content {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.profile-affiliation {
  font-weight: bold !important;
  color: white !important; /* White text for blue headers */
  margin-bottom: 8px !important;
  font-family: Arial, sans-serif !important;
}

.profile-details {
  margin-bottom: 0 !important;
}

.profile-detail-item {
  color: white !important; /* White text for blue headers */
  margin-bottom: 4px !important;
  font-family: Arial, sans-serif !important;
}

.profile-main-section {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

.profile-actions-section {
  flex: 1 !important;
}

        .profile-actions {
          background: white !important;
          border: 1px solid #ddd !important;
          border-radius: 3px !important;
          padding: 12px !important;
        }

        /* Force profile picture size to match Facebook - LARGER like in classic Facebook */
        .profile-picture {
          width: 200px !important;
          height: 200px !important;
          max-width: 200px !important;
          max-height: 200px !important;
        }

        /* Sidebar Profile Picture - LARGER to match Facebook profile image */
        .sidebar-profile-picture {
          margin-bottom: 0;
          text-align: center;
          padding: 0;
          background: white;
          border-bottom: 1px solid #d3d6db;
        }

        .sidebar-profile-img {
          width: 100% !important;
          height: 240px !important;
          max-height: 240px !important;
          object-fit: cover;
          border: none;
          border-radius: 0px; /* Square like Facebook */
          display: block;
        }

        .sidebar-profile-actions {
          margin-bottom: 0;
          padding: 12px;
          border-bottom: 1px solid #d3d6db;
        }

        .profile-action-link {
          display: block;
          color: #3b5998 !important;
          text-decoration: none;
          font-size: 11px;
          padding: 3px 0;
          line-height: 1.4;
          padding: 4px 0;
          font-size: 12px;
          font-family: Arial, sans-serif;
        }

        .profile-action-link:hover {
          text-decoration: underline;
        }

/* Ensure MedX Wall overlay allows scrolling - override any conflicting rules */
.modal-overlay#medWallOverlay {
  overflow: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-overlay#medWallOverlay .modal-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
}

/* CRITICAL: Override general modal-overlay rule for MedX Wall */
#medWallOverlay.modal-overlay {
  position: absolute !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  scroll-behavior: smooth !important;
}

.profile-picture-section {
  flex: 0 0 auto !important;
  width: 150px !important;
}

.profile-info-section {
  flex: 1 !important;
  margin-top: 0 !important;
}

.profile-info-content {
  background: white !important;
  padding: 16px !important;
  border-radius: 3px !important;
  border: 1px solid #ddd !important;
}

.profile-affiliation {
  font-size: 13px !important;
  color: white !important; /* White text for blue headers */
  font-family: Arial, sans-serif !important;
  margin-bottom: 8px !important;
}

.profile-details {
  margin-bottom: 12px !important;
}

.profile-detail-item {
  font-size: 13px !important;
  color: white !important; /* White text for blue headers */
  font-family: Arial, sans-serif !important;
  margin-bottom: 2px !important;
}

.share-button {
  background: #4a90e2 !important;
  color: white !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-family: Arial, sans-serif !important;
  cursor: pointer !important;
}

/* ===== DETAILED FEED ITEMS ===== */
.feed-date {
  font-size: 13px !important;
  font-weight: bold !important;
  color: white !important; /* White text for blue headers */
  font-family: Arial, sans-serif !important;
  margin: 12px 0 8px 0 !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid #eee !important;
}

.feed-item {
  display: flex !important;
  margin-bottom: 12px !important;
  padding: 8px !important;
  background: white !important;
  border-radius: 3px !important;
}

.feed-icon {
  font-size: 16px !important;
  margin-right: 8px !important;
  margin-top: 2px !important;
}

.feed-content {
  flex: 1 !important;
}

.feed-text {
  font-size: 13px !important;
  color: white !important; /* White text for blue headers */
  font-family: Arial, sans-serif !important;
  margin-bottom: 4px !important;
}

.feed-link {
  font-size: 13px !important;
  color: #3b5998 !important;
  text-decoration: underline !important;
  font-family: Arial, sans-serif !important;
  margin-bottom: 4px !important;
}

.feed-description {
  font-size: 12px !important;
  color: #666 !important;
  font-family: Arial, sans-serif !important;
  margin-bottom: 4px !important;
}

.feed-url {
  font-size: 12px !important;
  color: #3b5998 !important;
  text-decoration: underline !important;
  font-family: Arial, sans-serif !important;
  margin-bottom: 8px !important;
}

.feed-thumbnail {
  margin: 8px 0 !important;
}

.video-thumbnail {
  width: 60px !important;
  height: 40px !important;
  background: #f0f0f0 !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.play-button {
  background: #3b5998 !important;
  color: white !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
}

.photo-thumbnail {
  width: 60px !important;
  height: 40px !important;
  background: #f0f0f0 !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
}

.feed-calendar {
  background: #3b5998 !important;
  color: white !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: bold !important;
  margin-left: 8px !important;
}

.feed-comment {
  font-size: 12px !important;
  color: #666 !important;
  font-style: italic !important;
  font-family: Arial, sans-serif !important;
  margin-top: 4px !important;
  padding-left: 8px !important;
  border-left: 2px solid #eee !important;
}

/* ===== CLASSIC FACEBOOK SIDEBAR SECTIONS ===== */
.sidebar-sections {
  margin-top: 0;
  padding: 6px; /* Half padding */
}

.sidebar-section {
  margin-bottom: 6px; /* Half margin */
  padding-bottom: 6px; /* Half padding */
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-section:last-child {
  border-bottom: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5px 6px; /* Half padding */
  background: #3b5998 !important; /* Blue background for section headers */
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  color: white !important; /* White text for blue headers */
}

/* REMOVED DUPLICATE */

.section-icon {
  color: #3b5998 !important; /* Facebook blue arrows on light blue background */
  font-size: 10px;
  font-family: Arial, sans-serif !important;
  transition: transform 0.3s ease;
  display: inline-block;
  transform-origin: center;
}

.section-content {
  padding: 4px 12px; /* Increased vertical padding for better size */
  background: white;
  font-size: 13px;
  color: #333 !important; /* Dark text for white background */
  font-family: Arial, sans-serif !important;
}

.status-indicator {
  color: #00a000 !important;
  margin-left: 4px;
  font-size: 12px;
}

/* Force green color for status indicator */
.MedWall-sidebar .status-indicator,
.sidebar-section .status-indicator,
.section-content .status-indicator {
  color: #00a000 !important;
  background: none !important;
  border: none !important;
}

/* Ultra-specific status indicator rule */
.MedWall-sidebar .sidebar-section .section-content .status-indicator,
#medWallOverlay .MedWall-sidebar .sidebar-section .section-content .status-indicator {
  color: #00a000 !important;
  background: transparent !important;
  border: none !important;
  text-shadow: none !important;
  font-weight: normal !important;
}

.see-all-link {
  color: #3b5998 !important;
  text-decoration: underline;
  font-size: 13px;
  font-family: Arial, sans-serif !important;
  margin-left: 4px;
}

.group-list {
  margin-top: 8px;
}

/* Remove this duplicate - it was overriding the proper group-item styling above */
/* The main .group-item at line 6449 has the correct full styling with borders and backgrounds */

/* ===== FACEBOOK-STYLE MEDX WALL OVERRIDES ===== */
/* These styles must be at the end to override all other styles */

.MedWall-header {
  background: #3b5998 !important;
  color: white !important;
  border-radius: 0 0 12px 12px !important; /* Rounded bottom corners */
}

.MedWall-header * {
  color: white !important;
}

.MedWall-header .header-logo {
  color: white !important;
}

.MedWall-header .header-profile-name {
  color: white !important;
}

.MedWall-header .header-link {
  color: white !important; /* White text by default */
  background: transparent !important; /* Transparent background by default */
  font-weight: bold !important; /* Bold text */
  font-size: 12.5px !important; /* Half the size from 25px */
  border: none !important; /* No border */
}

.MedWall-header .header-link:hover {
  color: #3b5998 !important; /* Blue text on hover */
  background: white !important; /* White background on hover */
}

.MedWall-main-container {
  background: #f7f7f7 !important;
}

.MedWall-sidebar {
  background: white !important;
  width: 120px !important;
  flex: 0 0 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.MedWall-sidebar .sidebar-link {
  color: #3b5998 !important; /* Blue text for white sidebar */
}

.MedWall-profile-content {
  background: white !important;
}

.MedWall-profile-content .profile-header h1 {
  color: white !important; /* White text for blue headers */
}

/* REMOVED DUPLICATE */

.MedWall-profile-content .section-content {
  color: #333 !important; /* Dark text for white background content */
}

.MedWall-profile-content .profile-action-link {
  color: #3b5998 !important;
}

.MedWall-mini-feed {
  background: white !important;
  width: auto !important;
  flex: 1 !important;
  min-width: 250px !important;
  max-width: none !important;
}

/* REMOVED DUPLICATE */

.MedWall-mini-feed .feed-summary {
  color: #1d2129 !important; /* Dark text for white content */
}

.MedWall-mini-feed .feed-content {
  color: #1d2129 !important; /* Dark text for white mini-feed */
}

.MedWall-mini-feed .feed-date {
  color: #666 !important;
}

.MedWall-mini-feed .user-name {
  color: #3b5998 !important; /* Blue text for white mini-feed */
}

.MedWall-mini-feed .user-school,
.MedWall-mini-feed .user-graduation,
.MedWall-mini-feed .user-location {
  color: #666 !important; /* Gray text for profile info on white */
}

/* Ultra-specific search column fix removed - uses mobile layout */

/* All media queries removed - search column uses mobile layout at all sizes */

/* Exact Facebook Layout Override - CSS removed - will be rebuilt */

.MedWall-left-nav,
#medWallOverlay .MedWall-left-nav,
.modal-overlay#medWallOverlay .MedWall-left-nav,
body .MedWall-left-nav,
html body .MedWall-left-nav {
  display: none !important;
  visibility: hidden !important;
}

/* Profile content width CSS removed - will be rebuilt */

/* Mini-feed column layout CSS removed - will be rebuilt */

/* Profile Settings Form White Background */
#medWallOverlay .profile-settings,
#medWallOverlay .profile-settings form,
#medWallOverlay .profile-settings .form-group,
#medWallOverlay .profile-settings input,
#medWallOverlay .profile-settings textarea,
#medWallOverlay .profile-settings select,
#medWallOverlay .profile-settings label,
.modal-overlay#medWallOverlay .profile-settings,
.modal-overlay#medWallOverlay .profile-settings form,
.modal-overlay#medWallOverlay .profile-settings .form-group,
.modal-overlay#medWallOverlay .profile-settings input,
.modal-overlay#medWallOverlay .profile-settings textarea,
.modal-overlay#medWallOverlay .profile-settings select,
.modal-overlay#medWallOverlay .profile-settings label {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1f2937 !important;
}

/* Profile Settings Selector Above Form */
#medWallOverlay .profile-settings-selector,
#medWallOverlay .settings-selector,
#medWallOverlay .profile-tab-selector,
#medWallOverlay .profile-settings .selector,
#medWallOverlay .profile-settings .tab-selector,
.modal-overlay#medWallOverlay .profile-settings-selector,
.modal-overlay#medWallOverlay .settings-selector,
.modal-overlay#medWallOverlay .profile-tab-selector,
.modal-overlay#medWallOverlay .profile-settings .selector,
.modal-overlay#medWallOverlay .profile-settings .tab-selector {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

/* Profile Settings Container */
#medWallOverlay .profile-settings-container,
#medWallOverlay .settings-container,
#medWallOverlay .profile-form-container,
.modal-overlay#medWallOverlay .profile-settings-container,
.modal-overlay#medWallOverlay .settings-container,
.modal-overlay#medWallOverlay .profile-form-container {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1f2937 !important;
}

/* ===== EDIT PROFILE MODAL ===== */
.edit-profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  /* Hidden by default - JavaScript will show it when needed */
  display: none !important;
  align-items: center;
  justify-content: center;
}

.edit-profile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.edit-profile-content {
  position: relative;
  background: white;
  border-radius: 8px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.edit-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.edit-profile-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.close-edit-profile-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-edit-profile-btn:hover {
  background: #e5e7eb;
  color: #1f2937;
}

#editProfileForm {
  padding: 20px;
}

#editProfileForm .form-group {
  margin-bottom: 16px;
}

#editProfileForm label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

#editProfileForm input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  transition: all 0.2s ease;
}

#editProfileForm input[type="text"]:focus {
  outline: none;
  border-color: #3b5998;
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.form-actions button {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-profile-link {
  font-family: Arial, sans-serif;
}

.edit-profile-link:hover {
  text-decoration: underline;
}

/* ========================================================================= */
/* HIDE ENTIRE PROFILE PAGE UNTIL LOGGED IN */
/* ========================================================================= */

/* ALWAYS hide Facebook-style header by default */
.MedWall-header,
#medWallOverlay .MedWall-header,
.modal-overlay#medWallOverlay .MedWall-header {
  display: none !important;
  visibility: hidden !important;
}

/* ALWAYS hide entire profile page by default */
/* Profile page visibility controlled by JavaScript and logged-in class */

/* CRITICAL: Hide front page elements when logged into MedWall */
body:has(#medWallOverlay.logged-in.active) #mainSearchLayout,
body:has(#medWallOverlay.logged-in.active) #mainSearchLayout {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
}

body:has(#medWallOverlay.logged-in.active) .topnav,
body:has(#medWallOverlay.logged-in.active) .topnav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
}

body:has(#medWallOverlay.logged-in.active) .controls,
body:has(#medWallOverlay.logged-in.active) .controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
}

body:has(#medWallOverlay.logged-in.active) .topnav-spacer,
body:has(#medWallOverlay.logged-in.active) #topnavSpacer,
body:has(#medWallOverlay.logged-in.active) .topnav-spacer,
body:has(#medWallOverlay.logged-in.active) #topnavSpacer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -9999px !important;
}

/* Only show when logged-in class is added */
#medWallOverlay.logged-in .MedWall-header,
.modal-overlay#medWallOverlay.logged-in .MedWall-header {
  display: block !important;
  visibility: visible !important;
}

#medWallOverlay.logged-in .MedWall-profile-page,
.modal-overlay#medWallOverlay.logged-in .MedWall-profile-page {
  display: flex !important;
  visibility: visible !important;
}

/* Show columns when logged in - No Wrapping Maintained */
#medWallOverlay.logged-in .MedWall-profile-content,
#medWallOverlay.logged-in .MedWall-profile-content,
.modal-overlay#medWallOverlay.logged-in .MedWall-profile-content,
.modal-overlay#medWallOverlay.logged-in .MedWall-profile-content,
#medWallOverlay.active.logged-in .MedWall-profile-content,
#medWallOverlay.active.logged-in .MedWall-profile-content,
html body #medWallOverlay.logged-in .MedWall-profile-content,
html body #medWallOverlay.logged-in .MedWall-profile-content {
  display: flex !important;
  visibility: visible !important;
  z-index: 500 !important; /* High z-index when logged in to ensure clickability */
  pointer-events: auto !important;
  opacity: 1 !important;
}

#medWallOverlay.logged-in .MedWall-mini-feed,
#medWallOverlay.logged-in .MedWall-mini-feed,
.modal-overlay#medWallOverlay.logged-in .MedWall-mini-feed,
.modal-overlay#medWallOverlay.logged-in .MedWall-mini-feed {
  display: block !important;
  visibility: visible !important;
}

/* Ultra-specific override for mini-feed visibility when logged in */
#medWallOverlay.logged-in .MedWall-mini-feed,
#medWallOverlay.logged-in .MedWall-mini-feed,
.modal-overlay#medWallOverlay.logged-in .MedWall-mini-feed,
.modal-overlay#medWallOverlay.logged-in .MedWall-mini-feed,
body #medWallOverlay.logged-in .MedWall-mini-feed,
body #medWallOverlay.logged-in .MedWall-mini-feed,
html body #medWallOverlay.logged-in .MedWall-mini-feed,
html body #medWallOverlay.logged-in .MedWall-mini-feed {
  display: block !important;
  visibility: visible !important;
}

/* Maximum specificity override for mini-feed when logged in */
html body #medWallOverlay.logged-in .MedWall-mini-feed,
html body #medWallOverlay.logged-in .MedWall-mini-feed,
html body .modal-overlay#medWallOverlay.logged-in .MedWall-mini-feed,
html body .modal-overlay#medWallOverlay.logged-in .MedWall-mini-feed {
  display: block !important;
  visibility: visible !important;
}

#medWallOverlay.logged-in .MedWall-profile-page,
#medWallOverlay.logged-in .MedWall-profile-page,
.modal-overlay#medWallOverlay.logged-in .MedWall-profile-page,
.modal-overlay#medWallOverlay.logged-in .MedWall-profile-page {
  display: flex !important;
  visibility: visible !important;
}

/* Hide welcome view - only show auth forms */
.medwall-wall-welcome {
  display: none !important;
  visibility: hidden !important;
}

.auth-forms {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hide auth-forms when logged in */
#medWallOverlay.logged-in .auth-forms,
.modal-overlay#medWallOverlay.logged-in .auth-forms,
#medWallOverlay.active.logged-in .auth-forms {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

.auth-form {
  position: relative !important;
  z-index: 10006 !important; /* Ensure form is on top and visible - above overlay z-index */
  background: white !important;
  /* Don't force display - let JavaScript control visibility */
  /* CRITICAL: No transitions for instant visibility */
  transition: none !important;
  animation: none !important;
}

/* Force auth forms to be visible when overlay is NOT logged in */
#medWallOverlay:not(.logged-in) #authForms {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10005 !important;
}

/* Ensure individual auth forms are visible and clickable when NOT logged in */
#medWallOverlay:not(.logged-in) .auth-form,
#medWallOverlay:not(.logged-in) .auth-form,
.modal-overlay#medWallOverlay:not(.logged-in) .auth-form,
.modal-overlay#medWallOverlay:not(.logged-in) .auth-form {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10006 !important;
}

/* Default: Hide all individual auth forms (JavaScript will show the active one) */
/* REMOVED !important so JavaScript inline styles can override */
#signupForm,
#loginForm,
#emailVerification,
#forgotPasswordForm,
#passwordResetVerification,
#newPasswordForm {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* When a form is explicitly shown by JavaScript with inline styles, they will override the above */

/* ========================================================================= */
/* FINAL OVERRIDE - FACEBOOK STYLE BLUE COLORS - MAXIMUM SPECIFICITY */
/* These rules MUST come last to override all other conflicting styles */
/* ========================================================================= */

/* Search Column (Left) - ALL TEXT MUST BE BLUE */
#medWallOverlay .MedWall-left-nav,
#medWallOverlay .MedWall-left-nav *,
#medWallOverlay .MedWall-left-nav a,
#medWallOverlay .MedWall-left-nav span,
#medWallOverlay .MedWall-left-nav div,
#medWallOverlay .MedWall-left-nav button,
#medWallOverlay .MedWall-left-nav .nav-link,
#medWallOverlay .MedWall-left-nav .nav-link-text,
#medWallOverlay .MedWall-left-nav .nav-link-edit,
.modal-overlay#medWallOverlay .MedWall-left-nav,
.modal-overlay#medWallOverlay .MedWall-left-nav *,
.modal-overlay#medWallOverlay .MedWall-left-nav a,
.modal-overlay#medWallOverlay .MedWall-left-nav span,
.modal-overlay#medWallOverlay .MedWall-left-nav div,
.modal-overlay#medWallOverlay .MedWall-left-nav button,
.modal-overlay#medWallOverlay .MedWall-left-nav .nav-link,
.modal-overlay#medWallOverlay .MedWall-left-nav .nav-link-text,
.modal-overlay#medWallOverlay .MedWall-left-nav .nav-link-edit {
  color: #3b5998 !important;
}

/* Section Headers - FACEBOOK LIGHT BLUE BACKGROUND WITH FACEBOOK BLUE TEXT */
#medWallOverlay .section-header,
#medWallOverlay .profile-section .section-header,
#medWallOverlay .MedWall-profile-content .section-header,
#medWallOverlay .MedWall-mini-feed .mini-feed-header,
.modal-overlay#medWallOverlay .section-header,
.modal-overlay#medWallOverlay .profile-section .section-header,
.modal-overlay#medWallOverlay .MedWall-profile-content .section-header,
.modal-overlay#medWallOverlay .MedWall-mini-feed .mini-feed-header {
  background: #D8DEEA !important;
  background-color: #D8DEEA !important;
  border: none !important;
  border-bottom: none !important;
  border-top: 2px solid #3b5998 !important; /* Thicker blue line at top for all headers */
  border-left: none !important;
  border-right: none !important;
  padding: 3px 6px !important; /* More vertical padding to center text */
  height: 20px !important; /* Fixed height */
  min-height: 20px !important;
  max-height: 20px !important;
  white-space: nowrap !important; /* Keep content on one line */
  flex-wrap: nowrap !important; /* Don't wrap flex items */
  line-height: 1.3 !important; /* Better line height for text visibility */
  font-size: 11px !important;
  overflow: hidden !important; /* Prevent text overflow */
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* Section Icons (Arrows) - WHITE COLOR */
#medWallOverlay .section-icon,
#medWallOverlay .profile-section .section-icon,
#medWallOverlay .section-header .section-icon,
.modal-overlay#medWallOverlay .section-icon,
.modal-overlay#medWallOverlay .profile-section .section-icon,
.modal-overlay#medWallOverlay .section-header .section-icon {
  color: white !important;
}

/* REMOVED DUPLICATE OVERLAY RULES */

/* Header Profile Name - WHITE COLOR, NO UNDERLINE */
#medWallOverlay .header-profile-name,
#medWallOverlay .MedWall-header .header-profile-name,
.modal-overlay#medWallOverlay .header-profile-name,
.modal-overlay#medWallOverlay .MedWall-header .header-profile-name {
  color: white !important;
  text-decoration: none !important;
}

/* Profile Action Links - BLUE AND BOLD (already working but reinforce) */
#medWallOverlay .profile-action-link,
#medWallOverlay .MedWall-profile-content .profile-action-link,
.modal-overlay#medWallOverlay .profile-action-link,
.modal-overlay#medWallOverlay .MedWall-profile-content .profile-action-link {
  color: #3b5998 !important;
  font-weight: bold !important;
}

/* This Week at a Glance header - reduced vertical padding */
#weekly-events-content-column h3 {
  margin: 0 !important;
  padding: 2px 0 !important; /* Reduced vertical padding */
}

/* User Info in Mini-Feed - WHITE TEXT */
#medWallOverlay .user-school,
#medWallOverlay .user-graduation,
#medWallOverlay .user-location,
#medWallOverlay .MedWall-mini-feed .user-school,
#medWallOverlay .MedWall-mini-feed .user-graduation,
#medWallOverlay .MedWall-mini-feed .user-location,
.modal-overlay#medWallOverlay .user-school,
.modal-overlay#medWallOverlay .user-graduation,
.modal-overlay#medWallOverlay .user-location,
.modal-overlay#medWallOverlay .MedWall-mini-feed .user-school,
.modal-overlay#medWallOverlay .MedWall-mini-feed .user-graduation,
.modal-overlay#medWallOverlay .MedWall-mini-feed .user-location {
  color: white !important;
}

/* END FINAL OVERRIDE */

/* ========================================================================= */
/* DYNAMIC CONTENT COLUMN */
/* ========================================================================= */

/* Content Column - Fixed Width, Rightmost, No Wrapping */
.MedWall-content-column {
  flex: 1 !important; /* Flexible width - fills remaining space */
  width: auto !important;
  min-width: 400px !important;
  max-width: none !important;
  height: auto !important; /* Allow vertical expansion */
  min-height: calc(100vh - 120px) !important; /* Full height minus header */
  background: white !important;
  border: 1px solid #d3d6db !important;
  border-radius: 4px !important; /* Slight rounding for modern look */
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  order: 3 !important; /* Third column - rightmost */
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important; /* Ensure clickability - match profile and mini-feed columns */
  pointer-events: auto !important; /* Ensure all buttons are clickable */
  overflow-y: visible !important; /* No scrolling - extend to fit content */
  overflow-x: hidden !important; /* Prevent horizontal overflow */
  display: none !important; /* Hidden by default - shows when clicking nav buttons */
  flex-direction: column !important; /* CRITICAL: Column layout for header/body stacking */
}

.MedWall-content-column.active {
  display: flex !important; /* Use flex to participate in flex container */
  flex-direction: column !important; /* CRITICAL: Ensure column layout */
}

/* Content column body - ensure clickability */
#contentColumnBody,
.MedWall-content-column #contentColumnBody {
  position: relative !important;
  z-index: 100 !important; /* Ensure clickability */
  pointer-events: auto !important; /* Ensure all buttons and links are clickable */
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Ensure all buttons and interactive elements in content column are clickable */
.MedWall-content-column button,
.MedWall-content-column a,
.MedWall-content-column input,
.MedWall-content-column select,
.MedWall-content-column textarea,
#contentColumnBody button,
#contentColumnBody a,
#contentColumnBody input,
#contentColumnBody select,
#contentColumnBody textarea {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 101 !important; /* Slightly higher than parent to ensure they're on top */
}

/* Ensure all buttons and interactive elements in mini-feed column are clickable */
.MedWall-mini-feed button,
.MedWall-mini-feed a,
.MedWall-mini-feed input,
.MedWall-mini-feed select,
.MedWall-mini-feed textarea {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 101 !important; /* Slightly higher than parent to ensure they're on top */
}

/* Ensure all buttons and interactive elements in profile column are clickable */
.MedWall-profile-content button,
.MedWall-profile-content a,
.MedWall-profile-content input,
.MedWall-profile-content select,
.MedWall-profile-content textarea {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 101 !important; /* Slightly higher than parent to ensure they're on top */
}

/* When content column is active, ensure profile column stays visible */
#medWallOverlay.logged-in .MedWall-content-column.active ~ .MedWall-profile-content,
#medWallOverlay.logged-in .MedWall-profile-content:has(~ .MedWall-content-column.active) {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Alternative: Use adjacent sibling or general sibling to keep profile visible */
.MedWall-profile-page:has(.MedWall-content-column.active) .MedWall-profile-content {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 500 !important;
}

.content-column-header {
  background: #3b5998 !important;
  color: white !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid #d3d6db !important;
  font-weight: bold !important;
  display: flex !important; /* Flexbox layout */
  flex-direction: row !important; /* Horizontal row */
  justify-content: space-between !important; /* Space between title and button */
  align-items: center !important; /* Vertically center items */
  min-height: 50px !important; /* Fixed header height */
  max-height: 50px !important; /* Fixed header height */
  height: 50px !important; /* Fixed header height */
  flex-shrink: 0 !important; /* Don't shrink */
  flex-grow: 0 !important; /* Don't grow */
}

.content-column-header * {
  color: white !important;
}

.content-column-header h3 {
  margin: 0;
  font-size: 28px;
  color: white !important;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

#contentColumnTitle {
  color: white !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Ensure badges inside content column title are styled properly */
#contentColumnTitle span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure all text in content column header is white - MAXIMUM SPECIFICITY */
#MedWallContentColumn .content-column-header h3,
#MedWallContentColumn .content-column-header #contentColumnTitle,
#MedWallContentColumn #contentColumnTitle,
.MedWall-content-column .content-column-header h3,
.MedWall-content-column .content-column-header h2,
.MedWall-content-column .content-column-header h1,
.MedWall-content-column #contentColumnTitle,
h3#contentColumnTitle {
  color: white !important;
}

/* Back to Profile button - pill shaped with white border and white text */
.back-to-profile-btn {
  background: transparent !important; /* No fill */
  color: white !important; /* White text */
  border: 2px solid white !important; /* White border */
  border-radius: 24px !important; /* Pill shape */
  padding: 6px 16px !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: Arial, sans-serif;
}

.back-to-profile-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important; /* Slight white fill on hover */
  transform: scale(1.05);
}

.back-to-profile-btn:active {
  background: rgba(255, 255, 255, 0.3) !important; /* More white fill on click */
  transform: scale(0.98);
}

/* Clear All Notifications button - matches back-to-profile-btn style */
.clear-all-notifications-btn {
  background: transparent !important; /* No fill */
  color: white !important; /* White text */
  border: 2px solid white !important; /* White border */
  border-radius: 24px !important; /* Pill shape */
  padding: 6px 16px !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: Arial, sans-serif;
}

.clear-all-notifications-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important; /* Slight white fill on hover */
  transform: scale(1.05);
}

.clear-all-notifications-btn:active {
  background: rgba(255, 255, 255, 0.3) !important; /* More white fill on click */
  transform: scale(0.98);
}

/* Mobile tap feedback - brief white fill */
@media (hover: none) and (pointer: coarse) {
  .back-to-profile-btn:active {
    background: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.1s ease; /* Faster transition for mobile */
  }
}

.content-column-body {
  padding: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: calc(100vh - 200px) !important; /* Ensure it's tall enough to show content */
  flex: 1 !important; /* Fill available space */
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  background: white !important;
}

/* Empty State Styling */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.empty-state h4 {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}

.empty-state p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.add-content-btn {
  background: #3b5998;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 20px;
}

.add-content-btn:hover {
  background: #2d4373;
}

/* Friends List Styling */
.friends-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3b5998;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
}

.friend-info {
  flex: 1;
}

.friend-name {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.friend-school {
  color: #666;
  font-size: 12px;
}

.friend-action-btn {
  background: #3b5998;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
}

.friend-action-btn:hover {
  background: #2d4373;
}

/* Photos Grid */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.photo-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.photo-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.photo-caption {
  padding: 8px;
  font-size: 12px;
  color: #666;
  background: #f8f9fa;
}

/* Shares, Groups, Events Lists */
.shares-list,
.groups-list,
.events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-item,
.group-item,
.event-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.share-item h4,
.group-item h4,
.event-item h4 {
  color: #333;
  font-size: 15px;
  margin-bottom: 6px;
}

.share-item p,
.group-item p,
.event-item p {
  color: #666;
  font-size: 13px;
  margin-bottom: 8px;
}

.share-date,
.group-members,
.event-date {
  font-size: 11px;
  color: #999;
}

/* Account Settings */
.account-settings,
.privacy-settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.setting-section h4 {
  color: #333;
  font-size: 16px;
  margin-bottom: 12px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item label {
  font-weight: 500;
  color: #666;
  font-size: 13px;
}

.setting-item span {
  color: #333;
  font-size: 13px;
}

.edit-profile-btn,
.logout-btn,
.delete-account-btn,
.secondary-btn {
  padding: 8px 16px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 13px;
  border: none;
  margin-top: 10px;
}

.edit-profile-btn {
  background: #3b5998;
  color: white;
}

.logout-btn {
  background: #6b7280;
  color: white;
}

.delete-account-btn {
  background: #dc2626;
  color: white;
}

.secondary-btn {
  background: #e5e7eb;
  color: #333;
}

.privacy-option {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.privacy-option:last-child {
  border-bottom: none;
}

.privacy-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
}

/* Messaging System Styling */
.messaging-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.messaging-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  background: #f8f9fa;
}

.msg-tab {
  flex: 1;
  padding: 10px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.msg-tab.active {
  color: #3b5998;
  border-bottom-color: #3b5998;
  font-weight: bold;
}

.msg-tab:hover {
  background: #e5e7eb;
}

.messaging-content {
  flex: 1;
  overflow-y: auto;
}

.msg-tab-content {
  display: none;
}

.msg-tab-content.active {
  display: block;
}

.conversations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.conversations-header h4 {
  margin: 0;
  font-size: 15px;
  color: #333;
}

.new-message-btn {
  background: #3b5998;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
}

.new-message-btn:hover {
  background: #2d4373;
}

.conversations-list {
  overflow-y: auto;
  max-height: calc(100vh - 250px);
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.conversation-item:hover {
  background: #f8f9fa;
}

.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3b5998;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
  font-size: 18px;
}

.conv-info {
  flex: 1;
}

.conv-name {
  font-weight: bold;
  color: #333;
  font-size: 14px;
  margin-bottom: 4px;
}

.conv-last-message,
.conv-members {
  color: #666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-time {
  font-size: 11px;
  color: #999;
}

/* Message Thread View */
.message-thread-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #3b5998;
  color: white;
  border-bottom: 1px solid #2d4373;
}

.thread-header .back-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 13px;
}

.thread-header .back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.thread-header h4 {
  margin: 0;
  font-size: 15px;
  color: white;
}

.thread-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-thread {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.message {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 18px;
  margin-bottom: 4px;
}

.message.mine {
  align-self: flex-end;
  background: #3b5998;
  color: white;
  margin-left: auto;
}

.message.theirs {
  align-self: flex-start;
  background: white;
  color: #333;
  border: 1px solid #e0e0e0;
}

.message-sender {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #666;
}

.message.mine .message-sender {
  color: rgba(255, 255, 255, 0.8);
}

.message-text {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.message-time {
  font-size: 10px;
  opacity: 0.7;
}

.thread-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: white;
  border-top: 1px solid #e0e0e0;
}

.thread-input input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 13px;
  outline: none;
}

.thread-input input:focus {
  border-color: #3b5998;
}

.thread-input button {
  background: #3b5998;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.thread-input button:hover {
  background: #2d4373;
}

/* =========================================================================
   FACEBOOK-STYLE PROFILE CONTENT VIEW
   ========================================================================= */

.profile-content-view {
  padding: 20px;
  background: #f7f7f7;
  min-height: 100vh;
}

.profile-header-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.profile-name-status {
  text-align: left;
}

.profile-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
}

.profile-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-text {
  font-size: 14px;
  color: #333;
}

.status-time {
  font-size: 12px;
  color: #666;
}

.personal-info-section,
.recent-activity-section,
.information-section {
  background: white;
  padding: 8px; /* Further reduced for maximum compactness */
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 14px; /* Reduced from 16px */
  font-weight: bold;
  color: #3b5998 !important; /* Facebook blue for section titles */
  margin: 0 0 6px 0; /* Reduced from 16px */
  padding-bottom: 4px; /* Reduced from 8px */
  border-bottom: 1px solid #e1e1e1;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.info-label {
  font-weight: bold;
  color: #333;
  min-width: 140px;
  margin-right: 12px;
}

.info-value {
  color: #666;
  flex: 1;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 3px; /* Further reduced for maximum compactness */
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 2px 0; /* Further reduced for maximum compactness */
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 12px; /* Further reduced */
  margin-right: 6px; /* Further reduced */
  min-width: 16px; /* Further reduced */
}

.activity-text {
  flex: 1;
  color: #333;
  font-size: 12px; /* Further reduced for maximum compactness */
  line-height: 1.2; /* Even tighter line height */
}

.activity-time {
  color: #666;
  font-size: 10px; /* Further reduced */
  margin-left: 6px; /* Further reduced */
}

.see-more-link {
  margin-top: 4px; /* Further reduced for maximum compactness */
  text-align: center;
}

.see-more-activity {
  color: #3b5998;
  text-decoration: none;
  font-size: 11px; /* Reduced for compact layout */
}

.see-more-activity:hover {
  text-decoration: underline;
}

.info-category {
  margin-top: 16px;
}

.category-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0 0 12px 0;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .profile-content-view {
    padding: 30px;
  }
}

/* =========================================================================
   FACEBOOK-STYLE GROUPS CONTENT VIEW
   ========================================================================= */

.groups-content-view {
  padding: 20px;
  background: #f7f7f7;
  min-height: 100vh;
}

.groups-header-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.groups-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
}

.groups-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.group-card {
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}

.group-header {
  padding: 20px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-info {
  flex: 1;
}

.group-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
}

.group-members {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.group-action-btn {
  background: #3b5998;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.group-action-btn:hover {
  background: #2d4373;
}

.group-action-btn.danger {
  background: #dc3545;
}

.group-action-btn.danger:hover {
  background: #c82333;
}

.group-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.group-description-section,
.group-officers-section,
.group-discussion-section,
.group-picture-section {
  background: #f8f9fa;
  border-radius: 4px;
  overflow: hidden;
}

.section-header.blue {
  background: #D8DEEA !important;
  color: #3b5998;
  padding: 2px 6px !important; /* Minimal padding for compact headers */
  font-size: 12px !important; /* Reduced to match other headers */
  font-weight: bold;
  margin: 0;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.section-content {
  padding: 12px;
}

.section-content p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.group-founded {
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.officers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.officer-item {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.officer-role {
  font-weight: bold;
  color: #333;
  margin-right: 8px;
  min-width: 80px;
}

.officer-name {
  color: #3b5998;
  cursor: pointer;
}

.officer-name:hover {
  text-decoration: underline;
}

.discussion-item {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e1e1e1;
}

.discussion-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.post-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
}

.post-details {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.group-image-container {
  text-align: center;
}

.group-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.groups-empty-state {
  background: white;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.groups-empty-state h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 12px 0;
}

.groups-empty-state p {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.empty-state-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn.primary {
  background: #3b5998;
  color: white;
}

.action-btn.primary:hover {
  background: #2d4373;
}

.action-btn.secondary {
  background: #6c757d;
  color: white;
}

.action-btn.secondary:hover {
  background: #5a6268;
}

/* Responsive adjustments for groups */
@media (max-width: 768px) {
  .group-content {
    grid-template-columns: 1fr;
  }
  
  .group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .group-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================================
   LAUNCHER OVERLAY (Universal Navigation)
   ========================================================================= */

.launcher-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 9999998 !important; /* Just below dock (9999999) but above everything else */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
  animation: launcherFadeIn 0.3s ease-out;
  /* Make launcher scrollable vertically */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  pointer-events: auto !important; /* Ensure it captures all clicks */
}

.launcher-content {
  background: transparent;
  border-radius: 0;
  padding: 0 0 100px 0; /* Add bottom padding for comfortable scrolling */
  max-width: 100%;
  width: 100%;
  max-height: none; /* Remove max-height to allow scrolling */
  min-height: min-content; /* Ensure content determines height */
  overflow-y: visible;
  box-shadow: none;
  animation: launcherSlideIn 0.3s ease-out;
}

.launcher-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  width: 100%;
  max-width: none;
  position: relative;
  justify-content: center;
}

.launcher-search-bar {
  width: 500px;
  max-width: 500px;
  min-width: 300px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  padding: 0 20px;
  font-size: 16px;
  color: white;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  outline: none;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.launcher-search-bar:focus {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

.launcher-search-bar::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.launcher-header h2 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.close-launcher-btn {
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-launcher-btn:hover {
  background: #ff3742;
  transform: scale(1.1);
}

.launcher-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 30px;
  max-width: 800px;
  width: 100%;
  padding: 0 40px 60px 40px; /* Add bottom padding for scrolling */
  justify-items: center;
  min-height: min-content; /* Allow content to determine height */
}

.launcher-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 15px;
  border-radius: 15px;
  background: transparent;
  border: none;
}

.launcher-icon:hover {
  transform: scale(1.1);
}

.launcher-icon img {
  width: 72px; /* Default size for desktop */
  height: 72px;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.launcher-icon span {
  color: rgba(156, 163, 175, 0.9); /* Gray-400 with slight transparency - visible on both dark and light backgrounds */
  font-size: 15px; /* Default size for desktop */
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  max-width: 120px;
  line-height: 1.2;
}

/* Mobile: Make launcher icons slightly bigger (1.25x) */
@media (max-width: 768px) {
  .launcher-icon img {
    width: 90px !important; /* 72px * 1.25 = 90px */
    height: 90px !important;
    border-radius: 15px !important; /* Proportionally larger */
    margin-bottom: 10px !important; /* Proportionally larger */
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.23) !important; /* Slightly more pronounced */
  }
  
  .launcher-icon span {
    font-size: 16px !important; /* 15px * 1.07 for better readability */
    max-width: 130px !important; /* More space for text */
  }
  
  .launcher-icon {
    padding: 16px !important; /* More padding for touch-friendly */
  }
  
  .launcher-icons {
    gap: 28px !important; /* More gap between icons */
  }
}

/* =========================================================================
   INVITE PAGE STYLING
   ========================================================================= */

.invite-content {
  padding: 30px;
  max-width: 700px;
  margin: 0 auto;
}

.invite-header {
  text-align: center;
  margin-bottom: 20px; /* Reduced from 40px */
}

.invite-header h2 {
  color: #1f2937;
  font-size: 28px;
  margin: 0 0 4px 0; /* Reduced from 8px */
  font-weight: 700;
}

.invite-header p {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.invite-qr-section,
.invite-link-section,
.invite-share-options {
  margin-bottom: 35px;
}

.invite-qr-section h3,
.invite-link-section h3,
.invite-share-options h3 {
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  width: fit-content;
  margin: 0 auto;
}

#qrCodeCanvas {
  display: block;
  border-radius: 8px;
}

.share-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.launcher-close-btn {
  display: none !important; /* Hide the X button completely - we use dock back button instead */
}

.launcher-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

@keyframes launcherFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes launcherSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive adjustments for launcher */
@media (max-width: 768px) {
  .launcher-content {
    padding: 20px;
    width: 95%;
  }
  
  .launcher-search-bar {
    width: 90%;
    max-width: 400px;
    min-width: 250px;
  }
  
  .launcher-icons {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .launcher-icon {
    padding: 15px;
  }
  
  .launcher-icon img {
    width: 50px; /* Increased from 40px */
    height: 50px; /* Increased from 40px */
  }
  
  .launcher-icon span {
    font-size: 14px; /* Increased from 12px */
  }
}

@media (min-width: 1200px) {
  .launcher-search-bar {
    width: 500px;
    max-width: 500px;
  }
}

@media (min-width: 1600px) {
  .launcher-search-bar {
    width: 600px;
    max-width: 600px;
  }
}

/* My Feed Expanded State */
/* Expanded feed layout CSS removed - will be rebuilt */

.MedWall-mini-feed.expanded-feed .mini-feed-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
}

.MedWall-mini-feed.expanded-feed .mini-feed-content {
  padding: 20px !important;
}

.MedWall-mini-feed.expanded-feed .post-item {
  margin-bottom: 25px !important;
  padding: 20px !important;
  border-radius: 12px !important;
}

.MedWall-mini-feed.expanded-feed .post-content {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ========================================================================= */
/* CREATE POST MODAL STYLES */
/* ========================================================================= */

.create-post-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-post-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.create-post-content {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 0;
  width: 90%;
  max-width: 600px;
  max-height: 70vh; /* Reduced from 80vh to 70vh */
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 10001;
}

/* Create Post Modal - Form styling with dark text on white background */
.create-post-content .form-group {
  padding: 0 20px; /* Reduced padding on sides */
  margin-bottom: 12px; /* Reduced margin between groups */
}

.create-post-content .form-group label {
  color: #1f2937 !important; /* Dark text for labels */
  font-size: 13px; /* Slightly smaller font */
  font-weight: 600;
  margin-bottom: 6px; /* Reduced margin */
  display: block;
}

.create-post-content .form-group input,
.create-post-content .form-group textarea,
.create-post-content .form-group select {
  background: white !important;
  color: #1f2937 !important; /* Dark text for inputs */
  border: 1px solid #d1d5db !important;
  padding: 10px; /* Reduced padding */
  font-size: 13px; /* Slightly smaller font */
  border-radius: 6px; /* Slightly smaller radius */
  width: 100%;
}

.create-post-content .form-group textarea {
  min-height: 80px; /* Reduced minimum height */
  resize: vertical;
}

.create-post-content .form-group input::placeholder,
.create-post-content .form-group textarea::placeholder {
  color: #9ca3af !important; /* Light gray placeholder */
}

.create-post-content .form-group input:focus,
.create-post-content .form-group textarea:focus,
.create-post-content .form-group select:focus {
  outline: none;
  border-color: #3b5998 !important;
  box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.1); /* Reduced shadow */
}

.create-post-content .form-actions {
  padding: 0 20px 16px 20px; /* Reduced padding */
}

.create-post-content form {
  padding-top: 12px; /* Reduced top spacing */
}

.create-post-content .post-type-options label,
.create-post-content .radio-option,
.create-post-content .checkbox-option {
  color: #1f2937 !important; /* Dark text for radio/checkbox labels */
}

.create-post-content small,
.create-post-content .disclaimer {
  color: #6b7280 !important; /* Gray text for small text */
}

.create-post-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
  border-radius: 12px 12px 0 0;
}

.create-post-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.close-create-post-btn {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-create-post-btn:hover {
  background: #e5e7eb;
  color: #1f2937;
}

#createPostForm {
  padding: 24px;
}

#createPostForm .form-group {
  margin-bottom: 20px;
}

#createPostForm label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

#createPostForm textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

#createPostForm textarea:focus {
  outline: none;
  border-color: #3b5998;
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.1);
}

.post-type-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.radio-option:hover {
  border-color: #3b5998;
  background: #eff6ff;
}

.radio-option input[type="radio"] {
  margin-right: 8px;
}

.radio-option input[type="radio"]:checked + span {
  font-weight: 600;
  color: #ffffff;
}

.radio-option:has(input:checked) {
  border-color: #3b5998;
  background: #eff6ff;
}

#createPostForm input[type="file"] {
  padding: 8px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

#createPostForm input[type="file"]:hover {
  border-color: #3b5998;
  background: #f9fafb;
}

.image-preview {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview img {
  max-width: 100%;
  height: auto;
  display: block;
}

#createPostForm small {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* ========================================================================= */
/* POST CARD STYLES */
/* ========================================================================= */

.post-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-header {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.author-info {
  flex: 1;
}

.author-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 15px;
}

.post-time {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

.post-content {
  padding: 16px;
}

.post-content p {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.5;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 12px;
}

.post-file {
  background: #f3f4f6;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #374151;
  margin-top: 12px;
}

.post-actions {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 8px;
}

.post-action-btn {
  flex: 1;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.post-action-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Mini feed item styles */
.mini-feed-item {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 11px;
  line-height: 1.4;
}

.mini-feed-item:last-child {
  border-bottom: none;
}

.mini-feed-item-content {
  color: #1f2937;
  margin-bottom: 4px;
}

.mini-feed-item-content strong {
  color: #3b5998;
  font-weight: bold;
}

.mini-feed-item-time {
  color: #6b7280;
  font-size: 10px;
}

/* No posts message */
.no-posts-message {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
}

/* =========================================================================
   POST MANAGEMENT STYLES
   ========================================================================= */

/* Post delete button */
.post-delete-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin-left: auto;
}

.post-delete-btn:hover {
  background: #f3f4f6;
  color: #ef4444;
}

.post-delete-btn:active {
  background: #fee2e2;
}

/* =========================================================================
   PRIVACY SETTINGS STYLES
   ========================================================================= */

.privacy-settings {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.privacy-header {
  margin-bottom: 30px;
  text-align: center;
}

.privacy-header h4 {
  color: #1f2937;
  margin: 0 0 8px 0;
  font-size: 24px;
}

.privacy-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.setting-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.setting-section h5 {
  color: #1f2937;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item label {
  color: #374151;
  font-weight: 500;
  min-width: 150px;
}

.setting-item span {
  color: #6b7280;
  flex: 1;
  margin: 0 16px;
}

.setting-item select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  color: #374151;
  font-size: 14px;
}

.block-user-section {
  margin-bottom: 20px;
}

.block-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.blocked-users-list {
  max-height: 300px;
  overflow-y: auto;
}

.blocked-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  margin-bottom: 8px;
}

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

.user-email {
  font-weight: 500;
  color: #1f2937;
}

.block-date {
  font-size: 12px;
  color: #6b7280;
}

.unblock-btn {
  padding: 6px 12px;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.unblock-btn:hover {
  background: #059669;
}

/* =========================================================================
   ACCOUNT SETTINGS STYLES
   ========================================================================= */

.account-settings {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.account-header {
  margin-bottom: 30px;
  text-align: center;
}

.account-header h4 {
  color: #1f2937;
  margin: 0 0 8px 0;
  font-size: 24px;
}

.account-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.edit-btn {
  padding: 6px 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.edit-btn:hover {
  background: #2563eb;
}

.logout-btn {
  padding: 8px 16px;
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.logout-btn:hover {
  background: #4b5563;
}

.danger-btn {
  padding: 8px 16px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.danger-btn:hover {
  background: #dc2626;
}

.danger-zone {
  border: 2px solid #fecaca;
  background: #fef2f2;
}

.danger-zone h5 {
  color: #dc2626;
}

/* =========================================================================
   FACEBOOK-STYLE PROFILE COLUMN STYLES
   ========================================================================= */

/* Mutual Friends Section */
.mutual-friends-section {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mutual-friends-header {
  margin-bottom: 12px;
}

.mutual-friends-title {
  font-weight: bold;
  color: #1f2937;
  font-size: 14px;
}

.mutual-friends-count {
  color: #6b7280;
  font-size: 12px;
  margin-left: 8px;
}

.mutual-friends-list {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.mutual-friend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mutual-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.mutual-friend-name {
  font-size: 11px;
  color: #3b5998;
  font-weight: 500;
}

.see-all-link {
  color: #3b5998;
  font-size: 12px;
  text-decoration: none;
}

.see-all-link:hover {
  text-decoration: underline;
}

/* Profile Information Styles */
.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  min-width: 120px;
  color: #374151;
  font-weight: 500;
  font-size: 13px;
}

.info-value {
  color: #3b5998;
  font-size: 13px;
  flex: 1;
}

.info-subsection h6 {
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* Activity Items */
.activity-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 0;
}

.activity-icon {
  margin-right: 8px;
  font-size: 14px;
}

.activity-text {
  flex: 1;
  color: #374151;
  font-size: 13px;
}

.activity-time {
  color: #6b7280;
  font-size: 11px;
  margin-right: 8px;
}

.activity-delete {
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.activity-delete:hover {
  color: #ef4444;
}

.see-more-link {
  color: #3b5998;
  font-size: 12px;
  text-decoration: none;
  margin-top: 8px;
  display: block;
}

.see-more-link:hover {
  text-decoration: underline;
}

/* =========================================================================
   BACKUP & RECOVERY MODAL STYLES
   ========================================================================= */

.recovery-modal-overlay,
.backup-history-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.recovery-modal,
.backup-history-modal {
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.recovery-modal h3,
.backup-history-modal h3 {
  margin: 0 0 20px 0;
  color: #1f2937;
  font-size: 20px;
}

.recovery-modal ul,
.backup-history-modal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.recovery-modal li,
.backup-history-modal li {
  margin-bottom: 10px;
}

.recovery-modal button,
.backup-history-modal button {
  width: 100%;
  padding: 12px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.recovery-modal button:hover,
.backup-history-modal button:hover {
  background: #2563eb;
}

.backup-history-modal h4 {
  color: #374151;
  font-size: 16px;
  margin: 20px 0 10px 0;
}

.backup-history-modal li {
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  color: #374151;
  font-size: 13px;
}

.no-posts-message p {
  margin: 0;
  font-size: 14px;
}

/* =========================================================================
   PROFILE SEARCH AREA STYLES
   ========================================================================= */

.profile-search-area {
  margin: 0;
  padding: 6px;
  background: white;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #d3d6db;
}

.profile-search-container {
  position: relative;
}

.profile-search-container .nav-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 24px; /* Pill shape with rounded corners */
  font-size: 11px;
  background: #f9fafb;
  transition: all 0.2s ease;
  cursor: text;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.profile-search-container .nav-search-input:focus {
  outline: none;
  border-color: #3b5998;
  background: white;
  box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.1);
}

/* =========================================================================
   PROFILE NAVIGATION LINKS STYLES
   ========================================================================= */

.profile-nav-links {
  margin: 0;
  padding: 0;
  background: white;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

.profile-nav-links .nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px; /* Increased vertical padding for better size */
  margin: 0;
  color: #3b5998 !important; /* Blue color */
  text-decoration: none;
  border-radius: 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s ease;
  font-weight: normal;
  font-size: 11px;
  font-family: Arial, sans-serif;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 100;
  min-height: 24px;
  user-select: none;
}

.profile-nav-links .nav-link:hover {
  background: #f0f2f5;
  color: #3b5998;
}

.profile-nav-links .nav-link-text {
  color: #3b5998 !important; /* Blue color */
  font-weight: 500;
}

/* Ultra-specific rules to override .btn color */
.profile-nav-links .nav-link.btn,
.profile-nav-links .nav-link-text.btn,
.profile-nav-links .nav-link a.btn,
.profile-nav-links a.nav-link.btn,
.profile-nav-links .nav-link,
.profile-nav-links .nav-link-text,
.profile-nav-links a.nav-link,
.profile-nav-links a.nav-link-text {
  color: #3b5998 !important; /* Force blue color */
}

/* Even more specific rules for MedX Wall overlay */
#medWallOverlay .profile-nav-links .nav-link,
#medWallOverlay .profile-nav-links .nav-link-text,
.modal-overlay#medWallOverlay .profile-nav-links .nav-link,
.modal-overlay#medWallOverlay .profile-nav-links .nav-link-text {
  color: #3b5998 !important; /* Force blue color */
}

.profile-nav-links .nav-link-edit {
  color: #6b7280;
  font-size: 12px;
  font-weight: normal;
}

.profile-nav-links .master-admin-link {
  background: transparent;
  color: #3b5998;
  font-weight: normal;
}

.profile-nav-links .master-admin-link:hover {
  background: #f0f2f5;
  color: #3b5998;
}

.profile-nav-links .master-admin-link .nav-link-text {
  color: #3b5998;
}

/* =========================================================================
   MASTER ADMIN STYLES
   ========================================================================= */

.master-admin-link {
  background: transparent !important;
  color: #3b5998 !important;
  font-weight: normal !important;
}

.master-admin-link:hover {
  background: #f0f2f5 !important;
}

.master-admin-panel {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.admin-header {
  margin-bottom: 30px;
  text-align: center;
}

.admin-header h4 {
  color: #1f2937;
  margin: 0 0 8px 0;
  font-size: 24px;
}

.admin-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.admin-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin-section h5 {
  color: #1f2937;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
}

.admin-search-section {
  margin-bottom: 20px;
}

.admin-search-container {
  margin-bottom: 20px;
}

.admin-search-results {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  background: #f9fafb;
}

.admin-user-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

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

.admin-user-item .user-info strong {
  color: #1f2937;
  font-size: 14px;
}

.admin-user-item .user-email {
  color: #6b7280;
  font-size: 12px;
}

.admin-user-item .user-school {
  color: #9ca3af;
  font-size: 11px;
}

.admin-user-item .user-actions {
  display: flex;
  gap: 8px;
}

.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.admin-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.admin-action-item label {
  min-width: 150px;
  color: #374151;
  font-weight: 500;
  font-size: 13px;
}

.admin-action-item span {
  flex: 1;
  color: #6b7280;
  font-size: 13px;
}

.admin-action-item input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
}

.admin-action-item button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.warning-btn {
  background: #f59e0b;
  color: white;
}

.warning-btn:hover {
  background: #d97706;
}

.secondary-btn {
  background: #6b7280;
  color: white;
}

.secondary-btn:hover {
  background: #4b5563;
}

.admin-system-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.admin-access-denied {
  text-align: center;
  padding: 40px 20px;
  color: #dc2626;
}

.admin-access-denied h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
}

.admin-access-denied p {
  margin: 0;
  font-size: 14px;
}

/* =========================================================================
   ADMIN MODAL STYLES
   ========================================================================= */

.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.admin-modal {
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.admin-modal h3 {
  margin: 0 0 20px 0;
  color: #1f2937;
  font-size: 20px;
}

.backup-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.backup-info h4 {
  color: #374151;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.backup-info ul {
  margin: 0;
  padding-left: 20px;
  color: #6b7280;
  font-size: 13px;
}

.backup-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.backup-setting {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.backup-setting label {
  color: #374151;
  font-weight: 500;
  font-size: 13px;
}

.backup-setting select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
}

.backup-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.security-logs {
  max-height: 400px;
  overflow-y: auto;
}

.security-log-item {
  margin-bottom: 15px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.log-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.log-type {
  color: #dc2626;
  font-weight: 600;
  font-size: 13px;
}

.log-time {
  color: #6b7280;
  font-size: 12px;
}

.log-details pre {
  margin: 0;
  font-size: 11px;
  color: #374151;
  background: white;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
}

.system-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.stat-item label {
  color: #374151;
  font-weight: 500;
  font-size: 13px;
}

.stat-item span {
  color: #1f2937;
  font-weight: 600;
  font-size: 13px;
}

/* Facebook Create Post Button */
.facebook-create-post-section {
  padding: 12px;
  border-bottom: 1px solid #d3d6db;
  background: white;
  pointer-events: auto !important;
  position: relative;
  z-index: 100;
}

.facebook-create-post-btn {
  width: auto; /* Auto width instead of 100% */
  max-width: 90%; /* Increased from 80% - bigger horizontally */
  min-width: 240px; /* Increased from 200px - bigger minimum width */
  padding: 12px 32px; /* Increased from 10px 24px - more padding */
  background: #3b5998; /* Same blue as page header */
  color: white;
  border: none;
  border-radius: 25px; /* Pill shape */
  font-size: 15px; /* Increased from 13px - bigger font */
  font-weight: 600;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  position: relative !important;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: block; /* Block display for centering */
  margin: 0 auto; /* Center horizontally */
}

.facebook-create-post-btn:hover {
  background: #2c4a7a; /* Darker blue on hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.facebook-create-post-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Notification Toggle Button */
.toggle-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.toggle-btn {
  background: #e5e7eb !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  color: #6b7280 !important;
  min-width: 50px !important;
  text-align: center !important;
}

.toggle-btn.active {
  background: #3b5998 !important;
  color: white !important;
}

.toggle-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================================= */
/* PROFILE COLUMN COLLAPSE BUTTON & ANIMATIONS */
/* ========================================================================= */

/* Vertical collapse button - always stays on left side */
.profile-collapse-button {
  position: fixed;
  left: 1px !important; /* Very close to left edge of window */
  top: 72px; /* Below header */
  width: 20px;
  height: calc(100vh - 72px); /* Full viewport height minus header */
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  backdrop-filter: blur(10px); /* Blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border: 1px solid rgba(211, 214, 219, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: grab; /* Show grab cursor to indicate draggable */
  z-index: 500 !important; /* Below auth forms (10005) but above normal content */
  padding: 0;
  display: none !important; /* Hidden by default - only show when logged in */
  visibility: hidden !important; /* Hidden by default */
  pointer-events: none !important; /* Not clickable by default */
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Don't shrink */
  transition: border-color 0.2s, background 0.2s; /* Hover effects only */
}

/* Hide collapse button when overlay is open but user NOT logged in */
#medWallOverlay:not(.logged-in) .profile-collapse-button,
.modal-overlay:not(.logged-in) .profile-collapse-button,
#medWallOverlay.active:not(.logged-in) .profile-collapse-button {
  display: none !important; /* Hidden when NOT logged in */
  visibility: hidden !important; /* Hidden when NOT logged in */
  pointer-events: none !important; /* Not clickable when NOT logged in */
}

/* Show collapse button only when logged in */
#medWallOverlay.logged-in .profile-collapse-button,
.modal-overlay.logged-in .profile-collapse-button {
  display: flex !important; /* Show when logged in */
  visibility: visible !important; /* Visible when logged in */
  pointer-events: auto !important; /* Clickable when logged in */
}

.profile-collapse-button:hover {
  border-color: #3b5998;
  background: rgba(247, 249, 252, 0.9);
  cursor: grab; /* Show grab cursor on hover */
}

.profile-collapse-button:active {
  cursor: grabbing; /* Show grabbing cursor when dragging */
}

/* Arrow inside the button - positioned at viewport center, not button center */
.collapse-arrow {
  position: absolute;
  font-size: 20px;
  color: #3b5998;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
  /* Vertical position will be set dynamically via JavaScript */
  transform: translateY(-50%); /* Center the arrow on its position */
  transition: transform 0.2s;
}

/* Profile column collapse animations - transition already defined in main .MedWall-profile-content declaration above */
/* Removed duplicate to avoid conflicts */

/* When collapsed, move profile column off-screen to the left */
.modal-overlay#medWallOverlay .MedWall-profile-content.collapsed,
#medWallOverlay .MedWall-profile-content.collapsed,
.MedWall-profile-content.collapsed {
  margin-left: -325px !important; /* Move entire width + 5px margin to fully hide (320px + 5px) */
  margin-right: 7px !important; /* Keep same gap when collapsed */
  opacity: 0 !important;
  pointer-events: none !important;
  width: 320px !important; /* Maintain width for proper calculation */
}

/* Mini-feed and content columns naturally follow because they're in flexbox */
.MedWall-mini-feed {
  transition: all 0.3s ease-in-out;
}

.MedWall-content-column {
  transition: all 0.3s ease-in-out;
}

/* When collapsed, columns automatically shift left and get more space */
.modal-overlay#medWallOverlay .MedWall-profile-page.profile-collapsed .MedWall-mini-feed,
#medWallOverlay .MedWall-profile-page.profile-collapsed .MedWall-mini-feed,
.MedWall-profile-page.profile-collapsed .MedWall-mini-feed {
  /* Flexbox automatically shifts left as profile moves out */
  flex-grow: 1; /* Expand to fill available space */
  margin-left: 12px !important; /* Add left margin when profile is collapsed for proper spacing */
}

.modal-overlay#medWallOverlay .MedWall-profile-page.profile-collapsed .MedWall-content-column,
#medWallOverlay .MedWall-profile-page.profile-collapsed .MedWall-content-column,
.MedWall-profile-page.profile-collapsed .MedWall-content-column {
  /* Flexbox automatically shifts left as profile moves out */
  flex-grow: 1; /* Expand to fill available space */
  margin-left: 12px !important; /* Add left margin when profile is collapsed for proper spacing */
}

/* Swipe gesture visual feedback */
.MedWall-profile-page.swiping {
  user-select: none;
  -webkit-user-select: none;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .profile-collapse-button {
    width: 15px; /* Slightly thinner on mobile */
  }
  
  .collapse-arrow {
    font-size: 16px;
  }
}

/* ========================================================================= */
/* SECTION COLLAPSE/EXPAND ANIMATIONS */
/* ========================================================================= */

/* Animate section content when collapsing/expanding */
.section-content,
.profile-section .section-content {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out, margin 0.3s ease-in-out !important;
  overflow: hidden;
}

/* Mini-feed sections animation */
.mini-feed-section,
.weekly-events-grid,
#weeklyEventsGrid {
  overflow: hidden;
}