/*
Overall page structure and theme.
Uses a flexbox column layout for the main application areas.
*/
:root {
    /* Default Dark Theme Variables */
    --bg-color: #282c34;
    --text-color: #abb2bf;
    --text-color-light: #d0d8e0;
    --text-color-help: #7c8591;
    --panel-bg-color: #333842;
    --panel-bg-color-alt: #2f343d;
    --panel-bg-color-dark: #21252b;
    --border-color: #4a4f58;
    --border-color-light: #6a737d;
    --accent-color: #528bff;
    --accent-color-hover: #4a7ce8;
    --error-color: #e06c75;
    --cancelled-color: #777;
    --highlight-color: rgba(82, 139, 255, 0.5);
    --highlight-border-color: rgba(82, 139, 255, 0.6);
    --new-partition-text-color: lightgreen;
}

body {
  margin: 0;
  padding: 10px;
  font-family: 'Roboto Mono', monospace, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent body scrolling */
  position: relative; /* For absolute positioning of settings gear */
}

main#app-main-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    gap: 10px; /* Consistent spacing between main blocks */
}

/* Default order of elements */
#top-section-container { order: 1; }
#fast-agents-wrapper { order: 2; }
#main-content-area { order: 3; }

/* --- Header / User Input Area --- */
#input-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0; /* Prevent shrinking */
  border-radius: 4px;
  background-color: var(--panel-bg-color);
  color: var(--text-color);
  outline: none;
  box-sizing: border-box;
}

#chat-input-v3 {
  flex-grow: 1;
  padding: 12px 15px;
  font-size: 1.0em;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--panel-bg-color);
  color: var(--text-color);
  outline: none;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace, sans-serif; /* Inherit font */
  resize: none; /* Disable user resizing */
  line-height: 1.4; /* Adjust for textarea */
}

/* --- Top Section (Input & Summary) --- */
#top-section-container {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* margin-bottom is now handled by main container gap */
}

.top-section-item {
  display: flex;
  flex-direction: column;
}

/* --- Component Labels (Common Styling) --- */
.component-label {
  font-size: 12px; /* Unified font size */
  font-weight: normal; /* Unified font weight */
  color: var(--text-color);    /* Unified text color */
  padding: 3px 8px;   /* Unified padding */
  margin-left: 2px;   /* Common left margin */
  margin-top: 0;      /* Reset default heading margin */
  margin-bottom: 4px; /* Common bottom margin */
  display: inline-block;
  text-align: left;
  flex-shrink: 0; /* Prevent labels from shrinking */
}
/* ID-specific overrides for labels are minimal, mostly for semantic identification */
/* #summary-box-label, #fast-agents-header-label, #user-input-label, #chat-window-label, #image-visualizer-label share above .component-label styles */


/* --- Summarizer Output Display --- */
#summarizer-output-container {
  font-size: 1.0em;
  background-color: var(--panel-bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  /* margin-bottom is now handled by main container gap */
  box-sizing: border-box;
  flex-shrink: 0; /* Prevent shrinking */
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  height: 180px; /* Fixed height to prevent resizing with content */
}

.summarizer-text-crossfade-area {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  min-height: 35px; /* Ensure some height for text */
}

.summarizer-text-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Padding is inherited from #summarizer-output-container */
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  white-space: pre-wrap;
  word-wrap: break-word;
  display: flex;
  align-items: flex-start; /* Align text to the top */
  justify-content: flex-start;
  overflow-y: auto; /* Make summary scrollable if content overflows */
}

.summarizer-text-display.active {
  opacity: 1;
}


/* --- Fast Agent Visualizers Area --- */
#fast-agents-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0; /* Prevent this wrapper from being squished */
}
#fast-agent-visualizers-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 250px;
  overflow-x: auto;  /* Horizontal scroll for many agents */
  overflow-y: hidden; /* Individual threads handle vertical scroll */
  background-color: var(--panel-bg-color-dark);
  padding: 5px;
  box-sizing: border-box;
  border-radius: 4px;
  /* margin-top is handled by label */
  flex-shrink: 0; /* Prevent shrinking */
}

