* { box-sizing: border-box; }
:root { --bedrijfskleur: #1d4ed8; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f5f4; color: #1c1917; }
main { max-width: 720px; margin: 0 auto; padding: 1rem; }

/* Kopbalk (chatpagina) */
.kopbalk { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  background: #fff; border-bottom: 3px solid var(--bedrijfskleur);
  border-radius: 8px 8px 0 0; }
.kopbalk .logo { width: 36px; height: 36px; object-fit: contain; }
.kopbalk .uitloggen { margin-left: auto; margin-top: 0; float: none; }
.kop-naam { margin: 0; font-weight: 600; }
.kop-sub { margin: 0; font-size: .8rem; color: #57534e; }

/* Login */
.login-kaart { max-width: 360px; margin: 3rem auto 0; text-align: center;
  background: #fff; border-radius: 12px; padding: 2rem 1.5rem;
  border: 1px solid #e7e5e4; }
.login-kaart h1 { margin: .5rem 0 0; font-size: 1.25rem; }
.login-kaart .kop-sub { margin-bottom: 1rem; }
.logo-groot { max-width: 120px; max-height: 72px; object-fit: contain; }

/* Homepage */
.beheerknop { float: right; display: inline-block; padding: .5rem 1rem;
  border-radius: 8px; background: var(--bedrijfskleur); color: #fff;
  text-decoration: none; }
.bedrijvenoverzicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem; margin-top: 1.5rem; }
.bedrijf-tegel { display: flex; flex-direction: column; align-items: center;
  gap: .6rem; padding: 1.5rem 1rem; background: #fff; border: 1px solid #e7e5e4;
  border-radius: 12px; text-decoration: none; color: #1c1917; font-weight: 600;
  text-align: center; transition: border-color .15s; }
.bedrijf-tegel:hover { border-color: var(--bedrijfskleur); }
.tegel-logo { max-width: 96px; max-height: 56px; object-fit: contain; }

/* Gesprek */
#gesprek { display: flex; flex-direction: column; gap: .6rem; min-height: 50vh;
  max-height: 65vh; overflow-y: auto; padding: 1rem; background: #fff; }
.bericht { padding: .6rem .9rem; max-width: 85%; line-height: 1.5;
  overflow-wrap: break-word; }
.bericht.user { align-self: flex-end; background: var(--bedrijfskleur);
  color: #fff; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.bericht.assistant { align-self: flex-start; background: #fafaf9;
  border: 1px solid #e7e5e4; border-radius: 14px 14px 14px 4px; }
.bericht.assistant p { margin: .35rem 0; }
.bericht.assistant .kopje { font-weight: 600; }
.bericht.assistant ul, .bericht.assistant ol { margin: .35rem 0 .35rem 1.25rem; padding: 0; }

/* Typindicator */
.typend { display: flex; align-items: center; gap: .3rem; }
.bolletje { width: 7px; height: 7px; border-radius: 50%; background: #a8a29e;
  animation: deinen 1s infinite; }
.bolletje:nth-child(2) { animation-delay: .2s; }
.bolletje:nth-child(3) { animation-delay: .4s; }
@keyframes deinen { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Invoer */
form { display: flex; gap: .5rem; margin-top: .75rem; }
textarea, input, select { flex: 1; padding: .6rem; border: 1px solid #cbd5e1;
  border-radius: 8px; font: inherit; min-height: 44px; }
button { padding: .6rem 1.1rem; border: 0; border-radius: 8px;
  background: var(--bedrijfskleur); color: #fff; cursor: pointer; min-height: 44px; }
.fout { color: #b91c1c; }

/* Beheer */
.uitloggen { float: right; }
.uitloggen button { background: transparent; color: #57534e;
  border: 1px solid #cbd5e1; padding: .3rem .7rem; min-height: auto;
  font-size: .85rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #e2e8f0; }
form.kolom { display: flex; flex-direction: column; gap: .6rem; max-width: 420px; }
form.kolom label { display: flex; flex-direction: column; gap: .2rem; }
small { color: #57534e; }

/* Mobiel: chatpagina vult het scherm */
@media (max-width: 600px) {
  body.chatpagina main { display: flex; flex-direction: column;
    height: 100dvh; padding: 0; max-width: none; }
  body.chatpagina .kopbalk { border-radius: 0; }
  body.chatpagina #gesprek { flex: 1; max-height: none; min-height: 0; }
  body.chatpagina form { margin: 0; padding: .5rem; background: #fff;
    border-top: 1px solid #e7e5e4; }
}