:root {
  --im-chat-canvas: #161617;
  --im-chat-rail: #1b1d1d;
  --im-chat-surface: #212222;
  --im-chat-surface-subtle: #242425;
  --im-chat-surface-selected: #2e2e2f;
  --im-chat-border: #323434;
  --im-chat-bubble-out: #1f4230;
  --im-chat-bubble-out-inset: #193526;
  --im-chat-text: #f9f9f9;
  --im-chat-text-muted: #a2a2a2;
  --im-chat-accent: #48b45a;
  --im-chat-read: #5fb2e6;
  --im-chat-danger: #ed949b;
}

:is(html, body).dark {
  color-scheme: dark;
  --background-color: 22 22 23;
  --surface-1: 22 22 23;
  --surface-2: 22 22 23;
  --surface-active: 46 46 47;
  --border-container: 50 52 52;
  --border-strong: 50 52 52;
  --border-weak: 46 46 47;
  --solid-1: 33 34 34;
  --solid-2: 46 46 47;
  --solid-3: 50 52 52;
  --solid-active: 46 46 47;
  --card-color: 33 34 34;
  --button-color: 46 46 47;
  --label-background: 36 36 37;
  --label-border: 255, 255, 255, 0.06;
  --alpha-1: 36, 36, 37, 0.82;
  --alpha-2: 162, 162, 162, 0.12;
  --alpha-3: 46, 46, 47, 0.96;
  --slate-1: 18 18 19;
  --slate-2: 22 22 23;
  --slate-3: 27 29 29;
  --slate-4: 33 34 34;
  --slate-5: 36 36 37;
  --slate-6: 50 52 52;
  --slate-7: 71 72 72;
  --slate-8: 92 93 93;
  --slate-9: 116 117 117;
  --slate-10: 138 139 139;
  --slate-11: 162 162 162;
  --slate-12: 249 249 249;
  --teal-9: 72 180 90;
  --teal-10: 80 200 93;
  --teal-11: 82 211 98;
}

html.dark body,
body.dark,
:is(html, body).dark button,
:is(html, body).dark input,
:is(html, body).dark textarea,
:is(html, body).dark select {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html.dark body,
body.dark,
:is(html, body).dark #app {
  background: var(--im-chat-canvas);
  color: var(--im-chat-text);
}

:is(html, body).dark .bg-n-brand {
  background-color: var(--im-chat-accent) !important;
}

:is(html, body).dark .text-n-brand {
  color: var(--im-chat-accent) !important;
}

:is(html, body).dark .border-n-brand,
:is(html, body).dark .outline-n-brand {
  border-color: var(--im-chat-accent) !important;
  outline-color: var(--im-chat-accent) !important;
}

:is(html, body).dark ::selection {
  background: rgba(72, 180, 90, 0.34);
}

:is(html, body).dark * {
  scrollbar-color: #4a4c4c transparent;
  scrollbar-width: thin;
}

:is(html, body).dark .conversations-list-wrap,
:is(html, body).dark .conversations-list {
  background: var(--im-chat-canvas) !important;
}

:is(html, body).dark .conversations-list-wrap {
  border-color: var(--im-chat-border) !important;
}

:is(html, body).dark .conversations-list .conversation {
  min-height: 72px;
  border-color: rgba(50, 52, 52, 0.72) !important;
  transition: background-color 120ms ease, border-color 120ms ease;
}

:is(html, body).dark .conversations-list .conversation:hover {
  background: var(--im-chat-surface-subtle) !important;
}

:is(html, body).dark .conversations-list .conversation.active,
:is(html, body).dark .conversations-list .conversation.selected {
  background: var(--im-chat-surface-selected) !important;
}

:is(html, body).dark .conversations-list-wrap input[type="search"],
:is(html, body).dark .conversations-list-wrap input[placeholder*="esquis" i] {
  min-height: 40px;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--im-chat-surface-selected) !important;
}

:is(html, body).dark .conversation-details-wrap {
  background: var(--im-chat-canvas) !important;
  border-color: var(--im-chat-border) !important;
}

:is(html, body).dark .conversation-details-wrap > div:has(.conversation--header--actions) {
  min-height: 64px;
  border-color: var(--im-chat-border) !important;
  background: var(--im-chat-rail) !important;
}

:is(html, body).dark .conversation-panel {
  background-color: var(--im-chat-canvas) !important;
  background-image: url("/brand-assets/imessenger-chat-wallpaper.svg");
  background-repeat: repeat;
  background-size: 540px 960px;
  padding: 24px clamp(16px, 5vw, 88px) 16px !important;
}

:is(html, body).dark .message-bubble-container {
  margin-bottom: 2px !important;
}

:is(html, body).dark .message-bubble-container .left-bubble,
:is(html, body).dark .message-bubble-container .right-bubble {
  max-width: min(560px, 65vw) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.18);
  color: var(--im-chat-text) !important;
}

:is(html, body).dark .message-bubble-container .left-bubble {
  background: var(--im-chat-surface) !important;
  border-bottom-left-radius: 2px !important;
}

:is(html, body).dark .message-bubble-container .right-bubble {
  background: var(--im-chat-bubble-out) !important;
  border-bottom-right-radius: 2px !important;
}

:is(html, body).dark .message-bubble-container .group-with-next .left-bubble,
:is(html, body).dark .group-with-next + .message-bubble-container .left-bubble {
  border-top-left-radius: 2px !important;
}

