:root {
  --color-site-bg: #fafafa;
  --color-mobile-box-shadow: rgba(62, 39, 83, 0.2512);
  --color-app-bg: #f5f3f7;
  --color-recipient-txt: #9341c8;
  --color-recipient-box: #eee5f4;
  --color-recipient-status: #d99eff;
  --color-sender-txt: #6e5d7e;
  --color-sender-box: #fff;
  --color-sender-box-shadow: rgba(62, 39, 83, 0.0453);
  --color-placeholder: #c5c9cc;
  --color-heading: #3e2753;
  --color-txt: #a39da9;
  --color-recipient-option-cirlce: #e472ff;
}

/* TYPOGRAPHY */

.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.recipient-name {
  font-size: 11px;
  font-weight: 500;
  color: white;
}

.recipient-status {
  font-size: 8px;
  font-weight: 400;
  color: var(--color-recipient-status);
}

.app-main p:not(.recipient-option__price) {
  font-size: 8px;
  line-height: 11px;
}

.recipient-option__price {
  font-weight: 700;
  font-size: 12px;
  line-height: 11px;
}

.send input[type="text"]::placeholder {
  font-size: 11px;
  color: var(--color-placeholder);
}

.content h1 {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--color-heading);
}

.content p {
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-txt);
}

/* LAYOUT */
body {
  background-color: var(--color-site-bg);
}

main {
  position: relative;
  overflow: hidden;
}

.box {
  width: 500px;
  height: 1000px;
  border-radius: 250px;
  background: linear-gradient(27deg, #e844ff, #8739ff);
  position: absolute;
  z-index: 0;
}

.box-top-left {
  top: -575px;
  left: calc(0px - clamp(75px, calc(375px - 20vw), 300px));
}

.box-bot-right {
  opacity: 0.03;
  bottom: -625px;
  right: calc(0px - clamp(75px, calc(375px - 20vw), 300px));
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.content {
  padding-inline: 2rem;
  margin-inline: auto;
  text-align: center;
  max-inline-size: 28rem;
  position: relative;
  z-index: 3;
}

.content > p {
  margin-block: 1.5rem 4rem;
}

.mobile {
  margin-block: 4rem;
  inline-size: 247px;
  background-color: var(--color-sender-box);
  margin-inline: auto;
  border-radius: 30px;
  padding: 11px 9.5px;
  box-shadow: 0 3px 60px -10px var(--color-mobile-box-shadow);
  position: relative;
  z-index: 3;
}

.app {
  background-color: var(--color-app-bg);
  border-radius: 20px;
  overflow: hidden;
}

.app-header {
  background: linear-gradient(74deg, #e844ff, #8739ff);
  padding: 30px 16.5px 12px 15.5px;
  position: relative;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.white-stick {
  inline-size: 130px;
  block-size: 29px;
  background-color: var(--color-sender-box);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: -11px;
}

.back-btn > div {
  inline-size: 2px;
  block-size: 6px;
  background-color: var(--color-sender-box);
  border-radius: 1px;
}

.back-btn__top {
  transform: rotate(30deg);
  margin-bottom: -2px;
}

.back-btn__bot {
  transform: rotate(-30deg);
}

.recipient-avatar {
  inline-size: 24px;
  border-radius: 50%;
  border: 1px solid white;
}

.chat-recipient {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recipient-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.app-header__options {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.white-dot {
  inline-size: 2px;
  block-size: 2px;
  background-color: var(--color-sender-box);
}

.app-main {
  padding: 10px 7.5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recipient-message {
  max-inline-size: 128px;
  padding: 6px 8px;
  background-color: var(--color-recipient-box);
  border-radius: 10px 10px 10px 4px;
  color: var(--color-recipient-txt);
}

.sender-pic-gallery {
  align-self: flex-end;
  margin-top: 8px;
  display: flex;
  max-inline-size: 136px;
  gap: 8px;
}

.sender-pic-gallery img {
  max-inline-size: 40px;
  border-radius: 8px;
}

.sender-message {
  align-self: flex-end;
  max-inline-size: 128px;
  padding: 6px 8px;
  background-color: var(--color-sender-box);
  color: var(--color-sender-txt);
  border-radius: 10px 10px 4px 10px;
  box-shadow: 0 10px 5px -5px var(--color-sender-box-shadow);
}

.recipient-option {
  display: flex;
  gap: 8px;
  align-items: center;
  max-inline-size: 160px;
  padding-block: 10px;
  padding-inline: 8px 16px;
  border-radius: 10px 10px 10px 4px;
  color: var(--color-sender-box);
  background: linear-gradient(79deg, #e844ff, #8739ff);
}

.recipient-option__circle {
  inline-size: 12px;
  block-size: 12px;
  border: 1px solid var(--color-recipient-option-cirlce);
  border-radius: 50%;
}

.recipient-option__price {
  margin-inline-start: auto;
}

.send {
  position: relative;
  margin-top: 8px;
  inline-size: 100%;
}

.send input {
  all: unset;
  box-sizing: border-box;
  inline-size: 100%;
  padding-block: 13px 10px;
  padding-inline-start: 19px;
  border-radius: 17px;
  background-color: var(--color-sender-box);
}

.send-btn {
  background-color: var(--color-heading);
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.send-btn div {
  inline-size: 2px;
  block-size: 6px;
  background-color: var(--color-sender-box);
  border-radius: 4px;
}

.send-btn__top {
  transform: rotate(-45deg);
  margin-bottom: -1.4px;
}

.send-btn__bot {
  transform: rotate(45deg);
  margin-top: -1.4px;
}

/* 48em = 768px assuming 1em = 16px */
@media (min-width: 48em) {
  .flex-container {
    inline-size: fit-content;
    margin-inline: auto;
    margin-block: 148px;
    flex-direction: row;
    align-items: center;
    gap: clamp(64px, 10vw, 128px);
  }

  .content {
    padding-inline: 0;
    margin-inline: 0;
  }

  .mobile {
    margin: 0;
  }

  .box-top-left {
    top: calc(0px - clamp(300px, 575px - 20vw, 575px));
  }

  .box-bot-right {
    bottom: calc(0px - clamp(300px, 625px - 22.6vw, 625px));
  }
}

/* 48em = 768px and 50em = 800px assuming 1em = 16px */
@media (min-width: 48em) and (min-height: 50em) {
  main,
  body {
    height: 100vh;
  }
}