/* ai-rool-strip.css — unified / fixed */

/* ===== container ======================================================= */
.ai-rool-strip{
  position:relative;
  width:100% !important;
  max-width:100% !important;
  margin:8px 0 0;
  padding:0 4px;
}

/* ===== viewport + track =============================================== */
.ai-rool-viewport{ overflow:hidden !important; }
.ai-rool-track{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns: repeat(4, clamp(137px, 15vw, 175px)) !important;
  grid-auto-columns: clamp(137px, 15vw, 175px) !important;
  gap:12px !important;
  align-items:start !important;
  padding:6px 2px !important;
}

/* ===== nav arrows ====================================================== */
.ai-rool-strip .rool-nav{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  display:flex; gap:8px; pointer-events:none;
}
.ai-rool-strip .nav-btn{
  width:34px; height:34px; border:0; border-radius:50%;
  background:#7e3ff2; color:#fff; font-size:20px; line-height:34px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  cursor:pointer; pointer-events:auto;
}
.ai-rool-strip .nav-btn[disabled]{ opacity:.35; cursor:default; }

/* ===== card base ======================================================= */
.ai-rool-strip .rool-card{
  background:#1b1b1b; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  transition:transform .16s, box-shadow .16s;
}
.ai-rool-strip .rool-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.55); }

