/* =========================================================
   ai-zoom-core.css — ROOL zoom panel (#ai-zoom)
   ========================================================= */

/* Host */
#ai-zoom{ display:none; position:fixed; inset:0; z-index:3500; background:rgba(0,0,0,.92); align-items:center; justify-content:center; }

/* Wrapper */
#ai-zoom .wrap{ position:relative; display:flex; gap:14px; max-width:96vw; max-height:94vh; }

/* Close */
#ai-zoom .x{ position:absolute; top:-8px; right:-8px; width:32px; height:32px; border-radius:50%; background:#7e3ff2; color:#fff; border:0; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; box-shadow:0 4px 16px rgba(0,0,0,.35); }

/* Media */
#ai-zoom .img{ max-width:68vw; max-height:90vh; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.55); object-fit:contain; background:#000; }

/* --- Image overlay badges (score + comments) --- */
#ai-zoom .img-wrap{ position:relative; }
#ai-zoom .img-badges{ position:absolute; left:10px; top:10px; display:flex; gap:8px; z-index:1; }
#ai-zoom .img-badges .badge{ background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; padding:4px 8px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; line-height:1; }
#ai-zoom .img-badges .badge.score{ color:#ffcf3a; }
#ai-zoom .img-badges .badge.comments{ color:#a0e0ff; }

/* Side */
#ai-zoom .side{ width:940px; max-width:28vw; background:#121212; border:1px solid #2a2a2a; border-radius:12px; padding:12px; color:#ddd; display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; -ms-overflow-style:none; scrollbar-width:none; }
#ai-zoom .side::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Row 1: author */
#ai-zoom .author{ display:flex; align-items:center; gap:8px; }
#ai-zoom .ava{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:none; }
#ai-zoom .name{ color:#fff; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* Row 2: inline stats + Share pill */
#ai-zoom .inline-stats{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; }
#ai-zoom .pill{ background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; padding:4px 8px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; user-select:none; }
#ai-zoom .pill b{ font-weight:800; }
#ai-zoom .stat-stars{ color:#ffcf3a; }
#ai-zoom .stat-comments{ color:#a0e0ff; }
#ai-zoom .pill-share{ background:#161616; border-color:#2a2a2a; cursor:pointer; }

/* Share popup */
#ai-zoom .m-share-pop{ position:absolute; right:0; top:calc(100% + 8px); display:none; flex-direction:column; gap:6px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:10px; padding:10px; z-index:3600; min-width:210px; box-shadow:0 10px 28px rgba(0,0,0,.45); }
#ai-zoom .m-share-pop a, #ai-zoom .m-share-pop button{ display:flex; align-items:center; justify-content:center; background:#161616; border:1px solid #2a2a2a; color:#fff; text-decoration:none; border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px; }
#ai-zoom .m-share-pop a:hover, #ai-zoom .m-share-pop button:hover{ filter:brightness(1.06); }
#ai-zoom .pill-share.is-open + .m-share-pop{ display:flex; }

/* Row 3: Title & Description */
#ai-zoom .thoughts{ border:1px solid #2a2a2a; border-radius:8px; padding:8px; }
#ai-zoom .thoughts .head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#ai-zoom .thoughts-body{ margin-top:6px; font-size:13px; color:#ddd; white-space:pre-wrap; }

/* Row 4: Prompt (3-line clamp by default) */
#ai-zoom .prompt{ border:1px solid #2a2a2a; border-radius:8px; padding:8px; }
#ai-zoom .prompt .bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#ai-zoom .prompt .copy, #ai-zoom .prompt .toggle{ background:#242424; border:1px solid #353535; color:#ddd; font-size:12px; border-radius:8px; padding:6px 10px; cursor:pointer; }
#ai-zoom .prompt-text{ margin-top:6px; font-size:13px; color:#ddd; white-space:pre-wrap; max-height:24vh; overflow:auto; -webkit-overflow-scrolling:touch; -ms-overflow-style:none; scrollbar-width:none; }
#ai-zoom .prompt-text::-webkit-scrollbar{ width:0; height:0; display:none; }
#ai-zoom .prompt.is-collapsed .prompt-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-height:4.4em; }

