body {
  background-color: #1d1d1d;
  padding: 0;
  margin: 0;
  height: 90vh;
}

* {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

a {
  cursor: pointer;
}

.button {
  background-color: #fff;
  border: 2px solid #fff;
  text-decoration: none;
  color: #1d1d1d;
  padding: 10px 20px;
  border-radius: 25px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  transition: ease 300ms all;
  font-weight: bold;
}

.button.outline {
  background-color: transparent !important;
  color: #fff !important;
}

.button:hover {
  background-color: #fff !important;
  color: #1d1d1d !important;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.header .container {
  padding: 30px 10px;
  display: flex;
  justify-content: space-between;
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .header__btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

main .container {
  max-width: 750px;
}

.chat-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80vh;
}

.chat-wrapper.expanded {
  justify-content: space-between;
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

.conversation h1 {
  font-weight: 500;
  text-align: center;
  color: #fff;
  font-size: 26px;
}

.input-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 10px;
  width: 100%;
  background-color: #2b2b2b;
  border-radius: 100px;
}

.input-wrapper .input-button {
  border-radius: 50%;
  min-width: 50px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-wrapper .input-button.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.input-wrapper #query {
  background-color: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  color: #fff;
  padding: 0 10px;
  width: 80%;
  resize: none;
  height: 25px;
  line-height: 1.5;
}

.input-wrapper .voice {
  background: #1d1d1d;
  position: relative;
  cursor: pointer;
}

.input-wrapper .send {
  background: #fff;
}

.input-wrapper .send .stop {
  display: none;
}

.input-wrapper .send.recording .arrow {
  display: none;
}

.input-wrapper .send.recording {
  background: #f49d9d;
  border: 4px solid #ffbdbd;
  transition: 300ms all ease;
}

.input-wrapper .send.recording .stop {
  display: block;
}

.message {
  line-height: 1.7;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 30px;
  margin: 4px 0;
  color: #fff;
  animation: fadeIn 0.3s ease-in-out;
  word-wrap: break-word;
  display: flex;
}

.user-message {
  background-color: #2b2b2b;
  align-self: flex-end;
  animation: slideFromRight 0.3s ease-in-out;
}

.ai-message {
  align-self: flex-start;
  animation: slideFromLeft 0.3s ease-in-out;
}

.loading {
  align-self: flex-start;
  animation: pulse 1.5s infinite;
}

.ai-message::before,
.loading::before {
  content: '';
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E %3Cpath d='M18.5566 14.2002C18.6566 15.9461 20.0539 17.3434 21.7998 17.4434V18.5557C20.0539 18.6556 18.6566 20.0539 18.5566 21.7998H17.4434C17.3434 20.0539 15.9461 18.6556 14.2002 18.5557V17.4434C15.9461 17.3434 17.3434 15.9461 17.4434 14.2002H18.5566ZM8.80469 5.2002C8.90828 8.46519 11.5348 11.0907 14.7998 11.1943V12.8047C11.5348 12.9083 8.90828 15.5348 8.80469 18.7998H7.19531C7.09172 15.5348 4.4652 12.9083 1.2002 12.8047V11.1943C4.46518 11.0907 7.09172 8.46519 7.19531 5.2002H8.80469ZM7.8252 8.7793C7.11582 10.0576 6.05757 11.1158 4.7793 11.8252L4.46387 12L4.7793 12.1748C6.05757 12.8842 7.11582 13.9424 7.8252 15.2207L8 15.5361L8.1748 15.2207C8.88417 13.9424 9.94242 12.8842 11.2207 12.1748L11.5361 12L11.2207 11.8252C9.94242 11.1158 8.88417 10.0576 8.1748 8.7793L8 8.46387L7.8252 8.7793ZM5.58887 12.4463C5.66524 12.4999 5.74104 12.5542 5.81543 12.6104L6.03516 12.7832C5.9626 12.7244 5.88908 12.6667 5.81445 12.6104L5.58887 12.4463ZM10.4111 12.4463C10.335 12.4997 10.2597 12.5544 10.1855 12.6104L9.96484 12.7832C10.0372 12.7245 10.1102 12.6665 10.1846 12.6104L10.4111 12.4463ZM6.03516 11.2168C5.9628 11.2755 5.88984 11.3335 5.81543 11.3896L5.58887 11.5537C5.66503 11.5003 5.74027 11.4456 5.81445 11.3896L6.03516 11.2168ZM9.96484 11.2168C10.0374 11.2756 10.1109 11.3333 10.1855 11.3896L10.4111 11.5537C10.3348 11.5001 10.259 11.4458 10.1846 11.3896L9.96484 11.2168ZM17.3721 2.2002C17.4695 3.49709 18.5029 4.52951 19.7998 4.62695V5.37207C18.5029 5.46948 17.4695 6.50289 17.3721 7.7998H16.6279C16.5305 6.50289 15.4971 5.46948 14.2002 5.37207V4.62695C15.4971 4.52951 16.5305 3.49709 16.6279 2.2002H17.3721Z' fill='white'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top center;
  margin-right: 10px;
  flex-shrink: 0;
}

.error-message {
  align-self: flex-start;
  color: #e44c5a;
  animation: pulse 0.3s ease-in-out;
}

/* Scrollbar styling */
.conversation::-webkit-scrollbar {
  width: 6px;
  border-radius: 3px;
}

.conversation::-webkit-scrollbar-track {
  background: #2b2b2b;
  border-radius: 3px;
}

.conversation::-webkit-scrollbar-thumb {
  background: #111;
  border-radius: 3px;
}

.voice.recording {
  position: relative;
}

.voice.recording .mic {
  display: none;
}

.voice.recording::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.voice.recording::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Audio wave bars */
.voice.recording .wave-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 60%;
  width: 80%;
}

.voice.recording .bar {
  width: 3px;
  background: #fff;
  border-radius: 2px;
  height: 30%;
  animation: sound-wave 1s infinite ease-in-out alternate;
}

.voice.recording .bar:nth-child(1) { animation-delay: 0.0s; }
.voice.recording .bar:nth-child(2) { animation-delay: 0.4s; }
.voice.recording .bar:nth-child(3) { animation-delay: 0.1s; }
.voice.recording .bar:nth-child(4) { animation-delay: 0.3s; }
.voice.recording .bar:nth-child(5) { animation-delay: 0.7s; }

@keyframes sound-wave {
  0% {
    height: 10%;
  }
  100% {
    height: 80%;
  }
}

/* Media Queries */
@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 10px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 993px) {
  .container {
    max-width: 1200px;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideFromRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideFromLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}