/* ===========================================================
   Razred — vizualna identiteta: šolska tabla + zvezek papir.
   =========================================================== */

:root{
  --board: #1E3A2F;
  --board-dark: #16281F;
  --chalk: #F1EFE3;
  --paper: #F6F1E4;
  --paper-line: #E4DBC4;
  --ink: #26241C;
  --ink-soft: #5B5648;
  --pen-red: #B23A32;
  --chalk-yellow: #E8C468;
  --ink-blue: #2B4570;
  --radius: 10px;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", cursive;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- TABLA ---------- */

.board{
  position:relative;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.05), transparent 60%),
    var(--board);
  color:var(--chalk);
  padding:56px 24px 64px;
  overflow:hidden;
  border-bottom:10px solid var(--board-dark);
}

.board-inner{
  max-width:760px;
  margin:0 auto;
  text-align:left;
}

.board-eyebrow{
  font-family:var(--hand);
  font-size:1.4rem;
  color:var(--chalk-yellow);
  margin:0 0 4px;
  transform:rotate(-1.5deg);
}

.board-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.6rem, 7vw, 4.2rem);
  margin:0 0 14px;
  position:relative;
  display:inline-block;
}

.chalk-underline{
  position:absolute;
  left:0;
  right:-6%;
  bottom:-6px;
  height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='14'%3E%3Cpath d='M2 8 Q40 2 80 8 T160 8 T240 8 T300 6' stroke='%23E8C468' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size:220px 14px;
  opacity:.9;
}

.board-sub{
  font-size:1.08rem;
  line-height:1.55;
  max-width:56ch;
  color:rgba(241,239,227,0.86);
  margin:0;
}

.chalk-dust{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ---------- IZBIRNI PANEL ---------- */

.setup{
  flex:1;
  display:flex;
  justify-content:center;
  padding:40px 20px 64px;
}

.notebook-page{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  box-shadow:0 1px 0 #fff inset, 0 14px 30px -18px rgba(20,30,20,0.35);
  width:100%;
}

.setup-card{
  max-width:620px;
  padding:34px 32px 30px;
  display:flex;
  flex-direction:column;
  gap:18px;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 43px,
    var(--paper-line) 44px
  );
  background-position-y:90px;
}

.setup-step{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.setup-label{
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-soft);
  letter-spacing:.01em;
}

.select{
  font-family:var(--sans);
  font-size:1rem;
  padding:11px 12px;
  border-radius:7px;
  border:1.5px solid var(--paper-line);
  background:#fff;
  color:var(--ink);
}

.select:focus,
textarea:focus{
  outline:2px solid var(--ink-blue);
  outline-offset:1px;
}

.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:.96rem;
  padding:12px 20px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}

.btn:active{
  transform:translateY(1px);
}

.btn-primary{
  background:var(--board);
  color:var(--chalk);
}

.btn-primary:hover{
  background:var(--board-dark);
}

.btn-secondary{
  background:#fff;
  color:var(--ink);
  border:1.5px solid var(--paper-line);
}

.btn-secondary:hover{
  border-color:var(--ink-soft);
}

.btn-ghost{
  background:transparent;
  color:var(--ink-soft);
  padding-left:0;
}

.btn-ghost:hover{
  color:var(--ink);
}

.btn-start{
  margin-top:6px;
  align-self:flex-start;
}

/* ---------- UČILNICA ---------- */

.classroom{
  flex:1;
  display:grid;
  grid-template-columns:270px 1fr;
  min-height:0;
  align-items:start;
}

.sidebar{
  background:var(--board);
  color:var(--chalk);
  padding:22px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  border-right:6px solid var(--board-dark);

  position:sticky;
  top:0;
  height:100vh;
  max-height:100vh;
  overflow-y:auto;
  align-self:start;
}

.sidebar-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sidebar-kicker{
  font-size:.74rem;
  color:rgba(241,239,227,.6);
  margin:0;
  text-transform:none;
  letter-spacing:.02em;
}

.sidebar-subject{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:600;
  margin:0;
}

.sidebar-meta{
  font-size:.84rem;
  color:rgba(241,239,227,.75);
  margin:0;
}

.meter{
  height:8px;
  border-radius:6px;
  background:rgba(255,255,255,.14);
  overflow:hidden;
}

.meter-fill{
  height:100%;
  width:10%;
  background:var(--chalk-yellow);
  border-radius:6px;
  transition:width .4s ease;
}

