/* ===========================================
   REELS-STYLE COMMENT SECTION
   Light pink bg, no bubbles, inline text
   =========================================== */

/* --- Modal Overlay --- */
.comment-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.comment-modal-overlay.open {
  display: flex;
  opacity: 1;
}

/* --- Modal Panel --- */
.comment-modal-panel {
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  background: #FFF0F3;
}
.comment-modal-overlay.open .comment-modal-panel {
  transform: translateY(0);
}

/* --- Grabber --- */
.comment-modal-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #ccc;
  margin: 8px auto 0;
  flex-shrink: 0;
}

/* --- Header --- */
.comment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  flex-shrink: 0;
  background: #FFF0F3;
}
.comment-modal-title { font-weight: 600; font-size: 1rem; color: #000; }
.comment-modal-close {
  background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: #000; padding: 0 4px; line-height: 1;
}

/* --- Scrollable Body (modal) --- */
.comment-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  background: #FFF0F3;
}

/* --- Inline comment list (feed) --- */
.comments-section {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #FFF0F3;
  color: #000;
}
.comments-section .comment-list {
  max-height: 400px;
  overflow-y: auto;
}

/* ===========================================
   COMMENT ITEM — same structure for modal & feed
   =========================================== */
.comment-modal-body .comment-item,
.comments-section .comment-item {
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  background: #FFF0F3;
}

/* Avatar — 32px circular */
.comment-modal-body .comment-avatar,
.comments-section .comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Content column */
.comment-modal-body .comment-body,
.comments-section .comment-body {
  flex: 1;
  min-width: 0;
}

/* Username bold + text inline */
.comment-modal-body .comment-username,
.comments-section .comment-username {
  font-weight: 600;
  font-size: 13px;
  color: #000;
  margin-right: 6px;
}
.comment-modal-body .comment-text,
.comments-section .comment-text {
  font-size: 13px;
  color: #000;
  display: inline;
  word-break: break-word;
}

/* Timestamp below */
.comment-modal-body .comment-time,
.comments-section .comment-time {
  display: block;
  font-size: 11px;
  color: #8e8e8e;
  margin-top: 2px;
}

/* Action buttons row (Reply, Delete) */
.comment-modal-body .comment-actions,
.comments-section .comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
.comment-modal-body .comment-actions button,
.comments-section .comment-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #8e8e8e;
  padding: 0;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
}
.comment-modal-body .comment-actions button:hover,
.comments-section .comment-actions button:hover {
  color: #000;
}

/* Heart like button */
.comment-modal-body .comment-like-btn,
.comments-section .comment-like-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #8e8e8e;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-family: inherit;
  line-height: 1;
}
.comment-modal-body .comment-like-btn i,
.comments-section .comment-like-btn i {
  font-size: 12px;
  color: #8e8e8e;
}
.comment-modal-body .comment-like-btn.liked i,
.comments-section .comment-like-btn.liked i {
  color: #000;
}
.comment-modal-body .comment-like-btn span,
.comments-section .comment-like-btn span {
  font-size: 11px;
  color: #8e8e8e;
}

/* ===========================================
   THREADED REPLIES
   =========================================== */
.comment-modal-body .replies-wrap,
.comments-section .replies-wrap {
  margin-top: 2px;
  padding-left: 50px;
}
.comment-modal-body .reply-item,
.comments-section .reply-item {
  display: flex;
  gap: 8px;
  padding: 6px 0;
}
.comment-modal-body .reply-avatar,
.comments-section .reply-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.comment-modal-body .reply-body,
.comments-section .reply-body {
  flex: 1;
  min-width: 0;
}
.comment-modal-body .reply-username,
.comments-section .reply-username {
  font-weight: 600;
  font-size: 12px;
  color: #000;
  margin-right: 4px;
}
.comment-modal-body .reply-replied-to,
.comments-section .reply-replied-to {
  font-size: 11px;
  color: #8e8e8e;
  margin-right: 4px;
}
.comment-modal-body .reply-text,
.comments-section .reply-text {
  font-size: 12px;
  color: #000;
  display: inline;
  word-break: break-word;
}
.comment-modal-body .reply-time,
.comments-section .reply-time {
  font-size: 10px;
  color: #8e8e8e;
  display: block;
  margin-top: 1px;
}

/* ===========================================
   BOTTOM INPUT BAR
   =========================================== */
.comment-modal-footer {
  flex-shrink: 0;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #FFF0F3;
}
.comment-modal-footer .comment-form {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 24px;
  padding: 0 4px 0 14px;
  transition: border-color 0.2s;
}
.comment-modal-footer .comment-form:focus-within {
  border-color: #000;
}
.comment-modal-footer .comment-input {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 10px 0;
  font-size: 14px;
  outline: none;
  background: transparent;
  color: #000;
  caret-color: #000;
  font-family: inherit;
}
.comment-modal-footer .comment-input::placeholder { color: #8e8e8e; }
.comment-modal-footer .comment-input:-webkit-autofill,
.comment-modal-footer .comment-input:-webkit-autofill:hover,
.comment-modal-footer .comment-input:-webkit-autofill:focus,
.comment-modal-footer .comment-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  caret-color: #000 !important;
}
.comment-modal-footer .comment-form button {
  background: none;
  color: #000;
  border: none;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: none;
  font-family: inherit;
  line-height: 1.2;
}
.comment-modal-footer .comment-form button.show {
  display: inline-block;
}

/* ===========================================
   GLOBAL REPLY FORM
   =========================================== */
#global-reply-form {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px 42px;
  margin-top: 4px;
  background: transparent;
}
#global-reply-form input {
  flex: 1;
  border: 1.5px solid #ccc;
  border-radius: 20px;
  background: #fff;
  color: #000;
  padding: 7px 12px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
#global-reply-form input::placeholder { color: #8e8e8e; }
#global-reply-form input:-webkit-autofill,
#global-reply-form input:-webkit-autofill:hover,
#global-reply-form input:-webkit-autofill:focus,
#global-reply-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  caret-color: #000 !important;
}
#global-reply-form button {
  background: none;
  color: #000;
  border: none;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

/* ===========================================
   MODAL LOADING
   =========================================== */
.modal-loading {
  text-align: center;
  padding: 40px 0;
  color: #8e8e8e;
  font-size: 14px;
  background: #FFF0F3;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 480px) {
  .comment-modal-panel { max-height: 92vh; border-radius: 12px 12px 0 0; }
}