/* --- Input Controls (Index Page Specific) --- */
.input-group {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

textarea#prompt-input {
  width: 100%;
  min-height: 100px;
  max-height: 200px; /* Limit expansion to twice the initial size */
  padding: var(--spacing-unit);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  overflow-y: auto; /* Enable scrolling when content exceeds max-height */
  word-wrap: break-word;
  white-space: pre-wrap;
  resize: vertical;
}

textarea#prompt-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 105, 199, 0.2);
}

.options-row {
  display: flex;
  align-items: center;
  gap: 15px; /* Spacing between items in the row */
  margin-bottom: 15px;
}

.options-row button,
.options-row .color-picker-wrapper {
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex; /* Align icon/text */
  align-items: center;
  gap: var(--spacing-unit);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.options-row button:hover {
  background-color: var(--color-bg-section);
  border-color: var(--color-text-secondary);
  color: var(--color-text-main);
}

/* Image Previews */
#image-previews {
  display: inline-flex; /* Changed from flex to inline-flex for tight packing */
  gap: calc(var(--spacing-unit) * 0.25); /* Minimal gap */
  flex-wrap: wrap;
  margin: 0; /* Remove all margins */
  padding: calc(var(--spacing-unit) * 0.25); /* Minimal padding */
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-section);
  /* Remove min-height and max-height for tight packing */
  width: fit-content; /* Only take space needed */
}

#image-previews img {
  max-width: 25px; /* Reduced by 50% from 50px */
  max-height: 25px; /* Reduced by 50% from 50px */
  object-fit: cover;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  cursor: pointer; /* Indicate clickable to remove */
  transition: opacity 0.2s ease;
}

#image-previews img:hover {
  opacity: 0.7;
  border-color: var(--color-error);
}

/* Image preview improvements / specific container for preview items */
.image-preview-container {
    position: relative;
    margin: 2px; /* Reduced from 4px */
    border-radius: 4px;
    overflow: hidden;
}

.image-preview { /* Used in imageInputUI.js for uploaded reference images */
    width: 25px; /* Reduced by 50% from 50px */
    height: 25px; /* Reduced by 50% from 50px */
    object-fit: cover;
    cursor: pointer; /* Can be made more specific if needed */
}

.remove-image {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 10px; /* Slightly larger for better visibility */
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-image:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Add cross content using CSS */
.remove-image::before {
    content: "×"; /* Unicode multiplication sign as cross */
    font-weight: bold;
    font-size: 10px;
}

/* Color Picker */
.color-picker-wrapper {
  position: relative;
  padding: 0; /* Remove padding from wrapper */
  border: none; /* Remove border from wrapper */
  background: none;
}

.color-picker-wrapper label { /* This label is inside .options-row */
  margin: 0;
  margin-right: var(--spacing-unit);
  cursor: pointer;
  /* Re-evaluate if this needs to inherit from common label or be distinct */
  display: inline-block; /* Override block from common label if needed */
  font-weight: normal; /* Override common label if needed */
  color: var(--color-text-secondary); /* Match text color of sibling buttons */
}

input[type="color"] {
  width: 30px;
  height: 30px;
  border: none;
  padding: 0;
  border-radius: 50%; /* Make it round */
  cursor: pointer;
  vertical-align: middle; /* Align with label text */
  border: 1px solid var(--color-border);
  background-color: var(--color-bg); /* Ensure background shows if color is transparent */
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

/* Styles for the prompt input area and the new generate button position */
.prompt-input-wrapper {
  /* Styles for the .input-group that contains the prompt textarea */
  padding: calc(var(--spacing-unit) * 0.25) var(--spacing-unit) 0; /* Further reduced top/bottom padding */
  border-bottom: 1px solid var(--color-border-light);
}

.prompt-with-button {
  position: relative; /* Container for textarea and button */
  display: flex;
  align-items: flex-start; /* Align items to the start of the cross axis (top for textarea) */
}

textarea#prompt-input { /* Existing styles will largely apply */
  width: 100%; /* Take full width of its flex container */
  flex-grow: 1; /* Allow textarea to grow */
  /* min-height: 100px; (already exists) */
  /* padding: var(--spacing-unit); (already exists) */
  /* border: 1px solid var(--color-border); (already exists) */
  /* border-radius: var(--border-radius); (already exists) */
  margin-right: 0; /* Remove any default right margin if it was standalone */
  resize: vertical; /* Allow vertical resize, but not horizontal */
  border: none; /* Remove border as .prompt-input-wrapper has one */
  padding: calc(var(--spacing-unit) * 0.25) 0; /* Reduced padding */
  min-height: 40px; /* Further Reduced from 60px */
  background-color: transparent;
}

textarea#prompt-input:focus {
  box-shadow: none; /* Remove focus shadow as wrapper handles border */
}

