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

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(160deg, #1a1f35 0%, #232946 100%);
  height: 100vh;
  overflow: hidden;
  color: #e8e8f0;
}

.scena {
  display: flex;
  height: 100vh;
  gap: 16px;
  padding: 16px;
}

/* ─── Panoul stânga: profesor + chat ─── */
.panou-stanga {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 380px;
}

.zona-profesor {
  background: linear-gradient(180deg, #2b3252 0%, #232946 100%);
  border-radius: 20px;
  padding: 10px 10px 6px;
  text-align: center;
  border: 1px solid #3d4470;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

#avatar-container { display: flex; justify-content: center; }
#avatar-container svg { width: 230px; height: 230px; }

.nume-profesor {
  font-weight: 700;
  font-size: 1.05rem;
  padding-bottom: 6px;
  color: #ffd166;
}
.alegere-model {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 10px;
  font-size: .82rem;
  color: #b8bdd8;
}
.alegere-model select {
  background: #232946;
  color: #e8e8f0;
  border: 1px solid #3d4470;
  border-radius: 8px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  outline: none;
}
.alegere-model select:focus { border-color: #4a6fd6; }

/* câmpul liber pentru „Altă materie…" */
#materie-custom {
  background: #232946;
  color: #e8e8f0;
  border: 1px solid #3d4470;
  border-radius: 8px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  width: 170px;
}
#materie-custom:focus { border-color: #4a6fd6; }
#materie-custom.ascuns { display: none; }

/* elevii prezenți „în clasă" — apare sus, doar când mai e cineva */
.prezenta {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #232946;
  color: #ffd166;
  border: 1px solid #3d4470;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .8rem;
  z-index: 60;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.prezenta.ascuns { display: none; }

#btn-lectie-noua {
  background: #232946;
  color: #e8e8f0;
  border: 1px solid #3d4470;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: .85rem;
}
#btn-lectie-noua:hover { border-color: #4a6fd6; }

.statut { color: #4caf50; font-size: .8rem; }
.statut.vorbeste { color: #ffd166; animation: pulse 1s infinite; }
.statut.gandeste { color: #64b5f6; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.zona-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #2b3252;
  border-radius: 20px;
  border: 1px solid #3d4470;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

.mesaje {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mesaj { display: flex; }
.mesaj.elev { justify-content: flex-end; }

.balon {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.45;
  font-size: .95rem;
  white-space: pre-wrap;
}
.mesaj.profesor .balon {
  background: #384068;
  border-bottom-left-radius: 4px;
}
.mesaj.elev .balon {
  background: #4a6fd6;
  border-bottom-right-radius: 4px;
}
.poza-mesaj {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 6px;
}

.bara-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #232946;
  border-top: 1px solid #3d4470;
}

#input-mesaj {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid #3d4470;
  background: #2b3252;
  color: #e8e8f0;
  font-family: inherit;
  font-size: .95rem;
  outline: none;
}
#input-mesaj:focus { border-color: #4a6fd6; }

.bara-input button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  background: #384068;
  color: #fff;
  transition: transform .1s, background .2s;
}
.bara-input button:hover { transform: scale(1.08); background: #4a6fd6; }
#btn-trimite { background: #4a6fd6; }
#btn-mic.asculta { background: #e63946; animation: pulse 1s infinite; }
#btn-auto { font-size: .62rem; font-weight: 800; letter-spacing: .5px; }
#btn-auto.activ { background: #2a9d54; box-shadow: 0 0 10px rgba(42,157,84,.6); }
#btn-sunet.oprit { opacity: .45; }

/* ─── Panoul dreapta: tabla ─── */
.panou-tabla {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.rama-tabla {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #8b5e34;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.15);
}

.tabla {
  flex: 1;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.045), transparent 55%),
    linear-gradient(170deg, #2f5d3f 0%, #274d34 60%, #223f2c 100%);
  border-radius: 8px;
  border: 3px solid #5c3d1e;
  padding: 26px 30px;
  overflow-y: auto;
  position: relative;
  box-shadow: inset 0 0 60px rgba(0,0,0,.35);
}

.tabla-gol {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255,255,255,.35);
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
}
.tabla-gol small { font-size: 1.1rem; }

.item-tabla {
  color: #f5f5ef;
  margin-bottom: 18px;
  opacity: 0;
  animation: scriere .8s ease forwards;
  text-shadow: 0 0 6px rgba(255,255,255,.15);
}
@keyframes scriere {
  from { opacity: 0; transform: translateY(6px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: translateY(0);  clip-path: inset(0 0 0 0); }
}

.item-tabla.titlu {
  font-family: 'Caveat', cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffd166;
  text-align: center;
  border-bottom: 2px solid rgba(255,209,102,.4);
  padding-bottom: 6px;
  margin-bottom: 22px;
}

.item-tabla.text {
  font-family: 'Caveat', cursive;
  font-size: 1.55rem;
  line-height: 1.4;
}
.item-tabla.text::before { content: '• '; color: #ffd166; }

.item-tabla.formula {
  text-align: center;
  font-size: 1.5rem;
  padding: 8px 0;
}

.item-tabla.desen {
  text-align: center;
  padding: 6px 0;
  animation-duration: 1.4s; /* desenele „se schițează" mai lent */
}

.item-tabla.grafic,
.item-tabla.molecula {
  text-align: center;
  padding: 6px 0;
  animation-duration: 1.4s;
}
.item-tabla.grafic svg text { font-family: 'Nunito', sans-serif; }
.eticheta-molecula {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: #ffd166;
  margin-top: 4px;
}
.item-tabla.formula .katex { color: #fff; }

.suport-tabla {
  display: flex;
  gap: 12px;
  padding: 10px 20px 2px;
  align-items: center;
}
.creta { width: 42px; height: 9px; border-radius: 4px; display: inline-block; }
.creta-alba { background: #f0f0e8; }
.creta-galbena { background: #ffd166; }
.btn-tabla {
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  background: rgba(0,0,0,.28);
  color: #f0e6d8;
  transition: background .2s;
}
.btn-tabla:hover { background: rgba(0,0,0,.45); }
.btn-tabla:first-of-type { margin-left: auto; }
.burete-btn { background: linear-gradient(#4a4a4a, #333); }

/* ─── Quiz pe tablă ─── */
.item-tabla.quiz {
  border: 2px dashed rgba(255,209,102,.5);
  border-radius: 12px;
  padding: 14px 18px;
}
.quiz-intrebare {
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: #ffd166;
  margin-bottom: 10px;
}
.quiz-varianta {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(245,245,239,.45);
  border-radius: 10px;
  color: #f5f5ef;
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.quiz-varianta:hover { background: rgba(255,255,255,.14); border-color: #ffd166; }
.item-tabla.quiz.rezolvat .quiz-varianta { cursor: default; opacity: .75; }
.quiz-varianta.corect  { border-color: #7dde8b; color: #7dde8b; background: rgba(125,222,139,.12); opacity: 1 !important; }
.quiz-varianta.gresit  { border-color: #ff8a8a; color: #ff8a8a; background: rgba(255,138,138,.12); opacity: 1 !important; }

/* ─── Ecranul de parolă ─── */
.ecran-parola {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 24, 45, .92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecran-parola.ascuns { display: none; }

.cutie-parola {
  background: #2b3252;
  border: 1px solid #3d4470;
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0,0,0,.5);
}
.titlu-parola { font-size: 1.5rem; font-weight: 800; color: #ffd166; margin-bottom: 10px; }
.cutie-parola p { margin-bottom: 14px; color: #b8bdd8; }
.cutie-parola input {
  display: block;
  width: 240px;
  margin: 0 auto 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #3d4470;
  background: #232946;
  color: #e8e8f0;
  font-size: 1rem;
  text-align: center;
  outline: none;
}
.cutie-parola input:focus { border-color: #4a6fd6; }
.cutie-parola button {
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #4a6fd6;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.cutie-parola button:hover { background: #5b7fe0; }
.eroare-parola { color: #ff8a8a; margin-top: 12px; min-height: 1.2em; font-size: .9rem; }

/* ─── Rândul limbă + materie + cont de elev ─── */
.alegere-model.rand-optiuni { padding-top: 0; }
#btn-elev {
  background: #232946;
  color: #e8e8f0;
  border: 1px solid #3d4470;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#btn-elev:hover { border-color: #4a6fd6; }
#btn-elev.conectat { border-color: #2a9d54; color: #a6e3b8; }

/* ─── Contul de elev + lecțiile salvate ─── */
.cutie-elev {
  position: relative;
  width: min(500px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 30px 32px 26px;
}
#elev-autentificare.ascuns, #elev-cont.ascuns { display: none; }
.cutie-parola .btn-inchide {
  position: absolute;
  top: 10px; right: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: transparent;
  color: #8a93b8;
  font-size: .95rem;
}
.cutie-parola .btn-inchide:hover { background: rgba(255,255,255,.1); color: #fff; }
.taburi-elev { display: flex; gap: 8px; justify-content: center; margin: 4px 0 16px; }
.cutie-parola .taburi-elev button {
  background: #232946;
  border: 1px solid #3d4470;
  border-radius: 999px;
  color: #b8bdd8;
  padding: 7px 18px;
  font-size: .9rem;
  font-weight: 700;
}
.cutie-parola .taburi-elev button.activ { background: #4a6fd6; border-color: #4a6fd6; color: #fff; }
.nota-elev { color: #8a93b8; font-size: .82rem; margin-top: 14px; line-height: 1.45; }
.lista-lectii {
  text-align: left;
  margin: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lectie-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #232946;
  border: 1px solid #3d4470;
  border-radius: 12px;
  padding: 10px 12px;
}
.lectie-item.curenta { border-color: #4a6fd6; }
.lectie-info { min-width: 0; }
.lectie-info b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lectie-info small { color: #8a93b8; font-size: .75rem; }
.lectie-actiuni { display: flex; gap: 6px; flex-shrink: 0; }
.cutie-parola .lectie-actiuni button {
  background: #384068;
  border-radius: 8px;
  color: #e8e8f0;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 700;
}
.cutie-parola .lectie-actiuni button:hover { background: #4a6fd6; }
.cutie-parola .lectie-actiuni button.sterge:hover { background: #b3364a; }
.cutie-parola .btn-iesire {
  background: #232946;
  border: 1px solid #3d4470;
  color: #b8bdd8;
  font-size: .85rem;
  padding: 9px 20px;
}
.cutie-parola .btn-iesire:hover { background: #2f3a5f; }

/* ─── Fișa de temă pe tablă ─── */
.item-tabla.tema {
  border: 2px dashed rgba(125,222,139,.55);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: left;
}
.tema-titlu {
  font-family: 'Caveat', cursive;
  font-size: 1.65rem;
  color: #7dde8b;
  margin-bottom: 8px;
}
.tema-ex {
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  margin: 6px 0;
  line-height: 1.35;
}
.btn-descarca-tema {
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  background: #2a9d54;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
.btn-descarca-tema:hover { background: #35b563; }
.btn-descarca-tema:disabled { opacity: .6; cursor: wait; }

/* ─── Memoria profesorului, în contul elevului ─── */
.memoria-cutie {
  text-align: left;
  background: #232946;
  border: 1px solid #3d4470;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0 4px;
}
.memoria-cutie.ascuns { display: none; }
.memoria-titlu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: #b8bdd8;
}
.cutie-parola .memoria-titlu button {
  background: transparent;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: .85rem;
  color: #8a93b8;
}
.cutie-parola .memoria-titlu button:hover { background: rgba(255,138,138,.15); color: #ff8a8a; }
#memoria-text { color: #8f99c0; font-size: .8rem; line-height: 1.45; margin-top: 6px; }

/* elementele de tablă refăcute dintr-o lecție salvată: fără animație, quiz inert */
.item-tabla.restaurata { animation: none; opacity: 1; }
.item-tabla.restaurata .quiz-varianta { cursor: default; }

/* ─── Avatar: animații gesturi ─── */
#avatar-container .ochi { animation: clipire 4.5s infinite; transform-origin: center; }
@keyframes clipire {
  0%, 94%, 100% { transform: scaleY(1); }
  96%, 98% { transform: scaleY(.08); }
}

#avatar-container .brat-dreapta { transform-origin: 158px 128px; transition: transform .5s ease; }
#avatar-container.gest-arata .brat-dreapta { transform: rotate(-105deg); }

#avatar-container .cap-grup { transform-origin: 100px 90px; transition: transform .4s ease; }
#avatar-container.gest-ganditor .cap-grup { transform: rotate(-6deg); }
#avatar-container.gest-ganditor .spranceana-s { transform: translateY(-3px); }

#avatar-container.gest-incurajator svg { animation: topaie .5s ease 2; }
@keyframes topaie { 50% { transform: translateY(-8px); } }

#avatar-container .brat-stanga { transform-origin: 42px 128px; transition: transform .4s ease; }
#avatar-container.gest-salut .brat-stanga { animation: flutura 1.2s ease; }
@keyframes flutura {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(150deg); }
  45% { transform: rotate(130deg); }
  65% { transform: rotate(150deg); }
}

.spranceana-s, .spranceana-d { transition: transform .3s; }

@media (max-width: 900px) {
  .scena { flex-direction: column; overflow-y: auto; }
  body { overflow-y: auto; }
  .panou-stanga { min-width: unset; flex: unset; }
  .panou-tabla { min-height: 420px; }
}