/* kx-console: port of kairos/KairosConsole.tsx (glass surface), the animated console in the Photo
   hero's angled panel. Everything is em-scaled from one clamped root font-size so the console scales
   as a single object; container queries drop the rail (< 26rem) and the strapline (< 30rem) when it
   is placed narrow, as the source does with @container. Markup comes from Hero_Panels::render_console()
   and the scripted beats from hero-console.js; PHP prints the finished first beat (.is-settled) so the
   editor, reduced motion and no-JS all show a complete exchange. */
.kx .kx-console { position: relative; overflow: hidden; container-type: inline-size; width: 100%;
  font-size: clamp(8.6px, 0.85vw, 12.5px); line-height: 1.6; color: var(--kx-ink);
  border-radius: 1.5em; border: 1px solid rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.38);
  box-shadow: 0 2px 4px rgb(4 49 75 / 0.04), 0 36px 72px -22px rgb(4 49 75 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.7);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); user-select: none; }
.kx .kx-console svg { flex: 0 0 auto; }

/* header */
.kx .kx-console__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 1.6em 1.8em 0; }
.kx .kx-console__logo { height: 1.35em; width: auto; }
.kx .kx-console__strap { display: none; max-width: 9em; text-align: right; font-size: 0.78em; line-height: 1.375; color: var(--kx-ink-muted); }
@container (min-width: 30rem) { .kx .kx-console__strap { display: block; } }

/* body */
.kx .kx-console__body { display: grid; gap: 1.4em; padding: 1.2em 1.4em 2.1em; }
@container (min-width: 26rem) { .kx .kx-console__body { grid-template-columns: 8.5em minmax(0, 1fr); gap: 1.2em; padding-inline: 1.6em; } }

/* rail */
.kx .kx-console__rail { display: none; flex-direction: column; gap: 0.15em; }
@container (min-width: 26rem) { .kx .kx-console__rail { display: flex; } }
.kx .kx-console__nav { display: flex; align-items: center; gap: 0.65em; border-radius: 0.6em; padding: 0.55em 0.75em; font-size: 0.88em; color: var(--kx-ink-muted); }
.kx .kx-console__nav svg { width: 1.1em; height: 1.1em; }
.kx .kx-console__nav.is-active { font-weight: 600; color: var(--kx-navy); background: rgb(255 255 255 / 0.7); box-shadow: 0 1px 2px rgb(4 49 75 / 0.07); }

/* conversation */
.kx .kx-console__conv { min-width: 0; }
.kx .kx-console__greet { font-size: 1.55em; line-height: 1.15; font-weight: 700; color: var(--kx-navy); }
.kx .kx-console__prompt { margin-top: 0.15em; font-size: 1em; line-height: 1.375; color: var(--kx-ink-muted); }

/* the thread: one speaker at the top, the other at the foot, in a box tall enough that nothing below
   it moves between beats */
.kx .kx-console__thread { display: flex; flex-direction: column; justify-content: space-between; gap: 0.7em; min-height: 12.2em; margin-top: 1.1em; }
.kx .kx-console__ask { position: relative; order: 1; }
.kx .kx-console__answer { order: 2; display: flex; gap: 0.55em; }
.kx .kx-console__thread.is-kai-first .kx-console__ask { order: 2; }
.kx .kx-console__thread.is-kai-first .kx-console__answer { order: 1; }
.kx .kx-console__bubble-row { display: flex; justify-content: flex-end; }
.kx .kx-console__bubble { max-width: 86%; border-radius: 0.9em; border-bottom-right-radius: 0.25em; background: var(--kx-navy); padding: 0.55em 0.9em; font-size: 0.88em; line-height: 1.375; color: #fff; }
/* out of flow: the dots are gone before Kai's line is long enough to reach them */
.kx .kx-console__thinking { position: absolute; inset-inline: 0; top: 100%; margin-top: 0.6em; display: flex; align-items: center; gap: 0.5em; }
.kx .kx-console__thread.is-kai-first .kx-console__thinking { display: none; }
.kx .kx-console__thinking svg, .kx .kx-console__answer svg, .kx .kx-console__composer > svg { width: 1.1em; height: 1.1em; color: var(--kx-blue); }
.kx .kx-console__answer > svg { margin-top: 0.15em; }
.kx .kx-console__dots { display: flex; gap: 0.28em; }
.kx .kx-console__dot { width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--kx-ink-faint); animation: kx-kai-bounce 1.15s var(--kx-ease-soft) infinite; }
.kx .kx-console__dot:nth-child(2) { animation-delay: 0.16s; }
.kx .kx-console__dot:nth-child(3) { animation-delay: 0.32s; }
.kx .kx-console__answer-text { font-size: 0.88em; line-height: 1.5; color: var(--kx-ink); }
/* data chips resolve out of the streamed answer; painted with a box-shadow spread so nothing reflows */
.kx .kx-console__chip { border-radius: 0.35em; font-weight: 600; color: var(--kx-navy); background: transparent; box-shadow: 0 0 0 0.2em transparent;
  transition: background-color var(--kx-duration-slow) var(--kx-ease-kairos), box-shadow var(--kx-duration-slow) var(--kx-ease-kairos); }
