@font-face {
  font-family: "MyAI";
  src: url("pamiri.woff") format("woff"); /* Добавили точку и слэш */
  font-weight: normal;
  font-style: normal;
}

/* Применяем к кнопкам клавиатуры, полю ввода и сообщениям */
.kb-btn,
#userInput,
#messages {
  font-family: "MyAI", sans-serif !important;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

/* Настройка кнопок, чтобы они были крупными и четкими */
#native-keyboard {
  display: grid;
  /* Делаем 10 колонок, чтобы кнопки не уезжали вправо */
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  padding: 10px;
  background: #1e293b;
}

.kb-btn {
  background: #334155;
  color: white;
  border: 1px solid #475569;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  font-family: "MyAI", sans-serif !important; /* Твой шрифт */
  text-align: center;
}

.kb-btn:hover {
  background: #475569;
}

/* Стиль для активного Шифта */
.kb-btn.active {
  background: #3b82f6;
}

/* Кнопка Shift и Backspace на всю ширину ячеек */
.kb-btn.special {
  grid-column: span 2;
  background: #0f172a;
}
body {
  background: #0f172a;
  color: white;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
#chat {
  width: 420px;
  height: 550px;
  background: #1e293b;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #334155;
}
#messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#input-area {
  padding: 15px;
  background: #1e293b;
  display: flex;
  gap: 8px;
}
input {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #0f172a;
  color: white;
}
button {
  padding: 10px 20px;
  background: #06b6d4;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
.msg {
  padding: 10px;
  border-radius: 10px;
  max-width: 85%;
}
.u {
  background: #3b82f6;
  align-self: flex-end;
}
.a {
  background: #334155;
  align-self: flex-start;
}
/* Стили для нативной клавиатуры */