body {
    padding-top: 56px; /* Adjust based on navbar height if fixed */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1; /* Push footer down */
}

/* Style the color picker */
.form-control-color {
  min-height: 38px; /* Ensure it has some height */
  padding: 0.1rem 0.3rem; /* Adjust padding */
}

/* Style the code output area */
.output-code-wrapper {
    position: relative;
    background-color: #f8f9fa; /* Light background for code */
    border: 1px solid #dee2e6;
    border-radius: 0.375rem; /* Bootstrap's default border radius */
    padding: 1rem;
    padding-top: 3rem; /* Make space for the button */
}

.output-code-wrapper pre {
    margin-bottom: 0; /* Remove default margin */
    white-space: pre-wrap; /* Allow wrapping */
    word-break: break-all; /* Break long lines */
    max-height: 300px; /* Limit height and make scrollable if needed */
    overflow-y: auto;
}

.output-code-wrapper code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em; /* Slightly smaller font size */
}

/* Style and position the copy button */
.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    z-index: 10; /* Ensure button is clickable */
}
.copy-button .bi { /* Align icon better in button */
     vertical-align: text-bottom;
}


.output-code-wrapper:hover .copy-button {
    opacity: 1;
}

.copy-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.5); /* Example focus ring */
}

/* Footer styling */
footer {
    border-top: 1px solid #dee2e6;
}

/* Ensure preview pane scrolls if content overflows */
.preview-pane {
    max-height: calc(100vh - 150px); /* Adjust as needed */
    overflow-y: auto;
}