/* ==========================================================================
   Tenvy product demo — ONE canonical component, shared by the /portfolio deck
   sheet and the /tenvy page hero (see demo.js: window.TenvyDemo.mount).

   A faithful recreation of the real app (prsnl/.../tenvy-oss): the macOS
   Workspace window (chat left, live browser right) running the real flow, with
   the iPhone showing the saved Application Replay. Every token below is taken
   from the app's own source — Brand.swift / DesignSystem.swift:
     ink #1a1917 · ivory #f4f1ea · accent #f0834e · accentDeep #d16022
     good #2f9950 · card #fff · subtle black/5% · hairline black/8%
     8pt spacing scale · continuous radii 10/14/16 · SF/system type ramp.

   Everything is sized in cqw/cqh (the stage is a 16:10 container query box) so
   it scales to any width with no reflow. Nothing here depends on a framework.
   ========================================================================== */

.tvx, .tvx * { box-sizing: border-box; margin: 0; padding: 0; }

.tvx {
  --ink: #1a1917;
  --ivory: #f4f1ea;
  --accent: #f0834e;
  --accent-deep: #d16022;
  --good: #2f9950;
  --card: #ffffff;
  --subtle: rgba(26, 25, 23, 0.05);
  --subtle-2: rgba(26, 25, 23, 0.08);
  --hair: rgba(26, 25, 23, 0.10);
  --sec: rgba(26, 25, 23, 0.52);
  --sec-2: rgba(26, 25, 23, 0.40);

  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  container-type: size;
  overflow: hidden;
  border-radius: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(90% 70% at 24% 8%, rgba(240, 131, 78, 0.14), transparent 60%),
    radial-gradient(70% 80% at 92% 98%, rgba(240, 131, 78, 0.10), transparent 62%),
    var(--ivory);
}

/* faint brand wordmark watermark, top-right, so the ground isn't empty */
.tvx__wm {
  position: absolute;
  top: 4.6cqh; right: 3.2cqw;
  display: flex; align-items: center; gap: 0.7cqw;
  opacity: 0.5;
  pointer-events: none;
}
.tvx__wm svg { width: 2.2cqw; height: 2.2cqw; }
.tvx__wm span { font-size: 1.5cqw; font-weight: 600; letter-spacing: -0.04em; color: rgba(26,25,23,0.42); }

/* ======================= macOS window ======================= */
.tvx-mac {
  position: absolute;
  left: 2.6cqw; top: 3.4cqh;
  width: 71cqw; height: 84cqh;
  background: var(--card);
  border-radius: 1.5cqw;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--hair),
    0 2.4cqw 5cqw rgba(26, 25, 23, 0.20),
    0 0.6cqw 1.4cqw rgba(26, 25, 23, 0.10);
}

