/* Define custom properties (variables) for colors */
:root {
  /* Default (Dark Theme) */
  --color-body-bg: #1a1a1a;
  --color-text-default: #e0e0e0;
  --color-app-bg: #2c2c2c;
  --color-header-footer-bg: #3a3a3a;
  --color-border-default: #444;
  --color-text-header: #f0f0f0;
  --color-scrollbar-thumb: #555;
  --color-scrollbar-track: #333;
  --color-chat-list-bg: #262626;
  --color-chat-detail-bg: #303030;
  --color-config-bg: #2a2a2a; /* Config/System Instruction background */

  /* Accent Colors - Blueish */
  --color-accent-primary: #007bff; /* Deep Blue */
  --color-accent-hover: #0056b3; /* Lighter Blue on hover */

  /* Button Colors */
  --color-button-add-bg: #28a745; /* Green for Add */
  --color-button-add-hover: #218838; /* Darker Green on hover */
  --color-button-delete-bg: #dc3545; /* Red for Delete */
  --color-button-delete-hover: #c82333; /* Darker Red on hover */
  --color-button-disabled-bg: #555;
  --color-button-default-bg: #6c757d; /* Gray for general buttons */
  --color-button-default-hover: #5a6268;

  --color-chat-model-bg: #4a4a4a; /* Background for AI messages and input fields */
  --color-chat-model-text: #e0e0e0;
  --color-list-item-hover: #3a3a3a;
  --color-list-item-selected: #505050;
  --color-text-faded: rgba(255, 255, 255, 0.7); /* For message sender, status text, etc. */
  --color-status-text: #999;

  /* Global Message (Toast) Colors */
  --color-info-message: #007bff; /* Primary blue for info */
  --color-success-message: #28a745; /* Green for success */
  --color-error-message: #dc3545; /* Red for error */
  --color-warning-message: #ffc107; /* Yellow for warning (text will be dark) */

  /* Modal Specific Colors */
  --color-modal-overlay: rgba(0, 0, 0, 0.7);
  --color-modal-bg: #222;
  --color-modal-border: #444;
  --color-modal-header-text: #f0f0f0;
  --color-modal-close-button: #aaa;
  --color-modal-close-button-hover: #e0e0e0;

  /* File Section Specific Colors within Modals */
  --color-file-section-bg: #282828;
  --color-file-section-border: #3a3a3a;
  --color-file-input-bg: #333;
  --color-file-input-border: #555;
  --color-file-list-item-bg: #303030;
  --color-file-list-item-bg-even: #2a2a2a;
  --color-file-list-item-border: #4a4a4a;
  --color-file-list-meta-text: #bbb;
  --color-progress-bar-track: #555;
  --color-progress-bar-value: #28a745; /* Green for progress */
  --color-status-message-bg: #3a3a3a;
  --color-status-message-border: #555;
  --color-status-message-text: #e0e0e0;
  --color-error-status-message-bg: #4a1c1e;
  --color-error-status-message-text: #ff9999;
  --color-error-status-message-border: #883333;

  /* Shadows */
  --shadow-default: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-message: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-focus-outline: 0 0 0 3px rgba(0, 123, 255, 0.3); /* Match accent blue */
  --shadow-chat-list-hover: 0 0 15px rgba(0, 0, 0, 0.5);
  --shadow-chat-list-collapsed: inset -2px 0 5px rgba(0, 0, 0, 0.3);
  --shadow-global-message: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.8);
  --shadow-form-input: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-active-glow: 0 0 8px rgba(0, 123, 255, 0.7); /* Glow for active indicators */
}

