/* kx-app: port of kairos/app/KairosApp.tsx, the clickable interface demo inside the Gradient hero's
   frosted bezel. Em-scaled from one clamped root font-size; container queries shed the search, the
   nav labels and the user's name as the panel narrows, and stack the rail under the conversation
   pane below 48rem (Tailwind's @lg/@xl/@2xl/@3xl/@4xl = 32/36/42/48/56rem). The colours are the
   product's own interface palette (appData.ts), kept as literals on the root. Markup from
   Hero_Panels::render_app(), behaviour in hero-app.js. */
.kx .kx-app { --a-title: #143f59; --a-text: #2d4a5c; --a-muted: #4a6274; --a-faint: #7d93a3; --a-faint2: #8296a5; --a-faint3: #9aa8b2; --a-icon-soft: #b3c2cd;
  --a-blue: #0f7dc2; --a-sky: #1da1f2; --a-pale: #9fd4f2; --a-bg: #f7f9fb; --a-tint: #eef3f7; --a-tint2: #f4f7fa; --a-dark: #0d2a3a; --a-value: #102a3a;
  --a-line: #e8edf2; --a-line2: #e1e8ee; --a-line3: #e6ecf1; --a-line4: #eef2f6; --a-line5: #e3e9ef; --a-line6: #dde6ed; --a-line7: #e4ebf1; --a-line8: #d6e1ea;
  position: relative; overflow: hidden; container-type: inline-size; width: 100%;
  font-size: clamp(7.4px, 0.735vw, 11px); line-height: 1.6; color: var(--a-text);
  border-radius: 1.1em; border: 1px solid var(--a-line5); background: #fff;
  box-shadow: 0 2px 4px rgb(2 38 56 / 0.05), 0 40px 90px -30px rgb(2 38 56 / 0.45); user-select: none; }
.kx .kx-app svg { flex: 0 0 auto; }
.kx .kx-app p, .kx .kx-app li { min-width: 0; }

/* ---------- top bar ---------- */
.kx .kx-app__bar { display: flex; align-items: center; gap: 1em; border-bottom: 1px solid var(--a-line); padding: 0.95em 1.2em; }
@container (min-width: 36rem) { .kx .kx-app__bar { gap: 1.4em; padding-inline: 1.5em; } }
.kx .kx-app__logo { height: 2.1em; width: auto; }
.kx .kx-app__kai { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--a-blue); color: #fff; }
.kx .kx-app__kai svg { width: 1.15em; height: 1.15em; }
.kx .kx-app__nav { display: flex; align-items: center; gap: 0.3em; min-width: 0; }
.kx .kx-app__tab { display: flex; align-items: center; gap: 0.5em; border-radius: 0.5em; padding: 0.5em 0.6em; font-size: 1.05em; white-space: nowrap; color: var(--a-muted); cursor: pointer; transition: color 200ms, background-color 200ms; }
@container (min-width: 36rem) { .kx .kx-app__tab { padding-inline: 0.85em; } }
.kx .kx-app__tab svg { width: 1.15em; height: 1.15em; }
.kx .kx-app__tab:hover { background: var(--a-tint2); }
.kx .kx-app__tab.is-active { background: var(--a-tint); font-weight: 600; color: var(--a-title); }
.kx .kx-app__tab-label { display: none; }
@container (min-width: 42rem) { .kx .kx-app__tab-label { display: inline; } }
.kx .kx-app__search { display: none; min-width: 0; flex: 1; align-items: center; justify-content: center; }
@container (min-width: 56rem) { .kx .kx-app__search { display: flex; } }
.kx .kx-app__search-box { display: flex; width: 100%; max-width: 26em; align-items: center; gap: 0.7em; border-radius: 0.55em; border: 1px solid var(--a-line2); background: var(--a-bg); padding: 0.55em 0.9em; color: var(--a-faint2); }
.kx .kx-app__search-box svg { width: 1.15em; height: 1.15em; }
.kx .kx-app__search-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02em; }
.kx .kx-app__kbd { margin-left: auto; flex: 0 0 auto; border-radius: 0.3em; border: 1px solid var(--a-line2); background: #fff; padding: 0.1em 0.4em; font-size: 0.85em; }
.kx .kx-app__user { margin-left: auto; display: flex; flex: 0 0 auto; align-items: center; gap: 0.8em; color: var(--a-muted); }
@container (min-width: 36rem) { .kx .kx-app__user { gap: 1em; } }
.kx .kx-app__bell { position: relative; display: none; }
@container (min-width: 32rem) { .kx .kx-app__bell { display: block; } }
.kx .kx-app__bell svg, .kx .kx-app__user > svg { width: 1.35em; height: 1.35em; }
.kx .kx-app__bell-dot { position: absolute; top: -0.1em; right: -0.1em; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--a-sky); }
.kx .kx-app__user > svg { display: none; }
@container (min-width: 36rem) { .kx .kx-app__user > svg { display: block; } }
.kx .kx-app__me { display: flex; align-items: center; gap: 0.55em; }
@container (min-width: 36rem) { .kx .kx-app__me { padding-left: 0.3em; } }
.kx .kx-app__avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--a-title); font-size: 0.85em; font-weight: 600; color: #fff; }
.kx .kx-app__name { display: none; font-size: 1.02em; font-weight: 500; white-space: nowrap; color: var(--a-title); }
.kx .kx-app__me svg { display: none; width: 1em; height: 1em; }
@container (min-width: 48rem) { .kx .kx-app__name { display: inline; } .kx .kx-app__me svg { display: block; } }

