/* ============================
   Achievements layout overrides
   ============================ */

/* —— knobs —— */
:root{
  --ach-left:   11%;
  --ach-gap-lm: 11%;
  --ach-mid:    56%;
  --ach-gap-mr: 11%;
  --ach-right:  11%;

  --ach-ava:            170px;
  --ach-ava-gap:         14px;
  --ach-ava-left-edge:   26px;
  --ach-ava-top-gap:     20px;

  --card-gap-x: 14px;
  --card-gap-y: 14px;

  --top-gap: 28px;

  --podium-height:   140px;
  --podium-overlap:   78px;

  --lift-gold:    0px;
  --lift-silver: 40px;
  --lift-bronze: 80px;

  --left-inset-x: 8px;
  --left-inset-y: 16px;

  --shift-gold-x:   0%;
  --shift-silver-x: 10%;
  --shift-bronze-x: -60%;
}

/* 5-track shell so left + right columns stay put */
.stroon-ach-page .st-flex{
  display:grid !important;
  grid-template-columns: var(--ach-left) var(--ach-gap-lm) var(--ach-mid) var(--ach-gap-mr) var(--ach-right);
  align-items:start;
  gap:0;
  width:100%;
}

.stroon-ach-page .st-left { grid-column: 1 / 2; }
.stroon-ach-page .st-cent { grid-column: 3 / 4; }
.stroon-ach-page .st-fold { grid-column: 5 / 6; }

.stroon-ach-page .st-left,
.stroon-ach-page .st-fold{ position:static !important; overflow:visible !important; padding-top:20px; }

.stroon-ach-page #ai-achievements{ max-width:none; margin:0; padding: 8px 8px 40px; }

/* ============================
   Header → extra breathing room
   ============================ */
#ai-achievements .ach-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
#ai-achievements h1{ font-size:28px; margin:0; }
.ach-toolbar{ margin: 8px 0 0; color:#bbb; font-size:14px; }
.ach-note{ opacity:.9; }

/* ============================
   GRID (12-col, row-first flow)
   ============================ */
.ach-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--card-gap-x);
  row-gap: var(--card-gap-y);
  grid-auto-flow: row;
  position:relative;
  z-index: 2;
  margin-top: var(--top-gap);
}

/* Default width = THINNER for rows 3+ → 6 per row (span 2) */
.ach-card{ grid-column: span 2; }

/* ============================
   TOP-3 placements
   ============================ */
@media (min-width:1120px){
  .ach-grid > .ach-card:nth-child(1){ grid-row:1; grid-column:5 / span 3; transform:translate(var(--shift-gold-x), var(--lift-gold)); }
  .ach-grid > .ach-card:nth-child(2){ grid-row:1; grid-column:2 / span 3; transform:translate(var(--shift-silver-x), var(--lift-silver)); }
  .ach-grid > .ach-card:nth-child(3){ grid-row:1; grid-column:8 / span 3; transform:translate(var(--shift-bronze-x), var(--lift-bronze)); }

  .ach-grid > .ach-card.rank-1{ grid-row:1 !important; grid-column:5 / span 3 !important; transform:translate(var(--shift-gold-x), var(--lift-gold)) !important; }
  .ach-grid > .ach-card.rank-2{ grid-row:1 !important; grid-column:2 / span 3 !important; transform:translate(var(--shift-silver-x), var(--lift-silver)) !important; }
  .ach-grid > .ach-card.rank-3{ grid-row:1 !important; grid-column:8 / span 3 !important; transform:translate(var(--shift-bronze-x), var(--lift-bronze)) !important; }

  .ach-grid::before,
  .ach-grid::after{ content:""; display:block; }
  .ach-grid::before{ grid-row:1; grid-column:1 / span 1; }
  .ach-grid::after { grid-row:1; grid-column:11 / span 2; }

  .ach-card{ position:relative; z-index:1; }
  .ach-card.rank-1, .ach-card.rank-2, .ach-card.rank-3{ z-index:2; will-change:transform; }
}

/* ============================
   PODIUM — inside the grid at row 2
   ============================ */
