/* ==========================================================================
   The Professor — site mascot (prototype)
   A character that lives at the bottom of the viewport, comments on what
   you hover, falls over when shoved, and answers questions in a chat panel.
   Everything is pointer-events:none except the figure, its pills, the bubble
   buttons and the chat panel, so he never blocks the page.
   ========================================================================== */

:root {
  --prof-skin: #e9ead9;
  --prof-skin-shade: #cfd1b9;
  --prof-hair: #f4f4ef;
  --prof-hair-shade: #c9c9c0;
  --prof-coat: #f6f5ef;
  --prof-coat-shade: #d9d7cc;
  --prof-ink: #1b1b22;
  --prof-eye: #ffffff;
  --prof-pupil: #0b0b10;
  --prof-cheek: #d7b7b0;
  --prof-bubble-bg: var(--bg-elev, #fff);
  --prof-bubble-ink: var(--ink, #15161a);
  --prof-bubble-line: var(--line-strong, #d4d0c6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --prof-skin: #cfd2bb;
    --prof-skin-shade: #a7aa92;
    --prof-hair: #e6e6df;
    --prof-hair-shade: #a8a89f;
    --prof-coat: #dcdbd2;
    --prof-coat-shade: #b2b0a4;
    --prof-cheek: #b6938d;
  }
}
:root[data-theme="dark"] {
  --prof-skin: #cfd2bb;
  --prof-skin-shade: #a7aa92;
  --prof-hair: #e6e6df;
  --prof-hair-shade: #a8a89f;
  --prof-coat: #dcdbd2;
  --prof-coat-shade: #b2b0a4;
  --prof-cheek: #b6938d;
}

/* ---------- Stage: fixed strip along the bottom of the viewport ---------- */
.prof-stage {
  position: fixed;
  inset: auto 0 0 0;
  height: 0;
  z-index: 60;
  pointer-events: none;
}

/* ---------- The figure ---------- */
.prof {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 91px;   /* 440x1160 art */
  height: 240px;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}
.prof-fig {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.prof-fig { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3)); --glow: 0.3; }
.prof-pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.12s linear;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.prof-pose.is-on { opacity: 1; }
/* kicking legs: the looking-up pose split at the hips; the torso hides its own legs while they're out */
.prof-leg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* legs extend up behind the coat; they swing from just under the coat hem, like knees */
.prof-leg { z-index: 0; }
.prof-pose { z-index: 1; }
.prof-eye, .prof-hit { z-index: 2; }
.prof-leg[data-leg="l"] { clip-path: polygon(0 60%, 50.5% 60%, 50.5% 100%, 0 100%); transform-origin: 37% 71%; }
.prof-leg[data-leg="r"] { clip-path: polygon(50.5% 60%, 100% 60%, 100% 100%, 50.5% 100%); transform-origin: 64% 71%; }
.prof-fig.is-flailing .prof-leg { display: block; }
.prof-fig.is-flailing .prof-pose[data-pose="lookup"] { clip-path: polygon(0 0, 100% 0, 100% 71%, 0 71%); }
/* glowing eyes: a soft blue light laid over each eye of the current pose */
.prof-eye {
  position: absolute;
  width: 7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 250, 255, 1) 0 16%, rgba(110, 195, 255, 0.9) 34%, rgba(40, 130, 255, 0.35) 55%, rgba(40, 120, 255, 0) 72%);
  mix-blend-mode: screen;
  opacity: var(--glow);
  pointer-events: none;
}
.prof-eye[hidden] { display: none; }
/* Only the body shapes take the mouse */
.prof-hit {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 1%;
  bottom: 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.prof-hit:active { cursor: grabbing; }

/* ---------- Pills that appear when you hover him ---------- */
.prof-pills {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  white-space: nowrap;
}
.prof.is-hover .prof-pills, .prof-pills:hover { opacity: 1; pointer-events: auto; }
.prof.is-busy .prof-pills { display: none; }
.prof-pill {
  font: 600 12px/1 var(--font-text, system-ui);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--prof-bubble-line);
  background: var(--prof-bubble-bg);
  color: var(--prof-bubble-ink);
  box-shadow: var(--shadow, 0 8px 24px -12px rgba(0, 0, 0, 0.25));
  cursor: pointer;
  pointer-events: auto;
}
.prof-pill:hover { border-color: var(--brand, #3d3bd6); color: var(--brand, #3d3bd6); }

/* ---------- Speech bubble ---------- */
.prof-bubble {
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--prof-bubble-line);
  background: var(--prof-bubble-bg);
  color: var(--prof-bubble-ink);
  box-shadow: var(--shadow-l, 0 24px 48px -20px rgba(0, 0, 0, 0.3));
  font: 500 15px/1.4 var(--font-display, Georgia, serif);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 61;
}
.prof-bubble.is-on { opacity: 1; transform: none; }
.prof-bubble .tail {
  position: absolute;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--prof-bubble-bg);
  border-right: 1px solid var(--prof-bubble-line);
  border-bottom: 1px solid var(--prof-bubble-line);
  transform: translateX(-50%) rotate(45deg);
}
.prof-bubble .text { white-space: pre-wrap; }
.prof-bubble .actions { display: flex; gap: 6px; margin-top: 10px; pointer-events: auto; }
.prof-bubble .actions:empty { display: none; }
.prof-bubble .actions .btn { font-size: 12px; padding: 6px 10px; }

