/* ============================================================================
   AbiiApp Comments Bottom Sheet — Instagram-style. Wraps WoWonder's existing
   comment list/input (#post-comments-{id}, unchanged markup/AJAX/JS) with new
   sheet chrome instead of the old inline-expand-in-feed or full-page-navigate
   behavior. See Wo_OpenCommentsSheet/Wo_CloseCommentsSheet in script.js.
   ========================================================================== */

.abii-comments-sheet {
  position: fixed;
  inset: 0;
  /* Above the page's own floating widgets (an unrelated third-party-style bubble on this
     site currently sits at z-index 99999) so a full-screen sheet always wins, without
     needing to know what every other floating element on the page is. */
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--abii-t-med, 250ms) var(--abii-ease, ease);
}
.abii-comments-sheet.open { opacity: 1; pointer-events: auto; }
.abii-comments-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.abii-comments-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--abii-surface, #101114);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--abii-t-med, 250ms) var(--abii-ease, ease);
  box-shadow: 0 -8px 32px rgba(0,0,0,.3);
}
.abii-comments-sheet.open .abii-comments-sheet__panel { transform: translateY(0); }
.abii-comments-sheet__drag {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  flex: 0 0 auto;
  cursor: pointer;
}
.abii-comments-sheet__drag span {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--abii-line, rgba(255,255,255,.25));
}
.abii-comments-sheet__title {
  flex: 0 0 auto;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--abii-ink, #E7E9EA);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--abii-line, rgba(255,255,255,.12));
}
.abii-comments-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* The relocated #post-comments-{id} panel: strip its old feed-inline framing,
   it's the whole sheet body now. */
.abii-comments-sheet__body .post-comments {
  display: block !important;
  padding: 8px 16px 12px;
}
.abii-comments-sheet__body .post-comments.hidden { display: block !important; }

/* The stock comment-bubble rule in style.css is scoped ".post .post-footer .comments-list
   .comment .tag_comm_body .comment-text" — an ancestor chain that requires a .post wrapper.
   Relocating the comment panel into the sheet (a sibling of .post, not a descendant) breaks
   that selector's match entirely, so border-radius/padding/width all silently drop to 0.
   Restated independently here rather than fighting to keep the old ancestor chain intact. */
.abii-comments-sheet__body .tag_comm_body .comment-text {
  border-radius: 18px;
  background-color: var(--abii-surface-2, #1C1F24);
  padding: 7px 12px;
  width: max-content;
  max-width: 100%;
  margin-right: 7px;
}
.abii-comments-sheet__body .tag_comm_body .comment-text:empty { padding: 0; margin: 0; }

/* More of the same broken-ancestor-chain fallout (see .comment-text above): the avatar is
   float:left (.pull-left) and .comment-body's 45px margin-left, which clears it, was also
   scoped under .post — without it the text sits underneath/overlapping the avatar instead of
   beside it. Same for the reply-thread indent and the Like/Reply/time row's alignment. */
.abii-comments-sheet__body .comment-body { margin-left: 45px; }
.abii-comments-sheet__body .reply .comment-body { margin-left: 38px; }
.abii-comments-sheet__body .comment-options {
  margin: 3px -15px 0 -60px;
  padding: 0 15px 0 60px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Comment rows: avatar left, text middle, heart+count on the right
   (IG layout), instead of the stock "Like · Reply · time" text-only row. ---- */
.abii-comments-sheet__body .comment-container {
  position: relative;
  padding-right: 40px;
  padding-top: 4px;
  padding-bottom: 4px;
}
/* Edit/delete (own comments only): stock behavior is hover-to-reveal (desktop mouse only,
   scoped under the same broken .post ancestor chain so it was permanently visible instead).
   There is no hover on touch, so give it a tap-to-reveal toggle instead: hidden until the
   comment row itself is tapped, matching how a kebab-menu reveal would behave, without
   building a whole new menu component for two icons. */
.abii-comments-sheet__body .comment_edele_options {
  position: absolute;
  top: 34px;
  right: 2px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--abii-t-fast, 150ms) ease;
}
.abii-comments-sheet__body .comment-container.abii-show-options .comment_edele_options {
  opacity: .6;
  pointer-events: auto;
}
.abii-comments-sheet__body .comment_edele_options .comment-icons,
.abii-comments-sheet__body .comment_edele_options > span {
  width: 20px;
  height: 20px;
}
.abii-comments-sheet__body .comment_edele_options svg { width: 14px !important; height: 14px !important; }
.abii-comments-sheet__body .tag_comm_body_top { margin-bottom: 1px; }
.abii-comments-sheet__body .wo-reaction-comment {
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.abii-comments-sheet__body .wo-reaction-comment .like-btn-comment {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--abii-muted, #71767B);
}
.abii-comments-sheet__body .wo-reaction-comment .like-btn-comment::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: currentColor;
}
.abii-comments-sheet__body .wo-reaction-comment .like-btn-comment.active-like,
.abii-comments-sheet__body .wo-reaction-comment .active-like { color: var(--abii-brand, #C64D53); }
.abii-comments-sheet__body .wo-reaction-comment .like-btn-comment span { display: none; }
.abii-comments-sheet__body .wo-reaction-comment .reactions-box { right: 0; left: auto; }

/* ---- Quick reaction bar + input, pinned above the safe-area bottom inset ---- */
.abii-comments-sheet__quickbar {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--abii-line, rgba(255,255,255,.12));
  flex: 0 0 auto;
}
.abii-comments-sheet__quickbar span {
  font-size: 22px;
  cursor: pointer;
  transition: transform .1s ease;
}
.abii-comments-sheet__quickbar span:active { transform: scale(1.3); }

.abii-comments-sheet__body .post-commet-textarea,
.abii-comments-sheet__body .wo_comment_combo {
  padding: 8px 0;
}
.abii-comments-sheet__body .comment-textarea {
  background: var(--abii-surface-2, #1C1F24) !important;
  border: 1px solid var(--abii-line, rgba(255,255,255,.12)) !important;
  border-radius: var(--abii-r-full, 999px) !important;
  color: var(--abii-ink, #E7E9EA) !important;
}