/* Сброс */
* { box-sizing: border-box; margin:0; padding:0; }
html, body {
  width:100%; height:100%;
  font-family:Arial,sans-serif;
  background:#f5f5f5; overflow:hidden;
}

/* Root */
#root { display:flex; flex-direction:column; height:100%; width:100%; }

/* Header */
.chat-header {
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  background:#1976d2; color:#fff; padding:8px;
}
.chat-header select {
  margin:4px; padding:4px 8px;
  border:none; border-radius:4px;
  font-size:0.9rem;
}
.chat-header .title {
  flex:1 1 auto; text-align:center;
  font-size:1.2rem; margin:4px;
}
/* Статусные точки */
.status-dot {
  display:inline-block; width:12px; height:12px;
  border-radius:50%; margin-left:4px;
}

/* Кнопка TTS */
.btn-tts {
  width:48px; height:48px;
  font-size:1.75rem; margin:0 8px;
  background:transparent; border:none;
  cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center;
}
.btn-tts:hover {
  background:rgba(255,255,255,0.2);
  border-radius:50%;
}

/* Окно чата */
.chat-window {
  flex:1 1 auto;
  padding:10px; padding-bottom:120px;
  overflow-y:auto;
}
.chat-message {
  max-width:70%; margin:8px 0;
  padding:8px 12px; border-radius:16px;
  line-height:1.4;
}
.chat-message.driver { background:#e1f5fe; margin-left:auto; }
.chat-message.client { background:#fff; margin-right:auto; }

/* Панель ввода */
.chat-input {
  position:fixed; left:0; right:0;
  bottom:env(safe-area-inset-bottom);
  display:flex; align-items:center;
  padding:8px; background:#fafafa;
  border-top:1px solid #ccc;
}
#txtMsg {
  flex:1 1 auto; padding:8px;
  border:1px solid #ccc; border-radius:20px;
  resize:none; font-size:1rem; margin-right:8px;
  min-height:2em;
}
#btnSend {
  width:56px; height:56px;
  background:#1976d2; color:#fff;
  border:none; border-radius:50%;
  font-size:1.5rem;
}
#btnSend:disabled { background:#90caf9; }

/* FAB-микрофон */
.fab-mic {
  position:fixed; right:16px;
  bottom:calc(60px + env(safe-area-inset-bottom) + 16px);
  width:56px; height:56px;
  background:#4caf50; color:#fff;
  border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
  cursor:pointer; z-index:100;
}
.fab-mic.disabled { background:#999; cursor:default; }

/* Модалка */
.modal {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
}
.modal.hidden { display:none; }
.modal-content {
  background:#fff; padding:20px;
  border-radius:8px; text-align:center;
  width:80%; max-width:320px;
}
.modal-content button { margin:8px; padding:8px 16px; }
/* 1. Убираем отступы у html/body и растягиваем на 100% */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 2. Контейнер #root – flex-контейнер, растягиваем на весь экран */
#root {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 3. Заголовок и поле ввода – фиксированной высоты (не растягиваются) */
.chat-header {
  flex: none;
}
.chat-input {
  flex: none;
}

/* 4. Окно чата – должно занимать всё свободное пространство */
.chat-window {
  flex: 1 !important;
  overflow-y: auto !important;
  background: #ffffff; /* фон на ваше усмотрение */
}

/* 5. Сообщения внутри окна чата */
.chat-message {
  margin: 0.25rem 0;
  padding: 0.5rem;
  border-radius: 8px;
}

/* 6. Кнопка микрофона */
.fab-mic {
  user-select: none;
}