/* /funcionalidades/base-de-conocimiento/ — the knowledge base inside
   Settings at /app/knowledge, and the Knowledge Chat at /app/knowledge/chat.
   Three scenes (pantallas-escenas.js): 0 the library — the resting state;
   1 "reembolso" typed into the search, and the cited results in place of the
   table; 2 the Knowledge Chat answering, with the documents it came from.
   The two pages share one frame: the library is padded as a settings screen
   is, the chat runs edge to edge as the workspace does. Every rule states
   the resting frame; each scene overrides what differs at its end, and the
   motion only plays up to it. */

.pn-frame[data-screen="knowledge"] {
  --kn-accent: #467557;
  --kn-accent-10: rgb(70 117 87 / 0.1);
  --kn-accent-15: rgb(70 117 87 / 0.15);
  --kn-elev: #f6f6f7;
  /* The chat's rules below are the Assistant's, and read these names. */
  --ag-accent: #467557;
  --ag-accent-10: rgb(70 117 87 / 0.1);
  --ag-accent-15: rgb(70 117 87 / 0.15);
  --ag-elev: #f6f6f7;
  /* How far the query types out, and in how many keystrokes. */
  --kn-type-w: 56px;
  --kn-type-n: 9;
}

html[lang="en"] .pn-frame[data-screen="knowledge"] { --kn-type-w: 35px; --kn-type-n: 6; }

.pn-frame[data-screen="knowledge"] .pn-scroll { overflow: hidden; }

/* ---------- two pages in one frame ---------- */

.pn-frame[data-screen="knowledge"] .kn-pages {
  display: grid;
  flex: 1 1 auto !important;
  min-height: 0;
}

.pn-frame[data-screen="knowledge"] .kn-page { min-width: 0; min-height: 0; grid-area: 1 / 1; }
.pn-frame[data-screen="knowledge"] .kn-page.is-library { padding: 22px 34px 26px; }
.pn-frame[data-screen="knowledge"] .kn-page.is-chat { display: flex; background: #fff; opacity: 0; }

.pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-page.is-library { opacity: 0; }
.pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-page.is-chat { opacity: 1; }

/* The top bar names the place, and the rail lights it: the gear for the
   library, Intelligence — the rail's seventh destination — for the chat. */
.pn-frame[data-screen="knowledge"] .kn-at.is-chat { display: none; }
.pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-at.is-library { display: none; }
.pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-at.is-chat { display: inline; }
.pn-frame[data-screen="knowledge"][data-mk-scene="2"] .ac-rail-item.is-foot { background: transparent; color: inherit; }
.pn-frame[data-screen="knowledge"][data-mk-scene="2"] .ac-rail > :nth-child(8) { background: #eef0f3; color: #111318; }

/* ---------- the settings shell ---------- */

.pn-frame[data-screen="knowledge"] .st-shell {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ---------- the settings sidebar ---------- */

.pn-frame[data-screen="knowledge"] .st-nav {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  gap: 1px;
}

.pn-frame[data-screen="knowledge"] .st-nav-head {
  padding: 10px 8px 4px;
  color: var(--ac-dim);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pn-frame[data-screen="knowledge"] .st-nav-head:first-child { padding-top: 0; }

.pn-frame[data-screen="knowledge"] .st-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--ac-mut);
  font-size: 10.5px;
  white-space: nowrap;
}

.pn-frame[data-screen="knowledge"] .st-nav-item em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-frame[data-screen="knowledge"] .st-nav-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--ac-dim);
}

.pn-frame[data-screen="knowledge"] .st-nav-item.is-on {
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
  color: var(--ac-ink);
  font-weight: 550;
}

.pn-frame[data-screen="knowledge"] .st-nav-item.is-on .st-nav-icon { color: var(--ac-accent); }

.pn-frame[data-screen="knowledge"] .st-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ---------- the library ---------- */

/* PageHeader wraps: at this width the actions do not fit beside the
   subtitle, and they go to their own line under it. */