/* Light Theme overrides - if user prefers light */
@media (prefers-color-scheme: light) {
  :root {
    --color-body-bg: #f5f5f5;
    --color-text-default: #333333;
    --color-app-bg: #ffffff;
    --color-header-footer-bg: #ededed;
    --color-border-default: #cccccc;
    --color-text-header: #222222;
    --color-scrollbar-thumb: #aaaaaa;
    --color-scrollbar-track: #e0e0e0;
    --color-chat-list-bg: #f2f2f2;
    --color-chat-detail-bg: #f8f8f8;
    --color-config-bg: #f5f5f5; /* Config/System Instruction background */

    /* Accent Colors - MAINTAIN BLUEISH */
    --color-accent-primary: #007bff;
    --color-accent-hover: #0056b3;

    /* Button Colors - MAINTAIN GREEN/RED for light theme */
    --color-button-add-bg: #28a745;
    --color-button-add-hover: #218838;
    --color-button-delete-bg: #dc3545;
    --color-button-delete-hover: #c82333;
    --color-button-disabled-bg: #cccccc;
    --color-button-default-bg: #6c757d;
    --color-button-default-hover: #5a6268;

    --color-chat-model-bg: #e0e0e0;
    --color-chat-model-text: #333333;
    --color-list-item-hover: #e0e0e0;
    --color-list-item-selected: #d0d0d0;
    --color-text-faded: rgba(0, 0, 0, 0.6);
    --color-status-text: #666;

    /* Global Message (Toast) Colors */
    --color-info-message: #007bff;
    --color-success-message: #28a745;
    --color-error-message: #dc3545;
    --color-warning-message: #ffc107;

    /* Modal Specific Colors */
    --color-modal-overlay: rgba(0, 0, 0, 0.5);
    --color-modal-bg: #ffffff;
    --color-modal-border: #cccccc;
    --color-modal-header-text: #222222;
    --color-modal-close-button: #666;
    --color-modal-close-button-hover: #333;

    /* File Section Specific Colors within Modals */
    --color-file-section-bg: #fbfbfb;
    --color-file-section-border: #e0e0e0;
    --color-file-input-bg: #ffffff;
    --color-file-input-border: #ddd;
    --color-file-list-item-bg: #ffffff;
    --color-file-list-item-bg-even: #f9f9f9;
    --color-file-list-item-border: #eee;
    --color-file-list-meta-text: #666;
    --color-progress-bar-track: #f0f0f0;
    --color-progress-bar-value: #28a745;
    --color-status-message-bg: #e9ecef;
    --color-status-message-border: #ced4da;
    --color-status-message-text: #333;
    --color-error-status-message-bg: #f8d7da;
    --color-error-status-message-text: #721c24;
    --color-error-status-message-border: #f5c6cb;

    /* Shadows */
    --shadow-default: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-header: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-message: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-focus-outline: 0 0 0 3px rgba(0, 123, 255, 0.3);
    --shadow-chat-list-hover: 0 0 15px rgba(0, 0, 0, 0.1);
    --shadow-chat-list-collapsed: inset -2px 0 5px rgba(0, 0, 0, 0.1);
    --shadow-global-message: 0 2px 10px rgba(0, 0, 0, 0.2);
    --shadow-modal: 0 5px 15px rgba(0, 0, 0, 0.3);
    --shadow-form-input: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-active-glow: 0 0 8px rgba(0, 123, 255, 0.4);
  }
}

/* Manual Theme Toggle (e.g., via JavaScript adding/removing this class) */
body.light-theme {
  /* Overrides the prefers-color-scheme setting by duplicating the light theme */
  --color-body-bg: #f5f5f5;
  --color-text-default: #333333;
  --color-app-bg: #ffffff;
  --color-header-footer-bg: #ededed;
  --color-border-default: #cccccc;
  --color-text-header: #222222;
  --color-scrollbar-thumb: #aaaaaa;
  --color-scrollbar-track: #e0e0e0;
  --color-chat-list-bg: #f2f2f2;
  --color-chat-detail-bg: #f8f8f8;
  --color-config-bg: #f5f5f5;
  --color-button-disabled-bg: #cccccc;
  --color-chat-model-bg: #e0e0e0;
  --color-chat-model-text: #333333;
  --color-list-item-hover: #e0e0e0;
  --color-list-item-selected: #d0d0d0;
  --color-text-faded: rgba(0, 0, 0, 0.6);
  --color-status-text: #666;
  --color-info-message: #007bff;
  --color-success-message: #28a745;
  --color-error-message: #dc3545;
  --color-warning-message: #ffc107;
  --color-modal-overlay: rgba(0, 0, 0, 0.5);
  --color-modal-bg: #ffffff;
  --color-modal-border: #cccccc;
  --color-modal-header-text: #222222;
  --color-modal-close-button: #666;
  --color-modal-close-button-hover: #333;
  --color-file-section-bg: #fbfbfb;
  --color-file-section-border: #e0e0e0;
  --color-file-input-bg: #ffffff;
  --color-file-input-border: #ddd;
  --color-file-list-item-bg: #ffffff;
  --color-file-list-item-bg-even: #f9f9f9;
  --color-file-list-item-border: #eee;
  --color-file-list-meta-text: #666;
  --color-progress-bar-track: #f0f0f0;
  --color-progress-bar-value: #28a745;
  --color-status-message-bg: #e9ecef;
  --color-status-message-border: #ced4da;
  --color-status-message-text: #333;
  --color-error-status-message-bg: #f8d7da;
  --color-error-status-message-text: #721c24;
  --color-error-status-message-border: #f5c6cb;
  --shadow-default: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-message: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-chat-list-hover: 0 0 15px rgba(0, 0, 0, 0.1);
  --shadow-chat-list-collapsed: inset -2px 0 5px rgba(0, 0, 0, 0.1);
  --shadow-global-message: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 5px 15px rgba(0, 0, 0, 0.3);
  --shadow-form-input: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-active-glow: 0 0 8px rgba(0, 123, 255, 0.4);
}

