/*!*******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./temp/styles.css ***!
  \*******************************************************************/
@charset "UTF-8";
/* ======================================
   COLOR VARIABLES - CONSOLIDATED
   ====================================== */
/* Brand Colors (from branding.md) */
/* Text Colors */
/* Background Colors */
/* Status Colors - Consolidated */
/* Interactive Colors */
/* Code Colors */
/* Syntax Highlighting Colors */
/* Gray Scale - Consolidated */
/* Accent Colors - Consolidated */
/* Transparency Colors - Consolidated */
/* Utility Colors - Consolidated */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  padding: 0 1rem;
  height: 100%;
  overflow: hidden;
}

.main-content {
  flex: 1;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #f5f5f5;
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}
.main-content::-webkit-scrollbar {
  width: 8px;
}
.main-content::-webkit-scrollbar-track {
  background: transparent;
}
.main-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.main-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .main-content {
    padding: 1.5rem 1rem;
  }
}

/* Main Layout */
.main-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Menu puppet for layout */
.menu-puppet {
  width: 0;
  height: 100%;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

body.menu-open .menu-puppet {
  width: 300px;
}

/* Disable layout transition during auto-open to avoid animation on load */
body.menu-instant .menu-puppet {
  transition: none !important;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

:root {
  --header-height: 80px;
  --logo-width: 56px;
}

/* Header Styles - matching chat_window */
.header {
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 0;
  transition: margin-left 0.3s ease, width 0.3s ease;
}
.header .header-logo {
  position: fixed;
  left: 0;
  top: 0;
  height: var(--header-height);
  margin-left: 1rem;
  display: flex;
  align-items: center;
  z-index: 5;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  gap: 0.5rem;
}
.header .header-logo .logo-img {
  height: 48px;
  width: auto;
  max-height: 70%;
  display: block;
}
.header .menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  z-index: 6;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  /* Spin animation for hamburger when menu opens/closes */
}
.header .menu-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.header .menu-button .close-icon {
  display: none;
}
.header .menu-button .menu-icon {
  opacity: 1;
  visibility: visible;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}
.header .menu-button.spinning .menu-icon {
  transform: rotate(180deg);
}
.header .header-menu-puppet {
  width: 116px;
  height: 44px;
  flex-shrink: 0;
}
.header .header-content-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.header .back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.header .back-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.header .back-button .back-arrow {
  font-size: 20px;
}
.header .back-button .back-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.header-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 80px;
}

.header-info {
  text-align: center;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.header-logo-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  max-height: 70px;
}
.header-logo-center .logo-img {
  height: 40px;
  width: auto;
  max-height: 50px;
  display: block;
}

.page-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
}

.page-subtitle {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

body.menu-open .header .menu-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

/* When auto-opening menu from cookie, disable header/menu-button transitions */
body.menu-instant .header .menu-button {
  transition: none !important;
}

/* Header adjustments when side menu is open */
body.menu-open .header {
  margin-left: 300px;
  width: calc(100% - 300px);
  transition: margin-left 0.3s ease, width 0.3s ease;
}
body.menu-open .header .header-logo {
  /* Logo stays in place and gets covered by side menu */
  opacity: 1;
  visibility: visible;
}

/* Disable header layout transition during auto-open */
body.menu-instant .header {
  transition: none !important;
}

/* Ensure header content adjusts properly */
body.menu-open .header-content {
  padding-left: 1rem;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  flex-shrink: 0;
  /* Reserve space to balance the fixed left-side .header-menu-puppet (116px) so titles stay centered
     even when there are no header actions */
  min-width: 116px;
}
.header-actions .back-btn, .header-actions .profile-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #495057;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  cursor: pointer;
}
.header-actions .back-btn .material-symbols-outlined, .header-actions .profile-btn .material-symbols-outlined {
  font-size: 18px;
}
.header-actions .back-btn:hover, .header-actions .profile-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
}
.header-actions .profile-btn {
  background: rgba(0, 79, 125, 0.1);
  color: #004F7D;
  border-color: rgba(0, 79, 125, 0.15);
}
.header-actions .profile-btn:hover {
  background: rgba(0, 79, 125, 0.15);
  border-color: rgba(0, 79, 125, 0.2);
}

/* Project and Session Names */
.project-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 90%;
}

.session-name {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 85%;
}

/* Side Menu Logo Styles */
.side-menu-logo {
  display: flex;
  align-items: center;
}

.side-menu-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* Search Controls */
.search-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 16px 20px;
  margin: 0 16px;
  position: relative;
  flex-shrink: 0;
}

.search-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  flex: 1;
  padding: 8px 0;
  border: none;
  font-size: 1.1rem;
  background: transparent;
  color: #333;
}
.search-input:focus {
  outline: none;
}
.search-input::placeholder {
  color: #999;
}

.search-clear {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 38px;
  height: 38px;
  font-size: 18px;
}
.search-clear:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #666;
}
.search-clear.show {
  display: flex;
}

.search-separator {
  width: 1px;
  height: 38px;
  background-color: #e0e0e0;
  display: none;
}
.search-separator.show {
  display: block;
}

.sort-container {
  position: relative;
  display: flex;
  align-items: center;
}

.sort-btn {
  background: none;
  border: 2.5px solid #666;
  color: #666;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  padding: 0;
  position: relative;
}
.sort-btn:hover {
  background: #666;
  color: #FFFFFF;
}
.sort-btn.active {
  background: #004F7D;
  border-color: #004F7D;
  color: white;
}

.sort-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 100;
}
.sort-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  font-size: 0.9rem;
}
.sort-option:hover {
  background-color: rgba(0, 79, 125, 0.08);
  color: #004F7D;
  text-shadow: 0 0 12px rgba(0, 79, 125, 0.3);
}
.sort-option:hover .sort-direction {
  color: #004F7D;
  text-shadow: 0 0 8px rgba(0, 79, 125, 0.3);
}
.sort-option.active {
  background-color: rgba(0, 79, 125, 0.15);
  color: #004F7D;
  font-weight: 500;
  text-shadow: 0 0 8px rgba(0, 79, 125, 0.3);
}
.sort-option.active .sort-direction {
  color: #004F7D;
  text-shadow: 0 0 8px rgba(0, 79, 125, 0.3);
}

.sort-direction {
  font-size: 0.8rem;
  color: #666;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.add-project-btn {
  background: none;
  border: 2.5px solid #004F7D;
  color: #004F7D;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}
.add-project-btn:not(:disabled):hover {
  background-color: #004F7D;
  color: white;
}
.add-project-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-text-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-text {
  transform: translateY(-0.08em);
}

/* Historic Search Specific Styles */
.search-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 24px;
}
.search-section h2 {
  margin: 0 0 16px 0;
  font-size: 1.25rem;
  color: #333;
}

.search-input-area .input-group {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-input-area .input-group .search-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}
.search-input-area .input-group .search-input:focus {
  outline: none;
  border-color: #004F7D;
}
.search-input-area .input-group .search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #004F7D;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.search-input-area .input-group .search-btn:hover {
  background: #004F7D;
  transform: translateY(-1px);
}

.results-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin-bottom: 24px;
  overflow-y: scroll;
}
.results-section h2 {
  margin: 0 0 16px 0;
  font-size: 1.25rem;
  color: #333;
}

.results-meta {
  margin-bottom: 20px;
}
.results-meta .results-count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.9rem;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}
.result-card:hover {
  border-color: #004F7D;
  box-shadow: 0 4px 12px rgba(0, 79, 125, 0.1);
}
.result-card.historic-result .result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.result-card.historic-result .result-header .result-type {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.9rem;
}
.result-card.historic-result .result-header .result-type .material-symbols-outlined {
  font-size: 18px;
}
.result-card.historic-result .result-header .result-similarity {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #e8f5e8;
  color: #2e7d32;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}
.result-card.historic-result .result-header .result-similarity .material-symbols-outlined {
  font-size: 14px;
}
.result-card.historic-result .result-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}
.result-card.historic-result .result-content {
  margin-bottom: 16px;
}
.result-card.historic-result .result-content h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.result-card.historic-result .result-content .content-text {
  color: #333;
  line-height: 1.5;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #004F7D;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}
.result-card.historic-result .result-content .content-text.collapsed {
  max-height: 120px;
  overflow: hidden;
}
.result-card.historic-result .result-content .content-text.expanded {
  max-height: none;
  overflow: visible;
}
.result-card.historic-result .result-content .expand-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #004F7D;
  cursor: pointer;
  padding: 8px 0;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-top: 8px;
}
.result-card.historic-result .result-content .expand-btn:hover {
  color: #004F7D;
  transform: translateY(-1px);
}
.result-card.historic-result .result-content .expand-btn .material-symbols-outlined {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.result-card.historic-result .result-content .expand-btn:hover .material-symbols-outlined {
  transform: scale(1.1);
}
.result-card.historic-result .result-metadata {
  margin-bottom: 16px;
}
.result-card.historic-result .result-metadata h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.result-card.historic-result .result-metadata .metadata-json {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #333;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.result-card.historic-result .result-actions {
  display: flex;
  justify-content: flex-end;
}
.result-card.historic-result .result-actions .action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f5f5f5;
  color: #666;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.result-card.historic-result .result-actions .action-btn:hover {
  background: #004F7D;
  color: white;
}
.result-card.historic-result .result-actions .action-btn .material-symbols-outlined {
  font-size: 16px;
}

.loading-section {
  text-align: center;
  padding: 40px;
}
.loading-section .loading-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #666;
  font-size: 1.1rem;
}
.loading-section .loading-message .material-symbols-outlined {
  animation: spin 1s linear infinite;
}

.no-results-section {
  text-align: center;
  padding: 40px;
}
.no-results-section .no-results-message {
  color: #666;
}
.no-results-section .no-results-message .material-symbols-outlined {
  font-size: 48px;
  margin-bottom: 16px;
  color: #999;
}
.no-results-section .no-results-message h3 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}
.no-results-section .no-results-message p {
  margin: 0;
  font-size: 1rem;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffebee;
  color: #c62828;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #c62828;
  margin-bottom: 16px;
}
.error-message .material-symbols-outlined {
  font-size: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Projects List */
.projects-list {
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin: 0 16px;
  flex: 0 1 auto;
  min-height: 12rem;
  overflow-y: auto;
}
.projects-list::-webkit-scrollbar {
  width: 8px;
}
.projects-list::-webkit-scrollbar-track {
  background: transparent;
}
.projects-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.projects-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.project-item {
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 1;
  transform: translateY(0);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 1;
}
.project-item:last-child {
  border-bottom: none;
}
.project-item:hover {
  background-color: rgba(0, 79, 125, 0.08);
}
.project-item.menu-open {
  background-color: rgba(0, 79, 125, 0.08);
  z-index: 100;
}
.project-item.editing-name {
  background-color: rgba(33, 150, 243, 0.05);
  border-left: 4px solid #004F7D;
  z-index: 50;
  padding: 1.5rem 1.5rem 1rem 1.5rem;
}
.project-item.editing-name .project-content {
  pointer-events: none;
  width: 100%;
  cursor: default;
}
.project-item.editing-name .project-actions {
  opacity: 0.3;
  pointer-events: none;
}
.project-item.editing-name .project-edit-container {
  width: 100%;
  pointer-events: auto;
}
.project-item.editing-name .project-edit-container .form-input {
  transition: all 0.2s ease;
}
.project-item.editing-name .project-edit-container .form-input:focus {
  outline: none;
  border-color: #004F7D;
  box-shadow: 0 0 0 3px rgba(0, 79, 125, 0.1);
}
.project-item.editing-name .project-edit-container textarea.form-input {
  font-family: inherit;
  line-height: 1.5;
}
.project-item.editing-name .project-edit-container .file-action-btn {
  pointer-events: auto;
}
.project-item.filtering-out {
  opacity: 0;
  transform: translateY(-10px);
}
.project-item.filtering-in {
  opacity: 1;
  transform: translateY(0);
}

.project-content {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
}
.project-content:hover {
  text-decoration: none;
  color: inherit;
}
.project-content:visited {
  color: inherit;
}
.project-content:focus {
  outline: none;
}

.project-name {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  max-height: 6rem; /* Approximately 4 lines of text */
  overflow-y: auto; /* vertical scroll only */
  overflow-x: hidden; /* prevent horizontal scroll */
  white-space: normal; /* allow normal wrapping */
  overflow-wrap: anywhere; /* wrap long words/URLs */
  word-break: break-word; /* fallback for older browsers */
  hyphens: auto; /* nicer wrapping when supported */
  padding-right: 8px;
}
.project-description::-webkit-scrollbar {
  width: 4px;
}
.project-description::-webkit-scrollbar-track {
  background: transparent;
}
.project-description::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.project-description::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.project-meta {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 0.25rem;
}

.project-last-modified {
  font-size: 0.8rem;
  color: #999;
}

.project-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: relative;
}
.project-item:hover .project-actions {
  opacity: 1;
}
.project-item.menu-open .project-actions {
  opacity: 1;
}

.project-menu-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-menu-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #666;
}

.project-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 200;
}
.project-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.project-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 200;
}
.project-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.project-menu-dropdown.dropdown-up {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(10px);
}
.project-menu-dropdown.dropdown-up.show {
  transform: translateY(0);
}

.project-menu-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  font-size: 0.9rem;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.project-menu-option:hover {
  background-color: rgba(0, 79, 125, 0.08);
  color: #004F7D;
  text-shadow: 0 0 8px rgba(0, 79, 125, 0.3);
}
.project-menu-option:hover .material-symbols-outlined {
  color: #004F7D;
}
.project-menu-option .material-symbols-outlined {
  font-size: 1.1rem;
  color: #666;
  transition: all 0.2s ease;
}

.project-menu-separator {
  height: 1px;
  background-color: #e0e0e0;
  margin: 4px 0;
}

.project-dropdown-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  font-size: 0.9rem;
}
.project-dropdown-option:hover {
  background-color: rgba(0, 79, 125, 0.08);
  color: #004F7D;
  text-shadow: 0 0 12px rgba(0, 79, 125, 0.3);
}
.project-dropdown-option.archive {
  color: #d32f2f;
}
.project-dropdown-option.archive:hover {
  background-color: rgba(211, 47, 47, 0.08);
  color: #d32f2f;
  text-shadow: 0 0 12px rgba(211, 47, 47, 0.3);
}

