.support-floating-chat__message.is-system {
  align-items: center;
}

.support-floating-chat__message.is-system .support-floating-chat__bubble {
  max-width: 92%;
  padding: .35rem .65rem;
  border-radius: 999px;
  color: #6b7280;
  background: #eef2f0;
  font-size: .78rem;
  box-shadow: none;
}

.support-floating-chat__read {
  margin-top: .25rem;
  color: var(--grey-color, #8b96a3);
  font-size: .72rem;
  line-height: 1.2;
}

.support-floating-chat__read.is-unread {
  color: #6b7280;
}

.support-floating-chat__empty-hours {
  display: block;
  margin-top: .45rem;
  color: #8a929b;
  font-size: .86rem;
  line-height: 1.45;
}

.support-floating-chat__field {
  position: relative;
  margin-bottom: .65rem;
}

.support-floating-chat__field::after {
  content: "";
  position: absolute;
  right: .9rem;
  top: 50%;
  width: .48rem;
  height: .48rem;
  border-right: 2px solid #6f7a86;
  border-bottom: 2px solid #6f7a86;
  pointer-events: none;
  transform: translateY(-68%) rotate(45deg);
}

.support-floating-chat__field.is-online-selection::before,
.support-floating-chat__field.is-offline-selection::before {
  content: "";
  position: absolute;
  left: .82rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 2;
}

.support-floating-chat__field.is-online-selection::before {
  background: #168a3a;
  box-shadow: 0 0 0 3px rgba(22, 138, 58, .12);
}

.support-floating-chat__field.is-offline-selection::before {
  background: #a0a8b0;
}

.support-floating-chat__field select.support-department-select {
  width: 100%;
  min-height: 38px;
  appearance: none;
  -webkit-appearance: none;
  padding: .52rem 2.35rem .52rem 1.85rem;
  border: 1px solid #d4dccf;
  border-radius: .45rem;
  background: linear-gradient(180deg, #fff 0%, #fbfdf8 100%);
  color: #2f3a45;
  font-size: .92rem;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(109, 157, 9, .05);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.support-floating-chat__field select.support-department-select:focus {
  outline: none;
  border-color: #6d9d09;
  box-shadow: 0 0 0 3px rgba(109, 157, 9, .13);
}

.support-floating-chat__field select.support-department-select.has-online-selection {
  border-color: #9fc66a;
  background: linear-gradient(180deg, #fbfff4 0%, #f4faec 100%);
  color: #168a3a !important;
  font-weight: 600;
}

.support-floating-chat__field select.support-department-select.has-offline-selection {
  color: #7b858f;
}

.support-floating-chat__field select.support-department-select:disabled {
  cursor: not-allowed;
  opacity: .72;
  background: #f3f5f2;
}

.support-floating-chat__field option.support-department-online {
  color: #168a3a;
  font-weight: 600;
}

.support-floating-chat__field option.support-department-offline {
  color: #8a929b;
}

.support-floating-chat__composer {
  position: relative;
  margin-bottom: .375rem;
}

.support-floating-chat__composer textarea {
  min-height: 88px;
  margin: 0;
  padding-bottom: 2.55rem;
}

.support-floating-chat__composer .support-floating-chat__toolbar {
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .45rem;
  z-index: 4;
  min-height: 0;
  height: 30px;
  margin: 0;
}

.support-floating-chat__composer .support-floating-chat__emoji-popover {
  z-index: 30;
  bottom: calc(100% + .5rem);
}

.support-floating-chat__emoji-popover button {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}

.support-floating-chat__sound-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-floating-chat__sound-toggle.is-muted {
  color: #a0a8b0;
}

.support-floating-chat__sound-toggle.is-muted [data-support-sound-on],
.support-floating-chat__sound-toggle:not(.is-muted) [data-support-sound-off] {
  display: none;
}

.support-front-department-field {
  position: relative;
}

.support-front-department-field::after {
  content: "";
  position: absolute;
  right: .9rem;
  bottom: 1rem;
  width: .48rem;
  height: .48rem;
  border-right: 2px solid #6f7a86;
  border-bottom: 2px solid #6f7a86;
  pointer-events: none;
  transform: rotate(45deg);
}

.support-front-department-field.is-online-selection::before,
.support-front-department-field.is-offline-selection::before {
  content: "";
  position: absolute;
  left: .88rem;
  bottom: 1.24rem;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.support-front-department-field.is-online-selection::before {
  background: #168a3a;
  box-shadow: 0 0 0 3px rgba(22, 138, 58, .12);
}

.support-front-department-field.is-offline-selection::before {
  background: #a0a8b0;
}

.support-front-department-field select.support-department-select {
  width: 100%;
  min-height: 42px;
  appearance: none;
  -webkit-appearance: none;
  padding: .62rem 2.35rem .62rem 1.95rem;
  border: 1px solid #d4dccf;
  border-radius: .45rem;
  background: linear-gradient(180deg, #fff 0%, #fbfdf8 100%);
  color: #2f3a45;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(109, 157, 9, .05);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.support-front-department-field select.support-department-select:focus {
  outline: none;
  border-color: #6d9d09;
  box-shadow: 0 0 0 3px rgba(109, 157, 9, .13);
}

.support-front-department-field select.support-department-select.has-online-selection {
  border-color: #9fc66a;
  background: linear-gradient(180deg, #fbfff4 0%, #f4faec 100%);
  color: #168a3a !important;
  font-weight: 600;
}

.support-front-department-field select.support-department-select.has-offline-selection {
  color: #7b858f;
}

.support-front-department-field option.support-department-online {
  color: #168a3a;
  font-weight: 600;
}

.support-front-department-field option.support-department-offline {
  color: #8a929b;
}