@dialpad/dialtone 9.70.1 → 9.71.0-beta.2

package/dist/vue2/style.css

@@ -1,72 +1,3 @@
-.d-context-menu-list {
-  width: var(--dt-size-850);
-}
-.d-dropdown-list {
-  position: relative;
-  margin: var(--dt-space-300);
-  padding-left: var(--dt-space-0);
-  padding-right: var(--dt-space-0);
-}
-.d-dropdown-list > .dt-list-item {
-  margin-top: var(--dt-space-200);
-}
-.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-reference-hidden] {
-  visibility: hidden;
-  pointer-events: none;
-}.tippy-box > .tippy-svg-arrow {
-  fill: var(--dt-color-surface-contrast);
-}.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
-  fill: var(--dt-color-surface-moderate);
-}.tippy-box[data-animation='fade'][data-state='hidden'] {
-  opacity: 0;
-}
-.skeleton-placeholder {
-  display: flex;
-  stroke: none;
-  fill: var(--placeholder-from-color, var(--dt-color-black-300));
-  background: var(--placeholder-from-color, var(--dt-color-black-300));
-}
-.skeleton-placeholder--animate {
-  animation-name: placeholder-throb;
-  animation-iteration-count: infinite;
-}
-@keyframes placeholder-throb {
-10% {
-    fill: var(--placeholder-from-color, var(--dt-color-black-300));
-    background: var(--placeholder-from-color, var(--dt-color-black-300));
-}
-50% {
-    fill: var(--placeholder-to-color, var(--dt-color-black-100));
-    background: var(--placeholder-to-color, var(--dt-color-black-100));
-}
-90% {
-    fill: var(--placeholder-from-color, var(--dt-color-black-300));
-    background: var(--placeholder-from-color, var(--dt-color-black-300));
-}
-}
-.dt-list-item {
-  list-style: none;
-  background-color: var(--dt-action-color-background-muted-default);
-}
-.dt-list-item:not(.dt-list-item--static) {
-  cursor: pointer;
-  border-radius: var(--dt-size-radius-300);
-}
-.dt-list-item--focusable:focus,
-.dt-list-item--focusable:focus-within,
-.dt-list-item--highlighted {
-  background-color: var(--dt-action-color-background-muted-hover);
-}
-.dt-list-item--highlighted:active {
-  background-color: var(--dt-action-color-background-muted-active);
-}
-.dt-list-item--selected-icon {
-  margin-left: var(--dt-space-400);
-}
-.dt-list-item :focus-visible {
-  outline: none;
-  box-shadow: var(--dt-shadow-focus);
-}
 .d-avatar--image-loaded {
   background-color: transparent;
   background-image: unset;
@@ -120,59 +51,75 @@
   transform: scale(0.98);
 }
 
