/* ============================================================
   ui-anima-run-yt.css — "run replay": one REAL recorded
   UI-Anima run on youtube.com/results?search_query=AI+agents.
   Everything is scoped under .ytx-* — state classes too
   (.ytx-on / .ytx-done / .ytx-orig-on / …) — because a global
   .act grid and several other short state names already exist
   sitewide. Never introduce a bare state class here.

   Window chrome + panel use the warm site tokens. The mock page
   INSIDE the window carries its own literal palette: it is
   "someone else's website", so it goes white (YouTube) and then
   near-black (the delivered gallery) while the site around it
   stays cream.

   Honesty: this run only partially bound. Fidelity 58% is drawn
   in the shared inert amber (--ua-inert) on the cream chrome; on
   the charcoal canvas the inert tags use a lightened amber
   (--ytx-amb) so they clear contrast. "0 wrong" uses a darkened
   tint of the site success green for the same reason.

   Readability: no text below 12px anywhere; content inside the
   window sits at 13–15px.
   ============================================================ */

.ytx-wrap { margin: var(--space-xl, 48px) auto 0; max-width: 1160px; }
.ytx-cap { margin-top: 14px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; letter-spacing: .01em; color: var(--color-muted, #6c6b61); }

.ytx-app {
  position: relative;
  border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px);
  overflow: hidden; background: var(--color-bg, #f5f4ef);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26,26,23,.14));
  font-family: var(--font-sans, sans-serif); color: var(--color-text, #1a1a17);
  --ytx-ok: var(--accent, #d9542b);          /* bound / accent */
  --ytx-id: #16a37b;                          /* identify pass — green/teal */
  --ytx-amb: #e3ac3e;                         /* inert amber, lightened for dark canvas */
  --ytx-green: #146f34;                       /* accessible tint of --color-success on the warm titlebar */
  --ytx-red: #ff2d46;                         /* the one vibrant accent in the delivered design */
}

/* ---- titlebar ---------------------------------------------- */
.ytx-tb { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--color-surface, #eae7dd); border-bottom: 1px solid var(--color-border, #e0ddd1); min-width: 0; }
.ytx-dots { display: flex; gap: 6px; flex: none; }
.ytx-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.ytx-url { flex: 1; min-width: 0; max-width: 420px; margin: 0 auto; text-align: center; font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); background: var(--color-bg, #f5f4ef); border-radius: 999px; padding: 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytx-status { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--color-muted, #6c6b61); white-space: nowrap; }
.ytx-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border, #e0ddd1); transition: background .3s, box-shadow .3s; }
.ytx-app.ytx-live .ytx-status::before { background: var(--ytx-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ytx-ok) 22%, transparent); }
/* the semantic inert amber, deepened just enough to clear 4.5:1 on the
   warm titlebar — same hue family, readable at 12.5px */
.ytx-fid { color: #7f5f1b; color: color-mix(in srgb, var(--ua-inert, #a87b1c) 71%, var(--color-text, #1a1a17)); font-weight: 600; }
.ytx-nw { color: var(--ytx-green); font-weight: 600; }
.ytx-t-sec { color: inherit; }

/* ---- stage (viewport) -------------------------------------- */
.ytx-stage { position: relative; height: 508px; background: #ffffff; overflow: hidden; }
/* right gutter keeps page content clear of the map + floating panel */
.ytx-stage { --ytx-gut: 372px; }

/* ============================================================
   THE ORIGINAL SITE — youtube.com search results
   ============================================================ */
.ytx-site { position: absolute; inset: 0; background: #ffffff; color: #0f0f0f; font-family: Roboto, Arial, "Helvetica Neue", sans-serif; overflow: hidden; transition: opacity .35s ease, transform .35s ease; }
.ytx-app.ytx-veil .ytx-site { opacity: .25; transform: scale(.994); }

.ytx-yt-top { display: flex; align-items: center; gap: 14px; padding: 9px var(--ytx-gut) 9px 16px; border-bottom: 1px solid #eeeeee; background: #fff; }
.ytx-yt-burger { flex: none; display: flex; flex-direction: column; gap: 3px; width: 18px; }
.ytx-yt-burger i { display: block; height: 2px; border-radius: 2px; background: #0f0f0f; }
.ytx-yt-logo { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 700; letter-spacing: -.035em; color: #0f0f0f; }
.ytx-yt-play { width: 26px; height: 18px; border-radius: 5px; background: #ff0033; position: relative; }
.ytx-yt-play::after { content: ""; position: absolute; left: 10px; top: 5px; width: 0; height: 0; border-left: 7px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ytx-yt-sbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; max-width: 380px; }
.ytx-yt-search { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid #ccc; border-left: 1px solid #ccc; border-radius: 999px 0 0 999px; padding: 7px 15px; background: #fff; }
.ytx-yt-q { font-size: 14px; color: #0f0f0f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytx-yt-mag { flex: none; width: 52px; height: 34px; margin-left: -9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-left: none; border-radius: 0 999px 999px 0; background: #f8f8f8; color: #0f0f0f; }
.ytx-yt-mag svg { width: 19px; height: 19px; }
.ytx-yt-mic { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f2f2f2; color: #0f0f0f; }
.ytx-yt-mic svg { width: 17px; height: 17px; }
.ytx-yt-create { flex: none; font-size: 13px; font-weight: 500; color: #0f0f0f; background: #f2f2f2; border-radius: 999px; padding: 7px 13px; white-space: nowrap; }
.ytx-yt-av-top { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(150deg, #d1734a, #a2472c); }

.ytx-yt-body { display: flex; gap: 24px; padding: 10px var(--ytx-gut) 0 12px; min-width: 0; }
.ytx-yt-side { flex: none; width: 168px; display: flex; flex-direction: column; gap: 1px; }
.ytx-yt-nav, .ytx-yt-ch { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #0f0f0f; border-radius: 8px; padding: 7px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytx-yt-nav:first-child { background: #f2f2f2; font-weight: 500; }
.ytx-yt-ic { flex: none; width: 16px; height: 16px; border: 1.6px solid #4b4b4b; border-radius: 3px; }
.ytx-yt-ic-b { border-radius: 5px; }
.ytx-yt-ic-c { border-radius: 3px; border-width: 1.6px 1.6px 4px; }
.ytx-yt-ic-d { border-radius: 50%; }
.ytx-yt-ic-e { border-radius: 2px; border-width: 1.6px 0; height: 12px; }
.ytx-yt-ic-f { border-radius: 50% 50% 3px 50%; transform: rotate(45deg); }
.ytx-yt-av { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #d9d9d9; }
.ytx-yt-ch:nth-of-type(1) .ytx-yt-av { background: linear-gradient(150deg, #7ba7c9, #43698c); }
.ytx-yt-ch:nth-of-type(2) .ytx-yt-av { background: linear-gradient(150deg, #c9a97b, #8c6a43); }
.ytx-yt-ch:nth-of-type(3) .ytx-yt-av { background: linear-gradient(150deg, #8cc9a1, #3f7f57); }
.ytx-yt-rule { height: 1px; background: #e5e5e5; margin: 9px 9px; }
.ytx-yt-you { font-size: 14px; font-weight: 600; color: #0f0f0f; padding: 4px 9px 6px; }

.ytx-yt-main { flex: 1; min-width: 0; }
.ytx-yt-filters { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; margin-bottom: 12px; min-width: 0; }
.ytx-yt-filt { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #0f0f0f; padding: 6px 4px 6px 0; margin-right: 6px; }
.ytx-yt-filt svg { width: 15px; height: 15px; }
.ytx-yt-chip { flex: none; font-size: 13px; color: #0f0f0f; background: #f2f2f2; border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.ytx-yt-chip-on { background: #0f0f0f; color: #fff; }

.ytx-yt-res { display: flex; gap: 16px; margin-bottom: 13px; min-width: 0; }
.ytx-yt-thumb { flex: none; position: relative; width: 204px; height: 115px; border-radius: 10px; background: linear-gradient(140deg, #4a5262, #232833); overflow: hidden; }
.ytx-yt-res:nth-of-type(3) .ytx-yt-thumb { background: linear-gradient(140deg, #5c4a5f, #2a2230); }
.ytx-yt-res:nth-of-type(4) .ytx-yt-thumb { background: linear-gradient(140deg, #4a5f52, #222e28); }
.ytx-yt-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.14), transparent 62%); }
.ytx-yt-dur { position: absolute; right: 7px; bottom: 7px; z-index: 2; font-size: 12px; font-weight: 500; color: #fff; background: rgba(0,0,0,.78); border-radius: 4px; padding: 1px 5px; }
.ytx-yt-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 1px; }
.ytx-yt-t { font-size: 15px; line-height: 1.32; font-weight: 500; color: #0f0f0f; }
.ytx-yt-sub { font-size: 13px; line-height: 1.5; color: #606060; margin-top: 5px; }
.ytx-yt-desc { font-size: 13px; line-height: 1.5; color: #606060; margin-top: 9px; }

/* ============================================================
   THE DELIVERED DESIGN — dark video-discovery gallery
   ============================================================ */
.ytx-gal {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  background: #0e0e10; color: #ffffff;
  padding: 20px var(--ytx-gut) 20px 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.ytx-gal.ytx-on { opacity: 1; pointer-events: auto; }
.ytx-app.ytx-orig-on .ytx-gal.ytx-on { opacity: 0; pointer-events: none; }

.ytx-g-top { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.ytx-g-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--ytx-red); box-shadow: 0 0 0 4px rgba(255,45,70,.16); }
.ytx-g-word { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.ytx-g-kick { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .18em; color: #7d7d88; }

/* featured */
.ytx-feat { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 18px; }
.ytx-feat-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(145deg, #23252d 0%, #131419 62%, #191b22 100%); border: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; }
.ytx-feat-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(90% 80% at 30% 24%, rgba(255,45,70,.14), transparent 64%); }
.ytx-play { position: relative; z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: var(--ytx-red); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -10px rgba(255,45,70,.75); }
.ytx-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 2px; }
.ytx-feat-body { min-width: 0; }
.ytx-tag { display: inline-block; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: #ff6b7d; background: rgba(255,45,70,.13); border: 1px solid rgba(255,45,70,.34); border-radius: 999px; padding: 4px 11px; }
.ytx-feat-t { margin: 13px 0 0; font-size: 25px; line-height: 1.22; font-weight: 700; letter-spacing: -.022em; color: #ffffff; }
.ytx-feat-s { margin: 10px 0 0; font-size: 13px; color: #8d8d99; }

.ytx-g-lab { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .18em; color: #7d7d88; margin-bottom: 11px; }

/* up-next grid */
.ytx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ytx-card { min-width: 0; }
.ytx-c-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 11px; background: linear-gradient(145deg, #262a34, #131419); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.ytx-card:nth-child(1) .ytx-c-thumb { background: linear-gradient(145deg, #262a34, #131419); }
.ytx-card:nth-child(2) .ytx-c-thumb { background: linear-gradient(145deg, #2c2632, #141318); }
.ytx-card:nth-child(3) .ytx-c-thumb { background: linear-gradient(145deg, #23302b, #121716); }
.ytx-c-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(110% 88% at 24% 18%, rgba(255,255,255,.09), transparent 60%); }
.ytx-c-dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-family: var(--font-mono, monospace); font-size: 12px; color: #fff; background: rgba(0,0,0,.68); border-radius: 5px; padding: 2px 6px; }
.ytx-c-t { margin: 11px 0 0; font-size: 14.5px; line-height: 1.32; font-weight: 700; letter-spacing: -.012em; color: #ffffff; }
.ytx-c-s { margin: 6px 0 0; font-size: 13px; color: #8d8d99; }

/* the honest bit: tiles that could not be rebound stay inert */
.ytx-inert { position: absolute; left: 8px; top: 8px; z-index: 2; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .08em; color: var(--ytx-amb); background: rgba(227,172,62,.12); border: 1px dashed var(--ytx-amb); border-radius: 6px; padding: 2px 8px; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.ytx-app.ytx-inert-on .ytx-inert { opacity: 1; transform: none; }
.ytx-app.ytx-inert-on .ytx-card-x .ytx-c-thumb { outline: 1px dashed rgba(227,172,62,.6); outline-offset: 2px; }
.ytx-app.ytx-inert-on .ytx-card-x .ytx-c-t { color: #d7d7de; }

/* morph-in stagger */
.ytx-gal.ytx-enter .ytx-g-top,
.ytx-gal.ytx-enter .ytx-feat,
.ytx-gal.ytx-enter .ytx-g-lab,
.ytx-gal.ytx-enter .ytx-grid { animation: ytx-rise .6s cubic-bezier(.22,.7,.25,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes ytx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============================================================
   PHASE 1 — identify: hairline outlines + sweeping band
   ============================================================ */
.ytx-sweep { position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(180deg, transparent, rgba(22,163,123,.10) 55%, rgba(22,163,123,.28) 97%, transparent);
  border-bottom: 1.5px solid var(--ytx-id); }
.ytx-app.ytx-ident .ytx-sweep { opacity: .9; animation: ytx-sweep 1.9s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes ytx-sweep { from { transform: translateY(-50px); } to { transform: translateY(600px); } }

/* no border-radius here on purpose — these elements own their own shape
   (the search pill, the magnifier cap, the round avatar) and the outline
   must follow it, not flatten it */
.ytx-ob { outline: 1px solid transparent; outline-offset: 2px; }
.ytx-app.ytx-ident .ytx-ob { animation: ytx-ob-in .55s ease both; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes ytx-ob-in {
  from { outline-color: transparent; }
  35%  { outline-color: var(--ytx-id); }
  to   { outline-color: rgba(22,163,123,.78); }
}

/* ---- element map readout ----------------------------------- */
.ytx-map { position: absolute; top: 14px; right: 14px; width: 320px; z-index: 7; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26,26,23,.12)); overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s; }
.ytx-map.ytx-on { opacity: 1; transform: none; }
.ytx-map-h { font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .11em; text-transform: uppercase; color: var(--color-muted, #6c6b61); padding: 11px 13px 9px; border-bottom: 1px solid var(--color-border, #e0ddd1); }
.ytx-mr { display: flex; align-items: baseline; gap: 10px; padding: 6px 13px; font-family: var(--font-mono, monospace); font-size: 13px; line-height: 1.4; opacity: 0; transform: translateX(7px); transition: opacity .3s, transform .3s; }
.ytx-mr.ytx-on { opacity: 1; transform: none; }
.ytx-mr:last-child { border-top: 1px solid var(--color-border, #e0ddd1); margin-top: 4px; padding-top: 8px; padding-bottom: 9px; }
.ytx-mr-n { flex: 1; min-width: 0; color: var(--color-muted, #6c6b61); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytx-mr-v { flex: none; font-weight: 600; color: var(--accent, #d9542b); font-variant-numeric: tabular-nums; }
.ytx-mr-top .ytx-mr-n { color: var(--color-text, #1a1a17); }
.ytx-mr-warn .ytx-mr-v { color: var(--ua-inert, #a87b1c); }

/* ============================================================
   TELEMETRY BADGE (what the run leaves on the page)
   ============================================================ */
/* the badge lives in the same right rail as the map and the panel — the map
   is already gone by the time it appears, so they never collide, and the
   gallery's own content column stays clear of all three */
.ytx-badge { position: absolute; right: 14px; top: 14px; z-index: 8; max-width: calc(100% - 28px); display: inline-flex; align-items: center; gap: 10px; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 6px 6px 6px 13px; box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26,26,23,.12)); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s, transform .4s, visibility .4s; }
.ytx-badge.ytx-on { opacity: 1; visibility: visible; transform: none; }
.ytx-badge-t { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--color-text, #1a1a17); white-space: nowrap; }
.ytx-badge-t b { font-weight: 600; color: var(--accent, #d9542b); font-variant-numeric: tabular-nums; }
.ytx-badge-s { color: var(--accent, #d9542b); }
.ytx-orig { font: 500 12px/1 var(--font-mono, monospace); color: var(--color-muted, #6c6b61); background: var(--color-surface, #eae7dd); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; }
.ytx-orig:hover { color: var(--accent, #d9542b); border-color: var(--accent, #d9542b); }
.ytx-orig:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.ytx-orig[aria-pressed="true"] { color: var(--color-bg, #f5f4ef); background: var(--color-text, #1a1a17); border-color: var(--color-text, #1a1a17); }

.ytx-flash { position: absolute; right: 14px; top: 60px; z-index: 8; background: var(--color-text, #1a1a17); color: var(--color-bg, #f5f4ef); font: 500 12px/1 var(--font-mono, monospace); padding: 8px 13px; border-radius: 999px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; white-space: nowrap; }
.ytx-flash.ytx-on { opacity: 1; transform: none; }

/* ============================================================
   FLOATING PANEL
   ============================================================ */
.ytx-panel { position: absolute; right: 14px; bottom: 14px; width: 344px; max-width: calc(100% - 28px); z-index: 9; background: var(--color-bg, #f5f4ef); border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26,26,23,.14)); padding: 13px 13px 12px; }
.ytx-p-idle, .ytx-p-work, .ytx-p-done { display: none; }
.ytx-panel.ytx-s-idle .ytx-p-idle,
.ytx-panel.ytx-s-work .ytx-p-work,
.ytx-panel.ytx-s-done .ytx-p-done { display: block; }

/* fixed box + JS scroll-to-bottom: behaves like a real prompt textarea,
   so a long prompt never resizes the panel or spills at narrow widths */
.ytx-p-field { height: 128px; overflow-y: auto; scrollbar-width: none; font-size: 13.5px; line-height: 1.5; color: var(--color-text, #1a1a17); cursor: pointer; }
.ytx-p-field::-webkit-scrollbar { display: none; }
/* once it has scrolled, fade the top edge so the clipped line reads as
   "there is more above", not as broken text */
.ytx-p-field.ytx-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
.ytx-p-ph { color: var(--color-muted, #6c6b61); }
.ytx-p-ph.ytx-off { display: none; }
.ytx-p-car { display: none; width: 6px; height: 14px; background: var(--accent, #d9542b); vertical-align: -2px; margin-left: 1px; }
.ytx-p-car.ytx-on { display: inline-block; animation: ytx-blink 1s steps(1) infinite; }
@keyframes ytx-blink { 50% { opacity: 0; } }

.ytx-p-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ytx-p-model { font: 500 12px/1 var(--font-mono, monospace); color: var(--color-muted, #6c6b61); border: 1px solid var(--color-border, #e0ddd1); background: var(--color-surface, #eae7dd); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.ytx-p-send { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-text, #1a1a17); color: var(--color-bg, #f5f4ef); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s, background-color .2s; }
.ytx-p-send svg { width: 16px; height: 16px; }
.ytx-p-send.ytx-on { background: var(--accent, #d9542b); transform: scale(1.12); }

.ytx-p-wh { font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--color-text, #1a1a17); }
.ytx-p-bar { height: 4px; border-radius: 999px; background: var(--color-surface, #eae7dd); overflow: hidden; margin: 11px 0 12px; }
.ytx-p-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent, #d9542b); transition: width .75s cubic-bezier(.35,.1,.25,1); position: relative; overflow: hidden; }
.ytx-p-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.72) 50%, transparent 80%); animation: ytx-shim 1.35s linear infinite; }
@keyframes ytx-shim { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.ytx-p-steps { height: 96px; overflow: hidden; }
.ytx-step { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 19px; color: var(--color-text, #1a1a17); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s, color .3s; white-space: nowrap; }
.ytx-step.ytx-on { opacity: 1; transform: none; }
.ytx-step.ytx-done { color: var(--color-muted, #6c6b61); }
.ytx-step-b { flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent, #d9542b); transition: background-color .3s; }
.ytx-step.ytx-done .ytx-step-b { background: color-mix(in srgb, var(--accent, #d9542b) 40%, var(--color-border, #e0ddd1)); }
.ytx-step-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ytx-p-wh-d { color: var(--accent, #d9542b); }
.ytx-p-echo { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--color-muted, #6c6b61); cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ytx-p-echo:hover { color: var(--color-text, #1a1a17); }
.ytx-p-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.ytx-replay { font: 500 12.5px/1 var(--font-mono, monospace); color: var(--color-text, #1a1a17); background: var(--color-surface, #eae7dd); border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: color .2s, border-color .2s; }
.ytx-replay:hover { color: var(--accent, #d9542b); border-color: var(--accent, #d9542b); }
.ytx-replay:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.ytx-p-foot .ytx-p-model { margin-left: auto; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ytx-app.ytx-ident .ytx-sweep, .ytx-app.ytx-ident .ytx-ob,
  .ytx-gal.ytx-enter .ytx-g-top, .ytx-gal.ytx-enter .ytx-feat,
  .ytx-gal.ytx-enter .ytx-g-lab, .ytx-gal.ytx-enter .ytx-grid,
  .ytx-p-car.ytx-on, .ytx-p-fill::after { animation: none; }
  .ytx-app.ytx-ident .ytx-ob { outline-color: rgba(22,163,123,.78); }
  .ytx-site, .ytx-gal, .ytx-map, .ytx-mr, .ytx-badge, .ytx-flash,
  .ytx-inert, .ytx-step, .ytx-p-fill, .ytx-p-send, .ytx-status::before { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .ytx-stage { --ytx-gut: 344px; }
  .ytx-feat { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; }
  .ytx-feat-t { font-size: 21px; }
  .ytx-yt-thumb { width: 184px; height: 104px; }
  .ytx-yt-desc { display: none; }
}
/* ---- panel stops being a side column and becomes a bottom sheet ---- */
@media (max-width: 860px) {
  .ytx-stage { height: 560px; --ytx-gut: 18px; }
  .ytx-map { display: none; }
  .ytx-url { max-width: 220px; }
  .ytx-yt-side { display: none; }
  .ytx-yt-body { padding-left: 18px; }
  .ytx-yt-top { padding-left: 14px; }
  .ytx-panel { width: calc(100% - 20px); right: 10px; bottom: 10px; }
  .ytx-p-field { height: 92px; }
  .ytx-p-steps { height: 77px; }
  .ytx-p-echo { -webkit-line-clamp: 3; line-clamp: 3; }
  /* one-line sublines: at these widths a wrapped subline is what pushes the
     grid down into the bottom sheet */
  .ytx-c-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* badge spans the top so the bottom sheet never sits on it */
  .ytx-badge { left: 10px; right: 10px; top: 10px; max-width: none; }
  .ytx-flash { left: 10px; right: auto; top: 54px; }
  /* clear the badge above and the panel below */
  .ytx-gal { padding: 54px 18px 172px; }
  .ytx-feat { grid-template-columns: 216px minmax(0, 1fr); gap: 18px; }
  .ytx-yt-res:nth-of-type(3) { display: none; }
}
@media (max-width: 620px) {
  .ytx-tb { flex-wrap: wrap; gap: 7px 10px; }
  .ytx-dots { display: none; }
  .ytx-url { flex: 1 1 100%; max-width: none; margin: 0; text-align: left; }
  .ytx-status { flex: 1 1 100%; }
  .ytx-t-sec { display: none; }

  .ytx-yt-burger, .ytx-yt-av-top, .ytx-yt-create, .ytx-yt-mic { display: none; }
  .ytx-yt-top { gap: 10px; }
  .ytx-yt-logo { font-size: 15px; }
  .ytx-yt-sbox { max-width: none; }
  .ytx-yt-thumb { width: 144px; height: 81px; }
  .ytx-yt-t { font-size: 14px; }
  .ytx-yt-chip:nth-of-type(n+4) { display: none; }

  .ytx-gal { padding: 50px 16px 186px; }
  .ytx-g-top { margin-bottom: 12px; }
  .ytx-g-word { font-size: 17px; }
  .ytx-g-kick { display: none; }
  .ytx-feat { grid-template-columns: 43% minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
  .ytx-feat-t { font-size: 15.5px; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .ytx-feat-s { margin-top: 6px; }
  .ytx-tag { font-size: 12px; padding: 3px 9px; letter-spacing: .1em; }
  .ytx-play { width: 38px; height: 38px; }
  .ytx-play svg { width: 17px; height: 17px; }
  .ytx-g-lab { margin-bottom: 9px; }
  .ytx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ytx-card:nth-child(3) { display: none; }
  .ytx-c-t { font-size: 13.5px; margin-top: 9px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .ytx-c-s { margin-top: 5px; }

  .ytx-badge-n { display: none; }
  .ytx-badge-t { font-size: 12px; }
  .ytx-step { font-size: 12px; }
  .ytx-p-echo { -webkit-line-clamp: 2; line-clamp: 2; }
}