/* =========================================================
   MERIDIAN ATLAS
   ========================================================= */

#md-chat-toggle {
  position: fixed;

  right: 24px;
  bottom: 24px;

  width: 58px;
  height: 58px;

  /* Perfectly center the star */
  display: grid;
  place-items: center;

  padding: 0;
  margin: 0;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;

  background: rgba(20, 20, 20, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  color: #fff;

  cursor: pointer;

  z-index: 9998;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.35),
    inset 0 1px rgba(255, 255, 255, 0.08);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* Meridian Atlas Star */

.md-atlas-star {
  display: block;

  font-size: 23px;

  line-height: 1;

  color: #fff;

  /* Fine-tune visual centering of the glyph */
  transform: translateY(-1px);

  transition:
    transform .25s ease,
    opacity .25s ease;
}


/* Hover */

#md-chat-toggle:hover {
  transform: translateY(-4px);

  background: rgba(30, 30, 30, 0.95);

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(255, 255, 255, 0.06);
}


#md-chat-toggle:hover .md-atlas-star {
  transform: translateY(-1px) scale(1.08);
}


/* Click */

#md-chat-toggle:active {
  transform: translateY(-1px) scale(0.96);
}


#md-chat-toggle:hover {
  transform: translateY(-4px);

  background: rgba(35, 35, 35, 0.95);

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(255, 255, 255, 0.06);
}


/* =========================================================
   CHAT WINDOW
   ========================================================= */

#md-chat-window {

  position: fixed;

  right: 24px;
  bottom: 96px;

  width: 390px;
  height: 650px;

  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 24px;

  background:
    rgba(14, 14, 14, 0.96);

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.5);

  z-index: 9999;

  opacity: 0;

  transform:
    translateY(18px) scale(.97);

  pointer-events: none;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


#md-chat-window.md-chat-open {

  opacity: 1;

  transform:
    translateY(0) scale(1);

  pointer-events: auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.md-chat-header {

  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 15px 17px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07);

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.015));

}


.md-atlas-identity {

  display: flex;

  align-items: center;

  gap: 11px;

}


.md-atlas-icon {

  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.07);

  border:
    1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  font-size: 19px;

}


.md-atlas-title h4 {

  margin: 0;

  color: #fff;

  font-size: 15px;

  font-weight: 600;

}


.md-atlas-title span {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 10px;

}


.md-status-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #69d38b;

  box-shadow:
    0 0 8px rgba(105, 211, 139, .8);

}


#md-chat-close {

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: none;

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.05);

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 22px;

  cursor: pointer;

  transition: .2s ease;

}


#md-chat-close:hover {

  background:
    rgba(255, 255, 255, 0.1);

  color: #fff;

}


/* =========================================================
   MESSAGES
   ========================================================= */

.md-chat-messages {

  flex: 1;

  overflow-y: auto;

  padding: 22px 17px;

  scroll-behavior: smooth;

}


.md-chat-messages::-webkit-scrollbar {

  width: 4px;

}


.md-chat-messages::-webkit-scrollbar-thumb {

  background:
    rgba(255, 255, 255, 0.12);

  border-radius: 10px;

}


/* =========================================================
   WELCOME
   ========================================================= */

.md-welcome {

  padding: 8px 2px 15px;

}


.md-welcome h3 {

  margin: 0 0 8px;

  color: #fff;

  font-size: 21px;

  letter-spacing: -.3px;

}


.md-welcome p {

  margin: 0;

  max-width: 330px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 12.5px;

  line-height: 1.6;

}


.md-suggestions-label {

  margin-top: 24px;
  margin-bottom: 9px;

  color:
    rgba(255, 255, 255, 0.3);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .1em;

}


.md-suggestions {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 7px;

}


.md-suggestion {

  min-height: 62px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.65);

  font-family: inherit;

  font-size: 10.5px;

  text-align: left;

  cursor: pointer;

  transition: .2s ease;

}


.md-suggestion span:first-child {

  font-size: 15px;

}


.md-suggestion:hover {

  transform:
    translateY(-2px);

  background:
    rgba(255, 255, 255, 0.07);

  border-color:
    rgba(255, 255, 255, 0.15);

  color: #fff;

}