body.dark-theme {
  /* Overrides the prefers-color-scheme setting by duplicating the dark theme */
  --color-body-bg: #1a1a1a;
  --color-text-default: #e0e0e0;
  --color-app-bg: #2c2c2c;
  --color-header-footer-bg: #3a3a3a;
  --color-border-default: #444;
  --color-text-header: #f0f0f0;
  --color-scrollbar-thumb: #555;
  --color-scrollbar-track: #333;
  --color-chat-list-bg: #262626;
  --color-chat-detail-bg: #303030;
  --color-config-bg: #2a2a2a;
  --color-button-disabled-bg: #555;
  --color-chat-model-bg: #4a4a4a;
  --color-chat-model-text: #e0e0e0;
  --color-list-item-hover: #3a3a3a;
  --color-list-item-selected: #505050;
  --color-text-faded: rgba(255, 255, 255, 0.8);
  --color-status-text: #999;
  --color-info-message: #007bff;
  --color-success-message: #28a745;
  --color-error-message: #dc3545;
  --color-warning-message: #ffc107;
  --color-modal-overlay: rgba(0, 0, 0, 0.7);
  --color-modal-bg: #222;
  --color-modal-border: #444;
  --color-modal-header-text: #f0f0f0;
  --color-modal-close-button: #aaa;
  --color-modal-close-button-hover: #e0e0e0;
  --color-file-section-bg: #282828;
  --color-file-section-border: #3a3a3a;
  --color-file-input-bg: #333;
  --color-file-input-border: #555;
  --color-file-list-item-bg: #303030;
  --color-file-list-item-bg-even: #2a2a2a;
  --color-file-list-item-border: #4a4a4a;
  --color-file-list-meta-text: #bbb;
  --color-progress-bar-track: #555;
  --color-progress-bar-value: #28a745;
  --color-status-message-bg: #3a3a3a;
  --color-status-message-border: #555;
  --color-status-message-text: #e0e0e0;
  --color-error-status-message-bg: #4a1c1e;
  --color-error-status-message-text: #ff9999;
  --color-error-status-message-border: #883333;
  --shadow-default: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-message: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-chat-list-hover: 0 0 15px rgba(0, 0, 0, 0.5);
  --shadow-chat-list-collapsed: inset -2px 0 5px rgba(0, 0, 0, 0.3);
  --shadow-global-message: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.8);
  --shadow-form-input: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-button: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-active-glow: 0 0 8px rgba(0, 123, 255, 0.7);
}

/* Global Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* General Body and Container Styles - Now using variables */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--color-body-bg);
  color: var(--color-text-default);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  overflow: hidden; /* Prevents body scroll if app container manages its own */
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 1200px;
  height: 100vh;
  max-height: 900px; /* Constrain max height for desktop */
  background-color: var(--color-app-bg);
  border-radius: 10px;
  box-shadow: var(--shadow-default);
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Header Styles */
#app-header {
  background-color: var(--color-header-footer-bg);
  padding: 10px 15px; /* Increased padding slightly */
  border-bottom: 1px solid var(--color-border-default);
  text-align: center;
  color: var(--color-text-header);
  box-shadow: var(--shadow-header);
  margin: 0;
  z-index: 10;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease, box-shadow 0.3s ease;
}

#app-header h3 {
  margin: 0;
  font-size: 1.5em; /* Make it slightly larger */
}

/* Main Content Area (Columns) */
#main-content {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-app-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.column > header {
  display: flex;
  align-items: center; /* Vertically align items in the center */
  justify-content: space-between; /* Distribute space between items */
  width: 100%;
  overflow: visible;
  position: relative;
  background-color: var(--color-header-footer-bg); /* Match app header */
  border-bottom: 1px solid var(--color-border-default);
  z-index: 2; /* Ensure header is above content */
  transition: background-color 0.3s ease, border-color 0.3s ease;
  padding-right: 15px; /* Add padding to the right for spacing */
  padding-left: 15px; /* Add padding to the left for consistency */
}

.column > header h4 {
  padding: 10px 0;
  margin: 0;
  /* Removed border-bottom as the parent header now has it */
  flex-grow: 1;
  text-align: left;
  color: var(--color-text-header);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2em;
  transition: color 0.3s ease;
}

/* Specific Column Borders */
#chat-list-column {
  border-right: 1px solid var(--color-border-default);
}
#chat-detail-column {
  /* This column is in the middle, will have left and right borders */
  border-left: 1px solid var(--color-border-default);
  /* The original HTML shows only 2 columns, so no right border needed if it's the rightmost */
  /* If a 3rd column is added later, this would need adjusting */
}

.content-area {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
  padding: 15px;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track); /* Firefox */
}