/* New styles for #generate-button as an icon button next to prompt */
#generate-button {
  /* Override previous full-width styles */
  width: auto; /* Auto width based on content/padding */
  margin-top: 0; /* Remove top margin if it had one */
  margin-left: var(--spacing-unit); /* Space between textarea and button */
  padding: calc(var(--spacing-unit) * 1.2); /* Adjust padding for icon button */
  font-size: 1.5rem; /* Larger font size for the icon */
  line-height: 1; /* Ensure icon is centered vertically */
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
  height: calc(var(--spacing-unit) * 1.2 * 2 + 1.5rem); /* Match height roughly to input field if desired, adjust as needed */
  align-self: flex-end; /* Align button to the bottom of the flex container if textarea grows */
}

#generate-button:hover {
  background-color: var(--color-primary-hover);
}

#generate-button:disabled {
  background-color: var(--color-primary-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

/* --- Output Area --- */
#output-area {
    flex: 1; 
    display: flex; /* Changed from grid to flex for resizable columns */
    gap: 0; /* Remove gap as resizer will provide spacing */
    padding: 0; /* Remove padding for tighter layout */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 300px; 
    overflow: hidden; /* Prevent parent from scrolling due to this element */
    height: 100%; /* Take full height of parent */
    position: relative; /* For absolute positioning of resizer if needed */
    transition: all 0.3s ease-in-out;
}

/* Chat-Only Mode Styles */
#output-area.chat-only-mode {
    justify-content: center;
    align-items: center;
    padding: calc(var(--spacing-unit) * 2);
}

#output-area.chat-only-mode #output-center-column {
    display: none;
}

#output-area.chat-only-mode #chat-panel-column {
    width: 50%;
    max-width: 500px;
    min-width: 350px;
    margin: 0 auto;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: none;
    background-color: transparent;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#output-area.chat-only-mode .column-resizer { /* removed */ }

/* Hide conversation elements in chat-only mode */
#output-area.chat-only-mode .chat-panel-header {
    display: none;
}

#output-area.chat-only-mode .chat-messages-container {
    display: none;
}

#output-area.chat-only-mode .chat-image-previews-section {
    display: none;
}

/* Only show the chat input section in chat-only mode */
#output-area.chat-only-mode .chat-input-section {
    border-top: none;
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    background-color: var(--chat-input-bg, var(--color-primary));
    color: var(--on-primary, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 0;
}

/* Fix the chat status bar in chat-only mode */
#output-area.chat-only-mode .chat-input-section .chat-status-bar {
    display: none;
}

/* Improve chat input styling for standalone mode */
#output-area.chat-only-mode .chat-input-section .prompt-input-div {
    min-height: 80px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg, #fff);
}

#output-area.chat-only-mode .chat-input-section .controls-row {
    margin-top: calc(var(--spacing-unit) * 1);
}

/* Fix the chat interface content padding */
#output-area.chat-only-mode .chat-input-section .chat-interface-content {
    padding: var(--spacing-unit);
}

/* Ensure placeholder text is visible */
#output-area.chat-only-mode .chat-input-section .prompt-input-div:empty:before {
    color: var(--color-text-secondary, #666);
    opacity: 0.7;
}

/* Fix wrapper padding */
#output-area.chat-only-mode .chat-input-section .prompt-input-wrapper {
    padding: 0;
    border-bottom: none;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.output-column {
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent individual columns from overflowing #output-area */
    min-width: 200px; /* Minimum width to prevent columns from becoming too small */
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#output-center-column {
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* Changed from center to flex-start */
    align-items: center; 
    min-width: 300px; /* Minimum width for image column */
    flex: 1; /* Default flex grow */
    overflow-y: auto; /* Allow scrolling if content overflows */
    width: 70%; /* Initial width - will be controlled by JavaScript */
}

#chat-panel-column {
    width: 30%; /* Initial width - will be controlled by JavaScript */
    min-width: 250px; /* Minimum width for chat column */
    flex: 0 0 auto; /* Don't grow or shrink automatically */
    padding: 0; /* Remove all padding for tighter layout */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Column Resizer Styles */
