/* ====== Базовые стили ====== */
body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  background-color: #f9f9fb;
  color: #333;
  margin: 0;
  padding: 0;
}

/* ====== Навигация ====== */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background: linear-gradient(90deg, #2eb165, #04aa6d);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

li {
  border-right: 1px solid rgba(255,255,255,0.3);
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s, transform 0.2s;
}

li a:hover,
li a:focus {
  background-color: rgba(255,255,255,0.15);
  transform: scale(1.05);
}

li a.active {
  background-color: #04aa6d;
  font-weight: bold;
}

/* ====== Чат контейнер ====== */
#chatContainer {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
}

/* ====== Сообщения ====== */
.message {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.4;
  animation: fadeIn 0.3s ease-in;
}

.message.user {
  background-color: #e1ffc7;
  align-self: flex-end;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.message.bot {
  background-color: #f1f1f1;
  align-self: flex-start;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====== Поле ввода ====== */
.input-group { 
  display: flex; 
  align-items: center; 
  border: 1px solid #ddd; 
  border-radius: 25px; 
  overflow: hidden; /* чтобы углы были общими */ 
  background-color: #fff; 
}

#textbox { 
  flex: 1; 
  border: none; 
  padding: 12px 15px; 
  font-size: 20.5px; 
  outline: none; 
}

#textbox:focus { 
  border-color: #3b82f6; /* мягкий синий */ 
  box-shadow: inset 0 0 6px rgba(59,130,246,0.4); /* лёгкая подсветка */ 
}

.input-group button {
  border: none; 
  color: #fff; 
  padding: 0 15px; 
  cursor: pointer; 
  transition: background-color 0.3s, transform 0.2s; 
} 

.input-group button:hover {  
  transform: scale(1.05); 
}

.send-btn { 
  width: 45px; 
  height: 45px; 
  background-color: #024b93; 
  background-repeat: no-repeat; 
  background-position: center; 
  background-size: 22px 22px; 
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s; 
  border: none; 
} 

.send-btn:hover { 
  background-color: #04aa6d; 
  transform: scale(1.1); 
}

.icon-mic {
  background-image: url("../img/microphone-icon.png");
}

.icon-send {
  background-image: url("../img/send-icon.png");
}

.recording { 
  background-color: #e63946 !important; 
  box-shadow: 0 0 10px rgba(230,57,70,0.6); 
}

/* ====== Role-buttons ====== */
.role-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#resetGroupBtn {
  background-color: #F53526;
}

#resetGroupBtn:hover {
  background-color: #CC0000;
}

/* ====== Submenu ====== */
.submenu {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.submenu button {
  flex: 1 1 120px;
  padding: 8px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.submenu button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

/* ====== Модальные окна ====== */
.modal-content {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.modal-header {
  border-bottom: none;
}

.modal-footer {
  border-top: none;
}

/* ====== Адаптивность ====== */
@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }

  li a { 
    padding: 12px; 
    text-align: left; 
  }

  li {
    border-right: none;
    border-bottom: 1px solid #555;
  }

  .role-buttons button,
  .submenu button {
    flex: 1 1 100%;
  }
  
  .input-group { 
    flex-direction: column; 
    border-radius: 15px; 
  } 
  
  #textbox { 
    width: 100%; 
    border-radius: 15px; 
    margin-bottom: 8px; 
  } 
  
  .input-group button { 
    width: 100%; 
    border-radius: 15px; 
  }

  button {
    min-height: 45px;
    font-size: 16px;
  }
}

#chatContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#chatContainer {
  overflow-y: auto;
}