:root{
  --besave-blue: #009fe3;
  --besave-black: #111111;
}

body { color: var(--besave-black); }

.chat-log{
  height: 60vh;
  overflow: auto;
  background: #f6f7f9;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 12px;
}

.chat-row{ display:flex; margin: 10px 0; }
.chat-row.me{ justify-content:flex-end; }
.chat-row.bot{ justify-content:flex-start; }

.chat-bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  white-space: pre-wrap;
}

.chat-row.me .chat-bubble{
  background: var(--besave-black);
  color: #fff;
}

.chat-row.bot .chat-bubble{
  background: #fff;
  border: 1px solid #e7e7e7;
  color: var(--besave-black);
}

.chat-sources{ margin-left: 6px; }

/* --- Mobile Fullscreen Chat Layout --- */
html, body {
  height: 100%;
}

body {
  /* wichtig für "voller Bildschirm" + flex layout */
  min-height: 100dvh; /* modern */
  display: flex;
  flex-direction: column;
	
}

body.bg-light{
	background-color: var(--besave-blue)!important;
}

/* Navbar oben fix in normalem Flow, Rest füllt main */
.navbar {
  flex: 0 0 auto;
}

/* main soll den restlichen Platz einnehmen */
main.container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* wichtig, damit inneres Scrollen klappt */
}

/* Card soll ebenfalls wachsen */
main.container .row,
main.container .col-12,
main.container .card {
  height: 100%;
}

main.container .card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Chatbereich: als Spalte -> Log wächst, Composer bleibt unten */
#chatBox {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Der Verlauf ist der scrollbare Bereich */
#chatLog {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;

  /* etwas Luft, damit letzte Nachricht nicht unter dem Composer klebt */
  padding-bottom: 12px;
}

/* Composer unten "sticky" innerhalb des Chat-Containers */
#chatBox .input-group {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--bs-body-bg);
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Optional: auf sehr kleinen Screens Container seitlich etwas enger */
@media (max-width: 576px) {
  main.container {
    max-width: 100% !important;
  }
}

body {
  min-height: calc(var(--app-vh, 1vh) * 100);
}