.column-resizer { /* removed duplicate */ }
.resizer-handle { /* removed */ }
.column-resizer:hover { /* removed */ }
.column-resizer.dragging { /* removed */ }

/* Disable text selection during resize */
.resizing * {
    user-select: none;
    pointer-events: none;
}

/* Remove old right column styles - no longer needed */
#output-right-column {
    display: none; /* Hide the old right column completely */
}

/* New styles for image details section */
.image-details-section {
    width: 100%;
    margin-top: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 1.5);
    background-color: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-details-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
    text-align: center;
}

.image-details-section h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1em;
    color: #555;
}

#output-image-container {
    flex-grow: 0; /* Changed from 1 to 0 to not take all available space */
    flex-shrink: 0; /* Don't shrink the image container */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    min-height: 300px; /* Set a minimum height instead of 100% */
    max-height: 60vh; /* Limit maximum height to 60% of viewport */
    overflow: hidden; 
    position: relative; 
    margin-bottom: calc(var(--spacing-unit) * 1);
}

#output-image-container img#generated-image {
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

#prompt-display-area-wrapper {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    width: 100%;
    /* height: 150px; Let flexbox determine height, or use max-height */
    max-height: 200px; /* Example max height */
    overflow-y: auto; 
    word-wrap: break-word;
}

#prompt-display-area {
    font-size: 0.9em;
    color: #444;
    white-space: pre-wrap; /* Preserve whitespace and newlines from prompt */
    margin: 0;
}

#copy-prompt-button {
    padding: 6px 12px;
    font-size: 0.85em;
    align-self: flex-start; /* Align to the left of the right column */
}

/* #loading-spinner is already styled, just ensure it centers in the new column structure if visible */
#output-center-column .loading-spinner {
    /* Assuming existing spinner styles are sufficient, 
       flex properties on #output-center-column should center it. */
}

/* Renamed .output-actions to #image-actions-toolbar for specificity */
#image-actions-toolbar {
    display: flex;
    flex-direction: row; /* Icons side-by-side */
    justify-content: center;
    align-items: center;
    margin-top: 8px; /* Reduced space above the button toolbar */
    width: auto; /* Don't take full width, just wrap content */
    gap: 15px; /* Space between buttons */
}

#image-actions-toolbar .icon-button {
    font-size: 1.3rem; /* Slightly smaller icons in toolbar */
    padding: 8px; /* Adjust padding for smaller icons */
    margin-top: 0; /* Remove individual margin-top from heart-button if set */
}

.heart-button {
    background: none;
    border: none;
    font-size: 1.3rem; /* Match toolbar icon size */
    cursor: pointer;
    color: var(--color-text-secondary); /* Default color */
    opacity: 0.7; /* Default opacity */
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    padding: 8px; /* Match toolbar padding */
    margin-top: 0; /* Remove conflicting margin */
}

.heart-button:hover {
    opacity: 1;
    transform: scale(1.1);
    color: var(--color-primary); /* Hover color */
}

.heart-button.active {
    opacity: 1;
    color: var(--color-error); /* Active (favorited) color - typically red */
    transform: scale(1.1); /* Keep scale for active state */
}

/* Image Tags Display */
.image-tags-display {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px; /* Reduced from 6px */
    padding: 3px 6px; /* Reduced from 4px 8px */
    background-color: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.75rem; /* Reduced from 0.8rem */
    gap: 4px; /* Reduced from 6px */
    flex-wrap: wrap;
    min-height: 28px; /* Reduced from 32px */
}

.tags-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-size: 0.7rem; /* Make label smaller */
}

.image-tags-container {
    display: flex;
    gap: 3px; /* Reduced from 4px */
    flex-wrap: wrap;
    align-items: center;
}

.image-tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-primary);
    color: white;
    padding: 1px 5px; /* Reduced from 2px 6px */
    border-radius: 10px; /* Reduced from 12px */
    font-size: 0.7rem; /* Reduced from 0.75rem */
    font-weight: 500;
    white-space: nowrap;
}

.image-tag.auto-tag {
    background-color: var(--color-text-secondary);
    opacity: 0.8;
}

.image-tag.user-tag {
    background-color: var(--color-primary);
}

