/* Nexa — Treasury operation animation
   Animated sequence showing batch supplier payments processed through the
   Nexa MCP server. Dark bubbles on the page's oat surface, in the existing
   Nexa palette. Inline cards (summary, held list, settled) layer inside the
   assistant bubble as the animation progresses. */

.lp-treasury {
  max-width: 760px;
  margin: clamp(56px, 8vw, 88px) auto 0;
  font-family: var(--font-sans);
}

.tr-card {
  padding: clamp(20px, 3vw, 32px) clamp(16px, 2.6vw, 28px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  text-align: left;
  height: clamp(440px, 60vh, 520px);
  position: relative;
  transition: opacity 350ms ease;
  overflow: hidden;
}
.tr-card.is-resetting { opacity: 0; }

/* Scrollable message stream — keeps the frame size fixed and lets the
   chat behave the way a real chat does: newer messages appear at the
   bottom and the view auto-scrolls to follow. */
.tr-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 26, 23, 0.18) transparent;
  /* gutter so scrollbar doesn't overlap content */
  padding-right: 4px;
}
.tr-stream::-webkit-scrollbar { width: 6px; }
.tr-stream::-webkit-scrollbar-thumb { background: rgba(28, 26, 23, 0.18); border-radius: 3px; }
.tr-stream::-webkit-scrollbar-thumb:hover { background: rgba(28, 26, 23, 0.30); }
.tr-stream::-webkit-scrollbar-track { background: transparent; }
.tr-stream-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tr-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  animation: tr-row-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.tr-row.is-user { flex-direction: row-reverse; }

@keyframes tr-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tr-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-4);
  flex: none;
  width: 38px;
  padding-bottom: 14px;
  line-height: 1;
}
.tr-row.is-user .tr-label { text-align: right; }

.tr-bubble {
  background: #1C1A17;
  color: #EFEBDF;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 540px;
  font-family: var(--font-sans);
  flex: 0 1 auto;
}
.tr-row.is-user .tr-bubble {
  background: #2A2825;
  border-top-right-radius: 4px;
  max-width: 440px;
}
.tr-row.is-asst .tr-bubble {
  border-top-left-radius: 4px;
}
.tr-bubble p { margin: 0; text-wrap: pretty; }
.tr-bubble p + p { margin-top: 12px; }

