:root{
  --pill-radius:20px;
  --pill-font:clamp(18px,2.2vw,24px);
  --bubble-shadow:0 3px 6px rgba(0,0,0,.25);
  font-family:system-ui,sans-serif;
  background:#f5f6fa;
}

/* headings */
h1,h2{ text-align:center; margin:24px 0; }

/* pill ------------------------------------------------------- */
.pill{
  width:80vw;max-width:760px;min-width:340px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;text-decoration:none;
  padding:28px 32px;border-radius:var(--pill-radius);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  position:relative;font-size:var(--pill-font);line-height:1.3;font-weight:600;
  transition:transform .15s ease;
}
.pill:hover{ transform:scale(1.15); }

.course-pill{ padding:48px 40px; font-size:clamp(22px,3vw,32px); }
.module-pill{ padding:40px 36px; font-size:clamp(20px,2.6vw,28px); }

/* progress rail --------------------------------------------- */
.progress-bar{
  position:absolute;left:24px;right:24px;bottom:18px;
  height:6px;background:rgba(255,255,255,.35);border-radius:3px;display:none;
}
.progress-fill{
  height:6px;background:#fff;border-radius:3px;width:0%;display:none;
  transition:width .4s ease;
}

/* percent bubble -------------------------------------------- */
.percent-bubble{
  position:absolute;bottom:8px;min-width:60px;padding:3px 10px;
  border-radius:14px;background:#fff;color:#004D40;font-size:.78rem;font-weight:700;
  transform:translateX(-50%);display:none;
  box-shadow:var(--bubble-shadow);white-space:nowrap;pointer-events:none;z-index:5;
}

/* badge ✓ ---------------------------------------------------- */
.badge-done{
  position:absolute;bottom:34px;right:18px;width:44px;height:44px;
  border-radius:50%;background:#8EFFA0;color:#006400;
  display:none;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700;box-shadow:var(--bubble-shadow);z-index:6;
}

/* layout columns -------------------------------------------- */
#courses,#modules,#topics,#actions{
  display:flex;flex-direction:column;align-items:center;
  gap:24px;margin:0 auto 60px;
}

/* trophy slot ----------------------------------------------- */
.trophy-mini{ display:none; }

/* -----------------------------------------------------------
   Multiple‑choice button colours
   --------------------------------------------------------- */

/* Base colours for A–D (always black text) */
.opt-btn[data-i="0"]{background:#FF1744;color:#000;}
.opt-btn[data-i="1"]{background:#FF9100;color:#000;}
.opt-btn[data-i="2"]{background:#FDD835;color:#000;}
.opt-btn[data-i="3"]{background:#1DE9B6;color:#000;}

/* Feedback after selection (still black text) */
.opt-good {background:#00C853 !important;color:#000 !important;}
.opt-bad  {background:#D50000 !important;color:#000 !important;}
.opt-muted{opacity:.35 !important;color:#000 !important;}

/* Gold / Diamond mode cards --------------------------------- */
.mode-card{
  margin:16px;padding:20px;border-radius:12px;text-align:center;
}
.mode-card img{display:block;margin:0 auto 12px;}
.mode-btn{
  border:none;padding:10px 20px;font-size:16px;cursor:pointer;color:#000;
}

/* ─────────────────────────────────────────────────────────── */
/* AI Tutor · glossy prismatic glass UI (UI‑only upgrade)     */
/* Replaces the older AI block; matches new ai.js markup      */
/* Classes added: .ai-row, .ai-ava, .ai-turn-header, chips…   */
/* ─────────────────────────────────────────────────────────── */

/* Launcher */
.ai-launcher{
  position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;
  border:none;font-weight:800;font-size:14px;background:linear-gradient(135deg,#0f172a,#334155);
  color:#fff;box-shadow:0 12px 32px rgba(15,23,42,.35), inset 0 0 14px rgba(255,255,255,.06);
  cursor:pointer;z-index:1000;transition:transform .15s ease, box-shadow .2s ease;
}
.ai-launcher:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(15,23,42,.4), inset 0 0 18px rgba(255,255,255,.07); }
.ai-launcher.ai-hidden{ display:none; }

/* Panel + prismatic border */
.ai-panel{
  position:fixed;right:16px;bottom:16px;width:min(380px,92vw);height:min(74vh,90vh);
  display:none;flex-direction:column;border-radius:18px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 20px 60px rgba(2,6,23,.28);
  z-index:1001;overflow:hidden;border:1px solid rgba(255,255,255,.65);
}
.ai-panel.ai-open{ display:flex; }
.ai-panel.ai-prismatic::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:conic-gradient(from 20deg,#ff8a00,#e52e71,#6a11cb,#2575fc,#00c6ff,#22c55e,#ff8a00);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.95;
}
.ai-panel.ai-prismatic::after{
  content:"";position:absolute;top:12px;right:10px;bottom:12px;width:12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,138,0,.38) 0%,rgba(229,46,113,.38) 16%,rgba(106,17,203,.38) 32%,rgba(37,117,252,.38) 48%,rgba(0,198,255,.38) 64%,rgba(34,197,94,.38) 80%);
  filter:saturate(1.05);opacity:.55;pointer-events:none;
}

/* Header */
.ai-head{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid rgba(15,23,42,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78));
}
.ai-head::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,138,0,.6),rgba(229,46,113,.6),rgba(106,17,203,.6),rgba(37,117,252,.6),rgba(0,198,255,.6),rgba(34,197,94,.6));
  opacity:.6;
}
.ai-title{ display:flex;align-items:center;gap:10px;font-size:14px; }
.ai-badge{
  display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 8px;border-radius:999px;
  font-weight:800;background:#111;color:#fff;font-size:11px;border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 0 8px rgba(255,255,255,.08);
}
.ai-crumb{ color:#64748b; font-weight:600; }
.ai-actions button{
  appearance:none;border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;color:#0f172a;
}
.ai-actions button:hover{ opacity:.75; }

/* Body */
.ai-body{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;height:100%;
}
.ai-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 120% 120%,rgba(59,130,246,.08),transparent 60%),
    radial-gradient(700px 500px at -10% -10%,rgba(16,185,129,.08),transparent 60%);
  mix-blend-mode:screen;opacity:.7;
}

