/* ============================================================================
   Header queue indicator (webapp ⇄ QB Desktop) — mockup variant J made real
   (mockups/agent_link_indicator_v2.html; build log
   130_sessions_header_queue_indicator.md).

   Two docks for one component, chosen by the header_queue script:
   - .nq-ind  — centered in the nav bar (absolute center, like the old
                nav-drain-status line): cloud → task-segment wire with a
                traveling dot → QB glyph, status message below.
   - .nq-rail — a slim full-width band directly under the nav when the
                header's free center is too tight (crowded laptop headers).
   - .nq-pop  — the click-open queue panel (feature-grouped task rows).
   Everything stays hidden while the queue is idle.
   ========================================================================== */

.nav-bar { position: sticky; }   /* was `relative`, which overrode styles.css's sticky and let the header scroll away above the fixed left rail (2026-09-05); sticky is still a containing block for the absolute indicator */

/* ── the centered header dock ─────────────────────────────────────────────── */
.nq-ind {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: none; background: none; cursor: pointer;
    font: inherit; color: #1c2b3a; padding: 3px 10px; border-radius: 9px;
}
.nq-ind:hover { background: #f2f5f8; }

/* ── the rail dock ────────────────────────────────────────────────────────── */
.nq-rail {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; border: none; border-bottom: 1px solid #e5eaf0;
    background: #fcfdfe; padding: 6px 18px; cursor: pointer;
    font: inherit; color: #1c2b3a;
}
.nq-rail:hover { background: #f2f5f8; }
.nq-rail[data-state="attention"] { background: #fffbfa; border-color: #e5b6ae; }

/* ── shared innards: glyphs, wire, caption ────────────────────────────────── */
.nq-deck { display: flex; align-items: center; height: 18px; }
.nq-glyph { width: 16px; height: 16px; flex: none; }
.nq-glyph.nq-cloud { color: #0f2a4a; }
.nq-glyph.nq-qb { color: #1e7d43; }
[data-state="attention"] .nq-glyph.nq-qb { color: #b23a2f; }

.nq-wire { position: relative; display: flex; align-items: center; gap: 2px;
           margin: 0 7px; height: 16px; }
.nq-wire i { width: 8px; height: 5px; border-radius: 2px; background: #e5eaf0; }
.nq-rail .nq-wire i { width: 14px; }
.nq-wire i.q { background: #e3d089; }
.nq-wire i.r { background: #2563a8; }
.nq-wire i.d { background: #79c398; }
.nq-wire i.h { background: #dd9187; }
.nq-ball { position: absolute; top: 50%; left: 0; width: 6px; height: 6px;
           margin-top: -3px; border-radius: 50%; background: #2563a8;
           box-shadow: 0 0 0 2px #fff; }
[data-state="active"] .nq-ball { animation: nq-travel 1.7s linear infinite; }
[data-state="attention"] .nq-ball { display: none; }
@keyframes nq-travel {
    0% { left: 0; opacity: 0; } 10% { opacity: 1; }
    90% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; }
}
@keyframes nq-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.nq-cap { font-size: 11.5px; line-height: 1.15; color: #6b7a89; white-space: nowrap; }
.nq-cap b { color: #1c2b3a; font-weight: 600; }
.nq-cap .nq-warn { color: #b23a2f; font-weight: 600; }
.nq-sep { color: #6b7a89; font-size: 11px; }

/* ── the panel ────────────────────────────────────────────────────────────── */
.nq-pop {
    position: fixed; z-index: 1200; width: 340px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #e5eaf0; border-radius: 12px;
    box-shadow: 0 12px 34px rgba(15, 42, 74, .16); text-align: left;
    font-family: inherit; color: #1c2b3a;
}
.nq-pop-head { display: flex; align-items: center; gap: 8px;
               padding: 12px 14px; border-bottom: 1px solid #e5eaf0; }
.nq-pop-head strong { font-size: 13px; }
.nq-link { margin-left: auto; font-size: 11.5px; font-weight: 600;
           display: flex; align-items: center; gap: 5px; }
.nq-link.ok { color: #1e7d43; } .nq-link.warn { color: #a08a1f; }
.nq-ldot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nq-ldot.pulse { animation: nq-blink 1.4s ease-in-out infinite; }
.nq-grp { display: flex; align-items: baseline; gap: 6px; padding: 9px 14px 2px; }
.nq-grp b { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
            color: #6b7a89; text-transform: uppercase; }
.nq-grp span { font-size: 10.5px; color: #6b7a89; }
.nq-rows { list-style: none; margin: 0; padding: 2px 6px 6px; }
.nq-rows li { display: flex; align-items: center; gap: 8px;
              padding: 6px 8px; border-radius: 8px; }
.nq-rows li:hover { background: #f6f8fa; }
.nq-chip { font-size: 10.5px; font-weight: 700; padding: 2px 7px;
           border-radius: 9px; white-space: nowrap; }
.nq-chip.q { background: #faf6e4; color: #a08a1f; }
.nq-chip.r { background: #eaf2fb; color: #2563a8; }
.nq-chip.d { background: #e9f6ee; color: #1e7d43; }
.nq-chip.h { background: #fbeeec; color: #b23a2f; }
.nq-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.nq-detail { font-size: 11px; color: #6b7a89; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; margin-left: auto;
             max-width: 150px; }
.nq-detail.ref { color: #1e7d43; font-weight: 600; }
.nq-retry { font: 11px/1 inherit; font-weight: 600; color: #b23a2f;
            background: none; border: 1px solid #eccac5; border-radius: 10px;
            padding: 3px 9px; cursor: pointer; margin-left: auto; flex: none; }
.nq-cancel { color: #6b7a89; border-color: #d8dfe6; margin-left: 6px; }
.nq-empty { padding: 18px 14px; color: #6b7a89; font-size: 12.5px; }
/* Shown while desktop-agent work holds the QB company file open — explains
   QuickBooks Desktop's "file in use / one user at a time" refusal. */
.nq-note { margin: 0; padding: 8px 14px; border-bottom: 1px solid #f0e6c8;
           background: #fdfaf1; color: #7a6a1f; font-size: 11.5px;
           line-height: 1.4; }
.nq-foot { border-top: 1px solid #e5eaf0; padding: 9px 14px;
           display: flex; justify-content: flex-end; }
.nq-foot a { font-size: 12px; font-weight: 600; color: #2563a8;
             text-decoration: none; }
/* Clear / Stop and Clear. Same pill as .nq-retry, but neutral and without its
   row-specific margin-left:auto — the footer's flex already right-aligns it. */
.nq-clear { font: 12px/1 inherit; font-weight: 600; color: #4a5a6a;
            background: none; border: 1px solid #d8dfe6; border-radius: 10px;
            padding: 5px 11px; cursor: pointer; flex: none; }
.nq-clear:hover { border-color: #b9c4cf; color: #2c3a47; }
.nq-clear[disabled] { opacity: .6; cursor: default; }

.nq-ind:focus-visible, .nq-rail:focus-visible, .nq-pop button:focus-visible,
.nq-pop a:focus-visible { outline: 2px solid #2563a8; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .nq-ball, .nq-ldot.pulse { animation: none !important; }
}