.umm-launcher {
  position: fixed;
  right: 18px;
  top: 82px;
  z-index: 99999;
  min-width: 58px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--umm-primary);
  color: #fff1f2;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(31, 37, 34, 0.22);
}

.umm-launcher.is-active {
  background: var(--umm-accent);
}

.umm-launcher strong {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #be123c;
  color: #fff;
  font-size: 12px;
}

.umm-drawer {
  position: fixed;
  top: 72px;
  right: 16px;
  /* Above the chat windows (99999) and the minimized bubbles (100000): the windows no
     longer move aside when the drawer opens, so the drawer - which only exists while
     it's open - draws over them rather than under them. */
  z-index: 100001;
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 92px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--umm-line);
  border-radius: var(--umm-radius);
  background: var(--umm-panel);
  box-shadow: 0 24px 60px rgba(31, 37, 34, 0.22);
}

.umm-drawer.is-compact {
  width: min(320px, calc(100vw - 32px));
}

.umm-drawer-head,
.umm-window-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.umm-drawer-head {
  justify-content: space-between;
}

.umm-drawer h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.umm-drawer-head div {
  display: flex;
  gap: 6px;
}

.umm-drawer button,
.umm-compose button {
  border: 0;
  border-radius: var(--umm-radius);
  background: transparent;
  color: var(--umm-primary);
  font-weight: 500;
  cursor: pointer;
}

.umm-drawer-head button {
  min-height: 32px;
  padding: 0 8px;
  background: rgba(225, 29, 72, 0.1);
}

.umm-search {
  display: grid;
  gap: 6px;
}

.umm-search span {
  color: var(--umm-muted);
  font-size: 12px;
  font-weight: 500;
}

.umm-search input,
.umm-compose input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--umm-line);
  border-radius: 999px;
  padding: 0 14px;
  background: #fff7f8;
  color: var(--umm-text);
  font: inherit;
  outline: none;
}

.umm-search input:focus,
.umm-compose input:focus {
  border-color: rgba(225, 29, 72, 0.55);
  background: #fff;
}

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

.umm-filters button {
  min-height: 34px;
  padding: 0 12px;
  background: rgba(225, 29, 72, 0.08);
}

.umm-filters button.is-active {
  background: var(--umm-primary);
  color: #fff1f2;
}