/* ===== image frame ===================================================== */
.ai-rool-strip .rool-thumb{ position:relative; width:100% !important; background:#0e0e0e; overflow:hidden; }
.ai-rool-strip .rool-thumb img{
  display:block; width:100% !important; height:auto !important;
  object-fit:cover !important; object-position:center;
  cursor:zoom-in;
}

/* ===== badges ========================================================== */
.ai-rool-strip .rool-thumb .rool-badges{ position:absolute; top:6px; left:6px; display:flex; gap:6px; z-index:2; }
.ai-rool-strip .rool-badge{
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:12px; padding:2px 6px; border-radius:8px;
  display:flex; align-items:center; gap:6px;
}
.ai-rool-strip .rool-badge.score{ color:#ffcf3a !important; }
.ai-rool-strip .rool-badge .val{ font-weight:800; }

/* ===== remove legacy ribbons ========================================= */
.rool-card.rank-1 .rool-thumb::before,
.rool-card.rank-2 .rool-thumb::before,
.rool-card.rank-3 .rool-thumb::before{ content:none !important; display:none !important; }
.ai-rool-strip .rool-thumb .medal,
.ai-rool-strip .rool-thumb .rank-badge,
.ai-rool-strip .rool-thumb [class*="medal"],
.ai-rool-strip .rool-thumb [class*="rank"]{ display:none !important; }

/* ===== top-3 glow ===================================================== */
.rool-card.rank-1{ box-shadow:0 0 0 2px #f5d35f, 0 8px 26px rgba(245,211,95,.35), 0 0 18px rgba(245,211,95,.28) inset; }
.rool-card.rank-1 .rool-thumb{ box-shadow: inset 0 0 0 2px #f5d35f, 0 0 20px rgba(245,211,95,.45); }
.rool-card.rank-1 .rool-thumb::after{ content:''; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(120% 70% at 50% -10%, rgba(245,211,95,.30), rgba(245,211,95,0) 60%); pointer-events:none; }
.rool-card.rank-1 .rool-meta{ background: linear-gradient(0deg, rgba(245,211,95,.15), rgba(245,211,95,0)) , #121212; }

.rool-card.rank-2{ box-shadow:0 0 0 2px #c0c6d8, 0 8px 24px rgba(192,198,216,.30), 0 0 16px rgba(192,198,216,.22) inset; }
.rool-card.rank-2 .rool-thumb{ box-shadow: inset 0 0 0 2px #c0c6d8, 0 0 18px rgba(192,198,216,.40); }
.rool-card.rank-2 .rool-thumb::after{ content:''; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(120% 70% at 50% -10%, rgba(192,198,216,.26), rgba(192,198,216,0) 60%); pointer-events:none; }
.rool-card.rank-2 .rool-meta{ background: linear-gradient(0deg, rgba(192,198,216,.13), rgba(192,198,216,0)) , #121212; }

.rool-card.rank-3{ box-shadow:0 0 0 2px #d9965b, 0 8px 24px rgba(217,150,91,.28), 0 0 16px rgba(217,150,91,.20) inset; }
.rool-card.rank-3 .rool-thumb{ box-shadow: inset 0 0 0 2px #d9965b, 0 0 18px rgba(217,150,91,.38); }
.rool-card.rank-3 .rool-thumb::after{ content:''; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(120% 70% at 50% -10%, rgba(217,150,91,.24), rgba(217,150,91,0) 60%); pointer-events:none; }
.rool-card.rank-3 .rool-meta{ background: linear-gradient(0deg, rgba(217,150,91,.12), rgba(217,150,91,0)) , #121212; }

/* ===== meta =========================================================== */
.ai-rool-strip .rool-meta{
  padding:6px 8px !important;
  background:#121212; border-top:1px solid #2a2a2a;
  color:#ddd; display:flex; flex-direction:column; gap:6px; min-width:0;
}

/* author row */
.rool-author{ font-size:13px; min-width:0; }
.ai-rool-strip .rool-author a{
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto; min-width:0; max-width:100%;
  color:#fff !important;
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ai-rool-strip .rool-author a:hover{ text-decoration:underline; }
.rool-avatar{ width:16px; height:16px; border-radius:50%; flex:0 0 16px; object-fit:cover; }

/* likes row */
.ai-rool-strip .rool-likes{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; }
.ai-rool-strip .btn-like, .ai-rool-strip .btn-dislike{
  background:#242424; border:1px solid #353535; color:#ddd; font-size:12px;
  border-radius:8px; padding:5px 8px; cursor:pointer; line-height:1; white-space:nowrap;
}
.ai-rool-strip .btn-like:hover, .ai-rool-strip .btn-dislike:hover{ background:#2b2b2b; }
.ai-rool-strip .rool-card.is-liked .btn-like{ background:#2f6b2f; border-color:#3a7f3a; color:#fff; }
.ai-rool-strip .rool-card.is-disliked .btn-dislike{ background:#6b2f2f; border-color:#7f3a3a; color:#fff; }
.ai-rool-strip .likes-count{ margin-left:auto; color:#bbb; font-size:12px; text-align:right; }
.ai-rool-strip .likes-count strong{ color:#fff; font-weight:700; }

/* time */
.ai-rool-strip .rool-time{ color:#cfcfcf; font-size:12px; }
.ai-rool-strip .rool-time b{ font-weight:700; }

/* vote highlight */
.ai-rool-strip .rool-card.is-liked{ box-shadow:0 0 0 2px rgba(58,159,74,.65), 0 8px 20px rgba(0,0,0,.6) !important; }
.ai-rool-strip .rool-card.is-disliked{ box-shadow:0 0 0 2px rgba(191,70,70,.65), 0 8px 20px rgba(0,0,0,.6) !important; }
.ai-rool-strip .rool-card.is-liked .rool-meta{ background:#162416 !important; }
.ai-rool-strip .rool-card.is-disliked .rool-meta{ background:#241616 !important; }

/* ===== modal metadata palette ========================================= */
#ai-rool-modal .m-meta{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap:16px !important;
  row-gap:8px !important;
  list-style:none !important;
  padding:0 !important;
  margin:10px 0 0 !important;
}
#ai-rool-modal .m-meta .m-meta-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13px !important;
}
#ai-rool-modal .m-meta .m-meta-row i.fa-solid{ width:18px; text-align:center; opacity:.95; }
#ai-rool-modal .m-meta li strong{ color:#aab; font-weight:700; margin-right:4px; }

/* === Generation details icon colors (restored) === */
#ai-rool-modal .m-meta .m-meta-row i.fa-solid{ color:#d6d6d6; } /* default */
#ai-rool-modal .m-meta .m-meta-row[data-k="model"] i.fa-solid{  color:#a1a1ff; } /* bluish */
#ai-rool-modal .m-meta .m-meta-row[data-k="seed"]  i.fa-solid{  color:#7bd389; } /* green */
#ai-rool-modal .m-meta .m-meta-row[data-k="dims"]  i.fa-solid{  color:#ff9e7d; } /* orange */
#ai-rool-modal .m-meta .m-meta-row[data-k="style"] i.fa-solid{  color:#e39bff; } /* purple */

/* ===== Side panel + comments (scroll + sticky composer) =============== */
#ai-rool-modal .m-side{
  display:flex !important;
  flex-direction:column !important;
  max-height:90dvh !important;
  min-height:0 !important;
  overflow:auto !important;
}
#ai-rool-modal .m-comments{
  display:flex !important; flex-direction:column !important;
  gap:8px !important; flex:0 0 auto !important; min-height:0 !important;
}
#ai-rool-modal .m-comments .m-c-list{
  flex:1 1 auto !important; min-height:0 !important; max-height:42dvh !important;
  overflow:auto !important; -webkit-overflow-scrolling:touch !important;
  display:flex !important; flex-direction:column !important; gap:5px;
}
#ai-rool-modal .m-c-form{
  position:sticky !important; bottom:0 !important;
  background:#121212 !important; padding-top:8px !important; z-index:20 !important;
}

/* ===== comment bubble ================================================== */
#ai-rool-modal .m-comments .c-item{
  position:relative; display:flex; flex-direction:column; width:100%;
  break-inside:avoid-column !important; page-break-inside:avoid !important;
}
#ai-rool-modal .m-comments .c-bubble{
  position:relative; background:linear-gradient(180deg,#1a1a1a,#111);
  border:1px solid #2c2c2c; color:#eaeaea; border-radius:14px;
  padding:6px 6px 8px; margin:0; line-height:1.25;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  width:fit-content; max-width:100%; display:block; box-sizing:border-box;
}
#ai-rool-modal .m-comments .c-text{
  font-size:13px; color:#eee; margin-top:6px; padding:0 6px;
  max-inline-size:55ch; overflow-wrap:anywhere; word-break:break-word; white-space:normal;
}

/* avatars + name line */
#ai-rool-modal .m-comments .c-ava,
#ai-rool-modal .m-comments img.c-ava,
#ai-rool-modal .m-comments .ava{
  position:absolute; left:6px; top:0;
  width:18px; height:18px; border-radius:50%; object-fit:cover; background:#333;
  display:block !important; z-index:1 !important;
}
#ai-rool-modal .m-comments .c-user{
  position:absolute; left:6px; top:0; width:18px; height:18px; border-radius:50%; z-index:1 !important;
}
#ai-rool-modal .m-comments .c-head{
  padding-left:6px; line-height:18px; min-height:18px;
  display:flex; align-items:center; gap:6px; min-width:0; position:relative;
}
#ai-rool-modal .m-comments .c-name{
  font-weight:700; font-size:14px; color:#ddd; margin-left:28px !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#ai-rool-modal .m-comments .c-name a{ color:inherit; text-decoration:none; }
#ai-rool-modal .m-comments .c-name a:hover{ text-decoration:underline; }

/* ===== inline stats row (responsive single row when space) ============ */
#ai-rool-modal .m-inline-stats{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;          /* allow wrap only when truly needed */
  column-gap:6px !important;
  row-gap:6px !important;
}
#ai-rool-modal .m-inline-stats > *{
  flex:0 0 auto !important;           /* items keep their size; don't shrink */
}
#ai-rool-modal .m-inline-stats .spacer{
  flex:1 1 0 !important;              /* spacer collapses first */
  min-width:0 !important;
}
#ai-rool-modal .m-inline-stats .pill,
#ai-rool-modal .m-inline-stats .btn-like,
#ai-rool-modal .m-inline-stats .btn-dislike{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  height:28px !important; padding:0 10px !important;
  font-size:12px !important; line-height:28px !important; border-radius:10px !important;
  border:1px solid #2a2a2a !important; background:#1a1a1a !important; color:#ddd !important;
}
#ai-rool-modal .m-inline-stats .btn-like,
#ai-rool-modal .m-inline-stats .btn-dislike{
  background:#242424 !important; border-color:#353535 !important; cursor:pointer !important;
}
#ai-rool-modal .m-inline-stats .btn-like:hover,
#ai-rool-modal .m-inline-stats .btn-dislike:hover{ background:#2b2b2b !important; }
#ai-rool-modal .m-inline-stats .pill-score{ color:#ffcf3a !important; }
#ai-rool-modal.is-liked .m-inline-stats .btn-like{ background:#2f6b2f !important; border-color:#3a7f3a !important; color:#fff !important; }
#ai-rool-modal.is-disliked .m-inline-stats .btn-dislike{ background:#6b2f2f !important; border-color:#7f3a3a !important; color:#fff !important; }
#ai-rool-modal .pill-likes b,
#ai-rool-modal .pill-dislikes b,
#ai-rool-modal .pill-score b,
#ai-rool-modal .pill-comments b,
#ai-rool-modal .pill-rools b,
#ai-rool-modal .pill-left b{ font-weight:700; font-variant-numeric:tabular-nums; }

/* ===== layering fixes ================================================== */
#ai-rool-modal .emoji-pop{ z-index:35001 !important; }
#ai-rool-modal .m-share-pop{ z-index:20 !important; }  /* share above body, below emoji */

/* ===== Quad Controller (hold-to-reveal) ================================== */
#ai-quad{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); z-index:35050; /* above modal */
  -webkit-user-select:none; user-select:none;
}
#ai-quad[data-open="1"]{ display:flex; }

#ai-quad .pad{
  position:relative; width:min(78vw, 360px); height:min(78vw, 360px);
  border-radius:50%; background:radial-gradient(120% 120% at 50% 50%, #141414, #0d0d0d);
  border:1px solid #2c2c2c; box-shadow:0 16px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
}

#ai-quad .center-dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%;
  background:#1e1e1e; border:1px solid #3a3a3a; box-shadow:0 0 0 4px rgba(126,63,242,.18);
}

/* Wedges (Up / Right / Down / Left) */
#ai-quad .wedge{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:50%; height:50%; font-size:clamp(18px, 4.6vw, 22px); color:#e8e8e8;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  transition:transform .08s ease, background .08s ease, box-shadow .08s ease;
}
#ai-quad .wedge b{ font-size:clamp(13px, 3.6vw, 14px); margin-left:8px; opacity:.9; }

#ai-quad .wedge.up    { left:25%; top:-1px;     transform-origin:50% 100%; border-top-left-radius:18px; border-top-right-radius:18px; }
#ai-quad .wedge.right { right:-1px; top:25%;    transform-origin:0% 50%;   border-top-right-radius:18px; border-bottom-right-radius:18px; }
#ai-quad .wedge.down  { left:25%; bottom:-1px;  transform-origin:50% 0%;   border-bottom-left-radius:18px; border-bottom-right-radius:18px; }
#ai-quad .wedge.left  { left:-1px; top:25%;     transform-origin:100% 50%; border-top-left-radius:18px; border-bottom-left-radius:18px; }

/* Icons */
#ai-quad .wedge.up::before    { content:'👍'; margin-right:6px; }
#ai-quad .wedge.right::before { content:'›'; font-weight:800; font-size:1.35em; line-height:1; }
#ai-quad .wedge.down::before  { content:'👎'; margin-right:6px; }
#ai-quad .wedge.left::before  { content:'‹'; font-weight:800; font-size:1.35em; line-height:1; }

/* Active / hover */
#ai-quad .wedge.active{
  background:rgba(126,63,242,.18);
  box-shadow:0 0 0 1px #7e3ff2 inset, 0 10px 26px rgba(126,63,242,.25);
  transform:scale(1.02);
}

