.vg-ai-photo { position: relative; isolation: isolate; }
.vg-ai-photo .vg-ai-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 650ms cubic-bezier(.16,1,.3,1), opacity 150ms ease-out; pointer-events: none; }
.vg-ai-photo.is-ai.is-ai-ready .vg-ai-after { opacity: 1; clip-path: inset(0); }
.vg-ai-photo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: #e9f6ff; opacity: 0; pointer-events: none; }
.vg-ai-photo.is-ai.is-ai-ready::after { animation: vg-office-scan 650ms cubic-bezier(.16,1,.3,1) both; }
.vg-ai-controls { position: absolute; z-index: 2; bottom: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.vg-ai-label { display: grid; padding: 9px 12px; background: #172334; color: #fff; border-radius: 6px; font-size: 11px; line-height: 1.4; }
.vg-ai-label > span { grid-area: 1 / 1; transition: opacity 150ms ease; }
.vg-ai-after-label { opacity: 0; }
.vg-ai-photo.is-ai.is-ai-ready .vg-ai-before-label { opacity: 0; }
.vg-ai-photo.is-ai.is-ai-ready .vg-ai-after-label { opacity: 1; }
.vg-ai-toggle { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 12px; border: 1px solid #172334; border-radius: 6px; background: #faf9f6; color: #172334; font: inherit; font-size: 11px; line-height: 1.4; cursor: pointer; }
.vg-ai-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.vg-ai-toggle:hover { background: #e4ecf5; }
.vg-ai-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 2px 6px #172334; }
.vg-ai-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes vg-office-scan { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (max-width: 640px) { .vg-ai-controls { bottom: 10px; left: 10px; right: 10px; } .vg-ai-label { font-size: 10px; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .vg-ai-photo *, .vg-ai-photo::after { transition: none !important; animation: none !important; } }