/* Ask: the trigger in the top bar and the panel that drops from it
   (core/lib/ask.ts renders both, public/ask.js drives them).

   The panel is the PLAYER'S SIBLING, not a document: the site has exactly
   two floating objects and they read as one family. Black ground, no
   outer border, the dock's shadow, the sheet's 12px radius, the same
   right edge (14px), off-white on #a1a1a6 muted, the transport's white
   disc for send, the chrome's outlined chips. The panel used to be paper
   on an ink hairline, which read as a document parked over the page.

   Type is the chrome's, not the article's: 22 display / 13 body /
   12 meta / 11 caps. Spacing follows site.css: the 2/4/6/8/12/16/20/24
   steps and the --ctl-y/--ctl-x roles, nothing in between. Monochrome by
   design. Loaded only when the panel renders.

   Ask sits in the chrome, not in a corner: the bottom-right corner is the
   player's, and a floating launcher there stacked on top of it. The panel
   hangs from the header and stops at --ask-floor, which follows the
   player's size, so the two never compete for the same room. */

@keyframes ask-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* The panel's own box: fixed under the header, hanging from the trigger.
   --ask-top is written by ask.js from the header's measured bottom edge,
   so a sticky header of any height carries the panel with it. */
#dk-ask {
  /* ask.js writes --ask-header, the header's measured bottom edge. The
     bubble's own top follows from it, the tail's height and the gap the
     tail keeps from the header, so the tail hangs UNDER the bar rather
     than touching it and the arithmetic lives in one place. */
  --ask-header: 54px;
  --ask-tail-h: 14px;
  --ask-tail-gap: 6px;
  --ask-top: calc(var(--ask-header) + var(--ask-tail-h) + var(--ask-tail-gap));
  /* The player's own shadow: the two floating objects cast the same one. */
  --ask-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.3);
  /* Fixed values, not the --dk-* tokens: those follow the OS colour
     scheme, and the site is light whatever the OS says. */
  --ask-paper: #f0f0f0;
  --ask-muted: #a1a1a6;
  --ask-line: rgba(240, 240, 240, 0.16);
  --ask-line-strong: rgba(240, 240, 240, 0.28);
  --ask-tint: rgba(240, 240, 240, 0.1);
  /* The floor the panel stops at, so it never runs into the player.
     app.js carries the player's size on <body>. */
  --ask-floor: 14px;
  position: fixed;
  right: 14px;
  top: var(--ask-top);
  z-index: 61;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ask-paper);
  pointer-events: none;
}
/* The dock is 88 tall with its inset and shadow; the expanded sheet 360. */
body.has-player #dk-ask { --ask-floor: 110px; }
body.dkp-open #dk-ask { --ask-floor: 392px; }
#dk-ask.open { pointer-events: auto; }
/* The bubble's tail: a corner pulled out of the top edge, pointing at the
   trigger it came from. ask.js measures the trigger and writes --ask-tail,
   the distance from the panel's right edge to the trigger's centre, so the
   tail follows the button at any header width. It sits on the WRAPPER, not
   the panel: the panel clips its own overflow. */