.ach-grid > .ach-podium{
  grid-column: 1 / -1;
  grid-row: 2;
  height: var(--podium-height);
  align-self:end;
  pointer-events:none;
  position:relative;
  z-index:1;
  display:flex; justify-content:center; align-items:flex-end;
}
@media (min-width:1120px){
  .ach-grid > .ach-podium{
    grid-column: 2 / -2 !important;
    justify-self: center !important;
  }
}
.ach-podium .podium{
  width:100%; height:100%;
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:0;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.20));
}
.podium-step{
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:12px 12px 0 0;
  align-self:end; position:relative;
}
.step-silver{ height:calc(100% - 40px); }
.step-gold  { height:100%; }
.step-bronze{ height:calc(100% - 80px); }
.podium-num{
  position:absolute; left:50%; transform:translateX(-50%); bottom:10px;
  font-weight:900; font-size:28px; color:#111; text-shadow:0 1px 0 #fff;
}

/* ============================
   CARD
   ============================ */
.ach-card{
  position:relative; display:flex; flex-direction:column;
  background:#0e0e0e; border:1px solid #2b2b2b; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.ach-card .img-wrap{
  position:relative; background:#000; aspect-ratio:1/1; display:block; overflow:hidden; border-radius:12px;
  z-index:1;
}
.ach-card .img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

.ach-card .stat,
.ach-card .rool-badge{ z-index:3; }

/* full-card rank “shine” frames */
.ach-card::after{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  z-index:2; box-shadow: inset 0 0 0 0 transparent;
}
.ach-card.rank-1::after{
  box-shadow:
    inset 0 0 0 3px #D4AF37,
    inset 0 0 0 7px rgba(212,175,55,.33),
    inset 0 0 0 11px rgba(212,175,55,.15);
}
.ach-card.rank-2::after{
  box-shadow:
    inset 0 0 0 3px #C0C0C0,
    inset 0 0 0 7px rgba(192,192,192,.33);
}
.ach-card.rank-3::after{
  box-shadow:
    inset 0 0 0 3px #CD7F32,
    inset 0 0 0 7px rgba(205,127,50,.28);
}

