/* ----------------------------------------------------------------------------
   @opengeni/react — Tailwind v4 theme bridge + component keyframes

   Consumers import this once inside their Tailwind entry CSS:

     @import "tailwindcss";
     @import "@opengeni/react/styles.css";
     @source "../node_modules/@opengeni/react/src";

   The @source directive makes Tailwind compile the utility classes used by
   the components in this package. Everything themable lives in tokens.css
   (plain CSS variables) — override those to rebrand; this file only maps them
   into Tailwind utility names (`bg-og-surface-1`, `text-og-fg-muted`,
   `rounded-og-md`, `shadow-og-glow`, `font-og-mono`, ...).
   -------------------------------------------------------------------------- */

@import "./tokens.css";
@import "./effective-tokens.css";
@import "./session-capability.css";

/* Full-surface preview preparation. The ripple keeps its private ink and glow
   (read by the canvas effect as literal colors), tuned to the app's teal glow
   on a neutral ground; the steady label uses the host's typography and text
   tokens. */
.og-preview-loading {
  --_og-preview-ink: #9fdccd;
  --_og-preview-glow: #5fb8a3;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #1b1b1b;
  container: og-preview / inline-size;
}
.og-root:is([data-og-theme="light"], .og-light) .og-preview-loading,
:is([data-og-theme="light"], .og-light) .og-root .og-preview-loading,
.og-root :is([data-og-theme="light"], .og-light) .og-preview-loading {
  --_og-preview-ink: #5f8f84;
  --_og-preview-glow: #9fe3d3;
  background: #f9f9f9;
}
.og-preview-loading canvas {
  display: block;
  width: 100%;
  height: 320px;
  /* Non-canvas / pre-effect fallback, removed only after a successful paint. */
  background-image: radial-gradient(circle, color-mix(in srgb, var(--_og-preview-ink) 30%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}
.og-preview-loading canvas[data-painted="true"] { background-image: none; }
.og-preview-loading-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--og-color-fg-muted);
  font-family: var(--og-font-sans);
  font-size: var(--og-font-size-xs);
  line-height: var(--og-line-height-xs);
  font-weight: 400;
}
@container og-preview (max-width: 500px) {
  .og-preview-loading canvas { height: 260px; }
}
@media (max-width: 500px) {
  .og-preview-loading canvas { height: 260px; }
}

/* Standalone embeds do not necessarily load Tailwind Preflight. Keep the
   control reset inside SDK roots, before utilities, without resetting the host.
   :where keeps controls at the same specificity as component utilities. */
@layer base {
  .og-root :where([hidden]:not([hidden="until-found"])) {
    display: none !important;
  }
  .og-root :where(button, input, textarea, select) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }
  .og-root :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
    appearance: button;
  }
  /* Host global element styles (`ul { list-style: disc; margin }`,
     `p { line-height: 1.8 }`, `li { margin-top }`) must not reach SDK markup.
     The root class gives one class of specificity: above host element
     selectors, but tied with (and emitted before) component utilities, which
     therefore still win. */
  .og-root :where(ul, ol, menu) {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .og-root :where(li, p, blockquote, figure, dl, dd, pre, h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
  }
  .og-root :where(h1, h2, h3, h4, h5, h6) {
    font-weight: inherit;
  }
  /* The rest of Tailwind Preflight that the session app's markup assumes
     (links styled by their classes, block icons and media). Only inside the
     session app (and at no specificity, so utilities still win), so the other
     embeddable components keep rendering as before. */
  :where(.og-root.og-session-app) :where(a) {
    color: inherit;
    text-decoration: inherit;
  }
  :where(.og-root.og-session-app) :where(b, strong) {
    font-weight: bolder;
  }
  :where(.og-root.og-session-app) :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
  }
  :where(.og-root.og-session-app) :where(img, video) {
    max-width: 100%;
    height: auto;
  }
  :where(.og-root.og-session-app) :where(table) {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  .og-root,
  .og-root :where(*, ::before, ::after) {
    box-sizing: border-box;
  }
}