/* Custom scrollbar for Webkit browsers */
.content-area::-webkit-scrollbar {
  width: 8px;
}

.content-area::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

.content-area::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid var(--color-scrollbar-track);
}

/* Conversation List Column */
#chat-list-column {
  width: 25%;
  flex-shrink: 0;
  min-width: 200px; /* Minimum width to prevent collapsing too much */
  transition: width 0.3s ease-in-out, background-color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--color-chat-list-bg);
  position: relative;
  z-index: 5;
  box-shadow: none;
  overflow: hidden;
}

/* HIDE Rule: When the chat detail column is hovered, shrink the list column */
#main-content:has(#chat-detail-column:hover) > #chat-list-column {
  width: 5px; /* Smaller width on hover */
  min-width: 5px;
  border-right-color: transparent;
  box-shadow: var(--shadow-chat-list-collapsed);
}

#chat-list-column:hover {
  border-right-color: var(--color-border-default);
  box-shadow: var(--shadow-chat-list-hover);
}

#conversation-list-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-list-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--color-scrollbar-track);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.3s ease-out,
    transform 0.3s ease-out, border-color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#conversation-list-content li:nth-child(even) {
  background-color: var(--color-file-list-item-bg-even);
}

.chat-list-item:hover {
  background-color: var(--color-list-item-hover);
}

.chat-list-item.selected {
  background-color: var(--color-list-item-selected);
  color: var(--color-text-header);
  font-weight: bold;
}

/* Deleting animation */
.chat-list-item.removed {
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.chat-list-item.removing {
  background-color: var(--color-button-delete-bg);
  animation: pulse-delete 1s infinite alternate;
  pointer-events: none;
}

@keyframes pulse-delete {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}


/* Chat Detail Column */
#chat-detail-column {
  flex-grow: 1;
  background-color: var(--color-chat-detail-bg);
  transition: background-color 0.3s ease;
}

#chat-detail-content {
  gap: 10px;
}

/* Chat Message Styles */
.chat-message {
  padding: 12px 18px;
  border-radius: 18px;
  max-width: 75%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: var(--shadow-message);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.chat-message.user {
  background-color: var(--color-accent-primary);
  color: var(--color-text-header);
  align-self: flex-end;
  margin-left: auto;
  border-bottom-right-radius: 4px; /* User message corners */
}

.chat-message.model {
  background-color: var(--color-chat-model-bg);
  color: var(--color-chat-model-text);
  align-self: flex-start;
  margin-right: auto;
  border-bottom-left-radius: 4px; /* Model message corners */
}

.message-sender {
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 5px;
  color: var(--color-text-faded);
}

/* Markdown and Code Highlighting (Prism.js) Integration */
.chat-message pre {
  margin: 10px 0;
  background-color: var(--color-scrollbar-track); /* A slightly darker background */
  padding: 15px; /* More padding for code blocks */
  border-radius: 8px; /* Slightly more rounded corners */
  overflow-x: auto;
  transition: background-color 0.3s ease;
  font-size: 0.9em; /* Slightly smaller font for code */
  line-height: 1.4;
  word-break: break-all; /* Ensure long lines break */
}

.chat-message code {
  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 0.95em; /* Keep inline code readable */
  background-color: rgba(0, 0, 0, 0.2); /* Slightly transparent dark background for inline code */
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.3s ease;
  color: inherit; /* Inherit text color for inline code */
}

/* MathJax Integration */
.MathJax,
mjx-container {
  color: inherit !important;
  background-color: transparent !important;
}

/* Chat Input Area */
#chat-input-area {
  display: flex;
  align-items: flex-end; /* Align items to the bottom */
  padding: 5px;
  border-top: 1px solid var(--color-border-default);
  background-color: var(--color-header-footer-bg);
  gap: 10px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#chat-input-area.hidden {
  display: none;
}

#chat-message-input {
  flex-grow: 1;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 10px;
  background-color: var(--color-chat-model-bg);
  color: var(--color-chat-model-text);
  font-size: 1em;
  resize: vertical;
  min-height: 50px;
  max-height: 150px; /* Prevent it from getting too tall */
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow-form-input); /* Subtle inner shadow */
}

#chat-message-input:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-focus-outline);
}

#send-message-btn {
  background-color: var(--color-accent-primary);
  color: var(--color-text-header);
  min-width: 60px;
  font-weight: 600;
  padding: 12px 15px; /* Slightly larger padding for main send button */
}

#send-message-btn:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* Indicator Column for Chat Input */
.indicator-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 0;
  max-height: 63px;
  gap: 3px;
  align-items: center;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* Fixed width for icon */
  height: 30px; /* Fixed height for icon */
  border-radius: 50%; /* Make them circular */
  background-color: var(--color-chat-model-bg); /* Use model bg for indicators */
  color: var(--color-text-faded); /* Faded color for icons */
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease,
    box-shadow 0.2s ease; /* Add box-shadow to transition */
  box-shadow: var(--shadow-button); /* Match button shadow */
}