.filtering-indicator {
  padding: 2rem;
  text-align: center;
  color: #999;
  font-size: 0.9rem;
  display: none;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: #999;
  min-height: 300px;
}
.empty-state .material-symbols-outlined {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.empty-state h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #666;
}
.empty-state p {
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 400px;
}

/* Form Styles */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: #004F7D;
  background-color: #f8f9fa;
}
.form-input::placeholder {
  color: #999;
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* File Management */
.files-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 1rem;
}

.files-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}
.files-section-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}

.files-list {
  flex: 1;
  border-radius: 8px;
  position: relative;
  height: max-content;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  overflow: hidden !important;
  max-height: none !important;
  transition: all 0.2s ease;
}
.files-list:not(:has(.file-item)) {
  background: none;
  border: none;
}
.files-list.drag-over {
  border-color: #004F7D;
  background-color: rgba(33, 150, 243, 0.05);
  z-index: 10;
}
.files-list::-webkit-scrollbar {
  width: 8px;
}
.files-list::-webkit-scrollbar-track {
  background: transparent;
}
.files-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.files-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.file-upload-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
  position: relative;
  margin-bottom: 1rem;
  border: 2px dashed #e0e0e0;
  background-color: #f8f9fa;
  text-align: center;
}
.file-upload-container:hover {
  border-color: #004F7D;
  background-color: rgba(0, 79, 125, 0.1);
}
.file-upload-container.drag-over {
  border-color: #004F7D;
  background-color: rgba(0, 79, 125, 0.1);
  border-style: solid;
  z-index: 10;
}

.file-upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: none;
  border: none;
  color: #666;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  width: 100%;
  height: 100%;
}

.file-upload-text {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  background-color: white;
  transition: all 0.2s ease;
  position: relative;
}
.file-item:last-child {
  border-bottom: none;
}
.file-item:hover {
  background-color: rgba(0, 79, 125, 0.08);
  z-index: 1;
}
.files-list.drag-over .file-item {
  opacity: 0.3;
  pointer-events: none;
}
.file-item.menu-open {
  background-color: rgba(0, 79, 125, 0.08);
  z-index: 100;
}
.file-item.filtering-out {
  opacity: 0;
  transform: translateY(-10px);
}
.file-item.filtering-in {
  opacity: 1;
  transform: translateY(0);
}
.file-item.new-file {
  background-color: rgba(76, 175, 80, 0.1);
  border-left: 4px solid #388e3c;
  z-index: 2;
}
.file-item.new-file:hover {
  background-color: rgba(76, 175, 80, 0.3);
}
.file-item.new-file .file-item-name {
  color: #2e7d32;
  font-weight: 500;
}
.file-item.new-file .file-item-details {
  color: #2e7d32;
}
.file-item.renamed-file {
  background-color: rgba(0, 79, 125, 0.1);
  border-left: 4px solid #004F7D;
  z-index: 2;
}
.file-item.renamed-file:hover {
  background-color: rgba(0, 79, 125, 0.1);
}
.file-item.modified-file {
  background-color: rgba(255, 193, 7, 0.05);
  border-left: 4px solid #ffc107;
  z-index: 2;
}
.file-item.modified-file:hover {
  background-color: rgba(255, 193, 7, 0.1);
}
.file-item.pending-deletion {
  background-color: #f8f9fa;
  border-left: 4px solid #d32f2f;
  z-index: 2;
}
.file-item.pending-deletion:hover {
  background-color: rgba(244, 67, 54, 0.05);
}
.file-item.pending-deletion .file-item-name {
  text-decoration: line-through;
  color: #999;
}
.file-item.pending-deletion .file-item-details {
  color: #999;
}
.file-item.pending-deletion .file-action-btn.download,
.file-item.pending-deletion .file-action-btn.edit {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.file-item-info {
  flex: 1;
  min-width: 0;
}

.file-item-name {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.25rem;
  word-break: break-word;
}

.file-item-details {
  font-size: 0.85rem;
  color: #666;
}

.file-item-notes {
  font-size: 0.85rem;
  color: #999;
  font-style: italic;
  margin-top: 4px;
  padding: 2px 0;
  border-radius: 2px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.file-item-notes:hover {
  background-color: #f5f5f5;
}

.file-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 1rem;
}

.file-action-btn {
  background: none;
  border: 2px solid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
  padding: 0;
}
.file-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.file-action-btn.download {
  border-color: #666;
  color: #666;
}
.file-action-btn.download:not(:disabled):hover {
  background: #666;
  color: white;
}
.file-action-btn.remove {
  border-color: #dc3545;
  color: #dc3545;
}
.file-action-btn.remove:not(:disabled):hover {
  background: #dc3545;
  color: white;
}
.file-action-btn.edit {
  border-color: #666;
  color: #666;
}
.file-action-btn.edit:not(:disabled):hover {
  background: #666;
  color: white;
}
.file-action-btn.undo {
  border-color: #28a745;
  color: #28a745;
}
.file-action-btn.undo:not(:disabled):hover {
  background: #28a745;
  color: white;
}
.file-action-btn.edit-mode-submit {
  border-color: #28a745;
  color: #28a745;
}
.file-action-btn.edit-mode-submit:not(:disabled):hover {
  background: #28a745;
  color: white;
}

.add-another-file-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 1.5rem;
  border: none;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  font-family: inherit;
  font-size: 1rem;
  color: #004F7D;
  font-weight: 500;
  text-align: left;
}
.add-another-file-container:last-child {
  border-bottom: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.add-another-file-container:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.add-another-file-container:hover {
  background-color: rgba(0, 79, 125, 0.08);
  color: #004F7D;
}
.add-another-file-container:focus {
  outline: none;
  background-color: rgba(0, 79, 125, 0.1);
  color: #004F7D;
}
.add-another-file-container .material-symbols-outlined {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.no-files {
  text-align: center;
  padding: 2rem;
  color: #999;
  font-style: italic;
  background-color: white;
}

/* File item follows add-another-file-container */
.file-item + .add-another-file-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.drag-feedback {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 79, 125, 0.1);
  border: 2px dashed #004F7D;
  border-radius: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #004F7D;
  font-weight: 500;
  font-size: 1rem;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
}
.drag-feedback.show {
  display: flex;
}
.drag-feedback .material-symbols-outlined {
  font-size: 2rem;
}

/* Generic badge styles for pill labels (used in Users page) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.8rem;
  line-height: 1.2;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 500;
}

.badge-success {
  background: #e6f4ea;
  color: #1e7e34;
  border-color: rgba(40, 167, 69, 0.3);
}

.badge-danger {
  background: #fdecea;
  color: #b23a3a;
  border-color: rgba(220, 53, 69, 0.3);
}

.file-upload-container.drag-over .drag-feedback,
.files-list.drag-over .drag-feedback {
  display: flex;
}

.file-upload-container.drag-over .file-upload-button,
.files-list.drag-over .file-upload-button,
.files-list.drag-over .file-item,
.files-list.drag-over .no-files {
  opacity: 0.3;
}

.form-input[readonly],
.form-input:read-only,
.auth-card .form-input[readonly],
.auth-card .form-input:read-only {
  background-color: #f3f4f6 !important;
  color: #999 !important;
  border-color: #e0e0e0 !important;
  cursor: not-allowed;
}

.form-input[readonly]:focus,
.form-input:read-only:focus,
.auth-card .form-input[readonly]:focus,
.auth-card .form-input:read-only:focus {
  border-color: #e0e0e0 !important;
  background-color: #f3f4f6 !important;
  box-shadow: none !important;
}

.form-error,
.error-display {
  display: block;
  background-color: #fdecea;
  color: #a94442;
  border: 2px solid #f5c6cb;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 8px 0 12px 0;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}

.stable-error {
  min-height: 44px;
}

.form-error a,
.error-display a {
  color: #a94442;
  text-decoration: underline;
}

/* Modal styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal {
  background-color: #FFFFFF;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.modal::-webkit-scrollbar {
  width: 8px;
}
.modal::-webkit-scrollbar-track {
  background: transparent;
}
.modal::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.modal::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.modal-title {
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
}

.close-modal {
  background: none;
  border: 2.5px solid #666;
  color: #666;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.close-modal:hover {
  background: #666;
  color: #FFFFFF;
}

.modal-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.modal-scroll-container {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
  margin-right: -8px;
  flex: 1;
  min-height: 200px;
}
.modal-scroll-container.loading-overlay-active {
  overflow: hidden !important;
}
.modal-scroll-container::-webkit-scrollbar {
  width: 8px;
}
.modal-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}
.modal-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.modal-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

#modifyFilesModal .modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-width: 800px; /* Increased width for the modify files modal */
  overflow: hidden;
}

#modifyFilesModal .modal-scroll-container {
  flex: 1;
  overflow-y: auto;
  max-height: none;
  min-height: 0;
}

#modalOverlay .modal {
  max-width: 800px; /* Match the modify files modal width */
}

.modal-section-header {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #004F7D;
}

.project-info-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

.project-info-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: help;
}

.project-info-description {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
  max-height: 3rem; /* 2 lines * 1.5 line-height = 3rem */
  overflow-y: auto;
  word-wrap: break-word;
}
.project-info-description::-webkit-scrollbar {
  width: 4px;
}
.project-info-description::-webkit-scrollbar-track {
  background: transparent;
}
.project-info-description::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.project-info-description::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e0e0e0;
  background-color: transparent;
}

.cancel-btn {
  background: none;
  border: 2px solid #999;
  color: #999;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.cancel-btn:hover {
  background-color: #999;
  color: white;
}

.archive-btn {
  background-color: #d32f2f;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.archive-btn:hover {
  background-color: #b71c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

.create-btn {
  width: 100%;
  background-color: #004F7D;
  color: white;
  border: none;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1.5rem;
}
.create-btn:hover {
  background-color: #004F7D;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 79, 125, 0.3);
}
.create-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.update-files-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  background: none;
  border: 2.5px solid #004F7D;
  color: #004F7D;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}
.update-files-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.update-files-btn:hover {
  background-color: #004F7D;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 79, 125, 0.3);
}
.update-files-btn:hover::before {
  left: 100%;
}
.update-files-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 79, 125, 0.3);
}

/* Success modal styles */
.success-content {
  text-align: center;
  padding: 2rem 0;
}

.success-icon {
  width: 80px;
  height: 80px;
  background-color: #28a745;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  margin: 0 auto 1.5rem;
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.success-content p {
  color: #333;
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
}

.redirect-message {
  color: #666 !important;
  font-size: 0.9rem !important;
  font-style: italic;
}

.submitting-content {
  padding: 2rem;
  text-align: center;
  color: #666;
}
.submitting-content p {
  margin: 1rem 0 0 0;
  font-size: 1rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #004F7D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Loading overlay for modify files modal */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 8px;
}
.loading-overlay .loading-spinner {
  margin-bottom: 1rem;
}
.loading-overlay p {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.error-display {
  background-color: #ffebee;
  color: #c62828;
  padding: 1rem;
  margin: 0 1.5rem 1rem 1.5rem;
  border-radius: 8px;
  border: 1px solid #ffcdd2;
  font-size: 0.9rem;
  line-height: 1.4;
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: all 0.3s ease;
  max-width: 400px;
}
.notification.show {
  transform: translateX(0);
}
.notification.success {
  background-color: #4caf50;
}
.notification.error {
  background-color: #f44336;
}
.notification.info {
  background-color: #004F7D;
}

/* ======================================
   CHAT WINDOW SPECIFIC STYLES
   ====================================== */
/* Side Menu */
.side-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  background: #FFFFFF;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 15;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body.menu-instant .side-menu {
  transition: none !important;
}

body.menu-open .side-menu {
  transform: translateX(0);
}

/* Side Menu Header */
.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid #e0e0e0;
  background-color: #FFFFFF;
  flex-shrink: 0;
  min-height: 80px;
}

.side-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  /* Spin animation for side menu close button - opposite direction of hamburger */
}
.side-menu-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.side-menu-close .material-symbols-outlined {
  font-size: 20px;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}
.side-menu-close.spinning .material-symbols-outlined {
  transform: rotate(-180deg);
}

.side-menu-buttons-container {
  padding: 0.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.side-menu-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  color: #333;
  width: 100%;
}
.side-menu-button:hover {
  background-color: rgba(0, 79, 125, 0.08);
  color: #004F7D;
}
.side-menu-button.active {
  background-color: rgba(0, 79, 125, 0.15);
  color: #004F7D;
  cursor: default;
}
.side-menu-button:disabled {
  opacity: 1;
  pointer-events: none;
}
.side-menu-button.active:hover, .side-menu-button:disabled:hover {
  background-color: rgba(0, 79, 125, 0.15);
  color: #004F7D;
}
.side-menu-button .material-symbols-outlined {
  font-size: 20px;
}

.side-menu-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 4px 16px;
  border-radius: 1px;
}

.sessions-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0.5rem;
  margin-top: 0;
}
.sessions-list::-webkit-scrollbar {
  width: 8px;
}
.sessions-list::-webkit-scrollbar-track {
  background: transparent;
}
.sessions-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.sessions-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.session-item {
  padding: 1rem;
  margin: 0 1rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.session-item:hover {
  background: rgba(0, 79, 125, 0.08);
}
.session-item.active {
  background: rgba(0, 79, 125, 0.15);
  border-left: 3px solid #004F7D;
}
.session-item.menu-open {
  background: rgba(0, 79, 125, 0.08);
}
.session-item.menu-open .session-menu-button {
  opacity: 1;
}
.session-item:hover .session-menu-button {
  opacity: 1;
}

.session-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.session-content:hover {
  text-decoration: none;
  color: inherit;
}
.session-content:visited {
  color: inherit;
}
.session-content:focus {
  outline: none;
}

.session-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.session-name {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  word-break: break-word;
}

.session-date {
  font-size: 0.8rem;
  color: #666;
  margin-top: 2px;
}

.session-menu-button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: -2px;
}
.session-menu-button:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

.session-menu-dropdown {
  position: absolute;
  top: 55%;
  right: 1rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}
.session-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.session-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  color: #333;
}
.session-menu-item:hover {
  background-color: rgba(0, 79, 125, 0.08);
  color: #004F7D;
  text-shadow: 0 0 12px rgba(0, 79, 125, 0.6);
}
.session-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}
.session-menu-item:last-child {
  border-radius: 0 0 8px 8px;
}
.session-menu-item.single {
  border-radius: 8px;
}
.session-menu-item .material-symbols-outlined {
  font-size: 18px;
  color: #666;
}
.session-menu-item:hover .material-symbols-outlined {
  color: #004F7D;
}

