/* Application tokens and compact Command Card; isolated from the website. */
/* Scoped copies of brett-app's semantic tokens; no Tailwind/React runtime needed. */
.product-showcase {
  --ps-background: oklch(0.995 0.002 260);
  --ps-foreground: oklch(0.24 0.028 258);
  --ps-card: #fff;
  --ps-muted: oklch(0.989 0.002 259);
  --ps-muted-foreground: oklch(0.44 0.02 259);
  --ps-border: oklch(0.89 0.012 258);
  --ps-primary: #266df0;
  --ps-primary-foreground: #fff;
  --ps-selected: oklch(0.93 0.03 248);
  --ps-sidebar: #f4f4f4;
  --ps-sidebar-accent: #eaeaea;
  --ps-working-bg: oklch(0.95 0.05 80);
  --ps-working-fg: oklch(0.44 0.08 72);
  --ps-working-border: oklch(0.9 0.055 80);
  --ps-review-bg: oklch(0.95 0.03 230);
  --ps-review-fg: oklch(0.45 0.08 240);
  --ps-review-border: oklch(0.89 0.04 236);
  --ps-approved-bg: oklch(0.95 0.04 152);
  --ps-approved-fg: oklch(0.46 0.11 154);
  --ps-approved-border: oklch(0.89 0.05 152);
  --ps-changes-bg: oklch(0.95 0.035 22);
  --ps-changes-fg: oklch(0.47 0.11 26);
  --ps-shadow-xs: 0 1px 1px rgb(17 24 39 / 0.04), 0 1px 3px rgb(17 24 39 / 0.06);
  --ps-shadow-floating: 0 16px 36px rgb(15 23 42 / 0.16);
  --ps-shadow-overlay: 0 24px 60px rgb(15 23 42 / 0.24);
  --ps-radius: 0.82rem;
  --ps-ease: cubic-bezier(0.35, 0, 0.25, 1);
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 660px;
  justify-self: end;
  font: 400 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
  color: var(--ps-foreground);
  color-scheme: light;
  isolation: isolate;
}

/* The homepage has one theme today. These track an explicit site theme if added. */
:is(html.dark, html[data-theme="dark"]) .product-showcase {
  color-scheme: dark;
  --ps-background: #0d0f13;
  --ps-foreground: #f3f5f7;
  --ps-card: #15181e;
  --ps-muted: #191d24;
  --ps-muted-foreground: #a6afbc;
  --ps-border: #2b313b;
  --ps-primary: #397cf6;
  --ps-primary-foreground: #070d18;
  --ps-selected: #142642;
  --ps-sidebar: #090b0f;
  --ps-sidebar-accent: #191d24;
  --ps-working-bg: #2b2313;
  --ps-working-fg: #f4c76a;
  --ps-working-border: #69532e;
  --ps-review-bg: #142642;
  --ps-review-fg: #8eb8ff;
  --ps-review-border: #365681;
  --ps-approved-bg: #102a22;
  --ps-approved-fg: #65d6a4;
  --ps-approved-border: #2d6954;
  --ps-changes-bg: #321c22;
  --ps-changes-fg: #ff8585;
  --ps-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.22), 0 1px 4px rgb(0 0 0 / 0.22);
  --ps-shadow-floating: 0 16px 36px rgb(0 0 0 / 0.5);
  --ps-shadow-overlay: 0 24px 60px rgb(0 0 0 / 0.65);
}
.product-showcase button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.product-showcase .ps-icon { width: 16px; height: 16px; flex: none; }
.ps-prompt {
  position: absolute;
  top: 0;
  left: 124px;
  width: min(420px, calc(100% - 136px));
  padding: 16px;
  border: 1px solid var(--ps-border);
  border-radius: calc(var(--ps-radius) * 1.36);
  background: var(--ps-card);
  box-shadow: var(--ps-shadow-floating);
  z-index: 2;
  transition: transform 300ms var(--ps-ease), box-shadow 300ms var(--ps-ease);
}
.ps-prompt-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 12px; }
.ps-prompt-heading strong { font-weight: 600; }
.ps-prompt-brand { display: grid; place-items: center; width: 23px; height: 23px; color: var(--ps-foreground); background: var(--ps-muted); border-radius: 6px; }
.ps-prompt-brand .ps-icon { width: 14px; height: 14px; }
.ps-prompt-context { margin-left: auto; font-size: 10px; color: var(--ps-muted-foreground); }
.ps-prompt-input { display: flex; align-items: center; gap: 9px; padding: 10px 10px 10px 12px; min-height: 56px; border: 1px solid var(--ps-border); border-radius: 10px; background: var(--ps-background); }
.ps-prompt-input p { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
[data-phase="resting"] [data-prompt-text]::before { content: "Ask about your work…"; color: var(--ps-muted-foreground); }
.ps-caret { display: inline-block; height: 1em; width: 1px; background: var(--ps-primary); vertical-align: -0.13em; margin-left: 2px; }
[data-phase="typing"][data-running="true"] .ps-caret { animation: ps-caret 900ms steps(2, jump-none) infinite; }
[data-phase="submitting"] .ps-caret, [data-phase="transitioning"] .ps-caret, [data-phase="result"] .ps-caret { visibility: hidden; }
.ps-send { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border-radius: 8px; background: var(--ps-primary); color: var(--ps-primary-foreground); opacity: 0.65; transition: transform 150ms, opacity 150ms; }
[data-phase="typing"] .ps-send, [data-phase="submitting"] .ps-send { opacity: 1; }
[data-phase="submitting"] .ps-send { transform: scale(0.9); }
.ps-response { display: grid; grid-template-columns: 14px 1fr; gap: 7px; padding: 0 2px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 300ms var(--ps-ease), padding-top 300ms, opacity 300ms; font-size: 11px; line-height: 1.5; color: var(--ps-muted-foreground); }
.ps-response-icon { color: var(--ps-approved-fg); margin-top: 1px; }
.ps-response .ps-icon { width: 14px; height: 14px; }
[data-phase="transitioning"] .ps-response, [data-phase="result"] .ps-response { max-height: 70px; padding-top: 12px; opacity: 1; }
[data-phase="transitioning"] .ps-response-icon { color: var(--ps-muted-foreground); }
.ps-controls { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 17px; }
.ps-tabs { display: inline-flex; align-items: center; padding: 4px; border: 1px solid var(--ps-border); border-radius: 11px; background: var(--ps-muted); box-shadow: var(--ps-shadow-xs); }
.ps-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; color: var(--ps-muted-foreground); font-size: 11px; font-weight: 500; border-radius: 7px; overflow: hidden; transition: background-color 200ms, color 200ms; }
.ps-tabs button[aria-selected="true"] { color: var(--ps-foreground); background: var(--ps-card); box-shadow: var(--ps-shadow-xs); }
.ps-tabs button:hover { color: var(--ps-foreground); }
.ps-tabs .ps-icon { width: 14px; height: 14px; }
.ps-tab-progress { position: absolute; height: 2px; bottom: 0; left: 8px; right: 8px; background: var(--ps-primary); opacity: 0; transform-origin: left; transform: scaleX(0); }
.ps-tabs [aria-selected="true"] .ps-tab-progress { opacity: 0.5; transform: scaleX(var(--ps-progress, 0)); }
.ps-pause { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ps-muted); border: 1px solid var(--ps-border); color: var(--ps-muted-foreground); }
.ps-pause .ps-icon { width: 13px; height: 13px; }
.ps-pause[hidden] { display: none; }
.product-showcase button:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 3px; }
.ps-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes ps-caret { 50% { opacity: 0; } }
/* Reuse the saved application's surfaces, typography, controls and icons. */