:is(html, body).dark .message-bubble-container .group-with-next .right-bubble,
:is(html, body).dark .group-with-next + .message-bubble-container .right-bubble {
  border-top-right-radius: 2px !important;
}

:is(html, body).dark [data-bubble-name="text"] {
  padding: 7px 10px !important;
}

:is(html, body).dark .right-bubble [class*="bg-n-alpha-black1"] {
  background: var(--im-chat-bubble-out-inset) !important;
  border-left: 3px solid var(--im-chat-accent);
}

:is(html, body).dark .message-bubble-container .text-n-slate-11 {
  color: var(--im-chat-text-muted) !important;
}

:is(html, body).dark .message-bubble-container [class*="message-status"],
:is(html, body).dark .message-bubble-container .text-n-blue-11 {
  color: var(--im-chat-read) !important;
}

:is(html, body).dark .reply-box {
  margin: 10px 12px 12px !important;
  border: 1px solid var(--im-chat-border) !important;
  border-radius: 14px !important;
  background: var(--im-chat-surface) !important;
  box-shadow: none !important;
}

:is(html, body).dark .reply-box:not(.is-private):focus-within {
  border-color: #4a4c4c !important;
}

:is(html, body).dark .reply-box .ProseMirror,
:is(html, body).dark .reply-box textarea {
  color: var(--im-chat-text) !important;
}

:is(html, body).dark .reply-box .ProseMirror p.is-editor-empty:first-child::before,
:is(html, body).dark .reply-box textarea::placeholder {
  color: var(--im-chat-text-muted) !important;
}

:is(html, body).dark .imessenger-contact-sidebar {
  border-color: var(--im-chat-border) !important;
  background: var(--im-chat-canvas) !important;
  box-shadow: none !important;
}

:is(html, body).dark .imessenger-contact-sidebar > div,
:is(html, body).dark .imessenger-contact-sidebar .list-group {
  background: var(--im-chat-canvas) !important;
}

:is(html, body).dark .contact--profile {
  min-height: 304px;
  padding: 28px 24px 24px !important;
  border-bottom: 1px solid var(--im-chat-border);
  background: var(--im-chat-canvas);
}

:is(html, body).dark .contact--profile > .flex.flex-col {
  align-items: center !important;
  gap: 12px !important;
  text-align: center !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > div:first-child {
  justify-content: center !important;
}

:is(html, body).dark .contact--profile [class*="group/avatar"] {
  width: 96px !important;
  height: 96px !important;
}

:is(html, body).dark .contact--profile [role="img"],
:is(html, body).dark .contact--profile img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 999px !important;
  object-fit: cover;
}

:is(html, body).dark .contact--profile [role="img"] .select-none {
  font-size: 34px !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > div:nth-child(2) {
  align-items: center !important;
  text-align: center !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > div:nth-child(2) > .flex.items-center.w-full {
  order: 2;
  justify-content: center !important;
}

:is(html, body).dark .contact--profile h3 {
  justify-content: center;
  color: var(--im-chat-text-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-transform: none !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > div:nth-child(2) > .flex.flex-col.items-start {
  display: contents;
}

:is(html, body).dark .contact--profile [class*="group/row"] a,
:is(html, body).dark .contact--profile [class*="group/row"] > div {
  width: 100%;
  justify-content: center;
}

:is(html, body).dark .contact--profile [class*="group/row"]:has(a[href^="tel:"]) {
  order: 1;
  height: auto !important;
  margin: 2px 0 0 !important;
}

:is(html, body).dark .contact--profile [class*="group/row"]:has(a[href^="tel:"]) a > :first-child,
:is(html, body).dark .contact--profile [class*="group/row"]:has(a[href^="tel:"]) button {
  display: none !important;
}

:is(html, body).dark .contact--profile [class*="group/row"]:has(a[href^="tel:"]) span {
  color: var(--im-chat-text) !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 26px !important;
}

:is(html, body).dark .contact--profile [class*="group/row"]:has(svg.mail),
:is(html, body).dark .contact--profile [class*="group/row"]:has(svg.contact-identify),
:is(html, body).dark .contact--profile [class*="group/row"]:has(svg.building-bank) {
  display: none !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > .flex.items-center.w-full {
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 10px !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > .flex.items-center.w-full button {
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--im-chat-surface-selected) !important;
  color: var(--im-chat-text) !important;
}

:is(html, body).dark .contact--profile > .flex.flex-col > .flex.items-center.w-full button:hover {
  background: #3a3b3c !important;
}

:is(html, body).dark .imessenger-contact-sidebar .list-group > div > div {
  border-color: var(--im-chat-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 1280px) {
  :is(html, body).dark .conversations-list-wrap:not(.basis-full) {
    width: clamp(380px, 26vw, 620px) !important;
  }

  :is(html, body).dark .imessenger-contact-sidebar {
    width: clamp(360px, 27vw, 560px) !important;
    min-width: clamp(360px, 27vw, 560px) !important;
    max-width: 560px !important;
  }
}

@media (max-width: 767px) {
  :is(html, body).dark .conversation-panel {
    padding-inline: 12px !important;
    background-size: 360px 640px;
  }

  :is(html, body).dark .message-bubble-container .left-bubble,
  :is(html, body).dark .message-bubble-container .right-bubble {
    max-width: 82vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(html, body).dark .conversation,
  :is(html, body).dark .imessenger-contact-sidebar {
    transition: none !important;
  }
}