@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
  :root{
    --hr-primary:#1a56db;
    --hr-primary-dark:#1240a8;
    --hr-secondary:#f0f4ff;
    --hr-accent:#0ea5e9;
    --hr-green:#10b981;
    --hr-bg:#eef2f7;
    --hr-white:#ffffff;
    --hr-text:#1e293b;
    --hr-muted:#64748b;
    --hr-shadow:0 20px 60px rgba(26,86,219,0.18);
  }
  [data-dark="1"]{
     --hr-bg:#0f172a;
    --hr-white:#1e293b;
    --hr-text:#e2e8f0;
    --hr-muted:#94a3b8;
    --hr-secondary:#1e3a5f;
    --hr-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
 #hrToggleBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;

  background: transparent;   /* ❌ remove blue bg */
  border: none;
  border-radius: 0;          /* ❌ remove circle */
  box-shadow: none;          /* ❌ remove glow */
  padding: 0;

  cursor: pointer;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  animation: hrBob 2s ease-in-out infinite; /* ✅ keep floating */
}

#hrToggleBtn:focus,
#hrToggleBtn:focus-visible,
#hrToggleBtn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove hover circle effect */
#hrToggleBtn:hover {
  transform: scale(1.08);
  box-shadow: none;
}

/* Image styling (important) */
#hrToggleBtn img {
  width: 55px;
  height: 55px;
  display: block;
}

/* Floating animation */
@keyframes hrBob {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
  #hrNotifDot{
    position:absolute;top:4px;right:4px;width:14px;height:14px;
    background:#ef4444;border-radius:50%;border:2px solid white;
    animation:hrBlink 1.5s infinite;
  }
  @keyframes hrBlink{0%,100%{opacity:1;}50%{opacity:0.3;}}
  #hrbot{
    position:fixed;bottom:96px;right:24px;width:380px;height:580px;
    background:var(--hr-white);border-radius:20px;
    box-shadow:var(--hr-shadow);
    display:flex;flex-direction:column;
    font-family:"Plus Jakarta Sans",sans-serif;
    overflow:hidden; z-index: 10001;
    transform:scale(0.85) translateY(20px);opacity:0;
    transition:transform 0.35s cubic-bezier(.34,1.56,.64,1),opacity 0.3s;
    pointer-events:none;
	
  }
  #hrbot.hrVisible{transform:scale(1) translateY(0);opacity:1;pointer-events:all;}
  #hrbotHeader{
    background:linear-gradient(135deg,var(--hr-primary) 0%,var(--hr-accent) 100%);
    padding:14px 16px;display:flex;align-items:center;gap:12px;
    position:relative;overflow:hidden;
  }
  #hrbotHeader::before{content:"";position:absolute;top:-30px;right:-20px;
    width:120px;height:120px;border-radius:50%;
    background:rgba(255,255,255,0.08);pointer-events:none;}
  .hrAvatar{width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,0.2);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;flex-shrink:0;border:2px solid rgba(255,255,255,0.3);}
  .hrHeaderInfo{flex:1;}
  .hrHeaderInfo .hrTitle{color:white;font-weight:700;font-size:15px;line-height:1.2;}
  .hrHeaderInfo .hrStatus{color:rgba(255,255,255,0.8);font-size:11px;display:flex;align-items:center;gap:4px;}
  .hrOnlineDot{width:7px;height:7px;background:#4ade80;border-radius:50%;animation:hrBlink 2s infinite;}
  #hrCloseBtn{background:rgba(255,255,255,0.15);border:none;color:white;
    width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;
    display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
  #hrCloseBtn:hover{background:rgba(255,255,255,0.3);}
  #hrchat{flex:1;padding:14px;overflow-y:auto;background:var(--hr-bg);
    background-image:radial-gradient(circle at 20% 50%,rgba(26,86,219,0.03) 0%,transparent 60%),
    radial-gradient(circle at 80% 20%,rgba(14,165,233,0.03) 0%,transparent 60%);}
  #hrchat::-webkit-scrollbar{width:4px;}
  #hrchat::-webkit-scrollbar-track{background:transparent;}
  #hrchat::-webkit-scrollbar-thumb{background:rgba(26,86,219,0.2);border-radius:4px;}
  .hrmsgRow{display:flex;margin:4px 0;animation:hrSlideIn 0.3s ease;}
  .hrmsgRow.hrUserRow{justify-content:flex-end;}
  @keyframes hrSlideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  .hrmsg{padding:10px 14px;border-radius:18px;max-width:96%;
    font-size:13px;line-height:1.55;word-break:break-word;}
  .hruser{background:linear-gradient(135deg,var(--hr-primary),var(--hr-accent));
    color:white;border-bottom-right-radius:4px;}
  .hrbot{background:var(--hr-white);color:var(--hr-text);
    border-bottom-left-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.07);}
  .hrTyping{display:flex;align-items:center;gap:4px;padding:10px 14px;
    background:var(--hr-white);border-radius:18px;border-bottom-left-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.07);width:fit-content;}
  .hrTyping span{width:7px;height:7px;background:var(--hr-muted);border-radius:50%;
    animation:hrDot 1.2s infinite;}
  .hrTyping span:nth-child(2){animation-delay:0.2s;}
  .hrTyping span:nth-child(3){animation-delay:0.4s;}
  @keyframes hrDot{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}
  .hrCard{background:var(--hr-secondary);border-radius:10px;padding:10px 12px;margin-top:6px;
    border-left:3px solid var(--hr-primary);width:100%;}
  .hrCardRow{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;border-bottom:1px solid rgba(26,86,219,0.08);}
  .hrCardRow:last-child{border-bottom:none;}
  .hrCardLabel{color:var(--hr-muted);font-weight:500;}
  .hrCardValue{color:var(--hr-text);font-weight:600;text-align:right;}
  #hrChips{padding:4px 8px;display:flex;flex-wrap:wrap;gap:4px;
    background:var(--hr-white);border-top:1px solid rgba(0,0,0,0.06);}
  .hrChip{background:var(--hr-secondary);color:var(--hr-primary);
    border:1px solid rgba(26,86,219,0.2);border-radius:20px;
    padding:6px 6px;font-size:11.5px;font-weight:600;cursor:pointer;
    transition:all 0.2s;font-family:inherit;white-space:nowrap; margin:1px 1px;display:inline-block;}
  .hrChip:hover{background:var(--hr-primary);color:white;transform:translateY(-1px);}
  #hrinputArea{display:flex;align-items:center;padding:10px 12px;
    background:var(--hr-white);border-top:1px solid rgba(0,0,0,0.06);gap:8px;}
  #hrmsg{flex:1;border:1.5px solid rgba(26,86,219,0.15);border-radius:24px;
    padding:9px 16px;font-size:13px;outline:none;
    font-family:inherit;background:#f8faff;color:var(--hr-text);
    transition:border-color 0.2s,box-shadow 0.2s;}
  #hrmsg:focus{border-color:var(--hr-primary);
    box-shadow:0 0 0 3px rgba(26,86,219,0.1);}
  [data-dark="1"] #hrmsg{background:#0f172a;color:#e2e8f0;border-color:rgba(148,163,184,0.3);}
  #hrsend{width:40px;height:40px;background:linear-gradient(135deg,var(--hr-primary),var(--hr-accent));
    color:white;border:none;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:transform 0.2s,box-shadow 0.2s;
    box-shadow:0 4px 12px rgba(26,86,219,0.3);}
  #hrsend:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(26,86,219,0.45);}
  #hrsend svg{width:18px;height:18px;fill:white;}