.agent-visualizer-thread {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  flex-basis: 300px;
  flex-grow: 1;
  height: 100%;
  border: 1px solid var(--border-color);
  margin: 0 5px;
  background-color: var(--panel-bg-color-alt);
  border-radius: 4px;
  overflow: hidden; /* For partition container scrolling */
}

.agent-visualizer-thread h3 {
  padding: 10px;
  margin: 0;
  font-size: 0.9em;
  font-weight: normal;
  background-color: var(--panel-bg-color);
  color: var(--text-color-light);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.partition-container-v3 {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.partition-v3 {
  background-color: var(--panel-bg-color); /* Default background, matches body */
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 3px;
  font-size: 0.85em;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-color); /* Default text color */
  opacity: 1;
  transition: opacity 0.4s ease-out, transform 0.3s ease-out;
  position: relative; /* For cursor */
  border: 1px solid var(--border-color-light);
  animation-name: fadeTextToDefault; /* UPDATED animation name */
  animation-duration: 3s;
  animation-timing-function: ease-out;
}

.partition-v3:last-child {
  margin-bottom: 0;
}

.partition-v3.new-partition-highlight-v3 { /* Temporary highlight for new partitions */
  box-shadow: 0 0 0 2px var(--highlight-color), 0 0 10px var(--highlight-color);
  transform: translateY(3px);
  border-color: var(--highlight-border-color);
}

.partition-v3.transitioning-out-v3 { /* For fading out and removing partitions */
  opacity: 0;
  transform: scale(0.9) translateY(-15px);
  margin-bottom: -50px; /* Smooth removal animation */
}

.partition-v3.error {
  border-left: 4px solid var(--error-color); /* Red accent */
  background-color: color-mix(in srgb, var(--error-color) 10%, var(--panel-bg-color));
}

.partition-v3.cancelled {
  opacity: 0.65;
  border-left: 4px solid var(--cancelled-color); /* Grey accent */
}

.cursor-v3 { /* Blinking cursor for streaming text */
  display: inline-block;
  width: 8px;
  height: 1.15em;
  background-color: var(--accent-color);
  margin-left: 1px;
  animation: blink-v3 1s step-end infinite;
  vertical-align: text-bottom;
  border-radius: 1px;
}

@keyframes blink-v3 {
  from, to { background-color: transparent; }
  50% { background-color: var(--accent-color); }
}

.partition-v3.hidden-by-char-count { /* Initially hidden partitions */
  display: none !important;
}

@keyframes fadeTextToDefault { 
  0% { color: var(--new-partition-text-color); /* Start with light green text */ }
  100% { color: var(--text-color); /* Fade to default text color */ }
}

/* --- Main Content Area (Chat & Images) --- */
#main-content-area {
  display: flex;
  flex-direction: row;
  flex-grow: 1; /* Takes remaining vertical space */
  flex-basis: 0; /* Allow flexible height without being greedy */
  min-height: 100px;
  overflow: hidden; /* Prevent overflow from body */
}

/* Container for Chat Agents visualizer */
#chat-area-container {
  flex: 1; /* Equal width with other panels */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-right: 10px; /* Space between panels */
}

#chat-window-parent-container { /* Parent of the actual chat window */
  flex-grow: 1;
  min-height: 0; /* Allow shrinking */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* margin-top is handled by label */
}