/* unified title/toolbar */
.tvx-mac__bar {
  height: 4.6cqh;
  display: flex; align-items: center; gap: 1cqw;
  padding: 0 1.3cqw;
  background: linear-gradient(#f7f5f0, #efece4);
  border-bottom: 1px solid var(--hair);
}
.tvx-lights { display: flex; gap: 0.65cqw; }
.tvx-lights i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; display: block; }
.tvx-lights i:nth-child(1) { background: #ff5f57; }
.tvx-lights i:nth-child(2) { background: #febc2e; }
.tvx-lights i:nth-child(3) { background: #28c840; }
.tvx-chip {
  display: inline-flex; align-items: center; gap: 0.5cqw;
  margin-left: 0.8cqw;
  padding: 0.5cqh 0.9cqw;
  font-size: 1.15cqw; font-weight: 500; color: var(--ink);
  background: var(--subtle); border-radius: 0.8cqw;
}
.tvx-chip svg { width: 1.3cqw; height: 1.3cqw; }
.tvx-bar__sp { flex: 1; }
.tvx-tool { display: flex; align-items: center; gap: 1.2cqw; color: var(--sec); }
.tvx-tool svg { width: 1.55cqw; height: 1.55cqw; display: block; }

.tvx-mac__body { display: flex; height: calc(100% - 4.6cqh); }

/* ------------- chat pane (left) ------------- */
.tvx-chat {
  width: 35%;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--hair);
  background: var(--card);
  min-width: 0;
}
.tvx-chat__hd {
  display: flex; align-items: center; gap: 0.7cqw;
  padding: 1cqh 1.3cqw;
}
.tvx-chat__hd .mark { width: 1.5cqw; height: 1.5cqw; color: var(--accent); }
.tvx-chat__hd .nm { font-size: 1.5cqw; font-weight: 600; letter-spacing: -0.02em; }
.tvx-chat__hd .sp { flex: 1; }
.tvx-chat__hd .spin { width: 1.3cqw; height: 1.3cqw; }
.tvx-div { height: 1px; background: var(--hair); }

.tvx-chat__scroll { flex: 1; overflow: hidden; position: relative; }
/* bottom-anchored: the conversation hugs the composer and scrolls up as it
   grows (like a real chat at the bottom), so there's never a dead gap. */
.tvx-chat__log {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 1cqh;
  padding: 1.3cqw;
}
.tvx-row { opacity: 0; transform: translateY(0.8cqh); transition: opacity .35s ease, transform .35s ease; }
.tvx-row.show { opacity: 1; transform: none; }

.tvx-row--user { display: flex; justify-content: flex-end; }
.tvx-row--user .b {
  max-width: 82%;
  font-size: 1.18cqw; line-height: 1.4;
  padding: 0.9cqh 0.9cqw;
  background: rgba(240, 131, 78, 0.16);
  border-radius: 1cqw;
}
.tvx-row--tool { display: flex; align-items: flex-start; gap: 0.65cqw; }
.tvx-row--tool .dot {
  width: 0.62cqw; height: 0.62cqw; border-radius: 50%;
  background: var(--accent); flex: none; margin-top: 0.75cqh;
}
.tvx-row--tool .t { font-size: 1.08cqw; color: var(--sec); line-height: 1.35; }
.tvx-row--asst .t { font-size: 1.22cqw; line-height: 1.45; color: var(--ink); }
.tvx-row--asst .t b { font-weight: 700; }

.tvx-work { display: flex; align-items: center; gap: 0.7cqw; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease, max-height .3s ease; }
.tvx-work.show { opacity: 1; max-height: 4cqh; }
.tvx-work .t { font-size: 1.1cqw; color: var(--sec); }
.tvx-spin, .tvx-work .spin, .tvx-chat__hd .spin {
  display: inline-block; width: 1.25cqw; height: 1.25cqw; border-radius: 50%;
  border: 0.18cqw solid rgba(26, 25, 23, 0.18); border-top-color: var(--accent-deep);
  animation: tvxSpin 0.8s linear infinite;
}
@keyframes tvxSpin { to { transform: rotate(360deg); } }

.tvx-chat__composer {
  display: flex; align-items: center; gap: 0.7cqw;
  padding: 0.9cqh 1.1cqw;
  border-top: 1px solid var(--hair);
}
.tvx-chat__composer .fld {
  flex: 1; height: 3cqh; min-height: 2.2cqw;
  display: flex; align-items: center;
  padding: 0 1cqw;
  font-size: 1.12cqw; color: var(--sec-2);
  background: var(--subtle); border-radius: 1.1cqw;
}
.tvx-chat__composer .send { width: 2.2cqw; height: 2.2cqw; color: var(--sec-2); }
.tvx-chat__composer .send.on { color: var(--accent-deep); }

/* ------------- browser pane (right) ------------- */
.tvx-browser { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--card); }
.tvx-browser__hd {
  display: flex; align-items: center; gap: 0.8cqw;
  padding: 0.8cqh 1cqw;
  border-bottom: 1px solid var(--hair);
}
.tvx-browser__hd .back { width: 1.5cqw; height: 1.5cqw; color: var(--sec); flex: none; }
.tvx-browser__hd .addr {
  flex: 1; height: 2.7cqh; min-height: 2cqw;
  display: flex; align-items: center; gap: 0.5cqw;
  padding: 0 0.9cqw;
  font-size: 1.02cqw; color: var(--sec);
  background: #fff; border: 1px solid var(--hair); border-radius: 0.7cqw;
  overflow: hidden; white-space: nowrap;
}
.tvx-browser__hd .addr .lock { width: 1cqw; height: 1cqw; color: var(--sec-2); flex: none; }
.tvx-browser__hd .addr .u { overflow: hidden; text-overflow: ellipsis; }
.tvx-take {
  display: inline-flex; align-items: center; gap: 0.45cqw;
  padding: 0.5cqh 0.85cqw;
  font-size: 1.0cqw; font-weight: 600; color: var(--ink);
  background: var(--subtle); border: 1px solid var(--hair); border-radius: 0.7cqw;
  white-space: nowrap; flex: none;
  opacity: 0; transition: opacity .3s;
}
.tvx-take.show { opacity: 1; }
.tvx-take svg { width: 1.15cqw; height: 1.15cqw; }

.tvx-web { position: relative; flex: 1; overflow: hidden; background: #fff; }
.tvx-web__page {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 2.2cqh 2.2cqw 4cqh;
  transition: transform 0.6s ease;
}
/* the live Fixture Co application form */
.tvx-web h1 { font-size: 2cqw; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.8cqh; }
.tvx-web .lede { font-size: 1.12cqw; color: #4a473f; line-height: 1.4; margin-bottom: 2cqh; max-width: 42em; }
.tvx-fld { margin-bottom: 1.5cqh; }
.tvx-fld > label { display: block; font-size: 1.08cqw; font-weight: 500; margin-bottom: 0.55cqh; }
.tvx-fld > label i { color: var(--accent-deep); font-style: normal; }
.tvx-input {
  height: 3cqh; min-height: 2.3cqw;
  display: flex; align-items: center;
  padding: 0 0.9cqw;
  font-size: 1.12cqw; color: var(--ink);
  background: #fff; border: 1px solid #cdc9c0; border-radius: 0.6cqw;
  transition: border-color .2s, box-shadow .2s;
}
.tvx-input.on { border-color: var(--accent); box-shadow: 0 0 0 0.3cqw rgba(240,131,78,0.18); }
.tvx-input .val { white-space: nowrap; overflow: hidden; }
.tvx-caret { display: inline-block; width: 0.14cqw; height: 1.6cqw; background: var(--accent-deep); margin-left: 0.1cqw; opacity: 0; }
.tvx-input.on .tvx-caret { opacity: 1; animation: tvxBlink 1s steps(1) infinite; }
@keyframes tvxBlink { 50% { opacity: 0; } }
.tvx-radios { display: flex; gap: 0.8cqw; }
.tvx-radio {
  display: inline-flex; align-items: center; gap: 0.5cqw;
  padding: 0.6cqh 1cqw; font-size: 1.05cqw;
  background: #fff; border: 1px solid #cdc9c0; border-radius: 0.6cqw;
  transition: border-color .2s, background .2s;
}
.tvx-radio .rb { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; border: 1.5px solid #b7b2a8; flex: none; }
.tvx-radio.sel { border-color: var(--accent); background: rgba(240,131,78,0.08); }
.tvx-radio.sel .rb { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 42%, transparent 46%); }
.tvx-file {
  display: flex; align-items: center; gap: 0.7cqw;
  height: 3.2cqh; padding: 0 0.9cqw;
  font-size: 1.05cqw; color: var(--sec);
  border: 1px dashed #c7c2b8; border-radius: 0.6cqw;
}
.tvx-file.set { color: var(--ink); border-style: solid; border-color: #cdc9c0; }
.tvx-file svg { width: 1.3cqw; height: 1.3cqw; color: var(--sec); flex: none; }
.tvx-submit-btn {
  margin-top: 0.5cqh;
  display: inline-flex; align-items: center;
  padding: 0.9cqh 1.4cqw; font-size: 1.12cqw; font-weight: 600;
  color: #fff; background: var(--ink); border-radius: 0.7cqw;
}

/* browser empty state (before the page loads) */
.tvx-web__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1cqh; padding: 3cqw; text-align: center; background: #fff;
  transition: opacity .4s;
}
.tvx-web__empty svg { width: 2.8cqw; height: 2.8cqw; color: var(--accent-deep); }
.tvx-web__empty .h { font-size: 1.4cqw; font-weight: 600; }
.tvx-web__empty .s { font-size: 1.05cqw; color: var(--sec); max-width: 22em; line-height: 1.4; }

/* confirmation overlay after submit */
.tvx-web__done {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2cqh; padding: 3cqw; text-align: center; background: #fff;
  opacity: 0; pointer-events: none; transition: opacity .45s;
}
.tvx-web__done.show { opacity: 1; }
.tvx-web__done svg { width: 3.4cqw; height: 3.4cqw; color: var(--good); }
.tvx-web__done .h { font-size: 1.6cqw; font-weight: 700; }
.tvx-web__done .s { font-size: 1.05cqw; color: var(--sec); }

/* the review panel (the real "Ready to submit" card) */
.tvx-review {
  position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: 1.4cqh;
  background: var(--card);
  border: 1px solid rgba(240,131,78,0.4); border-radius: 1.2cqw;
  box-shadow: 0 1.4cqw 3cqw rgba(26,25,23,0.32);
  padding: 1.3cqh 1.2cqw;
  display: flex; flex-direction: column; gap: 0.7cqh;
  transform: translateY(12%); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2,.7,.25,1), opacity .4s;
}
.tvx-review.show { transform: none; opacity: 1; }
.tvx-review .rhd { display: flex; align-items: center; gap: 0.55cqw; font-size: 1.22cqw; font-weight: 700; color: var(--accent-deep); }
.tvx-review .rhd svg { width: 1.5cqw; height: 1.5cqw; }
.tvx-review .rtitle { font-size: 1.4cqw; font-weight: 600; }
.tvx-review .rresume { font-size: 1.05cqw; color: var(--sec); }
.tvx-review .ranswers { display: flex; flex-direction: column; gap: 0.5cqh; margin: 0.3cqh 0; }
.tvx-review .ranswers .qa { font-size: 1.05cqw; line-height: 1.3; }
.tvx-review .ranswers .qa .why { font-size: 0.92cqw; color: var(--sec); }
.tvx-review .rnote { font-size: 0.95cqw; color: var(--sec); }
.tvx-review .ractions { display: flex; align-items: center; gap: 1cqw; margin-top: 0.3cqh; }
.tvx-review .ractions .sp { flex: 1; }
.tvx-review .sendback { font-size: 1.05cqw; color: var(--sec); }
.tvx-review .submit {
  display: inline-flex; align-items: center;
  padding: 0.75cqh 1.3cqw; font-size: 1.08cqw; font-weight: 600;
  color: #fff; background: var(--accent-deep); border-radius: 0.7cqw;
  transition: transform .14s ease, box-shadow .3s ease;
}
/* the button invites the USER to approve; it is never auto-clicked by the agent */
.tvx-review .submit.wait { animation: tvxPulse 1.4s ease-in-out infinite; }
.tvx-review .submit.press { transform: scale(.95); }
@keyframes tvxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209,96,34,.45); }
  55% { box-shadow: 0 0 0 0.7cqw rgba(209,96,34,0); }
}
/* status-bar battery (shared; sized per layout) */
.tvx-batt { display: inline-block; position: relative; width: 1.7cqw; height: 0.95cqw; border: 0.12cqw solid #111; border-radius: 0.25cqw; padding: 0.12cqw; }
.tvx-batt i { display: block; width: 100%; height: 100%; background: #111; border-radius: 0.08cqw; }
.tvx-batt::after { content: ""; position: absolute; right: -0.22cqw; top: 50%; transform: translateY(-50%); width: 0.16cqw; height: 0.5cqw; background: #111; border-radius: 0 0.1cqw 0.1cqw 0; }

/* agent cursor (shown in the browser pane while Tenvy fills the form) */
.tvx-cursor {
  position: absolute; left: 0; top: 0; z-index: 9; width: 2.4cqw; height: 2.4cqw;
  pointer-events: none; opacity: 0;
  transform: translate(var(--cx, 50%), var(--cy, 50%));
  transition: transform .72s cubic-bezier(.33,.08,.24,1), opacity .3s;
  filter: drop-shadow(0 0.35cqw 0.6cqw rgba(0,0,0,.35));
}
.tvx-cursor svg { width: 100%; height: 100%; display: block; }
.tvx-cursor.click { transform: translate(var(--cx), var(--cy)) scale(.82); }
.tvx-ripple {
  position: absolute; left: 0; top: 0; z-index: 8; width: 3cqw; height: 3cqw;
  border: 0.22cqw solid var(--accent); border-radius: 50%;
  opacity: 0; pointer-events: none;
  transform: translate(var(--rx,0), var(--ry,0)) scale(.3);
}
.tvx-ripple.go { animation: tvxRipple .6s ease-out; }
@keyframes tvxRipple {
  0% { opacity: .7; transform: translate(var(--rx), var(--ry)) scale(.3); }
  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(1.1); }
}
/* the USER's finger-tap on Submit (Review mode: only the person submits, never
   the agent). A filled touch dot + a "You" tag, with no agent cursor present. */
.tvx-tap {
  position: absolute; left: 0; top: 0; z-index: 10; width: 4cqw; height: 4cqw;
  border-radius: 50%; background: rgba(26,25,23,.22);
  opacity: 0; pointer-events: none;
  transform: translate(var(--tx,0), var(--ty,0)) scale(1);
}
.tvx-tap__you {
  position: absolute; bottom: 118%; left: 50%; transform: translateX(-50%);
  font-size: 1.05cqw; font-weight: 700; color: #fff; background: var(--ink);
  padding: 0.35cqh 0.7cqw; border-radius: 0.6cqw; white-space: nowrap; opacity: 0;
}
.tvx-tap.go { animation: tvxTap .75s ease-out; }
.tvx-tap.go .tvx-tap__you { animation: tvxYou .95s ease-out; }
@keyframes tvxTap {
  0% { opacity: .6; transform: translate(var(--tx), var(--ty)) scale(1.4); }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.7); }
}
@keyframes tvxYou {
  0% { opacity: 0; transform: translateX(-50%) translateY(0.5cqh); }
  22% { opacity: 1; transform: translateX(-50%) translateY(0); }
  78% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-0.4cqh); }
}
.tvx--phone .tvx-tap { width: 9cqh; height: 9cqh; }
.tvx--phone .tvx-tap__you { font-size: 2cqh; padding: 0.6cqh 1.6cqw; border-radius: 1.2cqh; }

