/* kx-dialogue: port of kairos/app/KaiDialogue.tsx, the looping conversation inside the Meet Kai
   frosted panel. Sized in rem like the source (it is page copy, not a scaled product shot). Markup
   from Kai_Dialogue::render_dialogue(), which prints the finished first exchange (.is-settled
   .is-holding); kai-dialogue.js runs the loop when the panel scrolls into view. Beat classes on the
   root: is-typing / is-thinking / is-answering / is-holding, plus is-history while the previous
   exchange sits faded behind the next question being typed. */
.kx .kx-dialogue { position: relative; line-height: 1.6; user-select: none; }
.kx .kx-dialogue svg { flex: 0 0 auto; }

/* composer */
.kx .kx-dialogue__composer { border-radius: 0.75rem; background: rgb(255 255 255 / 0.9); box-shadow: 0 1px 3px rgb(2 38 56 / 0.05); }
.kx .kx-dialogue__input { padding: 1rem 1.25rem 0.75rem; font-size: 0.9375rem; color: var(--kx-navy); }
.kx .kx-dialogue__caret { display: none; width: 1px; height: 1.05em; margin-left: 0.125rem; transform: translateY(0.18em); background: var(--kx-blue); animation: kx-kai-blink 1.05s steps(1) infinite; }
.kx .kx-dialogue.is-typing .kx-dialogue__caret { display: inline-block; }
.kx .kx-dialogue__ph { color: var(--kx-ink-faint); }
.kx .kx-dialogue.is-typing .kx-dialogue__ph { display: none; }
.kx .kx-dialogue__actions { display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem 1rem; color: var(--kx-ink-faint); }
.kx .kx-dialogue__actions svg { width: 1.05rem; height: 1.05rem; }
.kx .kx-dialogue__actions-end { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.kx .kx-dialogue__actions-end > svg { width: 1.15rem; height: 1.15rem; }
.kx .kx-dialogue__send { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: #9fd4f2; color: #fff; transition: background-color var(--kx-duration-base); }
.kx .kx-dialogue.is-typing .kx-dialogue__send { background: var(--kx-blue); }
.kx .kx-dialogue__send svg { width: 1rem; height: 1rem; }

/* the exchange: a reserved height so answers of different lengths do not resize the panel */
.kx .kx-dialogue__exchange { margin-top: 1.5rem; min-height: 11.5rem; }
@media (min-width: 640px) { .kx .kx-dialogue__exchange { min-height: 9.5rem; } }
.kx .kx-dialogue__bubble { margin-left: auto; width: fit-content; max-width: 36ch; border-radius: 1rem; border-bottom-right-radius: 0.125rem; background: rgb(255 255 255 / 0.7); padding: 0.625rem 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--kx-navy); transition: opacity var(--kx-duration-slow); }
.kx .kx-dialogue__bubble[hidden] { display: none; }
.kx .kx-dialogue.is-history .kx-dialogue__bubble, .kx .kx-dialogue.is-history .kx-dialogue__answer { opacity: 0.45; }
.kx .kx-dialogue__reply { display: flex; gap: 0.75rem; margin-top: 1rem; }
.kx .kx-dialogue__reply > svg { margin-top: 0.25rem; width: 1rem; height: 1rem; color: var(--kx-blue); }
.kx .kx-dialogue__reply-body { min-width: 0; flex: 1; }
.kx .kx-dialogue__dots { display: none; align-items: center; gap: 0.375rem; padding: 0.375rem 0; }
.kx .kx-dialogue.is-thinking .kx-dialogue__dots { display: flex; }
.kx .kx-dialogue__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--kx-blue); animation: kx-kai-bounce 1.15s var(--kx-ease-soft) infinite; }
.kx .kx-dialogue__dot:nth-child(2) { animation-delay: 0.14s; }
.kx .kx-dialogue__dot:nth-child(3) { animation-delay: 0.28s; }
.kx .kx-dialogue__answer { font-size: 0.9375rem; line-height: 1.625; color: var(--kx-ink-muted); }
.kx .kx-dialogue.is-thinking .kx-dialogue__answer { display: none; }
.kx .kx-dialogue__strong { font-weight: 600; color: var(--kx-navy); }
.kx .kx-dialogue__chip { border-radius: 0.2em; 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-dialogue__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); }

/* which exchange is up */
.kx .kx-dialogue__steps { margin-top: 1.5rem; display: flex; justify-content: center; gap: 0.5rem; }
.kx .kx-dialogue__step { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: rgb(4 49 75 / 0.2); transition: width var(--kx-duration-slow) var(--kx-ease-kairos), background-color var(--kx-duration-slow) var(--kx-ease-kairos); }
.kx .kx-dialogue__step.is-active { width: 1.5rem; background: var(--kx-blue); }

@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; } }
.kx .kx-dialogue.is-settled .kx-dialogue__caret, .kx .kx-dialogue.is-settled .kx-dialogue__dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .kx .kx-dialogue__caret, .kx .kx-dialogue__dot { animation: none; } .kx .kx-dialogue__caret { opacity: 0; } }

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