/* =========================================================
   CHAT BUBBLES
   ========================================================= */

.md-msg {

  max-width: 83%;

  padding: 11px 13px;

  margin-bottom: 12px;

  border-radius: 15px;

  font-size: 12.5px;

  line-height: 1.55;

  animation:
    md-message-in .25s ease;

}


@keyframes md-message-in {

  from {

    opacity: 0;

    transform:
      translateY(6px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.md-msg-user {

  margin-left: auto;

  color: #111;

  background: #fff;

  border-bottom-right-radius: 5px;

}


.md-msg-bot {

  margin-right: auto;

  color:
    rgba(255, 255, 255, .78);

  background:
    rgba(255, 255, 255, .055);

  border:
    1px solid rgba(255, 255, 255, .07);

  border-bottom-left-radius: 5px;

}


.md-msg-bot strong {

  color: #fff;

}


/* =========================================================
   MESSAGE ACTIONS
   ========================================================= */

.md-message-actions {

  display: flex;

  gap: 4px;

  margin-top: 7px;

}


.md-message-actions button {

  border: none;

  background: transparent;

  color:
    rgba(255, 255, 255, .28);

  font-size: 10px;

  cursor: pointer;

  transition: .2s ease;

}


.md-message-actions button:hover {

  color:
    rgba(255, 255, 255, .8);

}


/* =========================================================
   TYPING
   ========================================================= */

.md-typing {

  width: fit-content;

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 11px 13px;

  margin-bottom: 12px;

  border-radius: 15px;

  border-bottom-left-radius: 5px;

  background:
    rgba(255, 255, 255, .055);

  border:
    1px solid rgba(255, 255, 255, .07);

}


.md-typing span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .5);

  animation:
    md-typing 1.2s infinite;

}


.md-typing span:nth-child(2) {

  animation-delay: .15s;

}


.md-typing span:nth-child(3) {

  animation-delay: .3s;

}


@keyframes md-typing {

  0%,
  60%,
  100% {

    opacity: .25;

    transform:
      translateY(0);

  }

  30% {

    opacity: 1;

    transform:
      translateY(-3px);

  }

}


/* =========================================================
   INPUT
   ========================================================= */

.md-chat-input-area {

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 10px 12px;

  border-top:
    1px solid rgba(255, 255, 255, .07);

}


#md-chat-input {

  flex: 1;

  min-width: 0;

  height: 44px;

  padding: 0 13px;

  border-radius: 12px;

  border:
    1px solid rgba(255, 255, 255, .08);

  background:
    rgba(255, 255, 255, .04);

  outline: none;

  color: #fff;

  font-family: inherit;

  font-size: 12px;

  transition: .2s ease;

}


#md-chat-input::placeholder {

  color:
    rgba(255, 255, 255, .27);

}


#md-chat-input:focus {

  border-color:
    rgba(255, 255, 255, .2);

  background:
    rgba(255, 255, 255, .06);

}


#md-chat-send {

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border: none;

  border-radius: 12px;

  background: #fff;

  color: #111;

  font-size: 20px;

  cursor: pointer;

  transition: .2s ease;

}


#md-chat-send:hover {

  transform:
    translateY(-2px);

}


/* =========================================================
   FOOTER
   ========================================================= */

.md-chat-footer {

  display: flex;

  justify-content: space-between;

  padding:
    0 14px 10px;

  color:
    rgba(255, 255, 255, .2);

  font-size: 8px;

}


.md-chat-footer button {

  border: none;

  background: transparent;

  color:
    rgba(255, 255, 255, .3);

  font-size: 8px;

  cursor: pointer;

}


.md-chat-footer button:hover {

  color: #fff;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #md-chat-toggle {

    right: 16px;
    bottom: 16px;

    width: 54px;
    height: 54px;

  }


  #md-chat-window {

    right: 10px;
    bottom: 80px;

    width:
      calc(100vw - 20px);

    height:
      calc(100vh - 100px);

    max-height: none;

    border-radius: 20px;

  }


  .md-suggestions {

    grid-template-columns: 1fr;

  }

}