/* The assistant: the drawing on the left and the words on the right, the other way round from the
   sections either side of it, on the page's one ground. The canvas is an object standing on that
   ground, one step up and with nothing lighting it; the drawing on it wears the app's own layer
   colours, a proposal included, and the chrome over it stays neutral but for the two marks the
   app gives the assistant its violet for: the rim of a sentence being typed and the thinking bloom. */
.ask .stage { display: flex; align-items: center; padding-top: 56px; }
/* The words take the width the headline needs and no more, so the canvas gets the rest: the same
   measure as the tool of your own under it, mirrored, so the chapter's two canvases stand the same
   size and the study can be shown whole, desk to door, at a size the door can be read at. */
.ask-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 28vw, 430px));
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.ask-head { grid-column: 2; grid-row: 1; }
.ask-head .say { margin-top: clamp(16px, 3.2vh, 30px); max-width: 380px; }

/* The canvas is live, not a picture scaled to fit: it is as wide as its column and never taller
   than the window leaves room for, and the script zooms the plan to the room inside it, so the
   chrome over it keeps the size the app gives it. */
.ask-art { grid-column: 1; grid-row: 1; position: relative; width: min(100%, (100svh - 170px) * 1.5); aspect-ratio: 3 / 2; }
.ask-canvas {
  --paper: var(--raise-2); inset: 0; width: 100%; height: 100%; border-radius: 22px; cursor: default;
  box-shadow: 0 0 0 1px var(--hair), 0 50px 100px -50px rgba(0, 0, 0, 0.9);
}
.ask-cells { position: absolute; pointer-events: none; }

/* The command line, where the app floats it: over the foot of the canvas, as wide as the request. */
.ask-cmd { left: 16px; right: 16px; bottom: 16px; max-width: 460px; margin-inline: auto; padding: 0 5px; }
.ask-cmd .cmd-field { flex: 1; width: auto; min-width: 0; overflow: hidden; }
/* A sentence for the assistant rims the field in the app's assistant violet, where arithmetic
   the app answers itself rims it blue (src/ui/styles/agent-magic.css). */
.ask-cmd .cmd-field.live { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--snow-dim) 25%, #b3a1ef); background: #2b2c30; }
.ask-cmd .cmd-caret { background: var(--snow); }

/* The corner the assistant stands in, as wide as its card: the working pill first, then the card
   in its place. */
.ask-corner { position: absolute; right: 16px; top: 16px; z-index: 3; width: 272px; }

/* The working pill. Its box is the corner's width and never changes; the pill in it is sized and
   carried to the right end by the script (js/assistant.js says why), and the two ease together. */
.ask-pill {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; pointer-events: none;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.35s, transform 0.45s var(--ease);
}
.ask-pill.on { opacity: 1; transform: none; }
.ask-pill-in {
  left: 0; top: 0; display: flex; align-items: center; gap: 10px; width: max-content; height: 100%; padding: 0 20px 0 12px;
  border-radius: 22px; overflow: hidden; white-space: nowrap; font: 500 15px/1 var(--sans); color: var(--snow-dim);
  transition: width 0.45s var(--ease), transform 0.45s var(--ease);
}
/* The twin the script reads a sentence's width off, never seen. */
.ask-measure { visibility: hidden; }
.ask-measure .ask-pill-in { transition: none; }
/* The bloom and the spark share one seat, so the words beside them never move when one gives way
   to the other. */
.ask-mark { position: relative; flex: none; width: 20px; height: 20px; }
.ask-mark > * { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.3s; }
.ask-mark .bloom { color: var(--violet); }
.ask-done { opacity: 0; color: var(--snow-dim); }
.ask-done .ico { max-width: none; }
.ask-pill.done .bloom { opacity: 0; }
.ask-pill.done .ask-done { opacity: 1; }
.ask-words { animation: ghost 1.1s ease-in-out infinite alternate; }
@keyframes ghost { from { opacity: 0.55; } to { opacity: 1; } }
.ask-pill.disc .ask-words { visibility: hidden; }
.ask-pill.done .ask-words { animation: none; color: var(--snow); }

/* The card: the app's word for it, the one sentence the turn wrote, and the two buttons, in the
   app's neutral chrome. Apply is the app's primary button, the near-white its accent lands at. */
