/* TJP Helper widget. Everything is scoped under #tjp-ccg so it cannot touch the site's own styles. */
#tjp-ccg{--tjp-o:#b84e08;--tjp-o2:#9a3f04;--tjp-bg:#fffaf5;--tjp-ink:#2a2118;--tjp-line:#ead9c8;--tjp-bot:#f4ebe1;--tjp-me:#fde4cf;
  position:fixed;right:18px;bottom:18px;z-index:99990;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Yu Gothic",sans-serif;color:var(--tjp-ink);}
#tjp-ccg *{box-sizing:border-box;}
#tjp-ccg[hidden],#tjp-ccg [hidden]{display:none!important;}

/* launcher: a pill that shrinks to a round bubble on scroll and on small screens */
#tjp-ccg .tjp-launch{display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--tjp-o);color:#fff;
  padding:12px 18px 12px 14px;border-radius:999px;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;box-shadow:0 4px 16px rgba(0,0,0,.28);max-width:340px;}
#tjp-ccg .tjp-launch:hover{background:var(--tjp-o2);}
#tjp-ccg .tjp-launch:focus-visible,#tjp-ccg button:focus-visible,#tjp-ccg textarea:focus-visible,#tjp-ccg a:focus-visible{outline:3px solid #1b4fd8;outline-offset:2px;}
#tjp-ccg .tjp-launch svg{flex:0 0 auto;width:24px;height:24px;}
#tjp-ccg.tjp-mini .tjp-launch{padding:14px;}
#tjp-ccg.tjp-mini .tjp-launch span{display:none;}
@media (max-width:640px){#tjp-ccg .tjp-launch{padding:14px;}#tjp-ccg .tjp-launch span{display:none;}}

/* panel */
#tjp-ccg .tjp-panel{display:flex;flex-direction:column;width:380px;max-width:calc(100vw - 24px);height:min(600px,calc(100vh - 36px));
  background:var(--tjp-bg);border:1px solid var(--tjp-line);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.3);overflow:hidden;}
#tjp-ccg .tjp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--tjp-o);color:#fff;padding:12px 14px;}
#tjp-ccg .tjp-head b{font-size:15px;line-height:1.25;}
#tjp-ccg .tjp-x{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px;}
#tjp-ccg .tjp-x:hover{background:rgba(255,255,255,.18);}
#tjp-ccg .tjp-levels{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 4px;}
#tjp-ccg .tjp-levels small{flex:1 0 100%;color:#6a5646;font-size:13px;}
#tjp-ccg .tjp-chip{border:1px solid var(--tjp-o);background:#fff;color:var(--tjp-o2);border-radius:999px;padding:5px 11px;font-family:inherit;font-weight:500;font-size:14px;line-height:1.2;cursor:pointer;}
#tjp-ccg .tjp-chip:hover{background:#fff1e4;}
#tjp-ccg .tjp-chip[aria-pressed="true"]{background:var(--tjp-o);color:#fff;}
#tjp-ccg .tjp-log{position:relative;flex:1 1 auto;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px;}
#tjp-ccg .tjp-msg{max-width:92%;padding:9px 12px;border-radius:14px;font-size:15.5px;overflow-wrap:anywhere;}
#tjp-ccg .tjp-msg p{margin:0 0 .55em;}
#tjp-ccg .tjp-msg p:last-child{margin-bottom:0;}
#tjp-ccg .tjp-msg ul,#tjp-ccg .tjp-msg ol{margin:.2em 0 .55em 1.2em;padding:0;}
#tjp-ccg .tjp-msg li{margin:.15em 0;}
#tjp-ccg .tjp-bot{background:var(--tjp-bot);align-self:flex-start;border-bottom-left-radius:4px;}
#tjp-ccg .tjp-me{background:var(--tjp-me);align-self:flex-end;border-bottom-right-radius:4px;}
#tjp-ccg .tjp-err{background:#fdecea;color:#7a1f16;align-self:flex-start;}
/* the site hides ruby readings until hover; in the chat a beginner needs them visible */
#tjp-ccg ruby rt{opacity:1!important;font-size:.58em;}
#tjp-ccg .tjp-cards{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
#tjp-ccg .tjp-msg p.tjp-cards-head{margin:12px 0 0;font-size:14px;line-height:1.4;color:#5a4a3c;}
#tjp-ccg .tjp-card{display:block;background:#fff;border:1px solid var(--tjp-line);border-left:4px solid var(--tjp-o);border-radius:8px;padding:7px 10px;color:var(--tjp-o2);text-decoration:none;font-weight:600;font-size:14.5px;}
#tjp-ccg .tjp-card:hover{background:#fff6ee;text-decoration:underline;}
/* offer card: set apart from lesson links, so it reads as a recommendation, not part of the answer */
#tjp-ccg .tjp-offer{display:block;margin-top:10px;background:#fff;border:1px solid #e3c9ae;border-radius:10px;padding:9px 11px;color:var(--tjp-ink);text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);}
#tjp-ccg .tjp-offer:hover{background:#fff6ee;}
#tjp-ccg .tjp-offer b{display:block;color:var(--tjp-o2);font-size:15px;margin-top:3px;}
#tjp-ccg .tjp-offer small{display:block;font-size:13.5px;color:#5a4a3c;margin-top:2px;line-height:1.35;}
#tjp-ccg .tjp-offer-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#2e6b3a;border-radius:4px;padding:1px 6px;}
#tjp-ccg .tjp-sug{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px;}
#tjp-ccg .tjp-typing{display:inline-flex;gap:4px;padding:2px 0;}
#tjp-ccg .tjp-typing i{width:7px;height:7px;border-radius:50%;background:#9a8472;animation:tjpb 1.1s infinite ease-in-out;}
#tjp-ccg .tjp-typing i:nth-child(2){animation-delay:.18s;}#tjp-ccg .tjp-typing i:nth-child(3){animation-delay:.36s;}
@keyframes tjpb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#tjp-ccg .tjp-typing i{animation:none;opacity:.6;}}
#tjp-ccg .tjp-form{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--tjp-line);background:#fff;}
#tjp-ccg textarea{flex:1 1 auto;resize:none;border:1px solid #cdbba9;border-radius:10px;padding:8px 10px;font-family:inherit;font-size:16px;line-height:1.35;color:var(--tjp-ink);background:#fff;max-height:110px;min-width:0;overflow-y:hidden;}
#tjp-ccg .tjp-send{flex:0 0 auto;border:0;border-radius:10px;background:var(--tjp-o);color:#fff;font-family:inherit;font-weight:600;font-size:15px;line-height:1;padding:0 16px;cursor:pointer;}
#tjp-ccg .tjp-send:hover{background:var(--tjp-o2);}
#tjp-ccg .tjp-send:disabled{opacity:.55;cursor:default;}
#tjp-ccg .tjp-foot{padding:6px 12px 9px;font-size:12.5px;color:#6a5646;background:#fff;}
#tjp-ccg .tjp-foot a{color:var(--tjp-o2);}

/* phones: the panel becomes a full-height sheet */
@media (max-width:640px){
  #tjp-ccg{right:10px;bottom:10px;}
  #tjp-ccg.tjp-open{right:0;bottom:0;left:0;top:0;}
  #tjp-ccg.tjp-open .tjp-panel{width:100%;max-width:none;height:100%;border-radius:0;border:0;}
}