vue-parley 5.5.1 → 5.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/chat.css CHANGED
@@ -4866,15 +4866,15 @@
4866
4866
  }
4867
4867
  }
4868
4868
 
4869
- :where(.vue-chat, .vue-chat *).call-chip--button[data-v-4431f1c1] {
4869
+ :where(.vue-chat, .vue-chat *).call-chip--button[data-v-05c663ae] {
4870
4870
  cursor: pointer;
4871
4871
  }
4872
- :where(.vue-chat, .vue-chat *).call-chip.call-chip--icon[data-v-4431f1c1] {
4872
+ :where(.vue-chat, .vue-chat *).call-chip.call-chip--icon[data-v-05c663ae] {
4873
4873
  justify-content: center;
4874
4874
  aspect-ratio: 1;
4875
4875
  padding: 0;
4876
4876
  }
4877
- :where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-4431f1c1] {
4877
+ :where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-05c663ae] {
4878
4878
  padding: 0;
4879
4879
  color: inherit;
4880
4880
  font: inherit;
@@ -4882,10 +4882,10 @@
4882
4882
  border: 0;
4883
4883
  background: none;
4884
4884
  }
4885
- :where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-4431f1c1]:disabled {
4885
+ :where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-05c663ae]:disabled {
4886
4886
  cursor: not-allowed;
4887
4887
  }
