refine(visual-edits): remove overlay cinza, X flutuante e fechar na área do preview

- Remove fundo bg-black/20 quando dropdown aberto: sem mais escurecimento.
- Overlay transparente (pointer-events-auto) sobre o canvas do preview para
  fechar o menu ao clicar na área cinza ao redor do card.
- Botão X reposicionado para fora do card (-top-3 -right-3), visualmente
  "saindo" do dropdown como badge flutuante com borda e sombra próprios.
- Header limpo sem botão interno; container com overflow-visible para o X
  não ser cortado; conteúdo tem overflow-hidden separado para preservar
  o clip interno.

Author: claude

src/App.tsx

@@ -366,6 +366,7 @@ export default function App() {
                 onViewportChange={setViewport}
                 onLocate={onVisualEditsLocate}
                 menuOpen={veMenu !== null}
+                onMenuClose={onVeMenuClose}
               />
             }
           />

src/components/HtmlPreview.tsx

@@ -22,10 +22,9 @@ interface HtmlPreviewProps {
   cursorOffset: number;
   viewport: ViewportState;
   onViewportChange: (v: ViewportState) => void;
-  // Recebe o loc clicado e as coordenadas já convertidas para a janela principal
-  // (levando em conta a posição e a escala do iframe).
   onLocate?: (loc: string, screenX: number, screenY: number) => void;
   menuOpen?: boolean;
+  onMenuClose?: () => void;
 }
 
 const MIN_W = 200;
@@ -53,6 +52,7 @@ export function HtmlPreview({
   onViewportChange,
   onLocate,
   menuOpen,
+  onMenuClose,
 }: HtmlPreviewProps) {
   const [showWarnings, setShowWarnings] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -242,8 +242,11 @@ export function HtmlPreview({
         data-ve-anchor="preview-canvas"
         className={`relative flex flex-1 items-center justify-center overflow-hidden bg-[hsl(var(--preview-bg))]${visualEditsEnabled ? ' ve-border-pulse' : ''}`}
       >
-        {menuOpen && (
-          <div className="absolute inset-0 bg-black/20 z-[59] pointer-events-none" />
+        {menuOpen && onMenuClose && (
+          <div
+            className="absolute inset-0 z-[59]"
+            onClick={onMenuClose}
+          />
         )}
         {error ? (
           <div className="flex h-full w-full flex-col items-center justify-center gap-3 p-8 text-center">

src/components/VisualEditsMenu.tsx

@@ -160,24 +160,26 @@ export function VisualEditsMenu({ menu, onSelect, onClose }: Props) {
     <div
       ref={ref}
       style={menuStyle}
-      className="rounded-xl border border-border bg-white dark:bg-zinc-900 shadow-[var(--shadow-popover)] overflow-hidden ring-1 ring-black/5 dark:ring-white/10"
+      className="relative rounded-xl border border-border bg-white dark:bg-zinc-900 shadow-[var(--shadow-popover)] overflow-visible ring-1 ring-black/5 dark:ring-white/10"
       role="menu"
     >
-      <div className="relative flex items-center justify-center gap-2 px-3 py-2 border-b border-border bg-gradient-to-b from-muted/40 to-transparent">
+      {/* X flutuando no canto externo do card */}
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Fechar"
+        className="absolute -top-3 -right-3 z-10 inline-flex h-6 w-6 items-center justify-center rounded-full bg-white dark:bg-zinc-800 border border-border shadow-sm text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+
+      <div className="flex items-center justify-center gap-2 px-3 py-2 border-b border-border bg-gradient-to-b from-muted/40 to-transparent rounded-t-xl overflow-hidden">
         <MousePointerClick className="h-3.5 w-3.5 text-muted-foreground/70" />
         <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
           Elemento selecionado
         </span>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Fechar"
-          className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent transition-colors"
-        >
-          <X className="h-3 w-3" />
-        </button>
       </div>
-      <div className="py-1">
+      <div className="py-1 rounded-b-xl overflow-hidden">
         {menu.items.length > 0 && (
           <div className="max-h-72 overflow-y-auto">
             {menu.items.map((c, i) => {