body, input, button, h1 {
  font-family: 'Work Sans', sans-serif;
}

/* Algemene reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* pagina: gecentreerde kolom met max-breedte */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 50vw;
  margin: 0 auto;     /* <— centreert horizontaal */
  padding: 1rem;      /* binnenmarges */
}

/* Titel */
h1 {
  text-align: center;
  margin-bottom: 1rem;
}

/* Chatbox */
.chat-log {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f9f9f9;
  overflow-y: auto;
  margin-bottom: .75rem;
  flex: 1 1 auto;                 /* neemt alle beschikbare hoogte */
  min-height: 0;
  overscroll-behavior: contain;   /* geen rubberband naar body */
  /* scroll-behavior hier uitzetten voorkomt conflicten met JS autoscroll */
  scroll-behavior: auto;
}

/* Wrapper onder de chat */
.input-container { 
  position: sticky;   /* blijft onder in beeld */
  bottom: 0;
  background: #fff;
  padding-top: .25rem;
  width:100%;
  display: block;
}

/* Composer-rij met FLEX (betrouwbaar naast knop in alle browsers) */
#composer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Invoerveld groeit ALTIJD maximaal mee */
#composer #user-input {
  flex: 1 1 0%;            /* pak alle resterende ruimte */
  min-width: 0;            /* voorkom min-content knelling */
  height: 44px;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #aaa;
  font-size: 1rem;
}

/* Fallback: ook als #composer onverhoopt mist of er wrappers tussen zitten */
.input-container input#user-input {
  display: block;
  width: 100%;
  height: 44px;
}

/* nette focus */
#composer #user-input:focus {
  border-color: #4b8df8;
  box-shadow: 0 0 0 3px rgba(75,141,248,.15);
  outline: none;
}

/* Knop krimpt niet mee, houdt eigen breedte */
#composer #send-btn { flex: 0 0 auto; }

/* Verstuurknop */
button {
  height: 44px;
  padding: 0 1.2rem;
  border: none;
  border-radius: 6px;
  background-color: #0070f3;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background-color: #005ac1; }
button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* 📱 Responsieve layout */
@media (max-width: 600px) {
  #composer { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 0.5rem;
  }
  #composer #user-input { width: 100%; }
  #composer #send-btn { width: 100%; }
 }

.message {
  display: flex;
  margin-bottom: 10px;
  max-width: 100%;
}

.message.user {
  justify-content: flex-end;
}

.message.ai {
  justify-content: flex-start;
}

.bubble {
  padding: 0.75rem 1rem;
  border-radius: 1.2rem;
  max-width: 80%;
  word-wrap: break-word;
  /* voorkom overflow bij hele lange woorden/URL's */
  overflow-wrap: anywhere;
}
/* lange codeblokjes/quotes krijgen ook ademruimte */
.formatted-output pre {
  background: #f4f4f4;
  border-radius: 8px;
  padding: .75rem;
  overflow-x: auto;
}

.message.user .bubble {
  background-color: #0070f3;
  color: white;
  border-bottom-right-radius: 0;
}

.message.ai .bubble {
  background-color: #eee;
  color: #333;
  border-bottom-left-radius: 0;
}

.bubble.error {
  background-color: #ffe5e5;
  color: #900;
}

.bubble.typing {
  font-style: italic;
  color: #555;
  background-color: #f0f0f0;
  border-left: 4px solid #ccc;
}

@keyframes blinkDots {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}

.dots {
  display: inline-block;
  min-width: 1em;
}

.dots::after {
  content: '';
  animation: blinkDots 1s infinite steps(3, end);
}

.spinner {
  border: 3px solid #ffffff;
  border-top: 3px solid #0070f3;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ✅ Mooie opmaak voor Joop's antwoorden */
.formatted-output {
  line-height: 1.6;
  font-size: 1rem;
}

.formatted-output ul,
.formatted-output ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.formatted-output li {
  margin-bottom: 0.3rem;
}

.formatted-output code {
  font-family: monospace;
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 4px;
}

.formatted-output h1 {
  font-size: 1.5rem;
  margin: 1rem 0 0.5rem;
}

.formatted-output h2 {
  font-size: 1.3rem;
  margin: 1rem 0 0.5rem;
  color: #333;
}

@media (max-width: 900px) {
  .container { width: 90vw; }   /* bijna full-width op mobiel/tablet */
}