/* ============================
   NJTech Modern Chatbot (Revamp)
   - Glassmorphism + subtle depth
   - Fixed invalid "background:" rules
   - ALL declarations use !important
   - Dark & Light scheme aware
   - Reduced-motion friendly
   ============================ */

/* THEME TOKENS */
:root{
  --nj-blue:#009EFF !important;
  --nj-orange:#F7931E !important;
  --nj-bg:#0f141a !important;
  --nj-panel:#0d1117e6 !important; /* glassy */
  --nj-border:#ffffff22 !important;
  --nj-text:#e7eef5 !important;
  --nj-text-muted:#c8d2dc !important;
  --nj-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
  --nj-shadow-soft: 0 10px 30px rgba(0,0,0,.35) !important;
  --nj-ring: 0 0 0 3px color-mix(in oklab, var(--nj-blue) 30%, transparent) !important;
}

/* Light mode polish */
@media (prefers-color-scheme: light){
  :root{
    --nj-bg:#0d1220 !important;
    --nj-panel:rgba(20,24,32,0.85) !important;
    --nj-border:#ffffff33 !important;
    --nj-text:#f2f7fb !important;
    --nj-text-muted:#dae3ec !important;
  }
}

/* ACCESSIBILITY */
@media (prefers-contrast: more){
  :root{
    --nj-border:#ffffff55 !important;
  }
}

/* BASE / UTILS (scoped) */
.njgm-panel, .njgm-launcher, .njgm-body, .njgm-msg, .njgm-input, .njgm-send, .njgm-header, .njgm-footer, .njgm-close{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji" !important;
}

.njgm-panel *{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  box-sizing: border-box !important;
}

.njgm-hidden{ display:none !important; }

/* LAUNCHER */
.njgm-launcher{
  position:fixed !important; right:18px !important; bottom:18px !important; z-index:2147483647 !important;
  width:64px !important; height:64px !important; border-radius:999px !important;
  background: radial-gradient(120% 120% at 80% 0%, var(--nj-orange) 0%, var(--nj-blue) 45%, #0abfff 100%) !important;
  box-shadow: var(--nj-shadow-soft) !important;
  display:grid !important; place-items:center !important; color:#fff !important; font-weight:700 !important; cursor:pointer !important;
  border:0 !important; outline: none !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
.njgm-launcher:after{
  content:"" !important;
  position:absolute !important; inset:-4px !important; border-radius:inherit !important;
  background: conic-gradient(from 180deg, color-mix(in oklab, var(--nj-blue) 60%, transparent), color-mix(in oklab, var(--nj-orange) 60%, transparent), transparent) !important;
  filter: blur(14px) !important; opacity:.35 !important; z-index:-1 !important;
}
.njgm-launcher:hover{
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
  filter: brightness(1.05) !important;
}
.njgm-launcher:focus-visible{
  box-shadow: var(--nj-shadow-soft), var(--nj-ring) !important;
}
.njgm-launcher *{ pointer-events:none !important; }

/* PANEL */
.njgm-panel{
  position:fixed !important; right:18px !important; bottom:96px !important; z-index:2147483647 !important;
  width:min(420px, calc(100vw - 24px)) !important; height:560px !important; display:none !important;
  border-radius:16px !important; overflow:hidden !important;
  background:var(--nj-panel) !important;
  border:1px solid var(--nj-border) !important;
  color:var(--nj-text) !important;
  box-shadow: var(--nj-shadow) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  transition: transform .18s ease-out, opacity .18s ease-out !important;
  will-change: transform, opacity !important;
}
.njgm-panel.open{ display:block !important; animation: njgm-pop .18s ease-out !important; }
@keyframes njgm-pop{ from{ transform: translateY(8px) scale(.98) !important; opacity:.6 !important; } to{ transform:none !important; opacity:1 !important; } }

/* HEADER */
.njgm-header{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important;
  padding:12px 14px !important; border-bottom:1px solid var(--nj-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent) !important;
  position: sticky !important; top:0 !important; z-index:2 !important;
}
.njgm-brand{ display:flex !important; align-items:center !important; gap:10px !important; }
.njgm-logo{ width:40px !important; height:40px !important; display:block !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)) !important; border-radius:8px !important; }
.njgm-title{ font-weight:600 !important; letter-spacing:.2px !important; color:var(--nj-text) !important; }