/* Helper toggle button inside the modal */
#ai-rool-modal .m-quad-help{
  position:absolute; left:-8px; top:-8px; width:32px; height:32px; border-radius:50%;
  background:#222; color:#ddd; border:1px solid #3a3a3a; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
#ai-rool-modal .m-quad-help:after{ content:'◎'; display:block; font-size:18px; line-height:30px; text-align:center; }
#ai-rool-modal .m-quad-help[aria-pressed="true"]{ background:#2b2148; border-color:#5f43d7; color:#fff; }
@media (prefers-reduced-motion:reduce){
  #ai-quad .wedge{ transition:none; }
}

/* Quad overlay — lives over the zoomed image, smaller footprint */
#ai-rool-modal .quad-ctrl{
  position:absolute;           /* we’ll position it over the image via JS */
  left:0; top:0; width:0; height:0;
  display:none;                /* shown only while holding */
  place-items:center;
  z-index:24000;
  pointer-events:none;         /* only the pad itself accepts events */
}
#ai-rool-modal .quad-ctrl[data-open="1"]{ display:grid; }

#ai-rool-modal .quad-veil{
  position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,.28), rgba(0,0,0,.55));
  pointer-events:none;
}

/* smaller pad */
#ai-rool-modal .quad-pad{
  position:relative;
  width:min(48vmin, 380px);     /* was 68vmin/560 — smaller */
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(80% 80% at 50% 50%, rgba(40,40,40,.55), rgba(15,15,15,.80));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  display:grid; place-items:center;
  pointer-events:auto;          /* clicks work on the buttons */
}

/* smaller buttons */
#ai-rool-modal .quad-btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;      /* was 68px */
  border-radius:50%;
  background:#1b1b1b; border:1px solid #2a2a2a; color:#eee;
  font-size:20px;               /* was 22px */
  cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
#ai-rool-modal .quad-btn.up{    top:10%;  left:50%; transform:translate(-50%,0); }
#ai-rool-modal .quad-btn.down{  bottom:10%;left:50%; transform:translate(-50%,0); }
#ai-rool-modal .quad-btn.left{  left:10%; top:50%;   transform:translate(0,-50%); }
#ai-rool-modal .quad-btn.right{ right:10%;top:50%;   transform:translate(0,-50%); }

#ai-rool-modal .quad-core{ width:70px; height:70px; border-radius:50%; display:grid; place-items:center; }
#ai-rool-modal .quad-core .quad-hint{ color:#fff; font-weight:700; text-align:center; line-height:1.2; }