.message-wrapper {
      display: flex;
      gap: var(--dyte-space-2, 8px);
      margin-left: var(--dyte-space-4, 16px);
      margin-right: var(--dyte-space-4, 16px);
      margin-top: var(--dyte-space-4, 16px);
}

[is-continued] .message-wrapper {
      margin-top: var(--dyte-space-0, 0px);
}

.message-wrapper.align-right {
      flex-direction: row-reverse;
}

.file-picker {
      display: none;
}

.message {
      position: relative;
      display: flex;
}

.show-on-hover dyte-menu {
      visibility: hidden;
}

.show-on-hover:hover dyte-menu {
      visibility: visible;
}
.align-right .message {
      justify-content: flex-end;
      margin-left: auto;
}
.align-right .message .head {
      margin-right: var(--dyte-space-1, 4px);
      margin-left: var(--dyte-space-0, 0px);
      flex-direction: row-reverse;
      gap: var(--dyte-space-4, 16px);
}
.align-right .message dyte-text-message .bubble,  .align-right .message dyte-image-message .bubble,  .align-right .message dyte-file-message .bubble {
      padding-right: var(--dyte-space-5, 20px);
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));
      color: rgb(var(--dyte-colors-text-on-brand-1000, var(--dyte-colors-text-1000, 255 255 255)));
}
.align-right .message .actions dyte-icon {
      color: rgb(var(--dyte-colors-text-on-brand-1000, var(--dyte-colors-text-1000, 255 255 255)));
}
.align-right dyte-menu {
      left: auto;
      right: var(--dyte-space-0, 0px);
}

.head {
      margin-bottom: var(--dyte-space-2, 8px);
      margin-left: var(--dyte-space-1, 4px);
      display: flex;
      align-items: center;
      gap: var(--dyte-space-2, 8px);
}

.head .name {
      font-size: 14px;
      font-weight: 600;
}

.head .time {
      font-size: 12px;
      color: rgb(var(--dyte-colors-text-800, 255 255 255 / 0.76));
}

dyte-menu {
      position: absolute;
      left: var(--dyte-space-0, 0px);
      top: var(--dyte-space-6, 24px);
      border-radius: var(--dyte-border-radius-lg, 12px);
}

dyte-menu dyte-icon {
      height: var(--dyte-space-4, 16px);
      width: var(--dyte-space-4, 16px);
      cursor: pointer;
}

[is-continued] dyte-menu {
      top: var(--dyte-space-2, 8px);
}

.actions {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--dyte-space-0\.5, 2px);
      border-width: var(--dyte-border-width-none, 0);
      border-style: none;
      background-color: transparent;
}

.actions dyte-icon {
      height: var(--dyte-space-4, 16px);
      width: var(--dyte-space-4, 16px);
      color: rgb(var(--dyte-colors-text-1000, 255 255 255));
}

.body {
      margin-top: var(--dyte-space-1, 4px);
      margin-bottom: var(--dyte-space-1, 4px);
      overflow-wrap: break-word;
      font-size: 14px;
      line-height: 1.375;
}

.body .emoji {
      font-size: 24px;
}

.body.bubble {
      margin-top: var(--dyte-space-0, 0px);
      margin-bottom: var(--dyte-space-1, 4px);
      max-width: var(--dyte-space-96, 384px);
      padding-top: var(--dyte-space-3, 12px);
      padding-bottom: var(--dyte-space-3, 12px);
      padding-left: var(--dyte-space-5, 20px);
      padding-right: var(--dyte-space-5, 20px);
      overflow-wrap: break-word;
      font-size: 14px;
      line-height: 1.375;
      border-radius: var(--dyte-border-radius-md, 8px);
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
}

.body.bubble p {
      margin: var(--dyte-space-0, 0px);
      word-break: break-word;
}

p {
      margin-top: var(--dyte-space-0, 0px);
      margin-bottom: var(--dyte-space-3, 12px);
}

dyte-text-message, 
dyte-image-message, 
dyte-file-message {
      display: block;
      font-family: var(--dyte-font-family, sans-serif);
      color: rgb(var(--dyte-colors-text-900, 255 255 255 / 0.88));
      box-sizing: border-box;
}

*[is-continued] {
      margin-top: var(--dyte-space-0, 0px);
}

.image {
      position: relative;
      height: var(--dyte-space-40, 160px);
      max-width: var(--dyte-space-64, 256px);
      cursor: pointer;
}

.image img {
      display: none;
      height: 100%;
      width: 100%;
      border-radius: var(--dyte-border-radius-sm, 4px);
      -o-object-fit: cover;
         object-fit: cover;
}

.image .image-spinner {
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: var(--dyte-border-radius-sm, 4px);
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
}

.image .image-spinner dyte-spinner {
      --tw-text-opacity: 1;
      color: rgba(var(--dyte-colors-brand-500, 33 96 253) / var(--tw-text-opacity));
}

.image .image-errored {
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: var(--dyte-border-radius-sm, 4px);
      background-color: rgba(var(--dyte-colors-danger, 255 45 45) / 0.1);
      --tw-text-opacity: 1;
      color: rgba(var(--dyte-colors-danger, 255 45 45) / var(--tw-text-opacity));
}