.pn-frame[data-screen="knowledge"] .kn-page.is-library .md-head { flex-wrap: wrap; gap: 13px 16px; }
.pn-frame[data-screen="knowledge"] .kn-page.is-library .md-head-text { flex: 0 1 auto; }
.pn-frame[data-screen="knowledge"] .kn-head-side { gap: 8px; }
.pn-frame[data-screen="knowledge"] .kn-caps { display: flex; gap: 4px; margin-right: 4px; }
.pn-frame[data-screen="knowledge"] .md-btn { white-space: nowrap; }

/* The search box: SearchInput, the width of the page. */
.pn-frame[data-screen="knowledge"] .kn-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  background: #fff;
}

.pn-frame[data-screen="knowledge"] .kn-search-i { width: 13px; height: 13px; flex-shrink: 0; color: var(--ac-dim); }
.pn-frame[data-screen="knowledge"] .kn-search-text { display: grid; min-width: 0; color: var(--ac-ink); font-size: 11px; }
.pn-frame[data-screen="knowledge"] .kn-search-text > * { grid-area: 1 / 1; }
.pn-frame[data-screen="knowledge"] .kn-placeholder { color: var(--ac-dim); font-style: normal; }
.pn-frame[data-screen="knowledge"] .kn-typed { visibility: hidden; white-space: nowrap; }
.pn-frame[data-screen="knowledge"] .kn-type { display: inline-block; max-width: var(--kn-type-w); overflow: hidden; vertical-align: top; }

.pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-placeholder { visibility: hidden; }
.pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-typed { visibility: visible; }

/* The table, or the results in its place: one view at a time. */
.pn-frame[data-screen="knowledge"] .kn-views { display: grid; }
.pn-frame[data-screen="knowledge"] .kn-view { min-width: 0; grid-area: 1 / 1; }
.pn-frame[data-screen="knowledge"] .kn-view.is-results { opacity: 0; }
.pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-view.is-table { opacity: 0; }
.pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-view.is-results { opacity: 1; }

.pn-frame[data-screen="knowledge"] .kn-doc { color: var(--ac-ink); font-weight: 500; }
.pn-frame[data-screen="knowledge"] .kn-muted { color: var(--ac-mut); font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- the results: who does this, and the passages ---------- */

.pn-frame[data-screen="knowledge"] .kn-results { display: flex; flex-direction: column; gap: 19px; }
.pn-frame[data-screen="knowledge"] .kn-card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }

.pn-frame[data-screen="knowledge"] .kn-card-head {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 13px 19px;
  border-bottom: 1px solid var(--ac-line);
}

.pn-frame[data-screen="knowledge"] .kn-card-head p { font-size: 13px; font-weight: 600; }

.pn-frame[data-screen="knowledge"] .kn-tile {
  display: grid;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--kn-accent-10);
  color: var(--kn-accent);
}

.pn-frame[data-screen="knowledge"] .kn-tile-i { width: 14.4px; height: 14.4px; }
.pn-frame[data-screen="knowledge"] .kn-list { margin: 0; padding: 0; list-style: none; }
.pn-frame[data-screen="knowledge"] .kn-list > li + li { border-top: 1px solid var(--ac-line); }
.pn-frame[data-screen="knowledge"] .kn-person { padding: 10px 19px; }
.pn-frame[data-screen="knowledge"] .kn-person-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6.5px; }
.pn-frame[data-screen="knowledge"] .kn-person-top b { color: var(--ac-ink); font-size: 11px; font-weight: 500; }
.pn-frame[data-screen="knowledge"] .kn-person-who { margin-top: 1px; color: var(--ac-mut); font-size: 11px; }
.pn-frame[data-screen="knowledge"] .kn-passage { padding: 13px 19px; }
.pn-frame[data-screen="knowledge"] .kn-passage-title { color: var(--ac-ink); font-size: 11px; font-weight: 600; }
.pn-frame[data-screen="knowledge"] .kn-snippet { margin-top: 3px; color: var(--ac-mut); font-size: 11px; line-height: 1.625; }

