/* Comment Modal (global)
   - Desktop: 520x600 fixed near bottom center (reduced size)
   - Mobile: full width, 60% height bottom sheet
*/

/* Threaded Comments Styling */
.niriv-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.niriv-comment-list > li {
    margin-bottom: 8px;
    margin-top: 4px;
}

/* Support nested replies at any depth */
.niriv-comment-list li {
    position: relative;
}

.niriv-comment-list .comment-reply {
    margin-top: 8px;
    position: relative;
}

/* Ensure nested lists (replies) are visible and properly nested */
.niriv-comment-list ul.children {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
    display: block !important;
}

.niriv-comment-list ul.children > li {
    margin-bottom: 8px !important;
    display: block !important;
}

/* Visual thread connector lines - removed, using border-left instead */

.niriv-comment-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: end center; /* bottom-center alignment */
  z-index: 10001; /* Above go-to-top button (9998) */
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.niriv-comment-overlay.is-open {
  opacity: 1;
}

/* Container - Clean white design */
.niriv-comment-modal {
  width: min(600px, 95vw); /* Increased from 520px to 600px and 92vw to 95vw */
  height: min(600px, 85vh); /* Reduced from 700px to 600px */
  background: #ffffff; /* Clean white background */
  color: #1d1d1f; /* Apple's text color */
  border-radius: 20px 20px 0 0; /* Increased radius for Apple style */
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04);
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.niriv-comment-overlay.is-open .niriv-comment-modal {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .niriv-comment-modal { 
    transition: transform 200ms ease, opacity 150ms ease; 
  }
  .niriv-comment-overlay { 
    transition: opacity 150ms ease; 
  }
}

/* Drag Handle - Pull down indicator */
.niriv-modal-drag-handle {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 2px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.niriv-modal-drag-handle:active {
  cursor: grabbing;
}

.niriv-modal-drag-handle::before {
  content: '';
  width: 36px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  transition: background 200ms;
}

.niriv-modal-drag-handle:hover::before {
  background: rgba(0, 0, 0, 0.3);
}

/* Header - Clean white design */
.niriv-comment-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 16px; /* Consistent padding */
  background: #ffffff; /* Clean white background */
  color: #1d1d1f; /* Dark text on white background */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Subtle border */
}

.niriv-comment-modal__title { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  color: #1d1d1f; /* Dark text */
}

.niriv-comment-modal__header h3 {
  margin: 0;
  font-size: 16px; /* Smaller header text */
  font-weight: 600; /* Apple's semibold weight */
  letter-spacing: -0.022em; /* Apple's letter spacing */
  color: #1d1d1f; /* Dark text */
}


/* Body - Clean white background */
.niriv-comment-modal__body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px 0; /* Increased horizontal padding */
  display: flex;
  flex-direction: column;
  background: #ffffff; /* Clean white background */
}

/* Comments list area - Clean styling without backgrounds */
#niriv-comment-list {
  flex: 1;
  overflow: auto;
  padding: 8px 4px 12px;
  background: #ffffff; /* Clean white background */
}
#niriv-comment-list ol { margin: 0; padding: 0; }
#niriv-comment-list ol > li { 
  list-style: none; 
  padding: 12px 6px; /* Reduced padding for tighter spacing */
  margin-bottom: 4px; /* Reduced spacing between comments */
  margin-top: 2px; /* Reduced top margin */
}
#niriv-comment-list .comment-body { 
  padding-bottom: 12px; /* Reduced bottom padding */
  border-bottom: none; 
  background: transparent; /* No background for individual comments */
  position: relative;
}

/* No separator line - clean design */

/* Comment meta and content styling - Smaller text sizes */
#niriv-comment-list .comment-meta {
  margin-bottom: 2px !important;
  font-size: 12px !important; /* Smaller meta text */
  color: #8e8e93 !important; /* Lighter color for meta */
}

#niriv-comment-list .comment-content {
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
  font-size: 15px !important; /* Comment text 15px normal */
  font-weight: normal !important;
  color: #1d1d1f !important; /* Dark text for readability */
}