.ach-card .img-btn{ all:unset; display:block; width:100%; height:100%; cursor:pointer; }
.ach-card .img-btn:focus-visible{ outline:2px solid #7e3ff2; outline-offset:-2px; }
.ach-card .stat{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff;
  padding:4px 8px; border-radius:8px; font-size:12px; backdrop-filter:blur(2px); }
.ach-card .stat + .stat{ bottom:auto; top:8px; }
.ach-card .stat-stars{ left:8px; right:auto; bottom:8px; font-weight:800; }
.ach-card .stat-likes{ left:8px; top:8px; }
.ach-card .stat-dislikes{ left:auto; right:8px; top:8px; }

/* rool/swirl badge (keep) */
.ach-card .rool-badge{
  position:absolute; right:8px; bottom:8px;
  display:flex !important;
  align-items:center; gap:6px;
  padding:4px 8px; border-radius:8px; font-size:12px;
  background:rgba(0,0,0,.7); color:#fff;
  backdrop-filter:blur(2px); z-index:3;
}
.ach-card .rool-badge .icon{ font-style:normal; color:#7e3ff2; }
.ach-card .rool-badge .num{ font-weight:800; }

.ach-card > .meta{
  position:static !important; margin:0 !important; padding:10px;
  background:#0e0e0e !important; z-index:0 !important; display:block !important;
}

/* left: avatar+name | right: chat pill */
.ach-card .meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ach-card .author{ color:#eee; text-decoration:none; display:flex; align-items:center; gap:8px; }
.ach-card .author .ava{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:0 0 22px; }
.ach-card .author .name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* right-aligned chat pill — SMALLER */
.ach-card .meta-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.ach-card .meta-right .chat-pill{
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;

  /* ↓ smaller size */
  font-size:11px;
  padding:2px 6px;
  border-radius:7px;
  display:flex; align-items:center; gap:4px;
  min-height:18px; line-height:18px;
}
.ach-card .meta-right .chat-pill b{
  font-weight:700;            /* was 800 */
  font-size:11px;             /* match pill font-size */
}
.ach-card .meta-right .chat-pill .ico-chat{
  color:#a0e0ff;
  font-size:12px;             /* shrink icon a touch */
  line-height:1;
}

/* ensure any legacy Share pill on cards stays hidden */
.ach-card .share-pill{ display:none !important; }

.ach-card .thoughts{ margin-top:6px; font-size:13px; color:#cfcfcf; }

/* ============================
   Legend icon colors
   ============================ */
#ach-legend { padding: 10px 8px 24px; border-left: 4px solid #7e3ff2; }
#ach-legend .legend-title{ margin: 0 0 8px; font-size: 16px; font-weight: 800; color:#eee; }
#ach-legend .legend-icons{ list-style:none; margin:0 0 8px; padding:0; display:grid; grid-template-columns:1fr; gap:6px; }
#ach-legend .legend-icons li{ display:flex; align-items:center; gap:10px; font-size:18px; color:#e4e4e4; }
#ach-legend .legend-icons i,
#ach-legend .legend-icons .ico-spiral{ min-width:18px; width:18px; text-align:center; }
#ach-legend .legend-icons li[data-k="like"] i,
#ach-legend .legend-icons li[data-k="dislike"] i{ color:#ffcc33 !important; }
#ach-legend .legend-icons li[data-k="score"]    i{ color:#ffcc33; }
#ach-legend .legend-icons li[data-k="rool"]     .ico-spiral{ color:#7e3ff2; }
#ach-legend .legend-icons li[data-k="24h"]      i{ color:#3fa7ff; }
#ach-legend .legend-icons li[data-k="podium"]   i{ color:#d4af37; }
#ach-legend .legend-icons li[data-k="comments"] i{ color:#a0e0ff; }
#ach-legend .legend-gen li[data-k="model"] i{ color:#a1a1ff; }
#ach-legend .legend-gen li[data-k="seed"]  i{ color:#7bd389; }
#ach-legend .legend-gen li[data-k="dims"]  i{ color:#ff9e7d; }
#ach-legend .legend-gen li[data-k="style"] i{ color:#e39bff; }

/* Hide external page rool counters (not per-card badge) */
#rools-left-badge,
.rools-left-badge,
.ai-rools-badge,
.rools-counter,
.peepso-rools-counter{ display:none !important; }

/* ============================
   Responsive (≤1120px)
   ============================ */
@media (max-width:1120px){
  .stroon-ach-page .st-flex{ display:block !important; }
  .stroon-ach-page .st-left, .stroon-ach-page .st-fold{ display:none !important; }

  .ach-grid{ grid-template-columns: 1fr !important; margin-top: var(--top-gap); }
  .ach-grid > .ach-card{ grid-column:1 / -1 !important; transform:none !important; grid-row:auto !important; }
  .ach-grid > .ach-podium, .ach-podium{ display:none !important; }
}

/* ===== FINAL TOP-3 + PODIUM ALIGNMENT ===== */
@media (min-width:1120px){
  .ach-grid::before{
    content:"";
    display:block;
    grid-row:1;
    grid-column:1 / -1;
    z-index:0;
    pointer-events:none;
  }

  .stroon-ach-page { --podium-width: 70%; }
  .stroon-ach-page #ai-achievements .ach-grid > .ach-podium{
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    width: var(--podium-width) !important;
    justify-self: center !important;
    height: var(--podium-height) !important;
    z-index: 1 !important;
  }

  .stroon-ach-page #ai-achievements .ach-grid > .ach-card.rank-2{
    grid-row:1 !important; grid-column:3 / span 2 !important;
    transform: translate(var(--shift-silver-x), var(--lift-silver)) !important;
    z-index:2 !important;
  }
  .stroon-ach-page #ai-achievements .ach-grid > .ach-card.rank-1{
    grid-row:1 !important; grid-column:6 / span 2 !important;
    transform: translate(var(--shift-gold-x), var(--lift-gold)) !important;
    z-index:2 !important;
  }
  .stroon-ach-page #ai-achievements .ach-grid > .ach-card.rank-3{
    grid-row:1 !important; grid-column:10 / span 2 !important;
    transform: translate(var(--shift-bronze-x), var(--lift-bronze)) !important;
    z-index:2 !important;
  }

  .stroon-ach-page #ai-achievements .ach-grid > .ach-card:nth-of-type(1):not(.rank-1):not(.rank-2):not(.rank-3){
    grid-row:1 !important; grid-column:6 / span 2 !important;
    transform: translate(var(--shift-gold-x), var(--lift-gold)) !important; z-index:2 !important;
  }
  .stroon-ach-page #ai-achievements .ach-grid > .ach-card:nth-of-type(2):not(.rank-1):not(.rank-2):not(.rank-3){
    grid-row:1 !important; grid-column:3 / span 2 !important;
    transform: translate(var(--shift-silver-x), var(--lift-silver)) !important; z-index:2 !important;
  }
  .stroon-ach-page #ai-achievements .ach-grid > .ach-card:nth-of-type(3):not(.rank-1):not(.rank-2):not(.rank-3){
    grid-row:1 !important; grid-column:10 / span 2 !important;
    transform: translate(var(--shift-bronze-x), var(--lift-bronze)) !important; z-index:2 !important;
  }
}