.indicator:hover {
  background-color: var(--color-list-item-hover); /* Slightly lighter on hover */
  color: var(--color-text-header); /* Brighter icon on hover */
  transform: scale(1.05);
}

/* File button: light up if its child <data> element's value is not empty */
#file-btn:has(data[value]:not([value="[]"])) {
  background-color: var(--color-accent-primary);
  color: var(--color-text-header);
  box-shadow: var(--shadow-active-glow), var(--shadow-button);
}

/* Other indicators: light up if their child <data> element's value is "true" */
#google-ind:has(data[value="true"]),
#link-ind:has(data[value="true"]),
#code-ind:has(data[value="true"]) {
  background-color: var(--color-accent-primary);
  color: var(--color-text-header);
  box-shadow: var(--shadow-active-glow), var(--shadow-button);
}


/* Global Message Area (Toasts) */
#global-message-area {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.global-message {
  padding: 12px 25px;
  margin-bottom: 10px;
  border-radius: 8px;
  color: var(--color-text-header);
  font-size: 0.9em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out,
    background-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: auto;
  box-shadow: var(--shadow-global-message);
  max-width: 400px;
  text-align: center;
  font-weight: 500;
}

.global-message.show {
  opacity: 1;
  transform: translateY(0);
}

.global-message.info {
  background-color: var(--color-info-message);
}

.global-message.success {
  background-color: var(--color-success-message);
}

.global-message.error {
  background-color: var(--color-error-message);
}

.global-message.warning {
  background-color: var(--color-warning-message);
  color: var(--color-text-default); /* Ensure text is readable on yellow */
}

/* Status Messages (Loading, Error, Placeholder) */
.loading-message,
.error-message,
.placeholder-message {
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: var(--color-status-text);
}

.error-message {
  color: var(--color-error-message);
  font-weight: bold;
}

/* Details Styles (System Instruction) */
details {
  margin: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
  transition: all 0.3s ease;
  overflow: visible;
  flex-shrink: 0;
}

details[open] {
  border-color: transparent;
  box-shadow: none;
}

summary {
  display: flex;
  cursor: pointer;
  padding: 10px 15px;
  background-color: transparent;
  color: var(--color-text-header);
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  font-weight: bold;
  list-style: none; /* Hide default triangle */
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
  width: fit-content;
  flex-shrink: 0;
}

summary:hover {
  background-color: var(--color-list-item-hover);
  border-color: var(--color-accent-primary);
}

summary::-webkit-details-marker {
  display: none; /* Hide for Webkit */
}

summary::after {
  content: "▼";
  position: static;
  margin-left: 8px;
  transform: none;
  transition: transform 0.2s ease;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

summary:hover {
  background-color: var(--color-list-item-hover);
}

/* Content inside details */
details::details-content {
  position: absolute;
  top: 100%;
  right: 0;
  width: auto;
  background-color: var(--color-config-bg);
  padding: 0px;
  border: 1px solid var(--color-border-default);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: var(--shadow-default);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Add height transition for smooth open/close */
  height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

details[open]::details-content {
  height: auto;
  padding: 15px;
}

textarea#system-instruction-input {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  background-color: var(--color-chat-model-bg);
  color: var(--color-chat-model-text);
  font-size: 0.9em;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
  field-sizing: content; /* Use for auto-sizing textareas */
}

textarea#system-instruction-input:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-focus-outline);
}

#prompt-save,
#generation-config {
  background-color: var(--color-button-default-bg);
  color: var(--color-text-header);
  padding: 8px 15px; /* Smaller padding for these buttons */
  font-size: 0.9em;
  border-radius: 5px;
  align-self: flex-end; /* Align to the right */
  margin-top: 5px; /* Space from textarea */
}
#prompt-save:hover:not(:disabled),
#generation-config:hover:not(:disabled) {
  background-color: var(--color-button-default-hover);
  transform: translateY(-1px);
}
#prompt-save:disabled,
#generation-config:disabled {
  background-color: var(--color-button-disabled-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Modal Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--color-modal-overlay); /* Use variable */
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px); /* Subtle blur for background */
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Modal Content */
.modal-content {
  background-color: var(--color-modal-bg); /* Use variable */
  padding: 20px;
  border: 1px solid var(--color-modal-border); /* Use variable */
  border-radius: 10px; /* Slightly larger border-radius */
  width: 90%;
  max-width: 900px;
  box-shadow: var(--shadow-modal); /* Use variable */
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Modal Header */
.modal-content > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-modal-border); /* Use variable */
}

.modal-content > header h4 {
  margin: 0;
  color: var(--color-modal-header-text); /* Use variable */
  font-size: 1.4em;
}

