/* =====================================================================
   public/app/ask.css: the assistant page (Ask UNLOOK) in the new design (14 October 2026)

   The help card, after the owner's reference: a heading with the sparkle in a round tile; three sections, each an
   icon tile, a title, one line and three actions (label and chevron); one note in an inset box. In the list system
   the owner chose (version 3: 10px corners, quiet buttons; tokens in shell.css). After his review (14 Oct): each
   group held tight (icon, heading, line and actions), the same space between groups; actions a little taller, short,
   wrapping on a phone, with clear hover, focus and pressed states; soft borders only (the lime is for focus and the
   main action). An action only asks: anything it leads to changing comes as the usual card to confirm.
   Every colour and size is a token. Hover only where a pointer hovers.
   ===================================================================== */
/* the card takes the chat's width (an answer's words keep theirs), so each section's three actions sit in one row */
.as-body:has(>.ah){flex:1 1 auto;max-width:800px}
.ah{width:100%;border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift);overflow:hidden}
.ah-h{display:flex;align-items:center;gap:16px;padding:22px 24px 18px}
.ah-hi{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--tint-1);color:var(--lime)}
.ah-hi svg.i{width:22px;height:22px}
.ah-h h3{margin:0;font-size:var(--fs-title);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.ah-h p{margin:3px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.ah-list{margin:0;padding:0 24px;list-style:none}
.ah-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:16px 0;border-top:1px solid var(--hair)}
.ah-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);background:var(--tint-1);color:var(--ink)}
.ah-ic svg.i{width:20px;height:20px}
.ah-b{min-width:0}
.ah-b h4{margin:0;font-size:var(--fs-lg);font-weight:600;line-height:1.3;color:var(--ink)}
.ah-b p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.ah-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ah-go{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:40px;padding:8px 12px 8px 14px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 0 0 1px var(--hair-2);font:inherit;font-size:var(--fs-sm);font-weight:500;line-height:1.3;color:var(--ink);text-align:left;cursor:pointer;
  transition:background-color var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.ah-go span{min-width:0}
.ah-go svg.i{flex:none;width:15px;height:15px;color:var(--ink-3);transition:translate var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
/* clearly something to press: lighter and its arrow moving under the pointer, a ring on the keyboard, a press that gives */
@media (hover:hover){.ah-go:hover{background:var(--btn-2-hover);box-shadow:inset 0 0 0 1px var(--btn-2-ring)}.ah-go:hover svg.i{translate:2px 0;color:var(--ink)}}
.ah-go:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ah-go:focus-visible svg.i{color:var(--ink)}
.ah-go:active{scale:.97;background:var(--btn-2-hover)}
.ah-note{display:flex;align-items:center;gap:10px;margin:2px 16px 16px;padding:12px 14px;border-radius:var(--r-btn);background:var(--tint-1);font-size:var(--fs-sm);color:var(--ink-2)}
.ah-note svg.i{flex:none;width:16px;height:16px;color:var(--ink-3)}
@media (max-width:720px){
  .ah-h{gap:12px;padding:16px 16px 14px}
  .ah-hi{width:40px;height:40px}
  .ah-list{padding:0 16px}
  .ah-row{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:14px 0}
  .ah-ic{width:36px;height:36px}
  .ah-ic svg.i{width:18px;height:18px}
  /* a phone: the actions wrap, two to a line where they fit (the owner's review) */
  .ah-acts{gap:6px;margin-top:8px}
  .ah-row{padding:14px 0}
  .ah-note{margin:2px 12px 12px}
}
@media (pointer:coarse){.ah-go{min-height:var(--h-touch)}}

/* ---------- the conversation: a soft top edge (nothing is ever hard-cut there); the box to write in lit only as a
   thin focus edge (the owner's review: the lime is for focus and the main action, never a heavy ring) ---------- */
#as-thread{-webkit-mask-image:linear-gradient(180deg,transparent 0,currentColor 20px);mask-image:linear-gradient(180deg,transparent 0,currentColor 20px)} /* a mask reads only the alpha */
.as-comp{border-color:var(--hair-2)}
.as-comp:focus-within,.as-comp:has(textarea:focus-visible){outline:0;border-color:color-mix(in srgb,var(--focus) 38%,var(--hair-2))} /* the owner, 15 Oct: a faint tint of the accent while typing, never a bright ring */
@media (prefers-reduced-motion:reduce){.ah-go,.ah-go svg.i{transition:none}.ah-go:active{scale:1}.ah-go:hover svg.i{translate:none}}

/* ---------- the page around it (version 3, 14 October): the chat and the side cards as soft panels with the same
   corners as every page; the suggestions are chips with 10px corners; the side rows have icon tiles, as in Setup ---------- */
.as>.card,.as-side>.card{border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}
.as-side .card-h h2,.as-side .card-h h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.as-side .btn{border-radius:var(--r-btn)}
.as-sug button{height:var(--h-filter);padding:0 12px;border:0;border-radius:var(--r-btn);background:var(--chip-off);box-shadow:inset 0 0 0 1px var(--chip-off-ring);color:var(--ink-2);font-weight:500}
@media (hover:hover){.as-sug button:hover{background:var(--chip-off-hover);color:var(--ink)}}
.as-sug button:active{scale:.96}
.as-side .rp-ic{width:32px;height:32px;margin-top:0;border-radius:var(--r-btn);background:var(--tint-1);color:var(--ink-2)}
.as-side .rp-ic svg{width:16px;height:16px}
.as-side .rp-body{padding-inline-start:44px}
.as-side .rp-row+.rp-row,.as-side .rc-row+.rc-row{border-top:1px solid var(--hair)}
@media (pointer:coarse){.as-sug button{height:40px}}
@media (prefers-reduced-motion:reduce){.as-sug button:active{scale:1}}

/* =====================================================================
   The calmer Ask UNLOOK (21 October 2026; the owner: "build calmer ask unlook"). The approved mockup is in
   Web App/Ask UNLOOK calmer mockup. One reading column, a short answer first with the rest under "Show details", one
   action per change card, a status said by a glyph and two words instead of a sentence, no avatar or time on each
   message, a quieter box to write in. Tokens only. Lime is for the action (the send button once there is text, the card's
   main button), never for a status. Motion 150-250 ms, none with reduced motion.
   ===================================================================== */
/* ---------- the status glyph: TWO points of light (the logo's two lights) that settle into a still shape per state.
   Idea after Solid Glass's status glyph (MIT, github.com/deeplethe/solid-glass), re-made in plain SVG and CSS. ---------- */
.asg{flex:none;width:16px;height:16px;overflow:visible;color:currentColor}
.asg .asg-d{fill:currentColor;transform-box:view-box;transition:transform 250ms cubic-bezier(.22,1,.36,1),opacity 200ms ease-out}
.asg .asg-p{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset 240ms cubic-bezier(.22,1,.36,1) 60ms,opacity 120ms ease-out 60ms}
.asg .asg-ring{fill:none;stroke:currentColor;stroke-width:1.6;opacity:0;transform-box:view-box;transform:translate(11.5px,8px) scale(.4);
  transition:transform 250ms cubic-bezier(.22,1,.36,1),opacity 200ms ease-out}
.asg[data-s="work"] .asg-d1{transform:translate(4.5px,8px)}
.asg[data-s="work"] .asg-d2{transform:translate(11.5px,8px)}
.asg[data-s="work"] .asg-d{animation:asg-turn 1.4s ease-in-out infinite}
.asg[data-s="work"] .asg-d2{animation-delay:.7s}
@keyframes asg-turn{0%,100%{opacity:1}50%{opacity:.3}}
.asg[data-s="wait"] .asg-d1{transform:translate(4.5px,8px)}
.asg[data-s="wait"] .asg-d2{transform:translate(11.5px,8px) scale(0);opacity:0}
.asg[data-s="wait"] .asg-ring{opacity:1;transform:translate(11.5px,8px) scale(1)}
.asg[data-s="done"] .asg-d1{transform:translate(3.5px,8.5px) scale(0);opacity:0}
.asg[data-s="done"] .asg-d2{transform:translate(12.5px,4.5px) scale(0);opacity:0}
.asg[data-s="done"] .asg-ok{stroke-dashoffset:0;opacity:1}
.asg[data-s="fail"] .asg-d1{transform:translate(4.5px,4.5px) scale(0);opacity:0}
.asg[data-s="fail"] .asg-d2{transform:translate(11.5px,11.5px) scale(0);opacity:0}
.asg[data-s="fail"] .asg-x{stroke-dashoffset:0;opacity:1}
.asg[data-s="need"] .asg-d1{transform:translate(3.6px,8px) scale(.95)}
.asg[data-s="need"] .asg-d2{transform:translate(13px,8px) scale(0);opacity:0}
.asg[data-s="need"] .asg-go{stroke-dashoffset:0;opacity:1}
.asg[data-s="same"] .asg-d1{transform:translate(4px,6.2px) scale(0);opacity:0}
.asg[data-s="same"] .asg-d2{transform:translate(4px,9.8px) scale(0);opacity:0}
.asg[data-s="same"] .asg-eq{stroke-dashoffset:0;opacity:1}
.asg[data-s="off"] .asg-d1{transform:translate(4px,8px) scale(0);opacity:0}
.asg[data-s="off"] .asg-d2{transform:translate(12px,8px) scale(0);opacity:0}
.asg[data-s="off"] .asg-no{stroke-dashoffset:0;opacity:1}
/* the line beside it carries the same hue (inks are the measured 4.5:1 ones): grey working, amber needs the owner, mint done, coral did not happen */
.as-st{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-sm);line-height:1.3;font-weight:500;color:var(--ink-2)}
.as-st-work{color:var(--ink-3);font-weight:400}
.as-st-wait,.as-st-need{color:var(--you-ink)}
.as-st-wait .asg,.as-st-need .asg{color:var(--you-dot)}
.as-st-done{color:var(--ok-ink)}
.as-st-fail{color:var(--err-ink)}
.as-st-same,.as-st-off{color:var(--ink-3);font-weight:400}
.as-st .as-st-x{color:var(--ink-3);font-weight:400}
@media (prefers-reduced-motion:reduce){
  .asg .asg-d,.asg .asg-p,.asg .asg-ring{transition:none!important;animation:none!important}
  .asg[data-s="work"] .asg-d2{opacity:.4}
}

/* ---------- the page: the side column goes behind the one "Rules and recent changes" row, at every width ---------- */
.as{display:block}
.as-side{display:none}
.as-more{display:flex}
.as-chat .as-more{border-bottom:1px solid var(--hair)}
.as-chat .as-more .as-more-t{font-weight:400;color:var(--ink-2)}
.as-chat .as-more-n{color:var(--ink-3)}
/* one column of reading width, centred in the card, more air between turns */
.as-chat .as-thread{gap:0;padding:24px 24px 12px}
.as-chat .cx-col{width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.as-chat .cx-day{margin:0 auto -8px;font-size:var(--fs-meta);color:var(--ink-3)}
.as-chat .as-m{gap:0}
.as-chat .as-body{gap:12px;max-width:100%;width:100%}
.as-chat .as-txt{font-size:var(--fs-lg);line-height:1.6;color:var(--ink-body,var(--ink));max-width:62ch;text-wrap:pretty}
.as-chat .as-txt b{font-weight:400;color:var(--ink)}
/* the owner's words: a quiet tile, not the brightest thing on the screen */
.as-chat .as-m.me .as-bub{padding:9px 14px;border-radius:var(--r-card);background:var(--btn-2);box-shadow:inset 0 0 0 1px var(--btn-2-ring);color:var(--ink);font-size:var(--fs-body)}
/* the links under a reply are secondary buttons (.btn-sub, app.css): the owner, 21 Oct, "does not look like a button" */
.as-chat .as-links{margin-top:0;gap:8px}
.as-chat .as-links .btn-sub svg.i{width:14px;height:14px;transition:translate 150ms ease-out}
@media (hover:hover){.as-chat .as-links .btn-sub:hover svg.i{translate:2px 0}}
/* "Show details": the fold (an answer's own, and a card's) */
.as-chat .cx-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:-4px}
.as-chat .cx-more-b,.as-chat .cx-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);text-decoration:none;cursor:pointer;border-radius:var(--r-chip)}
.as-chat .cx-more-b{color:var(--ink-3)}
.as-chat .cx-link{color:var(--ink-2);font-weight:500}
.as-chat .cx-more-b svg.i,.as-chat .cx-link svg.i,.as-chat .cx-fold>summary svg{width:14px;height:14px}
.as-chat .cx-more-b svg.i,.as-chat .cx-fold>summary svg{transition:transform 200ms cubic-bezier(.22,1,.36,1)}
.as-chat .cx-more-b[aria-expanded="true"] svg.i{transform:rotate(90deg)}
.as-chat .cx-link svg.i{transition:translate 150ms ease-out}
@media (hover:hover){.as-chat .cx-more-b:hover,.as-chat .cx-link:hover{color:var(--ink)}.as-chat .cx-link:hover svg.i{translate:2px 0}}
.as-chat .cx-more-b:focus-visible,.as-chat .cx-link:focus-visible,.as-chat .cx-fold>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.as-chat .cx-fold>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;list-style:none;cursor:pointer;font-size:var(--fs-sm);color:var(--ink-3);border-radius:var(--r-chip)}
.as-chat .cx-fold>summary::-webkit-details-marker{display:none}
.as-chat .cx-fold[open]>summary svg{transform:rotate(90deg)}
@media (hover:hover){.as-chat .cx-fold>summary:hover{color:var(--ink)}}
.as-chat .cx-fold-b:not([hidden]){animation:cx-open 200ms cubic-bezier(.22,1,.36,1)}
@keyframes cx-open{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.as-chat .cx-fold-b>*+*{margin-top:10px}
.as-chat .cx-facts{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:6px 20px;margin:0;font-size:var(--fs-sm);line-height:1.5}
.as-chat .cx-facts>div{display:contents}
.as-chat .cx-facts dt{color:var(--ink-3)}
.as-chat .cx-facts dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.as-chat .cx-list{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}
.as-chat .cx-small{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere}
.as-chat .cx-small b{font-weight:500;color:var(--ink-2)}
/* the change card: status, the question, the change on one line (old → new), one sentence, two buttons */
.as-chat .ac.cx-card{width:560px;max-width:100%;padding:16px 18px 0;border-radius:var(--r-panel);border:1px solid var(--card-edge);background:var(--card-sheen);box-shadow:var(--card-lift)}
.as-chat .cx-card .ac-title{margin-top:10px;font-size:var(--fs-lg);font-weight:600;line-height:1.35}
.as-chat .cx-diff{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:10px 0 0;padding:10px 12px;border-radius:var(--r-btn);background:var(--tint-1);font-size:var(--fs-body);line-height:1.4}
.as-chat .cx-diff .cx-k{color:var(--ink-3);margin-right:4px}
.as-chat .cx-diff .ac-new{font-weight:500}
.as-chat .cx-fact{margin:6px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere}
.as-chat .cx-line{margin:10px 0 0;font-size:var(--fs-body);line-height:1.5;color:var(--ink-2)}
.as-chat .cx-card>.ac-sec,.as-chat .cx-card>.ac-warn,.as-chat .cx-card>.ac-choices,.as-chat .cx-card>.cx-small{margin-top:12px}
.as-chat .cx-card .cx-fold{margin-top:6px}
.as-chat .cx-card .cx-fold-b{display:flex;flex-direction:column;gap:10px;padding:6px 0 8px}
.as-chat .cx-card .cx-fold-b>*+*{margin-top:0}
.as-chat .cx-card .ac-f{margin:12px -18px 0;padding:12px 18px;border-top:1px solid var(--hair);background:transparent}
.as-chat .cx-card .ac-acts{display:flex;gap:8px;margin-left:auto}
/* owner, 21 Oct: "buttons look big": compact on a computer, the size of the chat's own buttons */
.as-chat .cx-card .ac-acts .btn{min-height:34px;padding:6px 14px;border-radius:var(--r-btn);font-size:var(--fs-sm)}
.as-chat .cx-card .ac-acts .btn-ghost{border-color:transparent;color:var(--ink-2)}
.as-chat .cx-card .ac-acts .btn-primary{font-weight:500}
.as-chat .cx-alt{align-self:flex-start;height:auto;min-height:32px;padding:0;border:0;background:none;box-shadow:none;color:var(--ink-2);font-weight:500;font-size:var(--fs-sm)}
/* after the decision: one quiet line with its glyph */
.as-chat .ac.ac-closed.cx-closed{width:560px;max-width:100%;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-btn);border:1px solid var(--hair);background:transparent;box-shadow:none}
.as-chat .cx-closed .cx-gl{display:contents}
.as-chat .cx-closed .asg{margin-top:2px}
.as-chat .cx-closed.cx-done .asg{color:var(--ok-ink)}
.as-chat .cx-closed.cx-fail .asg{color:var(--err-ink)}
.as-chat .cx-closed.cx-off .asg{color:var(--ink-3)}
.as-chat .cx-closed .ac-line{font-weight:400}
.as-chat .cx-closed .ac-meta{color:var(--ink-3)}
.as-chat .cx-closed .ac-meta:empty{display:none}
/* the composer: a calm field; the send button is lime only when there is something to send (lime = action) */
.as-chat .as-sug{display:flex;flex-wrap:wrap;gap:8px;padding:8px 24px 0;justify-content:center}
.as-chat .as-sug button{height:32px;padding:0 12px;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink-3);font-size:var(--fs-sm);font-weight:400}
@media (hover:hover){.as-chat .as-sug button:hover{color:var(--ink);background:var(--tint-1)}}
.as-chat .as-comp{max-width:680px;margin:12px auto 20px;width:calc(100% - 48px);border-color:var(--hair-2);background:var(--tint-1);border-radius:var(--r-panel);padding:6px 6px 6px 16px}
.as-chat .as-comp:focus-within{border-color:var(--line-strong)}
.as-chat .as-comp .as-send{background:var(--btn-2);border-color:transparent;color:var(--ink-3);box-shadow:none}
.as-chat .as-comp:not(.has-text) .as-send:hover{background:var(--btn-2);border-color:transparent}
.as-chat .as-comp.has-text .as-send{background:var(--lime);color:var(--night);box-shadow:var(--edge-primary)}
/* phones, and the panel (which is as narrow as one): the chat is the screen, the same column a little tighter; the suggestions scroll in one row */
@media (max-width:720px){
  .as-chat .as-thread{padding:16px 16px 8px}
  .as-chat .cx-col{gap:24px}
  .as-chat .as-m.me .as-bub{max-width:100%}
  .as-chat .ac.cx-card{padding:14px 14px 0}
  .as-chat .cx-card .ac-f{margin:12px -14px 0;padding:10px 14px}
  /* a phone keeps a 44px tap height (the button's invisible edge), and the buttons sit at the right at their own width, not as a wide lime block */
  .as-chat .cx-card .ac-acts{flex:1 1 100%;display:flex;justify-content:flex-end}
  .as-chat .cx-card .ac-acts .btn{min-height:var(--h-ctl);padding:4px 12px}
  .as-chat .cx-card .ac-acts.n2 .btn-primary,.as-chat .cx-card .ac-acts.n3 .btn-primary{grid-column:auto;order:0}
  .as-chat .cx-facts{grid-template-columns:minmax(0,1fr);gap:0 0}
  .as-chat .cx-facts dd{margin-bottom:8px}
  .as-chat .as-sug{padding:8px 16px 0;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .as-chat .as-sug button{flex:none;height:40px}
  .as-chat .as-comp{width:calc(100% - 32px);margin:10px 16px 12px}
  .as-chat .cx-fold>summary,.as-chat .cx-more-b,.as-chat .cx-link{min-height:44px}
}
.dock .as-chat .as-thread{padding:16px 16px 8px}
.dock .as-chat .as-sug{padding:8px 16px 0;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.dock .as-chat .as-sug button{flex:none}
.dock .as-chat .as-comp{width:calc(100% - 32px);margin:10px 16px 12px}
@media (prefers-reduced-motion:reduce){.as-chat .cx-fold-b{animation:none!important}.as-chat .cx-more-b svg.i,.as-chat .cx-fold>summary svg{transition:none}}