/* ======================= iPhone companion (Replay) ======================= */
.tvx-phone {
  position: absolute; right: 1.6cqw; bottom: 2cqh;
  height: 80cqh; aspect-ratio: 1320 / 2868;
  border-radius: 2.6cqw; overflow: hidden; z-index: 6;
  background: #fff;
  box-shadow:
    0 0 0 0.55cqw #e7e1d5,
    0 0 0 0.62cqw rgba(26,25,23,0.16),
    0 2cqw 4cqw rgba(26,25,23,0.30);
}
.tvx-phone__scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.tvx-pstatus {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1cqh 1.3cqw 0.3cqh; font-size: 1.05cqw; font-weight: 600;
}
.tvx-pstatus .r { display: flex; align-items: center; gap: 0.5cqw; }
.tvx-pstatus .r svg { width: 1.4cqw; height: 1cqw; }
.tvx-pnav { display: flex; align-items: center; gap: 0.4cqw; padding: 0.6cqh 1.2cqw; color: var(--accent-deep); font-size: 1.15cqw; font-weight: 500; }
.tvx-pnav svg { width: 1.2cqw; height: 1.2cqw; }
.tvx-pbody { flex: 1; overflow: hidden; position: relative; }
.tvx-pbody__in {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 0.4cqh 1.3cqw 1.3cqh;
  display: flex; flex-direction: column; gap: 0.7cqh;
  transition: transform .5s ease;
}
.tvx-pbody .prole { font-size: 1.5cqw; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.tvx-pbody .pco { font-size: 1.1cqw; color: var(--sec); }
.tvx-pbody .purl { font-size: 0.92cqw; color: var(--accent-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvx-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 0.3cqh 0.7cqw; margin-top: 0.3cqh;
  font-size: 0.92cqw; font-weight: 500; border-radius: 1cqw;
}
.tvx-badge--ready { color: var(--accent-deep); background: rgba(209,96,34,0.15); }
.tvx-badge--submitted { color: var(--good); background: rgba(47,153,80,0.15); }
.tvx-psec { font-size: 1.15cqw; font-weight: 700; margin-top: 0.6cqh; }
.tvx-pcard {
  padding: 0.75cqh 0.9cqw; border-radius: 0.9cqw; background: #faf8f3;
  border: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 0.15cqh;
  opacity: 0; transform: translateY(0.7cqh); transition: opacity .35s, transform .35s;
}
.tvx-pcard.show { opacity: 1; transform: none; }
.tvx-pcard .q { font-size: 1.0cqw; font-weight: 500; }
.tvx-pcard .v { font-size: 1.0cqw; }
.tvx-pcard .why { font-size: 0.85cqw; color: var(--sec); }
.tvx-ptl { display: flex; gap: 0.7cqw; opacity: 0; transform: translateY(0.6cqh); transition: opacity .35s, transform .35s; }
.tvx-ptl.show { opacity: 1; transform: none; }
.tvx-ptl .ts { font-size: 0.85cqw; color: var(--sec); font-variant-numeric: tabular-nums; width: 4.4cqw; flex: none; }
.tvx-ptl .msg { font-size: 0.95cqw; line-height: 1.3; }
.tvx-phome { height: 1.6cqh; display: grid; place-items: center; }
.tvx-phome i { width: 9cqw; height: 0.4cqh; min-height: 2px; border-radius: 1cqw; background: var(--ink); }

/* ==========================================================================
   PHONE LAYOUT (container < 560px): a single iPhone Workspace, browser on top
   and chat below. The phone becomes the container (container-type:size) and all
   shared components are re-sized in cqh so text stays legible on a real phone.
   ========================================================================== */
.tvx--phone { aspect-ratio: auto; height: 100%; display: grid; place-items: center; }
.tvph {
  position: relative; height: 100%; max-height: 100%;
  aspect-ratio: 1320 / 2868; max-width: 100%;
  container-type: size; background: #fff; overflow: hidden;
  border-radius: 6cqh;
  box-shadow: 0 0 0 1cqh #e7e1d5, 0 0 0 1.15cqh rgba(26,25,23,0.16), 0 3cqh 6cqh rgba(26,25,23,0.28);
}
.tvph__scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }

.tvx--phone .tvx-pstatus { padding: 1.6cqh 4cqw 0.3cqh; font-size: 2.5cqh; font-weight: 600; }
.tvx--phone .tvx-pstatus .r { gap: 1.2cqw; }
.tvx--phone .tvx-pstatus .r svg.tvx-batt, .tvx--phone .tvx-pstatus svg { width: auto; }
.tvx--phone .tvx-pstatus .r > svg:first-child { width: 3.4cqw; height: 2.4cqh; }
.tvx--phone .tvx-batt { width: 7cqw; height: 2.1cqh; border-width: 0.25cqh; border-radius: 0.5cqh; padding: 0.25cqh; }
.tvx--phone .tvx-batt::after { right: -0.45cqw; width: 0.35cqw; height: 1cqh; border-radius: 0 0.2cqh 0.2cqh 0; }

.tvph__nav { display: flex; align-items: center; justify-content: space-between; padding: 0.8cqh 4cqw 1cqh; }
.tvph__mode { display: inline-flex; align-items: center; gap: 1cqw; font-size: 2.2cqh; font-weight: 500; color: var(--ink); }
.tvph__mode svg { width: 2.6cqh; height: 2.6cqh; }
.tvph__brand { text-align: center; line-height: 1.05; }
.tvph__brand b { font-size: 2.6cqh; font-weight: 700; }
.tvph__brand span { display: block; font-size: 1.9cqh; color: var(--sec); }
.tvph__more { color: var(--sec); }
.tvph__more svg { width: 3cqh; height: 3cqh; }

.tvph__browser { flex: 1 1 49%; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--hair); transition: flex-basis .4s ease; }
/* while a submission is pending the browser takes the screen (matches the app) */
.tvx--phone.reviewing .tvph__browser { flex-basis: 100%; }
.tvx--phone.reviewing .tvph__chat { max-height: 0; flex-basis: 0; overflow: hidden; }
.tvx--phone.reviewing .tvph__handle { display: none; }
.tvph__bar { display: flex; align-items: center; gap: 1.4cqw; padding: 0.9cqh 3.2cqw; border-bottom: 1px solid var(--hair); }
.tvph__bar .back { width: 2.8cqh; height: 2.8cqh; color: var(--accent-deep); flex: none; }
.tvph__bar .addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1cqw; height: 3.4cqh; padding: 0 2cqw; font-size: 2cqh; color: var(--sec); background: #f1efe9; border-radius: 1.2cqh; overflow: hidden; white-space: nowrap; }
.tvph__bar .addr .lock { width: 1.9cqh; height: 1.9cqh; color: var(--sec-2); flex: none; }
.tvph__bar .addr .u { overflow: hidden; text-overflow: ellipsis; }