/* Close Button */
.close-modal-button {
  color: var(--color-modal-close-button); /* Use variable */
  font-size: 30px; /* Larger for better click target */
  font-weight: bold;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0 5px; /* Small padding for better click area */
  line-height: 1;
  transition: color 0.2s ease;
}
.close-modal-button:hover,
.close-modal-button:focus {
  color: var(--color-modal-close-button-hover); /* Use variable */
  outline: none; /* Remove default outline */
}

/* Form Styling within Modals */
.config-section,
.file-section {
  padding: 15px;
  border: 1px solid var(--color-file-section-border); /* Use file section border */
  border-radius: 8px;
  background-color: var(--color-file-section-bg); /* Use file section bg */
  margin-bottom: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.config-section h4,
.file-section h4 {
  color: var(--color-text-default); /* Use default text color */
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1em;
  border-bottom: 1px solid var(--color-file-section-border);
  padding-bottom: 10px;
}

.form-inputs {
  display: grid; /* Use grid for better layout control */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
  gap: 20px; /* Increased gap */
  margin-bottom: 20px;
}

.form-actions {
  display: flex;
  width: 100%;
  justify-content: flex-end; /* Align buttons to the right */
  gap: 15px; /* Space between buttons */
  padding-top: 15px;
  border-top: 1px solid var(--color-modal-border);
}

.form-actions button[type="submit"],
.form-actions button[type="reset"] {
  background-color: var(--color-accent-primary);
  color: var(--color-text-header);
  padding: 12px 25px;
  border-radius: 8px; /* Slightly more rounded */
  font-weight: 600;
  font-size: 1.05em;
  box-shadow: var(--shadow-button);
}

.form-actions button[type="reset"] {
  background-color: var(--color-button-default-bg);
}
.form-actions button[type="reset"]:hover:not(:disabled) {
  background-color: var(--color-button-default-hover);
}

.form-actions button[type="submit"]:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.form-item {
  display: flex;
  flex-direction: column;
}

/* Style for checkbox items to align label nicely */
.form-item.checkbox-item {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.form-item.checkbox-item label {
  margin-bottom: 0;
  order: 1;
  user-select: none; /* Prevent text selection */
  cursor: pointer; /* Indicate clickability */
}

.form-item.checkbox-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background-color: var(--color-chat-model-bg); /* Use input field background */
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-item.checkbox-item input[type="checkbox"]:checked {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.form-item.checkbox-item input[type="checkbox"]:checked::after {
  content: "✓";
  color: var(--color-text-header);
  font-size: 1.2em;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.form-item.checkbox-item input[type="checkbox"]:disabled {
  background-color: var(--color-button-disabled-bg);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-item.checkbox-item input[type="chebox"]isabled:checked::after {
  color: rgba(255, 255, 255, 0.5);
}
.form-item.checkbox-item input[type="checkbox"]:focus {
  outline: none;
  box-shadow: var(--shadow-focus-outline);
}

.form-item label {
  font-size: 0.95em;
  margin-bottom: 8px; /* More space for labels */
  color: var(--color-text-default);
  display: flex; /* Allow output span to align */
  align-items: center;
}

.form-item input[type="number"],
textarea.form-textarea, /* Generic class for textareas in forms */
.form-item select {
  width: 100%; /* Make them fill container */
  padding: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  background-color: var(--color-chat-model-bg); /* Input fields match model messages */
  color: var(--color-chat-model-text);
  font-size: 0.9em;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: var(--shadow-form-input); /* Subtle inner shadow */
}

.form-item input[type="number"]:focus,
textarea.form-textarea:focus,
.form-item select:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-focus-outline);
}

/* Specific textarea in forms */
textarea.form-textarea {
  resize: vertical;
  min-height: 50px;
  max-height: 150px;
}

/* Select Styling */
.form-item select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
}

/* Light theme select arrow override */
body.light-theme .form-item select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Range Slider */
.form-item input[type="range"] {
  width: 100%;
  height: 8px; /* Slightly thinner track */
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-scrollbar-track);
  border-radius: 4px;
  outline: none;
  margin: 5px 0;
  transition: background-color 0.3s ease;
}

.form-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; /* Slightly larger thumb */
  height: 18px;
  background: var(--color-accent-primary);
  border-radius: 50%;
  cursor: grab; /* Indicate draggable */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin-top: -5px; /* Center thumb vertically */
}

.form-item input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.form-item input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--color-accent-hover);
  transform: scale(1.1);
}

.form-item input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: var(--shadow-focus-outline);
}

.form-item input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-accent-primary);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, transform 0.1s ease;
  border: none;
}
.form-item input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
}

.form-item input[type="range"]::-moz-range-thumb:hover {
  background: var(--color-accent-hover);
  transform: scale(1.1);
}

