/* Elo cv-assistent widget — globaal geladen (base.html). Bouwt op main.css-tokens. */

.elo { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; }

.elo__launcher {
  width: 3.25rem; height: 3.25rem; border-radius: 9999px; border: none;
  background: var(--kleur-link); color: #fff; font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--shadow-card-hover);
}

.elo__panel {
  position: absolute; right: 0; bottom: 4rem; width: min(22rem, 90vw);
  background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Respecteer het hidden-attribuut. Zonder deze regel wint `display: flex` van
   de browserstijl [hidden]{display:none}, waardoor het paneel altijd open staat
   én de sluitknop (die hidden=true zet) geen zichtbaar effect heeft. Hogere
   specificiteit (.class[attr]) dan de basisregel → wint wanneer hidden aan staat. */
.elo__panel[hidden] { display: none; }

.elo__kop {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .9rem; background: var(--kleur-link); color: #fff;
}
.elo__naam { font-weight: 600; font-size: .95rem; }
.elo__sluit { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; }

.elo__berichten {
  padding: .75rem; display: flex; flex-direction: column; gap: .5rem;
  max-height: 22rem; overflow-y: auto;
}
.elo__bericht { padding: .5rem .7rem; border-radius: .75rem; font-size: .9rem; max-width: 85%; }
.elo__bericht--bot { background: var(--achtergrond-subtiel); align-self: flex-start; }
.elo__bericht--user { background: var(--kleur-primair-licht); align-self: flex-end; }

.elo__form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--border-standaard); }
.elo__input { flex: 1; padding: .5rem .6rem; border: 1px solid var(--border-standaard); border-radius: var(--radius-knop); font: inherit; }
.elo__verzend { border: none; background: var(--kleur-primair); color: #fff; border-radius: var(--radius-knop); padding: 0 .8rem; cursor: pointer; }
.elo__disclaimer { font-size: .7rem; color: var(--tekst-meta); padding: 0 .6rem .6rem; margin: 0; }