/* Chat Area */
.chat-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-behavior: smooth;
  position: relative;
  container-type: inline-size;
}
.chat-area::-webkit-scrollbar {
  width: 8px;
}
.chat-area::-webkit-scrollbar-track {
  background: transparent;
}
.chat-area::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.chat-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Drag and Drop Overlay */
.drag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 79, 125, 0.1);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}
.drag-overlay.active {
  display: flex;
}

.drag-message {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: 2px dashed #004F7D;
  position: relative;
  pointer-events: auto; /* Allow interactions with the message box */
}
.drag-message .material-symbols-outlined {
  font-size: 3rem;
  color: #004F7D;
}

.drag-close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.drag-close-button:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}
.drag-close-button .material-symbols-outlined {
  font-size: 20px !important;
  color: inherit;
}

.drag-message-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
}

/* Input Area Overrides */
.input-area {
  background-color: transparent;
  padding: 0.25rem 0 1rem;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}

.input-container {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 16px 20px;
  position: relative;
  max-height: 30vh;
  min-height: fit-content;
  margin-top: auto; /* Push to bottom of available space */
}

.input-wrapper {
  position: relative;
  flex: 1;
}

.message-input-editor {
  position: relative;
  width: 100%;
  padding: 8px 0;
  border: none;
  min-height: 24px;
  max-height: calc(30vh - 100px);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 2px;
  overflow-y: auto;
  background: transparent;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  /* Custom placeholder implementation for contenteditable */
  /* Prevent placeholder from showing when there's content */
  /* File reference styling */
  /* File reference being typed (incomplete) */
  /* File search field - the new file tagging system */
  /* Active file reference state - subtle editor styling */
  /* Custom text decorations */
  /* Ensure proper line breaks and spacing */
  /* Handle pasted content gracefully */
  /* Remove default margins from pasted elements */
  /* Maintain text flow */
}
.message-input-editor:focus {
  outline: none;
}
.message-input-editor:empty::before {
  content: attr(data-placeholder);
  color: #999;
  pointer-events: none;
  position: absolute;
}
.message-input-editor:not(:empty)::before {
  display: none;
}
.message-input-editor .file-reference-chip {
  display: inline-block;
  background: rgba(0, 79, 125, 0.1);
  color: #004F7D;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(0, 79, 125, 0.15);
  margin: 0 2px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.message-input-editor .file-reference-chip.non-editable {
  background: #f5f5f5;
  color: #666;
  border-color: #ddd;
}
.message-input-editor .file-reference-chip:hover {
  background: rgba(0, 79, 125, 0.15);
}
.message-input-editor .file-reference-typing {
  background: rgba(0, 79, 125, 0.1);
  color: #004F7D;
  border-radius: 3px;
  padding: 1px 3px;
}
.message-input-editor .file-search-field {
  display: inline-block;
  background: rgba(0, 79, 125, 0.1);
  color: #004F7D;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid rgba(0, 79, 125, 0.3);
  margin: 0 1px;
  cursor: text;
  user-select: text;
  white-space: nowrap;
  outline: none;
  min-width: 20px;
}
.message-input-editor .file-search-field:focus {
  background: rgba(0, 79, 125, 0.15);
  border-color: #004F7D;
  box-shadow: 0 0 0 2px rgba(0, 79, 125, 0.3);
}
.message-input-editor .file-search-field:hover {
  background: rgba(0, 79, 125, 0.08);
}
.message-input-editor.has-active-file-reference {
  background: rgba(0, 79, 125, 0.1);
  border: 1px solid rgba(0, 79, 125, 0.1);
  border-radius: 4px;
}
.message-input-editor .text-decoration {
  /* Markdown formatting */
}
.message-input-editor .text-decoration.mention {
  background: rgba(156, 39, 176, 0.1);
  color: #9c27b0;
  border-radius: 3px;
  padding: 1px 3px;
}
.message-input-editor .text-decoration.keyword {
  background: rgba(255, 152, 0, 0.1);
  color: #ff9800;
  font-weight: 500;
}
.message-input-editor .text-decoration.code-inline {
  background: #f5f5f5;
  color: #d32f2f;
  font-family: "Fira Code", "Monaco", "Menlo", monospace;
  font-size: 0.9em;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}
.message-input-editor .text-decoration.markdown-bold {
  font-weight: bold;
  background: rgba(0, 79, 125, 0.05);
  border-radius: 2px;
}
.message-input-editor .text-decoration.markdown-italic {
  font-style: italic;
  background: rgba(156, 39, 176, 0.05);
  border-radius: 2px;
}
.message-input-editor div {
  margin: 0;
}
.message-input-editor div:not(:last-child) {
  margin-bottom: 0;
}
.message-input-editor * {
  max-width: 100%;
}
.message-input-editor p, .message-input-editor div, .message-input-editor span {
  margin: 0;
  padding: 0;
}
.message-input-editor br {
  line-height: 1.5;
}

.button-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 2px;
  margin-top: auto;
}

.attachment-button {
  background: none;
  border: 2.5px solid #666;
  color: #666;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attachment-button .material-symbols-outlined {
  font-size: 1.5rem;
  transition: color 0.2s ease;
}
.attachment-button:hover {
  background: #666;
  color: white;
}
.attachment-button:disabled {
  background-color: #ddd;
  border-color: #FFFFFF;
  color: #FFFFFF;
  cursor: not-allowed;
}
.attachment-button:disabled:hover {
  background-color: #ddd;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.send-button {
  background: none;
  border: 2.5px solid #004F7D;
  color: #004F7D;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}
.send-button .material-symbols-outlined {
  font-size: 1.5rem;
  transition: transform 0.2s ease;
}
.send-button:hover {
  background-color: #004F7D;
  color: white;
}
.send-button:disabled {
  background-color: #999;
  border-color: #999;
  color: white;
  cursor: not-allowed;
}
.send-button:disabled:hover {
  background-color: #999;
  border-color: #999;
  color: white;
}

.file-input {
  display: none;
}

.file-preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  height: 0;
  min-height: 0;
  opacity: 0;
  transition: all 0.2s ease;
  padding: 0;
  pointer-events: none;
  overflow: hidden;
}
.file-preview-area.has-files {
  height: auto;
  margin-top: 8px;
  margin-bottom: 16px;
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}

.file-bubble {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16px;
  padding: 6px 12px;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: box-shadow 0.2s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.file-bubble:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.file-bubble:hover .remove-file {
  opacity: 1;
}

.file-icon {
  color: #666;
  display: flex;
  align-items: center;
}
.file-icon .material-symbols-outlined {
  font-size: 16px;
}

.file-name {
  font-size: 0.9rem;
  color: #333;
  display: flex;
  align-items: center;
  transform: translateY(-0.15em);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.remove-file {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: none;
  color: #ff4444;
  border: 2px solid #ff4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: all 0.2s ease;
  line-height: 0;
  padding: 0;
}
.remove-file .material-symbols-outlined {
  font-size: 14px;
}
.remove-file:hover {
  background: #ff4444;
  color: white;
}

/* File Upload Error Notification */
.file-upload-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  color: #c33;
  font-size: 0.9rem;
  animation: slideInError 0.3s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.file-upload-error .error-close {
  background: none;
  border: none;
  color: #c33;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  margin-left: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-upload-error .error-close:hover {
  background: rgba(204, 51, 51, 0.1);
}
.file-upload-error .error-close .material-symbols-outlined {
  font-size: 16px;
}

@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Scroll to Bottom Button */
.scroll-bottom-button {
  position: fixed;
  bottom: calc(120px + 1rem);
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: white;
  border: none;
  color: #666;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  /* Responsive positioning for small screens */
}
@media (max-width: 768px) {
  .scroll-bottom-button {
    bottom: calc(105px + 1rem);
  }
}
.scroll-bottom-button.visible {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.scroll-bottom-button:hover {
  background-color: #f5f5f5;
  color: #333;
  transform: translateX(-50%) translateY(-2px) scale(1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.scroll-bottom-button .material-symbols-outlined {
  font-size: 20px;
}

/* Message Styles */
.message {
  max-width: 70%;
  min-width: 640px;
  padding: 0.2rem 0;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: auto;
  overflow-wrap: break-word;
  /* Reduce layout shifts during animation */
  contain: layout style;
  /* Use container query to handle when chat area becomes too narrow */
  /* Additional container query for very narrow chat areas */
  /* Fallback media query for browsers without container query support */
}
@container (max-width: 750px) {
  .message {
    max-width: calc(100% - 32px);
    min-width: auto;
  }
}
@container (max-width: 500px) {
  .message {
    max-width: calc(100% - 16px);
    min-width: auto;
  }
}
@media (max-width: 750px) {
  .message {
    max-width: calc(100% - 32px);
    min-width: auto;
  }
}

.message-date {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
  opacity: 0.8;
}

.user-message {
  color: #333;
  align-self: flex-end;
  text-align: left;
  width: fit-content;
  min-width: auto;
  /* Ensure all code blocks in user messages are full width */
  /* Also ensure user messages containing code blocks expand to accommodate them */
  /* Media query override for user message code blocks on small screens */
}
.user-message:hover .reaction-button {
  opacity: 1;
}
.user-message md-block {
  width: fit-content;
  min-width: auto;
}
.user-message .message-attachment {
  justify-content: flex-start;
  width: fit-content;
  min-width: auto;
}
.user-message .message-date {
  text-align: right;
  width: 100%;
}
.user-message pre[class*=language-],
.user-message pre[data-language],
.user-message pre.richtext-block {
  width: 100%;
  max-width: none;
  min-width: 640px;
}
.user-message:has(pre[class*=language-]), .user-message:has(pre[data-language]), .user-message:has(pre.richtext-block) {
  width: 100%;
  max-width: 70%;
  min-width: 640px;
}
@media (max-width: 750px) {
  .user-message pre[class*=language-],
  .user-message pre[data-language],
  .user-message pre.richtext-block {
    width: calc(100% - 32px);
    min-width: auto;
  }
  .user-message:has(pre[class*=language-]), .user-message:has(pre[data-language]), .user-message:has(pre.richtext-block) {
    width: calc(100% - 32px);
    min-width: auto;
    max-width: calc(100% - 32px);
  }
}

.agent-message {
  color: #333;
  align-self: flex-start;
  position: relative;
  /* Ensure richtext blocks override message width constraints */
}
.agent-message:hover .reaction-button {
  opacity: 1;
}
.agent-message pre.richtext-block {
  max-width: none;
  width: 100%;
}

/* Markdown Content Styles */
.message md-block {
  display: inline-block;
  width: 100%;
}
.message md-block p {
  margin: 0;
  display: inline;
}
.message md-block pre {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow-x: auto;
}
.message md-block code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}
.message md-block pre code {
  background: none;
  padding: 0;
}

/* Code Block Styles */
.message pre[class*=language-] {
  margin: 0.5rem 0;
  padding: 1rem;
  border-radius: 6px;
  background: #f0f2f5;
  border: 1px solid #e1e4e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-top: 2.5rem;
  line-height: 1.4;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* Collapsible state */
  /* Add language header styles */
  /* Collapsible header hover */
}
.message pre[class*=language-].collapsible.collapsed {
  max-height: 18em;
  position: relative;
}
.message pre[class*=language-].collapsible.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8em;
  background: linear-gradient(transparent 20%, rgba(240, 242, 245, 0.8) 60%, #f0f2f5 100%);
  pointer-events: none;
  z-index: 1;
}
.message pre[class*=language-].collapsible.expanded {
  max-height: 200em;
}
.message pre[class*=language-].collapsible.collapsed .code-expand-overlay {
  display: flex;
}
.message pre[class*=language-].collapsible.expanded .code-expand-overlay {
  display: none;
}
.message pre[class*=language-]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 1rem;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 0 0;
  text-transform: capitalize;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 2;
}
.message pre[class*=language-].collapsible::before:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Update code block styles for showdown output */
.message pre:has(code[class*=language-]),
.message pre[data-language] {
  margin: 0.5rem 0;
  padding: 1rem;
  border-radius: 6px;
  background: #f0f2f5;
  border: 1px solid #e1e4e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-top: 2.5rem;
  line-height: 1.4;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* Collapsible state */
  /* Add language header styles for both formats */
  /* Collapsible header hover */
}
.message pre:has(code[class*=language-]).collapsible.collapsed,
.message pre[data-language].collapsible.collapsed {
  max-height: 18em;
  position: relative;
}
.message pre:has(code[class*=language-]).collapsible.collapsed::after,
.message pre[data-language].collapsible.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8em;
  background: linear-gradient(transparent 20%, rgba(240, 242, 245, 0.8) 60%, #f0f2f5 100%);
  pointer-events: none;
  z-index: 1;
}
.message pre:has(code[class*=language-]).collapsible.expanded,
.message pre[data-language].collapsible.expanded {
  max-height: 200em;
}
.message pre:has(code[class*=language-]).collapsible.collapsed .code-expand-overlay,
.message pre[data-language].collapsible.collapsed .code-expand-overlay {
  display: flex;
}
.message pre:has(code[class*=language-]).collapsible.expanded .code-expand-overlay,
.message pre[data-language].collapsible.expanded .code-expand-overlay {
  display: none;
}
.message pre:has(code[class*=language-])::before,
.message pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 1rem;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 0 0;
  text-transform: capitalize;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 2;
}
.message pre:has(code[class*=language-]).collapsible::before:hover,
.message pre[data-language].collapsible::before:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers without :has() support */
.message pre {
  margin: 0.5rem 0;
  padding: 1rem;
  border-radius: 6px;
  background: #f0f2f5;
  border: 1px solid #e1e4e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-top: 2.5rem;
  text-wrap: auto;
  overflow-wrap: break-word;
  line-height: 1.4;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* Collapsible state */
}
.message pre.collapsible.collapsed {
  max-height: 18em;
  position: relative;
}
.message pre.collapsible.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8em;
  background: linear-gradient(transparent 20%, rgba(240, 242, 245, 0.8) 60%, #f0f2f5 100%);
  pointer-events: none;
  z-index: 1;
}
.message pre.collapsible.expanded {
  max-height: 200em;
}
.message pre.collapsible.collapsed .code-expand-overlay {
  display: flex;
}
.message pre.collapsible.expanded .code-expand-overlay {
  display: none;
}

.message code[class*=language-] {
  font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 0.9em;
  text-shadow: none;
  background: none;
  padding: 0;
  color: #333;
  text-wrap: auto;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.message :not(pre) > code {
  background: #f0f2f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  border: 1px solid #e1e4e8;
  font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: #333;
}

/* Rich Text Block Styles */
.message pre.richtext-block {
  margin: 0.5rem 0;
  padding: 1rem;
  border-radius: 6px;
  background: #f0f2f5;
  border: 1px solid #e1e4e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-top: 2.5rem;
  line-height: 1.4;
  width: 100%;
  max-width: none;
  min-width: 640px;
  white-space: normal;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* Collapsible state for rich text blocks */
  /* Collapsible header hover for rich text */
  /* Collapsed state by default */
  /* Responsive styles for richtext blocks */
  /* Fallback media query for browsers without container query support */
}
.message pre.richtext-block.collapsible.collapsed {
  max-height: 18em;
  position: relative;
}
.message pre.richtext-block.collapsible.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8em;
  background: linear-gradient(transparent 20%, rgba(240, 242, 245, 0.8) 60%, #f0f2f5 100%);
  pointer-events: none;
  z-index: 1;
}
.message pre.richtext-block.collapsible.expanded {
  max-height: 200em;
}
.message pre.richtext-block.collapsible.collapsed .code-expand-overlay {
  display: flex;
}
.message pre.richtext-block.collapsible.expanded .code-expand-overlay {
  display: none;
}
.message pre.richtext-block::before {
  content: "Rich Text";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 1rem;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px 5px 0 0;
  text-transform: capitalize;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 2;
}
.message pre.richtext-block.collapsible::before:hover {
  background: rgba(0, 0, 0, 0.1);
}
.message pre.richtext-block .markdown-content {
  font-family: inherit;
  line-height: 1.4;
  background: none;
  padding: 0;
  color: #333;
  font-size: 0.9em;
  text-wrap: auto;
  overflow-wrap: break-word;
}
.message pre.richtext-block .markdown-content p {
  margin: 0.5rem 0;
}
.message pre.richtext-block .markdown-content h1, .message pre.richtext-block .markdown-content h2, .message pre.richtext-block .markdown-content h3, .message pre.richtext-block .markdown-content h4, .message pre.richtext-block .markdown-content h5, .message pre.richtext-block .markdown-content h6 {
  margin: 1rem 0 0.5rem 0;
  font-weight: 600;
}
.message pre.richtext-block .markdown-content ul, .message pre.richtext-block .markdown-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}
.message pre.richtext-block .markdown-content blockquote {
  margin: 0.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid #ddd;
  color: #666;
  font-style: italic;
}
.message pre.richtext-block .markdown-content code {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}
.message pre.richtext-block .markdown-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.5rem 0;
}
.message pre.richtext-block .markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
}
.message pre.richtext-block .markdown-content th, .message pre.richtext-block .markdown-content td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
}
.message pre.richtext-block .markdown-content th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}
@container (max-width: 750px) {
  .message pre.richtext-block {
    min-width: auto;
    max-width: calc(100% - 32px);
  }
}
@container (max-width: 500px) {
  .message pre.richtext-block {
    max-width: calc(100% - 16px);
  }
}
@media (max-width: 750px) {
  .message pre.richtext-block {
    min-width: auto;
    max-width: calc(100% - 32px);
  }
}

