/* Coach Ritchie (right) and Ask R. Wingo (left): the two side tabs and their
   panels. ONE file, linked from EVERY page that can mount them: the session
   pages (course.css) and the home and progress pages (home.css + extra.css).
   Until 16 Sep 2026 these rules lived only in course.css, so on index.html and
   portal.html both tabs rendered as plain buttons at the foot of the page.
   Found on the second preview, not by the harness, which now checks the tabs'
   position on those pages too.
   `font:13.5px/1.45 inherit` was invalid CSS (inherit cannot sit inside the
   shorthand), so browsers dropped it and the chat boxes lost their font size;
   the properties are spelled out. */
@media print { #cr-tab, #cr-panel, #rw-tab, #rw-panel { display:none !important; } }
/* Ask Coach Ritchie — side tab + panel */
#cr-tab { position:fixed; right:0; top:46%; z-index:60; background:#021937; color:#fff; border:2px solid #fc2b03; border-right:0; border-radius:8px 0 0 8px; padding:10px 9px; font:800 11px/1.25 'Segoe UI',Arial,sans-serif; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.25); }
#cr-tab span { color:#fc2b03; display:block; }
#cr-tab small { display:block; color:#9fb0c8; font-weight:600; font-size:9.5px; letter-spacing:.08em; margin-top:3px; }
#cr-panel { position:fixed; right:14px; bottom:14px; z-index:61; width:min(380px,calc(100vw - 28px)); max-height:78vh; overflow:auto; background:#fff; border:1px solid #dfe4ea; border-top:4px solid #fc2b03; border-radius:10px; box-shadow:0 10px 40px rgba(2,25,55,.3); font:14px/1.55 'Segoe UI',Arial,sans-serif; color:#555; }
#cr-panel .crh { display:flex; align-items:center; gap:10px; background:#021937; color:#fff; padding:12px 14px; }
#cr-panel .crh img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
#cr-panel .crh b { display:block; font-size:14px; } #cr-panel .crh small { color:#9fb0c8; font-size:11.5px; }
#cr-panel .crx { margin-left:auto; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; line-height:1; }
#cr-panel .crb { padding:14px 16px; }
#cr-panel .crb p { margin-bottom:10px; font-size:13.5px; }
#cr-panel ol { margin:0 0 10px 18px; font-size:13.5px; } #cr-panel li { margin-bottom:5px; }
#cr-panel b { color:#021937; }

/* The chat itself, added 12 Sep 2026. Before this the panel held only the
   static advice and there was nothing to type into, which is why it was
   reported as "not active". The advice is still underneath; the conversation
   sits above it because that is what the tab promises. */
#cr-panel .crlog { max-height:38vh; overflow-y:auto; margin:0 0 10px; }
#cr-panel .crlog:empty { display:none; }
#cr-panel .crmsg { margin:0 0 8px; padding:9px 11px; border-radius:9px; font-size:13.5px; line-height:1.5;
                   white-space:pre-wrap; word-wrap:break-word; }
/* pre-wrap is safe HERE — this is a live web page, not an email. It is banned
   in the letters because Outlook renders with Word, which ignores it and melts
   a whole letter into one paragraph. */
#cr-panel .cr-you { background:#eaf0f7; color:#123; margin-left:22px; }
#cr-panel .cr-cr  { background:#f6f7f9; color:#333; border-left:3px solid #fc2b03; }
#cr-panel .cr-sys { background:none; color:#8a97a8; font-size:12.5px; padding:2px 2px 6px; }
#cr-panel .crform { display:flex; gap:6px; align-items:flex-end; margin:0 0 12px; }
#cr-panel .crform textarea { flex:1; resize:vertical; min-height:40px; border:1px solid #c8d2de;
                             border-radius:8px; padding:8px 10px; font-size:13.5px; line-height:1.45; font-family:inherit; color:#123; }
#cr-panel .crform button { border:0; background:#fc2b03; color:#fff; border-radius:8px;
                           padding:10px 14px; font-weight:700; font-size:13px; line-height:1; font-family:inherit; cursor:pointer; }
#cr-panel .crform button[disabled] { opacity:.5; cursor:default; }

/* Ask R. Wingo — the LEFT-hand tab and panel (16 Sep 2026). Coach Ritchie,
   the software, lives on the right; the person lives on the left, as on
   AI-901, so a student always knows which of the two they are talking to.
   Green marks the person; orange marks the assistant. */