@theme inline {
  --font-og-sans: var(--og-font-sans);
  --font-og-mono: var(--og-font-mono);
  /* Compatibility aliases still used by published components and the exact
     dropdown primitives shared with the web app. Keep the public stylesheet
     self-contained instead of requiring consumers to copy the app theme. */
  --font-sans: var(--og-font-sans);
  --font-mono: var(--og-font-mono);

  /* Type ramp. Runtime values live in tokens.css so an embedder can tune the
     complete SDK subtree without rebuilding Tailwind. The control/menu tokens
     preserve Tailwind's historic xs/sm metrics without leaking through or
     mutating the host application's own `text-xs` / `text-sm` utilities. */
  --text-og-xs: var(--og-font-size-xs);
  --text-og-xs--line-height: var(--og-line-height-xs);
  --text-og-sm: var(--og-font-size-sm);
  --text-og-sm--line-height: var(--og-line-height-sm);
  --text-og-base: var(--og-font-size-base);
  --text-og-base--line-height: var(--og-line-height-base);
  --text-og-md: var(--og-font-size-md);
  --text-og-md--line-height: var(--og-line-height-md);
  --text-og-control: var(--og-font-size-control);
  --text-og-control--line-height: var(--og-line-height-control);
  --text-og-menu: var(--og-font-size-menu);
  --text-og-menu--line-height: var(--og-line-height-menu);
  --text-og-composer: var(--og-font-size-composer);
  --text-og-composer--line-height: var(--og-line-height-composer);
  --text-og-composer-wide: var(--og-font-size-composer-wide);
  --text-og-composer-wide--line-height: var(--og-line-height-composer-wide);
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;

  --color-og-bg: var(--og-color-bg);
  --color-og-canvas: var(--og-color-canvas);
  --color-og-selection: var(--og-color-selection);
  --color-og-hover: var(--og-color-hover);
  --color-og-surface-1: var(--og-color-surface-1);
  --color-og-surface-2: var(--og-color-surface-2);
  --color-og-surface-3: var(--og-color-surface-3);
  --color-og-border: var(--og-color-border);
  --color-og-border-strong: var(--og-color-border-strong);
  --color-og-fg: var(--og-color-fg);
  --color-og-fg-label: var(--og-color-fg-label);
  --color-og-fg-muted: var(--og-color-fg-muted);
  --color-og-fg-subtle: var(--og-color-fg-subtle);

  --color-og-accent: var(--og-color-accent);
  --color-og-accent-strong: var(--og-color-accent-strong);
  --color-og-accent-deep: var(--og-color-accent-deep);
  --color-og-accent-fg: var(--og-color-accent-fg);
  --color-og-accent-soft: var(--og-color-accent-soft);

  --color-og-primary: var(--og-color-primary);
  --color-og-primary-fg: var(--og-color-primary-fg);
  --color-og-primary-border: var(--og-color-primary-border);
  --color-og-primary-hover: var(--og-color-primary-hover);
  --color-og-switch-track: var(--og-color-switch-track);
  --color-og-switch-thumb: var(--og-color-switch-thumb);

  --color-og-status-queued: var(--og-color-status-queued);
  --color-og-status-running: var(--og-color-status-running);
  --color-og-status-idle: var(--og-color-status-idle);
  --color-og-status-waiting: var(--og-color-status-waiting);
  --color-og-status-failed: var(--og-color-status-failed);
  --color-og-status-cancelled: var(--og-color-status-cancelled);
  --color-og-danger: var(--og-color-danger);
  --color-og-danger-fill: var(--og-color-danger-fill);
  --color-og-danger-fg: var(--og-color-danger-fg);

  --color-bg: var(--og-color-bg);
  --color-canvas: var(--og-color-canvas);
  --color-selection: var(--og-color-selection);
  --color-hover: var(--og-color-hover);
  --color-surface: var(--og-color-surface-1);
  --color-surface-2: var(--og-color-surface-2);
  --color-surface-3: var(--og-color-surface-3);
  --color-border: var(--og-color-border);
  --color-border-strong: var(--og-color-border-strong);
  --color-fg: var(--og-color-fg);
  --color-fg-label: var(--og-color-fg-label);
  --color-fg-muted: var(--og-color-fg-muted);
  --color-fg-subtle: var(--og-color-fg-subtle);
  --color-brand: var(--og-color-accent);
  --color-brand-strong: var(--og-color-accent-deep);
  --color-brand-fg: var(--og-color-accent-fg);
  --color-status-queued: var(--og-color-status-queued);
  --color-status-running: var(--og-color-status-running);
  --color-status-idle: var(--og-color-status-idle);
  --color-status-waiting: var(--og-color-status-waiting);
  --color-status-success: var(--og-color-status-idle);
  --color-status-failed: var(--og-color-status-failed);
  --color-status-cancelled: var(--og-color-status-cancelled);
  --color-danger: var(--og-color-danger);

  --color-background: var(--color-bg);
  --color-foreground: var(--color-fg);
  --color-card: var(--color-surface);
  --color-card-foreground: var(--color-fg);
  --color-popover: var(--color-surface);
  --color-popover-foreground: var(--color-fg);
  --color-primary: var(--og-color-primary);
  --color-primary-foreground: var(--og-color-primary-fg);
  --color-primary-border: var(--og-color-primary-border);
  --color-primary-hover: var(--og-color-primary-hover);
  --color-secondary: var(--og-color-selection);
  --color-secondary-foreground: var(--og-color-fg-muted);
  --color-muted: var(--color-surface-2);
  --color-muted-foreground: var(--color-fg-muted);
  --color-accent: var(--color-surface-2);
  --color-accent-foreground: var(--color-fg);
  --color-destructive: var(--og-color-danger);
  --color-destructive-filled: var(--og-color-danger-fill);
  --color-destructive-foreground: var(--og-color-danger-fg);
  --color-input: var(--color-surface-2);
  --color-ring: var(--color-brand);
  --color-sidebar: var(--color-surface);
  --color-sidebar-foreground: var(--color-fg);
  --color-sidebar-primary: var(--og-color-primary);
  --color-sidebar-primary-foreground: var(--og-color-primary-fg);
  --color-sidebar-accent: var(--color-surface-2);
  --color-sidebar-accent-foreground: var(--color-fg);
  --color-sidebar-border: var(--color-border);
  --color-sidebar-ring: var(--color-brand);

  --radius-og-xs: var(--og-radius-xs);
  --radius-og-sm: var(--og-radius-sm);
  --radius-og-md: var(--og-radius-md);
  --radius-og-lg: var(--og-radius-lg);
  --radius-og-xl: var(--og-radius-xl);
  --radius-sm: var(--og-radius-sm);
  --radius-md: var(--og-radius-md);
  --radius-lg: var(--og-radius-lg);
  --radius-xl: var(--og-radius-xl);

  --shadow-og-sm: var(--og-shadow-sm);
  --shadow-og-md: var(--og-shadow-md);
  --shadow-og-lg: var(--og-shadow-lg);
  --shadow-og-glow: var(--og-shadow-glow);

  --ease-og-out: var(--og-ease-out);
  --ease-og-in-out: var(--og-ease-in-out);
  --ease-og-spring: var(--og-ease-spring);

  --animate-og-enter: og-enter var(--og-duration-base) var(--og-ease-out) both;
  --animate-og-pulse: og-pulse 2s var(--og-ease-in-out) infinite;
  --animate-og-blink: og-blink 1s steps(2, start) infinite;
  --animate-og-shimmer: og-shimmer 2.2s linear infinite;
  --animate-og-spin: og-spin 0.9s linear infinite;
  --animate-spin: og-spin 1s linear infinite;
  --animate-pulse: og-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-og-waveform: og-waveform 1.15s var(--og-ease-in-out) infinite;
  /* Manual disclose — snappy. Auto settle-collapse is the slow path below. */
  --animate-og-expand: og-expand var(--og-duration-disclose) var(--og-ease-in-out);
  --animate-og-collapse: og-collapse var(--og-duration-disclose) var(--og-ease-in-out);
  /* Auto-fold the reader did not ask for: ~7× manual so it reads as choreography. */
  --animate-og-settle-chip: og-settle-chip var(--og-duration-slow) var(--og-ease-out) both;
  /* Ease-out: settle lands softly (slow tail), not a symmetric ease-in-out stop. */
  --animate-og-settle-collapse: og-collapse var(--og-duration-disclose-settle) var(--og-ease-out);
  /* Live tool rows arriving mid-turn — soft, not tied to manual disclose speed. */
  --animate-og-row-enter: og-row-enter var(--og-duration-slow) var(--og-ease-stream) both;
  /* Stream end fallback breath when View Transitions are unavailable. */
  --animate-og-markdown-settle: og-markdown-settle var(--og-duration-markdown-crystallize)
    var(--og-ease-stream) both;
}