/* CLOSE BUTTON */
.njgm-close{
  background: transparent !important; border:0 !important; color:#fff !important; font-size:22px !important; line-height:1 !important; width:40px !important; height:40px !important;
  display:grid !important; place-items:center !important; cursor:pointer !important; border-radius:10px !important;
  transition: background .15s ease, transform .12s ease !important;
}
.njgm-close:hover{ background: rgba(255,255,255,.08) !important; transform: scale(1.03) !important; }
.njgm-close:active{ transform: scale(.98) !important; }
.njgm-close:focus-visible{ box-shadow: var(--nj-ring) !important; }

/* BODY */
.njgm-body{
  padding:12px !important; height:380px !important; overflow:auto !important; display:flex !important; flex-direction:column !important; gap:10px !important;
  scroll-behavior:smooth !important; overscroll-behavior:contain !important;
  scrollbar-width: thin !important; scrollbar-color: var(--nj-blue) transparent !important;
}
.njgm-body::-webkit-scrollbar{ width:8px !important; }
.njgm-body::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--nj-blue), var(--nj-orange)) !important; border-radius:8px !important; }
.njgm-body::-webkit-scrollbar-track{ background: transparent !important; }

/* MESSAGES */
.njgm-msg{
  padding:10px 12px !important; border-radius:16px !important; max-width:88% !important; white-space:pre-wrap !important; line-height:1.55 !important; font-size:14px !important;
  border:1px solid var(--nj-border) !important; position: relative !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.22) inset !important, 0 1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter: blur(4px) !important;
}
.njgm-msg.user{
  align-self:flex-end !important;
  background:linear-gradient(180deg, rgba(0,158,255,.18), rgba(0,158,255,.12)) !important;
  border-color: color-mix(in oklab, var(--nj-blue) 35%, transparent) !important;
}
.njgm-msg.bot{
  align-self:flex-start !important;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)) !important;
}
.njgm-msg time{ display:block !important; font-size:11px !important; color:var(--nj-text-muted) !important; margin-top:6px !important; }

/* TYPING INDICATOR */
.njgm-typing{
  opacity:.9 !important; font-style:italic !important; color:var(--nj-orange) !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
}
.njgm-typing:after{
  content:"" !important; width:22px !important; height:6px !important; border-radius:999px !important; display:inline-block !important;
  background: radial-gradient(circle at 10% 50%, rgba(255,255,255,.9) 15%, transparent 16%) 0 0/8px 100% repeat-x !important;
  animation: njgm-dots 1s infinite steps(4) !important;
}
@keyframes njgm-dots{ to{ background-position:-32px 0 !important; } }

/* FOOTER & FORM */
.njgm-footer{ padding:10px !important; border-top:1px solid var(--nj-border) !important; background: linear-gradient(0deg, rgba(255,255,255,.04), transparent) !important; }
.njgm-form{ display:grid !important; grid-template-columns:1fr auto !important; gap:8px !important; align-items:end !important; }

.njgm-input{
  resize:none !important; width:100% !important; min-height:44px !important; max-height:140px !important;
  border-radius:12px !important; border:1px solid var(--nj-border) !important;
  background:rgba(255,255,255,.06) !important; color:var(--nj-text) !important; padding:10px 12px !important; outline:none !important;
  line-height:1.4 !important; caret-color: var(--nj-blue) !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.njgm-input::placeholder{ color: var(--nj-text-muted) !important; }
.njgm-input:focus{
  border-color: color-mix(in oklab, var(--nj-blue) 45%, transparent) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: var(--nj-ring) !important;
}

.njgm-send{
  border-radius:12px !important; border:1px solid transparent !important; padding:10px 14px !important;
  background: linear-gradient(135deg, var(--nj-blue), var(--nj-orange)) !important; color:#fff !important; font-weight:700 !important; cursor:pointer !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .2s ease !important;
}
.njgm-send:hover{ filter: brightness(1.06) !important; transform: translateY(-1px) !important; }
.njgm-send:active{ transform: translateY(0) scale(.98) !important; }
.njgm-send:disabled{ opacity:.55 !important; cursor:not-allowed !important; }
.njgm-send:focus-visible{ box-shadow: var(--nj-ring) !important; }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .njgm-launcher, .njgm-panel, .njgm-close, .njgm-send{
    transition: none !important;
    animation: none !important;
  }
}

/* SMALL SCREENS */
@media (max-width: 420px){
  .njgm-panel{
    right:12px !important; bottom:88px !important; width: calc(100vw - 24px) !important; height: 72vh !important;
  }
  .njgm-body{ height: calc(72vh - 122px) !important; }
}

/* ORIGINAL CLASS NAMES KEPT FOR DROP-IN COMPAT */