/* Syntax Highlighting Token Colors */
.message .token.comment, .message .token.prolog, .message .token.doctype, .message .token.cdata {
  color: #5c6370;
}
.message .token.punctuation {
  color: #4a4a4a;
}
.message .token.property, .message .token.tag, .message .token.boolean, .message .token.number, .message .token.constant, .message .token.symbol, .message .token.deleted {
  color: #e45649;
}
.message .token.selector, .message .token.attr-name, .message .token.string, .message .token.char, .message .token.builtin, .message .token.inserted {
  color: #50a14f;
}
.message .token.operator, .message .token.entity, .message .token.url {
  color: #0184bc;
}
.message .token.atrule, .message .token.attr-value, .message .token.keyword {
  color: #a626a4;
}
.message .token.function, .message .token.class-name {
  color: #c18401;
}
.message .token.regex, .message .token.important, .message .token.variable {
  color: #e45649;
}
.message .token.operator {
  background: none;
}

.message .language-css .token.string,
.message .style .token.string {
  color: #0184bc;
}

/* Copy Button Styles */
.code-copy-button {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  opacity: 1;
  z-index: 3;
  height: 22px;
  white-space: nowrap;
}
.code-copy-button::before {
  content: "content_copy";
  font-family: "Material Icons";
  font-size: 14px;
  line-height: 1;
}
.code-copy-button:hover {
  background: white;
  color: #004F7D;
  border-color: #004F7D;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.code-copy-button.copied {
  background: #004F7D;
  color: white;
  border-color: #004F7D;
}
.code-copy-button.copied::before {
  content: "done";
}

/* Code Block Expand/Collapse Controls */
.code-expand-overlay {
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 79, 125, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.code-expand-overlay:hover {
  background: #004F7D;
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.code-expand-overlay .expand-icon {
  font-size: 16px;
  font-family: "Material Symbols Outlined";
}

.code-collapse-arrow {
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  color: #666;
  font-size: 16px;
  font-family: "Material Symbols Outlined";
  transition: transform 0.3s ease;
  z-index: 3;
  cursor: pointer;
}
.code-collapse-arrow.expanded {
  transform: rotate(0deg);
}
.code-collapse-arrow.rotating-first {
  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1); /* ease-in */
}
.code-collapse-arrow.rotating-second {
  transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1); /* ease-out */
}
.code-collapse-arrow.jumping {
  transition: none;
}
.code-collapse-arrow.animating {
  animation: arrow-rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards, icon-switch 0.3s linear forwards;
}
.code-collapse-arrow.animating-reverse {
  animation: arrow-rotate-reverse 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards, icon-switch 0.3s linear forwards;
}
.code-collapse-arrow:hover {
  color: #004F7D;
}

/* Arrow rotation animations */
@keyframes arrow-rotate {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(90deg);
  }
  33.1% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes arrow-rotate-reverse {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(90deg);
  }
  33.1% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Animation event markers */
@keyframes icon-switch {
  0%, 32% {
    --icon-switch: 0;
  }
  33%, 100% {
    --icon-switch: 1;
  }
}
/* Adjust copy button position when collapse arrow is present */
.message pre.collapsible .code-copy-button {
  right: 3rem;
}

/* Table Styling */
.message table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e1e4e8;
  /* Responsive table on smaller screens */
}
.message table th {
  background: #f8f9fa;
  color: #333;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid #e1e4e8;
  position: relative;
}
.message table th:not(:last-child) {
  border-right: 1px solid #e1e4e8;
}
.message table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: top;
  line-height: 1.5;
}
.message table td:not(:last-child) {
  border-right: 1px solid #f0f2f5;
}
.message table tbody tr {
  /* Alternate row styling for better readability */
}
.message table tbody tr:hover {
  background: rgba(244, 67, 54, 0.05);
}
.message table tbody tr:last-child td {
  border-bottom: none;
}
.message table tbody tr:nth-child(even) {
  background: rgba(248, 249, 250, 0.5);
}
.message table tbody tr:nth-child(even):hover {
  background: rgba(244, 67, 54, 0.05);
}
@media (max-width: 750px) {
  .message table {
    font-size: 0.9rem;
  }
  .message table th, .message table td {
    padding: 8px 12px;
  }
}

/* Blockquote Styling */
.message blockquote {
  margin: 1rem 0;
  padding: 16px 20px;
  background: rgba(0, 79, 125, 0.05);
  border-left: 4px solid #004F7D;
  border-radius: 0 6px 6px 0;
  position: relative;
  font-style: italic;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.message blockquote::before {
  position: absolute;
  top: 8px;
  left: -2px;
  font-size: 2rem;
  color: rgba(0, 79, 125, 0.3);
  font-family: serif;
  line-height: 1;
}
.message blockquote p {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}
.message blockquote p:not(:last-child) {
  margin-bottom: 0.5rem;
}

/* List Styling */
.message ol {
  list-style-position: outside;
  padding-left: 1.5em;
  margin-left: 0;
  /* Nested list styling with different numbering systems */
}
.message ol ol {
  list-style-type: lower-alpha;
  padding-left: 1.5em;
}
.message ol ol ol {
  list-style-type: lower-roman;
  padding-left: 1.5em;
}
.message ol ol ol ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}
.message ol ol ol ol ol {
  list-style-type: lower-alpha;
  padding-left: 1.5em;
}
.message ol ol ol ol ol ol {
  list-style-type: lower-roman;
  padding-left: 1.5em;
}
.message ol > li::marker {
  color: #666;
}

.message ul {
  list-style-position: outside;
  padding-left: 1.5em;
  margin-left: 0;
  /* Ensure nested lists maintain proper indentation */
}
.message ul li {
  padding-left: 0;
  margin-left: 0;
}
.message ul ul, .message ul ol {
  padding-left: 1.5em;
}

/* Ensure nested lists maintain proper indentation */
.message ol ul {
  padding-left: 1.5em;
}

/* Link Styles */
.message a {
  color: #004F7D;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
.message a:hover {
  color: #004F7D;
}
.message a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.message a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -1px;
  left: 0;
  background-color: #004F7D;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

/* Special styling for code links */
.message pre[class*=language-] a::after,
.message code a::after {
  display: none;
}

/* Link Chips */
.message .link-chip {
  display: inline-block;
  margin: 1px 2px 1px 0;
}
.message .link-chip a {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(0, 79, 125, 0.08);
  border: 1px solid rgba(0, 79, 125, 0.3);
  border-radius: 12px;
  color: #004F7D;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  /* Override the general link underline effect for link chips */
}
.message .link-chip a:hover {
  background: rgba(0, 79, 125, 0.08);
  border-color: rgba(0, 79, 125, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 79, 125, 0.15);
  color: #004F7D;
}
.message .link-chip a:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 79, 125, 0.3);
}
.message .link-chip a::after {
  display: none !important;
}