.pn-frame[data-screen="knowledge"] .kn-snippet mark {
  padding: 0 1.6px;
  border-radius: 3px;
  background: rgb(70 117 87 / 0.2);
  color: var(--ac-ink);
  font-weight: 500;
}

/* ---------- the Knowledge Chat ---------- */

.pn-frame[data-screen="knowledge"] .ag-head-id > span { min-width: 0; }
.pn-frame[data-screen="knowledge"] .ag-head-id em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ThinkingLine: the retrieval stage, before the answer lands. The face
   that is not showing collapses, so the card is only as tall as what it
   holds — a line while it looks, the answer once it has one. */
.pn-frame[data-screen="knowledge"] .kn-thinking {
  display: flex;
  align-items: center;
  gap: 6.5px;
  max-height: 0;
  overflow: hidden;
  color: var(--ac-dim);
  font-size: 11px;
  visibility: hidden;
}

.pn-frame[data-screen="knowledge"] .kn-thinking .ag-i { color: var(--kn-accent); }
.pn-frame[data-screen="knowledge"] .kn-answer { max-height: 400px; }

/* ---------- the workspace, as the Assistant draws it ---------- */

.pn-frame[data-screen="knowledge"] .ag-i { width: 13px; height: 13px; flex-shrink: 0; }
.pn-frame[data-screen="knowledge"] .md-btn { white-space: nowrap; }
.pn-frame[data-screen="knowledge"] .md-btn.is-sm { gap: 5px; padding: 5px 10px; border-radius: 7px; font-size: 9.5px; }
.pn-frame[data-screen="knowledge"] .md-btn.is-sm svg { width: 11px; height: 11px; }
.pn-frame[data-screen="knowledge"] .ag-ghost {
  display: inline-grid;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  color: var(--ac-mut);
  font-style: normal;
}
.pn-frame[data-screen="knowledge"] .ag-ghost .ag-i { width: 11px; height: 11px; }
.pn-frame[data-screen="knowledge"] .ag-ghost.is-active { color: var(--ag-accent); }
.pn-frame[data-screen="knowledge"] .ag-main {
  display: flex;
  flex: 1 1 auto !important;
  flex-direction: column;
  min-width: 0;
  background: rgb(246 246 247 / 0.3);
}
.pn-frame[data-screen="knowledge"] .ag-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 19px;
  border-bottom: 1px solid var(--ac-line);
  background: #fff;
}
.pn-frame[data-screen="knowledge"] .ag-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pn-frame[data-screen="knowledge"] .ag-tile {
  display: grid;
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 10px;
  background: var(--ag-accent-10);
  color: var(--ag-accent);
}
.pn-frame[data-screen="knowledge"] .ag-tile .ag-i { width: 16px; height: 16px; }
.pn-frame[data-screen="knowledge"] .ag-head-id b { display: block; color: var(--ac-ink); font-size: 11px; font-weight: 600; }
.pn-frame[data-screen="knowledge"] .ag-head-id em {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ac-mut);
  font-size: 9.5px;
  font-style: normal;
}
.pn-frame[data-screen="knowledge"] .ag-transcript {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 19px 19px 13px;
  overflow: hidden;
}
.pn-frame[data-screen="knowledge"] .ag-thread {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 19px;
  width: 100%;
  max-width: 614px;
  margin: 0 auto;
}
.pn-frame[data-screen="knowledge"] .ag-turn { display: flex; flex-direction: column; gap: 13px; }
.pn-frame[data-screen="knowledge"] .ag-day {
  color: var(--ac-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-align: center;
  text-transform: uppercase;
}
.pn-frame[data-screen="knowledge"] .ag-ask { display: flex; justify-content: flex-end; }
.pn-frame[data-screen="knowledge"] .ag-ask > div { max-width: 538px; }
.pn-frame[data-screen="knowledge"] .ag-ask p {
  padding: 10px 13px;
  border: 1px solid var(--ag-accent-15);
  border-radius: 13px 13px 5px 13px;
  background: var(--ag-accent-10);
  color: var(--ac-ink);
  font-size: 11px;
  line-height: 1.625;
}
.pn-frame[data-screen="knowledge"] .ag-ask em {
  display: block;
  margin-top: 3px;
  color: var(--ac-dim);
  font-size: 9.5px;
  font-style: normal;
  text-align: right;
}
.pn-frame[data-screen="knowledge"] .ag-reply { display: flex; align-items: flex-start; gap: 10px; }
.pn-frame[data-screen="knowledge"] .ag-avatar {
  display: grid;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  place-items: center;
  border-radius: 10px;
  background: var(--ag-accent);
  box-shadow: 0 1px 2px rgb(17 19 24 / 0.06);
  color: #fff;
}
.pn-frame[data-screen="knowledge"] .ag-avatar .ag-i { width: 13px; height: 13px; }
.pn-frame[data-screen="knowledge"] .ag-reply-body { flex: 1; min-width: 0; }
.pn-frame[data-screen="knowledge"] .ag-card {
  padding: 13px 16px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(17 19 24 / 0.05);
}
.pn-frame[data-screen="knowledge"] .ag-md p { color: var(--ac-ink); font-size: 11px; line-height: 1.625; }
.pn-frame[data-screen="knowledge"] .ag-md p + p { margin-top: 8px; }
.pn-frame[data-screen="knowledge"] .ag-md b { font-weight: 600; }
.pn-frame[data-screen="knowledge"] .ag-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6.5px;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid var(--ac-line);
}
.pn-frame[data-screen="knowledge"] .ag-refs > em { color: var(--ac-dim); font-size: 9.5px; font-style: normal; font-weight: 500; }
.pn-frame[data-screen="knowledge"] .ag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--ac-line);
  border-radius: 99px;
  background: rgb(246 246 247 / 0.5);
  color: var(--ac-mut);
  font-size: 9.5px;
}
.pn-frame[data-screen="knowledge"] .ag-chip .ag-i { width: 10px; height: 10px; }
.pn-frame[data-screen="knowledge"] .ag-composer { flex-shrink: 0; padding: 10px 19px; background: #fff; }
.pn-frame[data-screen="knowledge"] .ag-composer-in { max-width: 614px; margin: 0 auto; }
.pn-frame[data-screen="knowledge"] .ag-box {
  overflow: hidden;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(17 19 24 / 0.05);
}
.pn-frame[data-screen="knowledge"] .ag-text {
  display: grid;
  height: 32px;
  padding: 10px 13px;
  color: var(--ac-ink);
  font-size: 11px;
  line-height: 16px;
}
.pn-frame[data-screen="knowledge"] .ag-text > * { grid-area: 1 / 1; align-self: start; }
.pn-frame[data-screen="knowledge"] .ag-placeholder { color: var(--ac-dim); font-style: normal; }
.pn-frame[data-screen="knowledge"] .ag-box-foot {
  display: flex;
  align-items: center;
  gap: 6.5px;
  padding: 6.5px 10px;
  border-top: 1px solid var(--ac-line);
}
.pn-frame[data-screen="knowledge"] .ag-tools { display: flex; align-items: center; gap: 5px; }
.pn-frame[data-screen="knowledge"] .ag-send { display: flex; align-items: center; gap: 6.5px; margin-left: auto; }
.pn-frame[data-screen="knowledge"] .ag-send > em { color: var(--ac-dim); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="knowledge"] .ag-ask-btn { opacity: 0.6; }
.pn-frame[data-screen="knowledge"] .ag-rail {
  display: flex;
  flex: 0 0 243px !important;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--ac-line);
  background: #fff;
}
.pn-frame[data-screen="knowledge"] .ag-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 13px 6.5px;
}
.pn-frame[data-screen="knowledge"] .ag-rail-head p { color: var(--ac-ink); font-size: 11px; font-weight: 600; }
.pn-frame[data-screen="knowledge"] .ag-search {
  position: relative;
  display: block;
  margin: 0 13px 10px;
  padding: 6.5px 10px 6.5px 29px;
  border: 1px solid var(--ac-line);
  border-radius: 7px;
  background: rgb(246 246 247 / 0.4);
  color: var(--ac-dim);
  font-size: 9.5px;
}
.pn-frame[data-screen="knowledge"] .ag-search .ag-i { position: absolute; top: 50%; left: 10px; width: 11px; height: 11px; transform: translateY(-50%); }
.pn-frame[data-screen="knowledge"] .ag-search em { font-style: normal; }
.pn-frame[data-screen="knowledge"] .ag-groups { flex: 1; min-height: 0; padding: 0 10px 10px; overflow: hidden; }
.pn-frame[data-screen="knowledge"] .ag-group { margin-bottom: 13px; }
.pn-frame[data-screen="knowledge"] .ag-group:last-child { margin-bottom: 0; }
.pn-frame[data-screen="knowledge"] .ag-group-title {
  margin-bottom: 5px;
  padding: 0 6.5px;
  color: var(--ac-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.pn-frame[data-screen="knowledge"] .ag-group ul { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.pn-frame[data-screen="knowledge"] .ag-session {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6.5px;
  border-radius: 10px;
  color: var(--ac-mut);
}
.pn-frame[data-screen="knowledge"] .ag-session.is-on { background: var(--ag-accent-10); color: var(--ac-ink); }
.pn-frame[data-screen="knowledge"] .ag-session-icon {
  display: grid;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 3px;
  place-items: center;
  border-radius: 7px;
  background: var(--ag-elev);
  color: var(--ac-dim);
}
.pn-frame[data-screen="knowledge"] .ag-session-icon .ag-i { width: 11px; height: 11px; }
.pn-frame[data-screen="knowledge"] .ag-session-text { flex: 1; min-width: 0; }
.pn-frame[data-screen="knowledge"] .ag-session-text b {
  display: block;
  overflow: hidden;
  color: var(--ac-ink);
  font-size: 9.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pn-frame[data-screen="knowledge"] .ag-session-text em { display: block; margin-top: 2px; color: var(--ac-dim); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="knowledge"] .ag-archived { display: flex; margin: 0 13px 10px; }
.pn-frame[data-screen="knowledge"] .ag-archived .md-btn { flex: 1; justify-content: center; }

/* ---------- the motion up to each end ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* 1 — the query types out from 0.4s; the results replace the table at
     1.7s, once the search has answered. */
  .pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-placeholder { animation: kn-shown-held 0.4s step-end; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-type { animation: kn-type 0.9s steps(var(--kn-type-n), end) 0.4s both; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-view.is-table { animation: kn-shown-held 1.7s step-end; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-view.is-results { animation: kn-fade 0.3s ease-out 1.7s both; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="1"] .kn-snippet mark { animation: kn-mark 0.5s ease-out 2s both; }

  /* 2 — the chat opens; it looks through the documents until 1.9s; the
     answer lands, and the sources under it at 2.5s. */
  .pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-page.is-chat { animation: kn-fade 0.3s ease-out both; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-thinking { animation: kn-thinking-held 1.9s step-end; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-thinking span { animation: kn-pulse 1.2s ease-in-out infinite; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-answer { animation: kn-answer-held 1.9s step-end, kn-fade 0.4s ease-out 1.9s both; }
  .pn-frame[data-screen="knowledge"][data-mk-scene="2"] .kn-answer .ag-refs { animation: kn-fade 0.35s ease-out 2.5s both; }
}

@keyframes kn-type { from { max-width: 0; } to { max-width: var(--kn-type-w); } }
@keyframes kn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes kn-mark { from { background-color: transparent; } to { background-color: rgb(70 117 87 / 0.2); } }

/* Holds: the state before the change, kept until the moment it happens. */
@keyframes kn-shown-held { from, to { visibility: visible; opacity: 1; } }
@keyframes kn-thinking-held { from, to { max-height: 40px; visibility: visible; } }
@keyframes kn-answer-held { from, to { max-height: 0; overflow: hidden; visibility: hidden; } }