/* /funcionalidades/asistente-y-conexiones/ — the Assistant at /app/agent.
   Three scenes (pantallas-escenas.js): 0 Elena types a task for Friday and
   asks; 1 the approval card, and the same decision first in the rail — the
   resting state; 2 Edit, the priority raised, Approve, Done. 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="assistant"] {
  --ag-accent: #467557;
  --ag-accent-10: rgb(70 117 87 / 0.1);
  --ag-accent-15: rgb(70 117 87 / 0.15);
  --ag-elev: #f6f6f7;
  --ag-success: #187c49;
  --ag-success-soft: #e6f6eb;
}

.pn-frame[data-screen="assistant"] .pn-body.is-module.is-flush {
  flex-direction: row;
  background: #fff;
}

.pn-frame[data-screen="assistant"] .ag-i { width: 13px; height: 13px; flex-shrink: 0; }

.pn-frame[data-screen="assistant"] .md-btn { white-space: nowrap; }
.pn-frame[data-screen="assistant"] .md-btn.is-sm { gap: 5px; padding: 5px 10px; border-radius: 7px; font-size: 9.5px; }
.pn-frame[data-screen="assistant"] .md-btn.is-sm svg { width: 11px; height: 11px; }
.pn-frame[data-screen="assistant"] .md-btn.is-danger { border-color: var(--ac-bad); background: var(--ac-bad); color: #fff; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-ghost .ag-i { width: 11px; height: 11px; }
.pn-frame[data-screen="assistant"] .ag-ghost.is-active { color: var(--ag-accent); }

/* Two faces of one control in one cell: a label that changes in place. */
.pn-frame[data-screen="assistant"] .ag-swap { display: inline-grid; }
.pn-frame[data-screen="assistant"] .ag-swap > * { grid-area: 1 / 1; }

/* ---------- the conversation ---------- */

.pn-frame[data-screen="assistant"] .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="assistant"] .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="assistant"] .ag-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-tile .ag-i { width: 16px; height: 16px; }
.pn-frame[data-screen="assistant"] .ag-head-id b { display: block; color: var(--ac-ink); font-size: 11px; font-weight: 600; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-dot { width: 6.5px; height: 6.5px; flex-shrink: 0; border-radius: 99px; background: var(--ag-success); }

.pn-frame[data-screen="assistant"] .ag-modes { display: flex; align-items: center; gap: 6.5px; }

.pn-frame[data-screen="assistant"] .ag-modes > em {
  color: var(--ac-dim);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.pn-frame[data-screen="assistant"] .ag-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ag-elev); }

.pn-frame[data-screen="assistant"] .ag-seg b {
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--ac-mut);
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
}

.pn-frame[data-screen="assistant"] .ag-seg b.is-on { background: #fff; box-shadow: 0 1px 2px rgb(17 19 24 / 0.06); color: var(--ac-ink); }

/* The transcript keeps its newest turn in view, as the product scrolls to
   its end anchor: the thread sits on the bottom and older turns leave by
   the top. */
.pn-frame[data-screen="assistant"] .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="assistant"] .ag-thread {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 19px;
  width: 100%;
  max-width: 614px;
  margin: 0 auto;
}

