@vanillaskyai/video 0.7.1 → 0.8.1

package/styles/video-chat.css

@@ -1,56 +1,47 @@
-/*
- * Scoped default interface for @vanillaskyai/video.
- *
- * JSX contract: the outermost element uses class="vanillasky-video-chat" and
- * carries data-theme and data-orientation. All other class names are internal.
- */
+/* Scoped immersive VideoChat interface. Import this stylesheet once.
+ * All tokens, element rules and animation names belong to the component.
+ * Override --vs-chat-height / --vs-chat-min-height to fit an embedded host. */
 .vanillasky-video-chat {
-  --vs-bg: oklch(0.974 0.004 281);
-  --vs-fg: oklch(0.21 0.05 281);
-  --vs-fg-muted: oklch(0.5 0.04 281);
-  --vs-surface-raised: oklch(0.94 0.009 281);
-  --vs-surface-hover: oklch(0.9 0.014 281);
-  --vs-surface-selected: oklch(0.87 0.018 281);
-  --vs-surface-pop: oklch(1 0 0 / 92%);
-  --vs-surface-input: oklch(1 0 0);
-  --vs-shadow-input: 0 1px 2px oklch(0.2 0.026 281 / 4%), 0 6px 16px -12px oklch(0.2 0.026 281 / 18%);
-  --vs-shadow-raised: 0 1px 2px oklch(0.2 0.026 281 / 5%), 0 2px 6px -4px oklch(0.2 0.026 281 / 14%);
-  --vs-on-media: oklch(1 0 0);
-
-  --vs-border: oklch(0.21 0.05 281 / 14%);
-  --vs-border-strong: oklch(0.21 0.05 281 / 26%);
-  --vs-accent: #0079C4;
-  --vs-accent-deep: #006098;
-  --vs-accent-fg: #FFFFFF;
-  --vs-accent-ring: oklch(0.55 0.15 244 / 45%);
+  color-scheme: dark;
+  --vs-bg: #080b16;
+  --vs-fg: #f8f8fc;
+  --vs-fg-muted: #bfc2cf;
+  --vs-surface-raised: rgb(255 255 255 / 6%);
+  --vs-surface-hover: rgb(255 255 255 / 10%);
+  --vs-surface-selected: rgb(199 204 244 / 15%);
+  --vs-surface-pop: rgb(23 26 40 / 82%);
+  --vs-surface-input: rgb(18 22 38 / 70%);
+  --vs-shadow-input: 0 12px 36px rgb(0 0 0 / 24%);
+  --vs-shadow-raised: inset 0 1px 0 rgb(255 255 255 / 6%);
+  --vs-on-media: #f8f8fc;
+  --vs-border: rgb(255 255 255 / 14%);
+  --vs-border-strong: rgb(255 255 255 / 25%);
+  --vs-accent: #c1c4e5;
+  --vs-accent-deep: #d5d7ef;
+  --vs-accent-fg: #171a2a;
+  --vs-accent-ring: rgb(193 196 229 / 50%);
   --vs-voice: #FF3A71;
-  --vs-focus: #0079C4;
-  --vs-focus-ring: oklch(0.55 0.15 244 / 45%);
-  --vs-danger: oklch(0.42 0.16 32);
-  --vs-danger-surface: oklch(0.55 0.19 32 / 9%);
+  --vs-focus: #c1c4e5;
+  --vs-focus-ring: rgb(193 196 229 / 85%);
+  --vs-danger: #ffb4ac;
+  --vs-danger-surface: rgb(189 66 62 / 20%);
   --vs-text-caption: 0.75rem;
   --vs-lead-caption: 1.33;
   --vs-track-caption: 0;
-
   --vs-text-footnote: 0.8125rem;
   --vs-lead-footnote: 1.38;
   --vs-track-footnote: -0.006em;
-
   --vs-text-subhead: 0.9375rem;
   --vs-lead-subhead: 1.33;
   --vs-track-subhead: -0.016em;
-
   --vs-text-body: 1.0625rem;
   --vs-lead-body: 1.47;
   --vs-track-body: -0.026em;
-
   --vs-lead-headline: 1.29;
   --vs-track-headline: -0.026em;
-
   --vs-text-title3: 1.25rem;
   --vs-lead-title3: 1.25;
   --vs-track-title3: -0.023em;
-
   --vs-text-display: clamp(1.75rem, 3.4vw, 2.75rem);
   --vs-lead-display: 1.05;
   --vs-track-display: 0.014em;
@@ -58,7 +49,7 @@
   --vs-radius-lg: 1.25rem;
   --vs-radius-pill: 999px;
   --vs-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --vs-shadow-pop: 0 16px 48px -12px oklch(0.191 0.094 281 / 30%);
+  --vs-shadow-pop: 0 24px 80px rgb(0 0 0 / 36%);
   --vs-ease: cubic-bezier(0.22, 1, 0.36, 1);
   --vs-duration: 150ms;
   --vs-duration-slow: 260ms;
@@ -68,108 +59,19 @@
   --vs-touch: 2.75rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  .vanillasky-video-chat:not([data-theme="light"]) {
-    --vs-bg: oklch(0.128 0.068 281);
-    --vs-fg: oklch(0.97 0.012 281);
-    --vs-fg-muted: oklch(0.72 0.035 281);
-    --vs-surface-raised: oklch(0.191 0.094 281);
-    --vs-surface-hover: oklch(0.25 0.09 281);
-    --vs-surface-selected: oklch(0.3 0.086 281);
-    --vs-surface-pop: oklch(0.175 0.085 281 / 94%);
-    --vs-surface-input: oklch(0.225 0.088 281);
-    --vs-shadow-input: 0 1px 2px oklch(0 0 0 / 20%), 0 6px 16px -12px oklch(0 0 0 / 40%);
-    --vs-shadow-raised: 0 1px 2px oklch(0 0 0 / 24%), 0 2px 6px -4px oklch(0 0 0 / 36%);
-
-    --vs-border: oklch(1 0 0 / 14%);
-    --vs-border-strong: oklch(1 0 0 / 24%);
-    --vs-accent: #FF3A71;
-    --vs-accent-deep: #FF006F;
-    --vs-accent-fg: #FFFFFF;
-    --vs-accent-ring: oklch(0.664 0.231 10.5 / 55%);
-    --vs-voice: #FF3A71;
-    --vs-focus: #FF3A71;
-    --vs-focus-ring: oklch(0.664 0.231 10.5 / 55%);
-    --vs-danger: oklch(0.75 0.16 32);
-    --vs-danger-surface: oklch(0.75 0.16 32 / 14%);
-
-    --vs-shadow-pop: 0 16px 48px -12px oklch(0 0 0 / 60%);
-  }
-}
-
-.vanillasky-video-chat[data-theme="dark"] {
-  --vs-bg: oklch(0.128 0.068 281);
-  --vs-fg: oklch(0.97 0.012 281);
-  --vs-fg-muted: oklch(0.72 0.035 281);
-  --vs-surface-raised: oklch(0.191 0.094 281);
-  --vs-surface-hover: oklch(0.25 0.09 281);
-  --vs-surface-selected: oklch(0.3 0.086 281);
-  --vs-surface-pop: oklch(0.175 0.085 281 / 94%);
-  --vs-surface-input: oklch(0.225 0.088 281);
-  --vs-shadow-input: 0 1px 2px oklch(0 0 0 / 20%), 0 6px 16px -12px oklch(0 0 0 / 40%);
-  --vs-shadow-raised: 0 1px 2px oklch(0 0 0 / 24%), 0 2px 6px -4px oklch(0 0 0 / 36%);
-
-  --vs-border: oklch(1 0 0 / 14%);
-  --vs-border-strong: oklch(1 0 0 / 24%);
-  --vs-accent: #FF3A71;
-  --vs-accent-deep: #FF006F;
-  --vs-accent-fg: #FFFFFF;
-  --vs-accent-ring: oklch(0.664 0.231 10.5 / 55%);
-  --vs-voice: #FF3A71;
-  --vs-focus: #FF3A71;
-  --vs-focus-ring: oklch(0.664 0.231 10.5 / 55%);
-  --vs-danger: oklch(0.75 0.16 32);
-
-  --vs-shadow-pop: 0 16px 48px -12px oklch(0 0 0 / 60%);
-}
 @media (prefers-contrast: more) {
   .vanillasky-video-chat {
-    --vs-fg-muted: oklch(0.35 0.04 281);
-    --vs-border: oklch(0.21 0.05 281 / 40%);
-    --vs-border-strong: oklch(0.21 0.05 281 / 65%);
-    --vs-accent: #005E96;
-    --vs-accent-deep: #004A78;
-    --vs-focus: #005E96;
-    --vs-focus-ring: oklch(0.45 0.13 244 / 70%);
-    --vs-danger: oklch(0.34 0.15 32);
-    --vs-shadow-input: 0 0 0 1px oklch(0.21 0.05 281 / 35%);
-    --vs-shadow-raised: 0 0 0 1px oklch(0.21 0.05 281 / 28%);
-  }
-
-  .vanillasky-video-chat[data-theme="dark"] {
-    --vs-fg-muted: oklch(0.88 0.02 281);
-    --vs-border: oklch(1 0 0 / 42%);
-    --vs-border-strong: oklch(1 0 0 / 70%);
-    --vs-accent: #FF7CA1;
-    --vs-accent-deep: #FF3A71;
-    --vs-accent-fg: #10073C;
-    --vs-focus: #FF7CA1;
-    --vs-focus-ring: oklch(0.78 0.16 10 / 75%);
-    --vs-danger: oklch(0.86 0.13 32);
-  }
-}
-
-@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
-  .vanillasky-video-chat:not([data-theme="light"]) {
-    --vs-fg-muted: oklch(0.88 0.02 281);
-    --vs-border: oklch(1 0 0 / 42%);
-    --vs-border-strong: oklch(1 0 0 / 70%);
-    --vs-accent: #FF7CA1;
-    --vs-accent-deep: #FF3A71;
-    --vs-accent-fg: #10073C;
-    --vs-focus: #FF7CA1;
-    --vs-focus-ring: oklch(0.78 0.16 10 / 75%);
-    --vs-danger: oklch(0.86 0.13 32);
+    --vs-fg-muted: #e4e5ef;
+    --vs-border: rgb(255 255 255 / 45%);
+    --vs-border-strong: rgb(255 255 255 / 70%);
+    --vs-surface-pop: #171a28;
+    --vs-surface-input: #121626;
+    --vs-focus-ring: #e4e5ef;
   }
 }
 
