/* The mobile comment sheet: a retro panel that slides up from the bottom edge.
   comment-sheet (the Stimulus controller) toggles `hidden`, `translate-y-full` and the
   overlay's opacity classes; these rules only decide what those states look like.
   The chrome itself (.comment-sheet__*) lives in comments.css. */

[data-comment-sheet-target="overlay"] {
  z-index: 99998 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

[data-comment-sheet-target="sheet"] {
  z-index: 99999 !important;
  background-color: var(--shelf-window, #fff) !important;
  min-height: 400px !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 0 var(--shelf-ink, #1a1a1a) !important;
}

[data-comment-sheet-target="sheet"]:not(.hidden) { display: block !important; }
[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-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  [data-comment-sheet-target="sheet"] { touch-action: pan-y; transition: transform 300ms ease-out; }
  [data-comment-sheet-target="overlay"] { transition: opacity 300ms ease-out; }
  [data-comment-sheet-target="sheet"].dragging { transition: none !important; will-change: transform; }

  [data-comment-sheet-target="content"] textarea {
    min-height: 120px;
    max-height: 500px;
    font-size: 16px; /* keeps iOS from zooming the page on focus */
    transition: height 0.15s ease;
    overflow-y: hidden;
  }

  [data-comment-sheet-target="contentArea"] { max-height: calc(90vh - 180px); overscroll-behavior: contain; }
  [data-comment-sheet-target="sheet"] .comment-sheet__actions .retro-btn { min-height: 48px; }
  [data-comment-sheet-target="handle"]:active { opacity: 0.7; }

  body.sheet-open { overflow: hidden; }
}

/* Desktop: the sheet never shows; the inline composer does. */
@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; }
}

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