fcr-ui-scene 3.8.0-alpha → 3.8.1-alpha

package/lib/modules/layout/components/index.css

@@ -1,653 +1,653 @@
-.fcr-layout {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  gap: 3px;
-  background-color: var(--fcr_web_ui_scene_fill3);
-  height: 100%;
-  overflow: hidden;
-  min-width: 825px;
-  min-height: 460px;
-}
-
-.fcr-layout-aside {
-  display: none;
-  position: relative;
-}
-
-.fcr-layout-aside-active {
-  display: flex;
-  z-index: 12;
-}
-
-.fcr-layout-aside-handler {
-  position: absolute;
-  right: calc(100% + 3px);
-  width: 8px;
-  height: 100%;
-  color: var(--fcr_ui_scene_icontext2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ew-resize;
-  /* background-color: var(--fcr_ui_scene_video); */
-}
-
-.fcr-layout-aside-body {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 3px;
-  align-items: stretch;
-  position: relative;
-  overflow: hidden;
-}
-
-.fcr-layout-aside-body-column {
-  flex: 1;
-  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: stretch;
-  position: relative;
-  overflow: hidden;
-}
-
-.fcr-layout-side-body-translate {
-  flex: 0;
-}
-
-.fcr-layout-aside-body-up {
-  flex: 1;
-}
-
-.fcr-layout-aside-body-divider {
-  position: absolute;
-  width: 100%;
-  cursor: ns-resize;
-}
-
-.fcr-layout-aside-body-up,
-.fcr-layout-aside-body-down {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-  color: var(--fcr_ui_scene_icontext1);
-  font-weight: var(--fcr_font_weight_x);
-}
-
-.fcr-layout-aside-body-divider::after {
-  content: '';
-  position: absolute;
-  top: 7.5px;
-  width: 100%;
-  height: 1px;
-  background-color: var(--fcr_ui_scene_line1);
-}
-
-.fcr-layout-speaking {
-  height: 0 !important;
-  z-index: 1;
-  display: none;
-}
-
-.fcr-layout-speaking-active {
-  display: flex;
-  align-items: flex-start;
-}
-
-.fcr-layout-speaking-content {
-  width: 100%;
-  height: 18px;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--fcr_ui_scene_icontext1);
-  background-color: var(--fcr_ui_scene_view_toast);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fcr-layout-content {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  position: relative;
-}
-
-.fcr-layout-content-carousel {
-  display: flex;
-  flex-flow: column-reverse nowrap;
-  background-color: var(--fcr_web_ui_scene_fill2);
-  transition:
-    height 0.2s,
-    opacity 0.2s;
-  position: relative;
-}
-
-.fcr-layout-content-carousel-wrapper {
-  display: flex;
-  flex-flow: column nowrap;
-}
-
-.fcr-layout-content-carousel-collapsed {
-  height: 0 !important;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.fcr-layout-content-expand {
-  height: 0 !important;
-  z-index: 11;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s;
-  pointer-events: none;
-  color: var(--fcr_web_ui_scene_mainicon1);
-}
-
-.fcr-layout-content-collapsed {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* .fcr-layout-gallery {
-  min-width: 825px;
-} */
-
-.fcr-layout-gallery .fcr-layout-content-expand {
-  display: none;
-}
-
-.fcr-layout-content-expand button {
-  margin-bottom: 2px;
-  padding: 4px 14px 0;
-  border: 1px solid var(--fcr_ui_scene_line1);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border-bottom-width: 0;
-  background-color: var(--fcr_web_ui_scene_fill2);
-  font-size: 0;
-}
-
-.fcr-layout-content-expand button:active {
-  outline: none;
-}
-
-.fcr-layout-content-expand button:focus {
-  outline: none;
-}
-
-.fcr-layout-content-expand svg {
-  transform: rotate(180deg);
-  height: 20px;
-}
-
-.fcr-layout-content-carousel-dragging {
-  transition-duration: 0ms;
-}
-
-.fcr-layout-content-carousel-list {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-}
-
-.fcr-layout-content-carousel-items {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-}
-
-.fcr-layout-content-carousel-items .fcr-layout-content-carousel-item {
-  border-radius: var(--fcr_cornerradius_s);
-  overflow: hidden;
-}
-
-.fcr-layout-content-carousel-items .fcr-layout-content-carousel-item .fcr-member-window-excitation {
-  border-radius: var(--fcr_cornerradius_s);
-}
-
-.fcr-layout-content-carousel-arrow {
-  height: 100%;
-  outline: none;
-  border-radius: var(--fcr_cornerradius_xxs);
-  color: var(--fcr_web_ui_scene_mainicon1);
-  background-color: var(--fcr_ui_scene_view_toast);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0;
-}
-
-.fcr-layout-content-carousel-arrow:hover {
-  color: var(--fcr_web_ui_scene_mainicon2);
-  background-color: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-layout-content-carousel-arrow > svg {
-  width: 20px;
-  height: 48px;
-  pointer-events: none;
-}
-
-.fcr-layout-content-carousel-arrow:disabled {
-  visibility: hidden;
-}
-
-.fcr-layout-content-carousel-collapse {
-  color: var(--fcr_ui_scene_icontext2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0;
-}
-
-.fcr-layout-content-carousel-collapse:active {
-  outline: none;
-}
-
-.fcr-layout-content-carousel-collapse:hover {
-  color: var(--fcr_ui_scene_icontext2);
-  background-color: var(--fcr_web_ui_scene_hover2);
-}
-
-.fcr-layout-content-carousel-collapse > svg {
-  width: 48px;
-  pointer-events: none;
-}
-
-.fcr-layout-content-carousel-handler {
-  display: flex;
-  font-size: 0;
-  cursor: ns-resize;
-  transition: background-color 0.2s;
-}
-
-.fcr-layout-content-carousel-handler:hover,
-.fcr-layout-content-carousel-handler-dragging {
-  background-color: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-layout-content-gallery {
-  flex: 1;
-  background-color: var(--fcr_web_ui_scene_fill1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.fcr-layout-content-gallery-wrapper {
-  display: flex;
-  /* flex-flow: column nowrap; */
-  justify-content: center;
-  font-size: 0;
-  top: 0;
-  flex-wrap: wrap;
-}
-
-.fcr-layout-content-gallery-return-bar {
-  width: 100%;
-  height: 28px;
-  background: var(--fcr_mobile_ui_scene_color_popup_block3);
-  font-size: 12px;
-  margin-top: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.fcr-layout-content-gallery-return-bar .fcr-button-XXS {
-  height: 20px;
-  margin-left: 24px;
-}
-
-.fcr-layout-content-gallery-row {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  font-size: 1rem;
-}
-
-.fcr-layout-content-gallery-wrapper .fcr-layout-content-gallery-row-item {
-  border-radius: var(--fcr_cornerradius_s);
-  overflow: hidden;
-}
-
-.fcr-layout-content-gallery-wrapper .fcr-layout-content-gallery-row-noborder {
-  border-radius: 0px;
-}
-
-.fcr-layout-content-gallery-wrapper
-  .fcr-layout-content-gallery-row-item
-  .fcr-member-window-excitation {
-  border-radius: var(--fcr_cornerradius_s);
-}
-
-.fcr-layout-content-gallery-arrows {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.fcr-layout-content-gallery-arrow {
-  pointer-events: auto;
-  position: absolute;
-  /* top: calc(100% - 160px); */
-  bottom: 155px;
-  background-color: var(--fcr_web_ui_scene_fill4_popup);
-  border-radius: 8px;
-  box-shadow: var(--fcr_web_light_dropup);
-  display: inline-flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  font-size: 12px;
-  z-index: 10;
-}
-
-.fcr-layout-content-gallery-arrow:has(button:disabled) {
-  visibility: hidden;
-}
-
-.fcr-layout-content-gallery-arrow button {
-  color: var(--fcr_web_ui_scene_mainicon1);
-  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0;
-}
-
-.fcr-layout-content-gallery-arrow button:hover {
-  color: var(--fcr_web_ui_scene_mainicon2);
-  background-color: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-layout-content-gallery-arrow button svg {
-  width: 30px;
-  height: 30px;
-}
-
-.fcr-layout-content-gallery-arrow-content {
-  padding: 3px 0 7px;
-  line-height: 1.25;
-  user-select: none;
-}
-
-.fcr-user-window {
-  color: var(--fcr_ui_scene_icontext1);
-  border-radius: var(--fcr_cornerradius_s);
-  background-color: var(--fcr_ui_scene_video);
-  font-size: 12px;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-}
-
-.fcr-user-window-background {
-  position: absolute;
-  inset: 0;
-  color: var(--fcr_ui_scene_icontext3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  visibility: hidden;
-}
-
-.fcr-user-window-is-broken {
-  visibility: visible;
-}
-
-.fcr-user-window-background svg {
-  opacity: 0.3;
-}
-
-.fcr-user-window-avatar {
-  padding: 0 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-}
-
-.fcr-user-window-avatar svg {
-  width: 52%;
-}
-
-.fcr-user-window-body {
-  position: absolute;
-  inset: 0;
-  font-size: 0;
-}
-
-.fcr-user-window-actions {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  transition: opacity 0.2s;
-  overflow: hidden;
-}
-
-.fcr-user-window-actions-hide {
-  opacity: 0;
-}
-
-.fcr-user-window-actions button {
-  pointer-events: auto;
-}
-
-.fcr-user-window-actions-middle {
-  inset: auto auto 26px 4px;
-  font-size: 12px;
-  position: absolute;
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-bottom {
-  height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
-  font-size: 12px;
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-bottom .fcr-user-window-actions-microphone {
-  border-radius: var(--fcr_cornerradius_s);
-}
-
-.fcr-user-window-actions-tag {
-  height: 18px;
-  border-radius: var(--fcr_cornerradius_xxs);
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-tag {
-  height: 24px;
-  border-radius: var(--fcr_cornerradius_s);
-}
-
-.fcr-user-window-actions-tag-host {
-  color: var(--fcr_ui_scene_white10);
-  background: linear-gradient(90deg, #4262ff, #7c79ff);
-  padding: 0 8px;
-}
-
-.fcr-user-window-actions-tag-cohost {
-  background: var(--fcr_ui_scene_ramp_lightgreen6);
-}
-
-.fcr-user-window-actions-tag-host:has(svg) {
-  padding-left: 4px;
-}
-
-.fcr-user-window-actions-volume {
-  color: var(--fcr_ui_scene_icontext1);
-  --fcr-volume-icon-color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-user-window-actions-tag-host .fcr-user-window-actions-volume {
-  color: var(--fcr_ui_scene_white10);
-  --fcr-volume-icon-color: var(--fcr_ui_scene_white10);
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-tag-host {
-  padding: 0 13px;
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-tag-host:has(svg) {
-  padding-left: 6px;
-}
-
-.fcr-user-window-actions-microphone {
-  padding: 1px;
-  align-self: stretch;
-  display: inline-flex;
-  align-items: center;
-  color: var(--fcr_ui_scene_icontext1);
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_ui_scene_view_toast);
-  cursor: default;
-}
-
-.fcr-user-window-actions-tag-host .fcr-user-window-actions-microphone {
-  color: var(--fcr_ui_scene_white10);
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-microphone {
-  padding: 0;
-  background-color: transparent;
-}
-
-.fcr-user-window-actions-tag ~ .fcr-user-window-actions-microphone {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.fcr-user-window-actions-name {
-  padding: 0 8px;
-  font-weight: var(--fcr_font_weight_s);
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fcr-user-window-gallery .fcr-user-window-actions-name {
-  padding: 0 10px;
-}
-
-.fcr-user-window:hover .fcr-user-window-actions-top {
-  opacity: 1;
-}
-
-.fcr-user-window-actions-more {
-  padding: 3px;
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_web_ui_scene_hover3);
-}
-
-.fcr-user-window-actions-mute {
-  padding: 0 6px;
-  border-radius: var(--fcr_cornerradius_xxs);
-  background-color: var(--fcr_web_ui_scene_hover3);
-}
-
-.fcr-user-window-actions-mute:disabled {
-  display: none;
-}
-
-.fcr-layout-content-bar {
-  /* position: absolute; */
-  height: 0px;
-  width: 100%;
-  /* overflow: hidden; */
-  transition: height 0s;
-  z-index: 10;
-}
-
-.fcr-layout-speaker .fcr-layout-content-bar {
-  position: relative;
-}
-
-.fcr-layout-content-bar-body {
-  height: 0px;
-  /* overflow: hidden; */
-  transition: height 0.2s;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.fcr-layout-content-top {
-  top: 0;
-  display: flex;
-  flex-flow: column-reverse nowrap;
-  justify-content: flex-end;
-}
-
-.fcr-layout-content-top .fcr-layout-content-bar-body {
-  display: flex;
-  flex-flow: column-reverse nowrap;
-}
-
-.fcr-layout-content-bottom {
-  bottom: 0;
-  display: flex;
-  flex-flow: column-reverse nowrap;
-}
-
-.fcr-layout-hovering .fcr-layout-content-top,
-.fcr-layout-hovering .fcr-layout-content-top .fcr-layout-content-bar-body {
-  height: 34px;
-}
-
-.fcr-layout-hovering .fcr-layout-content-bottom,
-.fcr-layout-hovering .fcr-layout-content-bottom .fcr-layout-content-bar-body {
-  height: 55px;
-  width: 100%;
-  z-index: 100;
-}
-
-.fcr-layout-hovering .fcr-user-window-actions-top {
-  display: flex;
-}
-
-.fcr-layout-content-bar--hidden .fcr-layout-content-bar-body {
-  height: 0;
-}
-
-.fcr-layout-content-bar--hidden.fcr-layout-content-bottom,
-.fcr-layout-content-bar--hidden.fcr-layout-content-bottom .fcr-layout-content-bar-body {
-  height: 0px;
-  overflow: inherit;
-  position: relative;
-}
-
-.fcr-layout-adapter-div {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-end;
-}
-
-.participant-dialog-header-count {
-  font-weight: 400;
-}
-
-.fcr-layout-content-gallery-row-onlyone {
-  border-radius: 0px !important;
-}
+.fcr-layout {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  gap: 3px;
+  background-color: var(--fcr_web_ui_scene_fill3);
+  height: 100%;
+  overflow: hidden;
+  min-width: 825px;
+  min-height: 460px;
+}
+
+.fcr-layout-aside {
+  display: none;
+  position: relative;
+}
+
+.fcr-layout-aside-active {
+  display: flex;
+  z-index: 12;
+}
+
+.fcr-layout-aside-handler {
+  position: absolute;
+  right: calc(100% + 3px);
+  width: 8px;
+  height: 100%;
+  color: var(--fcr_ui_scene_icontext2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ew-resize;
+  /* background-color: var(--fcr_ui_scene_video); */
+}
+
+.fcr-layout-aside-body {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  align-items: stretch;
+  position: relative;
+  overflow: hidden;
+}
+
+.fcr-layout-aside-body-column {
+  flex: 1;
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  position: relative;
+  overflow: hidden;
+}
+
+.fcr-layout-side-body-translate {
+  flex: 0;
+}
+
+.fcr-layout-aside-body-up {
+  flex: 1;
+}
+
+.fcr-layout-aside-body-divider {
+  position: absolute;
+  width: 100%;
+  cursor: ns-resize;
+}
+
+.fcr-layout-aside-body-up,
+.fcr-layout-aside-body-down {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: var(--fcr_font_weight_x);
+}
+
+.fcr-layout-aside-body-divider::after {
+  content: '';
+  position: absolute;
+  top: 7.5px;
+  width: 100%;
+  height: 1px;
+  background-color: var(--fcr_ui_scene_line1);
+}
+
+.fcr-layout-speaking {
+  height: 0 !important;
+  z-index: 1;
+  display: none;
+}
+
+.fcr-layout-speaking-active {
+  display: flex;
+  align-items: flex-start;
+}
+
+.fcr-layout-speaking-content {
+  width: 100%;
+  height: 18px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_ui_scene_view_toast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-layout-content {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+}
+
+.fcr-layout-content-carousel {
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  background-color: var(--fcr_web_ui_scene_fill2);
+  transition:
+    height 0.2s,
+    opacity 0.2s;
+  position: relative;
+}
+
+.fcr-layout-content-carousel-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.fcr-layout-content-carousel-collapsed {
+  height: 0 !important;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.fcr-layout-content-expand {
+  height: 0 !important;
+  z-index: 11;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  color: var(--fcr_web_ui_scene_mainicon1);
+}
+
+.fcr-layout-content-collapsed {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* .fcr-layout-gallery {
+  min-width: 825px;
+} */
+
+.fcr-layout-gallery .fcr-layout-content-expand {
+  display: none;
+}
+
+.fcr-layout-content-expand button {
+  margin-bottom: 2px;
+  padding: 4px 14px 0;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-width: 0;
+  background-color: var(--fcr_web_ui_scene_fill2);
+  font-size: 0;
+}
+
+.fcr-layout-content-expand button:active {
+  outline: none;
+}
+
+.fcr-layout-content-expand button:focus {
+  outline: none;
+}
+
+.fcr-layout-content-expand svg {
+  transform: rotate(180deg);
+  height: 20px;
+}
+
+.fcr-layout-content-carousel-dragging {
+  transition-duration: 0ms;
+}
+
+.fcr-layout-content-carousel-list {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
+
+.fcr-layout-content-carousel-items {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
+
+.fcr-layout-content-carousel-items .fcr-layout-content-carousel-item {
+  border-radius: var(--fcr_cornerradius_s);
+  overflow: hidden;
+}
+
+.fcr-layout-content-carousel-items .fcr-layout-content-carousel-item .fcr-member-window-excitation {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-layout-content-carousel-arrow {
+  height: 100%;
+  outline: none;
+  border-radius: var(--fcr_cornerradius_xxs);
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background-color: var(--fcr_ui_scene_view_toast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+}
+
+.fcr-layout-content-carousel-arrow:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-layout-content-carousel-arrow > svg {
+  width: 20px;
+  height: 48px;
+  pointer-events: none;
+}
+
+.fcr-layout-content-carousel-arrow:disabled {
+  visibility: hidden;
+}
+
+.fcr-layout-content-carousel-collapse {
+  color: var(--fcr_ui_scene_icontext2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+}
+
+.fcr-layout-content-carousel-collapse:active {
+  outline: none;
+}
+
+.fcr-layout-content-carousel-collapse:hover {
+  color: var(--fcr_ui_scene_icontext2);
+  background-color: var(--fcr_web_ui_scene_hover2);
+}
+
+.fcr-layout-content-carousel-collapse > svg {
+  width: 48px;
+  pointer-events: none;
+}
+
+.fcr-layout-content-carousel-handler {
+  display: flex;
+  font-size: 0;
+  cursor: ns-resize;
+  transition: background-color 0.2s;
+}
+
+.fcr-layout-content-carousel-handler:hover,
+.fcr-layout-content-carousel-handler-dragging {
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-layout-content-gallery {
+  flex: 1;
+  background-color: var(--fcr_web_ui_scene_fill1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.fcr-layout-content-gallery-wrapper {
+  display: flex;
+  /* flex-flow: column nowrap; */
+  justify-content: center;
+  font-size: 0;
+  top: 0;
+  flex-wrap: wrap;
+}
+
+.fcr-layout-content-gallery-return-bar {
+  width: 100%;
+  height: 28px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block3);
+  font-size: 12px;
+  margin-top: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-layout-content-gallery-return-bar .fcr-button-XXS {
+  height: 20px;
+  margin-left: 24px;
+}
+
+.fcr-layout-content-gallery-row {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  font-size: 1rem;
+}
+
+.fcr-layout-content-gallery-wrapper .fcr-layout-content-gallery-row-item {
+  border-radius: var(--fcr_cornerradius_s);
+  overflow: hidden;
+}
+
+.fcr-layout-content-gallery-wrapper .fcr-layout-content-gallery-row-noborder {
+  border-radius: 0px;
+}
+
+.fcr-layout-content-gallery-wrapper
+  .fcr-layout-content-gallery-row-item
+  .fcr-member-window-excitation {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-layout-content-gallery-arrows {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.fcr-layout-content-gallery-arrow {
+  pointer-events: auto;
+  position: absolute;
+  /* top: calc(100% - 160px); */
+  bottom: 155px;
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+  border-radius: 8px;
+  box-shadow: var(--fcr_web_light_dropup);
+  display: inline-flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  font-size: 12px;
+  z-index: 10;
+}
+
+.fcr-layout-content-gallery-arrow:has(button:disabled) {
+  visibility: hidden;
+}
+
+.fcr-layout-content-gallery-arrow button {
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+}
+
+.fcr-layout-content-gallery-arrow button:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-layout-content-gallery-arrow button svg {
+  width: 30px;
+  height: 30px;
+}
+
+.fcr-layout-content-gallery-arrow-content {
+  padding: 3px 0 7px;
+  line-height: 1.25;
+  user-select: none;
+}
+
+.fcr-user-window {
+  color: var(--fcr_ui_scene_icontext1);
+  border-radius: var(--fcr_cornerradius_s);
+  background-color: var(--fcr_ui_scene_video);
+  font-size: 12px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+}
+
+.fcr-user-window-background {
+  position: absolute;
+  inset: 0;
+  color: var(--fcr_ui_scene_icontext3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.fcr-user-window-is-broken {
+  visibility: visible;
+}
+
+.fcr-user-window-background svg {
+  opacity: 0.3;
+}
+
+.fcr-user-window-avatar {
+  padding: 0 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+}
+
+.fcr-user-window-avatar svg {
+  width: 52%;
+}
+
+.fcr-user-window-body {
+  position: absolute;
+  inset: 0;
+  font-size: 0;
+}
+
+.fcr-user-window-actions {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  overflow: hidden;
+}
+
+.fcr-user-window-actions-hide {
+  opacity: 0;
+}
+
+.fcr-user-window-actions button {
+  pointer-events: auto;
+}
+
+.fcr-user-window-actions-middle {
+  inset: auto auto 26px 4px;
+  font-size: 12px;
+  position: absolute;
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-bottom {
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_s);
+  font-size: 12px;
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-bottom .fcr-user-window-actions-microphone {
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-user-window-actions-tag {
+  height: 18px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-tag {
+  height: 24px;
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-user-window-actions-tag-host {
+  color: var(--fcr_ui_scene_white10);
+  background: linear-gradient(90deg, #4262ff, #7c79ff);
+  padding: 0 8px;
+}
+
+.fcr-user-window-actions-tag-cohost {
+  background: var(--fcr_ui_scene_ramp_lightgreen6);
+}
+
+.fcr-user-window-actions-tag-host:has(svg) {
+  padding-left: 4px;
+}
+
+.fcr-user-window-actions-volume {
+  color: var(--fcr_ui_scene_icontext1);
+  --fcr-volume-icon-color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-user-window-actions-tag-host .fcr-user-window-actions-volume {
+  color: var(--fcr_ui_scene_white10);
+  --fcr-volume-icon-color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-tag-host {
+  padding: 0 13px;
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-tag-host:has(svg) {
+  padding-left: 6px;
+}
+
+.fcr-user-window-actions-microphone {
+  padding: 1px;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  color: var(--fcr_ui_scene_icontext1);
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_ui_scene_view_toast);
+  cursor: default;
+}
+
+.fcr-user-window-actions-tag-host .fcr-user-window-actions-microphone {
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-microphone {
+  padding: 0;
+  background-color: transparent;
+}
+
+.fcr-user-window-actions-tag ~ .fcr-user-window-actions-microphone {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.fcr-user-window-actions-name {
+  padding: 0 8px;
+  font-weight: var(--fcr_font_weight_s);
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-user-window-gallery .fcr-user-window-actions-name {
+  padding: 0 10px;
+}
+
+.fcr-user-window:hover .fcr-user-window-actions-top {
+  opacity: 1;
+}
+
+.fcr-user-window-actions-more {
+  padding: 3px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_web_ui_scene_hover3);
+}
+
+.fcr-user-window-actions-mute {
+  padding: 0 6px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  background-color: var(--fcr_web_ui_scene_hover3);
+}
+
+.fcr-user-window-actions-mute:disabled {
+  display: none;
+}
+
+.fcr-layout-content-bar {
+  /* position: absolute; */
+  height: 0px;
+  width: 100%;
+  /* overflow: hidden; */
+  transition: height 0s;
+  z-index: 10;
+}
+
+.fcr-layout-speaker .fcr-layout-content-bar {
+  position: relative;
+}
+
+.fcr-layout-content-bar-body {
+  height: 0px;
+  /* overflow: hidden; */
+  transition: height 0.2s;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fcr-layout-content-top {
+  top: 0;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: flex-end;
+}
+
+.fcr-layout-content-top .fcr-layout-content-bar-body {
+  display: flex;
+  flex-flow: column-reverse nowrap;
+}
+
+.fcr-layout-content-bottom {
+  bottom: 0;
+  display: flex;
+  flex-flow: column-reverse nowrap;
+}
+
+.fcr-layout-hovering .fcr-layout-content-top,
+.fcr-layout-hovering .fcr-layout-content-top .fcr-layout-content-bar-body {
+  height: 34px;
+}
+
+.fcr-layout-hovering .fcr-layout-content-bottom,
+.fcr-layout-hovering .fcr-layout-content-bottom .fcr-layout-content-bar-body {
+  height: 55px;
+  width: 100%;
+  z-index: 100;
+}
+
+.fcr-layout-hovering .fcr-user-window-actions-top {
+  display: flex;
+}
+
+.fcr-layout-content-bar--hidden .fcr-layout-content-bar-body {
+  height: 0;
+}
+
+.fcr-layout-content-bar--hidden.fcr-layout-content-bottom,
+.fcr-layout-content-bar--hidden.fcr-layout-content-bottom .fcr-layout-content-bar-body {
+  height: 0px;
+  overflow: inherit;
+  position: relative;
+}
+
+.fcr-layout-adapter-div {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+}
+
+.participant-dialog-header-count {
+  font-weight: 400;
+}
+
+.fcr-layout-content-gallery-row-onlyone {
+  border-radius: 0px !important;
+}