/* Clamp thoughts to 2 lines on cards */
.stroon-ach-page #ai-achievements .ach-card .thoughts{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; word-break: break-word;
  max-height: calc(2 * 1.4em); line-height: 1.4;
}

/* --------- Fallback zoom (achievements-only) mobile/desktop rules kept --------- */
/* (unchanged from your previous; trimmed here for brevity if you already have it)
   If you use the fallback modal from ai-achievements.js, keep the long block you had.
*/


/* ==============================================================
   ZOOM (MOBILE) — ai-ach-fallback exact overrides (media first)
   ============================================================== */
@media (max-width:1120px){

  /* Let the overlay scroll; align content to top */
  #ai-ach-fallback{
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Stack the inner wrapper vertically and remove height clamps */
  #ai-ach-fallback > .wrap{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* kill any horizontal scroll from long lines */
  #ai-ach-fallback{ overflow-x: hidden !important; }

  /* allow flex children to shrink instead of overflowing */
  #ai-ach-fallback .wrap > *,
  #ai-ach-fallback .side > *{ min-width: 0 !important; }

  /* wrap long words/URLs everywhere in the right panel */
  #ai-ach-fallback .side,
  #ai-ach-fallback .side :where(p, div, span, a, li, small, strong, em, code){
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* keep author name from forcing a line */
  #ai-ach-fallback .author .name{ white-space: normal !important; }

  /* keep line breaks in the prompt text (overrides the rule above) */
  #ai-ach-fallback .prompt-text{ white-space: pre-wrap !important; }


  /* MEDIA FIRST — full viewport; kill inline max-* */
  #ai-ach-fallback .img{
    order: 0 !important;
    display: block !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100svh !important;
    max-height: 100svh !important;

    object-fit: contain !important;
    margin: 0 !important;
    background: #000 !important;

    /* optional: keep your rounded look; comment out if you want edge-to-edge */
    border-radius: 10px !important;

    /* neutralize any positioning from elsewhere */
    position: relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    float: none !important; clear: both !important; transform: none !important;
    box-shadow: none !important;
  }

  /* PANEL SECOND — full width below the media */
  #ai-ach-fallback .side{
    order: 1 !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 12px !important;

    position: static !important; inset: auto !important;
    float: none !important; clear: both !important; transform: none !important;
  }

  /* Avoid nested scroll traps inside the panel on mobile */
  #ai-ach-fallback .prompt-text,
  #ai-ach-fallback .c-list{
    max-height: none !important;
    overflow: visible !important;
  }

  /* Make sure the close button stays visible in the corner */
  #ai-ach-fallback .x{
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4000 !important;
  }
  #ai-ach-fallback{
    overflow-y: auto !important;          /* keep content scrollable */
    -webkit-overflow-scrolling: touch !important;

    /* hide scrollbars cross-browser */
    -ms-overflow-style: none !important;  /* IE/old Edge */
    scrollbar-width: none !important;     /* Firefox */
  }
  #ai-ach-fallback::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }

  #ai-ach-fallback{ position: fixed !important; }

  /* TOP-RIGHT ✕ — original purple style, perfectly centered */
  #ai-ach-fallback .x{
    position: fixed !important;          /* detach from .wrap */
    z-index: 6000 !important;            /* above image/panel */
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    top:  calc(env(safe-area-inset-top,  0px) + 12px) !important;
    left: auto !important;
    bottom: auto !important;

    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 20px !important;

    border-radius: 50% !important;
    background: #7e3ff2 !important;      /* original purple */
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;

    pointer-events: auto !important;     /* always clickable */
  }

  /* If the WP admin bar is visible, push the button down a bit */
  body.admin-bar #ai-ach-fallback .x{
    top: calc(env(safe-area-inset-top, 0px) + 12px + 46px) !important;   /* mobile admin bar ~46px */
  }
  @media (min-width:783px) and (max-width:1120px){
    body.admin-bar #ai-ach-fallback .x{
      top: calc(env(safe-area-inset-top, 0px) + 12px + 32px) !important; /* admin bar ~32px on wider screens */
    }
  }

  /* Visible keyboard focus */
  #ai-ach-fallback .x:focus-visible{
    outline: 2px solid #7e3ff2 !important;
    outline-offset: 2px !important;
  }
}

