.mg-avatar {
  align-items: center;
  background: linear-gradient(135deg, #6655d9, #e89163);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 var(--mg-avatar-size);
  font-size: calc(var(--mg-avatar-size) * .28);
  font-style: normal;
  font-weight: 750;
  height: var(--mg-avatar-size);
  justify-content: center;
  overflow: hidden;
  width: var(--mg-avatar-size);
}

.mg-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.mg-message-nav {
  align-items: center;
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  color: var(--mg-ink);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  position: relative;
  width: 40px;
}

.mg-message-nav b {
  align-items: center;
  background: #e74258;
  border: 2px solid #fff;
  border-radius: 20px;
  color: #fff;
  display: flex;
  font-size: 8px;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 4px;
  position: absolute;
  right: -7px;
  top: -7px;
}

.mg-message-nav.has-unread {
  background: #fff0f2;
  border-color: #e74258;
  box-shadow: 0 0 0 3px rgba(231, 66, 88, .11);
}

.mg-message-nav.has-unread > span {
  color: #e74258;
  font-size: 18px;
  animation: mg-message-alert 1.8s ease-in-out infinite;
}

@keyframes mg-message-alert {
  0%, 65%, 100% { transform: rotate(0); }
  72% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
  88% { transform: rotate(-6deg); }
}

.mg-avatar-form {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.mg-avatar-form label { cursor: pointer; }
.mg-avatar-form input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.mg-avatar-form .mg-primary { padding: 11px 15px; }
.mg-avatar-help { color: #8c8f96; font-size: 9px; margin: 6px 0 0 96px; }

.mg-google-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d9dce2;
  border-radius: 10px;
  color: #25272d!important;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  min-height: 45px;
  padding: 10px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mg-google-button:hover { border-color: #9da3af; box-shadow: 0 4px 14px #1112; }
.mg-google-button i { align-items: center; color: #4285f4; display: inline-flex; font: 800 17px Arial,sans-serif; justify-content: center; }
.mg-form-divider { align-items: center; color: #9699a0; display: flex; font-size: 9px; gap: 10px; margin: 15px 0; text-transform: uppercase; }
.mg-form-divider::before,.mg-form-divider::after { background: var(--mg-line); content: ""; flex: 1; height: 1px; }
.mg-google-auth { margin: 18px 0 12px; min-width: 270px; }

.mg-private-message {
  background: #f4f6ff;
  border: 1px solid #dfe3ff;
  border-radius: 12px;
  margin: 18px 0;
  padding: 14px;
}

.mg-private-message > b,.mg-private-message summary { cursor: pointer; font-size: 12px; font-weight: 750; }
.mg-private-message p { color: #707580; font-size: 10px; margin: 5px 0 11px; }
.mg-private-message form { display: grid; gap: 10px; margin-top: 13px; }
.mg-private-message label { display: grid; font-size: 10px; font-weight: 700; gap: 6px; }
.mg-private-message textarea { background: #fff; border: 1px solid #d8dbe6; border-radius: 8px; padding: 10px; resize: vertical; width: 100%; }
.mg-private-message form > small { color: #7f8490; font-size: 8px; text-align: center; }

.mg-inbox-card {
  align-items: center;
  background: #10131b;
  border-radius: 12px;
  color: #fff!important;
  display: flex!important;
  gap: 10px;
  margin-bottom: 22px;
  padding: 14px!important;
}

.mg-inbox-card > span { font-size: 20px; }
.mg-inbox-card > div { display: flex; flex: 1; flex-direction: column; }
.mg-inbox-card b { font-size: 12px; }
.mg-inbox-card small { color: #aeb2bd; font-size: 9px; }
.mg-inbox-card > i { background: var(--mg-lime); border-radius: 20px; color: var(--mg-ink); font-size: 9px; font-style: normal; font-weight: 800; min-width: 21px; padding: 4px; text-align: center; }

.mg-messages-page { min-height: 720px; padding-bottom: 80px; }
.mg-messages-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 24px; }
.mg-messages-head h1 { font-size: 38px; letter-spacing: -2px; margin: 7px 0 3px; }
.mg-messages-head p { color: #7c8088; font-size: 12px; margin: 0; }
.mg-messages-head > span { background: #f1f2f4; border-radius: 20px; color: #737780; font-size: 10px; padding: 7px 10px; }
.mg-messages-layout { border: 1px solid var(--mg-line); border-radius: 16px; display: grid; grid-template-columns: 340px 1fr; min-height: 570px; overflow: hidden; }
.mg-thread-list { background: #fafafa; border-right: 1px solid var(--mg-line); max-height: 680px; overflow: auto; }
.mg-thread-link { align-items: center; border-bottom: 1px solid #ebeced; color: var(--mg-ink)!important; display: flex; gap: 10px; padding: 14px; position: relative; }
.mg-thread-link:hover,.mg-thread-link.active { background: #f0f2ff; }
.mg-thread-link > div { min-width: 0; }
.mg-thread-link b,.mg-thread-link span,.mg-thread-link p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-thread-link b { font-size: 11px; }
.mg-thread-link span { color: var(--mg-blue); font-size: 8px; font-weight: 700; margin: 2px 0; text-transform: uppercase; }
.mg-thread-link p { color: #858991; font-size: 9px; margin: 0; }
.mg-thread-link > i { background: #e74258; border-radius: 20px; color: #fff; font-size: 8px; font-style: normal; min-width: 19px; padding: 4px; text-align: center; }
.mg-thread-list .mg-empty { background: transparent; padding: 55px 25px; }
.mg-conversation { display: flex; flex-direction: column; min-width: 0; }
.mg-conversation > header { align-items: center; border-bottom: 1px solid var(--mg-line); display: flex; justify-content: space-between; padding: 17px 20px; }
.mg-conversation > header h2 { font-size: 16px; margin: 3px 0 0; }
.mg-conversation > header a { color: var(--mg-blue); font-size: 10px; }
.mg-message-stream { display: flex; flex: 1; flex-direction: column; gap: 14px; max-height: 430px; overflow: auto; padding: 22px; }
.mg-message-stream article { align-items: flex-end; display: flex; gap: 8px; max-width: 76%; }
.mg-message-stream article.mine { align-self: flex-end; flex-direction: row-reverse; }
.mg-message-stream article > div { background: #f1f2f4; border-radius: 14px 14px 14px 3px; padding: 10px 12px; }
.mg-message-stream article.mine > div { background: #202533; border-radius: 14px 14px 3px 14px; color: #fff; }
.mg-message-stream b { display: block; font-size: 9px; margin-bottom: 3px; }
.mg-message-stream p { font-size: 12px; line-height: 1.55; margin: 0; }
.mg-message-stream time { color: #92969f; display: block; font-size: 7px; margin-top: 5px; }
.mg-reply-form { border-top: 1px solid var(--mg-line); display: grid; gap: 8px; grid-template-columns: 1fr auto; padding: 16px 20px; }
.mg-reply-form label { font-size: 9px; font-weight: 700; grid-column: 1/-1; }
.mg-reply-form textarea { border: 1px solid #dfe0e4; border-radius: 9px; min-height: 52px; padding: 10px; resize: vertical; }
.mg-reply-form small { color: #898d95; font-size: 8px; grid-column: 1/-1; }
.mg-conversation-empty { align-items: center; color: #7f838c; display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 35px; text-align: center; }
.mg-conversation-empty > span { font-size: 36px; }
.mg-conversation-empty h2 { color: var(--mg-ink); font-size: 20px; margin: 10px 0 4px; }
.mg-conversation-empty p { font-size: 11px; }

@media (max-width: 900px) {
  .mg-messages-layout { grid-template-columns: 280px 1fr; }
  .mg-avatar-form { align-items: stretch; flex-direction: column; }
}

@media (max-width: 700px) {
  .mg-messages-layout { display: block; }
  .mg-thread-list { border-bottom: 1px solid var(--mg-line); border-right: 0; max-height: 300px; }
  .mg-conversation { min-height: 500px; }
  .mg-message-stream article { max-width: 90%; }
  .mg-profile-head { flex-wrap: wrap; }
  .mg-avatar-form { flex-direction: row; margin-left: 0; width: 100%; }
  .mg-avatar-help { margin-left: 0; }
}

@media (max-width: 620px) {
  .mg-message-nav { height: 35px; width: 36px; }
  .mg-account .mg-avatar { height: 35px; width: 35px; }
  .mg-messages-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .mg-messages-head h1 { font-size: 32px; }
  .mg-reply-form { grid-template-columns: 1fr; }
  .mg-reply-form button { width: 100%; }
}