.tvx--phone .tvx-take { font-size: 2cqh; padding: 0.7cqh 1.8cqw; gap: 1cqw; border-radius: 1.2cqh; }
.tvx--phone .tvx-take svg { width: 2.2cqh; height: 2.2cqh; }

.tvx--phone .tvx-web__page { padding: 2cqh 3.4cqw 4cqh; }
.tvx--phone .tvx-web h1 { font-size: 3.6cqh; margin-bottom: 0.7cqh; }
.tvx--phone .tvx-web .lede { font-size: 2.2cqh; margin-bottom: 1.8cqh; }
.tvx--phone .tvx-fld { margin-bottom: 1.5cqh; }
.tvx--phone .tvx-fld > label { font-size: 2.2cqh; margin-bottom: 0.7cqh; }
.tvx--phone .tvx-input { height: 5cqh; min-height: 0; padding: 0 2cqw; font-size: 2.3cqh; border-radius: 1.3cqh; }
.tvx--phone .tvx-input.on { box-shadow: 0 0 0 0.5cqh rgba(240,131,78,0.18); }
.tvx--phone .tvx-caret { width: 0.4cqw; height: 2.7cqh; }
.tvx--phone .tvx-radios { gap: 2cqw; }
.tvx--phone .tvx-radio { padding: 0.9cqh 2.4cqw; font-size: 2.1cqh; border-radius: 1.3cqh; gap: 1.2cqw; }
.tvx--phone .tvx-radio .rb { width: 2.4cqh; height: 2.4cqh; }
.tvx--phone .tvx-file { height: 5cqh; padding: 0 2cqw; font-size: 2.1cqh; border-radius: 1.3cqh; gap: 1.4cqw; }
.tvx--phone .tvx-file svg { width: 2.6cqh; height: 2.6cqh; }
.tvx--phone .tvx-submit-btn { padding: 1.2cqh 3cqw; font-size: 2.3cqh; border-radius: 1.3cqh; }
.tvx--phone .tvx-web__empty svg { width: 6cqh; height: 6cqh; }
.tvx--phone .tvx-web__empty .h { font-size: 2.7cqh; }
.tvx--phone .tvx-web__empty .s { font-size: 2cqh; }
.tvx--phone .tvx-web__done { gap: 1.4cqh; }
.tvx--phone .tvx-web__done svg { width: 7cqh; height: 7cqh; }
.tvx--phone .tvx-web__done .h { font-size: 3cqh; }
.tvx--phone .tvx-web__done .s { font-size: 2cqh; }

