/**
 * Support chat. Brand red header, quiet log, pill composer.
 */
.ba-support-widget {
  --ba-sw-primary: #F90B0B;
  --ba-sw-primary-dark: #D90808;
  --ba-sw-card: var(--rt-card-bg, var(--bg-card, #FFFFFF));
  --ba-sw-log: var(--rt-body-bg, var(--page, #F7F8FA));
  --ba-sw-border: var(--rt-border, var(--border, #E0E4EA));
  --ba-sw-text: var(--text-primary, var(--bs-body-color, #151922));
  --ba-sw-muted: var(--text-muted, #5D6675);
  z-index: 1040;
}

.ba-support-widget #baSupportWidgetPanel.card {
  width: min(22.5rem, calc(100vw - 1.5rem));
  height: min(32rem, 70vh);
  background: var(--ba-sw-card);
  color: var(--ba-sw-text);
  border-radius: 1.35rem;
  box-shadow: 0 1.25rem 3rem rgba(21, 25, 34, .28);
}

.ba-support-widget #baSupportWidgetPanel.card:hover {
  background: var(--ba-sw-card);
  box-shadow: 0 1.25rem 3rem rgba(21, 25, 34, .28);
}

.ba-support-widget .card-body {
  min-height: 0;
  background: var(--ba-sw-card);
}

.ba-support-widget .ba-sw-head {
  padding: 1rem 1rem .9rem;
  background: var(--ba-sw-primary);
  color: #fff;
}

.ba-support-widget .ba-sw-kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

.ba-support-widget #baSupportWidgetStatus {
  font-size: .78rem;
  opacity: .9;
}

.ba-support-widget .ba-sw-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ba-support-widget .ba-sw-close:hover,
.ba-support-widget .ba-sw-close:focus-visible {
  background: rgba(255, 255, 255, .28);
  color: #fff;
}

.ba-support-widget .ba-sw-log {
  padding: 1rem;
  background: var(--ba-sw-log);
}

.ba-support-widget .ba-sw-bubble {
  max-width: 85%;
  padding: .7rem .8rem;
  font-size: .875rem;
  line-height: 1.4;
}

.ba-support-widget .ba-sw-meta {
  margin-top: .35rem;
  font-size: .68rem;
  opacity: .75;
}

.ba-support-widget .ba-support-widget-bubble-user {
  background: var(--ba-sw-primary);
  color: #fff;
  border-radius: 1rem 1rem .3rem 1rem;
}

.ba-support-widget .ba-support-widget-bubble-support {
  background: var(--ba-sw-card);
  color: var(--ba-sw-text);
  border: 1px solid var(--ba-sw-border);
  border-left: 3px solid var(--ba-sw-primary);
  border-radius: .3rem 1rem 1rem 1rem;
}

.ba-support-widget .ba-support-widget-bubble-system {
  max-width: 100%;
  padding: 0;
  color: var(--ba-sw-muted);
  background: transparent;
}

.ba-support-widget .ba-sw-compose {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .75rem;
  padding: .35rem .35rem .35rem .85rem;
  border: 1px solid var(--ba-sw-border);
  border-radius: 999px;
  background: var(--ba-sw-card);
}

.ba-support-widget .ba-sw-compose .form-control {
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 2.25rem;
  padding-left: 0;
  color: var(--ba-sw-text);
}

.ba-support-widget .ba-sw-compose .form-control:focus {
  box-shadow: none;
  background: transparent;
  color: var(--ba-sw-text);
}

.ba-support-widget .ba-sw-compose .form-control::placeholder {
  color: var(--ba-sw-muted);
}

.ba-support-widget .ba-sw-send {
  border: 0;
  border-radius: 999px;
  background: var(--ba-sw-primary);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  min-height: 2.25rem;
  padding: 0 .9rem;
}

.ba-support-widget .ba-sw-send:hover,
.ba-support-widget .ba-sw-send:focus-visible {
  background: var(--ba-sw-primary-dark);
  color: #fff;
}

.ba-support-widget .ba-sw-launch {
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--ba-sw-primary);
  color: #fff;
  box-shadow: 0 .6rem 1.4rem rgba(249, 11, 11, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 1.45rem;
}

.ba-support-widget .ba-sw-launch:hover,
.ba-support-widget .ba-sw-launch:focus-visible {
  background: var(--ba-sw-primary-dark);
  color: #fff;
}

.ba-support-widget .ba-sw-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: #151922;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.15rem;
  transform: translate(30%, -30%);
}

html[data-theme="dark"] .ba-support-widget {
  --ba-sw-primary-dark: #FF3030;
  --ba-sw-card: #111621;
  --ba-sw-log: #080B12;
  --ba-sw-border: #293142;
  --ba-sw-text: #F5F7FA;
  --ba-sw-muted: #A9B2C1;
}

@media (max-width: 575.98px) {
  body.ba-auth .ba-support-widget {
    display: none;
  }
}
