.mws-talk-window {
  position: fixed;
  right: var(--spacing-2xl);
  bottom: var(--spacing-2xl);
  z-index: 1000;
  display: flex;
  width: min(420px, calc(100vw - (var(--spacing-base) * 2)));
  height: min(770px, calc(100dvh - (var(--spacing-2xl) * 2)));
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 7%));
}

.mws-talk-window__panel {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--semantic-white);
}

.mws-talk-window__content {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 32px var(--spacing-xl);
}

.mws-talk-window__cover {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.mws-talk-window__profile {
  position: relative;
  display: flex;
  width: 240px;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl);
}

.mws-talk-window__information {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.mws-talk-window__avatar {
  display: block;
  width: 120px;
  aspect-ratio: 1;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

.mws-talk-window__details {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xs);
  text-align: center;
}

.mws-talk-window__badge {
  padding: 0 var(--spacing-3xs);
  border: var(--stroke-1) solid var(--semantic-border);
  border-radius: var(--radius-xs);
  color: var(--neutral-tx3-sub);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-14);
}

.mws-talk-window__title {
  margin: 2px 0 0;
  color: var(--neutral-tx1-hero);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-24);
}

.mws-talk-window__description {
  margin: 0;
  color: var(--neutral-tx2-title);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  word-break: keep-all;
}

.mws-talk-window__actions {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-lg);
}

.mws-talk-window__button {
  display: inline-flex;
  width: 100%;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-base);
  border: var(--stroke-1) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-20);
  text-decoration: none;
  cursor: pointer;
}

.mws-talk-window__button--primary {
  border-color: var(--brand-primary);
  color: var(--semantic-white);
  font-weight: var(--font-weight-medium);
  background: var(--brand-primary);
}

.mws-talk-window__button--secondary {
  border-color: var(--semantic-border);
  color: var(--neutral-tx3-sub);
  font-weight: var(--font-weight-regular);
  background: var(--semantic-white);
}

.mws-talk-window__navigation {
  display: flex;
  min-height: 84px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 10px var(--spacing-xl);
}

.mws-talk-window__navigation-item {
  display: flex;
  width: 60px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--spacing-3xs);
  color: var(--neutral-tx3-sub);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-14);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.mws-talk-window__navigation-item.is-selected {
  color: var(--brand-primary-dark);
}

.mws-talk-window__navigation-icon {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
}

.mws-talk-window__navigation-icon img {
  display: block;
  width: 16px;
  height: 16px;
}

.mws-talk-window__navigation-icon.has-notification::after {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--brand-accent-dark);
  content: "";
}

.mws-talk-window__close {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--semantic-white);
}

.mws-talk-window__close img {
  display: block;
  width: 10px;
  height: 10px;
}

.mws-talk-window__button:focus-visible,
.mws-talk-window__navigation-item:focus-visible,
.mws-talk-window__close:focus-visible {
  outline: var(--stroke-2) solid var(--brand-primary-dark);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .mws-talk-window {
    right: var(--spacing-base);
    bottom: var(--spacing-base);
    height: min(770px, calc(100dvh - (var(--spacing-base) * 2)));
  }

  .mws-talk-window__content {
    padding-right: var(--spacing-base);
    padding-left: var(--spacing-base);
  }
}