/* AISEHL_ARTIFACT_PRO_V1
 * Panel de artefactos: herramientas, versiones, codigo con numeros de linea,
 * pantalla completa y correcciones de convivencia con la conversacion.
 */

/* --- la conversacion y el panel no se pisan --- */
.main{overflow:hidden}
.composer{max-width:100%;box-sizing:border-box}
@media (min-width:901px){
  .dock .composer{width:min(100%, var(--v11-composer, 980px)) !important;max-width:100% !important}
}
.preview{z-index:3;isolation:isolate}
#app.pv-open .preview{box-shadow:-18px 0 40px rgba(0,0,0,.18)}

/* --- cabecera --- */
.pv-head{gap:8px;flex-wrap:nowrap}
.pv-meta{flex:1 1 auto;min-width:0;max-width:40%}
.pv-tabs{flex:none}
.pv-tools{flex:none;align-items:center}
.pv-tools .iconbtn{width:34px;height:34px}
.pv-tools .iconbtn.on{color:var(--gold-light);background:rgba(var(--ai-rgb-gold), .14)}
.pv-sep{width:1px;height:20px;background:var(--border-subtle);margin:0 4px;flex:none}

.pv-versions{display:flex;align-items:center;gap:2px;margin-right:4px;padding:2px;border:1px solid var(--border-subtle);border-radius:var(--r-pill);background:rgba(var(--ai-rgb-black), .18)}
.pv-versions button{width:26px;height:26px;display:grid;place-items:center;border:none;border-radius:99px;background:transparent;color:var(--text-3);cursor:pointer;transition:background .15s,color .15s}
.pv-versions button:hover:not(:disabled){color:var(--gold-light);background:rgba(var(--ai-rgb-white), .06)}
.pv-versions button:disabled{opacity:.35;cursor:default}
.pv-versions span{font-family:var(--font-mono);font-size:.68rem;color:var(--text-2);min-width:40px;text-align:center;user-select:none}

/* --- vista previa --- */
.pv-body{background:var(--glass)}
.pv-frame{animation:pvFade .22s ease-out}
@keyframes pvFade{from{opacity:0}to{opacity:1}}

