/* Style the modal container itself */
.modal-dialog {
    width: auto !important;      /* Let modal take natural width */
    max-width: none !important;  /* Disable Bootstrap's default max-width */
    height: auto;                /* Natural height */
    max-height: none;            /* No restriction on max height */
    display: flex;               /* Use flex for centering */
    justify-content: center;     /* Center modal horizontally */
}

/* Style the modal content box */
.modal-content {
    resize: both;                /* Allow user to resize horizontally & vertically */
    overflow: auto;              /* Scrollbars if content exceeds size */
    width: 60%;                  /* Initial width (default on load) */
    height: auto;                /* Initial height adjusts to content */
    min-width: 400px;            /* Prevent shrinking too small */
    min-height: 200px;           /* Minimum visible height */
    max-width: 100%;             /* Allow expansion up to viewport width */
    max-height: 100%;            /* Allow expansion up to viewport height */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Add shadow for depth */
}

/* Optional: style modal header */
.modal-header {
    cursor: move; /* Change cursor to indicate draggable look */
    /* Note: actual drag functionality needs JS */
}