/* Reaction Buttons */
.reaction-buttons {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* Right-align reaction buttons for user messages */
.user-message .reaction-buttons {
  justify-content: flex-end;
}

.reaction-button {
  background: none;
  border: 2.5px solid #666;
  color: #666;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
  padding: 0;
  opacity: 0;
}
.reaction-button:hover {
  background: #666;
  color: white;
}
.reaction-button.selected {
  background: #666;
  color: white;
  opacity: 1;
}
.reaction-button.share-button {
  border-color: #004F7D;
  color: #004F7D;
}
.reaction-button.share-button:hover {
  background: #004F7D;
  color: white;
}
.reaction-button.share-button.disabled {
  border-color: #ddd;
  color: #ddd;
  cursor: not-allowed;
  opacity: 0;
}
.reaction-button.share-button.disabled:hover {
  background: none;
  color: #ddd;
  border-color: #ddd;
}
.reaction-button .material-symbols-outlined {
  font-size: 1.2rem;
}

/* Message highlighting for shared links */
.message-highlighted {
  background: rgba(0, 79, 125, 0.1);
  border-left: 4px solid #004F7D;
  padding-left: 12px;
  margin-left: -16px;
  border-radius: 8px;
  animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
  0% {
    background: rgba(0, 79, 125, 0.3);
    box-shadow: 0 0 0 4px rgba(0, 79, 125, 0.2);
  }
  50% {
    background: rgba(0, 79, 125, 0.2);
    box-shadow: 0 0 0 8px rgba(0, 79, 125, 0.1);
  }
  100% {
    background: rgba(0, 79, 125, 0.1);
    box-shadow: 0 0 0 0 rgba(0, 79, 125, 0);
  }
}
/* Message Attachments */
.message-attachment {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-bubble {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16px;
  padding: 6px 12px;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.attachment-bubble:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.attachment-icon {
  color: #666;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.attachment-icon .material-symbols-outlined {
  font-size: 1.1rem;
  display: block;
}

.attachment-name {
  font-size: 0.9rem;
  color: #333;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Citation Token Styles */
.citation-tokens {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.citation-token {
  display: inline-flex;
  align-items: center;
  background: #f0f0f0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: #555;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  cursor: pointer;
  gap: 4px;
}
.citation-token:hover {
  background: #e8e8e8;
  border-color: #d0d0d0;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.citation-token:visited {
  color: #555;
}
.citation-token:hover:visited {
  color: #333;
}

.citation-icon {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Draft Message Styles */
.message.draft {
  opacity: 0.7;
  position: relative;
}
.message.draft.error {
  opacity: 1;
  border-right: 3px solid #ff4444;
  padding-right: 12px;
}

.draft-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #666;
}
.draft-status.sending {
  color: #004F7D;
}
.draft-status.error {
  color: #ff4444;
}

.draft-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #004F7D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.draft-error-icon {
  color: #ff4444;
  font-size: 1rem;
}

.retry-button {
  background: none;
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}
.retry-button:hover {
  background: #ff4444;
  color: white;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: #666;
  padding: 2rem;
  min-height: 300px;
}

.empty-state-icon {
  font-size: 4rem;
  color: #ccc;
  margin-bottom: 1rem;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.empty-state-subtitle {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
  max-width: 400px;
}

/* Loading States */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: #666;
  padding: 2rem;
  min-height: 300px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #004F7D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
}

.loading-subtitle {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

.sessions-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  text-align: center;
  color: #666;
}
.sessions-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border-width: 2px;
  margin-bottom: 0.75rem;
}
.sessions-loading .loading-text {
  font-size: 0.85rem;
  color: #666;
}

.chat-history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
  text-align: center;
  color: #666;
  background: rgba(245, 245, 245, 0.8);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.chat-history-loading .loading-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin-bottom: 0.5rem;
}
.chat-history-loading .loading-text {
  font-size: 0.85rem;
  color: #666;
}

/* Thinking Box Styles */
.thinking-box {
  background: rgba(0, 79, 125, 0.05);
  border-left: 3px solid #004F7D;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0;
  max-width: 70%;
  min-width: 640px;
  align-self: flex-start;
  animation: pulse 2s infinite;
  /* Failed thinking box state */
  /* Container query for thinking-box to match message behavior */
  /* Additional container query for very narrow chat areas */
  /* Fallback media query for thinking-box for browsers without container query support */
}
.thinking-box.failed {
  background: rgba(244, 67, 54, 0.05);
  border-left: 3px solid #f44336;
  animation: none;
}
.thinking-box.failed .thinking-box-header {
  color: #d32f2f;
}
.thinking-box.failed .thinking-dots {
  display: none;
}
.thinking-box.failed .thinking-box-title::after {
  content: " - Failed";
  font-weight: normal;
  opacity: 0.8;
}
@container (max-width: 750px) {
  .thinking-box {
    max-width: calc(100% - 32px);
    min-width: auto;
  }
}
@container (max-width: 500px) {
  .thinking-box {
    max-width: calc(100% - 16px);
    min-width: auto;
  }
}
@media (max-width: 750px) {
  .thinking-box {
    max-width: calc(100% - 32px);
    min-width: auto;
  }
}

.thinking-box-header {
  display: flex;
  align-items: center;
  color: #004F7D;
  font-weight: 500;
  margin-bottom: 8px;
  justify-content: space-between;
}

.thinking-box-title-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.thinking-box-right-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.try-again-button {
  background: #004F7D;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0; /* Prevent button from shrinking */
}
.try-again-button:hover {
  background: #004F7D;
  transform: translateY(-1px);
}
.try-again-button:active {
  transform: translateY(0);
}

.thinking-box-title-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thinking-box-right-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thinking-box-elapsed {
  font-size: 0.8rem;
  color: #666;
  font-weight: normal;
}

.thinking-box-title {
  font-size: 0.9rem;
}

.thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 20px;
}

.thinking-dot {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: dotPulse 1.5s infinite;
}
.thinking-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.thinking-dot:nth-child(3) {
  animation-delay: 0.4s;
}

.thinking-box-content {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.thinking-box-content span {
  display: inline;
}

/* New thinking box styles for expandable content */
.thinking-box-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.thinking-box-toggle .toggle-icon {
  font-size: 18px;
  color: #2196F3;
  transition: transform 0.2s ease;
}

.thinking-box-content-area {
  display: block;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 4px;
  padding: 8px;
  transition: all 0.3s ease;
  /* When collapsed, hide the content area */
}
.thinking-box.collapsed .thinking-box-content-area {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
}

.thinking-box-step {
  padding: 6px 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: relative;
  padding-left: 20px;
}
.thinking-box-step::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #2196F3;
  font-weight: bold;
}

.thinking-box-preview {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  transition: all 0.3s ease;
  max-height: 100px;
  overflow: hidden;
  /* When expanded, hide the preview */
}
.thinking-box:not(.collapsed) .thinking-box-preview {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

/* Adjust toggle icon rotation when expanded */
.thinking-box:not(.collapsed) .thinking-box-toggle .toggle-icon {
  transform: rotate(180deg);
}

/* Make the thinking box clickable for expand/collapse */
.thinking-box {
  cursor: pointer;
}
.thinking-box:hover {
  background: rgba(33, 150, 243, 0.08);
}
.thinking-box.failed {
  cursor: default;
}
.thinking-box.failed:hover {
  background: rgba(244, 67, 54, 0.05);
}

.thinking-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #2196F3;
  margin-left: 1px;
  vertical-align: middle;
  animation: cursor-blink 1s infinite;
  flex-shrink: 0;
}

/* Thinking History Styles */
.thinking-history {
  background: rgba(33, 150, 243, 0.02);
  border-left: 2px solid rgba(33, 150, 243, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0;
  max-width: 70%;
  min-width: 640px;
  align-self: flex-start;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* Placeholder state for loading thinking history */
  /* Error state for failed thinking history loading */
  /* Empty state for thinking history with no reasonings - hidden but stays in DOM for grouping */
  /* Container query for thinking-history to match message behavior */
  /* Additional container query for very narrow chat areas */
  /* Fallback media query for thinking-history for browsers without container query support */
}
.thinking-history:hover {
  background: rgba(33, 150, 243, 0.04);
}
.thinking-history.collapsed .thinking-history-content {
  max-height: 0;
  opacity: 0;
  margin: 0;
  transform: scaleY(0);
}
.thinking-history.collapsed .thinking-history-toggle .toggle-icon {
  transform: translate(-50%, -50%) rotate(-90deg);
}
.thinking-history.thinking-placeholder {
  background: rgba(33, 150, 243, 0.01);
  border-left: 2px solid rgba(33, 150, 243, 0.2);
  opacity: 0.8;
}
.thinking-history.thinking-placeholder .thinking-history-header {
  color: #888;
  font-style: italic;
}
.thinking-history.thinking-placeholder .thinking-loading {
  opacity: 0.6;
  position: relative;
}
.thinking-history.thinking-placeholder .thinking-loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #ddd;
  border-top: 2px solid #004F7D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
.thinking-history.thinking-error {
  background: rgba(244, 67, 54, 0.02);
  border-left: 2px solid rgba(244, 67, 54, 0.3);
}
.thinking-history.thinking-error:hover {
  background: rgba(244, 67, 54, 0.04);
}
.thinking-history.thinking-error .thinking-history-header {
  color: #d32f2f;
}
.thinking-history.thinking-error .thinking-history-step {
  color: #d32f2f;
  opacity: 0.8;
}
.thinking-history.thinking-error .thinking-history-step::before {
  background: #d32f2f;
}
.thinking-history.thinking-empty {
  display: none !important;
  margin: 0;
  padding: 0;
  height: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  /* Ensure it doesn't take up any visual space while staying in DOM */
  border: none;
  background: none;
  overflow: hidden;
}
@container (max-width: 750px) {
  .thinking-history {
    max-width: calc(100% - 32px);
    min-width: auto;
  }
}
@container (max-width: 500px) {
  .thinking-history {
    max-width: calc(100% - 16px);
    min-width: auto;
  }
}
@media (max-width: 750px) {
  .thinking-history {
    max-width: calc(100% - 32px);
    min-width: auto;
  }
}

.thinking-history-header {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
  font-weight: 500;
}

.thinking-history-toggle {
  width: 24px;
  height: 24px;
  position: relative;
  color: #666;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.thinking-history-toggle .toggle-icon {
  font-size: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thinking-history-content {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 300px;
  opacity: 1;
  transform-origin: top;
  transform: scaleY(1);
  /* Custom scrollbar styling */
}
.thinking-history-content::-webkit-scrollbar {
  width: 8px;
}
.thinking-history-content::-webkit-scrollbar-track {
  background: transparent;
}
.thinking-history-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.thinking-history-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.thinking-history-step {
  position: relative;
  padding-left: 12px;
  margin: 4px 0;
}
.thinking-history-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 4px;
  height: 4px;
  background: #2196F3;
  border-radius: 50%;
  opacity: 0.5;
}

/* Animations */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* Session Date Header Styles */
.session-date-header {
  padding: 1rem 1.5rem 0.5rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0.5rem -0.5rem;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.session-date-header:first-child {
  margin-top: 0;
}

/* Session Name Text Styles */
.session-name-text {
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  word-break: break-word;
}

/* Session Rename Input Styles */
.session-rename-input {
  font-weight: 500;
  color: #333;
  background: white;
  border: 2px solid #2196F3;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: inherit;
  font-family: inherit;
  width: 100%;
  outline: none;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.session-rename-input:focus {
  border-color: #004F7D;
  box-shadow: 0 0 0 2px rgba(0, 79, 125, 0.3);
}

/* Session Menu Separator */
.session-menu-separator {
  height: 1px;
  background: #e0e0e0;
  margin: 4px 0;
}

/* Side Menu Button Text Styles */
.side-menu-button-text {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Notification Styles */
.notification {
  position: fixed;
  top: 80px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  animation: slideInRight 0.3s ease;
  max-width: 350px;
  color: white;
}
.notification.success {
  background: #4CAF50;
}
.notification.error {
  background: #f44336;
}
.notification.info {
  background: #2196F3;
}
.notification.warning {
  background: #ff9800;
}
.notification .material-symbols-outlined {
  font-size: 18px;
  flex-shrink: 0;
}
.notification.slide-out {
  animation: slideOutRight 0.3s ease forwards;
}

/* Loading Popup Styles */
#loading-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
#loading-popup .popup-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  text-align: center;
}
#loading-popup .popup-content .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #004F7D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
#loading-popup .popup-content .title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}
#loading-popup .popup-content .subtitle {
  font-size: 0.9rem;
  color: #666;
  max-width: 250px;
  line-height: 1.4;
}

/* File Reference Dropdown Styles */
.file-reference-dropdown {
  position: absolute;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 280px;
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}
.file-reference-dropdown.show {
  display: block;
}
.file-reference-dropdown::-webkit-scrollbar {
  width: 8px;
}
.file-reference-dropdown::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}
.file-reference-dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.file-reference-dropdown::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.file-reference-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.file-reference-item.selected {
  background-color: rgba(0, 79, 125, 0.1);
  color: #004F7D;
}
.file-reference-item.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #004F7D;
}
.file-reference-item:last-child {
  border-bottom: none;
}
.file-reference-item:first-child {
  border-radius: 8px 8px 0 0;
}
.file-reference-item:last-child {
  border-radius: 0 0 8px 8px;
}
.file-reference-item:only-child {
  border-radius: 8px;
}
.file-reference-item .file-details {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}
.file-reference-item .file-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
}
.file-reference-item:hover .file-name, .file-reference-item.selected .file-name {
  color: #2196F3;
  font-weight: 600;
}

.file-reference-empty {
  padding: 16px;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  font-style: italic;
}

/* File Reference Chip Styles */
.file-reference-chip {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(0, 79, 125, 0.08), rgba(0, 79, 125, 0.1));
  border: 1.5px solid rgba(0, 79, 125, 0.3);
  border-radius: 12px;
  padding: 2px 8px;
  margin: 0 2px;
  font-size: 0.85rem;
  color: #004F7D;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  gap: 4px;
  user-select: none;
  vertical-align: baseline;
  position: relative;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 79, 125, 0.1);
  line-height: 1.5;
  /* Special styling for chips in the input */
}
.file-reference-chip:hover {
  background: linear-gradient(135deg, rgba(0, 79, 125, 0.15), rgba(0, 79, 125, 0.08));
  border-color: rgba(0, 79, 125, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 79, 125, 0.3);
}
.file-reference-chip .chip-icon {
  font-size: 14px;
  opacity: 0.9;
  color: #004F7D;
}
.file-reference-chip .chip-name {
  font-weight: 500;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.file-reference-chip.in-input {
  background: linear-gradient(135deg, rgba(0, 79, 125, 0.15), rgba(0, 79, 125, 0.1));
  border-color: rgba(0, 79, 125, 0.3);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 79, 125, 0.15);
}

/* File Reference Overlay Styles */
.file-reference-highlight {
  background: linear-gradient(135deg, rgba(0, 79, 125, 0.15), rgba(0, 79, 125, 0.08));
  border: 1px solid rgba(0, 79, 125, 0.3);
  border-radius: 6px;
  padding: 1px 0;
  margin: 0;
  color: #004F7D;
  font-weight: 600;
  display: inline;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 79, 125, 0.08);
  animation: file-reference-pulse 2s ease-in-out infinite alternate;
  vertical-align: baseline;
  line-height: 1.5;
}

.file-reference-completed {
  background: linear-gradient(135deg, rgba(0, 79, 125, 0.15), rgba(0, 79, 125, 0.08));
  border: 1px solid rgba(0, 79, 125, 0.3);
  border-radius: 8px;
  padding: 1px 0;
  margin: 0;
  color: #004F7D;
  font-weight: 600;
  display: inline;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 79, 125, 0.15);
  animation: file-reference-success 0.6s ease-out;
  vertical-align: baseline;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.file-reference-completed .file-name {
  font-size: 0.95em;
  font-weight: 600;
  display: inline;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@keyframes file-reference-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 79, 125, 0.15);
  }
  100% {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 79, 125, 0.3);
  }
}
@keyframes file-reference-success {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Archive Confirmation Modal Styles */
.archive-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.archive-modal .modal-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.archive-modal .modal-content .modal-icon {
  font-size: 3rem;
  color: #ff9800;
  margin-bottom: 1rem;
}
.archive-modal .modal-content .modal-title {
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}
.archive-modal .modal-content .modal-message {
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.archive-modal .modal-content .button-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.archive-modal .modal-content .button-container button {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 2px solid;
}
.archive-modal .modal-content .button-container button.cancel {
  border-color: #e0e0e0;
  background: white;
  color: #666;
}
.archive-modal .modal-content .button-container button.cancel:hover {
  border-color: #999;
  color: #333;
}
.archive-modal .modal-content .button-container button.archive {
  border-color: #ff9800;
  background: #ff9800;
  color: white;
}
.archive-modal .modal-content .button-container button.archive:hover {
  background: #f57c00;
  border-color: #f57c00;
}
.archive-modal .modal-content .button-container button.archive:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-message, .error-message, .no-results {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

.error-message {
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.1);
  border-radius: 8px;
  border: 1px solid #d32f2f;
}

.loading-message {
  color: #38B4E7;
}

.no-results {
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.header-actions .control-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.header-actions .control-btn.primary {
  background: #38B4E7;
  color: #FFFFFF;
}
.header-actions .control-btn.primary:hover {
  background: #FFFFFF;
  color: #38B4E7;
  box-shadow: 0 0 0 2px #38B4E7;
}
.header-actions .control-btn.secondary {
  background: #FFFFFF;
  color: #333;
  border: 1px solid #e0e0e0;
}
.header-actions .control-btn.secondary:hover {
  background: #f8f9fa;
  border-color: #38B4E7;
}
.header-actions .control-btn .material-symbols-outlined {
  font-size: 1.1rem;
}

.health-reports-section {
  margin-bottom: 2rem;
}
.health-reports-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.health-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.health-report-card {
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  transition: all 0.2s ease;
}
.health-report-card:hover {
  border-color: #38B4E7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.health-report-card.healthy {
  border-left: 4px solid #388e3c;
}
.health-report-card.unhealthy {
  border-left: 4px solid #d32f2f;
}
.health-report-card .health-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.health-report-card .health-report-header .health-report-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}
.health-report-card .health-report-header .health-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.health-report-card .health-report-header .health-status.healthy {
  color: #388e3c;
}
.health-report-card .health-report-header .health-status.unhealthy {
  color: #d32f2f;
}
.health-report-card .health-report-header .health-status .material-symbols-outlined {
  font-size: 1.2rem;
}
.health-report-card .health-report-details .health-item {
  margin-bottom: 0.75rem;
}
.health-report-card .health-report-details .health-item .health-item-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.25rem;
}
.health-report-card .health-report-details .health-item .health-item-count {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}
.health-report-card .health-report-details .health-item .health-item-count.has-issues {
  color: #ffc107;
}
.health-report-card .health-report-details .health-item .health-item-list {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
  max-height: 120px;
  overflow-y: auto;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.health-report-card .health-report-details .health-item .health-item-list .item-id {
  display: block;
  padding: 0.375rem 0.5rem;
  font-family: "Courier New", monospace;
  margin-bottom: 0.25rem;
  border-radius: 3px;
  transition: all 0.2s ease;
}
.health-report-card .health-report-details .health-item .health-item-list .item-id:last-child {
  margin-bottom: 0;
}
.health-report-card .health-report-details .health-item .health-item-list .item-id.clickable-item {
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  color: #333;
}
.health-report-card .health-report-details .health-item .health-item-list .item-id.clickable-item:hover {
  background: #38B4E7;
  color: #FFFFFF;
  transform: translateX(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.health-report-card .health-report-details .health-item .health-item-list .item-id.clickable-item:active {
  transform: translateX(1px);
}
.health-report-card .health-report-details .health-item .health-item-list::-webkit-scrollbar {
  width: 6px;
}
.health-report-card .health-report-details .health-item .health-item-list::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 3px;
}
.health-report-card .health-report-details .health-item .health-item-list::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}
.health-report-card .health-report-details .health-item .health-item-list::-webkit-scrollbar-thumb:hover {
  background: #38B4E7;
}
.health-report-card .health-report-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: center;
}
.health-report-card .health-report-actions .force-reingest-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.health-report-card .health-report-actions .force-reingest-btn:hover:not(:disabled) {
  background: rgb(25.399103139, 156.6278026906, 210.600896861);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 180, 231, 0.3);
}
.health-report-card .health-report-actions .force-reingest-btn:active:not(:disabled) {
  transform: translateY(0);
}
.health-report-card .health-report-actions .force-reingest-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.health-report-card .health-report-actions .force-reingest-btn .material-symbols-outlined {
  font-size: 1.1rem;
}
.health-report-card .health-report-actions .force-reingest-btn .material-symbols-outlined.spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.invalid-items-section {
  margin-bottom: 2rem;
}
.invalid-items-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.invalid-items-section h2 .material-symbols-outlined {
  color: #d32f2f;
}