.add-tag-button {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 20px; /* Reduced from 24px */
    height: 20px; /* Reduced from 24px */
    font-size: 0.8rem; /* Reduced from 1rem */
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.add-tag-button:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.no-tags {
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 0.7rem; /* Reduced from 0.8rem */
}

/* Text Display Sections */
.text-display-section {
    margin-bottom: 20px;
}

.text-display-wrapper {
    position: relative;
    background-color: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 8px 32px 8px 8px; /* Right padding for copy button */
}

.text-display-wrapper p {
    margin: 0;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.text-display-wrapper textarea {
    width: 100%;
    border: none;
    background: transparent;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text);
    outline: none;
    min-height: 60px;
}

.text-display-wrapper textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: all 0.2s ease;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-button:hover {
    opacity: 1;
    background-color: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.copy-button:active {
    transform: scale(0.95);
}

.save-description-button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.save-description-button:hover {
    background-color: var(--color-text-secondary);
    transform: translateY(-1px);
}

.save-description-button:disabled {
    background-color: var(--color-border);
    cursor: not-allowed;
    transform: none;
}

/* ----- Design Guidance System ----- */
.design-guidance-system {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.design-guidance-system h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

.guidance-section {
    margin-bottom: 15px;
}

.guidance-section label { /* Label specific to guidance section */
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.guidance-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-btn { /* Option button style for guidance system */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.option-btn:hover {
    background-color: rgba(0, 105, 199, 0.05);
    border-color: var(--color-primary);
}

.option-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.option-btn input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--color-primary);
}

.option-btn input[type="radio"]:checked + span::after {
    content: " ✓";
}

.option-btn.small {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.fine-tuning-details { /* Details/Summary for fine-tuning in guidance system */
    margin-top: 15px;
    margin-bottom: 15px;
}

.fine-tuning-details summary {
    cursor: pointer;
    padding: 8px 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.2s ease;
    color: var(--color-text-secondary);
}

.fine-tuning-details summary:hover {
    background-color: rgba(0, 105, 199, 0.05);
    color: var(--color-primary);
}

.fine-tuning-details[open] summary {
    margin-bottom: 15px;
    border-bottom-color: var(--color-primary);
}

.fine-tuning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.fine-tuning-section {
    padding: 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.fine-tuning-section label { /* Label specific to fine-tuning section */
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.fine-tuning-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-text.small { /* Specific help text variant in fine-tuning */
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 4px;
    margin-bottom: 0;
    font-style: italic;
    max-width: 90%;
}

.photo-style-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.photo-style-row label { /* Label specific to photo style row */
    margin-bottom: 0;
    margin-right: 8px;
    min-width: 80px;
    font-size: 0.85rem;
}

.photo-style-row select {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-bg);
    font-size: 0.85rem;
}

/* Responsive adjustments for design guidance system */
@media (max-width: 600px) {
    .fine-tuning-grid {
        grid-template-columns: 1fr;
    }
    
    .guidance-options {
        flex-direction: column;
        align-items: stretch;
    }
    
    .option-btn {
        justify-content: flex-start;
    }
}


/* Chat Panel Add to Chat Button */
.add-to-chat-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
  opacity: 0.8;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.add-to-chat-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.add-to-chat-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.add-to-chat-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
}

/* Ensure image generation events have relative positioning for button */
.image-generation-event {
  position: relative !important;
}

/* Advanced Settings styles removed */

/* Image Modal (for viewing single generated/gallery images, not a settings/upload modal) */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000; /* Higher z-index for image display */
    justify-content: center;
    align-items: center;
}

/* .image-modal.active is handled by JS by adding .active class to .modal */
/* .modal.active is in settings.css (or could be common.css if truly generic) */

.image-modal-content { /* Specific content styling for this image modal */
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    /* Removing background, border, shadow from here as the .image-modal itself provides the backdrop */
}

.image-modal-img {
    max-width: 100%;
    max-height: 80vh; /* Allow space for details below */
    object-fit: contain;
    border-radius: var(--border-radius); /* Optional: if image itself should have rounded corners */
}

.image-modal-details {
    color: white;
    padding: 12px;
    margin-top: 12px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for text overlay */
    border-radius: var(--border-radius);
    position: relative; /* Needed for absolute positioning of favorite button */
    text-align: left; /* Overriding #output-area text-align center if it cascades */
}

.modal-favorite-button { /* Favorite button specific to this image modal */
    position: absolute;
    top: 12px; 
    right: 12px; 
    background: none;
    border: none;
    font-size: 1.8rem; 
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7); 
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    padding: 5px;
}

.modal-favorite-button:hover {
    opacity: 1;
    transform: scale(1.1);
    color: #fff; 
}

.modal-favorite-button.active {
    opacity: 1;
    color: #ff4040; /* Red for active (favorited) */
    transform: scale(1.1);
}

.image-modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.image-modal-prompt {
    font-style: italic;
    margin-bottom: 8px;
    max-height: 100px; /* Limit prompt display height */
    overflow-y: auto;
}

.image-modal-date {
    font-size: 0.8rem;
    opacity: 0.8;
}

.close-image-modal { /* Close button specific to this image modal */
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    /* Using an icon button for close is often preferred, this is a simple text 'X' style */
}

/* Styles for the upload button and its dropdown */
.upload-button-wrapper {
    position: relative; /* For positioning the dropdown */
    display: inline-flex;
}

#upload-button {
    /* Assuming it already has some styles, ensure it can show icons/text */
    padding: 10px 15px;
    /* Add other existing button styles if needed */
}

.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 100%; /* Position above the button */
    top: auto; /* Ensure bottom positioning takes precedence */
    left: 0;
    background-color: var(--color-bg); /* Use CSS variable */
    border: 1px solid var(--color-border); /* Use CSS variable */
    border-radius: var(--border-radius); /* Use CSS variable */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Adjusted shadow, can be var */
    z-index: 1000; /* Ensure it's above other elements */
    min-width: 160px; /* Or adjust as needed */
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 14px;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
}