.chat-window-v3 { /* The chat agent visualizer root element */
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--panel-bg-color-alt);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Message container will scroll */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.message-container-v3 { /* Scrollable area for messages */
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.chat-message-v3 { /* Individual message bubble container */
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  max-width: 85%;
}

.chat-icon-v3 { /* Agent icon */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.message-text-v3 { /* Text part of the message bubble */
  background-color: var(--panel-bg-color); /* Default agent message background */
  padding: 8px 12px;
  border-radius: 10px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* User messages (if ever implemented in this visualizer, though current visualizer is agent-only) */
.user-message-v3 {
  align-self: flex-end;
}
.user-message-v3 .message-text-v3 {
  background-color: var(--accent-color);
  color: white;
  border-top-right-radius: 0;
}

/* Agent messages (default alignment and style) */
.agent-message-v3 {
  align-self: flex-start;
}
.agent-message-v3 .message-text-v3 {
  border-top-left-radius: 0;
}

/* Container for Auto UI Visualizer */
#autoui-area-container {
  flex: 1; /* Equal width with other panels */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-right: 10px; /* Space between panels */
}

#autoui-parent-container {
  flex-grow: 1;
  min-height: 0; /* Allow shrinking */
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Container for Image Visualizer */
#image-visualizer-area-container {
  flex: 1; /* Equal width with other panels */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#image-visualizer-parent-container { /* Parent of the image stacking area */
  flex-grow: 1;
  min-height: 0; /* Allow shrinking */
  overflow: hidden;
  background-color: var(--panel-bg-color-alt);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  position: relative; /* For positioning images */
  padding: 10px;
  box-sizing: border-box;
}

.image-stack-container-v3 { /* Actual container for Polaroid-style images */
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* Clip rotated/translated images */
}

.polaroid-image-v3 { /* Individual image style */
  display: block;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain; /* Maintain aspect ratio */
  border: 12px solid white;
  background-color: white; /* Polaroid border */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform is set by JS for random placement */
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}


/* --- Page Footer & Controls --- */
footer {
  padding: 8px 10px;
  background-color: var(--panel-bg-color-dark);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0; /* Prevent footer from shrinking */
  margin-top: auto; /* Pushes footer to bottom in flex column layout */
  display: flex;
  justify-content: flex-end; /* Align control groups to the right */
  align-items: center;
}

/* Default (Save/Load) vs Playback Controls Visibility */
footer .default-controls {
  display: flex;
  align-items: center;
}

footer .playback-controls {
  display: none; /* Hidden by default */
  align-items: center;
}

footer.playback-mode .default-controls {
  display: none !important; /* Hide when in playback mode */
}

footer.playback-mode .playback-controls {
  display: flex !important; /* Show when in playback mode */
}

/* General styling for buttons in the footer */
footer button {
  background-color: var(--panel-bg-color);
  color: var(--text-color-light);
  border: 1px solid var(--border-color-light);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  margin-left: 8px;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

footer button:hover {
  background-color: color-mix(in srgb, var(--text-color) 8%, var(--panel-bg-color));
  border-color: var(--border-color-light);
}

footer button:active {
  background-color: color-mix(in srgb, var(--text-color) 12%, var(--panel-bg-color));
}

/* Specific styling for playback buttons for consistent sizing */
footer .playback-controls button {
  font-family: 'Roboto Mono', monospace, sans-serif; /* Ensure consistent font */
  min-width: 40px; /* Ensure buttons have a minimum width */
  text-align: center;
  padding: 6px 8px; /* Slightly adjusted padding for compact look */
}

.playback-speed-control {
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Settings Gear Icon --- */
.settings-gear {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: color 0.2s ease-in-out, transform 0.3s ease-in-out;
  margin-left: 8px; /* Spacing from other buttons */
}

.settings-gear:hover {
  color: var(--text-color-light);
  transform: rotate(90deg);
}

.settings-gear:active {
  color: var(--accent-color);
  transform: rotate(90deg) scale(0.95);
}

/* --- Settings Modal --- */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  overflow-y: auto; /* Allow scrolling on the modal backdrop */
  padding: 20px 0; /* Add padding to ensure modal doesn't touch viewport edges */
}

.modal-content {
  background-color: var(--panel-bg-color-alt);
  margin: 20px auto; /* Reduced from 10% to fixed margin for better small screen support */
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: calc(100vh - 40px); /* Ensure modal doesn't exceed viewport height minus padding */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
  position: relative;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 20px 25px 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Prevent header from shrinking */
  position: sticky; /* Keep header visible when scrolling */
  top: 0;
  background-color: var(--panel-bg-color-alt); /* Ensure header has background */
  z-index: 1; /* Keep header above scrolling content */
  border-radius: 8px 8px 0 0; /* Match modal border radius */
}

.modal-header h3 {
  margin: 0;
  color: var(--text-color-light);
  font-size: 1.2em;
  font-weight: normal;
}

.close {
  color: var(--text-color);
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease-in-out;
}

.close:hover {
  color: var(--error-color);
}

.modal-body {
  padding: 25px;
  overflow-y: auto; /* Make body scrollable */
  flex: 1; /* Allow body to grow and shrink */
  /* Add subtle shadow to indicate scrollable content */
  background:
    /* Shadow at top when scrolled */
    linear-gradient(var(--panel-bg-color-alt) 30%, transparent),
    /* Shadow at bottom when more content below */
    linear-gradient(transparent, var(--panel-bg-color-alt) 70%) 0 100%,
    /* Actual background */
    var(--panel-bg-color-alt);
  background-size: 100% 40px, 100% 40px, 100% 100%;
  background-attachment: local, local, scroll;
  background-repeat: no-repeat;
}

.setting-separator {
    height: 1px;
    background-color: var(--border-color);
    margin: 20px 0;
}

.modal-body label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color-light);
  font-weight: normal;
  font-size: 0.95em;
}

