/* ============================================================================
   assistant.css — the "Ask" button and its panel.

   A launcher pinned bottom-right that widens to show its label on hover and
   on focus, and a panel that is a bottom sheet on a phone and a card on a
   desktop.

   Three things this must not do:
     * sit on top of the consent bar, which is also at the bottom of the
       screen and is asking a question that has to be answered first;
     * cover the content on a small screen when it is shut;
     * move at all for a reader who has asked for less motion.
   ========================================================================= */

.asst-launch {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  /* --asst-lift is set by assistant.js to the measured height of whatever
     is occupying the bottom of the screen — today that is the consent bar,
     which is 101px on a desktop and 189px on a phone. Measured rather than
     guessed: the first version hard-coded 6rem and 9.5rem, which cleared
     the bar on a desktop, left the panel's own text box underneath it, and
     would have gone wrong again the first time that copy was reworded. */
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--asst-lift, 0px));
  /* The site has a z-index scale in tokens.css and this belongs on it.
     Hard-coding 60 put the button and its panel underneath the Access Dock
     and the consent bar, both of which are fixed to the same corner of the
     screen. The launcher is a toolbar, like the dock beside it; the panel
     is a modal surface and sits above both. */
  z-index: var(--z-toolbar, 300);

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  padding: 0.8rem 1rem;
  border: 1px solid var(--navy-900, #101b2d);
  border-radius: 999px;
  background: var(--navy-900, #101b2d);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(16 27 45 / 28%);
  transition: padding var(--d-quick, 160ms) ease,
              background var(--d-quick, 160ms) ease;
}

.asst-launch svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
}

/* The label is there for a screen reader at every width. It is only hidden
   visually, and only until the button is hovered or focused — so the
   control is never an unlabelled circle to anybody using the keyboard. */
.asst-launch-label {
  max-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-inline-size var(--d-quick, 160ms) ease,
              opacity var(--d-quick, 160ms) ease;
}

.asst-launch:hover .asst-launch-label,
.asst-launch:focus-visible .asst-launch-label {
  max-inline-size: 12rem;
  opacity: 1;
}