/* ---------- Chat panel ---------- */
.prof-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(380px, calc(100vw - 32px));
  height: min(72vh, 540px);
  display: none;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--prof-bubble-line);
  background: var(--prof-bubble-bg);
  color: var(--prof-bubble-ink);
  box-shadow: var(--shadow-l, 0 24px 48px -20px rgba(0, 0, 0, 0.3));
  z-index: 62;
  pointer-events: auto;
  overflow: hidden;
}
.prof-chat.is-open { display: flex; }
.prof-chat header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #e6e3db);
  font: 600 14px/1.2 var(--font-text, system-ui);
}
.prof-chat header .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-elev, #fff), 0 0 0 3px rgba(90, 180, 255, 0.55); }
.prof-chat .log .banner { width: 100%; aspect-ratio: 760 / 254; object-fit: cover; border-radius: 12px; display: block; flex: none; }
.prof-chat header .sub { font-weight: 400; color: var(--ink-3, #7a7f8a); font-size: 12px; margin-left: auto; }
.prof-chat header .x {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
}
.prof-chat header .x:hover { background: var(--bg-sunken, #f1efe9); }
.prof-chat .log {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 400 14px/1.45 var(--font-text, system-ui);
}
.prof-chat .msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; }
.prof-chat .msg.me { align-self: flex-end; background: var(--brand, #3d3bd6); color: var(--brand-ink, #fff); border-bottom-right-radius: 4px; }
.prof-chat .msg.bot { align-self: flex-start; background: var(--bg-sunken, #f1efe9); border-bottom-left-radius: 4px; font-family: var(--font-display, Georgia, serif); font-size: 15px; }
.prof-chat .msg.bot a { color: var(--brand, #3d3bd6); font-family: var(--font-text, system-ui); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; }
.prof-chat .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.prof-chat .chips button {
  font: 500 12px/1 var(--font-text, system-ui);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, #d4d0c6);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.prof-chat .chips button:hover { border-color: var(--brand, #3d3bd6); color: var(--brand, #3d3bd6); }
.prof-chat form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line, #e6e3db); }
.prof-chat input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong, #d4d0c6);
  background: var(--bg, #faf9f6);
  color: inherit;
  font: 400 14px/1.2 var(--font-text, system-ui);
}
.prof-chat input:focus { outline: 2px solid var(--brand, #3d3bd6); outline-offset: 1px; }
.prof-chat .foot {
  display: flex;
  gap: 12px;
  padding: 0 14px 12px;
  font: 400 12px/1.2 var(--font-text, system-ui);
  color: var(--ink-3, #7a7f8a);
}
.prof-chat .foot button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; text-decoration: underline; font: inherit; }
.prof-chat .foot button:hover { color: var(--brand, #3d3bd6); }

/* ---------- Restore link (shown only after dismissal) ---------- */
.prof-restore {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  font: 500 12px/1 var(--font-text, system-ui);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, #d4d0c6);
  background: var(--bg-elev, #fff);
  color: var(--ink-2, #4b4f58);
  cursor: pointer;
  opacity: 0.8;
}
.prof-restore:hover { opacity: 1; color: var(--brand, #3d3bd6); }

/* ---------- Keyboard access: hidden until focused ---------- */
.prof-a11y {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 63;
  transform: translateY(200%);
  opacity: 0;
  font: 600 13px/1 var(--font-text, system-ui);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--brand, #3d3bd6);
  background: var(--bg-elev, #fff);
  color: var(--brand, #3d3bd6);
  cursor: pointer;
}
.prof-a11y:focus-visible { transform: none; opacity: 1; outline: 2px solid var(--brand, #3d3bd6); outline-offset: 2px; }

/* ---------- Small screens: he shrinks into the corner and mostly waits ---------- */
@media (max-width: 720px) {
  .prof { width: 59px; height: 156px; }
  .prof-bubble { font-size: 14px; }
  .prof-chat { right: 8px; bottom: 8px; left: 8px; width: auto; }
}

/* ---------- Reduced motion: no walking, no tumbling, no typewriter ---------- */
@media (prefers-reduced-motion: reduce) {
  .prof-bubble, .prof-pills { transition: none; }
}

@media print {
  .prof-stage, .prof-bubble, .prof-chat, .prof-restore, .prof-a11y { display: none !important; }
}

/* ---------- Live chat: course links and the thinking dots ---------- */
.prof-chat .msg.bot .courses { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.prof-chat .msg.bot .course {
  display: block;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line, #e6e3db);
  background: var(--bg-elev, #fff);
  text-decoration: none;
  font: 600 13px/1.3 var(--font-text, system-ui);
  color: var(--ink, #15161a);
}
.prof-chat .msg.bot .course:hover { border-color: var(--brand, #3d3bd6); }
.prof-chat .msg.bot .course span { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--ink-3, #7a7f8a); }
.prof-chat .msg.bot.thinking::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 8px;
  background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0 50% / 8px 8px repeat-x;
  opacity: 0.55;
  animation: prof-dots 1s steps(4) infinite;
  clip-path: inset(0 100% 0 0);
}
@keyframes prof-dots { to { clip-path: inset(0 -10px 0 0); } }
@media (prefers-reduced-motion: reduce) { .prof-chat .msg.bot.thinking::after { animation: none; clip-path: none; } }
.prof-chat .foot a { color: inherit; text-decoration: underline; }
.prof-chat .foot a:hover { color: var(--brand, #3d3bd6); }
.prof-chat .foot span { margin-left: auto; }