/* Username styling - 12px bold (smaller) */
#niriv-comment-list h4,
#niriv-comment-list .comment-meta .comment-author,
#niriv-comment-list .font-semibold {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Reduce spacing in comment body */
#niriv-comment-list .comment-body {
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
}

/* Threaded reply styling - Instagram style, clean nested */
#niriv-comment-list .comment-reply {
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
}

/* Ensure nested replies are visible and show below parent - Instagram style */
#niriv-comment-list ul.children,
#niriv-comment-list ol.children {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 8px !important;
  display: block !important;
  width: 100% !important;
}

#niriv-comment-list ul.children > li,
#niriv-comment-list ol.children > li {
  margin-bottom: 4px !important;
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* Ensure replies appear below their parent comment - clean nesting */
#niriv-comment-list li > ul.children,
#niriv-comment-list li > ol.children {
  margin-top: 8px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  padding-top: 0 !important;
}

/* Ensure parent comment list items properly contain children */
#niriv-comment-list > li {
  position: relative;
}

#niriv-comment-list li li {
  margin-left: 0 !important;
}

/* Style for mention links in comments */
#niriv-comment-list .niriv-mention {
  color: #3b82f6 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

#niriv-comment-list .niriv-mention:hover {
  text-decoration: underline !important;
  color: #2563eb !important;
}

/* Reply and edit links positioned inline - Icon and text together */
#niriv-comment-list .comment-reply-link,
#niriv-comment-list .reply,
#niriv-comment-list .comment-edit-link,
#niriv-comment-list .niriv-edit-comment {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  margin-right: 8px !important; /* Space between reply and edit */
  color: #8e8e93 !important; /* Subtle gray color */
  text-decoration: none !important;
  font-size: 11px !important; /* Very small action text */
  font-weight: 500 !important;
  vertical-align: middle !important;
}

/* Reply icon styling - smaller and inline with edit text */
#niriv-comment-list .comment-reply-icon {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

#niriv-comment-list .comment-reply-icon i[data-lucide="message-circle"] {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 2 !important;
}

#niriv-comment-list .comment-reply-link:hover,
#niriv-comment-list .reply:hover,
#niriv-comment-list .comment-edit-link:hover {
  color: #1d1d1f !important; /* Darker on hover */
}

/* Comment like button styling - small, on the right */
#niriv-comment-list .comment-like-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#niriv-comment-list .comment-like-wrapper .niriv-like-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#niriv-comment-list .comment-like-wrapper .niriv-like-btn {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#niriv-comment-list .comment-like-wrapper .niriv-like-icon {
  width: 14px !important;
  height: 14px !important;
}

#niriv-comment-list .comment-like-wrapper .niriv-like-count {
  font-size: 10px !important;
  line-height: 1;
  color: #6b7280;
  margin: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: color 0.2s ease !important;
}

#niriv-comment-list .comment-like-wrapper .niriv-like-count:hover {
  color: #3b82f6 !important;
}

#niriv-comment-list .comment-like-wrapper .niriv-like-count.clickable {
  cursor: pointer !important;
}

