@dialpad/dialtone-css 8.46.2 → 8.46.3

package/lib/dist/dialtone.css

@@ -998,8 +998,8 @@ template {
   border-radius: var(--dt-size-radius-pill);
   box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
 }
-.dt-leftbar-row--selected .d-avatar__count,
-.dt-leftbar-row__primary:hover .d-avatar__count {
+.dt-recipe-leftbar-row--selected .d-avatar__count,
+.dt-recipe-leftbar-row__primary:hover .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
 }
 .d-avatar--clickable {
@@ -4761,10 +4761,10 @@ legend .d-label--md {
   border-width: var(--presence-border-size);
   border-radius: var(--dt-size-radius-circle);
 }
-.dt-leftbar-row--selected .d-presence {
+.dt-recipe-leftbar-row--selected .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__primary:hover .d-presence {
+.dt-recipe-leftbar-row__primary:hover .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
 }
 .d-presence__inner {
@@ -7997,6 +7997,1153 @@ ul {
 .d-fvn-unset {
   font-variant-numeric: unset !important;
 }
+.dt-recipe-attachment-carousel {
+  position: relative;
+  width: var(--dt-space-1000);
+  max-height: 100px;
+  /* stylelint-disable-line meowtec/no-px */
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__media-list {
+  display: flex;
+  flex-direction: row;
+  padding-left: 0;
+  overflow-x: scroll;
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__media-list::-webkit-scrollbar {
+  display: none;
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow {
+  position: absolute;
+  top: var(--dt-space-30-percent);
+  background-color: var(--dt-color-neutral-white);
+  border: var(--dt-space-100) solid;
+  border-color: var(--bc-default);
+  border-width: var(--dt-size-100);
+  opacity: 0;
+}
+.dt-recipe-attachment-carousel:hover .dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow {
+  opacity: 1;
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow .dt-recipe-attachment-carousel__arrow--left {
+  left: var(--dt-space-300);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow .dt-recipe-attachment-carousel__arrow--right {
+  right: var(--dt-space-300);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image {
+  position: relative;
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__close-button {
+  position: absolute;
+  top: inherit;
+  right: inherit;
+  color: var(--dt-color-neutral-white);
+  background-color: var(--dt-color-black-400);
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-neutral-white);
+  border-width: var(--dt-size-200);
+  opacity: 0;
+}
+.dt-recipe-attachment-carousel__image:focus-within .dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__close-button,
+.dt-recipe-attachment-carousel__image:hover .dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__close-button {
+  opacity: 1;
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__viewer {
+  width: var(--dt-size-700);
+  height: var(--dt-size-700);
+  -o-object-fit: cover;
+     object-fit: cover;
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-border-subtle);
+  border-width: var(--dt-size-350);
+  border-radius: var(--br4);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__top-right {
+  position: absolute;
+  top: var(--dt-size-100);
+  right: var(--dt-size-100);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__progress-bar {
+  position: absolute;
+  top: inherit;
+  right: inherit;
+  display: flex;
+  background-color: var(--dt-color-neutral-white);
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-border-subtle);
+  border-width: var(--dt-size-200);
+  border-radius: 50%;
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar {
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar .dt-recipe-attachment-carousel__progress-bar__circle {
+  fill: none;
+  stroke-width: 2;
+  stroke-dasharray: var(--stroke-dasharray);
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(1) {
+  stroke: var(--dt-color-black-100);
+  stroke-dashoffset: 0;
+}
+.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(2) {
+  transition: stroke-dashoffset 500ms linear;
+  stroke: var(--dt-color-purple-500);
+  stroke-dashoffset: var(--stroke-dashoffset);
+}
+.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {
+  line-height: var(--dt-font-line-height-300);
+}
+.dt-recipe-callbar-button .dt-recipe-callbar-button.d-btn[disabled] {
+  background-color: unset;
+  opacity: 0.5;
+}
+.dt-recipe-callbar-button--active .base-button__icon,
+.dt-recipe-callbar-button--active:hover .base-button__icon {
+  color: var(--primary-color);
+}
+.dt-recipe-callbar-button--disabled {
+  cursor: not-allowed;
+}
+.dt-recipe-callbar-button--circle {
+  border-radius: var(--dt-size-radius-circle);
+}
+.dt-recipe-callbar-button--circle.d-btn[disabled] {
+  border-color: unset;
+}
+.dt-recipe-callbar-button-with-popover {
+  display: flex;
+  align-items: flex-start;
+}
+.dt-recipe-callbar-button-with-popover__arrow {
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+  margin-top: var(--dt-space-450);
+  margin-left: calc(var(--dt-space-300-negative) * 5);
+  padding: var(--dt-space-400);
+  border-radius: var(--dt-size-300);
+}
+.dt-recipe-callbar-button-with-popover__arrow .d-btn--active {
+  background: var(--dt-color-surface-moderate-opaque);
+}
+.dt-recipe-callbar-button-with-popover__arrow--large {
+  margin-left: var(--dt-space-550-negative);
+}
+.dt-recipe-callbar-button-with-popover__arrow-icon {
+  color: var(--dt-color-black-800);
+}
+.dt-recipe-callbar-button-with-popover__popover .d-popover__header {
+  color: var(--dt-color-foreground-primary-inverted);
+  background: var(--dt-color-surface-contrast);
+}
+.dt-recipe-callbar-button-with-popover__popover .d-popover__header .d-btn {
+  color: var(--dt-color-foreground-primary-inverted);
+}
+.dt-recipe-callbar-button-with-popover__button.d-tab--selected::after,
+.dt-recipe-callbar-button-with-popover__button.d-tab--selected:hover::after {
+  --tab--bgc: var(--dt-color-surface-contrast);
+}
+.dt-recipe-callbar-button-with-popover__button.tab-group {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.dt-recipe-callbar-button-with-popover__button.tab-content {
+  flex: 1 1 100%;
+  overflow-y: auto;
+}
+.dt-recipe-callbox {
+  padding: 0;
+  color: var(--dt-color-foreground-primary);
+  background-color: var(--dt-color-surface-primary);
+  border-radius: var(--dt-size-radius-300);
+}
+.dt-recipe-callbox__video {
+  display: flex;
+  margin-bottom: var(--dt-space-300-negative);
+  overflow: clip;
+  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
+}
+.dt-recipe-callbox__main-content {
+  align-items: stretch;
+  padding: 0;
+  border: var(--dt-size-border-100) solid transparent;
+  border-radius: var(--dt-size-radius-300);
+}
+.dt-recipe-callbox__main-content.dt-recipe-callbox__border-default {
+  border-color: var(--dt-color-border-default);
+}
+.dt-recipe-callbox__main-content.dt-recipe-callbox__border-ai {
+  background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;
+}
+.dt-recipe-callbox__main-content.dt-recipe-callbox__border-critical {
+  background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, radial-gradient(circle, #E7301D, #F78B23) border-box;
+}
+.dt-recipe-callbox__main-content-top {
+  display: flex;
+  align-items: center;
+  padding: var(--dt-space-350) var(--dt-space-400);
+}
+.dt-recipe-callbox__main-content-bottom {
+  border-top: 1px solid var(--dt-color-border-subtle);
+}
+.dt-recipe-callbox__avatar {
+  margin-right: var(--dt-space-400);
+}
+.dt-recipe-callbox__content {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+.dt-recipe-callbox__content-title {
+  width: 0;
+  min-width: 100%;
+  padding: 0;
+  overflow: clip;
+  color: var(--dt-color-foreground-primary);
+  font-weight: var(--dt-font-weight-bold);
+  line-height: normal;
+  white-space: nowrap;
+  text-align: left;
+  text-overflow: ellipsis;
+  background-color: var(--dt-color-surface-primary);
+  border: none;
+  -webkit-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+.dt-recipe-callbox__content-badge {
+  line-height: normal;
+}
+.dt-recipe-callbox__content-subtitle {
+  width: 0;
+  min-width: 100%;
+  padding: 0;
+  overflow: hidden;
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+  line-height: normal;
+}
+.dt-recipe-callbox__right {
+  display: flex;
+  justify-content: right;
+}
+.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title {
+  border-radius: var(--dt-size-100);
+  cursor: pointer;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title:focus-visible {
+  outline: none;
+  box-shadow: var(--dt-shadow-focus);
+}
+.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title:hover,
+.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title:active {
+  text-decoration: underline;
+}
+.dt-recipe-callbox__badge--warning {
+  background-color: var(--dt-color-surface-warning);
+}
+.dt-recipe-combobox-multi-select__chip {
+  z-index: var(--zi-base1);
+  max-width: var(--dt-size-100-percent);
+  margin-top: var(--dt-space-300);
+  margin-right: var(--dt-space-200);
+  margin-left: var(--dt-space-200);
+}
+.dt-recipe-combobox-multi-select__chip-wrapper {
+  position: absolute;
+  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
+  max-height: initial;
+  margin-right: var(--dt-space-200);
+  margin-left: var(--dt-space-200);
+  padding-left: var(--dt-space-100);
+  overflow-y: visible;
+}
+.dt-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
+  max-height: 2.8rem;
+  overflow-y: hidden;
+}
+.dt-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
+.dt-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
+  max-height: 2.5rem;
+  overflow-y: hidden;
+}
+.dt-recipe-combobox-multi-select__chip--truncate {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dt-recipe-combobox-multi-select__input {
+  flex-grow: 1;
+}
+.dt-recipe-combobox-multi-select__input-wrapper {
+  position: relative;
+  display: block;
+}
+.dt-recipe-combobox-multi-select__list--loading {
+  padding-top: var(--dt-space-500);
+  padding-bottom: var(--dt-space-500);
+  text-align: center;
+}
+.dt-recipe-contact-info {
+  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
+  display: flex;
+}
+.dt-recipe-contact-info .d-item-layout {
+  flex: 1 1 0;
+}
+.dt-recipe-contact-info .d-item-layout--content {
+  /*
+    DP-74536: Add `min-width` to make the width of "contact info" adjustable.
+    */
+  min-width: var(--dt-space-825);
+}
+.dt-recipe-contact-info .d-item-layout--left {
+  align-items: center;
+  justify-content: flex-start;
+  /*
+    DP-74536: To make 'Avatar' in fixed position when resizing the window.
+    */
+  min-width: var(--dt-space-650);
+}
+.dt-recipe-contact-info .d-item-layout--right {
+  align-items: center;
+  /*
+    DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
+    */
+  min-width: 0;
+}
+.dt-recipe-contact-info__left {
+  position: relative;
+  background-color: transparent;
+  background-image: none;
+  border-width: 0;
+  cursor: pointer;
+}
+.dt-recipe-contact-info__avatars {
+  display: flex;
+  flex-direction: row;
+  margin-right: var(--dt-space-300-negative);
+}
+.dt-recipe-contact-info__avatars .d-avatar {
+  box-sizing: unset;
+  border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
+  border-radius: var(--dt-size-radius-pill);
+}
+.dt-recipe-editor__top-bar-background {
+  background-color: var(--dt-color-surface-secondary);
+}
+.dt-recipe-editor__button-group-divider {
+  width: var(--dt-size-100);
+  height: calc(var(--dt-size-550) + var(--dt-size-300));
+  margin-left: var(--dt-space-400);
+  background: var(--dt-color-border-subtle);
+}
+.dt-recipe-emoji-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dt-space-300);
+}
+.dt-recipe-emoji-row__tooltip {
+  display: inline-block;
+}
+.dt-recipe-emoji-row__reaction {
+  --emoji-item-color-inset-shadow: transparent;
+  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
+  --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
+  height: var(--dt-size-550);
+  padding: var(--dt-space-300) var(--dt-space-400);
+  color: var(--emoji-item-color-foreground);
+  background-color: var(--emoji-item-color-background);
+  border: 0;
+  border-radius: var(--dt-size-radius-pill);
+  box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);
+}
+.dt-recipe-emoji-row__reaction.dt-recipe-emoji-row__picker {
+  padding: var(--dt-space-200) var(--dt-space-350);
+}
+.dt-recipe-emoji-row__reaction:hover {
+  --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);
+  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);
+}
+.dt-recipe-emoji-row__reaction:active {
+  --emoji-item-color-background: var(--dt-action-color-background-muted-active);
+  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);
+  -webkit-transform: scale(0.98);
+          transform: scale(0.98);
+}
+.dt-recipe-emoji-row__reaction--selected {
+  --emoji-item-color-inset-shadow: var(--dt-color-border-brand);
+  --emoji-item-color-foreground: var(--dt-color-link-primary);
+  --emoji-item-color-background: var(--dt-action-color-background-base-hover);
+}
+.dt-recipe-emoji-row__reaction--selected .dt-recipe-emoji-row__reaction-number {
+  font-weight: var(--dt-font-weight-bold);
+}
+.dt-recipe-emoji-row__reaction--selected:hover {
+  --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);
+  --emoji-item-color-foreground: var(--dt-color-link-primary-hover);
+}
+.dt-recipe-emoji-row__reaction--selected:active {
+  --emoji-item-color-background: var(--dt-action-color-background-base-active);
+}
+.dt-recipe-emoji-row__reaction-number {
+  font-weight: var(--dt-typography-body-sm-font-weight);
+  font-size: var(--dt-typography-body-sm-font-size);
+  font-family: var(--dt-typography-body-sm-font-family);
+  font-variant: tabular-nums;
+  line-height: var(--dt-font-line-height-100);
+}
+.dt-recipe-emoji-row__emoji {
+  display: inline-flex;
+  margin-right: var(--dt-space-300);
+}
+.dt-recipe-feed-item-pill__wrapper {
+  padding: var(--dt-space-400);
+  background-color: var(--dt-color-surface-secondary);
+}
+.dt-recipe-feed-item-pill__button {
+  width: 100%;
+  text-align: left;
+  background-color: var(--dt-color-surface-moderate);
+  border-width: 0;
+  border-radius: var(--dt-size-radius-600);
+  cursor: pointer;
+  --button-padding-x: var(--button-padding-y-md);
+  --button-padding-y: var(--button-padding-y-md);
+  --button-color-text: var(--dt-action-color-foreground-muted-default);
+  --button-border-radius: var(--dt-size-radius-600);
+}
+.dt-recipe-feed-item-pill__layout {
+  gap: var(--dt-space-300);
+  width: 100%;
+  padding: var(--dt-space-400);
+}
+.dt-recipe-feed-item-pill__layout > .d-item-layout--left {
+  justify-content: center;
+  padding-right: var(--dt-space-0);
+}
+.dt-recipe-feed-item-pill__icon {
+  display: flex;
+}
+.dt-recipe-feed-item-pill__icon svg {
+  -webkit-animation: fade 0.15s ease-in;
+          animation: fade 0.15s ease-in;
+}
+.dt-recipe-feed-item-pill__content {
+  display: flex;
+  justify-content: center;
+}
+.dt-recipe-feed-item-pill__title {
+  font-weight: var(--dt-font-weight-bold);
+}
+.dt-recipe-feed-item-pill__border {
+  overflow: hidden;
+  background-clip: content-box, border-box;
+  background-origin: border-box;
+  border: double 1px transparent;
+  border-radius: var(--dt-size-radius-600);
+}
+.dt-recipe-feed-item-pill__border--default {
+  background: var(--dt-color-border-default);
+}
+.dt-recipe-feed-item-pill__border--ai {
+  background-image: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)), var(--dt-badge-color-background-ai);
+}
+.dt-recipe-feed-item-pill__border--critical {
+  background: var(--dt-color-foreground-critical);
+}
+@-webkit-keyframes fade {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes fade {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+.dt-recipe-feed-item-row {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--dt-size-100-percent);
+  padding: var(--dt-space-300) var(--dt-space-500);
+}
+.dt-recipe-feed-item-row:focus-visible {
+  box-shadow: var(--dt-shadow-focus-inset);
+}
+.dt-recipe-feed-item-row > .d-item-layout {
+  min-height: initial;
+  padding: 0;
+  font: var(--dt-typography-body-md-compact);
+}
+.dt-recipe-feed-item-row > .d-item-layout > .d-item-layout--left {
+  display: block;
+  align-self: flex-start;
+  min-width: calc(var(--dt-space-600) + var(--dt-space-300));
+  padding-right: var(--dt-space-300);
+  padding-left: var(--dt-space-0);
+  text-align: end;
+}
+.dt-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
+  min-width: initial;
+  padding: 0;
+}
+.dt-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+.dt-recipe-feed-item-row__state--searched {
+  background-color: var(--dt-color-surface-warning-subtle);
+}
+.dt-recipe-feed-item-row__state--error {
+  background-color: var(--dt-color-surface-critical-subtle);
+}
+.dt-recipe-feed-item-row__state-transition {
+  transition: background-color 2s var(--ttf-in-out) 0s;
+}
+.dt-recipe-feed-item-row--active {
+  background-color: var(--dt-color-surface-secondary-opaque);
+}
+.dt-recipe-feed-item-row__avatar-container {
+  padding-top: var(--dt-space-300);
+  padding-bottom: var(--dt-space-300);
+}
+.dt-recipe-feed-item-row__content {
+  padding-left: var(--dt-space-300);
+}
+.dt-recipe-feed-item-row__attachment {
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-300);
+}
+.dt-recipe-feed-item-row__image {
+  display: block;
+  min-width: 5.6rem;
+  max-width: 30rem;
+  min-height: 5.6rem;
+  max-height: 30rem;
+  border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);
+  border-radius: var(--dt-size-radius-400);
+}
+.dt-recipe-feed-item-row__video {
+  display: block;
+  height: 25rem;
+}
+.dt-recipe-feed-item-row__header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dt-space-300);
+  align-items: baseline;
+  font-size: var(--dt-font-size-200);
+  line-height: var(--dt-font-line-height-300);
+}
+.dt-recipe-feed-item-row__header-name {
+  font-weight: var(--dt-font-weight-bold);
+}
+.dt-recipe-feed-item-row__header-time {
+  flex-shrink: 0;
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+}
+.dt-recipe-feed-item-row__reactions {
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
+  padding-left: var(--dt-space-300);
+}
+.dt-recipe-feed-item-row__threading {
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
+}
+.dt-recipe-feed-item-row__left-time {
+  color: var(--dt-color-foreground-tertiary);
+  font-weight: var(--dt-font-weight-normal);
+  font-size: var(--dt-font-size-100);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.dt-recipe-feed-item-row__menu {
+  position: absolute;
+  top: var(--dt-space-550-negative);
+  right: var(--dt-space-450);
+}
+.dt-recipe-grouped-chip {
+  display: inline-flex;
+  white-space: nowrap;
+  background-color: unset;
+  background-image: unset;
+}
+.dt-recipe-grouped-chip__content {
+  font-variant-numeric: tabular-nums;
+}
+.dt-recipe-grouped-chip__content-left {
+  max-width: var(--dt-size-730);
+  background-color: var(--dt-color-surface-moderate-opaque);
+  border-top-left-radius: var(--dt-size-radius-pill);
+  border-bottom-left-radius: var(--dt-size-radius-pill);
+}
+.dt-recipe-grouped-chip__content-right {
+  max-width: var(--dt-size-730);
+  background-color: var(--dt-color-purple-200);
+  border-top-right-radius: var(--dt-size-radius-pill);
+  border-bottom-right-radius: var(--dt-size-radius-pill);
+}
+.dt-recipe-ivr-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 280px;
+  /* stylelint-disable-line meowtec/no-px */
+  cursor: pointer;
+}
+.dt-recipe-ivr-node__header-left {
+  display: flex;
+  align-items: center;
+}
+.dt-recipe-ivr-node__label {
+  font-weight: var(--dt-font-weight-bold);
+  font-size: var(--dt-font-size-200);
+}
+.dt-recipe-ivr-node__dropdown-list {
+  width: var(--dt-size-825);
+}
+.dt-recipe-ivr-node__goto-icon {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.dt-recipe-ivr-node__connector {
+  z-index: var(--zi-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dt-size-400);
+  height: var(--dt-size-400);
+  margin-bottom: var(--dt-space-300-negative);
+  background-color: var(--dt-color-purple-600);
+  border-color: var(--dt-color-purple-600);
+  border-radius: var(--dt-size-radius-circle);
+}
+.dt-recipe-ivr-node__connector--selected {
+  margin-bottom: var(--dt-space-400-negative);
+}
+.dt-recipe-ivr-node__connector-dtmf {
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
+  margin-bottom: var(--dt-space-450-negative);
+  color: var(--dt-color-neutral-white);
+  font-size: var(--dt-font-size-200);
+}
+.dt-recipe-ivr-node__connector-dtmf .dt-recipe-ivr-node__connector--selected {
+  margin-bottom: var(--dt-space-500-negative);
+}
+.dt-recipe-leftbar-row {
+  --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
+  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
+  --leftbar-row-radius: var(--dt-size-radius-pill);
+  --leftbar-row-opacity: 100%;
+  --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-icon-color-foreground);
+  --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
+  --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
+  --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
+  --leftbar-row-unread-badge-display: inline-flex;
+  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground);
+  --leftbar-row-description-font-weight: var(--dt-font-weight-normal);
+  --leftbar-row-description-font-size: var(--dt-font-size-200);
+  --leftbar-row-description-line-height: var(--dt-font-line-height-200);
+  --leftbar-row-status-color-foreground: var(--dt-theme-sidebar-status-color-foreground);
+  --leftbar-row-status-font-size: var(--dt-font-size-100);
+  --leftbar-row-status-line-height: var(--dt-font-line-height-100);
+  --leftbar-row-action-position-right: var(--dt-size-400);
+  --leftbar-row-action-position-bottom: 50%;
+  --leftbar-row-action-width: var(--dt-size-550);
+  --leftbar-row-action-height: var(--leftbar-row-action-width);
+  position: relative;
+  display: flex;
+  background-color: var(--dt-theme-sidebar-row-color-background);
+  border-radius: var(--leftbar-row-radius);
+  cursor: pointer;
+  opacity: var(--leftbar-row-opacity);
+  transition-timing-function: var(--ttf-out-quint);
+  transition-duration: var(--td200);
+  transition-property: background-color, border, box-shadow;
+}
+.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):hover,
+.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):focus-within {
+  --leftbar-row-unread-badge-display: none;
+}
+.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):hover .dt-recipe-leftbar-row__action,
+.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):focus-within .dt-recipe-leftbar-row__action {
+  display: inline-flex;
+}
+.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):hover .dt-recipe-leftbar-row__action-button,
+.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):focus-within .dt-recipe-leftbar-row__action-button {
+  opacity: 1;
+}
+.dt-recipe-leftbar-row:hover,
+.dt-recipe-leftbar-row:focus-within {
+  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
+}
+.dt-recipe-leftbar-row:hover .d-presence,
+.dt-recipe-leftbar-row:focus-within .d-presence {
+  --presence-color-border-base: var(--dt-color-black-200);
+}
+.dt-recipe-leftbar-row:hover .d-avatar__count,
+.dt-recipe-leftbar-row:focus-within .d-avatar__count {
+  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
+}
+.dt-recipe-leftbar-row__description {
+  overflow: hidden;
+  color: var(--leftbar-row-description-color-foreground);
+  font-weight: var(--leftbar-row-description-font-weight);
+  font-size: var(--leftbar-row-description-font-size);
+  line-height: var(--leftbar-row-description-line-height);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dt-recipe-leftbar-row__status {
+  padding-bottom: var(--dt-space-100);
+  overflow: hidden;
+  color: var(--leftbar-row-status-color-foreground);
+  font-size: var(--leftbar-row-status-font-size);
+  line-height: var(--leftbar-row-status-line-height);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dt-recipe-leftbar-row__meta-context ~ .dt-recipe-leftbar-row__meta-custom:not(:empty)::before {
+  color: var(--dt-theme-sidebar-status-color-foreground);
+  content: " • ";
+}
+.dt-recipe-leftbar-row--has-unread {
+  --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
+  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
+  --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
+}
+.dt-recipe-leftbar-row--muted {
+  --leftbar-row-opacity: 60%;
+}
+.dt-recipe-leftbar-row--selected {
+  --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
+  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
+}
+.dt-recipe-leftbar-row--selected .d-presence {
+  --presence-color-border-base: var(--dt-color-black-200);
+}
+.dt-recipe-leftbar-row--selected .d-avatar__count {
+  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
+}
+.dt-recipe-leftbar-row__is-typing {
+  --is-typing-size-shape: var(--dt-size-550);
+  position: absolute;
+  display: flex;
+  gap: var(--dt-space-200);
+  align-items: center;
+  justify-content: center;
+  width: var(--is-typing-size-shape);
+  height: var(--is-typing-size-shape);
+  border-radius: var(--dt-size-radius-pill);
+  opacity: 0.75;
+}
+.dt-recipe-leftbar-row__is-typing span {
+  display: inline-block;
+  width: var(--dt-size-300);
+  height: var(--dt-size-300);
+  padding: 0;
+  background: var(--dt-color-surface-strong);
+  border-radius: var(--dt-size-radius-pill);
+  opacity: 0.3;
+  transition: all 500ms ease;
+  -webkit-animation: wave 1.5s ease infinite;
+          animation: wave 1.5s ease infinite;
+}
+.dt-recipe-leftbar-row__is-typing span:nth-child(1) {
+  -webkit-animation-delay: 0ms;
+          animation-delay: 0ms;
+}
+.dt-recipe-leftbar-row__is-typing span:nth-child(2) {
+  -webkit-animation-delay: var(--td100);
+          animation-delay: var(--td100);
+}
+.dt-recipe-leftbar-row__is-typing span:nth-child(3) {
+  -webkit-animation-delay: var(--td200);
+          animation-delay: var(--td200);
+}
+.dt-recipe-leftbar-row__primary {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  color: var(--leftbar-row-color-foreground);
+  font-size: inherit;
+  line-height: inherit;
+  text-align: left;
+  text-decoration: none;
+  background-color: var(--leftbar-row-color-background);
+  border: 0;
+  border-radius: var(--leftbar-row-radius);
+  -webkit-appearance: none;
+          appearance: none;
+}
+.dt-recipe-leftbar-row__primary:active {
+  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
+}
+.dt-recipe-leftbar-row__primary:focus-visible {
+  box-shadow: var(--dt-shadow-focus-inset);
+}
+.dt-recipe-leftbar-row__action-button {
+  width: var(--leftbar-row-action-width);
+  height: var(--leftbar-row-action-height);
+  opacity: 0;
+}
+.dt-recipe-leftbar-row__alpha {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--leftbar-row-alpha-width);
+  height: var(--leftbar-row-alpha-height);
+  padding-right: var(--dt-space-400);
+  padding-left: var(--dt-space-400);
+  color: var(--leftbar-row-alpha-color-foreground);
+  border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
+}
+.dt-recipe-leftbar-row__label {
+  flex: 0 1;
+  min-width: 0;
+}
+.dt-recipe-leftbar-row__omega {
+  position: absolute;
+  top: var(--leftbar-row-action-position-bottom);
+  right: var(--leftbar-row-action-position-right);
+  display: flex;
+  gap: var(--dt-space-300);
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  border-radius: var(--leftbar-row-radius);
+  -webkit-transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
+          transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
+}
+.dt-recipe-leftbar-row__unread-badge {
+  display: var(--leftbar-row-unread-badge-display);
+  color: var(--dt-theme-mention-color-foreground);
+  background-color: var(--dt-theme-mention-color-background);
+}
+.dt-recipe-leftbar-row__unread-count .dt-recipe-leftbar-row__action {
+  display: none;
+}
+.dt-recipe-leftbar-row__unread-count-badge {
+  border-top-right-radius: var(--dt-size-radius-0);
+  border-bottom-right-radius: var(--dt-size-radius-0);
+}
+.dt-recipe-leftbar-row__unread-mention-count-badge {
+  color: var(--dt-theme-mention-color-foreground-strong);
+  background-color: var(--dt-theme-mention-color-background-strong);
+  border-top-left-radius: var(--dt-size-radius-0);
+  border-bottom-left-radius: var(--dt-size-radius-0);
+}
+.dt-recipe-leftbar-row__unread-mention-only-count-badge {
+  color: var(--dt-theme-mention-color-foreground-strong);
+  background-color: var(--dt-theme-mention-color-background-strong);
+}
+.dt-recipe-leftbar-row__active-voice {
+  display: inline-flex;
+  color: var(--dt-color-purple-400);
+  -webkit-animation-name: opacity-pulsate;
+  animation-name: opacity-pulsate;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.dt-recipe-leftbar-row__dnd {
+  padding-top: var(--dt-space-200);
+  padding-right: var(--dt-space-300);
+  color: var(--dt-color-foreground-tertiary);
+  font-weight: var(--dt-font-weight-medium);
+  font-size: var(--dt-font-size-100);
+  line-height: var(--dt-font-line-height-400);
+}
+.dt-recipe-leftbar-row__container--off-duty {
+  background-color: var(--dt-badge-color-background-critical);
+  border: var(--dt-size-100) solid var(--dt-color-border-subtle);
+  border-radius: var(--dt-size-radius-500);
+}
+.dt-recipe-leftbar-row__container--off-duty .dt-recipe-leftbar-row__primary {
+  margin: calc(var(--dt-size-100) * -1);
+}
+.dt-recipe-leftbar-row--contact-centers .dt-recipe-leftbar-row__alpha {
+  padding-right: var(--dt-space-450);
+  padding-left: var(--dt-space-450);
+}
+.dt-recipe-leftbar-row--contact-centers .dt-recipe-leftbar-row__action-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-500);
+}
+.dt-recipe-leftbar-row__icon-cc {
+  width: calc(var(--dt-size-300) * 3.5);
+  height: calc(var(--dt-size-300) * 3.5);
+  border-radius: var(--dt-size-200);
+}
+.opacity-pulsate {
+  -webkit-animation-name: opacity-pulsate;
+  animation-name: opacity-pulsate;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+@-webkit-keyframes opacity-pulsate {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes opacity-pulsate {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes opacity-pulsate {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes opacity-pulsate {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes wave {
+  0%,
+  50%,
+  100% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  10% {
+    -webkit-transform: translate(0, -0.5rem);
+            transform: translate(0, -0.5rem);
+    opacity: 0.9;
+  }
+}
+@keyframes wave {
+  0%,
+  50%,
+  100% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+  10% {
+    -webkit-transform: translate(0, -0.5rem);
+            transform: translate(0, -0.5rem);
+    opacity: 0.9;
+  }
+}
+.dt-recipe-message-input {
+  display: flex;
+  flex-direction: column;
+  line-height: var(--dt-font-line-height-400);
+  border: var(--dt-size-border-100) solid;
+  border-color: var(--dt-color-border-default);
+  border-radius: var(--dt-size-radius-400);
+  cursor: text;
+  transition-timing-function: var(--ttf-in-out);
+  transition-duration: var(--td50);
+  transition-property: border-color, box-shadow, opacity;
+}
+.dt-recipe-message-input:focus-within {
+  border-color: var(--dt-color-border-bold);
+  box-shadow: 0 0 var(--dt-size-300) 0 var(--dt-color-surface-moderate-opaque);
+}
+.dt-recipe-message-input__editor-wrapper {
+  padding: var(--dt-space-450) var(--dt-space-500) var(--dt-space-300);
+}
+.dt-recipe-message-input__remaining-char {
+  margin-right: var(--dt-space-300);
+  color: var(--dt-color-foreground-critical);
+  font-size: var(--dt-font-size-100);
+}
+.dt-recipe-message-input__remaining-char__tooltip {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.dt-recipe-message-input__button {
+  max-width: 2.8rem;
+  max-height: 2.8rem;
+  border-radius: var(--dt-size-radius-300);
+}
+.dt-recipe-message-input__send-button.dt-recipe-message-input__button:not(.d-btn--icon-only),
+.dt-recipe-message-input__cancel-button {
+  max-width: unset;
+  padding: var(--dt-space-350);
+}
+.dt-recipe-message-input__send-button--disabled {
+  color: var(--dt-color-foreground-muted);
+  background-color: unset;
+  cursor: default;
+}
+.dt-recipe-message-input__bottom-section {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--dt-space-300) var(--dt-space-400) var(--dt-space-400);
+}
+.dt-recipe-message-input__bottom-section-left,
+.dt-recipe-message-input__bottom-section-right {
+  display: flex;
+}
+.dt-recipe-message-input__image-input {
+  position: absolute;
+}
+.dt-recipe-message-input-meeting-pill {
+  display: inline-block;
+}
+.dt-recipe-message-input-meeting-pill__layout {
+  grid-template-areas: 'left content right';
+  grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content);
+  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
+  gap: var(--dt-space-400);
+  align-items: center;
+  max-width: var(--dt-size-905);
+  padding: var(--dt-space-200) var(--dt-space-400);
+  font: var(--dt-typography-headline-md);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
+  border-radius: var(--dt-size-radius-300);
+}
+.dt-recipe-message-input-meeting-pill__icon {
+  display: flex;
+  align-items: center;
+  padding: var(--dt-space-350);
+}
+.dt-recipe-message-input-meeting-pill__close {
+  display: flex;
+  justify-content: flex-end;
+}
+.dt-recipe-settings-menu-button {
+  width: var(--dt-size-550);
+  height: var(--dt-size-600);
+  padding: var(--dt-space-0);
+  color: var(--dt-theme-topbar-button-color-foreground);
+  background-color: var(--dt-theme-topbar-button-color-background);
+  border-radius: var(--dt-size-550);
+}
+.dt-recipe-settings-menu-button:hover {
+  color: var(--dt-theme-topbar-button-color-foreground-hover);
+  background-color: var(--dt-theme-topbar-button-color-background-hover);
+}
+.dt-recipe-settings-menu-button:active {
+  background-color: var(--dt-theme-topbar-button-color-background-active);
+}
+.dt-recipe-settings-menu-button-update {
+  height: var(--dt-size-600);
+  color: var(--dt-color-blue-500);
+  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
+  border-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
+  border-radius: var(--dt-size-radius-pill);
+}
+.dt-recipe-settings-menu-button-update:hover {
+  color: var(--dt-theme-topbar-button-color-foreground-hover);
+  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
+}
+.dt-recipe-time-pill {
+  padding: var(--dt-space-300) var(--dt-space-500);
+  color: var(--dt-color-foreground-primary);
+  font-size: var(--dt-font-size-100);
+  line-height: var(--dt-font-line-height-300);
+  background-color: var(--dt-color-surface-primary);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
+  border-radius: var(--dt-size-radius-pill);
+}
+.dt-recipe-top-banner-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--dt-color-foreground-primary);
+  font-size: var(--dt-font-size-100);
+}
+.dt-recipe-top-banner-info__left {
+  min-width: 20%;
+  margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
+}
+.dt-recipe-top-banner-info__middle {
+  display: flex;
+  gap: var(--dt-size-300);
+  align-items: center;
+  margin-top: var(--dt-space-300);
+  margin-bottom: var(--dt-space-300);
+}
+.dt-recipe-top-banner-info__right {
+  display: flex;
+  gap: var(--dt-size-300);
+  align-items: baseline;
+  justify-content: flex-end;
+  min-width: 20%;
+  margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
+  text-align: right;
+}
+.dt-recipe-leftbar-unread-pill {
+  display: flex;
+  gap: var(--dt-space-300);
+  align-items: center;
+  justify-content: center;
+  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);
+  font-size: var(--dt-font-size-100);
+  line-height: var(--dt-font-line-height-600);
+  border: none;
+  border-radius: var(--dt-size-radius-pill);
+  box-shadow: var(--dt-shadow-medium);
+  cursor: pointer;
+}
+.dt-recipe-leftbar-unread-pill-mentions {
+  color: var(--dt-theme-mention-color-foreground);
+  font-weight: var(--dt-font-weight-bold);
+  background-color: var(--dt-theme-mention-color-background);
+}
+.dt-recipe-leftbar-unread-pill-messages {
+  color: var(--dt-color-foreground-secondary-inverted);
+  background-color: var(--dt-color-surface-contrast);
+}
 @font-face {
   font-weight: 400;
   font-family: Archivo;