/*! Stroon Extend — AI Tools CSS (right-rail focused)
 *  Scope: page-image-tools.php (Generator + Latest Rools + Right Rail)
 *  Notes:
 *   - Left sidebar styles were REMOVED to avoid double-styling the global profile-module.
 *   - Right rail width is controlled by --ai-right-w (default 340px).
 *
 *  UPDATE v2025.12.28:
 *   - Desktop (>1120px): settings button hidden; Generate is full-height until Start Rool becomes enabled.
 *   - When Start Rool is enabled: Generate shrinks and Start Rool shows under it (same size).
 *   - Mobile (≤1120px): Generate + Start Rool + Settings are one row, same size.
 *   - Start Rool is BLUE and pulses when enabled (all sizes).
 *   - Add grey “Models • Dimensions • Style mixer” hint near prompt.
 *
 *  UPDATE v2025.12.30:
 *   - If JS kills slideshow after Generate, force-hide the stop button (safety).
 *
 *  UPDATE v2025.12.30.no-inner-scroll:
 *   - Mobile settings are no longer a fixed bottom drawer with overflow:auto (which caused scrollbars).
 *   - Settings panel is shown inline (no internal scrollbars); the page itself scrolls normally.
 */

/* ===== Reset-ish bits for our scope =================================== */
:root{
  --ai-right-w: 340px;

  /* Button block width (desktop, to the right of prompt) */
  --ai-actions-w: 320px;

  /* Button row height (mobile) */
  --ai-btn-h: 44px;
}
.st-ai-flex * { box-sizing: border-box; }
.st-ai-flex img { max-width: 100%; height: auto; }

/* ===== Layout ========================================================== */
.st-ai-flex{ display:flex; min-height:80vh; width:100%; }

/* No .st-left rules here — handled by global profile-module */

.st-cent{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:6px 6px 0px 120px;
}

.st-right{
  flex:0 0 var(--ai-right-w);
  width:var(--ai-right-w);
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:12px 12px 12px 8px;
  font-size:12px;
}

/* ===== Top bar (single system, panel look) ============================ */
.ai-topbar{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"title ctas";
  align-items:center;
  gap:20px;

  padding:10px 14px;
  margin:8px 10px 6px;
  border-radius:14px;

  background:#1f1f2a; /* SAME as .panel */
  border:1px solid rgba(159,177,255,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.04);
}

.ai-titleblock{ grid-area:title; min-width:0; }

/* Title row + hover tooltip */
.ai-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:clamp(16px,1.2vw,20px); /* smaller title */
  line-height:1.15;
  margin:0;
  position:relative;
}

/* YOUR icon */
.ai-gen-icon{
  width:30px;
  height:30px;
  background:url('https://stroon.uk/wp-content/uploads/2025/07/imagegenerator.png') no-repeat center;
  background-size:contain;
  display:inline-block;
  transform:scale(0.85);
  transform-origin:center;
  filter:brightness(0) invert(1);
  opacity:.95;
}

/* Tall + thin tooltip (2 lines, solid background) */
.ai-title[data-tip-line1]::after{
  content:attr(data-tip-line1) "\A\A" attr(data-tip-line2);
  white-space:pre-wrap;

  position:absolute;
  left:0;
  top:calc(100% + 10px);

  width:240px;              /* thin */
  max-width:240px;
  padding:10px 12px;

  border-radius:12px;
  background:#232334;       /* solid, not transparent */
  border:1px solid rgba(159,177,255,.28);
  box-shadow:0 16px 40px rgba(0,0,0,.55);

  color:#eaf0ff;
  font-size:12px;
  line-height:1.35;

  opacity:0;
  transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
  pointer-events:none;
  z-index:80;
}

.ai-title:hover::after{
  opacity:1;
  transform:translateY(0);
}

