:root {
    --bg: #cccccc;
    --fg: #000000;
    --accent: #3b82f6;
}
body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    user-select: none;
}
canvas { cursor: crosshair; }
.thin-border { border: 0px solid var(--fg); }
.sidebar-item:hover .delete-btn { opacity: 1; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.5); }

/* Editor flex */

#options-panel { display: flex !important;

width: 60.5%!important;
}

#node-editor { display: flex !important;

width: 25%!important;
}

/* Inputs y textareas mantienen selección de texto */
input, textarea { user-select: text; }

/* Animación sutil del indicador de guardado */
#save-indicator {
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

/* Toolbar IA flotante */
#agent-adv-toolbar {
    transition: opacity 0.15s;
}

/* Mejora visual de los botones de carga */
button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* CORRECCIÓN CRÍTICA DE ALTURA Y DESBORDAMIENTO DEL PANEL DE ASISTENCIA */
#assist-panel {
    display: flex !important;
    top: 0px !important;
    height: 65vh !important;
    right: 0px !important;
    position: fixed !important;
    background: white !important;
    flex-direction: column !important;
 
}

/* MODIFICACIÓN DE CONTENEDORES MULTIMEDIA CORE DEL EDITOR */
#node-media-container img {
    object-fit: contain !important;
    background-color: #000000;
    width: 100%;
    height: 100%;
  
}

#image-fullscreen-modal {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

#image-fullscreen-target {
    object-fit: contain !important;
    background-color: #000000;
}

#comfy-prompt-model {
    width: 100%;
}

#panel-agent-writer {
    width: 100%;
}
#panel-agent-thinker {
    width: 100%;
}