/* Login prompt in modal for guests */
.niriv-comment-login-prompt {
  display: grid;
  place-items: center;
  padding: 20px;
  background: #ffffff; /* Clean white background */
}
.niriv-login-card {
  text-align: center;
  background: #ffffff; /* Clean white background */
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px; /* Apple's card radius */
  padding: 20px 24px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04);
}
.niriv-login-text { 
  color: #6d6d70; 
  margin-bottom: 12px; 
  font-size: 14px; /* Smaller text */
  line-height: 1.4;
}
.niriv-login-btn { 
  display: inline-block; 
  background: #1d1d1f; /* Dark background */
  color: #fff; 
  padding: 8px 16px; /* Smaller button */
  border-radius: 12px; 
  text-decoration: none; 
  font-size: 13px; /* Smaller button text */
  font-weight: 500;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.niriv-login-btn:hover { 
  background: #000000; /* Darker on hover */
  transform: translateY(-1px);
}

/* Composer (bottom input) - Clean white background */
.niriv-comment-modal__composer {
  position: sticky;
  bottom: 0;
  background: #ffffff; /* Clean white background */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 16px 20px; /* Restore padding since avatar is now inside */
  align-items: center;
  gap: 0; /* No gap needed since avatar is inside input */
  width: 100%; /* Ensure full width */
  box-sizing: border-box; /* Include padding in width calculation */
  transition: transform 0.3s ease-in-out;
}

/* Mobile: Slide composer up smoothly when input is focused (like Kinmel search) */
@media (max-width: 768px) {
  .niriv-comment-modal__composer {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
  }
  
  .niriv-comment-modal__composer.composer-focused {
    transform: translateY(0);
    z-index: 10;
  }
  
  /* Ensure input stays visible when focused */
  #niriv-composer-text:focus {
    outline: none;
  }
  
  /* Smooth scroll behavior for mobile */
  .niriv-comment-modal__body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

.niriv-composer-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1; /* Take full available width */
  background: #f9fafb; /* Light gray background */
  border: 1px solid #e5e7eb; /* Subtle gray border */
  border-radius: 9999px; /* 100% rounded */
  padding: 8px 12px; /* Adequate padding for avatar and input */
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-width: 0; /* Allow flex item to shrink below content size */
  max-width: none; /* Remove any max-width constraints */
  box-sizing: border-box; /* Include padding in width calculation */
  width: 100%; /* Ensure full width */
}

.niriv-composer-inner:focus-within {
  border-color: #d1d5db; /* Slightly darker gray on focus */
  background: #ffffff; /* White background on focus */
  box-shadow: none; /* No shadow */
}

/* Avatar positioned inside input on the left */
.niriv-composer-avatar { 
  flex: 0 0 auto;
  width: 24px; /* Smaller avatar inside input */
  height: 24px; /* Smaller avatar inside input */
  margin-right: 8px; /* Space between avatar and input */
}


/* Hide ALL emoji input elements - including inline and reply emojis */
.niriv-composer-emoji,
.niriv-emoji-popover,
.niriv-inline-emoji,
.niriv-inline-emoji-popover,
#niriv-emoji-popover,
.emoji-picker,
.emoji-button,
[class*="emoji"] {
  display: none !important;
  visibility: hidden !important;
}

#niriv-composer-text {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px; /* Smaller input text */
  color: #1d1d1f;
  line-height: 1.4;
  padding: 0; /* Remove internal padding */
  width: 100%; /* Ensure input takes full width */
  min-width: 0; /* Allow input to shrink */
}

#niriv-composer-text::placeholder {
  color: #8e8e93; /* Apple's placeholder color */
  font-size: 14px; /* Smaller placeholder text */
}

.niriv-composer-send {
  flex: 0 0 auto;
  border: none;
  background: transparent; /* No background */
  color: #1d1d1f; /* Dark icon color */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  order: 3; /* Third in layout */
  margin-left: 4px; /* Small margin from input */
  padding: 0;
}

.niriv-composer-send:hover { 
  background: rgba(0, 0, 0, 0.05); /* Light gray on hover */
  color: #1d1d1f;
}

.niriv-composer-send:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.1);
}

/* Followers Modal - Similar styling to comment modal */
.niriv-followers-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: end center;
  z-index: 10001; /* Above go-to-top button (9998) */
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.niriv-followers-overlay.is-open {
  opacity: 1;
}