.ai-cta-wrap{
  grid-area:ctas;
  display:grid;
  grid-template-columns:repeat(2,minmax(180px, auto));
  gap:8px;
}
.ai-cta{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 11px;
  border-radius:12px; text-decoration:none;
  background:linear-gradient(135deg, rgba(126,63,242,.18), rgba(107,123,255,.18));
  border:1px solid rgba(159,177,255,.28);
  box-shadow:0 4px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  color:#eaf0ff;
}
.ai-cta .t1{font-size:14px;font-weight:700;color:#e9edff;}
.ai-cta .t2{margin-top:2px;font-size:12px;color:#cbd4ff;opacity:.9}

/* Custom cup icon for Achievements */
.ai-cta-hof .ai-cta-cup{
  display:inline-block;width:32px;height:32px;
  background:url('https://stroon.uk/wp-content/uploads/2025/06/halloffame.svg') no-repeat center/contain;
  text-indent:-9999px; overflow:hidden; transform:scale(0.7); transform-origin:center;
  filter:brightness(0) invert(1);
}
.ai-cta-hof:hover .ai-cta-cup{ opacity:0.85; filter:brightness(1.1) invert(1); }

/* ===== Latest Rools (slideshow + side card) ============================ */
.st-latest-rool{ width:100%; margin-top:4px; }
.latest-rool-shell{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(260px, 1fr);
  column-gap:12px;
  align-items:stretch;
}
.latest-rool-main{ display:flex; justify-content:center; align-items:stretch; }
.latest-rool-frame{
  position:relative; width:100%; max-width:960px; aspect-ratio:1/1;
  border-radius:16px; overflow:hidden; box-shadow:0 0 18px #0007; background:#000;
}
.latest-rool-frame img{ width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.latest-rool-frame .hidden{ display:none }

/* Sponsored label (optional) */
.ai-ad-badge{
  position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:800;
  border:1px solid rgba(255,255,255,.25); z-index:6;
}

/* Stop/Resume button on frame */
.ai-latest-stop{
  position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.42);
  background:rgba(10,12,28,.78); backdrop-filter:blur(6px);
  color:#f1f5ff; font-size:12px; font-weight:700; cursor:pointer; z-index:5;
}
.ai-latest-stop .label-main{ font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.ai-latest-stop .label{ font-size:11px; opacity:.85; }
.ai-latest-stop .pulse-dot{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:pulse-dot 1.2s ease-out infinite;
}
.ai-latest-stop.is_paused .pulse-dot{ background:#f97316; box-shadow:0 0 0 0 rgba(249,115,22,.7); }
@keyframes pulse-dot{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,.7);}
  70%{transform:scale(1.6);box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0);}
}

/* NEW: if JS kills slideshow after Generate, force-hide button */
body.st-slideshow-killed #latest-rool-stop{
  display:none !important;
}

