/* ==========================================================================
   Ask Burbank v306 — "Help Robbie learn"
   Styles the prompt, the "Suggest a better answer" action and the inline
   suggestion form added by /ab-teach-v306.js. Uses the Robbie answer tokens
   from /ab-robbie-ui.css (--rb-*), with fallbacks so it also stands alone.
   Icons: Lucide (ISC).
   ========================================================================== */

#robbieWidget .abt-ic{display:inline-block;flex:0 0 auto;vertical-align:middle}

/* ------------------------------------------- "Know the answer?" prompt */
body.abx #robbieWidget .abt-callout{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:14px 0 0;padding:14px 16px;
  background:var(--rb-blue-soft,#EDF3FE);border:1px solid var(--rb-blue-bd,#CADBF8);border-radius:14px;color:var(--rb-ink,#19241F)}
body.abx #robbieWidget .abt-callout-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--rb-blue,#205CC5)}
body.abx #robbieWidget .abt-callout-t{flex:1 1 190px;min-width:0;margin:0;font:400 14.5px/1.45 var(--abx-font,inherit);color:var(--rb-ink,#19241F)}
body.abx #robbieWidget .abt-callout-t strong{font-weight:700}
body.abx #robbieWidget .abt-callout .abt-open,body.abx #robbieWidget .abt-callout .abt-sent{margin-left:auto}

/* ------------------------------------------- "Suggest a better answer" */
/* v306.1: a friendly Robbie-green pill (it was grey text that read as fine print). Text #2F5A10 on #EEF6E4 is 7.4:1. */
body.abx #robbieWidget .abt-more{margin:12px 0 2px}
body.abx #robbieWidget .abt-suggest{display:inline-flex!important;align-items:center;gap:9px;width:auto!important;max-width:100%;min-height:40px!important;margin:0!important;padding:5px 16px 5px 5px!important;
  border:1px solid #CFE3B8!important;background:#EEF6E4!important;box-shadow:0 1px 2px rgba(47,90,16,.08)!important;transform:none!important;border-radius:999px!important;
  color:#2F5A10!important;font:650 14px/1.2 var(--abx-font,inherit)!important;text-align:left;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
body.abx #robbieWidget .abt-suggest .abt-ic{box-sizing:border-box;width:30px;height:30px;padding:7px;border-radius:50%;background:#4E8A1B;color:#fff;transition:background-color .18s ease,color .18s ease}
body.abx #robbieWidget .abt-suggest:hover{background:#E2F0D2!important;border-color:#A8CB7D!important;box-shadow:0 4px 12px -6px rgba(47,90,16,.35)!important}
body.abx #robbieWidget .abt-suggest:hover .abt-ic{background:#3F7413}
body.abx #robbieWidget .abt-suggest:focus-visible{outline:3px solid var(--abx-focus,#205CC5)!important;outline-offset:2px}
body.abx #robbieWidget .abt-suggest[aria-expanded="true"]{background:#3F7413!important;border-color:#3F7413!important;color:#fff!important}
body.abx #robbieWidget .abt-suggest[aria-expanded="true"] .abt-ic{background:#fff;color:#3F7413}
@media (max-width:600px){ body.abx #robbieWidget .abt-suggest{min-height:44px!important} }
@media (prefers-reduced-motion:reduce){ body.abx #robbieWidget .abt-suggest,body.abx #robbieWidget .abt-suggest .abt-ic{transition:none} }

/* ------------------------------------------- buttons */
body.abx #robbieWidget .abt-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;min-height:44px!important;margin:0!important;padding:0 16px!important;
  border-radius:var(--rb-pill-r,999px)!important;font:600 14.5px/1 var(--abx-font,inherit)!important;box-shadow:none!important;transform:none!important;cursor:pointer;white-space:nowrap}
body.abx #robbieWidget .abt-btn-primary{background:var(--rb-blue,#205CC5)!important;border:1.5px solid var(--rb-blue,#205CC5)!important;color:#fff!important}
body.abx #robbieWidget .abt-btn-primary:hover{background:var(--rb-blue-h,#1B50AD)!important;border-color:var(--rb-blue-h,#1B50AD)!important}
body.abx #robbieWidget .abt-btn-ghost{background:#fff!important;border:1.5px solid var(--rb-line,#E2E7DF)!important;color:var(--rb-ink,#19241F)!important}
body.abx #robbieWidget .abt-btn-ghost:hover{background:var(--rb-bubble,#F7F8F5)!important}
body.abx #robbieWidget .abt-btn[disabled]{opacity:.72;cursor:progress}
body.abx #robbieWidget .abt-sent{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--abx-green-ink,#3F6B16);font:600 14px/1.2 var(--abx-font,inherit)}

/* ------------------------------------------- form */
body.abx #robbieWidget .abt-form{margin:12px 0 0;padding:16px;background:#fff;border:1px solid var(--rb-line,#E2E7DF);border-radius:var(--rb-card-r,18px);
  box-shadow:0 1px 2px rgba(25,36,31,.05);color:var(--rb-ink,#19241F);font:400 14.5px/1.45 var(--abx-font,inherit);scroll-margin:12px}
body.abx #robbieWidget .abt-head{display:flex;align-items:center;gap:8px;margin:0 0 4px}
body.abx #robbieWidget .abt-title{display:flex;align-items:center;gap:8px;margin:0;font:700 16.5px/1.3 var(--abx-font,inherit)!important;color:var(--rb-ink,#19241F);letter-spacing:-.01em}
body.abx #robbieWidget .abt-title .abt-ic{color:var(--rb-blue,#205CC5)}
body.abx #robbieWidget .abt-x{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:40px!important;height:40px;min-height:40px!important;margin:-6px -6px -6px auto!important;padding:0!important;
  border:0!important;background:none!important;box-shadow:none!important;transform:none!important;border-radius:50%!important;color:var(--rb-ink-2,#59645D)!important;cursor:pointer}
body.abx #robbieWidget .abt-x:hover{background:var(--rb-bubble,#F7F8F5)!important}
body.abx #robbieWidget .abt-q{margin:0 0 12px;color:var(--rb-ink-2,#59645D);font-size:13.5px;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.abx #robbieWidget .abt-q-l{font-weight:650;color:var(--rb-ink-3,#66716A)}
body.abx #robbieWidget .abt-field{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0 0 12px}
body.abx #robbieWidget .abt-field label{font:600 13.5px/1.3 var(--abx-font,inherit);color:var(--rb-ink,#19241F)}
body.abx #robbieWidget .abt-req,body.abx #robbieWidget .abt-opt{font-weight:450;color:var(--rb-ink-3,#66716A)}
body.abx #robbieWidget .abt-form input,body.abx #robbieWidget .abt-form textarea{box-sizing:border-box;display:block;width:100%;max-width:100%;min-height:44px;margin:0;padding:10px 12px!important;
  border:1px solid #C3CCC0;border-radius:var(--rb-ctl-r,12px)!important;background:#fff;color:var(--rb-ink,#19241F);font:400 16px/1.4 var(--abx-font,inherit);box-shadow:none}
body.abx #robbieWidget .abt-form textarea{min-height:104px;resize:vertical}
body.abx #robbieWidget .abt-form input::placeholder{color:#7A847D}
body.abx #robbieWidget .abt-form input:focus-visible,body.abx #robbieWidget .abt-form textarea:focus-visible{outline:3px solid var(--abx-focus,#205CC5)!important;outline-offset:1px;border-color:var(--rb-blue,#205CC5)}
body.abx #robbieWidget .abt-form [aria-invalid="true"]{border-color:#B42318;border-width:1.5px}
body.abx #robbieWidget .abt-hint{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:var(--rb-ink-3,#66716A);font-size:12.5px;line-height:1.35}
body.abx #robbieWidget .abt-count{font-variant-numeric:tabular-nums;white-space:nowrap}
body.abx #robbieWidget .abt-err{margin:0;color:#B42318;font:550 13px/1.35 var(--abx-font,inherit)}
body.abx #robbieWidget .abt-err[hidden]{display:none}
body.abx #robbieWidget .abt-form-err{margin:0 0 12px;padding:10px 12px;background:#FEF3F2;border:1px solid #FECDCA;border-radius:12px}
body.abx #robbieWidget .abt-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
body.abx #robbieWidget .abt-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
body.abx #robbieWidget .abt-note{display:flex;align-items:flex-start;gap:8px;margin:2px 0 14px;padding:10px 12px;background:var(--rb-bubble,#F7F8F5);border-radius:12px;color:var(--rb-ink-2,#59645D);font-size:13px;line-height:1.45}
body.abx #robbieWidget .abt-note .abt-ic{margin-top:1px;color:var(--abx-green-ink,#3F6B16)}
body.abx #robbieWidget .abt-acts{display:flex;flex-wrap:wrap;gap:8px}
body.abx #robbieWidget .abt-done{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:14px 16px;background:var(--abx-soft-green,#EEF4E6);border:1px solid #D3E2C3;border-radius:14px;
  color:var(--abx-green-ink,#3F6B16);font:400 14.5px/1.45 var(--abx-font,inherit)}
body.abx #robbieWidget .abt-done .abt-ic{margin-top:2px}
body.abx #robbieWidget .abt-done strong{font-weight:700}

/* focus */
body.abx #robbieWidget :is(.abt-btn,.abt-suggest,.abt-x):focus-visible,body.abx #robbieWidget .abt-done:focus{outline:3px solid var(--abx-focus,#205CC5)!important;outline-offset:2px}
body.abx #robbieWidget .abt-done:focus:not(:focus-visible){outline-color:transparent!important}

/* narrow answers (phones, or a narrow Robbie panel) */
@container rbanswer (max-width:460px){
  body.abx #robbieWidget .abt-row2{grid-template-columns:minmax(0,1fr)}
  body.abx #robbieWidget .abt-acts .abt-btn{flex:1 1 130px}
  body.abx #robbieWidget .abt-callout .abt-open{flex:1 1 100%;margin-left:0}
}
@media (max-width:600px){
  body.abx #robbieWidget .abt-row2{grid-template-columns:minmax(0,1fr)}
  body.abx #robbieWidget .abt-form{padding:14px}
  body.abx #robbieWidget .abt-acts .abt-btn{flex:1 1 130px}
  body.abx #robbieWidget .abt-callout .abt-open{flex:1 1 100%;margin-left:0}
}
@media print{ .abt-callout,.abt-more,.abt-form,.abt-done{display:none!important} }

/* ------------------------------------------- p18o: the fun "Know the answer?" card */
/* Romik, 23 Oct 11:42 PT: "don't use blue on blue and make the section fun, design a small Robbie image or animation".
   Warm cream card, Robbie waving out of a gold circle, a lightbulb that lights up, sparkles; green Live-style button. */
body.abx #robbieWidget .abt-callout.abt-fun{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art text" "btn btn";align-items:center;gap:14px 14px;margin:18px 0 0;padding:18px 16px 16px;
  background:#FFF7E6;border:1px solid #F1DBA8;border-radius:var(--rb-card-r,18px);color:var(--rb-ink,#19241F)}
body.abx #robbieWidget .abt-robbie{grid-area:art;position:relative;display:block;width:76px;height:76px;margin:4px 4px 0 2px}
body.abx #robbieWidget .abt-robbie-disc{position:absolute;left:7px;right:7px;bottom:0;height:62px;border-radius:50%;background:#FFDF98}
body.abx #robbieWidget .abt-robbie-img{position:absolute;inset:0;display:block;width:76px!important;height:76px!important;max-width:none!important;margin:0!important;border-radius:0!important;transform-origin:50% 92%;animation:abtBob 4.2s ease-in-out infinite}
body.abx #robbieWidget .abt-bulb{position:absolute;top:-12px;right:-12px;width:26px;height:26px;transform-origin:50% 80%;animation:abtBulb 4.2s ease-in-out infinite}
body.abx #robbieWidget .abt-bulb svg{display:block;width:26px;height:26px}
body.abx #robbieWidget .abt-bulb .abt-rays{opacity:0;animation:abtRays 4.2s ease-in-out infinite}
body.abx #robbieWidget .abt-spark{position:absolute;width:7px;height:7px;background:#F0A500;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:abtSpark 2.8s ease-in-out infinite}
body.abx #robbieWidget .abt-s1{top:6px;left:-6px}
body.abx #robbieWidget .abt-s2{top:22px;right:-16px;width:6px;height:6px;animation-delay:.9s}
body.abx #robbieWidget .abt-s3{top:-14px;left:26px;width:5px;height:5px;animation-delay:1.8s}
body.abx #robbieWidget .abt-fun-text{grid-area:text;min-width:0}
body.abx #robbieWidget .abt-fun-title{margin:0 0 3px;font:750 17px/1.3 var(--abx-font,inherit);letter-spacing:-.01em;color:var(--rb-ink,#19241F)}
body.abx #robbieWidget .abt-fun-body{margin:0;font:400 14.5px/1.45 var(--abx-font,inherit);color:var(--rb-ink-2,#59645D)}
body.abx #robbieWidget .abt-fun .abt-btn-teach,body.abx #robbieWidget .abt-fun .abt-sent{grid-area:btn;justify-self:stretch;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:50px!important;margin:0!important;padding:6px 22px 6px 6px!important;
  border-radius:999px!important;background:#E3F2D1!important;border:1px solid #B5D88E!important;color:#2F5A10!important;font:700 15.5px/1 var(--abx-font,inherit)!important;box-shadow:none!important;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}
body.abx #robbieWidget .abt-fun .abt-btn-teach:hover{background:#D7EDBF!important;box-shadow:0 6px 16px -10px rgba(47,90,16,.5)!important}
body.abx #robbieWidget .abt-fun .abt-btn-teach[aria-expanded="true"]{background:#2F6B12!important;border-color:#2F6B12!important;color:#fff!important}
body.abx #robbieWidget .abt-teach-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#4E8A1B;color:#fff}
body.abx #robbieWidget .abt-fun .abt-btn-teach[aria-expanded="true"] .abt-teach-ic{background:#fff;color:#2F6B12}
body.abx #robbieWidget .abt-teach-ic svg{width:16px;height:16px}
@container (min-width:560px){
  body.abx #robbieWidget .abt-callout.abt-fun{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"art text btn"}
  body.abx #robbieWidget .abt-fun .abt-btn-teach,body.abx #robbieWidget .abt-fun .abt-sent{justify-self:end}
}
@keyframes abtBob{0%,100%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(0,-2px,0) rotate(-2.5deg)}60%{transform:translate3d(0,0,0) rotate(1.5deg)}}
@keyframes abtBulb{0%,48%{transform:scale(.82) rotate(-10deg);opacity:.55}58%{transform:scale(1.18) rotate(6deg);opacity:1}66%,88%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.82) rotate(-10deg);opacity:.55}}
@keyframes abtRays{0%,54%{opacity:0}60%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes abtSpark{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.6) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){
  body.abx #robbieWidget .abt-robbie-img,body.abx #robbieWidget .abt-bulb,body.abx #robbieWidget .abt-bulb .abt-rays,body.abx #robbieWidget .abt-spark{animation:none}
  body.abx #robbieWidget .abt-bulb .abt-rays{opacity:1}
  body.abx #robbieWidget .abt-s1,body.abx #robbieWidget .abt-s3{opacity:1}
  body.abx #robbieWidget .abt-fun .abt-btn-teach{transition:none}
}

/* ------------------------------------------- p18o: "Know a better answer?" as one quiet line */
body.abx #robbieWidget .abt-more{margin:6px 0 2px}
body.abx #robbieWidget :is(.abt-more,.mact-fb) .abt-suggest{display:inline-flex!important;align-items:center;gap:7px;min-height:40px!important;padding:4px 6px!important;background:transparent!important;border:0!important;border-radius:8px!important;box-shadow:none!important;
  color:#2F5A10!important;font:600 14px/1.2 var(--abx-font,inherit)!important;cursor:pointer}
body.abx #robbieWidget :is(.abt-more,.mact-fb) .abt-suggest .abt-ic,body.abx #robbieWidget :is(.abt-more,.mact-fb) .abt-suggest svg{width:15px!important;height:15px!important;padding:0!important;background:none!important;color:#4E8A1B!important;border-radius:0!important}
body.abx #robbieWidget :is(.abt-more,.mact-fb) .abt-suggest:hover{background:#EEF6E4!important;text-decoration:underline;text-underline-offset:3px;box-shadow:none!important}
body.abx #robbieWidget :is(.abt-more,.mact-fb) .abt-suggest[aria-expanded="true"]{background:#EEF6E4!important;color:#2F5A10!important}