@charset "UTF-8";
body {
  font-family: Arial, sans-serif;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chatbox {
  width: 90%;
  height: 50vh;
  overflow-y: auto;
  border: 0px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

#send {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: blue;
  color: white;
  font-size: 18px;
}

.input {
  background: whitesmoke;
  border-radius: 30px;
  padding: 5px 15px;
  display: flex;
  flex-direction: row;
}
.input #userInput {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-size: 18px;
  background: transparent;
}
.input #userInput:focus-visible {
  outline: -webkit-focus-ring-color 0px;
}
.input button {
  width: 50px;
  height: auto;
  border: none;
  background: transparent;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input button svg {
  width: 24px;
  height: auto;
}
.input button:hover {
  background: gray;
}
.input button:hover svg {
  color: white;
}

::-webkit-scrollbar {
  width: 10px; /* Šířka scrollbar pro vertikální scroll */
  height: 8px; /* Výška scrollbar pro horizontální scroll */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* Barva "tahu" scrollbar */
  border-radius: 10px; /* Zaoblení rohů scrollbar */
  border: 0px solid #ddd; /* Okraje kolem "tahu" scrollbar */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Ztmavení při najetí myší */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Barva pozadí */
  border-radius: 10px;
}

/* Vytvoření plynulého scrollování */
html {
  scroll-behavior: smooth;
}

h1 {
  font-size: 24px;
}

.scrollable-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.bubble {
  padding: 15px;
  border-radius: 10px;
  line-height: 140%;
  font-size: 16px;
}

.bubble-user {
  background: whitesmoke;
}

.bubble-bot {
  background: #e1efff;
}

.btn-preset {
  background: white;
  color: black;
  border: 1px solid silver;
  border-radius: 20px;
  padding: 7px 15px;
  font-size: 17px;
}

.btn-preset:hover {
  background: silver;
  cursor: pointer;
}

.footer {
  width: 100%;
  color: gray;
  font-size: 15px;
  text-align: center;
  padding: 20px 0 0 0;
}

/*# sourceMappingURL=style.css.map */