.modal-body textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--panel-bg-color);
  color: var(--text-color);
  font-family: 'Roboto Mono', monospace, sans-serif;
  font-size: 0.9em;
  line-height: 1.4;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease-in-out;
}

.modal-body textarea:focus {
  border-color: var(--accent-color);
}

.modal-body select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--panel-bg-color);
    color: var(--text-color);
    font-family: 'Roboto Mono', monospace, sans-serif;
    font-size: 0.9em;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease-in-out;
}

.modal-body select:focus {
    border-color: var(--accent-color);
}

.help-text {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 0.85em;
  color: var(--text-color-help);
  line-height: 1.3;
}

.modal-footer {
  padding: 15px 25px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0; /* Prevent footer from shrinking */
  position: sticky; /* Keep footer visible when scrolling */
  bottom: 0;
  background-color: var(--panel-bg-color-alt); /* Ensure footer has background */
  border-radius: 0 0 8px 8px; /* Match modal border radius */
}

.btn-primary, .btn-secondary {
  padding: 8px 16px;
  border: 1px solid;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  font-family: 'Roboto Mono', monospace, sans-serif;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--accent-color-hover);
  border-color: var(--accent-color-hover);
}

.btn-secondary {
  background-color: var(--panel-bg-color);
  border-color: var(--border-color-light);
  color: var(--text-color-light);
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--text-color) 8%, var(--panel-bg-color));
  border-color: var(--border-color-light);
}

/* --- Layout Overrides --- */

/* Default-Light Layout: A copy of Default with a Light Theme */
body[data-layout="default-light"] {
    --bg-color: #f4f5f7;
    --text-color: #172b4d;
    --text-color-light: #42526e;
    --text-color-help: #6b778c;
    --panel-bg-color: #ffffff;
    --panel-bg-color-alt: #f4f5f7;
    --panel-bg-color-dark: #ebecf0;
    --border-color: #dfe1e6;
    --border-color-light: #c1c7d0;
    --accent-color: #0052cc;
    --accent-color-hover: #0065ff;
    --error-color: #de350b;
    --cancelled-color: #8993a4;
    --highlight-color: rgba(0, 82, 204, 0.2);
    --highlight-border-color: rgba(0, 82, 204, 0.4);
    --new-partition-text-color: #006644; /* Dark green for light background */
}