/* ==============================================================
   DESKTOP/WIDE (≥1120px) — pin ✕ top-right with original look
   ============================================================== */
@media (min-width:1120px){
  #ai-ach-fallback{ position: fixed !important; }

  #ai-ach-fallback .x{
    position: fixed !important;
    z-index: 6000 !important;
    right: calc(env(safe-area-inset-right, 0px) + 18px) !important;
    top:  calc(env(safe-area-inset-top,  0px) + 18px) !important;
    left: auto !important; bottom: auto !important;

    width: 32px !important;
    height: 32px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 20px !important; line-height: 1 !important; padding: 0 !important;

    border-radius: 50% !important;
    background: #7e3ff2 !important;
    color:#fff !important;
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;

    pointer-events: auto !important;
  }

  /* nudge for desktop admin bar */
  body.admin-bar #ai-ach-fallback .x{
    top: calc(env(safe-area-inset-top, 0px) + 18px + 32px) !important;
  }

  #ai-ach-fallback .x:focus-visible{
    outline: 2px solid #7e3ff2 !important;
    outline-offset: 2px !important;
  }

  /* === NEW: make the right panel scrollable without visible scrollbars === */
  #ai-ach-fallback > .wrap{
    max-height: 94vh !important; /* already present inline; enforce */
  }
  #ai-ach-fallback .side{
    max-height: 90vh !important;             /* keep the panel within viewport */
    overflow-y: auto !important;              /* scrollable */
    -webkit-overflow-scrolling: touch !important;

    /* hide scrollbars cross-browser */
    -ms-overflow-style: none !important;      /* IE/old Edge */
    scrollbar-width: none !important;         /* Firefox */
  }
  #ai-ach-fallback .side::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }

  /* Prompt + Comments: keep scrollable but hide scrollbars */
  #ai-ach-fallback .prompt-text,
  #ai-ach-fallback .c-list{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* hide scrollbars */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  #ai-ach-fallback .prompt-text::-webkit-scrollbar,
  #ai-ach-fallback .c-list::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }
}

/* Generation details (in fallback zoom) — colors, spacing, no bullets */
#ai-ach-fallback .side details .meta{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 8px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#ai-ach-fallback .side details .meta li{
  list-style: none !important;            /* hard-kill list markers */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.3 !important;
}
#ai-ach-fallback .side details .meta li::marker{ content: "" !important; } /* Safari/FF */

/* icon box + small breathing room */
#ai-ach-fallback .side details .meta li i,
#ai-ach-fallback .side details .meta li .gen-ico{
  min-width: 18px !important;
  width: 18px !important;
  text-align: center !important;
  margin-right: 2px !important;
  font-style: normal !important;          /* for emoji fallback */
}

/* match legend colors exactly */
#ai-ach-fallback .side details .meta li[data-k="model"]  i,
#ai-ach-fallback .side details .meta li[data-k="model"]  .gen-ico{ color:#a1a1ff !important; }
#ai-ach-fallback .side details .meta li[data-k="seed"]   i,
#ai-ach-fallback .side details .meta li[data-k="seed"]   .gen-ico{ color:#7bd389 !important; }
#ai-ach-fallback .side details .meta li[data-k="dims"]   i,
#ai-ach-fallback .side details .meta li[data-k="dims"]   .gen-ico{ color:#ff9e7d !important; }
#ai-ach-fallback .side details .meta li[data-k="style"]  i,
#ai-ach-fallback .side details .meta li[data-k="style"]  .gen-ico{ color:#e39bff !important; }

