/* ========= ALGEMENE BASIS ========= */
html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #FAFAFA; /* licht neutraal */
  color: #000;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
}

footer {
  margin-top: auto;
  width: 100%;
  background: #0077CC;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

/* ========= COOKIE BANNER ========= */
.cookie-banner.hidden { display: none; }

.cookie-banner {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  background: #FF8800;
  color: #fff;
  padding: 15px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}

.cookie-banner a {
  color: #2ECC71;
  text-decoration: underline;
}

.cookie-banner button {
  background: #2ECC71;
  color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}

/* ========= USER MENU ========= */
.user-menu { position: absolute; top: 10px; right: 10px; }
.dropdown { 
  display: flex; 
  flex-direction: column; 
  background: #fff; 
  border: 2px solid #0077CC; 
  padding: 10px; 
  border-radius: 8px;
}
.hidden { display: none; }

/* ========= KAARTEN ========= */
.card {
  position: relative; 
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 80vh;
  overflow-y: auto;
}

/* ========= SELECTS & BUTTONS ========= */
select, button {
  width: 100%;
  margin-top: 1rem;
  padding: .75rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #0077CC;
}

button {
  background: #0077CC;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}

button:hover { background: #005FA3; }

/* ========= CHAT ========= */
.chat { display: flex; flex-direction: column; height: 60vh; }
.messages { flex:1; overflow-y:auto; padding:1rem; }
.message { 
  margin-bottom: .75rem; 
  padding: 0.75rem 1rem;
  border-radius: 16px;
  max-width: 75%;
}
.message.user { 
  margin-left: auto;
  background: #0077CC; 
  color: white;
}
.message.teacher {
  background: #E6F3FF;
  border-left: 4px solid #0077CC;
}
.message.character {
  background: #FFF5E6;
  border-left: 4px solid #FF8800;
}

/* ========= GRID CARDS ========= */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.char-card { 
  cursor:pointer; 
  border:2px solid #0077CC; 
  border-radius: 10px;
  padding:1rem; 
  text-align:center; 
  background:white; 
  transition: transform 0.2s, box-shadow 0.2s;
}
.char-card img { width:80%; border-radius:50%; margin-bottom: 10px; }
.char-card:hover { 
  transform: scale(1.03); 
  box-shadow:0 0 12px rgba(0,0,0,.15); 
}

/* ========= HIGHLIGHTS ========= */
.vocab {
  background: #d4edda;   /* lichtgroen */
  color: #155724;        /* donkergroen */
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;   /* pill-vorm */
}
.error-grammar { color: #FF8800; font-weight: bold; }
.error-spelling { text-decoration: underline 2px #0077CC; }
.error-subject { color: #2ECC71; }
.error-verb { color: #FF3333; font-weight: bold; }
.error-info { color: #0077CC; }

/* ========= LIMIET BERICHT ========= */
.limit-message {
  background: #FFF5E6;
  border: 2px solid #FF8800;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
}
.upgrade-btn {
  margin-top: 8px;
  padding: 8px 16px;
  background: #FF8800;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}
.upgrade-btn:hover { background: #CC6E00; }

/* Vorige-knop: alleen icoon, zwevend in chat-card */
.prev-btn {
  position: absolute;     /* zwevend */
  top: 10px;              /* afstand van bovenrand van de card */
  left: 10px;             /* afstand van linkerrand van de card */
  background: transparent; 
  border: none;
  font-size: 18px;        /* grootte icoontje ⬅️ */
  color: #555;            /* neutraal donkergrijs */
  cursor: pointer;
  padding: 0;
  line-height: 1;
}



/* ========= DARK MODE ========= */
body.dark-mode {
  background: #1A1A1A;
  color: #fff;
}
body.dark-mode .card { background: #1A1A1A; color: #fff; }
body.dark-mode .dropdown { background: #1A1A1A; border: 2px solid #3399FF; }
body.dark-mode button { background: #3399FF; }
body.dark-mode button:hover { background: #00CCFF; }
body.dark-mode .message.user { background: #3399FF; }
body.dark-mode .message.teacher { background: #1A2A3A; border-left: 4px solid #3399FF; }
body.dark-mode .message.character { background: #332214; border-left: 4px solid #FF9900; }