/* Chat Interface Area Styling - Now integrated into chat column */

/* Controls Row Styling - Now handled in chatpanel.css for the chat column */

/* Styles for the upload button and its dropdown */
.upload-button-wrapper {
    position: relative; /* For positioning the dropdown */
    display: inline-flex;
}

#upload-button {
    /* Assuming it already has some styles, ensure it can show icons/text */
    padding: 10px 15px;
    /* Add other existing button styles if needed */
}

.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 100%; /* Position above the button */
    top: auto; /* Ensure bottom positioning takes precedence */
    left: 0;
    background-color: var(--color-bg); /* Use CSS variable */
    border: 1px solid var(--color-border); /* Use CSS variable */
    border-radius: var(--border-radius); /* Use CSS variable */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Adjusted shadow, can be var */
    z-index: 1000; /* Ensure it's above other elements */
    min-width: 160px; /* Or adjust as needed */
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 14px;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
}

/* New Layout Styles */
#app-container {
    display: flex;
    flex-direction: row; /* Sidebar and Right Column side-by-side */
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Prevent scrollbars on the body/app-container itself */
}

/* Universal Sidebar Styles */
#universal-sidebar {
    width: 48px; /* Minimized width - just enough for icons */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: row; /* Icons on left, content on right when expanded */
    background-color: var(--color-bg-section);
    border-right: 1px solid var(--color-border);
    transition: width 0.3s ease, transform 0.3s ease;
    z-index: 100; /* Ensure it's above content but below modals if any overlay */
    position: relative;
}

#universal-sidebar.universal-sidebar-expanded {
    width: 320px; /* Expanded width */
}

#universal-sidebar.sidebar-hidden {
    width: 0;
    transform: translateX(-100%);
    border-right: none;
}

/* Sidebar Icons (always visible) */
.sidebar-icons {
    width: 48px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--sidebar-rail-bg, var(--color-primary));
    border-right: 1px solid var(--color-border);
    padding: calc(var(--spacing-unit) * 0.5) 0;
    align-items: center;
    position: relative;
}

/* Top section: Toggle button + module icons with spacing */
.sidebar-icons .top-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
}

/* Settings icon positioned at bottom */
.sidebar-icons .sidebar-icon-button[data-module-id="settings"] {
    position: absolute;
    bottom: calc(var(--spacing-unit) * 0.5);
    left: 50%;
    transform: translateX(-50%);
}