.form-item input[type="range"]:focus::-moz-range-thumb {
  box-shadow: var(--shadow-focus-outline);
}

.form-item input[type="range"]::-moz-range-track {
  background: var(--color-scrollbar-track);
  border-radius: 4px;
  height: 8px;
  border: none;
}

/* Disabled styles for all inputs */
.form-item input[type="number"]:disabled,
textarea.form-textarea:disabled,
.form-item select:disabled,
.form-item input[type="range"]:disabled {
  background-color: var(--color-button-disabled-bg);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Disabled slider thumb/track specific styles */
.form-item input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--color-button-disabled-bg);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.form-item input[type="range"]:disabled::-moz-range-thumb {
  background: var(--color-button-disabled-bg);
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.form-item input[type="range"]:disabled::-webkit-slider-runnable-track {
  background: var(--color-button-disabled-bg);
}

.form-item input[type="range"]:disabled::-moz-range-track {
  background: var(--color-button-disabled-bg);
}

/* New: Styles for optional field labels and disabled state */
.form-item label.optional-toggle-label {
  cursor: pointer;
  user-select: none;
  font-style: italic;
  font-size: 0.85em; /* Smaller for optional toggles */
  color: var(--color-text-faded);
}

.form-item label.user-disabled-optional {
  opacity: 0.7;
  font-style: italic;
  text-decoration: line-through; /* Visual cue for disabled */
}
.form-item label.user-disabled-optional::after {
  content: " (Override disabled)"; /* Clarify it's a user override */
  font-size: 0.9em;
  margin-left: 5px;
  color: var(--color-status-text);
  text-decoration: none; /* Do not line-through the added text */
}

/* Styles for value display span next to labels */
.form-item label output {
  font-weight: normal;
  font-size: 0.9em;
  color: var(--color-text-faded);
  margin-left: auto; /* Push value to the right */
  font-family: monospace; /* For numeric values */
  min-width: 40px; /* Ensure space for values */
  text-align: right;
}

/* File Modal Specific Styles */
#file-modal .modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between sections */
}

.file-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow sections to grow */
  padding: 15px;
  border: 1px solid var(--color-file-section-border);
  border-radius: 8px;
  background-color: var(--color-file-section-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.file-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1em;
  color: var(--color-text-default);
  border-bottom: 1px solid var(--color-file-section-border);
  padding-bottom: 10px;
}

input[type="file"] {
  display: block;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid var(--color-file-input-border);
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-file-input-bg);
  color: var(--color-text-default);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}
input[type="file"]::file-selector-button {
  background-color: var(--color-button-default-bg);
  color: var(--color-text-header);
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.2s ease;
}
input[type="file"]::file-selector-button:hover {
  background-color: var(--color-button-default-hover);
}

.button-group {
  position: relative;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  gap: 10px;
  border-top: 1px solid var(--color-border-default);
  background-color: var(--color-header-footer-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button-group button {
  color: var(--color-text-header);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease, box-shadow 0.2s ease,
    transform 0.1s ease;
  box-shadow: var(--shadow-button);
  background-color: var(--color-accent-primary);
  min-width: 60px;
}

/* Specific button colors */
#add-conversation-btn {
  background-color: var(--color-button-add-bg);
}
#add-conversation-btn:hover:not(:disabled) {
  background-color: var(--color-button-add-hover);
}

#delete-conversation-btn, #deleteSelectedButton {
  background-color: var(--color-button-delete-bg);
}
#delete-conversation-btn:hover:not(:disabled), #deleteSelectedButton:hover:not(:disabled) {
  background-color: var(--color-button-delete-hover);
}

/* General disabled state for all buttons */
.button-group button:disabled {
  background-color: var(--color-button-disabled-bg);
  cursor: not-allowed;
  opacity: 0.6;
  transform: none; /* No hover effect when disabled */
  box-shadow: none;
}

.button-group button:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.file-status-message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--color-status-message-bg);
  border: 1px solid var(--color-status-message-border);
  color: var(--color-status-message-text);
  word-wrap: break-word;
  font-size: 0.9em;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}
.file-status-message.error {
  background-color: var(--color-error-status-message-bg);
  color: var(--color-error-status-message-text);
  border-color: var(--color-error-status-message-border);
}

