/* Support chat widget + admin Support inbox.
   Student side: floating launcher bottom-right of the landing page opening a
   messenger panel. Admin side: the 💬 Support view inside #adminPanel.
   Everything is prefixed sp- to stay out of the app's way.
   Layering: .screen is z-index 80 and app modals are 220/230, so the widget
   lives at 210 — above the landing page, below every dialog. */

:root{
  --sp-cyan:#00b5e2; --sp-blue:#0a6ea6; --sp-navy:#04314e; --sp-ink:#132a3a;
  --sp-line:#dbe7ee; --sp-soft:#f2f7fa; --sp-danger:#c0392b; --sp-ok:#1d9d5f;
}

/* ---------- launcher ---------- */
#spLauncher{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:210;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#spLauncher[hidden]{display:none}
#spLaunchBtn{position:relative;width:58px;height:58px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));color:#fff;
  box-shadow:0 8px 26px rgba(4,49,78,.38),0 2px 8px rgba(4,49,78,.24);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease}
#spLaunchBtn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 32px rgba(4,49,78,.45)}
#spLaunchBtn:active{transform:scale(.96)}
#spLaunchBtn:focus-visible{outline:3px solid rgba(0,181,226,.5);outline-offset:3px}
#spLaunchBtn svg{width:27px;height:27px;transition:transform .22s ease,opacity .18s ease;position:absolute}
#spLaunchBtn .sp-ic-open{opacity:1}
#spLaunchBtn .sp-ic-close{opacity:0;transform:rotate(-90deg)}
#spLauncher.sp-open .sp-ic-open{opacity:0;transform:rotate(90deg)}
#spLauncher.sp-open .sp-ic-close{opacity:1;transform:rotate(0)}
#spBadge{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:11px;
  background:#e74c3c;color:#fff;font-size:11.5px;font-weight:800;line-height:21px;text-align:center;
  border:2px solid #fff;box-sizing:border-box}
#spBadge[hidden]{display:none}
@keyframes spPulse{0%{box-shadow:0 0 0 0 rgba(0,181,226,.55)}100%{box-shadow:0 0 0 18px rgba(0,181,226,0)}}
#spLauncher.sp-pulse #spLaunchBtn{animation:spPulse 1.6s ease-out 3}

/* toast preview of a new admin reply while the panel is closed */
#spToast{max-width:290px;background:#fff;border:1px solid var(--sp-line);border-radius:14px 14px 4px 14px;
  box-shadow:0 12px 34px rgba(4,49,78,.25);padding:11px 13px;cursor:pointer;
  animation:spSlideIn .25s ease;font-size:13px;color:var(--sp-ink)}
#spToast[hidden]{display:none}
#spToast b{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sp-blue);margin-bottom:3px}
#spToast .sp-toast-x{float:right;border:none;background:none;color:#8ba4b5;font-size:15px;cursor:pointer;padding:0 0 0 8px;line-height:1}

/* ---------- panel ---------- */
#spPanel{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 70px);z-index:210;
  width:384px;max-width:calc(100vw - 32px);height:min(620px,calc(100dvh - 120px));
  display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(3,30,50,.45),0 4px 18px rgba(3,30,50,.25);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--sp-ink);
  animation:spSlideIn .22s ease;transform-origin:bottom right}
#spPanel[hidden]{display:none}
@keyframes spSlideIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #spPanel,#spToast{animation:none}
  #spLauncher.sp-pulse #spLaunchBtn{animation:none}
}

/* header */
.sp-head{flex:none;position:relative;padding:16px 18px 14px;color:#fff;
  background:linear-gradient(135deg,#04314e 0%,#0a5d8c 70%,#0a6ea6 100%)}
.sp-head::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,181,226,.9),transparent)}
.sp-head-row{display:flex;align-items:center;gap:11px}
.sp-back{flex:none;border:none;background:rgba(255,255,255,.14);color:#fff;width:30px;height:30px;border-radius:9px;
  cursor:pointer;font-size:15px;line-height:1;display:none;align-items:center;justify-content:center}
