/* Shared, namespaced port of the AdRouterCLI reference terminal. */
.v2-tui {
  --tui-cycle: 32s;
  --tui-scroll-one: -168px;
  --tui-scroll-two: -238px;
  --tui-scroll-three: -386px;
  --tui-input-shift-one: 0px;
  --tui-input-shift-two: 0px;
  --tui-input-shift-three: 0px;
  position: relative;
  display: block;
  width: min(100%, 650px);
  height: 440px;
  overflow: hidden;
  color: #d8e1ec;
  background: #121c28;
  border: 1px solid #3b4858;
  border-radius: 11px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
  font: 11px/1.4 ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  isolation: isolate;
  pointer-events: auto;
}

.v2-tui,
.v2-tui *,
.v2-tui *::before,
.v2-tui *::after { box-sizing: border-box; }

.v2-tui-bar {
  position: relative;
  z-index: 6;
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #8d96a3;
  background: #192432;
  border-bottom: 1px solid #293647;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.v2-dots {
  position: absolute;
  left: 14px;
  display: flex;
  gap: 7px;
}

.v2-dots i {
  width: 10px;
  height: 10px;
  background: #ff5f57;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

.v2-dots i:nth-child(2) { background: #febc2e; }
.v2-dots i:nth-child(3) { background: #28c840; }

.v2-tui-terminal {
  position: absolute;
  inset: 39px 0 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  background: #121c28;
}

.v2-tui-screen {
  min-height: 0;
  overflow: hidden;
  padding: 13px 17px 4px;
}

.v2-tui-track {
  width: 100%;
  animation: none;
  transform: translateY(0);
  will-change: transform;
}

.v2-tui-track img {
  display: block;
  width: 100%;
  height: auto;
}

.v2-tui-help {
  display: grid;
  gap: 5px;
  padding: 7px 1px 9px;
  color: #6f7781;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.v2-tui-help b {
  color: #87a8c5;
  font-weight: 600;
}

.v2-transcript {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.v2-entry {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-width: 0;
  opacity: 0;
}

.v2-entry > span { color: #7891aa; }

.v2-entry > p {
  min-width: 0;
  margin: 0;
  color: #c9d3df;
}

.v2-agent > span { color: #4d9bff; }
.v2-agent > p { color: #a8b6c6; }
.v2-response-desktop,
.v2-response-desktop i { display: block; }
.v2-response-mobile { display: none; }
.v2-response-mobile i { display: block; }

.v2-response-desktop i,
.v2-response-mobile i {
  width: 0;
  max-width: 100%;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
}

/* External measurements preserve the typewriter timing under the strict
   production CSP; no inline style attributes are needed in either page. */
.v2-turn-one-agent .v2-response-desktop i:nth-child(1) { --steps: 60; --line-width: 60ch; }
.v2-turn-one-agent .v2-response-desktop i:nth-child(2) { --steps: 43; --line-width: 43ch; }
.v2-turn-one-agent .v2-response-mobile i:nth-child(1) { --steps: 35; --line-width: 35ch; }
.v2-turn-one-agent .v2-response-mobile i:nth-child(2) { --steps: 38; --line-width: 38ch; }
.v2-turn-one-agent .v2-response-mobile i:nth-child(3) { --steps: 29; --line-width: 29ch; }
.v2-turn-two-agent .v2-response-desktop i:nth-child(1) { --steps: 55; --line-width: 55ch; }
.v2-turn-two-agent .v2-response-desktop i:nth-child(2) { --steps: 32; --line-width: 32ch; }
.v2-turn-two-agent .v2-response-mobile i:nth-child(1) { --steps: 31; --line-width: 31ch; }
.v2-turn-two-agent .v2-response-mobile i:nth-child(2) { --steps: 35; --line-width: 35ch; }
.v2-turn-two-agent .v2-response-mobile i:nth-child(3) { --steps: 20; --line-width: 20ch; }
.v2-turn-three-agent .v2-response-desktop i:nth-child(1) { --steps: 58; --line-width: 58ch; }
.v2-turn-three-agent .v2-response-desktop i:nth-child(2) { --steps: 50; --line-width: 50ch; }
.v2-turn-three-agent .v2-response-desktop i:nth-child(3),
.v2-turn-three-agent .v2-response-mobile i:nth-child(3),
.v2-turn-three-agent .v2-response-mobile i:nth-child(4) { --steps: 31; --line-width: 31ch; }
.v2-turn-three-agent .v2-response-mobile i:nth-child(1) { --steps: 37; --line-width: 37ch; }
.v2-turn-three-agent .v2-response-mobile i:nth-child(2) { --steps: 39; --line-width: 39ch; }

.v2-tui-sponsor {
  position: relative;
  z-index: 3;
  max-height: 0;
  overflow: hidden;
  color: #e6f0f8;
  background: #15394d;
  border-top: 0 solid #2d6d8f;
  opacity: 0;
  transform: translateY(8px);
  animation: none;
}

.v2-tui-sponsor > div {
  display: grid;
  gap: 2px;
  padding: 8px 17px 9px;
  font-size: 10px;
  line-height: 1.25;
}

.v2-tui-sponsor span { font-size: 11px; }
.v2-tui-sponsor em { margin-right: 7px; color: #a8c7d9; font-style: normal; font-weight: 500; }
.v2-tui-sponsor strong { font-size: 12px; letter-spacing: 0.02em; }
.v2-tui-sponsor p { margin: 0; }
.v2-tui-sponsor a { color: #6cc5ff; text-underline-offset: 2px; }

.v2-tui-session,
.v2-tui-status {
  display: flex;
  min-height: 20px;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 17px;
  overflow: hidden;
  color: #707985;
  background: #1a2533;
  border-top: 1px solid #263548;
  font-size: 9px;
  white-space: nowrap;
}

.v2-tui-session { min-height: 21px; }
.v2-tui-session span,
.v2-tui-status span { overflow: hidden; text-overflow: ellipsis; }
.v2-tui-status b { color: #6cc5ff; font-weight: 400; }
.v2-tui-status em { color: #a9bd35; font-style: normal; }

.v2-tui-composer {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 7px 17px 6px;
  background: #17191c;
  border-top: 1px solid #394451;
  font-size: 12px;
}

.v2-tui-composer b {
  flex: 0 0 auto;
  color: #6f94ff;
  font-size: 20px;
  line-height: 1;
}

.v2-input-viewport {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 17px;
  overflow: hidden;
}

.v2-placeholder {
  position: absolute;
  inset: 0 auto auto 0;
  color: #6e7074;
  white-space: nowrap;
}

.v2-input-run {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: max-content;
  align-items: flex-start;
  opacity: 0;
  white-space: nowrap;
}

.v2-input-run > span {
  display: block;
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  color: #e4ebf3;
  white-space: nowrap;
}

.v2-input-run > i {
  position: static;
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 15px;
  margin: 1px 0 0 1px;
  background: #f2f5f8;
  animation: none;
}

.v2-tui.is-tui-started .v2-tui-track {
  animation: adr-tui-scroll var(--tui-cycle) cubic-bezier(0.45, 0, 0.2, 1) 1 both;
}

.v2-tui.is-tui-started .v2-turn-one-user { animation: adr-tui-show-15 var(--tui-cycle) linear 1 both; }
.v2-tui.is-tui-started .v2-turn-one-agent { animation: adr-tui-show-19 var(--tui-cycle) linear 1 both; }
.v2-tui.is-tui-started .v2-turn-two-user { animation: adr-tui-show-44 var(--tui-cycle) linear 1 both; }
.v2-tui.is-tui-started .v2-turn-two-agent { animation: adr-tui-show-47 var(--tui-cycle) linear 1 both; }
.v2-tui.is-tui-started .v2-turn-three-user { animation: adr-tui-show-71 var(--tui-cycle) linear 1 both; }
.v2-tui.is-tui-started .v2-turn-three-agent { animation: adr-tui-show-74 var(--tui-cycle) linear 1 both; }

.v2-tui.is-tui-started .v2-response-desktop i,
.v2-tui.is-tui-started .v2-response-mobile i {
  animation-duration: var(--tui-cycle);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: steps(var(--steps), end);
}

.v2-tui.is-tui-started .v2-turn-one-agent .v2-response-desktop i:nth-child(1) { animation-name: adr-tui-r1-desktop-one; }
.v2-tui.is-tui-started .v2-turn-one-agent .v2-response-desktop i:nth-child(2) { animation-name: adr-tui-r1-desktop-two; }
.v2-tui.is-tui-started .v2-turn-one-agent .v2-response-mobile i:nth-child(1) { animation-name: adr-tui-r1-mobile-one; }
.v2-tui.is-tui-started .v2-turn-one-agent .v2-response-mobile i:nth-child(2) { animation-name: adr-tui-r1-mobile-two; }
.v2-tui.is-tui-started .v2-turn-one-agent .v2-response-mobile i:nth-child(3) { animation-name: adr-tui-r1-mobile-three; }
.v2-tui.is-tui-started .v2-turn-two-agent .v2-response-desktop i:nth-child(1) { animation-name: adr-tui-r2-desktop-one; }
.v2-tui.is-tui-started .v2-turn-two-agent .v2-response-desktop i:nth-child(2) { animation-name: adr-tui-r2-desktop-two; }
.v2-tui.is-tui-started .v2-turn-two-agent .v2-response-mobile i:nth-child(1) { animation-name: adr-tui-r2-mobile-one; }
.v2-tui.is-tui-started .v2-turn-two-agent .v2-response-mobile i:nth-child(2) { animation-name: adr-tui-r2-mobile-two; }
.v2-tui.is-tui-started .v2-turn-two-agent .v2-response-mobile i:nth-child(3) { animation-name: adr-tui-r2-mobile-three; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-desktop i:nth-child(1) { animation-name: adr-tui-r3-desktop-one; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-desktop i:nth-child(2) { animation-name: adr-tui-r3-desktop-two; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-desktop i:nth-child(3) { animation-name: adr-tui-r3-desktop-three; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-mobile i:nth-child(1) { animation-name: adr-tui-r3-mobile-one; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-mobile i:nth-child(2) { animation-name: adr-tui-r3-mobile-two; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-mobile i:nth-child(3) { animation-name: adr-tui-r3-mobile-three; }
.v2-tui.is-tui-started .v2-turn-three-agent .v2-response-mobile i:nth-child(4) { animation-name: adr-tui-r3-mobile-four; }

.v2-tui.is-tui-started .v2-tui-sponsor { animation: adr-tui-sponsor var(--tui-cycle) cubic-bezier(0.2, 0.8, 0.2, 1) 1 both; }
.v2-tui.is-tui-started .v2-placeholder { animation: adr-tui-placeholder var(--tui-cycle) steps(1, end) 1 both; }
.v2-tui.is-tui-started .v2-input-one { animation: adr-tui-input-one var(--tui-cycle) steps(1, end) 1 both; }
.v2-tui.is-tui-started .v2-input-two { animation: adr-tui-input-two var(--tui-cycle) steps(1, end) 1 both; }
.v2-tui.is-tui-started .v2-input-three { animation: adr-tui-input-three var(--tui-cycle) steps(1, end) 1 both; }
.v2-tui.is-tui-started .v2-input-one > span { animation: adr-tui-input-type-one var(--tui-cycle) steps(var(--tui-input-characters-one), end) 1 both; }
.v2-tui.is-tui-started .v2-input-two > span { animation: adr-tui-input-type-two var(--tui-cycle) steps(var(--tui-input-characters-two), end) 1 both; }
.v2-tui.is-tui-started .v2-input-three > span { animation: adr-tui-input-type-three var(--tui-cycle) steps(var(--tui-input-characters-three), end) 1 both; }
.v2-tui.is-tui-started .v2-input-run > i { animation: adr-tui-caret 0.8s steps(1, end) infinite; }

.v2-tui[data-animation-state="paused"] *,
.v2-tui[data-animation-state="paused"] *::before,
.v2-tui[data-animation-state="paused"] *::after { animation-play-state: paused !important; }

.v2-tui.is-tui-complete .v2-tui-track { transform: translateY(var(--tui-scroll-three)); }
.v2-tui.is-tui-complete .v2-entry { opacity: 1; }
.v2-tui.is-tui-complete .v2-response-desktop i,
.v2-tui.is-tui-complete .v2-response-mobile i { width: var(--line-width); }
.v2-tui.is-tui-complete .v2-tui-sponsor { max-height: 70px; border-top-width: 1px; opacity: 1; transform: none; }
.v2-tui.is-tui-complete .v2-input-run { display: none; }
.v2-tui.is-tui-complete .v2-placeholder { opacity: 1; }

@keyframes adr-tui-scroll {
  0%, 14% { transform: translateY(0); }
  18%, 42% { transform: translateY(var(--tui-scroll-one)); }
  46%, 69% { transform: translateY(var(--tui-scroll-two)); }
  73%, 100% { transform: translateY(var(--tui-scroll-three)); }
}

@keyframes adr-tui-show-15 { 0%, 14.9% { opacity: 0; } 15%, 100% { opacity: 1; } }
@keyframes adr-tui-show-19 { 0%, 18.9% { opacity: 0; } 19%, 100% { opacity: 1; } }
@keyframes adr-tui-show-44 { 0%, 43.9% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes adr-tui-show-47 { 0%, 46.9% { opacity: 0; } 47%, 100% { opacity: 1; } }
@keyframes adr-tui-show-71 { 0%, 70.9% { opacity: 0; } 71%, 100% { opacity: 1; } }
@keyframes adr-tui-show-74 { 0%, 73.9% { opacity: 0; } 74%, 100% { opacity: 1; } }

@keyframes adr-tui-r1-desktop-one { 0%, 19% { width: 0; } 22%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r1-desktop-two { 0%, 22% { width: 0; } 25%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r1-mobile-one { 0%, 19% { width: 0; } 21%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r1-mobile-two { 0%, 21% { width: 0; } 23%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r1-mobile-three { 0%, 23% { width: 0; } 25%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r2-desktop-one { 0%, 47% { width: 0; } 50%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r2-desktop-two { 0%, 50% { width: 0; } 53%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r2-mobile-one { 0%, 47% { width: 0; } 49%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r2-mobile-two { 0%, 49% { width: 0; } 51%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r2-mobile-three { 0%, 51% { width: 0; } 53%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-desktop-one { 0%, 74% { width: 0; } 76.7%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-desktop-two { 0%, 76.7% { width: 0; } 79.4%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-desktop-three { 0%, 79.4% { width: 0; } 82%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-mobile-one { 0%, 74% { width: 0; } 76%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-mobile-two { 0%, 76% { width: 0; } 78%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-mobile-three { 0%, 78% { width: 0; } 80%, 100% { width: var(--line-width); } }
@keyframes adr-tui-r3-mobile-four { 0%, 80% { width: 0; } 82%, 100% { width: var(--line-width); } }

@keyframes adr-tui-sponsor {
  0%, 16% { max-height: 0; border-top-width: 0; opacity: 0; transform: translateY(8px); }
  18%, 100% { max-height: 70px; border-top-width: 1px; opacity: 1; transform: translateY(0); }
}

@keyframes adr-tui-placeholder { 0%, 2.9%, 15%, 31.9%, 44%, 58.9%, 71%, 100% { opacity: 1; } 3%, 14.9%, 32%, 43.9%, 59%, 70.9% { opacity: 0; } }
@keyframes adr-tui-input-one { 0%, 2.9% { opacity: 0; } 3%, 14.9% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes adr-tui-input-two { 0%, 31.9% { opacity: 0; } 32%, 43.9% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes adr-tui-input-three { 0%, 58.9% { opacity: 0; } 59%, 70.9% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes adr-tui-input-type-one { 0%, 3% { width: 0; } 9%, 14.9% { width: var(--tui-input-width-one); } 15%, 100% { width: 0; } }
@keyframes adr-tui-input-type-two { 0%, 32% { width: 0; } 38%, 43.9% { width: var(--tui-input-width-two); } 44%, 100% { width: 0; } }
@keyframes adr-tui-input-type-three { 0%, 59% { width: 0; } 65%, 70.9% { width: var(--tui-input-width-three); } 71%, 100% { width: 0; } }
@keyframes adr-tui-input-shift-one { 0%, 3% { transform: translateX(0); } 9%, 14.9% { transform: translateX(var(--tui-input-shift-one)); } 15%, 100% { transform: translateX(0); } }
@keyframes adr-tui-input-shift-two { 0%, 32% { transform: translateX(0); } 38%, 43.9% { transform: translateX(var(--tui-input-shift-two)); } 44%, 100% { transform: translateX(0); } }
@keyframes adr-tui-input-shift-three { 0%, 59% { transform: translateX(0); } 65%, 70.9% { transform: translateX(var(--tui-input-shift-three)); } 71%, 100% { transform: translateX(0); } }
@keyframes adr-tui-caret { 50% { visibility: hidden; } }

@media (max-width: 560px) {
  .v2-tui { font-size: 9px; }
  .v2-tui-screen { padding-inline: 12px; }
  .v2-tui-help { font-size: 8px; }
  .v2-transcript { font-size: clamp(7px, 2vw, 7.75px); line-height: 1.4; }
  .v2-entry { grid-template-columns: 50px minmax(0, 1fr); }
  .v2-response-desktop { display: none; }
  .v2-response-mobile { display: block; }
  .v2-tui-sponsor > div,
  .v2-tui-session,
  .v2-tui-status,
  .v2-tui-composer { padding-inline: 12px; }
  .v2-tui-sponsor > div { font-size: 9px; }
  .v2-tui-sponsor span { font-size: 10px; }
  .v2-tui-sponsor strong { font-size: 11px; }
  .v2-tui-session span:last-child,
  .v2-tui-status span:first-child,
  .v2-tui-status > span:last-child { display: none; }
  .v2-tui-status { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-tui.is-tui-complete *,
  .v2-tui.is-tui-complete *::before,
  .v2-tui.is-tui-complete *::after { animation: none !important; }
}