/* =============================================================================
   Rang Technologies - Consultant + HR Portal
   assets/css/help-assistant.css  (release 9.8.0)

   The offline help assistant (floating "Help" button + chat panel) and the
   Help & SOP topic list, for BOTH portals (assets/js/help-assistant.js).
   Uses the portal's brand variables when present (--candidate-brand-primary
   on the Consultant Portal, --purple / --teal / --ink / --line in both).

   Stacking: Consultant Portal z 28 (above the sticky header 20, below the
   mobile sidebar 29/30, modals 60+, pop-ups 70+, toast 1100 and the Quick
   Tour 10060). HR Portal z 205 (above its toast 80 and editor bar 40, below
   the export backdrop 210, the mobile navigation 10021+, the activity drawer
   10050 and every dialog 12000+). On narrow screens the button sits above
   the centred toast area and respects the device safe areas.
   ========================================================================== */
.rha-root{
  --rha-accent:var(--candidate-brand-primary,var(--purple,#8b2ae8));
  --rha-accent-2:var(--teal,#0b93a3);
  --rha-ink:var(--ink,#141618);
  --rha-muted:var(--muted,#66717a);
  --rha-line:var(--line,#e7eef0);
  --rha-card:var(--card,#ffffff);
  position:fixed;right:calc(18px + env(safe-area-inset-right, 0px));bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:28;font-family:inherit;line-height:1.45;color:var(--rha-ink);
}
.rha-root[hidden]{display:none}
.rha-root.rha-portal-hr{z-index:205}
.rha-root *,.rha-root *::before,.rha-root *::after{box-sizing:border-box}

.rha-fab{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:999px;
  background:var(--rha-accent);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 26px rgba(20,24,40,.22)}
.rha-fab:hover{filter:brightness(1.07)}
.rha-fab:focus-visible{outline:3px solid var(--rha-accent-2);outline-offset:3px}
.rha-fab svg{flex:0 0 auto}

.rha-panel{position:fixed;right:calc(18px + env(safe-area-inset-right, 0px));bottom:calc(82px + env(safe-area-inset-bottom, 0px));
  width:min(392px,calc(100vw - 32px));max-height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--rha-card);color:var(--rha-ink);border:1px solid var(--rha-line);border-radius:18px;overflow:hidden;
  box-shadow:0 22px 60px rgba(20,24,40,.24)}
.rha-panel[hidden]{display:none}
.rha-head{display:flex;align-items:flex-start;gap:4px;padding:14px 10px 12px 16px;border-bottom:1px solid var(--rha-line)}
.rha-head-text{flex:1 1 auto;min-width:0}
.rha-title{margin:0;font-size:16px;font-weight:800;color:var(--rha-ink)}
.rha-sub{margin:3px 0 0;font-size:12.5px;color:var(--rha-muted)}
.rha-icon-btn{flex:0 0 auto;display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;
  color:var(--rha-muted);cursor:pointer}
.rha-icon-btn:hover{background:rgba(20,24,40,.06);color:var(--rha-ink)}
.rha-icon-btn:focus-visible,.rha-chip:focus-visible,.rha-open:focus-visible,.rha-link:focus-visible,.rha-send:focus-visible,
.rha-sop-ask:focus-visible{outline:3px solid var(--rha-accent-2);outline-offset:2px}

.rha-log{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain}
.rha-msg{max-width:92%;padding:10px 12px;border-radius:14px;font-size:14px;overflow-wrap:anywhere}
.rha-msg p{margin:0 0 6px}
.rha-msg p:last-child{margin-bottom:0}
.rha-msg-user{align-self:flex-end;background:var(--rha-accent);color:#fff;border-bottom-right-radius:4px}
.rha-msg-bot{align-self:flex-start;background:#f4f6f8;border:1px solid var(--rha-line);border-bottom-left-radius:4px}
.rha-msg-bot.is-locked{background:#fdf3e2;border-color:#f0dcb4}
.rha-answer-title{font-weight:800}
.rha-muted{color:var(--rha-muted);font-size:13px}
.rha-steps{margin:6px 0 8px;padding-left:22px}
.rha-steps li{margin:3px 0}
.rha-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.rha-chip{border:1px solid var(--rha-line);background:#fff;color:var(--rha-ink);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;
  text-align:left;cursor:pointer;max-width:100%}
.rha-chip:hover{border-color:var(--rha-accent);color:var(--rha-accent)}
.rha-open{display:inline-flex;align-items:center;gap:6px;margin-top:4px;min-height:38px;padding:0 14px;border:0;border-radius:10px;
  background:var(--rha-accent-2);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.rha-open:hover{filter:brightness(1.06)}
.rha-link{display:inline-block;margin-top:6px;padding:4px 0;border:0;background:none;color:var(--rha-accent-2);font:inherit;font-size:13px;
  font-weight:700;text-decoration:underline;cursor:pointer}
.rha-ask{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--rha-line);background:var(--rha-card)}
.rha-input{flex:1 1 auto;min-width:0;min-height:42px;padding:0 12px;border:1px solid var(--rha-line);border-radius:10px;background:#fff;
  color:var(--rha-ink);font:inherit;font-size:16px}
.rha-input:focus{outline:2px solid var(--rha-accent);outline-offset:0;border-color:transparent}
.rha-send{flex:0 0 auto;min-height:42px;padding:0 16px;border:0;border-radius:10px;background:var(--rha-accent);color:#fff;font:inherit;
  font-size:14px;font-weight:700;cursor:pointer}
.rha-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
  .rha-root{right:calc(12px + env(safe-area-inset-right, 0px));bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
  /* 9.8.1: a round icon-only button on phones so it covers less of the page; the word "Help"
     stays available to screen readers (and as the button's tooltip). */
  .rha-fab{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;gap:0}
  .rha-fab span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .rha-panel{left:calc(8px + env(safe-area-inset-left, 0px));right:calc(8px + env(safe-area-inset-right, 0px));
    top:calc(56px + env(safe-area-inset-top, 0px));bottom:calc(8px + env(safe-area-inset-bottom, 0px));width:auto;max-height:none}
  .rha-root.is-open .rha-fab{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .rha-panel{animation:rha-in .16s ease-out}
  @keyframes rha-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media print{.rha-root{display:none!important}}

/* ------------------------------------------------ Help & SOP topic list */
.rha-sop{color:var(--ink,#141618)}
.rha-sop-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.rha-sop-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.rha-sop-search{flex:1 1 260px;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line,#e7eef0);border-radius:12px;background:#fff;
  font:inherit;font-size:16px;color:inherit}
.rha-sop-search:focus{outline:2px solid var(--candidate-brand-primary,var(--purple,#8b2ae8));border-color:transparent}
.rha-sop-ask{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:12px;
  background:var(--candidate-brand-primary,var(--purple,#8b2ae8));color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.rha-sop .rha-muted{color:var(--muted,#66717a);font-size:13px}
.rha-sop-count{margin:4px 0 14px}
.rha-sop-group{margin:0 0 18px}
.rha-sop-group[hidden],.rha-sop-topic[hidden]{display:none}
.rha-sop-group-title{margin:0 0 8px;font-size:15px;font-weight:800;color:var(--teal-dark,var(--teal,#087f8d))}
.rha-sop-topic{border:1px solid var(--line,#e7eef0);border-radius:12px;background:#fff;margin:0 0 8px}
.rha-sop-topic>summary{cursor:pointer;padding:12px 14px;font-weight:700;font-size:14.5px;list-style-position:inside}
.rha-sop-topic>summary:focus-visible{outline:3px solid var(--teal,#0b93a3);outline-offset:2px;border-radius:12px}
.rha-sop-body{padding:0 14px 14px;font-size:14px;line-height:1.55}
.rha-sop-body p{margin:0 0 8px}
.rha-sop-body .rha-steps{margin:4px 0 10px;padding-left:22px}
.rha-sop-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.rha-sop .rha-open{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:0;border-radius:10px;
  background:var(--teal,#0b93a3);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.rha-sop-ref{font-size:12px}
.rha-flow{margin:10px 0;padding:0}
.rha-flow-scroll{overflow-x:auto;border:1px solid var(--line,#e7eef0);border-radius:10px;background:#fff;padding:8px}
.rha-flow img{display:block;max-width:100%;height:auto;margin:0 auto}
.rha-flow figcaption{margin-top:6px;font-size:12.5px;color:var(--muted,#66717a)}