/* Bottom-Up Layout: Input and summary at the bottom. */
body[data-layout="bottom-up"] #main-content-area { order: 1; }
body[data-layout="bottom-up"] #fast-agents-wrapper { order: 2; }

body[data-layout="bottom-up"] #top-section-container {
    order: 3;
    flex-direction: row-reverse;
    gap: 10px; /* Space between the two columns */
    height: 180px; /* Fixed height for the row */
}

body[data-layout="bottom-up"] #top-section-container > .top-section-item {
    flex: 1; /* Each takes 50% of the width */
    min-width: 0; /* Allow shrinking */
}

/* Ensure the contents within the items stretch correctly */
body[data-layout="bottom-up"] #input-container,
body[data-layout="bottom-up"] #summarizer-output-container {
    height: 100%; /* Fill the vertical space of the new row */
    margin-bottom: 0;
}

/* Ensure the textarea fills the container in developer layout */
body[data-layout="bottom-up"] #chat-input-v3 {
    height: 100%;
}

/* Bottom-Up-Light Layout: A copy of Developer with a Light Theme */
body[data-layout="bottom-up-light"] {
    --bg-color: #f4f5f7;
    --text-color: #172b4d;
    --text-color-light: #42526e;
    --text-color-help: #6b778c;
    --panel-bg-color: #ffffff;
    --panel-bg-color-alt: #f4f5f7;
    --panel-bg-color-dark: #ebecf0;
    --border-color: #dfe1e6;
    --border-color-light: #c1c7d0;
    --accent-color: #0052cc;
    --accent-color-hover: #0065ff;
    --error-color: #de350b;
    --cancelled-color: #8993a4;
    --highlight-color: rgba(0, 82, 204, 0.2);
    --highlight-border-color: rgba(0, 82, 204, 0.4);
    --new-partition-text-color: #006644; /* Dark green for light background */
}

body[data-layout="bottom-up-light"] #main-content-area { order: 1; }
body[data-layout="bottom-up-light"] #fast-agents-wrapper { order: 2; }
body[data-layout="bottom-up-light"] #top-section-container {
    order: 3;
    flex-direction: row-reverse; /* Match developer layout */
    gap: 10px;
    height: 180px;
}

body[data-layout="bottom-up-light"] #top-section-container > .top-section-item {
    flex: 1;
    min-width: 0;
}

body[data-layout="bottom-up-light"] #input-container,
body[data-layout="bottom-up-light"] #summarizer-output-container {
    height: 100%;
    margin-bottom: 0;
}

body[data-layout="bottom-up-light"] #chat-input-v3 {
    height: 100%;
}

/* --- Top-Down Layouts --- */

/* Top-Down Layout: Input and summary at the top, dark theme. */
body[data-layout="top-down"] #top-section-container {
    order: 1;
    flex-direction: row; /* Input left, summary right */
    gap: 10px;
    height: 180px;
}
body[data-layout="top-down"] #fast-agents-wrapper   {
    order: 2;
    padding-top: 20px; /* Add more space to prevent label overlap */
}
body[data-layout="top-down"] #main-content-area     { order: 3; }

body[data-layout="top-down"] #top-section-container > .top-section-item {
    flex: 1;
    min-width: 0;
}
body[data-layout="top-down"] #input-container,
body[data-layout="top-down"] #summarizer-output-container {
    height: 100%;
    margin-bottom: 0;
}
body[data-layout="top-down"] #chat-input-v3 {
    height: 100%;
}