.invalid-items-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.invalid-item-card {
  background: #FFFFFF;
  border: 1px solid #d32f2f;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
}
.invalid-item-card .invalid-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.invalid-item-card .invalid-item-header .invalid-item-name {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
}
.invalid-item-card .invalid-item-header .invalid-item-id {
  font-size: 0.85rem;
  font-family: "Courier New", monospace;
  color: #666;
}
.invalid-item-card .invalid-item-header .duplicate-badge {
  background: #ffc107;
  color: #FFFFFF;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.invalid-item-card .invalid-item-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.invalid-item-card .invalid-item-metadata .metadata-item .metadata-label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.25rem;
}
.invalid-item-card .invalid-item-metadata .metadata-item .metadata-value {
  font-size: 0.9rem;
  color: #333;
  word-break: break-all;
}
.invalid-item-card .invalid-item-metadata .metadata-item .metadata-value.link {
  color: #38B4E7;
  text-decoration: underline;
  cursor: pointer;
}
.invalid-item-card .invalid-item-metadata .metadata-item .metadata-value.link:hover {
  color: rgb(25.399103139, 156.6278026906, 210.600896861);
}
.invalid-item-card .duplicate-differences {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 4px;
  border-left: 3px solid #ffc107;
}
.invalid-item-card .duplicate-differences .differences-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffc107;
  margin-bottom: 0.5rem;
}
.invalid-item-card .duplicate-differences .difference-item {
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 0.25rem;
}