/* --- codigo con colores y numeros de linea --- */
.pv-code-pro{height:100%;overflow:auto;background:#0d1117}
.pv-code-pro pre.hljs{margin:0;padding:14px 0 28px;background:transparent;min-width:max-content}
.pv-code-pro code{display:block;font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);font-size:.8rem;line-height:1.65;color:#e6edf3;white-space:pre}
.pv-code-pro .pvl{display:flex}
.pv-code-pro .pvl:hover{background:rgba(255,255,255,.035)}
.pv-code-pro .pvn{position:sticky;left:0;flex:none;width:52px;padding-right:14px;text-align:right;color:#6e7681;background:#0d1117;user-select:none;border-right:1px solid rgba(255,255,255,.06)}
.pv-code-pro .pvc{padding:0 22px 0 16px;white-space:pre}

/* tema de colores (inspirado en GitHub oscuro) */
.pv-code-pro .hljs-comment,.pv-code-pro .hljs-quote{color:#8b949e;font-style:italic}
.pv-code-pro .hljs-keyword,.pv-code-pro .hljs-selector-tag,.pv-code-pro .hljs-literal,.pv-code-pro .hljs-doctag,.pv-code-pro .hljs-meta .hljs-keyword{color:#ff7b72}
.pv-code-pro .hljs-string,.pv-code-pro .hljs-regexp,.pv-code-pro .hljs-meta .hljs-string{color:#a5d6ff}
.pv-code-pro .hljs-number,.pv-code-pro .hljs-symbol,.pv-code-pro .hljs-bullet,.pv-code-pro .hljs-variable.constant_{color:#79c0ff}
.pv-code-pro .hljs-title,.pv-code-pro .hljs-title.function_,.pv-code-pro .hljs-section{color:#d2a8ff}
.pv-code-pro .hljs-title.class_,.pv-code-pro .hljs-type,.pv-code-pro .hljs-built_in{color:#ffa657}
.pv-code-pro .hljs-attr,.pv-code-pro .hljs-attribute,.pv-code-pro .hljs-property,.pv-code-pro .hljs-selector-attr,.pv-code-pro .hljs-selector-class,.pv-code-pro .hljs-selector-id{color:#79c0ff}
.pv-code-pro .hljs-name,.pv-code-pro .hljs-tag{color:#7ee787}
.pv-code-pro .hljs-tag .hljs-attr{color:#79c0ff}
.pv-code-pro .hljs-tag .hljs-string{color:#a5d6ff}
.pv-code-pro .hljs-meta{color:#8b949e}
.pv-code-pro .hljs-variable,.pv-code-pro .hljs-template-variable,.pv-code-pro .hljs-params{color:#ffa657}
.pv-code-pro .hljs-addition{color:#aff5b4;background:rgba(46,160,67,.15)}
.pv-code-pro .hljs-deletion{color:#ffdcd7;background:rgba(248,81,73,.15)}
.pv-code-pro .hljs-emphasis{font-style:italic}
.pv-code-pro .hljs-strong{font-weight:700}

/* --- pantalla completa --- */
#app.pv-open.pv-full{grid-template-columns:0px 0px 1fr !important}
#app.pv-full .main,#app.pv-full .sidebar{visibility:hidden}
#app.pv-full .pv-resize{display:none}
#app.pv-full .preview{box-shadow:none}

/* --- tarjetas de artefacto en el chat --- */
.art-card .act{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- tema claro --- */
html[data-theme="light"] #app.pv-open .preview{box-shadow:-18px 0 40px rgba(0,0,0,.08)}

/* --- movil: el panel ya es una hoja superpuesta --- */
@media (max-width:1100px){
  .pv-meta{max-width:none}
  .pv-versions span{min-width:34px}
  #pvFull{display:none}
}
@media (max-width:560px){
  .pv-head{padding:0 8px;gap:4px}
  .pv-tools .iconbtn{width:30px;height:30px}
  .pv-sep{display:none}
  .pv-code-pro .pvn{width:38px;padding-right:8px}
  .pv-code-pro .pvc{padding:0 14px 0 10px}
}

/* --- artefacto vivo dentro de la respuesta (en lugar del bloque de codigo) --- */
.code.code-as-artifact{display:none}
.art-cards.art-inline{margin:10px 0 12px}

/* --- pantallas medianas: el panel se abre bajo la barra superior,
       asi sus botones (buscar, vision, temporal, idioma, tema) siguen a mano.
       En movil el artefacto es una hoja a pantalla completa con su boton cerrar. --- */
@media (min-width:901px) and (max-width:1100px){
  #app.pv-open .preview{position:fixed !important;top:62px !important;bottom:0 !important;right:0 !important;height:auto !important;max-height:none !important;z-index:24}
  #app.pv-full .preview{top:0 !important;left:0 !important;width:100% !important;z-index:60}
}

/* --- vision --- */
.vision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:6px}
.vision-act{display:flex;align-items:center;gap:14px;padding:18px 16px;text-align:left;border:1px solid var(--border-soft);border-radius:var(--r-md, 14px);background:var(--glass-soft, rgba(255,255,255,.03));color:var(--text-1);cursor:pointer;transition:border-color .16s,transform .14s,background .16s}
.vision-act:hover:not(:disabled){border-color:rgba(var(--ai-rgb-gold), .4);background:rgba(var(--ai-rgb-gold), .06);transform:translateY(-1px)}
.vision-act:disabled{opacity:.45;cursor:not-allowed}
.vision-glyph{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(var(--ai-rgb-gold), .13);color:var(--gold-light);font-size:1.25rem}
.vision-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.vision-txt strong{font-size:.92rem;font-weight:600}
.vision-txt span{font-size:.76rem;color:var(--text-3)}
.vision-live{margin-top:16px;border:1px solid var(--border-soft);border-radius:var(--r-md, 14px);overflow:hidden;background:#000}
.vision-live video{display:block;width:100%;max-height:52vh;object-fit:contain;background:#000}
.vision-live-bar{display:flex;gap:10px;justify-content:flex-end;padding:10px 12px;background:var(--glass-strong, rgba(0,0,0,.6))}
.vision-cancel{border:1px solid var(--border-soft);background:transparent;color:var(--text-2);border-radius:10px;padding:8px 14px;cursor:pointer}
#visionBtn[data-connection="connected"]{color:var(--text-2)}

/* --- busqueda: resultados de conversaciones --- */
.cmdk-item .cmdk-main{display:flex;flex-direction:column;min-width:0;flex:1}
.cmdk-item .cmdk-main > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-hint{display:block;margin-top:2px;font-size:.72rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-conv .cmdk-glyph{color:var(--gold-light)}

/* --- su respuesta mientras la escribe --- */
.live-body .live-caret{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--gold-light);border-radius:2px;animation:liveCaret 1s steps(2) infinite}
@keyframes liveCaret{50%{opacity:0}}