.mode-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mode-btn{
  text-align:left;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--chalk);
  padding:9px 10px;
  border-radius:7px;
  font-family:var(--sans);
  font-size:.86rem;
  cursor:pointer;
}

.mode-btn:hover{
  background:rgba(255,255,255,.12);
}

.mode-btn.active{
  background:var(--chalk-yellow);
  color:var(--board-dark);
  border-color:transparent;
  font-weight:600;
}

.sidebar-actions{
  margin-top:0;
}

/* ---------- KLEPET ---------- */

.chat-wrap{
  display:flex;
  flex-direction:column;
  min-height:0;

  /*
   * Omogoči, da so vsebine klepeta pozicionirane glede
   * na celotno razpoložljivo širino učilnice.
   */
  position:relative;
}

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

/*
 * OSREDNJI STOLPEC
 *
 * AI odgovor je postavljen na sredino CELOTNEGA EKRANA,
 * ne na sredino prostora desno od levega menija.
 *
 * Ker je sidebar širok 270px, uporabimo transformacijo,
 * ki sredino vsebine premakne za polovico širine menija.
 */

.msg.ai{
  align-self:center;
  width:720px;
  max-width:calc(100vw - 32px);
  padding:13px 16px;
  border-radius:10px;
  line-height:1.6;
  font-size:.98rem;
  background:#fff;
  border:1px solid var(--paper-line);
  border-top-left-radius:2px;

  position:relative;
  left:-135px;
}

/* Tvoj odgovor */

.msg.user{
  align-self:flex-end;
  max-width:720px;
  padding:13px 16px;
  border-radius:10px;
  line-height:1.6;
  font-size:.98rem;
  background:var(--ink-blue);
  color:#fff;
  border-top-right-radius:2px;
}

/* Ostala sporočila */

.msg{
  padding:13px 16px;
  border-radius:10px;
  line-height:1.6;
  font-size:.98rem;
}

.msg p{
  margin:0 0 .6em;
}

.msg p:last-child{
  margin-bottom:0;
}

.msg.system-note{
  align-self:center;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--hand);
  font-size:1.15rem;
  padding:2px 6px;
}

.msg.ai.thinking{
  color:var(--ink-soft);
  font-style:italic;
}

/* ---------- VNOS SPOROČILA ---------- */

.composer{
  display:flex;
  gap:10px;

  /*
   * Širina ostane podobna širini AI odgovora.
   */
  width:720px;
  max-width:calc(100vw - 32px);

  /*
   * Centriranje glede na celoten ekran.
   */
  margin:0 auto;

  padding:14px 0 20px;
  border-top:1px solid var(--paper-line);
  background:var(--paper);

  position:relative;
  left:-135px;
}

.composer-input{
  flex:1;
  min-width:0;
  resize:none;
  font-family:var(--sans);
  font-size:1rem;
  padding:12px 14px;
  border-radius:9px;
  border:1.5px solid var(--paper-line);
  background:#fff;
  max-height:160px;
}

.composer-send,
.composer-dont-know{
  flex:0 0 auto;
  align-self:flex-end;
}

/* ---------- NOGA ---------- */

.site-footer{
  text-align:center;
  font-size:.78rem;
  color:var(--ink-soft);
  padding:14px;
  border-top:1px solid var(--paper-line);
}

/* ---------- ODZIVNOST ---------- */

@media (max-width:840px){

  .classroom{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;
    top:auto;
    height:auto;
    max-height:none;
    overflow:visible;

    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    border-right:none;
    border-bottom:6px solid var(--board-dark);
    gap:14px;
  }

  .sidebar-block{
    flex:1 1 160px;
  }

  .sidebar-actions{
    margin-top:0;
  }

  .mode-list{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .chat-scroll{
    padding:20px 16px 10px;
  }

  /*
   * Na telefonu levega menija ni več ob strani,
   * zato dodatni premik ni potreben.
   */
  .msg.ai{
    width:100%;
    max-width:720px;
    left:0;
  }

  .composer{
    width:100%;
    max-width:none;
    padding:12px 16px 16px;
    left:0;
  }
}

@media (max-width:520px){

  .composer{
    gap:7px;
  }

  .composer-input{
    font-size:.95rem;
    padding:11px 12px;
  }

  .composer-send,
  .composer-dont-know{
    padding:11px 13px;
  }
}

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .btn,
  .meter-fill{
    transition:none;
  }
}