/* 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:#d42232;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}
}

/* The launcher is fixed bottom-right, so it sat on top of the last footer link (usually "API reference") on
   122 of 136 pages at 390px, and no amount of scrolling moved that link out from under it (CX audit 2026-10-13).
   Reserve the launcher's height below the page so the end of every page can scroll clear of it. */
body:has(>.ctw){padding-bottom:96px}
@media (max-width:560px){body:has(>.ctw){padding-bottom:80px}}

/* homepage: larger launcher */
.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}
@media (max-width:560px){.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-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 fades away slowly */
.ctw.ctw-fading .ctw-launch{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{transition:opacity 1.5s linear;transform:none}}

/* Homepages: 15 s after load the launcher becomes a small circle in the corner. It keeps working as a live link
   that opens the CAIN-42 Teacher at any time. */
.ctw-mini .ctw-launch,.ctw-home.ctw-mini .ctw-launch{width:56px;height:56px;padding:0;gap:0;border-radius:50%;justify-content:center}
.ctw-mini .ctw-launch b{display:none}
@media (max-width:560px){.ctw-mini .ctw-launch,.ctw-home.ctw-mini .ctw-launch{width:52px;height:52px}}