/* Looping lesson walkthroughs: a light wireframe of the app, sized in em from its container width. */
.anim { container: anim / inline-size; margin: 30px 0; color: var(--ink); }
.anim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.anim-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.anim-label strong { font-size: 1.125rem; }
.anim-label span { font-size: .875rem; color: var(--muted); }
.anim-toggle { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font-size: .9375rem; line-height: 1.4; transition: background 150ms, border-color 150ms; }
.anim-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.anim-icon-play, .anim.is-paused .anim-icon-pause { display: none; }
.anim.is-paused .anim-icon-play { display: block; }
.anim:not(.is-ready) .anim-toggle { visibility: hidden; }
.anim.is-reduced .anim-toggle, .anim.is-reduced .anim-viewport { display: none; }
.anim-caption { margin-top: 10px; font-size: .9375rem; line-height: 1.7; color: var(--muted); }
@media (hover: hover) { .anim-toggle:hover { background: var(--soft-blue); border-color: var(--blue); } }

.anim-viewport, .anim-still-view { container: anim-box / inline-size; }
.anim-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: clamp(10.5px, 2.3cqi, 15px); line-height: 1.5; overflow-wrap: normal; text-align: left; user-select: none; }
:where(.anim-frame) p { margin: 0; }
.anim-frame strong { color: inherit; }
@container anim-box (max-width: 480px) { .anim-frame { aspect-ratio: 4 / 5; } }

