@mp-consulting/homebridge-ai-kit 2.0.0

package/homebridge-ui/public/lib/kit.css

@@ -0,0 +1,994 @@
+/* @mp-consulting/homebridge-ui-kit v1.2.0 */
+
+/* ── Design tokens ──────────────────────────────────────────────────────────
+   CSS custom properties used throughout the design system.
+   Override these in your plugin's styles.css to customize per-plugin.
+   Light values live on :root; dark values follow Bootstrap's data-bs-theme.
+   ────────────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Brand */
+  --mp-primary: #4f46e5;
+  --mp-primary-rgb: 79, 70, 229;
+  --mp-primary-hover: #4338ca;
+  --mp-primary-text: #4f46e5; /* brand color for text; meets WCAG AA on the body bg */
+
+  /* Status */
+  --mp-status-online: #10b981;
+  --mp-status-online-glow: rgba(16, 185, 129, 0.35);
+  --mp-status-offline: #ef4444;
+  --mp-status-checking: #94a3b8;
+
+  /* Surfaces */
+  --mp-surface: rgba(0, 0, 0, 0.02);
+  --mp-border: rgba(0, 0, 0, 0.1);
+
+  /* Shape */
+  --mp-radius: 0.5rem;
+  --mp-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
+
+  /* Assistant (AI) halo palette. Only ever used for borders, glows and
+     decorative dots: text never sits on the gradient. */
+  --mp-ai-1: #BC82F3;
+  --mp-ai-2: #F5B9EA;
+  --mp-ai-3: #8D9FFF;
+  --mp-ai-4: #FF6778;
+  --mp-ai-5: #FFBA71;
+  --mp-ai-6: #C686FF;
+  --mp-ai-stops: var(--mp-ai-1), var(--mp-ai-2), var(--mp-ai-3), var(--mp-ai-4),
+    var(--mp-ai-5), var(--mp-ai-6), var(--mp-ai-1);
+  /* Halo gradient. Custom properties resolve where they are declared, so this
+     token is static (angle 0) when used as-is; the AI components rebuild it
+     from --mp-ai-stops on the animated element so it rotates (see ai.css). */
+  --mp-ai-gradient: conic-gradient(from var(--mp-ai-angle), var(--mp-ai-stops));
+  --mp-ai-gradient-linear: linear-gradient(90deg, var(--mp-ai-stops));
+  --mp-ai-text: #7e22ce;               /* accent text; 7.1:1 on white */
+  --mp-ai-surface: var(--bs-body-bg, #fff);
+  /* Colours the AI components take from the host. They default to Bootstrap's,
+     and are repeated in the dark block so they resolve on the element that
+     switches theme. A host with its own theming (Glass UI) overrides them. */
+  --mp-ai-fg: var(--bs-body-color, #212529);
+  --mp-ai-fg-muted: var(--bs-secondary-color, #6c757d);
+  --mp-ai-bg: var(--bs-body-bg, transparent);
+  --mp-ai-border-color: var(--bs-border-color, #dee2e6);
+  --mp-ai-success-text: var(--bs-success-text-emphasis, #0a3622);
+  --mp-ai-danger-text: var(--bs-danger-text-emphasis, #b02a37);
+  --mp-ai-border-width: 2px;
+  --mp-ai-glow-blur: 12px;
+  --mp-ai-glow-opacity: 0.45;
+  --mp-ai-edge-glow-opacity: 0.55;
+  --mp-ai-duration: 4s;
+  --mp-ai-edge-width: 28px;
+
+  /* Assistant diff lines (text/background pairs meet WCAG AA) */
+  --mp-ai-diff-add-bg: #dcfce7;
+  --mp-ai-diff-add-text: #14532d;
+  --mp-ai-diff-del-bg: #fee2e2;
+  --mp-ai-diff-del-text: #7f1d1d;
+}
+
+/* Animatable angle for the rotating halo. Browsers without @property simply
+   show a static gradient. */
+@property --mp-ai-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+[data-bs-theme="dark"] {
+  --mp-primary-text: #818cf8;
+  --mp-surface: rgba(255, 255, 255, 0.03);
+  --mp-border: rgba(255, 255, 255, 0.08);
+  --mp-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
+  --mp-ai-text: #d8b4fe;               /* 9.6:1 on #212529 */
+  --mp-ai-surface: var(--bs-body-bg, #212529);
+  --mp-ai-fg: var(--bs-body-color, #dee2e6);
+  --mp-ai-fg-muted: var(--bs-secondary-color, rgba(222, 226, 230, 0.75));
+  --mp-ai-bg: var(--bs-body-bg, transparent);
+  --mp-ai-border-color: var(--bs-border-color, #495057);
+  --mp-ai-success-text: var(--bs-success-text-emphasis, #75b798);
+  --mp-ai-danger-text: var(--bs-danger-text-emphasis, #ea868f);
+  --mp-ai-glow-opacity: 0.7;
+  --mp-ai-edge-glow-opacity: 0.8;
+  --mp-ai-diff-add-bg: rgba(34, 197, 94, 0.16);
+  --mp-ai-diff-add-text: #bbf7d0;
+  --mp-ai-diff-del-bg: rgba(239, 68, 68, 0.18);
+  --mp-ai-diff-del-text: #fecaca;
+}
+
+/* ── Bootstrap 5 overrides ──────────────────────────────────────────────────
+   Remap Bootstrap components to use brand tokens.
+   ────────────────────────────────────────────────────────────────────────── */
+
+/* Primary button */
+.btn-primary {
+  --bs-btn-bg: var(--mp-primary);
+  --bs-btn-border-color: var(--mp-primary);
+  --bs-btn-hover-bg: var(--mp-primary-hover);
+  --bs-btn-hover-border-color: var(--mp-primary-hover);
+  --bs-btn-active-bg: var(--mp-primary-hover);
+  --bs-btn-active-border-color: var(--mp-primary-hover);
+  --bs-btn-focus-shadow-rgb: var(--mp-primary-rgb);
+  --bs-btn-disabled-bg: var(--mp-primary);
+  --bs-btn-disabled-border-color: var(--mp-primary);
+}
+
+/* Primary spinner */
+.spinner-border.text-primary,
+.spinner-grow.text-primary {
+  color: var(--mp-primary) !important;
+}
+
+/* ── Components ─────────────────────────────────────────────────────────────
+   Reusable UI components used across all Homebridge plugins.
+   ────────────────────────────────────────────────────────────────────────── */
+
+/* ── Plugin header ──────────────────────────────────────── */
+
+.mp-header {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.mp-header-icon {
+  font-size: 2rem;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.mp-header-title {
+  font-size: 1.375rem;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.3;
+}
+
+.mp-header-subtitle {
+  font-size: 0.875rem;
+  color: var(--bs-secondary-color);
+  margin: 0;
+}
+
+/* ── Status indicator dot ───────────────────────────────── */
+
+.mp-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.mp-status-online {
+  background-color: var(--mp-status-online);
+  box-shadow: 0 0 5px var(--mp-status-online-glow);
+}
+
+.mp-status-offline {
+  background-color: var(--mp-status-offline);
+}
+
+.mp-status-checking {
+  background-color: var(--mp-status-checking);
+  animation: mp-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes mp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+/* ── Device card ────────────────────────────────────────── */
+
+.mp-device-card {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  cursor: pointer;
+}
+
+.mp-device-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--mp-shadow-hover) !important;
+}
+
+.mp-device-card:focus-visible {
+  outline: 2px solid var(--mp-primary);
+  outline-offset: 2px;
+}
+
+/* ── Settings surface card ──────────────────────────────── */
+
+.mp-settings-card {
+  background: var(--mp-surface);
+  border: 1px solid var(--mp-border) !important;
+  border-radius: var(--mp-radius);
+}
+
+/* ── Empty state ────────────────────────────────────────── */
+
+.mp-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.mp-empty-state-icon {
+  font-size: 2.5rem;
+  color: var(--bs-secondary-color);
+  margin-bottom: 0.75rem;
+  line-height: 1;
+}
+
+.mp-empty-state-title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--bs-secondary-color);
+  margin: 0 0 0.25rem;
+}
+
+.mp-empty-state-hint {
+  font-size: 0.8125rem;
+  color: var(--bs-secondary-color);
+  margin: 0;
+  opacity: 0.7;
+}
+
+/* ── Loading state ──────────────────────────────────────── */
+
+.mp-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1.5rem;
+  gap: 0.75rem;
+  color: var(--bs-secondary-color);
+  font-size: 0.875rem;
+}
+
+/* ── Nav tabs ───────────────────────────────────────────── */
+
+.mp-tabs {
+  border-bottom: 1px solid var(--mp-border);
+}
+
+.mp-tabs .nav-link {
+  color: var(--bs-secondary-color);
+  border: none;
+  border-bottom: 2px solid transparent; /* reserve space so the active tab doesn't shift */
+  padding: 0.75rem 1.25rem;
+  font-weight: 500;
+}
+
+.mp-tabs .nav-link:hover {
+  color: var(--bs-body-color);
+  border-color: transparent;
+}
+
+.mp-tabs .nav-link.active {
+  color: var(--mp-primary-text);
+  background: transparent;
+  border-bottom-color: var(--mp-primary);
+}
+
+/* ── Metadata label ─────────────────────────────────────── */
+
+.mp-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--bs-secondary-color);
+}
+
+/* ── View toggling ──────────────────────────────────────── */
+
+.mp-view {
+  display: none;
+}
+
+.mp-view.active {
+  display: block;
+}
+
+/* ── Support footer ─────────────────────────────────────── */
+
+.mp-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  padding-top: 1.5rem;
+  margin-top: 2rem;
+  border-top: 1px solid var(--mp-border);
+  font-size: 0.8125rem;
+  color: var(--bs-secondary-color);
+}
+
+.mp-footer a {
+  color: var(--bs-secondary-color);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  transition: color 0.15s ease;
+}
+
+.mp-footer a:hover {
+  color: var(--mp-primary-text);
+}
+
+.mp-footer-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+.mp-footer-sep {
+  color: var(--mp-border);
+  user-select: none;
+}
+
+/* ── Reduced motion ─────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-status-checking {
+    animation: none;
+  }
+
+  .mp-device-card,
+  .mp-footer a {
+    transition: none;
+  }
+
+  .mp-device-card:hover {
+    transform: none;
+  }
+}
+
+/* ── Assistant (AI) components ──────────────────────────────────────────────
+   Halo-styled surfaces for AI features. Text always sits on a neutral surface
+   (--mp-ai-surface); the gradient is only used for rings, glows and dots.
+   Bootstrap is optional: every colour has a fallback, so this file also works
+   standalone as dist/ai.css (with the tokens).
+   ────────────────────────────────────────────────────────────────────────── */
+
+@keyframes mp-ai-spin {
+  to { --mp-ai-angle: 360deg; }
+}
+
+@keyframes mp-ai-glow-pulse {
+  0%, 100% { opacity: calc(var(--mp-ai-glow-opacity) * 0.35); }
+  50% { opacity: var(--mp-ai-glow-opacity); }
+}
+
+@keyframes mp-ai-orb-pulse {
+  0%, 100% { transform: scale(0.8); opacity: 0.65; }
+  50% { transform: scale(1.1); opacity: 1; }
+}
+
+@keyframes mp-ai-blink {
+  50% { opacity: 0; }
+}
+
+@keyframes mp-ai-fade-in {
+  from { opacity: 0; }
+}
+
+/* ── Shared halo ring ───────────────────────────────────── */
+/* ::before paints the neutral surface plus a gradient border (padding-box /
+   border-box layers); ::after is the blurred glow behind it. Both sit below
+   the content inside the element's own stacking context. */
+
+.mp-ai-halo,
+.mp-ai-button,
+.mp-ai-badge,
+.mp-ai-panel {
+  position: relative;
+  isolation: isolate;
+  background: transparent;
+}
+
+.mp-ai-halo::before,
+.mp-ai-button::before,
+.mp-ai-badge::before,
+.mp-ai-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border: var(--mp-ai-border-width) solid transparent;
+  border-radius: inherit;
+  background:
+    linear-gradient(var(--mp-ai-surface), var(--mp-ai-surface)) padding-box,
+    conic-gradient(from var(--mp-ai-angle), var(--mp-ai-stops)) border-box;
+  pointer-events: none;
+}
+
+.mp-ai-halo::after,
+.mp-ai-button::after,
+.mp-ai-panel::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  border-radius: inherit;
+  background: conic-gradient(from var(--mp-ai-angle), var(--mp-ai-stops));
+  filter: blur(var(--mp-ai-glow-blur));
+  opacity: var(--mp-ai-glow-opacity);
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+/* ── Halo container ─────────────────────────────────────── */
+
+.mp-ai-halo {
+  display: block;
+  border-radius: var(--mp-radius, 0.5rem);
+}
+
+.mp-ai-halo::before,
+.mp-ai-halo::after {
+  animation: mp-ai-spin var(--mp-ai-duration) linear infinite;
+}
+
+/* ── Badge ──────────────────────────────────────────────── */
+
+.mp-ai-badge {
+  --mp-ai-border-width: 1.5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  padding: 0.2em 0.65em;
+  border-radius: 999px;
+  color: var(--mp-ai-text);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.mp-ai-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  fill: currentColor;
+  color: var(--mp-ai-text);
+}
+
+/* ── Button ─────────────────────────────────────────────── */
+
+.mp-ai-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.375rem 0.95rem;
+  border: 0;
+  border-radius: 999px;
+  color: var(--mp-ai-fg);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.mp-ai-button::after {
+  opacity: 0;
+}
+
+.mp-ai-button:hover::before,
+.mp-ai-button:hover::after,
+.mp-ai-button:focus-visible::before,
+.mp-ai-button:focus-visible::after,
+.mp-ai-button[aria-busy="true"]::before,
+.mp-ai-button[aria-busy="true"]::after {
+  animation: mp-ai-spin var(--mp-ai-duration) linear infinite;
+}
+
+.mp-ai-button:hover::after,
+.mp-ai-button:focus-visible::after,
+.mp-ai-button[aria-busy="true"]::after {
+  opacity: var(--mp-ai-glow-opacity);
+}
+
+.mp-ai-button:focus-visible {
+  outline: 2px solid var(--mp-ai-text);
+  outline-offset: 3px;
+}
+
+.mp-ai-button:disabled:not([aria-busy="true"]) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.mp-ai-button-sm {
+  padding: 0.25rem 0.7rem;
+  font-size: 0.8125rem;
+}
+
+.mp-ai-button-lg {
+  padding: 0.55rem 1.25rem;
+  font-size: 1rem;
+}
+
+/* ── Thinking indicator ─────────────────────────────────── */
+/* Standalone: a pulsing gradient orb before the label.
+   On a halo/button/panel: the glow pulses instead. */
+
+.mp-ai-thinking:not(.mp-ai-halo, .mp-ai-button, .mp-ai-badge, .mp-ai-panel) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--mp-ai-fg-muted);
+  font-size: 0.875rem;
+}
+
+.mp-ai-thinking:not(.mp-ai-halo, .mp-ai-button, .mp-ai-badge, .mp-ai-panel)::before {
+  content: '';
+  width: 0.875em;
+  height: 0.875em;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: conic-gradient(from var(--mp-ai-angle), var(--mp-ai-stops));
+  animation:
+    mp-ai-spin 1.5s linear infinite,
+    mp-ai-orb-pulse 1.4s ease-in-out infinite;
+}
+
+.mp-ai-thinking:is(.mp-ai-halo, .mp-ai-button, .mp-ai-panel)::before {
+  animation: mp-ai-spin var(--mp-ai-duration) linear infinite;
+}
+
+.mp-ai-thinking:is(.mp-ai-halo, .mp-ai-button, .mp-ai-panel)::after {
+  animation:
+    mp-ai-spin var(--mp-ai-duration) linear infinite,
+    mp-ai-glow-pulse 1.6s ease-in-out infinite;
+}
+
+/* ── Answer panel ───────────────────────────────────────── */
+
+.mp-ai-panel {
+  display: block;
+  padding: 1rem 1.125rem;
+  border-radius: var(--mp-radius, 0.5rem);
+  color: var(--mp-ai-fg);
+  font-size: 0.9375rem;
+}
+
+.mp-ai-panel::after {
+  opacity: calc(var(--mp-ai-glow-opacity) * 0.4);
+}
+
+.mp-ai-panel.is-streaming::before,
+.mp-ai-panel.is-streaming::after {
+  animation: mp-ai-spin var(--mp-ai-duration) linear infinite;
+}
+
+.mp-ai-panel.is-streaming::after {
+  opacity: var(--mp-ai-glow-opacity);
+}
+
+.mp-ai-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
+}
+
+.mp-ai-panel-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.mp-ai-panel-note {
+  margin: 0.75rem 0 0;
+  font-size: 0.75rem;
+  color: var(--mp-ai-fg-muted);
+}
+
+.mp-ai-error {
+  margin: 0.5rem 0 0;
+  color: var(--mp-ai-danger-text);
+  font-size: 0.875rem;
+}
+
+.mp-ai-caret {
+  display: inline-block;
+  width: 0.5em;
+  height: 1.1em;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  border-radius: 1px;
+  background: var(--mp-ai-text);
+  animation: mp-ai-blink 1s steps(1) infinite;
+}
+
+/* ── Rendered answer text (safe markdown subset) ────────── */
+
+.mp-ai-prose > :first-child {
+  margin-top: 0;
+}
+
+.mp-ai-prose > :last-child {
+  margin-bottom: 0;
+}
+
+.mp-ai-prose p,
+.mp-ai-prose ul,
+.mp-ai-prose ol,
+.mp-ai-prose pre {
+  margin: 0 0 0.625rem;
+}
+
+.mp-ai-prose ul,
+.mp-ai-prose ol {
+  padding-left: 1.25rem;
+}
+
+.mp-ai-prose code {
+  padding: 0.1em 0.35em;
+  border-radius: 0.25rem;
+  background: var(--mp-surface, rgba(0, 0, 0, 0.04));
+  border: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+  color: inherit;
+  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.85em;
+}
+
+.mp-ai-prose pre {
+  padding: 0.625rem 0.75rem;
+  overflow-x: auto;
+  border-radius: 0.375rem;
+  background: var(--mp-surface, rgba(0, 0, 0, 0.04));
+  border: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+  font-size: 0.8125rem;
+}
+
+.mp-ai-prose pre code {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* ── Chat ───────────────────────────────────────────────── */
+
+.mp-ai-chat {
+  display: flex;
+  flex-direction: column;
+  min-height: 16rem;
+  max-height: var(--mp-ai-chat-height, 28rem);
+  overflow: hidden;
+  border: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--mp-radius, 0.5rem);
+  background: var(--mp-ai-surface);
+  color: var(--mp-ai-fg);
+}
+
+.mp-ai-chat-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+}
+
+.mp-ai-chat-log {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.mp-ai-chat-empty {
+  margin: auto;
+  color: var(--mp-ai-fg-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.mp-ai-chat-msg {
+  display: flex;
+}
+
+.mp-ai-chat-msg.is-user {
+  justify-content: flex-end;
+}
+
+.mp-ai-chat-bubble {
+  max-width: 85%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.875rem;
+  font-size: 0.9rem;
+  overflow-wrap: anywhere;
+}
+
+.is-user > .mp-ai-chat-bubble {
+  border-bottom-right-radius: 0.25rem;
+  background: var(--mp-primary, #4f46e5);
+  color: #fff;
+}
+
+.is-assistant > .mp-ai-chat-bubble {
+  border: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+  border-bottom-left-radius: 0.25rem;
+  background: var(--mp-surface, rgba(0, 0, 0, 0.02));
+}
+
+.mp-ai-chat-form {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+}
+
+.mp-ai-chat-input {
+  flex: 1;
+  min-height: 2.375rem;
+  max-height: 8rem;
+  padding: 0.45rem 0.75rem;
+  resize: vertical;
+  border: 1px solid var(--mp-ai-border-color);
+  border-radius: 0.5rem;
+  background: var(--mp-ai-bg);
+  color: inherit;
+  font: inherit;
+  font-size: 0.9rem;
+}
+
+.mp-ai-chat-input:focus {
+  outline: 2px solid var(--mp-ai-text);
+  outline-offset: 1px;
+  border-color: transparent;
+}
+
+/* ── Diff ───────────────────────────────────────────────── */
+
+.mp-ai-diff {
+  overflow: hidden;
+  border: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--mp-radius, 0.5rem);
+  background: var(--mp-ai-surface);
+  color: var(--mp-ai-fg);
+}
+
+.mp-ai-diff-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+  font-size: 0.8125rem;
+}
+
+.mp-ai-diff-title {
+  font-weight: 500;
+}
+
+.mp-ai-diff-stats {
+  display: inline-flex;
+  margin-left: auto;
+  gap: 0.5rem;
+  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+
+.mp-ai-diff-stat-add {
+  color: var(--mp-ai-success-text);
+}
+
+.mp-ai-diff-stat-del {
+  color: var(--mp-ai-danger-text);
+}
+
+.mp-ai-diff-body {
+  max-height: 24rem;
+  margin: 0;
+  padding: 0.375rem 0;
+  overflow: auto;
+  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+.mp-ai-diff-line {
+  display: block;
+  min-width: max-content;
+  padding-right: 0.75rem;
+  white-space: pre;
+}
+
+.mp-ai-diff-sign {
+  display: inline-block;
+  width: 1.75rem;
+  color: var(--mp-ai-fg-muted);
+  text-align: center;
+  user-select: none;
+}
+
+.mp-ai-diff-line.is-add {
+  background: var(--mp-ai-diff-add-bg);
+  color: var(--mp-ai-diff-add-text);
+}
+
+.mp-ai-diff-line.is-del {
+  background: var(--mp-ai-diff-del-bg);
+  color: var(--mp-ai-diff-del-text);
+}
+
+.mp-ai-diff-line.is-add .mp-ai-diff-sign,
+.mp-ai-diff-line.is-del .mp-ai-diff-sign {
+  color: inherit;
+}
+
+.mp-ai-diff-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--mp-border, rgba(0, 0, 0, 0.1));
+}
+
+.mp-ai-diff-status {
+  margin-right: auto;
+  color: var(--mp-ai-fg-muted);
+  font-size: 0.8125rem;
+}
+
+.mp-ai-diff.is-applied .mp-ai-diff-status {
+  color: var(--mp-ai-success-text);
+}
+
+/* Plain action buttons, so the diff works without Bootstrap */
+.mp-ai-action {
+  padding: 0.3rem 0.85rem;
+  border: 1px solid var(--mp-ai-border-color);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--mp-ai-fg);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.mp-ai-action:hover {
+  background: var(--mp-surface, rgba(0, 0, 0, 0.04));
+}
+
+.mp-ai-action-primary {
+  border-color: var(--mp-primary, #4f46e5);
+  background: var(--mp-primary, #4f46e5);
+  color: #fff;
+}
+
+.mp-ai-action-primary:hover {
+  border-color: var(--mp-primary-hover, #4338ca);
+  background: var(--mp-primary-hover, #4338ca);
+}
+
+.mp-ai-action:focus-visible {
+  outline: 2px solid var(--mp-ai-text);
+  outline-offset: 2px;
+}
+
+.mp-ai-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* ── Page edge glow ─────────────────────────────────────── */
+/* A fixed, click-through glow around the viewport while the Assistant works. */
+
+.mp-ai-edge-glow {
+  position: fixed;
+  inset: 0;
+  z-index: 1090;
+  pointer-events: none;
+  animation: mp-ai-fade-in 0.4s ease-out;
+}
+
+.mp-ai-edge-glow[hidden] {
+  display: none;
+}
+
+.mp-ai-edge-glow::before,
+.mp-ai-edge-glow::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: conic-gradient(from var(--mp-ai-angle) at 50% 50%, var(--mp-ai-stops));
+  animation: mp-ai-spin var(--mp-ai-duration) linear infinite;
+}
+
+/* Crisp 3px line along the edges */
+.mp-ai-edge-glow::before {
+  padding: 3px;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+}
+
+/* Soft glow fading inwards */
+.mp-ai-edge-glow::after {
+  opacity: var(--mp-ai-edge-glow-opacity);
+  -webkit-mask-image:
+    linear-gradient(to right, #000, transparent var(--mp-ai-edge-width),
+      transparent calc(100% - var(--mp-ai-edge-width)), #000),
+    linear-gradient(to bottom, #000, transparent var(--mp-ai-edge-width),
+      transparent calc(100% - var(--mp-ai-edge-width)), #000);
+  mask-image:
+    linear-gradient(to right, #000, transparent var(--mp-ai-edge-width),
+      transparent calc(100% - var(--mp-ai-edge-width)), #000),
+    linear-gradient(to bottom, #000, transparent var(--mp-ai-edge-width),
+      transparent calc(100% - var(--mp-ai-edge-width)), #000);
+}
+
+/* ── Utilities ──────────────────────────────────────────── */
+
+.mp-ai-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* ── Reduced motion: static gradient, no pulse ──────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-ai-halo::before,
+  .mp-ai-halo::after,
+  .mp-ai-button::before,
+  .mp-ai-button::after,
+  .mp-ai-panel::before,
+  .mp-ai-panel::after,
+  .mp-ai-thinking::before,
+  .mp-ai-thinking::after,
+  .mp-ai-edge-glow,
+  .mp-ai-edge-glow::before,
+  .mp-ai-edge-glow::after,
+  .mp-ai-caret {
+    animation: none !important;
+  }
+
+  .mp-ai-button::after {
+    transition: none;
+  }
+}
+
+/* ── Forced colours: rings and glows vanish, keep an outline ── */
+
+@media (forced-colors: active) {
+  .mp-ai-halo,
+  .mp-ai-button,
+  .mp-ai-badge,
+  .mp-ai-panel {
+    border: 1px solid CanvasText;
+  }
+
+  .mp-ai-edge-glow {
+    display: none;
+  }
+}