/* PROTOTYPE — Pie Agent UI v2 primitives (from sketches/012-chat-redesign-full), global so JS-built markup
   (the Obsidian demo window) gets them too. Tokens (--pa-*) are declared on .a-root in VariantA.astro. */
  /* ── primitives (same shapes as 012: .pa-btn / .pa-float / .pa-rail / .pa-av / .pa-shim) ── */
  .a-root .pa-float { background: var(--pa-float-bg); border: var(--pa-bw) solid var(--pa-line); border-radius: var(--pa-r-m); box-shadow: var(--pa-shadow-float); }
  .a-root .pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pa-s-2); height: 30px; padding: 0 var(--pa-s-3);
    border-radius: var(--pa-r-s); font: 500 var(--pa-fs-sm) var(--pa-font-ui); color: var(--pa-ink); background: var(--pa-tint-2); text-decoration: none; white-space: nowrap;
    transition: background var(--pa-dur-1) var(--pa-ease), transform var(--pa-dur-1) var(--pa-ease); }
  .a-root .pa-btn:hover { background: var(--pa-tint-3); }
  .a-root .pa-btn:active { transform: scale(.97); }
  .a-root .pa-btn:focus-visible { outline: none; box-shadow: var(--pa-focus); }
  .a-root .pa-btn.pri { background: var(--pa-accent); color: var(--pa-on-accent); }
  .a-root .pa-btn.pri:hover { background: var(--pa-accent-hover); }
  /* nav buttons, all teal: Mua Pro is the bright one with a glow, Tải Starter Kit a tinted outline that still reads */
  .a-root .a-nav .pa-btn.pri { background: linear-gradient(180deg, #34c3cc, #2396a3); color: #fff; font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(160, 245, 245, .35), 0 6px 18px -6px rgba(44, 181, 190, .75); }
  .a-root .a-nav .pa-btn.pri:hover { background: linear-gradient(180deg, #45d1d9, #2aa5b2); }
  .a-root .pa-btn.kit { background: rgba(44, 181, 190, .12); color: #7fe3e8; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(44, 181, 190, .5); }
  .a-root .pa-btn.kit:hover { background: rgba(44, 181, 190, .22); color: #b2f1f3; }
  .a-root .pa-btn.sm { height: 32px; font-size: var(--pa-fs); }
  .a-root .pa-btn.lgx { height: 44px; padding: 0 20px; font-size: 15px; }
  .a-root .pa-btn.block { width: 100%; margin-top: var(--pa-s-5); }

  .a-root .pa-av { --pa-av-sz: 22px; position: relative; width: var(--pa-av-sz); height: var(--pa-av-sz); flex: none; border-radius: 50%; display: inline-block; }
  .a-root .pa-av .mark-face { position: absolute; inset: 2px; border-radius: 50%; background-size: cover; }
  .a-root .pa-av::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 50%, var(--pa-av-c) 100%);
    -webkit-mask: var(--pa-ring-mask); mask: var(--pa-ring-mask); animation: pa-spin var(--pa-av-spin, 18s) linear infinite; }
  .a-root .pa-av[data-s="running"] { --pa-av-spin: 3.2s; --pa-av-c: var(--pa-link); }
  .a-root .pa-av[data-s="done"] { --pa-av-spin: 12s; --pa-av-c: var(--pa-st-done); }
  .a-root .pa-shim { background: linear-gradient(90deg, var(--pa-ink-3) 0%, var(--pa-ink-3) 38%, var(--pa-ink) 50%, var(--pa-ink-3) 62%, var(--pa-ink-3) 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: pa-shim 1.7s linear infinite; }

  .a-root .pa-rail { list-style: none; margin: 0; padding: 0; }
  .a-root .pa-row2 { position: relative; display: flex; align-items: baseline; gap: var(--pa-s-2); padding: 3px 0 3px 18px; font: 12.5px/1.55 var(--pa-font-mono); color: var(--pa-ink-2); min-width: 0;
    opacity: 0; transform: translateX(-4px); transition: opacity 160ms var(--pa-ease), transform 160ms var(--pa-ease); }
  .a-root .pa-row2.on { opacity: 1; transform: none; }
  .a-root .pa-row2::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--pa-line); }
  .a-root .pa-row2:first-child::before { top: 50%; } .a-root .pa-row2.last::before { bottom: 50%; }
  .a-root .pa-row2::after { content: ""; position: absolute; left: 0; top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--pa-ink-3); box-shadow: 0 0 0 3px var(--pa-canvas); }
  .a-root .pa-row2.run::after { background: var(--pa-st-running); animation: pa-sonar 1.2s var(--pa-ease) infinite; }
  .a-root .pa-row2.run::before { background: linear-gradient(180deg, transparent, var(--pa-st-running), transparent); background-size: 100% 200%; animation: pa-flow 1s linear infinite; }
  .a-root .pa-row2 .v { width: 60px; flex: none; font-size: 10.5px; letter-spacing: .06em; color: var(--pa-ink-3); }
  .a-root .pa-row2.run .v { color: var(--pa-link); }
  .a-root .pa-row2 .g { flex: 0 1 auto; color: var(--pa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .a-root .pa-row2 .r { flex: 0 100 auto; min-width: 0; color: var(--pa-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-root .pa-row2 .s { margin-left: auto; color: var(--pa-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: var(--pa-s-2); }
  .a-root .pa-row2.run .s { color: var(--pa-link); }
  @keyframes pa-spin { to { transform: rotate(360deg); } }
  @keyframes pa-shim { from { background-position: 100% 0; } to { background-position: -150% 0; } }
  @keyframes pa-flow { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
  @keyframes pa-sonar { 0% { box-shadow: 0 0 0 3px var(--pa-canvas), 0 0 0 3px var(--pa-run-glow); } 100% { box-shadow: 0 0 0 3px var(--pa-canvas), 0 0 0 9px transparent; } }