#hrPopup {
  position: fixed;
  bottom: 130px;     /* ⬆ slightly higher than before */
  right: 130px;       /* ⬅ align better with bot */

  background: white;
  border-radius: 12px;
  padding: 10px 14px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.15);

  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
  white-space: nowrap;

  animation: hrSlideIn 0.4s ease;

  z-index: 10002;    /* ✅ MUST be above bot */
}

/* 🔥 Better arrow (points to bot) */
#hrPopup::after {
  content: "";
  position: absolute;
  bottom: -6px;      /* ⬇ place below bubble */
  right: 20px;

  width: 12px;
  height: 12px;
  background: white;

  transform: rotate(45deg);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
}

#hrSuggest{overflow:hidden;}
.hrChipScroll{display:flex;flex-wrap:nowrap;overflow-x:scroll;width:100%;padding-bottom:6px;}
.hrChipScroll::-webkit-scrollbar{height:8px;display:block;}
.hrChipScroll::-webkit-scrollbar-track{background:#f0f4ff;}
.hrChipScroll::-webkit-scrollbar-thumb{background:rgba(26,86,219,0.35);border-radius:4px;}

.hrAttMenu{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;}
.hrAttBtn{background:var(--hr-secondary);color:var(--hr-primary);
  border:1px solid rgba(26,86,219,0.2);border-radius:12px;
  padding:8px 13px;font-size:10px;font-weight:600;cursor:pointer;
  text-align:left;font-family:inherit;transition:all 0.2s;width:100%;}
.hrAttBtn:hover{background:var(--hr-primary);color:white;transform:translateX(3px);}
.hrAttTable{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px;}
.hrAttTable th{background:var(--hr-primary);color:white;padding:5px 8px;text-align:left;font-weight:600;}
.hrAttTable td{padding:5px 8px;border-bottom:1px solid rgba(26,86,219,0.08);color:var(--hr-text);}
.hrAttTable tr:last-child td{border-bottom:none;}
.hrAttTable tr:nth-child(even) td{background:rgba(26,86,219,0.03);}
.hrAttTotal{margin-top:6px;font-size:12px;font-weight:600;color:var(--hr-primary);text-align:right;}
.hrBadgeAmber{background:#fef9c3;color:#854d0e;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;}
.hrBadgeRed{background:#fee2e2;color:#991b1b;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;}
.hrBadgeGreen{background:#dcfce7;color:#166534;border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600;}

@keyframes hrBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}