.tvx--phone .tvx-review { left: 2.4cqw; right: 2.4cqw; bottom: 1.4cqh; padding: 1.6cqh 2.6cqw; border-radius: 2.2cqh; gap: 0.7cqh; box-shadow: 0 2cqh 5cqh rgba(26,25,23,0.3); }
.tvx--phone .tvx-review .rhd { font-size: 2.3cqh; gap: 1cqw; }
.tvx--phone .tvx-review .rhd svg { width: 2.7cqh; height: 2.7cqh; }
.tvx--phone .tvx-review .rtitle { font-size: 2.5cqh; }
.tvx--phone .tvx-review .rresume { font-size: 2cqh; }
.tvx--phone .tvx-review .ranswers .qa { font-size: 2cqh; }
.tvx--phone .tvx-review .ranswers .qa .why { font-size: 1.7cqh; }
.tvx--phone .tvx-review .rnote { font-size: 1.8cqh; }
.tvx--phone .tvx-review .sendback { font-size: 2cqh; }
.tvx--phone .tvx-review .submit { font-size: 2cqh; padding: 1cqh 2.6cqw; border-radius: 1.3cqh; }
.tvx--phone .tvx-review .submit.wait { animation: tvxPulsePh 1.4s ease-in-out infinite; }
@keyframes tvxPulsePh { 0%,100% { box-shadow: 0 0 0 0 rgba(209,96,34,.45); } 55% { box-shadow: 0 0 0 1.4cqh rgba(209,96,34,0); } }

