/* Live recreation of the knowledge-chat screen. It replaces the
   screen-conocimiento screenshot with the same layout, labels, and data as
   DOM, and conocimiento-demo.js replays the captured exchange through it:
   the question is typed, sent, thought about, and answered with its
   citation.

   Scaling follows the hero panel's pattern exactly: the mock is laid out
   once at its fixed 546px design width (the slot's rendered width in the
   split section) and the frame scales that finished layout proportionally —
   it never reflows. The scale factor is frame-width ÷ 546 via
   tan(atan2()), CSS's way of dividing two lengths.

   The mock's natural height is pinned at 336px by an explicit height, so
   it is identical in every animation phase and in both languages: the chat
   log is a fixed flex region and every staged element toggles opacity and
   transform only, never layout.

   The whole mock is decorative (aria-hidden, described by .kc-sr): nothing
   inside is focusable, and its type runs far smaller than the page's
   body-text floor — it is an illustration of a UI, not UI. The screenshot
   it replaces rendered the same glyphs at under 5px; as DOM they render
   crisp. */

.kc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kc-frame {
  /* The frame's height IS the scaled mock's height. The mock's height is
     an explicit 366px, so this ratio is exact by construction. */
  aspect-ratio: 546 / 366;
  container-type: inline-size;
  overflow: hidden;
  background: #fcfcfc;
}

.conocimiento-demo {
  --kc-ink: #17172a;
  --kc-mut: #6d6d80;
  --kc-dim: #9a9aa8;
  --kc-line: #ececf1;
  --kc-accent: #5865f2;
  --kc-soft: #eef0ff;
  width: 546px;
  height: 366px;
  transform-origin: top left;
  scale: tan(atan2(100cqw, 546px));
  display: flex;
  background: #fcfcfc;
  color: var(--kc-ink);
  line-height: 1.35;
  cursor: default;
  user-select: none;
}

.conocimiento-demo * {
  min-width: 0;
}

/* The mock is laid out on its own grid; user-agent paragraph and list
   margins have no place in it. :where() keeps the reset at zero
   specificity so any component rule below can set its own margins. */
:where(.conocimiento-demo p, .conocimiento-demo ul) {
  margin: 0;
}

.conocimiento-demo svg {
  flex: 0 0 auto;
}

/* ---------- sidebar ---------- */

.kc-side {
  display: flex;
  flex-direction: column;
  flex: 0 0 112px;
  padding: 8px 5px 6px;
  border-right: 1px solid var(--kc-line);
  background: #f9f9fb;
}

.kc-brand {
  padding: 1px 4px 5px;
}

.kc-brand img {
  display: block;
  width: auto;
  height: 11px;
}

.kc-label {
  margin: 4px 4px 1px;
  color: var(--kc-dim);
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kc-item {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 2px 4px;
  border-radius: 5px;
  color: var(--kc-mut);
  font-size: 7.5px;
  font-weight: 500;
}

.kc-item svg {
  width: 8px;
  height: 8px;
}

.kc-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kc-item.is-active {
  background: #ececef;
  color: var(--kc-ink);
  font-weight: 600;
}

.kc-item.is-active::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--kc-accent);
}

.kc-badge {
  margin-left: auto;
  padding: 0 4px;
  border-radius: 999px;
  background: #ececf1;
  color: var(--kc-mut);
  font-size: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kc-user {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 5px 4px 0;
  border-top: 1px solid var(--kc-line);
}

.kc-user-ava {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #23233c;
  color: #fff;
  font-size: 5px;
  font-weight: 700;
}

.kc-user-name {
  display: block;
  font-size: 6.5px;
  font-weight: 600;
}

.kc-user-role {
  display: block;
  color: var(--kc-dim);
  font-size: 5.5px;
}

.kc-chev {
  margin-left: auto;
  color: var(--kc-dim);
  font-size: 7px;
}

/* ---------- main column ---------- */

.kc-main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.kc-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-bottom: 1px solid var(--kc-line);
  background: #fff;
}

.kc-top svg {
  width: 8.5px;
  height: 8.5px;
  color: var(--kc-dim);
}

.kc-top-title {
  font-size: 7.5px;
  font-weight: 700;
  white-space: nowrap;
}

.kc-search {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 118px;
  padding: 2px 5px;
  border: 1px solid var(--kc-line);
  border-radius: 5px;
  background: #fff;
  color: var(--kc-dim);
  font-size: 6.5px;
}

.kc-search > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kc-kbd {
  margin-left: auto;
  padding: 0 3px;
  border: 1px solid var(--kc-line);
  border-radius: 3px;
  background: #f2f2f6;
  font-size: 5.5px;
}

.kc-top-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.kc-bell {
  position: relative;
  display: inline-flex;
}

.kc-bell-badge {
  position: absolute;
  top: -3.5px;
  right: -4.5px;
  padding: 0 2px;
  border-radius: 999px;
  background: #e23c4f;
  color: #fff;
  font-size: 4.5px;
  font-weight: 700;
  line-height: 1.5;
}

