/* Assistant mode (js/assistant.js): Bee's panel, the glowing frame round the app while it is open, the ring it points with,
   and its two buttons (the side menu's, the phone top bar's bee). On a computer the panel is a rail on the right, full
   height, and the app shrinks beside it, never covered; the pop-ups and drawers that cover the window stay in the app's
   part. On a phone or a narrow window (html.rba-sheet) it is a sheet over the lower part of the screen, the app above it.
   The glow is the brand blue as an RGB triple (--rba-c, MyRecruiterBee's --brand). */
:root{--rba-w:clamp(340px,26vw,420px);--rba-h:min(56vh,520px);--rba-c:20 161 192}
@supports (height:1dvh){:root{--rba-h:min(56dvh,520px)}}

/* the side menu's button: a bee face and the word, a soft glow that breathes so people notice it; solid while open */
.nav.rba-nav{margin:0 0 8px;border:1px solid rgb(var(--rba-c) / .55);background:rgb(var(--rba-c) / .08);color:var(--brand-d);font-weight:600;animation:rbaBtnGlow 2.8s ease-in-out infinite}
.nav.rba-nav:hover{background:rgb(var(--rba-c) / .16)}
.nav.rba-nav .rba-bee{width:22px;height:22px;flex:none;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1.5px rgb(var(--rba-c) / .6);display:grid;place-items:center}
.nav.rba-nav .rba-bee img,.mbar-bee img{width:16px;height:16px;display:block}
.nav.rba-nav[aria-pressed="true"]{background:rgb(var(--rba-c));border-color:rgb(var(--rba-c));color:#fff;animation:none;box-shadow:0 0 14px rgb(var(--rba-c) / .55)}
.nav.rba-nav:focus-visible,.mbar-bee:focus-visible{outline:2px solid rgb(var(--rba-c));outline-offset:2px}
@keyframes rbaBtnGlow{0%,100%{box-shadow:0 0 4px rgb(var(--rba-c) / .25)}50%{box-shadow:0 0 14px rgb(var(--rba-c) / .6),0 0 0 3px rgb(var(--rba-c) / .14)}}
/* the phone's top bar: a round bee, a finger-sized 40 px */
.mbar-bee{display:none}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  .nav.rba-nav{display:none}
  .mbar-bee:not(.hide){display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid rgb(var(--rba-c) / .6);background:rgb(var(--rba-c) / .08);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:rbaBtnGlow 2.8s ease-in-out infinite}
  .mbar-bee img{width:20px;height:20px}
  .mbar-bee[aria-pressed="true"]{background:rgb(var(--rba-c));border-color:rgb(var(--rba-c));animation:none}
}

/* the app beside the rail; the pop-ups, drawers and the toast stay in the app's part */
html.rba-on:not(.rba-sheet) .shell{margin-right:var(--rba-w)}
html.rba-on:not(.rba-sheet) :is(.ap-bg,#dm-pop,#dm-side,#co-pop,#cn-dlg,#fj-pop .fj-pbk,#ag-kpi,#sec-agent .lg-wrap,.lic-bg,#tpl-panel,#rt-pop,#rm-runs-bg,#vm-pop,#mg-cards .mg-cw,.cva-scrim,
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbg,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side){right:var(--rba-w)!important}
html.rba-on:not(.rba-sheet) #fj-pop .fj-pcard{left:calc(50% - var(--rba-w) / 2)!important;max-width:calc(100vw - var(--rba-w) - 32px)}
html.rba-on:not(.rba-sheet) #toast{right:calc(var(--rba-w) + 16px)}
/* the sheet: the page scrolls clear of it, and what Bee marks or points at is brought above it. A pop-up the app opens
   covers the sheet until it closes (they share the lower part of a small screen); Bee's ring stays on top. */
html.rba-on.rba-sheet main{padding-bottom:calc(var(--rba-h) + 24px)}
html.rba-on.rba-sheet{scroll-padding-bottom:var(--rba-h)}