/* Messages + avatars */
.ai-messages{ flex:1 1 auto; overflow:auto; padding-right:4px; scrollbar-width:thin; }
.ai-messages::-webkit-scrollbar{ width:8px; }
.ai-messages::-webkit-scrollbar-thumb{ background:rgba(2,6,23,.18); border-radius:8px; }

.ai-row{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.ai-ava{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;box-shadow:0 4px 14px rgba(2,6,23,.18);
}
.ai-ava.ai-user{ background:linear-gradient(180deg,#64748b,#334155); }
.ai-ava.ai-bot{  background:linear-gradient(180deg,#4f46e5,#7c3aed); }

/* Bubbles (reuse .ai-msg) */
.ai-msg{
  max-width:86%;margin:0;padding:12px 14px;border-radius:14px;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word;border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 18px rgba(2,6,23,.12);
}
.ai-msg.ai-user{ background:linear-gradient(180deg,#eff6ff,#e2e8f0); }
.ai-msg.ai-assistant{ background:linear-gradient(180deg,#f8fafc,#ffffff); }

/* Sources (new) */
.ai-turn-header{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ai-turn-headline{ font-size:12px; color:#64748b; flex:0 0 auto; }
.ai-sources-bar{ display:flex; flex-wrap:wrap; gap:6px; }

.ai-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(241,245,249,.86));
  border:1px solid rgba(224,230,255,.92);box-shadow:0 0 0 1px rgba(255,255,255,.5) inset;
  font-size:12px;
}
.ai-chip .ai-chip-label{ white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.ai-chip .ai-chip-copy{
  border:none;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:2px 6px;
  cursor:pointer;font-size:11px;
}
.ai-chip .ai-chip-copy.ok{ background:#eaffea; border-color:#b8e2b8; }

/* Skeleton loading */
.ai-answer{ /* container the stream writes into */ }
.ai-skel{ width:92px;height:22px;background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:aiShimmer 1.15s infinite;border:none;border-radius:999px; }
.ai-skel-line{ height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(241,245,249,.9),rgba(255,255,255,.7));background-size:200% 100%;animation:aiShimmer 1.05s infinite;margin:6px 0; }
.ai-skel-line.w70{ width:70%; } .ai-skel-line.w50{ width:50%; }
@keyframes aiShimmer{ 0%{ background-position:0% 0 } 100%{ background-position:-200% 0 } }

/* Input + hint */
.ai-input{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.ai-input textarea{
  width:100%;min-height:46px;max-height:160px;resize:vertical;padding:12px;border-radius:12px;
  border:1px solid #e2e8f0;outline:none;background:rgba(255,255,255,.98);
}
.ai-input textarea:focus{ border-color:#7aa7ff; box-shadow:0 0 0 3px rgba(122,167,255,.25); }
.ai-send{
  height:46px;padding:0 16px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(90deg,#111 0%,#333 100%);color:#fff;font-weight:800;
  box-shadow:0 8px 20px rgba(2,6,23,.18);
}
.ai-send:hover{ transform:translateY(-1px); filter:saturate(1.05); }
.ai-subhint{ margin:2px 2px 0 2px; color:#64748b; font-size:12px; text-align:right; }

/* Back-compat: old .ai-sources / .ai-source (if any older turns exist) */
.ai-sources{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 0 0; border-top:1px dashed rgba(0,0,0,.08); }
.ai-source{
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:#eef6ee; border:1px solid #d6ead6; color:#264d26;
}

/* Inline CTA (kept) */
.ai-inline-btn{
  margin:0 0 12px 0;padding:10px 14px;border:1px solid #e2e8f0;background:#fff;border-radius:12px;
  font-weight:800;cursor:pointer;
}
.ai-inline-btn:hover{ background:#f8fafc; }

/* Mobile */
@media (max-width:640px){
  .ai-panel{ right:8px; left:8px; width:auto; height:80vh; }
}

/* Motion prefs */
@media (hover:hover){ .ai-launcher:hover{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .ai-launcher,.ai-send{ transition:none; } }