.document-logs-section {
  margin-bottom: 2rem;
}
.document-logs-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}
.document-logs-section .logs-filter {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.document-logs-section .logs-filter .search-input-container {
  flex: 1;
  max-width: 300px;
  min-width: 200px;
  position: relative;
  transition: box-shadow 0.3s ease;
  border-radius: 4px;
}
.document-logs-section .logs-filter .search-input, .document-logs-section .logs-filter .sort-select {
  padding: 0.5rem;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.9rem;
  background: #FFFFFF;
  color: #333;
  transition: all 0.2s ease;
  width: 100%;
}
.document-logs-section .logs-filter .search-input:focus, .document-logs-section .logs-filter .sort-select:focus {
  outline: none;
  border-color: #38B4E7;
  box-shadow: 0 0 0 2px rgba(56, 180, 231, 0.2);
}
.document-logs-section .logs-filter .search-input {
  max-width: none;
  min-width: auto;
}
.document-logs-section .logs-filter .sort-select {
  min-width: 150px;
  width: auto;
}

.document-logs-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.document-log-card {
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.document-log-card:hover {
  border-color: #38B4E7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.document-log-card .document-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
  position: relative;
  background: linear-gradient(135deg, #38B4E7, #38B4E7);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease;
}
.document-log-card .document-log-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #38B4E7, #38B4E7);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 0;
}
.document-log-card .document-log-header:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.document-log-card .document-log-header:hover::before {
  opacity: 1;
}
.document-log-card .document-log-header .document-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
  flex: 1;
}
.document-log-card .document-log-header .document-info .drive-link {
  color: #FFFFFF;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 4px;
}
.document-log-card .document-log-header .document-info .drive-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.document-log-card .document-log-header .document-info .drive-link .material-symbols-outlined {
  font-size: 1.1rem;
}
.document-log-card .document-log-header .document-info .last-activity {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}
.document-log-card .document-log-header .document-info .last-activity .material-symbols-outlined {
  font-size: 0.9rem;
}
.document-log-card .document-log-header .document-id {
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  color: #FFFFFF;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}
.document-log-card .document-log-header .log-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.document-log-card .document-log-header .log-info .log-count {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.document-log-card .document-log-header .log-info .dropdown-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.document-log-card .document-log-header .log-info .dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.document-log-card .document-log-header .log-info .dropdown-toggle .material-symbols-outlined {
  font-size: 1.2rem;
}
.document-log-card .recent-log-preview {
  padding: 1rem;
  font-size: 0.85rem;
  color: #333;
  line-height: 1.4;
  border-top: 1px solid #e0e0e0;
  background: rgba(0, 0, 0, 0.08);
  margin: 0;
}
.document-log-card .recent-log-preview strong {
  color: #38B4E7;
  font-weight: 600;
}
.document-log-card .log-dropdown {
  border-top: 1px solid #e0e0e0;
  background: #FFFFFF;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.document-log-card .log-dropdown .log-timeline {
  padding: 1rem;
  max-height: 500px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.08);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.log-timeline .timeline-entry {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 1rem;
  border-left: 2px solid #e0e0e0;
}
.log-timeline .timeline-entry:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.log-timeline .timeline-entry::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38B4E7;
}
.log-timeline .timeline-entry.error-entry::before {
  background: #d32f2f;
}
.log-timeline .timeline-entry.success-entry::before {
  background: #388e3c;
}
.log-timeline .timeline-entry.warning-entry::before {
  background: #ffc107;
}
.log-timeline .timeline-entry.parsing-entry::before {
  background: #38B4E7;
}
.log-timeline .timeline-entry .timeline-timestamp {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 0.5rem;
  font-family: "Courier New", monospace;
}
.log-timeline .timeline-entry .timeline-content {
  font-size: 0.85rem;
  color: #333;
  line-height: 1.4;
  background: #FFFFFF;
  padding: 0.75rem;
  border-radius: 4px;
  border-left: 3px solid #38B4E7;
  white-space: pre-wrap;
}
.log-timeline .timeline-entry .timeline-content.error-content {
  border-left-color: #d32f2f;
  background: rgba(239, 68, 68, 0.1);
}
.log-timeline .timeline-entry .timeline-content.success-content {
  border-left-color: #388e3c;
  background: rgba(16, 185, 129, 0.1);
}
.log-timeline .timeline-entry .timeline-content.warning-content {
  border-left-color: #ffc107;
  background: rgba(245, 158, 11, 0.1);
}
.log-timeline .timeline-entry .timeline-content.parsing-content {
  border-left-color: #38B4E7;
  background: rgba(59, 130, 246, 0.1);
}

@media (max-width: 768px) {
  .health-reports-grid {
    grid-template-columns: 1fr;
  }
  .document-log-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .document-log-header .log-info {
    order: -1;
    justify-content: space-between;
    width: 100%;
  }
  .invalid-item-metadata {
    grid-template-columns: 1fr;
  }
  .logs-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .logs-filter .search-input, .logs-filter .sort-select {
    max-width: none;
  }
  .header-actions .control-btn span:not(.material-symbols-outlined) {
    display: none;
  }
  .log-timeline {
    padding: 0.75rem;
  }
  .log-timeline .timeline-entry .timeline-content {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .log-timeline .timeline-entry .timeline-timestamp {
    font-size: 0.7rem;
  }
}
:root {
  --success-color: $success-green;
  --error-color: $error-red;
  --warning-color: $warning-yellow;
  --parsing-color: $accent-blue;
  --success-bg: rgba(16, 185, 129, 0.1);
  --error-bg: rgba(239, 68, 68, 0.1);
  --warning-bg: rgba(245, 158, 11, 0.1);
  --parsing-bg: rgba(59, 130, 246, 0.1);
  --bg-secondary: rgba(0, 0, 0, 0.02);
  --hover-bg: rgba(0, 0, 0, 0.05);
  --accent-color: $accent-blue;
  --accent-hover: $accent-blue;
  --accent-color-rgb: 79, 70, 229;
  --error-color-rgb: 239, 68, 68;
}

.clickable-item:hover {
  text-decoration: underline;
  cursor: pointer;
}

.document-checker-section {
  margin-bottom: 3rem;
}
.document-checker-section h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.document-checker-section h2::before {
  content: "";
  width: 4px;
  height: 1.5rem;
  background: linear-gradient(45deg, #38B4E7, rgb(25.399103139, 156.6278026906, 210.600896861));
  border-radius: 2px;
}

.checker-input-area {
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.checker-input-area .input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .checker-input-area .input-group {
    flex-direction: column;
  }
}
.checker-input-area .document-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #FFFFFF;
  color: #333;
  transition: all 0.2s ease;
}
.checker-input-area .document-input:focus {
  outline: none;
  border-color: #38B4E7;
  box-shadow: 0 0 0 3px rgba(56, 180, 231, 0.1);
}
.checker-input-area .document-input::placeholder {
  color: #666;
}
.checker-input-area .check-btn {
  padding: 0.75rem 1.5rem;
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.checker-input-area .check-btn:hover {
  background: #FFFFFF;
  color: #38B4E7;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #38B4E7;
}
.checker-input-area .check-btn:active {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .checker-input-area .check-btn {
    justify-content: center;
  }
}
.checker-input-area .input-help {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}
.checker-input-area .input-help .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38B4E7;
}

.checker-results {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checker-result {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 1.5rem;
  border-left: 4px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.checker-result.healthy {
  border-left-color: #388e3c;
}
.checker-result.healthy .result-header {
  color: #388e3c;
}
.checker-result.unhealthy {
  border-left-color: #d32f2f;
}
.checker-result.unhealthy .result-header {
  color: #d32f2f;
}
.checker-result.untracked {
  border-left-color: #ffc107;
}
.checker-result.untracked .result-header {
  color: #ffc107;
}
.checker-result.error {
  border-left-color: #d32f2f;
  background: rgba(239, 68, 68, 0.05);
}
.checker-result.error .result-header {
  color: #d32f2f;
}
.checker-result.error .error-message {
  color: #d32f2f;
  font-weight: 500;
  margin-top: 0.5rem;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.result-header .header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.result-header .header-left .material-symbols-outlined {
  font-size: 1.5rem;
}
.result-header .header-left .result-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}
.result-header .view-logs-btn.header-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #FFFFFF;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.result-header .view-logs-btn.header-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: #38B4E7;
  color: #38B4E7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.result-header .view-logs-btn.header-btn .material-symbols-outlined {
  font-size: 1rem;
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.result-content .document-id-display {
  font-size: 0.95rem;
  color: #666;
}
.result-content .document-id-display code {
  background: rgba(56, 180, 231, 0.1);
  color: #38B4E7;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: "Fira Code", "Cascadia Code", monospace;
  font-size: 0.9rem;
}
.result-content .tracking-status,
.result-content .logs-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.95rem;
}
.result-content .tracking-status .material-symbols-outlined,
.result-content .logs-status .material-symbols-outlined {
  font-size: 1.1rem;
  color: #38B4E7;
}
.result-content .logs-status {
  align-items: flex-start;
}
.result-content .logs-status .view-logs-btn {
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s ease;
}
.result-content .logs-status .view-logs-btn:hover {
  background: #FFFFFF;
  color: #38B4E7;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #38B4E7;
}
.result-content .status-message {
  color: #666;
  font-style: italic;
}
.result-content .checker-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.result-content .checker-actions .force-reingest-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.result-content .checker-actions .force-reingest-btn:hover:not(:disabled) {
  background: rgb(25.399103139, 156.6278026906, 210.600896861);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--accent-color-rgb), 0.3);
}
.result-content .checker-actions .force-reingest-btn:active:not(:disabled) {
  transform: translateY(0);
}
.result-content .checker-actions .force-reingest-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.result-content .checker-actions .force-reingest-btn .material-symbols-outlined {
  font-size: 1.1rem;
}
.result-content .checker-actions .force-reingest-btn .material-symbols-outlined.spinning {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.health-issues {
  background: rgba(var(--error-color-rgb), 0.05);
  border: 1px solid rgba(var(--error-color-rgb), 0.2);
  border-radius: 8px;
  padding: 1rem;
}
.health-issues .issues-title {
  font-weight: 600;
  color: #d32f2f;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.health-issues .health-issue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #FFFFFF;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.health-issues .health-issue:last-child {
  margin-bottom: 0;
}
.health-issues .health-issue .material-symbols-outlined {
  font-size: 1rem;
}
.health-issues .health-issue.missing {
  border-left: 3px solid #ffc107;
}
.health-issues .health-issue.missing .material-symbols-outlined {
  color: #ffc107;
}
.health-issues .health-issue.removed {
  border-left: 3px solid #d32f2f;
}
.health-issues .health-issue.removed .material-symbols-outlined {
  color: #d32f2f;
}
.health-issues .health-issue.missing_name {
  border-left: 3px solid #38B4E7;
}
.health-issues .health-issue.missing_name .material-symbols-outlined {
  color: #38B4E7;
}

.temporary-message {
  position: fixed;
  top: 2rem;
  right: 2rem;
  max-width: 400px;
  z-index: 1000;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideInRight 0.3s ease-out;
}
.temporary-message .message-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.temporary-message .message-content .material-symbols-outlined {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.temporary-message .message-content span:last-child {
  font-size: 0.95rem;
  font-weight: 500;
}
.temporary-message.success {
  background: #388e3c;
  color: #FFFFFF;
  border: 1px solid rgb(41.5757575758, 105.4242424242, 44.5454545455);
}
.temporary-message.error {
  background: #d32f2f;
  color: #FFFFFF;
  border: 1px solid rgb(170.8571428571, 36.1428571429, 36.1428571429);
}
.temporary-message.info {
  background: #38B4E7;
  color: #FFFFFF;
  border: 1px solid rgb(25.399103139, 156.6278026906, 210.600896861);
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.vector-store-tabs {
  margin-bottom: 0.5rem;
}
.vector-store-tabs .tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .vector-store-tabs .tabs-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
}
.vector-store-tabs .tabs-container {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
  overflow-x: auto;
  flex: 1;
}
.vector-store-tabs .tabs-container::-webkit-scrollbar {
  height: 4px;
}
.vector-store-tabs .tabs-container::-webkit-scrollbar-track {
  background: #f8f9fa;
}
.vector-store-tabs .tabs-container::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2px;
}
.vector-store-tabs .tabs-container .tab-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #FFFFFF;
  border: none;
  border-bottom: 3px solid transparent;
  color: #666;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 0;
}
.vector-store-tabs .tabs-container .tab-button:hover {
  color: #333;
  background: #f8f9fa;
}
.vector-store-tabs .tabs-container .tab-button.active {
  color: #38B4E7;
  border-bottom-color: #38B4E7;
  background: rgba(56, 180, 231, 0.05);
}
.vector-store-tabs .tabs-container .tab-button .tab-label {
  font-weight: 600;
}
.vector-store-tabs .tabs-container .tab-button .tab-count {
  background: #f8f9fa;
  color: #666;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}
.vector-store-tabs .tabs-container .tab-button.active .tab-count {
  background: #38B4E7;
  color: #FFFFFF;
}
.vector-store-tabs .compact-status-overview {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.vector-store-tabs .compact-status-overview .compact-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.vector-store-tabs .compact-status-overview .compact-status-card.healthy {
  border-left: 4px solid #388e3c;
}
.vector-store-tabs .compact-status-overview .compact-status-card.unhealthy {
  border-left: 4px solid #d32f2f;
}
.vector-store-tabs .compact-status-overview .compact-status-card.unknown {
  border-left: 4px solid #ffc107;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-indicator {
  display: flex;
  align-items: center;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-indicator.healthy .material-symbols-outlined {
  color: #388e3c;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-indicator.unhealthy .material-symbols-outlined {
  color: #d32f2f;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-indicator.unknown .material-symbols-outlined {
  color: #ffc107;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-indicator .material-symbols-outlined {
  font-size: 1.2rem;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-title {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric .compact-metric-label {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric .compact-metric-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric .compact-metric-value.healthy {
  color: #388e3c;
}
.vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric .compact-metric-value.unhealthy {
  color: #d32f2f;
}

.search-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.search-trigger-btn:hover {
  background: #f8f9fa;
  color: #38B4E7;
  border-color: #38B4E7;
}
.search-trigger-btn .material-symbols-outlined {
  font-size: 1.2rem;
}

.search-modal {
  max-width: 600px;
  width: 90%;
}
.search-modal .search-modal-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.search-modal .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.search-modal .search-input-wrapper .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1.2rem;
  z-index: 1;
}
.search-modal .search-input-wrapper .search-input {
  flex: 1;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px 0 0 8px;
  font-size: 0.95rem;
  background: #FFFFFF;
  color: #333;
  transition: all 0.2s ease;
}
.search-modal .search-input-wrapper .search-input:focus {
  outline: none;
  border-color: #38B4E7;
  box-shadow: 0 0 0 3px rgba(56, 180, 231, 0.1);
}
.search-modal .search-input-wrapper .search-button {
  background: #38B4E7;
  border: 2px solid #38B4E7;
  border-left: none;
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.search-modal .search-input-wrapper .search-button:hover {
  background: rgb(25.399103139, 156.6278026906, 210.600896861);
  border-color: rgb(25.399103139, 156.6278026906, 210.600896861);
}
.search-modal .search-input-wrapper .search-button .material-symbols-outlined {
  font-size: 1.2rem;
}
.search-modal .search-results {
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  background: #f8f9fa;
}
.search-modal .search-results .search-result-item {
  padding: 0.75rem;
  background: #FFFFFF;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e0e0e0;
}
.search-modal .search-results .search-result-item:hover {
  background: #38B4E7;
  color: #FFFFFF;
  border-color: #38B4E7;
}
.search-modal .search-results .search-result-item:last-child {
  margin-bottom: 0;
}
.search-modal .search-results .search-result-item .result-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.search-modal .search-results .search-result-item .result-details {
  font-size: 0.85rem;
  opacity: 0.8;
}
.search-modal .search-results .search-error {
  color: #d32f2f;
  text-align: center;
  padding: 1rem;
  font-style: italic;
}
.search-modal .search-results .search-loading {
  text-align: center;
  padding: 1rem;
  color: #666;
}

.documents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1024px) {
  .documents-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.documents-grid .documents-column {
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.documents-grid .documents-column .column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.documents-grid .documents-column .column-header h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.documents-grid .documents-column .column-header.unhealthy h2 {
  color: #d32f2f;
}
.documents-grid .documents-column .column-header.healthy h2 {
  color: #388e3c;
}
.documents-grid .documents-column .column-header .column-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.documents-grid .documents-column .column-header .column-controls .sort-controls {
  display: flex;
  gap: 0.5rem;
}
.documents-grid .documents-column .column-header .column-controls .sort-controls .filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #FFFFFF;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}
.documents-grid .documents-column .column-header .column-controls .sort-controls .filter-select:focus {
  outline: none;
  border-color: #38B4E7;
  box-shadow: 0 0 0 2px rgba(56, 180, 231, 0.1);
}
.documents-grid .documents-column .column-header .column-controls .loading-indicator {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: #38B4E7;
  font-size: 0.9rem;
}
.documents-grid .documents-column .column-header .column-controls .loading-indicator .material-symbols-outlined.spinning {
  animation: spin 1s linear infinite;
}
.documents-grid .documents-column .documents-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 0;
}
.documents-grid .documents-column .documents-list .no-documents {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}
.documents-grid .documents-column .load-more-container {
  padding: 1rem;
  border-top: 1px solid #e0e0e0;
  text-align: center;
  flex-shrink: 0;
}
.documents-grid .documents-column .load-more-container .load-more-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 auto;
}
.documents-grid .documents-column .load-more-container .load-more-btn:hover {
  background: rgb(25.399103139, 156.6278026906, 210.600896861);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 180, 231, 0.3);
}
.documents-grid .documents-column .load-more-container .load-more-btn .material-symbols-outlined {
  font-size: 1.1rem;
}

.document-card {
  background: #FFFFFF;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.document-card:hover {
  border-color: #38B4E7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  background: #f8f9fa;
}
.document-card:last-child {
  margin-bottom: 0;
}
.document-card.healthy {
  border-left: 4px solid #388e3c;
  background: rgba(16, 185, 129, 0.02);
}
.document-card.healthy:hover {
  background: rgba(16, 185, 129, 0.05);
}
.document-card.unhealthy {
  border-left: 4px solid #d32f2f;
  background: rgba(239, 68, 68, 0.02);
}
.document-card.unhealthy:hover {
  background: rgba(239, 68, 68, 0.05);
}
.document-card.unknown {
  border-left: 4px solid #ffc107;
  background: rgba(245, 158, 11, 0.02);
}
.document-card.unknown:hover {
  background: rgba(245, 158, 11, 0.05);
}
.document-card .document-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.document-card .document-header .document-status {
  flex-shrink: 0;
}
.document-card .document-header .document-status .status-icon {
  font-size: 1.5rem;
}
.document-card .document-header .document-status .status-icon.healthy {
  color: #388e3c;
}
.document-card .document-header .document-status .status-icon.unhealthy {
  color: #d32f2f;
}
.document-card .document-header .document-status .status-icon.unknown {
  color: #ffc107;
}
.document-card .document-header .document-info {
  flex: 1;
  min-width: 0;
}
.document-card .document-header .document-info .document-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
  word-break: break-word;
}
.document-card .document-header .document-info .document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: #666;
}
.document-card .document-header .document-info .document-meta .document-id {
  font-family: "Courier New", monospace;
  background: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.document-card .document-header .document-info .document-meta .document-date {
  font-style: italic;
}
.document-card .document-details .detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.document-card .document-details .detail-item:last-child {
  margin-bottom: 0;
}
.document-card .document-details .detail-item .detail-label {
  color: #666;
  font-weight: 500;
  min-width: 120px;
}
.document-card .document-details .detail-item .detail-value {
  color: #333;
  text-align: right;
  word-break: break-word;
  flex: 1;
  margin-left: 1rem;
}

#documentModal .modal {
  width: 95%;
  max-width: 1200px;
  max-height: 95vh;
  padding: 0;
}
#documentModal .modal .modal-header {
  margin-bottom: 0;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;
}
#documentModal .modal .modal-actions {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
}
#documentModal .modal .modal-actions .action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
}
#documentModal .modal .modal-actions .action-buttons .action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
#documentModal .modal .modal-actions .action-buttons .action-btn:hover {
  background: rgb(25.399103139, 156.6278026906, 210.600896861);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 180, 231, 0.3);
}
#documentModal .modal .modal-actions .action-buttons .action-btn .material-symbols-outlined {
  font-size: 1.1rem;
}
#documentModal .modal .modal-actions .action-buttons .action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
  color: #666;
  border-color: #e0e0e0;
}
#documentModal .modal .modal-actions .action-buttons .action-btn.disabled:hover {
  background: #f8f9fa;
  color: #666;
  transform: none;
}
#documentModal .modal .modal-content {
  padding: 2rem;
  max-height: calc(95vh - 100px);
  overflow-y: auto;
}
#documentModal .modal .modal-content .modal-document-info .info-section {
  margin-bottom: 2rem;
}
#documentModal .modal .modal-content .modal-document-info .info-section:last-child {
  margin-bottom: 0;
}
#documentModal .modal .modal-content .modal-document-info .info-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}
#documentModal .modal .modal-content .modal-document-info .info-section .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
#documentModal .modal .modal-content .modal-document-info .info-section .info-grid .info-item .info-label {
  display: block;
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
#documentModal .modal .modal-content .modal-document-info .info-section .info-grid .info-item .info-value {
  display: block;
  font-size: 0.95rem;
  color: #333;
  word-break: break-word;
}
#documentModal .modal .modal-content .modal-document-info .info-section .info-grid .info-item .info-value.healthy {
  color: #388e3c;
  font-weight: 500;
}
#documentModal .modal .modal-content .modal-document-info .info-section .info-grid .info-item .info-value.unhealthy {
  color: #d32f2f;
  font-weight: 500;
}
#documentModal .modal .modal-content .modal-document-info .info-section .info-grid .info-item .info-value.unknown {
  color: #ffc107;
  font-weight: 500;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.75rem 0;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container .health-details-json {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1rem;
  font-family: "Courier New", "Monaco", "Menlo", monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container .health-details-json::-webkit-scrollbar {
  width: 6px;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container .health-details-json::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 3px;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container .health-details-json::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}
#documentModal .modal .modal-content .modal-document-info .info-section .health-details-container .health-details-json::-webkit-scrollbar-thumb:hover {
  background: #38B4E7;
}

.test-action-btn {
  background: red !important;
  color: white !important;
  padding: 10px !important;
}

.modal-actions-test {
  background: blue !important;
  color: white !important;
  padding: 20px !important;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.action-buttons .action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #38B4E7;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-buttons .action-btn:hover {
  background: rgb(25.399103139, 156.6278026906, 210.600896861);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 180, 231, 0.3);
}
.action-buttons .action-btn .material-symbols-outlined {
  font-size: 1.1rem;
}
.action-buttons .action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
  color: #666;
  border-color: #e0e0e0;
}
.action-buttons .action-btn.disabled:hover {
  background: #f8f9fa;
  color: #666;
  transform: none;
}

#textModal .modal.text-modal {
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  padding: 0;
}
#textModal .modal.text-modal .modal-header {
  margin-bottom: 0;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}
#textModal .modal.text-modal .modal-header .modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
  max-width: 100%;
}
#textModal .modal.text-modal .modal-content {
  padding: 1.5rem;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}
