diff --git a/extension/sidepanel.css b/extension/sidepanel.css index debabc83b..cf9f5beb1 100644 --- a/extension/sidepanel.css +++ b/extension/sidepanel.css @@ -87,203 +87,11 @@ flex: 1; } -/* ─── Security Banner ───────────────────────────────────────────── - Variant A approved in /plan-design-review 2026-04-19. Centered - alert-heavy. Fires on security_event — canary leaks + ML BLOCK - verdicts. Trust UX: layer names + confidence scores in mono so - the user can see exactly WHY the session was terminated. -*/ +/* The .security-banner component (Variant A, 2026-04-19) was removed with + its producer: no JS has created a .security-banner element since the + chat-path rip, and the hidden shield it guarded against went in #2557. + Restore from git history if the banner UX returns. */ -.security-banner { - position: relative; - /* Kept above other absolutely-positioned chrome so the banner's close - button and controls receive clicks. This originally guarded against - the top-right security shield (z-index: 10) overlapping the close X - and intercepting pointer events; that shield has since been removed - (#2557 — dead UI since the PTY terminal rewrite). */ - z-index: 20; - padding: 20px 16px; - text-align: center; - background: rgba(20, 20, 20, 0.98); - border-bottom: 1px solid rgba(239, 68, 68, 0.3); - animation: securityBannerEnter 250ms cubic-bezier(0.16, 1, 0.3, 1); -} - -@keyframes securityBannerEnter { - from { opacity: 0; transform: translateY(-8px); } - to { opacity: 1; transform: translateY(0); } -} - -.security-banner-close { - position: absolute; - top: 6px; - right: 6px; - width: 28px; - height: 28px; - background: transparent; - border: none; - color: var(--zinc-500, #71717A); - font-size: 20px; - line-height: 1; - cursor: pointer; - border-radius: var(--radius-md, 8px); - padding: 0; -} -.security-banner-close:hover { - background: rgba(255, 255, 255, 0.05); - color: var(--zinc-300, #D4D4D8); -} -.security-banner-close:focus-visible { - outline: 2px solid var(--amber-500); - outline-offset: 2px; -} - -.security-banner-icon { - color: var(--error); - display: flex; - justify-content: center; - margin-bottom: 8px; -} - -.security-banner-title { - font-family: var(--font-display, 'Satoshi', sans-serif); - font-weight: 700; - font-size: 18px; - color: var(--error); - margin-bottom: 2px; -} - -.security-banner-subtitle { - font-family: var(--font-body, 'DM Sans', sans-serif); - font-size: 13px; - color: var(--zinc-400, #A1A1AA); - margin-bottom: 12px; -} - -.security-banner-expand { - display: inline-flex; - align-items: center; - gap: 6px; - background: transparent; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: var(--radius-md, 8px); - padding: 6px 12px; - color: var(--zinc-300, #D4D4D8); - font-family: var(--font-body, 'DM Sans', sans-serif); - font-size: 12px; - cursor: pointer; -} -.security-banner-expand:hover { - background: rgba(255, 255, 255, 0.04); -} -.security-banner-expand:focus-visible { - outline: 2px solid var(--amber-500); - outline-offset: 2px; -} -.security-banner-chevron { - transition: transform 200ms ease-out; -} - -.security-banner-details { - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid rgba(255, 255, 255, 0.06); - text-align: left; -} - -.security-banner-section-label { - font-family: var(--font-mono, 'JetBrains Mono', monospace); - font-size: 10px; - letter-spacing: 0.08em; - color: var(--zinc-500, #71717A); - margin-bottom: 6px; -} - -.security-banner-layers { - display: flex; - flex-direction: column; - gap: 4px; -} - -.security-banner-layer { - display: flex; - justify-content: space-between; - align-items: center; - padding: 4px 8px; - background: rgba(255, 255, 255, 0.02); - border-radius: var(--radius-sm, 4px); - font-family: var(--font-mono, 'JetBrains Mono', monospace); - font-size: 12px; -} - -.security-banner-layer-name { - color: var(--zinc-300, #D4D4D8); -} - -.security-banner-layer-score { - color: var(--amber-400); - font-variant-numeric: tabular-nums; -} - -.security-banner-suspect { - margin: 4px 0 0; - padding: 8px 10px; - background: var(--zinc-900, #18181B); - border: 1px solid var(--zinc-700, #3F3F46); - border-radius: var(--radius-sm, 4px); - font-family: var(--font-mono); - font-size: 11px; - line-height: 1.4; - color: var(--zinc-300, #D4D4D8); - white-space: pre-wrap; - word-break: break-word; - max-height: 160px; - overflow-y: auto; -} - -.security-banner-actions { - display: flex; - gap: 8px; - justify-content: center; - margin-top: 14px; -} - -.security-banner-btn { - flex: 1; - padding: 8px 14px; - border-radius: var(--radius-md, 6px); - font-size: 12px; - font-weight: 600; - cursor: pointer; - border: 1px solid transparent; - transition: background 0.15s, border-color 0.15s; -} - -.security-banner-btn-block { - background: var(--red-600, #DC2626); - color: white; - border-color: var(--red-700, #B91C1C); -} - -.security-banner-btn-block:hover { - background: var(--red-700, #B91C1C); -} - -.security-banner-btn-allow { - background: transparent; - color: var(--zinc-200, #E4E4E7); - border-color: var(--zinc-600, #52525B); -} - -.security-banner-btn-allow:hover { - background: var(--zinc-800, #27272A); - border-color: var(--zinc-500, #71717A); -} - -.security-banner-btn:focus-visible { - outline: 2px solid var(--amber-400); - outline-offset: 2px; -} .conn-btn { font-size: 9px; @@ -1133,7 +941,7 @@ footer { border-radius: var(--radius-md, 6px); padding: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); - font-family: var(--font-sans); + font-family: var(--font-system); /* --font-sans was never defined; the invalid var fell back to inheritance by luck */ font-size: 12px; } .mem-toast-header { @@ -1195,7 +1003,7 @@ footer { font-size: 12px; padding: 4px 12px; } -.mem-toast-btn:hover { background: var(--zinc-700); } +.mem-toast-btn:hover { background: var(--zinc-700, #3F3F46); } /* --zinc-700 is undefined in :root; without the fallback this hover computed to transparent */ .mem-toast-btn.primary { background: #ef4444; border-color: #ef4444;