/* ---------- body ---------- */
.kx .kx-app__body { display: grid; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 48rem) { .kx .kx-app__body { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } .kx .kx-app__pane { border-right: 1px solid var(--a-line); } }

/* conversation pane; the wave is its ground, exactly as it is in the product */
.kx .kx-app__pane { position: relative; display: flex; flex-direction: column; min-height: 32em; }
.kx .kx-app__wave { position: absolute; inset-inline: 0; top: 0; height: 62%; width: 100%; opacity: 0.9; }
.kx .kx-app__tools { position: relative; display: flex; align-items: center; gap: 0.75em; padding: 0.9em 1.3em; color: var(--a-faint); }
.kx .kx-app__tools svg { width: 1.3em; height: 1.3em; }
.kx .kx-app__tools-end { margin-left: auto; display: flex; align-items: center; gap: 1em; }
.kx .kx-app__tools-end svg { width: 1.2em; height: 1.2em; }

/* the stage: greeting until something is asked, then the thread */
.kx .kx-app__stage { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; padding: 0 2.4em 1.4em; }
.kx .kx-app__hello, .kx .kx-app__question { font-size: 2.3em; line-height: 1.6; font-weight: 600; letter-spacing: -0.02em; color: var(--a-dark); }
.kx .kx-app__question { margin-top: 0.1em; width: fit-content;
  background-image: linear-gradient(96deg, #1f7a3a 0%, #0f7dc2 30%, #0a3f5e 55%, #7a6a4a 78%, #b2622a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .kx .kx-app__question { color: var(--kx-navy); } }
.kx .kx-app__catchup { display: flex; gap: 0.6em; margin-top: 1.6em; font-size: 1.02em; line-height: 1.65; color: var(--a-text); }
.kx .kx-app__catchup > svg { margin-top: 0.3em; width: 1.1em; height: 1.1em; color: var(--a-blue); }
.kx .kx-app__catchup strong { font-weight: 600; color: var(--a-title); }
.kx .kx-app__votes { margin-left: 0.5em; display: inline-flex; gap: 0.5em; transform: translateY(0.15em); color: var(--a-faint2); }
.kx .kx-app__votes svg { width: 1em; height: 1em; }
.kx .kx-app__more { margin-top: 0.5em; font-size: 0.95em; font-weight: 500; color: var(--a-sky); }
.kx .kx-app__thread { display: flex; flex-direction: column; gap: 1.1em; }
.kx .kx-app__thread[hidden], .kx .kx-app__greeting[hidden] { display: none; }
.kx .kx-app__bubble { align-self: flex-end; border-radius: 0.9em; border-bottom-right-radius: 0.25em; background: var(--a-tint); padding: 0.7em 1.1em; font-size: 1.08em; font-weight: 500; color: var(--a-title); }
.kx .kx-app__reply { display: flex; gap: 0.7em; }
.kx .kx-app__reply > svg { margin-top: 0.35em; width: 1.2em; height: 1.2em; color: var(--a-blue); }
.kx .kx-app__reply-body { min-width: 0; flex: 1; }
.kx .kx-app__dots { display: none; align-items: center; gap: 0.35em; padding: 0.4em 0; }
.kx .kx-app.is-thinking .kx-app__dots { display: flex; }
.kx .kx-app__dot { width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--a-blue); animation: kx-kai-bounce 1.15s var(--kx-ease-soft) infinite; }
.kx .kx-app__dot:nth-child(2) { animation-delay: 0.14s; }
.kx .kx-app__dot:nth-child(3) { animation-delay: 0.28s; }
.kx .kx-app__answer { font-size: 1.08em; line-height: 1.7; color: var(--a-text); }
.kx .kx-app.is-thinking .kx-app__answer { display: none; }
.kx .kx-app__chip { border-radius: 0.2em; font-weight: 600; color: var(--a-title); 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-app__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); }
.kx .kx-app__again { display: none; margin-top: 1.1em; align-items: center; gap: 0.5em; border-radius: 9999px; border: 1px solid var(--a-line8); background: #fff; padding: 0.5em 1em; font-size: 0.98em; font-weight: 600; color: var(--a-title); cursor: pointer; transition: color 200ms, border-color 200ms; }
.kx .kx-app.is-done .kx-app__again { display: inline-flex; }
.kx .kx-app__again:hover { border-color: var(--a-blue); color: var(--a-blue); }
.kx .kx-app__again svg { width: 1.05em; height: 1.05em; }

/* suggestions: the one thing on the page the reader is meant to click, so a light runs round each rim */
.kx .kx-app__suggest { position: relative; padding-inline: 2.4em; }
.kx .kx-app__chips { display: flex; flex-wrap: wrap; gap: 0.7em; transition: opacity 420ms var(--kx-ease-kairos), transform 420ms var(--kx-ease-kairos); }
.kx .kx-app:not(.is-idle) .kx-app__chips { pointer-events: none; opacity: 0; transform: translateY(0.5em); }
.kx .kx-app__prompt { position: relative; display: flex; align-items: center; gap: 0.55em; border-radius: 9999px; border: 1px solid var(--a-line7); background: rgb(255 255 255 / 0.85); padding: 0.6em 1em; font-size: 1.02em; color: var(--a-text); box-shadow: 0 1px 2px rgb(2 38 56 / 0.05); cursor: pointer;
  transition: transform 200ms, color 200ms, box-shadow 200ms; }
.kx .kx-app__prompt svg { width: 1.15em; height: 1.15em; }
.kx .kx-app__prompt:hover { transform: translateY(-0.1em); color: var(--a-blue); box-shadow: 0 6px 14px -3px rgb(2 38 56 / 0.2); }
@property --kx-chip-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes kx-chip-sweep { to { --kx-chip-angle: 360deg; } }
.kx .kx-app__prompt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--kx-chip-angle), transparent 0deg, transparent 26deg, color-mix(in srgb, var(--kx-green) 90%, white) 62deg, var(--kx-sky) 96deg, color-mix(in srgb, var(--kx-sky) 40%, transparent) 124deg, transparent 162deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: kx-chip-sweep 3.8s linear infinite; animation-delay: var(--kx-chip-delay, 0s); }
.kx .kx-app__prompt:hover::before { animation-duration: 1.5s; }

