.side {
  width: var(--side-width);
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  user-select: none;
}

.side__upper {
  display: flex;
  flex-direction: column;
  height: var(--side-upper-height);
  background-color: var(--white2);
}

.side__upper-header {
  height: var(--header-height);
  background-color: var(--header-bg-color);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.side__upper-header-icons {
  display: flex;
  gap: 30px;
}

.side__upper-header img {
  width: var(--header-profile-image);
  height: var(--header-profile-image);
  border-radius: var(--svg-circle);
  cursor: pointer;
}

.side__upper-header svg {
  height: 3rem;
  width: 3rem;
  cursor: pointer;
}

.side__upper-search {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
}

.side__upper-search-input {
  width: var(--side-search-input-width);
  font-size: 1.8rem;
  font-family: inherit;
  border: none;
  outline: none;
  padding: .4rem 0 .8rem 4rem;
  border-radius: 1rem;
  background-color: var(--white1);
  z-index: 1;
}

.side__upper-search-input::placeholder {
  font-weight: 400;
  color: var(--gray);
  font-size: var(--font-md);
}

.side__upper-search-button {
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  box-shadow: none;
  padding: 0.5rem;
  border-radius: var(--svg-circle);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -3.5rem;
  z-index: 2;
}

.side__upper-search-button:hover {
  background-color: var(--hover-bgcolor);
}

.side__upper-search-button:active {
  background-color: var(--active-bgcolor);
}

.side__lower {
  height: var(--side-lower-height);
  overflow-y: scroll;
  padding: 1rem 0 2rem 0;
}

.side__lower-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.side__lower-contact {
  border-bottom: 1px solid rgba(173, 181, 189, 0.3);
  height: var(--side-contact-height);
  display: flex;
  align-items: center;
  margin: 0 2.5rem;
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--font-lg);
  font-weight: 600;
  gap: 1.2rem;
  border-radius: 10px;
  overflow: hidden;
}

.side__lower-contact:hover {
  background-color: var(--hover-bgcolor);
}

.active-chat:hover {
  background-color: #049588;
}

.side__lower-contact-text {
  font-size: var(--font-xs);
  font-weight: normal;
}

.side__lower-contact svg,
.side__lower-contact img {
  height: 4.5rem;
  width: 4.5rem;
  border-radius: var(--svg-circle);
  margin-left: 1rem;
}

.active-chat {
  background-color: #049588;
  color: #fefefe;
}

.chat {
  width: var(--chat-width);
  display: flex;
  flex-direction: column;
  background-color: var(--chat-bg);
}

.chat__header {
  height: var(--header-height);
  background-color: var(--header-bg-color);
  border-left: 1px solid rgba(25, 25, 25, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat__header-image {
  width: var(--header-profile-image);
  height: var(--header-profile-image);
  border-radius: var(--svg-circle);
  cursor: pointer;
  margin-left: 2rem;
}

.chat__header-contact {
  display: flex;
  flex-direction: column;
  /* gap: 2px; */
  justify-content: center;
}

.chat__header-name {
  font-size: var(--font-lg);
  font-weight: 600;
  cursor: pointer;
}

.chat__header-status {
  font-size: var(--font-sm);
  font-weight: 300;
  color: var(--primary-dark);
}

.chat__header-all {
  display: flex;
  gap: 10px;
}

.chat__header-icons {
  display: flex;
  gap: 30px;
  margin-right: 3rem;
}

.chat__header-icons svg {
  cursor: pointer;
  height: 3rem;
  width: 3rem;
}

.chat__action {
  height: var(--chat-action-height);
  background-color: var(--chat-action-bgcolor);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.chat__action svg {
  height: 2.8rem;
  width: 2.8rem;
  cursor: pointer;
}

.chat__action-emoji:hover {
  fill: #f59f00;
}

.chat__action-input {
  width: var(--chat-action-input-width);
  height: var(--chat-action-input-height);
  font-size: var(--font-sm);
  font-family: inherit;
  border: none;
  outline: none;
  padding: .4rem .8rem;
  border-radius: .6rem;
  background-color: var(--white1);
}

.chat__action-send {
  margin-left: -6rem;
  width: 2.4rem !important;
  height: 2.4rem !important;
  fill: var(--primary-color);
}

.chat__action-send:hover {
  fill: var(--primary-dark);
}

.chat__main {
  height: var(--chat-main-height);
  background-color: transparent;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end; */
  padding: 2.5rem 1rem;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat__main-date {
  align-self: center;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  background-color: var(--primary-light);
  color: #444;
  border-radius: 20px;
  text-transform: uppercase;
}

.chat__main-msg {
  --r: 8px;
  /* the border-radius */
  --t: 10px;
  /* the size of the tail */
  padding: 1rem 2.5rem;
  background-color: var(--white3);
  font-size: var(--font-sm);
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  max-width: 60%;
  mask:
    radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0/var(--r) var(--r) space padding-box;
  -webkit-mask:
    radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0/var(--r) var(--r) space padding-box;
}

.chat__main-msg-me {
  --_d: 100%;
  border-right: var(--t) solid #0000;
  margin-left: var(--t);
  place-self: end;
  background-color: var(--chat-msg-me);
}

.chat__main-msg-user {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
}