/* ===================== Design tokens (match site brand) ===================== */
:root{
  --isp-navy:#0A2A5E; --isp-navy-2:#123B85; --isp-navy-soft:#EAF0FB;
  --isp-orange:#F5821F; --isp-orange-2:#FFA24D;
  --isp-green:#22B24C;
  --isp-ink:#16233F; --isp-ink-muted:#5A6B87; --isp-line:#E5EAF2;
  --isp-bg-soft:#F6F9FD;
  --isp-radius-lg:18px; --isp-radius-md:12px; --isp-radius-sm:8px;
  --isp-shadow-sm:0 2px 10px rgba(10,42,94,0.06);
  --isp-shadow-md:0 12px 32px rgba(10,42,94,0.12);
  --isp-shadow-lg:0 20px 50px rgba(10,42,94,0.20);
}

/* This plugin sets display:flex directly on several elements (the chat
   panel, forms) that also get the HTML `hidden` attribute toggled by JS.
   Without this rule, that display:flex can outrank the browser's default
   [hidden]{display:none} and the element stays visible even while
   "hidden" — this is what was keeping the chat panel visible by default
   and not fully closing. This single rule fixes it everywhere at once. */
[hidden]{ display:none !important; }

/* ===================== Auth (login/signup) ===================== */
.isp-auth-wrap{ max-width:420px; margin:40px auto; background:#fff; border:1px solid var(--isp-line); border-radius:var(--isp-radius-lg); padding:32px; box-shadow:var(--isp-shadow-sm); font-family:inherit; }
.isp-tabs{ display:flex; gap:6px; margin-bottom:22px; background:var(--isp-bg-soft); padding:4px; border-radius:100px; flex-wrap:wrap; }
.isp-tab-btn{ flex:1; min-width:88px; padding:9px 12px; border:none; background:transparent; cursor:pointer; border-radius:100px; font-weight:600; font-size:12.5px; color:var(--isp-ink-muted); transition:background .2s ease, color .2s ease; white-space:nowrap; }
.isp-tab-btn.active{ background:var(--isp-navy); color:#fff; }
.isp-auth-wrap form{ display:flex; flex-direction:column; gap:14px; }
.isp-auth-wrap label{ display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--isp-ink); }
.isp-auth-wrap input{ padding:11px 13px; border:1px solid var(--isp-line); border-radius:var(--isp-radius-sm); font-size:14.5px; }
.isp-auth-wrap input:focus{ outline:none; border-color:var(--isp-navy); box-shadow:0 0 0 3px var(--isp-navy-soft); }
.isp-auth-wrap button{ padding:12px 16px; background:linear-gradient(135deg,var(--isp-orange),var(--isp-orange-2)); color:#fff; border:none; border-radius:100px; cursor:pointer; font-weight:700; font-size:14.5px; margin-top:4px; }
.isp-auth-wrap .isp-tab-link-btn{
  background:none; color:var(--isp-navy); font-size:13px; font-weight:600;
  padding:4px; margin-top:0; box-shadow:none; text-decoration:underline;
  text-underline-offset:2px;
}
.isp-auth-wrap .isp-tab-link-btn:hover{ color:var(--isp-orange); }
.isp-auth-wrap #isp-forgot-tab .isp-auth-wrap{ max-width:none; margin:0; padding:0; border:none; box-shadow:none; }
.isp-error{ color:#B32D2E; background:#FDEDED; padding:10px 14px; border-radius:var(--isp-radius-sm); font-size:13.5px; margin-bottom:14px; }
.isp-notice{ padding:14px 18px; background:var(--isp-navy-soft); border-left:4px solid var(--isp-navy); border-radius:var(--isp-radius-sm); color:var(--isp-navy); font-size:14px; }
.isp-muted{ color:var(--isp-ink-muted); font-size:13px; }

/* ===================== Dashboard — SaaS-app feel ===================== */
.isp-dashboard{
  max-width:1080px; margin:0 auto; font-family:inherit; color:var(--isp-ink);
}

.isp-bell{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--isp-bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--isp-navy); }
.isp-bell-count{ position:absolute; top:-3px; right:-3px; background:var(--isp-orange); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px; }

.isp-dashboard-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
@media (max-width:820px){ .isp-dashboard-grid{ grid-template-columns:1fr; } }

.isp-card{
  background:#fff; border:1px solid var(--isp-line); border-radius:var(--isp-radius-lg);
  padding:22px; box-shadow:var(--isp-shadow-sm);
}
.isp-card h3{ margin:0 0 14px; font-size:16px; color:var(--isp-navy); display:flex; align-items:center; gap:8px; }
.isp-card + .isp-card{ margin-top:20px; }

/* Dashboard Quick Query box */
.isp-quick-query-card{ border-color:var(--isp-orange); background:linear-gradient(180deg, var(--isp-orange-soft, #FDECDB) 0%, #fff 70px); margin-bottom:20px; }
.isp-quick-query-card form{ display:flex; flex-direction:column; gap:10px; }
.isp-quick-query-card select,
.isp-quick-query-card textarea{
  width:100%; padding:10px 12px; border:1px solid var(--isp-line); border-radius:var(--isp-radius-sm);
  font-size:13.5px; font-family:inherit; color:var(--isp-ink); background:#fff; resize:vertical;
}
.isp-quick-query-card select:focus, .isp-quick-query-card textarea:focus{ outline:none; border-color:var(--isp-navy); }

/* Announcements */
.isp-announce-item{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--isp-navy-soft); border-radius:var(--isp-radius-sm);
  padding:14px 16px; margin-bottom:10px; position:relative;
}
.isp-announce-item strong{ display:block; color:var(--isp-navy); font-size:14px; margin-bottom:3px; }
.isp-announce-item p{ margin:0; font-size:13.5px; color:var(--isp-ink); }
.isp-announce-dismiss{ margin-left:auto; background:none; border:none; color:var(--isp-ink-muted); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px; }
.isp-announce-link{ display:inline-block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--isp-orange); }
.isp-announce-dismiss:hover{ color:var(--isp-orange); }

.isp-milestone-list{ list-style:none; margin:0; padding:0; }
.isp-milestone-list li{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--isp-line); font-size:14px; }
.isp-milestone-list li:last-child{ border-bottom:none; }
.isp-milestone-date{ font-weight:700; color:var(--isp-navy); background:var(--isp-navy-soft); padding:4px 10px; border-radius:100px; font-size:12px; white-space:nowrap; }

.isp-notice-list{ list-style:none; margin:0; padding:0; }
.isp-notice-list li{ padding:10px 0; border-bottom:1px solid var(--isp-line); font-size:13.5px; }
.isp-notice-list li:last-child{ border-bottom:none; }
.isp-notice-list a{ color:var(--isp-orange); font-weight:600; font-size:12.5px; }

.isp-profile-card p{ margin:6px 0; font-size:14px; color:var(--isp-ink-muted); }
.isp-profile-card strong{ color:var(--isp-ink); }
.isp-edit-profile summary{ cursor:pointer; color:var(--isp-navy); font-weight:600; font-size:13.5px; margin-top:12px; }
.isp-edit-profile form{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.isp-edit-profile label{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; }
.isp-edit-profile input{ padding:9px 11px; border:1px solid var(--isp-line); border-radius:var(--isp-radius-sm); }
.isp-edit-profile button{ padding:9px 16px; background:var(--isp-navy); color:#fff; border:none; border-radius:100px; cursor:pointer; font-weight:600; width:fit-content; font-size:13.5px; }

/* ===================== Floating chat widget (site-wide) ===================== */
.isp-float-launcher{
  position:fixed; right:22px; bottom:22px; z-index:9999;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--isp-orange),var(--isp-orange-2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(245,130,31,0.4);
  cursor:pointer; transition:transform .2s ease;
}
.isp-float-launcher:hover{ transform:scale(1.06); }
.isp-float-launcher-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--isp-green); border:2px solid #fff;
  animation:isp-pulse 1.8s infinite;
}
@keyframes isp-pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,178,76,.5); }
  70%{ box-shadow:0 0 0 8px rgba(34,178,76,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,178,76,0); }
}
@media (prefers-reduced-motion:reduce){ .isp-float-launcher-dot{ animation:none; } }