/* Typewriter caret */
.tr-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: rgba(239, 235, 223, 0.7);
  vertical-align: -2px;
  margin-left: 2px;
  animation: tr-blink 1.05s steps(2, end) infinite;
}
@keyframes tr-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* File attachment chip on user message */
.tr-attach {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(239, 235, 223, 0.08);
  border: 1px solid rgba(239, 235, 223, 0.16);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(239, 235, 223, 0.88);
}
.tr-attach-mark {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(239, 235, 223, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(239, 235, 223, 0.85);
  flex: none;
}
.tr-attach-meta {
  color: rgba(239, 235, 223, 0.55);
}

/* Scanning progress (step 2) */
.tr-progress {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-progress-bar {
  height: 4px;
  background: rgba(239, 235, 223, 0.10);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.tr-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(123, 208, 164, 0.8), transparent);
  border-radius: 999px;
  animation: tr-scan 1400ms linear infinite;
}
@keyframes tr-scan {
  from { transform: translateX(0); }
  to   { transform: translateX(350%); }
}
.tr-progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(239, 235, 223, 0.55);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* Inline card base — used for summary, held, confirm */
.tr-icard {
  background: rgba(239, 235, 223, 0.04);
  border: 1px solid rgba(239, 235, 223, 0.12);
  border-radius: 10px;
  overflow: hidden;
  animation: tr-card-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.tr-icard + .tr-icard { margin-top: 10px; }
.tr-bubble > .tr-icard:first-of-type { margin-top: 14px; }
@keyframes tr-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tr-icard-h {
  padding: 12px 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: #EFEBDF;
  border-bottom: 1px solid rgba(239, 235, 223, 0.10);
  letter-spacing: -0.005em;
}

/* Summary rows */
.tr-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(239, 235, 223, 0.06);
  font-size: 13.5px;
  gap: 16px;
}
.tr-summary-row:last-child { border-bottom: none; }
.tr-summary-row .lbl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(239, 235, 223, 0.88);
  flex: 1;
  min-width: 0;
}
.tr-summary-row .ic {
  font-family: var(--font-mono);
  font-size: 12px;
  width: 14px;
  text-align: center;
  flex: none;
  font-weight: 500;
}
.tr-summary-row .ic.ok   { color: #7BD0A4; }
.tr-summary-row .ic.zap  { color: #D6B85F; }
.tr-summary-row .ic.held { color: rgba(239, 235, 223, 0.50); }
.tr-summary-row .val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #EFEBDF;
  text-align: right;
  white-space: nowrap;
}
.tr-summary-row .val.subtle {
  color: rgba(239, 235, 223, 0.62);
  font-size: 12px;
}

/* Held list */
.tr-held-h {
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 235, 223, 0.60);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(239, 235, 223, 0.10);
  background: rgba(239, 235, 223, 0.02);
}
.tr-held-row {
  display: grid;
  grid-template-columns: 1.1fr auto 1.4fr;
  align-items: baseline;
  gap: 16px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(239, 235, 223, 0.06);
  font-size: 13px;
  animation: tr-row-in 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.tr-held-row:nth-of-type(2) { animation-delay: 60ms; }
.tr-held-row:nth-of-type(3) { animation-delay: 120ms; }
.tr-held-row:nth-of-type(4) { animation-delay: 180ms; }
.tr-held-row:nth-of-type(5) { animation-delay: 240ms; }
.tr-held-row:last-child { border-bottom: none; }
.tr-held-row .name {
  color: #EFEBDF;
  font-family: var(--font-sans);
  font-weight: 500;
}
.tr-held-row .amt {
  color: #EFEBDF;
  font-family: var(--font-mono);
  text-align: right;
}
.tr-held-row .reason {
  color: rgba(239, 235, 223, 0.55);
  text-align: right;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.tr-held-more {
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(239, 235, 223, 0.45);
}

/* Confirmed final state */
.tr-confirm.is-pulsing {
  border-color: rgba(123, 208, 164, 0.35);
  animation: tr-card-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
             tr-pulse 1800ms ease-in-out 480ms infinite;
}
@keyframes tr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 208, 164, 0.22); }
  50%      { box-shadow: 0 0 0 8px rgba(123, 208, 164, 0); }
}
.tr-confirm-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(239, 235, 223, 0.10);
}
.tr-confirm-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(239, 235, 223, 0.92);
  animation: tr-row-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.tr-confirm-list-row:nth-of-type(2) { animation-delay: 120ms; }
.tr-confirm-list-row:nth-of-type(3) { animation-delay: 240ms; }
.tr-confirm-list-row .check {
  color: #7BD0A4;
  font-family: var(--font-mono);
  font-weight: 500;
  width: 14px;
  flex: none;
}
.tr-confirm-totals {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tr-confirm-totals .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  animation: tr-row-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 360ms;
}
.tr-confirm-totals .row.is-disbursed { animation-delay: 460ms; }
.tr-confirm-totals .row .k { color: rgba(239, 235, 223, 0.58); }
.tr-confirm-totals .row .v { color: #EFEBDF; font-weight: 500; }
.tr-confirm-totals .row.is-settled .v { color: #7BD0A4; }

/* Progress strip — dots + play/pause */
.tr-strip {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.tr-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  transition: background 200ms ease;
}
.tr-play:hover { background: rgba(28, 26, 23, 0.04); }
.tr-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.tr-dot {
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: rgba(28, 26, 23, 0.14);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 220ms ease, width 280ms ease;
}
.tr-dot:hover { background: rgba(28, 26, 23, 0.26); }
.tr-dot.is-done { background: rgba(28, 26, 23, 0.34); }
.tr-dot.is-active {
  background: #1C1A17;
  width: 42px;
}
.tr-step-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}

/* Mobile */
@media (max-width: 600px) {
  .tr-label { display: none; }
  .tr-bubble { font-size: 14px; padding: 14px 16px; }
  .tr-summary-row, .tr-confirm-list-row { font-size: 12.5px; }
  .tr-summary-row .val { font-size: 12px; }
  .tr-held-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 10px 14px;
  }
  .tr-held-row .reason {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 11.5px;
    color: rgba(239, 235, 223, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-row, .tr-icard, .tr-held-row, .tr-confirm-list-row, .tr-confirm-totals .row {
    animation-duration: 1ms !important;
  }
  .tr-progress-bar::after { animation: none; opacity: 0.6; left: 0; width: 100%; }
  .tr-confirm.is-pulsing { animation: tr-card-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}