#dk-ask::after {
  content: "";
  position: absolute;
  /* A square turned on its corner, half of it buried in the bubble: only
     the top corner shows, and that corner takes a radius. A clip-path
     triangle cannot be rounded, and this reads as one shape with the
     bubble because both are the same black. The side is the tail's height
     x root 2, so the point still sits --ask-tail-h above the top edge. */
  --ask-tail-side: calc(var(--ask-tail-h) * 1.414);
  top: calc(var(--ask-tail-side) / -2);
  right: calc(var(--ask-tail, 60px) - var(--ask-tail-side) / 2);
  width: var(--ask-tail-side);
  height: var(--ask-tail-side);
  background: #000;
  border-radius: 5px 0 0 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), right var(--dur) var(--ease);
}
#dk-ask.open::after { opacity: 1; transform: rotate(45deg); transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease), right var(--dur) var(--ease); }
/* Resets carry no specificity (:where), so the component rules below win. */
:where(#dk-ask) *, :where(#dk-ask) *::before, :where(#dk-ask) *::after { box-sizing: border-box; }
:where(#dk-ask) button { font: inherit; color: inherit; cursor: pointer; }
:where(#dk-ask) :focus-visible { outline: 2px solid var(--ask-paper); outline-offset: 2px; }
:where(#dk-ask) svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
#dk-ask [hidden] { display: none !important; }

/* Trigger: a header control on the chip treatment search and the account
   menu already use (32px, hairline, full radius, paper on the black bar).
   The word is the one display-face moment; the mark is the live dot. */
.ask-launch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-snug);
  height: 32px;
  padding: 0 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(240, 240, 240, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #f0f0f0;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ask-launch:hover, .ask-launch[aria-expanded="true"] { border-color: #f0f0f0; }
.ask-launch[aria-expanded="true"] { background: #f0f0f0; color: #0f0f0f; }
.ask-launch:active { transform: scale(0.96); }
.ask-word {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  /* Measured at 4x: with no optical padding the caps ink sits on the
     pill's centre (2px on top put it 1.5px low). */
  white-space: nowrap;
  overflow: hidden;
  max-width: 4em;
  transition: max-width var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), margin var(--dur) var(--ease);
}
/* The mark is one dot at rest. Three copies sit behind it with no size
   and no offset (box-shadow, so the box never changes and the word beside
   it cannot shift); thinking pushes them out to a triangle and empties
   the centre, so the dot SPLITS rather than being replaced. */
.ask-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  box-shadow: 0 0 0 -3px currentColor, 0 0 0 -3px currentColor, 0 0 0 -3px currentColor;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur) var(--ease);
}
.ask-launch:hover .ask-mark { transform: scale(1.3); }
/* At rest the dot breathes: a slow, small scale pulse that draws the eye
   to Ask without blinking at it. Hover, open and thinking own the mark, so
   the pulse stands down there; reduced motion keeps it still. */
@keyframes ask-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
.ask-launch:not(:hover):not([aria-expanded="true"]):not(.is-busy) .ask-mark { animation: ask-breathe 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ask-launch .ask-mark { animation: none !important; } }
/* Open, the panel's own head says ASK, so the trigger drops to the mark
   alone and becomes the way back out. The trigger lives in the HEADER, not
   inside #dk-ask, so its state rides on the button itself: aria-expanded
   for open, and the two marks ask.js sets. */
.ask-launch[aria-expanded="true"] { width: 32px; padding: 0; justify-content: center; gap: 0; }
.ask-launch[aria-expanded="true"] .ask-word { max-width: 0; opacity: 0; }

/* State, on both the word and the mark, quietly: the mark breathes while
   an answer is coming, and carries a ring while one is waiting unread.
   No colour: this chrome is monochrome. */
/* Thinking: the dot opens into three that turn, slowly enough to read as
   thought rather than a spinner. The spread shrinks each copy to 3.6px on
   a 5px circle; the offsets are that circle's three points. */
@keyframes ask-turn { to { transform: rotate(1turn); } }
.ask-launch.is-busy .ask-mark {
  background-color: transparent;
  box-shadow:
    0 -5px 0 -1.2px currentColor,
    4.33px 2.5px 0 -1.2px currentColor,
    -4.33px 2.5px 0 -1.2px currentColor;
  animation: ask-turn 3.2s linear infinite;
}
.ask-launch.is-busy .ask-word { opacity: 0.55; }
.ask-launch.is-unread .ask-mark { box-shadow: 0 0 0 3px rgba(240, 240, 240, 0.22); }
.fest-header .ask-launch.is-unread .ask-mark { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18); }
.ask-launch[aria-expanded="true"].is-unread .ask-mark { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18); }
@media (prefers-reduced-motion: reduce) {
  /* The three still open, they just do not turn. */
  .ask-launch.is-busy .ask-mark { animation: none; }
}
/* The festival shell's bar is paper on ink, so the chip inverts there. */
.fest-header .ask-launch { border-color: rgba(0, 0, 0, 0.25); color: #000; }
.fest-header .ask-launch:hover, .fest-header .ask-launch[aria-expanded="true"] { border-color: #000; }
.fest-header .ask-launch[aria-expanded="true"] { background: #000; color: var(--ask-paper); }

/* Panel: paper on an ink hairline, the dock's shadow, opening from its
   corner. Head, log and composer arrive a beat apart. */
.ask-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: min(420px, calc(100vw - 28px));
  height: min(600px, max(260px, calc(100vh - var(--ask-top) - var(--ask-floor))));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #000;
  color: var(--ask-paper);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--ask-shadow);
  overflow: hidden;
  transform: translateY(-12px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transform-origin: calc(100% - var(--ask-tail, 60px)) 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
#dk-ask.open .ask-panel { transform: none; opacity: 1; pointer-events: auto; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease); }
#dk-ask.open .ask-head, #dk-ask.open .ask-log, #dk-ask.open .ask-composer, #dk-ask.open .ask-contact { animation: dk-rise var(--t-rise) both; }
#dk-ask.open .ask-log, #dk-ask.open .ask-contact { animation-delay: 40ms; }
#dk-ask.open .ask-composer { animation-delay: 80ms; }
@media (max-width: 520px) {
  #dk-ask::after { display: none; }
  #dk-ask.open { inset: 0; top: 0; }
  #dk-ask.open .ask-panel { width: 100%; height: 100%; border-radius: 0; transform-origin: 50% 0; }
}

/* Head: the title in the display face over the one line that says what
   this is, on a hairline. The icon buttons are the player's chevrons. */
.ask-head { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-sm) var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--ask-line); }
.ask-headline { min-width: 0; }
.ask-title { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; padding-top: 2px; }
.ask-sub { font-size: 12px; color: var(--ask-muted); margin-top: var(--sp-tight); }
.ask-actions { margin-left: auto; display: flex; gap: var(--sp-hair); }
.ask-icon { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ask-paper); opacity: 0.7; display: grid; place-items: center; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ask-icon:hover { opacity: 1; }
.ask-icon:active { transform: scale(0.9); }
.ask-icon svg { width: 18px; height: 18px; }
.ask-icon:focus-visible { outline-color: var(--ask-paper); outline-offset: -2px; }

/* Log: the conversation. Answers sit on the paper; the visitor's words in
   a tinted block on the right. Nothing may scroll sideways. */
.ask-log { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: var(--sp-md) var(--sp-md) var(--sp-xs); display: flex; flex-direction: column; gap: var(--sp-sm); scroll-behavior: smooth; }
.ask-msg { max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; animation: dk-rise var(--t-rise) both; }
.ask-user { align-self: flex-end; background: var(--ask-tint); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--radius); }
.ask-answer { align-self: flex-start; padding-top: var(--sp-hair); }
.ask-answer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ask-line-strong); transition: text-decoration-color var(--dur-fast) var(--ease); }
.ask-answer a:hover { text-decoration-color: var(--ask-paper); }
.ask-answer a svg { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; }
.ask-answer.streaming::after { content: ""; display: inline-block; width: 6px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--ask-paper); animation: ask-caret 1s steps(1) infinite; }
.ask-error { border: 1px dashed var(--ask-line-strong); color: var(--ask-muted); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--radius); }
.ask-intro { font-size: 13px; color: var(--ask-muted); max-width: 40ch; margin: 0; animation: dk-rise var(--t-rise) both; transition: opacity var(--dur) var(--ease); }
.ask-intro.leaving, .ask-sug.leaving { opacity: 0; }