/* Top-Down-Light Layout: A copy of Top-Down with a light theme. */
body[data-layout="top-down-light"] {
    --bg-color: #f4f5f7;
    --text-color: #172b4d;
    --text-color-light: #42526e;
    --text-color-help: #6b778c;
    --panel-bg-color: #ffffff;
    --panel-bg-color-alt: #f4f5f7;
    --panel-bg-color-dark: #ebecf0;
    --border-color: #dfe1e6;
    --border-color-light: #c1c7d0;
    --accent-color: #0052cc;
    --accent-color-hover: #0065ff;
    --error-color: #de350b;
    --cancelled-color: #8993a4;
    --highlight-color: rgba(0, 82, 204, 0.2);
    --highlight-border-color: rgba(0, 82, 204, 0.4);
    --new-partition-text-color: #006644; /* Dark green for light background */
}

body[data-layout="top-down-light"] #top-section-container {
    order: 1;
    flex-direction: row; /* Input left, summary right */
    gap: 10px;
    height: 180px;
}
body[data-layout="top-down-light"] #fast-agents-wrapper   {
    order: 2;
    padding-top: 20px; /* Add more space to prevent label overlap */
}
body[data-layout="top-down-light"] #main-content-area     { order: 3; }

body[data-layout="top-down-light"] #top-section-container > .top-section-item {
    flex: 1;
    min-width: 0;
}
body[data-layout="top-down-light"] #input-container,
body[data-layout="top-down-light"] #summarizer-output-container {
    height: 100%;
    margin-bottom: 0;
}
body[data-layout="top-down-light"] #chat-input-v3 {
    height: 100%;
}

/* --- Setting Overrides --- */

/* Compact Summary Setting */
body[data-compact-summary="true"] #summarizer-output-container {
    height: 90px;
}
/* For layouts where input and summary are side-by-side, adjust the shared container height */
body[data-compact-summary="true"][data-layout*="top-down"] #top-section-container,
body[data-compact-summary="true"][data-layout*="bottom-up"] #top-section-container {
    height: 90px;
}

/* --- Visibility Settings --- */

/* Hide Fast Agents */
body[data-hide-fast-agents="true"] #fast-agents-wrapper {
    display: none !important;
}

/* Hide Input Box */
body[data-hide-input="true"] .top-section-item:has(#input-container) {
    display: none !important;
}

/* Hide Summary */
body[data-hide-summary="true"] .top-section-item:has(#summarizer-output-container) {
    display: none !important;
}

/* Hide Agent Chat */
body[data-hide-agent-chat="true"] #chat-area-container {
    display: none !important;
}

/* Hide Images Panel */
body[data-hide-images="true"] #image-visualizer-area-container {
    display: none !important;
}

/* Hide Auto UI Panel */
body[data-hide-autoui="true"] #autoui-area-container {
    display: none !important;
}

/* Handle top section when one item is hidden */
#top-section-container {
    display: flex;
    gap: 10px;
}

/* When only one item is visible in top section, make it take full width */
body[data-hide-input="true"] .top-section-item:has(#summarizer-output-container),
body[data-hide-summary="true"] .top-section-item:has(#input-container) {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* Hide entire top section if both input and summary are hidden */
body[data-hide-input="true"][data-hide-summary="true"] #top-section-container {
    display: none !important;
}

/* Handle main content area when panels are hidden */
/* Special case: When only two panels are visible and one is the image panel, 
   give the image panel 1/3 and the other panel 2/3 */
body[data-hide-agent-chat="true"]:not([data-hide-autoui="true"]):not([data-hide-images="true"]) #autoui-area-container {
    flex: 2 !important;
}
body[data-hide-agent-chat="true"]:not([data-hide-autoui="true"]):not([data-hide-images="true"]) #image-visualizer-area-container {
    flex: 1 !important;
}

body[data-hide-autoui="true"]:not([data-hide-agent-chat="true"]):not([data-hide-images="true"]) #chat-area-container {
    flex: 2 !important;
}
body[data-hide-autoui="true"]:not([data-hide-agent-chat="true"]):not([data-hide-images="true"]) #image-visualizer-area-container {
    flex: 1 !important;
}