/* the frame: a lit edge round the app with a soft glow inwards, breathing; faster while Bee works */
#rbaGlow{position:fixed;left:0;top:0;bottom:0;right:var(--rba-w);pointer-events:none;z-index:699;display:none;
  box-shadow:inset 0 0 0 3px rgb(var(--rba-c) / .95),inset 0 0 22px 6px rgb(var(--rba-c) / .55),inset 0 0 90px 18px rgb(var(--rba-c) / .2);animation:rbaBreathe 3.6s ease-in-out infinite}
html.rba-on #rbaGlow{display:block}
html.rba-sheet #rbaGlow{right:0;bottom:var(--rba-h);z-index:33}
#rbaGlow.busy{animation-duration:1.1s}
@keyframes rbaBreathe{0%,100%{opacity:.6}50%{opacity:1}}

/* the panel */
#rbaRail{position:fixed;top:0;right:0;bottom:0;width:var(--rba-w);z-index:700;background:var(--surface);color:var(--ink);border-left:1px solid var(--line);display:none;flex-direction:column;box-shadow:-10px 0 30px -18px rgb(0 0 0 / .35);font-family:var(--font)}
html.rba-on #rbaRail{display:flex}
html.rba-sheet .rba-ask textarea{font-size:16px}
html.rba-sheet #rbaRail{top:auto;left:0;width:auto;height:var(--rba-h);z-index:34;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px -12px rgb(0 0 0 / .3);padding-bottom:env(safe-area-inset-bottom)}
#rbaRail *{box-sizing:border-box}
.rba-hd{display:flex;align-items:center;gap:11px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.rba-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--tint);box-shadow:0 0 0 2px rgb(var(--rba-c) / .45)}
.rba-av img{width:24px;height:24px;display:block}
.rba-ttl{min-width:0}
.rba-hd h2{font-size:15px;line-height:20px;font-weight:700;margin:0}
.rba-sub{margin:1px 0 0;font-size:12px;line-height:16px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.rba-sub i{width:7px;height:7px;border-radius:50%;background:rgb(var(--rba-c));box-shadow:0 0 0 3px rgb(var(--rba-c) / .2)}
.rba-x{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;display:grid;place-items:center}
.rba-x:hover{background:var(--hover)}
.rba-x svg{width:16px;height:16px}
.rba-mn+.rba-x{margin-left:0}
.rba-mn svg{width:18px;height:18px}
html:not(.rba-sheet) .rba-mn{display:none}
html:not(.rba-sheet) .rba-mn+.rba-x{margin-left:auto}
.rba-sub span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rba-sub.new{color:var(--ink);font-weight:600}
.rba-x:focus-visible,.rba-send:focus-visible,.rba-tog:focus-visible,.rba-chip:focus-visible,.rba-stop:focus-visible,.rba-call:focus-visible{outline:2px solid rgb(var(--rba-c));outline-offset:2px}
.rba-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px;display:flex;flex-direction:column;gap:9px;background:var(--page)}
.rba-msg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
/* their bubble sits on the right at the width of its words: its width comes from the thread (85%), never from itself, or a
   short message ("What if") was squeezed to one letter a line (Max's 10-22 screenshot) */