.sp-back:hover{background:rgba(255,255,255,.26)}
#spPanel.sp-can-back .sp-back{display:flex}
.sp-ava{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;
  border:2px solid rgba(255,255,255,.35);position:relative}
.sp-ava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:#2ecc71;border:2px solid #06456b}
.sp-head-txt{flex:1;min-width:0}
.sp-head-txt b{display:block;font-size:15px;font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-head-txt small{display:block;font-size:11.5px;color:#a9cde2;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-x{flex:none;border:none;background:rgba(255,255,255,.14);color:#fff;width:30px;height:30px;border-radius:9px;
  cursor:pointer;font-size:16px;line-height:1}
.sp-x:hover{background:rgba(255,255,255,.26)}

/* body / views */
.sp-body{flex:1;overflow-y:auto;overscroll-behavior:contain;background:var(--sp-soft);scroll-behavior:smooth}
.sp-body::-webkit-scrollbar{width:9px}
.sp-body::-webkit-scrollbar-thumb{background:#c3d4de;border-radius:5px;border:2px solid var(--sp-soft)}
.sp-view{padding:16px}

/* home view */
.sp-hello{font-size:19px;font-weight:800;color:var(--sp-navy);margin:4px 2px 2px}
.sp-hello-sub{font-size:13px;color:#587184;margin:0 2px 14px;line-height:1.5}
.sp-card{background:#fff;border:1px solid var(--sp-line);border-radius:14px;padding:14px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(13,36,56,.05)}
.sp-newbtn{display:flex;align-items:center;gap:12px;width:100%;border:none;cursor:pointer;text-align:left;
  background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));color:#fff;border-radius:14px;padding:15px 16px;
  font:inherit;font-weight:700;font-size:14.5px;box-shadow:0 8px 22px rgba(0,140,190,.35);
  transition:transform .15s ease,box-shadow .15s ease;margin-bottom:12px}
.sp-newbtn:hover{transform:translateY(-1px);box-shadow:0 11px 26px rgba(0,140,190,.42)}
.sp-newbtn small{display:block;font-weight:500;font-size:12px;color:#d7f2fb;margin-top:2px}
.sp-newbtn .sp-newic{flex:none;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:18px}
/* admin-only shortcut into the dashboard inbox, above the student test flow */
.sp-newbtn.sp-admlink{background:linear-gradient(135deg,#0b3954,#04314e);border:1px solid rgba(255,210,63,.4);
  box-shadow:0 8px 22px rgba(4,49,78,.35)}
.sp-newbtn.sp-admlink small{color:#ffd97a}
.sp-sec-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;color:#7b93a4;margin:16px 2px 8px}
.sp-sec-title button{border:none;background:none;color:var(--sp-blue);font-weight:700;font-size:12px;cursor:pointer;padding:0}
.sp-note{font-size:11.5px;color:#8299a9;text-align:center;margin-top:14px;line-height:1.5}

/* conversation rows */
.sp-row{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--sp-line);
  background:#fff;border-radius:13px;padding:12px 13px;margin-bottom:8px;cursor:pointer;font:inherit;
  transition:border-color .15s,box-shadow .15s}
.sp-row:hover{border-color:#9fc4da;box-shadow:0 3px 10px rgba(13,36,56,.08)}
.sp-row-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--sp-soft);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.sp-row-main{flex:1;min-width:0}
.sp-row-top{display:flex;align-items:center;gap:7px}
.sp-row-top b{flex:1;min-width:0;font-size:13.5px;color:var(--sp-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row-when{flex:none;font-size:11px;color:#90a7b7}
.sp-row-prev{font-size:12.5px;color:#64808f;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row-prev.sp-unread-prev{color:var(--sp-ink);font-weight:650}
.sp-row-bottom{display:flex;align-items:center;gap:6px;margin-top:6px}
.sp-chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  border-radius:7px;padding:2.5px 7px;background:#e8f0f5;color:#5a7488}
.sp-chip.st-open{background:#e3f2fd;color:#0d5c8f}
.sp-chip.st-pending{background:#fff3d6;color:#8a6100}
.sp-chip.st-resolved{background:#e2f6ea;color:#177245}
.sp-chip.st-closed{background:#eceff1;color:#5f7381}
.sp-chip.pr-high{background:#ffe9d6;color:#a35410}
.sp-chip.pr-urgent{background:#ffe0dc;color:#b02a1c}
.sp-unread-dot{flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#e74c3c;color:#fff;
  font-size:10.5px;font-weight:800;line-height:19px;text-align:center}
.sp-empty{padding:26px 12px;text-align:center;color:#7f97a7;font-size:13px;line-height:1.6}
.sp-empty .sp-empty-ic{font-size:30px;display:block;margin-bottom:8px}

/* new-conversation view */
.sp-label{display:block;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#6d8698;margin:14px 2px 7px}
.sp-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-cat{display:flex;align-items:center;gap:9px;border:1.5px solid var(--sp-line);background:#fff;border-radius:12px;
  padding:10px 11px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:650;color:#3d5565;text-align:left;
  transition:border-color .12s,background .12s}
.sp-cat:hover{border-color:#9fc4da}
.sp-cat.on{border-color:var(--sp-cyan);background:#eefafe;color:var(--sp-navy);box-shadow:0 0 0 1px var(--sp-cyan) inset}
.sp-cat span{font-size:17px}
.sp-input,.sp-ta{width:100%;box-sizing:border-box;border:1.5px solid var(--sp-line);border-radius:11px;background:#fff;
  padding:11px 12px;font:inherit;font-size:13.5px;color:var(--sp-ink);outline:none;transition:border-color .12s}
.sp-input:focus,.sp-ta:focus{border-color:var(--sp-cyan);box-shadow:0 0 0 3px rgba(0,181,226,.14)}
.sp-ta{resize:none;min-height:88px;max-height:180px;line-height:1.5}
.sp-send-big{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;border:none;
  border-radius:12px;padding:13px;cursor:pointer;font:inherit;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));box-shadow:0 8px 20px rgba(0,140,190,.35)}
.sp-send-big:hover{filter:brightness(1.06)}
.sp-send-big:disabled{opacity:.6;cursor:wait}
.sp-err{margin-top:10px;font-size:12.5px;font-weight:650;color:var(--sp-danger)}
.sp-err:empty{display:none}

/* chat view */
.sp-thread{display:flex;flex-direction:column;gap:2px;padding:14px 14px 6px}
.sp-day{display:flex;align-items:center;gap:10px;margin:12px 0 8px;color:#8fa6b5;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase}
.sp-day::before,.sp-day::after{content:"";flex:1;height:1px;background:#dde8ee}
.sp-msg{display:flex;gap:8px;margin:2px 0;max-width:86%}
.sp-msg.me{align-self:flex-end;flex-direction:row-reverse}
.sp-msg.them{align-self:flex-start}
.sp-msg-ava{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:auto}
.sp-bub{border-radius:16px;padding:9px 13px;font-size:13.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;
  white-space:pre-wrap;min-width:0}
.sp-msg.me .sp-bub{background:linear-gradient(135deg,#0a86c2,var(--sp-blue));color:#fff;border-bottom-right-radius:5px}
.sp-msg.them .sp-bub{background:#fff;border:1px solid var(--sp-line);color:var(--sp-ink);border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(13,36,56,.05)}
.sp-msg-meta{font-size:10.5px;color:#93aaba;margin:3px 6px 6px;display:flex;gap:5px}
.sp-msg.me .sp-msg-meta{justify-content:flex-end}
.sp-seen{color:var(--sp-blue);font-weight:700}
.sp-sys{align-self:center;text-align:center;font-size:11.5px;color:#7f97a7;background:#e9f1f6;border-radius:9px;
  padding:5px 12px;margin:8px 0;max-width:90%}
.sp-img{display:block;max-width:230px;max-height:190px;border-radius:12px;cursor:zoom-in;margin-top:6px;
  border:1px solid rgba(0,0,0,.08)}
.sp-msg.me .sp-bub:has(.sp-img):not(:has(.sp-txt)){background:none;padding:0}
.sp-typing .sp-bub{display:flex;gap:4px;align-items:center;padding:12px 15px}
.sp-typing .sp-dot{width:7px;height:7px;border-radius:50%;background:#9db4c3;animation:spBlink 1.2s infinite}
.sp-typing .sp-dot:nth-child(2){animation-delay:.18s}
.sp-typing .sp-dot:nth-child(3){animation-delay:.36s}
@keyframes spBlink{0%,70%,100%{opacity:.35;transform:none}35%{opacity:1;transform:translateY(-2.5px)}}

/* resolved / rating / closed banners */
.sp-banner{margin:10px 14px;border-radius:13px;padding:13px 14px;font-size:13px;line-height:1.5;background:#fff;
  border:1px solid var(--sp-line);text-align:center}
.sp-banner.sp-resolved{border-color:#bfe6cf;background:#f2fbf6}
.sp-banner .sp-banner-title{font-weight:800;color:var(--sp-navy);margin-bottom:4px}
.sp-stars{display:flex;justify-content:center;gap:5px;margin:9px 0 4px;font-size:24px}
.sp-star{cursor:pointer;border:none;background:none;padding:2px;filter:grayscale(1);opacity:.45;transition:transform .12s,filter .12s,opacity .12s}
.sp-star:hover{transform:scale(1.2)}
.sp-star.on{filter:none;opacity:1}
.sp-banner .sp-mini{border:1px solid var(--sp-line);background:#fff;border-radius:9px;padding:7px 13px;font:inherit;
  font-size:12.5px;font-weight:700;color:var(--sp-blue);cursor:pointer;margin:4px 3px 0}
.sp-banner .sp-mini:hover{border-color:#9fc4da}
.sp-thanks{color:var(--sp-ok);font-weight:700}

/* composer */
.sp-foot{flex:none;border-top:1px solid var(--sp-line);background:#fff;padding:10px 12px}
.sp-attach-prev{display:flex;align-items:center;gap:9px;background:var(--sp-soft);border:1px solid var(--sp-line);
  border-radius:10px;padding:6px 9px;margin-bottom:8px;font-size:12px;color:#4b6678}
.sp-attach-prev img{width:38px;height:38px;object-fit:cover;border-radius:7px}
.sp-attach-prev button{margin-left:auto;border:none;background:none;color:#90a7b7;font-size:15px;cursor:pointer}
.sp-compose{display:flex;align-items:flex-end;gap:8px}
.sp-tool{flex:none;width:36px;height:36px;border:none;border-radius:10px;background:var(--sp-soft);color:#57768c;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.sp-tool:hover{background:#e2edf3}
.sp-compose .sp-ta{min-height:38px;height:38px;max-height:120px;padding:9px 12px;border-radius:12px}
.sp-send{flex:none;width:38px;height:38px;border:none;border-radius:11px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));display:flex;align-items:center;justify-content:center;
  transition:transform .12s,opacity .12s}
.sp-send:hover{transform:scale(1.06)}
.sp-send:disabled{opacity:.45;cursor:default;transform:none}
.sp-send svg{width:17px;height:17px}
.sp-count{font-size:10.5px;color:#a3b7c4;text-align:right;margin-top:4px}
.sp-count.warn{color:#c0392b;font-weight:700}
.sp-count:empty{display:none}
.sp-signin{padding:30px 22px;text-align:center}
.sp-signin button{margin-top:12px;border:none;border-radius:11px;padding:11px 20px;font:inherit;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--sp-cyan),var(--sp-blue));cursor:pointer}

/* lightbox */
#spLightbox{position:fixed;inset:0;z-index:240;background:rgba(4,17,27,.88);display:flex;align-items:center;
  justify-content:center;cursor:zoom-out;padding:26px}
#spLightbox[hidden]{display:none}
#spLightbox img{max-width:94vw;max-height:92vh;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.6)}

/* mobile: full-screen sheet */
@media (max-width:560px){
  #spPanel{right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;border-radius:0}
  .sp-cats{grid-template-columns:1fr 1fr}
  #spLauncher{bottom:max(16px,env(safe-area-inset-bottom))}
}

/* ---------- admin Support inbox (inside #adminPanel) ---------- */
.adm-navbadge{display:inline-block;min-width:18px;padding:0 5px;height:18px;border-radius:9px;background:#e74c3c;
  color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;margin-left:5px;vertical-align:1px}
.adm-navbadge[hidden]{display:none}

.sp-adm-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.sp-adm-filters{display:flex;flex-wrap:wrap;gap:5px}
.sp-adm-filters button{border:1px solid #cfdde6;background:#fff;border-radius:9px;padding:6px 11px;font:inherit;
  font-size:12px;font-weight:700;color:#48687d;cursor:pointer}
.sp-adm-filters button.on{background:#0b5f8e;border-color:#0b5f8e;color:#fff}
.sp-adm-filters button b{font-weight:800}
.sp-adm-search{flex:1;min-width:150px;border:1px solid #cfdde6;border-radius:9px;padding:7px 11px;font:inherit;font-size:12.5px}
.sp-adm-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid #d9e5ec;background:#fff;
  border-radius:12px;padding:11px 13px;margin-bottom:7px;cursor:pointer;font:inherit;transition:border-color .12s,box-shadow .12s}
.sp-adm-row:hover{border-color:#8fb8d2;box-shadow:0 3px 9px rgba(13,36,56,.09)}
.sp-adm-row.sp-unread{border-left:4px solid #e74c3c}
.sp-adm-row .sp-row-ic{width:36px;height:36px}
.sp-adm-who{font-size:12px;color:#6b8496;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-adm-thread-wrap{background:#f4f8fb;border:1px solid #d9e5ec;border-radius:14px;overflow:hidden}
.sp-adm-thread{max-height:430px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:14px}
.sp-adm-thread .sp-msg.me .sp-bub{background:linear-gradient(135deg,#0a86c2,#0a6ea6)}
.sp-note-bub{align-self:flex-end;max-width:86%;background:#fff8dc;border:1px solid #efd98f;border-radius:13px;
  padding:9px 13px;font-size:13px;color:#6b5711;white-space:pre-wrap;line-height:1.5}
.sp-note-tag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#a58718;display:block;margin-bottom:3px}
.sp-adm-ctx{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.sp-adm-ctx i{font-style:normal;background:#eef4f8;border:1px solid #d9e5ec;border-radius:8px;padding:3px 9px;
  font-size:11.5px;color:#4e6b7e}
.sp-adm-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
.sp-adm-actions .sp-stbtn{border:1px solid #cfdde6;background:#fff;border-radius:9px;padding:6px 11px;font:inherit;
  font-size:12px;font-weight:700;color:#48687d;cursor:pointer}
.sp-adm-actions .sp-stbtn.on{background:#0b5f8e;border-color:#0b5f8e;color:#fff}
.sp-adm-actions select{border:1px solid #cfdde6;border-radius:9px;padding:6px 8px;font:inherit;font-size:12px}
.sp-adm-actions .sp-del{margin-left:auto;border:1px solid #e5b5ae;background:#fff5f3;color:#b02a1c;border-radius:9px;
  padding:6px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.sp-adm-compose{border-top:1px solid #d9e5ec;background:#fff;padding:10px 12px}
.sp-adm-compose.sp-note-mode{background:#fffbe8}
.sp-adm-compose-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;font-size:12px}
.sp-adm-compose-tools label{display:flex;align-items:center;gap:5px;font-weight:700;color:#6b5711;cursor:pointer}
.sp-adm-compose-tools select{border:1px solid #cfdde6;border-radius:8px;padding:5px 7px;font:inherit;font-size:12px;max-width:190px}
.sp-adm-canned-save{border:none;background:none;color:#0b5f8e;font-size:12px;font-weight:700;cursor:pointer;padding:0}
.sp-adm-rating{color:#b8860b;font-weight:800}