@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/styles/index.css

@@ -16,6 +16,100 @@
 
 @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;
+  }
+  .og-root,
+  .og-root :where(*, ::before, ::after) {
+    box-sizing: border-box;
+  }
+}
 
 @theme inline {
   --font-og-sans: var(--og-font-sans);
@@ -50,12 +144,16 @@
   --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);
 
@@ -65,6 +163,13 @@
   --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);
@@ -72,14 +177,20 @@
   --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);
@@ -98,25 +209,27 @@
   --color-foreground: var(--color-fg);
   --color-card: var(--color-surface);
   --color-card-foreground: var(--color-fg);
-  --color-popover: var(--color-surface-3);
+  --color-popover: var(--color-surface);
   --color-popover-foreground: var(--color-fg);
-  --color-primary: var(--color-brand-strong);
-  --color-primary-foreground: var(--color-brand-fg);
-  --color-secondary: var(--color-surface-2);
-  --color-secondary-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: color-mix(in oklch, var(--og-color-danger) 70%, black);
-  --color-destructive-foreground: var(--og-color-accent-fg);
+  --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(--color-brand-strong);
-  --color-sidebar-primary-foreground: var(--color-brand-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);
@@ -209,6 +322,34 @@
   --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.
 
@@ -448,6 +589,37 @@
   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.