/* Sidebar Toggle Button */
.sidebar-toggle-button {
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    color: var(--color-text-light, #a0aec0);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: calc(var(--spacing-unit) * 0.5);
}

.sidebar-toggle-button:hover {
    background-color: var(--color-bg-hover-dark, #4a5568);
    color: var(--color-text-light-hover, #e2e8f0);
}

.sidebar-toggle-button .toggle-icon {
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-icon-button {
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    color: var(--color-text-light, #a0aec0);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sidebar-icon-button:hover {
    background-color: var(--color-bg-hover-dark, #4a5568);
    color: var(--color-text-light-hover, #e2e8f0);
}

.sidebar-icon-button.active {
    background-color: var(--color-primary);
    color: white;
}

.sidebar-icon-button.active::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background-color: var(--color-primary);
    border-radius: 2px 0 0 2px;
}

/* Expanded Content Area */
.sidebar-expanded-content {
    flex: 1;
    height: 100vh;
    display: none; /* Hidden by default */
    flex-direction: column;
    background-color: var(--color-bg-section);
    overflow: hidden;
}

#universal-sidebar.universal-sidebar-expanded .sidebar-expanded-content,
#universal-sidebar.mobile-sidebar-expanded .sidebar-expanded-content {
    display: flex;
}

.sidebar-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
    min-height: 48px;
}

.sidebar-content-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.sidebar-collapse-button {
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.sidebar-collapse-button:hover {
    background-color: var(--color-bg-hover, #f5f5f5);
    color: var(--color-text);
}

.sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-unit);
}

#right-column {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Header on top of Main Content */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Crucial: Contains header and scrollable main content */
    min-width: 0; /* Allow it to shrink if necessary without breaking flex */
}

.app-header {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); /* Thinner padding */
    background-color: var(--header-bg, var(--color-primary));
    color: var(--on-primary, #ffffff); /* Ensure header text is readable */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    height: var(--header-height-thin, 45px); /* Control header height */
    flex-shrink: 0; /* Prevent header from shrinking */
    width: 100%;
    margin-bottom: 0; /* CRITICAL: Remove margin below header for this layout */
}

/* Mobile Hamburger Menu Button */
.mobile-hamburger-button {
    display: none; /* Hidden by default on desktop */
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
    margin-right: calc(var(--spacing-unit) * 0.5);
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.mobile-hamburger-button:hover {
    background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
}

.mobile-hamburger-button:active {
    transform: scale(0.95);
}

.hamburger-icon {
    display: block;
    width: 24px;
    height: 24px;
}

/* Old toggle button CSS removed - now handled by .sidebar-toggle-button */

.app-header h1 {
    font-size: 1.2rem; /* Smaller font for thinner header */
    margin: 0;
    color: var(--on-primary, #ffffff); /* Ensure title is white */
    flex-grow: 1; /* Allow title to take available space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure header icon buttons are visible on dark background */
.app-header .icon-button {
    color: #ffffff;
}
.app-header .icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

#main-content-area {
    flex-grow: 1; 
    display: flex;
    flex-direction: column; /* Stack top-panel and chat-interface */
    overflow: hidden; /* Prevent #main-content-area itself from scrolling */
    /* height: 100%; Removed, flex-grow will handle height */
}

#top-content-panel {
    display: flex;
    flex: 1;
    overflow: hidden; /* Prevent this container from creating its own scrollbars */
}

#output-area {
    /* Let the column resizer control the width/flex properties */
}

.output-column {
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent individual columns from overflowing #output-area */
}



#output-right-column h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1em;
    color: #555;
}

#prompt-display-area-wrapper {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    width: 100%;
    /* height: 150px; Let flexbox determine height, or use max-height */
    max-height: 200px; /* Example max height */
    overflow-y: auto; 
    word-wrap: break-word;
}

#prompt-display-area {
    font-size: 0.9em;
    color: #444;
    white-space: pre-wrap; /* Preserve whitespace and newlines from prompt */
    margin: 0;
}

#copy-prompt-button {
    padding: 6px 12px;
    font-size: 0.85em;
    align-self: flex-start; /* Align to the left of the right column */
}

/* #loading-spinner is already styled, just ensure it centers in the new column structure if visible */
#output-center-column .loading-spinner {
    /* Assuming existing spinner styles are sufficient, 
       flex properties on #output-center-column should center it. */
}

#output-image-container {
    flex-grow: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 100%; /* Make it take full height of its parent flex item allocation in output-center-column */
    overflow: hidden; 
    position: relative; 
}

