@mantine-vue/whatsapp-inbox 3.2.0

package/styles.css

@@ -0,0 +1,1504 @@
+._contactPanelRoot_h46t5_1 {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--mantine-color-body);
+  border-inline-start: 1px solid var(--mantine-color-default-border);
+}
+
+._contactPanelHeader_h46t5_10 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  min-height: var(--wa-header-height, 64px);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  flex-shrink: 0;
+}
+
+._contactPanelTitle_h46t5_21 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+}
+
+._contactPanelBody_h46t5_26 {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-md);
+  padding: var(--mantine-spacing-md);
+}
+
+._contactPanelIdentity_h46t5_36 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  text-align: center;
+}
+
+._contactPanelName_h46t5_44 {
+  font-size: var(--mantine-font-size-md);
+  font-weight: 600;
+}
+
+._contactPanelPhone_h46t5_49 {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+}
+
+._contactPanelField_h46t5_54 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+._contactPanelFieldLabel_h46t5_60 {
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mantine-color-dimmed);
+}
+
+._contactPanelFieldValue_h46t5_67 {
+  font-size: var(--mantine-font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+._contactPanelTags_h46t5_72 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+
+._contactPanelFooter_h46t5_78 {
+  padding: var(--mantine-spacing-md);
+  border-top: 1px solid var(--mantine-color-default-border);
+  flex-shrink: 0;
+}
+
+._contactPanelEmpty_h46t5_84 {
+  padding: var(--mantine-spacing-lg);
+  text-align: center;
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+}
+._attachmentPreviewRoot_1bucz_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: calc(0.375rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-md);
+  border: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-body);
+  min-width: calc(12.5rem * var(--mantine-scale));
+  max-width: calc(17.5rem * var(--mantine-scale));
+}
+
+._attachmentPreviewRoot_1bucz_1:where([data-status='failed']) {
+  border-color: var(--mantine-color-error);
+}
+
+._attachmentPreviewThumb_1bucz_17 {
+  flex-shrink: 0;
+  width: calc(2.25rem * var(--mantine-scale));
+  height: calc(2.25rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mantine-color-default-hover);
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+}
+
+._attachmentPreviewThumbImage_1bucz_30 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+._attachmentPreviewBody_1bucz_36 {
+  flex: 1;
+  min-width: 0;
+}
+
+._attachmentPreviewName_1bucz_41 {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._attachmentPreviewMeta_1bucz_49 {
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+}
+
+._attachmentPreviewProgress_1bucz_54 {
+  margin-top: calc(0.25rem * var(--mantine-scale));
+}
+
+._attachmentPreviewError_1bucz_58 {
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  color: var(--mantine-color-error);
+}
+
+._attachmentPreviewActions_1bucz_63 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.125rem * var(--mantine-scale));
+  flex-shrink: 0;
+}
+._emojiPickerRoot_11res_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+  width: var(--wa-emoji-width, 340px);
+  max-width: 100%;
+}
+
+._emojiPickerSearch_11res_9 {
+  width: 100%;
+}
+
+._emojiPickerTabs_11res_13 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.125rem * var(--mantine-scale));
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  padding-bottom: calc(0.25rem * var(--mantine-scale));
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+._emojiPickerTabs_11res_13::-webkit-scrollbar {
+  display: none;
+}
+
+._emojiPickerTab_11res_13 {
+  flex: 1;
+  min-width: calc(1.875rem * var(--mantine-scale));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(0.25rem * var(--mantine-scale)) 0;
+  font-size: calc(1.0625rem * var(--mantine-scale));
+  line-height: 1;
+  border-radius: var(--mantine-radius-sm);
+  opacity: 0.45;
+  border-bottom: calc(0.125rem * var(--mantine-scale)) solid transparent;
+}
+
+._emojiPickerTab_11res_13:where([data-active]) {
+  opacity: 1;
+  border-bottom-color: var(--mantine-primary-color-filled);
+}
+
+@media (hover: hover) {
+
+  ._emojiPickerTab_11res_13:hover {
+    opacity: 1;
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  ._emojiPickerTab_11res_13:active {
+    opacity: 1;
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+._emojiPickerBody_11res_53 {
+  height: var(--wa-emoji-height, 260px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+._emojiPickerGroup_11res_59 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+._emojiPickerGroupLabel_11res_65 {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: calc(0.25rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale));
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mantine-color-dimmed);
+  background-color: var(--mantine-color-body);
+}
+
+._emojiPickerGrid_11res_78 {
+  display: grid;
+  grid-template-columns: repeat(var(--wa-emoji-columns, 8), minmax(0, 1fr));
+  gap: calc(0.125rem * var(--mantine-scale));
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+._emojiPickerItem_11res_85 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  font-size: calc(1.375rem * var(--mantine-scale));
+  line-height: 1;
+  border-radius: var(--mantine-radius-sm);
+}
+
+@media (hover: hover) {
+
+  ._emojiPickerItem_11res_85:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  ._emojiPickerItem_11res_85:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+._emojiPickerItem_11res_85:where(:focus-visible) {
+  background-color: var(--mantine-color-default-hover);
+}
+
+._emojiPickerEmpty_11res_105 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+}
+
+._emojiPickerPreview_11res_114 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  min-height: calc(1.75rem * var(--mantine-scale));
+  border-top: 1px solid var(--mantine-color-default-border);
+  padding-top: calc(0.375rem * var(--mantine-scale));
+}
+
+._emojiPickerPreviewEmoji_11res_123 {
+  font-size: calc(1.375rem * var(--mantine-scale));
+  line-height: 1;
+}
+
+._emojiPickerPreviewName_11res_128 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._interactiveEditorRoot_suqfy_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+}
+
+._interactiveEditorSection_suqfy_7 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+}
+
+._interactiveEditorSectionTitle_suqfy_13 {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mantine-color-dimmed);
+}
+
+._interactiveEditorRow_suqfy_21 {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--mantine-spacing-xs);
+}
+
+._interactiveEditorItem_suqfy_27 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-md);
+  border: 1px solid var(--mantine-color-default-border);
+}
+
+._interactiveEditorFooter_suqfy_36 {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mantine-spacing-xs);
+  padding-top: var(--mantine-spacing-xs);
+  border-top: 1px solid var(--mantine-color-default-border);
+}
+._windowNoticeRoot_hdn7g_1 {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-yellow-light);
+  color: var(--mantine-color-yellow-light-color);
+}
+
+._windowNoticeIcon_hdn7g_11 {
+  flex-shrink: 0;
+  margin-top: calc(0.125rem * var(--mantine-scale));
+}
+
+._windowNoticeBody_hdn7g_16 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+._windowNoticeTitle_hdn7g_24 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+}
+
+._windowNoticeDescription_hdn7g_29 {
+  font-size: var(--mantine-font-size-xs);
+}
+
+._windowNoticeAction_hdn7g_33 {
+  flex-shrink: 0;
+  align-self: center;
+}
+._templatePreviewRoot_tn430_1 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.375rem * var(--mantine-scale));
+  min-width: 0;
+}
+
+._templatePreviewMeta_tn430_8 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.375rem * var(--mantine-scale));
+}
+
+._templatePreviewHeader_tn430_14 {
+  font-weight: 600;
+  font-size: var(--mantine-font-size-sm);
+}
+
+._templatePreviewHeaderMedia_tn430_19 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.375rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  padding: calc(0.375rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  background-color: var(--mantine-color-default-hover);
+}
+
+._templatePreviewBody_tn430_30 {
+  font-size: var(--mantine-font-size-sm);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+._templatePreviewFooter_tn430_37 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._templatePreviewButtons_tn430_42 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+  margin-top: calc(0.25rem * var(--mantine-scale));
+  border-top: 1px solid var(--mantine-color-default-border);
+  padding-top: calc(0.25rem * var(--mantine-scale));
+}
+
+._templatePreviewButton_tn430_42 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(0.375rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-anchor);
+  padding: calc(0.25rem * var(--mantine-scale));
+  text-align: center;
+}
+
+._templatePreviewFallback_tn430_62 {
+  font-size: var(--mantine-font-size-sm);
+  white-space: pre-wrap;
+}
+._templateSelectorRoot_1hkjz_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+  min-height: 0;
+}
+
+._templateSelectorControls_1hkjz_8 {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+  flex-wrap: wrap;
+}
+
+._templateSelectorList_1hkjz_14 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.25rem * var(--mantine-scale));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  max-height: var(--wa-template-list-max-height, 360px);
+}
+
+._templateSelectorItem_1hkjz_25 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+  width: 100%;
+  text-align: start;
+  padding: var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-md);
+  border: 1px solid var(--mantine-color-default-border);
+}
+
+@media (hover: hover) {
+
+  ._templateSelectorItem_1hkjz_25:where(:not([data-disabled])):hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  ._templateSelectorItem_1hkjz_25:where(:not([data-disabled])):active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+._templateSelectorItem_1hkjz_25:where([data-disabled]) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+._templateSelectorItem_1hkjz_25:where([data-selected]) {
+  border-color: var(--mantine-primary-color-filled);
+}
+
+._templateSelectorItemName_1hkjz_51 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+}
+
+._templateSelectorItemMeta_1hkjz_56 {
+  display: flex;
+  gap: calc(0.375rem * var(--mantine-scale));
+  flex-wrap: wrap;
+}
+
+._templateSelectorItemBody_1hkjz_62 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+._templateSelectorState_1hkjz_71 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-lg);
+  text-align: center;
+}
+
+._templateSelectorDetail_1hkjz_80 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+  min-height: 0;
+  overflow-y: auto;
+  max-height: var(--wa-template-list-max-height, 360px);
+}
+
+._templateSelectorPreview_1hkjz_89 {
+  padding: var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-default);
+}
+
+._templateSelectorForm_1hkjz_95 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+}
+
+._templateSelectorSection_1hkjz_101 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+}
+
+._templateSelectorSectionTitle_1hkjz_107 {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mantine-color-dimmed);
+}
+
+._templateSelectorFooter_1hkjz_115 {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-xs);
+  padding-top: var(--mantine-spacing-xs);
+  border-top: 1px solid var(--mantine-color-default-border);
+}
+._composerRoot_1ibap_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-sm);
+  border-top: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-body);
+}
+
+._composerNotice_1ibap_10 {
+  width: 100%;
+}
+
+._composerReply_1ibap_14 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: calc(0.375rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-sm);
+  border-inline-start: 3px solid var(--mantine-color-anchor);
+  background-color: var(--mantine-color-default-hover);
+}
+
+._composerReplyBody_1ibap_24 {
+  flex: 1;
+  min-width: 0;
+}
+
+._composerReplyAuthor_1ibap_29 {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: var(--mantine-color-anchor);
+}
+
+._composerReplyText_1ibap_35 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._composerAttachments_1ibap_43 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-xs);
+}
+
+._composerError_1ibap_49 {
+  width: 100%;
+}
+
+._composerInputRow_1ibap_53 {
+  display: flex;
+  align-items: flex-end;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+
+._composerInput_1ibap_53 {
+  flex: 1;
+  min-width: 0;
+}
+
+._composerActions_1ibap_64 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+._composerAction_1ibap_64 {
+  flex-shrink: 0;
+}
+
+._composerSend_1ibap_74 {
+  flex-shrink: 0;
+}
+
+._composerFooter_1ibap_78 {
+  display: flex;
+  justify-content: flex-end;
+}
+
+._composerCount_1ibap_83 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._composerCount_1ibap_83:where([data-exceeded]) {
+  color: var(--mantine-color-error);
+}
+._conversationHeaderRoot_1q4q9_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  /*
+   * Shared with the contact panel header so the two bottom borders line up across the
+   * inbox, whatever each header happens to contain.
+   */
+  min-height: var(--wa-header-height, 64px);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-body);
+  flex-shrink: 0;
+}
+
+._conversationHeaderBack_1q4q9_16 {
+  flex-shrink: 0;
+}
+
+._conversationHeaderAvatar_1q4q9_20 {
+  flex-shrink: 0;
+}
+
+._conversationHeaderBody_1q4q9_24 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+}
+
+._conversationHeaderName_1q4q9_32 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._conversationHeaderSubtitle_1q4q9_40 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._conversationHeaderActions_1q4q9_48 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  flex-shrink: 0;
+}
+._mediaRoot_1yxzn_1 {
+  display: block;
+  max-width: 100%;
+}
+
+._mediaImageControl_1yxzn_6 {
+  display: block;
+  padding: 0;
+  border-radius: var(--mantine-radius-md);
+  overflow: hidden;
+  max-width: 100%;
+  cursor: zoom-in;
+}
+
+._mediaImage_1yxzn_6 {
+  display: block;
+  max-width: min(var(--wa-media-max-width, 320px), 100%);
+  height: auto;
+  border-radius: var(--mantine-radius-md);
+  object-fit: cover;
+}
+
+._mediaRoot_1yxzn_1:where([data-media-type='sticker']) ._mediaImage_1yxzn_6 {
+  max-width: calc(8.75rem * var(--mantine-scale));
+  border-radius: 0;
+}
+
+._mediaVideo_1yxzn_28 {
+  display: block;
+  max-width: min(var(--wa-media-max-width, 320px), 100%);
+  height: auto;
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-black);
+}
+
+._mediaAudio_1yxzn_36 {
+  display: block;
+  width: min(var(--wa-media-max-width, 320px), 100%);
+}
+
+._mediaDocument_1yxzn_41 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--wa-document-bg, var(--mantine-color-default-hover));
+  max-width: min(var(--wa-media-max-width, 320px), 100%);
+}
+
+._mediaDocumentIcon_1yxzn_51 {
+  flex-shrink: 0;
+  display: flex;
+  color: var(--mantine-color-dimmed);
+}
+
+._mediaDocumentBody_1yxzn_57 {
+  min-width: 0;
+  flex: 1;
+}
+
+._mediaDocumentName_1yxzn_62 {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._mediaDocumentMeta_1yxzn_70 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._mediaAction_1yxzn_75 {
+  flex-shrink: 0;
+}
+
+._mediaFallback_1yxzn_79 {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+  font-style: italic;
+}
+._statusRoot_vw3ii_1 {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  flex-shrink: 0;
+  line-height: 1;
+  color: var(--wa-status-color, var(--mantine-color-dimmed));
+}
+
+._statusRoot_vw3ii_1:where([data-status='read']) {
+  --wa-status-color: var(--mantine-color-blue-5);
+}
+
+._statusRoot_vw3ii_1:where([data-status='failed']) {
+  --wa-status-color: var(--mantine-color-error);
+}
+
+._statusIcon_vw3ii_18 {
+  display: block;
+}
+
+._statusLabel_vw3ii_22 {
+  font-size: var(--mantine-font-size-xs);
+}
+._bubbleRoot_16hec_1 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* Spans the row so `align-items` can place the bubble on the correct side. */
+  width: 100%;
+  max-width: 100%;
+}
+
+._bubbleRoot_16hec_1:where([data-direction='outbound']) {
+  align-items: flex-end;
+}
+
+._bubbleRoot_16hec_1:where([data-variant='system']) {
+  align-items: center;
+}
+
+._bubble_16hec_1 {
+  position: relative;
+  max-width: var(--wa-bubble-max-width, 75%);
+  min-width: 0;
+  padding: calc(0.375rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
+  border-radius: var(--wa-bubble-radius, var(--mantine-radius-lg));
+  background-color: var(--wa-bubble-bg);
+  color: var(--wa-bubble-color, var(--mantine-color-text));
+  box-shadow: var(--wa-bubble-shadow, 0 1px 0.5px rgba(0, 0, 0, 0.13));
+  overflow-wrap: anywhere;
+}
+
+._bubbleRoot_16hec_1:where([data-direction='inbound']) ._bubble_16hec_1 {
+  --wa-bubble-bg: var(--wa-inbound-bg, var(--mantine-color-body));
+  border-start-start-radius: var(--wa-bubble-corner);
+}
+
+._bubbleRoot_16hec_1:where([data-direction='outbound']) ._bubble_16hec_1 {
+  --wa-bubble-bg: var(--wa-outbound-bg, var(--mantine-color-teal-light));
+  border-start-end-radius: var(--wa-bubble-corner);
+}
+
+._bubbleRoot_16hec_1:where([data-with-tail]) {
+  --wa-bubble-corner: var(--mantine-radius-xs);
+}
+
+._bubbleAuthor_16hec_44 {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: var(--mantine-color-anchor);
+  margin-bottom: calc(0.125rem * var(--mantine-scale));
+}
+
+._bubbleQuote_16hec_51 {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border-inline-start: 3px solid var(--mantine-color-anchor);
+  border-radius: var(--mantine-radius-sm);
+  background-color: var(--mantine-color-default-hover);
+  padding: calc(0.25rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
+  margin-bottom: calc(0.25rem * var(--mantine-scale));
+}
+
+._bubbleQuoteAuthor_16hec_62 {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: var(--mantine-color-anchor);
+}
+
+._bubbleQuoteText_16hec_68 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._bubbleForwarded_16hec_76 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  font-style: italic;
+  margin-bottom: calc(0.125rem * var(--mantine-scale));
+}
+
+._bubbleContent_16hec_86 {
+  font-size: var(--mantine-font-size-sm);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+._bubbleFooter_16hec_93 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: calc(0.25rem * var(--mantine-scale));
+  margin-top: calc(0.125rem * var(--mantine-scale));
+  line-height: 1;
+}
+
+._bubbleTime_16hec_102 {
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+}
+
+._bubbleStatus_16hec_108 {
+  font-size: calc(0.875rem * var(--mantine-scale));
+}
+
+._bubbleError_16hec_112 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.375rem * var(--mantine-scale));
+  margin-top: calc(0.125rem * var(--mantine-scale));
+  max-width: var(--wa-bubble-max-width, 75%);
+}
+
+._bubbleErrorText_16hec_120 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-error);
+}
+
+._bubbleRetry_16hec_125 {
+  font-size: var(--mantine-font-size-xs);
+}
+
+._bubbleReactions_16hec_129 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.25rem * var(--mantine-scale));
+  margin-top: calc(-0.375rem * var(--mantine-scale));
+  z-index: 1;
+}
+
+._bubbleReaction_16hec_129 {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(0.125rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-xs);
+  padding: calc(0.0625rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
+  border-radius: var(--mantine-radius-xl);
+  background-color: var(--mantine-color-body);
+  border: 1px solid var(--mantine-color-default-border);
+}
+
+._systemMessage_16hec_148 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  background-color: var(--mantine-color-default-hover);
+  border-radius: var(--mantine-radius-sm);
+  padding: calc(0.25rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+  text-align: center;
+  max-width: 90%;
+}
+._messageRoot_7265s_1 {
+  /*
+   * This class lands on the same element as `bubbleRoot`, so it must not declare layout:
+   * a `display` here would override the bubble's own flex alignment and push every
+   * message to the same side.
+   */
+  width: 100%;
+}
+
+._messageCaption_7265s_10 {
+  margin-top: calc(0.25rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+._messageInteractive_7265s_17 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.25rem * var(--mantine-scale));
+  min-width: 0;
+}
+
+._messageInteractiveBody_7265s_24 {
+  font-size: var(--mantine-font-size-sm);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+._messageInteractiveFooter_7265s_30 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._messageInteractiveButtons_7265s_35 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+  margin-top: calc(0.25rem * var(--mantine-scale));
+  border-top: 1px solid var(--mantine-color-default-border);
+  padding-top: calc(0.25rem * var(--mantine-scale));
+}
+
+._messageInteractiveButton_7265s_35 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(0.375rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-anchor);
+  padding: calc(0.25rem * var(--mantine-scale));
+  text-align: center;
+}
+
+._messageInteractiveReply_7265s_55 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._messageLocation_7265s_60 {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(0.375rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+}
+
+._messageLocationName_7265s_67 {
+  font-weight: 600;
+}
+
+._messageLocationAddress_7265s_71 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._messageContactCard_7265s_76 {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(0.375rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-sm);
+  padding-block: calc(0.125rem * var(--mantine-scale));
+}
+
+._messageContactName_7265s_84 {
+  font-weight: 600;
+}
+
+._messageContactDetail_7265s_88 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+._messageUnsupported_7265s_93 {
+  font-size: var(--mantine-font-size-sm);
+  font-style: italic;
+  color: var(--mantine-color-dimmed);
+}
+._messageListRoot_1efgx_1 {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--wa-conversation-bg, var(--mantine-color-default));
+}
+
+._messageListScrollArea_1efgx_10 {
+  flex: 1;
+  min-height: 0;
+}
+
+._messageListContent_1efgx_15 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-md);
+  min-height: 100%;
+  justify-content: flex-end;
+}
+
+._messageListItems_1efgx_24 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * One day of messages. The divider sticks inside this box rather than inside the whole list,
+ * so the label of the next day pushes the previous one out instead of stacking on top of it.
+ */
+._messageListGroup_1efgx_37 {
+  display: flex;
+  flex-direction: column;
+}
+
+._messageListGroupItems_1efgx_42 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+._messageListItem_1efgx_24 {
+  display: flex;
+  flex-direction: column;
+}
+
+._messageListItem_1efgx_24:where([data-first-of-run]) {
+  margin-top: calc(0.5rem * var(--mantine-scale));
+}
+
+._messageListDayDivider_1efgx_60 {
+  display: flex;
+  justify-content: center;
+  padding-block: var(--mantine-spacing-xs);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+._messageListDayLabel_1efgx_69 {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  background-color: var(--mantine-color-body);
+  border-radius: var(--mantine-radius-sm);
+  padding: calc(0.1875rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+}
+
+._messageListLoadOlder_1efgx_78 {
+  display: flex;
+  justify-content: center;
+  padding-block: var(--mantine-spacing-xs);
+}
+
+._messageListState_1efgx_84 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-sm);
+  flex: 1;
+  padding: var(--mantine-spacing-xl);
+  text-align: center;
+}
+
+._messageListScrollToBottom_1efgx_95 {
+  position: absolute;
+  inset-block-end: var(--mantine-spacing-md);
+  inset-inline-end: var(--mantine-spacing-md);
+  z-index: 2;
+}
+._conversationRoot_1us98_1 {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--mantine-color-body);
+}
+
+._conversationState_1us98_10 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-sm);
+  flex: 1;
+  padding: var(--mantine-spacing-xl);
+  text-align: center;
+}
+._conversationItemRoot_nvt7d_1 {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mantine-spacing-sm);
+  width: 100%;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  text-align: start;
+  border-radius: var(--mantine-radius-sm);
+}
+
+@media (hover: hover) {
+
+  ._conversationItemRoot_nvt7d_1:hover {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+
+  ._conversationItemRoot_nvt7d_1:active {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+._conversationItemRoot_nvt7d_1:where([data-selected]) {
+  background-color: var(--mantine-color-default-hover);
+}
+
+._conversationItemRoot_nvt7d_1:where([data-unread]) ._conversationItemName_nvt7d_21 {
+  font-weight: 700;
+}
+
+._conversationItemAvatar_nvt7d_25 {
+  flex-shrink: 0;
+}
+
+._conversationItemBody_nvt7d_29 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+}
+
+._conversationItemTopRow_nvt7d_37 {
+  display: flex;
+  align-items: baseline;
+  gap: var(--mantine-spacing-xs);
+}
+
+._conversationItemName_nvt7d_21 {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._conversationItemTime_nvt7d_53 {
+  flex-shrink: 0;
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+}
+
+._conversationItemRoot_nvt7d_1:where([data-unread]) ._conversationItemTime_nvt7d_53 {
+  color: var(--mantine-primary-color-filled);
+}
+
+._conversationItemPhone_nvt7d_63 {
+  font-size: calc(0.6875rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._conversationItemBottomRow_nvt7d_71 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+}
+
+._conversationItemPreview_nvt7d_77 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+
+._conversationItemPreviewText_nvt7d_85 {
+  min-width: 0;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._conversationItemIndicators_nvt7d_94 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.25rem * var(--mantine-scale));
+  flex-shrink: 0;
+  color: var(--mantine-color-dimmed);
+}
+
+._conversationItemUnread_nvt7d_102 {
+  flex-shrink: 0;
+}
+
+._conversationItemLabels_nvt7d_106 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+._conversationListRoot_ieau4_1 {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--mantine-color-body);
+}
+
+._conversationListHeader_ieau4_9 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-sm);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+._conversationListTitleRow_ieau4_17 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-xs);
+  min-height: calc(1.75rem * var(--mantine-scale));
+}
+
+._conversationListTitle_ieau4_17 {
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 700;
+}
+
+._conversationListNewButton_ieau4_30 {
+  flex-shrink: 0;
+}
+
+._newConversationForm_ieau4_34 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-sm);
+}
+
+._newConversationActions_ieau4_40 {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mantine-spacing-xs);
+}
+
+._conversationListSearch_ieau4_46 {
+  width: 100%;
+}
+
+._conversationListFilters_ieau4_50 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  flex-wrap: wrap;
+}
+
+._conversationListScrollArea_ieau4_57 {
+  flex: 1;
+  min-height: 0;
+}
+
+._conversationListItems_ieau4_62 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.125rem * var(--mantine-scale));
+  list-style: none;
+  margin: 0;
+  padding: var(--mantine-spacing-xs);
+}
+
+._conversationListItemWrapper_ieau4_71 {
+  display: block;
+}
+
+._conversationListState_ieau4_75 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
+  text-align: center;
+}
+
+._conversationListLoadMore_ieau4_85 {
+  display: flex;
+  justify-content: center;
+  padding: var(--mantine-spacing-xs);
+}
+
+._conversationListFooter_ieau4_91 {
+  border-top: 1px solid var(--mantine-color-default-border);
+}
+._inboxRoot_1pu3o_1 {
+  display: grid;
+  grid-template-columns: var(--wa-sidebar-width, 320px) minmax(0, 1fr);
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-body);
+}
+
+._inboxRoot_1pu3o_1:where([data-with-panel]) {
+  grid-template-columns:
+    var(--wa-sidebar-width, 320px) minmax(0, 1fr)
+    var(--wa-panel-width, 320px);
+}
+
+._inboxRoot_1pu3o_1:where([data-narrow]) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+._inboxSidebar_1pu3o_22 {
+  min-width: 0;
+  min-height: 0;
+  border-inline-end: 1px solid var(--mantine-color-default-border);
+}
+
+._inboxRoot_1pu3o_1:where([data-narrow]) ._inboxSidebar_1pu3o_22 {
+  border-inline-end: none;
+}
+
+._inboxMain_1pu3o_32 {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+._inboxPanel_1pu3o_39 {
+  min-width: 0;
+  min-height: 0;
+}
+
+._inboxRoot_1pu3o_1:where([data-narrow]) ._inboxPanel_1pu3o_39 {
+  border-inline-start: none;
+}
+._modalRoot_1mb1l_1 {
+  display: contents;
+}
+
+/*
+ * The dialog is a column: the header keeps its own padding, and the body is the only part that
+ * loses it so the conversation can run edge to edge.
+ */
+._modalContent_1mb1l_9 {
+  display: flex;
+  flex-direction: column;
+}
+
+._modalBody_1mb1l_14 {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: var(--wa-modal-height, 70vh);
+  min-height: 0;
+  padding: 0;
+}
+._drawerRoot_1qheq_1 {
+  display: contents;
+}
+
+/*
+ * A column layout is what keeps the composer pinned to the bottom of the drawer: without it the
+ * body grows past the viewport and the user has to scroll before they can type.
+ */
+._drawerContent_1qheq_9 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+}
+
+._drawerBody_1qheq_16 {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+/*$vite$:1*/