.image .actions {
      display: none;
      height: var(--dyte-space-8, 32px);
      align-items: center;
      position: absolute;
      top: var(--dyte-space-2, 8px);
      right: var(--dyte-space-2, 8px);
      border-radius: var(--dyte-border-radius-sm, 4px);
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
      color: rgb(var(--dyte-colors-text-1000, 255 255 255));
      overflow: hidden;
      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.image .actions .action {
      height: var(--dyte-space-8, 32px);
      width: var(--dyte-space-8, 32px);
      border-radius: var(--dyte-border-radius-none, 0);
      border-width: var(--dyte-border-width-none, 0);
      border-style: none;
      background-color: transparent;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.image .actions .action:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
}

.image.loaded img {
      display: block;
}

.image.loaded .image-spinner {
      display: none;
}

.image:hover .actions, 
.image:focus .actions {
      display: flex;
}

.file {
      display: flex;
      align-items: center;
      gap: var(--dyte-space-1, 4px);
      padding-left: var(--dyte-space-2, 8px);
      padding-right: var(--dyte-space-2, 8px);
      padding-top: var(--dyte-space-1\.5, 6px);
      padding-bottom: var(--dyte-space-1\.5, 6px);
      border-radius: var(--dyte-border-radius-sm, 4px);
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
      color: rgb(var(--dyte-colors-text-700, 255 255 255 / 0.64));
}

.file .file-data {
      flex: 1 1 0%;
}

.file .file-data .name {
      word-break: break-all;
      color: rgb(var(--dyte-colors-text-1000, 255 255 255));
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
}

.file .file-data .file-data-split {
      margin-top: var(--dyte-space-0\.5, 2px);
      display: flex;
      align-items: center;
      font-size: 12px;
}

.file .file-data .file-data-split .ext {
      margin-right: var(--dyte-space-2, 8px);
      text-transform: uppercase;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
}

.file .file-data .file-data-split .divider {
      height: var(--dyte-space-4, 16px);
      width: var(--dyte-space-0\.5, 2px);
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
}

.file .file-data .file-data-split .size {
      margin-left: var(--dyte-space-2, 8px);
}

a {
      --tw-text-opacity: 1;
      color: rgba(var(--dyte-colors-brand-300, 73 124 253) / var(--tw-text-opacity));
      text-decoration-line: none;
}

a:hover {
      text-decoration-line: underline;
}

.new-chat-marker {
      display: flex;
      width: 100%;
      align-items: center;
      gap: var(--dyte-space-2, 8px);
      --tw-text-opacity: 1;
      color: rgba(var(--dyte-colors-brand-300, 73 124 253) / var(--tw-text-opacity));
}

.new-chat-marker::before {
  content: '';
  height: 1px;
  flex: 1 1 0%;
  background-color: rgba(var(--dyte-colors-brand-300, 73 124 253) / 0.5);
}

.show-new-messages-ctr {
      pointer-events: none;
      display: flex;
      justify-content: flex-end;
      padding: var(--dyte-space-3, 12px);
      z-index: 0;
      margin-top: calc(var(--dyte-space-14, 56px) * -1);
}

.show-new-messages {
      pointer-events: auto;
      --tw-translate-y: calc(var(--dyte-space-6, 24px) * -1);
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      opacity: 0;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
}

.show-new-messages.active {
      --tw-translate-y: var(--dyte-space-0, 0px);
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      opacity: 1;
}

blockquote {
      margin: var(--dyte-space-0, 0px);
      margin-bottom: var(--dyte-space-3, 12px);
      background-color: transparent;
}

.block-quote, 
blockquote {
      --tw-border-spacing-x: 1px;
      --tw-border-spacing-y: 1px;
      border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
      border-top-width: var(--dyte-border-width-none, 0);
      border-bottom-width: var(--dyte-border-width-none, 0);
      border-left-width: var(--dyte-border-width-md, 2px);
      border-right-width: var(--dyte-border-width-none, 0);
      border-style: solid;
      border-left-color: rgb(var(--dyte-colors-text-900, 255 255 255 / 0.88));
      padding: var(--dyte-space-0\.5, 2px);
      padding-left: var(--dyte-space-2, 8px);
      margin-bottom: var(--dyte-space-2, 8px) !important;
      border-radius: var(--dyte-border-radius-sm, 4px);
      border-top-left-radius: var(--dyte-border-radius-none, 0);
      border-bottom-left-radius: var(--dyte-border-radius-none, 0);
}
.link {
      color: rgb(var(--dyte-colors-text-900, 255 255 255 / 0.88));
}

.align-right .block-quote {
      border-color: rgb(var(--dyte-colors-text-on-brand-600, var(--dyte-colors-text-600, 255 255 255 / 0.52)));
      --tw-bg-opacity: 1;
      background-color: rgba(var(--dyte-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));
}

.align-right .link {
      color: rgb(var(--dyte-colors-text-on-brand-1000, var(--dyte-colors-text-1000, 255 255 255)));
}

.align-right .image .actions dyte-icon {
      --tw-text-opacity: 1;
      color: rgba(var(--dyte-colors-brand-300, 73 124 253) / var(--tw-text-opacity));
}

.avatar {
      display: flex;
      width: var(--dyte-space-6, 24px);
}

.avatar dyte-avatar {
      height: var(--dyte-space-6, 24px);
      width: var(--dyte-space-6, 24px);
      font-size: 10px;
}

.message {
      width: 75%;
}

.left-align .body {
      margin-top: var(--dyte-space-4, 16px);
}

.left-align [is-continued] .body {
      margin-top: var(--dyte-space-0, 0px);
}

.left-align .body {
      --tw-translate-x: calc(var(--dyte-space-8, 32px) * -1);
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}