.pn-frame[data-screen="assistant"] .ag-turn { display: flex; flex-direction: column; gap: 13px; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-ask { display: flex; justify-content: flex-end; }
.pn-frame[data-screen="assistant"] .ag-ask > div { max-width: 538px; }

.pn-frame[data-screen="assistant"] .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="assistant"] .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="assistant"] .ag-reply { display: flex; align-items: flex-start; gap: 10px; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-avatar .ag-i { width: 13px; height: 13px; }
.pn-frame[data-screen="assistant"] .ag-reply-body { flex: 1; min-width: 0; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-md p { color: var(--ac-ink); font-size: 11px; line-height: 1.625; }
.pn-frame[data-screen="assistant"] .ag-md p + p { margin-top: 8px; }
.pn-frame[data-screen="assistant"] .ag-md b { font-weight: 600; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-refs > em { color: var(--ac-dim); font-size: 9.5px; font-style: normal; font-weight: 500; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-chip .ag-i { width: 10px; height: 10px; }
.pn-frame[data-screen="assistant"] .ag-under { display: flex; align-items: center; gap: 6.5px; margin-top: 6.5px; }

/* ---------- the working line, the approval card, Done ---------- */

.pn-frame[data-screen="assistant"] .ag-state { overflow: hidden; }

.pn-frame[data-screen="assistant"] .ag-state.is-thinking {
  display: flex;
  align-items: center;
  gap: 6.5px;
  max-height: 0;
  visibility: hidden;
  color: var(--ac-dim);
  font-size: 11px;
}

.pn-frame[data-screen="assistant"] .ag-state.is-thinking .ag-i { color: var(--ag-accent); }

.pn-frame[data-screen="assistant"] .ag-state.is-proposal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 600px;
}

.pn-frame[data-screen="assistant"] .ag-state.is-done { max-height: 0; visibility: hidden; }

.pn-frame[data-screen="assistant"] .ag-intro { color: var(--ac-mut); font-size: 11px; line-height: 1.5; }

.pn-frame[data-screen="assistant"] .ag-step {
  padding: 6.5px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 7px;
  background: rgb(246 246 247 / 0.4);
  color: var(--ac-ink);
  font-size: 11px;
}

.pn-frame[data-screen="assistant"] .ag-step-row { display: flex; align-items: center; gap: 6.5px; }
.pn-frame[data-screen="assistant"] .ag-step-name { flex: 1; min-width: 0; font-weight: 500; }
.pn-frame[data-screen="assistant"] .ag-edit-btn .is-editing { visibility: hidden; }

.pn-frame[data-screen="assistant"] .ag-notes { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }

.pn-frame[data-screen="assistant"] .ag-note {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--ag-success);
  font-size: 9.5px;
}

.pn-frame[data-screen="assistant"] .ag-note .ag-i { width: 10px; height: 10px; }

.pn-frame[data-screen="assistant"] .ag-fold { overflow: hidden; }
.pn-frame[data-screen="assistant"] .ag-edits { max-height: 0; visibility: hidden; }

.pn-frame[data-screen="assistant"] .ag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.5px;
  padding-top: 6.5px;
}

.pn-frame[data-screen="assistant"] .ag-field { display: block; min-width: 0; }

.pn-frame[data-screen="assistant"] .ag-field > em {
  display: block;
  margin-bottom: 1px;
  color: var(--ac-dim);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
}

.pn-frame[data-screen="assistant"] .ag-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 7px;
  overflow: hidden;
  border: 1px solid var(--ac-line);
  border-radius: 5px;
  background: #fff;
  color: var(--ac-ink);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="assistant"] .ag-input.is-select .ag-i { width: 11px; height: 11px; color: var(--ac-dim); }
.pn-frame[data-screen="assistant"] .ag-priority b { font-weight: 400; }
.pn-frame[data-screen="assistant"] .ag-priority .is-high { visibility: hidden; }

.pn-frame[data-screen="assistant"] .ag-decide { display: flex; gap: 6.5px; }
.pn-frame[data-screen="assistant"] .ag-approve .ag-swap > * { overflow: hidden; white-space: nowrap; }
/* The button fits the label it shows: the other one takes no width. */
.pn-frame[data-screen="assistant"] .ag-approve .is-working { max-width: 0; visibility: hidden; }

.pn-frame[data-screen="assistant"] .ag-done {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ag-success);
  font-size: 11px;
  font-weight: 500;
}

.pn-frame[data-screen="assistant"] .ag-result {
  display: flex;
  align-items: flex-start;
  gap: 6.5px;
  margin-top: 6.5px;
  padding: 6.5px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 7px;
  background: rgb(246 246 247 / 0.4);
  font-size: 11px;
}

.pn-frame[data-screen="assistant"] .ag-result .ag-i { width: 11px; height: 11px; margin-top: 2px; color: var(--ag-success); }
.pn-frame[data-screen="assistant"] .ag-result u { color: var(--ag-accent); font-weight: 500; text-decoration: none; }

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

