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

.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: 9999;
  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 25px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
  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; 
  }
}

/* Header - Clean white design */
.niriv-comment-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  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 */
}

.niriv-comment-modal__close {
  appearance: none;
  border: none;
  background: rgba(0, 0, 0, 0.06); /* Light gray background */
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #1d1d1f; /* Dark text */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.niriv-comment-modal__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1d1d1f;
  transform: scale(1.05);
}

/* 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: 6px; /* Smaller spacing between comments */
}
#niriv-comment-list .comment-body { 
  padding-bottom: 12px; /* Reduced bottom padding */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06); 
  background: transparent; /* No background for individual comments */
}
#niriv-comment-list ol > li:last-child .comment-body { border-bottom: 0; }

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

#niriv-comment-list .comment-content {
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
  font-size: 14px !important; /* Smaller comment body font size */
  color: #1d1d1f !important; /* Dark text for readability */
}

/* Reply and edit links positioned to the right side of comment container - Smaller text */
#niriv-comment-list .comment-reply-link,
#niriv-comment-list .reply,
#niriv-comment-list .comment-edit-link {
  display: inline-block !important;
  float: right !important;
  clear: none !important; /* Allow multiple links to sit side by side */
  margin-top: 6px !important;
  margin-left: 10px !important; /* Space between multiple action links */
  color: #8e8e93 !important; /* Subtle gray color */
  text-decoration: none !important;
  font-size: 11px !important; /* Very small action text */
  font-weight: 500 !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 */
}

/* 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 8px 30px rgba(0, 0, 0, 0.08);
}
.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 */
}

.niriv-composer-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1; /* Take full available width */
  background: transparent; /* Remove background */
  border: 1px solid rgba(0, 0, 0, 0.2); /* Simple 1px border */
  border-radius: 20px; /* Keep radius */
  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: #1d1d1f; /* Dark border on focus */
  box-shadow: 0 0 0 2px rgba(29, 29, 31, 0.1); /* Subtle 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 */
}

.niriv-composer-inner:focus-within {
  border-color: #1d1d1f; /* Dark border on focus */
  box-shadow: 0 0 0 2px rgba(29, 29, 31, 0.1); /* Subtle shadow */
}

/* 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: #1d1d1f; /* Dark background */
  color: #fff;
  width: 28px; /* Slightly smaller send button */
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  order: 3; /* Third in layout */
  margin-left: 4px; /* Small margin from input */
}

.niriv-composer-send:hover { 
  background: #000000; /* Darker on hover */
  transform: scale(1.05);
}

/* 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 rgba(0, 0, 0, 0.1);
  background: rgba(142, 142, 147, 0.12);
  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: #1d1d1f; /* Dark border on focus */
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.1); /* Dark shadow */
}

/* Mobile bottom-sheet behavior */
@media (max-width: 640px) {
  .niriv-comment-overlay { place-items: end stretch; }
  .niriv-comment-modal {
    width: 100vw;
    height: 75vh;
    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 */