-
 .vanillasky-video-chat, .vanillasky-video-chat * { box-sizing: border-box; }
 
-.vanillasky-video-chat { color-scheme: light dark; }
-.vanillasky-video-chat[data-theme="light"] { color-scheme: light; }
-.vanillasky-video-chat[data-theme="dark"] { color-scheme: dark; }
-
 .vanillasky-video-chat {
   margin: 0;
   background: var(--vs-bg);
@@ -179,6 +81,7 @@
 }
 
 .vanillasky-video-chat .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+
 .vanillasky-video-chat .error {
   display: flex;
   align-items: flex-start;
@@ -192,8 +95,11 @@
   line-height: var(--vs-lead-footnote);
   letter-spacing: var(--vs-track-footnote);
 }
+
 .vanillasky-video-chat .error svg { flex: 0 0 auto; margin-top: 0.05rem; }
+
 .vanillasky-video-chat .error span { min-width: 0; }
+
 .vanillasky-video-chat {
   --vs-side: 1rem;
   --vs-frame: min(72rem, 100dvw - 2 * var(--vs-side), (100dvh - var(--vs-reserve)) * 16 / 9);
@@ -203,6 +109,7 @@
   height: 100dvh;
   overflow: hidden;
 }
+
 .vanillasky-video-chat :where(button, [href], input, select, textarea, [tabindex]):focus-visible {
   outline: 2px solid var(--vs-focus-ring);
   outline-offset: 2px;
@@ -219,6 +126,7 @@
   margin: 0 auto;
   padding: max(0.6rem, env(safe-area-inset-top)) 0 0.5rem;
 }
+
 .vanillasky-video-chat .group { display: flex; align-items: center; gap: 0.5rem; }
 
 .vanillasky-video-chat .round {
@@ -233,7 +141,9 @@
   cursor: pointer;
   transition: background-color var(--vs-duration) ease, transform var(--vs-duration) ease;
 }
+
 .vanillasky-video-chat .round:hover { background: var(--vs-surface-hover); }
+
 .vanillasky-video-chat .round:active { transform: scale(0.95); }
 
 .vanillasky-video-chat .pill {
@@ -251,6 +161,7 @@
   cursor: pointer;
   transition: background-color var(--vs-duration) ease;
 }
+
 .vanillasky-video-chat .pill:hover { background: var(--vs-surface-hover); }
 
 .vanillasky-video-chat .stage-area {
@@ -260,6 +171,7 @@
   place-items: center;
   padding: 1.5rem var(--vs-side) 0;
 }
+
 .vanillasky-video-chat .stage {
   position: relative;
   aspect-ratio: 16 / 9;
@@ -268,28 +180,29 @@
   border-radius: var(--vs-radius-lg);
   container-type: size;
 }
+
 .vanillasky-video-chat[data-orientation="portrait"] { --vs-frame: min(100dvw - 2 * var(--vs-side), (100dvh - var(--vs-reserve)) * 9 / 16); }
+
 .vanillasky-video-chat[data-orientation="portrait"] .stage { aspect-ratio: 9 / 16; }
+
 @media (min-width: 900px) { .vanillasky-video-chat .stage { border: 1px solid var(--vs-border); } }
+
 .vanillasky-video-chat .stage > * { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; }
+
 .vanillasky-video-chat .stage :where(video, canvas, img) { max-width: 100%; max-height: 100%; object-fit: contain; }
+
 .vanillasky-video-chat .ground {
   position: absolute;
   inset: -30%;
   background: radial-gradient(closest-side, oklch(1 0 0 / 28%), transparent 70%);
   animation: vanillasky-video-chat-drift 9s ease-in-out infinite alternate;
 }
-.vanillasky-video-chat .opening-wash {
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(circle at center, oklch(0.12 0.04 265 / 8%) 0%, oklch(0.12 0.04 265 / 42%) 100%),
-    linear-gradient(0deg, oklch(0.12 0.04 265 / 24%), oklch(0.12 0.04 265 / 24%));
-}
+
 @keyframes vanillasky-video-chat-drift {
   from { transform: translate3d(-12%, -8%, 0) scale(1); }
   to { transform: translate3d(14%, 10%, 0) scale(1.25); }
 }
