/* Lightbox de medios IA — la única parte de chat/ai-media.css que NO puede acotarse a su componente, y conviene entender por qué antes de "terminar la migración" moviéndola. El visor #ai-viewer NO existe en el marcado de ningún componente Razor: lo crea wwwroot/js/chat/ai-media.js con document.body.appendChild, colgándolo directamente del . Bajo CSS isolation el compilador pondría el b-{hash} al sujeto, o sea #ai-viewer[b-hash], que jamás casaría con un nodo creado por JS fuera del árbol del componente — y ::deep tampoco sirve: ::deep solo BAJA desde un ancla del propio componente, y aquí el nodo vive como hermano del layout, por encima de cualquier ancla posible. body.ai-lock es el mismo caso agravado: el sujeto es el — está por ENCIMA de todo componente. La clase la pone/quita ai-media.js al abrir y cerrar el visor, así que fuera de ese momento no matchea nada. @keyframes ai-fade-in vive aquí porque lo cita #ai-viewer; ai-spin se duplica aquí (también existe en ModelMarkdown.razor.css) porque lo citan los spinners de ambos lados — duplicar bloques idénticos por hoja es lo correcto bajo isolation. Se queda global a propósito, con el bloque reducido a lo imprescindible. ───────────────────────────────────────────────────────────────────────────── */ /* ============================================ LIGHTBOX VIEWER ============================================ */ #ai-viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 10000; animation: ai-fade-in 0.2s ease; } @keyframes ai-fade-in { from { opacity: 0; } to { opacity: 1; } } #ai-viewer.open { display: flex; } #ai-viewer img, #ai-viewer video { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; } #ai-viewer.loading img, #ai-viewer.loading video { opacity: 0; transform: scale(0.95); } #ai-viewer .vspinner { position: absolute; width: 48px; height: 48px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: ai-spin 0.8s linear infinite; display: none; } @keyframes ai-spin { to { transform: rotate(360deg); } } #ai-viewer.loading .vspinner { display: block; } #ai-viewer .vbar { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; } #ai-viewer .vbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: none; border-radius: 12px; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; transition: all 0.2s ease; } #ai-viewer .vbtn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); } #ai-viewer .vbtn svg { width: 22px; height: 22px; } body.ai-lock { overflow: hidden; } @media (max-width: 640px) { #ai-viewer .vbtn { width: 40px; height: 40px; } }