-.dt-suggestion-list__container {
-  max-height: var(--dt-size-875);
+.enter-active,
+.leave-active {
+  overflow: hidden;
+  transition: height var(--td300) var(--ttf-out-quint);
 }
-.dt-suggestion-list {
-  position: relative;
-  padding: var(--dt-size-300);
-  min-width: var(--dt-size-925);
-  max-width: var(--dt-size-975);
+.dt-list-item {
+  list-style: none;
+  background-color: var(--dt-action-color-background-muted-default);
 }
-.dt-suggestion-list--item {
-  border: var(--dt-size-100) solid transparent;
+.dt-list-item:not(.dt-list-item--static) {
+  cursor: pointer;
+  border-radius: var(--dt-size-radius-300);
 }
-.mention-suggestion-name[data-v-65bcbd51] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.dt-list-item--focusable:focus,
+.dt-list-item--focusable:focus-within,
+.dt-list-item--highlighted {
+  background-color: var(--dt-action-color-background-muted-hover);
 }
-.dt-rich-text-editor--code-block {
-  background: var(--dt-color-surface-secondary);
-  padding: var(--dt-space-400);
+.dt-list-item--highlighted:active {
+  background-color: var(--dt-action-color-background-muted-active);
 }
-.dt-rich-text-editor > .ProseMirror {
-  box-shadow: none;
+.dt-list-item--selected-icon {
+  margin-left: var(--dt-space-400);
 }
-.dt-rich-text-editor > .ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--dt-color-foreground-placeholder);
-  pointer-events: none;
-  height: 0;
+.dt-list-item :focus-visible {
+  outline: none;
+  box-shadow: var(--dt-shadow-focus);
 }
-.dt-rich-text-editor > .ProseMirror ul,
-.dt-rich-text-editor > .ProseMirror ol {
-  padding-left: var(--dt-space-525);
+.skeleton-placeholder {
+  display: flex;
+  stroke: none;
+  fill: var(--placeholder-from-color, var(--dt-color-black-300));
+  background: var(--placeholder-from-color, var(--dt-color-black-300));
 }
-.dt-rich-text-editor > .ProseMirror ul > li {
-  list-style-type: disc;
+.skeleton-placeholder--animate {
+  animation-name: placeholder-throb;
+  animation-iteration-count: infinite;
 }
-.dt-rich-text-editor > .ProseMirror ol > li {
-  list-style-type: decimal;
+@keyframes placeholder-throb {
+10% {
+    fill: var(--placeholder-from-color, var(--dt-color-black-300));
+    background: var(--placeholder-from-color, var(--dt-color-black-300));
 }
-.dt-rich-text-editor > .ProseMirror blockquote {
-  padding-left: var(--dt-space-400);
-  border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);
-  margin-left: 0;
+50% {
+    fill: var(--placeholder-to-color, var(--dt-color-black-100));
+    background: var(--placeholder-to-color, var(--dt-color-black-100));
 }
-.dt-list-item[role="menuitem"] {
-  border-radius: var(--dt-size-300);
+90% {
+    fill: var(--placeholder-from-color, var(--dt-color-black-300));
+    background: var(--placeholder-from-color, var(--dt-color-black-300));
 }
-.dt-list-separator {
-  border-top: var(--dt-size-100) solid var(--dt-color-border-default);
-  list-style: none;
-  margin: var(--dt-space-300) var(--dt-space-300-negative);
+}
+.dt-empty-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--dt-font-size-200);
+  line-height: var(--lh4);
+  padding: var(--dt-space-300) var(--dt-space-450);
+}
+.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}.tippy-box > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-contrast);
+}.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-moderate);
+}.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
 }
 .dt-description-list {
   display: flex;
@@ -217,1017 +164,817 @@
   flex: 1 1 50%;
   margin-left: 0;
 }
-.dt-empty-list-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--dt-font-size-200);
-  line-height: var(--lh4);
-  padding: var(--dt-space-300) var(--dt-space-450);
-}
-
-.enter-active,
-.leave-active {
-  overflow: hidden;
-  transition: height var(--td300) var(--ttf-out-quint);
+.d-context-menu-list {
+  width: var(--dt-size-850);
 }
-/*! 
- * OverlayScrollbars
- * Version: 2.10.0
- * 
- * Copyright (c) Rene Haas | KingSora.
- * https://github.com/KingSora
- * 
- * Released under the MIT license.
- */
-.os-size-observer,
-.os-size-observer-listener {
-  scroll-behavior: auto !important;
-  direction: inherit;
-  pointer-events: none;
-  overflow: hidden;
-  visibility: hidden;
-  box-sizing: border-box;
+.d-dropdown-list {
+  position: relative;
+  margin: var(--dt-space-300);
+  padding-left: var(--dt-space-0);
+  padding-right: var(--dt-space-0);
 }
-
-.os-size-observer,
-.os-size-observer-listener,
-.os-size-observer-listener-item,
-.os-size-observer-listener-item-final {
-  writing-mode: horizontal-tb;
-  position: absolute;
-  left: 0;
-  top: 0;
+.d-dropdown-list > .dt-list-item {
+  margin-top: var(--dt-space-200);
 }
-
-.os-size-observer {
-  z-index: -1;
-  contain: strict;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  padding: inherit;
-  border: inherit;
-  box-sizing: inherit;
-  margin: -133px;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transform: scale(0.1);
-}
-.os-size-observer::before {
-  content: "";
-  flex: none;
-  box-sizing: inherit;
-  padding: 10px;
-  width: 10px;
-  height: 10px;
+.dt-list-item[role="menuitem"] {
+  border-radius: var(--dt-size-300);
 }
-
-.os-size-observer-appear {
-  animation: os-size-observer-appear-animation 1ms forwards;
+.dt-list-separator {
+  border-top: var(--dt-size-100) solid var(--dt-color-border-default);
+  list-style: none;
+  margin: var(--dt-space-300) var(--dt-space-300-negative);
 }
 
-.os-size-observer-listener {
-  box-sizing: border-box;
-  position: relative;
-  flex: auto;
-  padding: inherit;
-  border: inherit;
-  margin: -133px;
-  transform: scale(calc(1 / 0.1));
-}
-.os-size-observer-listener.ltr {
-  margin-right: -266px;
-  margin-left: 0;
-}
-.os-size-observer-listener.rtl {
-  margin-left: -266px;
-  margin-right: 0;
-}
-.os-size-observer-listener:empty::before {
-  content: "";
-  width: 100%;
-  height: 100%;
+.dt-suggestion-list__container {
+  max-height: var(--dt-size-875);
 }
-.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
-  display: block;
+.dt-suggestion-list {
   position: relative;
-  padding: inherit;
-  border: inherit;
-  box-sizing: content-box;
-  flex: auto;
+  padding: var(--dt-size-300);
+  min-width: var(--dt-size-925);
+  max-width: var(--dt-size-975);
 }
-
-.os-size-observer-listener-scroll {
-  box-sizing: border-box;
-  display: flex;
+.dt-suggestion-list--item {
+  border: var(--dt-size-100) solid transparent;
 }
-
-.os-size-observer-listener-item {
-  right: 0;
-  bottom: 0;
+.mention-suggestion-name[data-v-65bcbd51] {
   overflow: hidden;
-  direction: ltr;
-  flex: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-.os-size-observer-listener-item-final {
-  transition: none;
+.dt-rich-text-editor--code-block {
+  background: var(--dt-color-surface-secondary);
+  padding: var(--dt-space-400);
 }
-
-@keyframes os-size-observer-appear-animation {
-  from {
-    cursor: auto;
-  }
-  to {
-    cursor: none;
-  }
-}
-.os-trinsic-observer {
-  flex: none;
-  box-sizing: border-box;
-  position: relative;
-  max-width: 0px;
-  max-height: 1px;
-  padding: 0;
-  margin: 0;
-  border: none;
-  overflow: hidden;
-  z-index: -1;
+.dt-rich-text-editor > .ProseMirror {
+  box-shadow: none;
+}
+.dt-rich-text-editor > .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--dt-color-foreground-placeholder);
+  pointer-events: none;
   height: 0;
-  top: calc(100% + 1px);
-  contain: strict;
 }
-.os-trinsic-observer:not(:empty) {
-  height: calc(100% + 1px);
-  top: -1px;
+.dt-rich-text-editor > .ProseMirror ul,
+.dt-rich-text-editor > .ProseMirror ol {
+  padding-left: var(--dt-space-525);
 }
-.os-trinsic-observer:not(:empty) > .os-size-observer {
-  width: 1000%;
-  height: 1000%;
-  min-height: 1px;
-  min-width: 1px;
+.dt-rich-text-editor > .ProseMirror ul > li {
+  list-style-type: disc;
 }
-
-/**
- * hide native scrollbars
- * changes to this styles need to be reflected in the environment styles to correctly detect scrollbar hiding
- */
-[data-overlayscrollbars-initialize],
-[data-overlayscrollbars-viewport~=scrollbarHidden] {
-  scrollbar-width: none !important;
+.dt-rich-text-editor > .ProseMirror ol > li {
+  list-style-type: decimal;
 }
-
-[data-overlayscrollbars-initialize]::-webkit-scrollbar,
-[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
-[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
-[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner {
-  -webkit-appearance: none !important;
-          appearance: none !important;
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-}
-
-/**
- * elements wont suddenly clip after initialization is done
- */
-[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) {
-  overflow: auto;
+.dt-rich-text-editor > .ProseMirror blockquote {
+  padding-left: var(--dt-space-400);
+  border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);
+  margin-left: 0;
 }
-
-/**
- * applied to body 
- */
-html[data-overlayscrollbars-body] {
-  overflow: hidden;
+.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {
+  line-height: var(--dt-font-line-height-300);
 }
-
-html[data-overlayscrollbars-body],
-html[data-overlayscrollbars-body] > body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
+.dt-recipe-callbar-button--circle {
+  border-radius: var(--dt-size-radius-circle);
 }
-
-html[data-overlayscrollbars-body] > body {
-  overflow: visible;
-  margin: 0;
+.dt-recipe-callbar-button.d-btn[disabled] {
+  background-color: unset;
+  opacity: 0.5;
 }
-
-/**
- * structure setup 
- */
-[data-overlayscrollbars] {
-  position: relative;
+.dt-recipe-callbar-button--circle.d-btn[disabled] {
+  border-color: unset;
 }
-
-[data-overlayscrollbars~=host],
-[data-overlayscrollbars-padding] {
-  display: flex;
-  align-items: stretch !important;
-  flex-direction: row !important;
-  flex-wrap: nowrap !important;
-  scroll-behavior: auto !important;
+.dt-recipe-callbar-button--active .base-button__icon,
+.dt-recipe-callbar-button--active:hover .base-button__icon {
+  color: var(--primary-color);
 }
-
-[data-overlayscrollbars-padding],
-[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
-  box-sizing: inherit;
-  position: relative;
-  flex: auto !important;
-  height: auto;
-  width: 100%;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: none;
-  z-index: 0;
+.dt-recipe-callbar-button--disabled {
+  cursor: not-allowed;
 }
-
-[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
-  --os-vaw: 0;
-  --os-vah: 0;
-  outline: none;
+.dt-recipe--callbar-button-with-popover--arrow {
+  margin-top: var(--dt-space-350-negative);
+  margin-left: calc(var(--dt-space-300-negative) * 5);
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+  padding: var(--dt-space-400);
+  border-radius: var(--dt-size-300);
 }
-[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus {
-  outline: none;
+.dt-recipe--callbar-button-with-popover--arrow.d-btn--active {
+  background: var(--dt-color-surface-moderate-opaque);
 }
-[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  z-index: -1;
-  min-width: 1px;
-  min-height: 1px;
-  width: var(--os-vaw);
-  height: var(--os-vah);
+.dt-recipe--callbar-button-with-popover--arrow--large {
+  margin-left: var(--dt-space-550-negative);
 }
-
-[data-overlayscrollbars],
-[data-overlayscrollbars-padding],
-[data-overlayscrollbars-viewport] {
-  overflow: hidden !important;
+.dt-recipe--callbar-button-with-popover--arrow__icon {
+  color: var(--dt-color-black-800);
 }
-
-[data-overlayscrollbars~=noClipping],
-[data-overlayscrollbars-padding~=noClipping] {
-  overflow: visible !important;
+.dt-recipe--callbar-button-with-popover--popover .d-popover__header {
+  background: var(--dt-color-surface-contrast);
+  color: var(--dt-color-foreground-primary-inverted);
 }
-
-[data-overlayscrollbars-viewport~=measuring] {
-  overflow: hidden !important;
-  scroll-behavior: auto !important;
-  scroll-snap-type: none !important;
+.dt-recipe--callbar-button-with-popover--popover .d-popover__header .d-btn {
+  color: var(--dt-color-foreground-primary-inverted);
 }
-
-[data-overlayscrollbars-viewport~=overflowXVisible]:not([data-overlayscrollbars-viewport~=measuring]) {
-  overflow-x: visible !important;
+.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);
 }
-
-[data-overlayscrollbars-viewport~=overflowXHidden] {
-  overflow-x: hidden !important;
+.dt-recipe--callbar-button-with-popover--button .tab-group {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-
-[data-overlayscrollbars-viewport~=overflowXScroll] {
-  overflow-x: scroll !important;
+.dt-recipe--callbar-button-with-popover--button .tab-content {
+  flex: 1 1 100%;
+  overflow-y: auto;
 }
-
-[data-overlayscrollbars-viewport~=overflowYVisible]:not([data-overlayscrollbars-viewport~=measuring]) {
-  overflow-y: visible !important;
+.dt-recipe--callbar-button-with-popover {
+  display: flex;
+  align-items: center;
 }
-
-[data-overlayscrollbars-viewport~=overflowYHidden] {
-  overflow-y: hidden !important;
+.ivr_node {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
 }
-
-[data-overlayscrollbars-viewport~=overflowYScroll] {
-  overflow-y: scroll !important;
+.ivr_node__header-left {
+  display: flex;
+  align-items: center;
 }
-
-[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) {
-  font-size: 0 !important;
-  line-height: 0 !important;
+.ivr_node__label {
+  font-size: var(--dt-font-size-200);
+  font-weight: var(--dt-font-weight-bold);
 }
-
-[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,
-[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,
-[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) > * {
-  display: none !important;
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border-width: 0 !important;
+.ivr_node__dropdown-list {
+  width: var(--dt-size-825);
 }
-
-[data-overlayscrollbars-viewport~=scrolling] {
-  scroll-behavior: auto !important;
-  scroll-snap-type: none !important;
+.ivr_node__goto_icon {
+  transform: rotate(90deg);
 }
-
-[data-overlayscrollbars-content] {
-  box-sizing: inherit;
+.ivr-connector {
+  z-index: var(--zi-base);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-color: var(--dt-color-purple-600);
+  background-color: var(--dt-color-purple-600);
+  width: var(--dt-size-400);
+  height: var(--dt-size-400);
+  border-radius: var(--dt-size-radius-circle);
+  margin-bottom: var(--dt-space-300-negative);
 }
-
-/**
- * Display contents to bridge any flickering during deferred initialization.
- */
-[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
-  display: contents;
+.ivr-connector--selected {
+  margin-bottom: var(--dt-space-400-negative);
 }
-
-/**
- * optional & experimental grid mode
- */
-[data-overlayscrollbars-grid],
-[data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
-  display: grid;
-  grid-template: 1fr/1fr;
+.ivr-connector.ivr-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);
 }
-
-[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
-[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
-[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
-  height: auto !important;
-  width: auto !important;
+.ivr-connector.ivr-connector--dtmf--selected {
+  margin-bottom: var(--dt-space-500-negative);
 }
-
-@property --os-scroll-percent {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 0;
-}
-@property --os-viewport-percent {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 0;
-}
-.os-scrollbar {
-  --os-viewport-percent: 0;
-  --os-scroll-percent: 0;
-  --os-scroll-direction: 0;
-  --os-scroll-percent-directional: calc(
-    var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *
-      var(--os-scroll-direction)
-  );
+.dt-grouped-chip {
+  display: inline-flex;
+  white-space: nowrap;
+  background-color: unset;
+  background-image: unset;
 }
-
-.os-scrollbar {
-  contain: size layout;
-  contain: size layout style;
-  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
-  pointer-events: none;
-  position: absolute;
-  opacity: 0;
-  visibility: hidden;
+.dt-chip-content {
+  font-variant-numeric: tabular-nums;
 }
-
-body > .os-scrollbar {
-  position: fixed;
-  z-index: 99999;
+.dt-chip-content--left {
+  border-top-left-radius: var(--dt-size-radius-pill);
+  border-bottom-left-radius: var(--dt-size-radius-pill);
+  background-color: var(--dt-color-surface-moderate-opaque);
+  max-width: var(--dt-size-730);
 }
-
-.os-scrollbar-transitionless {
-  transition: none !important;
+.dt-chip-content--right {
+  border-top-right-radius: var(--dt-size-radius-pill);
+  border-bottom-right-radius: var(--dt-size-radius-pill);
+  background-color: var(--dt-color-purple-200);
+  max-width: var(--dt-size-730);
 }
-
-.os-scrollbar-track {
+.combobox__input-wrapper[data-v-a66c77a1] {
   position: relative;
-  padding: 0 !important;
-  border: none !important;
+  display: block;
 }
-
-.os-scrollbar-handle {
+.combobox__chip-wrapper[data-v-a66c77a1] {
   position: absolute;
+  margin-left: var(--dt-space-200);
+  margin-right: var(--dt-space-200);
+  padding-left: var(--dt-space-100);
+  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
+  max-height: initial;
+  overflow-y: visible;
 }
-
-.os-scrollbar-track,
-.os-scrollbar-handle {
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-}
-
-.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
-.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
-  pointer-events: auto;
-  touch-action: none;
-}
-
-.os-scrollbar-horizontal {
-  bottom: 0;
-  left: 0;
-}
-
-.os-scrollbar-vertical {
-  top: 0;
-  right: 0;
-}
-
-.os-scrollbar-rtl.os-scrollbar-horizontal {
-  right: 0;
-}
-
-.os-scrollbar-rtl.os-scrollbar-vertical {
-  right: auto;
-  left: 0;
-}
-
-.os-scrollbar-visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.os-scrollbar-interaction.os-scrollbar-visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.os-scrollbar-unusable,
-.os-scrollbar-unusable *,
-.os-scrollbar-wheel,
-.os-scrollbar-wheel * {
-  pointer-events: none !important;
-}
-
-.os-scrollbar-unusable .os-scrollbar-handle {
-  opacity: 0 !important;
-  transition: none !important;
-}
-
-.os-scrollbar-horizontal .os-scrollbar-handle {
-  bottom: 0;
-  left: calc(var(--os-scroll-percent-directional) * 100%);
-  transform: translateX(calc(var(--os-scroll-percent-directional) * -100%));
-  width: calc(var(--os-viewport-percent) * 100%);
+.combobox__chip-wrapper-md--collapsed[data-v-a66c77a1] {
+  max-height: 2.8rem;
+  overflow-y: hidden;
 }
-
-.os-scrollbar-vertical .os-scrollbar-handle {
-  right: 0;
-  top: calc(var(--os-scroll-percent-directional) * 100%);
-  transform: translateY(calc(var(--os-scroll-percent-directional) * -100%));
-  height: calc(var(--os-viewport-percent) * 100%);
+.combobox__chip-wrapper-sm--collapsed[data-v-a66c77a1],
+.combobox__chip-wrapper-xs--collapsed[data-v-a66c77a1] {
+  max-height: 2.5rem;
+  overflow-y: hidden;
 }
-
-@supports (container-type: size) {
-  .os-scrollbar-track {
-    container-type: size;
-  }
-  .os-scrollbar-horizontal .os-scrollbar-handle {
-    left: auto;
-    transform: translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));
-  }
-  .os-scrollbar-vertical .os-scrollbar-handle {
-    top: auto;
-    transform: translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));
-  }
-  .os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle {
-    right: auto;
-    left: 0;
-  }
-}
-.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
-  right: auto;
-  left: 0;
+.combobox__chip[data-v-a66c77a1] {
+  margin-top: var(--dt-space-300);
+  margin-left: var(--dt-space-200);
+  margin-right: var(--dt-space-200);
+  z-index: var(--zi-base1);
+  max-width: var(--dt-size-100-percent);
 }
-
-.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
-.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
-  left: 0;
-  right: 0;
+.combobox__input[data-v-a66c77a1] {
+  flex-grow: 1;
 }
-
-.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
-.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
-  top: 0;
-  bottom: 0;
+.combobox__list--loading[data-v-a66c77a1] {
+  text-align: center;
+  padding-top: var(--dt-space-500);
+  padding-bottom: var(--dt-space-500);
 }
-
-@media print {
-  .os-scrollbar {
-    display: none;
-  }
-}
-.os-scrollbar {
-  --os-size: 0;
-  --os-padding-perpendicular: 0;
-  --os-padding-axis: 0;
-  --os-track-border-radius: 0;
-  --os-track-bg: none;
-  --os-track-bg-hover: none;
-  --os-track-bg-active: none;
-  --os-track-border: none;
-  --os-track-border-hover: none;
-  --os-track-border-active: none;
-  --os-handle-border-radius: 0;
-  --os-handle-bg: none;
-  --os-handle-bg-hover: none;
-  --os-handle-bg-active: none;
-  --os-handle-border: none;
-  --os-handle-border-hover: none;
-  --os-handle-border-active: none;
-  --os-handle-min-size: 33px;
-  --os-handle-max-size: none;
-  --os-handle-perpendicular-size: 100%;
-  --os-handle-perpendicular-size-hover: 100%;
-  --os-handle-perpendicular-size-active: 100%;
-  --os-handle-interactive-area-offset: 0;
+.progress-bar {
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
 }
-
-.os-scrollbar-track {
-  border: var(--os-track-border);
-  border-radius: var(--os-track-border-radius);
-  background: var(--os-track-bg);
-  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
+.progress-bar__circle {
+  fill: none;
+  stroke-width: 2;
+  stroke-dasharray: var(--stroke-dasharray);
 }
-.os-scrollbar-track:hover {
-  border: var(--os-track-border-hover);
-  background: var(--os-track-bg-hover);
+.progress-bar__circle:nth-child(1) {
+  stroke-dashoffset: 0;
+  stroke: var(--dt-color-black-100);
 }
-.os-scrollbar-track:active {
-  border: var(--os-track-border-active);
-  background: var(--os-track-bg-active);
+.progress-bar__circle:nth-child(2) {
+  stroke-dashoffset: var(--stroke-dashoffset);
+  stroke: var(--dt-color-purple-500);
+  transition: stroke-dashoffset 500ms linear;
 }
-
-.os-scrollbar-handle {
-  border: var(--os-handle-border);
-  border-radius: var(--os-handle-border-radius);
-  background: var(--os-handle-bg);
+.dt-attachment-image {
+  position: relative;
 }
-.os-scrollbar-handle:hover {
-  border: var(--os-handle-border-hover);
-  background: var(--os-handle-bg-hover);
+.dt-attachment-image:focus-within .dt-attachment-image__close-button,
+.dt-attachment-image:hover .dt-attachment-image__close-button {
+  opacity: 1;
 }
-.os-scrollbar-handle:active {
-  border: var(--os-handle-border-active);
-  background: var(--os-handle-bg-active);
+.dt-attachment-image__image-viewer {
+  height: var(--dt-size-700);
+  width: var(--dt-size-700);
+  border: var(--dt-space-100) solid;
+  border-radius: var(--br4);
+  border-width: var(--dt-size-350);
+  border-color: var(--dt-color-border-subtle);
+  object-fit: cover;
 }
-
-.os-scrollbar-track:before,
-.os-scrollbar-handle:before {
-  content: "";
+.dt-attachment-image__top-right {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: block;
-}
-
-.os-scrollbar-horizontal {
-  padding: var(--os-padding-perpendicular) var(--os-padding-axis);
-  right: var(--os-size);
-  height: var(--os-size);
-}
-.os-scrollbar-horizontal.os-scrollbar-rtl {
-  left: var(--os-size);
-  right: 0;
-}
-.os-scrollbar-horizontal .os-scrollbar-track:before {
-  top: calc(var(--os-padding-perpendicular) * -1);
-  bottom: calc(var(--os-padding-perpendicular) * -1);
+  top: var(--dt-size-100);
+  right: var(--dt-size-100);
 }
-.os-scrollbar-horizontal .os-scrollbar-handle {
-  min-width: var(--os-handle-min-size);
-  max-width: var(--os-handle-max-size);
-  height: var(--os-handle-perpendicular-size);
-  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
+.dt-attachment-image__close-button {
+  opacity: 0;
+  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-width: var(--dt-size-200);
+  border-color: var(--dt-color-neutral-white);
 }
-.os-scrollbar-horizontal .os-scrollbar-handle:before {
-  top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
-  bottom: calc(var(--os-padding-perpendicular) * -1);
+.dt-attachment-image__progress-bar {
+  position: absolute;
+  top: inherit;
+  right: inherit;
+  background-color: var(--dt-color-neutral-white);
+  border-radius: 50%;
+  display: flex;
+  transform: rotate(-90deg);
+  border: var(--dt-space-100) solid;
+  border-width: var(--dt-size-200);
+  border-color: var(--dt-color-border-subtle);
 }
-.os-scrollbar-horizontal:hover .os-scrollbar-handle {
-  height: var(--os-handle-perpendicular-size-hover);
+.dt-attachment-carousel {
+  position: relative;
+  max-height: 100px;
+  width: var(--dt-space-1000);
 }
-.os-scrollbar-horizontal:active .os-scrollbar-handle {
-  height: var(--os-handle-perpendicular-size-active);
+.dt-attachment-carousel__media-list {
+  display: flex;
+  flex-direction: row;
+  padding-left: 0px;
+  overflow-x: scroll;
 }
-
-.os-scrollbar-vertical {
-  padding: var(--os-padding-axis) var(--os-padding-perpendicular);
-  bottom: var(--os-size);
-  width: var(--os-size);
+.dt-attachment-carousel__media-list::-webkit-scrollbar {
+  display: none;
 }
-.os-scrollbar-vertical .os-scrollbar-track:before {
-  left: calc(var(--os-padding-perpendicular) * -1);
-  right: calc(var(--os-padding-perpendicular) * -1);
+.dt-attachment-carousel__arrow {
+  position: absolute;
+  opacity: 0;
+  background-color: var(--dt-color-neutral-white);
+  top: var(--dt-space-30-percent);
+  border: var(--dt-space-100) solid;
+  border-width: var(--dt-size-100);
+  border-color: var(--bc-default);
 }
-.os-scrollbar-vertical .os-scrollbar-handle {
-  min-height: var(--os-handle-min-size);
-  max-height: var(--os-handle-max-size);
-  width: var(--os-handle-perpendicular-size);
-  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
+.dt-attachment-carousel:hover .dt-attachment-carousel__arrow {
+  opacity: 1;
 }
-.os-scrollbar-vertical .os-scrollbar-handle:before {
-  left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
-  right: calc(var(--os-padding-perpendicular) * -1);
+.dt-attachment-carousel__arrow--left {
+  left: var(--dt-space-300);
 }
-.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
-  right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
-  left: calc(var(--os-padding-perpendicular) * -1);
+.dt-attachment-carousel__arrow--right {
+  right: var(--dt-space-300);
 }
-.os-scrollbar-vertical:hover .os-scrollbar-handle {
-  width: var(--os-handle-perpendicular-size-hover);
+.dt-attachment-carousel__image-viewer {
+  height: var(--dt-size-700);
+  width: var(--dt-size-700);
+  border-radius: var(--br4);
+  border: var(--dt-space-100) solid;
+  border-width: var(--dt-size-350);
+  border-color: var(--dt-color-border-subtle);
 }
-.os-scrollbar-vertical:active .os-scrollbar-handle {
-  width: var(--os-handle-perpendicular-size-active);
+.dt-editor--top-bar-background {
+  background-color: var(--dt-color-surface-secondary);
 }
-
-/* NONE THEME: */
-[data-overlayscrollbars-viewport~=measuring] > .os-scrollbar,
-.os-theme-none.os-scrollbar {
-  display: none !important;
+.dt-editor--button-group-divider {
+  margin-left: var(--dt-space-400);
+  height: calc(var(--dt-size-550) + var(--dt-size-300));
+  width: var(--dt-size-100);
+  background: var(--dt-color-border-subtle);
 }
-
-/* DARK & LIGHT THEME: */
-.os-theme-dark,
-.os-theme-light {
-  box-sizing: border-box;
-  --os-size: 10px;
-  --os-padding-perpendicular: 2px;
-  --os-padding-axis: 2px;
-  --os-track-border-radius: 10px;
-  --os-handle-interactive-area-offset: 4px;
-  --os-handle-border-radius: 10px;
+.dt-emoji-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dt-space-300);
 }
-
-.os-theme-dark {
-  --os-handle-bg: rgba(0, 0, 0, 0.44);
-  --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
-  --os-handle-bg-active: rgba(0, 0, 0, 0.66);
+.dt-emoji-row__tooltip {
+  display: inline-block;
 }
-
-.os-theme-light {
-  --os-handle-bg: rgba(255, 255, 255, 0.44);
-  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
-  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
-}.dt-top-banner-info {
-  font-size: var(--dt-font-size-100);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--dt-color-foreground-primary);
+.dt-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);
+  padding: var(--dt-space-300) var(--dt-space-400);
+  border-radius: var(--dt-size-radius-pill);
+  border: 0;
+  color: var(--emoji-item-color-foreground);
+  background-color: var(--emoji-item-color-background);
+  box-shadow: inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);
+  height: var(--dt-size-550);
 }
-.dt-top-banner-info__left {
-  margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
-  min-width: 20%;
+.dt-emoji-row__reaction.dt-emoji-row__picker {
+  padding: var(--dt-space-200) var(--dt-space-350);
 }
-.dt-top-banner-info__middle {
-  display: flex;
-  align-items: center;
-  gap: var(--dt-size-300);
-  margin-top: var(--dt-space-300);
-  margin-bottom: var(--dt-space-300);
+.dt-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-top-banner-info__right {
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-  gap: var(--dt-size-300);
-  margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
-  min-width: 20%;
-  text-align: right;
+.dt-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);
+  transform: scale(0.98);
 }
-.dt-leftbar-unread-pill {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);
-  gap: var(--dt-space-300);
-  font-size: var(--dt-font-size-100);
-  box-shadow: var(--dt-shadow-medium);
-  border-radius: var(--dt-size-radius-pill);
-  border: none;
-  line-height: var(--dt-font-line-height-600);
-  cursor: pointer;
+.dt-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-leftbar-unread-pill--mentions {
+.dt-emoji-row__reaction--selected .dt-emoji-row__reaction-number {
   font-weight: var(--dt-font-weight-bold);
-  background-color: var(--dt-theme-mention-color-background);
-  color: var(--dt-theme-mention-color-foreground);
-}
-.dt-leftbar-unread-pill--messages {
-  background-color: var(--dt-color-surface-contrast);
-  color: var(--dt-color-foreground-secondary-inverted);
 }
-/* stylelint-disable selector-pseudo-class-no-unknown */
-.dt-leftbar-row[data-v-f626c1e7] {
-  --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-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-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within {
-  --leftbar-row-unread-badge-display: none;
+.dt-emoji-row__reaction--selected:active {
+  --emoji-item-color-background: var(--dt-action-color-background-base-active);
 }
-.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-emoji-row__emoji {
+  margin-right: var(--dt-space-300);
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
-  opacity: 1;
+.dt-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);
+  line-height: var(--dt-font-line-height-100);
+  font-variant: tabular-nums;
 }
-.dt-leftbar-row[data-v-f626c1e7]:hover,
-.dt-leftbar-row[data-v-f626c1e7]:focus-within {
-  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
+.dt-feed-item-row[data-v-047dcbe5] {
+  width: var(--dt-size-100-percent);
+  box-sizing: border-box;
+  position: relative;
+  padding: var(--dt-space-300) var(--dt-space-500);
 }
-.dt-leftbar-row[data-v-f626c1e7]:hover .d-presence,
-.dt-leftbar-row[data-v-f626c1e7]:focus-within .d-presence {
-  --presence-color-border-base: var(--dt-color-black-200);
+.dt-feed-item-row[data-v-047dcbe5]:focus-visible {
+  box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row[data-v-f626c1e7]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-f626c1e7]:focus-within .d-avatar__count {
-  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
+.dt-feed-item-row--state-searched[data-v-047dcbe5] {
+  background-color: var(--dt-color-surface-warning-subtle);
 }
-.dt-leftbar-row--has-unread[data-v-f626c1e7] {
-  --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-feed-item-row--state-error[data-v-047dcbe5] {
+  background-color: var(--dt-color-surface-critical-subtle);
 }
-.dt-leftbar-row--muted[data-v-f626c1e7] {
-  --leftbar-row-opacity: 60%;
+.dt-feed-item-row--active[data-v-047dcbe5] {
+  background-color: var(--dt-color-surface-secondary-opaque);
 }
-.dt-leftbar-row--selected[data-v-f626c1e7] {
-  --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-feed-item-row--state-transition[data-v-047dcbe5] {
+  transition-duration: 2s;
+  transition-delay: 0s;
+  transition-timing-function: var(--ttf-in-out);
+  transition-property: background-color;
 }
-.dt-leftbar-row--selected[data-v-f626c1e7] .d-presence {
-  --presence-color-border-base: var(--dt-color-black-200);
+.dt-feed-item-row__avatar-container[data-v-047dcbe5] {
+  padding-top: var(--dt-space-300);
+  padding-bottom: var(--dt-space-300);
 }
-.dt-leftbar-row--selected[data-v-f626c1e7] .d-avatar__count {
-  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
+.dt-feed-item-row__content[data-v-047dcbe5] {
+  padding-left: var(--dt-space-300);
 }
-.dt-leftbar-row__is-typing[data-v-f626c1e7] {
-  --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-feed-item-row__attachment[data-v-047dcbe5] {
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-300);
 }
-.dt-leftbar-row__is-typing span[data-v-f626c1e7] {
-  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;
-  animation: wave-f626c1e7 1.5s ease infinite;
-}
-.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(1) {
-  animation-delay: 0ms;
-}
-.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(2) {
-  animation-delay: var(--td100);
+.dt-feed-item-row__attachment[data-v-047dcbe5] .dt-feed-item-row__image {
+  border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);
+  border-radius: var(--dt-size-radius-400);
+  display: block;
+  max-width: 30rem;
+  max-height: 30rem;
+  min-width: 5.6rem;
+  min-height: 5.6rem;
 }
-.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(3) {
-  animation-delay: var(--td200);
+.dt-feed-item-row__attachment[data-v-047dcbe5] .dt-feed-item-row__video {
+  display: block;
+  height: 25rem;
 }
-.dt-leftbar-row__primary[data-v-f626c1e7] {
+.dt-feed-item-row__header[data-v-047dcbe5] {
   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);
-  appearance: none;
-}
-.dt-leftbar-row__primary[data-v-f626c1e7]:active {
-  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--dt-space-300);
+  font-size: var(--dt-font-size-200);
+  line-height: var(--dt-font-line-height-300);
 }
-.dt-leftbar-row__primary[data-v-f626c1e7]:focus-visible {
-  box-shadow: var(--dt-shadow-focus-inset);
+.dt-feed-item-row__header__name[data-v-047dcbe5] {
+  font-weight: var(--dt-font-weight-bold);
 }
-.dt-leftbar-row__action-button[data-v-f626c1e7] {
-  width: var(--leftbar-row-action-width);
-  height: var(--leftbar-row-action-height);
-  opacity: 0;
+.dt-feed-item-row__header__time[data-v-047dcbe5] {
+  font-size: var(--dt-font-size-100);
+  color: var(--dt-color-foreground-tertiary);
+  flex-shrink: 0;
 }
-.dt-leftbar-row__alpha[data-v-f626c1e7] {
+.dt-feed-item-row__reactions[data-v-047dcbe5] {
   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);
+  flex-wrap: wrap;
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
+  padding-left: var(--dt-space-300);
 }
-.dt-leftbar-row__label[data-v-f626c1e7] {
-  flex: 0 1;
-  min-width: 0;
+.dt-feed-item-row__threading[data-v-047dcbe5] {
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
 }
-.dt-leftbar-row__omega[data-v-f626c1e7] {
+.dt-feed-item-row__left-time[data-v-047dcbe5] {
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+  font-weight: var(--dt-font-weight-normal);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.dt-feed-item-row__menu[data-v-047dcbe5] {
   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);
-  transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
+  top: var(--dt-space-550-negative);
+  right: var(--dt-space-450);
 }
-.dt-leftbar-row__unread-badge[data-v-f626c1e7] {
-  display: var(--leftbar-row-unread-badge-display);
-  color: var(--dt-theme-mention-color-foreground);
-  background-color: var(--dt-theme-mention-color-background);
+.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout {
+  font: var(--dt-typography-body-md-compact);
+  min-height: initial;
+  padding: 0px;
 }
-.dt-leftbar-row--unread-count[data-v-f626c1e7] .dt-leftbar-row__action {
-  display: none;
+.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout > .dt-item-layout--left {
+  align-self: flex-start;
+  text-align: end;
+  display: block;
+  padding-right: var(--dt-space-300);
+  padding-left: var(--dt-space-0);
+  min-width: calc(var(--dt-space-600) + var(--dt-space-300));
 }
-.dt-leftbar-row__unread-count-badge[data-v-f626c1e7] {
-  border-top-right-radius: var(--dt-size-radius-0);
-  border-bottom-right-radius: var(--dt-size-radius-0);
+.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout > .dt-item-layout--right {
+  padding: 0;
+  min-width: initial;
 }
-.dt-leftbar-row__unread-mention-count-badge[data-v-f626c1e7] {
-  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-feed-item-row[data-v-047dcbe5] > .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
 }
-.dt-leftbar-row__unread-mention-only-count-badge[data-v-f626c1e7] {
-  color: var(--dt-theme-mention-color-foreground-strong);
-  background-color: var(--dt-theme-mention-color-background-strong);
+.dt-recipe-feed-item-pill__wrapper[data-v-dab5b252] {
+  background-color: var(--dt-color-surface-secondary);
+  padding: var(--dt-space-400);
 }
-.dt-leftbar-row__active-voice[data-v-f626c1e7] {
-  display: inline-flex;
-  color: var(--dt-color-purple-400);
-  -webkit-animation-name: opacity-pulsate-f626c1e7;
-  -moz-animation-name: opacity-pulsate-f626c1e7;
-  animation-name: opacity-pulsate-f626c1e7;
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-  animation-fill-mode: both;
+.dt-recipe-feed-item-pill__button[data-v-dab5b252] {
+  background-color: var(--dt-color-surface-moderate);
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+  border-width: 0;
+  border-radius: var(--dt-size-radius-600);
+  --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-leftbar-row__dnd[data-v-f626c1e7] {
-  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-feed-item-pill__layout[data-v-dab5b252] {
+  padding: var(--dt-space-400);
+  gap: var(--dt-space-300);
+  width: 100%;
 }
-.dt-leftbar-row__container--off-duty[data-v-f626c1e7] {
-  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-feed-item-pill__layout[data-v-dab5b252] > .dt-item-layout--left {
+  padding-right: var(--dt-space-0);
+  justify-content: center;
 }
-.dt-leftbar-row__container--off-duty[data-v-f626c1e7] .dt-leftbar-row__primary {
-  margin: calc(var(--dt-size-100) * -1);
+.dt-recipe-feed-item-pill__icon[data-v-dab5b252] {
+  animation: fade-dab5b252 0.15s ease-in;
 }
-.dt-leftbar-row--contact-centers[data-v-f626c1e7] .dt-leftbar-row__alpha {
-  padding-right: var(--dt-space-450);
-  padding-left: var(--dt-space-450);
+.dt-recipe-feed-item-pill__content[data-v-dab5b252] {
+  display: flex;
+  justify-content: center;
 }
-.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-f626c1e7] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: var(--dt-size-600);
-  height: var(--dt-size-500);
+.dt-recipe-feed-item-pill__title[data-v-dab5b252] {
+  font-weight: var(--dt-font-weight-bold);
 }
-.dt-leftbar-row[data-v-f626c1e7] .dt-leftbar-row__description {
+.dt-recipe-feed-item-pill__border[data-v-dab5b252] {
+  border: double 1px transparent;
+  border-radius: var(--dt-size-radius-600);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
   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-leftbar-row[data-v-f626c1e7] .dt-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-feed-item-pill__border-default[data-v-dab5b252] {
+  background: var(--dt-color-border-default);
 }
-.dt-leftbar-row[data-v-f626c1e7] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
-  color: var(--dt-theme-sidebar-status-color-foreground);
-  content: " • ";
+.dt-recipe-feed-item-pill__border-ai[data-v-dab5b252] {
+  background-image: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)), var(--dt-badge-color-background-ai);
 }
-.dt-leftbar-row__icon-cc[data-v-f626c1e7] {
-  width: calc(var(--dt-size-300) * 3.5);
-  height: calc(var(--dt-size-300) * 3.5);
-  border-radius: var(--dt-size-200);
+.dt-recipe-feed-item-pill__border-critical[data-v-dab5b252] {
+  background: var(--dt-color-foreground-critical);
 }
-.opacity-pulsate[data-v-f626c1e7] {
-  -webkit-animation-name: opacity-pulsate-f626c1e7;
-  -moz-animation-name: opacity-pulsate-f626c1e7;
-  animation-name: opacity-pulsate-f626c1e7;
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-  animation-fill-mode: both;
+@keyframes fade-dab5b252 {
+0% {
+    transform: scale(0);
 }
-@keyframes opacity-pulsate-f626c1e7 {
-0%,
-  100% {
-    opacity: 0.2;
+100% {
+    transform: scale(1);
 }
-50% {
-    opacity: 1;
 }
+.dt-message-input-meeting-pill {
+  display: inline-block;
 }
-@keyframes opacity-pulsate-f626c1e7 {
-0%,
-  100% {
-    opacity: 0.2;
+.dt-message-input-meeting-pill__layout {
+  gap: var(--dt-space-400);
+  grid-template-areas: 'left content right';
+  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
+  align-items: center;
+  max-width: var(--dt-size-905);
+  padding-left: var(--dt-space-400);
+  padding-right: var(--dt-space-400);
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
+  border-radius: var(--dt-size-radius-300);
+  font: var(--dt-typography-headline-md);
 }
-50% {
-    opacity: 1;
+.dt-message-input-meeting-pill__icon {
+  display: flex;
+  align-items: center;
+  padding: var(--dt-space-350);
 }
+.dt-message-input-meeting-pill__close {
+  display: flex;
+  justify-content: flex-end;
 }
-@keyframes opacity-pulsate-f626c1e7 {
-0%,
-  100% {
-    opacity: 0.2;
+.dt-message-input {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--dt-size-radius-400);
+  border: var(--dt-size-border-100) solid;
+  border-color: var(--dt-color-border-default);
+  cursor: text;
 }
-50% {
-    opacity: 1;
+.dt-message-input:focus-within {
+  border-color: var(--dt-color-border-bold);
+  box-shadow: var(--dt-shadow-small);
 }
+.dt-message-input__editor-wrapper {
+  padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);
 }
-@keyframes wave-f626c1e7 {
-0%,
-  50%,
-  100% {
-    transform: translate(0, 0);
+.dt-message-input__remaining-char-tooltip {
+  margin-top: auto;
+  margin-bottom: auto;
 }
-10% {
-    transform: translate(0, -0.5rem);
-    opacity: 0.9;
+.dt-message-input__remaining-char {
+  color: var(--dt-color-foreground-critical);
+  font-size: var(--dt-font-size-100);
+  margin-right: var(--dt-space-500);
+}
+.dt-message-input__send-button--disabled {
+  background-color: unset;
+  color: var(--dt-color-foreground-muted);
+  cursor: default;
+}
+.dt-message-input__cancel-button {
+  margin-right: var(--dt-space-300);
+}
+.dt-message-input__bottom-section {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--dt-space-300) var(--dt-space-400);
+}
+.dt-message-input__bottom-section-left {
+  display: flex;
+}
+.dt-message-input__bottom-section-right {
+  display: flex;
+}
+.dt-message-input__image-input {
+  position: absolute;
+}
+.dt-time-pill {
+  color: var(--dt-color-foreground-primary);
+  border-radius: var(--dt-size-radius-pill);
+  line-height: var(--dt-font-line-height-300);
+  font-size: var(--dt-font-size-100);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
+  background-color: var(--dt-color-surface-primary);
+  padding: var(--dt-space-300) var(--dt-space-500);
+}
+.settings-menu-button[data-v-4ee1371d] {
+  padding: var(--dt-space-0);
+  border-radius: var(--dt-size-550);
+  height: var(--dt-size-600);
+  width: var(--dt-size-550);
+  color: var(--dt-theme-topbar-button-color-foreground);
+  background-color: var(--dt-theme-topbar-button-color-background);
+}
+.settings-menu-button[data-v-4ee1371d]:hover {
+  background-color: var(--dt-theme-topbar-button-color-background-hover);
+  color: var(--dt-theme-topbar-button-color-foreground-hover);
+}
+.settings-menu-button[data-v-4ee1371d]:active {
+  background-color: var(--dt-theme-topbar-button-color-background-active);
+}
+.settings-menu-button-update[data-v-4ee1371d] {
+  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);
+  color: var(--dt-color-blue-500);
+  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);
+  border-radius: var(--dt-size-radius-pill);
+  height: var(--dt-size-600);
+}
+.settings-menu-button-update[data-v-4ee1371d]:hover {
+  background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);
+  color: var(--dt-theme-topbar-button-color-foreground-hover);
+}
+.dt-contact-info[data-v-7b60b2d6] {
+  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
+  display: flex;
+}
+.dt-contact-info[data-v-7b60b2d6] .dt-item-layout {
+  flex: 1 1 0;
+}
+.dt-contact-info[data-v-7b60b2d6] .dt-item-layout--content {
+  /*
+    DP-74536: Add `min-width` to make the width of "contact info" adjustable.
+    */
+  min-width: var(--dt-space-825);
+}
+.dt-contact-info[data-v-7b60b2d6] .dt-item-layout--left {
+  /*
+    DP-74536: To make 'Avatar' in fixed position when resizing the window.
+    */
+  min-width: var(--dt-space-650);
+  justify-content: flex-start;
+  align-items: center;
+}
+.dt-contact-info[data-v-7b60b2d6] .dt-item-layout--right {
+  /*
+    DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
+    */
+  min-width: 0;
+  align-items: center;
+}
+.dt-contact-info__left[data-v-7b60b2d6] {
+  position: relative;
+  background-color: transparent;
+  background-image: none;
+  border-width: 0;
+  cursor: pointer;
+}
+.dt-contact-info--avatars[data-v-7b60b2d6] {
+  margin-right: var(--dt-space-300-negative);
+  display: flex;
+  flex-direction: row;
+}
+.dt-contact-info--avatars .d-avatar[data-v-7b60b2d6] {
+  border-radius: var(--dt-size-radius-pill);
+  border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
+  box-sizing: unset;
+}
+.dt-recipe-callbox[data-v-ef08f46e] {
+  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[data-v-ef08f46e] {
+  display: flex;
+  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
+  overflow: clip;
+  margin-bottom: var(--dt-space-300-negative);
+}
+.dt-recipe-callbox--main-content[data-v-ef08f46e] {
+  padding: 0;
+  border-radius: var(--dt-size-radius-300);
+  border: var(--dt-size-border-100) solid transparent;
+  align-items: stretch;
+}
+.dt-recipe-callbox--main-content.dt-recipe-callbox--border-default[data-v-ef08f46e] {
+  border-color: var(--dt-color-border-default);
+}
+.dt-recipe-callbox--main-content.dt-recipe-callbox--border-ai[data-v-ef08f46e] {
+  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[data-v-ef08f46e] {
+  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[data-v-ef08f46e] {
+  display: flex;
+  align-items: center;
+  padding: var(--dt-space-350) var(--dt-space-400);
+}
+.dt-recipe-callbox--main-content-bottom[data-v-ef08f46e] {
+  border-top: 1px solid var(--dt-color-border-subtle);
+}
+.dt-recipe-callbox--avatar[data-v-ef08f46e] {
+  margin-right: var(--dt-space-400);
+}
+.dt-recipe-callbox--content[data-v-ef08f46e] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  min-width: 0;
+}
+.dt-recipe-callbox--content-title[data-v-ef08f46e] {
+  overflow: clip;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--dt-color-foreground-primary);
+  background-color: var(--dt-color-surface-primary);
+  font-weight: var(--dt-font-weight-bold);
+  border: none;
+  padding: 0;
+  width: 0;
+  min-width: 100%;
+  text-align: left;
+  user-select: text;
+  line-height: normal;
+}
+.dt-recipe-callbox--content-badge[data-v-ef08f46e] {
+  line-height: normal;
+}
+.dt-recipe-callbox--content-subtitle[data-v-ef08f46e] {
+  padding: 0;
+  font-size: var(--dt-font-size-100);
+  color: var(--dt-color-foreground-tertiary);
+  line-height: normal;
+  overflow: hidden;
+  width: 0;
+  min-width: 100%;
+}
+.dt-recipe-callbox--right[data-v-ef08f46e] {
+  display: flex;
+  justify-content: right;
+}
+.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e] {
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--dt-size-100);
+}
+.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:focus-visible {
+  outline: none;
+  box-shadow: var(--dt-shadow-focus);
+}
+.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:hover,
+.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:active {
+  text-decoration: underline;
 }
+.dt-recipe-callbox .dt-recipe-callbox-badge--warning[data-v-ef08f46e] {
+  background-color: var(--dt-color-surface-warning);
 }
 /* stylelint-disable selector-pseudo-class-no-unknown */
 .dt-leftbar-row[data-v-17c77b19] {
@@ -1535,748 +1282,358 @@ body > .os-scrollbar {
     opacity: 0.9;
 }
 }
-.dt-recipe-callbox[data-v-ef08f46e] {
-  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[data-v-ef08f46e] {
+/* stylelint-disable selector-pseudo-class-no-unknown */
+.dt-leftbar-row[data-v-f626c1e7] {
+  --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;
-  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
-  overflow: clip;
-  margin-bottom: var(--dt-space-300-negative);
+  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-callbox--main-content[data-v-ef08f46e] {
-  padding: 0;
-  border-radius: var(--dt-size-radius-300);
-  border: var(--dt-size-border-100) solid transparent;
-  align-items: stretch;
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within {
+  --leftbar-row-unread-badge-display: none;
 }
-.dt-recipe-callbox--main-content.dt-recipe-callbox--border-default[data-v-ef08f46e] {
-  border-color: var(--dt-color-border-default);
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+  display: inline-flex;
 }
-.dt-recipe-callbox--main-content.dt-recipe-callbox--border-ai[data-v-ef08f46e] {
-  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-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+  opacity: 1;
 }
-.dt-recipe-callbox--main-content.dt-recipe-callbox--border-critical[data-v-ef08f46e] {
-  background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, radial-gradient(circle, #E7301D, #F78B23) border-box;
+.dt-leftbar-row[data-v-f626c1e7]:hover,
+.dt-leftbar-row[data-v-f626c1e7]:focus-within {
+  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-recipe-callbox--main-content-top[data-v-ef08f46e] {
-  display: flex;
-  align-items: center;
-  padding: var(--dt-space-350) var(--dt-space-400);
+.dt-leftbar-row[data-v-f626c1e7]:hover .d-presence,
+.dt-leftbar-row[data-v-f626c1e7]:focus-within .d-presence {
+  --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-recipe-callbox--main-content-bottom[data-v-ef08f46e] {
-  border-top: 1px solid var(--dt-color-border-subtle);
+.dt-leftbar-row[data-v-f626c1e7]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-f626c1e7]:focus-within .d-avatar__count {
+  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-recipe-callbox--avatar[data-v-ef08f46e] {
-  margin-right: var(--dt-space-400);
+.dt-leftbar-row--has-unread[data-v-f626c1e7] {
+  --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-callbox--content[data-v-ef08f46e] {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  min-width: 0;
+.dt-leftbar-row--muted[data-v-f626c1e7] {
+  --leftbar-row-opacity: 60%;
 }
-.dt-recipe-callbox--content-title[data-v-ef08f46e] {
-  overflow: clip;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--dt-color-foreground-primary);
-  background-color: var(--dt-color-surface-primary);
-  font-weight: var(--dt-font-weight-bold);
-  border: none;
-  padding: 0;
-  width: 0;
-  min-width: 100%;
-  text-align: left;
-  user-select: text;
-  line-height: normal;
+.dt-leftbar-row--selected[data-v-f626c1e7] {
+  --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-callbox--content-badge[data-v-ef08f46e] {
-  line-height: normal;
+.dt-leftbar-row--selected[data-v-f626c1e7] .d-presence {
+  --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-recipe-callbox--content-subtitle[data-v-ef08f46e] {
-  padding: 0;
-  font-size: var(--dt-font-size-100);
-  color: var(--dt-color-foreground-tertiary);
-  line-height: normal;
-  overflow: hidden;
-  width: 0;
-  min-width: 100%;
+.dt-leftbar-row--selected[data-v-f626c1e7] .d-avatar__count {
+  --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-recipe-callbox--right[data-v-ef08f46e] {
+.dt-leftbar-row__is-typing[data-v-f626c1e7] {
+  --is-typing-size-shape: var(--dt-size-550);
+  position: absolute;
   display: flex;
-  justify-content: right;
+  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-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e] {
-  cursor: pointer;
-  user-select: none;
-  border-radius: var(--dt-size-100);
+.dt-leftbar-row__is-typing span[data-v-f626c1e7] {
+  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;
+  animation: wave-f626c1e7 1.5s ease infinite;
 }
-.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:focus-visible {
-  outline: none;
-  box-shadow: var(--dt-shadow-focus);
+.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(1) {
+  animation-delay: 0ms;
 }
-.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:hover,
-.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:active {
-  text-decoration: underline;
+.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(2) {
+  animation-delay: var(--td100);
 }
-.dt-recipe-callbox .dt-recipe-callbox-badge--warning[data-v-ef08f46e] {
-  background-color: var(--dt-color-surface-warning);
+.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(3) {
+  animation-delay: var(--td200);
 }
-.dt-contact-info[data-v-7b60b2d6] {
-  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
+.dt-leftbar-row__primary[data-v-f626c1e7] {
   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);
+  appearance: none;
 }
-.dt-contact-info[data-v-7b60b2d6] .dt-item-layout {
-  flex: 1 1 0;
+.dt-leftbar-row__primary[data-v-f626c1e7]:active {
+  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-contact-info[data-v-7b60b2d6] .dt-item-layout--content {
-  /*
-    DP-74536: Add `min-width` to make the width of "contact info" adjustable.
-    */
-  min-width: var(--dt-space-825);
+.dt-leftbar-row__primary[data-v-f626c1e7]:focus-visible {
+  box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-contact-info[data-v-7b60b2d6] .dt-item-layout--left {
-  /*
-    DP-74536: To make 'Avatar' in fixed position when resizing the window.
-    */
-  min-width: var(--dt-space-650);
-  justify-content: flex-start;
-  align-items: center;
+.dt-leftbar-row__action-button[data-v-f626c1e7] {
+  width: var(--leftbar-row-action-width);
+  height: var(--leftbar-row-action-height);
+  opacity: 0;
 }
-.dt-contact-info[data-v-7b60b2d6] .dt-item-layout--right {
-  /*
-    DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
-    */
-  min-width: 0;
+.dt-leftbar-row__alpha[data-v-f626c1e7] {
+  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-contact-info__left[data-v-7b60b2d6] {
-  position: relative;
-  background-color: transparent;
-  background-image: none;
-  border-width: 0;
-  cursor: pointer;
+.dt-leftbar-row__label[data-v-f626c1e7] {
+  flex: 0 1;
+  min-width: 0;
 }
-.dt-contact-info--avatars[data-v-7b60b2d6] {
-  margin-right: var(--dt-space-300-negative);
+.dt-leftbar-row__omega[data-v-f626c1e7] {
+  position: absolute;
+  top: var(--leftbar-row-action-position-bottom);
+  right: var(--leftbar-row-action-position-right);
   display: flex;
-  flex-direction: row;
-}
-.dt-contact-info--avatars .d-avatar[data-v-7b60b2d6] {
-  border-radius: var(--dt-size-radius-pill);
-  border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
-  box-sizing: unset;
-}
-.settings-menu-button[data-v-4ee1371d] {
-  padding: var(--dt-space-0);
-  border-radius: var(--dt-size-550);
-  height: var(--dt-size-600);
-  width: var(--dt-size-550);
-  color: var(--dt-theme-topbar-button-color-foreground);
-  background-color: var(--dt-theme-topbar-button-color-background);
-}
-.settings-menu-button[data-v-4ee1371d]:hover {
-  background-color: var(--dt-theme-topbar-button-color-background-hover);
-  color: var(--dt-theme-topbar-button-color-foreground-hover);
-}
-.settings-menu-button[data-v-4ee1371d]:active {
-  background-color: var(--dt-theme-topbar-button-color-background-active);
+  gap: var(--dt-space-300);
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  border-radius: var(--leftbar-row-radius);
+  transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
 }
-.settings-menu-button-update[data-v-4ee1371d] {
-  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);
-  color: var(--dt-color-blue-500);
-  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);
-  border-radius: var(--dt-size-radius-pill);
-  height: var(--dt-size-600);
-}
-.settings-menu-button-update[data-v-4ee1371d]:hover {
-  background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);
-  color: var(--dt-theme-topbar-button-color-foreground-hover);
-}
-.dt-time-pill {
-  color: var(--dt-color-foreground-primary);
-  border-radius: var(--dt-size-radius-pill);
-  line-height: var(--dt-font-line-height-300);
-  font-size: var(--dt-font-size-100);
-  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
-  background-color: var(--dt-color-surface-primary);
-  padding: var(--dt-space-300) var(--dt-space-500);
-}
-.dt-message-input-meeting-pill {
-  display: inline-block;
-}
-.dt-message-input-meeting-pill__layout {
-  gap: var(--dt-space-400);
-  grid-template-areas: 'left content right';
-  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
-  align-items: center;
-  max-width: var(--dt-size-905);
-  padding-left: var(--dt-space-400);
-  padding-right: var(--dt-space-400);
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
-  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
-  border-radius: var(--dt-size-radius-300);
-  font: var(--dt-typography-headline-md);
-}
-.dt-message-input-meeting-pill__icon {
-  display: flex;
-  align-items: center;
-  padding: var(--dt-space-350);
-}
-.dt-message-input-meeting-pill__close {
-  display: flex;
-  justify-content: flex-end;
-}
-.dt-message-input {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--dt-size-radius-400);
-  border: var(--dt-size-border-100) solid;
-  border-color: var(--dt-color-border-default);
-  cursor: text;
-}
-.dt-message-input:focus-within {
-  border-color: var(--dt-color-border-bold);
-  box-shadow: var(--dt-shadow-small);
-}
-.dt-message-input__editor-wrapper {
-  padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);
-}
-.dt-message-input__remaining-char-tooltip {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-.dt-message-input__remaining-char {
-  color: var(--dt-color-foreground-critical);
-  font-size: var(--dt-font-size-100);
-  margin-right: var(--dt-space-500);
-}
-.dt-message-input__send-button--disabled {
-  background-color: unset;
-  color: var(--dt-color-foreground-muted);
-  cursor: default;
-}
-.dt-message-input__cancel-button {
-  margin-right: var(--dt-space-300);
-}
-.dt-message-input__bottom-section {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--dt-space-300) var(--dt-space-400);
-}
-.dt-message-input__bottom-section-left {
-  display: flex;
-}
-.dt-message-input__bottom-section-right {
-  display: flex;
-}
-.dt-message-input__image-input {
-  position: absolute;
-}
-.dt-recipe-feed-item-pill__wrapper[data-v-dab5b252] {
-  background-color: var(--dt-color-surface-secondary);
-  padding: var(--dt-space-400);
-}
-.dt-recipe-feed-item-pill__button[data-v-dab5b252] {
-  background-color: var(--dt-color-surface-moderate);
-  text-align: left;
-  width: 100%;
-  cursor: pointer;
-  border-width: 0;
-  border-radius: var(--dt-size-radius-600);
-  --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[data-v-dab5b252] {
-  padding: var(--dt-space-400);
-  gap: var(--dt-space-300);
-  width: 100%;
-}
-.dt-recipe-feed-item-pill__layout[data-v-dab5b252] > .dt-item-layout--left {
-  padding-right: var(--dt-space-0);
-  justify-content: center;
-}
-.dt-recipe-feed-item-pill__icon[data-v-dab5b252] {
-  animation: fade-dab5b252 0.15s ease-in;
-}
-.dt-recipe-feed-item-pill__content[data-v-dab5b252] {
-  display: flex;
-  justify-content: center;
-}
-.dt-recipe-feed-item-pill__title[data-v-dab5b252] {
-  font-weight: var(--dt-font-weight-bold);
-}
-.dt-recipe-feed-item-pill__border[data-v-dab5b252] {
-  border: double 1px transparent;
-  border-radius: var(--dt-size-radius-600);
-  background-origin: border-box;
-  background-clip: content-box, border-box;
-  overflow: hidden;
-}
-.dt-recipe-feed-item-pill__border-default[data-v-dab5b252] {
-  background: var(--dt-color-border-default);
-}
-.dt-recipe-feed-item-pill__border-ai[data-v-dab5b252] {
-  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[data-v-dab5b252] {
-  background: var(--dt-color-foreground-critical);
-}
-@keyframes fade-dab5b252 {
-0% {
-    transform: scale(0);
-}
-100% {
-    transform: scale(1);
-}
-}
-.dt-feed-item-row[data-v-047dcbe5] {
-  width: var(--dt-size-100-percent);
-  box-sizing: border-box;
-  position: relative;
-  padding: var(--dt-space-300) var(--dt-space-500);
-}
-.dt-feed-item-row[data-v-047dcbe5]:focus-visible {
-  box-shadow: var(--dt-shadow-focus-inset);
-}
-.dt-feed-item-row--state-searched[data-v-047dcbe5] {
-  background-color: var(--dt-color-surface-warning-subtle);
-}
-.dt-feed-item-row--state-error[data-v-047dcbe5] {
-  background-color: var(--dt-color-surface-critical-subtle);
-}
-.dt-feed-item-row--active[data-v-047dcbe5] {
-  background-color: var(--dt-color-surface-secondary-opaque);
-}
-.dt-feed-item-row--state-transition[data-v-047dcbe5] {
-  transition-duration: 2s;
-  transition-delay: 0s;
-  transition-timing-function: var(--ttf-in-out);
-  transition-property: background-color;
-}
-.dt-feed-item-row__avatar-container[data-v-047dcbe5] {
-  padding-top: var(--dt-space-300);
-  padding-bottom: var(--dt-space-300);
-}
-.dt-feed-item-row__content[data-v-047dcbe5] {
-  padding-left: var(--dt-space-300);
-}
-.dt-feed-item-row__attachment[data-v-047dcbe5] {
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-300);
-}
-.dt-feed-item-row__attachment[data-v-047dcbe5] .dt-feed-item-row__image {
-  border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);
-  border-radius: var(--dt-size-radius-400);
-  display: block;
-  max-width: 30rem;
-  max-height: 30rem;
-  min-width: 5.6rem;
-  min-height: 5.6rem;
-}
-.dt-feed-item-row__attachment[data-v-047dcbe5] .dt-feed-item-row__video {
-  display: block;
-  height: 25rem;
-}
-.dt-feed-item-row__header[data-v-047dcbe5] {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: var(--dt-space-300);
-  font-size: var(--dt-font-size-200);
-  line-height: var(--dt-font-line-height-300);
-}
-.dt-feed-item-row__header__name[data-v-047dcbe5] {
-  font-weight: var(--dt-font-weight-bold);
-}
-.dt-feed-item-row__header__time[data-v-047dcbe5] {
-  font-size: var(--dt-font-size-100);
-  color: var(--dt-color-foreground-tertiary);
-  flex-shrink: 0;
-}
-.dt-feed-item-row__reactions[data-v-047dcbe5] {
-  display: flex;
-  flex-wrap: wrap;
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
-  padding-left: var(--dt-space-300);
-}
-.dt-feed-item-row__threading[data-v-047dcbe5] {
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
-}
-.dt-feed-item-row__left-time[data-v-047dcbe5] {
-  color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
-  font-weight: var(--dt-font-weight-normal);
-  vertical-align: middle;
-  white-space: nowrap;
-}
-.dt-feed-item-row__menu[data-v-047dcbe5] {
-  position: absolute;
-  top: var(--dt-space-550-negative);
-  right: var(--dt-space-450);
-}
-.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout {
-  font: var(--dt-typography-body-md-compact);
-  min-height: initial;
-  padding: 0px;
-}
-.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout > .dt-item-layout--left {
-  align-self: flex-start;
-  text-align: end;
-  display: block;
-  padding-right: var(--dt-space-300);
-  padding-left: var(--dt-space-0);
-  min-width: calc(var(--dt-space-600) + var(--dt-space-300));
-}
-.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout > .dt-item-layout--right {
-  padding: 0;
-  min-width: initial;
-}
-.dt-feed-item-row[data-v-047dcbe5] > .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom {
-  display: flex;
-  flex-direction: column;
-  margin-top: 0;
-}
-.dt-emoji-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dt-space-300);
-}
-.dt-emoji-row__tooltip {
-  display: inline-block;
-}
-.dt-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);
-  padding: var(--dt-space-300) var(--dt-space-400);
-  border-radius: var(--dt-size-radius-pill);
-  border: 0;
-  color: var(--emoji-item-color-foreground);
-  background-color: var(--emoji-item-color-background);
-  box-shadow: inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);
-  height: var(--dt-size-550);
-}
-.dt-emoji-row__reaction.dt-emoji-row__picker {
-  padding: var(--dt-space-200) var(--dt-space-350);
-}
-.dt-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-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);
-  transform: scale(0.98);
-}
-.dt-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-emoji-row__reaction--selected .dt-emoji-row__reaction-number {
-  font-weight: var(--dt-font-weight-bold);
-}
-.dt-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-emoji-row__reaction--selected:active {
-  --emoji-item-color-background: var(--dt-action-color-background-base-active);
-}
-.dt-emoji-row__emoji {
-  margin-right: var(--dt-space-300);
-  display: inline-flex;
-}
-.dt-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);
-  line-height: var(--dt-font-line-height-100);
-  font-variant: tabular-nums;
-}
-.dt-editor--top-bar-background {
-  background-color: var(--dt-color-surface-secondary);
-}
-.dt-editor--button-group-divider {
-  margin-left: var(--dt-space-400);
-  height: calc(var(--dt-size-550) + var(--dt-size-300));
-  width: var(--dt-size-100);
-  background: var(--dt-color-border-subtle);
-}
-.progress-bar {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
-}
-.progress-bar__circle {
-  fill: none;
-  stroke-width: 2;
-  stroke-dasharray: var(--stroke-dasharray);
-}
-.progress-bar__circle:nth-child(1) {
-  stroke-dashoffset: 0;
-  stroke: var(--dt-color-black-100);
-}
-.progress-bar__circle:nth-child(2) {
-  stroke-dashoffset: var(--stroke-dashoffset);
-  stroke: var(--dt-color-purple-500);
-  transition: stroke-dashoffset 500ms linear;
-}
-.dt-attachment-image {
-  position: relative;
-}
-.dt-attachment-image:focus-within .dt-attachment-image__close-button,
-.dt-attachment-image:hover .dt-attachment-image__close-button {
-  opacity: 1;
-}
-.dt-attachment-image__image-viewer {
-  height: var(--dt-size-700);
-  width: var(--dt-size-700);
-  border: var(--dt-space-100) solid;
-  border-radius: var(--br4);
-  border-width: var(--dt-size-350);
-  border-color: var(--dt-color-border-subtle);
-  object-fit: cover;
-}
-.dt-attachment-image__top-right {
-  position: absolute;
-  top: var(--dt-size-100);
-  right: var(--dt-size-100);
-}
-.dt-attachment-image__close-button {
-  opacity: 0;
-  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-width: var(--dt-size-200);
-  border-color: var(--dt-color-neutral-white);
-}
-.dt-attachment-image__progress-bar {
-  position: absolute;
-  top: inherit;
-  right: inherit;
-  background-color: var(--dt-color-neutral-white);
-  border-radius: 50%;
-  display: flex;
-  transform: rotate(-90deg);
-  border: var(--dt-space-100) solid;
-  border-width: var(--dt-size-200);
-  border-color: var(--dt-color-border-subtle);
-}
-.dt-attachment-carousel {
-  position: relative;
-  max-height: 100px;
-  width: var(--dt-space-1000);
-}
-.dt-attachment-carousel__media-list {
-  display: flex;
-  flex-direction: row;
-  padding-left: 0px;
-  overflow-x: scroll;
-}
-.dt-attachment-carousel__media-list::-webkit-scrollbar {
-  display: none;
-}
-.dt-attachment-carousel__arrow {
-  position: absolute;
-  opacity: 0;
-  background-color: var(--dt-color-neutral-white);
-  top: var(--dt-space-30-percent);
-  border: var(--dt-space-100) solid;
-  border-width: var(--dt-size-100);
-  border-color: var(--bc-default);
-}
-.dt-attachment-carousel:hover .dt-attachment-carousel__arrow {
-  opacity: 1;
-}
-.dt-attachment-carousel__arrow--left {
-  left: var(--dt-space-300);
-}
-.dt-attachment-carousel__arrow--right {
-  right: var(--dt-space-300);
-}
-.dt-attachment-carousel__image-viewer {
-  height: var(--dt-size-700);
-  width: var(--dt-size-700);
-  border-radius: var(--br4);
-  border: var(--dt-space-100) solid;
-  border-width: var(--dt-size-350);
-  border-color: var(--dt-color-border-subtle);
-}
-.combobox__input-wrapper[data-v-a66c77a1] {
-  position: relative;
-  display: block;
-}
-.combobox__chip-wrapper[data-v-a66c77a1] {
-  position: absolute;
-  margin-left: var(--dt-space-200);
-  margin-right: var(--dt-space-200);
-  padding-left: var(--dt-space-100);
-  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
-  max-height: initial;
-  overflow-y: visible;
-}
-.combobox__chip-wrapper-md--collapsed[data-v-a66c77a1] {
-  max-height: 2.8rem;
-  overflow-y: hidden;
-}
-.combobox__chip-wrapper-sm--collapsed[data-v-a66c77a1],
-.combobox__chip-wrapper-xs--collapsed[data-v-a66c77a1] {
-  max-height: 2.5rem;
-  overflow-y: hidden;
+.dt-leftbar-row__unread-badge[data-v-f626c1e7] {
+  display: var(--leftbar-row-unread-badge-display);
+  color: var(--dt-theme-mention-color-foreground);
+  background-color: var(--dt-theme-mention-color-background);
 }
-.combobox__chip[data-v-a66c77a1] {
-  margin-top: var(--dt-space-300);
-  margin-left: var(--dt-space-200);
-  margin-right: var(--dt-space-200);
-  z-index: var(--zi-base1);
-  max-width: var(--dt-size-100-percent);
+.dt-leftbar-row--unread-count[data-v-f626c1e7] .dt-leftbar-row__action {
+  display: none;
 }
-.combobox__input[data-v-a66c77a1] {
-  flex-grow: 1;
+.dt-leftbar-row__unread-count-badge[data-v-f626c1e7] {
+  border-top-right-radius: var(--dt-size-radius-0);
+  border-bottom-right-radius: var(--dt-size-radius-0);
 }
-.combobox__list--loading[data-v-a66c77a1] {
-  text-align: center;
-  padding-top: var(--dt-space-500);
-  padding-bottom: var(--dt-space-500);
+.dt-leftbar-row__unread-mention-count-badge[data-v-f626c1e7] {
+  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-grouped-chip {
+.dt-leftbar-row__unread-mention-only-count-badge[data-v-f626c1e7] {
+  color: var(--dt-theme-mention-color-foreground-strong);
+  background-color: var(--dt-theme-mention-color-background-strong);
+}
+.dt-leftbar-row__active-voice[data-v-f626c1e7] {
   display: inline-flex;
-  white-space: nowrap;
-  background-color: unset;
-  background-image: unset;
+  color: var(--dt-color-purple-400);
+  -webkit-animation-name: opacity-pulsate-f626c1e7;
+  -moz-animation-name: opacity-pulsate-f626c1e7;
+  animation-name: opacity-pulsate-f626c1e7;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
 }
-.dt-chip-content {
-  font-variant-numeric: tabular-nums;
+.dt-leftbar-row__dnd[data-v-f626c1e7] {
+  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-chip-content--left {
-  border-top-left-radius: var(--dt-size-radius-pill);
-  border-bottom-left-radius: var(--dt-size-radius-pill);
-  background-color: var(--dt-color-surface-moderate-opaque);
-  max-width: var(--dt-size-730);
+.dt-leftbar-row__container--off-duty[data-v-f626c1e7] {
+  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-chip-content--right {
-  border-top-right-radius: var(--dt-size-radius-pill);
-  border-bottom-right-radius: var(--dt-size-radius-pill);
-  background-color: var(--dt-color-purple-200);
-  max-width: var(--dt-size-730);
+.dt-leftbar-row__container--off-duty[data-v-f626c1e7] .dt-leftbar-row__primary {
+  margin: calc(var(--dt-size-100) * -1);
 }
-.ivr_node {
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
+.dt-leftbar-row--contact-centers[data-v-f626c1e7] .dt-leftbar-row__alpha {
+  padding-right: var(--dt-space-450);
+  padding-left: var(--dt-space-450);
 }
-.ivr_node__header-left {
-  display: flex;
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-f626c1e7] {
+  display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-500);
 }
-.ivr_node__label {
-  font-size: var(--dt-font-size-200);
-  font-weight: var(--dt-font-weight-bold);
+.dt-leftbar-row[data-v-f626c1e7] .dt-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;
 }
-.ivr_node__dropdown-list {
-  width: var(--dt-size-825);
+.dt-leftbar-row[data-v-f626c1e7] .dt-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;
 }
-.ivr_node__goto_icon {
-  transform: rotate(90deg);
+.dt-leftbar-row[data-v-f626c1e7] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
+  color: var(--dt-theme-sidebar-status-color-foreground);
+  content: " • ";
 }
-.ivr-connector {
-  z-index: var(--zi-base);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-color: var(--dt-color-purple-600);
-  background-color: var(--dt-color-purple-600);
-  width: var(--dt-size-400);
-  height: var(--dt-size-400);
-  border-radius: var(--dt-size-radius-circle);
-  margin-bottom: var(--dt-space-300-negative);
+.dt-leftbar-row__icon-cc[data-v-f626c1e7] {
+  width: calc(var(--dt-size-300) * 3.5);
+  height: calc(var(--dt-size-300) * 3.5);
+  border-radius: var(--dt-size-200);
 }
-.ivr-connector--selected {
-  margin-bottom: var(--dt-space-400-negative);
+.opacity-pulsate[data-v-f626c1e7] {
+  -webkit-animation-name: opacity-pulsate-f626c1e7;
+  -moz-animation-name: opacity-pulsate-f626c1e7;
+  animation-name: opacity-pulsate-f626c1e7;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
 }
-.ivr-connector.ivr-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);
+@keyframes opacity-pulsate-f626c1e7 {
+0%,
+  100% {
+    opacity: 0.2;
 }
-.ivr-connector.ivr-connector--dtmf--selected {
-  margin-bottom: var(--dt-space-500-negative);
+50% {
+    opacity: 1;
 }
-.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {
-  line-height: var(--dt-font-line-height-300);
 }
-.dt-recipe-callbar-button--circle {
-  border-radius: var(--dt-size-radius-circle);
+@keyframes opacity-pulsate-f626c1e7 {
+0%,
+  100% {
+    opacity: 0.2;
 }
-.dt-recipe-callbar-button.d-btn[disabled] {
-  background-color: unset;
-  opacity: 0.5;
+50% {
+    opacity: 1;
 }
-.dt-recipe-callbar-button--circle.d-btn[disabled] {
-  border-color: unset;
 }
-.dt-recipe-callbar-button--active .base-button__icon,
-.dt-recipe-callbar-button--active:hover .base-button__icon {
-  color: var(--primary-color);
+@keyframes opacity-pulsate-f626c1e7 {
+0%,
+  100% {
+    opacity: 0.2;
 }
-.dt-recipe-callbar-button--disabled {
-  cursor: not-allowed;
+50% {
+    opacity: 1;
 }
-.dt-recipe--callbar-button-with-popover--arrow {
-  margin-top: var(--dt-space-350-negative);
-  margin-left: calc(var(--dt-space-300-negative) * 5);
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
-  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);
+@keyframes wave-f626c1e7 {
+0%,
+  50%,
+  100% {
+    transform: translate(0, 0);
 }
-.dt-recipe--callbar-button-with-popover--arrow--large {
-  margin-left: var(--dt-space-550-negative);
+10% {
+    transform: translate(0, -0.5rem);
+    opacity: 0.9;
 }
-.dt-recipe--callbar-button-with-popover--arrow__icon {
-  color: var(--dt-color-black-800);
 }
-.dt-recipe--callbar-button-with-popover--popover .d-popover__header {
-  background: var(--dt-color-surface-contrast);
-  color: var(--dt-color-foreground-primary-inverted);
+.dt-leftbar-unread-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);
+  gap: var(--dt-space-300);
+  font-size: var(--dt-font-size-100);
+  box-shadow: var(--dt-shadow-medium);
+  border-radius: var(--dt-size-radius-pill);
+  border: none;
+  line-height: var(--dt-font-line-height-600);
+  cursor: pointer;
 }
-.dt-recipe--callbar-button-with-popover--popover .d-popover__header .d-btn {
-  color: var(--dt-color-foreground-primary-inverted);
+.dt-leftbar-unread-pill--mentions {
+  font-weight: var(--dt-font-weight-bold);
+  background-color: var(--dt-theme-mention-color-background);
+  color: var(--dt-theme-mention-color-foreground);
 }
-.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-leftbar-unread-pill--messages {
+  background-color: var(--dt-color-surface-contrast);
+  color: var(--dt-color-foreground-secondary-inverted);
 }
-.dt-recipe--callbar-button-with-popover--button .tab-group {
+.dt-top-banner-info {
+  font-size: var(--dt-font-size-100);
   display: flex;
-  flex-direction: column;
-  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--dt-color-foreground-primary);
 }
-.dt-recipe--callbar-button-with-popover--button .tab-content {
-  flex: 1 1 100%;
-  overflow-y: auto;
+.dt-top-banner-info__left {
+  margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
+  min-width: 20%;
 }
-.dt-recipe--callbar-button-with-popover {
+.dt-top-banner-info__middle {
   display: flex;
   align-items: center;
+  gap: var(--dt-size-300);
+  margin-top: var(--dt-space-300);
+  margin-bottom: var(--dt-space-300);
+}
+.dt-top-banner-info__right {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: var(--dt-size-300);
+  margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
+  min-width: 20%;
+  text-align: right;
 }