.kx .kx-console__chip[data-on="1"] { background: color-mix(in srgb, var(--kx-green) 46%, transparent); box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--kx-green) 46%, transparent); }

/* ask field */
.kx .kx-console__composer { display: flex; align-items: center; gap: 0.7em; margin-top: 0.9em; border-radius: 9999px; border: 1px solid rgb(255 255 255 / 0.7); background: rgb(255 255 255 / 0.75); padding: 0.6em 0.5em 0.6em 1em; box-shadow: 0 1px 3px rgb(4 49 75 / 0.06); }
.kx .kx-console__field { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; font-size: 0.92em; color: var(--kx-ink); }
.kx .kx-console__caret { display: inline-block; width: 0.08em; height: 1em; margin-left: 0.05em; transform: translateY(0.15em); background: var(--kx-blue); animation: kx-kai-blink 1.05s steps(1) infinite; }
.kx .kx-console__ph { color: var(--kx-ink-faint); }
.kx .kx-console__composer:has([data-typed]:not(:empty)) .kx-console__ph { display: none; } /* the placeholder steps aside the moment the operator starts typing */
.kx .kx-console__send { display: flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--kx-navy); color: #fff; }
.kx .kx-console__send svg { width: 1em; height: 1em; }

/* suggestions in the idle state; the figures once Kai has answered, in the same fixed box */
.kx .kx-console__box { position: relative; margin-top: 0.8em; height: 7.1em; }
.kx .kx-console__suggest, .kx .kx-console__result { position: absolute; inset-inline: 0; top: 0; }
.kx .kx-console__pill { display: flex; align-items: center; gap: 0.6em; border-radius: 9999px; border: 1px solid rgb(255 255 255 / 0.75); background: rgb(255 255 255 / 0.68); padding: 0.5em 0.9em; font-size: 0.85em; color: var(--kx-ink); }
.kx .kx-console__pill + .kx-console__pill { margin-top: 0.4em; }
.kx .kx-console__pill svg { width: 1em; height: 1em; color: var(--kx-blue); }
.kx .kx-console__result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
.kx .kx-console__metric { border-radius: 0.7em; border: 1px solid rgb(255 255 255 / 0.75); background: rgb(255 255 255 / 0.72); padding: 0.6em 0.75em; min-width: 0; }
.kx .kx-console__m-label, .kx .kx-console__m-value, .kx .kx-console__m-delta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx .kx-console__m-label { font-size: 0.7em; letter-spacing: 0.07em; text-transform: uppercase; color: var(--kx-ink-muted); }
.kx .kx-console__m-value { margin-top: 0.3em; font-size: 1.15em; line-height: 1; font-weight: 700; color: var(--kx-navy); font-variant-numeric: tabular-nums; }
.kx .kx-console__m-delta { margin-top: 0.4em; font-size: 0.68em; font-weight: 700; color: var(--kx-navy-mid); }

/* settled: the finished first exchange, as printed by PHP. Shown until hero-console.js takes over with
   motion; kept under prefers-reduced-motion and in the Elementor editor. */
.kx .kx-console.is-settled .kx-console__suggest, .kx .kx-console.is-settled .kx-console__thinking, .kx .kx-console.is-settled .kx-console__caret { display: none; }
.kx .kx-console.is-settled .kx-console__dot { animation: none; }

@keyframes kx-kai-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kx-kai-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-0.3em); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kx .kx-console__caret, .kx .kx-console__dot { animation: none; } .kx .kx-console__caret { opacity: 0; } }

/* editor only: the note under the panel that says the console renders on its own */
.kx .kx-hero__tilt > .kx-editor-note { margin-top: 0.75rem; }