/* ── AI-LÄRARFLÖDE ──────────────────────────────────────────── */

/* Textstyckes-titel */
#ai-larare-titel {
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Textstyckes-innehåll */
#ai-larare-text {
  font-size: var(--t-brod);
  line-height: 1.75;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius:0;
  padding: 16px;
  margin-bottom: 4px;
  white-space: pre-wrap;
}

/* Separator mellan textstycke och fråga */
.ai-larare-separator {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* Chattfönster */
#ai-larare-chatt {
  max-height: 340px;
  overflow-y: auto;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0;
}

/* Meddelandebubbla – gemensam */
.ai-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}

/* AI-läraren – vänster */
.ai-msg-ai {
  align-self: flex-start;
}

/* Eleven – höger */
.ai-msg-elev {
  align-self: flex-end;
  align-items: flex-end;
}

/* Avsändarnamn */
.ai-msg-namn {
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Meddelandetext */
.ai-msg-text {
  font-size: var(--t-brod);
  line-height: 1.6;
  padding: 12px 14px;
  border-radius:0;
  white-space: pre-wrap;
}

.ai-msg-ai .ai-msg-text {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-top-left-radius: 3px;
}

.ai-msg-elev .ai-msg-text {
  background: var(--accent);
  color: var(--on-accent);
  border-top-right-radius: 3px;
}

/* Inmatningsfält */
#ai-larare-input {
  width: 100%;
  min-height: 80px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius:0;
  padding: 12px;
  color: var(--text);
  font-family: 'Sora', sans-serif;
  font-size: var(--t-brod);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
  display: block;
}

#ai-larare-input:focus {
  outline: none;
  border-color: var(--accent);
}

#ai-larare-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  resize: none;
}

/* Teckengräns-text */
#ai-larare-count {
  font-size: var(--t-meta);
  color: var(--muted);
  text-align: right;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Bild på textstycket respektive på frågan. Båda döljs av JS när url saknas. */
#ai-larare-bild,
#ai-larare-fraga-bild {
  display: none;
  max-width: 100%;
  max-height: 240px;
  border-radius:0;
  object-fit: contain;
  margin-bottom: 12px;
}

#ai-larare-fraga-bild {
  margin-top: 10px;
}

/* Systemfel i chatten – inte AI:n som talar, utan appen */
.ai-systemfel {
  align-self: center;
  max-width: 88%;
  font-size: var(--t-liten);
  line-height: 1.6;
  text-align: center;
  color: var(--wrong);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius:0;
  padding: 10px 14px;
}

/* Klar-skärmen */
#screen-ai-larare-klar .ai-klar-ikon {
  font-size: 52px;
  margin-bottom: 20px;
}

/* ── FÖLJDFRÅGA EFTER RÄTT SVAR I QUIZ (elev-ai.js) ─────────── */

.ai-chat-elev { margin-bottom: 6px; }
.ai-chat-ai { margin-bottom: 10px; }
.ai-chat-roll { color: var(--text); font-weight: 600; }
.ai-chat-roll-ai { color: var(--accent); font-weight: 600; }
.ai-chat-vantar { margin-bottom: 10px; color: var(--muted2); }
.ai-chat-fel { margin-bottom: 10px; color: var(--wrong); }