/* PaxDesign Utility Dock — v5.0.1 Enterprise AI/Cyber SaaS dock styles. #pdx-dock stays inside #pdx-root (scoped variables, fixed position). #pdx-backdrop, #pdx-panel, #pdx-notif are appended to by JS. */ /* ─── Scroll lock ────────────────────────────────────────── */ body.pdx-no-scroll { overflow: hidden !important; } /* ─── Root: scoped design tokens ────────────────────────── */ #pdx-root { --pdx-accent: #c2ff00; --pdx-accent-dim: rgba(194,255,0,.15); --pdx-bg: #0d1117; --pdx-bg-el: #161b22; --pdx-bg-el2: #1c2128; --pdx-bg-hov: rgba(255,255,255,.06); --pdx-border: rgba(255,255,255,.08); --pdx-border-mid: rgba(255,255,255,.12); --pdx-hi: #e6edf3; --pdx-mid: #8b949e; --pdx-lo: #6e7681; --pdx-mute: #484f58; --pdx-red: #f85149; --pdx-red-dim: rgba(248,81,73,.15); --pdx-yellow: #d29922; --pdx-yellow-dim: rgba(210,153,34,.15); --pdx-green: #c2ff00; --pdx-green-dim: rgba(194,255,0,.15); --pdx-blue: #388bfd; --pdx-blue-dim: rgba(56,139,253,.12); --pdx-indigo: #6366f1; --pdx-indigo-dim: rgba(99,102,241,.12); --pdx-cyan: #06b6d4; --pdx-amber: #f59e0b; --pdx-emerald: #c2ff00; --pdx-r-sm: 6px; --pdx-r: 8px; --pdx-r-lg: 12px; --pdx-shadow: 0 4px 20px rgba(0,0,0,.4); --pdx-font: -apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif; --pdx-mono: 'SF Mono','Fira Code','Cascadia Code',monospace; --pdx-btn: 32px; --pdx-icon: 14px; --pdx-ease: .15s cubic-bezier(.4,0,.2,1); } /* Light theme */ #pdx-root[data-theme="light"] { --pdx-bg: #ffffff; --pdx-bg-el: #f6f8fa; --pdx-bg-el2: #eaeef2; --pdx-bg-hov: rgba(0,0,0,.04); --pdx-border: rgba(0,0,0,.08); --pdx-border-mid: rgba(0,0,0,.14); --pdx-hi: #1f2328; --pdx-mid: #57606a; --pdx-lo: #6e7781; --pdx-mute: #8c959f; --pdx-shadow: 0 4px 16px rgba(0,0,0,.12); /* Lime on white = invisible — darken accent for light mode */ --pdx-accent: #6b8c00; --pdx-accent-dim: rgba(107,140,0,.12); --pdx-green: #6b8c00; --pdx-green-dim: rgba(107,140,0,.12); --pdx-emerald: #6b8c00; --pdx-indigo: #4f46e5; --pdx-indigo-dim: rgba(79,70,229,.1); } @media (prefers-color-scheme:light) { #pdx-root[data-theme="auto"] { --pdx-bg: #ffffff; --pdx-bg-el: #f6f8fa; --pdx-bg-el2: #eaeef2; --pdx-bg-hov: rgba(0,0,0,.04); --pdx-border: rgba(0,0,0,.08); --pdx-border-mid: rgba(0,0,0,.14); --pdx-hi: #1f2328; --pdx-mid: #57606a; --pdx-lo: #6e7781; --pdx-mute: #8c959f; --pdx-shadow: 0 8px 32px rgba(0,0,0,.12); /* Lime on white = invisible — darken accent for light mode */ --pdx-accent: #6b8c00; --pdx-accent-dim: rgba(107,140,0,.12); --pdx-green: #6b8c00; --pdx-green-dim: rgba(107,140,0,.12); --pdx-emerald: #6b8c00; } } #pdx-root[data-size="compact"] { --pdx-btn: 26px; --pdx-icon: 12px; } #pdx-root[data-size="large"] { --pdx-btn: 38px; --pdx-icon: 16px; } /* ─── Dock rail ──────────────────────────────────────────── */ /* Dock base — shared properties (all screen sizes) */ /* ─── Dock base — MOBILE FIRST ───────────────────────────── */ /* Default (mobile ≤ 680px): full-width horizontal bar under header. No JS dependency — layout is correct from first paint. JS only adds --pdx-dock-top / --pdx-dock-h for dynamic offset. */ #pdx-dock { position: fixed; z-index: 99990; display: flex; align-items: center; background: var(--pdx-bg); border: 1px solid var(--pdx-border); /* Mobile layout — horizontal bar */ top: var(--pdx-dock-top, 0px); left: 0; right: 0; width: 100%; height: var(--pdx-dock-h, 48px); flex-direction: row; justify-content: center; flex-wrap: nowrap; gap: 0; padding: 0 max(8px, env(safe-area-inset-left, 8px)); border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--pdx-border); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #pdx-dock::-webkit-scrollbar { display: none; } /* ─── Desktop layout — vertical pill ────────────────────── */ /* Overrides the mobile base above. Completely separate layout. */ @media (min-width: var(--pdx-mobile-min, 681px)) { #pdx-dock { /* Reset mobile geometry */ top: 50%; left: auto; right: auto; width: auto; height: auto; overflow: visible; /* Desktop pill */ transform: translateY(-50%); flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; gap: 2px; border-radius: var(--pdx-r-lg); padding: 6px 5px; border: 1px solid var(--pdx-border); } #pdx-root[data-position="left"] #pdx-dock { left: 12px; } #pdx-root[data-position="right"] #pdx-dock { right: 12px; } } /* ─── Dock buttons ───────────────────────────────────────── */ .pdx-btn { position: relative; width: var(--pdx-btn); height: var(--pdx-btn); display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--pdx-r-sm); color: var(--pdx-lo); cursor: pointer; transition: background var(--pdx-ease), color var(--pdx-ease); outline: none; flex-shrink: 0; } .pdx-btn:hover { background: transparent; color: var(--pdx-hi); } .pdx-btn:focus-visible { outline: 2px solid var(--pdx-accent); outline-offset: 1px; } .pdx-btn.is-active { background: transparent; color: var(--pdx-hi); } /* Mobile default: bottom edge indicator */ .pdx-btn.is-active::before { content: ''; position: absolute; left: 50%; bottom: 0; top: auto; transform: translateX(-50%); width: 18px; height: 2px; background: var(--pdx-accent); border-radius: 2px 2px 0 0; } /* Desktop: left/right edge indicator */ @media (min-width: var(--pdx-mobile-min, 681px)) { .pdx-btn.is-active::before { left: -5px; bottom: auto; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; border-radius: 2px; } #pdx-root[data-position="right"] .pdx-btn.is-active::before { left: auto; right: -5px; } } .pdx-btn svg { width: var(--pdx-icon); height: var(--pdx-icon); stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; pointer-events: none; flex-shrink: 0; } .pdx-btn::after { content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%); background: #161b22; border: 1px solid rgba(255,255,255,.12); color: #e6edf3; font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space: nowrap; padding: 5px 9px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .1s; z-index: 99998; box-shadow: 0 4px 12px rgba(0,0,0,.3); } #pdx-root[data-position="left"] .pdx-btn::after { left: calc(100% + 10px); } #pdx-root[data-position="right"] .pdx-btn::after { right: calc(100% + 10px); left: auto; } .pdx-btn:hover::after { opacity: 1; } /* Mobile default: vertical divider between button groups */ .pdx-sep { display: block; width: 1px; height: 18px; background: var(--pdx-border); margin: 0 4px; flex-shrink: 0; } /* Desktop: horizontal divider */ @media (min-width: var(--pdx-mobile-min, 681px)) { .pdx-sep { width: 18px; height: 1px; margin: 3px 0; } } /* ═══════════════════════════════════════════════════════════ BACKDROP ═══════════════════════════════════════════════════════════ */ #pdx-backdrop { display: none; position: fixed; inset: 0; z-index: 99994; background: rgba(0,0,0,.55); } #pdx-backdrop.is-open { display: block; } /* ═══════════════════════════════════════════════════════════ PANEL ═══════════════════════════════════════════════════════════ */ /* Panel base — shared (all screen sizes) */ /* ─── Panel — scroll architecture ──────────────────────────── Single scroll container model: #pdx-panel → fixed, overflow:hidden, defines the viewport #pdx-panel-inner → height:100%, flex column, no overflow .pdx-ph → flex:1, min-height:0, overflow:hidden .pdx-ph-hd → flex-shrink:0, sticky header (no scroll) .pdx-ph-body → flex:1, min-height:0, overflow-y:auto ← ONLY scroller This prevents double-scroll and ensures content always reaches the bottom. ─────────────────────────────────────────────────────────── */ /* Mobile default: full-width bar pinned below dock, fills to bottom of screen */ #pdx-panel { position: fixed; z-index: 99995; background: var(--pdx-bg, #0d1117); /* Panel itself does NOT scroll — inner flex layout handles it */ overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; border: 1px solid var(--pdx-border, rgba(255,255,255,.08)); /* Mobile geometry: full-width, fills screen below dock */ top: var(--pdx-panel-top, 48px); left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-left: none; border-right: none; border-bottom: none; border-radius: 0; transition: transform .26s cubic-bezier(.4,0,.2,1); } #pdx-panel:not(.is-open) { transform: translateY(-102%); } #pdx-panel.is-open { transform: translateY(0); } /* ─── Desktop panel — side-slide ────────────────────────── */ @media (min-width: var(--pdx-mobile-min, 681px)) { #pdx-panel { top: 0; bottom: 0; left: auto; right: auto; width: var(--pdx-panel-w-md, min(420px, calc(100vw - 80px))); max-width: min(480px, calc(100vw - 48px)); max-height: 100dvh; border: 1px solid var(--pdx-border, rgba(255,255,255,.08)); border-radius: 0; transition: transform .26s cubic-bezier(.4,0,.2,1); } #pdx-root[data-position="left"] #pdx-panel { left: 0; right: auto; border-radius: 0 12px 12px 0; } #pdx-root[data-position="right"] #pdx-panel { right: 0; left: auto; border-radius: 12px 0 0 12px; } #pdx-root[data-position="left"] #pdx-panel:not(.is-open) { transform: translateX(-110%); } #pdx-root[data-position="left"] #pdx-panel.is-open { transform: translateX(0); } #pdx-root[data-position="right"] #pdx-panel:not(.is-open) { transform: translateX(110%); } #pdx-root[data-position="right"] #pdx-panel.is-open { transform: translateX(0); } } /* Inner container: fills panel exactly, flex column, no overflow */ #pdx-panel-inner { height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* ─── Panel content wrapper ──────────────────────────────── */ /* .pdx-ph fills the inner container and constrains .pdx-ph-body scroll */ .pdx-ph { display: flex; flex-direction: column; flex: 1; min-height: 0; /* critical: allows flex child to shrink below content size */ overflow: hidden; } /* Panel header: column layout, no overflow clipping. Right padding reserves space so title text never runs under the close button. */ .pdx-ph-hd { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; gap: 0; padding: 14px 52px 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); background: var(--pdx-bg-el, #161b22); flex-shrink: 0; } /* Title row */ .pdx-ph-title { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--pdx-hi, #e6edf3); margin: 0; flex-wrap: wrap; } .pdx-ph-title svg { width: 16px; height: 16px; stroke: var(--pdx-accent, #c2ff00); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .pdx-ph-sub { font: 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--pdx-lo, #6e7681); margin-top: 3px; } /* .pdx-ph-body is the ONLY scroll container in the panel. flex:1 + min-height:0 makes it fill remaining space without overflowing .pdx-ph. */ .pdx-ph-body { padding: var(--pdx-panel-scroll-pad, 16px 20px); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scroll-behavior: smooth; scrollbar-gutter: stable; } /* Chat panel: body is the flex container for messages + footer */ .pdx-ph--chat .pdx-ph-body { padding: 0; gap: 0; display: flex; flex-direction: column; min-height: 0; } /* ─── Close button ───────────────────────────────────────── */ /* Injected by JS into #pdx-panel-inner (NOT inside .pdx-ph). #pdx-panel-inner has no overflow:hidden so the button is never clipped. position:absolute relative to #pdx-panel-inner (which is position:relative). */ #pdx-panel-inner { position: relative; /* establishes containing block for .pdx-mobile-close */ } .pdx-mobile-close { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--pdx-bg-el2, rgba(255,255,255,.1)); border-radius: 50%; color: var(--pdx-mid, #8b949e); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; /* Above .pdx-ph-hd (z-index:10) and all panel content */ z-index: 20; /* Never participates in flex layout — purely overlaid */ pointer-events: auto; } .pdx-mobile-close:hover, .pdx-mobile-close:active { background: rgba(255,255,255,.18); color: var(--pdx-hi, #e6edf3); } .pdx-mobile-close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; display: block; } /* ─── Badges ─────────────────────────────────────────────── */ .pdx-badge { font: 500 10px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; padding: 2px 6px; border-radius: 20px; background: rgba(56,139,253,.15); color: #388bfd; border: 1px solid rgba(56,139,253,.3); } /* .pdx-badge--new defined in v4 section below with CSS variable tokens */ /* ─── Inputs ─────────────────────────────────────────────── */ .pdx-input { width: 100%; padding: 8px 12px; background: #161b22; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #e6edf3; font: 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; outline: none; transition: border-color .15s; box-sizing: border-box; } .pdx-input:focus { border-color: #c2ff00; } .pdx-input::placeholder { color: #484f58; } .pdx-textarea { width: 100%; padding: 8px 12px; background: #161b22; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #e6edf3; font: 13px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; outline: none; resize: vertical; min-height: 80px; transition: border-color .15s; box-sizing: border-box; } .pdx-textarea:focus { border-color: #c2ff00; } .pdx-textarea::placeholder { color: #484f58; } .pdx-select { width: 100%; padding: 8px 12px; background: #161b22; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #e6edf3; font: 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; outline: none; cursor: pointer; box-sizing: border-box; } .pdx-select:focus { border-color: #c2ff00; } .pdx-input-row { display: flex; gap: 8px; } .pdx-input-row .pdx-input { flex: 1; } .pdx-field { display: flex; flex-direction: column; gap: 6px; } .pdx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pdx-label { font: 500 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; text-transform: uppercase; letter-spacing: .04em; } /* ─── Buttons ────────────────────────────────────────────── */ .pdx-btn-primary { padding: 8px 16px; background: #c2ff00; border: none; border-radius: 6px; color: #0d1117; font: 600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; transition: background .15s, opacity .15s; white-space: nowrap; flex-shrink: 0; } .pdx-btn-primary:hover { background: #d4ff33; } .pdx-btn-primary:disabled { opacity: .5; cursor: not-allowed; } .pdx-btn-primary.pdx-btn-full { width: 100%; } .pdx-btn-ghost, .pdx-btn-secondary { padding: 7px 12px; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #8b949e; font: 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap; flex-shrink: 0; } .pdx-btn-ghost:hover, .pdx-btn-secondary:hover { border-color: rgba(255,255,255,.25); color: #e6edf3; } .pdx-btn-danger { padding: 7px 12px; background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.3); border-radius: 6px; color: #f85149; font: 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; flex-shrink: 0; } .pdx-btn-danger:hover { background: rgba(248,81,73,.2); border-color: rgba(248,81,73,.5); } .pdx-btn-sm { padding: 5px 10px; font-size: 12px; } .pdx-btn-icon { padding: 4px 8px; font-size: 14px; line-height: 1; } /* ─── Tabs ───────────────────────────────────────────────── */ .pdx-tabs { display: flex; gap: 2px; padding: 4px; background: #161b22; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); } .pdx-tab { flex: 1; padding: 6px 10px; background: transparent; border: none; border-radius: 6px; color: #6e7681; font: 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; transition: background .15s, color .15s; } .pdx-tab:hover { color: #e6edf3; } .pdx-tab.is-active { background: #0d1117; color: #e6edf3; font-weight: 600; } .pdx-tab-pane { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; } /* ─── Sections ───────────────────────────────────────────── */ .pdx-section { display: flex; flex-direction: column; gap: 6px; } .pdx-section-sm { margin-top: 4px; } .pdx-section-title { font: 600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.06); } .pdx-section-title--warn { color: #d29922; } /* ─── KV grid ────────────────────────────────────────────── */ .pdx-kv-grid { display: flex; flex-direction: column; gap: 4px; } .pdx-kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .pdx-kv-key { font: 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #6e7681; flex-shrink: 0; text-transform: capitalize; } .pdx-kv-val { font: 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; text-align: right; word-break: break-all; } /* ─── Risk display ───────────────────────────────────────── */ .pdx-risk-header { display: flex; align-items: center; gap: 14px; padding: 14px; background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; } .pdx-risk-score { display: flex; flex-direction: column; align-items: center; width: 56px; flex-shrink: 0; } .pdx-risk-num { font: 700 28px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--score-color, #e6edf3); } .pdx-risk-label { font: 500 10px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--score-color, #8b949e); margin-top: 3px; text-transform: uppercase; } .pdx-risk-meta { flex: 1; min-width: 0; } .pdx-risk-domain { font: 600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdx-risk-scan-id { font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #484f58; margin-top: 4px; } .pdx-risk-time { font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #484f58; margin-top: 2px; } /* ─── Risk factors ───────────────────────────────────────── */ .pdx-factors { display: flex; flex-direction: column; gap: 4px; } .pdx-factor { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; border-left: 3px solid transparent; background: rgba(255,255,255,.03); } .pdx-factor--critical { border-color: #f85149; background: rgba(248,81,73,.08); } .pdx-factor--high { border-color: #d29922; background: rgba(210,153,34,.08); } .pdx-factor--medium { border-color: #388bfd; background: rgba(56,139,253,.08); } .pdx-factor--low { border-color: #484f58; } .pdx-factor-name { flex: 1; font: 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; } .pdx-factor-val { font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; } .pdx-factor-risk { font: 600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #f85149; } /* ─── SSL grade ──────────────────────────────────────────── */ .pdx-ssl-grade { font: 700 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; padding: 2px 8px; border-radius: 4px; } .pdx-grade--good { background: rgba(194,255,0,.15); color: #c2ff00; } .pdx-grade--warn { background: rgba(210,153,34,.15); color: #d29922; } .pdx-grade--bad { background: rgba(248,81,73,.15); color: #f85149; } /* ─── Anomalies & signals ────────────────────────────────── */ .pdx-anomaly { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: rgba(210,153,34,.08); border: 1px solid rgba(210,153,34,.2); border-radius: 6px; font: 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #d29922; } .pdx-anomaly svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; } .pdx-signal { padding: 5px 10px; border-radius: 6px; font: 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .pdx-signal--pos { background: rgba(194,255,0,.1); color: #c2ff00; } .pdx-signal--neg { background: rgba(248,81,73,.1); color: #f85149; } .pdx-signal--neutral { background: rgba(255,255,255,.05); color: #8b949e; } /* ─── Paywall ────────────────────────────────────────────── */ .pdx-paywall { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px; text-align: center; background: var(--pdx-bg-el, #161b22); border: 1px solid var(--pdx-border-mid, rgba(255,255,255,.12)); border-radius: 10px; margin-top: 4px; } .pdx-paywall-icon svg { width: 28px; height: 28px; stroke: var(--pdx-accent, #c2ff00); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pdx-paywall-title { font: 600 15px/1.2 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-hi, #e6edf3); } .pdx-paywall-desc { font: 13px/1.55 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-mid, #8b949e); max-width: 320px; } .pdx-paywall-locked { font: 11px/1.4 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-mute, #484f58); } /* Price display: currency + amount + period */ .pdx-paywall-price { display: flex; align-items: baseline; gap: 4px; } .pdx-paywall-currency { font: 500 13px/1 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-mid, #8b949e); } .pdx-paywall-amount { font: 700 28px/1 var(--pdx-mono, 'SF Mono','Fira Code',monospace); color: var(--pdx-accent, #c2ff00); letter-spacing: -.02em; } .pdx-paywall-period { font: 11px/1 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-lo, #6e7681); } /* Paywall feature list */ .pdx-paywall-features { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--pdx-border, rgba(255,255,255,.08)); padding-top: 14px; margin-top: 2px; } .pdx-pwf-item { display: flex; align-items: flex-start; gap: 8px; font: 12px/1.5 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-mid, #8b949e); } .pdx-pwf-check { flex-shrink: 0; width: 13px; height: 13px; margin-top: 1px; stroke: var(--pdx-accent, #c2ff00); opacity: .9; } .pdx-pwf-item span { flex: 1; } .pdx-paywall-inline { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--pdx-bg-el, #161b22); border: 1px solid var(--pdx-border-mid, rgba(255,255,255,.12)); border-radius: 8px; } .pdx-paywall-inline-title { font: 600 12px/1 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-hi, #e6edf3); } .pdx-paywall-inline-desc { font: 12px/1 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-mid, #8b949e); } .pdx-paywall-inline-title { font: 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; } /* ─── Scan stages / progress ─────────────────────────────── */ .pdx-scanning { padding: 16px 0; } /* ─── Result container ───────────────────────────────────── */ .pdx-result { display: flex; flex-direction: column; gap: 12px; } .pdx-result-header { display: flex; align-items: center; gap: 8px; font: 600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; } .pdx-result-header .pdx-export-btn { margin-left: auto; } /* ─── Tags ───────────────────────────────────────────────── */ .pdx-tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,.07); color: #8b949e; font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; border: 1px solid rgba(255,255,255,.08); } .pdx-tag--sm { padding: 1px 5px; font-size: 10px; } /* ─── Chat ───────────────────────────────────────────────── */ .pdx-persona-select { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; } .pdx-persona-btn { padding: 4px 10px; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: #6e7681; font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .pdx-persona-btn:hover { border-color: rgba(255,255,255,.2); color: #e6edf3; } .pdx-persona-btn.is-active { background: rgba(194,255,0,.15); border-color: rgba(194,255,0,.4); color: #c2ff00; } .pdx-chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; /* flex child must shrink */ -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .pdx-chat-msg { display: flex; } .pdx-chat-msg--user { justify-content: flex-end; } .pdx-chat-msg--assistant, .pdx-chat-msg--system, .pdx-chat-msg--error { justify-content: flex-start; } .pdx-chat-bubble { max-width: 85%; padding: 9px 13px; border-radius: 10px; font: 13px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; word-break: break-word; } .pdx-chat-msg--user .pdx-chat-bubble { background: #c2ff00; color: #0d1117; border-radius: 10px 10px 2px 10px; } .pdx-chat-msg--assistant .pdx-chat-bubble { background: #161b22; color: #e6edf3; border: 1px solid rgba(255,255,255,.08); border-radius: 10px 10px 10px 2px; } .pdx-chat-msg--system .pdx-chat-bubble { background: rgba(56,139,253,.1); color: #388bfd; font-size: 11px; border-radius: 6px; } .pdx-chat-msg--error .pdx-chat-bubble { background: rgba(248,81,73,.1); color: #f85149; border-radius: 6px; } .pdx-chat-msg--thinking .pdx-chat-bubble { padding: 12px 16px; } .pdx-dots { display: flex; gap: 4px; align-items: center; } .pdx-dots span { width: 6px; height: 6px; border-radius: 50%; background: #8b949e; animation: pdx-dot .8s infinite; } .pdx-dots span:nth-child(2) { animation-delay: .15s; } .pdx-dots span:nth-child(3) { animation-delay: .3s; } @keyframes pdx-dot { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } } .pdx-chat-footer { padding: 12px 20px; border-top: 1px solid var(--pdx-border, rgba(255,255,255,.08)); background: var(--pdx-bg-el, #161b22); flex-shrink: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .pdx-chat-input-row { display: flex; flex-direction: column; gap: 8px; } .pdx-chat-input { width: 100%; padding: 8px 12px; background: #0d1117; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: #e6edf3; font: 13px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; outline: none; resize: none; box-sizing: border-box; } .pdx-chat-input:focus { border-color: #c2ff00; } .pdx-chat-actions { display: flex; gap: 6px; justify-content: flex-end; } /* ─── Steps (builder) ────────────────────────────────────── */ .pdx-step { margin-bottom: 6px; } .pdx-step-inner { display: flex; gap: 6px; align-items: center; } .pdx-step-inner .pdx-select { width: 90px; flex-shrink: 0; } .pdx-step-inner .pdx-input { flex: 1; } .pdx-step-result { background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; } .pdx-step-result-hd { padding: 8px 12px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06); font: 600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; display: flex; align-items: center; gap: 8px; } .pdx-step-result-body { padding: 10px 12px; font: 12px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; max-height: 120px; overflow-y: auto; } /* ─── Pipeline trace ─────────────────────────────────────── */ .pdx-agent-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .pdx-agent-row .pdx-select { width: 110px; flex-shrink: 0; } .pdx-agent-row .pdx-input { flex: 1; } .pdx-trace-item { background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .pdx-trace-agent { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06); font: 600 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; } .pdx-trace-agent svg { width: 12px; height: 12px; stroke: #c2ff00; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .pdx-trace-output { padding: 10px 12px; font: 12px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; max-height: 100px; overflow-y: auto; } .pdx-final-output { background: rgba(194,255,0,.06); border: 1px solid rgba(194,255,0,.2); border-radius: 8px; overflow: hidden; } .pdx-final-output .pdx-section-title { padding: 8px 12px; margin: 0; border-bottom: 1px solid rgba(194,255,0,.15); color: #c2ff00; } .pdx-output-body { padding: 10px 12px; font: 12px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; max-height: 150px; overflow-y: auto; } /* ─── Connector ──────────────────────────────────────────── */ .pdx-conn-status { padding: 10px 14px; border-radius: 8px; font: 600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; display: flex; align-items: center; gap: 8px; } .pdx-conn-status--ok { background: rgba(194,255,0,.1); color: #c2ff00; border: 1px solid rgba(194,255,0,.2); } .pdx-conn-status--fail { background: rgba(248,81,73,.1); color: #f85149; border: 1px solid rgba(248,81,73,.2); } .pdx-conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pdx-conn-card { padding: 12px; background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; } .pdx-conn-name { font: 600 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; margin-bottom: 4px; } .pdx-conn-desc { font: 11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #6e7681; } /* ─── Code block ─────────────────────────────────────────── */ .pdx-code { background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 10px 12px; font: 11px/1.6 'SF Mono','Fira Code',monospace; color: #e6edf3; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; } /* ─── Threat intel ───────────────────────────────────────── */ .pdx-feed-list { display: flex; flex-direction: column; gap: 6px; } .pdx-feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #161b22; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; } .pdx-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .pdx-feed-name { font: 600 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; } .pdx-feed-desc { font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #6e7681; margin-top: 2px; } /* ─── Templates ──────────────────────────────────────────── */ .pdx-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pdx-tpl-card { padding: 12px; background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s; } .pdx-tpl-card:hover { border-color: rgba(194,255,0,.3); } .pdx-tpl-name { font: 600 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; } .pdx-tpl-steps { font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #6e7681; } /* ─── Job history ────────────────────────────────────────── */ .pdx-job-list { display: flex; flex-direction: column; gap: 4px; } .pdx-job-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); } .pdx-job--done { border-color: rgba(194,255,0,.2); } .pdx-job--fail { border-color: rgba(248,81,73,.2); } .pdx-job--pending { border-color: rgba(56,139,253,.2); } .pdx-job-id { flex: 1; color: #6e7681; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdx-job-status { color: #8b949e; } .pdx-job-date { color: #484f58; } /* ─── Scan history ───────────────────────────────────────── */ .pdx-history-list { display: flex; flex-direction: column; gap: 4px; } .pdx-hist-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: rgba(255,255,255,.03); border-left: 3px solid transparent; } .pdx-hist--clean { border-color: #c2ff00; } .pdx-hist--warn { border-color: #d29922; } .pdx-hist--bad { border-color: #f85149; } .pdx-hist-target { flex: 1; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdx-hist-score { font-weight: 700; color: #8b949e; } .pdx-hist-verdict { color: #6e7681; } /* ─── Workspaces ─────────────────────────────────────────── */ .pdx-ws-list { display: flex; flex-direction: column; gap: 6px; } .pdx-ws-item { padding: 10px 12px; background: #161b22; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; cursor: pointer; transition: border-color .15s; } .pdx-ws-item:hover { border-color: rgba(255,255,255,.18); } .pdx-ws-item-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .pdx-ws-title { font: 600 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdx-ws-pin { font-size: 12px; } .pdx-ws-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pdx-ws-date { font: 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #484f58; margin-left: auto; } .pdx-ws-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } /* ─── Lists ──────────────────────────────────────────────── */ .pdx-steps-list, .pdx-list { margin: 0; padding-left: 18px; font: 12px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; } .pdx-prose { font: 12px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #e6edf3; } /* ─── Info box ───────────────────────────────────────────── */ .pdx-info-box { padding: 10px 12px; background: rgba(56,139,253,.08); border: 1px solid rgba(56,139,253,.15); border-radius: 6px; font: 11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #8b949e; } /* ─── States ─────────────────────────────────────────────── */ .pdx-empty { padding: 32px 20px; text-align: center; color: #484f58; font: 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .pdx-loading { padding: 20px; text-align: center; color: #484f58; font: 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .pdx-error { padding: 10px 12px; background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.2); border-radius: 6px; color: #f85149; font: 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .pdx-success { padding: 10px 12px; background: rgba(194,255,0,.1); border: 1px solid rgba(194,255,0,.2); border-radius: 6px; color: #c2ff00; font: 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .pdx-error-msg { font: 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: #f85149; } /* ─── Notifications ──────────────────────────────────────── */ #pdx-notif { position: fixed; bottom: 20px; right: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .pdx-notif-item { padding: 10px 16px; border-radius: 8px; font: 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.4); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: auto; max-width: 320px; } .pdx-notif-item.is-visible { opacity: 1; transform: translateY(0); } .pdx-notif-item--info { background: #161b22; color: #e6edf3; border: 1px solid rgba(255,255,255,.12); } .pdx-notif-item--success { background: rgba(194,255,0,.15); color: #c2ff00; border: 1px solid rgba(194,255,0,.3); } .pdx-notif-item--warn { background: rgba(210,153,34,.15); color: #d29922; border: 1px solid rgba(210,153,34,.3); } .pdx-notif-item--error { background: rgba(248,81,73,.15); color: #f85149; border: 1px solid rgba(248,81,73,.3); } /* ═══════════════════════════════════════════════════════════ RESPONSIVE & MOBILE — v6.0 Architecture: • ≤ 860px tablet : wider panel, larger touch targets • ≤ 680px mobile : dock mode driven by [data-mobile-dock] under-header : full-width bar pinned below header bottom-* : floating pill above safe area • ≤ 380px xs : tighten further CSS custom properties set by JS (setupMobile): --pdx-vh : 1% of real viewport height (svh fallback) --pdx-dock-top : top offset (admin bar height) --pdx-dock-h : dock bar height in px --pdx-panel-top : panel top = dock-top + dock-h --pdx-panel-h-pct : panel height % (admin setting, 50–96) --pdx-icon-size : icon size override --pdx-btn-size : button size override --pdx-compact : 1 when compact mode active ═══════════════════════════════════════════════════════════ */ /* ─── Small tablet (681px – 860px) ──────────────────────── */ /* Desktop layout (side-slide panel) but narrower viewport. Panel fills more of the screen; grids collapse to single column. */ @media (min-width: var(--pdx-mobile-min, 681px)) and (max-width: 860px) { /* Panel: wider relative to viewport on small tablets */ #pdx-panel { width: min(380px, calc(100vw - 60px)); } /* Dock: slightly smaller buttons to save horizontal space */ .pdx-btn { width: 30px; height: 30px; } /* Collapse multi-column grids */ .pdx-tpl-grid { grid-template-columns: 1fr; } .pdx-conn-grid { grid-template-columns: 1fr; } .pdx-field-row { grid-template-columns: 1fr; } .pdx-metric-grid { grid-template-columns: 1fr 1fr; } /* Tabs: slightly more compact */ .pdx-tab { padding: 6px 9px; font-size: 11px; } /* Panel header: reduce padding */ .pdx-ph-hd { padding: 12px 48px 12px 16px; } .pdx-ph-body { padding: 14px 16px; } /* Cap tags: wrap cleanly */ .pdx-module-caps { gap: 3px; } .pdx-cap-tag { font-size: 8px; padding: 2px 5px; } } /* ─── Medium tablet (861px – 1024px) ────────────────────── */ @media (min-width: 861px) and (max-width: 1024px) { #pdx-panel { width: min(400px, calc(100vw - 80px)); } } /* ═══════════════════════════════════════════════════════════ MOBILE (≤ 680px) — SHARED BASE (both dock modes) ═══════════════════════════════════════════════════════════ */ @media (max-width: var(--pdx-mobile-max, 680px)) { /* Body scroll lock — iOS-safe fixed positioning */ body.pdx-no-scroll { overflow: hidden !important; position: fixed !important; width: 100% !important; left: 0 !important; } /* Panel inner: height:100% so flex chain reaches .pdx-ph-body */ #pdx-panel-inner { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .pdx-ph { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } /* Panel header: tighter padding on mobile. Right padding still reserves space so title doesn't run under the close button. */ .pdx-ph-hd { padding: 12px 48px 10px 16px; } .pdx-ph-title { font-size: 14px; } /* Close button: slightly smaller on mobile, same top-right position */ .pdx-mobile-close { top: 10px; right: 12px; width: 30px; height: 30px; } /* Panel body: the single scroll container — safe-area bottom padding */ .pdx-ph-body { padding: 14px 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); gap: 10px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } /* Dock buttons: comfortable touch targets, no tooltips */ .pdx-btn { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .pdx-btn svg { width: 16px; height: 16px; } .pdx-btn::after { display: none !important; } /* Separator: vertical line between button groups */ .pdx-sep { display: block; width: 1px; height: 18px; background: var(--pdx-border, rgba(255,255,255,.08)); margin: 0 4px; flex-shrink: 0; } /* Active indicator: bottom bar for horizontal dock */ .pdx-btn.is-active::before { left: 50% !important; right: auto !important; top: auto !important; bottom: -1px !important; transform: translateX(-50%) !important; width: 18px; height: 2px; border-radius: 2px 2px 0 0; } /* Grids: single column on mobile */ .pdx-tpl-grid { grid-template-columns: 1fr; } .pdx-conn-grid { grid-template-columns: 1fr; } .pdx-field-row { grid-template-columns: 1fr; } .pdx-metric-grid { grid-template-columns: 1fr 1fr; } /* Prevent iOS zoom on focus — 16px minimum */ .pdx-input, .pdx-textarea, .pdx-select, .pdx-chat-input { font-size: 16px !important; } /* Capability tags: horizontal scroll, no scrollbar. No negative margin — header already has right padding for close button. */ .pdx-module-caps { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: 0; padding-right: 0; max-width: 100%; } .pdx-module-caps::-webkit-scrollbar { display: none; } .pdx-cap-tag { flex-shrink: 0; } /* KV rows: stack key/value vertically */ .pdx-kv-row { flex-direction: column; align-items: flex-start; } .pdx-kv-val { text-align: left; } /* Tabs: horizontal scroll, no wrap */ .pdx-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; } .pdx-tabs::-webkit-scrollbar { display: none; } /* Remove max-height constraints from nested containers on mobile. .pdx-ph-body is the single scroller — inner elements must not cap their height. */ .pdx-chat-messages, .pdx-activity-feed, .pdx-output-body, .pdx-trace-output, .pdx-step-result-body, .pdx-dp-log, .pdx-code--raw { max-height: none; overflow: visible; } /* Chat messages: flex-grow inside the body scroller */ .pdx-chat-messages { flex: 1; min-height: 140px; } /* Pipeline: hide verbose detail */ .pdx-dp-stage-detail { display: none; } /* Overflow guard */ .pdx-result, .pdx-section { overflow-x: hidden; } /* ── Dock appearance ────────────────────────────────────── */ #pdx-dock { background: var(--pdx-bg, #0d1117); border-bottom: 1px solid var(--pdx-border, rgba(255,255,255,.08)); transition: transform .2s ease, opacity .15s ease; } /* Hide dock when panel is open */ #pdx-dock.pdx-dock--panel-open { transform: translateY(-110%); opacity: 0; pointer-events: none; } /* Panel border */ #pdx-panel { border-top: 1px solid var(--pdx-border, rgba(255,255,255,.08)); } /* Backdrop: starts below dock */ #pdx-backdrop { top: var(--pdx-panel-top, 48px); } /* Notifications: below dock */ #pdx-notif { top: calc(var(--pdx-panel-top, 48px) + 8px); bottom: auto; right: 12px; left: 12px; } /* Command palette: below dock */ .pdx-cmd-box { width: 96vw; max-height: 70vh; } /* Light mode dock */ #pdx-root[data-theme="light"] #pdx-dock, #pdx-root[data-theme="auto"] #pdx-dock { background: #ffffff; border-bottom-color: rgba(0,0,0,.08); } } @media (max-width: var(--pdx-mobile-max, 680px)) and (prefers-color-scheme: light) { #pdx-root[data-theme="auto"] #pdx-dock { background: #ffffff; border-bottom-color: rgba(0,0,0,.08); } } /* ═══════════════════════════════════════════════════════════ MODE B — bottom pill [data-mobile-dock="bottom-*"] Overrides the base mobile dock layout. Dock becomes a compact floating pill; panel becomes a bottom sheet. ═══════════════════════════════════════════════════════════ */ @media (max-width: var(--pdx-mobile-max, 680px)) { /* Override base dock geometry for pill mode */ #pdx-root[data-mobile-dock^="bottom"] #pdx-dock { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: auto; right: auto; width: auto; height: auto; padding: 5px 6px; border-radius: 40px; border: 1px solid rgba(255,255,255,.1); background: var(--pdx-bg, #0d1117); transition: transform .2s ease, opacity .15s ease; overflow: visible; } /* Horizontal positions */ #pdx-root[data-mobile-dock="bottom-center"] #pdx-dock { left: 50%; transform: translateX(-50%); } #pdx-root[data-mobile-dock="bottom-left"] #pdx-dock { left: max(14px, env(safe-area-inset-left, 14px)); } #pdx-root[data-mobile-dock="bottom-right"] #pdx-dock { right: max(14px, env(safe-area-inset-right, 14px)); } /* Hide dock when panel is open */ #pdx-root[data-mobile-dock^="bottom"] #pdx-dock.pdx-dock--panel-open { transform: translateY(calc(100% + 20px)); opacity: 0; pointer-events: none; } #pdx-root[data-mobile-dock="bottom-center"] #pdx-dock.pdx-dock--panel-open { transform: translateX(-50%) translateY(calc(100% + 20px)); } /* Active indicator: top edge on pill */ #pdx-root[data-mobile-dock^="bottom"] .pdx-btn.is-active::before { left: 50%; right: auto; top: 0; bottom: auto; transform: translateX(-50%); width: 14px; height: 2px; border-radius: 0 0 2px 2px; } /* Override base panel geometry for bottom sheet */ #pdx-root[data-mobile-dock^="bottom"] #pdx-panel { top: auto; bottom: 0; height: calc(var(--pdx-panel-h-pct, 90) * var(--pdx-vh, 1svh)); max-height: 96svh; border-radius: 16px 16px 0 0; border-top: 1px solid var(--pdx-border, rgba(255,255,255,.1)); border-bottom: none; box-shadow: 0 -2px 12px rgba(0,0,0,.4); transition: transform .28s cubic-bezier(.4,0,.2,1); } #pdx-root[data-mobile-dock^="bottom"] #pdx-panel:not(.is-open) { transform: translateY(102%); } #pdx-root[data-mobile-dock^="bottom"] #pdx-panel.is-open { transform: translateY(0); } /* Drag handle */ #pdx-root[data-mobile-dock^="bottom"] #pdx-panel::before { content: ''; display: block; width: 32px; height: 3px; background: var(--pdx-border-mid, rgba(255,255,255,.16)); border-radius: 2px; margin: 8px auto 0; position: sticky; top: 0; z-index: 20; pointer-events: none; } /* Panel body: clear home indicator */ #pdx-root[data-mobile-dock^="bottom"] .pdx-ph-body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* Backdrop: full screen */ #pdx-root[data-mobile-dock^="bottom"] #pdx-backdrop { top: 0; } /* Notifications: above pill */ #pdx-root[data-mobile-dock^="bottom"] #pdx-notif { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); top: auto; right: 12px; left: 12px; } /* Command palette: top of screen */ #pdx-root[data-mobile-dock^="bottom"] .pdx-cmd-box { top: 12px; width: 96vw; max-height: 70vh; } /* Light mode */ #pdx-root[data-mobile-dock^="bottom"][data-theme="light"] #pdx-dock, #pdx-root[data-mobile-dock^="bottom"][data-theme="auto"] #pdx-dock { background: rgba(255,255,255,.96); border-color: rgba(0,0,0,.09); box-shadow: 0 -1px 0 rgba(0,0,0,.1); } } @media (max-width: var(--pdx-mobile-max, 680px)) and (prefers-color-scheme: light) { #pdx-root[data-mobile-dock^="bottom"][data-theme="auto"] #pdx-dock { background: rgba(255,255,255,.96); border-color: rgba(0,0,0,.09); box-shadow: 0 -1px 0 rgba(0,0,0,.1); } } /* ─── Extra-small screens (≤ 380px) ─────────────────────── */ /* Token overrides are in the unified system block above. Only structural/dock changes here. */ @media (max-width: 380px) { /* Tighter dock padding */ #pdx-root[data-mobile-dock="under-header"] #pdx-dock { padding: 0 4px !important; } #pdx-root[data-mobile-dock^="bottom"] #pdx-dock { padding: 4px 5px !important; } /* Slightly smaller dock buttons */ .pdx-btn { width: 36px; height: 36px; } .pdx-btn svg { width: 14px; height: 14px; } /* Single-column metrics */ .pdx-metric-grid { grid-template-columns: 1fr; } /* Tighter panel header — preserve right padding for close button */ .pdx-ph-hd { padding: 10px 46px 8px 12px; } .pdx-mobile-close { top: 8px; right: 10px; width: 28px; height: 28px; } /* Hide verbose pipeline log */ .pdx-dp-log { display: none; } } /* ═══════════════════════════════════════════════════════════ MOBILE UNIFIED CONTENT SYSTEM (≤ 680px) Single source of truth for every panel/tool/card on mobile. All typography, spacing, and sizing is token-driven. Tokens defined here; applied to every content class below. ═══════════════════════════════════════════════════════════ Typography scale: --pdx-t-xs : 10px — meta, timestamps, badges, caps labels --pdx-t-sm : 11px — secondary text, hints, sub-labels --pdx-t-base : 13px — body text, list items, descriptions --pdx-t-md : 14px — primary labels, card titles --pdx-t-lg : 16px — panel headings, section titles --pdx-t-xl : 20px — hero numbers (risk score, credits) Line-height scale: --pdx-lh-tight : 1.3 — single-line labels, badges --pdx-lh-base : 1.5 — body text --pdx-lh-loose : 1.7 — descriptive paragraphs Spacing scale (padding / gap / margin): --pdx-sp-1 : 4px --pdx-sp-2 : 8px --pdx-sp-3 : 12px --pdx-sp-4 : 16px --pdx-sp-5 : 20px Card / content block: --pdx-card-pad : 12px 14px --pdx-card-r : 10px --pdx-card-gap : 10px Button (content area, not dock): --pdx-cbtn-h : 36px --pdx-cbtn-fs : 13px --pdx-cbtn-pad : 0 14px ═══════════════════════════════════════════════════════════ */ @media (max-width: var(--pdx-mobile-max, 680px)) { #pdx-root { /* Typography */ --pdx-t-xs: 10px; --pdx-t-sm: 11px; --pdx-t-base: 13px; --pdx-t-md: 14px; --pdx-t-lg: 16px; --pdx-t-xl: 20px; /* Line-height */ --pdx-lh-tight: 1.3; --pdx-lh-base: 1.5; --pdx-lh-loose: 1.7; /* Spacing */ --pdx-sp-1: 4px; --pdx-sp-2: 8px; --pdx-sp-3: 12px; --pdx-sp-4: 16px; --pdx-sp-5: 20px; /* Cards */ --pdx-card-pad: 12px 14px; --pdx-card-r: 10px; --pdx-card-gap: 10px; /* Content buttons */ --pdx-cbtn-h: 36px; --pdx-cbtn-fs: 13px; --pdx-cbtn-pad: 0 14px; } /* ── Panel body ─────────────────────────────────────────── */ .pdx-ph-body { padding: var(--pdx-sp-3) var(--pdx-sp-4); padding-bottom: calc(var(--pdx-sp-5) + env(safe-area-inset-bottom, 0px)); gap: var(--pdx-card-gap); font-size: var(--pdx-t-base); line-height: var(--pdx-lh-base); } /* ── Sections & results ─────────────────────────────────── */ .pdx-section { gap: var(--pdx-sp-2); } .pdx-result { gap: var(--pdx-card-gap); } .pdx-tab-pane { gap: var(--pdx-card-gap); padding-top: var(--pdx-sp-2); } /* ── Section titles ─────────────────────────────────────── */ .pdx-section-title { font-size: var(--pdx-t-xs); line-height: var(--pdx-lh-tight); letter-spacing: .06em; margin-bottom: var(--pdx-sp-1); } /* ── Cards / result blocks ──────────────────────────────── */ .pdx-result-header, .pdx-metric-card, .pdx-report-summary, .pdx-risk-header, .pdx-ws-item, .pdx-paywall, .pdx-evidence-section, .pdx-ai-summary, .pdx-cluster-item, .pdx-case-item, .pdx-note-item, .pdx-tl-item, .pdx-activity-item, .pdx-worker-item, .pdx-member-item, .pdx-hist-item, .pdx-step, .pdx-agent-row { padding: var(--pdx-card-pad); border-radius: var(--pdx-card-r); gap: var(--pdx-sp-2); } /* ── Key-value rows ─────────────────────────────────────── */ .pdx-kv-grid { gap: var(--pdx-sp-2); } .pdx-kv-row { gap: var(--pdx-sp-1); } .pdx-kv-key { font-size: var(--pdx-t-sm); line-height: var(--pdx-lh-tight); } .pdx-kv-val { font-size: var(--pdx-t-base); line-height: var(--pdx-lh-base); } /* ── Labels & meta text ─────────────────────────────────── */ .pdx-label, .pdx-section-title, .pdx-note-meta, .pdx-tl-date, .pdx-tl-source, .pdx-activity-time, .pdx-worker-status, .pdx-worker-caps, .pdx-member-email, .pdx-risk-label, .pdx-risk-scan-id, .pdx-risk-time, .pdx-ws-date, .pdx-ws-pin, .pdx-ai-label, .pdx-cluster-meta, .pdx-case-meta { font-size: var(--pdx-t-xs); line-height: var(--pdx-lh-tight); } /* ── Secondary / hint text ──────────────────────────────── */ .pdx-hint, .pdx-field-hint, .pdx-ai-text, .pdx-note-body, .pdx-tl-desc, .pdx-activity-msg, .pdx-cmd-desc, .pdx-credits-label { font-size: var(--pdx-t-sm); line-height: var(--pdx-lh-base); } /* ── Primary body text ──────────────────────────────────── */ .pdx-desc, .pdx-text, .pdx-result p, .pdx-section p, .pdx-paywall p, .pdx-report-summary p, .pdx-evidence-body p { font-size: var(--pdx-t-base); line-height: var(--pdx-lh-loose); max-width: 100%; } /* ── Card / item titles ─────────────────────────────────── */ .pdx-result-header h3, .pdx-cluster-name, .pdx-case-title, .pdx-worker-label, .pdx-cmd-label, .pdx-ws-item h4, .pdx-member-name { font-size: var(--pdx-t-md); line-height: var(--pdx-lh-tight); font-weight: 600; } /* ── Panel / section headings ───────────────────────────── */ .pdx-ph-title, .pdx-team-name, .pdx-paywall h3, .pdx-report-summary h3 { font-size: var(--pdx-t-lg); line-height: var(--pdx-lh-tight); font-weight: 700; } /* ── Hero numbers ───────────────────────────────────────── */ .pdx-risk-num, .pdx-credits-num { font-size: var(--pdx-t-xl); line-height: var(--pdx-lh-tight); font-weight: 800; } /* ── Tabs ───────────────────────────────────────────────── */ .pdx-tab { font-size: var(--pdx-t-sm); padding: var(--pdx-sp-2) var(--pdx-sp-3); line-height: var(--pdx-lh-tight); white-space: nowrap; flex-shrink: 0; } /* ── Chat ───────────────────────────────────────────────── */ .pdx-chat-bubble { font-size: var(--pdx-t-base); line-height: var(--pdx-lh-base); padding: var(--pdx-sp-2) var(--pdx-sp-3); border-radius: var(--pdx-card-r); max-width: 88%; } .pdx-chat-msg--system .pdx-chat-bubble { font-size: var(--pdx-t-sm); } .pdx-chat-messages { gap: var(--pdx-sp-2); padding: var(--pdx-sp-3) var(--pdx-sp-4); } .pdx-chat-footer { padding: var(--pdx-sp-2) var(--pdx-sp-3); } /* ── Metric cards ───────────────────────────────────────── */ .pdx-metric-grid { gap: var(--pdx-sp-2); } .pdx-metric-card { padding: var(--pdx-sp-3); border-radius: var(--pdx-card-r); } .pdx-metric-card .pdx-label { font-size: var(--pdx-t-xs); margin-bottom: var(--pdx-sp-1); } .pdx-metric-card .pdx-value { font-size: var(--pdx-t-lg); line-height: var(--pdx-lh-tight); font-weight: 700; } /* ── Tags / badges ──────────────────────────────────────── */ .pdx-tag, .pdx-cap-tag, .pdx-badge, .pdx-role-badge, .pdx-member-role { font-size: var(--pdx-t-xs); line-height: var(--pdx-lh-tight); padding: 2px var(--pdx-sp-2); border-radius: 4px; } /* ── Content-area buttons (not dock buttons) ────────────── */ .pdx-btn-primary, .pdx-btn-secondary, .pdx-btn-ghost, .pdx-btn-danger { height: var(--pdx-cbtn-h); font-size: var(--pdx-cbtn-fs); padding: var(--pdx-cbtn-pad); border-radius: 8px; line-height: var(--pdx-lh-tight); display: inline-flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; box-sizing: border-box; } /* Full-width primary CTA inside panels */ .pdx-ph-body .pdx-btn-primary, .pdx-paywall .pdx-btn-primary { width: 100%; height: 40px; font-size: var(--pdx-t-md); } /* ── Input rows ─────────────────────────────────────────── */ .pdx-input-row { flex-direction: column; gap: var(--pdx-sp-2); } .pdx-input-row .pdx-btn-primary, .pdx-input-row .pdx-btn-ghost, .pdx-input-row .pdx-btn-secondary { width: 100%; height: 40px; font-size: var(--pdx-t-md); justify-content: center; } /* ── Code blocks ────────────────────────────────────────── */ .pdx-code, .pdx-mono, code { font-size: var(--pdx-t-xs); line-height: var(--pdx-lh-base); word-break: break-all; overflow-x: hidden; } /* ── Paywall ────────────────────────────────────────────── */ .pdx-paywall { padding: var(--pdx-sp-5) var(--pdx-sp-4); text-align: center; gap: var(--pdx-sp-3); display: flex; flex-direction: column; align-items: center; } .pdx-paywall h3 { margin: 0; } .pdx-paywall p { margin: 0; max-width: 280px; } /* ── Risk ring ──────────────────────────────────────────── */ .pdx-risk-ring { width: 56px; height: 56px; } .pdx-risk-header { padding: var(--pdx-sp-3); gap: var(--pdx-sp-3); align-items: center; } /* ── History items ──────────────────────────────────────── */ .pdx-history-list { gap: var(--pdx-sp-2); } .pdx-hist-item { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-2); flex-wrap: wrap; border-radius: var(--pdx-card-r); } /* ── Workspace items ────────────────────────────────────── */ .pdx-ws-list { gap: var(--pdx-sp-2); } .pdx-ws-item { padding: var(--pdx-sp-3); border-radius: var(--pdx-card-r); } .pdx-ws-item-hd { gap: var(--pdx-sp-2); margin-bottom: var(--pdx-sp-2); } .pdx-ws-meta { gap: var(--pdx-sp-2); } .pdx-ws-tags { gap: var(--pdx-sp-1); margin-top: var(--pdx-sp-1); } /* ── Timeline ───────────────────────────────────────────── */ .pdx-tl-item { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-1); border-radius: var(--pdx-card-r); } /* ── Activity feed ──────────────────────────────────────── */ .pdx-activity-item { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-2); border-radius: var(--pdx-card-r); font-size: var(--pdx-t-sm); line-height: var(--pdx-lh-base); } /* ── Team / members ─────────────────────────────────────── */ .pdx-member-item { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-2); border-radius: var(--pdx-card-r); } .pdx-team-name { margin-bottom: var(--pdx-sp-2); } /* ── Workers ────────────────────────────────────────────── */ .pdx-worker-item { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-2); border-radius: var(--pdx-card-r); } /* ── Investigation / cluster / case / note ──────────────── */ .pdx-cluster-item, .pdx-case-item, .pdx-note-item { padding: var(--pdx-sp-3); gap: var(--pdx-sp-2); border-radius: var(--pdx-card-r); } /* ── Command palette ────────────────────────────────────── */ .pdx-cmd-item { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-2); } .pdx-cmd-label { font-size: var(--pdx-t-base); } .pdx-cmd-desc { font-size: var(--pdx-t-sm); } .pdx-cmd-type { font-size: var(--pdx-t-xs); } .pdx-cmd-empty { padding: var(--pdx-sp-5) var(--pdx-sp-4); font-size: var(--pdx-t-base); text-align: center; } /* ── AI summary ─────────────────────────────────────────── */ .pdx-ai-summary { padding: var(--pdx-sp-3); border-radius: var(--pdx-card-r); gap: var(--pdx-sp-2); } .pdx-ai-label { margin-bottom: var(--pdx-sp-1); } /* ── Graph / canvas panels ──────────────────────────────── */ .pdx-graph-canvas { height: 180px !important; } .pdx-ph--graph .pdx-ph-body, .pdx-ph--investigation .pdx-ph-body { padding: 0; } /* ── Pipeline ───────────────────────────────────────────── */ .pdx-dp-header { padding: var(--pdx-sp-2) var(--pdx-sp-3); } .pdx-dp-stages { padding: var(--pdx-sp-2) var(--pdx-sp-3); gap: var(--pdx-sp-2); } .pdx-dp-findings { padding: 0 var(--pdx-sp-3) var(--pdx-sp-2); } .pdx-dp-log { margin: 0 var(--pdx-sp-3) var(--pdx-sp-2); max-height: 56px; } /* ── Billing / credits ──────────────────────────────────── */ .pdx-credits-num { font-size: var(--pdx-t-xl); } .pdx-credits-label { font-size: var(--pdx-t-sm); } /* ── Report summary ─────────────────────────────────────── */ .pdx-report-summary { padding: var(--pdx-sp-3); border-radius: var(--pdx-card-r); gap: var(--pdx-sp-2); } /* ── Evidence sections ──────────────────────────────────── */ .pdx-evidence-section { margin: 0; border-radius: var(--pdx-card-r); } .pdx-evidence-body { padding: var(--pdx-sp-2) var(--pdx-sp-3); } /* ── Step / agent rows ──────────────────────────────────── */ .pdx-step { margin-bottom: var(--pdx-sp-2); } .pdx-step-inner { gap: var(--pdx-sp-2); flex-wrap: wrap; } .pdx-agent-row { gap: var(--pdx-sp-2); flex-wrap: wrap; margin-bottom: var(--pdx-sp-2); } .pdx-step-inner .pdx-select, .pdx-agent-row .pdx-select { width: 100%; font-size: var(--pdx-t-base); } /* ── Notification toasts ────────────────────────────────── */ .pdx-notif-item { font-size: var(--pdx-t-sm); line-height: var(--pdx-lh-base); padding: var(--pdx-sp-2) var(--pdx-sp-3); border-radius: var(--pdx-card-r); } /* ── Module capability tags ─────────────────────────────── */ .pdx-module-caps { gap: var(--pdx-sp-1); padding-bottom: var(--pdx-sp-1); } /* ── Prevent any text overflow ──────────────────────────── */ .pdx-ph-body * { max-width: 100%; box-sizing: border-box; } .pdx-ph-body p, .pdx-ph-body span, .pdx-ph-body li { overflow-wrap: break-word; word-break: break-word; } /* ── Description text: slightly larger on mobile for readability ── */ .pdx-ph-desc { font-size: 13px; } /* ── Mobile spacing modes ──────────────────────────────── */ /* Compact: tighten the token scale */ #pdx-root[data-mobile-spacing="compact"] { --pdx-sp-3: 8px; --pdx-sp-4: 10px; --pdx-card-pad: 8px 10px; --pdx-card-gap: 6px; } #pdx-root[data-mobile-spacing="compact"] .pdx-ph-body { padding: var(--pdx-sp-2) var(--pdx-sp-3); padding-bottom: calc(var(--pdx-sp-4) + env(safe-area-inset-bottom, 0px)); gap: var(--pdx-card-gap); } #pdx-root[data-mobile-spacing="compact"] .pdx-ph-hd { padding: var(--pdx-sp-2) 46px var(--pdx-sp-2) var(--pdx-sp-3); } /* Relaxed: loosen the token scale */ #pdx-root[data-mobile-spacing="relaxed"] { --pdx-sp-3: 16px; --pdx-sp-4: 20px; --pdx-card-pad: 16px 18px; --pdx-card-gap: 14px; } #pdx-root[data-mobile-spacing="relaxed"] .pdx-ph-body { padding: var(--pdx-sp-4) var(--pdx-sp-5); padding-bottom: calc(var(--pdx-sp-5) + env(safe-area-inset-bottom, 0px)); gap: var(--pdx-card-gap); } #pdx-root[data-mobile-spacing="relaxed"] .pdx-ph-hd { padding: var(--pdx-sp-4) 54px var(--pdx-sp-3) var(--pdx-sp-5); } /* Compact mode: smaller buttons and icons */ #pdx-root[data-mobile-compact="1"] .pdx-btn { width: 34px; height: 34px; } #pdx-root[data-mobile-compact="1"] .pdx-btn svg { width: 13px; height: 13px; } /* Safe area disabled: remove env() padding */ #pdx-root[data-mobile-safe-area="0"] .pdx-ph-body { padding-bottom: 20px; } #pdx-root[data-mobile-safe-area="0"][data-mobile-dock^="bottom"] .pdx-ph-body { padding-bottom: 72px; } #pdx-root[data-mobile-safe-area="0"][data-mobile-dock^="bottom"] #pdx-dock { bottom: 12px !important; } } /* ─── XS overrides (≤ 380px) ────────────────────────────── */ @media (max-width: 380px) { #pdx-root { --pdx-t-xs: 9px; --pdx-t-sm: 10px; --pdx-t-base: 12px; --pdx-t-md: 13px; --pdx-t-lg: 15px; --pdx-t-xl: 18px; --pdx-sp-3: 10px; --pdx-sp-4: 12px; --pdx-card-pad: 10px 12px; --pdx-card-gap: 8px; --pdx-cbtn-h: 34px; --pdx-cbtn-fs: 12px; } } /* ═══════════════════════════════════════════════════════════ v4.0.0 — Cyber Ops Aesthetic Extensions Command palette, graph canvas, heatmap, investigation board, team, billing, memory, worker nodes, activity feed, SSE. ═══════════════════════════════════════════════════════════ */ /* ─── v4 CSS variables ───────────────────────────────────── */ :root { --pdx-indigo: #6366f1; --pdx-indigo-dim: rgba(99,102,241,.15); --pdx-purple: #a855f7; --pdx-purple-dim: rgba(168,85,247,.12); --pdx-cyan: #06b6d4; --pdx-cyan-dim: rgba(6,182,212,.12); --pdx-amber: #f59e0b; --pdx-amber-dim: rgba(245,158,11,.12); --pdx-emerald: #c2ff00; --pdx-emerald-dim: rgba(194,255,0,.12); --pdx-panel-w: 520px; --pdx-graph-h: 340px; } /* ─── Dock plan badge ────────────────────────────────────── */ .pdx-dock-plan-badge { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pdx-indigo); background: var(--pdx-indigo-dim); border: 1px solid rgba(99,102,241,.3); border-radius: 4px; padding: 1px 5px; margin: 2px auto 0; display: none; text-align: center; max-width: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdx-dock-plan-badge:not(:empty) { display: block; } .pdx-dock-queue-badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; font: 700 9px/14px var(--pdx-font, sans-serif); color: #0d1117; background: var(--pdx-accent); border-radius: 7px; display: none; align-items: center; justify-content: center; pointer-events: none; } .pdx-dock-queue-badge:not(:empty):not([hidden]) { display: inline-flex; } .pdx-dock-queue-badge[hidden] { display: none !important; } /* ─── Command palette ────────────────────────────────────── */ .pdx-cmd-overlay { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity var(--pdx-ease); } .pdx-cmd-overlay.is-open { opacity: 1; pointer-events: auto; } .pdx-cmd-box { width: min(640px, 92vw); background: var(--pdx-bg-el); border: 1px solid var(--pdx-border-mid); border-radius: var(--pdx-r-lg); box-shadow: 0 4px 24px rgba(0,0,0,.5); overflow: hidden; } /* No scale/translate animation on cmd box — reduces reflow on open */ .pdx-cmd-search-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--pdx-border); } .pdx-cmd-search-row svg { width: 16px; height: 16px; color: var(--pdx-mid); flex-shrink: 0; } .pdx-cmd-input { flex: 1; background: transparent; border: none; outline: none; color: var(--pdx-hi); font-size: 15px; font-family: var(--pdx-font); } .pdx-cmd-input::placeholder { color: var(--pdx-lo); } .pdx-cmd-esc { font-size: 10px; color: var(--pdx-lo); background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: 4px; padding: 2px 6px; font-family: var(--pdx-mono); } .pdx-cmd-results { max-height: 380px; overflow-y: auto; } .pdx-cmd-empty { padding: 24px; text-align: center; color: var(--pdx-lo); font-size: 13px; } .pdx-cmd-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background var(--pdx-ease); } .pdx-cmd-item:hover, .pdx-cmd-item.is-selected { background: var(--pdx-bg-hov); } .pdx-cmd-icon { width: 18px; height: 18px; color: var(--pdx-mid); flex-shrink: 0; } .pdx-cmd-icon svg { width: 100%; height: 100%; } .pdx-cmd-label { font-size: 13px; font-weight: 500; color: var(--pdx-hi); flex: 1; } .pdx-cmd-desc { font-size: 11px; color: var(--pdx-lo); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdx-cmd-type { font-size: 10px; color: var(--pdx-mute); background: var(--pdx-bg-el2); border-radius: 4px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .04em; } .pdx-cmd-footer { padding: 8px 16px; border-top: 1px solid var(--pdx-border); font-size: 11px; color: var(--pdx-lo); display: flex; gap: 12px; } .pdx-cmd-footer kbd { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: 3px; padding: 1px 5px; font-family: var(--pdx-mono); font-size: 10px; } /* ─── Infrastructure graph ───────────────────────────────── */ .pdx-ph--graph .pdx-ph-body { padding: 0; display: flex; flex-direction: column; } .pdx-ph--graph .pdx-input-row { padding: 14px 16px 0; } .pdx-graph-controls { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--pdx-border); } .pdx-graph-ctrl { width: 28px; height: 28px; border-radius: var(--pdx-r-sm); background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); color: var(--pdx-mid); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--pdx-ease), color var(--pdx-ease); } .pdx-graph-ctrl:hover { background: var(--pdx-bg-hov); color: var(--pdx-hi); } .pdx-graph-canvas { width: 100%; height: var(--pdx-graph-h); background: var(--pdx-bg); display: block; cursor: crosshair; transition: transform .2s ease; transform-origin: center center; } .pdx-graph-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--pdx-border); font-size: 11px; color: var(--pdx-mid); } .pdx-legend-item { display: flex; align-items: center; gap: 5px; } .pdx-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .pdx-graph-detail { padding: 12px 16px; border-top: 1px solid var(--pdx-border); font-size: 12px; color: var(--pdx-mid); min-height: 48px; } .pdx-graph-node-detail { /* no animation — avoids reflow on node select */ } .pdx-ai-summary { background: var(--pdx-indigo-dim); border: 1px solid rgba(99,102,241,.25); border-radius: var(--pdx-r); padding: 10px 12px; } .pdx-ai-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pdx-indigo); margin-bottom: 6px; } .pdx-ai-text { font-size: 12px; color: var(--pdx-hi); line-height: 1.6; } /* ─── Investigation board ────────────────────────────────── */ .pdx-ph--investigation .pdx-ph-body { padding-bottom: 0; } .pdx-cluster-card { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: var(--pdx-r); padding: 12px; margin-bottom: 8px; } .pdx-cluster-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .pdx-cluster-name { font-size: 13px; font-weight: 600; color: var(--pdx-hi); } .pdx-cluster-iocs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .pdx-cluster-meta { font-size: 11px; color: var(--pdx-lo); } .pdx-ioc-chip { font-size: 10px; font-family: var(--pdx-mono); background: var(--pdx-bg); border: 1px solid var(--pdx-border); border-radius: 4px; padding: 2px 6px; color: var(--pdx-mid); } .pdx-case-card { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: var(--pdx-r); padding: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color var(--pdx-ease), background var(--pdx-ease); } .pdx-case-card:hover { border-color: var(--pdx-indigo); background: var(--pdx-indigo-dim); } .pdx-case-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .pdx-case-title { font-size: 13px; font-weight: 600; color: var(--pdx-hi); } .pdx-case-meta { font-size: 11px; color: var(--pdx-lo); } .pdx-case-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .pdx-note { background: var(--pdx-bg-el2); border-left: 3px solid var(--pdx-border-mid); border-radius: 0 var(--pdx-r-sm) var(--pdx-r-sm) 0; padding: 8px 10px; } .pdx-note--finding { border-left-color: var(--pdx-amber); } .pdx-note--evidence { border-left-color: var(--pdx-indigo); } .pdx-note--comment { border-left-color: var(--pdx-border-mid); } .pdx-note-meta { font-size: 10px; color: var(--pdx-lo); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; } .pdx-note-body { font-size: 12px; color: var(--pdx-hi); line-height: 1.5; } .pdx-note-input-row { display: flex; gap: 8px; align-items: flex-end; } .pdx-note-input-row .pdx-input { flex: 1; resize: none; } /* ─── Timeline ───────────────────────────────────────────── */ .pdx-timeline { display: flex; flex-direction: column; gap: 0; padding: 8px 0; } .pdx-tl-event { display: flex; gap: 12px; position: relative; padding-bottom: 16px; } .pdx-tl-event:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 14px; width: 1px; bottom: 0; background: var(--pdx-border); } .pdx-tl-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; background: var(--pdx-indigo); border: 2px solid var(--pdx-bg-el); outline: 2px solid var(--pdx-indigo, #6366f1); outline-offset: 1px; } .pdx-tl-body { flex: 1; } .pdx-tl-date { font-size: 10px; color: var(--pdx-lo); font-family: var(--pdx-mono); margin-bottom: 2px; } .pdx-tl-desc { font-size: 12px; color: var(--pdx-hi); line-height: 1.5; } .pdx-tl-source { font-size: 10px; color: var(--pdx-mute); margin-top: 2px; } /* ─── Activity feed ──────────────────────────────────────── */ .pdx-activity-feed { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .pdx-activity-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--pdx-r-sm); font-size: 11px; border-left: 2px solid transparent; background: var(--pdx-bg-el2); } .pdx-activity--critical { border-left-color: var(--pdx-red); background: var(--pdx-red-dim); } .pdx-activity--high { border-left-color: var(--pdx-amber); background: var(--pdx-amber-dim); } .pdx-activity--warn { border-left-color: var(--pdx-yellow); background: var(--pdx-yellow-dim); } .pdx-activity--info { border-left-color: var(--pdx-border-mid); } .pdx-activity-module { font-weight: 600; color: var(--pdx-indigo); min-width: 70px; } .pdx-activity-action { flex: 1; color: var(--pdx-hi); } .pdx-activity-time { color: var(--pdx-lo); font-family: var(--pdx-mono); font-size: 10px; white-space: nowrap; } /* ─── Worker nodes ───────────────────────────────────────── */ .pdx-worker-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--pdx-r-sm); background: var(--pdx-bg-el2); margin-bottom: 4px; } .pdx-worker-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--pdx-mute); } .pdx-worker--online .pdx-worker-dot { background: var(--pdx-accent, #c2ff00); } .pdx-worker--busy .pdx-worker-dot { background: var(--pdx-amber, #f59e0b); } .pdx-worker--offline .pdx-worker-dot { background: var(--pdx-mute); } .pdx-worker-info { flex: 1; } .pdx-worker-label { font-size: 12px; font-weight: 600; color: var(--pdx-hi); } .pdx-worker-caps { font-size: 10px; color: var(--pdx-lo); } .pdx-worker-status { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--pdx-mid); } /* ─── Team / members ─────────────────────────────────────── */ .pdx-team-header { padding: 8px 0 12px; border-bottom: 1px solid var(--pdx-border); margin-bottom: 12px; } .pdx-team-name { font-size: 15px; font-weight: 700; color: var(--pdx-hi); } .pdx-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pdx-border); } .pdx-member-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--pdx-indigo-dim); border: 1px solid rgba(99,102,241,.3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--pdx-indigo); } .pdx-member-info { flex: 1; } .pdx-member-name { font-size: 12px; font-weight: 600; color: var(--pdx-hi); } .pdx-member-email { font-size: 10px; color: var(--pdx-lo); } .pdx-role-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 2px 7px; } .pdx-role-badge--owner { background: var(--pdx-purple-dim); color: var(--pdx-purple); border: 1px solid rgba(168,85,247,.3); } .pdx-role-badge--admin { background: var(--pdx-indigo-dim); color: var(--pdx-indigo); border: 1px solid rgba(99,102,241,.3); } .pdx-role-badge--analyst { background: var(--pdx-cyan-dim); color: var(--pdx-cyan); border: 1px solid rgba(6,182,212,.3); } .pdx-role-badge--viewer { background: var(--pdx-bg-el2); color: var(--pdx-mid); border: 1px solid var(--pdx-border); } /* ─── Billing / plans ────────────────────────────────────── */ .pdx-billing-credits { text-align: center; padding: 12px 0 16px; border-bottom: 1px solid var(--pdx-border); margin-bottom: 16px; } .pdx-credits-num { font-size: 28px; font-weight: 800; color: var(--pdx-indigo); font-family: var(--pdx-mono); } .pdx-credits-label { font-size: 12px; color: var(--pdx-lo); } .pdx-plans-grid { display: flex; flex-direction: column; gap: 10px; } .pdx-plan-card { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: var(--pdx-r); padding: 14px; transition: border-color var(--pdx-ease); } .pdx-plan-card--current { border-color: var(--pdx-indigo); background: var(--pdx-indigo-dim); } .pdx-plan-name { font-size: 14px; font-weight: 700; color: var(--pdx-hi); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .pdx-plan-current-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; background: var(--pdx-indigo); color: #fff; border-radius: 4px; padding: 1px 6px; } .pdx-plan-price { font-size: 22px; font-weight: 800; color: var(--pdx-hi); margin-bottom: 10px; font-family: var(--pdx-mono); } .pdx-plan-price span { font-size: 12px; font-weight: 400; color: var(--pdx-lo); } .pdx-plan-features { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; } .pdx-plan-features li { font-size: 11px; color: var(--pdx-mid); padding-left: 14px; position: relative; } .pdx-plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--pdx-accent, #c2ff00); font-size: 10px; } .pdx-plan-active-label { font-size: 11px; color: var(--pdx-indigo); font-weight: 600; text-align: center; padding: 6px 0; } /* ─── AI Memory ──────────────────────────────────────────── */ .pdx-memory-item { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: var(--pdx-r-sm); padding: 10px 12px; margin-bottom: 6px; } .pdx-memory-content { font-size: 12px; color: var(--pdx-hi); line-height: 1.5; margin-bottom: 4px; } .pdx-memory-meta { font-size: 10px; color: var(--pdx-lo); font-family: var(--pdx-mono); } /* ─── CVE cards ──────────────────────────────────────────── */ .pdx-cve-card { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: var(--pdx-r-sm); padding: 10px 12px; margin-bottom: 6px; } .pdx-cve-id { font-size: 12px; font-weight: 700; color: var(--pdx-red); font-family: var(--pdx-mono); margin-bottom: 4px; } .pdx-cve-desc { font-size: 11px; color: var(--pdx-hi); line-height: 1.5; margin-bottom: 4px; } .pdx-cve-meta { font-size: 10px; color: var(--pdx-lo); } /* ─── Badge variants for severity ───────────────────────── */ .pdx-badge--critical { background: var(--pdx-red-dim); color: var(--pdx-red); border: 1px solid rgba(248,81,73,.3); } .pdx-badge--high { background: var(--pdx-amber-dim); color: var(--pdx-amber); border: 1px solid rgba(245,158,11,.3); } .pdx-badge--medium { background: var(--pdx-yellow-dim); color: var(--pdx-yellow); border: 1px solid rgba(210,153,34,.3); } .pdx-badge--low { background: var(--pdx-green-dim); color: var(--pdx-green); border: 1px solid rgba(194,255,0,.3); } .pdx-badge--new { background: var(--pdx-indigo-dim); color: var(--pdx-indigo); border: 1px solid rgba(99,102,241,.3); } /* ─── Form helpers ───────────────────────────────────────── */ .pdx-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .pdx-form-group label { font-size: 11px; font-weight: 600; color: var(--pdx-mid); text-transform: uppercase; letter-spacing: .04em; } .pdx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pdx-btn-row { display: flex; gap: 8px; } .pdx-select { background: var(--pdx-bg-el2); border: 1px solid var(--pdx-border); border-radius: var(--pdx-r-sm); color: var(--pdx-hi); font-size: 12px; padding: 6px 10px; outline: none; transition: border-color var(--pdx-ease); } .pdx-select:focus { border-color: var(--pdx-indigo); } /* ─── Utility spacing ────────────────────────────────────── */ .pdx-mb-sm { margin-bottom: 10px; } .pdx-mt-sm { margin-top: 10px; } /* ─── Success state ──────────────────────────────────────── */ .pdx-success { background: var(--pdx-green-dim); color: var(--pdx-green); border: 1px solid rgba(194,255,0,.3); border-radius: var(--pdx-r-sm); padding: 8px 12px; font-size: 12px; margin-top: 8px; } /* ─── Loading small ──────────────────────────────────────── */ .pdx-loading-sm { padding: 20px; text-align: center; color: var(--pdx-lo); font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .pdx-loading-sm::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pdx-border); border-top-color: var(--pdx-indigo); animation: pdx-spin .7s linear infinite; flex-shrink: 0; } /* ─── Info box ───────────────────────────────────────────── */ .pdx-info-box { background: var(--pdx-blue-dim); border: 1px solid rgba(56,139,253,.2); border-radius: var(--pdx-r-sm); padding: 10px 12px; font-size: 11px; color: var(--pdx-mid); line-height: 1.5; margin-top: 10px; } /* ─── Feed items ─────────────────────────────────────────── */ .pdx-feed-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .pdx-feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--pdx-bg-el2); border-radius: var(--pdx-r-sm); } .pdx-feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .pdx-feed-dot--active { background: var(--pdx-accent, #c2ff00); } .pdx-feed-dot--inactive { background: var(--pdx-mute); } .pdx-feed-info { flex: 1; } .pdx-feed-name { font-size: 12px; font-weight: 600; color: var(--pdx-hi); } .pdx-feed-desc { font-size: 10px; color: var(--pdx-lo); } /* ─── Panel width for v4 modules ────────────────────────── */ #pdx-panel.pdx-panel--graph, #pdx-panel.pdx-panel--investigation { width: min(var(--pdx-panel-w), 96vw); } /* ─── Scan stages (v4 extended) ──────────────────────────── */ .pdx-stages { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; } .pdx-stage { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--pdx-lo); } .pdx-stage.is-done { color: var(--pdx-accent, #c2ff00); } .pdx-stage.is-active { color: var(--pdx-hi); } .pdx-stage-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--pdx-mute); } .pdx-stage.is-done .pdx-stage-dot { background: var(--pdx-accent, #c2ff00); } .pdx-stage.is-active .pdx-stage-dot { background: var(--pdx-indigo, #6366f1); } /* ─── Wider panel for graph/investigation on large desktop ── */ @media (min-width: 1100px) { #pdx-panel { width: min(460px, calc(100vw - 80px)); } } /* ─── Dark mode overrides for new components ─────────────── */ @media (prefers-color-scheme: light) { .pdx-cmd-box { background: #ffffff; } .pdx-graph-canvas { background: #f6f8fa; } } /* ═══════════════════════════════════════════════════════════ v5.0 — DEEP ANALYSIS PIPELINE ENGINE Multi-stage animated intelligence processing UI. Provides the "serious investigative work" feel. ═══════════════════════════════════════════════════════════ */ /* ─── Pipeline container ─────────────────────────────────── */ .pdx-deep-pipeline { background: #0d1117; border: 1px solid rgba(99,102,241,.25); border-radius: 10px; overflow: hidden; font-family: var(--pdx-mono, 'SF Mono','Fira Code',monospace); } /* ─── Pipeline header ────────────────────────────────────── */ .pdx-dp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(6,182,212,.06) 100%); border-bottom: 1px solid rgba(99,102,241,.2); } .pdx-dp-header-left { display: flex; align-items: center; gap: 10px; } .pdx-dp-pulse-ring { width: 8px; height: 8px; border-radius: 50%; background: var(--pdx-blue, #388bfd); flex-shrink: 0; } .pdx-dp--complete .pdx-dp-pulse-ring { background: var(--pdx-accent, #c2ff00); } .pdx-dp-title { font: 600 11px/1 var(--pdx-mono, monospace); color: var(--pdx-indigo, #6366f1); letter-spacing: .04em; text-transform: uppercase; } .pdx-dp-timer { font: 600 11px/1 var(--pdx-mono, monospace); color: var(--pdx-mid, #8b949e); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 2px 7px; min-width: 44px; text-align: right; } .pdx-dp-timer--done { color: var(--pdx-accent, #c2ff00); border-color: rgba(194,255,0,.3); } /* ─── Pipeline stages ────────────────────────────────────── */ .pdx-dp-stages { padding: 10px 14px; display: flex; flex-direction: column; gap: 0; } .pdx-dp-stage { display: flex; gap: 10px; opacity: .35; transition: opacity .25s; } .pdx-dp-stage.is-active { opacity: 1; } .pdx-dp-stage.is-done { opacity: .7; } .pdx-dp-stage-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 18px; } .pdx-dp-stage-icon { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; transition: border-color .2s, background .2s; } .pdx-dp-stage.is-active .pdx-dp-stage-icon { border-color: var(--pdx-indigo, #6366f1); background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.4); } .pdx-dp-stage.is-done .pdx-dp-stage-icon { border-color: var(--pdx-accent, #c2ff00); background: rgba(194,255,0,.15); } /* Spinner inside icon */ .pdx-dp-stage-spinner { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--pdx-indigo, #6366f1); display: none; } .pdx-dp-stage.is-active .pdx-dp-stage-spinner { display: block; animation: pdx-dp-spin .7s linear infinite; } @keyframes pdx-dp-spin { to { transform: rotate(360deg); } } /* Check inside icon */ .pdx-dp-stage-check { display: none; width: 10px; height: 10px; color: var(--pdx-accent, #c2ff00); } .pdx-dp-stage-check svg { width: 10px; height: 10px; stroke: currentColor; } .pdx-dp-stage.is-done .pdx-dp-stage-spinner { display: none; } .pdx-dp-stage.is-done .pdx-dp-stage-check { display: flex; } /* Connector line between stages */ .pdx-dp-stage-line { width: 1.5px; flex: 1; min-height: 10px; background: rgba(255,255,255,.07); margin: 2px 0; } .pdx-dp-stage:last-child .pdx-dp-stage-line { display: none; } .pdx-dp-stage.is-done .pdx-dp-stage-line { background: rgba(194,255,0,.25); } /* Stage text */ .pdx-dp-stage-right { padding-bottom: 10px; flex: 1; min-width: 0; } .pdx-dp-stage-label { font: 600 11px/1.3 var(--pdx-mono, monospace); color: var(--pdx-hi, #e6edf3); margin-bottom: 2px; } .pdx-dp-stage.is-active .pdx-dp-stage-label { color: #fff; } .pdx-dp-stage.is-done .pdx-dp-stage-label { color: var(--pdx-mid, #8b949e); } .pdx-dp-stage-detail { font: 10px/1.4 var(--pdx-mono, monospace); color: var(--pdx-lo, #6e7681); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdx-dp-stage.is-active .pdx-dp-stage-detail { color: var(--pdx-mid, #8b949e); } .pdx-dp-stage-timing { font: 10px/1 var(--pdx-mono, monospace); color: var(--pdx-mute, #484f58); margin-top: 2px; } .pdx-dp-stage.is-active .pdx-dp-stage-timing { color: var(--pdx-blue, #388bfd); } .pdx-dp-stage.is-done .pdx-dp-stage-timing { color: var(--pdx-accent, #c2ff00); } /* ─── Pipeline activity log ──────────────────────────────── */ .pdx-dp-log { margin: 0 14px 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 8px 10px; max-height: 80px; overflow-y: auto; font: 10px/1.6 var(--pdx-mono, monospace); color: var(--pdx-lo, #6e7681); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; } .pdx-dp-log::-webkit-scrollbar { width: 4px; } .pdx-dp-log::-webkit-scrollbar-track { background: transparent; } .pdx-dp-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } .pdx-dp-log-line { display: block; } .pdx-dp-log-ts { color: var(--pdx-mute, #484f58); margin-right: 6px; } /* ─── Pipeline incremental findings ─────────────────────── */ .pdx-dp-findings { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 4px; } .pdx-dp-finding { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; animation: pdx-dp-finding-in .3s ease forwards; font: 11px/1.4 var(--pdx-font, sans-serif); } @keyframes pdx-dp-finding-in { from { opacity: 0; } to { opacity: 1; } } .pdx-dp-finding-icon { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; } .pdx-dp-finding-icon svg { width: 12px; height: 12px; stroke: currentColor; } .pdx-dp-finding-label { font-weight: 600; } .pdx-dp-finding-value { color: var(--pdx-mid, #8b949e); font-size: 10px; margin-top: 1px; } .pdx-dp-finding--warn { background: rgba(210,153,34,.08); border-color: rgba(210,153,34,.2); color: #d29922; } .pdx-dp-finding--critical { background: rgba(248,81,73,.08); border-color: rgba(248,81,73,.2); color: #f85149; } .pdx-dp-finding--info { background: rgba(56,139,253,.08); border-color: rgba(56,139,253,.15); color: #388bfd; } .pdx-dp-finding--ok { background: rgba(194,255,0,.08); border-color: rgba(194,255,0,.2); color: #c2ff00; } /* ═══════════════════════════════════════════════════════════ v5.0 — MODULE DESCRIPTION & CAPABILITY TAGS ═══════════════════════════════════════════════════════════ */ .pdx-ph-desc { font: 12px/1.55 var(--pdx-font, -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); color: var(--pdx-mid, #8b949e); margin-top: 6px; margin-bottom: 0; display: block; max-width: 100%; overflow-wrap: break-word; word-break: break-word; } .pdx-module-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; max-width: 100%; } .pdx-cap-tag { font: 500 9px/1 var(--pdx-mono, monospace); text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 3px; background: rgba(255,255,255,.04); color: var(--pdx-lo, #6e7681); border: 1px solid var(--pdx-border, rgba(255,255,255,.08)); white-space: nowrap; } .pdx-module-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-left: 4px; } .pdx-module-status-dot--online { background: var(--pdx-green, #c2ff00); } .pdx-feed-meta { font: 500 9px/1 var(--pdx-mono, monospace); color: var(--pdx-mute, #484f58); margin-left: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 3px; padding: 1px 5px; } /* ═══════════════════════════════════════════════════════════ v5.0 — PREMIUM RESULT PANELS ═══════════════════════════════════════════════════════════ */ .pdx-confidence-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; } .pdx-confidence-label { font: 11px/1 var(--pdx-font, sans-serif); color: var(--pdx-mid, #8b949e); flex-shrink: 0; } .pdx-confidence-track { flex: 1; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; } .pdx-confidence-fill { height: 100%; border-radius: 2px; background: var(--pdx-blue, #388bfd); transition: width .4s ease; } .pdx-confidence-pct { font: 600 11px/1 var(--pdx-mono, monospace); color: var(--pdx-hi, #e6edf3); flex-shrink: 0; min-width: 32px; text-align: right; } .pdx-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pdx-metric-card { padding: 10px 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; display: flex; flex-direction: column; gap: 3px; } .pdx-metric-value { font: 700 20px/1 var(--pdx-mono, monospace); color: var(--pdx-hi, #e6edf3); } .pdx-metric-label { font: 10px/1 var(--pdx-font, sans-serif); color: var(--pdx-lo, #6e7681); text-transform: uppercase; letter-spacing: .04em; } .pdx-metric-card--red .pdx-metric-value { color: var(--pdx-red, #f85149); } .pdx-metric-card--green .pdx-metric-value { color: var(--pdx-green, #c2ff00); } .pdx-metric-card--blue .pdx-metric-value { color: var(--pdx-blue, #388bfd); } .pdx-metric-card--amber .pdx-metric-value { color: var(--pdx-amber, #f59e0b); } .pdx-evidence-section { border: 1px solid rgba(255,255,255,.07); border-radius: 6px; overflow: hidden; } .pdx-evidence-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,.03); border: none; color: var(--pdx-hi, #e6edf3); font: 600 11px/1 var(--pdx-font, sans-serif); cursor: pointer; text-align: left; transition: background .15s; } .pdx-evidence-toggle:hover { background: rgba(255,255,255,.06); } .pdx-evidence-toggle-arrow { font-size: 10px; color: var(--pdx-lo, #6e7681); transition: transform .2s; } .pdx-evidence-section.is-open .pdx-evidence-toggle-arrow { transform: rotate(180deg); } .pdx-evidence-body { display: none; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.06); } .pdx-evidence-section.is-open .pdx-evidence-body { display: block; } .pdx-target-normalized { font-size: 12px; line-height: 1.45; color: var(--pdx-mid, #8b949e); padding: 8px 12px; margin-bottom: 10px; background: rgba(56,139,253,.08); border: 1px solid rgba(56,139,253,.22); border-radius: 8px; } .pdx-target-normalized strong { color: var(--pdx-hi, #e6edf3); } .pdx-target-raw { opacity: 0.85; font-family: var(--pdx-mono, monospace); font-size: 11px; } .pdx-scan-complete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(194,255,0,.08); border: 1px solid rgba(194,255,0,.2); border-radius: 8px; font: 600 12px/1 var(--pdx-font, sans-serif); color: var(--pdx-accent, #c2ff00); animation: pdx-dp-finding-in .4s ease forwards; } .pdx-scan-complete-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pdx-accent, #c2ff00); flex-shrink: 0; } .pdx-scan-complete-time { margin-left: auto; font: 11px/1 var(--pdx-mono, monospace); color: var(--pdx-mid, #8b949e); } .pdx-source-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); font: 11px/1 var(--pdx-font, sans-serif); } .pdx-source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pdx-mute, #484f58); flex-shrink: 0; } .pdx-source-name { color: var(--pdx-hi, #e6edf3); flex: 1; } .pdx-source-status { font-size: 10px; color: var(--pdx-mid, #8b949e); } .pdx-source-status--ok { color: var(--pdx-green, #c2ff00); } .pdx-source-status--warn { color: var(--pdx-yellow, #d29922); } .pdx-ioc-chip-v5 { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font: 10px/1.4 var(--pdx-mono, monospace); background: rgba(255,255,255,.04); color: var(--pdx-mid, #8b949e); border: 1px solid var(--pdx-border, rgba(255,255,255,.08)); margin: 2px; cursor: default; transition: background .12s; } .pdx-ioc-chip-v5:hover { background: rgba(255,255,255,.08); color: var(--pdx-hi, #e6edf3); } /* ═══════════════════════════════════════════════════════════ v5.2 — RICH RESULT RENDERER COMPONENTS ═══════════════════════════════════════════════════════════ */ /* Risk ring — SVG score circle */ .pdx-risk-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; } .pdx-risk-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); display: block; } .pdx-risk-ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; } .pdx-risk-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); } .pdx-risk-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pdx-risk-ring-num { font: 700 16px/1 var(--pdx-mono, monospace); color: var(--pdx-hi, #e6edf3); } .pdx-risk-ring-text { font: 500 8px/1 var(--pdx-font, sans-serif); color: var(--pdx-mid, #8b949e); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } /* Connector status icon alignment */ .pdx-conn-status svg { width: 14px; height: 14px; flex-shrink: 0; } /* Evidence section open by default for first item */ .pdx-evidence-section:first-of-type { } /* Scan complete banner — no animation to avoid flash on re-render */ /* Prose text */ .pdx-prose { font: 12px/1.65 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); } /* Step result body scrollbar */ .pdx-step-result-body::-webkit-scrollbar, .pdx-trace-output::-webkit-scrollbar, .pdx-output-body::-webkit-scrollbar { width: 4px; } .pdx-step-result-body::-webkit-scrollbar-thumb, .pdx-trace-output::-webkit-scrollbar-thumb, .pdx-output-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } /* Metric card hover */ .pdx-metric-card { transition: border-color .15s; } .pdx-metric-card:hover { border-color: rgba(255,255,255,.14); } /* IOC chip hover */ .pdx-ioc-chip-v5 { transition: background .15s; } /* Timeline dot — latest event uses accent color, no animation */ .pdx-tl-event-v5:first-child .pdx-tl-dot-v5 { background: var(--pdx-accent, #c2ff00); } /* ═══════════════════════════════════════════════════════════ v5.3 — INTELLIGENCE REPORT COMPONENTS Human-readable report layout replacing raw JSON dumps. ═══════════════════════════════════════════════════════════ */ /* ─── Intelligence Summary Card ─────────────────────────── */ .pdx-report-summary { margin-top: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgba(194,255,0,.06) 0%, rgba(99,102,241,.04) 100%); border: 1px solid rgba(194,255,0,.2); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; } .pdx-report-summary-header { display: flex; align-items: center; gap: 8px; } .pdx-report-summary-icon { width: 16px; height: 16px; color: var(--pdx-green, #c2ff00); flex-shrink: 0; } .pdx-report-summary-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; } .pdx-report-summary-title { font: 600 11px/1 var(--pdx-mono, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--pdx-green, #c2ff00); } .pdx-report-summary-text { font: 13px/1.65 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); } /* ─── Recommendations list ───────────────────────────────── */ .pdx-report-recs { border-top: 1px solid rgba(194,255,0,.12); padding-top: 10px; } .pdx-report-recs-title { font: 600 10px/1 var(--pdx-mono, monospace); text-transform: uppercase; letter-spacing: .05em; color: var(--pdx-mid, #8b949e); margin-bottom: 8px; } .pdx-report-recs-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; } .pdx-report-recs-list li { font: 12px/1.55 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); } .pdx-report-recs-list li::marker { color: var(--pdx-green, #c2ff00); } /* ─── Raw / Technical Data section ──────────────────────── */ .pdx-raw-section .pdx-evidence-toggle { background: rgba(255,255,255,.02); color: var(--pdx-lo, #6e7681); font-size: 10px; } .pdx-raw-section .pdx-evidence-toggle:hover { background: rgba(255,255,255,.04); color: var(--pdx-mid, #8b949e); } .pdx-code--raw { font: 10px/1.6 var(--pdx-mono, monospace); color: var(--pdx-lo, #6e7681); white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; } .pdx-code--raw::-webkit-scrollbar { width: 4px; } .pdx-code--raw::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; } /* ─── Error message ──────────────────────────────────────── */ .pdx-error-msg { font: 11px/1.5 var(--pdx-font, sans-serif); color: var(--pdx-red, #f85149); padding: 6px 0; } /* ─── Badge error variant ────────────────────────────────── */ .pdx-badge--err { background: rgba(248,81,73,.12); color: var(--pdx-red, #f85149); border-color: rgba(248,81,73,.25); } /* ─── Prose text ─────────────────────────────────────────── */ .pdx-prose { font: 12px/1.65 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); } /* ─── Steps list ─────────────────────────────────────────── */ .pdx-steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .pdx-steps-list li { font: 12px/1.55 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); } .pdx-steps-list li::marker { color: var(--pdx-indigo, #6366f1); font-weight: 600; } /* ─── Generic list ───────────────────────────────────────── */ .pdx-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; } .pdx-list li { font: 12px/1.55 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); } /* ─── Tag inline ─────────────────────────────────────────── */ .pdx-tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; font: 500 10px/1 var(--pdx-mono, monospace); background: rgba(255,255,255,.06); color: var(--pdx-mid, #8b949e); border: 1px solid rgba(255,255,255,.08); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════ MISSING CLASS DEFINITIONS — v5 timeline, AI summary, pipeline Classes used in JS render functions but previously undefined. ═══════════════════════════════════════════════════════════ */ /* ─── v5 Timeline ────────────────────────────────────────── */ .pdx-timeline-v5 { display: flex; flex-direction: column; gap: 0; padding: 4px 0; } .pdx-tl-event-v5 { display: flex; gap: 10px; position: relative; padding-bottom: 14px; } .pdx-tl-event-v5:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 12px; width: 1px; bottom: 0; background: var(--pdx-border, rgba(255,255,255,.08)); } .pdx-tl-dot-v5 { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; background: var(--pdx-indigo, #6366f1); border: 2px solid var(--pdx-bg-el, #161b22); box-shadow: 0 0 0 2px rgba(99,102,241,.2); } .pdx-tl-body-v5 { flex: 1; min-width: 0; } .pdx-tl-date-v5 { font: 10px/1 var(--pdx-mono, monospace); color: var(--pdx-lo, #6e7681); margin-bottom: 3px; } .pdx-tl-desc-v5 { font: 12px/1.5 var(--pdx-font, sans-serif); color: var(--pdx-hi, #e6edf3); word-break: break-word; } .pdx-tl-source-v5 { font: 10px/1 var(--pdx-mono, monospace); color: var(--pdx-mute, #484f58); margin-top: 3px; } /* ─── v5 AI Summary ──────────────────────────────────────── */ .pdx-ai-summary-v5 { background: var(--pdx-indigo-dim, rgba(99,102,241,.15)); border: 1px solid rgba(99,102,241,.25); border-radius: var(--pdx-r, 8px); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .pdx-ai-label-v5 { font: 700 9px/1 var(--pdx-mono, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--pdx-indigo, #6366f1); } /* ─── Pipeline finding body ──────────────────────────────── */ .pdx-dp-finding-body { display: flex; flex-direction: column; gap: 2px; } /* ─── Stage label (simple pipeline) ─────────────────────── */ .pdx-stage-label { font: 11px/1.3 var(--pdx-mono, monospace); color: var(--pdx-hi, #e6edf3); } .pdx-stage.is-active .pdx-stage-label { color: #fff; } .pdx-stage.is-done .pdx-stage-label { color: var(--pdx-mid, #8b949e); } /* ─── Light mode overrides ───────────────────────────────── */ @media (prefers-color-scheme: light) { .pdx-deep-pipeline { background: #f6f8fa; border-color: rgba(99,102,241,.2); } .pdx-dp-log { background: rgba(0,0,0,.04); } .pdx-cap-tag { background: rgba(99,102,241,.08); } .pdx-ph-desc { color: #57606a; border-color: rgba(0,0,0,.06); } .pdx-report-summary { background: rgba(107,140,0,.05); border-color: rgba(107,140,0,.2); } .pdx-report-summary-title { color: #4a6200; } .pdx-report-summary-icon { color: #4a6200; } .pdx-report-summary-text { color: #1f2328; } .pdx-report-recs-list li { color: #1f2328; } .pdx-report-recs { border-color: rgba(107,140,0,.15); } .pdx-prose { color: #1f2328; } .pdx-steps-list li { color: #1f2328; } .pdx-list li { color: #1f2328; } .pdx-tag { background: rgba(0,0,0,.05); color: #57606a; border-color: rgba(0,0,0,.1); } .pdx-raw-section .pdx-evidence-toggle { color: #8c959f; } .pdx-code--raw { color: #57606a; } /* Ensure lime text is readable on light backgrounds */ .pdx-success, .pdx-notif-item--success, .pdx-conn-status--ok, .pdx-signal--pos, .pdx-stage.is-done, .pdx-hist--clean + .pdx-hist-target, .pdx-dp-finding--ok { color: #4a6200; } .pdx-btn-primary { background: #c2ff00; color: #0d1117; } .pdx-btn-primary:hover { background: #d4ff33; } .pdx-input:focus, .pdx-textarea:focus, .pdx-select:focus, .pdx-chat-input:focus { border-color: #6b8c00; } .pdx-ph-title svg { stroke: #6b8c00; } .pdx-paywall-icon svg { stroke: #6b8c00; } .pdx-paywall-price { color: #4a6200; } .pdx-pwf-check { stroke: #4a6200; } .pdx-paywall-features { border-top-color: rgba(0,0,0,.1); } .pdx-pwf-item { color: #57606a; } .pdx-badge--new { background: rgba(107,140,0,.12); color: #4a6200; border-color: rgba(107,140,0,.3); } .pdx-persona-btn.is-active { background: rgba(107,140,0,.12); border-color: rgba(107,140,0,.4); color: #4a6200; } .pdx-feed-dot--active { background: #6b8c00; } .pdx-module-status-dot--online { background: #6b8c00; } .pdx-dp-pulse-ring { background: #6b8c00; } .pdx-tpl-card:hover { border-color: rgba(107,140,0,.4); } .pdx-final-output .pdx-section-title { color: #4a6200; border-color: rgba(107,140,0,.2); } .pdx-final-output { background: rgba(107,140,0,.06); border-color: rgba(107,140,0,.2); } .pdx-scan-complete { background: rgba(107,140,0,.08); border-color: rgba(107,140,0,.2); color: #4a6200; } .pdx-scan-complete-dot { background: #6b8c00; } }