vue-parley 5.5.2 → 5.5.5

package/dist/chat.css

@@ -4866,15 +4866,15 @@
 }
 }
 
-:where(.vue-chat, .vue-chat *).call-chip--button[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-chip--button[data-v-335a8f89] {
   cursor: pointer;
 }
-:where(.vue-chat, .vue-chat *).call-chip.call-chip--icon[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-chip.call-chip--icon[data-v-335a8f89] {
   justify-content: center;
   aspect-ratio: 1;
   padding: 0;
 }
-:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-335a8f89] {
   padding: 0;
   color: inherit;
   font: inherit;
@@ -4882,10 +4882,10 @@
   border: 0;
   background: none;
 }
-:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-9e488ad1]:disabled {
+:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-335a8f89]:disabled {
   cursor: not-allowed;
 }
-:where(.vue-chat, .vue-chat *).call-screen[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen[data-v-335a8f89] {
   --background-primary: #0b1119;
   --background-secondary: #111822;
   --background-header: #1c2934;
@@ -4919,7 +4919,7 @@
   font-family: inherit;
   background: radial-gradient(circle at 50% -20%, #1d3040 0%, #111822 37%, #0b1119 85%);
 }
-:where(.vue-chat, .vue-chat *).call-header[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-header[data-v-335a8f89] {
   display: flex;
   flex-shrink: 0;
   gap: 0.5rem;
@@ -4929,25 +4929,25 @@
   margin-inline: var(--gutter);
   border-bottom: 1px solid rgb(255 255 255 / 0.07);
 }
-:where(.vue-chat, .vue-chat *).call-brand[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-brand[data-v-335a8f89] {
   display: flex;
   gap: 0.6875rem;
   align-items: center;
   min-width: 0;
 }
-:where(.vue-chat, .vue-chat *).call-brand h1[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-brand h1[data-v-335a8f89] {
   font-size: 1.25rem;
   font-weight: 800;
   line-height: 1.3;
 }
-:where(.vue-chat, .vue-chat *).call-brand p[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-brand p[data-v-335a8f89] {
   overflow: hidden;
   color: #97a7b8;
   font-size: 0.75rem;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-:where(.vue-chat, .vue-chat *).call-logo[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-logo[data-v-335a8f89] {
   display: grid;
   flex-shrink: 0;
   place-items: center;
@@ -4958,15 +4958,15 @@
   background: linear-gradient(145deg, var(--accent-turquoise), var(--accent-turquoise-dark));
   box-shadow: 0 6px 22px rgb(32 190 182 / 0.17);
 }
-:where(.vue-chat, .vue-chat *).call-logo svg[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-logo svg[data-v-335a8f89] {
   width: 68%;
 }
-:where(.vue-chat, .vue-chat *).call-meta[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-meta[data-v-335a8f89] {
   display: flex;
   flex-shrink: 0;
   gap: 0.5rem;
 }
-:where(.vue-chat, .vue-chat *).call-chip[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-chip[data-v-335a8f89] {
   display: flex;
   gap: 0.4375rem;
   align-items: center;
@@ -4979,11 +4979,11 @@
   border-radius: 14px;
   background: var(--background-header);
 }
-:where(.vue-chat, .vue-chat *).call-time[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-time[data-v-335a8f89] {
   color: #84e1d3;
   font-variant-numeric: tabular-nums;
 }
-:where(.vue-chat, .vue-chat *).call-dot[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-dot[data-v-335a8f89] {
   flex-shrink: 0;
   width: 0.4375rem;
   height: 0.4375rem;
@@ -4991,10 +4991,10 @@
   background: var(--accent-success);
   box-shadow: 0 0 0 3px rgb(66 212 164 / 0.1);
 }
-:where(.vue-chat, .vue-chat *).call-dot--off[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-dot--off[data-v-335a8f89] {
   background: var(--text-muted);
 }
-:where(.vue-chat, .vue-chat *).call-main[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-main[data-v-335a8f89] {
   position: relative;
   flex: 1 1 0;
   min-height: 9rem;
@@ -5005,24 +5005,24 @@
   background: var(--background-secondary);
   box-shadow: 0 18px 50px rgb(2 6 14 / 0.33);
 }
-:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-335a8f89] {
   margin: 0;
   border-radius: 0;
 }
 
 /* The fallback where the browser has no fullscreen: the screen's whole height, over its siblings. */
-:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-9e488ad1]:not(:fullscreen) {
+:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-335a8f89]:not(:fullscreen) {
   position: absolute;
   inset: 0;
   z-index: 2;
 }
-:where(.vue-chat, .vue-chat *).call-shade[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-shade[data-v-335a8f89] {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(to bottom, rgb(10 27 43 / 0.33) 0%, transparent 23%, transparent 54%, rgb(6 19 26 / 0.67) 100%);
 }
-:where(.vue-chat, .vue-chat *).call-badge[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-badge[data-v-335a8f89] {
   position: absolute;
   display: flex;
   gap: 0.5rem;
@@ -5035,11 +5035,11 @@
   background: rgb(6 20 27 / 0.67);
   backdrop-filter: blur(10px);
 }
-:where(.vue-chat, .vue-chat *).call-badge--camera[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-badge--camera[data-v-335a8f89] {
   top: 1.0625rem;
   inset-inline-start: 1.0625rem;
 }
-:where(.vue-chat, .vue-chat *).call-badge--tile[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-badge--tile[data-v-335a8f89] {
   top: 0.75rem;
   inset-inline-start: 0.75rem;
   padding: 0.3125rem 0.5rem;
@@ -5050,18 +5050,21 @@
   background: rgb(13 23 37 / 0.49);
   backdrop-filter: none;
 }
-:where(.vue-chat, .vue-chat *).call-badge--center[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-badge--center[data-v-335a8f89] {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   white-space: nowrap;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-335a8f89] {
   position: absolute !important;
   top: 1.0625rem;
   inset-inline-end: 1.0625rem;
   width: 2.375rem;
   height: 2.375rem;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
   padding: 0 !important;
   color: #fff !important;
   border: 1px solid rgb(255 255 255 / 0.28) !important;
@@ -5069,31 +5072,13 @@
   background: rgb(6 20 27 / 0.57) !important;
   backdrop-filter: blur(12px);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-pin[data-v-9e488ad1] {
-  position: absolute !important;
-  top: 1.0625rem;
-  inset-inline-end: 4rem;
-  width: 2.375rem;
-  height: 2.375rem;
-  padding: 0 !important;
-  color: #fff !important;
-  border: 1px solid rgb(255 255 255 / 0.28) !important;
-  border-radius: 12px !important;
-  background: rgb(6 20 27 / 0.57) !important;
-  backdrop-filter: blur(12px);
-}
-:where(.vue-chat, .vue-chat *).call-screen .call-pin--active[data-v-9e488ad1] {
-  color: #15232d !important;
-  border-color: #84e1d3 !important;
-  background: #84e1d3 !important;
-}
-:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-9e488ad1]::after {
+:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-335a8f89]::after {
   /* The design's 38px, with a thumb's reach. */
   content: '';
   position: absolute;
   inset: -3px;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-sound[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-sound[data-v-335a8f89] {
   position: absolute !important;
   top: 4rem;
   left: 50%;
@@ -5105,7 +5090,7 @@
   background: var(--text-primary) !important;
   transform: translateX(-50%);
 }
-:where(.vue-chat, .vue-chat *).call-main-footer[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-main-footer[data-v-335a8f89] {
   position: absolute;
   inset-inline: clamp(0.75rem, 3.3vw, 1.125rem);
   bottom: clamp(0.75rem, 3.3vw, 1.125rem);
@@ -5114,7 +5099,7 @@
   align-items: flex-end;
   justify-content: space-between;
 }
-:where(.vue-chat, .vue-chat *).call-identity[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-identity[data-v-335a8f89] {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
@@ -5122,7 +5107,7 @@
   align-items: flex-start;
   min-width: 0;
 }
-:where(.vue-chat, .vue-chat *).call-identity strong[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-identity strong[data-v-335a8f89] {
   display: -webkit-box;
   overflow: hidden;
   font-size: clamp(1rem, 3.9vw, 1.3125rem);
@@ -5131,12 +5116,12 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-:where(.vue-chat, .vue-chat *).call-identity small[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-identity small[data-v-335a8f89] {
   margin-top: 0.25rem;
   color: #d8e4e7;
   font-size: 0.75rem;
 }
-:where(.vue-chat, .vue-chat *).call-torch-note[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-torch-note[data-v-335a8f89] {
   display: inline-flex;
   gap: 0.4375rem;
   align-items: center;
@@ -5149,12 +5134,12 @@
   border-radius: 10px;
   background: rgb(10 18 27 / 0.55);
 }
-:where(.vue-chat, .vue-chat *).call-torch-note--on[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-torch-note--on[data-v-335a8f89] {
   color: #b2fbe9;
   border-color: rgb(112 224 197 / 0.3);
   background: rgb(13 52 45 / 0.9);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-335a8f89] {
   flex-shrink: 0;
   gap: 0.5rem;
   min-height: 2.875rem;
@@ -5169,38 +5154,38 @@
   box-shadow: 0 7px 22px rgb(29 26 10 / 0.37);
   opacity: 1 !important;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-torch-float--on[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-torch-float--on[data-v-335a8f89] {
   color: #222327 !important;
   background: var(--accent-yellow) !important;
 }
-:where(.vue-chat, .vue-chat *).call-others-title[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others-title[data-v-335a8f89] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   margin: clamp(0.375rem, 1.7dvh, 1.125rem) calc(var(--gutter) + 2px) clamp(0.25rem, 1dvh, 0.6875rem);
 }
-:where(.vue-chat, .vue-chat *).call-others-title h2[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others-title h2[data-v-335a8f89] {
   color: var(--text-secondary);
   font-size: 0.8125rem;
   font-weight: 400;
 }
-:where(.vue-chat, .vue-chat *).call-others-title span[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others-title span[data-v-335a8f89] {
   color: var(--text-muted);
   font-size: 0.6875rem;
 }
-:where(.vue-chat, .vue-chat *).call-others[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others[data-v-335a8f89] {
   display: flex;
   flex-shrink: 0;
   gap: 0.75rem;
   height: clamp(5.75rem, 16.76dvh, 11.3125rem);
   padding-inline: var(--gutter);
 }
-:where(.vue-chat, .vue-chat *).call-others--scroll[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others--scroll[data-v-335a8f89] {
   overflow-x: auto;
   scrollbar-width: none;
 }
-:where(.vue-chat, .vue-chat *).call-tile[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-tile[data-v-335a8f89] {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
@@ -5211,21 +5196,21 @@
   outline-offset: -1px;
   background: #1c2a36;
 }
-:where(.vue-chat, .vue-chat *).call-tile--off[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-tile--off[data-v-335a8f89] {
   background: radial-gradient(circle at 50% 40%, #32445a 0%, #192633 66%);
 }
-:where(.vue-chat, .vue-chat *).call-tile[data-v-9e488ad1]::after {
+:where(.vue-chat, .vue-chat *).call-tile[data-v-335a8f89]::after {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(to bottom, transparent 35%, rgb(14 27 38 / 0.68) 100%);
 }
-:where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-335a8f89] {
   flex: 0 0 44%;
   max-width: none;
 }
-:where(.vue-chat, .vue-chat *).call-avatar[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-avatar[data-v-335a8f89] {
   position: absolute;
   top: 45%;
   left: 50%;
@@ -5240,11 +5225,11 @@
   background: #3d496c;
   transform: translate(-50%, -50%);
 }
-:where(.vue-chat, .vue-chat *).call-avatar--large[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-avatar--large[data-v-335a8f89] {
   width: 6rem;
   font-size: 2rem;
 }
-:where(.vue-chat, .vue-chat *).call-tile-footer[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-tile-footer[data-v-335a8f89] {
   position: absolute;
   inset-inline: clamp(0.5rem, 2.2vw, 0.75rem);
   bottom: clamp(0.5rem, 2.2vw, 0.75rem);
@@ -5254,7 +5239,7 @@
   align-items: center;
   justify-content: space-between;
 }
-:where(.vue-chat, .vue-chat *).call-name[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-name[data-v-335a8f89] {
   overflow: hidden;
   padding: 0.4375rem 0.5625rem;
   font-size: 0.75rem;
@@ -5264,7 +5249,7 @@
   border-radius: 9px;
   background: rgb(13 21 39 / 0.72);
 }
-:where(.vue-chat, .vue-chat *).call-mic[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-mic[data-v-335a8f89] {
   display: grid;
   flex-shrink: 0;
   place-items: center;
@@ -5274,11 +5259,11 @@
   border-radius: 9px;
   background: #143e3a;
 }
-:where(.vue-chat, .vue-chat *).call-mic--off[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-mic--off[data-v-335a8f89] {
   color: #fff;
   background: #ef5764;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-tile-pick[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-tile-pick[data-v-335a8f89] {
   position: absolute !important;
   inset: 0;
   z-index: 2;
@@ -5289,7 +5274,7 @@
   border-radius: inherit !important;
   background: transparent !important;
 }
-:where(.vue-chat, .vue-chat *).call-controls[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-controls[data-v-335a8f89] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -5303,71 +5288,7 @@
     0 -8px 26px rgb(0 0 0 / 0.14),
     0 16px 32px rgb(0 0 0 / 0.27);
 }
-:where(.vue-chat, .vue-chat *).call-control[data-v-9e488ad1] {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: clamp(0.25rem, 0.65dvh, 0.4375rem);
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  color: #c6d4e1;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-align: center;
-  white-space: nowrap;
-}
-:where(.vue-chat, .vue-chat *).call-control--lit[data-v-9e488ad1] {
-  color: #ffc572;
-}
-:where(.vue-chat, .vue-chat *).call-control--end[data-v-9e488ad1] {
-  color: #f4a9ae;
-}
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-9e488ad1] {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
-  height: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
-  padding: 0 !important;
-  color: #eff6fb !important;
-  border: 1px solid rgb(255 255 255 / 0.1) !important;
-  border-radius: 19px !important;
-  background: var(--background-control) !important;
-  opacity: 1 !important;
-  transition: transform 0.12s;
-}
-
-/* Keep the glyph centred independently of the host application's SVG and RTL rules. */
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button > svg[data-v-9e488ad1] {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: block;
-  flex: none;
-  width: 1.5rem;
-  height: 1.5rem;
-  margin: 0;
-  transform: translate(-50%, -50%);
-}
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-9e488ad1]:active,
-:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-9e488ad1]:active {
-  transform: scale(0.94);
-}
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button--lit[data-v-9e488ad1] {
-  color: #242c33 !important;
-  border-color: #ffdb95 !important;
-  background: var(--accent-yellow) !important;
-  box-shadow: 0 4px 18px rgb(236 173 74 / 0.18);
-}
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button--end[data-v-9e488ad1] {
-  color: #fff !important;
-  border-color: var(--accent-danger-border) !important;
-  border-radius: 20px !important;
-  background: var(--accent-danger) !important;
-  box-shadow: 0 5px 20px rgb(238 62 80 / 0.22);
-}
-:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-335a8f89] {
   position: fixed;
   inset: 0;
   z-index: 10;
@@ -5376,7 +5297,7 @@
   background: rgb(0 0 0 / 0.58);
   backdrop-filter: blur(3px);
 }
-:where(.vue-chat, .vue-chat *).call-members[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members[data-v-335a8f89] {
   width: 100%;
   max-height: min(75dvh, 36rem);
   padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
@@ -5387,13 +5308,13 @@
   background: #17222d;
   box-shadow: 0 -18px 50px rgb(0 0 0 / 0.35);
 }
-:where(.vue-chat, .vue-chat *).call-members header[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members header[data-v-335a8f89] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-members-close[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-members-close[data-v-335a8f89] {
   width: 2.5rem;
   height: 2.5rem;
   padding: 0 !important;
@@ -5402,12 +5323,12 @@
   border-radius: 12px !important;
   background: var(--background-control) !important;
 }
-:where(.vue-chat, .vue-chat *).call-members ul[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members ul[data-v-335a8f89] {
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
 }
-:where(.vue-chat, .vue-chat *).call-members li[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members li[data-v-335a8f89] {
   display: flex;
   gap: 0.75rem;
   align-items: center;
@@ -5416,11 +5337,11 @@
   border-radius: 16px;
   background: var(--background-panel);
 }
-:where(.vue-chat, .vue-chat *).call-members li.is-main[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members li.is-main[data-v-335a8f89] {
   border-color: rgb(42 201 188 / 0.75);
   box-shadow: inset 0 0 0 1px rgb(42 201 188 / 0.18);
 }
-:where(.vue-chat, .vue-chat *).call-member-avatar[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-member-avatar[data-v-335a8f89] {
   display: grid;
   flex: 0 0 2.5rem;
   place-items: center;
@@ -5428,22 +5349,22 @@
   border-radius: 50%;
   background: #3d496c;
 }
-:where(.vue-chat, .vue-chat *).call-member-name[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-member-name[data-v-335a8f89] {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
   min-width: 0;
 }
-:where(.vue-chat, .vue-chat *).call-member-name strong[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-member-name strong[data-v-335a8f89] {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-:where(.vue-chat, .vue-chat *).call-member-name small[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-member-name small[data-v-335a8f89] {
   color: var(--text-muted);
   font-size: 0.6875rem;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-335a8f89] {
   flex-shrink: 0;
   padding: 0.625rem 0.75rem !important;
   color: #102026 !important;
@@ -5452,51 +5373,51 @@
   border-radius: 11px !important;
   background: var(--accent-turquoise) !important;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-9e488ad1]:disabled {
+:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-335a8f89]:disabled {
   color: #b5eee7 !important;
   background: #1e514f !important;
   opacity: 1;
 }
 @media (min-width: 768px) {
-:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-335a8f89] {
     align-items: stretch;
     justify-content: flex-start;
 }
-:where(.vue-chat, .vue-chat *).call-members[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-members[data-v-335a8f89] {
     width: min(25rem, 42vw);
     max-height: none;
     border-radius: 0 24px 24px 0;
 }
 }
 @media (min-width: 768px) {
-:where(.vue-chat, .vue-chat *).call-others[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others[data-v-335a8f89] {
     height: clamp(8rem, 20dvh, 13rem);
 }
 }
 @media (min-width: 768px) {
-:where(.vue-chat, .vue-chat *).call-screen[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen[data-v-335a8f89] {
     display: grid;
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-columns: clamp(17rem, 23vw, 22rem) minmax(0, 1fr);
     gap: 0 1rem;
     padding: 1.5rem;
 }
-:where(.vue-chat, .vue-chat *).call-header[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-header[data-v-335a8f89] {
     grid-row: 1;
     grid-column: 1 / 3;
     margin: 0 0 1.25rem;
 }
-:where(.vue-chat, .vue-chat *).call-main[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-main[data-v-335a8f89] {
     grid-row: 2 / 4;
     grid-column: 2;
     margin: 0;
 }
-:where(.vue-chat, .vue-chat *).call-others-title[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others-title[data-v-335a8f89] {
     grid-row: 2;
     grid-column: 1;
     margin: 0 0 0.75rem;
 }
-:where(.vue-chat, .vue-chat *).call-others[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-others[data-v-335a8f89] {
     grid-row: 3;
     grid-column: 1;
     flex-direction: column;
@@ -5507,20 +5428,86 @@
     overflow-x: hidden;
     overflow-y: auto;
 }
-:where(.vue-chat, .vue-chat *).call-tile[data-v-9e488ad1],
-  :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-tile[data-v-335a8f89],
+  :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-335a8f89] {
     flex: 0 0 clamp(8.5rem, 20vh, 12rem);
     width: 100%;
     max-width: none;
 }
-:where(.vue-chat, .vue-chat *).call-controls[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-controls[data-v-335a8f89] {
     grid-row: 4;
     grid-column: 1 / 3;
     margin: 1.25rem 0 0;
 }
 }
+
+
+:where(.vue-chat, .vue-chat *).call-control {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: clamp(0.25rem, 0.65dvh, 0.4375rem);
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: #c6d4e1;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+:where(.vue-chat, .vue-chat *).call-control--lit {
+  color: #ffc572;
+}
+:where(.vue-chat, .vue-chat *).call-control--end {
+  color: #f4a9ae;
+}
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
+  height: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
+  padding: 0 !important;
+  color: #eff6fb !important;
+  border: 1px solid rgb(255 255 255 / 0.1) !important;
+  border-radius: 19px !important;
+  background: var(--background-control) !important;
+  opacity: 1 !important;
+  transition: transform 0.12s;
+}
+
+/* Keep the glyph centred independently of the host application's SVG and RTL rules. */
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button > svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0;
+  transform: translate(-50%, -50%);
+}
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button:active,
+:where(.vue-chat, .vue-chat *).call-screen .call-torch-float:active {
+  transform: scale(0.94);
+}
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button--lit {
+  color: #242c33 !important;
+  border-color: #ffdb95 !important;
+  background: var(--accent-yellow) !important;
+  box-shadow: 0 4px 18px rgb(236 173 74 / 0.18);
+}
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button--end {
+  color: #fff !important;
+  border-color: var(--accent-danger-border) !important;
+  border-radius: 20px !important;
+  background: var(--accent-danger) !important;
+  box-shadow: 0 5px 20px rgb(238 62 80 / 0.22);
+}
 @media (prefers-reduced-motion: reduce) {
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-9e488ad1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button {
     transition: none;
 }
 }