/* Typography utilities also publish their effective metrics as private
   component variables. A host reset such as `.app button { font: inherit }`
   otherwise beats a one-class Tailwind utility on specificity and silently
   inflates embedded controls. The scoped guard below reads these variables at
   higher specificity, while responsive variants can still replace them and
   public --og-* tokens remain the only customization surface. */
@utility text-og-xs {
  --og-component-font-size: var(--og-font-size-xs);
  --og-component-line-height: var(--og-line-height-xs);
}

@utility text-og-sm {
  --og-component-font-size: var(--og-font-size-sm);
  --og-component-line-height: var(--og-line-height-sm);
}

@utility text-og-base {
  --og-component-font-size: var(--og-font-size-base);
  --og-component-line-height: var(--og-line-height-base);
}

@utility text-og-md {
  --og-component-font-size: var(--og-font-size-md);
  --og-component-line-height: var(--og-line-height-md);
}

@utility text-og-control {
  --og-component-font-size: var(--og-font-size-control);
  --og-component-line-height: var(--og-line-height-control);
}

@utility text-og-menu {
  --og-component-font-size: var(--og-font-size-menu);
  --og-component-line-height: var(--og-line-height-menu);
}

@utility text-og-composer {
  --og-component-font-size: var(--og-font-size-composer);
  --og-component-line-height: var(--og-line-height-composer);
}