.latest-rool-side{ display:flex; }
.latest-rool-card{
  width:100%;
  background:#1f1f29;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Header: avatar + name + inline stats */
.latest-rool-card .side-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.06);
}
.latest-rool-card .author{ display:flex; align-items:center; gap:8px; }
.latest-rool-card .author .ava{
  width:36px; height:36px; border-radius:999px; overflow:hidden; flex-shrink:0;
}
.latest-rool-card .author .ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.latest-rool-card .author .name{ font-size:13px; font-weight:700; color:#f4f4ff; }

/* Inline stat pills */
.latest-rool-card .inline-stats{ display:flex; flex-wrap:wrap; gap:4px; }
.latest-rool-card .inline-stats .pill{
  border-radius:999px; border:1px solid rgba(230,230,255,.5);
  background:rgba(10,10,18,.9); color:#f7f7ff; padding:2px 8px; font-size:11px;
  display:inline-flex; align-items:center; gap:4px;
}

/* Boxes: Title/Desc + Prompt + Generation meta ========================= */
.latest-rool-box{
  margin-top:6px; border-radius:10px; background:#141421;
  border:1px solid rgba(255,255,255,.10); overflow:hidden;
}
.latest-rool-box-title{
  padding:6px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:#cfd7ff; background:rgba(18,18,30,.9);
}
.latest-rool-box-body{ padding:8px 10px; }

.latest-rool-title-text{ font-size:13px; font-weight:700; margin-bottom:2px; color:#f4f4ff; }
.latest-rool-desc-text{ font-size:12px; line-height:1.45; color:#d1d5f0; opacity:.9; }
.latest-rool-desc-text.is-empty{ font-style:italic; opacity:.6; }

/* Prompt preview */
.latest-rool-prompt{
  font-size:12px; line-height:1.45; color:#e9edff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Generation details list */
.latest-rool-meta{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:12px;
}
.latest-rool-meta li{ list-style:none; display:flex; align-items:center; gap:10px; line-height:1.3; }
.latest-rool-meta li i.fa-solid{ width:18px; text-align:center; opacity:.95; }
.latest-rool-meta li[data-k="model"]  i.fa-solid{ color:#a1a1ff; }
.latest-rool-meta li[data-k="seed"]   i.fa-solid{ color:#7bd389; }
.latest-rool-meta li[data-k="dims"]   i.fa-solid{ color:#ff9e7d; }
.latest-rool-meta li[data-k="style"]  i.fa-solid{ color:#e39bff; }
.latest-rool-meta li strong{ color:#aab; font-weight:700; margin-right:4px; }

/* Full details button */
.latest-rool-full-btn{
  margin-top:10px; width:100%; min-height:54px; border-radius:10px; border:none;
  background:#2563eb; color:#fff; font-size:15px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.latest-rool-full-btn i{ font-size:16px; }
.latest-rool-full-btn[disabled]{ opacity:.45; cursor:default; }

/* ===== Start Rool (BLUE) ============================================== */
.latest-rool-start-btn{
  width:100%;
  border-radius:10px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transform-origin:center;
}
.latest-rool-start-btn[aria-disabled="true"],
.latest-rool-start-btn[disabled]{
  opacity:.55;
  cursor:default;
  animation:none;
}

/* Pulse when enabled */
.latest-rool-start-btn[aria-disabled="false"]{
  animation: st-rool-breathe 1.05s ease-in-out infinite;
}
@keyframes st-rool-breathe{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
  100%{ transform:scale(1); }
}

/* ===== Prompt row ====================================================== */
.prompt-row{
  display:flex;
  align-items:stretch;
  gap:10px;
  width:min(1040px,100%);
  margin:0 auto;
}

/* Prompt textarea */
.st-prompt{
  flex:1 1 auto;
  min-height:92px;
  background:#262633;
  border:1px solid #34344a;
  border-radius:10px;
  padding:12px 12px 12px 14px;
  color:#fff;
  font-size:1rem;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Button block (desktop) */
.prompt-actions{
  flex:0 0 var(--ai-actions-w);
  width:var(--ai-actions-w);
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  margin-left:auto;
}

/* Generate button base */
.st-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:none;
  border-radius:10px;
  color:#fff;
  padding:0 16px;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
  background:#7e3ff2;

  width:100%;
}

/* Desktop behavior */
@media (min-width: 1121px){
  .st-settings-btn{ display:none !important; }

  #latest-rool-start-btn{ height:100%; }
  #latest-rool-start-btn[aria-disabled="true"]{ display:none; }
  #latest-rool-start-btn[aria-disabled="false"]{
    display:inline-flex;
    flex:1 1 0;
  }

  .prompt-actions .st-btn{
    flex:1 1 auto;
    height:100%;
  }

  .prompt-actions:has(#latest-rool-start-btn[aria-disabled="false"]) .st-btn{
    flex:1 1 0;
    height:auto;
  }
}

/* Grey hint text (desktop only) */
.st-settings-hint{
  width:min(1040px,100%);
  margin:6px auto 0;
  display:flex;
  justify-content:flex-end;
}
.st-settings-hint .hint-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:#dfe6ff;
  font-size:12px;
  font-weight:800;
}
.st-settings-hint .hint-pill .dot{ opacity:.7; }

/* Settings button (single definition, used under 1120px) */
.st-settings-btn{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;

  min-height:54px;
  padding:8px 12px;

  border-radius:10px;
  border:1px solid rgba(159,177,255,.28);
  background:linear-gradient(135deg, rgba(126,63,242,.18), rgba(107,123,255,.18));
  box-shadow:0 4px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  color:#eaf0ff;
  cursor:pointer;

  width:100%;
}

.st-settings-btn .st-set-top{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:14px;
  line-height:1.1;
}

.st-settings-btn .st-set-hint{
  display:none;
  font-size:11px;
  opacity:.88;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

/* Only show the hint line below 1120px */
@media (max-width: 1120px){
  .st-settings-btn .st-set-hint{ display:block; }
}

/* Powered by (placed above footer) */
.powered-inline{
  width:100%;
  text-align:center;
  margin:14px 0 18px;
  font-size:12px;
  color:#cfd7ff;
  opacity:.95;
}
.powered-inline a{
  color:#eaf0ff;
  font-weight:900;
  text-decoration:none;
  border-bottom:1px dotted rgba(207,215,255,.55);
}
.powered-inline a:hover{ text-decoration:underline; }

/* ===== Right-rail Panels ============================================== */
.panel{
  background:#1f1f2a;
  border:1px solid rgba(159,177,255,.25);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.04);
  padding:11px;
  font-size:12px;
}

/* Header = grey label */
.panel h4{
  margin:0 0 10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#e9edff;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  padding:7px 9px;
  border-radius:10px;
}

.h4-model i{color:#6fb8ff;}
.h4-dim i{color:#2dd4bf;}
.h4-seed i{color:#22c55e;}
.h4-style i{color:#b48cff;}

.row{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.row .inline{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }

/* Model grid (6 items) */
.model-panel{ position:relative; }
.model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.model-item{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:linear-gradient(180deg,#1b1a2a,#141423); overflow:hidden; cursor:pointer;
  transition:transform .08s, box-shadow .15s, border-color .15s;
}
.model-item:hover{ transform:translateY(-1px); border-color:rgba(180,140,255,.38); box-shadow:0 10px 22px rgba(0,0,0,.35); }
.m-thumb{ width:100%; height:0; padding-top:70%; background:#23223a center/cover no-repeat; }
.m-row{ display:flex; align-items:center; justify-content:center; padding:6px 8px; }
.m-name{ font-weight:900; letter-spacing:.02em; font-size:.86rem; color:#eaf0ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-badge{
  position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:#7e3ff2; color:#fff; font-size:.72rem; opacity:0;
}
.model-item.active .m-badge{ opacity:1; }

/* Inputs ================================================================ */
input[type=number], input[type=text]{
  background:#151521; color:#fff; border:1px solid #34344a; border-radius:8px; padding:8px 10px; font-size:.86rem;
}
input[type=checkbox]{ width:16px; height:16px; accent-color:#7e3ff2; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:.76rem; color:#e9edff; border:1px solid rgba(255,255,255,.18); background:rgba(32,30,45,.55); }
.ratios{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px }
.ratio-pill{ cursor:pointer; user-select:none; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(30,28,44,.6); color:#e9edff; font-weight:700; font-size:.82rem; }
.ratio-pill.active{ border-color:#b48cff; box-shadow:0 0 0 2px rgba(180,140,255,.2) inset }

/* Seed + checkboxes */
.panel .row label{ font-size:.8rem; color:#dfe6ff; opacity:.95 }
#s-seed{ width:160px }
#btn-dice{ font-size:.9rem }

/* Style mixer =========================================================== */
:root{
  --style-row-h: 74px;
  --style-gap: 10px;
  --style-slider-h: 18px;
}
.style-panel{ position:relative; }
.style-list{
  position:relative; display:flex; flex-direction:column; gap:var(--style-gap);
  max-height:calc(3 * var(--style-row-h) + 2 * var(--style-gap));
  overflow:auto; padding-right:2px; scrollbar-width:none; -ms-overflow-style:none;
}
.style-list::-webkit-scrollbar{ display:none; }

.style-row{
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) 56px;
  grid-template-rows:auto var(--style-slider-h);
  grid-template-areas:
    "thumb label label"
    "thumb slider percent";
  gap:5px 8px;
  align-items:center;
  position:relative;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#1a1926;
  min-height:var(--style-row-h);
}

/* Example images */
.style-thumb{
  grid-area:thumb;
  width:54px; height:46px;
  border-radius:8px;
  background:#2b2940;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  padding:3px;
  align-self:center;
}
.style-thumb img{
  width:calc(50% - 1.5px);
  height:calc(50% - 1.5px);
  object-fit:cover;
  display:block;
  border-radius:6px;
  opacity:.92;
}
.style-thumb img:only-child{ width:100%; height:100%; }
.style-thumb img:first-child:nth-last-child(2),
.style-thumb img:first-child:nth-last-child(2) ~ img{ width:calc(50% - 1.5px); height:100%; }

/* Label */
.style-label{
  grid-area:label;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#e9edff;
  font-weight:700;
  font-size:.9rem;
  line-height:1.15;
  min-width:0;
}

/* Slider row */
.style-slider{ grid-area:slider; min-width:0; align-self:center; }
.style-slider input[type=range]{ width:100%; display:block; height:var(--style-slider-h); margin:0; }

/* Percent */
.style-percent{
  grid-area:percent;
  font-weight:800;
  color:#cfd7ff;
  font-size:.86rem;
  min-width:48px;
  text-align:right;
  height:var(--style-slider-h);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  align-self:center;
}

/* Compatibility */
.style-row .style-mid{ grid-area:slider; min-width:0; align-self:center; }
.style-row .style-mid input[type=range]{ width:100%; display:block; height:var(--style-slider-h); margin:0; }
.style-row .style-pct,
.style-row .style-percent{ grid-area:percent; }
.style-row .style-name,
.style-row .style-title,
.style-row .style-label{ grid-area:label; }
.style-row .style-examples,
.style-row .style-example,
.style-row .style-ex{
  grid-area:thumb;
  width:54px; height:46px;
  border-radius:8px;
  background:#2b2940;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  padding:3px;
}
.style-row .style-examples img,
.style-row .style-example img,
.style-row .style-ex img{
  width:calc(50% - 1.5px);
  height:calc(50% - 1.5px);
  object-fit:cover;
  display:block;
  border-radius:6px;
  opacity:.92;
}
.style-row .style-examples img:only-child,
.style-row .style-example img:only-child,
.style-row .style-ex img:only-child{ width:100%; height:100%; }
.style-row .style-examples img:first-child:nth-last-child(2),
.style-row .style-examples img:first-child:nth-last-child(2) ~ img,
.style-row .style-example img:first-child:nth-last-child(2),
.style-row .style-example img:first-child:nth-last-child(2) ~ img,
.style-row .style-ex img:first-child:nth-last-child(2),
.style-row .style-ex img:first-child:nth-last-child(2) ~ img{ width:calc(50% - 1.5px); height:100%; }

/* Total bar */
.tools-total{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:.86rem; color:#cfd7ff; }
.tools-total .bar{ height:8px; background:#2b2940; border-radius:999px; overflow:hidden; flex:1; margin:0 10px; }
.tools-total .bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#7e3ff2,#6fb8ff) }

/* Prompt & style info bubble (optional) */
.ach-prompt-side{
  position:absolute; overflow:visible!important; max-height:none!important;
  padding:14px 16px; border-radius:14px; box-sizing:border-box;
  background:linear-gradient(180deg, rgba(28,25,38,.98), rgba(28,25,38,.92));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 36px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.04);
  color:#e9edff; font-size:13px; line-height:1.4; z-index:5; opacity:0;
  transform:translateY(4px); transition:opacity .12s ease, transform .12s ease;
  pointer-events:none; min-width:200px; max-width:260px;
}
.ach-prompt-side.show{ opacity:1; transform:translateY(0); }
.ach-prompt-side::after{ content:""; position:absolute; width:0; height:0; border:10px solid transparent; }
.ach-prompt-side.arrow-left::after{ left:-20px; top:var(--arrow-y, 24px); border-right-color:rgba(28,25,38,.95); }
.ach-prompt-side.arrow-right::after{ right:-20px; top:var(--arrow-y, 24px); border-left-color:rgba(28,25,38,.95); }
.ach-prompt-side .ach-pr-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; opacity:.9; }
.ach-prompt-side .ach-pr-text{ font-size:12px; line-height:1.35; }

/* Loader ================================================================ */
#ai-loader{
  position:absolute;
  inset:0;
  z-index:7;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#ai-loader.show{ display:flex; }

#ai-loader .card{
  min-width:280px;
  max-width:min(92%, 420px);
  border-radius:16px;
  padding:16px 16px 14px;
  background:linear-gradient(180deg,rgba(28,25,38,.98),rgba(28,25,38,.96));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  color:#e9edff;
}
#ai-loader .hdr{ display:flex; justify-content:space-between; font-weight:900; letter-spacing:.08em; }
#ai-loader .bar{ margin-top:10px; height:10px; border-radius:999px; background:#2a2740; overflow:hidden; }
#ai-loader .bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#7e3ff2,#6fb8ff); }
#ai-loader .eta{ margin-top:10px; font-size:12px; opacity:.9 }

/* Focus + a11y ========================================================== */
.ai-cta:focus, .latest-rool-full-btn:focus, .latest-rool-start-btn:focus, .st-btn:focus, .st-settings-btn:focus{
  outline: 2px solid rgba(126,63,242,.9);
  outline-offset: 2px;
}

/* Reduced motion ======================================================== */
@media (prefers-reduced-motion: reduce){
  .ai-latest-stop .pulse-dot{ animation: none; }
  .model-item{ transition: none; }
  .latest-rool-start-btn[aria-disabled="false"]{ animation: none; }
}

/* Responsive ============================================================ */
@media (max-width: 1668px){
  :root{ --ai-right-w: 320px; }
  .ai-topbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "ctas";
  }
  .ai-cta-wrap{ justify-self:flex-start; width:100%; max-width:none; }
}

@media (max-width: 1280px){
  :root{ --ai-right-w: 300px; }
}

/* ===== Mobile shell elements (hidden by default) ======================= */
.st-ai-drawer-backdrop{ display:none; }
.st-ai-drawer-head{ display:none; }

/* ≤1120px: Prompt first + slideshow + settings panel inline (NO scrollbars) */
@media (max-width: 1120px){
  .st-ai-flex{ flex-direction:column; }

  .ai-topbar{ display:none !important; }

  .st-cent{ display:contents; }

  .prompt-row{ order:1; }
  .st-latest-rool{ order:2; }

  .prompt-row{
    width:100%;
    margin:0;
    padding:0 10px;
    flex-direction:column;
  }

  .prompt-actions{
    width:100%;
    flex:0 0 auto;
    display:flex;
    flex-direction:row;
    gap:10px;
    align-items:stretch;
  }

  .prompt-actions .st-btn,
  .prompt-actions #latest-rool-start-btn,
  .prompt-actions .st-settings-btn{
    flex:1 1 0;
    height:var(--ai-btn-h);
    min-height:var(--ai-btn-h);
    font-size:1rem;
  }

  .st-settings-btn{
    padding:0 12px;
    justify-content:flex-start;
  }
  .st-settings-btn i{ font-size:16px; }
  .st-settings-btn .st-set-hint{ max-width:140px; }

  .st-settings-hint{ display:none; }

  .st-latest-rool{
    width:100%;
    padding:0 10px 24px;
    margin-top:12px;
  }

  .ai-cta-wrap{ grid-template-columns:1fr; }

  /* Backdrop (optional) */
  .st-ai-drawer-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:2998;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease;
  }

  /* Settings panel becomes inline and NO internal scroll */
  .st-right{
    position:static;
    width:100%;
    max-height:none;
    height:auto;
    overflow:visible;
    -webkit-overflow-scrolling:auto;

    transform:none;
    transition:none;

    border-radius:16px;
    background:rgba(10,12,28,.94);
    border:1px solid rgba(159,177,255,.22);
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);

    padding:12px 12px 14px;
    margin:0 10px 18px;

    display:none; /* hidden until opened */

    position:relative;
    z-index:2999;
  }

  /* Header remains available when shown */
  .st-ai-drawer-head{
    display:flex;
    position:sticky;
    top:0;
    z-index:3000;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    margin:-12px -12px 10px;
    background:rgba(10,12,28,.92);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .st-ai-drawer-head .ttl{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:900;
    color:#cfd7ff;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .st-ai-drawer-close{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(15,23,42,.65);
    color:#eaf0ff;
    border-radius:999px;
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    line-height:1;
  }
  .st-ai-drawer-close:hover{ background:rgba(15,23,42,.9); }

  /* Open state: show inline settings + backdrop */
  body.st-ai-drawer-open .st-ai-drawer-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  body.st-ai-drawer-open .st-right{
    display:flex;
  }

  /* IMPORTANT: do NOT lock body scroll on mobile */
  body.st-ai-drawer-open{ overflow:auto; }
}

@media (max-width: 920px){
  .latest-rool-shell{
    grid-template-columns:1fr;
    row-gap:12px;
  }
}

@media (min-width:1121px){
  .st-cent{
    margin-left:40px;
  }
}