.command-card { max-width: 480px; margin-inline: auto; }
.cc-stage { height: 204px; outline: none; }
.cc-stage:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 5px; border-radius: 18px; }
.command-card .ps-prompt { position: relative; left: 0; top: 0; width: 100%; padding: 18px; }
.command-card .ps-prompt-heading { font-size: 13px; margin-bottom: 14px; }
.command-card .cc-brand-icon { width: 32px; height: 32px; flex: none; }
.command-card .cc-brand-icon-dark { display: none; }
html.dark .command-card .cc-brand-icon-default,
html[data-theme="dark"] .command-card .cc-brand-icon-default { display: none; }
html.dark .command-card .cc-brand-icon-dark,
html[data-theme="dark"] .command-card .cc-brand-icon-dark { display: block; }
.command-card .ps-prompt-input { min-height: 64px; padding: 11px 12px; }
.command-card .ps-prompt-input p { font-size: 14px; line-height: 1.5; }
.command-card .ps-send { width: 31px; height: 31px; }
.command-card .ps-response { font-size: 12px; line-height: 1.5; }
.command-card[data-phase="resting"] [data-prompt-text]::before { content: 'Give brett a task…'; }
.command-card .ps-controls { margin-top: 0; }
.command-card .ps-tabs { flex: none; max-width: 100%; padding: 4px; }
.command-card .ps-tabs button { flex: none; gap: 0; min-width: 40px; min-height: 40px; padding-inline: 12px; font-size: 11px; }
.command-card .ps-tabs .ps-icon { display: block; width: 16px; height: 16px; }
.command-card .cc-tab-label {
  display: grid;
  grid-template-columns: 0fr;
  margin-inline-start: 0;
  opacity: 0;
  transition: grid-template-columns 320ms var(--ps-ease), margin-inline-start 320ms var(--ps-ease), opacity 200ms;
}
.command-card .cc-tab-label > span { min-width: 0; overflow: hidden; white-space: nowrap; }
.command-card [aria-selected="true"] .cc-tab-label { grid-template-columns: 1fr; margin-inline-start: 6px; opacity: 1; }

@media (max-width: 600px) {
  .cc-stage { height: 226px; }
  .command-card .ps-prompt { padding: 15px; }
  .command-card .ps-prompt-heading { margin-bottom: 12px; }
  .command-card .ps-prompt-input { min-height: 76px; padding: 10px; }
  .command-card .ps-prompt-input p { font-size: 13px; }
  .command-card .ps-response { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
 .command-card *, .command-card *::before, .command-card *::after { transition: none !important; animation: none !important; }
 .command-card .ps-caret, .command-card .ps-tab-progress { display: none; }
}