/* composer */
.kx .kx-app__composer-wrap { position: relative; padding: 1.1em 2.4em 1.8em; }
.kx .kx-app__composer { border-radius: 0.7em; border: 1px solid var(--a-line6); background: #fff; box-shadow: 0 1px 3px rgb(2 38 56 / 0.05); }
.kx .kx-app__input { padding: 0.95em 1.1em 0.7em; font-size: 1.05em; color: var(--a-title); }
.kx .kx-app__caret { display: none; width: 0.08em; height: 1.05em; margin-left: 0.05em; transform: translateY(0.18em); background: var(--a-blue); animation: kx-kai-blink 1.05s steps(1) infinite; }
.kx .kx-app.is-idle .kx-app__caret, .kx .kx-app.is-typing .kx-app__caret { display: inline-block; }
.kx .kx-app__ph { display: none; color: var(--a-faint3); }
.kx .kx-app.is-idle .kx-app__ph { display: inline; }
.kx .kx-app__actions { display: flex; align-items: center; gap: 0.9em; padding: 0 1.1em 0.85em; color: var(--a-faint2); }
.kx .kx-app__actions svg { width: 1.2em; height: 1.2em; }
.kx .kx-app__actions-end { margin-left: auto; display: flex; align-items: center; gap: 0.9em; }
.kx .kx-app__actions-end > svg { width: 1.3em; height: 1.3em; }
.kx .kx-app__send { display: flex; align-items: center; justify-content: center; width: 2.3em; height: 2.3em; border-radius: 0.55em; background: var(--a-pale); color: #fff; transition: background-color 200ms; }
.kx .kx-app.is-typing .kx-app__send { background: var(--a-blue); }
.kx .kx-app__send svg { width: 1.15em; height: 1.15em; }

/* ---------- insights rail ---------- */
.kx .kx-app__rail { background: var(--a-bg); padding: 0.9em 1.3em 1.6em; }
.kx .kx-app__customize-row { display: flex; justify-content: flex-end; }
.kx .kx-app__customize { display: flex; align-items: center; gap: 0.5em; border-radius: 0.5em; border: 1px solid var(--a-line2); background: #fff; padding: 0.5em 0.85em; font-size: 1em; color: var(--a-muted); }
.kx .kx-app__customize svg { width: 1.05em; height: 1.05em; }
.kx .kx-app__insights { margin-top: 0.9em; overflow: hidden; border-radius: 0.6em; border: 1px solid var(--a-line3); background: #fff; }
.kx .kx-app__insights-head { display: flex; align-items: center; gap: 0.55em; border-bottom: 1px solid var(--a-line4); padding: 0.85em 1.1em; }
.kx .kx-app__insights-head > svg:first-child { width: 1.15em; height: 1.15em; color: var(--a-blue); }
.kx .kx-app__insights-head span { font-size: 1.08em; font-weight: 600; color: var(--a-title); }
.kx .kx-app__insights-head > svg:last-child { margin-left: auto; width: 1.15em; height: 1.15em; color: var(--a-faint2); }
.kx .kx-app__insight { border-bottom: 1px solid var(--a-line4); padding: 0.9em 1.1em; }
.kx .kx-app__insight:last-child { border-bottom: 0; }
.kx .kx-app__insight[hidden] { display: none; }
/* the rail shows two: a posted insight takes the top slot and the second one steps off */
.kx .kx-app.is-posted .kx-app__insight--static:nth-of-type(3) { display: none; }
.kx .kx-app.is-posted .kx-app__insight--posted { animation: kx-kai-post 600ms var(--kx-ease-kairos); }
.kx .kx-app__insight-meta { display: flex; align-items: center; gap: 0.5em; font-size: 0.92em; color: var(--a-faint); }
.kx .kx-app__dot-src { width: 0.42em; height: 0.42em; border-radius: 50%; flex: 0 0 auto; }
.kx .kx-app__new { border-radius: 0.25em; background: #dff5c8; padding: 0.08em 0.4em; font-size: 0.85em; font-weight: 600; color: #3d6b14; }
.kx .kx-app__insight-meta > svg { margin-left: auto; width: 1.1em; height: 1.1em; color: var(--a-icon-soft); }
.kx .kx-app__insight-title { margin-top: 0.35em; font-size: 1.04em; font-weight: 600; color: var(--a-title); }
.kx .kx-app__insight-body { margin-top: 0.25em; font-size: 1em; line-height: 1.55; color: var(--a-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kx .kx-app__load { display: flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.7em 0; font-size: 0.98em; font-weight: 500; color: var(--a-sky); }
.kx .kx-app__load svg { width: 1em; height: 1em; }
.kx .kx-app__tiles { margin-top: 0.9em; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9em; }
.kx .kx-app__tile { position: relative; overflow: hidden; border-radius: 0.6em; border: 1px solid var(--a-line3); background: #fff; padding-top: 0.85em;
  transition: border-color 520ms var(--kx-ease-kairos), box-shadow 520ms var(--kx-ease-kairos), transform 520ms var(--kx-ease-kairos); }
.kx .kx-app__tile.is-lit { transform: translateY(-0.15em); border-color: #b8d9ef; box-shadow: 0 6px 18px -6px rgb(15 125 194 / 0.45); }
.kx .kx-app__tile-src { display: flex; align-items: center; gap: 0.45em; padding-inline: 0.9em; font-size: 0.9em; color: var(--a-faint); }
.kx .kx-app__tile-src .kx-app__dot-src { width: 0.4em; height: 0.4em; }
.kx .kx-app__tile-label { margin-top: 0.4em; padding-inline: 0.9em; font-size: 0.88em; font-weight: 600; letter-spacing: 0.04em; color: var(--a-muted); }
.kx .kx-app__tile-label span { font-weight: 400; color: var(--a-faint2); }
.kx .kx-app__tile-value { margin-top: 0.2em; padding-inline: 0.9em; font-size: 1.9em; font-weight: 600; letter-spacing: -0.02em; color: var(--a-value); }
.kx .kx-app__tile-value span { margin-left: 0.2em; font-size: 0.5em; font-weight: 500; color: var(--a-muted); }
.kx .kx-app__tile-delta { margin-top: 0.1em; padding-inline: 0.9em; font-size: 0.92em; font-weight: 600; }
.kx .kx-app__tile--up .kx-app__tile-delta { color: #2f7d32; }
.kx .kx-app__tile--down .kx-app__tile-delta { color: #c0392b; }
.kx .kx-app__tile-delta span { margin-left: 0.35em; font-weight: 400; color: var(--a-faint2); }
.kx .kx-app__spark { margin-top: 0.45em; width: 100%; height: 2.6em; }

@keyframes kx-kai-post { from { opacity: 0; transform: translateY(-0.6em); background: color-mix(in srgb, var(--kx-green) 18%, white); } to { opacity: 1; transform: translateY(0); background: #fff; } }
@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; } }

/* settled (reduced motion, Elementor editor): no running animation anywhere */
.kx .kx-app.is-settled .kx-app__caret, .kx .kx-app.is-settled .kx-app__dot, .kx .kx-app.is-settled .kx-app__prompt::before, .kx .kx-app.is-settled .kx-app__insight--posted { animation: none; }
.kx .kx-app.is-settled .kx-app__prompt::before { background: color-mix(in srgb, var(--kx-sky) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .kx .kx-app__caret, .kx .kx-app__dot, .kx .kx-app__prompt::before, .kx .kx-app__insight--posted { animation: none; }
  .kx .kx-app__caret { opacity: 0; }
  .kx .kx-app__prompt::before { background: color-mix(in srgb, var(--kx-sky) 45%, transparent); }
}

/* editor only: the note under the bezel that says the demo renders on its own */
.kx .kx-page-hero__panel > .kx-editor-note { margin-top: 0.75rem; }