.asst-launch:hover,
.asst-launch:focus-visible {
  background: var(--navy-800, #1b2c45);
}

/* -------------------------------------------------------------- the panel */
.asst {
  position: fixed;
  inset: auto 0 var(--asst-lift, 0px) 0;
  z-index: calc(var(--z-modal, 500) + 1);
  display: grid;
  grid-template-rows: auto 1fr auto;

  max-block-size: min(84vh, 40rem, calc(100vh - var(--asst-lift, 0px) - 3rem));
  background: #fff;
  border-top: 3px solid var(--sun-200, #f5c542);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 40px rgb(16 27 45 / 22%);
}

@media (width >= 40rem) {
  .asst {
    inset: auto max(1rem, env(safe-area-inset-right))
           calc(max(1rem, env(safe-area-inset-bottom)) + var(--asst-lift, 0px))
           auto;
    inline-size: 24rem;
    border-radius: 14px;
    border: 1px solid var(--line, #a8c6da);
    border-top: 3px solid var(--sun-200, #f5c542);
  }
}

.asst[hidden] { display: none; }

.asst-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--line, #a8c6da);
}

.asst-head h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.asst-head p {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--text-3, #3a4f69);
}

.asst-close {
  margin-inline-start: auto;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, #a8c6da);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900, #101b2d);
  cursor: pointer;
}

.asst-close:hover,
.asst-close:focus-visible { background: var(--powder-100, #e8f1f7); }

.asst-log {
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.asst-msg {
  max-inline-size: 90%;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.asst-msg.from-them {
  justify-self: start;
  background: var(--powder-100, #e8f1f7);
  color: var(--ink, #101b2d);
  border-bottom-left-radius: 4px;
}

.asst-msg.from-you {
  justify-self: end;
  background: var(--navy-900, #101b2d);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.asst-msg p { margin: 0 0 0.5rem; }
.asst-msg p:last-child { margin-bottom: 0; }
.asst-msg a { color: inherit; }
.asst-msg.from-them a { color: var(--navy-900, #101b2d); }

.asst-msg dl { margin: 0.5rem 0 0; display: grid; gap: 0.3rem 0.6rem; }
.asst-msg dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #3a4f69);
}
.asst-msg dd { margin: 0 0 0.4rem; font-size: 0.85rem; }

.asst-ref {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Suggested things to ask, and the links an answer offers. */
.asst-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.asst-chip {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line, #a8c6da);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900, #101b2d);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
}

.asst-chip:hover,
.asst-chip:focus-visible {
  background: var(--navy-900, #101b2d);
  color: #fff;
  border-color: var(--navy-900, #101b2d);
}

.asst-foot {
  border-top: 1px solid var(--line, #a8c6da);
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

/* On a phone the panel is a full-width sheet, and the Access Dock is
   fixed to the bottom-left corner — on top of this note. The dock is not
   going anywhere, so the sheet leaves room for it. */
@media (width < 40rem) {
  .asst-foot { padding-bottom: 4.25rem; }
}

.asst-row { display: flex; gap: 0.5rem; }

.asst-row input,
.asst-form input,
.asst-form textarea {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line, #a8c6da);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #101b2d);
  font: inherit;
  font-size: 0.875rem;
}

.asst-row input:focus-visible,
.asst-form input:focus-visible,
.asst-form textarea:focus-visible {
  outline: 2px solid var(--navy-900, #101b2d);
  outline-offset: 1px;
}

.asst-send {
  flex: none;
  inline-size: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy-900, #101b2d);
  border-radius: 8px;
  background: var(--sun-200, #f5c542);
  color: var(--navy-900, #101b2d);
  cursor: pointer;
}

.asst-send:hover,
.asst-send:focus-visible { background: var(--sun-300, #e5b32e); }
.asst-send[disabled] { opacity: 0.5; cursor: default; }

.asst-note {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-3, #3a4f69);
}

/* The short form the assistant offers when it cannot answer. */
.asst-form { display: grid; gap: 0.5rem; }
.asst-form textarea { resize: vertical; min-block-size: 4.5rem; }
.asst-form button[type="submit"] {
  padding: 0.6rem 1rem;
  border: 1px solid var(--navy-900, #101b2d);
  border-radius: 999px;
  background: var(--sun-200, #f5c542);
  color: var(--navy-900, #101b2d);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.asst-form button[type="submit"]:hover,
.asst-form button[type="submit"]:focus-visible {
  background: var(--sun-300, #e5b32e);
}

/* ------------------------------------------------------------- movement */

/* A message arrives rather than appearing. Small distance, short duration:
   this runs on every reply, and anything showier would be tiring by the
   third question. */
@keyframes asst-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.asst-msg.is-new {
  animation: asst-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* The panel itself, on the way in. */
@keyframes asst-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.asst:not([hidden]) {
  animation: asst-panel-in 200ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transform-origin: bottom right;
}

/* Three dots, thinking. Decorative only: the bubble carries aria-hidden,
   so a screen reader is told the answer when there is one rather than
   being told that something is happening three times a second. */
.asst-msg.is-typing {
  padding-block: 0.85rem;
  min-inline-size: 3.6rem;
}

.asst-dots {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
}

.asst-dots i {
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-radius: 50%;
  background: var(--navy-700, #27405f);
  opacity: 0.45;
  animation: asst-blink 1.05s infinite ease-in-out both;
}

.asst-dots i:nth-child(2) { animation-delay: 0.16s; }
.asst-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes asst-blink {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-3px); }
}

/* The launcher breathes once when the page settles, so it is noticed
   without being a flashing badge. Once, not on a loop. */
@keyframes asst-notice {
  0%, 100% { box-shadow: 0 6px 20px rgb(16 27 45 / 28%); }
  50%      { box-shadow: 0 6px 20px rgb(16 27 45 / 28%),
                         0 0 0 10px rgb(245 197 66 / 0%); }
}

.asst-launch {
  animation: asst-notice 2.4s ease-out 1.2s 1 both;
}

.asst-launch:active { transform: scale(0.97); }

/* While the panel is open the button is behind it, peeking out at the
   edge. Hidden rather than left showing: it is the same control, and two
   of it on screen is just clutter. */
.asst-launch[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .asst-launch,
  .asst-launch-label { transition: none; }
  .asst-launch,
  .asst-msg.is-new,
  .asst:not([hidden]),
  .asst-dots i { animation: none; }
  .asst-launch:active { transform: none; }
}

@media print {
  .asst-launch, .asst { display: none; }
}

/* A passage quoted from a page, and the page it came from. Set apart from
   the assistant's own sentences on purpose: one is the site speaking and
   the other is a program, and a reader should be able to tell. */
.asst-src {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--navy-700, #27405f);
}

.asst-quote {
  margin: 0;
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid var(--sun-200, #f5c542);
  color: var(--ink, #101b2d);
}

.asst-chip.is-quiet {
  background: transparent;
  border-style: dashed;
  font-weight: 600;
}

.asst-flabel {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-3, #3a4f69);
}

/* The brief the help desk has gathered, shown back before it is sent.
   Nobody should hand over a trip plan they have not been allowed to
   read. */
.asst-brief {
  margin-top: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line, #a8c6da);
}

.asst-brief .asst-src { margin-bottom: 0.4rem; }
.asst-brief dl { margin: 0; }