+
 .vanillasky-video-chat .asked {
   margin: 0 auto;
   padding: 0 1.5rem;
@@ -300,6 +213,7 @@
   text-align: center;
   color: var(--vs-on-media);
 }
+
 .vanillasky-video-chat .asked-prompt {
   margin: 0;
   max-width: 26ch;
@@ -310,6 +224,7 @@
   text-wrap: balance;
   animation: vanillasky-video-chat-step-in 620ms ease both;
 }
+
 .vanillasky-video-chat .asked-step {
   margin: 0;
   font-size: var(--vs-text-subhead);
@@ -323,12 +238,16 @@
   color: transparent;
   animation: vanillasky-video-chat-sweep 2.4s linear infinite, vanillasky-video-chat-step-in 520ms ease both;
 }
+
 @keyframes vanillasky-video-chat-step-in {
   from { opacity: 0; transform: translateY(6px); }
   to { opacity: 1; transform: none; }
 }
+
 .vanillasky-video-chat .welcome { position: absolute; inset: 0; overflow: hidden; }
+
 .vanillasky-video-chat .frame-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+
 .vanillasky-video-chat .welcome-wash {
   position: absolute;
   inset: 0;
@@ -348,7 +267,6 @@
   color: oklch(1 0 0);
 }
 
-
 .vanillasky-video-chat .welcome-title {
   margin: 0;
   font-size: clamp(1.6rem, 5.2cqw, 3.4rem);
@@ -357,8 +275,8 @@
   font-weight: 600;
   text-wrap: balance;
 }
-.vanillasky-video-chat .welcome-title em { font-style: normal; color: oklch(0.8 0.11 268); }
 
+.vanillasky-video-chat .welcome-title em { font-style: normal; color: oklch(0.8 0.11 268); }
 
 .vanillasky-video-chat .cards {
   display: flex;
@@ -371,8 +289,11 @@
   overflow-y: visible;
   scrollbar-width: none;
 }
+
 .vanillasky-video-chat .cards::-webkit-scrollbar { display: none; }
+
 .vanillasky-video-chat .cards::-webkit-scrollbar { display: none; }
+
 .vanillasky-video-chat .cards button {
   position: relative;
   display: block;
@@ -393,6 +314,7 @@
   transition: transform var(--vs-duration) var(--vs-ease), box-shadow var(--vs-duration) ease,
     outline-color var(--vs-duration) ease;
 }
+
 .vanillasky-video-chat .cards button[data-active] {
   outline-color: oklch(0.84 0.1 268);
   box-shadow:
@@ -400,16 +322,20 @@
     0 2px 6px -2px oklch(0 0 0 / 40%),
     0 14px 32px -10px oklch(0 0 0 / 60%);
 }
+
 .vanillasky-video-chat .cards button:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 10px -2px oklch(0 0 0 / 45%), 0 20px 40px -12px oklch(0 0 0 / 65%);
 }
+
 .vanillasky-video-chat .cards button:active { transform: translateY(-1px); }
+
 .vanillasky-video-chat .card-wash {
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, oklch(0.12 0.03 280 / 92%) 0%, oklch(0.12 0.03 280 / 30%) 45%, transparent 70%);
 }
+
 .vanillasky-video-chat .card-prompt {
   position: absolute;
   inset: auto 0 0;
@@ -420,7 +346,9 @@
   font-weight: 500;
   text-wrap: balance;
 }
+
 .vanillasky-video-chat .card-dots { display: flex; gap: 0.15rem; margin-top: 0.6rem; align-self: center; }
+
 .vanillasky-video-chat .card-dots button {
   display: grid;
   place-items: center;
@@ -431,6 +359,7 @@
   background: none;
   cursor: pointer;
 }
+
 .vanillasky-video-chat .card-dots button::before {
   content: "";
   width: 0.45rem;
@@ -439,9 +368,10 @@
   background: oklch(1 0 0 / 35%);
   transition: width var(--vs-duration) var(--vs-ease), background-color var(--vs-duration) ease;
 }
+
 .vanillasky-video-chat .card-dots button:hover::before { background: oklch(1 0 0 / 60%); }
-.vanillasky-video-chat .card-dots button.on::before { width: 1.35rem; background: oklch(0.84 0.1 268); }
 
+.vanillasky-video-chat .card-dots button.on::before { width: 1.35rem; background: oklch(0.84 0.1 268); }
 
 @media (max-width: 899px) {
   .vanillasky-video-chat .welcome-body { gap: 0.7rem; padding: 1.75rem 1rem 1rem; }
@@ -449,6 +379,7 @@
   .vanillasky-video-chat .cards button { width: clamp(9rem, 42cqw, 11rem); }
   .vanillasky-video-chat .card-prompt { padding: 0.7rem 0.75rem; }
 }
+
 .vanillasky-video-chat .ending {
   position: absolute;
   inset: 0;
@@ -456,15 +387,16 @@
   z-index: 1;
   animation: vanillasky-video-chat-fade-in 420ms ease both;
 }
+
 .vanillasky-video-chat .ending-wash {
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg,
-    oklch(0.14 0.05 265 / 94%) 0%,
-    oklch(0.14 0.05 265 / 82%) 38%,
-    oklch(0.14 0.05 265 / 40%) 72%,
-    transparent 100%);
+    rgb(7 11 23 / 65%) 0%,
+    rgb(7 11 23 / 28%) 35%,
+    transparent 65%);
 }
+
 .vanillasky-video-chat .ending-body {
   position: absolute;
   inset: auto 0 0;
@@ -475,6 +407,7 @@
   padding: 0 clamp(1.25rem, 4cqw, 3.5rem) clamp(1.25rem, 4cqh, 2.5rem);
   color: oklch(1 0 0);
 }
+
 .vanillasky-video-chat .ending-label {
   margin: 0;
   font-size: clamp(var(--vs-text-footnote), 1.1cqw, var(--vs-text-subhead));
@@ -484,66 +417,15 @@
   color: oklch(1 0 0 / 78%);
   text-shadow: 0 1px 3px oklch(0.14 0.05 265 / 70%);
 }
+
 .vanillasky-video-chat .ending .cards { margin-top: 0; }
+
 .vanillasky-video-chat .ending .cards button { width: clamp(8rem, 15.5cqw, 12rem); }
+
 .vanillasky-video-chat .ending .card-dots { align-self: flex-start; margin-left: -0.35rem; }
 