@utility text-og-composer-wide {
  --og-component-font-size: var(--og-font-size-composer-wide);
  --og-component-line-height: var(--og-line-height-composer-wide);
}

/* The one text-link style. The default palette is neutral grey, so colour
   alone cannot tell a link from body text: a resting underline carries the
   affordance (WCAG 1.4.1). The underline is tinted from the link's own colour
   so it stays quiet in dense rows and follows a call site's colour (muted
   meta links); hover strengthens it to the full ink. A host that rebrands the
   accent gets coloured links for free. Call-site utilities (text colour, focus
   ring, outline-none) override these declarations. */
@utility og-link {
  color: var(--og-color-accent-strong);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--og-duration-fast) var(--og-ease-out);
  @media (hover: hover) {
    &:hover {
      text-decoration-color: currentColor;
    }
  }
  &:focus-visible {
    text-decoration-color: currentColor;
    outline: 2px solid color-mix(in oklch, var(--og-color-accent) 70%, transparent);
    outline-offset: 2px;
    border-radius: var(--og-radius-xs);
  }
}

/* Radix Collapsible disclosure: height auto-animates via the content var. Used
   by the timeline tool rows so an expand glides open instead of snapping.

   Height carries the motion; opacity is a SUBTLE fade that resolves slightly
   ahead of the height so the body never pops in at full size, but also never
   flickers half-transparent mid-glide. The ease is a symmetric ease-in-out
   (no overshoot), so open and close feel like the same short, calm motion with
   no double-bounce. */