/* Row 5: Generation details (Font Awesome icons) */
#ai-zoom details{ border:1px solid #2a2a2a; border-radius:8px; padding:8px; }
#ai-zoom details summary{ cursor:pointer; color:#ccc; }
#ai-zoom .meta{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:12px; }
#ai-zoom .meta li{ list-style:none; display:flex; align-items:center; gap:10px; line-height:1.3; }
#ai-zoom .meta li i.fa-solid{ width:18px; text-align:center; opacity:.95; }
#ai-zoom .meta li[data-k="model"]  i.fa-solid{ color:#a1a1ff; } /* microchip */
#ai-zoom .meta li[data-k="seed"]   i.fa-solid{ color:#7bd389; } /* seedling */
#ai-zoom .meta li[data-k="dims"]   i.fa-solid{ color:#ff9e7d; } /* ruler-combined */
#ai-zoom .meta li[data-k="style"]  i.fa-solid{ color:#e39bff; } /* palette */
#ai-zoom .meta li strong{ color:#aab; font-weight:700; margin-right:4px; }

/* Row 6: Comments (layout only — content is built in JS) */
#ai-zoom .comments{ border:1px solid #2a2a2a; border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:8px; min-height:0; }

/* Scrollable area for comments */
#ai-zoom .comments .c-list{ overflow:auto; min-height:0; max-height:38vh; -webkit-overflow-scrolling:touch; -ms-overflow-style:none; scrollbar-width:none; }
#ai-zoom .comments .c-list::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Each comment row */
#ai-zoom .comments .c-item{ display:flex; gap:8px; align-items:flex-start; }

/* Name/time */
#ai-zoom .comments .c-name{ font-weight:700; font-size:12px; color:#ddd; }
#ai-zoom .comments .c-time{ color:#a8a8a8; font-size:11px; margin-left:6px; }

/* Text */
#ai-zoom .comments .c-text{ font-size:13px; color:#eee; white-space:pre-wrap; }

/* Actions under a comment */
#ai-zoom .comments .c-actions{ display:flex; gap:6px; margin-top:4px; }
#ai-zoom .comments .c-actions button{ font-size:11px; padding:2px 6px; border-radius:8px; background:#222; border:1px solid #3a3a3a; color:#ccc; cursor:pointer; }
#ai-zoom .comments .c-actions button:hover{ background:#262626; }

/* Threaded replies directly under the parent */
#ai-zoom .comments .c-children{ display:flex; flex-direction:column; gap:10px; margin-top:8px; margin-left:26px; border-left:1px dashed rgba(255,255,255,.12); padding-left:10px; }

/* Inline reply box under a specific comment */
#ai-zoom .comments .c-reply-box{ margin-top:8px; margin-left:26px; border-left:1px dashed rgba(255,255,255,.12); padding-left:10px; }
#ai-zoom .c-reply-box:empty{ display:none; } /* collapse empty box */

/* Composer */
#ai-zoom .m-c-input{ font-size:13px; background:#0f0f0f; border:1px solid #2d2d2d; color:#eee; }

/* “Show more” button row */
#ai-zoom .comments .c-more{ display:flex; justify-content:center; padding-top:6px; }
#ai-zoom .comments .c-more button{ font-size:12px; background:#1b1b1b; border:1px solid #2a2a2a; color:#ddd; border-radius:8px; padding:6px 10px; cursor:pointer; }
#ai-zoom .comments .c-more button:hover{ background:#222; }

/* Replying banner above the input */
#ai-zoom .replying{ display:none; align-items:center; gap:8px; background:#171717; border:1px dashed #3a3a3a; color:#cfcfcf; border-radius:8px; padding:6px 8px; font-size:12px; }
#ai-zoom .replying b{ color:#fff; }
#ai-zoom .replying .cancel{ margin-left:auto; background:#242424; border:1px solid #353535; color:#ddd; font-size:11px; border-radius:6px; padding:4px 8px; cursor:pointer; }

/* Bottom actions */
#ai-zoom .actions{ display:flex; align-items:center; gap:8px; }
#ai-zoom .actions .btn-like, #ai-zoom .actions .btn-dislike{ background:#242424; border:1px solid #353535; color:#ddd; font-size:12px; border-radius:8px; padding:6px 10px; cursor:pointer; line-height:1; }
#ai-zoom .actions .likes{ margin-left:auto; color:#bbb; font-size:12px; }