.file-list-container {
  border: 1px solid var(--color-file-list-item-border);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 15px;
  flex-grow: 1;
  transition: border-color 0.3s ease;
}
.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.file-list li {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-file-list-item-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-file-list-item-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.file-list li:last-child {
  border-bottom: none;
}
.file-list li:nth-child(even) {
  background-color: var(--color-file-list-item-bg-even);
}
.file-list li input[type="checkbox"] {
  margin-right: 10px;
  width: 18px; /* Standardize checkbox size */
  height: 18px;
  flex-shrink: 0; /* Prevent shrinking */
  /* Reuse custom checkbox styles from form-item.checkbox-item */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background-color: var(--color-chat-model-bg);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.file-list li input[type="checkbox"]:checked {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}
.file-list li input[type="checkbox"]:checked::after {
  content: "✓";
  color: var(--color-text-head);
  font-size: 1em;
  line-height: 1;
}

.file-list .file-name {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellips;
  white-space: nowrap;
  font-size: 0.95em;
  color: var(--color-text-default);
}
.file-list .file-meta {
  font-size: 0.8em;
  color: var(--color-file-list-meta-text);
  margin-left: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}
.empty-list-message {
  text-align: center;
  color: var(--color-status-text);
  padding: 10px;
  font-style: italic;
}
.progress-container {
  margin-bottom: 15px;
  margin-top: 15px; /* Add margin above */
  display: flex;
  align-items: center;
  gap: 10px;
}
progress {
  flex-grow: 1;
  height: 15px; /* Slightly thinner progress bar */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 5px;
}
progress::-webkit-progress-bar {
  background-color: var(--color-progress-bar-track);
  border-radius: 5px;
}
progress::-webkit-progress-value {
  background-color: var(--color-progress-bar-value);
  border-radius: 5px;
  transition: width 0.3s ease;
}
progress::-moz-progress-bar {
  background-color: var(--color-progress-bar-value);
  border-radius: 5px;
  transition: width 0.3s ease;
}
.progress-text {
  width: 50px;
  text-align: right;
  font-size: 0.9em;
  color: var(--color-text-default);
}

img {
  max-width: 100%;
  height: auto;
}

video {
  max-width: 100%;
  height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  #app-container {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-width: none;
    max-height: none;
  }

  #main-content {
    flex-direction: column;
  }

  #chat-list-column {
    flex-basis: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border-default);
    height: 30vh;
    flex-shrink: 0;
    min-width: unset; /* Remove min-width for mobile */
  }

  /* Keep the hover logic as requested, but it's not ideal for mobile.
     Consider replacing with an explicit toggle button for mobile. */
  #main-content:has(#chat-detail-column:hover) > #chat-list-column {
    height: 60px; /* Collapse to a small bar */
    border-bottom: 2px solid var(--color-accent-primary);
    overflow: hidden; /* Hide content when collapsed */
  }
  #chat-list-column:hover {
    height: 30vh !important; /* Restore height on hover */
    border-bottom-color: var(--color-border-default);
    overflow: auto; /* Allow scrolling when expanded */
  }
  /* Ensure header remains visible when collapsed */
  #main-content:has(#chat-detail-column:hover)
    > #chat-list-column
    .column
    > header {
    height: auto;
  }

  #chat-detail-column {
    flex-grow: 1;
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border-default);
    height: 70vh; /* Adjust for remaining height */
  }

  /* Adjust message bubble max-width for smaller screens */
  .chat-message {
    max-width: 90%;
  }

  #chat-input-area {
    flex-direction: column; /* Stack input elements vertically */
    align-items: stretch;
    padding: 10px;
  }

  #chat-message-input {
    width: 100%;
  }

  .indicator-column {
    flex-direction: row; /* Arrange indicators horizontally */
    justify-content: center;
    margin-top: 5px; /* Space from textarea */
  }

  #send-message-btn {
    width: 100%;
    margin-top: 10px;
  }

  /* Modals on small screens */
  .modal-content {
    width: 95%;
    max-height: 95vh;
    padding: 15px;
  }

  .form-inputs {
    grid-template-columns: 1fr; /* Single column layout for forms */
    gap: 15px;
  }

  .form-actions {
    flex-direction: column; /* Stack modal buttons */
    gap: 10px;
  }
  .form-actions button {
    width: 100%;
  }

  .button-group {
    flex-direction: column; /* Stack file action buttons */
  }
  .button-group button {
    width: 100%;
    min-width: unset;
  }
}

/* Very Small Screens (e.g., older phones in portrait) */
@media (max-width: 480px) {
  #app-header h3 {
    font-size: 1.3em;
  }

  .chat-list-item {
    padding: 10px;
  }

  .chat-message {
    padding: 10px 15px;
    font-size: 0.9em;
  }

  #chat-message-input {
    font-size: 0.9em;
  }

  .modal-content > header h4 {
    font-size: 1.2em;
  }

  .close-modal-button {
    font-size: 26px;
  }

  .file-list li {
    flex-wrap: wrap; /* Allow list items to wrap */
    gap: 5px;
  }
  .file-list .file-name,
  .file-list .file-meta {
    flex-basis: 100%; /* Make them take full width */
    margin-left: 0;
  }
  .file-list li input[type="checkbox"] {
    margin-right: 0;
  }
}