4888
- :where(.vue-chat, .vue-chat *).call-screen[data-v-4431f1c1] {
4888
+ :where(.vue-chat, .vue-chat *).call-screen[data-v-05c663ae] {
4889
4889
  --background-primary: #0b1119;
4890
4890
  --background-secondary: #111822;
4891
4891
  --background-header: #1c2934;
@@ -4919,7 +4919,7 @@
4919
4919
  font-family: inherit;
4920
4920
  background: radial-gradient(circle at 50% -20%, #1d3040 0%, #111822 37%, #0b1119 85%);
4921
4921
  }
4922
- :where(.vue-chat, .vue-chat *).call-header[data-v-4431f1c1] {
4922
+ :where(.vue-chat, .vue-chat *).call-header[data-v-05c663ae] {
4923
4923
  display: flex;
4924
4924
  flex-shrink: 0;
4925
4925
  gap: 0.5rem;
@@ -4929,25 +4929,25 @@
4929
4929
  margin-inline: var(--gutter);
4930
4930
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
4931
4931
  }
4932
- :where(.vue-chat, .vue-chat *).call-brand[data-v-4431f1c1] {
4932
+ :where(.vue-chat, .vue-chat *).call-brand[data-v-05c663ae] {
4933
4933
  display: flex;
4934
4934
  gap: 0.6875rem;
4935
4935
  align-items: center;
4936
4936
  min-width: 0;
4937
4937
  }
4938
- :where(.vue-chat, .vue-chat *).call-brand h1[data-v-4431f1c1] {
4938
+ :where(.vue-chat, .vue-chat *).call-brand h1[data-v-05c663ae] {
4939
4939
  font-size: 1.25rem;
4940
4940
  font-weight: 800;
4941
4941
  line-height: 1.3;
4942
4942
  }
4943
- :where(.vue-chat, .vue-chat *).call-brand p[data-v-4431f1c1] {
4943
+ :where(.vue-chat, .vue-chat *).call-brand p[data-v-05c663ae] {
4944
4944
  overflow: hidden;
4945
4945
  color: #97a7b8;
4946
4946
  font-size: 0.75rem;
4947
4947
  white-space: nowrap;
4948
4948
  text-overflow: ellipsis;
4949
4949
  }
4950
- :where(.vue-chat, .vue-chat *).call-logo[data-v-4431f1c1] {
4950
+ :where(.vue-chat, .vue-chat *).call-logo[data-v-05c663ae] {
4951
4951
  display: grid;
4952
4952
  flex-shrink: 0;
4953
4953
  place-items: center;
@@ -4958,15 +4958,15 @@
4958
4958
  background: linear-gradient(145deg, var(--accent-turquoise), var(--accent-turquoise-dark));
4959
4959
  box-shadow: 0 6px 22px rgb(32 190 182 / 0.17);
4960
4960
  }
4961
- :where(.vue-chat, .vue-chat *).call-logo svg[data-v-4431f1c1] {
4961
+ :where(.vue-chat, .vue-chat *).call-logo svg[data-v-05c663ae] {
4962
4962
  width: 68%;
4963
4963
  }
4964
- :where(.vue-chat, .vue-chat *).call-meta[data-v-4431f1c1] {
4964
+ :where(.vue-chat, .vue-chat *).call-meta[data-v-05c663ae] {
4965
4965
  display: flex;
4966
4966
  flex-shrink: 0;
4967
4967
  gap: 0.5rem;
4968
4968
  }
4969
- :where(.vue-chat, .vue-chat *).call-chip[data-v-4431f1c1] {
4969
+ :where(.vue-chat, .vue-chat *).call-chip[data-v-05c663ae] {
4970
4970
  display: flex;
4971
4971
  gap: 0.4375rem;
4972
4972
  align-items: center;
@@ -4979,11 +4979,11 @@
4979
4979
  border-radius: 14px;
4980
4980
  background: var(--background-header);
4981
4981
  }
4982
- :where(.vue-chat, .vue-chat *).call-time[data-v-4431f1c1] {
4982
+ :where(.vue-chat, .vue-chat *).call-time[data-v-05c663ae] {
4983
4983
  color: #84e1d3;
4984
4984
  font-variant-numeric: tabular-nums;
4985
4985
  }
4986
- :where(.vue-chat, .vue-chat *).call-dot[data-v-4431f1c1] {
4986
+ :where(.vue-chat, .vue-chat *).call-dot[data-v-05c663ae] {
4987
4987
  flex-shrink: 0;
4988
4988
  width: 0.4375rem;
4989
4989
  height: 0.4375rem;
@@ -4991,10 +4991,10 @@
4991
4991
  background: var(--accent-success);
4992
4992
  box-shadow: 0 0 0 3px rgb(66 212 164 / 0.1);
4993
4993
  }
4994
- :where(.vue-chat, .vue-chat *).call-dot--off[data-v-4431f1c1] {
4994
+ :where(.vue-chat, .vue-chat *).call-dot--off[data-v-05c663ae] {
4995
4995
  background: var(--text-muted);
4996
4996
  }
4997
- :where(.vue-chat, .vue-chat *).call-main[data-v-4431f1c1] {
4997
+ :where(.vue-chat, .vue-chat *).call-main[data-v-05c663ae] {
4998
4998
  position: relative;
4999
4999
  flex: 1 1 0;
5000
5000
  min-height: 9rem;
@@ -5005,24 +5005,24 @@
5005
5005
  background: var(--background-secondary);
5006
5006
  box-shadow: 0 18px 50px rgb(2 6 14 / 0.33);
5007
5007
  }
5008
- :where(.vue-chat, .vue-chat *).call-main--expanded[data-v-4431f1c1] {
5008
+ :where(.vue-chat, .vue-chat *).call-main--expanded[data-v-05c663ae] {
5009
5009
  margin: 0;
5010
5010
  border-radius: 0;
5011
5011
  }
5012
5012
 
5013
5013
  /* The fallback where the browser has no fullscreen: the screen's whole height, over its siblings. */
5014
- :where(.vue-chat, .vue-chat *).call-main--expanded[data-v-4431f1c1]:not(:fullscreen) {
5014
+ :where(.vue-chat, .vue-chat *).call-main--expanded[data-v-05c663ae]:not(:fullscreen) {
5015
5015
  position: absolute;
5016
5016
  inset: 0;
5017
5017
  z-index: 2;
5018
5018
  }
5019
- :where(.vue-chat, .vue-chat *).call-shade[data-v-4431f1c1] {
5019
+ :where(.vue-chat, .vue-chat *).call-shade[data-v-05c663ae] {
5020
5020
  position: absolute;
5021
5021
  inset: 0;
5022
5022
  pointer-events: none;
5023
5023
  background: linear-gradient(to bottom, rgb(10 27 43 / 0.33) 0%, transparent 23%, transparent 54%, rgb(6 19 26 / 0.67) 100%);
5024
5024
  }
5025
- :where(.vue-chat, .vue-chat *).call-badge[data-v-4431f1c1] {
5025
+ :where(.vue-chat, .vue-chat *).call-badge[data-v-05c663ae] {
5026
5026
  position: absolute;
5027
5027
  display: flex;
5028
5028
  gap: 0.5rem;
@@ -5035,11 +5035,11 @@
5035
5035
  background: rgb(6 20 27 / 0.67);
5036
5036
  backdrop-filter: blur(10px);
5037
5037
  }
5038
- :where(.vue-chat, .vue-chat *).call-badge--camera[data-v-4431f1c1] {
5038
+ :where(.vue-chat, .vue-chat *).call-badge--camera[data-v-05c663ae] {
5039
5039
  top: 1.0625rem;
5040
5040
  inset-inline-start: 1.0625rem;
5041
5041
  }
5042
- :where(.vue-chat, .vue-chat *).call-badge--tile[data-v-4431f1c1] {
5042
+ :where(.vue-chat, .vue-chat *).call-badge--tile[data-v-05c663ae] {
5043
5043
  top: 0.75rem;
5044
5044
  inset-inline-start: 0.75rem;
5045
5045
  padding: 0.3125rem 0.5rem;
@@ -5050,13 +5050,13 @@
5050
5050
  background: rgb(13 23 37 / 0.49);
5051
5051
  backdrop-filter: none;
5052
5052
  }
5053
- :where(.vue-chat, .vue-chat *).call-badge--center[data-v-4431f1c1] {
5053
+ :where(.vue-chat, .vue-chat *).call-badge--center[data-v-05c663ae] {
5054
5054
  top: 50%;
5055
5055
  left: 50%;
5056
5056
  transform: translate(-50%, -50%);
5057
5057
  white-space: nowrap;
5058
5058
  }
5059
- :where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-4431f1c1] {
5059
+ :where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-05c663ae] {
5060
5060
  position: absolute !important;
5061
5061
  top: 1.0625rem;
5062
5062
  inset-inline-end: 1.0625rem;
@@ -5069,31 +5069,13 @@
5069
5069
  background: rgb(6 20 27 / 0.57) !important;
5070
5070
  backdrop-filter: blur(12px);
5071
5071
  }
5072
- :where(.vue-chat, .vue-chat *).call-screen .call-pin[data-v-4431f1c1] {
5073
- position: absolute !important;
5074
- top: 1.0625rem;
5075
- inset-inline-end: 4rem;
5076
- width: 2.375rem;
5077
- height: 2.375rem;
5078
- padding: 0 !important;
5079
- color: #fff !important;
5080
- border: 1px solid rgb(255 255 255 / 0.28) !important;
5081
- border-radius: 12px !important;
5082
- background: rgb(6 20 27 / 0.57) !important;
5083
- backdrop-filter: blur(12px);
5084
- }
5085
- :where(.vue-chat, .vue-chat *).call-screen .call-pin--active[data-v-4431f1c1] {
5086
- color: #15232d !important;
5087
- border-color: #84e1d3 !important;
5088
- background: #84e1d3 !important;
5089
- }
5090
- :where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-4431f1c1]::after {
5072
+ :where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-05c663ae]::after {
5091
5073
  /* The design's 38px, with a thumb's reach. */
5092
5074
  content: '';
5093
5075
  position: absolute;
5094
5076
  inset: -3px;
5095
5077
  }
5096
- :where(.vue-chat, .vue-chat *).call-screen .call-sound[data-v-4431f1c1] {
5078
+ :where(.vue-chat, .vue-chat *).call-screen .call-sound[data-v-05c663ae] {
5097
5079
  position: absolute !important;
5098
5080
  top: 4rem;
5099
5081
  left: 50%;
@@ -5105,7 +5087,7 @@
5105
5087
  background: var(--text-primary) !important;
5106
5088
  transform: translateX(-50%);
5107
5089
  }
5108
- :where(.vue-chat, .vue-chat *).call-main-footer[data-v-4431f1c1] {
5090
+ :where(.vue-chat, .vue-chat *).call-main-footer[data-v-05c663ae] {
5109
5091
  position: absolute;
5110
5092
  inset-inline: clamp(0.75rem, 3.3vw, 1.125rem);
5111
5093
  bottom: clamp(0.75rem, 3.3vw, 1.125rem);
@@ -5114,7 +5096,7 @@
5114
5096
  align-items: flex-end;
5115
5097
  justify-content: space-between;
5116
5098
  }
5117
- :where(.vue-chat, .vue-chat *).call-identity[data-v-4431f1c1] {
5099
+ :where(.vue-chat, .vue-chat *).call-identity[data-v-05c663ae] {
5118
5100
  display: flex;
5119
5101
  flex: 1 1 0;
5120
5102
  flex-direction: column;
@@ -5122,7 +5104,7 @@
5122
5104
  align-items: flex-start;
5123
5105
  min-width: 0;
5124
5106
  }
5125
- :where(.vue-chat, .vue-chat *).call-identity strong[data-v-4431f1c1] {
5107
+ :where(.vue-chat, .vue-chat *).call-identity strong[data-v-05c663ae] {
5126
5108
  display: -webkit-box;
5127
5109
  overflow: hidden;
5128
5110
  font-size: clamp(1rem, 3.9vw, 1.3125rem);
@@ -5131,12 +5113,12 @@
5131
5113
  -webkit-box-orient: vertical;
5132
5114
  -webkit-line-clamp: 2;
5133
5115
  }
5134
- :where(.vue-chat, .vue-chat *).call-identity small[data-v-4431f1c1] {
5116
+ :where(.vue-chat, .vue-chat *).call-identity small[data-v-05c663ae] {
5135
5117
  margin-top: 0.25rem;
5136
5118
  color: #d8e4e7;
5137
5119
  font-size: 0.75rem;
5138
5120
  }
5139
- :where(.vue-chat, .vue-chat *).call-torch-note[data-v-4431f1c1] {
5121
+ :where(.vue-chat, .vue-chat *).call-torch-note[data-v-05c663ae] {
5140
5122
  display: inline-flex;
5141
5123
  gap: 0.4375rem;
5142
5124
  align-items: center;
@@ -5149,12 +5131,12 @@
5149
5131
  border-radius: 10px;
5150
5132
  background: rgb(10 18 27 / 0.55);
5151
5133
  }
5152
- :where(.vue-chat, .vue-chat *).call-torch-note--on[data-v-4431f1c1] {
5134
+ :where(.vue-chat, .vue-chat *).call-torch-note--on[data-v-05c663ae] {
5153
5135
  color: #b2fbe9;
5154
5136
  border-color: rgb(112 224 197 / 0.3);
5155
5137
  background: rgb(13 52 45 / 0.9);
5156
5138
  }
5157
- :where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-4431f1c1] {
5139
+ :where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-05c663ae] {
5158
5140
  flex-shrink: 0;
5159
5141
  gap: 0.5rem;
5160
5142
  min-height: 2.875rem;
@@ -5169,38 +5151,38 @@
5169
5151
  box-shadow: 0 7px 22px rgb(29 26 10 / 0.37);
5170
5152
  opacity: 1 !important;
5171
5153
  }
5172
- :where(.vue-chat, .vue-chat *).call-screen .call-torch-float--on[data-v-4431f1c1] {
5154
+ :where(.vue-chat, .vue-chat *).call-screen .call-torch-float--on[data-v-05c663ae] {
5173
5155
  color: #222327 !important;
5174
5156
  background: var(--accent-yellow) !important;
5175
5157
  }
5176
- :where(.vue-chat, .vue-chat *).call-others-title[data-v-4431f1c1] {
5158
+ :where(.vue-chat, .vue-chat *).call-others-title[data-v-05c663ae] {
5177
5159
  display: flex;
5178
5160
  flex-shrink: 0;
5179
5161
  align-items: center;
5180
5162
  justify-content: space-between;
5181
5163
  margin: clamp(0.375rem, 1.7dvh, 1.125rem) calc(var(--gutter) + 2px) clamp(0.25rem, 1dvh, 0.6875rem);
5182
5164
  }
5183
- :where(.vue-chat, .vue-chat *).call-others-title h2[data-v-4431f1c1] {
5165
+ :where(.vue-chat, .vue-chat *).call-others-title h2[data-v-05c663ae] {
5184
5166
  color: var(--text-secondary);
5185
5167
  font-size: 0.8125rem;
5186
5168
  font-weight: 400;
5187
5169
  }
5188
- :where(.vue-chat, .vue-chat *).call-others-title span[data-v-4431f1c1] {
5170
+ :where(.vue-chat, .vue-chat *).call-others-title span[data-v-05c663ae] {
5189
5171
  color: var(--text-muted);
5190
5172
  font-size: 0.6875rem;
5191
5173
  }
5192
- :where(.vue-chat, .vue-chat *).call-others[data-v-4431f1c1] {
5174
+ :where(.vue-chat, .vue-chat *).call-others[data-v-05c663ae] {
5193
5175
  display: flex;
5194
5176
  flex-shrink: 0;
5195
5177
  gap: 0.75rem;
5196
5178
  height: clamp(5.75rem, 16.76dvh, 11.3125rem);
5197
5179
  padding-inline: var(--gutter);
5198
5180
  }
5199
- :where(.vue-chat, .vue-chat *).call-others--scroll[data-v-4431f1c1] {
5181
+ :where(.vue-chat, .vue-chat *).call-others--scroll[data-v-05c663ae] {
5200
5182
  overflow-x: auto;
5201
5183
  scrollbar-width: none;
5202
5184
  }
5203
- :where(.vue-chat, .vue-chat *).call-tile[data-v-4431f1c1] {
5185
+ :where(.vue-chat, .vue-chat *).call-tile[data-v-05c663ae] {
5204
5186
  position: relative;
5205
5187
  flex: 1 1 0;
5206
5188
  min-width: 0;
@@ -5211,21 +5193,21 @@
5211
5193
  outline-offset: -1px;
5212
5194
  background: #1c2a36;
5213
5195
  }
5214
- :where(.vue-chat, .vue-chat *).call-tile--off[data-v-4431f1c1] {
5196
+ :where(.vue-chat, .vue-chat *).call-tile--off[data-v-05c663ae] {
5215
5197
  background: radial-gradient(circle at 50% 40%, #32445a 0%, #192633 66%);
5216
5198
  }
5217
- :where(.vue-chat, .vue-chat *).call-tile[data-v-4431f1c1]::after {
5199
+ :where(.vue-chat, .vue-chat *).call-tile[data-v-05c663ae]::after {
5218
5200
  content: '';
5219
5201
  position: absolute;
5220
5202
  inset: 0;
5221
5203
  pointer-events: none;
5222
5204
  background: linear-gradient(to bottom, transparent 35%, rgb(14 27 38 / 0.68) 100%);
5223
5205
  }
5224
- :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-4431f1c1] {
5206
+ :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-05c663ae] {
5225
5207
  flex: 0 0 44%;
5226
5208
  max-width: none;
5227
5209
  }
5228
- :where(.vue-chat, .vue-chat *).call-avatar[data-v-4431f1c1] {
5210
+ :where(.vue-chat, .vue-chat *).call-avatar[data-v-05c663ae] {
5229
5211
  position: absolute;
5230
5212
  top: 45%;
5231
5213
  left: 50%;
@@ -5240,11 +5222,11 @@
5240
5222
  background: #3d496c;
5241
5223
  transform: translate(-50%, -50%);
5242
5224
  }
5243
- :where(.vue-chat, .vue-chat *).call-avatar--large[data-v-4431f1c1] {
5225
+ :where(.vue-chat, .vue-chat *).call-avatar--large[data-v-05c663ae] {
5244
5226
  width: 6rem;
5245
5227
  font-size: 2rem;
5246
5228
  }
5247
- :where(.vue-chat, .vue-chat *).call-tile-footer[data-v-4431f1c1] {
5229
+ :where(.vue-chat, .vue-chat *).call-tile-footer[data-v-05c663ae] {
5248
5230
  position: absolute;
5249
5231
  inset-inline: clamp(0.5rem, 2.2vw, 0.75rem);
5250
5232
  bottom: clamp(0.5rem, 2.2vw, 0.75rem);
@@ -5254,7 +5236,7 @@
5254
5236
  align-items: center;
5255
5237
  justify-content: space-between;
5256
5238
  }
5257
- :where(.vue-chat, .vue-chat *).call-name[data-v-4431f1c1] {
5239
+ :where(.vue-chat, .vue-chat *).call-name[data-v-05c663ae] {
5258
5240
  overflow: hidden;
5259
5241
  padding: 0.4375rem 0.5625rem;
5260
5242
  font-size: 0.75rem;
@@ -5264,7 +5246,7 @@
5264
5246
  border-radius: 9px;
5265
5247
  background: rgb(13 21 39 / 0.72);
5266
5248
  }
5267
- :where(.vue-chat, .vue-chat *).call-mic[data-v-4431f1c1] {
5249
+ :where(.vue-chat, .vue-chat *).call-mic[data-v-05c663ae] {
5268
5250
  display: grid;
5269
5251
  flex-shrink: 0;
5270
5252
  place-items: center;
@@ -5274,11 +5256,11 @@
5274
5256
  border-radius: 9px;
5275
5257
  background: #143e3a;
5276
5258
  }
5277
- :where(.vue-chat, .vue-chat *).call-mic--off[data-v-4431f1c1] {
5259
+ :where(.vue-chat, .vue-chat *).call-mic--off[data-v-05c663ae] {
5278
5260
  color: #fff;
5279
5261
  background: #ef5764;
5280
5262
  }
5281
- :where(.vue-chat, .vue-chat *).call-screen .call-tile-pick[data-v-4431f1c1] {
5263
+ :where(.vue-chat, .vue-chat *).call-screen .call-tile-pick[data-v-05c663ae] {
5282
5264
  position: absolute !important;
5283
5265
  inset: 0;
5284
5266
  z-index: 2;
@@ -5289,7 +5271,7 @@
5289
5271
  border-radius: inherit !important;
5290
5272
  background: transparent !important;
5291
5273
  }
5292
- :where(.vue-chat, .vue-chat *).call-controls[data-v-4431f1c1] {
5274
+ :where(.vue-chat, .vue-chat *).call-controls[data-v-05c663ae] {
5293
5275
  display: flex;
5294
5276
  flex-shrink: 0;
5295
5277
  align-items: center;
@@ -5303,55 +5285,7 @@
5303
5285
  0 -8px 26px rgb(0 0 0 / 0.14),
5304
5286
  0 16px 32px rgb(0 0 0 / 0.27);
5305
5287
  }
5306
- :where(.vue-chat, .vue-chat *).call-control[data-v-4431f1c1] {
5307
- display: flex;
5308
- flex: 1 1 0;
5309
- flex-direction: column;
5310
- gap: clamp(0.25rem, 0.65dvh, 0.4375rem);
5311
- align-items: center;
5312
- justify-content: center;
5313
- min-width: 0;
5314
- color: #c6d4e1;
5315
- font-size: 0.6875rem;
5316
- font-weight: 600;
5317
- text-align: center;
5318
- white-space: nowrap;
5319
- }
5320
- :where(.vue-chat, .vue-chat *).call-control--lit[data-v-4431f1c1] {
5321
- color: #ffc572;
5322
- }
5323
- :where(.vue-chat, .vue-chat *).call-control--end[data-v-4431f1c1] {
5324
- color: #f4a9ae;
5325
- }
5326
- :where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-4431f1c1] {
5327
- width: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
5328
- height: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
5329
- padding: 0 !important;
5330
- color: #eff6fb !important;
5331
- border: 1px solid rgb(255 255 255 / 0.1) !important;
5332
- border-radius: 19px !important;
5333
- background: var(--background-control) !important;
5334
- opacity: 1 !important;
5335
- transition: transform 0.12s;
5336
- }
5337
- :where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-4431f1c1]:active,
5338
- :where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-4431f1c1]:active {
5339
- transform: scale(0.94);
5340
- }
5341
- :where(.vue-chat, .vue-chat *).call-screen .call-control-button--lit[data-v-4431f1c1] {
5342
- color: #242c33 !important;
5343
- border-color: #ffdb95 !important;
5344
- background: var(--accent-yellow) !important;
5345
- box-shadow: 0 4px 18px rgb(236 173 74 / 0.18);
5346
- }
5347
- :where(.vue-chat, .vue-chat *).call-screen .call-control-button--end[data-v-4431f1c1] {
5348
- color: #fff !important;
5349
- border-color: var(--accent-danger-border) !important;
5350
- border-radius: 20px !important;
5351
- background: var(--accent-danger) !important;
5352
- box-shadow: 0 5px 20px rgb(238 62 80 / 0.22);
5353
- }
5354
- :where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-4431f1c1] {
5288
+ :where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-05c663ae] {
5355
5289
  position: fixed;
5356
5290
  inset: 0;
5357
5291
  z-index: 10;
@@ -5360,7 +5294,7 @@
5360
5294
  background: rgb(0 0 0 / 0.58);
5361
5295
  backdrop-filter: blur(3px);
5362
5296
  }
5363
- :where(.vue-chat, .vue-chat *).call-members[data-v-4431f1c1] {
5297
+ :where(.vue-chat, .vue-chat *).call-members[data-v-05c663ae] {
5364
5298
  width: 100%;
5365
5299
  max-height: min(75dvh, 36rem);
5366
5300
  padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
@@ -5371,13 +5305,13 @@
5371
5305
  background: #17222d;
5372
5306
  box-shadow: 0 -18px 50px rgb(0 0 0 / 0.35);
5373
5307
  }
5374
- :where(.vue-chat, .vue-chat *).call-members header[data-v-4431f1c1] {
5308
+ :where(.vue-chat, .vue-chat *).call-members header[data-v-05c663ae] {
5375
5309
  display: flex;
5376
5310
  align-items: center;
5377
5311
  justify-content: space-between;
5378
5312
  margin-bottom: 0.75rem;
5379
5313
  }
5380
- :where(.vue-chat, .vue-chat *).call-screen .call-members-close[data-v-4431f1c1] {
5314
+ :where(.vue-chat, .vue-chat *).call-screen .call-members-close[data-v-05c663ae] {
5381
5315
  width: 2.5rem;
5382
5316
  height: 2.5rem;
5383
5317
  padding: 0 !important;
@@ -5386,12 +5320,12 @@
5386
5320
  border-radius: 12px !important;
5387
5321
  background: var(--background-control) !important;
5388
5322
  }
5389
- :where(.vue-chat, .vue-chat *).call-members ul[data-v-4431f1c1] {
5323
+ :where(.vue-chat, .vue-chat *).call-members ul[data-v-05c663ae] {
5390
5324
  display: flex;
5391
5325
  flex-direction: column;
5392
5326
  gap: 0.625rem;
5393
5327
  }
5394
- :where(.vue-chat, .vue-chat *).call-members li[data-v-4431f1c1] {
5328
+ :where(.vue-chat, .vue-chat *).call-members li[data-v-05c663ae] {
5395
5329
  display: flex;
5396
5330
  gap: 0.75rem;
5397
5331
  align-items: center;
@@ -5400,11 +5334,11 @@
5400
5334
  border-radius: 16px;
5401
5335
  background: var(--background-panel);
5402
5336
  }
5403
- :where(.vue-chat, .vue-chat *).call-members li.is-main[data-v-4431f1c1] {
5337
+ :where(.vue-chat, .vue-chat *).call-members li.is-main[data-v-05c663ae] {
5404
5338
  border-color: rgb(42 201 188 / 0.75);
5405
5339
  box-shadow: inset 0 0 0 1px rgb(42 201 188 / 0.18);
5406
5340
  }
5407
- :where(.vue-chat, .vue-chat *).call-member-avatar[data-v-4431f1c1] {
5341
+ :where(.vue-chat, .vue-chat *).call-member-avatar[data-v-05c663ae] {
5408
5342
  display: grid;
5409
5343
  flex: 0 0 2.5rem;
5410
5344
  place-items: center;
@@ -5412,22 +5346,22 @@
5412
5346
  border-radius: 50%;
5413
5347
  background: #3d496c;
5414
5348
  }
5415
- :where(.vue-chat, .vue-chat *).call-member-name[data-v-4431f1c1] {
5349
+ :where(.vue-chat, .vue-chat *).call-member-name[data-v-05c663ae] {
5416
5350
  display: flex;
5417
5351
  flex: 1 1 0;
5418
5352
  flex-direction: column;
5419
5353
  min-width: 0;
5420
5354
  }
5421
- :where(.vue-chat, .vue-chat *).call-member-name strong[data-v-4431f1c1] {
5355
+ :where(.vue-chat, .vue-chat *).call-member-name strong[data-v-05c663ae] {
5422
5356
  overflow: hidden;
5423
5357
  white-space: nowrap;
5424
5358
  text-overflow: ellipsis;
5425
5359
  }
5426
- :where(.vue-chat, .vue-chat *).call-member-name small[data-v-4431f1c1] {
5360
+ :where(.vue-chat, .vue-chat *).call-member-name small[data-v-05c663ae] {
5427
5361
  color: var(--text-muted);
5428
5362
  font-size: 0.6875rem;
5429
5363
  }
5430
- :where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-4431f1c1] {
5364
+ :where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-05c663ae] {
5431
5365
  flex-shrink: 0;
5432
5366
  padding: 0.625rem 0.75rem !important;
5433
5367
  color: #102026 !important;
@@ -5436,51 +5370,51 @@
5436
5370
  border-radius: 11px !important;
5437
5371
  background: var(--accent-turquoise) !important;
5438
5372
  }
5439
- :where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-4431f1c1]:disabled {
5373
+ :where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-05c663ae]:disabled {
5440
5374
  color: #b5eee7 !important;
5441
5375
  background: #1e514f !important;
5442
5376
  opacity: 1;
5443
5377
  }
5444
5378
  @media (min-width: 768px) {
5445
- :where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-4431f1c1] {
5379
+ :where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-05c663ae] {
5446
5380
  align-items: stretch;
5447
5381
  justify-content: flex-start;
5448
5382
  }
5449
- :where(.vue-chat, .vue-chat *).call-members[data-v-4431f1c1] {
5383
+ :where(.vue-chat, .vue-chat *).call-members[data-v-05c663ae] {
5450
5384
  width: min(25rem, 42vw);
5451
5385
  max-height: none;
5452
5386
  border-radius: 0 24px 24px 0;
5453
5387
  }
5454
5388
  }
5455
5389
  @media (min-width: 768px) {
5456
- :where(.vue-chat, .vue-chat *).call-others[data-v-4431f1c1] {
5390
+ :where(.vue-chat, .vue-chat *).call-others[data-v-05c663ae] {
5457
5391
  height: clamp(8rem, 20dvh, 13rem);
5458
5392
  }
5459
5393
  }
5460
5394
  @media (min-width: 768px) {
5461
- :where(.vue-chat, .vue-chat *).call-screen[data-v-4431f1c1] {
5395
+ :where(.vue-chat, .vue-chat *).call-screen[data-v-05c663ae] {
5462
5396
  display: grid;
5463
5397
  grid-template-rows: auto auto minmax(0, 1fr) auto;
5464
5398
  grid-template-columns: clamp(17rem, 23vw, 22rem) minmax(0, 1fr);
5465
5399
  gap: 0 1rem;
5466
5400
  padding: 1.5rem;
5467
5401
  }
5468
- :where(.vue-chat, .vue-chat *).call-header[data-v-4431f1c1] {
5402
+ :where(.vue-chat, .vue-chat *).call-header[data-v-05c663ae] {
5469
5403
  grid-row: 1;
5470
5404
  grid-column: 1 / 3;
5471
5405
  margin: 0 0 1.25rem;
5472
5406
  }
5473
- :where(.vue-chat, .vue-chat *).call-main[data-v-4431f1c1] {
5407
+ :where(.vue-chat, .vue-chat *).call-main[data-v-05c663ae] {
5474
5408
  grid-row: 2 / 4;
5475
5409
  grid-column: 2;
5476
5410
  margin: 0;
5477
5411
  }
5478
- :where(.vue-chat, .vue-chat *).call-others-title[data-v-4431f1c1] {
5412
+ :where(.vue-chat, .vue-chat *).call-others-title[data-v-05c663ae] {
5479
5413
  grid-row: 2;
5480
5414
  grid-column: 1;
5481
5415
  margin: 0 0 0.75rem;
5482
5416
  }
5483
- :where(.vue-chat, .vue-chat *).call-others[data-v-4431f1c1] {
5417
+ :where(.vue-chat, .vue-chat *).call-others[data-v-05c663ae] {
5484
5418
  grid-row: 3;
5485
5419
  grid-column: 1;
5486
5420
  flex-direction: column;
@@ -5491,20 +5425,86 @@
5491
5425
  overflow-x: hidden;
5492
5426
  overflow-y: auto;
5493
5427
  }
5494
- :where(.vue-chat, .vue-chat *).call-tile[data-v-4431f1c1],
5495
- :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-4431f1c1] {
5428
+ :where(.vue-chat, .vue-chat *).call-tile[data-v-05c663ae],
5429
+ :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-05c663ae] {
5496
5430
  flex: 0 0 clamp(8.5rem, 20vh, 12rem);
5497
5431
  width: 100%;
5498
5432
  max-width: none;
5499
5433
  }
5500
- :where(.vue-chat, .vue-chat *).call-controls[data-v-4431f1c1] {
5434
+ :where(.vue-chat, .vue-chat *).call-controls[data-v-05c663ae] {
5501
5435
  grid-row: 4;
5502
5436
  grid-column: 1 / 3;
5503
5437
  margin: 1.25rem 0 0;
5504
5438
  }
5505
5439
  }
5440
+
5441
+
5442
+ :where(.vue-chat, .vue-chat *).call-control {
5443
+ display: flex;
5444
+ flex: 1 1 0;
5445
+ flex-direction: column;
5446
+ gap: clamp(0.25rem, 0.65dvh, 0.4375rem);
5447
+ align-items: center;
5448
+ justify-content: center;
5449
+ min-width: 0;
5450
+ color: #c6d4e1;
5451
+ font-size: 0.6875rem;
5452
+ font-weight: 600;
5453
+ text-align: center;
5454
+ white-space: nowrap;
5455
+ }
5456
+ :where(.vue-chat, .vue-chat *).call-control--lit {
5457
+ color: #ffc572;
5458
+ }
5459
+ :where(.vue-chat, .vue-chat *).call-control--end {
5460
+ color: #f4a9ae;
5461
+ }
5462
+ :where(.vue-chat, .vue-chat *).call-screen .call-control-button {
5463
+ position: relative;
5464
+ display: grid;
5465
+ place-items: center;
5466
+ width: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
5467
+ height: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
5468
+ padding: 0 !important;
5469
+ color: #eff6fb !important;
5470
+ border: 1px solid rgb(255 255 255 / 0.1) !important;
5471
+ border-radius: 19px !important;
5472
+ background: var(--background-control) !important;
5473
+ opacity: 1 !important;
5474
+ transition: transform 0.12s;
5475
+ }
5476
+
5477
+ /* Keep the glyph centred independently of the host application's SVG and RTL rules. */
5478
+ :where(.vue-chat, .vue-chat *).call-screen .call-control-button > svg {
5479
+ position: absolute;
5480
+ top: 50%;
5481
+ left: 50%;
5482
+ display: block;
5483
+ flex: none;
5484
+ width: 1.5rem;
5485
+ height: 1.5rem;
5486
+ margin: 0;
5487
+ transform: translate(-50%, -50%);
5488
+ }
5489
+ :where(.vue-chat, .vue-chat *).call-screen .call-control-button:active,
5490
+ :where(.vue-chat, .vue-chat *).call-screen .call-torch-float:active {
5491
+ transform: scale(0.94);
5492
+ }
5493
+ :where(.vue-chat, .vue-chat *).call-screen .call-control-button--lit {
5494
+ color: #242c33 !important;
5495
+ border-color: #ffdb95 !important;
5496
+ background: var(--accent-yellow) !important;
5497
+ box-shadow: 0 4px 18px rgb(236 173 74 / 0.18);
5498
+ }
5499
+ :where(.vue-chat, .vue-chat *).call-screen .call-control-button--end {
5500
+ color: #fff !important;
5501
+ border-color: var(--accent-danger-border) !important;
5502
+ border-radius: 20px !important;
5503
+ background: var(--accent-danger) !important;
5504
+ box-shadow: 0 5px 20px rgb(238 62 80 / 0.22);
5505
+ }
5506
5506
  @media (prefers-reduced-motion: reduce) {
5507
- :where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-4431f1c1] {
5507
+ :where(.vue-chat, .vue-chat *).call-screen .call-control-button {
5508
5508
  transition: none;
5509
5509
  }
5510
5510
  }