/* In zoom we don’t need over-image badges because stats show in the side */
#ai-zoom .img-badges{ display:none !important; }

/* Responsive */
@media (max-width:1120px){
  #ai-zoom .wrap{ display:flex; flex-direction:column; align-items:stretch; gap:12px; max-width:96vw; max-height:none; }
  #ai-zoom .img{ order:0; width:100% !important; max-width:100% !important; height:auto !important; max-height:60vh !important; object-fit:contain !important; background:#000; }
  #ai-zoom .side{ order:1; width:100% !important; max-width:none !important; }
  #ai-zoom .x{ top:10px; right:10px; position:fixed; }
}

/* =======================================================================
   Rool Zoom (#ai-rool-modal) – comment spacing + threads
   ======================================================================= */
#ai-rool-modal .m-c-list{ display:flex; flex-direction:column; gap:10px; max-height:260px; overflow:auto; padding-right:4px; }
#ai-rool-modal .c-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:4px !important;          /* 4px gap between avatar and body */
}
#ai-rool-modal .c-ava{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
#ai-rool-modal .c-ava.ph{ background:#333; display:inline-block; }
#ai-rool-modal .c-body{ flex:1; min-width:0; }
#ai-rool-modal .c-name{ font-weight:700; font-size:14px; color:#ddd; }
#ai-rool-modal .c-name .created{ opacity:.7; margin-left:33px; font-weight:400; }
#ai-rool-modal .c-text{ font-size:13px; color:#eee; line-height:1.3; }
#ai-rool-modal .c-actions{ display:flex; gap:6px; margin-top:2px; }
#ai-rool-modal .c-children{ margin-left:16px; border-left:1px dashed rgba(255,255,255,.12); padding-left:10px; display:flex; flex-direction:column; gap:8px; }
#ai-rool-modal .c-reply-box:empty{ display:none; } /* removes empty gap */

/* =======================================================================
   ANTI-MASONRY / THEME OVERRIDES (wins against column/float/grid rules)
   Scope: #ai-zoom, #ai-rool-modal, achievements page (.stroon-ach-page)
   ======================================================================= */
#ai-rool-modal .comments .c-list,
#ai-zoom .comments .c-list,
.stroon-ach-page .m-comments .m-c-list{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  gap:10px !important;
  columns:1 !important;
  column-count:1 !important;
  column-gap:0 !important;
}

#ai-rool-modal .comments .c-list > .c-item,
#ai-zoom .comments .c-list > .c-item,
.stroon-ach-page .m-comments .m-c-list > .c-item{
  display:flex !important;
  align-items:flex-start !important;
  width:100% !important;
  float:none !important;
  clear:both !important;
  break-inside:avoid !important;
  -webkit-column-break-inside:avoid !important;
  -moz-column-break-inside:avoid !important;
  grid-column:auto !important;
  max-width:100% !important;
}

#ai-rool-modal .comments .c-children,
#ai-zoom .comments .c-children,
.stroon-ach-page .m-comments .c-children{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  margin-left:16px !important;
  padding-left:10px !important;
  border-left:1px dashed rgba(255,255,255,.12) !important;
}


/* Always show the thin frame on the details block */
#ai-rool-modal .m-details{
  background:#151515;
  border:1px solid #2a2a2a !important;
  border-radius:10px !important;
  padding:8px;
}

/* Make the native disclosure marker visible */
#ai-rool-modal .m-details summary{
  color:#dcdcdc;
  display:list-item;               /* ensures marker is shown */
  list-style:revert;               /* keep native triangle where supported */
}
#ai-rool-modal .m-details summary::-webkit-details-marker{
  display:inline-block;            /* force marker in WebKit */
}

/* Optional: slightly bolder label */
#ai-rool-modal .m-details summary strong{ color:#dcdcdc; }


#ai-rool-modal .m-details{
  background:#151515;
  border:1px solid #2a2a2a !important;
  border-radius:10px !important;
  padding:8px;
}
#ai-rool-modal .m-details summary{
  color:#dcdcdc;
  display:list-item;
  list-style:revert;
}
#ai-rool-modal .m-details summary::-webkit-details-marker{
  display:inline-block;


  #ai-rool-modal .m-author .m-name{ color:#fff !important; }