.pn-frame[data-screen="assistant"] .ag-composer { flex-shrink: 0; padding: 10px 19px; background: #fff; }
.pn-frame[data-screen="assistant"] .ag-composer-in { max-width: 614px; margin: 0 auto; }
.pn-frame[data-screen="assistant"] .ag-prompts { display: flex; gap: 6.5px; margin-bottom: 6.5px; overflow: hidden; }

.pn-frame[data-screen="assistant"] .ag-prompt {
  padding: 5px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 99px;
  background: #fff;
  color: var(--ac-mut);
  font-size: 9.5px;
  white-space: nowrap;
}

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-text {
  display: grid;
  height: 32px;
  padding: 10px 13px;
  color: var(--ac-ink);
  font-size: 11px;
  line-height: 16px;
}

.pn-frame[data-screen="assistant"] .ag-text > * { grid-area: 1 / 1; align-self: start; }
.pn-frame[data-screen="assistant"] .ag-placeholder { color: var(--ac-dim); font-style: normal; }
.pn-frame[data-screen="assistant"] .ag-typed { visibility: hidden; white-space: nowrap; }

/* How far the request types out, and in how many keystrokes: its measured
   width and its length in each language. */
.pn-frame[data-screen="assistant"] { --ag-type-w: 430px; --ag-type-n: 80; }
html[lang="en"] .pn-frame[data-screen="assistant"] { --ag-type-w: 379px; --ag-type-n: 70; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-tools { display: flex; align-items: center; gap: 5px; }

.pn-frame[data-screen="assistant"] .ag-slash {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  background: var(--ag-elev);
  color: var(--ac-mut);
  font-family: var(--ac-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.pn-frame[data-screen="assistant"] .ag-send { display: flex; align-items: center; gap: 6.5px; margin-left: auto; }
.pn-frame[data-screen="assistant"] .ag-send > em { color: var(--ac-dim); font-size: 9.5px; font-style: normal; }

/* Ask is disabled while the box is empty, as the product's is. */
.pn-frame[data-screen="assistant"] .ag-ask-btn { opacity: 0.6; }

.pn-frame[data-screen="assistant"] .ag-disclaimer { margin-top: 6.5px; color: var(--ac-dim); font-size: 9.5px; text-align: center; }

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

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 13px 6.5px;
}

.pn-frame[data-screen="assistant"] .ag-rail-head p { color: var(--ac-ink); font-size: 11px; font-weight: 600; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-search .ag-i { position: absolute; top: 50%; left: 10px; width: 11px; height: 11px; transform: translateY(-50%); }
.pn-frame[data-screen="assistant"] .ag-search em { font-style: normal; }

.pn-frame[data-screen="assistant"] .ag-groups { flex: 1; min-height: 0; padding: 0 10px 10px; overflow: hidden; }

/* A decision waiting on this person, above her conversations. */
.pn-frame[data-screen="assistant"] .ag-pending { max-height: 200px; }
.pn-frame[data-screen="assistant"] .ag-pending > div { margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--ac-line); }

.pn-frame[data-screen="assistant"] .ag-pending-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6.5px;
  padding: 0 6.5px;
  color: var(--ac-warn);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.pn-frame[data-screen="assistant"] .ag-pending-title .ag-i { width: 11px; height: 11px; }

.pn-frame[data-screen="assistant"] .ag-pending-card {
  padding: 8px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: rgb(246 246 247 / 0.4);
}

.pn-frame[data-screen="assistant"] .ag-pending-card > p { display: flex; align-items: flex-start; gap: 6.5px; color: var(--ac-ink); font-size: 9.5px; line-height: 1.45; }

.pn-frame[data-screen="assistant"] .ag-check {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  box-sizing: border-box;
  border: 1px solid #b9bdc5;
  border-radius: 3px;
  background: #fff;
}

.pn-frame[data-screen="assistant"] .ag-pending-acts { display: flex; gap: 10px; margin-top: 6.5px; padding-left: 18px; }

.pn-frame[data-screen="assistant"] .ag-group { margin-bottom: 13px; }
.pn-frame[data-screen="assistant"] .ag-group:last-child { margin-bottom: 0; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-group ul { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }

.pn-frame[data-screen="assistant"] .ag-session {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6.5px;
  border-radius: 10px;
  color: var(--ac-mut);
}

.pn-frame[data-screen="assistant"] .ag-session.is-on { background: var(--ag-accent-10); color: var(--ac-ink); }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-session-icon .ag-i { width: 11px; height: 11px; }
.pn-frame[data-screen="assistant"] .ag-session-text { flex: 1; min-width: 0; }

.pn-frame[data-screen="assistant"] .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="assistant"] .ag-session-text em { display: block; margin-top: 2px; color: var(--ac-dim); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="assistant"] .ag-when b { font-weight: 400; }
.pn-frame[data-screen="assistant"] .ag-when .is-before { display: none; }

.pn-frame[data-screen="assistant"] .ag-archived { display: flex; margin: 0 13px 10px; }
.pn-frame[data-screen="assistant"] .ag-archived .md-btn { flex: 1; justify-content: center; }

.pn-frame[data-screen="assistant"] .ag-suggest { padding: 10px 13px; border-top: 1px solid var(--ac-line); }

.pn-frame[data-screen="assistant"] .ag-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6.5px;
  margin-bottom: 6.5px;
}

.pn-frame[data-screen="assistant"] .ag-suggest-head p {
  color: var(--ac-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.pn-frame[data-screen="assistant"] .ag-commands { display: flex; flex-wrap: wrap; gap: 5px; }

.pn-frame[data-screen="assistant"] .ag-commands i {
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--ag-elev);
  color: var(--ac-mut);
  font-family: var(--ac-mono);
  font-size: 9.5px;
  font-style: normal;
}

.pn-frame[data-screen="assistant"] .ag-about {
  margin-top: 10px;
  padding: 6.5px 8px;
  border-radius: 7px;
  background: rgb(246 246 247 / 0.6);
  color: var(--ac-mut);
  font-size: 8px;
  line-height: 1.45;
}

/* The product's toast: bottom right, the success tone, a ringed close. */
.pn-frame[data-screen="assistant"] .ag-toast {
  position: absolute;
  z-index: 6;
  right: 77px;
  bottom: 19px;
  display: none;
  align-items: center;
  gap: 10px;
  width: 272px;
  box-sizing: border-box;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgb(24 124 73 / 0.35);
  border-radius: 10px;
  background: var(--ag-success-soft);
  box-shadow: 0 10px 24px rgb(17 19 24 / 0.12);
  color: var(--ag-success);
}

.pn-frame[data-screen="assistant"] .ag-toast p { flex: 1; color: var(--ac-ink); font-size: 11px; font-weight: 500; }
.pn-frame[data-screen="assistant"] .ag-toast-i { width: 13px; height: 13px; flex-shrink: 0; }

.pn-frame[data-screen="assistant"] .ag-toast-x {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border: 1.5px solid rgb(24 124 73 / 0.45);
  border-radius: 99px;
  box-sizing: border-box;
}

.pn-frame[data-screen="assistant"] .ag-toast-x .ag-i { width: 11px; height: 11px; }

/* ---------- scene 0: typing the request ---------- */

.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-turn.is-new,
.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-pending,
.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-when .is-after { display: none; }
.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-when .is-before { display: inline; }

.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-box {
  border-color: var(--ag-accent);
  box-shadow: 0 0 0 2px rgb(70 117 87 / 0.2), 0 1px 2px rgb(17 19 24 / 0.05);
}

.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-placeholder { visibility: hidden; }
.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-typed { visibility: visible; }
.pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-ask-btn { opacity: 1; }

/* ---------- scene 2: Edit, Approve, Done ---------- */

.pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-state.is-proposal,
.pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-pending { max-height: 0; visibility: hidden; }
.pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-state.is-done { max-height: 200px; visibility: visible; }
.pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-priority .is-normal { visibility: hidden; }
.pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-priority .is-high { visibility: visible; }
.pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-toast { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  /* scene 0 — the box is empty for a beat, then the request is typed out
     and Ask is pressed. */
  .pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-placeholder { animation: ag-hold-visible 0.5s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-typed { display: inline-flex; animation: ag-hold-hidden 0.5s step-end; }

  .pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-type {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    animation: ag-type 2.5s steps(var(--ag-type-n)) 0.5s both;
  }

  .pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-typed::after {
    content: '';
    width: 1px;
    height: 14px;
    margin: 1px 0 0 1px;
    background: var(--ac-ink);
    animation: ag-blink 1s steps(1) infinite;
  }

  .pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-box { animation: ag-hold-plain 0.5s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="0"] .ag-ask-btn { animation: ag-hold-dim 0.55s step-end, ag-press 0.24s ease 3.55s; }

  /* scene 1 — the request lands, the working line, then the card; the rail
     lists the same decision as soon as the card arrives. */
  .pn-frame[data-screen="assistant"][data-mk-scene="1"] .ag-turn.is-new .ag-ask { animation: ag-rise 0.35s ease-out both; }
  .pn-frame[data-screen="assistant"][data-mk-scene="1"] .ag-turn.is-new .ag-reply { animation: ag-rise 0.35s ease-out 0.3s both; }
  .pn-frame[data-screen="assistant"][data-mk-scene="1"] .ag-state.is-thinking { animation: ag-hold-open 1.7s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="1"] .ag-state.is-thinking > * { animation: ag-pulse 1.4s ease-in-out infinite; }
  .pn-frame[data-screen="assistant"][data-mk-scene="1"] .ag-state.is-proposal { animation: ag-hold-shut 1.7s step-end, ag-fade 0.35s ease-out 1.7s both; }
  .pn-frame[data-screen="assistant"][data-mk-scene="1"] .ag-pending { animation: ag-hold-shut 1.8s step-end, ag-fade 0.35s ease-out 1.8s both; }

  /* scene 2 — Edit opens the fields; the priority goes from Normal to High;
     Done closes them; Approve works, and the card turns to Done. */
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-edit-btn .is-idle { animation: ag-edit-idle 3.05s step-end, ag-press 0.2s ease 0.55s, ag-press 0.2s ease 2.8s; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-edit-btn .is-editing { animation: ag-edit-on 3.05s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-edits { animation: ag-edits-open 3.05s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-priority .is-normal { animation: ag-hold-visible 2s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-priority .is-high { animation: ag-hold-hidden 2s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-input.is-select { animation: ag-select-focus 2.4s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-state.is-proposal { animation: ag-hold-open-card 4.9s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-decide .md-btn { animation: ag-working-dim 4.9s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-decide .ag-approve { animation: ag-working-dim 4.9s step-end, ag-press 0.2s ease 3.6s; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-approve .is-idle { animation: ag-working-idle 4.9s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-approve .is-working { animation: ag-working-on 4.9s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-pending { animation: ag-hold-open-card 4.9s step-end; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-state.is-done { animation: ag-hold-shut 4.9s step-end, ag-fade 0.35s ease-out 4.9s both; }
  .pn-frame[data-screen="assistant"][data-mk-scene="2"] .ag-toast { animation: ag-hold-hidden 5s step-end, ag-toast-in 0.3s ease-out 5s both; }
}

/* Each "hold" keeps a state for its whole duration and hands over to the
   rule underneath when it ends — long step-end runs, never a short one
   behind a delay. */
@keyframes ag-hold-visible { 0% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes ag-hold-hidden { 0% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes ag-hold-open { 0% { max-height: 40px; visibility: visible; } 100% { max-height: 0; visibility: hidden; } }
@keyframes ag-hold-open-card { 0% { max-height: 600px; visibility: visible; } 100% { max-height: 0; visibility: hidden; } }
@keyframes ag-hold-shut { 0% { max-height: 0; visibility: hidden; } 100% { max-height: 600px; visibility: visible; } }
@keyframes ag-hold-plain { 0% { border-color: var(--ac-line); box-shadow: 0 1px 2px rgb(17 19 24 / 0.05); } 100% { border-color: var(--ag-accent); } }
@keyframes ag-hold-dim { 0% { opacity: 0.6; } 100% { opacity: 1; } }

@keyframes ag-type { from { max-width: 0; } to { max-width: var(--ag-type-w); } }
@keyframes ag-blink { 50% { opacity: 0; } }
@keyframes ag-press { 40% { transform: scale(0.94); } }
@keyframes ag-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ag-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-pulse { 50% { opacity: 0.45; } }
@keyframes ag-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Edit at 0.75s, Done at 3.05s. */
@keyframes ag-edit-idle { 0% { visibility: visible; } 24.6% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes ag-edit-on { 0% { visibility: hidden; } 24.6% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes ag-edits-open { 0% { max-height: 0; visibility: hidden; } 24.6% { max-height: 240px; visibility: visible; } 100% { max-height: 0; visibility: hidden; } }

/* The select is focused from 1.5s until 2.4s; its value changes at 2s. */
@keyframes ag-select-focus {
  0% { border-color: var(--ac-line); box-shadow: none; }
  62.5% { border-color: var(--ag-accent); box-shadow: 0 0 0 2px rgb(70 117 87 / 0.2); }
  100% { border-color: var(--ac-line); box-shadow: none; }
}

/* Approve at 3.6s; working from 3.8s; the plan has run at 4.9s. */
@keyframes ag-working-dim { 0% { opacity: 1; } 77.55% { opacity: 0.6; } 100% { opacity: 0.6; } }
@keyframes ag-working-idle { 0% { max-width: 200px; visibility: visible; } 77.55% { max-width: 0; visibility: hidden; } 100% { max-width: 0; visibility: hidden; } }
@keyframes ag-working-on { 0% { max-width: 0; visibility: hidden; } 77.55% { max-width: 200px; visibility: visible; } 100% { max-width: 200px; visibility: visible; } }