.kc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--kc-line);
  background: #fff;
}

.kc-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: var(--kc-soft);
  color: var(--kc-accent);
}

.kc-head-icon svg {
  width: 9px;
  height: 9px;
}

.kc-head-title {
  display: block;
  font-size: 8px;
  font-weight: 700;
}

.kc-head-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kc-mut);
  font-size: 6.5px;
}

/* ---------- chat log ----------
   The log is the flex remainder of the fixed-height mock and clips: staged
   elements inside toggle opacity/transform only, so no phase or language
   can change the mock's outer size. */

.kc-chat {
  position: relative;
  flex: 1;
  padding: 6px 12px;
  overflow: hidden;
  transition: opacity 0.22s ease;
}

.kc-day {
  color: var(--kc-dim);
  font-size: 5.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.kc-q {
  margin-top: 5px;
  text-align: right;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.kc-q-bubble {
  display: inline-block;
  max-width: 76%;
  padding: 3.5px 8px;
  border-radius: 8px 8px 2px 8px;
  background: #eaecfb;
  font-size: 7.5px;
  text-align: left;
}

.kc-q-time {
  display: block;
  margin-top: 2px;
  color: var(--kc-dim);
  font-size: 5.5px;
}

.kc-a {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.kc-ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  transition: opacity 0.25s ease-out;
}

.kc-ava svg {
  width: 8px;
  height: 8px;
}

.kc-a-body {
  position: relative;
  flex: 1;
}

.kc-dots {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 2.5px;
  padding: 5px 7px;
  border: 1px solid var(--kc-line);
  border-radius: 8px;
  background: #fff;
  opacity: 0;
}

.kc-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--kc-dim);
}

.kc-a-card {
  padding: 6px 9px 7px;
  border: 1px solid var(--kc-line);
  border-radius: 8px;
  background: #fff;
  font-size: 7.5px;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.kc-a-card li,
.kc-a-intro,
.kc-a-close,
.kc-a-src {
  transition: opacity 0.3s ease-out;
}

.kc-a-card ul {
  margin: 3px 0 0;
  padding-left: 12px;
}

.kc-a-card li {
  margin-top: 2px;
}

.kc-a-close {
  margin-top: 4px;
}

.kc-a-src {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid #f0f0f3;
}

.kc-src-label {
  color: var(--kc-dim);
  font-size: 6.5px;
}

.kc-src-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid #e5e5ea;
  border-radius: 999px;
  color: var(--kc-mut);
  font-size: 6px;
  white-space: nowrap;
}

.kc-src-chip svg {
  width: 6.5px;
  height: 6.5px;
}

.kc-actions {
  display: flex;
  gap: 9px;
  margin-top: 4px;
  margin-left: 20px;
  transition: opacity 0.3s ease-out;
}

/* Direct children only: a bare `span` here would also match the .es/.en
   spans inside and force the hidden language back to visible. */
.kc-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--kc-mut);
  font-size: 6.5px;
  font-weight: 500;
}

.kc-actions svg {
  width: 7px;
  height: 7px;
}

/* ---------- composer ---------- */

.kc-composer {
  padding: 2px 12px 0;
}

.kc-box {
  padding: 6px 8px;
  border: 1px solid #e7e7ec;
  border-radius: 9px;
  background: #fff;
}

.kc-ph {
  position: relative;
  margin-bottom: 8px;
  font-size: 7.5px;
}

.kc-ph-text {
  display: block;
  overflow: hidden;
  color: var(--kc-dim);
  white-space: nowrap;
}

/* The question the loop "types" is pre-placed text revealed by a stepped
   clip-path — no string ever comes from JS. */
.kc-typed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  white-space: nowrap;
}

.kc-box-foot {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kc-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border: 1px solid var(--kc-line);
  border-radius: 50%;
  background: #f7f7fa;
  color: var(--kc-mut);
}

.kc-tool svg {
  width: 7px;
  height: 7px;
}

.kc-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto;
  color: var(--kc-dim);
  font-size: 6px;
}

.kc-ask {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: #8f96f5;
  color: #fff;
  font-size: 6.5px;
  font-weight: 700;
  white-space: nowrap;
}

.kc-ask svg {
  width: 7px;
  height: 7px;
}

.kc-foot {
  margin: 4px 0 5px;
  color: var(--kc-dim);
  font-size: 6px;
  text-align: center;
}

/* ---------- conversations rail ---------- */

.kc-rail {
  display: flex;
  flex: 0 0 124px;
  flex-direction: column;
  padding: 8px;
  border-left: 1px solid var(--kc-line);
  background: #fff;
  transition: opacity 0.22s ease;
}

.kc-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.kc-rail-title {
  font-size: 8px;
  font-weight: 700;
}

.kc-new {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--kc-soft);
  color: var(--kc-accent);
  font-size: 6.5px;
  font-weight: 600;
  white-space: nowrap;
}

