/* Beacon the helper — assets/nscc-beacon-helper.js, flag beaconHelper (docs/NSCC_BEACON_HELPER.md).
   Shared by the console (index.html) and the unified field app (/unified, loaded by
   dispatch-module/frontend/field/beacon.js), so the two never drift. The console marks a dark
   theme with body.dark-theme, the field app with html.dark (:root.dark): every dark rule has both.
   Every var() has a fallback: the field app's theme tokens are not all of the console's. */
/* Beacon the helper (assets/nscc-beacon-helper.js, flag beaconHelper). A bloodhound animated
   frame by frame from video of the owner's drawing: one sprite steps through clear-background
   frame sheets (walk, turn, sit, idle, sniff, think, found); the script picks the scene and frame
   and sets --sheet / --sw / --sh / --bw / --bx / --by / --flip through the CSSOM. */
.nscc-beacon-launcher {
    position: fixed; right: 18px; bottom: 14px; z-index: calc(var(--z-overlay, 5000) + 1);
    width: 200px; height: 168px; padding: 0; border: 0; background: transparent; cursor: pointer;
    transition: transform 1s cubic-bezier(.33, .1, .25, 1), opacity .25s ease;   /* 1s = DASH_MS in nscc-beacon-helper.js */
    -webkit-tap-highlight-color: transparent;
}
.nscc-beacon-launcher:focus-visible { outline: 3px solid #38bdf8; outline-offset: 4px; border-radius: 16px; }
.nscc-beacon-launcher[hidden], .nscc-beacon-tab[hidden], .nscc-beacon-panel[hidden], .nscc-beacon-menu[hidden] { display: none; }
.nscc-beacon-dog { position: absolute; inset: 0; display: block; }
.nscc-beacon-dog__sprite {
    position: absolute; left: 50%; bottom: 0; pointer-events: none;
    width: var(--sw, 0); height: var(--sh, 0);
    background-image: var(--sheet, none); background-repeat: no-repeat;
    background-size: var(--bw, auto) auto; background-position: var(--bx, 0) var(--by, 0);
    transform: translateX(-50%) scaleX(var(--flip, 1));
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
    will-change: background-position;
}
/* The chat's size, shared by the box and by Beacon (who stands at its left side). Normal, Bigger
   (the ⤢ button) or a size dragged from the box's top-left corner (set through the CSSOM). */
.nscc-beacon-launcher, .nscc-beacon-panel {
    --nscc-beacon-panel-w: min(400px, calc(100vw - 260px));
    --nscc-beacon-panel-h: min(540px, calc(100vh - 40px));
}
.nscc-beacon-launcher.is-wide, .nscc-beacon-panel--wide {
    --nscc-beacon-panel-w: min(680px, calc(100vw - 260px));
    --nscc-beacon-panel-h: calc(100vh - 40px);
}
/* Out: he stands at the left side of the open box; the launcher glides there and back while the
   sprite plays the walk. */
.nscc-beacon-launcher.is-out { transform: translateX(calc(-1 * var(--nscc-beacon-panel-w) - 4px)); }
/* Off stage: past the right edge of the screen. He walks in from there when asked for and back
   out when the chat closes, fading only at the very edge (no doorway, owner 2026-10-21). */
.nscc-beacon-launcher.is-offstage {
    transform: translateX(260px); opacity: 0;
    transition: transform 1s cubic-bezier(.45, 0, .7, .6), opacity .3s ease .7s;
}
/* Found it: the lightbulb pops on above his head. */
.nscc-beacon-dog__bulb {
    position: absolute; left: 50%; top: -22%; width: 30%; height: auto; pointer-events: none;
    margin-left: -6%; opacity: 0; transform: scale(.4) translateY(12px);
}
.nscc-beacon-launcher.is-bulb .nscc-beacon-dog__bulb { animation: nscc-beacon-bulb-pop .55s cubic-bezier(.3, 1.7, .5, 1) .35s both, nscc-beacon-bulb-glow 1.1s ease-in-out .9s 2; }
@keyframes nscc-beacon-bulb-pop { 0% { opacity: 0; transform: scale(.4) translateY(12px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes nscc-beacon-bulb-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(250, 204, 21, .95)); } }

/* Holidays (holidayCostume in the script): a hat, ears or a flag, and at Christmas antlers with a
   glowing red nose. They ride inside the sprite (so they flip with him) at the head and nose the
   script sets per frame (--hx / --hy / --nx / --ny, --ck = his scale); they step out where it sets
   none. data-costume on the launcher names the costume. */
.nscc-beacon-dog__hat, .nscc-beacon-dog__nose { display: none; position: absolute; pointer-events: none; }
.nscc-beacon-launcher[data-costume] .nscc-beacon-dog__hat,
.nscc-beacon-launcher[data-costume="reindeer"] .nscc-beacon-dog__nose { display: block; }
.nscc-beacon-dog__sprite.is-costume-off .nscc-beacon-dog__hat, .nscc-beacon-dog__sprite.is-costume-off .nscc-beacon-dog__nose { display: none; }
.nscc-beacon-dog__hat { left: var(--hx, 50%); top: var(--hy, 0); height: auto; width: calc(40px * var(--ck, 1)); transform: translate(-50%, -72%); }
.nscc-beacon-launcher[data-costume="santa"] .nscc-beacon-dog__hat { transform: translate(-46%, -66%) rotate(-6deg); }
.nscc-beacon-launcher[data-costume="reindeer"] .nscc-beacon-dog__hat { width: calc(42px * var(--ck, 1)); transform: translate(-50%, -76%); }
.nscc-beacon-launcher[data-costume="party"] .nscc-beacon-dog__hat { width: calc(34px * var(--ck, 1)); transform: translate(-50%, -82%) rotate(8deg); }
.nscc-beacon-launcher[data-costume="flag"] .nscc-beacon-dog__hat { width: calc(38px * var(--ck, 1)); transform: translate(-80%, -84%); }
.nscc-beacon-launcher[data-costume="hardhat"] .nscc-beacon-dog__hat { width: calc(42px * var(--ck, 1)); transform: translate(-50%, -62%); }
.nscc-beacon-dog__nose { display: none; position: absolute; pointer-events: none; }
.nscc-beacon-launcher--santa .nscc-beacon-dog__hat, .nscc-beacon-launcher--reindeer .nscc-beacon-dog__hat,
.nscc-beacon-launcher--reindeer .nscc-beacon-dog__nose { display: block; }
.nscc-beacon-dog__sprite.is-costume-off .nscc-beacon-dog__hat, .nscc-beacon-dog__sprite.is-costume-off .nscc-beacon-dog__nose { display: none; }
.nscc-beacon-dog__hat { left: var(--hx, 50%); top: var(--hy, 0); height: auto; }
.nscc-beacon-launcher--santa .nscc-beacon-dog__hat { width: calc(40px * var(--ck, 1)); transform: translate(-46%, -66%) rotate(-6deg); }
.nscc-beacon-launcher--reindeer .nscc-beacon-dog__hat { width: calc(42px * var(--ck, 1)); transform: translate(-50%, -76%); }
.nscc-beacon-dog__nose {
    left: var(--nx, 50%); top: var(--ny, 0); width: calc(9px * var(--ck, 1)); height: calc(9px * var(--ck, 1));
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffb4b4 0, #ef4444 35%, #b91c1c 100%);
    box-shadow: 0 0 4px 1px rgba(239, 68, 68, .7);
    animation: nscc-beacon-nose-glow 1.6s ease-in-out infinite;
}
@keyframes nscc-beacon-nose-glow { 0%, 100% { box-shadow: 0 0 4px 1px rgba(239, 68, 68, .6); } 50% { box-shadow: 0 0 10px 4px rgba(248, 113, 113, .95); } }

/* Birthdays and work anniversaries (startParty in the script): a lopsided cake or balloons in front
   of him and a bubble with the person's name, letters tipped every which way. They pop up once he
   has sat down, then he pushes the cake off the stage (is-pushing) and comes back as himself. */
.nscc-beacon-party { display: none; position: absolute; inset: 0; pointer-events: none; }
.nscc-beacon-launcher.is-party .nscc-beacon-party { display: block; }
.nscc-beacon-party__prop {
    position: absolute; left: 74%; bottom: 0; width: 76px; height: auto;
    transform-origin: 50% 100%; animation: nscc-beacon-party-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
    transition: left 1s linear;   /* 1s = DASH_MS: pushed along at his walking pace */
}
.nscc-beacon-launcher.is-pushing .nscc-beacon-party__prop { left: calc(50% + 86px); }
.nscc-beacon-party__bubble {
    position: absolute; left: -6%; bottom: 121%; max-width: 240px; padding: 8px 12px 9px;
    background: #fffdf5; color: #1f2937; border: 3px solid #f472b6; border-radius: 18px 22px 16px 20px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
    font: 700 17px/1.25 "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Segoe Print", cursive;
    transform: rotate(-5deg); transform-origin: 80% 100%;
    animation: nscc-beacon-party-pop .45s cubic-bezier(.3, 1.6, .5, 1) .15s both;
    transition: opacity .3s ease;
}
.nscc-beacon-party__bubble::after {
    content: ''; position: absolute; right: 26%; bottom: -12px; border: 9px solid transparent;
    border-top: 12px solid #f472b6; border-bottom: 0;
}
.nscc-beacon-launcher.is-pushing .nscc-beacon-party__bubble { opacity: 0; }
.nscc-beacon-party__line { display: block; white-space: nowrap; }
.nscc-beacon-party__line + .nscc-beacon-party__line { font-size: 14px; margin-top: 2px; }
.nscc-beacon-party__gap { display: inline-block; width: .3em; }
.nscc-beacon-party__ch { display: inline-block; }
.nscc-beacon-party__ch:nth-child(4n+1) { color: #db2777; transform: rotate(-8deg) translateY(1px); }
.nscc-beacon-party__ch:nth-child(4n+2) { color: #7c3aed; transform: rotate(6deg) translateY(-2px); }
.nscc-beacon-party__ch:nth-child(4n+3) { color: #0284c7; transform: rotate(-3deg) translateY(2px); }
.nscc-beacon-party__ch:nth-child(4n) { color: #ea580c; transform: rotate(9deg); }
@keyframes nscc-beacon-party-pop { 0% { opacity: 0; transform: scale(.3) rotate(-18deg); } 100% { opacity: 1; } }
.nscc-beacon-launcher--icon .nscc-beacon-party { display: none; }

/* The plain icon: a round beacon. Thinking spins a glowing ring; found flashes a check. */
.nscc-beacon-icon { display: none; position: absolute; right: 8px; bottom: 8px; width: 76px; height: 76px; }
.nscc-beacon-launcher--icon { width: 96px; height: 96px; }
.nscc-beacon-launcher--icon .nscc-beacon-dog { display: none; }
.nscc-beacon-launcher--icon .nscc-beacon-icon { display: block; }
.nscc-beacon-icon__core {
    position: absolute; inset: 6px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7dd3fc 0, #2563eb 55%, #4c1d95 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .45);
}
.nscc-beacon-icon__core::after {
    content: ''; position: absolute; inset: 12px; background: #fff;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.nscc-beacon-icon__ring {
    position: absolute; inset: 0; border-radius: 50%; opacity: 0;
    background: conic-gradient(from 0deg, transparent 0 55%, #38bdf8 75%, #a78bfa 100%);
    -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%);
}
.nscc-beacon-launcher.is-thinking .nscc-beacon-icon__ring { opacity: 1; animation: nscc-beacon-ring-spin-flat .9s linear infinite; }
.nscc-beacon-launcher.is-thinking .nscc-beacon-icon__core { animation: nscc-beacon-pulse 1.2s ease-in-out infinite; }
.nscc-beacon-icon__check {
    position: absolute; inset: 6px; border-radius: 50%; background: #16a34a; opacity: 0; transform: scale(.6);
}
.nscc-beacon-icon__check::after {
    content: ''; position: absolute; left: 34%; top: 22%; width: 22%; height: 40%;
    border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg);
}
.nscc-beacon-launcher.is-found .nscc-beacon-icon__check { animation: nscc-beacon-check 1.6s ease both; }
@keyframes nscc-beacon-ring-spin-flat { to { transform: rotate(360deg); } }
@keyframes nscc-beacon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); } }
@keyframes nscc-beacon-check { 0% { opacity: 0; transform: scale(.6); } 20%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* At rest Beacon is not on screen: only this small Ask Beacon button. He comes out when it is
   clicked and runs off when the chat closes. "Hide Beacon" shrinks it to a tab at the edge. */
.nscc-beacon-tab {
    position: fixed; right: 18px; bottom: 18px; z-index: var(--z-overlay, 5000);
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 10px;
    border: 1px solid var(--nscc-line, #d4d4d8); border-radius: 999px;
    background: var(--bg-card, #fff); color: var(--text-primary, #18181b);
    font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.nscc-beacon-tab::before {
    content: ''; width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7dd3fc 0, #2563eb 55%, #4c1d95 100%);
    -webkit-mask: none;
}
.nscc-beacon-tab:hover { border-color: #38bdf8; }
.nscc-beacon-tab:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
.nscc-beacon-tab--edge {
    right: 0; bottom: 120px; writing-mode: vertical-rl; padding: 10px 5px; gap: 4px;
    border-right: 0; border-radius: 8px 0 0 8px; font-size: var(--text-xs, 12px); box-shadow: -2px 2px 8px rgba(0, 0, 0, .12);
}
.nscc-beacon-tab--edge::before { width: 10px; height: 10px; }

/* The dock: the Ask Beacon button plus its x (turn Beacon off). Dragged anywhere, it is placed with
   --dock-x / --dock-y (set through the CSSOM). */
.nscc-beacon-dock { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-overlay, 5000); display: inline-flex; align-items: flex-start; }
.nscc-beacon-dock[hidden] { display: none; }
.nscc-beacon-dock.is-placed { left: var(--dock-x); top: var(--dock-y); right: auto; bottom: auto; }
.nscc-beacon-dock .nscc-beacon-tab { position: static; touch-action: none; cursor: grab; }
.nscc-beacon-dock .nscc-beacon-tab:active { cursor: grabbing; }
.nscc-beacon-dock .nscc-beacon-tab--edge { position: fixed; }
.nscc-beacon-dock__close {
    width: 18px; height: 18px; margin: -6px 0 0 -10px; padding: 0; border-radius: 50%;
    border: 1px solid var(--nscc-line, #d4d4d8); background: var(--bg-card, #fff); color: var(--text-muted, #71717a);
    font-size: 12px; line-height: 16px; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.nscc-beacon-dock:hover .nscc-beacon-dock__close, .nscc-beacon-dock:focus-within .nscc-beacon-dock__close { opacity: 1; }
/* "Need a hand?": the button glows and a bubble sits above it while Beacon thinks the person is stuck. */
.nscc-beacon-dock.is-nudge .nscc-beacon-tab { border-color: #38bdf8; animation: nscc-beacon-nudge-glow 1.6s ease-in-out infinite; }
@keyframes nscc-beacon-nudge-glow {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .16), 0 0 0 0 rgba(56, 189, 248, .55); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .16), 0 0 0 8px rgba(56, 189, 248, 0), 0 0 18px 4px rgba(56, 189, 248, .55); }
}
.nscc-beacon-nudge {
    position: absolute; right: 0; bottom: calc(100% + 10px); display: flex; align-items: center; gap: 2px;
    padding: 4px 4px 4px 12px; border-radius: 999px; background: #0f172a; color: #f8fafc; white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: nscc-beacon-msg-in .25s ease-out both;
}
.nscc-beacon-nudge[hidden] { display: none; }
.nscc-beacon-nudge::after { content: ''; position: absolute; right: 22px; top: 100%; border: 6px solid transparent; border-top-color: #0f172a; }
.nscc-beacon-nudge__go { padding: 4px 6px; border: 0; background: transparent; color: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nscc-beacon-nudge__x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #94a3b8; font-size: 15px; line-height: 1; cursor: pointer; }
.nscc-beacon-nudge__go:focus-visible, .nscc-beacon-nudge__x:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; border-radius: 999px; }
.nscc-beacon-offnote {
    position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast, 10000); max-width: 320px; padding: 10px 14px;
    border-radius: 10px; background: #0f172a; color: #f8fafc; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.nscc-beacon-pref { margin-top: 1.25rem; }
.nscc-beacon-pref__row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.nscc-beacon-pref__note { font-size: .7rem; color: var(--text-muted); margin: .35rem 0 0; }

/* The chat window. */
.nscc-beacon-panel {
    position: fixed; right: 18px; bottom: 14px; z-index: var(--z-overlay, 5000);
    /* A steady size: it does not grow and shrink with each answer; the conversation scrolls. */
    width: var(--nscc-beacon-panel-w); height: var(--nscc-beacon-panel-h); max-height: calc(100vh - 40px);
    min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    transform-origin: 100% 100%;
    transition: width .28s cubic-bezier(.2, .8, .2, 1), height .28s cubic-bezier(.2, .8, .2, 1);
    background: var(--bg-card, #fff); color: var(--text-primary, #18181b);
    border: 1px solid var(--nscc-line, #d4d4d8); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
/* Minimized (the - button, and on its own during Shadow me): only the title bar is left, so the
   box stops covering the screen; the instructions then sit at each control being shown. */
.nscc-beacon-panel--min .nscc-beacon-log,
.nscc-beacon-panel--min .nscc-beacon-ask,
.nscc-beacon-panel--min .nscc-beacon-panel__foot,
.nscc-beacon-panel--min .nscc-beacon-menu { display: none; }
.nscc-beacon-panel--min .nscc-beacon-panel__head { border-bottom: 0; }
.nscc-beacon-panel--min { height: auto; }
.nscc-beacon-panel--min .nscc-beacon-panel__grip, .nscc-beacon-panel--min #nscc-beacon-size-btn { display: none; }
/* Short (each opening, until Beacon answers or someone clicks to see more): the latest line or
   two and the box to type in; older lines fade out at the top. */
.nscc-beacon-panel--short { height: auto; }
.nscc-beacon-panel--short .nscc-beacon-log {
    flex: none; max-height: 84px; padding-top: 8px; padding-bottom: 8px; cursor: pointer;
}
.nscc-beacon-panel--short .nscc-beacon-log.has-more {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.nscc-beacon-panel--short .nscc-beacon-panel__grip { display: none; }
.nscc-beacon-panel.is-resizing { transition: none; user-select: none; }
.nscc-beacon-launcher.is-resizing { transition: none; }
.nscc-beacon-panel--min .nscc-beacon-panel__title { cursor: pointer; }
.nscc-beacon-panel--min .nscc-beacon-panel__sub { color: #2563eb; font-weight: 600; }
/* Minimized with the dog: he lies in the bottom corner and the title bar sits beside him (left),
   narrow, to open again with what it held. nscc-beacon-helper.js moveForMinimize. */
@media (min-width: 681px) {
    .nscc-beacon-panel--min.nscc-beacon-panel--beside { right: 222px; width: min(290px, calc(100vw - 250px)); }
}
@media (max-width: 680px) {
    .nscc-beacon-panel--min.nscc-beacon-panel--beside { left: auto; width: min(290px, calc(100vw - 16px)); }
    .nscc-beacon-panel.nscc-beacon-panel--min { height: auto; }   /* the phone size below would otherwise keep it tall */
}
/* In the corner his whole sheet (tail included) stays on screen. */
.nscc-beacon-launcher.is-corner { transform: translateX(-26px); }
.nscc-beacon-launcher.is-lying .nscc-beacon-dog { transform-origin: 50% 100%; animation: nscc-beacon-breathe 3.6s ease-in-out infinite; }
/* The box opens at once from its corner (ready to type in) while Beacon walks in, and closes
   quickly without waiting for him. 320 ms / 200 ms = OPEN_MS / CLOSE_MS in nscc-beacon-helper.js. */
.nscc-beacon-panel.is-opening { animation: nscc-beacon-open .32s cubic-bezier(.16, 1, .3, 1) both; }
.nscc-beacon-panel.is-closing { animation: nscc-beacon-close .2s ease-in both; pointer-events: none; }
@keyframes nscc-beacon-open { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nscc-beacon-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.97); } }
/* Resize: drag the grip at the box's top-left corner (double-click it for the normal size). */
.nscc-beacon-panel__grip {
    position: absolute; left: 0; top: 0; width: 16px; height: 16px; z-index: 1; padding: 0; border: 0;
    background: transparent; cursor: nwse-resize; touch-action: none; border-top-left-radius: 14px;
}
.nscc-beacon-panel__grip::before {
    content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; opacity: .4;
    border-left: 2px solid currentColor; border-top: 2px solid currentColor; border-top-left-radius: 3px;
}
.nscc-beacon-panel__grip:hover::before, .nscc-beacon-panel__grip:focus-visible::before { opacity: .9; }
.nscc-beacon-panel__head { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--nscc-line, #e4e4e7); }
.nscc-beacon-panel__title { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.nscc-beacon-panel__sub { font-size: var(--text-xs, 12px); color: var(--text-muted, #71717a); }
.nscc-beacon-panel__icon-btn {
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 18px; cursor: pointer;
}
.nscc-beacon-panel__icon-btn:hover { background: var(--bg-raised, #f4f4f5); }
.nscc-beacon-menu { display: flex; flex-direction: column; padding: 4px; border-bottom: 1px solid var(--nscc-line, #e4e4e7); }
.nscc-beacon-menu__item { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.nscc-beacon-menu__item:hover { background: var(--bg-raised, #f4f4f5); }
.nscc-beacon-log {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.nscc-beacon-msg { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; animation: nscc-beacon-msg-in .22s ease-out both; }
@keyframes nscc-beacon-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Beacon's own messages use the full width in a wide box; a short line stays a bubble. */
.nscc-beacon-panel--wide .nscc-beacon-msg--beacon { max-width: 94%; }
/* Thinking: three dots after the words. */
.nscc-beacon-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.nscc-beacon-dots > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: nscc-beacon-dot 1.1s ease-in-out infinite; }
.nscc-beacon-dots > span:nth-child(2) { animation-delay: .15s; }
.nscc-beacon-dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes nscc-beacon-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }
.nscc-beacon-msg.is-thinking { display: flex; align-items: center; }
/* Under the greeting: what fits the screen that is open. */
.nscc-beacon-here { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--nscc-line, #e4e4e7); }
.nscc-beacon-here__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #71717a); }
.nscc-beacon-here .nscc-beacon-inline-btn { margin: 0; text-align: left; }
.nscc-beacon-here .nscc-beacon-res { margin-top: 2px; align-self: stretch; }
/* Find it yourself: Shadow me / Videos / Documentation over the question box, and the list one opens. */
.nscc-beacon-finder { flex: none; position: relative; border-top: 1px solid var(--nscc-line, #e4e4e7); }
.nscc-beacon-finder__keys { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; }
.nscc-beacon-key {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px 5px 10px; border-radius: 8px;
    border: 1px solid var(--nscc-line, #d4d4d8); background: var(--bg-card, #fff); color: inherit;
    font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.nscc-beacon-key:hover { border-color: #38bdf8; }
.nscc-beacon-key:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.nscc-beacon-key__count { min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 11px; text-align: center; }
.nscc-beacon-key.is-empty { opacity: .55; }
.nscc-beacon-key.is-empty .nscc-beacon-key__count { background: var(--bg-raised, #e4e4e7); color: var(--text-muted, #71717a); }
.nscc-beacon-key[aria-pressed="true"] { border-color: #2563eb; background: #eff6ff; }
.nscc-beacon-finder__scope { margin-left: auto; font-size: 11px; white-space: nowrap; color: var(--text-muted, #71717a); }
@container (max-width: 400px) { .nscc-beacon-finder__scope { display: none; } }
.nscc-beacon-finder { container-type: inline-size; }
.nscc-beacon-finder__list {
    position: absolute; left: 8px; right: 8px; bottom: 100%; margin-bottom: 6px;
    display: flex; flex-direction: column; padding: 4px; border-radius: 10px; z-index: 2;
    background: var(--bg-card, #fff); border: 1px solid var(--nscc-line, #d4d4d8); box-shadow: 0 -8px 24px rgba(0, 0, 0, .14);
    animation: nscc-beacon-msg-in .16s ease-out both;
}
/* Its title (what and where, how many), - to minimize Beacon without him leaving, x to close. */
.nscc-beacon-finder__head { display: flex; align-items: center; gap: 4px; padding: 2px 2px 4px 6px; }
.nscc-beacon-finder__title { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text-muted, #71717a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nscc-beacon-finder__btn {
    flex: none; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent;
    color: var(--text-muted, #71717a); font-size: 15px; line-height: 1; cursor: pointer;
}
.nscc-beacon-finder__btn:hover, .nscc-beacon-finder__btn:focus-visible { background: var(--bg-raised, #f4f4f5); color: inherit; outline: none; }
/* Documentation: one line each, three showing, the rest a scroll away. */
.nscc-beacon-finder__body { display: flex; flex-direction: column; gap: 2px; max-height: calc(3 * 30px + 2 * 2px); overflow-y: auto; overscroll-behavior: contain; }
.nscc-beacon-finder__item {
    display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; box-sizing: border-box; padding: 0 8px; border: 0; border-radius: 6px;
    background: transparent; color: inherit; font: inherit; font-size: 12.5px; text-align: left; text-decoration: none; cursor: pointer; flex: none;
}
.nscc-beacon-finder__item:hover, .nscc-beacon-finder__item:focus-visible { background: var(--bg-raised, #f4f4f5); outline: none; }
.nscc-beacon-finder__item-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nscc-beacon-finder__item-tag { flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #71717a); }
.nscc-beacon-finder__item.is-here { box-shadow: inset 3px 0 0 #2563eb; }
/* Shadow me and Videos: three across, three rows showing, the rest a scroll away. */
.nscc-beacon-finder__list.is-grid .nscc-beacon-finder__body {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 48px; gap: 4px;
    max-height: calc(3 * 48px + 2 * 4px);
}
.nscc-beacon-finder__list.is-grid .nscc-beacon-finder__item {
    height: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 7px;
    border: 1px solid var(--nscc-line, #e4e4e7); font-size: 11.5px; line-height: 1.25;
}
.nscc-beacon-finder__list.is-grid .nscc-beacon-finder__item:hover, .nscc-beacon-finder__list.is-grid .nscc-beacon-finder__item:focus-visible { border-color: #38bdf8; }
.nscc-beacon-finder__list.is-grid .nscc-beacon-finder__item-title {
    flex: none; width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.nscc-beacon-finder__list.is-grid .nscc-beacon-finder__item-tag { font-size: 8.5px; }
.nscc-beacon-finder__list.is-grid .nscc-beacon-finder__none { grid-column: 1 / -1; }
/* Hovering a button: a peek at what is behind it. */
.nscc-beacon-finder__peek {
    position: absolute; left: 8px; bottom: 100%; margin-bottom: 6px; z-index: 3; width: min(260px, calc(100% - 16px)); box-sizing: border-box;
    padding: 6px 9px; border-radius: 8px; pointer-events: none; font-size: 12px; line-height: 1.45;
    background: #0f172a; color: #e2e8f0; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.nscc-beacon-finder__peek[hidden] { display: none; }
.nscc-beacon-finder__peek-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7dd3fc; margin-bottom: 2px; }
.nscc-beacon-finder__peek-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nscc-beacon-finder__peek-item::before { content: '\2022  '; color: #7dd3fc; }
.nscc-beacon-finder__peek-more, .nscc-beacon-finder__peek-none { color: #94a3b8; font-style: italic; }
.nscc-beacon-finder__list[hidden] { display: none; }
.nscc-beacon-finder__none { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--text-muted, #71717a); }
.nscc-beacon-panel--min .nscc-beacon-finder { display: none; }
body.dark-theme .nscc-beacon-key[aria-pressed="true"], :root.dark .nscc-beacon-key[aria-pressed="true"] { background: #1e3a8a; }
/* In a step box: the real control works too. */
.nscc-beacon-callout__hint { margin: 6px 0 0; font-size: 12px; color: #7dd3fc; }
/* Jump back to the newest message when scrolled up. */
.nscc-beacon-latest {
    position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 1;
    padding: 4px 12px; border: 1px solid var(--nscc-line, #d4d4d8); border-radius: 999px;
    background: var(--bg-card, #fff); color: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.nscc-beacon-latest[hidden], .nscc-beacon-panel--min .nscc-beacon-latest, .nscc-beacon-panel:has(.nscc-beacon-finder__list:not([hidden])) .nscc-beacon-latest { display: none; }
.nscc-beacon-msg__text { margin: 0; white-space: pre-wrap; }
.nscc-beacon-msg--beacon { align-self: flex-start; background: var(--bg-raised, #f4f4f5); border-bottom-left-radius: 4px; }
.nscc-beacon-msg--you { align-self: flex-end; background: #2563eb; color: #fff; border-bottom-right-radius: 4px; }
.nscc-beacon-msg.is-thinking .nscc-beacon-msg__text { color: var(--text-muted, #71717a); font-style: italic; }
.nscc-beacon-res { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nscc-beacon-res__card {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; text-decoration: none; color: inherit;
    background: var(--bg-card, #fff); border: 1px solid var(--nscc-line, #e4e4e7);
}
.nscc-beacon-res__card:hover { border-color: #38bdf8; }
.nscc-beacon-res__kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; background: #e0f2fe; color: #075985; }
.nscc-beacon-res__card--video .nscc-beacon-res__kind { background: #ede9fe; color: #5b21b6; }
.nscc-beacon-res__card--faq .nscc-beacon-res__kind { background: #dcfce7; color: #166534; }
.nscc-beacon-res__label { font-size: 13px; }
.nscc-beacon-inline-btn {
    margin: 8px 6px 0 0; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--nscc-line, #d4d4d8);
    background: var(--bg-card, #fff); color: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nscc-beacon-inline-btn:disabled { opacity: .5; cursor: default; }
.nscc-beacon-inline-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.nscc-beacon-ask { flex: none; display: flex; gap: 6px; padding: 8px 12px 10px; }
.nscc-beacon-ask__input {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--nscc-line, #d4d4d8);
    background: var(--bg-page, #fff); color: inherit; font-size: 14px;
}
.nscc-beacon-ask__send { padding: 8px 14px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 700; cursor: pointer; }
.nscc-beacon-panel__foot { flex: none; padding: 0 12px 10px; }
.nscc-beacon-help-btn { width: 100%; padding: 7px; border-radius: 8px; border: 1px dashed var(--nscc-line, #d4d4d8); background: transparent; color: var(--text-muted, #71717a); font-size: 13px; cursor: pointer; }
.nscc-beacon-help { display: flex; flex-direction: column; margin-top: 8px; }
.nscc-beacon-help__text { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 8px; border: 1px solid var(--nscc-line, #d4d4d8); background: var(--bg-page, #fff); color: inherit; font: inherit; resize: vertical; }

/* Shadow me: the ghost cursor, the ring around the control, and the step callout. */
.nscc-beacon-ghost {
    position: fixed; left: 0; top: 0; z-index: var(--z-tooltip, 11000); width: 26px; height: 32px; pointer-events: none;
    /* 1.8s on this curve = GLIDE_MS / GLIDE_EASE in nscc-beacon-helper.js (paw prints and the glide sound follow it). */
    transform: translate(var(--x, 50vw), var(--y, 50vh)); transition: transform 1.8s cubic-bezier(.45, .05, .25, 1);
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, .9));
}
.nscc-beacon-ghost::before {
    content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .92);
    clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 96%, 52% 90%, 37% 55%, 66% 55%);
}
.nscc-beacon-ghost::after {
    content: ''; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, .9); opacity: 0;
}
/* Owner, 2026-10-19: slow, like learning from a person - the cursor starts at Beacon and glides
   there, then the highlight fades in, then the words. Cursor and paw prints are near-black on light
   screens and light grey on dark screens. */
.nscc-beacon-ghost.is-placing { transition: none; }
.nscc-beacon-ghost::before { background: #111827; }
.nscc-beacon-ghost { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95)) drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
body.dark-theme .nscc-beacon-ghost::before, :root.dark .nscc-beacon-ghost::before { background: #d1d5db; }
body.dark-theme .nscc-beacon-ghost, :root.dark .nscc-beacon-ghost { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9)) drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.nscc-beacon-spot { transition: transform .6s ease, width .6s ease, height .6s ease, opacity .8s ease; }
.nscc-beacon-callout { opacity: 0; transition: transform .5s ease, opacity .6s ease; }
.nscc-beacon-callout.is-on { opacity: 1; }
/* The instruction riding with the cursor ("Click Pay runs"); flips left near the right edge. */
.nscc-beacon-ghost__label {
    position: absolute; left: 14px; top: -34px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
    background: #0f172a; color: #f8fafc; font-size: 13px; font-weight: 700; line-height: 1.2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(4px);
    transition: opacity .25s ease .6s, transform .25s ease .6s;
}
.nscc-beacon-ghost.has-label .nscc-beacon-ghost__label { opacity: 1; transform: translateY(0); }
.nscc-beacon-ghost.is-flip .nscc-beacon-ghost__label { left: auto; right: 8px; }
/* The click imitation: the pointer presses down and a ripple spreads from its tip. */
.nscc-beacon-ghost.is-tap::before { animation: nscc-beacon-press .5s ease-out; }
.nscc-beacon-ghost.is-tap::after { animation: nscc-beacon-tap .5s ease-out; }
@keyframes nscc-beacon-press { 0%, 100% { transform: scale(1); } 35% { transform: scale(.78) translate(2px, 2px); } }
@keyframes nscc-beacon-tap { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(2.2); } }
/* Paw prints left behind the cursor (Cursor trail: paw prints): light gray, dropped as the cursor
   passes, then fading away. A pad and four toes, pointing the way. */
.nscc-beacon-paws { position: fixed; inset: 0; z-index: var(--z-tooltip, 11000); pointer-events: none; }
.nscc-beacon-paw {
    position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0;
    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
    background:
        radial-gradient(ellipse 5.5px 4.8px at 50% 74%, var(--nscc-beacon-paw, rgba(17, 24, 39, .7)) 98%, transparent 100%),
        radial-gradient(circle 2.5px at 18% 40%, var(--nscc-beacon-paw, rgba(17, 24, 39, .7)) 98%, transparent 100%),
        radial-gradient(circle 2.5px at 38% 18%, var(--nscc-beacon-paw, rgba(17, 24, 39, .7)) 98%, transparent 100%),
        radial-gradient(circle 2.5px at 62% 18%, var(--nscc-beacon-paw, rgba(17, 24, 39, .7)) 98%, transparent 100%),
        radial-gradient(circle 2.5px at 82% 40%, var(--nscc-beacon-paw, rgba(17, 24, 39, .7)) 98%, transparent 100%);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .8));
    animation: nscc-beacon-paw 1.6s ease-out var(--d, 0ms) both;
}
body.dark-theme .nscc-beacon-paw, :root.dark .nscc-beacon-paw { --nscc-beacon-paw: rgba(209, 213, 219, .75); }
@keyframes nscc-beacon-paw { 0% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(.7); } 8% { opacity: .9; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(1); } 100% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(1); } }
.nscc-beacon-spot {
    position: fixed; left: 0; top: 0; z-index: var(--z-tooltip, 11000); pointer-events: none; opacity: 0;
    width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0));
    border: 3px solid #38bdf8; border-radius: 10px; box-shadow: 0 0 0 4px rgba(56, 189, 248, .25), 0 0 18px rgba(56, 189, 248, .6);
    transition: transform .6s ease, width .6s ease, height .6s ease, opacity .3s ease;
}
.nscc-beacon-spot.is-on { opacity: 1; animation: nscc-beacon-spot-pulse 1.6s ease-in-out infinite; }
@keyframes nscc-beacon-spot-pulse { 50% { box-shadow: 0 0 0 8px rgba(56, 189, 248, .12), 0 0 26px rgba(56, 189, 248, .75); } }
.nscc-beacon-callout {
    position: fixed; left: 0; top: 0; z-index: var(--z-tooltip, 11000); width: min(320px, calc(100vw - 24px));
    transform: translate(var(--x, 12px), var(--y, 12px)); transition: transform .5s ease;
    padding: 12px 14px; border-radius: 12px; background: #0f172a; color: #f8fafc; box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
}
.nscc-beacon-callout__count { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7dd3fc; }
.nscc-beacon-callout__say { font-size: 16px; font-weight: 700; margin-top: 2px; }
.nscc-beacon-callout__why { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #cbd5e1; }
.nscc-beacon-callout .nscc-beacon-inline-btn { background: transparent; color: #f8fafc; border-color: #334155; }
.nscc-beacon-callout .nscc-beacon-inline-btn--primary { background: #2563eb; border-color: #2563eb; }
body.dark-theme .nscc-beacon-res__kind, :root.dark .nscc-beacon-res__kind { background: #0c4a6e; color: #e0f2fe; }
body.dark-theme .nscc-beacon-res__card--video .nscc-beacon-res__kind, :root.dark .nscc-beacon-res__card--video .nscc-beacon-res__kind { background: #4c1d95; color: #ede9fe; }
body.dark-theme .nscc-beacon-res__card--faq .nscc-beacon-res__kind, :root.dark .nscc-beacon-res__card--faq .nscc-beacon-res__kind { background: #14532d; color: #dcfce7; }
@media (max-width: 680px) {
    .nscc-beacon-launcher.is-out { transform: none; }
    .nscc-beacon-panel { right: 8px; left: 8px; width: auto; bottom: 184px; height: min(520px, calc(100vh - 200px)); max-height: calc(100vh - 200px); }
    .nscc-beacon-panel__grip, #nscc-beacon-size-btn { display: none; }
}
@media (max-width: 480px) {
    .nscc-beacon-launcher { right: 8px; bottom: 8px; width: 120px; height: 100px; }
    .nscc-beacon-panel { bottom: 116px; height: min(520px, calc(100vh - 130px)); max-height: calc(100vh - 130px); }
}
@media (prefers-reduced-motion: reduce) {
    .nscc-beacon-launcher *, .nscc-beacon-launcher *::before, .nscc-beacon-launcher *::after,
    .nscc-beacon-spot, .nscc-beacon-ghost, .nscc-beacon-ghost::before, .nscc-beacon-ghost::after, .nscc-beacon-callout,
    .nscc-beacon-launcher, .nscc-beacon-launcher.is-offstage, .nscc-beacon-panel, .nscc-beacon-msg, .nscc-beacon-dots > span, .nscc-beacon-finder__list { animation: none !important; transition: none !important; }
    .nscc-beacon-dock.is-nudge .nscc-beacon-tab { box-shadow: 0 0 0 3px #38bdf8; }
    .nscc-beacon-launcher.is-asleep .nscc-beacon-dog { animation: none !important; transform: translateY(6px) scaleY(.95); }
    .nscc-beacon-launcher.is-lying .nscc-beacon-dog { animation: none !important; transform: translateY(6px) scaleY(.95); }
    .nscc-beacon-zzz > span { animation: none !important; opacity: .8; }
    .nscc-beacon-zzz > span:nth-child(2) { transform: translate(12px, -18px); }
    .nscc-beacon-zzz > span:nth-child(3) { transform: translate(24px, -36px); }
    .nscc-beacon-nudge { animation: none !important; }
    .nscc-beacon-paws { display: none; }
}
/* During a walkthrough (Mark, 2026-10-21: "if Shadow has something in the background like another
   open window it gets confused"): above the app's own windows, so none buries him; moved to the
   other side when he would cover the control being shown, or out of the way for that step. */
.nscc-beacon-panel.is-shadowing, .nscc-beacon-dock.is-shadowing { z-index: calc(var(--z-modal, 9000) + 2); }
.nscc-beacon-launcher.is-shadowing { z-index: calc(var(--z-modal, 9000) + 3); }
.nscc-beacon-panel.is-dodging, .nscc-beacon-dock.is-dodging { right: auto; left: 18px; }
.nscc-beacon-launcher.is-dodging { visibility: hidden; pointer-events: none; }
.nscc-beacon-panel.is-stepping-aside, .nscc-beacon-dock.is-stepping-aside, .nscc-beacon-launcher.is-stepping-aside { visibility: hidden; pointer-events: none; }
/* His nap (nscc-beacon-helper.js "his nap"): head down on his droopiest frame, slow breathing, z's
   floating up; then he pushes the box off the right edge (is-shoved). */
.nscc-beacon-zzz { display: none; position: absolute; left: 58%; top: 2%; width: 40px; height: 60px; pointer-events: none; }
.nscc-beacon-zzz > span {
    position: absolute; left: 0; bottom: 0; font: 800 15px/1 system-ui, sans-serif; color: #64748b; opacity: 0;
    animation: nscc-beacon-zzz 3.6s ease-in infinite;
}
.nscc-beacon-zzz > span:nth-child(2) { animation-delay: 1.2s; font-size: 18px; }
.nscc-beacon-zzz > span:nth-child(3) { animation-delay: 2.4s; font-size: 22px; }
@keyframes nscc-beacon-zzz { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(26px, -44px) rotate(10deg); } }
body.dark-theme .nscc-beacon-zzz > span, :root.dark .nscc-beacon-zzz > span { color: #cbd5e1; }
.nscc-beacon-launcher.is-asleep .nscc-beacon-zzz { display: block; }
.nscc-beacon-launcher.is-asleep .nscc-beacon-dog { transform-origin: 50% 100%; animation: nscc-beacon-breathe 3.6s ease-in-out infinite; }
@keyframes nscc-beacon-breathe { 0%, 100% { transform: translateY(6px) scaleY(.95); } 50% { transform: translateY(7px) scaleY(.93); } }
.nscc-beacon-panel.is-shoved { transition: transform .9s cubic-bezier(.45, 0, .7, .6), opacity .3s ease .6s; transform: translateX(calc(100% + 80px)) rotate(2deg); opacity: 0; pointer-events: none; }
/* Hidden during a walkthrough: only the cursor, the highlight and the step box stay. */
.nscc-beacon-launcher.is-shadow-hidden { visibility: hidden; pointer-events: none; }
/* Real data: the box before step 1, and the stronger warning on a step that can't be undone. */
.nscc-beacon-callout--caution { border: 2px solid #f59e0b; }
.nscc-beacon-callout--caution .nscc-beacon-callout__count { color: #fbbf24; }
.nscc-beacon-callout__caution {
    margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.4;
    background: rgba(220, 38, 38, .18); border: 1px solid #f87171; color: #fecaca;
}
.nscc-beacon-spot.is-caution { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .25), 0 0 18px rgba(245, 158, 11, .6); }
.nscc-beacon-spot.is-done { border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25), 0 0 18px rgba(34, 197, 94, .6); }
/* "Looks like you're doing something else" - asked once per step, above the step itself. */
.nscc-beacon-callout__off { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #f59e0b; background: rgba(245, 158, 11, .14); }
.nscc-beacon-callout__off > strong { display: block; font-size: 14px; color: #fde68a; }
.nscc-beacon-callout__off .nscc-beacon-callout__why { margin-top: 2px; }
.nscc-beacon-callout__suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Where the step is from where the person is ("You're in Payroll; this step is in Accounting …"). */
.nscc-beacon-callout__route { margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.4; border: 1px solid #38bdf8; background: rgba(56, 189, 248, .12); color: #e0f2fe; }
/* "That didn't work": what the screen showed after the person's action, above the step. */
.nscc-beacon-callout__problem { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #f87171; background: rgba(220, 38, 38, .16); }
.nscc-beacon-callout__problem > strong { display: block; font-size: 14px; color: #fecaca; }
.nscc-beacon-callout__problem .nscc-beacon-callout__why { margin-top: 2px; }
.nscc-beacon-callout__problem--quiet { border-color: #94a3b8; background: rgba(148, 163, 184, .12); }
.nscc-beacon-callout__problem--quiet > strong { color: #f8fafc; }
/* "Before we start": what Beacon's checks found (assets/nscc-beacon-checks.js). */
.nscc-beacon-callout__finding { margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; border: 1px solid #334155; background: rgba(148, 163, 184, .08); }
.nscc-beacon-callout__finding > strong { display: block; font-size: 13px; color: #f8fafc; }
.nscc-beacon-callout__finding.is-stop { border-color: #f87171; background: rgba(220, 38, 38, .14); }
.nscc-beacon-callout__finding .nscc-beacon-callout__why { margin-top: 4px; }
/* A whole process, or "what I can walk you through for your work", in the chat. */
.nscc-beacon-procs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.nscc-beacon-procs__group, .nscc-beacon-procs__part { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nscc-beacon-procs__title { flex: 1 0 100%; font-size: 12px; font-weight: 700; color: var(--text-primary, #18181b); }
.nscc-beacon-procs__state { flex: 1 0 100%; margin: 0; font-size: 12px; color: var(--text-muted, #71717a); }
.nscc-beacon-procs__part { padding: 6px 8px; border: 1px solid var(--nscc-line, #d4d4d8); border-radius: 8px; }
.nscc-beacon-procs__part.is-stop { border-color: #f59e0b; }
.nscc-beacon-procs .nscc-beacon-inline-btn { margin: 0; }
.nscc-beacon-callout .nscc-beacon-res__card { background: #1e293b; border-color: #334155; color: #f8fafc; }
.nscc-beacon-callout .nscc-beacon-inline-btn--quiet { border-color: transparent; color: #94a3b8; }
/* "Did this help?" — one quiet line, no survey. */
.nscc-beacon-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-muted, #71717a); }
.nscc-beacon-fb__btn {
    padding: 2px 10px; border: 1px solid var(--nscc-line, #d4d4d8); border-radius: 999px;
    background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.nscc-beacon-fb__btn:hover { border-color: #38bdf8; color: var(--text-primary, #18181b); }
.nscc-beacon-fb__link { padding: 0; border: 0; background: none; color: #2563eb; font: inherit; text-decoration: underline; cursor: pointer; }
.nscc-beacon-fb__form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.nscc-beacon-fb__text { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--nscc-line, #d4d4d8); border-radius: 8px; font: inherit; resize: vertical; }