/* Scene primitives. Hidden parts carry data-off until the timeline turns them on. */
.anim-scene { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; transition: opacity 420ms ease; }
.anim-scene.is-entering { animation: anim-fade 360ms ease; }
.anim-scene.is-fading { opacity: 0; }
.anim-scene svg { flex-shrink: 0; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.anim-scene [data-off]:not(.is-on), .anim-scene .is-gone { display: none !important; }
.anim-scene [data-off].is-on { animation: anim-in 260ms cubic-bezier(.2, .75, .3, 1); }
.anim-static, .anim-static * { animation: none !important; transition: none !important; }
.anim-cursor, .anim-ghost, .anim-ripple { position: absolute; top: 0; left: 0; pointer-events: none; }
.anim-scene .anim-cursor { z-index: 6; width: 1.35em; height: 1.62em; fill: var(--ink); stroke: #fff; stroke-width: 1.4; opacity: 0; transform-origin: 12% 8%; filter: drop-shadow(0 .12em .18em #17254040); transition: opacity 200ms; }
.anim-cursor.is-placed { opacity: 1; }
.anim-ripple { z-index: 5; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; background: var(--blue); opacity: 0; }
.anim-ghost { z-index: 5; display: flex; align-items: center; gap: .45em; padding: .3em .7em .3em .3em; border: 1px solid var(--line); border-radius: .55em; background: #fffffff2; box-shadow: 0 .6em 1.4em #17254030; font-size: .92em; white-space: nowrap; }

/* Chat: thread above, composer below. */
.anim-thread { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .7em; padding: 1.1em 1.4em .7em; }
.anim-empty { margin: auto 0; align-self: center; color: #8592aa; text-align: center; font-size: .95em; }
.anim-msg { max-width: 82%; padding: .5em .85em; border-radius: .85em; }
.anim-msg--user { align-self: flex-end; background: var(--soft-blue); border-bottom-right-radius: .25em; }
.anim-msg--agent { align-self: flex-start; padding-left: 0; padding-right: 0; }
.anim-msg--agent > p { margin-bottom: .45em; }
.anim-dots { align-self: flex-start; display: flex; gap: .3em; padding: .4em 0; }
.anim-dots span { width: .45em; height: .45em; border-radius: 50%; background: #9aa8c4; }
.anim-frame.is-live .anim-dots span { animation: anim-bounce 900ms ease-in-out infinite; }
.anim-frame.is-live .anim-dots span:nth-child(2) { animation-delay: 150ms; }
.anim-frame.is-live .anim-dots span:nth-child(3) { animation-delay: 300ms; }
.anim-dock { position: relative; padding: 0 1.1em 1em; }
.anim-composer { position: relative; padding: .6em .7em .5em .85em; border: 1px solid #c9d4e8; border-radius: .9em; background: #fff; box-shadow: 0 .3em 1em #17254012; transition: border-color 160ms, background 160ms; }
.anim-composer.is-drop { border-color: var(--blue); border-style: dashed; background: var(--soft-blue); }
.anim-field { position: relative; height: 3em; overflow: hidden; }
.anim-placeholder { position: absolute; top: 0; left: 0; max-width: 100%; overflow: hidden; color: #8a96ad; white-space: nowrap; text-overflow: ellipsis; }
.anim-field:has(.anim-typed:not(:empty), .anim-chip.is-on) .anim-placeholder { display: none; }
.anim-typed { white-space: pre-wrap; }
.anim-caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--blue); opacity: 0; }
.is-focus > .anim-caret { opacity: 1; }
.anim-frame.is-live .is-focus > .anim-caret { animation: anim-blink 1s steps(1) infinite; }
.anim-chip { display: inline-flex; align-items: center; gap: .3em; margin: 0 .3em 0 0; padding: 0 .45em; border: 1px solid #c7d5fb; border-radius: .35em; background: var(--soft-blue); color: var(--blue); font-size: .92em; font-weight: 600; line-height: 1.6; vertical-align: .05em; white-space: nowrap; }
.anim-chip.is-on { animation: anim-pop 300ms cubic-bezier(.2, .9, .3, 1.3); }
.anim-msg .anim-chip { background: #fff; }
.anim-bar { display: flex; align-items: center; gap: .5em; margin-top: .35em; color: var(--muted); font-size: .88em; }
.anim-tool { display: grid; place-items: center; width: 2em; height: 2em; border: 1px solid var(--line); border-radius: 50%; }
.anim-pill { display: inline-flex; align-items: center; gap: .3em; padding: .15em .65em; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.anim-pill--mode { color: var(--ink); background: var(--pale); }
.anim-pill--mode svg { color: var(--blue); }
.anim-send { display: grid; place-items: center; width: 2.3em; height: 2.3em; margin-left: auto; border-radius: 50%; background: var(--blue); color: #fff; transition: transform 120ms ease, background 120ms; }
.anim-send.is-pressed { transform: scale(.86); background: #00217a; }
.anim-send svg { stroke-width: 1.9; }

/* Pop-up menu above the composer. */
.anim-menu { position: absolute; z-index: 3; left: 1.1em; bottom: calc(100% + .45em); width: min(22em, calc(100% - 2.2em)); padding: .4em; border: 1px solid var(--line); border-radius: .75em; background: #fff; box-shadow: 0 .6em 1.8em #17254024; transform-origin: 0 100%; }
.anim-scene .anim-menu.is-on { animation: anim-menu-in 220ms cubic-bezier(.2, .8, .3, 1); }
.anim-menu-group { padding: .15em .55em .3em; color: var(--muted); font-size: .8em; font-weight: 650; letter-spacing: .05em; }
.anim-menu-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .6em; padding: .4em .55em; border-radius: .5em; transition: background 140ms, transform 120ms; }
.anim-menu-item svg { grid-row: span 2; width: 1.25em; height: 1.25em; color: var(--blue); }
.anim-menu-name { font-weight: 600; }
.anim-menu-sub { grid-column: 2; overflow: hidden; color: var(--muted); font-size: .8em; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.anim-menu-item.is-active { background: var(--soft-blue); }
.anim-menu-item.is-pressed { background: #d4e0ff; transform: scale(.98); }
.anim-menu--ring { left: auto; right: 1.1em; width: min(15em, calc(100% - 2.2em)); transform-origin: 100% 100%; }

/* attach-files */
.anim-desk { position: absolute; top: 1em; left: 1.2em; width: 12.5em; padding: .55em; border: 1px solid var(--line); border-radius: .7em; background: var(--pale); }
.anim-desk-title { display: flex; align-items: center; gap: .4em; margin-bottom: .35em; padding-left: .3em; color: var(--muted); font-size: .85em; }
.anim-desk-files { display: flex; flex-direction: column; gap: .2em; }
.anim-file { display: flex; align-items: center; gap: .55em; padding: .3em; border-radius: .5em; font-size: .92em; transition: background 140ms, opacity 160ms; }
.anim-file.is-active { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.anim-file.is-lifted { opacity: .4; }
.anim-thumb { display: grid; flex-shrink: 0; place-items: center; width: 2.1em; height: 2.1em; border-radius: .45em; background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.anim-thumb svg { width: 1.25em; height: 1.25em; }
.anim-thumb--image { background: linear-gradient(135deg, #ffe4c9, #ffc59c); color: #9b4d25; box-shadow: none; }
.anim-attachments { display: flex; }
.anim-attach { display: flex; align-items: center; gap: .55em; margin-bottom: .5em; padding: .3em .8em .3em .3em; border: 1px solid var(--line); border-radius: .6em; background: var(--pale); }
.anim-attach-name { display: flex; flex-direction: column; font-size: .92em; line-height: 1.3; }
.anim-attach-name small, .anim-result small { color: var(--muted); font-size: .85em; }

/* permission-card */
.anim-card { width: min(21em, 100%); padding: .65em .75em; border: 1px solid var(--line); border-radius: .75em; background: #fff; box-shadow: 0 .3em 1em #17254010; }
.anim-card-head { display: flex; align-items: center; gap: .4em; margin-bottom: .35em; font-weight: 650; }
.anim-card-head svg { color: var(--blue); }
.anim-card-row { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: .5em; padding: .25em .45em; border-radius: .4em; font-size: .92em; transition: background 240ms, box-shadow 240ms; }
.anim-card-row > span:first-child { color: var(--muted); }
.anim-card-row.is-active { background: #fff5d4; box-shadow: inset 0 0 0 1px #edc95a; }
.anim-card-actions, .anim-card-done { display: flex; justify-content: flex-end; align-items: center; gap: .5em; margin-top: .5em; }
.anim-card-done { gap: .35em; color: #1f7a4d; font-size: .92em; font-weight: 600; }
.anim-btn { display: inline-flex; align-items: center; justify-content: center; padding: .28em .95em; border: 1px solid var(--line); border-radius: .5em; background: #fff; color: var(--ink); font-size: .92em; white-space: nowrap; transition: transform 120ms ease, filter 120ms, box-shadow 200ms; }
.anim-btn--primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.anim-btn.is-pressed { transform: scale(.93); filter: brightness(.85); }
.anim-btn.is-active { box-shadow: 0 0 0 .22em #002fa733; border-color: var(--blue); }
.anim-result { display: flex; align-items: center; gap: .6em; }
.anim-result > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }

/* browser-handoff */
.anim-browser-scene { flex-direction: row; gap: .9em; padding: .9em; background: var(--pale); }
.anim-browser { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .7em; background: #fff; }
.anim-toolbar { display: flex; align-items: center; gap: .45em; padding: .45em .5em; border-bottom: 1px solid var(--line); background: #f7f9fd; }
.anim-nav { display: flex; color: #8a96ad; }
.anim-url { display: flex; flex: 1; align-items: center; gap: .35em; min-width: 0; padding: .2em .6em; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .82em; white-space: nowrap; }
.anim-btn--small { padding: .22em .65em; font-size: .8em; }
.anim-swap { display: inline; }
.anim-stop { display: grid; flex-shrink: 0; place-items: center; width: 1.9em; height: 1.9em; border: 1px solid #f1c3c3; border-radius: .45em; background: #fff5f5; }
.anim-stop span { width: .7em; height: .7em; border-radius: .12em; background: #d43a3a; }
.anim-status { display: flex; align-items: center; gap: .45em; padding: .28em .8em; background: var(--soft-blue); color: var(--blue); font-size: .8em; transition: background 240ms, color 240ms; }
.anim-status-dot { flex-shrink: 0; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.anim-status.is-user { background: #e5f5ec; color: #1b6e45; }
.anim-page { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.anim-loading { display: flex; flex-direction: column; gap: .6em; padding: 1.2em; }
.anim-loading span { height: .8em; border-radius: .3em; background: #edf1f8; }
.anim-loading span:nth-child(1) { width: 45%; }
.anim-loading span:nth-child(2) { width: 80%; }
.anim-loading span:nth-child(3) { width: 65%; }
.anim-frame.is-live .anim-loading span { animation: anim-shimmer 1s ease-in-out infinite alternate; }
.anim-login { display: flex; flex-direction: column; justify-content: center; gap: .55em; height: 100%; padding: 0 max(1.2em, calc(50% - 8em)); }
.anim-login-title { margin-bottom: .15em; font-size: 1.05em; font-weight: 650; text-align: center; }
.anim-input { display: block; height: 2.3em; padding: 0 .7em; overflow: hidden; border: 1px solid #c9d4e8; border-radius: .5em; font-size: .92em; line-height: 2.2em; white-space: nowrap; transition: border-color 160ms, box-shadow 160ms; }
.anim-input.is-focus { border-color: var(--blue); box-shadow: 0 0 0 .2em #002fa71f; }
.anim-input-ph { color: #8a96ad; }
.anim-input:has(.anim-typed:not(:empty)) .anim-input-ph { display: none; }
.anim-dotsText { letter-spacing: .12em; }
.anim-btn--block { width: 100%; padding: .4em; }
.anim-reviews { height: 100%; overflow: hidden; }
.anim-reviews-list { display: flex; flex-direction: column; gap: .5em; padding: .7em .9em; translate: 0 var(--y, 0); transition: translate 700ms cubic-bezier(.4, 0, .2, 1); }
.anim-reviews-title { color: var(--muted); font-size: .85em; }
.anim-review { display: flex; gap: .6em; padding: .45em .6em; border: 1px solid var(--line); border-radius: .55em; font-size: .9em; line-height: 1.45; transition: background 240ms, border-color 240ms, box-shadow 240ms; }
.anim-review strong { display: block; font-size: .92em; }
.anim-review.is-hit { border-color: var(--blue); background: var(--soft-blue); box-shadow: 0 0 0 .16em #002fa71f; }
.anim-avatar { flex-shrink: 0; width: 1.8em; height: 1.8em; border-radius: 50%; background: #dfe6f5; }
.anim-side { display: flex; flex-shrink: 0; flex-direction: column; gap: .5em; width: 12em; }
.anim-side-title { color: var(--muted); font-size: .8em; font-weight: 650; letter-spacing: .06em; }
.anim-note { padding: .5em .65em; border: 1px solid var(--line); border-radius: .6em; background: #fff; font-size: .88em; line-height: 1.45; transition: opacity 240ms; }
.anim-note.is-old { opacity: .55; }
.anim-collect { margin-top: auto; padding: .6em .75em; border-radius: .6em; background: var(--blue); color: #fff; }
.anim-collect-num { display: block; font-weight: 650; }
.anim-collect-bar { display: block; height: .35em; margin-top: .4em; overflow: hidden; border-radius: 999px; background: #ffffff40; }
.anim-collect-bar span { display: block; width: calc(var(--n, 0) * 100% / 3); height: 100%; background: #fff; transition: width 320ms ease; }

/* context-compact */
.anim-old { display: flex; flex-direction: column; gap: .7em; transition: opacity 500ms ease, filter 500ms ease; }
.anim-old.is-folding { opacity: .22; filter: blur(1px); }
.anim-summary { padding: .55em .8em; border: 1px dashed #b4c4e6; border-radius: .7em; background: var(--pale); font-size: .92em; }
.anim-summary-head { display: flex; align-items: center; gap: .4em; margin-bottom: .15em; color: var(--blue); font-weight: 650; }
.anim-summary-head span { margin-left: auto; color: var(--muted); font-size: .85em; font-weight: 400; }
.anim-compacting { position: absolute; z-index: 3; right: 0; bottom: calc(100% + .5em); left: 0; display: flex; align-items: center; gap: .5em; width: fit-content; margin: 0 auto; padding: .3em .95em; border-radius: 999px; background: var(--ink); color: #fff; font-size: .85em; white-space: nowrap; }
.anim-spinner { width: .95em; height: .95em; border: .15em solid #ffffff55; border-top-color: #fff; border-radius: 50%; }
.anim-frame.is-live .anim-spinner { animation: anim-spin 800ms linear infinite; }
.anim-ring { --p: 32; display: inline-flex; align-items: center; gap: .3em; margin-left: auto; padding: .15em .45em .15em .25em; border-radius: 999px; font-variant-numeric: tabular-nums; transition: background 140ms, transform 120ms; }
.anim-ring + .anim-send { margin-left: .2em; }
.anim-ring.is-pressed { background: var(--soft-blue); transform: scale(.94); }
.anim-scene .anim-ring svg { width: 1.55em; height: 1.55em; transform: rotate(-90deg); stroke-linecap: round; }
.anim-ring-track { stroke: var(--line); stroke-width: 2.6; }
.anim-ring-fill { stroke: var(--blue); stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke 300ms; }
.anim-ring.is-high .anim-ring-fill { stroke: #d9822b; }
.anim-ring.is-high .anim-ring-text { color: #a85a17; }

/* workspace-folders */
.anim-ws-scene { flex-direction: row; }
.anim-ws-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.anim-ws-btn { display: inline-flex; align-items: center; gap: .35em; margin: 0 0 .45em .2em; padding: .2em .6em; border-radius: .5em; color: var(--muted); font-size: .85em; white-space: nowrap; transition: background 160ms, color 160ms, transform 120ms; }
.anim-ws-btn.is-pressed { transform: scale(.95); background: var(--soft-blue); }
.anim-ws-btn.is-set { color: var(--blue); background: var(--soft-blue); font-weight: 600; }
.anim-ws-btn.is-set > span { animation: anim-pop 300ms cubic-bezier(.2, .9, .3, 1.3); }
.anim-menu-item--row { grid-template-columns: auto minmax(0, 1fr) auto; }
.anim-menu-item--row svg { grid-row: auto; }
.anim-menu-item--muted { color: var(--muted); }
.anim-menu-item--muted svg { color: var(--muted); }
.anim-menu-item--muted .anim-menu-name { font-weight: 400; }
.anim-scene .anim-menu-check { width: 1em; height: 1em; color: var(--blue); }
.anim-menu-group--split { margin-top: .3em; padding-top: .45em; border-top: 1px solid var(--line); }
.anim-read { display: flex; align-items: center; gap: .35em; margin-bottom: .35em; color: #1f7a4d; font-size: .9em; }
.anim-panel { display: flex; flex-direction: column; flex-shrink: 0; width: 13.5em; padding: .7em .6em; border-left: 1px solid var(--line); background: var(--pale); }
.anim-tabs { display: flex; gap: .2em; margin-bottom: .6em; padding: .2em; border-radius: .55em; background: #e3e9f5; font-size: .82em; }
.anim-tabs span { flex: 1; padding: .2em .4em; border-radius: .4em; color: var(--muted); text-align: center; white-space: nowrap; }
.anim-tabs .is-current { background: #fff; color: var(--ink); font-weight: 600; }
.anim-tree { display: flex; flex-direction: column; gap: .15em; font-size: .9em; }
.anim-tree-root { display: flex; align-items: center; gap: .4em; margin-bottom: .2em; font-weight: 650; }
.anim-tree-root svg { color: var(--blue); }
.anim-tree-hint { padding-left: 1.4em; color: #8592aa; font-size: .9em; }
.anim-tree-row { display: flex; align-items: center; gap: .4em; padding: .22em .4em .22em 1.2em; border-radius: .4em; white-space: nowrap; transition: background 240ms, box-shadow 240ms; }
.anim-tree-row svg { color: var(--muted); }
.anim-tree-row--child { padding-left: 2.4em; }
.anim-tree-row.is-hit { background: #fff; box-shadow: inset 0 0 0 1px var(--blue); }
.anim-tree-row.is-new { background: #e5f5ec; box-shadow: inset 0 0 0 1px #5dbb8a; }
.anim-badge { padding: 0 .4em; border-radius: .3em; background: var(--soft-blue); color: var(--blue); font-size: .78em; font-weight: 600; }

/* Static keyframes for reduced motion. */
.anim-stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.anim-stills > li { margin: 0; padding: 0; }
.anim-stills .anim-cursor, .anim-stills .anim-ghost { display: none; }
.anim-stills p.anim-still-text { margin: 8px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }

@container anim (max-width: 520px) { .anim-stills { grid-template-columns: minmax(0, 1fr); } }
@container anim-box (max-width: 480px) {
  .anim-thread { padding: .9em .9em .6em; }
  .anim-dock { padding: 0 .7em .7em; }
  .anim-menu { left: .7em; width: calc(100% - 1.4em); }
  .anim-menu--ring { left: auto; right: .7em; width: min(15em, calc(100% - 1.4em)); }
  .anim-msg { max-width: 90%; }
  .anim-desk { left: .9em; }
  .anim-browser-scene { flex-direction: column; padding: .7em; gap: .6em; }
  .anim-side { flex-direction: row; align-items: stretch; width: auto; height: 5.4em; }
  .anim-side-title, .anim-note.is-old { display: none; }
  .anim-note { flex: 1; min-width: 0; }
  .anim-collect { width: 8.5em; margin-top: 0; }
  .anim-ws-scene { flex-direction: column; }
  .anim-panel { order: -1; width: auto; height: 12.6em; padding: .55em .7em; border-left: 0; border-bottom: 1px solid var(--line); }
  .anim-tabs { margin-bottom: .4em; }
}

@keyframes anim-fade { from { opacity: 0; } }
@keyframes anim-in { from { opacity: 0; transform: translateY(.5em) scale(.97); } }
@keyframes anim-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes anim-menu-in { from { opacity: 0; transform: translateY(.4em) scale(.96); } }
@keyframes anim-blink { 50% { opacity: 0; } }
@keyframes anim-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.35em); } }
@keyframes anim-shimmer { to { opacity: .45; } }
@keyframes anim-spin { to { transform: rotate(360deg); } }