@livelayer/react 0.5.6 → 0.5.8

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;
@@ -1000,6 +1001,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.6",
+  "version": "0.5.8",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "main": "dist/index.js",
   "module": "dist/index.mjs",