.niriv-followers-modal {
  width: min(600px, 95vw);
  height: min(600px, 85vh);
  background: #ffffff;
  color: #1d1d1f;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04);
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.niriv-followers-overlay.is-open .niriv-followers-modal {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .niriv-followers-modal { 
    transition: transform 200ms ease, opacity 150ms ease; 
  }
  .niriv-followers-overlay { 
    transition: opacity 150ms ease; 
  }
}

.niriv-followers-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 16px;
  background: #ffffff;
  color: #1d1d1f;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Drag handle for followers modal */
.niriv-followers-modal .niriv-modal-drag-handle {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 2px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.niriv-followers-modal .niriv-modal-drag-handle:active {
  cursor: grabbing;
}

.niriv-followers-modal .niriv-modal-drag-handle::before {
  content: '';
  width: 36px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  transition: background 200ms;
}

.niriv-followers-modal .niriv-modal-drag-handle:hover::before {
  background: rgba(0, 0, 0, 0.3);
}

.niriv-followers-modal__title { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  color: #1d1d1f;
}

.niriv-followers-modal__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #1d1d1f;
}


.niriv-followers-modal__body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
  background: #ffffff;
}

#niriv-followers-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.niriv-follower-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
  transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  justify-content: space-between;
}

.niriv-follower-item:hover {
  background: rgba(142, 142, 147, 0.12);
}

.niriv-follower-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

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

.niriv-follower-name {
  font-weight: 500;
  font-size: 15px !important;
  color: #1d1d1f;
  margin-bottom: 0;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.022em;
}

.niriv-follower-name:hover {
  color: #0066CC;
}

.niriv-follower-username {
  font-size: 11px;
  color: #86868b;
  font-weight: 400;
  display: block;
  width: 100%;
}

.niriv-follower-bio {
  display: none;
}

.niriv-follower-action {
  flex-shrink: 0;
  margin-left: auto;
  display: flex !important;
  align-items: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.niriv-follower-follow-btn {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 200ms;
  white-space: nowrap;
  line-height: 1.4;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.niriv-follower-follow-btn:not(.following) {
  background: white;
  color: #1847ea;
  border-color: #1847ea;
}

.niriv-follower-follow-btn.following {
  background: white;
  color: #6b7280;
  border-color: #d1d5db;
}

.niriv-follower-follow-btn:hover:not(.following) {
  background: #f0f4ff;
  border-color: #0f3cc5;
  color: #0f3cc5;
}

.niriv-follower-follow-btn:hover.following {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #4b5563;
}

.niriv-followers-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8e8e93;
  font-size: 14px;
}

.niriv-followers-loading {
  text-align: center;
  padding: 40px 20px;
  color: #8e8e93;
  font-size: 14px;
}

/* Ensure follower name font size is 15px on all devices */
.niriv-follower-name,
.niriv-followers-modal .niriv-follower-name,
#niriv-followers-list .niriv-follower-name {
  font-size: 15px !important;
}

/* Mobile responsive for followers modal */
@media (max-width: 768px) {
  .niriv-followers-modal {
    width: 100vw;
    height: 60vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
  }
  
  /* Ensure font size is 15px on mobile too */
  .niriv-follower-name,
  .niriv-followers-modal .niriv-follower-name,
  #niriv-followers-list .niriv-follower-name {
    font-size: 15px !important;
  }
}

/* Ensure the comment form fills nicely */
#niriv-comment-modal-content #respond {
  max-width: 100%;
}

/* Make inputs comfortable inside modal */
#niriv-comment-modal-content textarea,
#niriv-comment-modal-content input[type="text"],
#niriv-comment-modal-content input[type="email"] {
  width: 100%;
  border-radius: 12px; /* Apple-style input radius */
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  transition: all 200ms ease;
  font-size: 14px; /* Smaller input text */
}

#niriv-comment-modal-content textarea:focus,
#niriv-comment-modal-content input[type="text"]:focus,
#niriv-comment-modal-content input[type="email"]:focus {
  border-color: #d1d5db; /* Light gray on focus */
  background: #ffffff;
  box-shadow: none; /* No shadow */
  outline: none;
}

/* Mobile bottom-sheet behavior */
@media (max-width: 640px) {
  .niriv-comment-overlay { place-items: end stretch; }
  .niriv-comment-modal {
    width: 100vw;
    height: 60vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
  }
  
  .niriv-comment-modal__composer {
    padding-bottom: max(20px, env(safe-area-inset-bottom)); /* Respect safe area on mobile */
  }
}

/* Cache bust - 10/01/2025 18:09:15 */