-.vanillasky-video-chat .sheet-popover {
-  position: absolute;
-  z-index: 30;
-  top: 0.75rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(26rem, calc(100% - 2rem));
-  max-height: 70%;
-  overflow-y: auto;
-  padding: 0.4rem;
-  border-radius: var(--vs-radius-lg);
-  background: var(--vs-surface-pop);
-  color: var(--vs-fg);
-  border: 1px solid var(--vs-border);
-  backdrop-filter: blur(20px);
-  box-shadow: var(--vs-shadow-pop);
-  animation: vanillasky-video-chat-rise 180ms ease both;
-}
-.vanillasky-video-chat .history { display: grid; gap: 0.35rem; }
-.vanillasky-video-chat .history button {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.6rem;
-  width: 100%;
-  padding: 0.65rem 0.75rem;
-  border: 0;
-  border-radius: var(--vs-radius);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-.vanillasky-video-chat .history button:hover { background: var(--vs-surface-hover); }
-.vanillasky-video-chat .history button.current { background: var(--vs-surface-selected); }
-.vanillasky-video-chat .history button:disabled { opacity: 0.5; cursor: default; }
-.vanillasky-video-chat .history .index { color: var(--vs-fg-muted); font-size: var(--vs-text-caption); line-height: var(--vs-lead-caption); font-variant-numeric: tabular-nums; }
-.vanillasky-video-chat .history .prompt { font-size: var(--vs-text-body); line-height: var(--vs-lead-headline); letter-spacing: var(--vs-track-headline); font-weight: 500; }
-
-.vanillasky-video-chat .settings { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 1rem; }
-.vanillasky-video-chat .settings-note { margin: 0; font-size: var(--vs-text-caption); line-height: var(--vs-lead-caption); color: var(--vs-fg-muted); }
-.vanillasky-video-chat .settings fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
-.vanillasky-video-chat .settings legend {
-  padding: 0 0 0.45rem;
-  font-size: var(--vs-text-footnote);
-  line-height: var(--vs-lead-footnote);
-  letter-spacing: var(--vs-track-footnote);
-  font-weight: 600;
-  color: var(--vs-fg-muted);
-}
-.vanillasky-video-chat .settings label { display: flex; align-items: baseline; gap: 0.6rem; cursor: pointer; }
-.vanillasky-video-chat .settings label span { display: grid; gap: 0.1rem; font-size: var(--vs-text-subhead); line-height: var(--vs-lead-subhead); letter-spacing: var(--vs-track-subhead); color: var(--vs-fg-muted); }
-.vanillasky-video-chat .settings label strong { font-weight: 600; font-size: var(--vs-text-body); line-height: var(--vs-lead-headline); letter-spacing: var(--vs-track-headline); color: var(--vs-fg); }
-.vanillasky-video-chat .settings input { accent-color: var(--vs-accent); margin: 0; }
 .vanillasky-video-chat .panel { display: grid; align-items: center; min-height: 0; background: var(--vs-bg); }
-.vanillasky-video-chat .sheet, .vanillasky-video-chat .settings, .vanillasky-video-chat .history { color-scheme: inherit; }
+
 .vanillasky-video-chat .panel-inner {
   display: grid;
   gap: 0.5rem;
@@ -551,11 +433,13 @@
   margin: 0 auto;
   padding: 1rem var(--vs-side) max(1rem, env(safe-area-inset-bottom));
 }
+
 @media (min-width: 900px) {
   .vanillasky-video-chat { --vs-side: 1.5rem; }
   .vanillasky-video-chat .stage-area { padding: 2.5rem var(--vs-side) 0; }
   .vanillasky-video-chat .panel-inner { padding: 1rem var(--vs-side) 1.25rem; }
 }
+
 .vanillasky-video-chat .line-row {
   display: flex;
   align-items: flex-start;
@@ -563,14 +447,13 @@
   min-height: calc(2 * var(--vs-text-body) * var(--vs-lead-body));
   margin-bottom: 0.5rem;
 }
+
 .vanillasky-video-chat .line {
   flex: 1 1 auto;
   min-width: 0;
   margin: 0;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
+  display: block;
+  overflow: visible;
   font-size: var(--vs-text-body);
   line-height: var(--vs-lead-body);
   letter-spacing: var(--vs-track-body);
@@ -579,26 +462,11 @@
 }
 
 @keyframes vanillasky-video-chat-sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
+
 @keyframes vanillasky-video-chat-fade-in { from { opacity: 0; } to { opacity: 1; } }
+
 @keyframes vanillasky-video-chat-rise { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
 
-.vanillasky-video-chat .full-response {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.1rem;
-  border: 0;
-  background: none;
-  color: var(--vs-fg-muted);
-  font: inherit;
-  font-size: var(--vs-text-footnote);
-  line-height: var(--vs-lead-footnote);
-  letter-spacing: var(--vs-track-footnote);
-  font-weight: 500;
-  cursor: pointer;
-}
-.vanillasky-video-chat .full-response:hover { color: var(--vs-fg); }
 .vanillasky-video-chat .composer {
   display: flex;
   align-items: center;
@@ -611,11 +479,14 @@
   box-shadow: var(--vs-shadow-input);
   transition: border-color var(--vs-duration) ease, box-shadow var(--vs-duration) ease;
 }
-.vanillasky-video-chat .composer:focus-within {
+
+.vanillasky-video-chat .composer:has(textarea:focus-visible) {
   border-color: var(--vs-focus);
   box-shadow: 0 0 0 1px var(--vs-focus), var(--vs-shadow-input);
 }
+
 .vanillasky-video-chat .composer textarea:focus-visible { outline: none; }
+
 .vanillasky-video-chat .composer textarea {
   flex: 1 1 auto;
   min-width: 0;
@@ -631,7 +502,9 @@
   resize: none;
   field-sizing: content;
 }
+
 .vanillasky-video-chat .composer textarea:focus { outline: none; }
+
 .vanillasky-video-chat .composer textarea::placeholder { color: var(--vs-fg-muted); }
 
 .vanillasky-video-chat .ghost {
@@ -647,10 +520,15 @@
   flex: 0 0 auto;
   transition: color var(--vs-duration) ease, transform var(--vs-duration) ease;
 }
+
 .vanillasky-video-chat .ghost:hover:not(:disabled) { color: var(--vs-fg); }
+
 .vanillasky-video-chat .ghost:active:not(:disabled) { transform: scale(0.95); }
+
 .vanillasky-video-chat .ghost:disabled { opacity: 0.35; cursor: default; }
+
 .vanillasky-video-chat .composer .ghost + .ghost { margin-left: 0; }
+
 .vanillasky-video-chat .composer .ghost + .send { margin-left: 0.95rem; }
 
 .vanillasky-video-chat .ghost.listening {
@@ -670,44 +548,570 @@
   cursor: pointer;
   transition: opacity var(--vs-duration) ease, transform var(--vs-duration) ease;
 }
+
 .vanillasky-video-chat .send:hover:not(:disabled) { background: var(--vs-accent-deep); }
+
 .vanillasky-video-chat .send:active:not(:disabled) { transform: scale(0.95); }
+
 .vanillasky-video-chat .send:disabled { background: var(--vs-surface-selected); color: var(--vs-fg-muted); cursor: default; }
+
 .vanillasky-video-chat .waveform { display: flex; align-items: center; gap: 3px; height: 1rem; flex: 0 0 auto; }
+
 .vanillasky-video-chat .waveform span { width: 2px; height: 100%; border-radius: var(--vs-radius-pill); background: var(--vs-voice); transform: scaleY(0.2); opacity: 0.6; }
+
 .vanillasky-video-chat .waveform.on span { opacity: 1; animation-name: vanillasky-video-chat-wave; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
+
 @keyframes vanillasky-video-chat-wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
-.vanillasky-video-chat .waveform.hearing span { background: var(--vs-voice); animation-duration: 420ms !important; }
 
-.vanillasky-video-chat .sheet-layer { position: fixed; inset: 0; z-index: 40; }
-.vanillasky-video-chat .scrim { position: absolute; inset: 0; width: 100%; border: 0; background: oklch(0.08 0.015 300 / 55%); backdrop-filter: blur(4px); cursor: default; }
-.vanillasky-video-chat .sheet {
-  position: absolute;
-  inset: auto 0 0;
-  width: min(48rem, 100%);
-  max-height: 82dvh;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-top: 1px solid var(--vs-border);
-  border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0;
-  background: var(--vs-bg);
-  animation: vanillasky-video-chat-slide-up var(--vs-duration-slow) var(--vs-ease) both;
-}
-@keyframes vanillasky-video-chat-slide-up { from { transform: translateY(100%); } to { transform: none; } }
-.vanillasky-video-chat .sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1.25rem 0; }
-.vanillasky-video-chat .sheet h1 { margin: 0; font-size: var(--vs-text-title3); line-height: var(--vs-lead-title3); letter-spacing: var(--vs-track-title3); font-weight: 600; }
-.vanillasky-video-chat .sheet .round { background: var(--vs-surface-raised); color: var(--vs-fg-muted); flex: 0 0 auto; }
-.vanillasky-video-chat .sheet-body { overflow-y: auto; padding: 0.75rem 1.25rem 2rem; }
-.vanillasky-video-chat .sheet-body p { margin: 0 0 1rem; font-size: var(--vs-text-body); line-height: 1.6; letter-spacing: var(--vs-track-body); color: var(--vs-fg); }
-.vanillasky-video-chat .sheet-body p:first-child { color: var(--vs-fg); }
+.vanillasky-video-chat .waveform.hearing span { background: var(--vs-voice); animation-duration: 420ms !important; }
 
 @media (prefers-reduced-motion: reduce) {
-  .vanillasky-video-chat, .vanillasky-video-chat *, .vanillasky-video-chat::before, .vanillasky-video-chat *::before, .vanillasky-video-chat::after, .vanillasky-video-chat *::after {
+  .vanillasky-video-chat, .vanillasky-video-chat *, .vanillasky-video-chat *::before, .vanillasky-video-chat *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
   .vanillasky-video-chat .asked-step { color: var(--vs-on-media); -webkit-text-fill-color: currentColor; }
 }
+
+.vanillasky-video-chat {
+  --vs-media-ground: #080b16;
+  --vs-media-glass: rgb(18 22 38 / 70%);
+  --vs-media-edge: rgb(255 255 255 / 15%);
+  --vs-media-text: #f8f8fc;
+  --vs-media-muted: #bfc2cf;
+  --vs-media-hover: rgb(255 255 255 / 10%);
+  --vs-media-selected: rgb(255 255 255 / 17%);
+  --vs-media-bottom: max(24px, env(safe-area-inset-bottom));
+  --vs-media-gutter: clamp(20px, 3.5vw, 56px);
+  position: relative;
+  isolation: isolate;
+  display: block;
+  width: 100%;
+  height: 100dvh;
+  background: var(--vs-media-ground);
+}
+
+.vanillasky-video-chat .stage-area { position: absolute; inset: 0; padding: 0; }
+
+.vanillasky-video-chat .stage { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
+
+.vanillasky-video-chat[data-orientation="portrait"] .stage { aspect-ratio: auto; }
+
+.vanillasky-video-chat .chrome {
+  position: absolute;
+  z-index: 20;
+  inset: 0 0 auto;
+  width: 100%;
+  padding: max(24px, env(safe-area-inset-top)) var(--vs-media-gutter) 44px;
+  margin: 0;
+  color: var(--vs-media-text);
+  background: linear-gradient(180deg, rgb(3 5 12 / 76%), transparent);
+  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
+  pointer-events: none;
+}
+
+.vanillasky-video-chat .chrome > * { pointer-events: auto; }
+
+.vanillasky-video-chat .session-brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
+
+.vanillasky-video-chat .chrome .group { gap: 10px; flex-shrink: 0; }
+
+.vanillasky-video-chat .chrome :is(.round, .pill) {
+  background: rgb(20 23 38 / 50%);
+  color: var(--vs-media-text);
+  border: 1px solid rgb(255 255 255 / 16%);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 4px 16px rgb(0 0 0 / 12%);
+  backdrop-filter: blur(22px) saturate(140%);
+  -webkit-backdrop-filter: blur(22px) saturate(140%);
+}
+
+.vanillasky-video-chat .chrome :is(.round, .pill):hover { background: rgb(56 58 73 / 85%); }
+
+.vanillasky-video-chat .panel { --composer-height: 60px; --conversation-gap: 16px; overflow: visible; padding-top: 6px; position: absolute; z-index: 21; inset: auto 0 0; background: transparent; pointer-events: none; display: block; }
+
+.vanillasky-video-chat .panel-inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--conversation-gap); padding: 0 20px var(--vs-media-bottom); }
+
+.vanillasky-video-chat .line-row {
+  width: 100%;
+  min-height: 60px;
+  margin: 0;
+  padding: 10px 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  color: var(--vs-media-text);
+  background: rgb(4 6 13 / 70%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  pointer-events: auto;
+}
+
+.vanillasky-video-chat .line { color: var(--vs-media-text); text-align: center; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.02em; line-height: 1.45; text-shadow: 0 1px 6px rgb(0 0 0 / 30%); }
+
+.vanillasky-video-chat[data-controls-visible="false"] .chrome { opacity: 0; visibility: hidden; transform: translateY(-8px); }
+
+.vanillasky-video-chat .panel .error { pointer-events: auto; width: min(560px, 100%); background: var(--vs-bg); }
+
+
+.vanillasky-video-chat .welcome { background: var(--vs-media-ground); }
+
+.vanillasky-video-chat .welcome .frame-media { max-width: none; max-height: none; object-fit: cover; }
+
+.vanillasky-video-chat .welcome-wash { background: linear-gradient(90deg, rgb(7 11 23 / 88%) 0%, rgb(7 11 23 / 47%) 50%, rgb(7 11 23 / 10%) 100%), linear-gradient(0deg, rgb(4 6 13 / 95%) 0%, transparent 68%); }
+
+.vanillasky-video-chat .welcome-body { padding: clamp(140px, 20dvh, 220px) var(--vs-media-gutter) 130px; gap: 24px; }
+
+.vanillasky-video-chat .welcome-title { font-size: clamp(40px, 5.3vw, 78px); line-height: 1.08; letter-spacing: -.055em; font-weight: 550; max-width: 900px; }
+
+.vanillasky-video-chat .welcome-title em { color: #c1c4e5; }
+
+.vanillasky-video-chat .cards { gap: 14px; margin: auto -12px 0; width: calc(100% + 24px); max-width: calc(100% + 24px); padding: 12px; }
+
+.vanillasky-video-chat .cards button { width: clamp(160px, 18vw, 260px); aspect-ratio: 1.65; border-radius: 14px; box-shadow: 0 8px 30px rgb(0 0 0 / 24%); background: #202438; }
+
+.vanillasky-video-chat .card-prompt { font-size: clamp(13px, 1.1vw, 16px); padding: 14px 16px; letter-spacing: -.015em; font-weight: 550; }
+
+.vanillasky-video-chat .card-wash { background: linear-gradient(0deg, rgb(4 6 13 / 92%), rgb(4 6 13 / 20%) 90%); }
+
+.vanillasky-video-chat .cards button[data-active] { outline-color: #d6d8ef; box-shadow: 0 0 0 4px rgb(198 202 255 / 10%); }
+
+.vanillasky-video-chat .card-dots { display: none; }
+
+.vanillasky-video-chat .ending-body { padding: 0 var(--vs-media-gutter) 190px; }
+
+.vanillasky-video-chat .ending .cards { margin-top: 0; }
+
+.vanillasky-video-chat .ending-label { font-size: 15px; margin-bottom: 6px; }
+
+@media (max-width: 700px) {
+  .vanillasky-video-chat { --vs-media-bottom: max(16px, env(safe-area-inset-bottom)); --vs-media-gutter: 20px; }
+  .vanillasky-video-chat .chrome { padding-top: max(18px, env(safe-area-inset-top)); gap: 12px; }
+  .vanillasky-video-chat .chrome .group { gap: 6px; }
+  .vanillasky-video-chat .chrome .pill { padding: 0 13px; font-size: 12px; }
+  .vanillasky-video-chat .panel-inner { padding-left: 12px; padding-right: 12px; gap: 16px; }
+  .vanillasky-video-chat .line-row { padding: 8px 12px; }
+  .vanillasky-video-chat .welcome-body { padding: max(135px, 17dvh) 20px 118px; gap: 24px; }
+  .vanillasky-video-chat .welcome-title { font-size: clamp(36px, 9.6vw, 58px); line-height: 1.12; letter-spacing: -.055em; }
+  .vanillasky-video-chat .cards { gap: 12px; width: calc(100% + 20px); max-width: calc(100% + 20px); padding: 12px 20px 12px 12px; }
+  .vanillasky-video-chat .cards button { width: 172px; aspect-ratio: .95; }
+  .vanillasky-video-chat .card-prompt { font-size: 14px; padding: 14px; }
+  .vanillasky-video-chat .ending-body { padding: 0 20px 190px; }
+  .vanillasky-video-chat .ending .cards button { width: 165px; aspect-ratio: 1.15; }
+}
+
+@media (max-height: 650px) and (min-width: 701px) {
+  .vanillasky-video-chat .welcome-body { padding-top: 110px; padding-bottom: 118px; }
+  .vanillasky-video-chat .welcome-title { font-size: clamp(32px, 4vw, 54px); }
+  .vanillasky-video-chat .cards button { width: 160px; }
+  .vanillasky-video-chat .ending-body { padding-bottom: 160px; }
+}
+
+@media (max-height: 650px) and (max-width: 700px) {
+  .vanillasky-video-chat .welcome-body { padding-top: 98px; }
+  .vanillasky-video-chat .welcome-title { font-size: 34px; }
+  .vanillasky-video-chat .cards button { width: 145px; aspect-ratio: 1.5; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vanillasky-video-chat *, .vanillasky-video-chat *::before, .vanillasky-video-chat *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}
+
+@media (prefers-contrast: more) {
+  .vanillasky-video-chat { --vs-media-glass: #121622; --vs-media-edge: rgb(255 255 255 / 65%); --vs-media-muted: #e4e5ef; }
+  .vanillasky-video-chat .line-row { background: #080b16; }
+}
+
+.vanillasky-video-chat .stage > .player-fit { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); height: auto; max-height: 100%; display: block; }
+
+.vanillasky-video-chat .line-row { position: relative; }
+
+.vanillasky-video-chat .caption-actions { display: flex; flex-shrink: 0; align-self: center; gap: 2px; transition: opacity 180ms ease; }
+
+.vanillasky-video-chat .caption-action { display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 5px; border: 0; border-radius: 9px; color: var(--vs-media-muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
+
+.vanillasky-video-chat .caption-action:hover { color: var(--vs-media-text); background: var(--vs-media-hover); }
+
+.vanillasky-video-chat .caption-action svg { width: 16px; height: 16px; }
+
+.vanillasky-video-chat .line-row[data-expanded="true"] { width: 100%; display: flex; align-items: flex-start; padding: 18px 20px; background: rgb(12 16 28 / 94%); border: 1px solid var(--vs-media-edge); box-shadow: 0 16px 50px rgb(0 0 0 / 30%); }
+
+.vanillasky-video-chat .expanded-captions { flex: 1; min-width: 0; max-height: min(360px, 52dvh); overflow-y: auto; overscroll-behavior: contain; color: var(--vs-media-text); font-size: 16px; line-height: 1.65; }
+
+.vanillasky-video-chat .expanded-captions p { margin: 0 0 14px; }
+
+.vanillasky-video-chat .expanded-captions p:last-child { margin: 0; }
+
+.vanillasky-video-chat .line-row[data-expanded="true"] .caption-actions { align-self: flex-start; }
+
+@media (max-width: 700px) {
+  .vanillasky-video-chat .caption-action { min-width: 40px; min-height: 44px; }
+  .vanillasky-video-chat .line-row[data-expanded="true"] { padding: 14px; }
+  .vanillasky-video-chat .expanded-captions { font-size: 15px; }
+}
+
+.vanillasky-video-chat .chrome .round:has(.nav-label), .vanillasky-video-chat .chrome .pill:has(.nav-label) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 0 14px; font-size: 12px; font-weight: 500; }
+
+.vanillasky-video-chat .chrome .round:has(.nav-label) svg, .vanillasky-video-chat .chrome .pill svg { width: 17px; height: 17px; }
+
+.vanillasky-video-chat .caption-actions { order: 2; }
+
+.vanillasky-video-chat .caption-action { display: flex; align-items: center; justify-content: center; gap: 5px; }
+
+.vanillasky-video-chat .eyebrow { display: block; font-size: 10px; line-height: 1.5; letter-spacing: .12em; font-weight: 600; color: var(--vs-fg-muted); margin-bottom: 8px; }
+
+.vanillasky-video-chat .expanded-captions .eyebrow { color: var(--vs-media-muted); }
+
+
+
+.vanillasky-video-chat .dock-hint { position: absolute; inset: auto 0 7px; text-align: center; margin: 0; color: var(--vs-media-muted); font-size: 11px; line-height: 16px; }
+
+.vanillasky-video-chat .panel-inner:has(.dock-hint) { padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 20px)); }
+
+@media (max-width: 700px) {
+  .vanillasky-video-chat .chrome .nav-label { display: none; }
+  .vanillasky-video-chat .chrome .round:has(.nav-label), .vanillasky-video-chat .chrome .pill:has(.nav-label) { width: 44px; padding: 0; }
+  .vanillasky-video-chat .chrome > .group:first-of-type { margin-left: auto; }
+}
+
+.vanillasky-video-chat .chrome .session-brand { flex: 1 1 auto; }
+
+.vanillasky-video-chat .chrome > .group { flex: 0 0 auto; }
+
+.vanillasky-video-chat .conversation-composer {
+  width: min(680px, 100%);
+  pointer-events: auto;
+  margin-bottom: 0;
+  transition: margin-bottom 280ms var(--vs-ease), opacity 180ms ease, transform 280ms var(--vs-ease), visibility 280ms;
+}
+
+.vanillasky-video-chat .conversation-composer .composer {
+  gap: 3px;
+  min-height: 60px;
+  padding: 7px;
+  border: 1px solid var(--vs-media-edge);
+  border-radius: 24px;
+  background: var(--vs-media-glass);
+  color: var(--vs-media-text);
+  box-shadow: 0 16px 48px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 5%);
+  backdrop-filter: blur(28px) saturate(130%);
+  -webkit-backdrop-filter: blur(28px) saturate(130%);
+}
+
+.vanillasky-video-chat .conversation-composer .composer:has(textarea:focus-visible) {
+  border-color: rgb(199 204 244 / 65%);
+  box-shadow: 0 0 0 3px rgb(199 204 244 / 9%), 0 16px 48px rgb(0 0 0 / 30%);
+}
+
+.vanillasky-video-chat .conversation-composer textarea {
+  padding: 9px 10px;
+  min-height: 44px;
+  max-height: 120px;
+  color: var(--vs-media-text);
+  font-size: 16px;
+  line-height: 26px;
+  letter-spacing: -.015em;
+  scrollbar-width: thin;
+}
+
+.vanillasky-video-chat .conversation-composer textarea::placeholder { color: var(--vs-media-muted); }
+
+.vanillasky-video-chat .conversation-composer .ghost { width: 44px; height: 44px; color: var(--vs-media-muted); }
+
+.vanillasky-video-chat .conversation-composer .ghost:hover:not(:disabled) { color: var(--vs-media-text); background: var(--vs-media-hover); }
+
+.vanillasky-video-chat .conversation-composer .ghost.listening { color: white; background: var(--vs-voice); }
+
+.vanillasky-video-chat .conversation-composer .send { width: 44px; height: 44px; flex-shrink: 0; background: rgb(191 194 230 / 22%); color: #faf9ff; border: 1px solid rgb(222 224 255 / 20%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); }
+
+.vanillasky-video-chat .conversation-composer .send:hover:not(:disabled) { background: rgb(191 194 230 / 35%); }
+
+.vanillasky-video-chat .conversation-composer .send:disabled { background: var(--vs-media-selected); color: var(--vs-media-muted); opacity: .45; }
+
+.vanillasky-video-chat .conversation-composer .ghost + .send { margin-left: 10px; }
+
+.vanillasky-video-chat .conversation-composer .waveform { margin: 0 3px; }
+
+.vanillasky-video-chat .conversation-composer .waveform:not(.on) { display: none; }
+
+.vanillasky-video-chat .composer-meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 10px; color: var(--vs-media-muted); font-size: 12px; line-height: 1.5; }
+
+.vanillasky-video-chat .composer-meta:empty { display: none; }
+
+
+.vanillasky-video-chat .composer-meta .error { width: auto; }
+
+@media (max-width: 700px) {
+  .vanillasky-video-chat .conversation-composer .composer { border-radius: 23px; padding: 5px; gap: 0; }
+  .vanillasky-video-chat .conversation-composer textarea { padding: 9px 5px; }
+  .vanillasky-video-chat .conversation-composer .ghost + .send { margin-left: 10px; }
+  .vanillasky-video-chat .composer-meta { gap: 8px; }
+}
+
+.vanillasky-video-chat .panel[data-input-visible="false"] .conversation-composer {
+  margin-bottom: calc(-1 * var(--composer-height) - var(--conversation-gap));
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(calc(var(--vs-media-bottom) + 16px));
+}
+
+.vanillasky-video-chat .caption-actions { opacity: .65; }
+
+.vanillasky-video-chat .line-row:hover .caption-actions,
+.vanillasky-video-chat .line-row:focus-within .caption-actions { opacity: 1; }
+
+.vanillasky-video-chat .caption-slot {
+  display: grid;
+  grid-template-rows: 0fr;
+  width: min(680px, 100%);
+  opacity: 0;
+  transition: grid-template-rows 280ms var(--vs-ease), opacity 180ms ease, visibility 280ms;
+}
+
+.vanillasky-video-chat .caption-slot[data-captions="true"] { grid-template-rows: 1fr; opacity: 1; }
+
+.vanillasky-video-chat .caption-clip { min-height: 0; overflow: visible; border-radius: 12px; }
+
+.vanillasky-video-chat .caption-slot[data-captions="false"] { pointer-events: none; visibility: hidden; }
+
+.vanillasky-video-chat .brand-logo { display: block; width: 144px; height: 36px; object-fit: contain; }
+
+@media (max-width: 700px) { .vanillasky-video-chat .brand-logo { width: 120px; height: 30px; } }
+
+.vanillasky-video-chat .sheet-popover {
+  position: absolute;
+  z-index: 30;
+  inset: max(82px, calc(env(safe-area-inset-top) + 64px)) var(--vs-media-gutter) auto auto;
+  width: min(360px, calc(100% - 32px));
+  max-height: min(650px, calc(100dvh - 108px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(224 225 243 / 25%) transparent;
+  padding: 18px;
+  border: 1px solid rgb(255 255 255 / 18%);
+  border-radius: 26px;
+  background: var(--vs-surface-pop);
+  color: var(--vs-fg);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 1px 0 0 rgb(255 255 255 / 3%), var(--vs-shadow-pop);
+  backdrop-filter: blur(36px) saturate(145%);
+  -webkit-backdrop-filter: blur(36px) saturate(145%);
+  animation: vanillasky-video-chat-fade-in 180ms ease both;
+}
+
+.vanillasky-video-chat .popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 14px; }
+
+.vanillasky-video-chat .popover-heading h2 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.035em; font-weight: 600; }
+
+.vanillasky-video-chat .popover-heading .round { width: 36px; height: 36px; flex-shrink: 0; background: rgb(255 255 255 / 7%); color: var(--vs-fg-muted); }
+
+.vanillasky-video-chat .popover-heading .round:hover { color: var(--vs-fg); background: var(--vs-surface-hover); }
+
+.vanillasky-video-chat .popover-heading .round svg { width: 17px; height: 17px; }
+
+.vanillasky-video-chat .settings { display: grid; gap: 16px; }
+
+.vanillasky-video-chat .settings .popover-heading { padding-bottom: 0; }
+
+.vanillasky-video-chat .settings fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
+
+.vanillasky-video-chat .settings legend, .vanillasky-video-chat .section-label { padding: 0 3px 8px; margin: 0; color: #aeb2c7; font-size: 11px; line-height: 1.4; letter-spacing: .025em; font-weight: 600; }
+
+.vanillasky-video-chat .settings label { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
+
+.vanillasky-video-chat .settings label > span { display: grid; gap: 3px; min-width: 0; color: #aeb2c7; font-size: 12px; line-height: 1.4; }
+
+.vanillasky-video-chat .settings label strong { color: var(--vs-fg); font-size: 13px; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; }
+
+.vanillasky-video-chat .settings .switch-row { min-height: 48px; padding: 8px 12px; background: rgb(255 255 255 / 4%); border-radius: 12px; }
+
+.vanillasky-video-chat .settings .switch-row > span { flex: 1; }
+
+.vanillasky-video-chat .settings input { appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; font: inherit; cursor: pointer; }
+
+.vanillasky-video-chat .settings input[type="checkbox"] { position: relative; order: 2; width: 38px; height: 23px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 99px; background: rgb(255 255 255 / 12%); transition: background 180ms ease; }
+
+.vanillasky-video-chat .settings input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #aeb2c7; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: transform 180ms var(--vs-ease), background 180ms ease; }
+
+.vanillasky-video-chat .settings input[type="checkbox"]:checked { background: rgb(193 196 229 / 70%); border-color: rgb(223 225 255 / 35%); }
+
+.vanillasky-video-chat .settings input[type="checkbox"]:checked::after { background: #fafaff; transform: translateX(15px); }
+
+.vanillasky-video-chat .settings .visual-options { display: grid; gap: 4px; padding: 4px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 16px; background: rgb(0 0 0 / 10%); }
+
+.vanillasky-video-chat .settings .choice-row { min-height: 52px; padding: 9px 10px; border: 1px solid transparent; border-radius: 12px; transition: background 150ms ease, border-color 150ms ease; }
+
+.vanillasky-video-chat .settings .choice-row:hover { background: rgb(255 255 255 / 4%); }
+
+.vanillasky-video-chat .settings .choice-row:has(input:checked) { background: rgb(193 196 229 / 12%); border-color: rgb(210 213 247 / 10%); }
+
+.vanillasky-video-chat .settings input[type="radio"] { position: relative; width: 18px; height: 18px; border: 1px solid rgb(216 220 246 / 32%); border-radius: 50%; background: rgb(0 0 0 / 8%); }
+
+.vanillasky-video-chat .settings input[type="radio"]:checked { background: #c1c4e5; border-color: #c1c4e5; }
+
+.vanillasky-video-chat .settings input[type="radio"]:checked::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #25283d; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
+
+.vanillasky-video-chat .settings .style-options { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border-radius: 16px; background: rgb(0 0 0 / 15%); }
+
+.vanillasky-video-chat .settings .style-options label { flex: 1 1 70px; min-height: 40px; justify-content: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; }
+
+.vanillasky-video-chat .settings .style-options label:has(input:checked) { background: rgb(193 196 229 / 18%); border-color: rgb(226 228 255 / 16%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 2px 5px rgb(0 0 0 / 8%); }
+
+.vanillasky-video-chat .settings .style-options label:hover { background: rgb(255 255 255 / 8%); }
+
+.vanillasky-video-chat .settings .style-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+
+.vanillasky-video-chat .settings .style-options label:has(input:focus-visible) { outline: 2px solid var(--vs-focus-ring); outline-offset: 2px; }
+
+.vanillasky-video-chat .settings .style-options strong { font-size: 12px; }
+
+.vanillasky-video-chat .settings-note { margin: 0; padding: 0 3px; color: #aeb2c7; font-size: 11px; line-height: 1.5; }
+
+.vanillasky-video-chat .history { display: grid; gap: 4px; }
+
+.vanillasky-video-chat .history .section-label { padding-top: 8px; padding-bottom: 5px; }
+
+.vanillasky-video-chat .history > p { margin: 0; padding: 12px 3px; font-size: 13px; line-height: 1.5; color: var(--vs-fg-muted); }
+
+.vanillasky-video-chat .history-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 11px 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--vs-fg); font: inherit; text-align: left; cursor: pointer; }
+
+.vanillasky-video-chat .history-row:hover:not(:disabled) { background: var(--vs-surface-hover); }
+
+.vanillasky-video-chat .history-row.current { background: rgb(193 196 229 / 13%); border-color: rgb(221 224 255 / 12%); }
+
+.vanillasky-video-chat .history-row:disabled { opacity: .4; cursor: default; }
+
+.vanillasky-video-chat .history-row .index, .vanillasky-video-chat .history-row > svg { flex-shrink: 0; width: 18px; font-size: 11px; color: #aeb2c7; font-variant-numeric: tabular-nums; }
+
+.vanillasky-video-chat .history-row .prompt { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
+
+.vanillasky-video-chat .history-row small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: #aeb2c7; }
+
+
+@media (max-width: 700px) {
+  .vanillasky-video-chat .sheet-popover { right: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100dvh - 102px); padding: 16px; }
+  .vanillasky-video-chat .popover-heading .round { width: 44px; height: 44px; }
+  .vanillasky-video-chat .settings .style-options label { min-height: 44px; }
+}
+
+.vanillasky-video-chat .settings label small { font-size: 11px; line-height: 1.4; }
+
+.vanillasky-video-chat .settings .style-options label > span { font-size: 12px; font-weight: 500; white-space: nowrap; }
+
+.vanillasky-video-chat .settings .style-options label:has(input:checked) > span { color: var(--vs-fg); }
+
+.vanillasky-video-chat .history-row.current::after { content: ""; flex: 0 0 5px; width: 5px; height: 9px; margin: 0 4px; border: solid #c1c4e5; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
+
+/* Host sizing is opt-in; the default experience occupies the viewport. */
+.vanillasky-video-chat {
+  min-height: var(--vs-chat-min-height, 100dvh);
+  height: var(--vs-chat-height, 100dvh);
+  max-width: 100%;
+}
+.vanillasky-video-chat *,
+.vanillasky-video-chat *::before,
+.vanillasky-video-chat *::after { box-sizing: border-box; }
+
+/* Cues normally read in about three lines. Never clamp away spoken words. */
+.vanillasky-video-chat .line {
+  display: block;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  text-wrap: pretty;
+  font-size: clamp(16px, 1.3vw, 19px);
+  line-height: 1.5;
+}
+.vanillasky-video-chat .caption-clip { overflow: visible; }
+.vanillasky-video-chat .caption-actions { transition: opacity 180ms ease; }
+.vanillasky-video-chat .line-row[data-actions-visible="false"] .caption-actions,
+.vanillasky-video-chat .caption-actions[data-actions-visible="false"] {
+  opacity: 0;
+  pointer-events: none;
+}
+.vanillasky-video-chat .line-row:focus-within .caption-actions,
+.vanillasky-video-chat .caption-actions:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+.vanillasky-video-chat .sheet-popover { max-height: min(650px, calc(100% - 108px)); }
+@media (max-width: 700px) {
+  .vanillasky-video-chat .sheet-popover { max-height: calc(100% - 102px); }
+}
+
+/* A still from the current response softly fills unused aspect-ratio space.
+   Frame is mounted paused by the component; only the main player animates. */
+.vanillasky-video-chat .stage > .ambient-media {
+  inset: -40px;
+  width: calc(100% + 80px);
+  height: calc(100% + 80px);
+  display: block;
+  overflow: hidden;
+  z-index: 0;
+  background: var(--vs-media-ground);
+  opacity: 1;
+  pointer-events: none;
+}
+.vanillasky-video-chat .ambient-media .frame-media {
+  max-width: none;
+  max-height: none;
+  object-fit: cover;
+  filter: blur(32px) saturate(.85);
+  opacity: .62;
+}
+.vanillasky-video-chat .opening-wash {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgb(8 11 22 / 12%), rgb(8 11 22 / 42%));
+  pointer-events: none;
+}
+.vanillasky-video-chat .ending { pointer-events: none; }
+.vanillasky-video-chat .ending .cards { pointer-events: auto; }
+
+/* Respect viewers who prefer solid controls over translucent media surfaces. */
+@media (prefers-reduced-transparency: reduce) {
+  .vanillasky-video-chat {
+    --vs-media-glass: #121626;
+    --vs-surface-pop: #171a28;
+    --vs-surface-input: #121626;
+  }
+  .vanillasky-video-chat .chrome :is(.round, .pill),
+  .vanillasky-video-chat .sheet-popover,
+  .vanillasky-video-chat .conversation-composer .composer,
+  .vanillasky-video-chat .line-row {
+    background: #171a28;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+  .vanillasky-video-chat .stage > .ambient-media { display: none; }
+}
+
+@media (pointer: coarse) {
+  .vanillasky-video-chat .caption-action,
+  .vanillasky-video-chat .popover-heading .round,
+  .vanillasky-video-chat .settings .style-options label {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+
+/* Caption controls float outside the reading measure, so the complete cue
+   keeps the same width when controls appear or disappear. */
+.vanillasky-video-chat .caption-actions {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 6px;
+  padding: 3px;
+  border: 1px solid var(--vs-media-edge);
+  border-radius: 12px;
+  background: var(--vs-media-glass);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+.vanillasky-video-chat .stage > .player-fit { z-index: 1; }
+@media (prefers-reduced-transparency: reduce) {
+  .vanillasky-video-chat .caption-actions { background: #171a28; backdrop-filter: none; -webkit-backdrop-filter: none; }
+}