.ask-card {
  right: 0; top: 0; width: 100%; padding: 16px; border-radius: 20px;
  opacity: 0; transform: scale(0.94); transform-origin: 100% 0; transition: opacity 0.35s, transform 0.5s var(--ease);
}
.ask-card.on { opacity: 1; transform: none; }
.ac-head { display: flex; align-items: center; gap: 8px; color: var(--snow); }
.ac-head svg { flex: none; }
.ac-head b { font: 600 15px/1 var(--sans); letter-spacing: 0.01em; }
.ac-said { margin-top: 11px; font: 15px/1.4 var(--sans); color: #d6d8dc; text-wrap: pretty; }
.ac-do { display: flex; gap: 8px; margin-top: 15px; }
.ac-apply, .ac-discard { flex: 1; display: grid; place-items: center; height: 36px; border-radius: 18px; font: 500 14.5px/1 var(--sans); }
.ac-apply { position: relative; background: var(--snow); color: var(--ground); transition: background 0.2s, box-shadow 0.25s, transform 0.25s var(--ease); }
.ac-discard { color: var(--snow-dim); box-shadow: inset 0 0 0 1px var(--hair-2); }
/* Held down: sunk, darker, and ringed, for long enough to be seen. */
.ac-apply.down { background: #c3c6cc; transform: scale(0.96); box-shadow: 0 0 0 3px #1d1e21, 0 0 0 4.5px var(--snow); }
/* The pointer that presses it comes in from the drawing, below and to the left. */
.ac-hand {
  position: absolute; left: 56%; top: 52%; max-width: none; overflow: visible; pointer-events: none;
  fill: var(--snow); stroke: var(--ground); stroke-width: 1.2; stroke-linejoin: round;
  opacity: var(--reach, 0); transform: translate(calc((1 - var(--reach, 0)) * -90px), calc((1 - var(--reach, 0)) * 70px));
  transition: scale 0.2s var(--ease);
}
.ac-apply.down .ac-hand { scale: 0.86; }

/* While a proposal waits, the drawing behind it is faint and only the proposal is at full ink. */
.ask-canvas .plan-body, .ask-canvas .pill:not(.proposed) { transition: opacity 0.5s var(--ease); }
.ask-canvas .plan.reviewing .plan-body, .ask-canvas .plan.reviewing .pill:not(.proposed) { opacity: 0.3; }

/* The proposal, in the inks it will keep and the pens the plan draws with (css/app.css): the
   wall's new ends as its walls, the door as its doors, the chain as its dimensions. Until the
   cells have landed the door is theirs to draw, so its lines wait. */
.proposal { opacity: 0; transition: opacity 0.4s; }
.proposal.on { opacity: 1; }
.proposal .prop { fill: none; transition: opacity 0.4s; }
.proposal .jambs { stroke: var(--wall-ink, #e8e8e8); stroke-width: calc(var(--mpp) * 1.9); }
.proposal .door { stroke: var(--door-ink, #a371f7); stroke-width: calc(var(--mpp) * 1.3); }
.proposal .dim { stroke: var(--dim-ink, #3b9eff); stroke-width: calc(var(--mpp) * 0.8); opacity: 0; }
.proposal.figured .dim { opacity: 1; }
.proposal:not(.landed) .jambs, .proposal:not(.landed) .door { opacity: 0; transition: none; }
.pill.proposed { opacity: 0; transition: opacity 0.4s; }
.pill.proposed.on { opacity: 1; }
/* The figures are made at both of the plan's sizes and the one the door's width holds is shown
   (js/assistant.js says why). */
.pill.proposed.spare { display: none; }

/* A short window: the chrome a step smaller, as the app's is on a small screen, and the canvas
   wider for its height, as the tool of your own's is, so the door is not framed down to a stamp. */
@media (max-height: 640px) {
  .ask-art { aspect-ratio: 16 / 9; width: min(100%, (100svh - 140px) * 16 / 9); }
  .ask-corner { width: 244px; }
  .ask-card { padding: 13px 14px 14px; border-radius: 18px; }
  .ac-said { margin-top: 9px; font-size: 14px; }
  .ac-do { margin-top: 12px; }
  .ac-apply, .ac-discard { height: 32px; font-size: 13.5px; }
  .ask-pill { height: 40px; }
  .ask-pill-in { padding: 0 18px 0 10px; font-size: 14px; }
  .ask-cmd { bottom: 12px; }
}
@media (max-width: 900px) {
  .ask .stage { align-items: flex-start; padding-top: 84px; }
  .ask-layout { grid-template-columns: 1fr; gap: 24px; }
  .ask-head, .ask-art { grid-column: 1; grid-row: auto; }
  .ask-art { width: 100%; }
}
/* On a phone the card would cover the door it proposes, so it stands under the drawing instead,
   the way a phone raises a sheet from the foot of the screen; the canvas is squarer, so the door
   is framed at a size that can be read; and the request may wrap as the app's field grows. */
@media (max-width: 600px) {
  .ask-art { aspect-ratio: 1; margin-bottom: 170px; }
  .ask-corner { top: calc(100% + 16px); left: 0; right: 0; width: auto; }
  .ask-cmd { height: auto; padding: 5px; }
  .ask-cmd .cmd-field { height: auto; min-height: 30px; padding: 7px 13px; line-height: 1.3; font-size: 14px; }
  .ask-cmd .cmd-typed { white-space: pre-wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-words { animation: none; }
}