.bbx-nav { --bbx-line-strong: #cbd5e1; --bbx-subtle: #f1f5f9;
background: var(--bg, #fff); border-bottom: 1px solid var(--border); height: 56px;
display: flex; align-items: center; gap: 16px; padding: 0 20px;
position: sticky; top: 0; z-index: 100; }
.bbx-nav-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bbx-nav-center { display: flex; flex: 1; min-width: 0; justify-content: center; }
.bbx-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* shared dropdown base */
.bbx-nav .dd, .bbx-subnav ~ * .dd { position: relative; flex-shrink: 0; }
.bbx-nav .dd summary { list-style: none; cursor: pointer; }
.bbx-nav .dd summary::-webkit-details-marker { display: none; }
/* border:none kills the legacy .dd-panel hairline (gateway/linkedin define
.dd-panel{border;overflow:hidden}) so it doesn't double up with our shadow
ring. Leave overflow to each panel: most inherit the legacy hidden (fine -
content sits inside the radius), and .bbx-acct-panel needs it for its rounded
header. */
.bbx-nav .dd-panel { position: absolute; top: calc(100% + 6px); background: #fff;
border: none;
border-radius: var(--radius-md, 12px); z-index: 200;
box-shadow: 0 0 0 1px rgba(15,23,42,.05), 0 6px 16px -6px rgba(15,23,42,.14), 0 14px 34px -10px rgba(15,23,42,.18);
animation: bbxDropIn 140ms cubic-bezier(.34,1.4,.64,1); }
@keyframes bbxDropIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bbx-nav .dd-panel { animation: none; } }
/* Shared form primitives — moved here (from the gateway) so the feedback popover
styles correctly on every Worker-rendered app (#169). The settings-*PAGE* layout
(form/locked/dirtybar) stays gateway-local; only these reusable field/button rules
are shared. Vars resolve from each host; --border-strong falls back for hosts that
don't define it (e.g. linkedin). */
.settings-fieldgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.settings-fieldgroup label,
.settings-fieldgroup .settings-field-label {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--fg-muted);
}
.settings-input {
font-family: inherit; font-size: 14px; color: var(--fg);
padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
background: var(--invela-white); transition: border-color 120ms, box-shadow 120ms;
width: 100%;
}
.settings-input:hover { border-color: var(--border-strong, #cbd5e1); }
.settings-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.settings-input::placeholder { color: #64748b; }
select.settings-input { cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px;
}
.settings-btn {
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
padding: 9px 18px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border);
transition: background 120ms, border-color 120ms, color 120ms;
}
.settings-btn-primary { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.settings-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.settings-btn-ghost { background: var(--invela-white); color: var(--fg); }
.settings-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* logo trigger (mark or full wordmark) */
.bbx-logo-trigger { display: inline-flex; align-items: center; border: 1px solid transparent;
border-radius: var(--radius-sm, 8px); padding: 6px; transition: background 120ms, border-color 120ms; }
.bbx-logo-trigger--full svg { height: 28px; width: auto; display: block; }
.bbx-logo-trigger--mark svg { height: 24px; width: auto; display: block; }
.bbx-logo-trigger:hover { background: var(--bbx-subtle); border-color: var(--border); }
.bbx-nav .bbx-logo-dd[open] .bbx-logo-trigger { border-color: var(--accent); background: var(--accent-bg); }
/* The logo summary is a click target; the open/hover border IS the affordance,
so suppress the UA focus ring on pointer focus but keep it for keyboard
(:focus-visible) — matches the icon-cube variant, no outline on click. */
.bbx-nav .bbx-logo-dd summary { outline: none; -webkit-tap-highlight-color: transparent; }
.bbx-nav .bbx-logo-dd summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm, 8px); }
/* gateway wordmark morph: static SVG base (never blanks) + cropped morph video.
Crop offsets match loginPage()'s wordmark region of the 1200×400 stage. */
.bbx-brand-morph { position: relative; display: inline-flex; }
.bbx-brand-static { display: inline-flex; transition: opacity .25s ease; }
.bbx-brand-video { position: absolute; left: -4.546%; top: -26.34%; width: 109.091%; height: 152.672%;
opacity: 0; transition: opacity .25s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bbx-brand-static, .bbx-brand-video { transition: none; } }
/* breadcrumb */
.bbx-crumbs { display: flex; align-items: center; gap: 8px; }
.bbx-crumb-sep { font-size: 20px; font-weight: 300; color: var(--bbx-line-strong); user-select: none; }
.bbx-crumb { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 6px 10px;
font-size: 13px; font-weight: 500; color: var(--fg); transition: all 120ms; }
.bbx-crumb .chev { display: inline-flex; width: 11px; height: 11px; transition: transform .2s ease; }
.bbx-crumb .chev svg { width: 11px; height: 11px; }
.bbx-crumb-dd summary:hover .bbx-crumb { border-color: var(--accent); color: var(--accent); }
.bbx-nav .bbx-crumb-dd[open] .bbx-crumb { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-hover, #3550d4); }
.bbx-nav .bbx-crumb-dd[open] .bbx-crumb .chev { transform: rotate(180deg); }
/* breadcrumb panels */
.bbx-crumb-panel { left: 0; padding: 6px; }
.bbx-crumb-panel--dept { min-width: 220px; }
.bbx-crumb-panel--apps { width: 320px; }
.bbx-dept-item { position: relative; display: flex; align-items: center; padding: 8px 12px;
border-radius: var(--radius-sm, 8px); font-size: 13px; color: var(--fg); text-decoration: none; transition: background 80ms; }
.bbx-dept-item:hover { background: #f8fafc; text-decoration: none; }
.bbx-dept-item.current { background: var(--accent-bg); color: var(--accent-hover, #3550d4); font-weight: 600; }
.bbx-app-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px;
border-radius: var(--radius-sm, 8px); text-decoration: none; color: var(--fg); transition: background 80ms; }
.bbx-app-item:hover { background: #f8fafc; text-decoration: none; }
.bbx-app-item.current { background: var(--accent-bg); }
.bbx-app-item.current .bbx-app-name { color: var(--accent-hover, #3550d4); }
.bbx-active-accent { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); pointer-events: none; }
.bbx-app-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bbx-app-icon svg { width: 16px; height: 16px; }
.bbx-app-meta { min-width: 0; }
.bbx-app-name { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.bbx-app-desc { font-size: 11px; color: var(--fg-muted); line-height: 1.3; }
/* bluebox menu */
.bbx-menu-panel { left: 0; padding: 6px; min-width: 264px; }
.bbx-menu-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px;
text-decoration: none; color: var(--fg); transition: background 80ms; }
.bbx-menu-item:hover { background: #f8fafc; text-decoration: none; }
.bbx-menu-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
border-radius: 6px; background: var(--bbx-subtle); color: var(--fg-muted); flex-shrink: 0; }
.bbx-menu-icon svg { width: 15px; height: 15px; }
.bbx-menu-text { min-width: 0; }
.bbx-menu-title { display: block; font-size: 13px; font-weight: 600; }
.bbx-menu-sub { display: block; font-size: 11px; color: var(--fg-muted); }
.bbx-menu-ext { margin-left: auto; color: var(--fg-muted); opacity: .7; display: flex; }
.bbx-menu-ext svg { width: 12px; height: 12px; }
.bbx-menu-eyebrow { padding: 8px 10px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--fg-muted); }
.bbx-menu-divider { height: 1px; background: var(--border); margin: 6px 0; }
/* search trigger */
.bbx-search-trigger { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px;
border: 1px solid var(--border); background: var(--bbx-subtle); color: var(--fg-muted);
border-radius: var(--radius-sm, 8px); padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
transition: all 120ms; }
.bbx-search-trigger:hover { border-color: var(--accent); background: #fff; color: var(--accent); }
.bbx-search-icon { display: inline-flex; }
.bbx-search-icon svg { width: 15px; height: 15px; }
.bbx-search-label { flex: 1; text-align: left; }
.bbx-search-kbd { border: 1px solid var(--border); background: #fff; border-radius: 4px; padding: 0 4px;
font-family: inherit; font-size: 11px; color: var(--fg-muted); }
/* notifications */
.bbx-notif-trigger { position: relative; display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
color: var(--fg-muted); transition: all 120ms; }
.bbx-notif-trigger svg { width: 17px; height: 17px; }
.bbx-notif-dd summary:hover .bbx-notif-trigger { border-color: var(--accent); color: var(--accent); }
.bbx-nav .bbx-notif-dd[open] .bbx-notif-trigger { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.bbx-notif-panel { right: 0; padding: 6px; width: 300px; }
.bbx-notif-empty { padding: 28px 14px; text-align: center; }
.bbx-notif-empty-title { font-size: 13px; font-weight: 500; color: var(--fg); }
.bbx-notif-empty-sub { margin-top: 2px; font-size: 11.5px; color: var(--fg-muted); }
/* account */
.bbx-acct-trigger { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px); padding: 4px 8px 4px 4px; transition: all 120ms; }
.bbx-acct-avatar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
border-radius: 6px; background: var(--accent-bg); color: var(--accent-hover, #3550d4); font-size: 12px; font-weight: 700; }
.bbx-acct-name { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; max-width: 140px;
overflow: hidden; text-overflow: ellipsis; }
.bbx-acct-trigger .chev { display: inline-flex; width: 12px; height: 12px; color: var(--fg-muted); transition: transform .2s ease; }
.bbx-acct-trigger .chev svg { width: 12px; height: 12px; }
.bbx-acct-dd summary:hover .bbx-acct-trigger { border-color: var(--accent); }
.bbx-nav .bbx-acct-dd[open] .bbx-acct-trigger { border-color: var(--accent); background: var(--accent-bg); }
.bbx-nav .bbx-acct-dd[open] .bbx-acct-trigger .chev { transform: rotate(180deg); }
.bbx-acct-panel { right: 0; width: 240px; padding: 0; overflow: hidden; }
.bbx-acct-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.bbx-acct-header-name { font-size: 14px; font-weight: 600; }
.bbx-acct-header-email { font-size: 12px; color: var(--fg-muted); word-break: break-all; }
.bbx-acct-actions { padding: 6px; }
.bbx-acct-action { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px;
font-size: 13px; font-weight: 500; color: var(--fg); text-decoration: none; transition: background 80ms; }
.bbx-acct-action:hover { background: #f8fafc; text-decoration: none; }
.bbx-acct-action svg { width: 16px; height: 16px; color: var(--fg-muted); }
/* sub-nav row */
.bbx-subnav { --bbx-line-strong: #cbd5e1; --bbx-subtle: #f1f5f9;
display: flex; align-items: stretch; gap: 2px; height: 44px; overflow-x: auto;
border-bottom: 1px solid var(--border); background: var(--bbx-subtle, #f0f4f8); padding: 0 20px;
position: sticky; top: 56px; z-index: 90; }
.bbx-subnav-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px;
font-size: 13px; font-weight: 500; color: var(--fg-muted);
white-space: nowrap; text-decoration: none; transition: color 120ms, background 120ms; }
.bbx-subnav-tab svg { width: 14px; height: 14px; }
.bbx-subnav-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
background: var(--bbx-line-strong); opacity: 0; pointer-events: none; transition: opacity 120ms, background 120ms; }
.bbx-subnav-tab:hover { color: var(--fg); background: #f8fafc; text-decoration: none; }
.bbx-subnav-tab:hover::after { opacity: 1; background: var(--bbx-line-strong); }
.bbx-subnav-tab.active { color: var(--accent-hover, #3550d4); background: var(--accent-bg); border-radius: var(--radius-sm, 8px); }
.bbx-subnav-tab.active::after { opacity: 1; background: var(--accent); }
/* ── command palette ── */
.bbx-palette[hidden] { display: none; }
.bbx-palette { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; }
.bbx-palette-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.32); }
.bbx-palette-modal { position: relative; margin-top: 12vh; width: min(560px, calc(100vw - 32px));
background: #fff; border-radius: var(--radius-md, 12px); overflow: hidden;
box-shadow: 0 24px 64px -16px rgba(15,23,42,.4); animation: bbxDropIn 140ms cubic-bezier(.34,1.4,.64,1); }
@media (prefers-reduced-motion: reduce) { .bbx-palette-modal { animation: none; } }
.bbx-palette-inputwrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.bbx-palette-inputwrap > svg { width: 18px; height: 18px; color: var(--fg-muted); flex-shrink: 0; }
.bbx-palette-input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--fg); background: transparent; }
.bbx-palette-input::placeholder { color: var(--fg-muted); }
.bbx-palette-esc { border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 11px; color: var(--fg-muted); }
.bbx-palette-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.bbx-palette-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px;
border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: var(--fg); }
.bbx-palette-row.active { background: var(--accent-bg); }
.bbx-palette-row-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
border-radius: 8px; background: var(--bbx-subtle, #f0f4f8); color: var(--fg-muted); flex-shrink: 0; }
.bbx-palette-row.active .bbx-palette-row-icon { color: var(--accent); }
.bbx-palette-row-icon svg { width: 16px; height: 16px; }
.bbx-palette-row-text { flex: 1; min-width: 0; }
.bbx-palette-row-title { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbx-palette-row-title mark { background: transparent; color: var(--accent); font-weight: 700; }
.bbx-palette-row-sub { display: block; font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbx-palette-row-kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
color: var(--fg-muted); flex-shrink: 0; }
.bbx-palette-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--fg-muted); }
.bbx-palette-footer { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--fg-muted); }
.bbx-palette-footer kbd { border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-right: 2px; font-family: inherit; }
/* responsive */
@media (max-width: 768px) {
.bbx-nav { padding: 0 12px; gap: 8px; }
.bbx-acct-name { display: none; }
.bbx-app-desc { display: none; }
}
@media (max-width: 560px) {
.bbx-search-label { display: none; }
.bbx-search-kbd { display: none; }
.bbx-search-trigger { max-width: 40px; justify-content: center; }
.bbx-crumb-sep { display: none; }
}
.bbx-pulse { display:inline-block; position:relative; vertical-align:middle; margin-left:6px; }
/* Overlay host: the pulse rides OUTSIDE any wrapping (nested interactive content is invalid
HTML), positioned as an absolute corner overlay on a relative host that also holds the link.
z-index MUST clear any positioned content INSIDE the host's card (e.g. the launcher card's
agent-avatar stack sits at z-index:4) — the pulse establishes its own stacking context here, so
the open panel's own z-index:60 is CLAMPED within this value and cannot escape a too-low context.
Live-proven: at z-index:2 the avatars painted THROUGH the open panel (elementsFromPoint returned
IMG.pod-avatar on top of .bbx-pulse-panel). Kept below app modal/navbar layers. */
.bbx-pulse-host { position:relative; display:block; }
.bbx-pulse-host > .bbx-pulse { position:absolute; top:12px; right:12px; margin:0; z-index:30; }
.bbx-pulse > summary { list-style:none; cursor:pointer; display:inline-flex; }
.bbx-pulse > summary::-webkit-details-marker { display:none; }
/* The marker: a soft neon-blue glow (radial gradient, brand token via color-mix — no raw hex),
a white ring, and a brand-blue dot pulsating inside it. */
.bbx-pulse-dot { position:relative; display:inline-block; width:16px; height:16px; }
.bbx-pulse-glow { position:absolute; inset:-5px; border-radius:9999px; background:radial-gradient(circle, color-mix(in srgb, #4166f5 72%, transparent) 0%, color-mix(in srgb, #4166f5 38%, transparent) 42%, transparent 72%); }
.bbx-pulse-ring { position:absolute; inset:0; border-radius:9999px; background:#ffffff; box-shadow:0 0 0 1px color-mix(in srgb, #4166f5 30%, transparent), 0 2px 5px rgba(0,0,0,0.2); }
.bbx-pulse-ping { position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:9999px; background:#4166f5; transform:translate(-50%,-50%); animation:bbx-pulse-ping 1.4s ease-in-out infinite; }
@keyframes bbx-pulse-ping { 0%,100% { transform:translate(-50%,-50%) scale(0.8); opacity:0.9; } 50% { transform:translate(-50%,-50%) scale(1.25); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .bbx-pulse-ping { animation:none; } }
.bbx-pulse-panel {
position:absolute; z-index:60; top:calc(100% + 8px); right:0;
min-width:min(300px, calc(100vw - 1rem)); max-width:min(380px, calc(100vw - 1rem));
padding:12px; border-radius:10px; background:#ffffff; color:#0f172a;
box-shadow:0 8px 24px rgba(0,0,0,0.14); border:1px solid #e2e8f0; text-align:left;
max-height:min(70vh, 480px); overflow-y:auto;
}
.bbx-pulse-panel--left { right:auto; left:0; }
.bbx-pulse-panel::before { content:''; position:absolute; top:-8px; left:0; right:0; height:8px; }
.bbx-pulse-close { position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:none; background:transparent; color:#586273; cursor:pointer; border-radius:6px; }
.bbx-pulse-close:hover { background:#f1f5f9; color:#0f172a; }
.bbx-pulse-close svg { width:14px; height:14px; }
.bbx-pulse-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; padding-right:20px; }
.bbx-pulse-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius:9999px; background:#4166f5; color:#ffffff; font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.bbx-pulse-date { font-size:11px; font-weight:600; color:#586273; white-space:nowrap; }
.bbx-pulse-blurb { margin:0 0 8px; font-size:13px; line-height:1.4; }
.bbx-pulse-ba { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 8px; }
.bbx-pulse-ba-cell { margin:0; }
.bbx-pulse-ba-cell img { width:100%; height:auto; object-fit:cover; object-position:top; border-radius:6px; border:1px solid #e2e8f0; display:block; }
.bbx-pulse-ba-cell figcaption { font-size:10px; color:#586273; margin-top:2px; text-align:center; }
.bbx-pulse-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.bbx-pulse-link { font-size:12px; font-weight:600; color:#4166f5; text-decoration:none; }
.bbx-pulse-link:hover { text-decoration:underline; }
.bbx-pulse-ack { font-size:12px; font-weight:500; color:#ffffff; background:#4166f5; border:none; border-radius:8px; padding:6px 14px; cursor:pointer; white-space:nowrap; }
.bbx-pulse-ack:hover { background:#3550d4; }
/* Formerly inline style= attributes (#1766); last in the sheet so no earlier rule outranks them. */
.bbx-ext-mark { width: 10px; height: 10px; display: inline; vertical-align: middle; margin-left: 4px; opacity: 0.5; }
#bbx-cube-mark { display: block; overflow: visible; pointer-events: none; }
.bbx-new-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: 9999px; background: #4166f5; color: #ffffff; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.bbx-app-icon { background: #EEF2FF; }