/* Scoped to #mnc-comments */
#mnc-comments .mnc-editor{background:#111;border-radius:8px 8px 0 0;padding:10px;color:#eee;min-height:100px;outline:none;}
#mnc-comments .mnc-toolbar{display:flex;align-items:center;justify-content:space-between;background:#1b1d23;padding:6px 10px;border-radius:0 0 8px 8px;}
#mnc-comments .mnc-toolbar .left{display:flex;gap:12px;}
#mnc-comments .mnc-toolbar button{background:none;border:none;color:#aaa;font-size:16px;cursor:pointer;}
#mnc-comments .mnc-toolbar button:hover{color:#4da3ff;}
#mnc-comments .mnc-toolbar .mnc-icon{font-family:Arial,sans-serif;font-weight:bold;}
#mnc-comments .mnc-post-btn{background:#4da3ff;color:#fff;border:none;border-radius:6px;padding:6px 16px;font-weight:600;cursor:pointer;}
#mnc-comments .mnc-post-btn[disabled]{opacity:.6;cursor:not-allowed;}
#mnc-comments .mnc-post-btn:hover{background:#1f7ae0;}
#mnc-comments #cancel-comment-reply-link{margin-left:10px;color:#ff6666;font-size:0.9rem;cursor:pointer;}
#mnc-comments #cancel-comment-reply-link:hover{text-decoration:underline;}
#mnc-comments textarea#comment{position:absolute;left:-9999px;height:1px;width:1px;overflow:hidden;}
#mnc-comments .mnc-spoiler, #mnc-comments img[data-spoiler="1"]{filter:blur(12px);cursor:pointer;transition:filter .2s;}
#mnc-comments .mnc-spoiler.revealed, #mnc-comments img[data-spoiler="0"]{filter:none;cursor:auto;}
#mnc-comments .comment-list{margin:0;padding:0;}
#mnc-comments .comment-list li{list-style:none;margin-bottom:16px;}
#mnc-comments .mnc-card{background:#151922;border:1px solid #222;border-radius:10px;padding:12px;display:flex;gap:12px;}
#mnc-comments .mnc-avatar img{width:42px;height:42px;border-radius:999px;object-fit:cover;}
#mnc-comments .mnc-body{flex:1;}
#mnc-comments .mnc-meta{font-size:0.85rem;color:#aaa;margin-bottom:6px;}
#mnc-comments .mnc-meta strong{color:#fff;}
#mnc-comments .mnc-content{margin-bottom:6px;line-height:1.5;color:#eee;}
#mnc-comments .mnc-reply a{color:#4da3ff;font-weight:600;text-decoration:none;}
#mnc-comments .mnc-reply a:hover{ text-decoration:underline;}
#mnc-comments .children{margin-left:48px;border-left:2px dashed #222;padding-left:12px;}
#mnc-comments .mnc-end{text-align:center;color:#888;margin:12px 0;font-size:0.9rem;display:none;}
#mnc-comments .mnc-counter{font-weight:700;color:#fff;margin:12px 0;font-size:1rem;display:flex;align-items:center;gap:6px;}
#mnc-comments .mnc-counter .count{background:#4da3ff;color:#fff;border-radius:9999px;padding:2px 8px;font-size:0.8rem;}

/* Notice bar */
#mnc-comments .mnc-notice{background:#2b2f3a;color:#fff;border:1px solid #445; padding:10px 12px; border-radius:8px; margin-bottom:12px;}
#mnc-comments .mnc-notice.dup{border-color:#ff8a8a; background:#3a2b2b;}
#mnc-comments .mnc-notice.flood{border-color:#ffd27a; background:#3a3529;}

/* SVG Icon Styles */
#mnc-comments .mnc-toolbar button[data-action="image"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

#mnc-comments .mnc-toolbar button[data-action="image"]:hover {
  background: rgba(77, 163, 255, 0.1);
  transform: scale(1.1);
}

#mnc-comments .mnc-toolbar button[data-action="image"] svg {
  transition: all 0.2s ease;
}

#mnc-comments .mnc-toolbar button[data-action="image"]:hover svg {
  color: #4da3ff;
}



/* Comment Images - Mobile Responsive */
#mnc-comments .mnc-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  margin: 8px 0;
  display: block;
  
  /* Mobile-first approach */
  width: auto;
  max-height: 300px; /* Limit height on mobile */
  object-fit: contain;
}

/* Tablet and up */
@media (min-width: 768px) {
  #mnc-comments .mnc-content img {
    max-height: 400px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  #mnc-comments .mnc-content img {
    max-height: 500px;
  }
}

/* Auto-resize images with URL parameters */
#mnc-comments .mnc-content img[src*="?w="],
#mnc-comments .mnc-content img[src*="&w="] {
  object-fit: contain;
  background: #1b1d23;
}

/* Loading state for images */
#mnc-comments .mnc-content img[data-loading="true"] {
  background: #1b1d23;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image hover effect */
#mnc-comments .mnc-content img:hover {
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Prevent images from breaking layout */
#mnc-comments .mnc-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#mnc-comments .mnc-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}