/* Mobile Bottom Sheet Comment Styles */

/* Ensure sheet and overlay are on top of everything */
[data-comment-sheet-target="overlay"] {
  z-index: 99998 !important;
  pointer-events: auto !important;
}

[data-comment-sheet-target="sheet"] {
  z-index: 99999 !important;
  background-color: white !important;
  min-height: 400px !important;
  display: block !important;
}

/* When sheet is visible (not hidden) */
[data-comment-sheet-target="sheet"]:not(.hidden) {
  display: block !important;
}

/* Transform transition */
[data-comment-sheet-target="sheet"].translate-y-full {
  transform: translateY(100%) !important;
}

[data-comment-sheet-target="sheet"]:not(.translate-y-full) {
  transform: translateY(0) !important;
}

/* Line clamp utility for truncating text */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom sheet animations */
@media (max-width: 767px) {
  /* Ensure mobile sheet elements are properly styled */
  [data-comment-sheet-target="sheet"] {
    touch-action: pan-y;
  }
  
  /* Smooth overlay fade */
  [data-comment-sheet-target="overlay"] {
    transition: opacity 300ms ease-out;
  }
  
  /* Smooth sheet slide */
  [data-comment-sheet-target="sheet"] {
    transition: transform 300ms ease-out;
  }
  
  /* When dragging, remove transition for smooth follow */
  [data-comment-sheet-target="sheet"].dragging {
    transition: none !important;
  }
  
  /* Improve textarea experience in sheet */
  [data-comment-sheet-target="content"] textarea {
    min-height: 120px;
    max-height: 500px; /* Allow more expansion on mobile */
    font-size: 16px; /* Prevent iOS zoom on focus */
    transition: height 0.15s ease;
    overflow-y: hidden; /* Will switch to auto when needed */
  }
  
  /* Ensure sheet content area can grow */
  [data-comment-sheet-target="sheet"] .overflow-y-auto {
    max-height: calc(90vh - 180px); /* Account for handle, header, and buttons */
  }
  
  /* Mobile-optimized button sizes */
  [data-comment-sheet-target="sheet"] button {
    min-height: 48px; /* Better touch targets */
  }
  
  /* Handle visual feedback */
  [data-comment-sheet-target="handle"]:active {
    opacity: 0.7;
  }
  
  /* Ensure sheet content doesn't overflow */
  [data-comment-sheet-target="sheet"] .overflow-y-auto {
    overscroll-behavior: contain;
  }
}

/* Desktop: hide all mobile-specific elements */
@media (min-width: 768px) {
  [data-comment-sheet-target="trigger"],
  [data-comment-sheet-target="overlay"],
  [data-comment-sheet-target="sheet"] {
    display: none !important;
  }
  
  [data-comment-sheet-target="content"] {
    display: block !important;
  }
}

/* Prevent body scroll when sheet is open (mobile only) */
@media (max-width: 767px) {
  body.sheet-open {
    overflow: hidden;
  }
}

/* Reply context styling */
[data-comment-sheet-target="replyContext"] {
  background: linear-gradient(to right, rgba(179, 155, 99, 0.05), transparent);
}

/* Smooth transition for all interactive elements */
[data-comment-sheet-target="sheet"] .transition-colors {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* Gold accent for lavish feel */
[data-comment-sheet-target="sheet"] .border-l-4 {
  border-left-color: #B39B63;
}

/* Improve shadow for depth */
[data-comment-sheet-target="sheet"] {
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Enhanced backdrop blur for overlay */
[data-comment-sheet-target="overlay"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Smooth handle dragging */
[data-comment-sheet-target="sheet"].dragging {
  transition: none !important;
  will-change: transform;
}

[data-comment-sheet-target="handle"] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}