/* Status: what is being checked, with three pulsing marks. */
@keyframes ask-pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ask-status-row { display: flex; align-items: center; gap: var(--sp-xs); font-size: 12px; color: var(--ask-muted); min-height: 20px; animation: dk-rise var(--t-rise) both; }
.ask-dots { display: inline-flex; gap: 3px; }
.ask-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--ask-paper); animation: ask-pulse 1.1s infinite; }
.ask-dots i:nth-child(2) { animation-delay: 0.18s; }
.ask-dots i:nth-child(3) { animation-delay: 0.36s; }

/* Chips: suggestions and calls to action. They invert on hover; the
   primary one starts inverted. A play chip is a [data-play] trigger the
   player dock drives, glyphs like every play button on the site. */
.ask-sug, .ask-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-snug); animation: dk-rise var(--t-rise) both; transition: opacity var(--dur) var(--ease); }
.ask-ctas:empty { display: none; }
.ask-chip {
  font-size: 12px;
  line-height: 1.3;
  background: transparent;
  color: var(--ask-paper);
  border: 1px solid var(--ask-line-strong);
  border-radius: var(--radius-chip);
  padding: var(--ctl-y) var(--ctl-x);
  text-align: left;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-snug);
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ask-chip:hover { background: var(--ask-paper); color: #000; border-color: var(--ask-paper); }
.ask-chip:active { transform: scale(0.97); }
.ask-chip.primary { background: var(--ask-paper); color: #000; border-color: var(--ask-paper); }
.ask-chip.primary:hover { background: #fff; border-color: #fff; }
.ask-chip.quiet { border-color: transparent; color: var(--ask-muted); padding-left: 0; cursor: default; }
.ask-chip.quiet:hover { background: transparent; color: var(--ask-muted); }
.ask-chip svg { width: 14px; height: 14px; }
.ask-chip .pb-ic-play svg, .ask-chip .pb-ic-pause svg { fill: currentColor; stroke: none; width: 12px; height: 12px; }
.ask-chip .pb-ic-pause { display: none; }
.ask-chip.playing .pb-ic-pause { display: block; }
.ask-chip.playing .pb-ic-play { display: none; }
.ask-chip.is-current { background: var(--ask-paper); color: #000; border-color: var(--ask-paper); }

/* Composer: one hairline that darkens on focus, and the send disc that
   wakes up when there is something to send. */
.ask-composer { padding: var(--sp-xs) var(--sp-md) var(--sp-sm); border-top: 1px solid var(--ask-line); }
.ask-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-xs); align-items: end; padding-bottom: var(--sp-snug); border-bottom: 1px solid var(--ask-line); transition: border-color var(--dur-fast) var(--ease); }
.ask-field:focus-within { border-bottom-color: var(--ask-paper); }
.ask-field textarea { font: 13px/1.45 var(--font-body); color: var(--ask-paper); background: transparent; border: 0; padding: var(--sp-xs) 0 var(--sp-tight); resize: none; min-height: 36px; max-height: 132px; outline: none; width: 100%; }
.ask-field textarea::placeholder { color: var(--ask-muted); }
.ask-send { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ask-paper); color: #000; display: grid; place-items: center; margin-bottom: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.ask-send:hover { transform: scale(1.04); background: #fff; }
.ask-send:active { transform: scale(0.94); }
.ask-send:disabled { opacity: 0.22; transform: none; cursor: default; }
.ask-send svg { width: 15px; height: 15px; stroke-width: 2; }
.ask-meta { display: flex; justify-content: flex-end; font-size: 12px; color: var(--ask-muted); padding-top: var(--sp-tight); min-height: 14px; font-variant-numeric: tabular-nums; }
.ask-link { background: none; border: 0; padding: 0; font-size: 12px; color: var(--ask-muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ask-line-strong); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
.ask-link:hover { color: var(--ask-paper); text-decoration-color: var(--ask-paper); }
.ask-count { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.ask-count.show { opacity: 1; }

/* Contact: the form for the team, in place of the conversation. The
   field and button treatment is the site's own (.field, .btn). */
.ask-contact { display: none; grid-row: 2 / 4; overflow-y: auto; overflow-x: hidden; padding: var(--sp-md); }
#dk-ask.contact .ask-log, #dk-ask.contact .ask-composer { display: none; }
#dk-ask.contact .ask-contact { display: block; }
.ask-lede { margin: 0 0 var(--sp-md); font-size: 13px; color: var(--ask-muted); max-width: 40ch; }
.ask-cfield { display: block; margin-bottom: var(--sp-sm); }
.ask-cfield span { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ask-muted); margin-bottom: var(--sp-tight); }
.ask-cfield input, .ask-cfield textarea { display: block; width: 100%; border: 1px solid var(--ask-line-strong); background: transparent; color: var(--ask-paper); padding: var(--sp-xs) var(--ctl-x); font: 13px/1.45 var(--font-body); border-radius: var(--radius-chip); }
.ask-cfield input:focus, .ask-cfield textarea:focus { outline: none; border-color: var(--ask-paper); }
.ask-cfield textarea { resize: vertical; min-height: 96px; }
.ask-row { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-lg); }
.ask-btn { display: inline-block; background: var(--ask-paper); color: #000; padding: var(--sp-xs) var(--sp-lg); border-radius: var(--radius-chip); font-size: 12px; border: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ask-btn:hover { opacity: 0.85; }
.ask-btn:active { transform: scale(0.98); }
.ask-btn:disabled { opacity: 0.4; cursor: default; }
.ask-status { font-size: 12px; color: var(--ask-muted); margin: var(--sp-xs) 0 0; }
.ask-done h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.015em; font-size: 22px; line-height: 1; margin: 0 0 var(--sp-sm); }
.ask-done p { margin: 0; font-size: 13px; color: var(--ask-muted); max-width: 40ch; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  #dk-ask *, #dk-ask *::after { animation: none !important; transition: none !important; }
}