/*----------------------- 
    Mic Container Styles
-------------------------*/

/* Mic Container */
.mic-container {
  position: absolute;
  z-index: 1000;
  top: 52%;
  left: 50%;
  transform: translate(-47%, -63%);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 115px;
  width: 250px;
}

/* Mic Frame */
.mic-frame {
  position: absolute;
  width: 75px;
  height: 75px;
  left: 37%;
  top: 34.13px;
  background: rgba(178, 34, 34, 1);
  border-radius: 77.5606px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mic-frame img {
  width: 43px;
  height: 43px;
  filter: brightness(0) invert(1);
}

/* Mic Animation */
.mic-frame.unmuted {
  background: #4d98e2;
  animation: shadowPulse 2s infinite;
}

@keyframes shadowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 14px rgba(77, 152, 226, 0.19),
      0 0 0 28px rgba(77, 152, 226, 0.4), 0 0 0 42px rgba(77, 152, 226, 0.17);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(77, 152, 226, 0.19),
      0 0 0 35px rgba(77, 152, 226, 0.4), 0 0 0 50px rgba(77, 152, 226, 0.17);
  }
}

/*----------------------- 
    Responsive Media Queries
-------------------------*/

/* Portrait Orientation */
@media (orientation: portrait) {
  .main-logo {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-start: 20px;
    max-width: 160px;
    z-index: 10;
  }

  #sessionPopup {
    align-items: flex-end !important;
  }

  .popup-content {
    width: 100% !important;
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 35vh !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;

    justify-content: space-evenly;
  }

  .popup-content h2 {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-size: 30px !important;
    text-align: center;

    /* Base/Black */
    color: #202020 !important;
  }

  .popup-content p {
    max-width: 844px !important;

    font-family: "Outfit";
    font-style: normal;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 150% !important;
    /* or 27px */
    text-align: center !important;

    /* Gray/500 */
    color: #667085 !important;

    margin-block-start: auto !important;
    margin: 0 !important;
  }

  .popup-content #startSessionBtn {
    width: 100%;
    max-width: 250px !important;
    height: 42px;

    /* Base/Black */
    background-color: #202020 !important;
    &:hover {
      background-color: #2b2b2b !important;
    }
    border-radius: 100px !important;

    padding: 0px 2px !important;

    /* Outfit/16/Medium */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-size: 16px !important;
    /* or 22px */

    /* Base/White */
    color: #ffffff !important;
  }

  .container-fluid {
    position: relative !important;
  }
  .avatar-container {
    display: flex;
    justify-content: center;
  }
  .avatar-video {
    /* position: absolute !important;
    top: 0 !important;
    left: -250px !important;
    z-index: 2 !important; */
    scale: 0.59;
    margin-top: -30%;
  }

  /* Chat Interface Responsive */
  /*----------------------- 
    Chat Interface Styles
-------------------------*/
  .chat-interface {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
  }
  .chat-card {
    width: 100%;
  }
  /* Chat Header */
  .chat-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 50px 50px 0px 0px;
    gap: 20px;
    &.image-message {
      padding: 0px;
      gap: 0px;
    }
    width: 100%;
    min-height: 31vh;
    background: #ffffff;
    border-bottom: 1.26923px solid rgba(255, 255, 255, 0.35);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }
  .image-message-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    img {
      max-width: 120px;
    }

    h6 {
      /* Cadillacalghanim */
      height: 20px;

      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 20px;

      color: #2d2936;
    }

    span {
      font-family: Poppins;
      font-weight: 500;
      font-style: Medium;
      font-size: 15px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #85888e;
    }
  }

  .image-message-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }

  /* Message Container */
  .message-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-x: hidden;
    padding: 0px;
    gap: 20px;
    width: 100%;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
  }

  /* Message Base Styles */
  .message {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 12px;
    width: 100%;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
  }

  /* Avatar Message */
  .avatar-message {
    min-height: 129px;
  }

  .message-img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 40.62px;
    height: 40.62px;
    background: url("assets/image/avatar-message.jpg");
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(7px);
    border-radius: 1000px;
    flex: none;
    order: 0;
    flex-grow: 0;
  }

  .message-img img {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    object-fit: cover;
  }

  /* Message Content */
  .message-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 10px;
    flex: none;
    order: 1;
    flex-grow: 0;
  }

  /* Avatar Message Content */
  .avatar-message .message-content {
    min-width: 65%;
    max-width: 90%;
    height: 100%;
    background: #ffffff;
    border: 1.26923px solid #d0d5dd;
    backdrop-filter: blur(2.03077px);
    border-radius: 16px;
  }

  /* User Message Content */
  .user-message {
    justify-content: end;
  }

  #newAvatarVideo {
    /* object-fit: contain;
    z-index: 2;
    scale: 2;
    left: 50% !important;
    transform: translate(-25%, 0) !important;
    top: 250px !important;
    display: block; */
    scale: 1.18;
    margin-top: 10%;
  }

  .user-message .message-content {
    min-width: 65%;
    max-width: 90%;
    height: 100%;
    background: #f2f4f7;
    backdrop-filter: blur(2.03077px);
    border-radius: 16px;
  }

  /* Message Text */
  .message-text {
    font-family: "DIN Next LT Arabic", "Arial", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 150%;
    text-align: right;
    color: #202020;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }

  .avatar-message .message-text {
    width: 100%;
    height: 100%;
  }

  .user-message .message-text {
    width: 100%;
    min-height: 33px;
  }

  /* Message Time */
  .message-time {
    height: 21px;
    font-family: "Outfit", "Arial", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    display: flex;
    align-items: center;
    color: #667085;
    flex: none;
    order: 1;
    flex-grow: 0;
  }

  /* Custom scrollbar for message container */
  .message-container::-webkit-scrollbar {
    width: 6px;
  }

  .message-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .message-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
  }

  .message-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