#rw-tab { position:fixed; left:0; top:46%; z-index:60; background:#021937; color:#fff; border:2px solid #2e9d5b; border-left:0; border-radius:0 8px 8px 0; padding:10px 9px; font:800 11px/1.25 'Segoe UI',Arial,sans-serif; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.25); }
#rw-tab span { color:#5fd08f; display:block; }
#rw-tab small { display:block; color:#9fb0c8; font-weight:600; font-size:9.5px; letter-spacing:.08em; margin-top:3px; }
#rw-tab i { display:block; width:8px; height:8px; border-radius:50%; background:#5b6b7d; margin:6px auto 0; }
#rw-tab i.on { background:#35c07a; box-shadow:0 0 0 3px rgba(53,192,122,.3); }
#rw-panel { position:fixed; left:14px; bottom:14px; z-index:61; width:min(380px,calc(100vw - 28px)); max-height:78vh; overflow:auto; background:#fff; border:1px solid #dfe4ea; border-top:4px solid #2e9d5b; border-radius:10px; box-shadow:0 10px 40px rgba(2,25,55,.3); font:14px/1.55 'Segoe UI',Arial,sans-serif; color:#555; }
#rw-panel[hidden] { display:none; }
#rw-panel .crh { display:flex; align-items:center; gap:10px; background:#021937; color:#fff; padding:12px 14px; }
#rw-panel .crh b { display:block; font-size:14px; color:#fff; }
#rw-panel .crh small { color:#9fb0c8; font-size:11.5px; }
#rw-panel .crh small.on { color:#5fd08f; }
#rw-panel .crx { margin-left:auto; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; line-height:1; }
#rw-panel .crb { padding:14px 16px; }
#rw-panel .crb p { margin-bottom:10px; font-size:13.5px; }
#rw-panel .crb b { color:#021937; }
#rw-panel .rwnote { background:#f3faf6; border-left:3px solid #2e9d5b; border-radius:0 6px 6px 0; padding:9px 11px; font-size:13px; }
#rw-panel .crlog { max-height:38vh; overflow-y:auto; margin:0 0 10px; }
#rw-panel .crlog:empty { display:none; }
#rw-panel .crmsg { margin:0 0 8px; padding:9px 11px; border-radius:9px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
#rw-panel .cr-you { background:#eaf0f7; color:#123; margin-left:22px; }
#rw-panel .cr-ins { background:#f3faf6; color:#333; border-left:3px solid #2e9d5b; }
#rw-panel .cr-sys { background:none; color:#8a97a8; font-size:12.5px; padding:2px 2px 6px; }
#rw-panel .crform { display:flex; gap:6px; align-items:flex-end; margin:0 0 12px; }
#rw-panel .crform textarea { flex:1; resize:vertical; min-height:40px; border:1px solid #c8d2de; border-radius:8px; padding:8px 10px; font-size:13.5px; line-height:1.45; font-family:inherit; color:#123; }
#rw-panel .crform button { border:0; background:#2e9d5b; color:#fff; border-radius:8px; padding:10px 14px; font-weight:700; font-size:13px; line-height:1; font-family:inherit; cursor:pointer; }
#rw-panel .crform button[disabled] { opacity:.5; cursor:default; }
#rw-panel .pres { font-size:12px; margin:0 0 8px; color:#78828f; }
#rw-panel .pres b.on { color:#2e7d32; }
#rw-panel .rwfoot { font-size:12.5px; color:#8a97a8; }
/* Phones: both side tabs drop to the lower edge. This must come AFTER the
   tabs' own rules — an earlier copy of it sat near the top of the file, lost
   to the later `top:46%`, and stretched the tab from mid-screen to 88px above
   the bottom (found 16 Sep 2026). */
@media (max-width:640px) { #cr-tab, #rw-tab { top:auto; bottom:88px; padding:8px 7px; font-size:10px; } }
#cr-panel .crpane[hidden] { display:none; }
#cr-panel .crshot { display:flex; align-items:center; gap:8px; margin:-6px 0 10px; font-size:12px; color:#78828f; }
#cr-panel .crshot img { max-height:48px; border:1px solid #dfe4ea; border-radius:4px; }
#cr-panel .crshot button { background:none; border:0; color:#b32a08; cursor:pointer; font-size:12px; font-weight:700; }