/* Zoom overlay pills (score / likes / dislikes) (not used now, but kept) */
#ai-ach-fallback .media{ position:relative !important; }
#ai-ach-fallback .z-stats{
  position:absolute !important;
  left:12px !important; bottom:12px !important;
  display:flex !important; gap:8px !important;
  z-index:3501 !important; pointer-events:none !important;
}
#ai-ach-fallback .z-stats .pill{
  pointer-events:auto !important;
  background:rgba(0,0,0,.65) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important; font-size:12px !important;
  padding:4px 8px !important; border-radius:8px !important;
  display:flex !important; align-items:center !important; gap:6px !important;
}
#ai-ach-fallback .z-stats .pill b{ font-weight:800 !important; }

/* ★ star color on cards + zoom */
.ach-card .stat-stars .ico-star{ color:#ffcc33 !important; margin-right:4px; }
.ach-card .stat-stars .num{ color:#fff !important; }
#ai-ach-fallback .inline-stats .stat-stars .ico-star{ color:#ffcc33 !important; margin-right:4px; }

/* === NEW: inline stats row (inside zoom panel, under avatar) === */
#ai-ach-fallback .inline-stats{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin: 2px 0 6px !important;
  flex-wrap:wrap !important;
  position:relative !important;  /* anchor share pop */
}
#ai-ach-fallback .inline-stats .pill{
  background:rgba(0,0,0,.65) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:12px !important;
  padding:4px 8px !important;
  border-radius:8px !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
#ai-ach-fallback .inline-stats .pill b{ font-weight:800 !important; }

/* keep rool (🌀) visible + purple in zoom row */
#ai-ach-fallback .inline-stats .stat-rools .ico-spiral{ color:#7e3ff2 !important; margin-right:4px; }

/* chat (💬) color in zoom row */
#ai-ach-fallback .inline-stats .stat-comments .ico-chat{ color:#a0e0ff !important; margin-right:4px; }


/* smaller comments pill on Achievements cards */
.ach-card .meta-right .chat-pill{
  font-size:11px;
  padding:3px 6px;
  gap:4px;
}
.ach-card .meta-right .chat-pill .ico-chat{ font-size:12px; }

/* belt-and-suspenders: modal close above share pop */
#ai-modal #ai-close{ position:relative; z-index:4000; }

/* --- Center both ✕ buttons perfectly --- */
#ai-ach-fallback .x,
#ai-ach-fallback .share-pop .sp-x,
#ai-ach-fallback .share-pop .sp-close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  padding:0 !important;
}

/* --- Smaller comments pill on cards --- */
.ach-card .meta-right .chat-pill{
  padding:2px 6px !important;
  font-size:11px !important;
  gap:4px !important;
}
.ach-card .meta-right .chat-pill .ico-chat{ font-size:12px !important; }

/* --- Smaller comments icon in the zoom inline-stats --- */
#ai-ach-fallback .inline-stats .stat-comments .ico-chat{
  font-size:12px !important;
  line-height:1 !important;
}

/* --- Make the inline-stats pills consistent */
#ai-ach-fallback .inline-stats .pill{
  background:rgba(0,0,0,.65) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:12px !important;
  padding:4px 8px !important;
  border-radius:8px !important;
}
#ai-ach-fallback .inline-stats .stat-stars .ico-star{ color:#ffcc33 !important; margin-right:4px; }
#ai-ach-fallback .inline-stats .stat-rools .ico-spiral{ color:#7e3ff2 !important; margin-right:4px; }

/* --- Generation details: use SAME colors as Legend --- */
#ai-ach-fallback .meta li[data-k="model"]  i{ color:#a1a1ff !important; }
#ai-ach-fallback .meta li[data-k="seed"]   i{ color:#7bd389 !important; }
#ai-ach-fallback .meta li[data-k="dims"]   i{ color:#ff9e7d !important; }
#ai-ach-fallback .meta li[data-k="style"]  i{ color:#e39bff !important; }

/* --- Share popup look/hover --- */
#ai-ach-fallback .share-pop a:hover,
#ai-ach-fallback .share-pop button:hover{ filter:brightness(1.06); }

