/* CAIN-42 Teacher: the site chatbot. Palette = the homepage tokens (cain42.css / cain-pages.css), redeclared here
   because the homepages do not load cain-pages.css. Everything is scoped under .ctw so it cannot restyle a page. */
.ctw{--ct-bg:#060a17;--ct-raised:#0d1328;--ct-raised2:#111a33;--ct-sunken:#040711;--ct-line:#1a2342;
  --ct-line2:#2b3760;--ct-text:#eef1f8;--ct-dim:#b4bdd6;--ct-faint:#7d87a6;--ct-red:#ff3b4a;--ct-red2:#ff5a67;
  --ct-redsoft:#ff3b4a24;--ct-ok:#3fb68b;--ct-bad:#e5484d;
  --ct-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ct-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  position:fixed;right:20px;bottom:20px;z-index:2147483000;font-family:var(--ct-sans);color:var(--ct-text);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ctw *,.ctw *::before,.ctw *::after{box-sizing:border-box}
.ctw [hidden]{display:none!important}
.ctw button{font:inherit;color:inherit;cursor:pointer}

/* launcher */
.ctw-launch{position:relative;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 14px;border:1px solid #ff3b4a66;
  border-radius:28px;background:linear-gradient(135deg,#1a0b14,#0d1328 60%);box-shadow:0 12px 40px -10px #ff3b4a66,0 0 0 1px #ffffff08 inset;
  transition:transform .18s ease,box-shadow .18s ease}
.ctw-launch:hover{transform:translateY(-2px);box-shadow:0 16px 48px -10px #ff3b4a99,0 0 0 1px #ffffff10 inset}
.ctw-launch:focus-visible{outline:2px solid var(--ct-red);outline-offset:3px}
.ctw-launch b{font-weight:650;font-size:.95rem;letter-spacing:.01em}
.ctw-orb{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#ff8a80,#ff3b4a 45%,#7a0f1c);box-shadow:0 0 18px #ff3b4a99}
.ctw-orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #ff3b4a88;animation:ctw-ring 2.4s ease-out infinite}
.ctw-orb svg{width:16px;height:16px}
@keyframes ctw-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* panel */
.ctw-panel{position:absolute;right:0;bottom:70px;width:420px;height:min(680px,calc(100vh - 110px));display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ct-raised2),var(--ct-bg) 38%);border:1px solid var(--ct-line2);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px -20px #000e,0 0 0 1px #ffffff06 inset,0 0 60px -30px #ff3b4a55;
  transform-origin:bottom right;animation:ctw-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes ctw-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.ctw-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--ct-line);
  background:linear-gradient(90deg,#ff3b4a14,transparent 55%)}
.ctw-head .ctw-orb{width:26px;height:26px;flex:none}
.ctw-title{flex:1;min-width:0}
.ctw-title b{display:block;font-size:.98rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctw-title span{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ct-faint);font-family:var(--ct-mono);letter-spacing:.04em}
.ctw-title span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ct-ok);box-shadow:0 0 8px var(--ct-ok)}
.ctw-ib{width:34px;height:34px;border-radius:10px;border:1px solid var(--ct-line);background:var(--ct-sunken);display:grid;place-items:center;color:var(--ct-dim);
  transition:border-color .15s,color .15s;text-decoration:none}
.ctw-ib:hover{border-color:var(--ct-line2);color:var(--ct-text)}
.ctw-ib:focus-visible{outline:2px solid var(--ct-red);outline-offset:1px}
.ctw-ib svg{width:17px;height:17px}
.ctw-ib[aria-pressed="false"]{color:var(--ct-faint)}
.ctw-docs{width:auto;padding:0 10px;gap:6px;display:inline-flex;align-items:center;font-size:.8rem;font-weight:600}

.ctw-modes{display:flex;gap:6px;padding:10px 16px 0}
.ctw-mode{flex:1;padding:7px 10px;border-radius:9px;border:1px solid var(--ct-line);background:transparent;font-size:.8rem;font-weight:600;color:var(--ct-faint)}
.ctw-mode[aria-pressed="true"]{border-color:#ff3b4a88;background:var(--ct-redsoft);color:var(--ct-text)}
.ctw-mode:focus-visible{outline:2px solid var(--ct-red);outline-offset:1px}

/* conversation */
.ctw-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.ctw-log::-webkit-scrollbar{width:8px}.ctw-log::-webkit-scrollbar-thumb{background:var(--ct-line2);border-radius:8px}
.ctw-msg{max-width:92%;padding:11px 14px;border-radius:14px;font-size:.92rem;line-height:1.55;animation:ctw-msg .2s ease-out;overflow-wrap:anywhere}
@keyframes ctw-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ctw-bot{align-self:flex-start;background:var(--ct-raised);border:1px solid var(--ct-line);border-top-left-radius:4px}
.ctw-me{align-self:flex-end;background:linear-gradient(135deg,#ff3b4a,#d92a3a);color:#fff;border-top-right-radius:4px}
.ctw-msg p{margin:0 0 8px}.ctw-msg p:last-child{margin-bottom:0}
.ctw-msg ul,.ctw-msg ol{margin:4px 0 8px;padding-left:20px}
.ctw-msg li{margin:2px 0}
.ctw-msg a{color:#ff8a80;text-decoration:underline;text-underline-offset:2px}
.ctw-msg code{font-family:var(--ct-mono);font-size:.82em;background:var(--ct-sunken);border:1px solid var(--ct-line);border-radius:5px;padding:1px 5px}
.ctw-msg pre{position:relative;margin:8px 0;padding:10px 12px;background:var(--ct-sunken);border:1px solid var(--ct-line);border-radius:10px;overflow-x:auto}
.ctw-msg pre code{background:none;border:0;padding:0;font-size:.8rem;white-space:pre}
.ctw-msg table{border-collapse:collapse;margin:8px 0;font-size:.8rem;display:block;overflow-x:auto}
.ctw-msg th,.ctw-msg td{border:1px solid var(--ct-line);padding:4px 7px;text-align:left;vertical-align:top}
.ctw-msg th{color:var(--ct-dim)}
.ctw-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid var(--ct-line);font-size:.76rem;color:var(--ct-faint)}
.ctw-src a{color:var(--ct-dim);text-decoration:none;border:1px solid var(--ct-line);border-radius:999px;padding:2px 9px}
.ctw-src a:hover{color:var(--ct-text);border-color:var(--ct-line2)}
.ctw-copy{position:absolute;top:6px;right:6px;font-size:.7rem;padding:2px 7px;border-radius:6px;border:1px solid var(--ct-line2);background:var(--ct-raised);color:var(--ct-dim)}
.ctw-tag{display:inline-block;font:600 .66rem var(--ct-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ct-red);margin-bottom:6px}

.ctw-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%}
.ctw-chip{padding:6px 11px;border-radius:999px;border:1px solid var(--ct-line2);background:var(--ct-sunken);font-size:.8rem;color:var(--ct-dim);text-align:left}
.ctw-chip:hover{border-color:#ff3b4a88;color:var(--ct-text)}
.ctw-chip:focus-visible{outline:2px solid var(--ct-red);outline-offset:1px}

/* course */
.ctw-lesson .ctw-prog{height:4px;border-radius:4px;background:var(--ct-line);margin:2px 0 10px;overflow:hidden}
.ctw-lesson .ctw-prog i{display:block;height:100%;background:linear-gradient(90deg,#ff3b4a,#ff8a80);border-radius:4px}
.ctw-quiz{margin-top:10px;padding-top:10px;border-top:1px dashed var(--ct-line2)}
.ctw-quiz b{display:block;margin-bottom:8px;font-size:.88rem}
.ctw-opt{display:block;width:100%;text-align:left;margin:5px 0;padding:8px 11px;border-radius:9px;border:1px solid var(--ct-line2);background:var(--ct-sunken);font-size:.85rem;color:var(--ct-dim)}
.ctw-opt:hover:not([disabled]){border-color:#ff3b4a88;color:var(--ct-text)}
.ctw-opt.ok{border-color:var(--ct-ok);background:#3fb68b1f;color:var(--ct-text)}
.ctw-opt.no{border-color:var(--ct-bad);background:#e5484d1a}
.ctw-why{margin-top:6px;font-size:.84rem;color:var(--ct-dim)}

/* onboarding */
.ctw-pick{display:grid;gap:10px;margin-top:4px}
.ctw-pickbtn{display:grid;gap:3px;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--ct-line2);background:linear-gradient(135deg,var(--ct-raised2),var(--ct-sunken))}
.ctw-pickbtn:hover{border-color:#ff3b4a99;box-shadow:0 0 24px -12px #ff3b4a}
.ctw-pickbtn b{font-size:.95rem}.ctw-pickbtn span{font-size:.8rem;color:var(--ct-faint)}

.ctw-typing{display:inline-flex;gap:4px;padding:12px 14px}
.ctw-typing i{width:7px;height:7px;border-radius:50%;background:var(--ct-red);animation:ctw-dot 1s infinite ease-in-out}
.ctw-typing i:nth-child(2){animation-delay:.15s}.ctw-typing i:nth-child(3){animation-delay:.3s}
@keyframes ctw-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

/* composer */
.ctw-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--ct-line);background:var(--ct-sunken)}
.ctw-input{flex:1;min-width:0;resize:none;max-height:120px;padding:11px 13px;border-radius:12px;border:1px solid var(--ct-line2);background:var(--ct-bg);color:var(--ct-text);font:inherit;font-size:.92rem}
.ctw-input:focus{outline:none;border-color:var(--ct-red);box-shadow:0 0 0 3px var(--ct-redsoft)}
.ctw-send{width:44px;border-radius:12px;border:0;background:var(--ct-red);color:#fff;display:grid;place-items:center}
.ctw-send:hover{background:var(--ct-red2)}
.ctw-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ctw-send svg{width:18px;height:18px}
.ctw-foot{padding:0 14px 10px;background:var(--ct-sunken);font-size:.68rem;color:var(--ct-faint);text-align:center}

@media (max-width:560px){
  .ctw-docs span{display:none}.ctw-docs{padding:0;width:34px;justify-content:center}
  .ctw{right:12px;bottom:12px}
  .ctw-launch{height:52px;padding:0 16px 0 12px}
  .ctw-panel{position:fixed;inset:8px 8px 74px 8px;width:auto;height:auto;bottom:74px}
}
@media (prefers-reduced-motion:reduce){
  .ctw-orb::after,.ctw-typing i{animation:none}.ctw-panel,.ctw-msg{animation:none}.ctw-launch{transition:none}
}

/* homepage: larger launcher + one-time invitation */
.ctw-home .ctw-launch{height:62px;padding:0 24px 0 16px;border-color:#ff3b4a99;box-shadow:0 16px 50px -10px #ff3b4a88,0 0 0 1px #ffffff0a inset}
.ctw-home .ctw-launch b{font-size:1rem}
.ctw-teaser{position:absolute;right:0;bottom:76px;width:300px;display:grid;gap:6px;padding:16px 16px 14px;border-radius:16px;
  background:linear-gradient(160deg,#1a0b14,var(--ct-raised2) 55%);border:1px solid #ff3b4a77;box-shadow:0 24px 60px -18px #000d,0 0 40px -20px #ff3b4a;
  animation:ctw-in .3s cubic-bezier(.2,.8,.2,1)}
.ctw-teaser b{font-size:.98rem;line-height:1.3;padding-right:22px}
.ctw-teaser span{font-size:.84rem;color:var(--ct-dim)}
.ctw-tz-go{justify-self:start;margin-top:4px;padding:8px 14px;border:0;border-radius:10px;background:var(--ct-red);color:#fff;font-weight:650;font-size:.88rem}
.ctw-tz-go:hover{background:var(--ct-red2)}
.ctw-tz-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--ct-faint);display:grid;place-items:center}
.ctw-tz-x svg{width:14px;height:14px}
.ctw-tz-x:hover{color:var(--ct-text)}
@media (max-width:560px){.ctw-teaser{width:calc(100vw - 24px);bottom:70px}.ctw-home .ctw-launch{height:54px}}

/* attention glow: the launcher's red halo pulses on and off until the visitor opens the Teacher (once per session) */
.ctw-launch.ctw-pulse{animation:ctw-glow 4s ease-in-out infinite}
/* Not clicked within 60 s: the launcher fades out slowly before it is removed from the page. */
.ctw-fading .ctw-launch{opacity:0;transform:translateY(6px) scale(.98);transition:opacity 4s ease,transform 4s ease;pointer-events:none}
.ctw-fading .ctw-teaser{opacity:0;transition:opacity 4s ease;pointer-events:none}
.ctw-launch.ctw-pulse::before{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 #ff3b4a99;animation:ctw-halo 4s ease-out infinite}
@keyframes ctw-glow{
  0%,100%{box-shadow:0 12px 40px -10px #ff3b4a55,0 0 0 1px #ffffff08 inset;border-color:#ff3b4a66}
  50%{box-shadow:0 0 34px 6px #ff3b4acc,0 0 70px 14px #ff3b4a55,0 0 0 1px #ffffff14 inset;border-color:#ff5a67}}
@keyframes ctw-halo{0%{box-shadow:0 0 0 0 #ff3b4a99}70%{box-shadow:0 0 0 16px #ff3b4a00}100%{box-shadow:0 0 0 0 #ff3b4a00}}
@media (prefers-reduced-motion:reduce){.ctw-launch.ctw-pulse,.ctw-launch.ctw-pulse::before{animation:none}
  .ctw-launch.ctw-pulse{box-shadow:0 0 28px 4px #ff3b4a99}}

/* after 90 s without a click the launcher (and any invitation) fades away slowly */
.ctw.ctw-fading .ctw-launch,.ctw.ctw-fading .ctw-teaser{opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 4s ease,transform 4s ease}
@media (prefers-reduced-motion:reduce){.ctw.ctw-fading .ctw-launch,.ctw.ctw-fading .ctw-teaser{transition:opacity 1.5s linear;transform:none}}