@@ -488,6 +660,55 @@
   .og-composer-footer:has([data-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:has([data-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:has([data-transcription-attention])
+    .og-composer-actions
+    > :not(:is([data-analytics-action], :has([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:has([data-realtime-attention]) .og-composer-controls {
+    display: none;
+  }
+
+  .og-composer-footer:has([data-realtime-attention]) .og-composer-actions,
+  .og-composer-footer .og-realtime-control:has([data-realtime-attention]),
+  .og-composer-footer [data-realtime-attention] {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .og-composer-footer:has([data-realtime-attention])
+    .og-composer-actions
+    > :not(:has([data-realtime-attention])) {
+    flex-shrink: 0;
+  }
+
+  .og-composer-footer [data-realtime-attention] .og-realtime-failure-label {
+    max-width: none;
+    -webkit-line-clamp: 3;
+  }
 }
 
 @media (forced-colors: active) {
@@ -556,3 +777,82 @@
   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; }
+
+/* Focused beam: one shared light source clipped to the entire text row. */
+.og-command-reel-running,
+.og-rolling-status[data-running="true"] .og-command-reel {
+  background-image:linear-gradient(90deg, light-dark(#8a8a8a,#6b6b6b) 42%, light-dark(#f2f2f2,#fff) 50%, light-dark(#8a8a8a,#6b6b6b) 58%);
+  background-size:300% 100%;
+  background-position:100% 0;
+  background-clip:text;
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  animation:og-activity-sweep 3.6s linear infinite;
+}
+@keyframes og-activity-sweep {
+  from { background-position:100% 0; }
+  to { background-position:0% 0; }
+}
+@media (prefers-reduced-motion:reduce), (forced-colors:active) {
+ .og-command-reel-running,
+ .og-rolling-status[data-running="true"] .og-command-reel {
+   animation:none; background:none; -webkit-text-fill-color:currentColor;
+ }
+}

package/styles/responsive.css

@@ -14,11 +14,12 @@
   --_og-c-model-max: 16rem;
   --_og-c-model-x: 0.625rem;
   --_og-c-native-max: 180px;
-  --_og-c-recovered-max: 11rem;
-  --_og-c-error-max: 10rem;
+  --_og-c-recovered-max: 14rem;
+  --_og-c-error-max: 14rem;
   --og-model-policy-label-full-display: inline;
   --og-model-policy-label-short-display: none;
   --og-model-policy-effort-display: inline;
+  --og-model-policy-chevron-display: inline;
 }
 
 [data-og-responsive-basis="container"] .og-composer-input {
@@ -69,6 +70,10 @@
   display: var(--og-model-policy-effort-display);
 }
 
+[data-og-responsive-basis="container"] .og-model-policy-chevron {
+  display: var(--og-model-policy-chevron-display);
+}
+
 [data-og-responsive-basis="container"] .og-model-picker-native {
   max-width: var(--_og-c-native-max);
 }
@@ -112,19 +117,23 @@
 
 @container og-composer (max-width: 39.999rem) {
   [data-og-responsive-basis="container"] :where(*) {
-    --_og-c-gap: 0.25rem;
+    /* The phone row carries attach, dictate, model, voice, Pause and Send;
+       44px targets space themselves, so tight gaps and a chevron-free model
+       pill leave room for the model's short name. */
+    --_og-c-gap: 0.125rem;
     --_og-c-footer-x: 0.5rem;
     --_og-c-footer-b: 0.5rem;
     --_og-c-controls-wrap: nowrap;
     --_og-c-hint-display: none;
     --_og-c-model-max: 7.5rem;
-    --_og-c-model-x: 0.5rem;
+    --_og-c-model-x: 0.375rem;
     --_og-c-native-max: 7.5rem;
-    --_og-c-recovered-max: 7rem;
-    --_og-c-error-max: 6rem;
+    --_og-c-recovered-max: 8rem;
+    --_og-c-error-max: 8rem;
     --og-model-policy-label-full-display: none;
     --og-model-policy-label-short-display: inline;
     --og-model-policy-effort-display: none;
+    --og-model-policy-chevron-display: none;
   }
 
   [data-og-responsive-basis="container"] .og-composer-footer {
@@ -160,6 +169,63 @@
     .og-composer-actions {
     display: none;
   }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-transcription-attention])
+    .og-composer-controls
+    > :not([data-transcription-attention]) {
+    display: none;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-transcription-attention])
+    .og-composer-actions
+    > :not(:is([data-analytics-action], :has([data-analytics-action]))) {
+    display: none;
+  }
+
+  [data-og-responsive-basis="container"]
+    [data-transcription-attention]
+    :is(.og-transcription-recovered-label, .og-transcription-error-label) {
+    max-width: 15rem;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-height: 1.2;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-realtime-attention])
+    .og-composer-controls {
+    display: none;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-realtime-attention])
+    .og-composer-actions,
+  [data-og-responsive-basis="container"]
+    .og-composer-footer
+    .og-realtime-control:has([data-realtime-attention]),
+  [data-og-responsive-basis="container"] .og-composer-footer [data-realtime-attention] {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer:has([data-realtime-attention])
+    .og-composer-actions
+    > :not(:has([data-realtime-attention])) {
+    flex-shrink: 0;
+  }
+
+  [data-og-responsive-basis="container"]
+    .og-composer-footer
+    [data-realtime-attention]
+    .og-realtime-failure-label {
+    max-width: none;
+    -webkit-line-clamp: 3;
+  }
 }
 
 @container og-composer (max-width: 24.999rem) {
@@ -192,7 +258,7 @@
   width: min(
     var(--og-model-picker-menu-width),
     calc(var(--og-portal-source-inline-size, 100vw) - 1rem),
-    var(--radix-dropdown-menu-content-available-width, 100vw)
+    var(--radix-popover-content-available-width, 100vw)
   );
   max-width: calc(100vw - 1rem);
 }
@@ -206,3 +272,29 @@
   );
   max-width: calc(100vw - 1rem);
 }
+
+/* OpenGeniChat: the chat list is a sidebar when the component is wide and a
+   drawer behind a menu button when it is narrow. Container-based so it adapts
+   inside host panels, not only to the viewport. */
+.og-chat {
+  container: og-chat / inline-size;
+}
+
+.og-chat .og-chat-sidebar {
+  display: none;
+}
+
+.og-chat .og-chat-menu {
+  display: flex;
+}
+
+@container og-chat (min-width: 44rem) {
+  .og-chat .og-chat-sidebar {
+    display: flex;
+  }
+
+  .og-chat .og-chat-menu,
+  .og-chat .og-chat-drawer {
+    display: none;
+  }
+}

package/styles/session-capability.css

@@ -0,0 +1,44 @@
+.og-session-capability { width:100%; max-width:540px; color:var(--og-color-fg); font-family:var(--og-font-sans,inherit); }
+.og-session-capability-shell { border:1px solid var(--og-color-border); border-radius:12px; background:var(--og-color-surface-1); overflow:hidden; }
+.og-session-capability-header { display:flex; align-items:center; gap:12px; padding:18px 19px 12px; }
+.og-session-capability-logo { display:flex; align-items:center; justify-content:center; width:41px; height:41px; flex-shrink:0; border:1px solid var(--og-color-border); border-radius:10px; background:var(--og-color-surface-2); font-size:13px; font-weight:600; overflow:hidden; }
+.og-session-capability-logo img { width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
+.og-session-capability-identity { flex:1; min-width:0; display:grid; gap:4px; overflow-wrap:anywhere; }
+.og-session-capability-identity h3 { margin:0; font-size:14px; font-weight:600; }
+.og-session-capability-identity span { font-size:11px; color:var(--og-color-fg-muted); }
+.og-session-capability-type { flex-shrink:0; padding:4px 7px; border-radius:5px; background:var(--og-color-surface-2); font-size:10px; }
+.og-session-capability-copy { margin:0; padding:0 19px 12px; font-size:12px; line-height:1.7; color:var(--og-color-fg-muted); overflow-wrap:anywhere; }
+.og-session-capability-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:0 19px 14px; }
+.og-session-capability-actions > span { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--og-color-fg-muted); }
+.og-session-capability-actions button { margin-left:auto; min-height:35px; padding:8px 13px; border-radius:7px; border:1px solid var(--og-color-primary-border); color:var(--og-color-primary-fg); background:var(--og-color-primary); font:inherit; font-size:12px; cursor:pointer; }
+.og-session-capability-note { margin:10px 0 0; font-size:10px; line-height:1.6; color:var(--og-color-fg-muted); }
+.og-session-capability :focus-visible, .og-session-capability-dialog :focus-visible { outline:2px solid var(--og-color-accent); outline-offset:3px; }
+.og-session-capability-overlay { position:fixed; inset:0; z-index:1000; background:rgb(0 0 0 / .4); }
+.og-session-capability-dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001; width:min(42rem,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--og-color-border); border-radius:16px; background:var(--og-color-surface-1); color:var(--og-color-fg); font-family:var(--og-font-sans,inherit); box-shadow:0 16px 48px rgb(0 0 0 / .2); }
+.og-session-capability-dialog-header { display:flex; align-items:center; gap:12px; padding:24px; border-bottom:1px solid var(--og-color-border); }
+.og-session-capability-dialog-header > div { flex:1; min-width:0; }
+.og-session-capability-dialog-header h2 { margin:0; font-size:20px; font-weight:600; overflow-wrap:anywhere; }
+.og-session-capability-dialog-header p { margin:4px 0 0; color:var(--og-color-fg-muted); font-size:12px; }
+.og-session-capability-dialog-header > button { border:0; background:transparent; color:inherit; padding:8px; cursor:pointer; }
+.og-session-capability-dialog-body { min-height:0; overflow-y:auto; }
+.og-session-capability-dialog:has(.og-session-capability-setup) { width:min(32rem,calc(100vw - 32px)); }
+.og-session-capability-setup { padding:24px; display:grid; gap:16px; font-size:13px; }
+.og-session-capability-setup > p { margin:0; line-height:1.6; }
+.og-session-capability-setup label { display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
+.og-session-capability-setup button { font:inherit; padding:9px 12px; border-radius:7px; border:1px solid var(--og-color-border); background:var(--og-color-surface-2); color:inherit; cursor:pointer; }
+.og-session-capability-setup button:disabled { opacity:.55; cursor:not-allowed; }
+.og-session-capability-setup [role=alert] { color:var(--og-color-danger); }
+.og-session-capability-setup .og-session-capability-notice { color:var(--og-color-fg-muted); }
+.og-session-capability-shell[data-state="complete"] { border-color:color-mix(in srgb,var(--og-color-status-idle) 35%,var(--og-color-border)); }
+.og-session-capability-shell[data-state="complete"] .og-session-capability-header > svg,
+.og-session-capability-shell[data-state="complete"] .og-session-capability-copy { color:var(--og-color-status-idle); }
+.og-session-capability-shell[data-state="complete"] .og-session-capability-copy { font-weight:500; }
+.og-session-capability-setup fieldset { display:grid; gap:10px; margin:0; padding:0; border:0; min-width:0; }
+.og-session-capability-setup legend { padding:0 0 10px; font-weight:600; }
+.og-session-capability-setup input { margin-top:4px; accent-color:var(--og-color-accent-deep); }
+.og-session-capability-setup .og-session-capability-scope { color:var(--og-color-fg-muted); font-size:12px; }
+.og-session-capability-setup .og-session-capability-primary { justify-self:end; min-height:40px; padding:10px 16px; border:1px solid var(--og-color-primary-border); background:var(--og-color-primary); color:var(--og-color-primary-fg); font-weight:500; }
+.og-session-capability-setup .og-session-capability-primary:hover:not(:disabled) { filter:brightness(.94); }
+.og-session-capability-progress { color:var(--og-color-fg-muted); padding-block:8px; }
+.og-session-capability-setup .og-session-capability-stop { justify-self:end; }
+@media (pointer:coarse) { .og-session-capability-actions button,.og-session-capability-setup button { min-height:44px; } }