#output-image-container img#generated-image {
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* ... existing code for prompt display area, ensure it doesn't try to grow indefinitely */
#prompt-display-area-wrapper {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    width: 100%;
    /* height: 150px; Let flexbox determine height, or use max-height */
    max-height: 200px; /* Example max height */
    overflow-y: auto; 
    word-wrap: break-word;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Show hamburger menu on mobile */
    .mobile-hamburger-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile sidebar states */
    #universal-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease, width 0.3s ease;
        background-color: var(--color-bg-section);
    }
    
    /* Mobile sidebar minimized state (icons only) */
    #universal-sidebar.mobile-sidebar-minimized {
        transform: translateX(0);
        width: 48px;
    }
    
    /* Mobile sidebar expanded state */
    #universal-sidebar.mobile-sidebar-expanded {
        transform: translateX(0);
        width: 90vw;
        max-width: 320px;
    }
    
    /* Hide desktop toggle button on mobile */
    #toggle-sidebar-button {
        display: none !important;
    }
    
    .sidebar-content {
        padding: calc(var(--spacing-unit) * 0.5);
    }
    
    .sidebar-icon-button {
        font-size: 1.2rem;
        padding: calc(var(--spacing-unit) * 0.75);
    }
    
    .sidebar-toggle-button {
        font-size: 1.1rem;
        padding: calc(var(--spacing-unit) * 0.5);
    }
    
    /* Mobile-specific sidebar content styling */
    .sidebar-expanded-content {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }
    
    .sidebar-content-header {
        padding: calc(var(--spacing-unit) * 0.5);
        min-height: 40px;
    }
    
    .sidebar-content-header h3 {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        flex: 1;
        min-width: 0;
    }
    
    .sidebar-content {
        padding: calc(var(--spacing-unit) * 0.5);
        font-size: 0.9rem;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    /* Mobile chat module styling */
    .chat-module-container {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }
    
    .chat-module-header {
        margin-bottom: calc(var(--spacing-unit) * 0.5);
        flex-wrap: wrap;
    }
    
    .chat-module-header h3 {
        font-size: 1rem;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    .create-new-chat-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    
    .chat-search-input {
        font-size: 0.9rem;
        padding: calc(var(--spacing-unit) * 0.4);
    }
    
    .chat-list-container {
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    /* Mobile settings module styling */
    .settings-module-container {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }
    
    .settings-section .form-group input,
    .settings-section .form-group select {
        font-size: 0.9rem;
        padding: calc(var(--spacing-unit) * 0.4);
    }
    
    .settings-section .form-group label {
        font-size: 0.85rem;
    }
    
    /* API key input containers removed - API keys now handled in workers */
    
    /* Mobile chat session items styling */
    .chat-sessions-list {
        overflow-x: hidden;
        width: 100%;
    }
    
    .chat-session-item {
        padding: calc(var(--spacing-unit) * 0.5);
        margin-bottom: calc(var(--spacing-unit) * 0.4);
        font-size: 0.85rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }
    
    .chat-session-title {
        font-size: 0.8rem;
        line-height: 1.2;
    }
    
    .chat-session-preview {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .chat-session-date {
        font-size: 0.65rem;
    }
    
    /* Universal chat elements mobile styling */
    .universal-chat-input-container {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 0.5);
        padding: calc(var(--spacing-unit) * 0.4);
    }
    
    .universal-chat-input {
        font-size: 0.85rem;
        min-height: 16px;
        max-height: 80px;
    }
    
    .universal-chat-send-button {
        width: 100%;
        height: 28px;
        font-size: 0.85rem;
    }
    
    /* Mobile chat list styling */
    .chat-list {
        overflow-x: hidden;
        max-height: none;
        gap: calc(var(--spacing-unit) * 0.4);
    }
    
    .chat-item {
        padding: calc(var(--spacing-unit) * 0.5);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .chat-name {
        font-size: 0.85rem;
        line-height: 1.2;
    }
    
    .chat-item-meta {
        font-size: 0.7rem;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 0.2);
    }
    
    .chat-actions {
        opacity: 1;
        flex-direction: row;
        gap: calc(var(--spacing-unit) * 0.2);
    }
    
    .chat-action-button {
        font-size: 0.75rem;
        padding: calc(var(--spacing-unit) * 0.2);
    }
}

/* Mobile Sidebar Backdrop */
.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    
    /* Mobile: Stack columns vertically */
    #output-area {
        flex-direction: column; /* Stack vertically on mobile */
        gap: 0; /* Remove gap to utilize full space */
        padding: 0; /* Remove padding to utilize full space */
        min-height: 100vh; /* Full viewport height */
        height: 100vh; /* Full viewport height */
    }
    
    /* Mobile Chat-Only Mode */
    #output-area.chat-only-mode {
        padding: calc(var(--spacing-unit) * 1);
        justify-content: center;
        align-items: center;
        min-height: 70vh;
    }
    
    #output-area.chat-only-mode #chat-panel-column {
        width: 90%;
        max-width: none;
        min-width: 280px;
        margin: auto;
    }
    
    /* Ensure conversation elements stay hidden on mobile */
    #output-area.chat-only-mode .chat-panel-header,
    #output-area.chat-only-mode .chat-messages-container,
    #output-area.chat-only-mode .chat-image-previews-section {
        display: none !important;
    }
    
    /* Override mobile chat panel positioning for chat-only mode */
    #output-area.chat-only-mode #chat-panel-column {
        position: static !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .output-column {
        padding: calc(var(--spacing-unit) * 0.5);
    }
    
    #output-center-column {
        order: 1; /* Image column first */
        width: 100% !important; /* Full width on mobile */
        height: 50vh; /* 50% of viewport height */
        max-height: 50vh;
        min-width: auto; /* Reset min-width for mobile */
        flex: 0 0 50vh; /* Fixed height, no grow/shrink */
    }
    
    #chat-panel-column {
        order: 3; /* Chat column last (after resizer) */
        width: 100% !important; /* Full width on mobile */
        height: 50vh; /* 50% of viewport height */
        max-height: 50vh;
        overflow: hidden;
        min-width: auto; /* Reset min-width for mobile */
        padding-bottom: 0; /* Remove bottom padding to utilize full space */
        padding-right: 8px; /* Add right padding to ensure scrollbar is always visible on mobile */
        box-sizing: border-box; /* Include padding in width calculation */
        flex: 0 0 50vh; /* Fixed height, no grow/shrink */
    }
    
    /* Hide resizer on mobile */
    .column-resizer {
        display: none;
        order: 2; /* Between columns */
    }
    
    .image-details-section {
        margin-top: calc(var(--spacing-unit) * 1);
        padding: calc(var(--spacing-unit) * 1);
    }
    
    #output-image-container {
        min-height: 100%;
        max-height: 100%;
        height: 100%;
        margin: 0;
        padding: calc(var(--spacing-unit) * 0.5);
    }
    
    .image-details-section h2 {
        font-size: 1.1em;
    }
    
    .image-details-section h4 {
        font-size: 0.9em;
    }

    #prompt-display-area-wrapper {
        max-height: 150px;
    }
}