@keyframes og-expand {
  from {
    height: 0;
    opacity: 0;
  }
  40% {
    opacity: 0.25;
  }
  85% {
    opacity: 1;
  }
  to {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
}

@keyframes og-collapse {
  from {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
  35% {
    opacity: 0.7;
  }
  70% {
    opacity: 0;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

/* Settle chip emphasis — never opacity 0. The live shell already shows this
   row; fading it out→in was the "steps flash" when settle armed or when
   activity→turn remounted and duration/facets caught up. */
@keyframes og-settle-chip {
  from {
    background-color: color-mix(in oklch, var(--color-og-surface-1, transparent) 55%, transparent);
  }
  to {
    background-color: transparent;
  }
}

/* Streaming tip ink: short age-window wash. Fast arrival still keeps a soft
   band (many young batches); slow arrival is only a tight tip breath — a long
   linear fade read as 2–3× too much wash on sparse tokens. Inline, no transform. */
@keyframes og-stream-ink {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.og-stream-ink {
  display: inline;
  animation: og-stream-ink var(--og-duration-stream) var(--og-ease-out) both;
}

/* Stream-end remount fallback when View Transitions are unavailable.
   No blur — blur read as a slow blink on the whole assistant message. */
@keyframes og-markdown-settle {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}
.og-markdown-settle {
  animation: var(--animate-og-markdown-settle);
}

/* Markdown crystallize no longer uses View Transitions — styling `*` faded the
   document root and read as a full-page blink at stream end. Local
   `.og-markdown-settle` on the body is enough. */

/* Entry: opacity only — translateY fought the tip-follow camera and ticked. */
@keyframes og-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Live activity rows: opacity only. translateY stacked with tip stick and
   read as a second one-line tick on every tool/message append. */
@keyframes og-row-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-og-row-enter {
  animation: var(--animate-og-row-enter);
}

/* Live/running indicators breathe; they do not flash. */
@keyframes og-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Streaming caret. */
@keyframes og-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Text shimmer for in-flight labels ("Thinking", "Running tool…"). */
@keyframes og-shimmer {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}

@keyframes og-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Composer voice waveform — calm bar motion when AnalyserNode levels are unavailable. */
@keyframes og-waveform {
  0%,
  100% {
    transform: scaleY(0.28);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.95;
  }
}

/* Metric-history line draw-in. The chart path carries `pathLength={1}`, so the
   dash math is resolution-independent: one full-length dash whose offset animates
   from 1 (hidden) to 0 (drawn). Degrades to a solid line if animations are off. */
@keyframes og-mh-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.og-mh-draw {
  stroke-dasharray: 1;
  animation: og-mh-draw 900ms var(--og-ease-out) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .og-mh-draw {
    animation: none;
    stroke-dasharray: none;
  }
}

/*
 * Legacy shimmer helper for host markup: gradient text the keyframe scrolls
 * through. It repaints every frame; Opengeni's own components use ShimmerText.
 */
.og-shimmer-text {
  background: linear-gradient(
    90deg,
    var(--og-color-fg-subtle) 0%,
    var(--og-color-fg) 50%,
    var(--og-color-fg-subtle) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: og-shimmer 2.2s linear infinite;
}

/* Scoped base for component subtrees (applied by the components themselves). */
.og-root {
  font-family: var(--og-font-sans);
  font-feature-settings: var(--og-font-features);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--og-color-fg);
}

:is(.og-root.og-root, .og-root .og-root)
  :where(
    .text-og-xs,
    .text-og-sm,
    .text-og-base,
    .text-og-md,
    .text-og-control,
    .text-og-menu,
    .text-og-composer,
    .text-og-composer-wide
  ),
:is(
  .og-root.text-og-xs,
  .og-root.text-og-sm,
  .og-root.text-og-base,
  .og-root.text-og-md,
  .og-root.text-og-control,
  .og-root.text-og-menu,
  .og-root.text-og-composer,
  .og-root.text-og-composer-wide
) {
  font-size: var(--og-component-font-size);
  line-height: var(--tw-leading, var(--og-component-line-height));
}

.og-root :where(*) {
  scrollbar-width: thin;
  scrollbar-color: var(--og-color-border-strong) transparent;
}

/* Classic-scrollbar platforms (see markClassicScrollbars): Chromium would draw
   arrow buttons on the thin, colored scrollbar above, so use a slim rounded
   thumb that widens on hover instead. */
@supports selector(::-webkit-scrollbar) {
  :where(:root[data-og-scrollbars="classic"]) .og-root :where(*) {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  :where(:root[data-og-scrollbars="classic"]) .og-root :where(*)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
  }

  :where(:root[data-og-scrollbars="classic"]) .og-root :where(*)::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--og-color-border-strong) padding-box;
  }

  :where(:root[data-og-scrollbars="classic"]) .og-root :where(*)::-webkit-scrollbar-thumb:hover {
    border-width: 2px;
    background-color: var(--og-color-fg-subtle);
  }

  :where(:root[data-og-scrollbars="classic"]) .og-root :where(*)::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* The machine popover stays mounted so its trigger's `aria-controls` always
   resolves. Keep Radix's positioning wrapper measurable while closed, but
   remove the entire fixed layer from painting, hit testing, and the a11y tree.
   Hiding only the content leaves the wrapper able to intercept pointer input. */
[data-radix-popper-content-wrapper]:has(
  > [data-machine-state-popover][data-state="closed"]
) {
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .og-root *,
  .og-root *::before,
  .og-root *::after,
  .og-shimmer-text {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Age-window delays would otherwise hold tip ink invisible (fill: both). */
  .og-root .og-stream-ink {
    animation-delay: 0ms !important;
  }
}

/* A phone footer cannot fit capture chrome beside model, realtime, Pause, and
   Send controls. While voice input owns the microphone, reserve the row for its
   Cancel/Stop actions so unrelated Pause chrome cannot masquerade as Stop. */
@media (max-width: 39.999rem) {
  .og-composer-footer[data-footer-transcription-capturing]
    .og-composer-controls
    > :not([data-transcription-capturing]) {
    display: none;
  }

  .og-composer-footer[data-footer-transcription-capturing] .og-composer-actions {
    display: none;
  }

  /* A saved recording or voice error needs its explanation to be readable:
     give it the controls row (Send stays) instead of an ellipsis. */
  .og-composer-footer[data-footer-transcription-attention]
    .og-composer-controls
    > :not([data-transcription-attention]) {
    display: none;
  }

  /* Host extras (live voice, custom actions) step aside too; Pause/Stop/Send stay. */
  .og-composer-footer[data-footer-transcription-attention]
    .og-composer-actions
    > :not([data-analytics-action]) {
    display: none;
  }

  .og-composer-footer
    [data-transcription-attention]
    :is(.og-transcription-recovered-label, .og-transcription-error-label) {
    max-width: min(15rem, 52vw);
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.2;
  }

  /* A failed live-voice start explains itself in the row until dismissed. */
  .og-composer-footer[data-footer-realtime-attention] .og-composer-controls {
    display: none;
  }

  .og-composer-footer[data-footer-realtime-attention] .og-composer-actions,
  .og-composer-footer[data-footer-realtime-attention] .og-realtime-control,
  .og-composer-footer [data-realtime-attention] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .og-composer-footer[data-footer-realtime-attention]
    .og-composer-actions
    > :not(.og-realtime-control) {
    flex-shrink: 0;
  }

  .og-composer-footer [data-realtime-attention] .og-realtime-failure-label {
    max-width: none;
    -webkit-line-clamp: 3;
  }
}

@media (forced-colors: active) {
  /* Forced-colors can replace a painted background with Canvas while custom
     properties retain their authored dark/light values. That combination is
     dangerous: descendants may resolve a pale dark-theme foreground against a
     light system canvas. Collapse the whole component palette onto guaranteed
     system colors. Meaning in status/diff UI is also carried by text, icons,
     and +/- markers, so it never depends on these colors alone. */
  .og-root {
    --og-color-bg: Canvas;
    --og-color-surface-1: Canvas;
    --og-color-surface-2: Canvas;
    --og-color-surface-3: Canvas;
    --og-color-border: CanvasText;
    --og-color-border-strong: CanvasText;
    --og-color-fg: CanvasText;
    --og-color-fg-muted: CanvasText;
    --og-color-fg-subtle: CanvasText;
    --og-color-accent: CanvasText;
    --og-color-accent-strong: CanvasText;
    --og-color-accent-deep: CanvasText;
    --og-color-accent-fg: CanvasText;
    --og-color-accent-soft: Canvas;
    --og-color-status-queued: CanvasText;
    --og-color-status-running: CanvasText;
    --og-color-status-idle: CanvasText;
    --og-color-status-waiting: CanvasText;
    --og-color-status-failed: CanvasText;
    --og-color-status-cancelled: CanvasText;
    --og-color-danger: CanvasText;
    --og-color-diff-add-bg: Canvas;
    --og-color-diff-del-bg: Canvas;
    --og-shadow-sm: none;
    --og-shadow-md: none;
    --og-shadow-lg: none;
    --og-shadow-glow: none;
  }

  /* Selected fills are flattened by the OS palette. Preserve a visible,
     non-color-only tab selection affordance in every high-contrast theme. */
  .og-root [role="tab"][aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* ----------------------------------------------------------------------------
   xterm.js hardening (SandboxTerminal)

   xterm 6's DOM renderer measures glyph widths by stamping a scratch element
   (`.xterm-width-cache-measure-container`) full of repeated characters
   (`]]]]bbbb yyyy…`). The shipped xterm.css hides the older
   `.xterm-char-measure-element` but NOT this newer container, so on first paint
   it leaks a row of garbage glyphs across the top of the terminal. Clip every
   xterm measurement scratch element off-screen so the transcript is the only
   thing visible.
   -------------------------------------------------------------------------- */
.xterm .xterm-width-cache-measure-container,
.xterm-width-cache-measure-container,
.xterm .xterm-char-measure-element {
  position: absolute !important;
  top: 0;
  left: 0;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* The upstream ThinkingOrb owns motion, visibility pausing, and reduced motion. */
/* CodeMirror (SDK code editor). The stock light and one-dark themes bring
   their own chrome (one-dark is blue-grey with a blue cursor); pin the ground,
   gutters, cursor, active line and selection to the og palette. Syntax colors
   stay with the theme. */
.og-cm-editor .cm-editor { background-color: var(--og-cm-bg, var(--og-color-bg)); color: var(--og-color-fg); }
.og-cm-editor .cm-editor .cm-gutters { background-color: var(--og-cm-bg, var(--og-color-bg)); border-right-color: var(--og-color-border); color: var(--og-color-fg-subtle); }
.og-cm-editor .cm-editor .cm-activeLine { background-color: color-mix(in srgb, var(--og-color-fg) 4%, transparent); }
.og-cm-editor .cm-editor .cm-activeLineGutter { background-color: color-mix(in srgb, var(--og-color-fg) 6%, transparent); color: var(--og-color-fg-muted); }
.og-cm-editor .cm-editor .cm-cursor,
.og-cm-editor .cm-editor .cm-dropCursor { border-left-color: var(--og-color-fg); }
.og-cm-editor .cm-editor .cm-selectionLayer .cm-selectionBackground,
.og-cm-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background-color: color-mix(in srgb, var(--og-color-accent) 30%, transparent); }
.og-cm-editor .cm-editor .cm-selectionMatch { background-color: color-mix(in srgb, var(--og-color-accent) 18%, transparent); }
.og-cm-editor .cm-editor .cm-panels { background-color: var(--og-color-surface-2); color: var(--og-color-fg); }

.og-genie-loading { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 12px 0; }
.og-genie-orb { width: 64px; height: 64px; flex: 0 0 64px; }
.og-genie-orb canvas { display: block; }
.og-genie-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.og-genie-phrase { color: var(--og-color-fg-muted); font-size: var(--og-font-size-sm); line-height: 1.5; animation: og-genie-phrase-in .65s ease-out both; }
.og-genie-details { color: var(--og-color-fg-subtle); font-size: var(--og-font-size-xs); min-height: 28px; cursor: pointer; border-radius: 4px; text-align: left; transition: color .2s; }
.og-genie-details:hover { color: var(--og-color-fg); }
.og-genie-details:focus-visible { outline: 2px solid color-mix(in srgb, var(--og-color-accent) 55%, transparent); outline-offset: 4px; }
@keyframes og-genie-phrase-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (pointer: coarse) { .og-genie-details { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .og-genie-phrase { animation: none; }
}

/* A single softly lit reel: motion stays inside the header's fixed footprint. */
.og-rolling-status { display:flex; align-items:center; gap:12px; min-width:0; width:100%; }
.og-rolling-window { position:relative; display:block; flex:1; min-width:0; height:24px; overflow:hidden;  }
.og-rolling-face { position:absolute; inset:0; display:flex; align-items:center;  }
.og-rolling-label { display:flex; align-items:center; gap:8px; min-width:0; width:100%; font-size:13px; font-weight:450; line-height:20px; color:var(--og-color-fg-muted); }
.og-rolling-label > svg { flex-shrink:0; }
.og-rolling-count { flex-shrink:0; font-size:11px; color:var(--og-color-fg-subtle); font-variant-numeric:tabular-nums; }

/* The complete text line rolls as one surface, without moving its layout box. */
.og-command-reel { display:flex; flex:1; align-items:center; gap:8px; min-width:0; transform-origin:50% 50%; }
/* Render reasoning Markdown as one clipped preview; full formatting lives inside. */
.og-reasoning-preview,
.og-reasoning-preview :is(div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre) {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.og-reasoning-preview br { display: none; }
.og-reasoning-preview :is(p,li,h1,h2,h3,h4)::after { content: " "; }

/* Details consume leftover width; they never push the activity name away. */
.og-reel-title { flex:0 0 auto; min-width:0; max-width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.og-reel-title:only-child { max-width:100%; }
.og-reel-preview { flex:1 1 0%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/*
 * In-flight shimmer (ShimmerText). The text is drawn in a muted tone; an
 * aria-hidden copy in the bright tone sits in a soft-edged masked window. The
 * window slides right while the copy slides left by the same distance, so the
 * band moves and the letters stay put. Only transforms animate: the compositor
 * runs it without repainting text on the main thread every frame.
 */
:where(.og-shimmer) { display:inline-block; }
.og-shimmer {
  --_og-shimmer-base: var(--og-color-fg-subtle);
  --_og-shimmer-peak: var(--og-color-fg);
  --_og-shimmer-band: transparent 0%, #000 50%, transparent 100%;
  --_og-shimmer-duration: 1.1s;
  position:relative;
  overflow:clip;
}
/* Activity rows: the narrower, slower beam across the whole text line. */
.og-shimmer[data-og-shimmer-tone="reel"] {
  --_og-shimmer-base: light-dark(#8a8a8a,#6b6b6b);
  --_og-shimmer-peak: light-dark(#f2f2f2,#fff);
  --_og-shimmer-band: transparent 26%, #000 50%, transparent 74%;
  --_og-shimmer-duration: 3.6s;
}
.og-shimmer-beam {
  position:absolute;
  inset:0;
  display:none;
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:linear-gradient(90deg, var(--_og-shimmer-band));
  mask-image:linear-gradient(90deg, var(--_og-shimmer-band));
  animation:og-shimmer-window var(--_og-shimmer-duration) linear infinite;
}
.og-shimmer-copy,
.og-shimmer-beam[data-og-shimmer-copy]::before {
  position:absolute;
  inset:0;
  -webkit-text-fill-color:var(--_og-shimmer-peak);
  animation:og-shimmer-copy var(--_og-shimmer-duration) linear infinite;
}
/* A plain-string label's copy: the same text and padding, drawn by the beam. */
.og-shimmer-beam[data-og-shimmer-copy] { padding:inherit; }
.og-shimmer-beam[data-og-shimmer-copy]::before {
  content:attr(data-og-shimmer-copy);
  padding:inherit;
}
.og-shimmer[data-og-shimmer="on"],
.og-rolling-status[data-running="true"] .og-shimmer[data-og-shimmer="ancestor"] {
  -webkit-text-fill-color:var(--_og-shimmer-base);
}
.og-shimmer[data-og-shimmer="on"] > .og-shimmer-beam,
.og-rolling-status[data-running="true"] .og-shimmer[data-og-shimmer="ancestor"] > .og-shimmer-beam {
  display:block;
}
@keyframes og-shimmer-window {
  from { transform:translateX(-100%); }
  to { transform:translateX(100%); }
}
@keyframes og-shimmer-copy {
  from { transform:translateX(100%); }
  to { transform:translateX(-100%); }
}
@media (prefers-reduced-motion:reduce), (forced-colors:active) {
  .og-shimmer[data-og-shimmer="on"],
  .og-rolling-status[data-running="true"] .og-shimmer[data-og-shimmer="ancestor"] {
    -webkit-text-fill-color:currentColor;
  }
  .og-shimmer .og-shimmer-beam { display:none !important; }
}