/* When chat and autoui are visible (images hidden), they get equal space */
body[data-hide-images="true"]:not([data-hide-agent-chat="true"]):not([data-hide-autoui="true"]) #chat-area-container,
body[data-hide-images="true"]:not([data-hide-agent-chat="true"]):not([data-hide-autoui="true"]) #autoui-area-container {
    flex: 1 !important;
}

/* Remove margin from the last visible panel */
body[data-hide-agent-chat="true"][data-hide-autoui="true"] #image-visualizer-area-container,
body[data-hide-agent-chat="true"][data-hide-images="true"] #autoui-area-container,
body[data-hide-autoui="true"][data-hide-images="true"] #chat-area-container,
body[data-hide-agent-chat="true"]:not([data-hide-autoui="true"]):not([data-hide-images="true"]) #image-visualizer-area-container,
body[data-hide-autoui="true"]:not([data-hide-agent-chat="true"]):not([data-hide-images="true"]) #image-visualizer-area-container,
body[data-hide-images="true"]:not([data-hide-agent-chat="true"]):not([data-hide-autoui="true"]) #autoui-area-container {
    margin-right: 0 !important;
}

/* When only one panel is visible, make it take full width */
body[data-hide-agent-chat="true"][data-hide-autoui="true"] #image-visualizer-area-container,
body[data-hide-agent-chat="true"][data-hide-images="true"] #autoui-area-container,
body[data-hide-autoui="true"][data-hide-images="true"] #chat-area-container {
    flex: 1 1 100% !important;
    margin-right: 0 !important;
}

/* Hide entire main content area if all panels are hidden */
body[data-hide-agent-chat="true"][data-hide-autoui="true"][data-hide-images="true"] #main-content-area {
    display: none !important;
}

/* Special case: When input is hidden and not sharing a row, and fast agents are visible, 
   increase fast agents height */
body[data-layout="default"]:not([data-hide-fast-agents="true"])[data-hide-input="true"][data-hide-summary="false"] #fast-agent-visualizers-container,
body[data-layout="default-light"]:not([data-hide-fast-agents="true"])[data-hide-input="true"][data-hide-summary="false"] #fast-agent-visualizers-container {
    height: 430px; /* Original 250px + 180px from input/summary area */
}

/* When both input and summary are hidden in default layouts, give fast agents their space */
body[data-layout="default"]:not([data-hide-fast-agents="true"])[data-hide-input="true"][data-hide-summary="true"] #fast-agent-visualizers-container,
body[data-layout="default-light"]:not([data-hide-fast-agents="true"])[data-hide-input="true"][data-hide-summary="true"] #fast-agent-visualizers-container {
    height: 430px;
}

/* For layouts where input/summary share a row (bottom-up, top-down), handle the special case differently */
body[data-layout*="bottom-up"]:not([data-hide-fast-agents="true"])[data-hide-input="true"][data-hide-summary="true"] #fast-agent-visualizers-container,
body[data-layout*="top-down"]:not([data-hide-fast-agents="true"])[data-hide-input="true"][data-hide-summary="true"] #fast-agent-visualizers-container {
    height: 430px; /* Increase height when top section is completely hidden */
}

/* Ensure proper flex behavior when panels are hidden */
body #app-main-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Remove gaps when sections are hidden */
body[data-hide-fast-agents="true"] #app-main-container > #fast-agents-wrapper + * {
    margin-top: 0;
}

body[data-hide-input="true"][data-hide-summary="true"] #app-main-container > #top-section-container + * {
    margin-top: 0;
}

/* Responsive adjustments for small screens */
@media (max-height: 600px) {
  .modal {
    padding: 10px 0;
  }
  
  .modal-content {
    margin: 10px auto;
    max-height: calc(100vh - 20px);
  }
  
  .modal-header {
    padding: 15px 20px 12px;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 12px 20px 15px;
  }
}

/* Additional responsive adjustments for very small screens */
@media (max-width: 480px) {
  .modal-content {
    width: 95%;
    margin: 10px auto;
  }
  
  .modal-body {
    padding: 15px;
  }
}