/* docs/academy-chat/chat.css
   Morgen-huisstijl: donker glas, Barlow, paars als drager. Geel-groen zeer schaars:
   alleen op de advieskaart-titel. Verder geen felle accenten in de chat. */

.ac-chat {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-family: 'Barlow', system-ui, sans-serif;
}

.ac-chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ac-chat-log:empty {
  display: none;
}

/* ── Berichten ─────────────────────────────────────────── */

.ac-msg {
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  line-height: 1.6;
  font-size: 0.85rem;
  max-width: 80%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ac-msg-user {
  align-self: flex-end;
  background: rgba(155, 111, 207, 0.26);
  border: 1px solid rgba(180, 145, 230, 0.4);
  color: var(--text-primary, #f0ecf5);
  border-bottom-right-radius: 4px;
}

.ac-msg-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary, #f0ecf5);
  border-bottom-left-radius: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ac-typing {
  color: var(--text-secondary, #d8ccec);
  animation: ac-typing-pulse 1.2s ease-in-out infinite;
}

@keyframes ac-typing-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ── Startknoppen ──────────────────────────────────────── */

.ac-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ac-starter {
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary, #d8ccec);
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-starter:hover {
  border-color: rgba(155, 111, 207, 0.7);
  color: var(--white, #fff);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Invoer + verzenden ────────────────────────────────── */

/* Verstuurpijl staat in het invoerveld zelf (position: relative op de rij),
   zodat veld en knop één samenhangend element vormen in plaats van veld +
   losse knop ernaast. */
.ac-input-row {
  position: relative;
  display: flex;
}

.ac-input {
  flex: 1;
  min-width: 0;   /* anders houdt de intrinsieke breedte van een input de rij te breed */
  font-family: inherit;
  font-size: 0.76rem;
  padding: 0.38rem 2.2rem 0.38rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f0ecf5);
}

.ac-input::placeholder {
  color: var(--text-muted, #7a6b8e);
}

.ac-input:focus {
  outline: none;
  border-color: rgba(155, 111, 207, 0.7);
  box-shadow: 0 0 0 3px rgba(155, 111, 207, 0.18);
}

.ac-send {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary, #d8ccec);
  border: 0;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-send svg { display: block; }

.ac-send:hover:not(:disabled) {
  background: rgba(155, 111, 207, 0.25);
  color: var(--white, #fff);
}

.ac-send:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Touch: iOS zoomt de hele pagina in zodra een invoerveld met een tekstgrootte
   onder 16px focus krijgt. Het zichtbare venster wordt daardoor smaller dan de
   pagina zelf, en een paneel op 96vw (het Kompas) valt half van het scherm.
   16px houdt die zoom tegen; de ruimere padding maakt er meteen een fatsoenlijk
   tikdoel van. */
@media (hover: none) and (pointer: coarse) {
  .ac-input {
    font-size: 16px;
    padding: 0.6rem 2.6rem 0.6rem 0.9rem;
  }
  .ac-send {
    width: 2.1rem;
    height: 2.1rem;
    right: 0.35rem;
  }
}

/* ── Advieskaart ───────────────────────────────────────── */

.ac-card {
  align-self: stretch;
  background: rgba(155, 111, 207, 0.14);
  border: 1px solid rgba(180, 145, 230, 0.32);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ac-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.ac-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--accent, #d8fe56); /* het enige accent in de chat */
}

.ac-card-duration {
  flex: none;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #d8ccec);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.ac-case-link {
  color: var(--purple-light, #9b6fcf);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ac-case-link:hover {
  color: var(--white, #fff);
}

.ac-card-why {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  border-left: 2px solid var(--purple-light, #9b6fcf);
  background: rgba(155, 111, 207, 0.1);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary, #f0ecf5);
}

.ac-card-bullets {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ac-card-bullets li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary, #f0ecf5);
}

.ac-card-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-light, #9b6fcf);
}

/* ── Knoppen (kaart + fallback) ────────────────────────── */

.ac-card-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ac-btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.76rem;
  padding: 0.38rem 0.8rem;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-btn-primary {
  background: var(--purple, #5b2d8e);
  color: #fff;
  border-color: rgba(180, 145, 230, 0.5);
}

.ac-btn-primary:hover {
  background: #6c3aa6;
}

.ac-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, #d8ccec);
  border-color: rgba(255, 255, 255, 0.16);
}

.ac-btn-secondary:hover {
  color: var(--white, #fff);
  border-color: rgba(255, 255, 255, 0.32);
}

.ac-card-handoff {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted, #7a6b8e);
}

/* ── Vervolgstappen ────────────────────────────────────── */

.ac-followups {
  margin-top: 1rem;
}

.ac-followups-intro {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted, #7a6b8e);
}

.ac-followups-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ac-followup {
  flex: 1 1 180px;
  min-width: 180px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-followup:hover,
.ac-followup:focus-visible {
  border-color: rgba(180, 145, 230, 0.5);
  outline: none;
}

.ac-followup-title {
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary, #f0ecf5);
}

.ac-followup-desc {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted, #7a6b8e);
}

/* ── Fallback ──────────────────────────────────────────── */

.ac-fallback {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  line-height: 1.6;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #d8ccec);
}

.ac-fallback .ac-card-cta {
  margin-top: 1rem;
}

/* ── Neutraliseer de oude wizard-container binnen het nieuwe panel ──
   De chat is geen wizard: geen 60vh-stage, geen dubbele donkere bg/blobs. */
.ac-route-panel .trainingwijzer-wrapper {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.ac-route-panel .trainingwijzer-wrapper::before {
  display: none;
}
.ac-route-panel .trainingwijzer-wrapper #trainingwijzer-app {
  min-height: 0;
  display: block;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ac-typing {
    animation: none;
  }
}