/* Landscape Orientation (Normal) */
@media (orientation: landscape) {
  body {
    background-color: 100vh !important;
    overflow: hidden !important;
  }
  .mic-container {
    top: 85%;
    left: 85%;
    transform: translate(-47%, -50%);
  }

  .main-logo {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-start: 20px;
    max-width: 207px;
    z-index: 10;
  }

  #sessionPopup {
    align-items: flex-end !important;
  }

  .popup-content {
    width: 100% !important;
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 411px !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .logo-img {
    margin-block-start: 32px !important;
  }

  .popup-content h2 {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-size: 30px !important;
    line-height: 130% !important;
    text-align: center;

    /* Base/Black */
    color: #202020 !important;

    margin-block-start: 32px !important;
    margin-block-end: 8px !important;
  }

  .popup-content p {
    max-width: 844px !important;

    font-family: "Outfit";
    font-style: normal;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 150% !important;
    /* or 27px */
    text-align: center !important;

    /* Gray/500 */
    color: #667085 !important;

    margin-block-start: auto !important;
    margin: 0 !important;
  }

  .popup-content #startSessionBtn {
    width: 100%;
    max-width: 250px !important;
    height: 42px;

    /* Base/Black */
    background-color: #202020 !important;
    &:hover {
      background-color: #2b2b2b !important;
    }
    border-radius: 100px !important;

    padding: 0px 2px !important;

    /* Outfit/16/Medium */
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-size: 16px !important;
    line-height: 140%;
    /* or 22px */

    /* Base/White */
    color: #ffffff !important;
    margin-top: 32px !important;
  }

  .container-fluid {
    position: relative !important;
  }

  .avatar-video {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    /* object-fit: contain !important; */
    z-index: 2 !important;
  }

  #newAvatarVideo {
    object-fit: contain;
    z-index: 2;
    scale: 2;
    left: 50% !important;
    transform: translate(-25%, 0) !important;
    top: 250px !important;
    display: block;
  }

  /* Chat Interface Responsive */
  /*----------------------- 
      Chat Interface Styles
  -------------------------*/
  .chat-interface {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
  }

  /* Chat Header */
  .chat-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px 32px;
    border-radius: 50px 50px 0px 0px;
    gap: 20px;
    &.image-message {
      padding: 0px;
      gap: 0px;
    }
    width: 1080px;
    height: 411px;
    background: #ffffff;
    border-bottom: 1.26923px solid rgba(255, 255, 255, 0.35);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }
  .image-message-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;

    h6 {
      /* Cadillacalghanim */
      height: 20px;

      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 13.2364px;
      line-height: 20px;

      color: #2d2936;
    }

    span {
      font-family: Poppins;
      font-weight: 500;
      font-style: Medium;
      font-size: 12.76px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #85888e;
    }
  }

  .image-message-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }

  /* Message Container */
  .message-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-x: hidden;
    padding: 0px;
    gap: 20px;
    width: 1016px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
  }

  /* Message Base Styles */
  .message {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 12px;
    width: 1016px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
  }

  /* Avatar Message */
  .avatar-message {
    height: 129px;
  }

  .message-img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 40.62px;
    height: 40.62px;
    background: url("assets/image/avatar-message.jpg");
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(7px);
    border-radius: 1000px;
    flex: none;
    order: 0;
    flex-grow: 0;
  }

  .message-img img {
    width: 100%;
    height: 100%;
    border-radius: 1000px;
    object-fit: cover;
  }

  /* Message Content */
  .message-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 10px;
    flex: none;
    order: 1;
    flex-grow: 0;
  }

  /* Avatar Message Content */
  .avatar-message .message-content {
    width: 779px;
    height: 129px;
    background: #ffffff;
    border: 1.26923px solid #d0d5dd;
    backdrop-filter: blur(2.03077px);
    border-radius: 16px;
  }

  /* User Message Content */
  .user-message {
    justify-content: end;
  }

  .user-message .message-content {
    width: 782px;
    height: 96px;
    background: #f2f4f7;
    backdrop-filter: blur(2.03077px);
    border-radius: 16px;
  }

  /* Message Text */
  .message-text {
    font-family: "DIN Next LT Arabic", "Arial", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 150%;
    text-align: right;
    color: #202020;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
  }

  .avatar-message .message-text {
    width: 739px;
    height: 100%;
  }

  .user-message .message-text {
    width: 742px;
    height: 100%;
  }

  /* Message Time */
  .message-time {
    height: 21px;
    font-family: "Outfit", "Arial", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    display: flex;
    align-items: center;
    color: #667085;
    flex: none;
    order: 1;
    flex-grow: 0;
  }

  /* Custom scrollbar for message container */
  .message-container::-webkit-scrollbar {
    width: 6px;
  }

  .message-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .message-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
  }

  .message-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  .mic-container {
    top: 69%;
  }
}

.mic-hint {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  gap: 6px;
  width: 250px;
  height: 72px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid #ffffff;
  backdrop-filter: blur(22px);
  border-radius: 100px;
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  color: #202020;
  position: absolute;
  bottom: -90px;
  left: 50%;
  transform: translateX(-50%);
}