.rba-msg.me{align-self:flex-end;flex-direction:row-reverse;max-width:85%}
.rba-msg .mav{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--tint)}
.rba-msg .mav img{width:16px;height:16px;display:block}
.rba-msg .b{padding:8px 11px;border-radius:13px;font-size:13.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.rba-msg.bee .b{max-width:calc(100% - 34px);background:var(--surface);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.rba-msg.me .b{background:var(--ink);color:var(--surface);border-bottom-right-radius:5px}
.rba-msg .b.typing{display:flex;gap:4px;align-items:center;padding:11px 12px}
.rba-msg .b.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:rbaTy 1s infinite}
.rba-msg .b.typing i:nth-child(2){animation-delay:.15s}.rba-msg .b.typing i:nth-child(3){animation-delay:.3s}
@keyframes rbaTy{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.rba-act{align-self:flex-start;margin-left:34px;display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--ink3)}
.rba-act svg{width:12px;height:12px;flex:none;color:rgb(var(--rba-c))}
.rba-act span{min-width:0;overflow-wrap:anywhere}
.rba-act.no{color:var(--warn)}.rba-act.no svg{color:var(--warn)}
.rba-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:34px}
.rba-chip{min-height:40px;border:1px solid var(--line2);background:var(--surface);color:var(--ink2);border-radius:9999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.rba-chip:hover{border-color:rgb(var(--rba-c) / .7);background:rgb(var(--rba-c) / .08)}
/* voice */
.rba-voice{border-top:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.rba-voice[hidden]{display:none}
.rba-orbwrap{position:relative;width:96px;height:96px}
.rba-orb{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgb(255 255 255 / .9),rgb(var(--rba-c) / .55) 45%,rgb(var(--rba-c)) 100%);box-shadow:0 0 0 6px rgb(var(--rba-c) / .12);transition:transform .3s}
.rba-orb.listening{animation:rbaOrb 2.4s ease-in-out infinite}
.rba-orb.speaking{animation:rbaOrb .9s ease-in-out infinite}
@keyframes rbaOrb{0%,100%{transform:scale(.94);box-shadow:0 0 0 4px rgb(var(--rba-c) / .12)}50%{transform:scale(1.04);box-shadow:0 0 0 12px rgb(var(--rba-c) / .18)}}
.rba-call{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;border:4px solid var(--surface);background:#15803D;color:#fff;cursor:pointer;display:grid;place-items:center}
.rba-call svg{width:18px;height:18px}
.rba-call .ic-end{display:none}.rba-call.on .ic-call{display:none}.rba-call.on .ic-end{display:block}.rba-call.on{background:#B91C1C}
.rba-cl{display:none}
.rba-vtxt{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.rba-vstat{margin-top:16px;font-size:12.5px;line-height:17px;color:var(--ink3);text-align:center;min-height:17px}
.rba-vstat.ok{color:var(--good)}.rba-vstat.err{color:var(--bad)}
.rba-vcap{font-size:13px;line-height:18px;font-style:italic;color:var(--ink2);text-align:center;min-height:18px;max-width:100%}
/* the composer */
.rba-foot{border-top:1px solid var(--line);padding:10px 12px 12px;background:var(--surface);display:flex;flex-direction:column;gap:9px}
.rba-ask{display:flex;gap:7px;align-items:flex-end}
.rba-ask textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line2);border-radius:10px;padding:9px 11px;font-size:14px;line-height:20px;max-height:120px;outline:none;color:var(--ink);background:var(--surface)}
.rba-ask textarea:focus{border-color:rgb(var(--rba-c));box-shadow:0 0 0 3px rgb(var(--rba-c) / .15)}
.rba-send{flex:none;width:40px;height:40px;border-radius:10px;border:0;background:rgb(var(--rba-c));color:#fff;cursor:pointer;display:grid;place-items:center}
.rba-send svg{width:16px;height:16px}
.rba-row{display:flex;gap:8px;align-items:center}
.rba-seg{flex:1;display:flex;background:var(--chip);border-radius:10px;padding:3px}
.rba-tog{flex:1;min-height:40px;border:0;background:transparent;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink3);cursor:pointer}
.rba-tog.on{background:var(--surface);color:var(--ink);box-shadow:var(--soft)}
.rba-stop{flex:none;display:none;align-items:center;gap:6px;min-height:40px;border:1px solid var(--bad);background:var(--bad-s);color:var(--bad);border-radius:10px;padding:0 12px;font-size:13px;font-weight:700;cursor:pointer}
.rba-stop svg{width:11px;height:11px}
.rba-stop.show{display:inline-flex}
/* the sheet (a phone): a lower header; in voice one short row (a small orb, what is happening, End call) and no typing
   box, so the conversation keeps most of the sheet; Bee's words are in the thread, so the line under the orb goes */
html.rba-sheet .rba-hd{padding:8px 10px 8px 14px;gap:10px}
html.rba-sheet .rba-av{width:32px;height:32px}
html.rba-sheet .rba-av img{width:20px;height:20px}
html.rba-sheet .rba-voice{flex-direction:row;align-items:center;gap:12px;padding:10px 12px 10px 18px}
html.rba-sheet .rba-orbwrap{display:contents}
html.rba-sheet .rba-orb{width:44px;height:44px;flex:none;box-shadow:0 0 0 3px rgb(var(--rba-c) / .12)}
html.rba-sheet .rba-orb.listening,html.rba-sheet .rba-orb.speaking{animation-name:rbaOrbS}
@keyframes rbaOrbS{0%,100%{transform:scale(.94);box-shadow:0 0 0 2px rgb(var(--rba-c) / .12)}50%{transform:scale(1.04);box-shadow:0 0 0 6px rgb(var(--rba-c) / .16)}}
html.rba-sheet .rba-vtxt{order:1;flex:1;min-width:0;align-items:flex-start;gap:0}
html.rba-sheet .rba-vstat{margin:0;text-align:left;font-size:13px;line-height:18px;font-weight:600;color:var(--ink2)}
html.rba-sheet .rba-vstat.ok{color:var(--good)}html.rba-sheet .rba-vstat.err{color:var(--bad);font-weight:500}
html.rba-sheet .rba-vcap{display:none}
html.rba-sheet .rba-call{order:2;position:static;transform:none;width:auto;height:40px;border:0;border-radius:9999px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;flex:none;white-space:nowrap}
html.rba-sheet .rba-call svg{width:15px;height:15px}
html.rba-sheet .rba-cl{display:inline}
html.rba-sheet #rbaRail.rba-vv .rba-ask{display:none}
/* minimised (js/assistant.js setMin): the sheet is its header alone, a bar at the bottom, and the page gets the room back */
html.rba-sheet.rba-min{--rba-h:calc(57px + env(safe-area-inset-bottom))}
html.rba-sheet.rba-min #rbaRail{height:auto}
html.rba-sheet.rba-min :is(.rba-thread,.rba-voice,.rba-foot){display:none}
html.rba-sheet.rba-min .rba-hd{border-bottom:0;cursor:pointer}
/* while Bee presses: a see-through cover over the app (not the panel), so the person's own clicks wait a moment */
#rbaShield{position:fixed;left:0;top:0;bottom:0;right:var(--rba-w);z-index:698;display:none;cursor:progress}
html.rba-sheet #rbaShield{right:0;bottom:var(--rba-h)}
#rbaShield.on{display:block}
/* a press Bee makes: the control is outlined a moment first; a place it points at gets a pulsing ring and a short note */
.rba-mark{outline:3px solid rgb(var(--rba-c))!important;outline-offset:3px!important;border-radius:6px}
#rbaCue{position:fixed;z-index:100002;pointer-events:none;transform:translate(-50%,-50%);display:none}
#rbaCue .ring{width:56px;height:56px;border-radius:50%;border:3px solid rgb(var(--rba-c));box-shadow:0 0 0 6px rgb(var(--rba-c) / .2);animation:rbaPc 1.1s ease-out infinite}
#rbaCue .tag{position:absolute;left:50%;top:calc(50% + 36px);transform:translateX(-50%);white-space:nowrap;background:rgb(var(--rba-c));color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:9999px;box-shadow:0 6px 16px rgb(0 0 0 / .3)}
@keyframes rbaPc{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .nav.rba-nav,.mbar-bee:not(.hide){animation:none;box-shadow:0 0 10px rgb(var(--rba-c) / .45)}
  #rbaGlow,#rbaCue .ring,.rba-orb.listening,.rba-orb.speaking,.rba-msg .b.typing i{animation:none}
}