@vanillaskyai/video 0.10.19 → 0.10.21

package/dist/server.js

@@ -873,6 +873,27 @@ function createVideoHandler(options) {
   });
 }
 
+// src/server/chat-visual-direction.ts
+var defaults = {
+  explanation: "illustrated",
+  practical: "realistic",
+  story: "cinematic",
+  comedy: "cinematic",
+  imagination: "cinematic"
+};
+var bibles = {
+  illustrated: "Illustrated visual language: clear shaped forms, restrained texture and a coherent limited palette. Use readable spatial relationships, cutaways and purposeful motion to reveal the idea. Keep the same design of subjects and materials across shots.",
+  realistic: "Realistic visual language: natural light, credible materials, consistent colour and true physical proportions. Use unobstructed framing and meaningful close views so actions and results are easy to observe. Keep subjects, equipment and setting consistent.",
+  cinematic: "Cinematic visual language: intentional lighting, coherent colour and tactile detail. Use purposeful changes of shot scale and viewpoint, with clear action, consequence and a readable final frame. Preserve character appearance and the established world across cuts."
+};
+function compileVisualDirection(brief, callerLook) {
+  const intent = typeof brief.intent === "string" && Object.hasOwn(defaults, brief.intent) ? brief.intent : "explanation";
+  const visualStyle = typeof brief.visualStyle === "string" && Object.hasOwn(bibles, brief.visualStyle) ? brief.visualStyle : defaults[intent];
+  const visualDirection = typeof brief.visualDirection === "string" && brief.visualDirection.trim().length <= 600 ? brief.visualDirection.trim() : "";
+  const explicit = typeof callerLook === "string" && callerLook.trim().length <= 1e3 ? callerLook.trim() : "";
+  return { intent, visualStyle, visualDirection, generatedLook: explicit || bibles[visualStyle] };
+}
+
 // src/server/opening-continuity.ts
 function continueAfterOpening(narration, earlier) {
   const words = (value) => Array.from(value.matchAll(/[\p{L}\p{N}]+(?:['’][\p{L}\p{N}]+)*/gu));
@@ -960,6 +981,7 @@ function recoverFirstBrief(part, clipDurationSec) {
   if (!ending || !bounded(ending.narration, 2e3) || !bounded(ending.subject, 80, true) || !bounded(ending.action, 600, true) || Object.hasOwn(ending, "title") && !bounded(ending.title, 65) || typeof ending.durationSec !== "number" || !Number.isFinite(ending.durationSec) || ending.continuity !== "cut" && ending.continuity !== "continue") return;
   const subject = text(part.subject, 80);
   return {
+    ...compileVisualDirection(part),
     opening: text(part.opening, 300),
     subject,
     development: text(part.development, 2e3),
@@ -978,12 +1000,14 @@ function replaceStream(source, textStream) {
 function createChatShotPlanner(options) {
   const clipDurationSec = options.generatedClipDurationSec ?? 5;
   const incomplete = /* @__PURE__ */ new WeakSet();
+  const generatedLooks = /* @__PURE__ */ new WeakMap();
   const planner = createTextDeltaVideoPlanner({
     includeRawProviderData: options.includeRawProviderData,
     streamText(context) {
       const providerContext = { ...context, userPrompt: [
         `Create a complete answer within ${context.request.input.maxDurationSec ?? 40} seconds. Each generated clip has at most ${clipDurationSec} seconds; give each spoken beat room to finish.`,
         `Orientation: ${context.request.input.orientation ?? "landscape"}.`,
+        ...context.request.input.style?.generatedLook ? [`CALLER VISUAL DIRECTION (takes precedence over automatic style): ${context.request.input.style.generatedLook}`, "Preserve this requested visual language. The brief visualDirection must contain compatible subjects, setting and palette, never a contradictory rendering style."] : [],
         "USER REQUEST AND CONVERSATION",
         context.request.input.input
       ].join("\n") };
@@ -1005,6 +1029,10 @@ function createChatShotPlanner(options) {
           const error = cause instanceof Error ? cause : new Error(String(cause));
           if (!getGenerationLifecycleSink(context)?.rejectPart?.(error)) throw error;
         };
+        const acceptDirection = (value) => {
+          const direction = compileVisualDirection(value, context.request.input.style?.generatedLook);
+          generatedLooks.set(context, direction.generatedLook);
+        };
         const scenePart = (shot, closer = false) => {
           let narration = shot.narration;
           if (firstBody && !closer) narration = continueAfterOpening(narration, [options.openingLine ?? brief?.opening ?? ""]);
@@ -1032,12 +1060,14 @@ function createChatShotPlanner(options) {
           const recovered = firstRecord && !brief && index === 0 ? recoverFirstBrief(part, clipDurationSec) : void 0;
           if (recovered) {
             brief = recovered;
+            acceptDirection(brief);
             options.publishOpening({ line: brief.opening, keyword: brief.subject });
             return;
           }
           if (part?.type === "answer") {
             if (brief) throw new Error("Chat answer brief was emitted more than once");
-            brief = { opening: text(part.opening, 300), subject: text(part.subject, 80), visualDirection: text(part.visualDirection, 600), development: text(part.development, 2e3) };
+            brief = { ...compileVisualDirection(part), opening: text(part.opening, 300), subject: text(part.subject, 80), visualDirection: text(part.visualDirection, 600), development: text(part.development, 2e3) };
+            acceptDirection(brief);
             if (part.ending) {
               try {
                 brief.ending = readShot(part.ending, clipDurationSec, brief.subject);
@@ -1144,7 +1174,7 @@ function createChatShotPlanner(options) {
   });
   return async function* (context) {
     let completed = false;
-    for await (const part of resolveShots(planner(context), context, options)) {
+    for await (const part of resolveShots(planner(context), context, options, () => options.mode === "pexels" ? context.request.input.style?.generatedLook : generatedLooks.get(context))) {
       if (part.type === "plan.complete") completed = true;
       yield part;
     }
@@ -1154,7 +1184,7 @@ function createChatShotPlanner(options) {
     }
   };
 }
-async function* resolveShots(parts, context, options) {
+async function* resolveShots(parts, context, options, generatedLook) {
   const queue = [];
   const iterator = parts[Symbol.asyncIterator]();
   const limit = Number.isFinite(options.mediaConcurrency) ? Math.min(5, Math.max(1, Math.floor(options.mediaConcurrency))) : 1;
@@ -1171,7 +1201,7 @@ async function* resolveShots(parts, context, options) {
       scene: part.scene,
       templateId: "cinemaMedia",
       preferredType: "video",
-      generatedLook: context.request.input.style?.generatedLook,
+      generatedLook: generatedLook() ?? context.request.input.style?.generatedLook,
       signal: context.signal
     });
     context.signal.throwIfAborted();
@@ -1229,7 +1259,7 @@ function createVideoChatResponseInstructions(generatedVideoAvailable, openingAlr
   return [
     'Use the exact record type "answer" for the first brief and "shot" for developing beats. Output JSON records only, with no prose outside them, including when explaining a limitation.',
     "Write a complete, intentful video answer as newline-delimited JSON. Match the user's form and tone; mixed intents can combine directions.",
-    `First write one brief: {"type":"answer","intent":"explanation|story|comedy|imagination|practical","opening":"one useful spoken line of 4\u20137 ordinary words","subject":"literal visual subject","development":"the essential development of this answer","visualDirection":"consistent subjects, appearance and visual approach","ending":{"title":"short meaningful chapter title, at most 65 characters","narration":"the authored payoff","subject":"literal subject","action":"visible action or change","durationSec":${clipDurationSec},"continuity":"cut|continue"}}.`,
+    `First write one brief: {"type":"answer","intent":"explanation|story|comedy|imagination|practical","visualStyle":"illustrated|realistic|cinematic","opening":"one useful spoken line of 4\u20137 ordinary words","subject":"literal visual subject","development":"the essential development of this answer","visualDirection":"consistent subjects, appearance and visual approach","ending":{"title":"short meaningful chapter title, at most 65 characters","narration":"the authored payoff","subject":"literal subject","action":"visible action or change","durationSec":${clipDurationSec},"continuity":"cut|continue"}}.`,
     "The opening should take roughly 2\u20133 seconds at a natural pace: give the core answer, a useful starting cue, or the story's immediate situation. No greeting, topic announcement, promise to explain, or description of loading. Never compress away an essential qualifier just to hit the word target.",
     `Then stream each developing shot on its own line: {"type":"shot","title":"short meaningful chapter title, at most 65 characters","narration":"the exact spoken beat","subject":"2\u20138 literal filmable words, at most 80 characters","action":"concrete subject, action or visible change and useful framing","durationSec":${clipDurationSec},"continuity":"cut|continue"}.`,
     `The selected footage mode is ${mode === "pexels" ? "Pexels stock search: use literal filmable subjects; never imply stock proves a mechanism or depicts fictional events exactly" : `AI video, with at most ${generatedVideoAvailable ? maxGeneratedVideos : 0} generation attempts`}. Missing footage becomes the authored chapter title, with complete narration. Never truncate already-authored narration when footage fails. The host selects providers; do not make source choices.`,
@@ -1237,6 +1267,8 @@ function createVideoChatResponseInstructions(generatedVideoAvailable, openingAlr
     ...mode === "pexels" ? ["Stock queries must retain the essential subject, activity and distinguishing equipment in the shot's subject field, within its word limit. That field alone is the search query; action and visualDirection do not refine it. Prefer common observable actions with usable framing. Do not replace the required actor or activity with scenery, a different sport or a loosely related setting. Preserve fictional or comic narration, but do not depend on stock showing an exact invented expression or sequence; choose an illustrative action that supports the beat."] : [],
     ...mode === "pexels" ? ["Choose a separate stock subject for each beat, describing footage that can realistically exist in a stock library. For historical, abstract or unseen events, use relevant present-day evidence, objects, environments or analogous visible processes as clearly illustrative support. Do not require literal footage of events or subjects that cannot realistically be filmed. Keep the causal explanation in narration; do not claim illustrative footage records the historical event or proves the mechanism. Make stockSelection describe the chosen visible subject, not the overall topic. Do not use illustrative freedom to replace a required practical action, person, sport or distinguishing equipment with unrelated scenery."] : [],
     ...mode === "pexels" ? ['Include stockSelection on every shot and the saved ending when the essential subject is known: "stockSelection":{"subject":"essential actor or object category","activity":"optional literal activity","equipment":"optional distinguishing equipment","exclude":["optional contradictory subject or activity"]}. Each phrase must be 1\u20134 words and at most 48 characters; exclude has at most 3 phrases. The essential subject is separate from the setting: do not use scenery, mood, camera framing or incidental appearance as the actor. Keep the search query broad enough to find footage; the optional hint helps select results without substituting a different actor or task. Use exclusions only for actual contradictions, not every detail absent from the story. Omit unknown fields or the whole hint rather than inventing an anchor. This is selection guidance, not verification that footage depicts the exact narration.'] : [],
+    "Choose one of the five intents and one visualStyle in the first brief. Default explanation to illustrated, practical to realistic, and story, comedy or imagination to cinematic. An explicit visual-style request can choose any of the three. Put its specific medium, palette, character appearance and setting in visualDirection; keep those details consistent through the ending. A supplied caller visual direction takes precedence over these defaults and must not be contradicted.",
+    "The visualStyle names describe generated footage only. Stock mode selects existing literal footage; it cannot redraw or restyle that footage.",
     "Keep development to one concise sentence and visualDirection to the few details needed for consistency. Emit the complete brief, then the first developing shot immediately when developing shots are needed and allowed by the budget; otherwise end after the brief. Continue the same stream without an outline, recap or second planning pass. The saved ending must still contain the complete payoff before the brief is emitted.",
     "For a very short answer whose ending alone fulfills the request, development may be empty and no developing shots are needed. Otherwise, develop the essential content before the ending.",
     "The brief's ending is saved and played after your developing shots. Do not repeat it as a shot. Stop writing after the last developing shot. No technical events, identifiers, template choices, media providers, URLs or unlisted fields.",

package/docs/media-and-audio.md

@@ -19,8 +19,8 @@ The chapter retains narration and subtitles for the whole beat.
 
 The starter performs bounded full-catalog Pexels video search with subject
 matching, orientation-aware renditions and a bounded cache. Add `PEXELS_API_KEY`
-on the server and choose Pexels in Settings. The SDK UI links to Pexels; custom
-interfaces must also display the attribution required by their media provider.
+on the server and choose Pexels in Settings. The default header has no Pexels
+link; the application owns any attribution required by its media provider.
 
 Applications can replace `searchMedia` with their own licensed catalog:
 
@@ -50,9 +50,43 @@ default chat displays an authored chapter while retaining the spoken answer. An
 validation, and fallback contracts.
 
 For Pexels, keep `PEXELS_API_KEY` on the server, enforce a deadline, filter for
-orientation, and return only validated Pexels asset domains. Licensing,
+suitable renditions, and return only validated Pexels asset domains. Licensing,
 attribution, caching, MIME checks, and byte limits remain application-owned.
 
+## Automatic visual direction
+
+Default chat uses the existing answer brief to choose the requested form:
+explanation (including comparisons), practical instruction, story, comedy, or
+imagination. These shape the content and pacing; they do not change knowledge
+rules or provider allowances.
+
+The same brief selects one of three generated-video treatments:
+
+- **Illustrated:** clear drawn forms, consistent materials and a restrained palette;
+  the default for explanations.
+- **Realistic:** believable lighting, proportions and movement with useful framing;
+  the default for practical instruction.
+- **Cinematic:** deliberate composition, lighting and motivated camera movement;
+  the default for stories, comedy and imagined worlds.
+
+An explicit style request in the prompt takes priority over the default. The
+planner carries its response-specific subjects, palette and setting in the
+brief's visual direction. Every body shot and ending receives the same selected
+base treatment through `generatedLook`, alongside its individual `shotDirection`.
+Adapters must pass both to their video provider. An explicit
+`style.generatedLook` replaces the automatic base treatment.
+
+There is no separate classification call or image-generation stage. Selecting a
+look does not guarantee that independently generated clips preserve character
+identity. Evaluate actual footage for subject consistency, useful action,
+narration fit and completion; mocked responses only verify the integration.
+
+Pexels retains literal footage queries; these instructions cannot restyle stock
+assets. The opening chapter keeps its existing appearance. Automatic direction
+is generation-time guidance, not a new persisted style field; saved media keeps
+its rendered appearance and existing caller-supplied style persistence is
+unchanged. Custom template planning keeps its existing behavior.
+
 ## Generated shots
 
 Add `generateVideo` to enable generated shots within cinematic responses. It receives the planned visual

package/docs/reference/protocol.md

@@ -116,3 +116,13 @@ Grouped playback requires prepared speech with `supportsOffsets: true`. The gene
 For standalone playback, provide a synchronous `narrationReady` callback alongside your `onSceneChange` narration handler. Return false while a new grouped paragraph awaits actual audio onset, then true from the voice's `onStart` callback; also release readiness on completion, failure, or interruption. Abort pending narration from the player's `onError` handler. `VideoChat` wires this automatically through its internal narration hook. For grouped paragraphs, the voice must invoke `onStart` when audio actually begins, not when audio is prepared or `play()` is requested. The first visual cue starts narration, then the playhead waits for that onset without pausing the voice. A missing onset stops the player with an error after eight seconds of active waiting. For prepared audio, also provide `narrationTime(scene)` using the active voice's optional `getCurrentTime()`: return paragraph-relative seconds (including the seek offset) for a group, or scene-relative seconds otherwise. This makes the actual audio clock authoritative through cold-start delays and mid-speech stalls. Return `undefined` for silent scenes or unavailable clocks; after ordinary narration completes, release to wall time so the authored reading hold can finish. `VideoChat` coordinates these callbacks automatically. A clock that stops advancing for eight active seconds produces an error; visual-readiness holds and deliberate pauses do not consume that timeout. Voices without an observable playback clock retain wall-time playback.
 
 Readiness holds pause narration together with the picture. The same audio continues across adjacent group scenes; replay starts a new playback session. This preserves words through delayed media rather than promising uninterrupted playback on every network.
+
+### Host-resolved chat footage mode
+
+A chat host that changes the requested footage mode before planning may return
+`x-vanillasky-resolved-video-mode: pexels` or `cinematic` on a successful SSE
+response. The default chat client records that mode for the active turn and its
+playback metrics. Unknown values are ignored. Authorization, allowance checks
+and provider selection remain host-owned; the header never grants access or
+changes a spending limit. A mixed response that changes footage source partway
+through retains its initially resolved mode.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.10.19",
+  "version": "0.10.21",
   "description": "Open-source voice-and-video chat SDK for AI applications.",
   "keywords": [
     "video-chat",

package/starters/video-chat/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vanillaskyai/video": "0.10.19",
+    "@vanillaskyai/video": "0.10.21",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "@ai-sdk/anthropic": "^3.0.0",

package/starters/video-chat/stock.ts

@@ -53,53 +53,59 @@ export async function findStockFootage(query: string, orientation: VideoOrientat
   const normalized = query.trim().toLowerCase().replace(/\s+/g, " ");
   const tokens = words(normalized);
   const selection = selectionHint(rawSelection);
-  const key = JSON.stringify({version: 4, orientation, query: normalized, selection});
+  const key = JSON.stringify({version: 5, orientation, query: normalized, selection});
   const apiKey = process.env.PEXELS_API_KEY;
   if (!apiKey || !tokens.length || normalized.length > 80 || tokens.length > 8) return null;
   const existing = cache.get(key);
   if (existing && existing.expires > Date.now()) return existing.media;
-  const url = new URL("https://api.pexels.com/v1/videos/search");
-  url.search = new URLSearchParams({ query: normalized, per_page: "12", size: "medium" }).toString();
-  const response = await fetch(url, { headers: { Authorization: apiKey }, signal });
-  signal.throwIfAborted();
-  if (!response.ok) return null;
-  const result = await response.json() as { videos?: PexelsVideo[] };
-  signal.throwIfAborted();
-  let selected: StockVideo | null = null, bestScore = -1, bestOrientation = -1;
-  const matchesOrientation = (file: {width?: number; height?: number}) => orientation === "portrait"
-    ? file.height! > file.width! : file.width! >= file.height!;
-  for (const video of (Array.isArray(result.videos) ? result.videos : []).slice(0, 12)) {
-    if (!pexelsUrl(video.url)) continue;
-    const slug = new URL(video.url).pathname.replace(/^\/video\//, "");
-    const title = typeof video.title === "string" ? video.title : "";
-    const tags = Array.isArray(video.tags) ? video.tags.filter((tag): tag is string => typeof tag === "string").join(" ") : "";
-    const subject = words(`${slug} ${title} ${typeof video.description === "string" ? video.description : ""} ${tags}`).filter(token => !/^\d+$/.test(token)).map(wordForm);
-    let matches = tokens.filter(token => subject.includes(wordForm(token))).length;
-    if (selection && subject.length) {
-      const covers = (phrase: string) => terms(phrase).every(word => subject.includes(wordForm(word)));
-      if (!covers(selection.subject) || selection.exclude?.some(covers)) continue;
-      // Query context breaks equal hint matches without outweighing a hint.
-      const contextScore = matches / (tokens.length + 1);
-      matches = 2 + contextScore + Number(Boolean(selection.activity && covers(selection.activity)))
-        + Number(Boolean(selection.equipment && covers(selection.equipment)));
+  let selected: StockVideo | null = null;
+  // Reuse the caller's deadline signal; broadening never starts a new timeout.
+  const queries = [...new Set([normalized, ...(selection ? [selection.subject] : [])])];
+  for (const searchQuery of queries) {
+    signal.throwIfAborted();
+    const url = new URL("https://api.pexels.com/v1/videos/search");
+    url.search = new URLSearchParams({ query: searchQuery, per_page: "12", size: "medium" }).toString();
+    const response = await fetch(url, { headers: { Authorization: apiKey }, signal });
+    signal.throwIfAborted();
+    if (!response.ok) return null;
+    const result = await response.json() as { videos?: PexelsVideo[] };
+    signal.throwIfAborted();
+    let bestScore = -1, bestOrientation = -1;
+    const matchesOrientation = (file: {width?: number; height?: number}) => orientation === "portrait"
+      ? file.height! > file.width! : file.width! >= file.height!;
+    for (const video of (Array.isArray(result.videos) ? result.videos : []).slice(0, 12)) {
+      if (!pexelsUrl(video.url)) continue;
+      const slug = new URL(video.url).pathname.replace(/^\/video\//, "");
+      const title = typeof video.title === "string" ? video.title : "";
+      const tags = Array.isArray(video.tags) ? video.tags.filter((tag): tag is string => typeof tag === "string").join(" ") : "";
+      const subject = words(`${slug} ${title} ${typeof video.description === "string" ? video.description : ""} ${tags}`).filter(token => !/^\d+$/.test(token)).map(wordForm);
+      let matches = tokens.filter(token => subject.includes(wordForm(token))).length;
+      if (selection && subject.length) {
+        const covers = (phrase: string) => terms(phrase).every(word => subject.includes(wordForm(word)));
+        if (selection.exclude?.some(covers)) continue;
+        // Query context breaks equal hint matches without outweighing a hint.
+        const contextScore = matches / (tokens.length + 1);
+        matches = covers(selection.subject) ? 2 + contextScore + Number(Boolean(selection.activity && covers(selection.activity)))
+          + Number(Boolean(selection.equipment && covers(selection.equipment))) : 0;
+      }
+      // The documented Video resource can have only a numeric page URL and no
+      // editorial metadata. Preserve provider search order for unknown relevance;
+      // positive overlap ranks above provider-ranked illustrative alternatives.
+      const files = (Array.isArray(video.video_files) ? video.video_files : []).filter(file =>
+        file.file_type === "video/mp4" && pexelsUrl(file.link)
+        && Number.isFinite(file.width) && Number.isFinite(file.height)
+        && Math.min(file.width!, file.height!) >= 360,
+      ).sort((a, b) => Number(matchesOrientation(b)) - Number(matchesOrientation(a)) || Math.abs(Math.max(a.width!, a.height!) - 1280) - Math.abs(Math.max(b.width!, b.height!) - 1280));
+      const file = files[0];
+      if (!file) continue;
+      const orientationScore = Number(matchesOrientation(file));
+      // Prefer composition fit only when subject relevance is equal.
+      if (matches < bestScore || (matches === bestScore && orientationScore <= bestOrientation)) continue;
+      bestScore = matches;
+      bestOrientation = orientationScore;
+      selected = { url: file.link!, type: "video", ...(pexelsUrl(video.image) ? { posterUrl: video.image } : {}) };
     }
-    // The documented Video resource can have only a numeric page URL and no
-    // editorial metadata. Preserve provider search order for unknown relevance;
-    // positive overlap ranks above it, while explicitly unrelated copy is skipped.
-    if (subject.length > 0 && matches === 0) continue;
-    const files = (Array.isArray(video.video_files) ? video.video_files : []).filter(file =>
-      file.file_type === "video/mp4" && pexelsUrl(file.link)
-      && Number.isFinite(file.width) && Number.isFinite(file.height)
-      && Math.min(file.width!, file.height!) >= 360,
-    ).sort((a, b) => Number(matchesOrientation(b)) - Number(matchesOrientation(a)) || Math.abs(Math.max(a.width!, a.height!) - 1280) - Math.abs(Math.max(b.width!, b.height!) - 1280));
-    const file = files[0];
-    if (!file) continue;
-    const orientationScore = Number(matchesOrientation(file));
-    // Prefer composition fit only when subject relevance is equal.
-    if (matches < bestScore || (matches === bestScore && orientationScore <= bestOrientation)) continue;
-    bestScore = matches;
-    bestOrientation = orientationScore;
-    selected = { url: file.link!, type: "video", ...(pexelsUrl(video.image) ? { posterUrl: video.image } : {}) };
+    if (selected) break;
   }
   // Bounded process-local cache; no request signal or credentials are retained.
   if (cache.size >= 128) cache.delete(cache.keys().next().value!);

package/styles/video-chat.css

@@ -1065,7 +1065,6 @@
 }
 
 .vanillasky-video-chat .opening-chapter { animation: vanillasky-chapter-enter 450ms ease-out both; }
-.vanillasky-video-chat .media-credit { color: var(--vs-fg); font-size: 11px; margin-left: 12px; text-underline-offset: 3px; }
 @keyframes vanillasky-chapter-enter { from { opacity: 0; } to { opacity: 1; } }
 @media (prefers-reduced-motion: reduce) { .vanillasky-video-chat .opening-chapter { animation: none; } }
 
@@ -1124,3 +1123,7 @@
 .vanillasky-video-chat .card-prompt { position: relative; inset: auto; overflow-wrap: anywhere; flex-shrink: 0; }
 
 .vanillasky-video-chat .cards { flex-shrink: 0; }
+
+.vanillasky-video-chat .transcript-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--vs-media-glass); color: var(--vs-media-muted); font: inherit; font-size: 13px; cursor: pointer; pointer-events: auto; }
+.vanillasky-video-chat .transcript-toggle svg { width: 16px; height: 16px; }
+.vanillasky-video-chat .transcript-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }