@livelayer/react 0.5.5-pr66c.4 → 0.5.5-pr66c.5

package/dist/styles.css

@@ -683,12 +683,13 @@
   background: rgba(0, 0, 0, 0.55);
 }
 
-/* Compact pill — used for short codes like "EN". Tightens horizontal
-   padding and slightly shrinks the type so it reads as an icon-style
-   chip next to the full-size agent name pill. */
+/* Compact pill — used for short codes like "EN". Same height as the
+   sibling pills/buttons in the topbar (40px) so the row is uniform.
+   Compact horizontal padding + uppercase / tracked type so it reads
+   as an icon-style chip next to the full-size agent name pill. */
 .ll-hpill--compact {
-  height: 32px;
-  padding: 0 10px;
+  height: 40px;
+  padding: 0 12px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.04em;
@@ -942,6 +943,31 @@
   background: rgba(0, 0, 0, 0.4);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
+  /* Smooth the agent → user role handoff so the orange glow doesn't
+     hard-flip on every transcript turn. */
+  border: 1px solid transparent;
+  transition: background 220ms ease, box-shadow 220ms ease,
+    border-color 220ms ease;
+}
+
+/* Captions affordance for deaf-friendly UX: when the latest transcript
+   line is the AGENT's spoken output, tint the pill with a soft orange
+   glow signalling "this text is coming from Live Layer." The user's STT
+   keeps default styling (no glow) so the two voices read distinctly.
+   Hue is the warm side of the brand; opacity is tuned so the text on
+   the dark blurred backdrop stays readable. */
+.ll-expanded__transcript--agent {
+  background: rgba(255, 139, 61, 0.18);
+  border-color: rgba(255, 175, 110, 0.45);
+  box-shadow:
+    0 0 18px rgba(255, 139, 61, 0.3),
+    inset 0 0 0 1px rgba(255, 175, 110, 0.2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ll-expanded__transcript {
+    transition: none;
+  }
 }
 
 .ll-expanded__transcript-text {
@@ -1000,6 +1026,24 @@
   color: #fff;
 }
 
+/* Danger variant — used for End conversation in the toolbar row.
+   Same shape/size as a regular tool; red tint signals "this ends the
+   call." Sits at the right edge of the toolbar so eye flow is L→R:
+   share → camera → mic → speaker → END. */
+.ll-tool--danger {
+  background: rgba(239, 68, 68, 0.78);
+  border-color: rgba(255, 120, 120, 0.55);
+  color: #fff;
+  /* Pull slightly away from the speaker so it visually groups as
+     "exit", not "yet another media control." */
+  margin-left: 6px;
+}
+
+.ll-tool--danger:hover {
+  background: rgba(220, 38, 38, 0.92);
+  border-color: rgba(255, 140, 140, 0.7);
+}
+
 /* Split button: left = toggle, right = device menu */
 .ll-tool-split {
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livelayer/react",
-  "version": "0.5.5-pr66c.4",
+  "version": "0.5.5-pr66c.5",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "livekit-client": "^2.17.3",
-    "@livelayer/sdk": "0.3.0-pr66c.4"
+    "@livelayer/sdk": "0.3.0-pr66c.5"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",