/* Assistant Vie2profs (Mistral AI). Everything the AI suggests or changes is yellow, with soft waves of
   colour drifting slowly in every direction, so it is never mistaken for the teacher's own work.
   Nothing moves or scales: only the colours shift. Selectors start with "html body" so that the tools'
   own generic styles (button, .classroom-app button, p, ul…) never override them. */
:root {
  --ai-yellow: #ffd43b;
  --ai-yellow-deep: #f2b705;
  --ai-yellow-soft: #fff1b8;
  --ai-yellow-pale: #fffbea;
  --ai-accent: #7a5600;
  --ai-ink: #171717;
  /* Three blurred patches of yellow, each drifting along its own path (see ai-waves). */
  --ai-waves: radial-gradient(55% 75% at 15% 25%, rgb(255 212 59 / 70%), transparent 70%),
    radial-gradient(50% 70% at 85% 30%, rgb(255 231 140 / 85%), transparent 70%),
    radial-gradient(65% 85% at 50% 95%, rgb(255 222 92 / 65%), transparent 72%);
  --ai-waves-soft: radial-gradient(55% 75% at 15% 25%, rgb(255 212 59 / 30%), transparent 70%),
    radial-gradient(50% 70% at 85% 30%, rgb(255 231 140 / 40%), transparent 70%),
    radial-gradient(65% 85% at 50% 95%, rgb(255 222 92 / 28%), transparent 72%);
  --ai-halo: 0 0 0 2px var(--ai-yellow-deep), 0 0 16px rgb(255 212 59 / 55%);
}

@keyframes ai-waves {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  25% { background-position: 35% 70%, 60% 45%, 15% 60%; }
  50% { background-position: 80% 30%, 20% 85%, 70% 20%; }
  75% { background-position: 45% 90%, 85% 15%, 95% 75%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
}
@keyframes ai-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The tools style every button, paragraph and list: undo that inside the assistant. */
html body :is(.ai-launcher, .ai-button, .ai-send, .ai-close, .ai-chip) { width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; justify-content: center; transform: none; }
html body :is(.ai-panel, .ai-banner) :is(p, ul, li) { font-size: inherit; line-height: inherit; }

/* Yellow waves: a pale base colour under three drifting patches. */
html body :is(.ai-launcher, .ai-header, .ai-banner, .thinking) {
  background-color: var(--ai-yellow-soft);
  background-image: var(--ai-waves);
  background-size: 220% 220%, 220% 220%, 220% 220%;
  animation: ai-waves 16s ease-in-out infinite;
}
html body .ai-pixel { font-family: 'OffBit', monospace; font-weight: 700; letter-spacing: .5px; }
/* typography.css sets every button to 13 px with !important: the pixel name needs a larger size to read as pixels. */
html body .ai-launcher .ai-pixel { font-size: 19px !important; line-height: 1 !important; }

/* ---------- Launcher ---------- */
html body .ai-launcher {
  position: fixed;
  right: 20px;
  bottom: var(--ai-bottom, 20px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border: 1.5px solid rgb(242 183 5 / 70%);
  border-radius: 999px;
  color: var(--ai-ink);
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 6px 22px rgb(242 183 5 / 35%);
  cursor: pointer;
}
html body .ai-launcher:hover { border-color: var(--ai-yellow-deep); box-shadow: 0 8px 26px rgb(242 183 5 / 50%); }
html body .ai-launcher:focus-visible { outline: 3px solid var(--ai-ink); outline-offset: 2px; }
html body .ai-launcher[hidden], html body .ai-panel[hidden] { display: none; }
html body .ai-launcher-open { opacity: 0; pointer-events: none; }
html body .ai-spark { display: inline-block; color: var(--ai-accent); font-size: 1em; line-height: 1; }
/* The shortcut that opens the assistant from anywhere (keyboards only). */
html body .ai-launcher .ai-launcher-kbd {
  margin: 0 0 0 2px;
  padding: 3px 6px;
  border: 1px solid rgb(122 86 0 / 30%);
  border-radius: 5px;
  background: rgb(255 255 255 / 55%);
  color: var(--ai-accent);
  font: 700 11px/1 var(--body-font, sans-serif) !important;
  letter-spacing: .3px !important;
  white-space: nowrap;
}
@media (max-width: 600px), (hover: none) {
  html body .ai-launcher .ai-launcher-kbd { display: none; }
}

/* ---------- Window ---------- */
html body .ai-panel {
  position: fixed;
  right: 20px;
  bottom: var(--ai-bottom, 20px);
  z-index: 901;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 24px));
  height: min(600px, calc(100svh - 76px - var(--ai-bottom, 20px)));
  border-radius: 18px;
  background: #fff;
  color: var(--ai-ink);
  box-shadow: 0 0 0 1.5px rgb(242 183 5 / 55%), 0 18px 50px rgb(60 45 0 / 22%);
  overflow: hidden;
  animation: ai-fade 160ms ease-out;
  font-size: 14px;
  line-height: 20px;
}
html body .ai-header-tools { display: flex; gap: 4px; }
html body .ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 11px 18px;
  border-bottom: 1px solid rgb(242 183 5 / 40%);
  color: var(--ai-ink);
}
html body .ai-title { display: grid; gap: 2px; }
html body .ai-title strong { font-size: 22px; line-height: 1; }
html body .ai-sub { font-size: 12px; color: var(--ai-accent); }
html body .ai-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 55%); color: var(--ai-ink); font-size: 20px; line-height: 1; cursor: pointer; }
html body .ai-close:hover { background: rgb(255 255 255 / 85%); }

