/* DFC Factory HelpBot — the character, given volume rather than drawn flat.
   One stylesheet, because the widget is loaded by two pages that share almost nothing else: the
   signed-out login page and the signed-in hub.

   The 3D is done with light, not with a 3D engine: every surface gets a lit side, a shaded side and
   a specular highlight, the head sits in front of the body on its own plane, and the whole figure
   tilts on a perspective so it turns towards the pointer. Cheap, crisp at any size, and it degrades
   to a clean flat drawing when a reader asks for reduced motion. */

/* ── the stage ─────────────────────────────────────────────────────────────── */
.hb-stage { perspective: 620px; perspective-origin: 50% 45%; display:inline-block; line-height:0; }
.hb-avatar { display:block; overflow:visible; transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,.9,.3,1); will-change: transform; }
/* Idle sway — a slow turn of the head-and-shoulders, the thing that reads as "present" rather than
   "placed". The pointer tilt (set inline by the script) overrides it while the cursor is near. */
.hb-tilt { animation: hb-sway 7.5s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes hb-sway {
  0%, 100% { transform: rotateY(-7deg) rotateX(2deg); }
  50%      { transform: rotateY(7deg)  rotateX(-1.5deg); }
}

/* ── depth: each layer floats a little further forward ─────────────────────── */
.hb-body-g  { transform-origin: 100px 190px; animation: hb-float 3.6s ease-in-out infinite; }
.hb-head-g  { transform: translateZ(26px); }
.hb-arm-g   { transform: translateZ(14px); }
.hb-bubble  { transform: translateZ(40px); }
@keyframes hb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ── the face ──────────────────────────────────────────────────────────────── */
/* A blink is a fast close and open with a long wait between. The long wait is what stops it reading
   as a machine flashing and starts it reading as alive. */
.hb-eye { transform-origin: center; transform-box: fill-box; animation: hb-blink 5.2s infinite; }
.hb-eye-r { animation-delay: .06s; }
@keyframes hb-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(.08); }
}
.hb-wave { transform-origin: 58px 116px; transform-box: fill-box; animation: hb-wave 2.6s ease-in-out infinite; }
@keyframes hb-wave {
  0%, 58%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(-17deg); }
  78% { transform: rotate(7deg); }
  88% { transform: rotate(-11deg); }
}
.hb-ring  { animation: hb-glow 3.6s ease-in-out infinite; }
@keyframes hb-glow { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.hb-spec  { animation: hb-spec 6.2s ease-in-out infinite; }   /* the highlight drifts, so the surface reads as curved */
@keyframes hb-spec { 0%,100% { opacity:.85; transform: translate(0,0); } 50% { opacity:1; transform: translate(2px,-1.5px); } }
.hb-dot   { animation: hb-dots 1.4s ease-in-out infinite; }
.hb-dot-2 { animation-delay: .18s; }
.hb-dot-3 { animation-delay: .36s; }
@keyframes hb-dots { 0%,100% { opacity:.3; transform: translateY(0); } 50% { opacity:1; transform: translateY(-1.2px); } }

/* Thinking: eyes narrow, glow quickens — "working on it" without a word of text. */
.hb-avatar.is-thinking .hb-eye { animation: hb-think 1.05s ease-in-out infinite; }
@keyframes hb-think { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }
.hb-avatar.is-thinking .hb-ring { animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .hb-tilt, .hb-body-g, .hb-eye, .hb-wave, .hb-ring, .hb-dot, .hb-spec { animation: none !important; }
  .hb-avatar { transition: none !important; transform: none !important; }
}

/* ── the widget it lives in ────────────────────────────────────────────────── */
/* Fixed to the corner of whichever page loaded it. Deliberately few tokens from the hub's theme:
   this also renders on the signed-out login page, which does not load the app's variables. */
/* Sits ABOVE the 4Cs ribbon and the brand footer by default (--chrome-b is their measured height,
   set in hub.js), because the one place it must not cover is the line of links under it. */
.hb-host { position:fixed; right:18px; bottom:calc(18px + var(--chrome-b, 0px)); z-index:2147482000;
  font:14px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition:opacity .45s ease; }

/* It goes quiet when it is not being used, and comes back the moment it is pointed at or focused.
   The fade is CSS, not JS, so hovering it always works even if a timer is mid-flight. */
.hb-host.hb-idle { opacity:.3; }
.hb-host.hb-idle:hover, .hb-host.hb-idle:focus-within, .hb-host.hb-drag { opacity:1; }
@media (prefers-reduced-motion: reduce) { .hb-host { transition:none; } }

/* Dragging. touch-action:none on the button only, so a finger on the launcher moves it instead of
   scrolling the page — while a finger anywhere else on the page still scrolls normally. */
.hb-launcher { touch-action:none; cursor:grab; }
.hb-host.hb-drag { transition:none; }
.hb-host.hb-drag .hb-launcher { cursor:grabbing; transform:none; }
.hb-host.hb-drag .hb-ping { display:none; }

/* Once it has been moved, the panel and the nudge have to open towards the middle of the screen
   rather than off the edge it was dragged to. */
.hb-host.hb-left .hb-panel { right:auto; left:0; transform-origin:0 100%; }
.hb-host.hb-left .hb-nudge { right:auto; left:72px; border-radius:12px 12px 2px 12px; }
.hb-host.hb-top .hb-panel { bottom:auto; top:78px; transform-origin:100% 0; }
.hb-host.hb-top .hb-nudge { bottom:auto; top:12px; }
.hb-host.hb-top.hb-left .hb-panel { transform-origin:0 0; }
.hb-launcher { position:relative; width:64px; height:64px; padding:0; border:0; border-radius:50%;
  background:transparent; cursor:pointer; filter:drop-shadow(0 8px 18px rgba(11,37,69,.28));
  transition:transform .25s cubic-bezier(.22,.9,.3,1); }
.hb-launcher:hover { transform:translateY(-3px) scale(1.04); }
.hb-launcher:active { transform:translateY(-1px) scale(.99); }
.hb-launcher:focus-visible { outline:3px solid #7cc4ff; outline-offset:3px; border-radius:50%; }
.hb-launch-art { display:block; }
/* One slow ping, so a still page has something alive in the corner without nagging. */
.hb-ping { position:absolute; inset:-4px; border-radius:50%; border:2px solid #2e7fd4; opacity:0;
  animation:hb-ping 4.6s ease-out infinite; pointer-events:none; }
@keyframes hb-ping { 0% { transform:scale(.92); opacity:.55; } 70%,100% { transform:scale(1.22); opacity:0; } }

.hb-nudge { position:absolute; right:72px; bottom:12px; width:232px; background:#fff; color:#0f2f5c;
  border:1px solid #d5e2ef; border-radius:12px 12px 2px 12px; padding:10px 28px 10px 12px; font-size:12.5px;
  box-shadow:0 10px 26px rgba(11,37,69,.18); opacity:0; transform:translateY(6px) scale(.96);
  pointer-events:none; transition:all .3s cubic-bezier(.22,.9,.3,1); cursor:pointer; }
.hb-nudge.show { opacity:1; transform:none; pointer-events:auto; }
.hb-nudge-x { position:absolute; top:4px; right:6px; border:0; background:none; font-size:16px; line-height:1;
  color:#8aa0b6; cursor:pointer; padding:2px 4px; }

.hb-panel { position:absolute; right:0; bottom:78px; width:372px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); background:#fff; border:1px solid #d5e2ef; border-radius:16px;
  box-shadow:0 24px 60px rgba(11,37,69,.28); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; transform-origin:100% 100%;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.9,.3,1); }
.hb-panel.is-open { opacity:1; transform:none; pointer-events:auto; }
.hb-head { display:flex; align-items:center; gap:10px; padding:11px 12px;
  background:linear-gradient(135deg,#17497f 0%,#0f2f5c 60%,#0a2344 100%); color:#fff; }
.hb-title { display:flex; flex-direction:column; line-height:1.25; flex:1 1 auto; min-width:0; }
.hb-title b { font-size:13.5px; font-weight:650; }
.hb-sub { font-size:11px; opacity:.78; }
.hb-x { border:0; background:rgba(255,255,255,.12); color:#fff; width:26px; height:26px; border-radius:8px;
  font-size:16px; line-height:1; cursor:pointer; }
.hb-x:hover { background:rgba(255,255,255,.22); }

.hb-log { flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 13px 6px; background:
  linear-gradient(180deg,#f7fbff 0%,#ffffff 55%); scroll-behavior:smooth; }
.hb-log:focus { outline:none; }
.hb-msg { max-width:88%; margin-bottom:9px; padding:9px 12px; border-radius:13px; font-size:13.2px;
  animation:hb-in .26s cubic-bezier(.22,.9,.3,1) both; }
@keyframes hb-in { from { opacity:0; transform:translateY(6px); } }
.hb-bot { background:#eef5fd; color:#10355f; border:1px solid #dbe8f6; border-bottom-left-radius:4px; }
.hb-me { background:#0f2f5c; color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.hb-bad { background:#fdecec; border-color:#f4c7c7; color:#8d2020; }
.hb-quiet { color:#6a86a3; font-size:12px; }
.hb-me .hb-quiet { color:#c7d8ea; }

.hb-act { flex:0 0 auto; border-top:1px solid #e7eef6; padding:10px 12px 12px; background:#fff; max-height:56%; overflow-y:auto; overscroll-behavior:contain; }
.hb-act.is-busy { opacity:.55; pointer-events:none; }
.hb-opts, .hb-row { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.hb-btn { border:1px solid #cfdcea; background:#fff; color:#10355f; border-radius:10px; padding:8px 12px;
  font:inherit; font-size:12.8px; cursor:pointer; transition:all .16s ease; }
.hb-btn:hover { border-color:#2e7fd4; background:#f2f8ff; transform:translateY(-1px); }
.hb-btn.primary { background:#0f2f5c; border-color:#0f2f5c; color:#fff; font-weight:600; }
.hb-btn.primary:hover { background:#17497f; }
.hb-btn.ghost { border-color:transparent; color:#6a86a3; }
.hb-form { display:flex; flex-direction:column; gap:9px; }
.hb-field { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#5b7791; }
.hb-field i { font-style:normal; color:#94a9bf; font-size:11px; }
.hb-in { border:1px solid #cfdcea; border-radius:9px; padding:8px 10px; font:inherit; font-size:13px; color:#10355f; width:100%; box-sizing:border-box; }
.hb-in:focus { outline:none; border-color:#2e7fd4; box-shadow:0 0 0 3px rgba(46,127,212,.14); }
.hb-in.hb-warn { border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12); }
.hb-ta { resize:vertical; min-height:56px; }
.hb-count { font-size:11.5px; color:#6a86a3; margin-left:auto; }
.hb-count.hb-warn { color:#c0392b; font-weight:600; }
.hb-groups { display:flex; flex-direction:column; gap:5px; max-height:210px; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }
.hb-grp { border:1px solid #dfe9f3; border-radius:10px; background:#fbfdff; }
.hb-grp summary { cursor:pointer; padding:8px 11px; font-size:12.8px; font-weight:600; color:#10355f; list-style:none; }
.hb-grp summary::-webkit-details-marker { display:none; }
.hb-grp summary::before { content:'▸'; display:inline-block; width:14px; color:#7d99b8; transition:transform .18s ease; }
.hb-grp[open] summary::before { transform:rotate(90deg); }
.hb-grp summary i { font-style:normal; color:#8aa0b6; font-weight:400; font-size:11.5px; }
.hb-chk { display:flex; align-items:center; gap:8px; padding:5px 11px 5px 25px; font-size:12.6px; color:#26425f; cursor:pointer; }
.hb-chk:hover { background:#f2f8ff; }
.hb-chk input { width:15px; height:15px; accent-color:#0f2f5c; }
.hb-note { font-size:12.5px; color:#6a86a3; }

@media (max-width: 460px) {
  .hb-host { right:12px; bottom:calc(12px + var(--chrome-b, 0px)); }
  .hb-panel { width:calc(100vw - 24px); height:min(560px, calc(100vh - 100px)); height:min(560px, calc(100dvh - 100px)); }
  .hb-nudge { display:none; }
}

/* ── the composer ──────────────────────────────────────────────────────────── */
.hb-composer { display:flex; gap:6px; padding:9px 12px 11px; border-top:1px solid #e7eef6; background:#fff; }
.hb-say { flex:1 1 auto; border:1px solid #cfdcea; border-radius:20px; padding:9px 14px; font:inherit; font-size:13px; color:#10355f; }
.hb-say:focus { outline:none; border-color:#2e7fd4; box-shadow:0 0 0 3px rgba(46,127,212,.14); }
.hb-send { border:0; background:#0f2f5c; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:14px; flex:0 0 auto; }
.hb-send:hover { background:#17497f; }

/* ── the settings screen ───────────────────────────────────────────────────── */
.hba-wrap { max-width:1000px; }
.hba-blurb { color:var(--color-muted,#5b7791); font-size:12.5px; margin:0 0 12px; }
.hba-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.hba-note { font-size:12.5px; color:#5b7791; background:#f4f9ff; border:1px solid #d9e8f7; border-radius:9px; padding:9px 12px; margin-bottom:12px; line-height:1.6; }
.hba-note code { background:#e6f0fa; padding:1px 5px; border-radius:4px; font-size:11.5px; }
.hba-opt { border:1px solid var(--color-border,#dde6ef); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:#fff; }
.hba-opt.is-off { opacity:.62; background:#fafbfc; }
.hba-opt-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hba-opt-h code { font-size:11.5px; color:#7d93aa; }
.hba-spacer { flex:1 1 auto; }
.hba-blurb2 { font-size:12.5px; color:#5b7791; margin-top:4px; }
.hba-pill { font-size:11px; padding:2px 8px; border-radius:20px; background:#eaf2fb; color:#1d5796; }
.hba-pill.hba-lock { background:#fff3d9; color:#8a6412; }
.hba-pill.hba-off { background:#f0f0f2; color:#6b6b74; }
.hba-pill.hba-ok { background:#e6f6ec; color:#1b6b3a; }
.hba-pill.hba-bad { background:#fdecec; color:#8d2020; }
.hba-pill.hba-warn { background:#fff3d9; color:#8a6412; }
.hba-quiet { color:#8aa0b6; font-weight:400; }
.hba-form { margin-top:10px; padding-top:10px; border-top:1px dashed #dde6ef; }
.hba-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.hba-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin-bottom:12px; }
.hba-form label, .hba-grid2 label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#5b7791; }
.hba-form input, .hba-form select, .hba-form textarea, .hba-grid2 input {
  border:1px solid #cfdcea; border-radius:8px; padding:7px 10px; font:inherit; font-size:13px; color:#10355f; }
.hba-chk2 { flex-direction:row !important; align-items:center; gap:7px !important; font-size:12.5px; color:#26425f; }
.hba-wide { display:block; margin-top:10px; }
.hba-wide textarea { width:100%; box-sizing:border-box; }
.hba-row { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.hba-msg { font-size:12px; color:#5b7791; }
.hba-msg.hba-bad { color:#c0392b; }
.hba-addbar { display:flex; gap:10px; align-items:center; margin-top:12px; font-size:12px; }
.hba-mode { margin-top:14px; border:1px solid #f0dda6; background:#fffaf0; border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.6; }
.hba-mode.is-live { border-color:#b6e3c6; background:#f2fbf5; }
.hba-agent { border:1px solid var(--color-border,#dde6ef); border-radius:10px; padding:12px; background:#fff; margin-bottom:12px; }
.hba-pre { white-space:pre-wrap; font-size:12.5px; line-height:1.65; color:#122f4f; background:#f7fafd; border:1px solid #e3ebf3; border-radius:8px; padding:11px 13px; margin:8px 0 0; font-family:inherit; }

/* ── bug reporter ─────────────────────────────────────────────────────────── */
/* Severity reads as a choice, not a form control: three buttons, one lit. */
.hb-sev { gap: 6px; }
.hb-sev .hb-btn { flex: 1 1 0; }
.hb-sev .hb-btn.is-on { background: var(--hb-accent, #0f2f5c); color: #fff; border-color: transparent; }

/* A line of state above the buttons - what is attached, or what just failed. */
.hb-att { font-size: 12px; color: #5b7791; background: #f3f7fb; border: 1px solid #e3ebf3;
  border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }
.hb-att.hb-bad { color: #8a2b2b; background: #fdf3f3; border-color: #f0d6d6; }

/* The screenshot goes into the transcript so the reporter sees what will be sent. */
.hb-shot { display: block; width: 100%; max-width: 260px; border-radius: 8px;
  border: 1px solid #d9e3ee; margin-bottom: 4px; }

/* Recording: a live clock and size, so nobody wonders whether it is running. */
.hb-rec { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.hb-rec .hb-dot { width: 9px; height: 9px; border-radius: 50%; background: #d64545;
  box-shadow: 0 0 0 0 rgba(214, 69, 69, .6); animation: hbPulse 1.2s infinite; }
.hb-rec.is-done { color: #1d6b3f; }
@keyframes hbPulse {
  70%  { box-shadow: 0 0 0 7px rgba(214, 69, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0); }
}
@media (prefers-reduced-motion: reduce) { .hb-rec .hb-dot { animation: none; } }

/* The review table before anything is sent. */
.hb-rev { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.hb-rev td { padding: 4px 0; vertical-align: top; border-top: 1px solid #edf2f7; }
.hb-rev td:first-child { color: #5b7791; white-space: nowrap; padding-right: 10px; width: 38%; }