:root {
  --sand-beige: #f7f1cf;
  --light-coral: #a9908c;
  --muted-teal: #a5c1cc;
  --dark-teal: #f0d8ac;
  --white: #d8ae60;
  
  
  --side-menu-animation-duration: 1s;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--sand-beige);
  overflow-y: hidden;
}

#chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px;
}

#sidebar-toggle {
  position: absolute;
  left: 5px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
}

#chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
}

#chat-input {
  display: flex;
  gap: 10px;
  padding: 7px;
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px 10% 10px 10%; /* Отступы слева и справа 10% */
  transition: margin-left var(--side-menu-animation-duration), width var(--side-menu-animation-duration); /* Анимация сужения */
}


#chat-input.open {
  margin-left: calc(10% + 250px); /* Отступ от левого края + ширина меню */
  margin-right: 10% ; /* Отступ от левого края + ширина меню */
  /*max-width: calc(80% - 250px); /* Ограничиваем максимальную ширину */
  width: auto; /* Плавная адаптация */
  transition: margin var(--side-menu-animation-duration), width var(--side-menu-animation-duration); /* Анимация сужения */  
}

#message-input {
  flex-grow: 1;
  padding: 2px;
  border: none;
  border-radius: 5px;
  background-color: var(--sand-beige);
}
#send-button {
  padding: 10px 15px;
  background-color: var(--light-coral);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#message-input {
  flex-grow: 1;
  padding: 5px;
}

#send-button {
  padding: 5px 10px;
}

#sidebar {
  position: fixed;
  left: -290px;
  top: 0;
  width: 250px;
  height: 100%;
  background-color: var(--muted-teal);
  transition: left var(--side-menu-animation-duration); /* Анимация за 0.5 секунды */
  padding: 20px;
  opacity: 1; /* Используем opacity для контроля видимости */
}

#sidebar.open {
  left: 0;
}

#info-card, #resume-card {
  background-color: var(--sand-beige);
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
}
#chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  max-height: calc(100vh - 100px);
}
.message-card {
  padding: 10px;
  margin: 5px 0;
  background-color: var(--muted-teal);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
  width: 100%;
  word-wrap: break-word; /* Перенос текста */
  max-width: min(30%, 500px); /* Динамическая ширина */
  margin-left: auto;
  margin-right: auto;
}

.message-card.left {
  margin-left: 10px;
}
.message-card.right {
  margin-right: 10px;
  text-align: right;
}