#textModal .modal.text-modal .modal-content .text-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  color: #38B4E7;
  font-size: 1rem;
}
#textModal .modal.text-modal .modal-content .text-loading .material-symbols-outlined.spinning {
  animation: spin 1s linear infinite;
}
#textModal .modal.text-modal .modal-content .text-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  color: #d32f2f;
  font-size: 1rem;
  text-align: center;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-info {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-info .content-length {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-display {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-display .text-content {
  margin: 0;
  padding: 1rem;
  font-family: "Courier New", "Monaco", "Menlo", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  background: #FFFFFF;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 60vh;
  overflow-y: auto;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-display .text-content::-webkit-scrollbar {
  width: 8px;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-display .text-content::-webkit-scrollbar-track {
  background: #f8f9fa;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-display .text-content::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 4px;
}
#textModal .modal.text-modal .modal-content .text-content-container .text-content-display .text-content::-webkit-scrollbar-thumb:hover {
  background: #38B4E7;
}

@media (max-width: 768px) {
  .ingestion-status-section .status-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ingestion-status-section .status-card {
    padding: 1rem;
  }
  .ingestion-status-section .status-card .status-metrics .metric-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .vector-store-tabs .tabs-container .tab-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .vector-store-tabs .tabs-container .tab-button .tab-count {
    font-size: 0.75rem;
  }
  .vector-store-tabs .compact-status-overview {
    margin-top: 0.75rem;
    padding: 0.75rem;
  }
  .vector-store-tabs .compact-status-overview .compact-status-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header {
    width: 100%;
    justify-content: flex-start;
  }
  .vector-store-tabs .compact-status-overview .compact-status-card .compact-status-header .compact-status-title {
    font-size: 0.9rem;
  }
  .vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics {
    width: 100%;
    justify-content: flex-start;
    gap: 0.75rem;
  }
  .vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric .compact-metric-label {
    font-size: 0.8rem;
  }
  .vector-store-tabs .compact-status-overview .compact-status-card .compact-status-metrics .compact-metric .compact-metric-value {
    font-size: 0.85rem;
  }
  .search-section .search-container .search-input-wrapper {
    min-width: auto;
  }
  .search-section .search-filters {
    flex-direction: column;
  }
  .search-section .search-filters .filter-select {
    width: 100%;
  }
  .documents-grid {
    grid-template-columns: 1fr;
  }
  .documents-grid .documents-column .column-header {
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .documents-grid .documents-column .column-header h2 {
    font-size: 1.1rem;
  }
  .documents-grid .documents-column .column-header .column-controls {
    width: 100%;
    justify-content: space-between;
  }
  .documents-grid .documents-column .column-header .column-controls .sort-controls {
    flex: 1;
    gap: 0.5rem;
  }
  .documents-grid .documents-column .column-header .column-controls .sort-controls .filter-select {
    flex: 1;
    min-width: 0;
  }
  .documents-grid .documents-column .documents-list {
    padding: 0.75rem;
  }
  .document-card .document-header .document-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  .document-card .document-details .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .document-card .document-details .detail-item .detail-value {
    text-align: left;
    margin-left: 0;
  }
  #documentModal .modal {
    width: 98%;
    max-height: 98vh;
  }
  #documentModal .modal .modal-header {
    padding: 1rem 1.5rem;
  }
  #documentModal .modal .modal-header .modal-title {
    font-size: 1.2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
    max-width: 100%;
  }
  #documentModal .modal .modal-content {
    padding: 1rem 1.5rem;
    max-height: calc(98vh - 80px);
  }
  #documentModal .modal .modal-content .modal-document-info .info-section .info-grid {
    grid-template-columns: 1fr;
  }
  #documentModal .modal .modal-content .modal-document-info .info-section .action-buttons {
    justify-content: center;
  }
  #documentModal .modal .modal-content .modal-document-info .info-section .health-details-container .health-details-json {
    font-size: 0.8rem;
    padding: 0.75rem;
    max-height: 250px;
  }
  #textModal .modal.text-modal {
    width: 98%;
    max-height: 98vh;
  }
  #textModal .modal.text-modal .modal-header {
    padding: 1rem;
  }
  #textModal .modal.text-modal .modal-header .modal-title {
    font-size: 1.1rem;
  }
  #textModal .modal.text-modal .modal-content {
    padding: 1rem;
    max-height: calc(98vh - 70px);
  }
  #textModal .modal.text-modal .modal-content .text-content-container .text-content-display .text-content {
    font-size: 0.8rem;
    padding: 0.75rem;
    max-height: 50vh;
  }
}
/* Authentication Styles */
.auth-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  min-width: 400px;
  width: 60%;
  max-width: 450px;
}

.auth-form {
  padding: 2.5rem;
  transition: all 0.3s ease;
}
.auth-form.hidden {
  display: none;
}
.auth-form h2 {
  color: #333;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.auth-form-header {
  text-align: center;
  margin-bottom: 2rem;
}
.auth-form-header p {
  color: #666;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}

/* Error and Success Messages */
.auth-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  animation: slideIn 0.3s ease;
}
.auth-message .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
}
.auth-message.auth-error {
  background-color: rgba(244, 67, 54, 0.05);
  color: #d32f2f;
  border: 1px solid rgba(244, 67, 54, 0.3);
}
.auth-message.auth-success {
  background-color: rgba(76, 175, 80, 0.1);
  color: #388e3c;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth-form .form-group {
  margin-bottom: 1.5rem;
}

.auth-form .form-label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.auth-form .form-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
  font-family: inherit;
}
.auth-form .form-input:focus {
  outline: none;
  border-color: #004F7D;
  background-color: #f8f9fa;
  box-shadow: 0 0 0 3px rgba(0, 79, 125, 0.1);
}
.auth-form .form-input::placeholder {
  color: #999;
}

.auth-form .btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
}
.auth-form .btn.btn-primary {
  background-color: #004F7D;
  color: #FFFFFF;
}
.auth-form .btn.btn-primary:hover:not(:disabled) {
  background-color: #004F7D;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 79, 125, 0.3);
}
.auth-form .btn.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.auth-form .btn .material-symbols-outlined {
  font-size: 20px;
}

.auth-switch {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
  color: #666;
  font-size: 0.95rem;
}
.auth-switch.hidden {
  display: none;
}
.auth-switch span {
  margin-right: 0.5rem;
}
.auth-switch a {
  color: #004F7D;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.auth-switch a:hover {
  color: #004F7D;
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  .auth-card {
    width: calc(100% - 8rem);
    margin: 0 4rem;
    border-radius: 8px;
    min-width: unset;
  }
  .auth-form {
    padding: 2rem 1.5rem;
  }
  .auth-form h2 {
    font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  .auth-card {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    border-radius: 6px;
  }
  .auth-form {
    padding: 1.5rem 1rem;
  }
  .auth-form-header {
    margin-bottom: 1.5rem;
  }
  .auth-form .form-group {
    margin-bottom: 1.25rem;
  }
  .auth-form .form-input {
    padding: 12px 14px;
  }
  .auth-form .btn {
    padding: 12px 16px;
  }
}
/* Animation for form switching */
.auth-form {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Form validation states */
.auth-form .form-input:invalid:focus {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.05);
}

.auth-form .form-input:valid:focus {
  border-color: #388e3c;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* Loading state for buttons */
.auth-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-form .btn:disabled:hover {
  background-color: #004F7D;
  transform: none;
  box-shadow: none;
}

.profile-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0 auto;
  min-width: 400px;
  width: 60%;
  max-width: 600px;
  overflow: hidden;
}

.profile-section {
  padding: 2rem;
}
.profile-section:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.profile-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.profile-section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #000000;
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #f0f0f0;
  border-radius: 50%;
  color: #666;
}
.profile-avatar .material-symbols-outlined {
  font-size: 36px;
}

.profile-info .profile-field {
  margin-bottom: 1rem;
}
.profile-info .profile-field:last-child {
  margin-bottom: 0;
}
.profile-info .profile-label {
  display: block;
  font-weight: 500;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.profile-info .profile-value {
  font-size: 1rem;
  color: #000000;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e1e5e9;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-actions .btn {
  justify-content: flex-start;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-actions .btn .material-symbols-outlined {
  font-size: 20px;
}
.profile-actions .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.profile-actions .btn:active:not(:disabled) {
  transform: translateY(0);
}
.profile-actions .btn.btn-secondary {
  background-color: #f8f9fa;
  color: #495057;
  border: 2px solid #dee2e6;
}
.profile-actions .btn.btn-secondary:hover:not(:disabled) {
  background-color: #e9ecef;
  border-color: #adb5bd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.profile-actions .btn.btn-danger {
  background-color: #dc3545;
  color: white;
  border: none;
}
.profile-actions .btn.btn-danger:hover:not(:disabled) {
  background-color: #c82333;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}
.modal-actions .btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.modal-actions .btn .material-symbols-outlined {
  font-size: 20px;
}
.modal-actions .btn.btn-primary {
  background-color: #004F7D;
  color: white;
  border: none;
}
.modal-actions .btn.btn-primary:hover:not(:disabled) {
  background-color: #004F7D;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 79, 125, 0.3);
}
.modal-actions .btn.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.modal-actions .btn.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.modal-actions .btn.btn-secondary {
  background: none;
  border: 2px solid #999;
  color: #999;
}
.modal-actions .btn.btn-secondary:hover:not(:disabled) {
  background-color: #999;
  color: white;
}
.modal-actions .btn.btn-danger {
  background-color: #d32f2f;
  color: white;
  border: none;
}
.modal-actions .btn.btn-danger:hover:not(:disabled) {
  background-color: #b71c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}
.modal-actions .btn.btn-danger:active:not(:disabled) {
  transform: translateY(0);
}

.success-display {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.error-display {
  background-color: #ffebee;
  color: #c62828;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #ffcdd2;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .profile-card {
    width: calc(100% - 8rem);
    margin: 0 4rem;
    border-radius: 8px;
    min-width: unset;
  }
  .profile-section {
    padding: 1.5rem;
  }
  .profile-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .profile-section-header .profile-avatar {
    width: 50px;
    height: 50px;
  }
  .profile-section-header .profile-avatar .material-symbols-outlined {
    font-size: 28px;
  }
  .profile-actions .btn {
    font-size: 0.9rem;
    padding: 0.625rem 0.875rem;
  }
}
@media (max-width: 480px) {
  .profile-card {
    width: calc(100% - 2rem);
    margin: 0 1rem;
  }
  .profile-section {
    padding: 1rem;
  }
  .profile-section-header h2 {
    font-size: 1.1rem;
  }
  .profile-actions .btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}
/* Responsive Design */
@media (max-width: 768px) {
  .side-menu {
    width: 280px;
  }
  body.menu-open .menu-puppet {
    width: 0;
  }
  /* Header adjustments for mobile when menu is open */
  body.menu-open .header {
    margin-left: 280px;
    width: calc(100% - 280px);
  }
  .header .back-button .back-text {
    display: none;
  }
  .search-controls {
    margin: 0 8px;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .projects-list {
    margin: 0 8px;
  }
  .container {
    padding: 0 0.5rem;
  }
  .main-content {
    padding: 1rem 0;
  }
  .modal {
    width: 95%;
    max-height: 95vh;
    padding: 1.5rem;
  }
  .modal-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }
  .modal-title {
    font-size: 1.3rem;
  }
  .modal-content {
    padding: 0 1rem 1rem 1rem;
  }
  .project-item {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  .project-item .project-actions {
    opacity: 1;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
  }
  .chat-area {
    padding: 0.75rem;
  }
  .input-container {
    border-radius: 20px;
    padding: 10px 10px 10px 16px;
  }
  .message-input {
    font-size: 0.95rem;
  }
  .attachment-button, .send-button {
    width: 36px;
    height: 36px;
  }
  .attachment-button .material-symbols-outlined, .send-button .material-symbols-outlined {
    font-size: 18px;
  }
  .file-preview-area {
    gap: 6px;
  }
  .file-bubble {
    padding: 6px 10px;
    font-size: 0.8rem;
    max-width: 150px;
  }
}
@media (max-width: 480px) {
  .header-info {
    padding: 0.75rem 0;
  }
  .page-title {
    font-size: 1.1rem;
  }
  .page-subtitle {
    font-size: 0.85rem;
  }
  .search-controls {
    margin: 0 4px;
    padding: 10px 12px;
    border-radius: 20px;
  }
  .search-input {
    font-size: 1rem;
  }
  .sort-btn, .search-clear {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
  }
  .add-project-btn {
    padding: 6px 10px;
    font-size: 0.9rem;
  }
  .projects-list {
    margin: 0 4px;
    border-radius: 8px;
  }
  .project-item {
    padding: 0.75rem;
  }
  .project-name {
    font-size: 1rem;
  }
  .project-description {
    font-size: 0.85rem;
  }
  .modal {
    width: 98%;
    max-height: 98vh;
    padding: 1rem;
    border-radius: 8px;
  }
  .modal-title {
    font-size: 1.2rem;
  }
  .close-modal {
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
  }
  .form-input {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
  .create-btn, .update-files-btn {
    padding: 12px 16px;
    font-size: 1rem;
  }
  .chat-area {
    padding: 0.5rem;
    gap: 0.75rem;
  }
  .input-area {
    padding: 0.75rem;
  }
  .input-container {
    border-radius: 18px;
    padding: 8px 8px 8px 12px;
    gap: 8px;
  }
  .message-input {
    font-size: 0.9rem;
    padding: 6px 0;
  }
  .attachment-button, .send-button {
    width: 32px;
    height: 32px;
    padding: 6px;
  }
  .attachment-button .material-symbols-outlined, .send-button .material-symbols-outlined {
    font-size: 16px;
  }
  .side-menu {
    width: 260px;
    top: 56px;
  }
  /* Header adjustments for small mobile when menu is open */
  body.menu-open .header {
    margin-left: 260px;
    width: calc(100% - 260px);
  }
  .session-item {
    padding: 0.75rem;
    margin: 0 0.75rem 0.5rem;
  }
  .session-name {
    font-size: 0.9rem;
  }
  .session-date {
    font-size: 0.75rem;
  }
  .side-menu-button {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
  .side-menu-button .material-symbols-outlined {
    font-size: 18px;
  }
}
/* Large screens optimization */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
  .header-content {
    max-width: 1400px;
  }
  .input-container {
    max-width: 1400px;
  }
  .main-content {
    padding: 2rem 0;
  }
  .search-controls {
    margin: 0 24px;
  }
  .projects-list {
    margin: 0 24px;
  }
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  .search-controls, .projects-list, .modal {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  }
  .input-container {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  }
}
/* Dark mode media query (for future use) */
@media (prefers-color-scheme: dark) {
  /* Future dark mode styles can be added here */
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .side-menu {
    transition: none;
  }
  .menu-puppet {
    transition: none;
  }
  .header {
    transition: none !important;
  }
  .menu-button.spinning .menu-icon {
    transform: none !important;
  }
  .side-menu-close.spinning .material-symbols-outlined {
    transform: none !important;
  }
}
/* Print styles */
@media print {
  .header, .input-area, .side-menu, .scroll-bottom-button {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .main-content, .chat-area {
    overflow: visible !important;
    max-height: none !important;
  }
  .modal-overlay {
    display: none !important;
  }
}