/* ---------------------------------------------------------------------------
   ask/chat.css — the tutor drawer. Everything is scoped under .askchat or
   #askchat so a lesson can load this without it reaching the lesson's own DOM.

   The drawer covers the RAIL, never the stage. The stage is what the tutor
   points at, and water-lab's controls (temperature, add water, add salt) live
   over there too, so covering the rail costs the student only the lesson text
   they just stopped reading to ask a question.
   --------------------------------------------------------------------------- */

/* ---- launcher, sits in the rail ---- */
/* Small, and off to the side: it is a way in, not a call to action competing
   with the lesson. */
#askopen {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0 auto;
  padding: 7px 13px;
  font: 600 13px var(--font-sans);
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 rgba(43, 39, 35, .13);
  cursor: pointer;
}

#askopen:hover  { background: #fbf7ee }
#askopen:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(43, 39, 35, .13) }
#askopen .sub   { font-weight: 400; font-size: 12.5px; color: var(--muted) }

/* A quiet dot, not a badge: the tutor has something waiting, and it is not
   trying to be a notification. */
#askopen.waiting::after {
  content: '';
  width: 8px; height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: #c0392b;
}

/* ---- the drawer ---- */
/* Closed is `display:none`, set by the .on class and nothing else. An earlier
   version slid in on a transform and used the `hidden` attribute: `display:flex`
   here silently beat `[hidden] { display:none }`, so the panel was never hidden,
   only pushed offscreen, and one interrupted transition then pinned it there
   with no rule to blame. Opacity fades; geometry does not move. */
/* A SHEET OF PAPER LAID OVER THE PAGE, not a panel built into it. It insets
   from the rail's edges and hangs past the rail's left edge onto the stage, so
   the shadow falls on the lesson and the eye reads one page on top of another.
   The tilt is a fraction of a degree: enough that the edges are not parallel to
   the window, small enough that the type still sits straight. */
#askchat {
  position: absolute;
  /* clear of the title block's tabs: the sheet starts below the top chrome
     rather than covering the step the student is trying to change */
  top: 96px;
  right: 18px;
  bottom: 18px;
  width: 316px;
  z-index: 40;
  display: none;
  flex-direction: column;
  background: #fdfbf5;
  border: 1.5px solid rgba(43, 39, 35, .14);
  border-radius: var(--radius);
  transform: rotate(-.35deg);
  box-shadow:
    0 1px 1px rgba(43, 39, 35, .07),
    0 18px 42px -20px rgba(43, 39, 35, .5);
}

#askchat.on {
  display: flex;
  animation: askin .22s cubic-bezier(.32, .72, .4, 1);
}

/* Rises into place, since it is now an object arriving rather than a drawer
   sliding out of the edge. The rotation has to be restated: a transform in a
   keyframe replaces the rule's, and leaving it out snaps the sheet square. */
@keyframes askin {
  from { opacity: 0; transform: rotate(-.35deg) translateY(10px) scale(.994) }
  to   { opacity: 1; transform: rotate(-.35deg) translateY(0)    scale(1) }
}

/* The sheet lost its title bar, so the close sits in the corner of the paper
   itself, over the top of the transcript. */
#askclose {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  font: 600 20px/1 var(--font-sans);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
}

#askclose:hover { color: var(--ink) }

/* ---- transcript ---- */
.askthread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 18px 16px;
}

/* The empty state: three questions you can click, rather than a paragraph
   about being able to ask questions. Quieter than .askgo on purpose, since
   these are an offer and that is an answer. */
.askthread .hello {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.askeg {
  font: 14px/1.45 var(--font-sans);
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 1.5px dashed var(--hair);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}

.askeg:hover {
  border-color: var(--muted);
  border-style: solid;
  background: rgba(0, 0, 0, .03);
}

.askturn { margin: 0 0 16px }
.askturn:last-child { margin-bottom: 0 }

.askturn .say { margin: 0; font-size: 15.5px; line-height: 1.62 }

/* The student's question is a bubble; the tutor's answer is the page talking
   back, so it stays plain text. Two shapes, no labels to read. */
.askturn.you {
  display: flex;
  justify-content: flex-end;
}

.askturn.you .say {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 14px;
  background: rgba(43, 39, 35, .07);
  font-size: 15px;
}
.askturn .say.err { color: #b23a2c }
.askturn .say.wait { color: var(--muted); font-style: italic }

/* ---- what the tutor points at ------------------------------------------------
   A primary pill, in the same cyan the rings are drawn in, so the button and the
   highlight it produces read as one gesture rather than two unrelated events.
   The background is a step darker than --ask-point, which is tuned to be seen
   against warm paper and is too light to carry white text. */
:root { --ask-pill: #00819a }

.askgo {
  display: inline-block;
  margin: 12px 0 0;
  padding: 10px 20px;
  font: 700 14.5px var(--font-sans);
  color: #fff;
  background: var(--ask-pill);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.askgo:hover  { filter: brightness(1.08) }
.askgo:active { transform: translateY(1px) }

/* Leaving the page never looks like looking at it: an outline, not a fill, so
   the solid pill stays reserved for something that happens right here. */
.askgo.away {
  color: var(--ask-pill);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ask-pill);
}

.askgo.away:hover { background: rgba(0, 129, 154, .08); filter: none }

.asksee {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.asksee a { color: var(--ink); text-underline-offset: 3px }

.asksoon {
  color: var(--ink);
  border-bottom: 1.5px dotted var(--muted);
  cursor: help;
}

/* ---- ask ---- */
#askchat form {
  display: flex;
  gap: 8px;
  padding: 13px 18px 16px;
  border-top: 1.5px dashed var(--hair);
}

#askchat input {
  flex: 1;
  min-width: 0;
  font: 15px var(--font-sans);
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 9px 12px;
}

#askchat input::placeholder { color: var(--muted) }

/* Round, and an arrow: the send button is the same gesture every chat has, and
   the word "Ask" beside a field that already says "Ask about this page" was
   saying it twice. The SVG is inline rather than an icon font, so the module
   does not need a page to have loaded one. */
#askchat form button {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}

#askchat form button svg { width: 19px; height: 19px }

#askchat form button:disabled { opacity: .45; cursor: default }

/* ---- pointing at a control ------------------------------------------------
   Rings only. An earlier version also lit the control itself with a box-shadow,
   which changed the shape of a round button and read as the lesson's own UI
   having changed state. These sit over the page and touch nothing.

   Cyan because nothing else here is cyan: the paper is warm, the atoms are red
   and grey, and the temperature scale already owns warm and cool. A pointer
   must never be mistakable for the lesson itself saying something. */
:root { --ask-point: #00c2e0 }

.askpulse {
  position: fixed;
  z-index: 999;
  border: 3px solid var(--ask-point);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: askpulse 1.1s cubic-bezier(.2, .6, .35, 1) 3;
}

@keyframes askpulse {
  from { transform: scale(.55); opacity: 0 }
  25%  { opacity: .95 }
  to   { transform: scale(1.9); opacity: 0 }
}