:root {
  --umm-bg: #241316;
  --umm-panel: #fff7f8;
  --umm-panel-strong: #ffffff;
  --umm-text: #241316;
  --umm-muted: #6b5960;
  --umm-line: rgba(225, 29, 72, 0.16);
  --umm-primary: #e11d48;
  --umm-primary-strong: #9f1239;
  --umm-accent: #2563eb;
  --umm-radius: 8px;
}

#unlimarket-messages-root,
#unlimarket-messages-root * {
  box-sizing: border-box;
}

#unlimarket-messages-root {
  position: relative;
  z-index: 99999;
  font-family: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--umm-text);
}

.umm-windows {
  position: fixed;
  right: 96px;
  bottom: 12px;
  z-index: 99999;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}

/* An open chat window stays exactly where it is when the chats drawer opens.
   It used to back off to right: 424px while the drawer was open, which made the
   conversation you were in jump 328px sideways the moment you pressed the
   messages icon. Now the drawer opens over it instead (unlimarket-messages-
   drawer.css layers .umm-drawer above the windows), the way Facebook's Messenger
   dropdown does - and opening a conversation from the drawer closes the drawer
   again, so the overlap only lasts while you're choosing one. */

.umm-minimized-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100000;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}

.umm-window {
  width: min(330px, calc(100vw - 24px));
  height: min(462px, calc(100vh - 120px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--umm-line);
  border-radius: var(--umm-radius);
  overflow: hidden;
  background: var(--umm-panel-strong);
  box-shadow: 0 24px 60px rgba(31, 37, 34, 0.24);
  pointer-events: auto;
}

.umm-window.is-minimized {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: visible;
}

.umm-window-bubble {
  position: relative;
  display: none;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* renderAvatar() always passes "is-small" for the bubble avatar (it's shared with the
   32px window-head avatar) -- .umm-avatar.is-small in misc.css has equal specificity and
   loads after this file, so without the extra .is-small here it would win and shrink this
   avatar to 32px inside the 56px bubble, leaving a visible gap around it. */
.umm-window-bubble .umm-avatar.is-small {
  width: 56px;
  height: 56px;
  border: 3px solid var(--umm-panel-strong);
  font-size: 15px;
  box-shadow: 0 12px 28px rgba(31, 37, 34, 0.24);
}

.umm-window-bubble b {
  position: absolute;
  left: -2px;
  bottom: -2px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--umm-panel-strong);
  border-radius: 999px;
  background: var(--umm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.umm-window.is-minimized .umm-window-bubble {
  display: grid;
}

.umm-window.is-minimized .umm-window-head,
.umm-window.is-minimized .umm-thread,
.umm-window.is-minimized .umm-compose {
  display: none;
}

.umm-window-head {
  min-height: 56px;
  padding: 10px;
  border-bottom: 1px solid var(--umm-line);
}

.umm-window-head span:not(.umm-avatar) {
  flex: 1;
  display: grid;
  min-width: 0;
}

.umm-window-controls {
  display: flex;
  gap: 8px;
}

.umm-window-head button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(225, 29, 72, 0.16);
  border-radius: 999px;
  background: #fff1f2;
  color: #9f1239;
  padding: 0;
  box-shadow: 0 6px 16px rgba(76, 5, 25, 0.08);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.umm-window-head button:hover {
  border-color: rgba(225, 29, 72, 0.28);
  background: #ffe4e6;
  color: #e11d48;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(76, 5, 25, 0.12);
}

.umm-window-head button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.42);
  outline-offset: 2px;
}

.umm-window-head button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(76, 5, 25, 0.1);
}

.umm-window-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

@media (max-width: 1020px) {
  .umm-windows,
  .umm-windows.is-drawer-open {
    right: 16px;
    bottom: 72px;
  }

  .umm-minimized-stack {
    right: 16px;
    bottom: 16px;
  }

  .umm-window:not(:last-child) {
    display: none;
  }
}

@media (max-width: 620px) {
  .umm-launcher {
    top: auto;
    right: 12px;
    bottom: 18px;
    min-width: 52px;
    max-width: calc(100vw - 24px);
  }

  .umm-drawer {
    inset: 74px 10px 10px;
    width: auto;
    max-height: none;
  }

  .umm-windows,
  .umm-windows.is-drawer-open {
    inset: auto 10px 10px;
  }

  .umm-minimized-stack {
    inset: auto 12px 12px auto;
  }

  .umm-window {
    width: calc(100vw - 20px);
    height: min(460px, calc(100vh - 96px));
  }
}