body {
  overflow-y: scroll; /* Always show vertical scrollbar */
  background-color: #fff;
  color: #333;
  padding-top: 70px; /* Adjusted space for the fixed header (height of controls + padding) */
}

h1 {
  /* This H1 should probably be part of the fixed header too, or styled to not interfere */
  /* For now, it's just pushed down by body padding. */
  margin-top: 0; /* Remove default top margin to reduce empty space at the top */
}

table {
  border-collapse: separate;
  border-spacing: 0
}

td.property-value {
  width: 100%;
  border: 1px dashed #666;
  border-radius: 8px;
}
td.property-value, td.property-label {
  font-family: monospace;
  vertical-align: top;
}
td.property-label {
  text-align: right;
  width: 20%;
}
#fixed_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f0f0f0; /* Same as old toggle */
  border-bottom: 1px solid #ccc; /* Same as old toggle */
  z-index: 1000;
  padding: 10px; /* Top and bottom padding for the fixed header */
  display: flex;
  flex-direction: row; /* Display items side-by-side */
  align-items: center; /* Vertically align content */
  box-sizing: border-box; /* Include padding in element's total width/height */
  gap: 20px; /* Space between the checkbox and the selector */
}

#automatic_confirmation_toggle {
  /* Removed: position, top, left, right, background-color, border-bottom, z-index */
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically align content */
  /* Removed height and margin-bottom as items are now row-flexed */
  flex-shrink: 0; /* Prevent it from shrinking */
}

#automatic_confirmation_toggle label {
  margin: 0; /* Remove default margin from label */
  display: flex;
  align-items: center;
}

#automatic_confirmation_toggle input[type="checkbox"] {
  margin-right: 8px; /* Space between checkbox and text */
}

#conversation_selector {
  flex-grow: 1; /* Allow the selector to take up available space */
}


.message {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.message-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.role {
  font-weight: bold;
  margin-right: 10px;
}

.timestamp {
  color: #666;
}

pre {
  white-space: pre-wrap;
  margin: 0; /* Remove default margin */
}

.messageSection {
  border: 1px solid #eee; /* Thin/light border around each message section */
  padding: 5px;
  margin-top: 5px; /* Add some space between sections */
  background-color: #fcfcfc; /* Slightly different background for sections */
  overflow: auto; /* To contain floats */
}

.section-header {
  margin-bottom: 5px;
  overflow: auto; /* To contain floated elements within */
}

#confirmation_input {
  width: calc(100%); /* Full width minus padding/border consideration */
  box-sizing: border-box;
  field-sizing: content;
  padding: 8px 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  resize: none; /* Disable manual resize */
  /* Removed: overflow: hidden; */
  background-color: #fff;
  color: #333;
}

#confirmation_input:disabled {
  background-color: #e0e0e0; /* A more neutral, grayed-out background */
  border: 1px dashed #aaa; /* Dashed border for visual distinction */
  color: #666; /* Lighter text color */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }

  #fixed_header {
    background-color: #2a2a2a;
    border-bottom: 1px solid #555;
  }

  #automatic_confirmation_toggle {
    /* No specific dark mode background for this, inherited from fixed_header */
  }

  .message {
    border: 1px solid #555;
    background-color: #2a2a2a;
  }

  .timestamp {
    color: #aaa;
  }

  .messageSection {
    border: 1px solid #3a3a3a; /* Darker light border */
    background-color: #303030;
  }

  #confirmation_input {
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
  }

  #confirmation_input:disabled {
    background-color: #222; /* Darker neutral background for disabled in dark mode */
    border: 1px dashed #777; /* Darker dashed border */
    color: #999; /* Lighter gray text */
  }
}