/* Chat Module Styles */
.chat-module-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-unit);
}

.chat-module-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
}

.create-new-chat-btn {
    background: var(--color-primary);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.create-new-chat-btn:hover {
    background: var(--color-primary-dark, #0056b3);
}

.chat-search-container {
    margin-bottom: var(--spacing-unit);
}

.chat-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.5);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: var(--color-bg);
    color: var(--color-text);
}

.chat-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.chat-list-container {
    flex-grow: 1;
    overflow-y: auto;
}

.no-chats-message {
    text-align: center;
    color: var(--color-text-secondary);
    padding: calc(var(--spacing-unit) * 2);
}

.no-chats-message p {
    margin: calc(var(--spacing-unit) * 0.5) 0;
}

/* Settings Module Styles */
.settings-module-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.settings-module-header {
    margin-bottom: var(--spacing-unit);
}

.settings-module-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
}

.settings-content {
    flex-grow: 1;
    overflow-y: auto;
}

.settings-section {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.settings-section h4 {
    margin: 0 0 var(--spacing-unit) 0;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
}

.settings-section .form-group {
    margin-bottom: var(--spacing-unit);
}

.settings-section .form-group label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
}

.settings-section .form-group input,
.settings-section .form-group select {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.5);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: var(--color-bg);
    color: var(--color-text);
}

.settings-section .form-group input:focus,
.settings-section .form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* API key input containers removed - API keys now handled in workers */

.help-text {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: calc(var(--spacing-unit) * 0.25);
    line-height: 1.4;
}

.settings-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: calc(var(--spacing-unit) * 1.5) 0;
}

.toggle-switch {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.toggle-switch .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .slider {
    background-color: var(--color-primary);
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(26px);
}

.primary-button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    margin-top: var(--spacing-unit);
}

.primary-button:hover {
    background-color: var(--color-primary-dark, #0056b3);
}

.primary-button:disabled {
    background-color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* Add rule to hide reference indicator and free up space in preview */
.reference-indicator {
    display: none !important;
}

/* Chat image previews section - make it sleek and compact */
.chat-image-previews-section {
    padding: calc(var(--spacing-unit) * 0.125) calc(var(--spacing-unit) * 0.25); /* Even more minimal padding */
    margin: 0; /* Remove any margin */
    margin-bottom: calc(var(--spacing-unit) * 0.25); /* Small gap to chat input */
    border-bottom: 1px solid var(--color-border-light);
    background-color: transparent; /* Remove background to make it less prominent */
}

#uploaded-image-previews-wrapper {
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
    display: inline-block; /* Tightly pack around content */
}