/* ===================================================================== *
 *  BASIC LAYOUT  (gallery + sidebars)
 * ===================================================================== */

 body,
 html {
   margin: 0;
   padding: 0;
   width: 100vw;
   overflow-x: hidden;
 }

.st-flex{display:flex;min-height:80vh;width:100%}
.st-left{flex:0 0 260px;padding:68px 18px 0 32px}
.st-cent{flex:1;display:flex;flex-direction:column;align-items:center}

/* --------------------------------------------------------------------- *
 *  RIGHT-HAND FOLDERS SIDEBAR
 * --------------------------------------------------------------------- */
.st-fold{flex:0 0 220px;padding:68px 14px 0;border-left:4px solid #7e3ff2}
.st-fold h3{margin:0 0 10px;font-size:19px;font-weight:600}
.st-fold .fld{margin:5px 0;padding:5px 3px;border-radius:4px;cursor:pointer}
.st-fold .fld:hover{background:#f3efff}
.st-fold .fld.active{background:#e1d7ff;font-weight:600}
.st-fold form{margin-top:14px}
.st-fold input{width:100%;padding:7px 8px;border:1px solid #ccc;border-radius:6px;font-size:15px}
.st-fold button{margin-top:6px;width:100%;background:#7e3ff2;color:#fff;border:0;padding:7px 0;border-radius:6px;font-size:15px;cursor:pointer}
.fldDel{float:right;margin-left:6px;color:#d83131;font-weight:700;cursor:pointer;padding:0 4px}
.fldDel:hover{color:#ff4d4d}

/* --------------------------------------------------------------------- *
 *  THUMB-GALLERY
 * --------------------------------------------------------------------- */
.ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:30px auto;max-width:1100px}
.ai-wrap{position:relative}
.ai-wrap img{width:100%;border-radius:8px;box-shadow:0 2px 8px #0004;aspect-ratio:1/1;object-fit:cover;cursor:pointer}
.ai-wrap:hover img{box-shadow:0 4px 12px #0006}

/* hover share bar */
.ai-share{display:none;position:absolute;bottom:43px;right:0;background:#000b;border-radius:4px;padding:2px;gap:4px}
.ai-share a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:17px;border-radius:50%;color:#fff;opacity:.75;transition:.12s}
.ai-share a:hover{opacity:1}
.ai-wrap:hover .ai-share{display:flex}

/* ► Voting buttons inside the hover share bar (override the generic <a> rule) */
.ai-share a.ai-vote-btn{
  width:auto;                 /* override 26px */
  height:26px;
  padding:0 8px;
  border-radius:16px;         /* pill */
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  gap:6px;
  font-size:13px;
  line-height:26px;
  color:#fff;
  opacity:.9;
}
.ai-share a.ai-vote-btn:hover{opacity:1;background:rgba(0,0,0,.35)}
.ai-share a.ai-vote-btn i{font-size:14px;width:auto;height:auto;background:none}
.ai-share a.ai-vote-btn .cnt{font-weight:700;min-width:18px;text-align:center;display:inline-block}

/* Optional “active” styles (JS may toggle .on) */
.ai-share a.ai-vote-btn.ai-like.on{border-color:#2ecc71;background:rgba(46,204,113,.18)}
.ai-share a.ai-vote-btn.ai-dislike.on{border-color:#ff5c5c;background:rgba(255,92,92,.18)}

/* thumb action circles */
.addBtn,.remBtn,.dlBtn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.addBtn{background:#7e3ff2}.addBtn:hover{background:#a68dff}
.remBtn{background:#3fa7ff;display:none}.remBtn:hover{background:#1c8dff}
.dlBtn{background:#28b14c}.dlBtn:hover{background:#1f9d41}
.addBtn i,.remBtn i,.dlBtn i{color:#fff;font-size:13px}

/* delete “×” on thumb */
.ai-del{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:#7e3ff2;color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px #0006;cursor:pointer;opacity:0;transition:opacity .15s}
.ai-wrap:hover .ai-del{opacity:1}

/* folders badge on thumb */
.badge{display:none;position:absolute;top:8px;left:8px;background:#c9b5ff;color:#432c9d;font-size:12px;padding:2px 6px;border-radius:5px}
.ai-wrap:hover .badge{display:block}

/* trimmed prompt under thumb */
.ai-pr{margin-top:4px;font-size:14px;line-height:1.35em;color:#ccc;max-height:2.7em;overflow:hidden}

/* --------------------------------------------------------------------- *
 *  ZOOM MODAL  – image + right-hand info panel
 * --------------------------------------------------------------------- */
#ai-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:1000;align-items:center;justify-content:center;cursor:zoom-out}
#ai-modal .ai-box{position:relative;display:flex;gap:26px;max-width:94vw;max-height:94vh}
#ai-img{max-width:66vw;max-height:90vh;border-radius:10px;box-shadow:0 4px 16px #0009}

/* close button & arrows */
#ai-close{position:absolute;top:10px;right:-100px;width:32px;height:32px;border-radius:50%;background:#7e3ff2;color:#fff;font-size:28px;line-height:30px;text-align:center;cursor:pointer;opacity:0;transition:opacity .2s}
.ai-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:34px;line-height:44px;text-align:center;cursor:pointer}
#ai-prev{left:-56px} #ai-next{right:-56px}
.ai-nav:hover{background:rgba(0,0,0,.65)}

#ai-modal .ai-box:hover #ai-close{opacity:1}

/* ----------  RIGHT PANEL  ------------------------------------------ */
/* ----------  RIGHT PANEL  — solid background  ---------------------- */
#ai-info{
  max-width:24vw;
  min-width:240px;
  display:flex;
  flex-direction:column;
  font-size:18px;
  color:#eee;
  background:#0b0b0b;        /* solid panel */
  border-radius:12px;
  padding:18px 18px 16px;
  box-shadow:0 0 20px rgba(0,0,0,.35);
}


/* prompt text – scrollable if too long */
.ai-hd{margin:0 0 6px;font-size:20px}
.ai-pr-full{
    max-height:220px;overflow-y:auto;
    line-height:1.5em;margin:0 0 10px;
}

/* copy-prompt button */
.ai-copy{
    align-self:flex-start;
    background:#3d8bfd;border:0;border-radius:5px;
    padding:7px 14px;margin-bottom:20px;
    color:#fff;font-size:16px;cursor:pointer
}

/* purple separator */
.ai-sep{border:0;border-top:2px solid #7e3ff2;margin:22px 0}

/* Meta grid (Model / Style / Seed / Dimensions) */
.ai-meta{
    list-style:none;margin:0 0 24px;padding:0;
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:34px;row-gap:22px
}
.ai-meta li{display:flex;align-items:center;gap:10px;font-size:17px}
.ai-meta i{width:20px;font-size:18px;text-align:center;opacity:.85}

/* Actions row (Download / Add / Copy) */
.ai-actions,
.ai-share2{
    list-style:none;margin:0 0 24px;padding:0;
    display:grid;grid-template-columns:repeat(3,auto);
    column-gap:34px;row-gap:18px
}
.ai-actions a,
.ai-share2 a{
    display:flex;align-items:center;gap:10px;
    color:#ddd;text-decoration:none;font-size:17px
}
.ai-actions a:hover,
.ai-share2 a:hover{color:#fff}
.ai-actions i,
.ai-share2 i{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;background:#7e3ff2;color:#fff
}

/* hide the now-unused third separator */
.ai-actions + .ai-sep{display:none}

.ai-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 30px;
}

.ai-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 30px;
}

.ai-share2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 30px;
}

/* ► VOTE BAR in the modal (partial + full-page zoom) */
.ai-vote-bar{
  display:flex;
  gap:10px;
  margin:8px 0 6px;
}
.ai-vote-bar .ai-like,
.ai-vote-bar .ai-dislike{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:96px;
  height:34px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #333;
  background:#171717;
  color:#eee;
  font-size:15px;
  cursor:pointer;
}
.ai-vote-bar .ai-like:hover,
.ai-vote-bar .ai-dislike:hover{background:#1f1f1f;border-color:#3a3a3a}
.ai-vote-bar .ai-like b,
.ai-vote-bar .ai-dislike b{min-width:20px;text-align:center}
.ai-vote-bar .ai-like.on{border-color:#2ecc71;background:rgba(46,204,113,.16);color:#e9fff1}
.ai-vote-bar .ai-dislike.on{border-color:#ff5c5c;background:rgba(255,92,92,.14);color:#ffecec}

/* --------------------------------------------------------------------- *
 *  THUMB GRID BREAKPOINTS
 * --------------------------------------------------------------------- */
@media(max-width:768px){.ai-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1040px){.ai-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1250px){.ai-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1460px){.ai-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1461px){.ai-grid{grid-template-columns:repeat(5,1fr)}}

/* --------------------------------------------------------------------- *
 *  MOBILE  – slide-out folder drawer
 * --------------------------------------------------------------------- */
@media(max-width:1120px){
  .st-left,.st-fold{display:none}
  .st-flex{flex-direction:column}

  .st-fold-btn{
      position:fixed;top:80px;right:22px;z-index:1400;
      width:20px;height:30px;border-radius:50%;
      background:#7e3ff2;color:#fff;border:0;font-size:26px;
      display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0004
  }
  .st-fold-btn:active{transform:scale(.92)}

  #foldDrawer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1390;justify-content:flex-end}
  #foldDrawer .st-fold{
      display:block;width:240px;max-width:80vw;height:calc(100% - 60px);
      margin-top:60px;background:rgba(0,0,0,.85);overflow-y:auto;
      animation:slideIn .25s ease-out both
  }
  @keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
}

/* --------------------------------------------------------------------- *
 *  ADD / DELETE MODALS
 * --------------------------------------------------------------------- */
#add-modal,#confirm-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1100;align-items:center;justify-content:center}
#add-box{background:#2c2c2c;color:#fff;padding:24px 28px 20px;border-radius:14px;min-width:260px}
#add-box select,#add-box button{width:100%;font-size:15px}
#add-box button{margin-top:10px;background:#7e3ff2;color:#fff;border:0;padding:7px 0;border-radius:6px;cursor:pointer}

#confirm-box{background:#2c2c2c;color:#fff;padding:22px 26px 20px;border-radius:14px;width:260px;max-width:86vw;font-size:15px}
#confirm-box button{padding:7px 0;border:0;border-radius:6px;width:110px;cursor:pointer}
#confirm-box .btn-flat{background:#555}#confirm-box .btn-flat:hover{background:#666}
#confirm-box .btn-red{background:#d83131}#confirm-box .btn-red:hover{background:#c01e1e}

/* --------------------------------------------------------------------- *
 *  (GLOBAL) KILL BULLETS / LEFT PADDING FOR ALL KEY LISTS
 * --------------------------------------------------------------------- */
.ai-meta,
.ai-actions,
.ai-share2,
.ai-meta li,
.ai-actions li,
.ai-share2 li{
    list-style:none;
    margin:0;
    padding:0;
}
.ai-meta li::marker,
.ai-actions li::marker,
.ai-share2 li::marker{content:''}


.st-fold-btn{ z-index:800 !important; }


/* ------------------------------------------------------------------ *
 *  THUMB GRID  &  SIDEBAR VISIBILITY
 * ------------------------------------------------------------------ */
@media (min-width:1461px){ .ai-grid{grid-template-columns:repeat(5,1fr);} }
@media (max-width:1460px){ .ai-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:1250px){ .ai-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:1040px){ .ai-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px ){ .ai-grid{grid-template-columns:repeat(2,1fr);} }

/* ═══════════ EXTRA SPACING (desktop) ═══════════ */
.ai-actions{ column-gap:46px; }
.ai-share2 { column-gap:46px; }
.ai-share2{ margin-top:14px; }

/* ═══════════ Responsive right-panel width ═══════ */
@media(max-width:1250px){ #ai-info{ max-width:28vw; } }
@media(max-width:1040px){ #ai-info{ max-width:32vw; } }
@media(max-width: 900px){ #ai-info{ max-width:38vw; } }
@media(max-width: 820px){ #ai-info{ max-width:44vw; } }
@media(max-width:1040px){
    .ai-meta,.ai-actions,.ai-share2{ column-gap:26px; }
}

/* put this _after_ the old rule or just delete the old rule altogether */
@media (max-width:980px){
    #ai-prev,#ai-next{ display:flex !important; }
}

/* keep arrows 10 px inside the picture instead of −56 px outside */
.ai-img-wrap #ai-prev { left:10px;  }
.ai-img-wrap #ai-next { right:10px; }


@media (max-width: 700px) {
  #ai-info {
    width: 100%;
    max-width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;
  }

  .ai-pr-full {
    max-height: 4.8em;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.6em;
    margin-bottom: 20px;
    padding-right: 4px;
  }

  /* Fix arrows to align with image height instead of screen */
  .ai-box {
    position: relative;
  }


  #ai-prev {
    left: 14px;
  }

  #ai-next {
    right: 14px;
  }
}




/* Hide the mobile drawer & button once the viewport is wider than 768 px */
@media (min-width: 1120px){
    #foldDrawer,
    .st-fold-btn{
        display:none !important;
    }
}

/* ────────────────────────────────────────────────────────── *
 *  MOBILE (≤ 700 px)
 * ────────────────────────────────────────────────────────── */
 @media (max-width:1120px){
 #ai-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.92);overflow-y:auto;overflow-x:hidden;width:100vw;height:100vh;padding:0;margin:0}
 #ai-modal .ai-box{display:block;width:100vw;max-width:100vw;box-sizing:border-box;margin:0;padding:0}
 #ai-img{width:100vw;max-height:70vh;display:block;object-fit:contain;border-radius:0;box-shadow:none}
 #ai-close{display:block!important;top:10px;right:10px;z-index:2000}
 .ai-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;background:rgba(0,0,0,0.6);color:#fff;font-size:30px;border-radius:50%;display:flex!important;align-items:center;justify-content:center;z-index:1010}
 #ai-prev{left:10px}
 #ai-next{right:10px}
 #ai-info{
     width:100vw;
     max-width:100vw;
     padding:20px 16px;
     box-sizing:border-box;
     color:#eee;
     font-size:17px;
     background:#0b0b0b;      /* keep solid on mobile too */
     border-radius:0;         /* flush full-width panel */
     margin:0;
   }
 .ai-hd{margin:0 0 6px;font-size:20px}
 .ai-pr-full{max-height:4.8em;overflow-y:auto;overflow-x:hidden;line-height:1.6em;margin-bottom:20px;scrollbar-gutter:stable both-edges}
 .ai-meta,.ai-actions,.ai-share2{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;width:100%}
 .ai-meta li,.ai-actions a,.ai-share2 a{display:flex;align-items:center;gap:10px;font-size:17px;color:#ddd;text-decoration:none}
 .ai-actions a:hover,.ai-share2 a:hover{color:#fff}
 .ai-actions i,.ai-share2 i{width:24px;height:24px;background:#7e3ff2;color:#fff;border-radius:50%;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
 .ai-meta i{width:20px;text-align:center;opacity:0.85}
 }


 /* 1️⃣  Make ai-pr-full use the whole width on smaller screens */
@media (max-width: 1120px){
    .ai-pr-full{
        max-width:100%;
        padding-right:0;
    }
}

/* 2️⃣  Drop the zoom-modal X (close) a little lower */
@media (max-width: 1120px){
    #ai-close{
        top:20px;
        right:20px;
    }
}


/* ─────────────────────────────────────────────
 *  A. hide ANY st-fold-btn that ends up inside
 *     the zoom-modal (safety-net)
 * ────────────────────────────────────────── */
#ai-modal .st-fold-btn{display:none !important;}

/* ░░░  DESKTOP (≥ 1121 px) – put arrows back outside the picture  ░░░ */
@media (min-width:1121px){
    .ai-img-wrap #ai-prev{ left:-56px; }
    .ai-img-wrap #ai-next{ right:-56px; }
}

/* ░░░  show the arrows on any viewport wider than 980 px  ░░░ */
@media (min-width:981px){
    #ai-prev,#ai-next{ display:flex !important; }
}


/* ─────────────────────────────────────────────
 *  B. centre the zoom box & give it 20 px top
 *     margin on screens below 1120 px
 * ────────────────────────────────────────── */
 @media(max-width:1120px){

     /* breathing space + centring */
     #ai-modal{align-items:flex-start;justify-content:center;padding-top:10px}
     #ai-modal .ai-box{display:block;width:100vw;max-width:100vw;margin:0 auto}
     #ai-img{
         margin:10px auto 0;
         max-width:calc(100vw - 20px);
         max-height:70vh;
         display:block;
     }

     /* close ✕ sits on the picture */
     #ai-close{
         position:absolute;
         top:22px;
         right:22px;
         opacity:1!important;
         z-index:1011;
     }

     .ai-img-wrap{position:relative;display:inline-block;}

     .ai-nav{
         position:absolute;top:50%;transform:translateY(-50%);
         width:42px;height:42px;border-radius:50%;
         display:flex;align-items:center;justify-content:center;
         background:rgba(0,0,0,.65);color:#fff;font-size:30px;
         z-index:1010;
     }
     #ai-prev{left:-50px;}
     #ai-next{right:-50px;}

 }

 /* —— Tighten modal layout: no gap between image and info panel —— */
#ai-modal .ai-box{ gap:0; }

/* Make edges meet perfectly */
#ai-img{
  border-radius:12px 0 0 12px;   /* left panel rounded, right edge straight */
}

#ai-info{
  border-radius:0 12px 12px 0;   /* left edge straight, right rounded */
  margin-left:0;                 /* just in case */
}

/* Keep mobile stacked look */
@media (max-width:1120px){
  #ai-modal .ai-box{ gap:0; }
  #ai-img{ border-radius:0; }
  #ai-info{ border-radius:0; }
}


/* ───── Rool UI (Start/Stop + status bar) ───── */
.ai-wrap { position: relative; }
.ai-rool-btn{
  position:absolute; left:8px; bottom:8px;
  background:#7e3ff2; color:#fff; border-radius:8px;
  padding:6px 10px; font-size:13px; text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:.92; transition:transform .08s ease, opacity .15s;
}
.ai-rool-btn:hover{ opacity:1; transform:translateY(-1px); }
.ai-rool-btn.is-busy{ pointer-events:none; opacity:.65; }

#rool-status{
  position:fixed; right:16px; bottom:16px; z-index:1400;
  background:#1f1f1f; color:#eaeaea; border:1px solid #333;
  border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.45);
}
#rool-status .rool-inner{ padding:10px 12px; display:flex; gap:12px; align-items:center; }
#rool-status .rool-line{ font-size:14px; }
#rool-status .dot{ margin:0 6px; color:#7e3ff2; }
#rool-status .rool-stop{
  background:#e05555; color:#fff; border:0; border-radius:8px;
  font-size:13px; padding:6px 10px; cursor:pointer;
}
#rool-status .rool-stop:hover{ background:#d64343; }

/* ===========================
   Stroon AI — Gallery / Modal
   =========================== */

/* --- Modal shell/layout ---------------------------------- */
#ai-modal {position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); z-index:2000; padding:24px;}
#ai-modal .ai-box {display:grid; grid-template-columns:minmax(280px,58vw) 360px; gap:16px;
  width:clamp(720px, 90vw, 1200px); max-height:92vh;}
#ai-modal .ai-img-wrap {position:relative; background:#0b0b0b; border-radius:14px; overflow:hidden;}
#ai-modal #ai-img {width:100%; height:auto; display:block; object-fit:contain; max-height:92vh;}
#ai-modal .ai-nav {position:absolute; top:50%; transform:translateY(-50%); font-size:36px; color:#fff;
  width:44px; height:44px; line-height:44px; text-align:center; border-radius:50%;
  background:rgba(0,0,0,.35); cursor:pointer; user-select:none;}
#ai-modal #ai-prev {left:10px;} #ai-modal #ai-next {right:10px;}
#ai-modal #ai-close {position:absolute; right:18px; top:10px; color:#fff; font-size:28px;
  cursor:pointer; z-index:3;}

/* Sidebar container */
#ai-info {background:#0e0e0e; border:1px solid #222; border-radius:14px; padding:14px; color:#e8e8e8;
  overflow:auto; max-height:92vh;}
#ai-info .ai-hd {margin:6px 0 6px; font-size:14px; color:#bdbdbd; text-transform:uppercase; letter-spacing:.06em;}
#ai-info .ai-pr-full {white-space:pre-wrap; line-height:1.45; color:#ddd; margin:6px 0 10px;}
#ai-info .ai-copy {background:#1f1f1f; border:1px solid #2b2b2b; color:#eee; padding:6px 10px;
  border-radius:8px; cursor:pointer; font-size:12px;}
#ai-info .ai-copy:hover {background:#262626}

/* Generation details */
#ai-gen-details {border:1px solid #232323; border-radius:10px; padding:8px; background:#0b0b0b;}
#ai-gen-details > summary {list-style:none; cursor:pointer; color:#c5c5c5; font-weight:600;}
#ai-gen-details > summary::-webkit-details-marker {display:none}
#ai-gen-details > summary:before {content:"▸"; margin-right:6px; transition:transform .2s ease;}
#ai-gen-details[open] > summary:before {transform:rotate(90deg)}
.ai-meta {margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px;}
.ai-meta li {display:flex; align-items:center; gap:8px; font-size:13px; color:#e3e3e3;}
.ai-meta li i {opacity:.85; width:16px; text-align:center}
#ai-info .ai-sep {border:0; height:1px; background:linear-gradient(90deg, transparent, #222, transparent);
  margin:14px 0}

/* Voting bar + timer */
.ai-vote-bar {display:flex; align-items:center; gap:8px; margin:8px 0 10px}
.ai-like, .ai-dislike {background:#181818; border:1px solid #2a2a2a; color:#ddd; padding:6px 10px;
  border-radius:8px; cursor:pointer; min-width:84px; display:flex; align-items:center; gap:8px;}
.ai-like.on, .ai-like:hover {border-color:#2f8d46; background:#112316; color:#d9ffd4}
.ai-dislike.on, .ai-dislike:hover {border-color:#924343; background:#201010; color:#ffdcdc}
#m-left-wrap {background:#101010; border:1px solid #2a2a2a; padding:4px 8px; border-radius:999px;}
#m-left {font-variant-numeric: tabular-nums;}

/* Share popover */
#m-share-pop {background:#0d0d0d; border:1px solid #2a2a2a; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.5)}
#m-share-pop a {display:flex; align-items:center; gap:10px; color:#ddd; padding:8px 10px; text-decoration:none; border-radius:8px}
#m-share-pop a:hover {background:#151515}

/* Thoughts block (read mode in sidebar) */
#ai-thoughts {background:#0b0b0b; border:1px solid #232323; border-radius:10px}
#ai-thoughts-body {white-space:pre-wrap; line-height:1.45}

/* Actions list */
.ai-actions {display:grid; grid-template-columns:1fr 1fr; gap:8px; list-style:none; padding:0; margin:0}
.ai-actions li a {display:flex; align-items:center; gap:8px; background:#151515; border:1px solid #2a2a2a;
  color:#e6e6e6; padding:8px 10px; border-radius:8px; text-decoration:none;}
.ai-actions li a:hover {background:#1b1b1b}

/* --- Start Rool button on cards --------------------------- */
.ai-rool-btn {position:absolute; left:12px; right:12px; bottom:12px; display:inline-flex; justify-content:center;
  gap:8px; padding:8px 10px; font-weight:700; border-radius:10px; text-decoration:none; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,#7e3ff2,#5b2bd1); border:0; box-shadow:0 6px 18px rgba(126,63,242,.35);}
.ai-rool-btn:hover {filter:brightness(1.05)}
.ai-rool-btn.is-busy {pointer-events:none; opacity:.75}
.ai-rool-btn.is-busy:after {content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:roolspin 0.8s linear infinite; margin-left:6px}
@keyframes roolspin {to {transform:rotate(360deg)}}



/* --- Thoughts editor modal (appears right after Start) ----- */
#thoughts-modal {position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); z-index:2200; padding:24px;}
#thoughts-modal .t-box {width:min(560px, 92vw); background:#0d0d0d; color:#eee; border:1px solid #2a2a2a;
  border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.55);}
#thoughts-modal .t-hd {font-weight:800; margin-bottom:8px}
#thoughts-modal .t-sub {color:#bdbdbd; font-size:13px; margin-bottom:10px}
#thoughts-modal textarea {width:100%; min-height:130px; resize:vertical; background:#111; color:#f2f2f2;
  border:1px solid #2a2a2a; border-radius:10px; padding:10px; line-height:1.45;}
#thoughts-modal .t-row {display:flex; justify-content:flex-end; gap:8px; margin-top:10px}
#thoughts-modal .btn {background:#1b1b1b; border:1px solid #2a2a2a; color:#eaeaea; padding:8px 12px; border-radius:10px; cursor:pointer}
#thoughts-modal .btn.primary {background:linear-gradient(135deg,#7e3ff2,#5b2bd1); border:0; color:#fff; font-weight:700}
#thoughts-modal .btn:hover {filter:brightness(1.05)}

/* --- Responsive tweaks ------------------------------------- */
@media (max-width: 1100px) {
  #ai-modal .ai-box {grid-template-columns:1fr; width:min(92vw, 900px)}
  #ai-info {max-height:50vh}
}

/* =========================================================
   STROON ROOL — SIZE + COUNT + RATIO  (append at the end)
   ========================================================= */

/* Tweakables */
:root{
  /* card width so 4 fit comfortably in a 65% container */
  --rool-card-w: clamp(130px, 14.5vw, 165px);
  /* ~30% shorter height vs typical portrait → approx 2:1 */
  --rool-aspect: 2 / 1;
}

/* 1) Container 65% wide & centered */
.stroon-rool-wrap{
  width:100% !important;
  max-width:65% !important;
  margin:18px auto 26px !important;
}
@media (max-width: 980px){
  .stroon-rool-wrap{ max-width:100% !important; }
}

/* 2) Exactly 4 cards visible; drag/scroll on mobile */
.stroon-rool-strip{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns: repeat(4, var(--rool-card-w)) !important;
  grid-auto-columns: var(--rool-card-w) !important;
  gap:12px !important;
  padding:6px 2px !important;

  overflow-x:auto !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (max-width: 920px){
  .stroon-rool-strip{ grid-template-columns: repeat(3, var(--rool-card-w)) !important; }
}
@media (max-width: 560px){
  .stroon-rool-strip{ grid-template-columns: repeat(2, var(--rool-card-w)) !important; }
}

/* 3) Card width strictly controlled by the grid */
.stroon-rool-wrap .rool-card{
  min-width: var(--rool-card-w) !important;
  max-width: var(--rool-card-w) !important;
  width:auto !important;
  scroll-snap-align:start;
}

/* 4) ~30% shorter thumbs (height reduced via aspect-ratio) */
.stroon-rool-wrap .rool-img{
  position:relative;
  width:100%;
  aspect-ratio: var(--rool-aspect); /* ~2:1 */
  background:#0e0e0e;
  overflow:hidden;
}
.stroon-rool-wrap .rool-img img{
  width:100% !important;
  height:100% !important;           /* override old fixed 155px */
  object-fit:cover !important;
  display:block;
}

/* 5) More rows for author/text (no font-size change) */
.stroon-rool-wrap .rool-author a{
  white-space:normal !important;
  display:-webkit-box;
  -webkit-line-clamp:3;             /* up to 3 lines */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 6) Arrow styling (right arrow sits over the strip edge) */
.stroon-rool-wrap{ position:relative; }
.stroon-rool-wrap .stroon-rool-nav{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  display:flex; gap:8px; pointer-events:none;
}
.stroon-rool-wrap .stroon-rool-nav .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;
}

/* ── Optional: support the alternative .ai-rool-* markup too ── */
.ai-rool-strip{ position:relative; width:100% !important; max-width:65% !important; margin:18px auto 26px !important; }
@media (max-width: 980px){ .ai-rool-strip{ max-width:100% !important; } }

.ai-rool-viewport{ overflow:hidden !important; }
.ai-rool-track{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-columns: repeat(4, var(--rool-card-w)) !important;
  grid-auto-columns: var(--rool-card-w) !important;
  gap:12px !important; padding:6px 2px !important;
}
@media (max-width: 920px){
  .ai-rool-track{ grid-template-columns: repeat(3, var(--rool-card-w)) !important; }
}
@media (max-width: 560px){
  .ai-rool-track{ grid-template-columns: repeat(2, var(--rool-card-w)) !important; }
}

.ai-rool-strip .rool-card{
  min-width: var(--rool-card-w) !important;
  max-width: var(--rool-card-w) !important;
}
.ai-rool-strip .rool-thumb{
  position:relative; width:100%; aspect-ratio: var(--rool-aspect); background:#0e0e0e; overflow:hidden;
}
.ai-rool-strip .rool-thumb img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
.ai-rool-strip .rool-nav{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  display:flex; gap:8px; pointer-events:none;
}
.ai-rool-strip .rool-nav .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;
}