/* =====================================================================
   FEATURE · AI SIMULATOR (AI, #vS): mockup 11-ai. Situation field, 1-10 ruler (role=slider),
   streamed reaction rendered as sections, "practise your reply", disclaimer and help link.
   Also the AI blocks shared with the scanner: .aiv gutter, consent sheet list, redaction note,
   error card, loading dots. Role tokens and component classes only.
   ===================================================================== */

/* ---------- shared AI blocks ---------- */
/* golden-mockup blocks inside a wrapper: the view already carries the gutter (shell.css does this for direct children) */
.aiv>.mast,.aiv>.sec,.aiv>.pad{padding-left:0;padding-right:0}
.aiv>.mast{padding-top:var(--s4)}
/* one-time consent sheet (cream paper) */
.ailist{border-top:var(--hair) solid var(--rule)}
.ailist li{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule);font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.ailist .ic{flex:none;width:22px;height:22px;margin-top:1px;color:var(--fg)}
.aisheet .link--plain{gap:6px}
/* both choices stay in reach on small phones while the text scrolls */
.aisheet__acts{position:sticky;bottom:0;z-index:1;margin-bottom:calc(-1 * (var(--sab) + var(--s5)));
  padding:var(--s4) 0 calc(var(--sab) + var(--s5));background:var(--bg)}
/* redaction note + "show what is sent" preview */
.aired{margin-top:var(--s3)}
.aired .note .ic{margin-top:1px}
.aired__b{margin-left:26px}
.aired__pre{margin-top:var(--s1);max-height:220px;overflow:auto;padding:var(--s3) var(--s4);background:var(--bg-raise);border:var(--hair) solid var(--rule);border-radius:var(--r1);
  font-size:14.5px;line-height:1.6;color:var(--fg-2);white-space:pre-wrap;overflow-wrap:anywhere}
.aired__tok{display:inline-block;padding:0 4px;border:var(--hair) solid var(--rule-2);border-radius:var(--r1);
  font-family:var(--f-type);font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:var(--fg)}
/* error card (localized per error code, retry when it can help) */
.aierr{padding:var(--s4);border:var(--line) solid var(--rule-2);border-radius:var(--r2);background:var(--bg-raise)}
.aierr__e{display:flex;align-items:center;gap:6px}
.aierr__t{margin-top:var(--s2);font-weight:var(--w-strong);font-size:16.5px;line-height:1.45;color:var(--fg)}
/* safety stop: not an error. The server's own words and the help lines, no retry, no quota talk */
.aisafe__t{margin-top:var(--s2);font-weight:var(--w-strong);font-size:16.5px;line-height:1.45;color:var(--fg);overflow-wrap:break-word}
.aisafe .safety{margin-top:var(--s4)}
#sR>.aisafe{margin-top:var(--s7)}
/* loading: three ink squares (static under reduced motion) */
.simwait{display:flex;gap:6px;height:12px;align-items:center}
.simwait>i{width:8px;height:8px;background:var(--fg);border-radius:1px;animation:ai-dot 1.4s ease-in-out infinite}
.simwait>i:nth-child(2){animation-delay:.16s}.simwait>i:nth-child(3){animation-delay:.32s}
@keyframes ai-dot{0%,80%,100%{transform:scale(.4)}40%{transform:scale(1)}}
/* model text: paragraphs and bullets (escaped, then lightly formatted) */
.aitext{font-size:17px;line-height:1.6;color:var(--fg-2);overflow-wrap:break-word}
.aitext p+p,.aitext p+ul,.aitext ul+p{margin-top:var(--s3)}
.aitext strong{color:var(--fg);font-weight:var(--w-strong)}
.aibul li{position:relative;padding:var(--s2) 0 var(--s2) var(--s5);border-bottom:var(--hair) solid var(--rule)}
.aibul li:last-child{border-bottom:0}
.aibul li::before{content:"";position:absolute;left:2px;top:1.15em;width:9px;height:2px;background:var(--signal)}

/* ---------- input ---------- */
#sI{min-height:104px;scroll-margin-top:calc(var(--hdr-h) + var(--st) + var(--s5));scroll-margin-bottom:calc(var(--sb) + var(--s5))}
.simfoot{display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s1)}
.simfoot .aired{flex:1;min-width:0;margin-top:var(--s1)}
.simfoot .tw{margin-left:auto;padding-top:6px;white-space:nowrap}
.tw.signal{color:var(--signal)}
/* the ruler: one slider (tap, horizontal drag, arrow keys); vertical swipes still scroll the page */
#sSl{touch-action:pan-y;-webkit-user-select:none;user-select:none}
#sSl:focus-visible{outline-offset:6px}
.slvl{margin-top:var(--s4);padding:var(--s3) 0;border-top:var(--hair) solid var(--rule);border-bottom:var(--hair) solid var(--rule)}
.slvl:empty{display:none}
.slvl strong{display:block;font-weight:var(--w-heavy);font-size:17px;line-height:1.3}
.slvl span{display:block;margin-top:var(--s1);font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.simhint{margin-top:var(--s5)}

/* ---------- result ---------- */
#sR{scroll-margin-top:calc(var(--hdr-h) + var(--st) + var(--s2));scroll-margin-bottom:calc(var(--tab-h) + var(--sb) + var(--s4))}
/* while the reaction streams in, keep room below it so it can be brought to the top of the screen */
#sR[aria-busy="true"]{min-height:72vh}
.simq{overflow-wrap:break-word}
.simhealthy__t{font-weight:var(--w-strong);font-size:18px;line-height:1.45;color:var(--fg);overflow-wrap:break-word}
.simsafe{margin-top:var(--s7)}
.simsafe>.body{color:var(--fg)}
.simsafe .safety{margin-top:var(--s4)}
.simprac__out{margin-top:var(--s2)}
.simprac__out .safety{margin-top:var(--s5)}
.simprac__out .aierr,.simprac__out .aisafe{margin-top:var(--s5)}
#sR .helplink{width:100%}