html body .ai-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: #fffdf5; }
html body .ai-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; animation: ai-fade 160ms ease-out; overflow-wrap: anywhere; }
html body .ai-msg p { margin: 0; }
html body .ai-msg-user { align-self: flex-end; background: var(--blue, #024bc8); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
html body .ai-msg-bot { align-self: flex-start; background: var(--ai-yellow-pale); border: 1px solid rgb(242 183 5 / 35%); border-bottom-left-radius: 4px; }
html body .ai-msg-bot .ai-text { white-space: pre-wrap; }
html body .ai-msg-note { align-self: stretch; max-width: none; padding: 6px 10px; border: 0; border-left: 3px solid var(--ai-yellow); border-radius: 4px; background: transparent; color: var(--muted, #555b65); font-size: 12.5px; line-height: 18px; }
html body .ai-msg-error { align-self: stretch; background: #fff3f0; border: 1px solid #f2c4b8; color: #8a2b14; }
html body .ai-msg-blocked { opacity: .65; text-decoration: line-through; }
html body .thinking .ai-text::after { content: ' …'; }

html body .ai-sent { margin-top: 6px; font-size: 12px; opacity: .85; }
html body .ai-sent summary { cursor: pointer; }
html body .ai-sent p { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: rgb(255 255 255 / 16%); white-space: pre-wrap; }

html body .ai-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
html body .ai-chip { padding: 6px 10px; border: 1px solid rgb(242 183 5 / 60%); border-radius: 999px; background: #fff; color: var(--ai-accent); font: inherit; font-size: 12.5px; line-height: 17px; text-align: left; cursor: pointer; }
html body .ai-chip:hover { background: var(--ai-yellow-pale); }

/* A suggestion: yellow frame, with the waves drifting softly behind it while it waits for the teacher. */
html body .ai-proposal {
  margin-top: 9px;
  padding: 11px 12px;
  border: 2px solid var(--ai-yellow);
  border-radius: 12px;
  background-color: #fff;
  background-image: var(--ai-waves-soft);
  background-size: 220% 220%, 220% 220%, 220% 220%;
  animation: ai-waves 16s ease-in-out infinite;
}
html body .ai-proposal-done { animation: none; background-image: none; }
html body .ai-proposal-title { margin: 0 0 6px !important; color: var(--ai-accent); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
html body .ai-steps { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
html body .ai-step::marker { content: '✦  '; color: var(--ai-yellow-deep); }
html body .ai-step-problem { color: #8a2b14; }
html body .ai-notes { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
html body .ai-note-ok { color: #2f6b3a; }
html body .ai-note-ko { color: #a4401a; }
html body .ai-note { color: var(--muted, #555b65); }
html body .ai-picked { margin: 2px 0 0; padding-left: 22px; font-size: 16px; font-weight: 700; line-height: 24px; }
html body :is(.ai-actions, .ai-links) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px !important; }
html body .ai-button { padding: 7px 13px; border: 1px solid #cbd0d9; border-radius: 999px; background: #fff; color: var(--ai-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html body .ai-button:hover { border-color: var(--ai-yellow-deep); background: var(--ai-yellow-pale); }
html body .ai-button-primary { border-color: var(--ai-yellow-deep); background: var(--ai-yellow); color: var(--ai-ink); }
html body .ai-button-primary:hover { background: #ffcc1a; }
html body .ai-button:disabled { opacity: .5; cursor: not-allowed; }
html body .ai-done .ai-text { margin-top: 8px !important; }
html body .ai-link { color: var(--ai-accent); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
html body .ai-muted { margin-top: 8px !important; color: var(--muted, #555b65); font-size: 12.5px; }
html body .ai-error { margin-top: 8px !important; color: #8a2b14; }

html body .ai-privacy { margin: 0; padding: 7px 16px; border-top: 1px solid #f3e7bd; background: #fffdf5; color: var(--muted, #555b65); font-size: 11.5px; line-height: 16px; }
html body .ai-privacy a { color: var(--ai-accent); }
html body .ai-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #f3e7bd; }
html body .ai-input { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 11px; border: 1.5px solid #ece3c2; border-radius: 12px; font: inherit; font-size: 14px; line-height: 20px; resize: vertical; }
html body .ai-input:focus { outline: none; border-color: var(--ai-yellow-deep); box-shadow: 0 0 0 3px rgb(255 212 59 / 30%); }
html body .ai-send { flex: none; width: 40px; height: 40px; border: 1px solid var(--ai-yellow-deep); border-radius: 50%; background: var(--ai-yellow); color: var(--ai-ink); font-size: 18px; font-weight: 700; cursor: pointer; }
html body .ai-send:disabled { opacity: .5; cursor: wait; }

/* ---------- Traces left in the tools ---------- */
html body .ai-trace {
  border-radius: 8px;
  background-image: var(--ai-waves);
  background-size: 220% 220%, 220% 220%, 220% 220%;
  box-shadow: var(--ai-halo);
  animation: ai-waves 14s ease-in-out infinite;
}
/* Timetable courses and sequence capsules are positioned by their tool and clip their overflow. */
html body .ai-trace:not(.bureau):not(.bureauProfesseur):not(.course):not(.capsule) { position: relative; }
html body .ai-trace::after {
  content: '✦';
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ai-yellow-deep);
  border-radius: 50%;
  background: var(--ai-yellow);
  color: var(--ai-ink);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}
html body :is(.course, .capsule).ai-trace::after { top: 3px; right: 3px; }
/* Each half of a course paints its own colour: the waves go on top of it. */
html body .course.ai-trace { z-index: 4; }
html body .course.ai-trace .course-part {
  background-image: var(--ai-waves);
  background-size: 220% 220%, 220% 220%, 220% 220%;
  animation: ai-waves 14s ease-in-out infinite;
}
/* Seating plan desks set their own white background with a more specific rule. */
html body.classroom-app .bureau.ai-trace {
  background-color: var(--ai-yellow-pale);
  background-image: var(--ai-waves);
  background-size: 220% 220%, 220% 220%, 220% 220%;
  box-shadow: var(--ai-halo);
}

html body .ai-banner {
  position: fixed;
  left: 0;
  /* Centered in the space left of the Assistant button. */
  right: 170px;
  bottom: var(--ai-bottom, 20px);
  z-index: 899;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 40px);
  margin-inline: auto;
  padding: 7px 8px 7px 16px;
  border: 1.5px solid rgb(242 183 5 / 70%);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgb(60 45 0 / 18%);
  color: var(--ai-ink);
  font-size: 14px;
  white-space: nowrap;
}
html body .ai-banner-text { font-weight: 600; }

/* The keyboard shortcut means nothing on a phone or a tablet. */
@media (pointer: coarse), (max-width: 560px) {
  html body .ai-kbd { display: none; }
}
@media (max-width: 560px) {
  html body .ai-panel { right: 12px; height: min(560px, calc(100svh - 60px - var(--ai-bottom, 20px))); }
  html body .ai-launcher { right: 12px; }
  html body .ai-banner { right: 0; bottom: calc(var(--ai-bottom, 20px) + 58px); flex-wrap: wrap; justify-content: center; border-radius: 16px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.ai-launcher, .ai-header, .ai-banner, .thinking, .ai-proposal, .ai-trace, .ai-panel, .ai-msg, .ai-trace .course-part) { animation: none; }
}

@media print {
  html body :is(.ai-launcher, .ai-panel, .ai-banner) { display: none !important; }
  html body :is(.ai-trace, .ai-trace .course-part) { animation: none; background-image: none; box-shadow: none; }
  html body .ai-trace::after { display: none; }
}