.kc-rail-search {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  padding: 2.5px 6px;
  border: 1px solid var(--kc-line);
  border-radius: 6px;
  color: var(--kc-dim);
  font-size: 6.5px;
}

.kc-rail-search svg {
  width: 6.5px;
  height: 6.5px;
}

.kc-rail-search > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kc-rail-day {
  margin: 8px 2px 3px;
  color: var(--kc-dim);
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kc-conv {
  display: flex;
  gap: 5px;
  margin-top: 2px;
  padding: 4px 5px;
  border-radius: 7px;
  transition: opacity 0.3s ease-out;
}

.kc-conv.is-active {
  background: var(--kc-soft);
}

.kc-conv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: #f0f0f3;
  color: var(--kc-mut);
}

.kc-conv-icon svg {
  width: 7px;
  height: 7px;
}

.kc-conv-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 600;
}

.kc-conv-time {
  display: block;
  color: var(--kc-dim);
  font-size: 6px;
}

.kc-rail-foot {
  margin-top: auto;
  color: var(--kc-mut);
  font-size: 6.5px;
  text-align: center;
}

/* ---------- animation states ----------
   The default (scripted-idle, reduced-motion, and off-screen) state is the
   full captured exchange. The loop clears it and replays: type, send,
   think, stream the answer, cite, then rest. Everything is opacity and
   transform, gated by classes conocimiento-demo.js sets on the root. */

.conocimiento-demo.is-cleared .kc-q,
.conocimiento-demo.is-cleared .kc-ava,
.conocimiento-demo.is-cleared .kc-a-card,
.conocimiento-demo.is-cleared .kc-actions,
.conocimiento-demo.is-cleared .kc-conv.is-active {
  opacity: 0;
}

.conocimiento-demo.is-cleared .kc-q {
  transform: translateY(5px);
}

.conocimiento-demo.is-cleared .kc-a-card {
  transform: translateY(5px);
}

.conocimiento-demo.is-cleared.has-question .kc-q,
.conocimiento-demo.is-cleared.has-question .kc-conv.is-active {
  opacity: 1;
  transform: none;
}

.conocimiento-demo.is-thinking .kc-ava,
.conocimiento-demo.is-cleared.has-answer .kc-ava {
  opacity: 1;
}

.conocimiento-demo.is-thinking .kc-dots {
  opacity: 1;
}

.conocimiento-demo.is-thinking .kc-dots i {
  animation: kc-blink 1.1s ease-in-out infinite;
}

.conocimiento-demo.is-thinking .kc-dots i:nth-child(2) {
  animation-delay: 0.18s;
}

.conocimiento-demo.is-thinking .kc-dots i:nth-child(3) {
  animation-delay: 0.36s;
}

.conocimiento-demo.is-cleared.has-answer .kc-a-card {
  opacity: 1;
  transform: none;
}

/* Streaming: the card arrives full-size and its lines fade in staggered,
   so the layout never moves. */
.conocimiento-demo.is-cleared .kc-a-intro,
.conocimiento-demo.is-cleared .kc-a-card li,
.conocimiento-demo.is-cleared .kc-a-close,
.conocimiento-demo.is-cleared .kc-a-src {
  opacity: 0;
}

.conocimiento-demo.is-cleared.has-answer .kc-a-intro,
.conocimiento-demo.is-cleared.has-answer .kc-a-card li,
.conocimiento-demo.is-cleared.has-answer .kc-a-close {
  opacity: 1;
}

.conocimiento-demo.is-cleared.has-answer .kc-a-intro { transition-delay: 0.05s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-card li:nth-child(1) { transition-delay: 0.2s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-card li:nth-child(2) { transition-delay: 0.34s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-card li:nth-child(3) { transition-delay: 0.48s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-card li:nth-child(4) { transition-delay: 0.62s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-card li:nth-child(5) { transition-delay: 0.76s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-card li:nth-child(6) { transition-delay: 0.9s; }
.conocimiento-demo.is-cleared.has-answer .kc-a-close { transition-delay: 1.1s; }

.conocimiento-demo.is-cleared.has-sources .kc-a-src {
  opacity: 1;
}

.conocimiento-demo.is-cleared.has-actions .kc-actions {
  opacity: 1;
}

.conocimiento-demo.is-typing .kc-ph-text {
  opacity: 0;
}

.conocimiento-demo.is-typing .kc-typed {
  clip-path: inset(0 -2% 0 0);
  opacity: 1;
  transition: clip-path 1.5s steps(30, end);
}

.conocimiento-demo.is-sent .kc-ask {
  animation: kc-press 0.45s ease-out;
}

.conocimiento-demo.is-reset .kc-chat,
.conocimiento-demo.is-reset .kc-rail {
  opacity: 0.3;
}

@keyframes kc-blink {
  0%, 100% { opacity: 0.35; }
  40% { opacity: 1; }
}

@keyframes kc-press {
  0% { transform: scale(1); }
  35% { transform: scale(0.88); }
  100% { transform: scale(1); }
}