.tvx--phone .tvx-cursor { width: 5.2cqh; height: 5.2cqh; filter: drop-shadow(0 0.5cqh 0.8cqh rgba(0,0,0,.3)); }
.tvx--phone .tvx-ripple { width: 7cqh; height: 7cqh; border-width: 0.4cqh; }

.tvph__handle { height: 2.6cqh; display: grid; place-items: center; background: #faf8f3; border-top: 1px solid var(--hair); }
.tvph__handle i { width: 11cqw; height: 0.6cqh; min-height: 2px; border-radius: 1cqh; background: #d4d0c6; }

.tvph__chat { flex: 1 1 51%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; transition: flex-basis .4s ease, max-height .4s ease; }
.tvx--phone .tvx-chat__scroll { flex: 1; overflow: hidden; position: relative; }
.tvx--phone .tvx-chat__log { padding: 1.6cqh 3.4cqw; gap: 1.1cqh; }
.tvx--phone .tvx-row--user .b { font-size: 2.2cqh; padding: 1cqh 2cqw; border-radius: 1.6cqh; max-width: 82%; }
.tvx--phone .tvx-row--tool { gap: 1.2cqw; }
.tvx--phone .tvx-row--tool .dot { width: 1.2cqh; height: 1.2cqh; margin-top: 0.8cqh; }
.tvx--phone .tvx-row--tool .t { font-size: 2cqh; }
.tvx--phone .tvx-row--asst .t { font-size: 2.3cqh; }
.tvx--phone .tvx-work .t { font-size: 2cqh; }
.tvx--phone .tvx-work.show { max-height: 6cqh; }
.tvx--phone .tvx-spin, .tvx--phone .tvx-work .spin { width: 2.4cqh; height: 2.4cqh; border-width: 0.3cqh; }
.tvph__composer { display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqh 3cqw; border-top: 1px solid var(--hair); }
.tvph__composer .fld { flex: 1; height: 5cqh; display: flex; align-items: center; padding: 0 2.4cqw; font-size: 2.1cqh; color: var(--sec-2); background: #f1f1f2; border-radius: 2.6cqh; }
.tvph__composer .send { width: 5cqh; height: 5cqh; color: var(--sec-2); }
.tvph__home { height: 2.4cqh; display: grid; place-items: center; }
.tvph__home i { width: 30cqw; height: 0.6cqh; min-height: 2px; border-radius: 1cqh; background: var(--ink); }

/* reduced motion: no cursor glide / streaming; show the resolved end state. */
@media (prefers-reduced-motion: reduce) {
  .tvx-chat__log, .tvx-web__page, .tvx-pbody__in { transition: none; }
  .tvx-row, .tvx-work, .tvx-pcard, .tvx-ptl, .tvx-review, .tvx-take, .tvx-web__done { transition: none; }
  .tvx-cursor, .tvx-ripple, .tvx-tap { display: none; }
  .tvx-input.on .tvx-caret { animation: none; opacity: 0; }
  .tvx-review .submit.wait { animation: none; }
}