/* ======== ADDED: keep image + panel fixed-height pair, and top-aligned comments ======== */
#ai-ach-fallback .wrap{ align-items:flex-start !important; }
#ai-ach-fallback .img{
  max-height:90vh !important;
  height:auto !important;
  align-self:flex-start !important;
  object-fit:contain !important;
}
#ai-ach-fallback .side{
  max-height:90vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* ======== ADDED: 3-line clamps with expandable boxes (stay copyable) ======== */
#ai-ach-fallback .thoughts.is-collapsed .thoughts-body,
#ai-ach-fallback .prompt.is-collapsed .prompt-text{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  max-height:4.4em !important; /* ~3 lines */
}
/* expanded state (JS sets it by removing the is-collapsed class) */
#ai-ach-fallback .thoughts .thoughts-body,
#ai-ach-fallback .prompt .prompt-text{
  /* when expanded, JS also sets max-height inline for smoothness */
  word-wrap:break-word;
}

/* ======== ADDED: comments block is top-aligned, list scrolls, delete button visible ======== */
#ai-ach-fallback .comments{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
#ai-ach-fallback .comments .c-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:30vh !important;
  overflow:auto !important;
}
#ai-ach-fallback .comments .c-del{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important; height:22px !important;
  border:0 !important; border-radius:11px !important;
  background:#2a2a2a !important; color:#fff !important;
  line-height:1 !important; cursor:pointer !important;
}
/* === Add-on for delete button + clamps (Achievements zoom) === */
#ai-ach-fallback .comments .c-del{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important; height:22px !important;
  border:0 !important; border-radius:11px !important;
  background:#2a2a2a !important; color:#fff !important;
  cursor:pointer !important; line-height:1 !important;
}

#ai-ach-fallback .thoughts.is-collapsed .thoughts-body,
#ai-ach-fallback .prompt.is-collapsed .prompt-text{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  max-height:4.4em !important; /* ~3 lines */
}
#ai-ach-fallback .thoughts,
#ai-ach-fallback .prompt{ cursor:pointer !important; }

/* ===== Achievements page — HARD OVERRIDE for comment thread ===== */
.stroon-ach-page #ai-achievements .m-comments,
.stroon-ach-page #ai-achievements .m-comments *,
.stroon-ach-page #ai-achievements .comments,
.stroon-ach-page #ai-achievements .comments *{
  columns:auto !important;
  column-count:1 !important;
  column-gap:0 !important;
}

/* the list itself = single vertical stack */
.stroon-ach-page #ai-achievements .m-c-list,
.stroon-ach-page #ai-achievements .comments .c-list{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  gap:10px !important;

  /* nuke any grid/flex/float that leaks in */
  float:none !important;
  clear:both !important;
  grid-template-columns:none !important;
  grid-auto-flow:row !important;
}

/* each row occupies full width */
.stroon-ach-page #ai-achievements .m-c-list > .c-item,
.stroon-ach-page #ai-achievements .comments .c-list > .c-item{
  display:flex !important;
  align-items:flex-start !important;
  width:100% !important;

  /* prevent CSS columns/grid from splitting items */
  break-inside:avoid !important;
  -webkit-column-break-inside:avoid !important;
  -moz-column-break-inside:avoid !important;

  /* kill any inline/grid/inline-block coming from themes */
  float:none !important;
  clear:both !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

/* replies: stack under parent, with a left guide */
.stroon-ach-page #ai-achievements .m-c-list .c-children,
.stroon-ach-page #ai-achievements .comments .c-list .c-children{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin-left:14px !important;
  padding-left:9px !important;
  border-left:1px dashed rgba(255,255,255,.12) !important;

  /* same full-width / no-column rules inside replies */
  break-inside:avoid !important;
  -webkit-column-break-inside:avoid !important;
  -moz-column-break-inside:avoid !important;
}

/* Composer stays at the bottom */
.stroon-ach-page #ai-achievements .m-c-form{ order:9999 !important; width:100% !important; }

/* avatar + name + time; name = 14px */
.stroon-ach-page #ai-achievements .m-c-list .c-ava{ width:24px !important; height:24px !important; }
.stroon-ach-page #ai-achievements .m-c-list .c-name{
  font-size:14px !important;
  line-height:24px !important;
  display:flex !important;
  align-items:center !important;
}
.stroon-ach-page #ai-achievements .m-c-list .c-name .created{
  font-size:12px !important;
  line-height:24px !important;
  margin-left:8px !important;
}