.isp-float-panel{
  position:fixed; right:22px; bottom:92px; z-index:9999;
  width:320px; max-width:90vw; height:420px; max-height:65vh;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--isp-shadow-lg);
  display:flex; flex-direction:column;
  font-family:inherit;
}

/* On mobile, the site header adds a fixed app-style bottom tab bar
   (~58px tall, plus the device's own safe-area inset for phones with a
   home-indicator/gesture bar). Without this, the launcher and panel sit
   at a fixed 22px/92px from the true screen bottom and end up stacked
   directly on top of the tab bar's rightmost "More" tab. This raises
   both just enough to clear it, on any phone, notch or not. */
@media (max-width:960px){
  .isp-float-launcher{ bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }
  .isp-float-panel{ bottom:calc(144px + env(safe-area-inset-bottom, 0px)); max-height:58vh; }
}
@media (max-width:480px){
  .isp-float-panel{ right:10px; left:10px; width:auto; bottom:90px; }
}

.isp-float-header{
  background:linear-gradient(120deg,var(--isp-navy),var(--isp-navy-2));
  color:#fff; padding:16px 16px 16px 14px;
  display:flex; align-items:center; gap:10px;
}
.isp-float-avatar{
  width:36px; height:36px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.isp-float-title{ flex:1; min-width:0; }
.isp-float-title strong{ display:block; font-size:14.5px; line-height:1.3; }
.isp-float-title span{ display:block; font-size:11.5px; color:#C9D6EE; }
.isp-float-icon-btn{
  background:rgba(255,255,255,0.12); border:none; color:#fff;
  width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.isp-float-icon-btn + .isp-float-icon-btn{ margin-left:4px; }

.isp-lang-btn{ display:inline-block; width:auto; margin:6px 6px 0 0; padding:8px 16px; }

.isp-float-body{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  background:#fff;
}
.isp-float-msg{ max-width:88%; }
.isp-float-msg.bot{ align-self:flex-start; }
.isp-float-msg.user{ align-self:flex-end; }
.isp-float-msg.bot p{ background:var(--isp-navy-soft); color:var(--isp-ink); padding:10px 13px; border-radius:12px 12px 12px 3px; margin:0 0 6px; font-size:13.5px; line-height:1.5; }
.isp-float-msg.user p{ background:linear-gradient(135deg,var(--isp-orange),var(--isp-orange-2)); color:#fff; padding:10px 13px; border-radius:12px 12px 3px 12px; margin:0; font-size:13.5px; }

.isp-float-btn-outline{
  display:block; text-align:center; width:100%;
  padding:10px 14px; margin-top:8px;
  background:#fff; border:1.5px solid var(--isp-navy); color:var(--isp-navy);
  border-radius:100px; font-weight:700; font-size:13.5px; cursor:pointer;
  text-decoration:none;
}
.isp-wa-continue{
  border-color:var(--isp-green); color:var(--isp-green);
}
.isp-float-or{ text-align:center; font-size:11px; color:var(--isp-ink-muted); margin:8px 0; }

.isp-float-form{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.isp-float-form label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--isp-ink); }
.isp-float-form input, .isp-float-form textarea{ padding:9px 11px; border:1px solid var(--isp-line); border-radius:8px; font-size:13.5px; font-family:inherit; resize:vertical; }
.isp-float-form button{ padding:10px; background:linear-gradient(135deg,var(--isp-orange),var(--isp-orange-2)); color:#fff; border:none; border-radius:100px; font-weight:700; font-size:13.5px; cursor:pointer; }

.isp-float-replyrow{ display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--isp-line); }
.isp-float-replyrow input{ flex:1; padding:10px 12px; border:1px solid var(--isp-line); border-radius:100px; font-size:13.5px; }
.isp-float-replyrow button{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--isp-orange),var(--isp-orange-2)); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.isp-float-status{ text-align:center; font-size:12px; color:var(--isp-ink-muted); padding:6px 14px 12px; margin:0; }

/* Quick links (dashboard) */
.isp-quicklinks{ display:flex; flex-direction:column; gap:8px; }
.isp-quicklink-btn{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; background:var(--isp-bg-soft); border-radius:var(--isp-radius-sm);
  color:var(--isp-navy); font-weight:600; font-size:13.5px; text-decoration:none;
  transition:background .2s ease;
}
.isp-quicklink-btn:hover{ background:var(--isp-navy-soft); }

/* Reviews (dashboard CTA + public page) */
.isp-reviews-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.isp-review-card{ background:#fff; border:1px solid var(--isp-line); border-radius:var(--isp-radius-md); padding:18px; }
.isp-review-stars{ color:var(--isp-orange); font-size:14px; margin-bottom:8px; }
.isp-review-card p{ font-size:13.5px; color:var(--isp-ink); margin:0 0 10px; line-height:1.6; }
.isp-review-name{ font-size:12.5px; font-weight:700; color:var(--isp-navy); }
.isp-review-name span{ font-weight:500; color:var(--isp-ink-muted); }

/* Student's own past reviews (shown above the write-review form) */
.isp-my-reviews{ margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--isp-line); }
.isp-my-reviews h4{ font-size:13px; font-weight:700; color:var(--isp-navy); margin:0 0 10px; }
.isp-my-review-item{ background:var(--isp-bg-soft); border-radius:var(--isp-radius-sm); padding:12px 14px; margin-bottom:8px; }
.isp-my-review-item p{ font-size:13px; color:var(--isp-ink); margin:6px 0 4px; }
.isp-my-review-date{ font-size:11px; color:var(--isp-ink-muted); }

/* Refer & Earn */
.isp-refer-link-row{ display:flex; gap:6px; }
.isp-refer-link-row input{ flex:1; padding:9px 11px; border:1px solid var(--isp-line); border-radius:var(--isp-radius-sm); font-size:12.5px; color:var(--isp-ink-muted); background:var(--isp-bg-soft); }
.isp-copy-btn{ padding:9px 14px; background:var(--isp-navy); color:#fff; border:none; border-radius:var(--isp-radius-sm); cursor:pointer; font-weight:600; font-size:12.5px; white-space:nowrap; }

/* Reviews carousel */
.isp-review-carousel{ max-width:480px; margin:0 auto; text-align:center; }
.isp-review-carousel-slide{ background:#fff; border:1px solid var(--isp-line); border-radius:var(--isp-radius-lg); padding:28px; box-shadow:var(--isp-shadow-sm); }
.isp-review-carousel-slide .isp-review-stars{ font-size:16px; }
.isp-review-carousel-slide p{ font-size:15px; margin:12px 0; }
.isp-review-carousel-dots{ display:flex; justify-content:center; gap:6px; margin-top:14px; }
.isp-review-carousel-dots span{ width:7px; height:7px; border-radius:50%; background:var(--isp-line); }
.isp-review-carousel-dots span.active{ background:var(--isp-orange); width:18px; border-radius:4px; }

/* ===================== SaaS App Shell (dashboard) ===================== */
.isp-app{
  display:flex; align-items:stretch;
  min-height:100vh;
  background:#fff;
  position:relative;
  /* Full-bleed: breaks out of the theme's centered content container so
     the dashboard spans the entire browser width, not just the page's
     normal content column. For the cleanest result, use a "blank /
     full-width" page template for whichever page hosts [isp_dashboard] —
     same approach used for the other standalone pages in this project. */
  width:100vw;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
}

.isp-hamburger{
  display:none; position:absolute; top:14px; left:14px; z-index:20;
  width:36px; height:36px; border-radius:8px; background:var(--isp-navy); color:#fff;
  border:none; font-size:16px; cursor:pointer;
}

/* ---- Sidebar ---- */
.isp-sidebar{
  width:250px; flex-shrink:0;
  background:linear-gradient(180deg, var(--isp-navy), var(--isp-navy-2));
  color:#fff; display:flex; flex-direction:column;
  padding:22px 18px;
}
.isp-sidebar-brand{ font-family:'Poppins', 'Inter', sans-serif; font-weight:700; font-size:16px; margin-bottom:22px; padding:0 4px; }
.isp-sidebar-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.isp-nav-item{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; color:#C9D6EE;
  padding:11px 12px; border-radius:10px; cursor:pointer;
  font-size:13.5px; font-weight:600; text-align:left; width:100%;
  position:relative;
}
.isp-nav-item:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.isp-nav-item.active{ background:rgba(255,255,255,0.14); color:#fff; }
.isp-nav-badge{
  margin-left:auto; background:var(--isp-orange); color:#fff;
  font-size:10.5px; font-weight:700; min-width:18px; height:18px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.isp-sidebar-promo{
  background:rgba(255,255,255,0.08); border-radius:var(--isp-radius-md);
  padding:14px; margin:14px 0; font-size:12.5px;
}
.isp-sidebar-promo strong{ display:block; font-size:13px; margin-bottom:4px; }
.isp-sidebar-promo p{ color:#C9D6EE; margin:0 0 10px; font-size:12px; }
.isp-sidebar-promo-btn{
  width:100%; padding:8px; background:var(--isp-orange); color:#fff; border:none;
  border-radius:100px; font-weight:700; font-size:12px; cursor:pointer;
}
.isp-sidebar-user{
  display:flex; align-items:center; gap:10px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,0.12);
}
.isp-sidebar-user strong{ display:block; font-size:13px; }
.isp-sidebar-user span{ font-size:11.5px; color:#C9D6EE; }
.isp-sidebar-logout{
  display:block; text-align:center; margin-top:12px; padding:8px;
  color:#C9D6EE; font-size:12.5px; font-weight:600; text-decoration:none;
  border-radius:8px; border:1px solid rgba(255,255,255,0.16);
}
.isp-sidebar-logout:hover{ background:rgba(255,255,255,0.08); color:#fff; }

/* ---- Main area ---- */
.isp-app-main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--isp-bg-soft); }
.isp-app-topbar{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding:16px 24px; background:#fff; border-bottom:1px solid var(--isp-line);
}
.isp-dash-search{
  flex:1; max-width:420px; padding:10px 16px; border:1px solid var(--isp-line);
  border-radius:100px; font-size:13.5px; background:var(--isp-bg-soft);
}
.isp-dash-search:focus{ outline:none; border-color:var(--isp-navy); background:#fff; }

.isp-app-content{ flex:1; padding:24px; overflow-y:auto; }
.isp-section-title{ font-size:19px; font-weight:600; color:var(--isp-navy); margin:0 0 18px; font-family:'Poppins','Inter',sans-serif; }

/* ---- AI usage ring ---- */
.isp-ai-ring-wrap{ display:flex; align-items:center; gap:18px; }
.isp-ai-ring{ flex-shrink:0; transform:rotate(-90deg); }
.isp-ai-ring-bg{ fill:none; stroke:var(--isp-navy-soft); stroke-width:3; }
.isp-ai-ring-fg{ fill:none; stroke:var(--isp-orange); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .4s ease; }
.isp-ai-ring-num{ transform:rotate(90deg); transform-origin:18px 18px; font-size:6.5px; font-weight:700; fill:var(--isp-navy); font-family:'Poppins','Inter',sans-serif; }
.isp-ai-ring-label{ transform:rotate(90deg); transform-origin:18px 18px; font-size:3.6px; fill:var(--isp-ink-muted); }

.isp-form-label{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--isp-ink); }
.isp-form-label input{ padding:10px 12px; border:1px solid var(--isp-line); border-radius:var(--isp-radius-sm); font-size:14px; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .isp-app{ min-height:100vh; }
  .isp-hamburger{ display:flex; align-items:center; justify-content:center; }
  .isp-sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:9998;
    transform:translateX(-100%); transition:transform .25s ease;
    width:230px; box-shadow:var(--isp-shadow-lg);
    overflow-y:auto;
  }
  .isp-app.isp-sidebar-open .isp-sidebar{ transform:translateX(0); }
  .isp-app-topbar{ padding:14px 16px 14px 56px; flex-wrap:wrap; }
  .isp-dash-search{ max-width:none; order:3; flex-basis:100%; }
  .isp-app-content{ padding:16px; }
  .isp-dashboard-grid{ grid-template-columns:1fr; gap:16px; }
  .isp-ai-ring-wrap{ flex-direction:column; align-items:flex-start; gap:12px; text-align:left; }
  .isp-refer-link-row{ flex-direction:column; }
  .isp-refer-link-row input{ width:100%; }
}

@media (max-width:520px){
  .isp-app-topbar{ padding-left:52px; }
  .isp-section-title{ font-size:17px; }
  .isp-card{ padding:16px; }
  .isp-quicklink-btn{ flex-direction:column; align-items:flex-start; gap:6px; }
  .isp-milestone-list li{ flex-wrap:wrap; }
}

/* When the mobile sidebar is open, dim the rest of the app and let a tap
   outside close it again. */
@media (max-width:900px){
  .isp-app.isp-sidebar-open::after{
    content:""; position:fixed; inset:0; background:rgba(10,42,94,0.35);
    z-index:9997;
  }
}